From 67cf1785b82a60404bd1b44b65aad34bd40a3025 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Thu, 1 Feb 2024 18:13:30 +0530
Subject: [PATCH 01/58] chore: breadcrumb component improvement (#3537)

* chore: breadcrumb component improvement

* chore: code refactor
---
 packages/ui/src/breadcrumbs/breadcrumbs.tsx   | 39 ++------------
 web/components/common/breadcrumb-link.tsx     | 36 +++++++++++++
 web/components/common/index.ts                |  1 +
 web/components/headers/cycle-issues.tsx       | 39 ++++++++------
 web/components/headers/cycles.tsx             | 34 ++++++------
 web/components/headers/global-issues.tsx      | 21 +++++---
 web/components/headers/module-issues.tsx      | 39 ++++++++------
 web/components/headers/modules-list.tsx       | 34 ++++++------
 web/components/headers/page-details.tsx       | 49 ++++++++++-------
 web/components/headers/pages.tsx              | 34 ++++++------
 .../headers/profile-preferences.tsx           |  3 +-
 web/components/headers/profile-settings.tsx   | 13 +++--
 .../project-archived-issue-details.tsx        | 50 ++++++++++-------
 .../headers/project-archived-issues.tsx       | 39 ++++++++------
 .../headers/project-draft-issues.tsx          | 36 +++++++------
 web/components/headers/project-inbox.tsx      | 36 +++++++------
 .../headers/project-issue-details.tsx         | 50 ++++++++++-------
 web/components/headers/project-issues.tsx     | 54 ++++++++++---------
 web/components/headers/project-settings.tsx   | 40 ++++++++------
 .../headers/project-view-issues.tsx           | 47 +++++++++-------
 web/components/headers/project-views.tsx      | 44 ++++++++-------
 web/components/headers/projects.tsx           |  6 +--
 web/components/headers/user-profile.tsx       |  5 +-
 .../headers/workspace-active-cycles.tsx       | 11 ++--
 .../headers/workspace-analytics.tsx           |  6 ++-
 .../headers/workspace-dashboard.tsx           |  7 +--
 web/components/headers/workspace-settings.tsx | 17 ++++--
 web/layouts/admin-layout/header.tsx           | 13 +++--
 28 files changed, 480 insertions(+), 323 deletions(-)
 create mode 100644 web/components/common/breadcrumb-link.tsx

diff --git a/packages/ui/src/breadcrumbs/breadcrumbs.tsx b/packages/ui/src/breadcrumbs/breadcrumbs.tsx
index e82944c03..0f09764ac 100644
--- a/packages/ui/src/breadcrumbs/breadcrumbs.tsx
+++ b/packages/ui/src/breadcrumbs/breadcrumbs.tsx
@@ -2,8 +2,6 @@ import * as React from "react";
 
 // icons
 import { ChevronRight } from "lucide-react";
-// components
-import { Tooltip } from "../tooltip";
 
 type BreadcrumbsProps = {
   children: any;
@@ -25,42 +23,11 @@ const Breadcrumbs = ({ children }: BreadcrumbsProps) => (
 type Props = {
   type?: "text" | "component";
   component?: React.ReactNode;
-  label?: string;
-  icon?: React.ReactNode;
-  link?: string;
+  link?: JSX.Element;
 };
 const BreadcrumbItem: React.FC<Props> = (props) => {
-  const { type = "text", component, label, icon, link } = props;
-  return (
-    <>
-      {type != "text" ? (
-        <div className="flex items-center space-x-2">{component}</div>
-      ) : (
-        <Tooltip tooltipContent={label} position="bottom">
-          <li className="flex items-center space-x-2">
-            <div className="flex flex-wrap items-center gap-2.5">
-              {link ? (
-                <a
-                  className="flex items-center gap-1 text-sm font-medium text-custom-text-300 hover:text-custom-text-100"
-                  href={link}
-                >
-                  {icon && (
-                    <div className="flex h-5 w-5 items-center justify-center overflow-hidden !text-[1rem]">{icon}</div>
-                  )}
-                  <div className="relative line-clamp-1 block max-w-[150px] overflow-hidden truncate">{label}</div>
-                </a>
-              ) : (
-                <div className="flex cursor-default items-center gap-1 text-sm font-medium text-custom-text-100">
-                  {icon && <div className="flex h-5 w-5 items-center justify-center overflow-hidden">{icon}</div>}
-                  <div className="relative line-clamp-1 block max-w-[150px] overflow-hidden truncate">{label}</div>
-                </div>
-              )}
-            </div>
-          </li>
-        </Tooltip>
-      )}
-    </>
-  );
+  const { type = "text", component, link } = props;
+  return <>{type != "text" ? <div className="flex items-center space-x-2">{component}</div> : link}</>;
 };
 
 Breadcrumbs.BreadcrumbItem = BreadcrumbItem;
diff --git a/web/components/common/breadcrumb-link.tsx b/web/components/common/breadcrumb-link.tsx
new file mode 100644
index 000000000..aebd7fc02
--- /dev/null
+++ b/web/components/common/breadcrumb-link.tsx
@@ -0,0 +1,36 @@
+import { Tooltip } from "@plane/ui";
+import Link from "next/link";
+
+type Props = {
+  label?: string;
+  href?: string;
+  icon?: React.ReactNode | undefined;
+};
+
+export const BreadcrumbLink: React.FC<Props> = (props) => {
+  const { href, label, icon } = props;
+  return (
+    <Tooltip tooltipContent={label} position="bottom">
+      <li className="flex items-center space-x-2">
+        <div className="flex flex-wrap items-center gap-2.5">
+          {href ? (
+            <Link
+              className="flex items-center gap-1 text-sm font-medium text-custom-text-300 hover:text-custom-text-100"
+              href={href}
+            >
+              {icon && (
+                <div className="flex h-5 w-5 items-center justify-center overflow-hidden !text-[1rem]">{icon}</div>
+              )}
+              <div className="relative line-clamp-1 block max-w-[150px] overflow-hidden truncate">{label}</div>
+            </Link>
+          ) : (
+            <div className="flex cursor-default items-center gap-1 text-sm font-medium text-custom-text-100">
+              {icon && <div className="flex h-5 w-5 items-center justify-center overflow-hidden">{icon}</div>}
+              <div className="relative line-clamp-1 block max-w-[150px] overflow-hidden truncate">{label}</div>
+            </div>
+          )}
+        </div>
+      </li>
+    </Tooltip>
+  );
+};
diff --git a/web/components/common/index.ts b/web/components/common/index.ts
index 04aaa8512..0eff24d93 100644
--- a/web/components/common/index.ts
+++ b/web/components/common/index.ts
@@ -1,3 +1,4 @@
 export * from "./product-updates-modal";
 export * from "./empty-state";
 export * from "./latest-feature-block";
+export * from "./breadcrumb-link";
diff --git a/web/components/headers/cycle-issues.tsx b/web/components/headers/cycle-issues.tsx
index fc0075030..8e2ceab10 100644
--- a/web/components/headers/cycle-issues.tsx
+++ b/web/components/headers/cycle-issues.tsx
@@ -18,6 +18,7 @@ import useLocalStorage from "hooks/use-local-storage";
 import { DisplayFiltersSelection, FiltersDropdown, FilterSelection, LayoutSelection } from "components/issues";
 import { ProjectAnalyticsModal } from "components/analytics";
 import { SidebarHamburgerToggle } from "components/core/sidebar/sidebar-menu-hamburger-toggle";
+import { BreadcrumbLink } from "components/common";
 // ui
 import { Breadcrumbs, Button, ContrastIcon, CustomMenu } from "@plane/ui";
 // icons
@@ -151,25 +152,33 @@ export const CycleIssuesHeader: React.FC = observer(() => {
           <Breadcrumbs>
             <Breadcrumbs.BreadcrumbItem
               type="text"
-              icon={
-                currentProjectDetails?.emoji ? (
-                  renderEmoji(currentProjectDetails.emoji)
-                ) : currentProjectDetails?.icon_prop ? (
-                  renderEmoji(currentProjectDetails.icon_prop)
-                ) : (
-                  <span className="flex h-4 w-4 items-center justify-center rounded bg-gray-700 uppercase text-white">
-                    {currentProjectDetails?.name.charAt(0)}
-                  </span>
-                )
+              link={
+                <BreadcrumbLink
+                  label={currentProjectDetails?.name ?? "Project"}
+                  href={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`}
+                  icon={
+                    currentProjectDetails?.emoji ? (
+                      renderEmoji(currentProjectDetails.emoji)
+                    ) : currentProjectDetails?.icon_prop ? (
+                      renderEmoji(currentProjectDetails.icon_prop)
+                    ) : (
+                      <span className="flex h-4 w-4 items-center justify-center rounded bg-gray-700 uppercase text-white">
+                        {currentProjectDetails?.name.charAt(0)}
+                      </span>
+                    )
+                  }
+                />
               }
-              label={currentProjectDetails?.name ?? "Project"}
-              link={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`}
             />
             <Breadcrumbs.BreadcrumbItem
               type="text"
-              icon={<ContrastIcon className="h-4 w-4 text-custom-text-300" />}
-              label="Cycles"
-              link={`/${workspaceSlug}/projects/${projectId}/cycles`}
+              link={
+                <BreadcrumbLink
+                  label="Cycles"
+                  href={`/${workspaceSlug}/projects/${projectId}/cycles`}
+                  icon={<ContrastIcon className="h-4 w-4 text-custom-text-300" />}
+                />
+              }
             />
             <Breadcrumbs.BreadcrumbItem
               type="component"
diff --git a/web/components/headers/cycles.tsx b/web/components/headers/cycles.tsx
index cf2d97ab6..fbf1ca6e2 100644
--- a/web/components/headers/cycles.tsx
+++ b/web/components/headers/cycles.tsx
@@ -11,6 +11,7 @@ import { renderEmoji } from "helpers/emoji.helper";
 import { EUserProjectRoles } from "constants/project";
 // components
 import { SidebarHamburgerToggle } from "components/core/sidebar/sidebar-menu-hamburger-toggle";
+import { BreadcrumbLink } from "components/common";
 
 export const CyclesHeader: FC = observer(() => {
   // router
@@ -32,29 +33,32 @@ export const CyclesHeader: FC = observer(() => {
   return (
     <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
       <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
-        <SidebarHamburgerToggle/>
+        <SidebarHamburgerToggle />
         <div>
           <Breadcrumbs>
             <Breadcrumbs.BreadcrumbItem
               type="text"
-              label={currentProjectDetails?.name ?? "Project"}
-              icon={
-                currentProjectDetails?.emoji ? (
-                  renderEmoji(currentProjectDetails.emoji)
-                ) : currentProjectDetails?.icon_prop ? (
-                  renderEmoji(currentProjectDetails.icon_prop)
-                ) : (
-                  <span className="flex h-4 w-4 items-center justify-center rounded bg-gray-700 uppercase text-white">
-                    {currentProjectDetails?.name.charAt(0)}
-                  </span>
-                )
+              link={
+                <BreadcrumbLink
+                  label={currentProjectDetails?.name ?? "Project"}
+                  href={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`}
+                  icon={
+                    currentProjectDetails?.emoji ? (
+                      renderEmoji(currentProjectDetails.emoji)
+                    ) : currentProjectDetails?.icon_prop ? (
+                      renderEmoji(currentProjectDetails.icon_prop)
+                    ) : (
+                      <span className="flex h-4 w-4 items-center justify-center rounded bg-gray-700 uppercase text-white">
+                        {currentProjectDetails?.name.charAt(0)}
+                      </span>
+                    )
+                  }
+                />
               }
-              link={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`}
             />
             <Breadcrumbs.BreadcrumbItem
               type="text"
-              icon={<ContrastIcon className="h-4 w-4 text-custom-text-300" />}
-              label="Cycles"
+              link={<BreadcrumbLink label="Cycles" icon={<ContrastIcon className="h-4 w-4 text-custom-text-300" />} />}
             />
           </Breadcrumbs>
         </div>
diff --git a/web/components/headers/global-issues.tsx b/web/components/headers/global-issues.tsx
index debcbc213..cca1a972b 100644
--- a/web/components/headers/global-issues.tsx
+++ b/web/components/headers/global-issues.tsx
@@ -8,6 +8,7 @@ import { useLabel, useMember, useUser, useIssues } from "hooks/store";
 import { DisplayFiltersSelection, FiltersDropdown, FilterSelection } from "components/issues";
 import { CreateUpdateWorkspaceViewModal } from "components/workspace";
 import { SidebarHamburgerToggle } from "components/core/sidebar/sidebar-menu-hamburger-toggle";
+import { BreadcrumbLink } from "components/common";
 // ui
 import { Breadcrumbs, Button, LayersIcon, PhotoFilterIcon, Tooltip } from "@plane/ui";
 // icons
@@ -108,18 +109,22 @@ export const GlobalIssuesHeader: React.FC<Props> = observer((props) => {
       <CreateUpdateWorkspaceViewModal isOpen={createViewModal} onClose={() => setCreateViewModal(false)} />
       <div className="relative z-10 flex h-[3.75rem] w-full items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
         <div className="relative flex gap-2">
-        <SidebarHamburgerToggle/>
+          <SidebarHamburgerToggle />
           <Breadcrumbs>
             <Breadcrumbs.BreadcrumbItem
               type="text"
-              icon={
-                activeLayout === "spreadsheet" ? (
-                  <LayersIcon className="h-4 w-4 text-custom-text-300" />
-                ) : (
-                  <PhotoFilterIcon className="h-4 w-4 text-custom-text-300" />
-                )
+              link={
+                <BreadcrumbLink
+                  label={`All ${activeLayout === "spreadsheet" ? "Issues" : "Views"}`}
+                  icon={
+                    activeLayout === "spreadsheet" ? (
+                      <LayersIcon className="h-4 w-4 text-custom-text-300" />
+                    ) : (
+                      <PhotoFilterIcon className="h-4 w-4 text-custom-text-300" />
+                    )
+                  }
+                />
               }
-              label={`All ${activeLayout === "spreadsheet" ? "Issues" : "Views"}`}
             />
           </Breadcrumbs>
         </div>
diff --git a/web/components/headers/module-issues.tsx b/web/components/headers/module-issues.tsx
index 84a284f2e..5ec67a3d7 100644
--- a/web/components/headers/module-issues.tsx
+++ b/web/components/headers/module-issues.tsx
@@ -18,6 +18,7 @@ import useLocalStorage from "hooks/use-local-storage";
 import { DisplayFiltersSelection, FiltersDropdown, FilterSelection, LayoutSelection } from "components/issues";
 import { ProjectAnalyticsModal } from "components/analytics";
 import { SidebarHamburgerToggle } from "components/core/sidebar/sidebar-menu-hamburger-toggle";
+import { BreadcrumbLink } from "components/common";
 // ui
 import { Breadcrumbs, Button, CustomMenu, DiceIcon } from "@plane/ui";
 // icons
@@ -154,25 +155,33 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
           <Breadcrumbs>
             <Breadcrumbs.BreadcrumbItem
               type="text"
-              icon={
-                currentProjectDetails?.emoji ? (
-                  renderEmoji(currentProjectDetails.emoji)
-                ) : currentProjectDetails?.icon_prop ? (
-                  renderEmoji(currentProjectDetails.icon_prop)
-                ) : (
-                  <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
-                    {currentProjectDetails?.name.charAt(0)}
-                  </span>
-                )
+              link={
+                <BreadcrumbLink
+                  label={currentProjectDetails?.name ?? "Project"}
+                  href={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`}
+                  icon={
+                    currentProjectDetails?.emoji ? (
+                      renderEmoji(currentProjectDetails.emoji)
+                    ) : currentProjectDetails?.icon_prop ? (
+                      renderEmoji(currentProjectDetails.icon_prop)
+                    ) : (
+                      <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
+                        {currentProjectDetails?.name.charAt(0)}
+                      </span>
+                    )
+                  }
+                />
               }
-              label={currentProjectDetails?.name ?? "Project"}
-              link={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`}
             />
             <Breadcrumbs.BreadcrumbItem
               type="text"
-              icon={<DiceIcon className="h-4 w-4 text-custom-text-300" />}
-              label="Modules"
-              link={`/${workspaceSlug}/projects/${projectId}/modules`}
+              link={
+                <BreadcrumbLink
+                  href={`/${workspaceSlug}/projects/${projectId}/modules`}
+                  label="Modules"
+                  icon={<DiceIcon className="h-4 w-4 text-custom-text-300" />}
+                />
+              }
             />
             <Breadcrumbs.BreadcrumbItem
               type="component"
diff --git a/web/components/headers/modules-list.tsx b/web/components/headers/modules-list.tsx
index 1f6f3a7e5..a0a7227f7 100644
--- a/web/components/headers/modules-list.tsx
+++ b/web/components/headers/modules-list.tsx
@@ -13,6 +13,7 @@ import { MODULE_VIEW_LAYOUTS } from "constants/module";
 import { EUserProjectRoles } from "constants/project";
 // components
 import { SidebarHamburgerToggle } from "components/core/sidebar/sidebar-menu-hamburger-toggle";
+import { BreadcrumbLink } from "components/common";
 
 export const ModulesListHeader: React.FC = observer(() => {
   // router
@@ -33,29 +34,32 @@ export const ModulesListHeader: React.FC = observer(() => {
   return (
     <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
       <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
-        <SidebarHamburgerToggle/>
+        <SidebarHamburgerToggle />
         <div>
           <Breadcrumbs>
             <Breadcrumbs.BreadcrumbItem
               type="text"
-              label={currentProjectDetails?.name ?? "Project"}
-              icon={
-                currentProjectDetails?.emoji ? (
-                  renderEmoji(currentProjectDetails.emoji)
-                ) : currentProjectDetails?.icon_prop ? (
-                  renderEmoji(currentProjectDetails.icon_prop)
-                ) : (
-                  <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
-                    {currentProjectDetails?.name.charAt(0)}
-                  </span>
-                )
+              link={
+                <BreadcrumbLink
+                  href={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`}
+                  label={currentProjectDetails?.name ?? "Project"}
+                  icon={
+                    currentProjectDetails?.emoji ? (
+                      renderEmoji(currentProjectDetails.emoji)
+                    ) : currentProjectDetails?.icon_prop ? (
+                      renderEmoji(currentProjectDetails.icon_prop)
+                    ) : (
+                      <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
+                        {currentProjectDetails?.name.charAt(0)}
+                      </span>
+                    )
+                  }
+                />
               }
-              link={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`}
             />
             <Breadcrumbs.BreadcrumbItem
               type="text"
-              icon={<DiceIcon className="h-4 w-4 text-custom-text-300" />}
-              label="Modules"
+              link={<BreadcrumbLink label="Modules" icon={<DiceIcon className="h-4 w-4 text-custom-text-300" />} />}
             />
           </Breadcrumbs>
         </div>
diff --git a/web/components/headers/page-details.tsx b/web/components/headers/page-details.tsx
index d2a959817..83595af60 100644
--- a/web/components/headers/page-details.tsx
+++ b/web/components/headers/page-details.tsx
@@ -10,6 +10,7 @@ import { Breadcrumbs, Button } from "@plane/ui";
 import { renderEmoji } from "helpers/emoji.helper";
 // components
 import { SidebarHamburgerToggle } from "components/core/sidebar/sidebar-menu-hamburger-toggle";
+import { BreadcrumbLink } from "components/common";
 
 export interface IPagesHeaderProps {
   showButton?: boolean;
@@ -29,35 +30,47 @@ export const PageDetailsHeader: FC<IPagesHeaderProps> = observer((props) => {
   return (
     <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
       <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
-        <SidebarHamburgerToggle/>
+        <SidebarHamburgerToggle />
         <div>
           <Breadcrumbs>
             <Breadcrumbs.BreadcrumbItem
               type="text"
-              label={currentProjectDetails?.name ?? "Project"}
-              icon={
-                currentProjectDetails?.emoji ? (
-                  renderEmoji(currentProjectDetails.emoji)
-                ) : currentProjectDetails?.icon_prop ? (
-                  renderEmoji(currentProjectDetails.icon_prop)
-                ) : (
-                  <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
-                    {currentProjectDetails?.name.charAt(0)}
-                  </span>
-                )
+              link={
+                <BreadcrumbLink
+                  href={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`}
+                  label={currentProjectDetails?.name ?? "Project"}
+                  icon={
+                    currentProjectDetails?.emoji ? (
+                      renderEmoji(currentProjectDetails.emoji)
+                    ) : currentProjectDetails?.icon_prop ? (
+                      renderEmoji(currentProjectDetails.icon_prop)
+                    ) : (
+                      <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
+                        {currentProjectDetails?.name.charAt(0)}
+                      </span>
+                    )
+                  }
+                />
               }
-              link={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`}
             />
             <Breadcrumbs.BreadcrumbItem
               type="text"
-              icon={<FileText className="h-4 w-4 text-custom-text-300" />}
-              label="Pages"
-              link={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/pages`}
+              link={
+                <BreadcrumbLink
+                  href={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/pages`}
+                  label="Pages"
+                  icon={<FileText className="h-4 w-4 text-custom-text-300" />}
+                />
+              }
             />
             <Breadcrumbs.BreadcrumbItem
               type="text"
-              icon={<FileText className="h-4 w-4 text-custom-text-300" />}
-              label={pageDetails?.name ?? "Page"}
+              link={
+                <BreadcrumbLink
+                  label={pageDetails?.name ?? "Page"}
+                  icon={<FileText className="h-4 w-4 text-custom-text-300" />}
+                />
+              }
             />
           </Breadcrumbs>
         </div>
diff --git a/web/components/headers/pages.tsx b/web/components/headers/pages.tsx
index 2afb549a0..28116b323 100644
--- a/web/components/headers/pages.tsx
+++ b/web/components/headers/pages.tsx
@@ -11,6 +11,7 @@ import { renderEmoji } from "helpers/emoji.helper";
 import { EUserProjectRoles } from "constants/project";
 // components
 import { SidebarHamburgerToggle } from "components/core/sidebar/sidebar-menu-hamburger-toggle";
+import { BreadcrumbLink } from "components/common";
 
 export const PagesHeader = observer(() => {
   // router
@@ -31,29 +32,32 @@ export const PagesHeader = observer(() => {
   return (
     <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
       <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
-        <SidebarHamburgerToggle/>
+        <SidebarHamburgerToggle />
         <div>
           <Breadcrumbs>
             <Breadcrumbs.BreadcrumbItem
               type="text"
-              label={currentProjectDetails?.name ?? "Project"}
-              icon={
-                currentProjectDetails?.emoji ? (
-                  renderEmoji(currentProjectDetails.emoji)
-                ) : currentProjectDetails?.icon_prop ? (
-                  renderEmoji(currentProjectDetails.icon_prop)
-                ) : (
-                  <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
-                    {currentProjectDetails?.name.charAt(0)}
-                  </span>
-                )
+              link={
+                <BreadcrumbLink
+                  href={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`}
+                  label={currentProjectDetails?.name ?? "Project"}
+                  icon={
+                    currentProjectDetails?.emoji ? (
+                      renderEmoji(currentProjectDetails.emoji)
+                    ) : currentProjectDetails?.icon_prop ? (
+                      renderEmoji(currentProjectDetails.icon_prop)
+                    ) : (
+                      <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
+                        {currentProjectDetails?.name.charAt(0)}
+                      </span>
+                    )
+                  }
+                />
               }
-              link={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`}
             />
             <Breadcrumbs.BreadcrumbItem
               type="text"
-              icon={<FileText className="h-4 w-4 text-custom-text-300" />}
-              label="Pages"
+              link={<BreadcrumbLink label="Pages" icon={<FileText className="h-4 w-4 text-custom-text-300" />} />}
             />
           </Breadcrumbs>
         </div>
diff --git a/web/components/headers/profile-preferences.tsx b/web/components/headers/profile-preferences.tsx
index 0c6329ac9..e9f37bf6e 100644
--- a/web/components/headers/profile-preferences.tsx
+++ b/web/components/headers/profile-preferences.tsx
@@ -1,12 +1,13 @@
 // components
 import { Breadcrumbs } from "@plane/ui";
+import { BreadcrumbLink } from "components/common";
 
 export const ProfilePreferencesHeader = () => (
   <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
     <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
       <div>
         <Breadcrumbs>
-          <Breadcrumbs.BreadcrumbItem type="text" label="My Profile Preferences" />
+          <Breadcrumbs.BreadcrumbItem type="text" link={<BreadcrumbLink label="My Profile Preferences" />} />
         </Breadcrumbs>
       </div>
     </div>
diff --git a/web/components/headers/profile-settings.tsx b/web/components/headers/profile-settings.tsx
index 76e5e6fcc..24c69f093 100644
--- a/web/components/headers/profile-settings.tsx
+++ b/web/components/headers/profile-settings.tsx
@@ -2,6 +2,7 @@ import { FC } from "react";
 // ui
 import { Breadcrumbs } from "@plane/ui";
 import { Settings } from "lucide-react";
+import { BreadcrumbLink } from "components/common";
 
 interface IProfileSettingHeader {
   title: string;
@@ -17,11 +18,15 @@ export const ProfileSettingsHeader: FC<IProfileSettingHeader> = (props) => {
           <Breadcrumbs>
             <Breadcrumbs.BreadcrumbItem
               type="text"
-              label="My Profile"
-              icon={<Settings className="h-4 w-4 text-custom-text-300" />}
-              link="/profile"
+              link={
+                <BreadcrumbLink
+                  href="/profile"
+                  label="My Profile"
+                  icon={<Settings className="h-4 w-4 text-custom-text-300" />}
+                />
+              }
             />
-            <Breadcrumbs.BreadcrumbItem type="text" label={title} />
+            <Breadcrumbs.BreadcrumbItem type="text" link={<BreadcrumbLink label={title} />} />
           </Breadcrumbs>
         </div>
       </div>
diff --git a/web/components/headers/project-archived-issue-details.tsx b/web/components/headers/project-archived-issue-details.tsx
index e393450af..3b3e05f1a 100644
--- a/web/components/headers/project-archived-issue-details.tsx
+++ b/web/components/headers/project-archived-issue-details.tsx
@@ -16,6 +16,7 @@ import { IssueArchiveService } from "services/issue";
 import { renderEmoji } from "helpers/emoji.helper";
 // components
 import { SidebarHamburgerToggle } from "components/core/sidebar/sidebar-menu-hamburger-toggle";
+import { BreadcrumbLink } from "components/common";
 
 const issueArchiveService = new IssueArchiveService();
 
@@ -41,37 +42,50 @@ export const ProjectArchivedIssueDetailsHeader: FC = observer(() => {
   return (
     <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
       <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
-        <SidebarHamburgerToggle/>
+        <SidebarHamburgerToggle />
         <div>
           <Breadcrumbs>
             <Breadcrumbs.BreadcrumbItem
               type="text"
-              icon={
-                currentProjectDetails?.emoji ? (
-                  renderEmoji(currentProjectDetails.emoji)
-                ) : currentProjectDetails?.icon_prop ? (
-                  renderEmoji(currentProjectDetails.icon_prop)
-                ) : (
-                  <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
-                    {currentProjectDetails?.name.charAt(0)}
-                  </span>
-                )
+              link={
+                <BreadcrumbLink
+                  href={`/${workspaceSlug}/projects`}
+                  label={currentProjectDetails?.name ?? "Project"}
+                  icon={
+                    currentProjectDetails?.emoji ? (
+                      renderEmoji(currentProjectDetails.emoji)
+                    ) : currentProjectDetails?.icon_prop ? (
+                      renderEmoji(currentProjectDetails.icon_prop)
+                    ) : (
+                      <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
+                        {currentProjectDetails?.name.charAt(0)}
+                      </span>
+                    )
+                  }
+                />
               }
-              label={currentProjectDetails?.name ?? "Project"}
-              link={`/${workspaceSlug}/projects`}
             />
 
             <Breadcrumbs.BreadcrumbItem
               type="text"
-              icon={<LayersIcon className="h-4 w-4 text-custom-text-300" />}
-              label="Archived Issues"
-              link={`/${workspaceSlug}/projects/${projectId}/archived-issues`}
+              link={
+                <BreadcrumbLink
+                  href={`/${workspaceSlug}/projects/${projectId}/archived-issues`}
+                  label="Archived Issues"
+                  icon={<LayersIcon className="h-4 w-4 text-custom-text-300" />}
+                />
+              }
             />
 
             <Breadcrumbs.BreadcrumbItem
               type="text"
-              label={
-                `${getProjectById(issueDetails?.project_id || "")?.identifier}-${issueDetails?.sequence_id}` ?? "..."
+              link={
+                <BreadcrumbLink
+                  label={
+                    `${getProjectById(issueDetails?.project_id || "")?.identifier}-${issueDetails?.sequence_id}` ??
+                    "..."
+                  }
+                />
               }
             />
           </Breadcrumbs>
diff --git a/web/components/headers/project-archived-issues.tsx b/web/components/headers/project-archived-issues.tsx
index ee1265374..b7ca78ede 100644
--- a/web/components/headers/project-archived-issues.tsx
+++ b/web/components/headers/project-archived-issues.tsx
@@ -11,6 +11,7 @@ import { Breadcrumbs, LayersIcon } from "@plane/ui";
 // components
 import { DisplayFiltersSelection, FilterSelection, FiltersDropdown } from "components/issues";
 import { SidebarHamburgerToggle } from "components/core/sidebar/sidebar-menu-hamburger-toggle";
+import { BreadcrumbLink } from "components/common";
 // helpers
 import { renderEmoji } from "helpers/emoji.helper";
 // types
@@ -71,7 +72,7 @@ export const ProjectArchivedIssuesHeader: FC = observer(() => {
   return (
     <div className="relative z-10 flex h-14 w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
       <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
-        <SidebarHamburgerToggle/>
+        <SidebarHamburgerToggle />
         <div className="block md:hidden">
           <button
             type="button"
@@ -85,25 +86,33 @@ export const ProjectArchivedIssuesHeader: FC = observer(() => {
           <Breadcrumbs>
             <Breadcrumbs.BreadcrumbItem
               type="text"
-              icon={
-                currentProjectDetails?.emoji ? (
-                  renderEmoji(currentProjectDetails.emoji)
-                ) : currentProjectDetails?.icon_prop ? (
-                  renderEmoji(currentProjectDetails.icon_prop)
-                ) : (
-                  <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
-                    {currentProjectDetails?.name.charAt(0)}
-                  </span>
-                )
+              link={
+                <BreadcrumbLink
+                  href={`/${workspaceSlug}/projects`}
+                  label={currentProjectDetails?.name ?? "Project"}
+                  icon={
+                    currentProjectDetails?.emoji ? (
+                      renderEmoji(currentProjectDetails.emoji)
+                    ) : currentProjectDetails?.icon_prop ? (
+                      renderEmoji(currentProjectDetails.icon_prop)
+                    ) : (
+                      <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
+                        {currentProjectDetails?.name.charAt(0)}
+                      </span>
+                    )
+                  }
+                />
               }
-              label={currentProjectDetails?.name ?? "Project"}
-              link={`/${workspaceSlug}/projects`}
             />
 
             <Breadcrumbs.BreadcrumbItem
               type="text"
-              icon={<LayersIcon className="h-4 w-4 text-custom-text-300" />}
-              label="Archived Issues"
+              link={
+                <BreadcrumbLink
+                  label="Archived Issues"
+                  icon={<LayersIcon className="h-4 w-4 text-custom-text-300" />}
+                />
+              }
             />
           </Breadcrumbs>
         </div>
diff --git a/web/components/headers/project-draft-issues.tsx b/web/components/headers/project-draft-issues.tsx
index 10f07f779..0fe6a74c5 100644
--- a/web/components/headers/project-draft-issues.tsx
+++ b/web/components/headers/project-draft-issues.tsx
@@ -6,6 +6,7 @@ import { useIssues, useLabel, useMember, useProject, useProjectState } from "hoo
 // components
 import { DisplayFiltersSelection, FiltersDropdown, FilterSelection, LayoutSelection } from "components/issues";
 import { SidebarHamburgerToggle } from "components/core/sidebar/sidebar-menu-hamburger-toggle";
+import { BreadcrumbLink } from "components/common";
 // ui
 import { Breadcrumbs, LayersIcon } from "@plane/ui";
 // helper
@@ -75,30 +76,35 @@ export const ProjectDraftIssueHeader: FC = observer(() => {
   return (
     <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
       <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
-        <SidebarHamburgerToggle/>
+        <SidebarHamburgerToggle />
         <div>
           <Breadcrumbs>
             <Breadcrumbs.BreadcrumbItem
               type="text"
-              icon={
-                currentProjectDetails?.emoji ? (
-                  renderEmoji(currentProjectDetails.emoji)
-                ) : currentProjectDetails?.icon_prop ? (
-                  renderEmoji(currentProjectDetails.icon_prop)
-                ) : (
-                  <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
-                    {currentProjectDetails?.name.charAt(0)}
-                  </span>
-                )
+              link={
+                <BreadcrumbLink
+                  href={`/${workspaceSlug}/projects`}
+                  label={currentProjectDetails?.name ?? "Project"}
+                  icon={
+                    currentProjectDetails?.emoji ? (
+                      renderEmoji(currentProjectDetails.emoji)
+                    ) : currentProjectDetails?.icon_prop ? (
+                      renderEmoji(currentProjectDetails.icon_prop)
+                    ) : (
+                      <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
+                        {currentProjectDetails?.name.charAt(0)}
+                      </span>
+                    )
+                  }
+                />
               }
-              label={currentProjectDetails?.name ?? "Project"}
-              link={`/${workspaceSlug}/projects`}
             />
 
             <Breadcrumbs.BreadcrumbItem
               type="text"
-              icon={<LayersIcon className="h-4 w-4 text-custom-text-300" />}
-              label="Draft Issues"
+              link={
+                <BreadcrumbLink label="Inbox Issues" icon={<LayersIcon className="h-4 w-4 text-custom-text-300" />} />
+              }
             />
           </Breadcrumbs>
         </div>
diff --git a/web/components/headers/project-inbox.tsx b/web/components/headers/project-inbox.tsx
index 29ea9fc47..b5260edd7 100644
--- a/web/components/headers/project-inbox.tsx
+++ b/web/components/headers/project-inbox.tsx
@@ -9,6 +9,7 @@ import { Breadcrumbs, Button, LayersIcon } from "@plane/ui";
 // components
 import { CreateInboxIssueModal } from "components/inbox";
 import { SidebarHamburgerToggle } from "components/core/sidebar/sidebar-menu-hamburger-toggle";
+import { BreadcrumbLink } from "components/common";
 // helper
 import { renderEmoji } from "helpers/emoji.helper";
 
@@ -24,30 +25,35 @@ export const ProjectInboxHeader: FC = observer(() => {
   return (
     <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
       <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
-        <SidebarHamburgerToggle/>
+        <SidebarHamburgerToggle />
         <div>
           <Breadcrumbs>
             <Breadcrumbs.BreadcrumbItem
               type="text"
-              icon={
-                currentProjectDetails?.emoji ? (
-                  renderEmoji(currentProjectDetails.emoji)
-                ) : currentProjectDetails?.icon_prop ? (
-                  renderEmoji(currentProjectDetails.icon_prop)
-                ) : (
-                  <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
-                    {currentProjectDetails?.name.charAt(0)}
-                  </span>
-                )
+              link={
+                <BreadcrumbLink
+                  href={`/${workspaceSlug}/projects`}
+                  label={currentProjectDetails?.name ?? "Project"}
+                  icon={
+                    currentProjectDetails?.emoji ? (
+                      renderEmoji(currentProjectDetails.emoji)
+                    ) : currentProjectDetails?.icon_prop ? (
+                      renderEmoji(currentProjectDetails.icon_prop)
+                    ) : (
+                      <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
+                        {currentProjectDetails?.name.charAt(0)}
+                      </span>
+                    )
+                  }
+                />
               }
-              label={currentProjectDetails?.name ?? "Project"}
-              link={`/${workspaceSlug}/projects`}
             />
 
             <Breadcrumbs.BreadcrumbItem
               type="text"
-              icon={<LayersIcon className="h-4 w-4 text-custom-text-300" />}
-              label="Inbox Issues"
+              link={
+                <BreadcrumbLink label="Inbox Issues" icon={<LayersIcon className="h-4 w-4 text-custom-text-300" />} />
+              }
             />
           </Breadcrumbs>
         </div>
diff --git a/web/components/headers/project-issue-details.tsx b/web/components/headers/project-issue-details.tsx
index 7b45d3fcf..8d3a22682 100644
--- a/web/components/headers/project-issue-details.tsx
+++ b/web/components/headers/project-issue-details.tsx
@@ -14,6 +14,7 @@ import { IssueService } from "services/issue";
 import { ISSUE_DETAILS } from "constants/fetch-keys";
 // components
 import { SidebarHamburgerToggle } from "components/core/sidebar/sidebar-menu-hamburger-toggle";
+import { BreadcrumbLink } from "components/common";
 
 // services
 const issueService = new IssueService();
@@ -35,37 +36,50 @@ export const ProjectIssueDetailsHeader: FC = observer(() => {
   return (
     <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
       <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
-        <SidebarHamburgerToggle/>
+        <SidebarHamburgerToggle />
         <div>
           <Breadcrumbs>
             <Breadcrumbs.BreadcrumbItem
               type="text"
-              icon={
-                currentProjectDetails?.emoji ? (
-                  renderEmoji(currentProjectDetails.emoji)
-                ) : currentProjectDetails?.icon_prop ? (
-                  renderEmoji(currentProjectDetails.icon_prop)
-                ) : (
-                  <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
-                    {currentProjectDetails?.name.charAt(0)}
-                  </span>
-                )
+              link={
+                <BreadcrumbLink
+                  href={`/${workspaceSlug}/projects`}
+                  label={currentProjectDetails?.name ?? "Project"}
+                  icon={
+                    currentProjectDetails?.emoji ? (
+                      renderEmoji(currentProjectDetails.emoji)
+                    ) : currentProjectDetails?.icon_prop ? (
+                      renderEmoji(currentProjectDetails.icon_prop)
+                    ) : (
+                      <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
+                        {currentProjectDetails?.name.charAt(0)}
+                      </span>
+                    )
+                  }
+                />
               }
-              label={currentProjectDetails?.name ?? "Project"}
-              link={`/${workspaceSlug}/projects`}
             />
 
             <Breadcrumbs.BreadcrumbItem
               type="text"
-              icon={<LayersIcon className="h-4 w-4 text-custom-text-300" />}
-              label="Issues"
-              link={`/${workspaceSlug}/projects/${projectId}/issues`}
+              link={
+                <BreadcrumbLink
+                  href={`/${workspaceSlug}/projects/${projectId}/issues`}
+                  label="Issues"
+                  icon={<LayersIcon className="h-4 w-4 text-custom-text-300" />}
+                />
+              }
             />
 
             <Breadcrumbs.BreadcrumbItem
               type="text"
-              label={
-                `${getProjectById(issueDetails?.project_id || "")?.identifier}-${issueDetails?.sequence_id}` ?? "..."
+              link={
+                <BreadcrumbLink
+                  label={
+                    `${getProjectById(issueDetails?.project_id || "")?.identifier}-${issueDetails?.sequence_id}` ??
+                    "..."
+                  }
+                />
               }
             />
           </Breadcrumbs>
diff --git a/web/components/headers/project-issues.tsx b/web/components/headers/project-issues.tsx
index 04a7ecb64..29ecb16c7 100644
--- a/web/components/headers/project-issues.tsx
+++ b/web/components/headers/project-issues.tsx
@@ -9,6 +9,7 @@ import { useApplication, useLabel, useProject, useProjectState, useUser, useInbo
 import { DisplayFiltersSelection, FiltersDropdown, FilterSelection, LayoutSelection } from "components/issues";
 import { ProjectAnalyticsModal } from "components/analytics";
 import { SidebarHamburgerToggle } from "components/core/sidebar/sidebar-menu-hamburger-toggle";
+import { BreadcrumbLink } from "components/common";
 // ui
 import { Breadcrumbs, Button, LayersIcon } from "@plane/ui";
 // types
@@ -106,7 +107,7 @@ export const ProjectIssuesHeader: React.FC = observer(() => {
       />
       <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
         <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
-          <SidebarHamburgerToggle/>
+          <SidebarHamburgerToggle />
           <div className="block md:hidden">
             <button
               type="button"
@@ -120,35 +121,38 @@ export const ProjectIssuesHeader: React.FC = observer(() => {
             <Breadcrumbs>
               <Breadcrumbs.BreadcrumbItem
                 type="text"
-                icon={
-                  currentProjectDetails ? (
-                    currentProjectDetails?.emoji ? (
-                      <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded uppercase">
-                        {renderEmoji(currentProjectDetails.emoji)}
-                      </span>
-                    ) : currentProjectDetails?.icon_prop ? (
-                      <div className="grid h-7 w-7 flex-shrink-0 place-items-center">
-                        {renderEmoji(currentProjectDetails.icon_prop)}
-                      </div>
-                    ) : (
-                      <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
-                        {currentProjectDetails?.name.charAt(0)}
-                      </span>
-                    )
-                  ) : (
-                    <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded uppercase">
-                      <Briefcase className="h-4 w-4" />
-                    </span>
-                  )
+                link={
+                  <BreadcrumbLink
+                    href={`/${workspaceSlug}/projects`}
+                    label={currentProjectDetails?.name ?? "Project"}
+                    icon={
+                      currentProjectDetails ? (
+                        currentProjectDetails?.emoji ? (
+                          <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded uppercase">
+                            {renderEmoji(currentProjectDetails.emoji)}
+                          </span>
+                        ) : currentProjectDetails?.icon_prop ? (
+                          <div className="grid h-7 w-7 flex-shrink-0 place-items-center">
+                            {renderEmoji(currentProjectDetails.icon_prop)}
+                          </div>
+                        ) : (
+                          <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
+                            {currentProjectDetails?.name.charAt(0)}
+                          </span>
+                        )
+                      ) : (
+                        <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded uppercase">
+                          <Briefcase className="h-4 w-4" />
+                        </span>
+                      )
+                    }
+                  />
                 }
-                label={currentProjectDetails?.name ?? "Project"}
-                link={`/${workspaceSlug}/projects`}
               />
 
               <Breadcrumbs.BreadcrumbItem
                 type="text"
-                icon={<LayersIcon className="h-4 w-4 text-custom-text-300" />}
-                label="Issues"
+                link={<BreadcrumbLink label="Issues" icon={<LayersIcon className="h-4 w-4 text-custom-text-300" />} />}
               />
             </Breadcrumbs>
           </div>
diff --git a/web/components/headers/project-settings.tsx b/web/components/headers/project-settings.tsx
index eff05aba5..fdb033a21 100644
--- a/web/components/headers/project-settings.tsx
+++ b/web/components/headers/project-settings.tsx
@@ -11,6 +11,7 @@ import { useProject, useUser } from "hooks/store";
 import { EUserProjectRoles, PROJECT_SETTINGS_LINKS } from "constants/project";
 // components
 import { SidebarHamburgerToggle } from "components/core/sidebar/sidebar-menu-hamburger-toggle";
+import { BreadcrumbLink } from "components/common";
 
 export interface IProjectSettingHeader {
   title: string;
@@ -38,22 +39,26 @@ export const ProjectSettingHeader: FC<IProjectSettingHeader> = observer((props)
             <Breadcrumbs>
               <Breadcrumbs.BreadcrumbItem
                 type="text"
-                label={currentProjectDetails?.name ?? "Project"}
-                icon={
-                  currentProjectDetails?.emoji ? (
-                    renderEmoji(currentProjectDetails.emoji)
-                  ) : currentProjectDetails?.icon_prop ? (
-                    renderEmoji(currentProjectDetails.icon_prop)
-                  ) : (
-                    <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
-                      {currentProjectDetails?.name.charAt(0)}
-                    </span>
-                  )
+                link={
+                  <BreadcrumbLink
+                    href={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`}
+                    label={currentProjectDetails?.name ?? "Project"}
+                    icon={
+                      currentProjectDetails?.emoji ? (
+                        renderEmoji(currentProjectDetails.emoji)
+                      ) : currentProjectDetails?.icon_prop ? (
+                        renderEmoji(currentProjectDetails.icon_prop)
+                      ) : (
+                        <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
+                          {currentProjectDetails?.name.charAt(0)}
+                        </span>
+                      )
+                    }
+                  />
                 }
-                link={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`}
               />
               <div className="hidden sm:hidden md:block lg:block">
-                <Breadcrumbs.BreadcrumbItem type="text" label={title} />
+                <Breadcrumbs.BreadcrumbItem type="text" link={<BreadcrumbLink label={title} />} />
               </div>
             </Breadcrumbs>
           </div>
@@ -62,13 +67,18 @@ export const ProjectSettingHeader: FC<IProjectSettingHeader> = observer((props)
           className="flex-shrink-0 block sm:block md:hidden lg:hidden"
           maxHeight="lg"
           customButton={
-            <span className="text-xs px-1.5 py-1 border rounded-md text-custom-text-200 border-custom-border-300">{title}</span>
+            <span className="text-xs px-1.5 py-1 border rounded-md text-custom-text-200 border-custom-border-300">
+              {title}
+            </span>
           }
           placement="bottom-start"
           closeOnSelect
         >
           {PROJECT_SETTINGS_LINKS.map((item) => (
-            <CustomMenu.MenuItem key={item.key} onClick={() => router.push(`/${workspaceSlug}/projects/${projectId}${item.href}`)}>
+            <CustomMenu.MenuItem
+              key={item.key}
+              onClick={() => router.push(`/${workspaceSlug}/projects/${projectId}${item.href}`)}
+            >
               {item.label}
             </CustomMenu.MenuItem>
           ))}
diff --git a/web/components/headers/project-view-issues.tsx b/web/components/headers/project-view-issues.tsx
index abe13c4e2..050400a2c 100644
--- a/web/components/headers/project-view-issues.tsx
+++ b/web/components/headers/project-view-issues.tsx
@@ -17,6 +17,7 @@ import {
 // components
 import { DisplayFiltersSelection, FiltersDropdown, FilterSelection, LayoutSelection } from "components/issues";
 import { SidebarHamburgerToggle } from "components/core/sidebar/sidebar-menu-hamburger-toggle";
+import { BreadcrumbLink } from "components/common";
 // ui
 import { Breadcrumbs, Button, CustomMenu, PhotoFilterIcon } from "@plane/ui";
 // helpers
@@ -112,29 +113,37 @@ export const ProjectViewIssuesHeader: React.FC = observer(() => {
         <Breadcrumbs>
           <Breadcrumbs.BreadcrumbItem
             type="text"
-            label={currentProjectDetails?.name ?? "Project"}
-            icon={
-              currentProjectDetails?.emoji ? (
-                <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded uppercase">
-                  {renderEmoji(currentProjectDetails.emoji)}
-                </span>
-              ) : currentProjectDetails?.icon_prop ? (
-                <div className="grid h-7 w-7 flex-shrink-0 place-items-center">
-                  {renderEmoji(currentProjectDetails.icon_prop)}
-                </div>
-              ) : (
-                <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
-                  {currentProjectDetails?.name.charAt(0)}
-                </span>
-              )
+            link={
+              <BreadcrumbLink
+                href={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`}
+                label={currentProjectDetails?.name ?? "Project"}
+                icon={
+                  currentProjectDetails?.emoji ? (
+                    <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded uppercase">
+                      {renderEmoji(currentProjectDetails.emoji)}
+                    </span>
+                  ) : currentProjectDetails?.icon_prop ? (
+                    <div className="grid h-7 w-7 flex-shrink-0 place-items-center">
+                      {renderEmoji(currentProjectDetails.icon_prop)}
+                    </div>
+                  ) : (
+                    <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
+                      {currentProjectDetails?.name.charAt(0)}
+                    </span>
+                  )
+                }
+              />
             }
-            link={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`}
           />
           <Breadcrumbs.BreadcrumbItem
             type="text"
-            icon={<PhotoFilterIcon className="h-4 w-4 text-custom-text-300" />}
-            label="Views"
-            link={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/views`}
+            link={
+              <BreadcrumbLink
+                href={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/views`}
+                label="Views"
+                icon={<PhotoFilterIcon className="h-4 w-4 text-custom-text-300" />}
+              />
+            }
           />
           <Breadcrumbs.BreadcrumbItem
             type="component"
diff --git a/web/components/headers/project-views.tsx b/web/components/headers/project-views.tsx
index e9dc4abad..bb070a22f 100644
--- a/web/components/headers/project-views.tsx
+++ b/web/components/headers/project-views.tsx
@@ -6,6 +6,7 @@ import { useApplication, useProject, useUser } from "hooks/store";
 // components
 import { Breadcrumbs, PhotoFilterIcon, Button } from "@plane/ui";
 import { SidebarHamburgerToggle } from "components/core/sidebar/sidebar-menu-hamburger-toggle";
+import { BreadcrumbLink } from "components/common";
 // helpers
 import { renderEmoji } from "helpers/emoji.helper";
 // constants
@@ -31,33 +32,38 @@ export const ProjectViewsHeader: React.FC = observer(() => {
     <>
       <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
         <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
-          <SidebarHamburgerToggle/>
+          <SidebarHamburgerToggle />
           <div>
             <Breadcrumbs>
               <Breadcrumbs.BreadcrumbItem
                 type="text"
-                label={currentProjectDetails?.name ?? "Project"}
-                icon={
-                  currentProjectDetails?.emoji ? (
-                    <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded uppercase">
-                      {renderEmoji(currentProjectDetails.emoji)}
-                    </span>
-                  ) : currentProjectDetails?.icon_prop ? (
-                    <div className="grid h-7 w-7 flex-shrink-0 place-items-center">
-                      {renderEmoji(currentProjectDetails.icon_prop)}
-                    </div>
-                  ) : (
-                    <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
-                      {currentProjectDetails?.name.charAt(0)}
-                    </span>
-                  )
+                link={
+                  <BreadcrumbLink
+                    href={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`}
+                    label={currentProjectDetails?.name ?? "Project"}
+                    icon={
+                      currentProjectDetails?.emoji ? (
+                        <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded uppercase">
+                          {renderEmoji(currentProjectDetails.emoji)}
+                        </span>
+                      ) : currentProjectDetails?.icon_prop ? (
+                        <div className="grid h-7 w-7 flex-shrink-0 place-items-center">
+                          {renderEmoji(currentProjectDetails.icon_prop)}
+                        </div>
+                      ) : (
+                        <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
+                          {currentProjectDetails?.name.charAt(0)}
+                        </span>
+                      )
+                    }
+                  />
                 }
-                link={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`}
               />
               <Breadcrumbs.BreadcrumbItem
                 type="text"
-                icon={<PhotoFilterIcon className="h-4 w-4 text-custom-text-300" />}
-                label="Views"
+                link={
+                  <BreadcrumbLink label="Views" icon={<PhotoFilterIcon className="h-4 w-4 text-custom-text-300" />} />
+                }
               />
             </Breadcrumbs>
           </div>
diff --git a/web/components/headers/projects.tsx b/web/components/headers/projects.tsx
index 96929f7b0..33192930e 100644
--- a/web/components/headers/projects.tsx
+++ b/web/components/headers/projects.tsx
@@ -8,6 +8,7 @@ import { Breadcrumbs, Button } from "@plane/ui";
 import { EUserWorkspaceRoles } from "constants/workspace";
 // components
 import { SidebarHamburgerToggle } from "components/core/sidebar/sidebar-menu-hamburger-toggle";
+import { BreadcrumbLink } from "components/common";
 
 export const ProjectsHeader = observer(() => {
   // store hooks
@@ -25,13 +26,12 @@ export const ProjectsHeader = observer(() => {
   return (
     <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
       <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
-        <SidebarHamburgerToggle/>
+        <SidebarHamburgerToggle />
         <div>
           <Breadcrumbs>
             <Breadcrumbs.BreadcrumbItem
               type="text"
-              icon={<Briefcase className="h-4 w-4 text-custom-text-300" />}
-              label="Projects"
+              link={<BreadcrumbLink label="Projects" icon={<Briefcase className="h-4 w-4 text-custom-text-300" />} />}
             />
           </Breadcrumbs>
         </div>
diff --git a/web/components/headers/user-profile.tsx b/web/components/headers/user-profile.tsx
index dca0dc7e6..d54f73009 100644
--- a/web/components/headers/user-profile.tsx
+++ b/web/components/headers/user-profile.tsx
@@ -1,15 +1,16 @@
 // ui
 import { Breadcrumbs } from "@plane/ui";
+import { BreadcrumbLink } from "components/common";
 // components
 import { SidebarHamburgerToggle } from "components/core/sidebar/sidebar-menu-hamburger-toggle";
 
 export const UserProfileHeader = () => (
   <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
     <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
-      <SidebarHamburgerToggle/>
+      <SidebarHamburgerToggle />
       <div>
         <Breadcrumbs>
-          <Breadcrumbs.BreadcrumbItem type="text" label="Activity Overview" link="/profile" />
+          <Breadcrumbs.BreadcrumbItem type="text" link={<BreadcrumbLink href="/profile" label="Activity Overview" />} />
         </Breadcrumbs>
       </div>
     </div>
diff --git a/web/components/headers/workspace-active-cycles.tsx b/web/components/headers/workspace-active-cycles.tsx
index 90cbccd81..195b89471 100644
--- a/web/components/headers/workspace-active-cycles.tsx
+++ b/web/components/headers/workspace-active-cycles.tsx
@@ -1,9 +1,10 @@
 import { observer } from "mobx-react-lite";
 // ui
 import { Breadcrumbs, ContrastIcon } from "@plane/ui";
+import { BreadcrumbLink } from "components/common";
+import { SidebarHamburgerToggle } from "components/core/sidebar/sidebar-menu-hamburger-toggle";
 // icons
 import { Crown } from "lucide-react";
-import { SidebarHamburgerToggle } from "components/core/sidebar/sidebar-menu-hamburger-toggle";
 
 export const WorkspaceActiveCycleHeader = observer(() => (
   <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
@@ -13,8 +14,12 @@ export const WorkspaceActiveCycleHeader = observer(() => (
         <Breadcrumbs>
           <Breadcrumbs.BreadcrumbItem
             type="text"
-            icon={<ContrastIcon className="h-4 w-4 text-custom-text-300 rotate-180" />}
-            label="Active Cycles"
+            link={
+              <BreadcrumbLink
+                label="Active Cycles"
+                icon={<ContrastIcon className="h-4 w-4 text-custom-text-300 rotate-180" />}
+              />
+            }
           />
         </Breadcrumbs>
         <Crown className="h-3.5 w-3.5 text-amber-400" />
diff --git a/web/components/headers/workspace-analytics.tsx b/web/components/headers/workspace-analytics.tsx
index 2ae373471..8bb4c9251 100644
--- a/web/components/headers/workspace-analytics.tsx
+++ b/web/components/headers/workspace-analytics.tsx
@@ -4,6 +4,7 @@ import { ArrowLeft, BarChart2 } from "lucide-react";
 import { Breadcrumbs } from "@plane/ui";
 // components
 import { SidebarHamburgerToggle } from "components/core/sidebar/sidebar-menu-hamburger-toggle";
+import { BreadcrumbLink } from "components/common";
 
 export const WorkspaceAnalyticsHeader = () => {
   const router = useRouter();
@@ -28,8 +29,9 @@ export const WorkspaceAnalyticsHeader = () => {
             <Breadcrumbs>
               <Breadcrumbs.BreadcrumbItem
                 type="text"
-                icon={<BarChart2 className="h-4 w-4 text-custom-text-300" />}
-                label="Analytics"
+                link={
+                  <BreadcrumbLink label="Analytics" icon={<BarChart2 className="h-4 w-4 text-custom-text-300" />} />
+                }
               />
             </Breadcrumbs>
           </div>
diff --git a/web/components/headers/workspace-dashboard.tsx b/web/components/headers/workspace-dashboard.tsx
index d576cb963..b7c05929c 100644
--- a/web/components/headers/workspace-dashboard.tsx
+++ b/web/components/headers/workspace-dashboard.tsx
@@ -6,7 +6,7 @@ import { useTheme } from "next-themes";
 import githubBlackImage from "/public/logos/github-black.png";
 import githubWhiteImage from "/public/logos/github-white.png";
 // components
-import { ProductUpdatesModal } from "components/common";
+import { BreadcrumbLink, ProductUpdatesModal } from "components/common";
 import { Breadcrumbs } from "@plane/ui";
 import { SidebarHamburgerToggle } from "components/core/sidebar/sidebar-menu-hamburger-toggle";
 
@@ -25,8 +25,9 @@ export const WorkspaceDashboardHeader = () => {
             <Breadcrumbs>
               <Breadcrumbs.BreadcrumbItem
                 type="text"
-                icon={<LayoutGrid className="h-4 w-4 text-custom-text-300" />}
-                label="Dashboard"
+                link={
+                  <BreadcrumbLink label="Dashboard" icon={<LayoutGrid className="h-4 w-4 text-custom-text-300" />} />
+                }
               />
             </Breadcrumbs>
           </div>
diff --git a/web/components/headers/workspace-settings.tsx b/web/components/headers/workspace-settings.tsx
index 625b7991c..5ced55204 100644
--- a/web/components/headers/workspace-settings.tsx
+++ b/web/components/headers/workspace-settings.tsx
@@ -8,6 +8,7 @@ import { observer } from "mobx-react-lite";
 // components
 import { SidebarHamburgerToggle } from "components/core/sidebar/sidebar-menu-hamburger-toggle";
 import { WORKSPACE_SETTINGS_LINKS } from "constants/workspace";
+import { BreadcrumbLink } from "components/common";
 
 export interface IWorkspaceSettingHeader {
   title: string;
@@ -27,12 +28,16 @@ export const WorkspaceSettingHeader: FC<IWorkspaceSettingHeader> = observer((pro
           <Breadcrumbs>
             <Breadcrumbs.BreadcrumbItem
               type="text"
-              label="Settings"
-              icon={<Settings className="h-4 w-4 text-custom-text-300" />}
-              link={`/${workspaceSlug}/settings`}
+              link={
+                <BreadcrumbLink
+                  href={`/${workspaceSlug}/settings`}
+                  label="Settings"
+                  icon={<Settings className="h-4 w-4 text-custom-text-300" />}
+                />
+              }
             />
             <div className="hidden sm:hidden md:block lg:block">
-              <Breadcrumbs.BreadcrumbItem type="text" label={title} />
+              <Breadcrumbs.BreadcrumbItem type="text" link={<BreadcrumbLink label={title} />} />
             </div>
           </Breadcrumbs>
         </div>
@@ -40,7 +45,9 @@ export const WorkspaceSettingHeader: FC<IWorkspaceSettingHeader> = observer((pro
           className="flex-shrink-0 block sm:block md:hidden lg:hidden"
           maxHeight="lg"
           customButton={
-            <span className="text-xs px-1.5 py-1 border rounded-md text-custom-text-200 border-custom-border-300">{title}</span>
+            <span className="text-xs px-1.5 py-1 border rounded-md text-custom-text-200 border-custom-border-300">
+              {title}
+            </span>
           }
           placement="bottom-start"
           closeOnSelect
diff --git a/web/layouts/admin-layout/header.tsx b/web/layouts/admin-layout/header.tsx
index f86abf6e6..2607fe91d 100644
--- a/web/layouts/admin-layout/header.tsx
+++ b/web/layouts/admin-layout/header.tsx
@@ -5,6 +5,7 @@ import { observer } from "mobx-react-lite";
 import { Breadcrumbs } from "@plane/ui";
 // icons
 import { Settings } from "lucide-react";
+import { BreadcrumbLink } from "components/common";
 
 export interface IInstanceAdminHeader {
   title?: string;
@@ -21,11 +22,15 @@ export const InstanceAdminHeader: FC<IInstanceAdminHeader> = observer((props) =>
             <Breadcrumbs>
               <Breadcrumbs.BreadcrumbItem
                 type="text"
-                icon={<Settings className="h-4 w-4 text-custom-text-300" />}
-                label="Settings"
-                link="/god-mode"
+                link={
+                  <BreadcrumbLink
+                    href="/god-mode"
+                    label="Settings"
+                    icon={<Settings className="h-4 w-4 text-custom-text-300" />}
+                  />
+                }
               />
-              <Breadcrumbs.BreadcrumbItem type="text" label={title} />
+              <Breadcrumbs.BreadcrumbItem type="text" link={<BreadcrumbLink label={title} />} />
             </Breadcrumbs>
           </div>
         )}

From 662b4970820a0b26f8ed4c80b0af91d0312c6496 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Fri, 2 Feb 2024 14:29:59 +0530
Subject: [PATCH 02/58] fix: create issue modal project select (#3549)

---
 web/components/issues/issue-modal/modal.tsx | 22 ++++++++-------------
 1 file changed, 8 insertions(+), 14 deletions(-)

diff --git a/web/components/issues/issue-modal/modal.tsx b/web/components/issues/issue-modal/modal.tsx
index da13e6353..4dfee1ea2 100644
--- a/web/components/issues/issue-modal/modal.tsx
+++ b/web/components/issues/issue-modal/modal.tsx
@@ -2,7 +2,7 @@ import React, { useEffect, useState } from "react";
 import { observer } from "mobx-react-lite";
 import { Dialog, Transition } from "@headlessui/react";
 // hooks
-import { useApplication, useCycle, useIssues, useModule, useProject, useUser, useWorkspace } from "hooks/store";
+import { useApplication, useCycle, useIssues, useModule, useProject, useWorkspace } from "hooks/store";
 import useToast from "hooks/use-toast";
 import useLocalStorage from "hooks/use-local-storage";
 // components
@@ -32,7 +32,6 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = observer((prop
   const {
     eventTracker: { postHogEventTracker },
   } = useApplication();
-  const { currentUser } = useUser();
   const {
     router: { workspaceSlug, projectId, cycleId, moduleId, viewId: projectViewId },
   } = useApplication();
@@ -49,27 +48,22 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = observer((prop
   const issueStores = {
     [EIssuesStoreType.PROJECT]: {
       store: projectIssues,
-      dataIdToUpdate: activeProjectId,
       viewId: undefined,
     },
     [EIssuesStoreType.PROJECT_VIEW]: {
       store: viewIssues,
-      dataIdToUpdate: activeProjectId,
       viewId: projectViewId,
     },
     [EIssuesStoreType.PROFILE]: {
       store: profileIssues,
-      dataIdToUpdate: currentUser?.id || undefined,
       viewId: undefined,
     },
     [EIssuesStoreType.CYCLE]: {
       store: cycleIssues,
-      dataIdToUpdate: activeProjectId,
       viewId: cycleId,
     },
     [EIssuesStoreType.MODULE]: {
       store: moduleIssues,
-      dataIdToUpdate: activeProjectId,
       viewId: moduleId,
     },
   };
@@ -78,7 +72,7 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = observer((prop
   // local storage
   const { setValue: setLocalStorageDraftIssue } = useLocalStorage<any>("draftedIssue", {});
   // current store details
-  const { store: currentIssueStore, viewId, dataIdToUpdate } = issueStores[storeType];
+  const { store: currentIssueStore, viewId } = issueStores[storeType];
 
   useEffect(() => {
     // if modal is closed, reset active project to null
@@ -129,13 +123,13 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = observer((prop
   };
 
   const handleCreateIssue = async (payload: Partial<TIssue>): Promise<TIssue | undefined> => {
-    if (!workspaceSlug || !dataIdToUpdate) return;
+    if (!workspaceSlug || !payload.project_id) return;
 
     try {
-      const response = await currentIssueStore.createIssue(workspaceSlug, dataIdToUpdate, payload, viewId);
+      const response = await currentIssueStore.createIssue(workspaceSlug, payload.project_id, payload, viewId);
       if (!response) throw new Error();
 
-      currentIssueStore.fetchIssues(workspaceSlug, dataIdToUpdate, "mutation", viewId);
+      currentIssueStore.fetchIssues(workspaceSlug, payload.project_id, "mutation", viewId);
 
       if (payload.cycle_id && payload.cycle_id !== "" && storeType !== EIssuesStoreType.CYCLE)
         await addIssueToCycle(response, payload.cycle_id);
@@ -182,10 +176,10 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = observer((prop
   };
 
   const handleUpdateIssue = async (payload: Partial<TIssue>): Promise<TIssue | undefined> => {
-    if (!workspaceSlug || !dataIdToUpdate || !data?.id) return;
+    if (!workspaceSlug || !payload.project_id || !data?.id) return;
 
     try {
-      const response = await currentIssueStore.updateIssue(workspaceSlug, dataIdToUpdate, data.id, payload, viewId);
+      const response = await currentIssueStore.updateIssue(workspaceSlug, payload.project_id, data.id, payload, viewId);
       setToastAlert({
         type: "success",
         title: "Success!",
@@ -226,7 +220,7 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = observer((prop
   };
 
   const handleFormSubmit = async (formData: Partial<TIssue>) => {
-    if (!workspaceSlug || !dataIdToUpdate || !storeType) return;
+    if (!workspaceSlug || !formData.project_id || !storeType) return;
 
     const payload: Partial<TIssue> = {
       ...formData,

From 2eab3b41a24048d0bd6c147f378736e622472c14 Mon Sep 17 00:00:00 2001
From: Ramesh Kumar Chandra
 <31303617+rameshkumarchandra@users.noreply.github.com>
Date: Fri, 2 Feb 2024 14:49:42 +0530
Subject: [PATCH 03/58] chore: responsive and styling fixes (#3541)

---
 packages/ui/src/icons/priority-icon.tsx           |  1 +
 .../account/deactivate-account-modal.tsx          |  4 ++--
 .../widgets/dropdowns/duration-filter.tsx         | 10 +++++-----
 .../widgets/issue-panels/issues-list.tsx          |  2 +-
 .../dashboard/widgets/overview-stats.tsx          | 15 ++++++++++++---
 web/components/headers/workspace-dashboard.tsx    |  2 +-
 web/layouts/app-layout/sidebar.tsx                |  2 +-
 7 files changed, 23 insertions(+), 13 deletions(-)

diff --git a/packages/ui/src/icons/priority-icon.tsx b/packages/ui/src/icons/priority-icon.tsx
index 0b98b3e6b..caa821305 100644
--- a/packages/ui/src/icons/priority-icon.tsx
+++ b/packages/ui/src/icons/priority-icon.tsx
@@ -47,6 +47,7 @@ export const PriorityIcon: React.FC<IPriorityIcon> = (props) => {
         >
           <Icon
             size={size}
+            viewBox="0 0 23.5 24"
             className={cn(
               {
                 "text-white": priority === "urgent",
diff --git a/web/components/account/deactivate-account-modal.tsx b/web/components/account/deactivate-account-modal.tsx
index 307a65ad2..701db6ad9 100644
--- a/web/components/account/deactivate-account-modal.tsx
+++ b/web/components/account/deactivate-account-modal.tsx
@@ -89,8 +89,8 @@ export const DeactivateAccountModal: React.FC<Props> = (props) => {
                 <div className="px-4 pb-4 pt-5 sm:p-6 sm:pb-4">
                   <div className="">
                     <div className="flex items-start gap-x-4">
-                      <div className="grid place-items-center rounded-full bg-red-500/20 p-4">
-                        <Trash2 className="h-6 w-6 text-red-600" aria-hidden="true" />
+                      <div className="grid place-items-center rounded-full bg-red-500/20 p-2 sm:p-2 md:p-4 lg:p-4 mt-3 sm:mt-3 md:mt-0 lg:mt-0 ">
+                        <Trash2 className="h-4 w-4 sm:h-4 sm:w-4 md:h-6 md:w-6 lg:h-6 lg:w-6 text-red-600" aria-hidden="true" />
                       </div>
                       <div>
                         <Dialog.Title as="h3" className="my-4 text-2xl font-medium leading-6 text-custom-text-100">
diff --git a/web/components/dashboard/widgets/dropdowns/duration-filter.tsx b/web/components/dashboard/widgets/dropdowns/duration-filter.tsx
index 0db293a65..4844ea406 100644
--- a/web/components/dashboard/widgets/dropdowns/duration-filter.tsx
+++ b/web/components/dashboard/widgets/dropdowns/duration-filter.tsx
@@ -26,11 +26,11 @@ export const DurationFilterDropdown: React.FC<Props> = (props) => {
       placement="bottom-end"
       closeOnSelect
     >
-      {DURATION_FILTER_OPTIONS.map((option) => (
-        <CustomMenu.MenuItem key={option.key} onClick={() => onChange(option.key)}>
-          {option.label}
-        </CustomMenu.MenuItem>
-      ))}
+        {DURATION_FILTER_OPTIONS.map((option) => (
+          <CustomMenu.MenuItem key={option.key} onClick={() => onChange(option.key)}>
+            {option.label}
+          </CustomMenu.MenuItem>
+        ))}
     </CustomMenu>
   );
 };
diff --git a/web/components/dashboard/widgets/issue-panels/issues-list.tsx b/web/components/dashboard/widgets/issue-panels/issues-list.tsx
index af2c11660..a036b2d28 100644
--- a/web/components/dashboard/widgets/issue-panels/issues-list.tsx
+++ b/web/components/dashboard/widgets/issue-panels/issues-list.tsx
@@ -77,7 +77,7 @@ export const WidgetIssuesList: React.FC<WidgetIssuesListProps> = (props) => {
                 })}
               >
                 Issues
-                <span className="flex-shrink-0 bg-custom-primary-100/20 text-custom-primary-100 text-xs font-medium rounded-xl h-4 min-w-6 flex items-center text-center justify-center">
+                <span className="flex-shrink-0 bg-custom-primary-100/20 text-custom-primary-100 text-xs font-medium rounded-xl px-3 flex items-center text-center justify-center">
                   {totalIssues}
                 </span>
               </h6>
diff --git a/web/components/dashboard/widgets/overview-stats.tsx b/web/components/dashboard/widgets/overview-stats.tsx
index 1a4c2646b..31bdee587 100644
--- a/web/components/dashboard/widgets/overview-stats.tsx
+++ b/web/components/dashboard/widgets/overview-stats.tsx
@@ -9,6 +9,7 @@ import { WidgetLoader } from "components/dashboard/widgets";
 import { renderFormattedPayloadDate } from "helpers/date-time.helper";
 // types
 import { TOverviewStatsWidgetResponse } from "@plane/types";
+import { cn } from "helpers/common.helper";
 
 export type WidgetProps = {
   dashboardId: string;
@@ -71,10 +72,18 @@ export const OverviewStatsWidget: React.FC<WidgetProps> = observer((props) => {
         [&>div:nth-child(2)>a>div]:lg:border-r
         "
     >
-      {STATS_LIST.map((stat) => (
-        <div className="w-full flex flex-col gap-2 hover:bg-custom-background-80 rounded-[10px]">
+      {STATS_LIST.map((stat, index) => (
+        <div
+          className={cn(
+            `w-full flex flex-col gap-2 hover:bg-custom-background-80`,
+            index === 0 ? "rounded-tl-xl lg:rounded-l-xl" : "",
+            index === STATS_LIST.length - 1 ? "rounded-br-xl lg:rounded-r-xl" : "",
+            index === 1 ? "rounded-tr-xl lg:rounded-[0px]" : "",
+            index == 2 ? "rounded-bl-xl lg:rounded-[0px]" : ""
+          )}
+        >
           <Link href={stat.link} className="py-4 duration-300 rounded-[10px] w-full ">
-            <div className={`relative flex justify-center items-center`}>
+            <div className={`relative flex pl-10 sm:pl-20 md:pl-20 lg:pl-20 items-center`}>
               <div>
                 <h5 className="font-semibold text-xl">{stat.count}</h5>
                 <p className="text-custom-text-300 text-sm xl:text-base">{stat.title}</p>
diff --git a/web/components/headers/workspace-dashboard.tsx b/web/components/headers/workspace-dashboard.tsx
index b7c05929c..8dd6f31d5 100644
--- a/web/components/headers/workspace-dashboard.tsx
+++ b/web/components/headers/workspace-dashboard.tsx
@@ -18,7 +18,7 @@ export const WorkspaceDashboardHeader = () => {
   return (
     <>
       <ProductUpdatesModal isOpen={isProductUpdatesModalOpen} setIsOpen={setIsProductUpdatesModalOpen} />
-      <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
+      <div className="relative z-20 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
         <div className="flex items-center gap-2 overflow-ellipsis whitespace-nowrap">
           <SidebarHamburgerToggle />
           <div>
diff --git a/web/layouts/app-layout/sidebar.tsx b/web/layouts/app-layout/sidebar.tsx
index ef8548c66..d9ce3c3f0 100644
--- a/web/layouts/app-layout/sidebar.tsx
+++ b/web/layouts/app-layout/sidebar.tsx
@@ -42,7 +42,7 @@ export const AppSidebar: FC<IAppSidebar> = observer(() => {
 
   return (
     <div
-      className={`inset-y-0 z-20 flex h-full flex-shrink-0 flex-grow-0 flex-col border-r border-custom-sidebar-border-200 bg-custom-sidebar-background-100 duration-300
+      className={`inset-y-0 z-30 flex h-full flex-shrink-0 flex-grow-0 flex-col border-r border-custom-sidebar-border-200 bg-custom-sidebar-background-100 duration-300
         fixed md:relative
         ${themStore.sidebarCollapsed ? "-ml-[280px]" : ""}
         sm:${themStore.sidebarCollapsed ? "-ml-[280px]" : ""}

From 138d06868b06e25643c3c5cf56ee447928f1ac99 Mon Sep 17 00:00:00 2001
From: rahulramesha <71900764+rahulramesha@users.noreply.github.com>
Date: Fri, 2 Feb 2024 14:50:23 +0530
Subject: [PATCH 04/58] fix: all issues spreadsheet sorting and kanban dnd for
 long lists (#3550)

* fix all issues filter for spreadsheet view

* fix kanban dnd with long lists
---
 .../issues/issue-layouts/kanban/base-kanban-root.tsx   |  2 +-
 .../issue-layouts/roots/all-issue-layout-root.tsx      | 10 ++++++++--
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/web/components/issues/issue-layouts/kanban/base-kanban-root.tsx b/web/components/issues/issue-layouts/kanban/base-kanban-root.tsx
index eb7005cbd..486d67625 100644
--- a/web/components/issues/issue-layouts/kanban/base-kanban-root.tsx
+++ b/web/components/issues/issue-layouts/kanban/base-kanban-root.tsx
@@ -237,7 +237,7 @@ export const BaseKanBanRoot: React.FC<IBaseKanBanLayout> = observer((props: IBas
       )}
 
       <div className="horizontal-scroll-enable relative h-full w-full overflow-auto bg-custom-background-90">
-        <div className="relative h-full w-max min-w-full bg-custom-background-90 px-2">
+        <div className="relative h-max w-max min-w-full bg-custom-background-90 px-2">
           <DragDropContext onDragStart={onDragStart} onDragEnd={onDragEnd}>
             {/* drag and delete component */}
             <div
diff --git a/web/components/issues/issue-layouts/roots/all-issue-layout-root.tsx b/web/components/issues/issue-layouts/roots/all-issue-layout-root.tsx
index 2ba023674..c681736f5 100644
--- a/web/components/issues/issue-layouts/roots/all-issue-layout-root.tsx
+++ b/web/components/issues/issue-layouts/roots/all-issue-layout-root.tsx
@@ -148,9 +148,15 @@ export const AllIssueLayoutRoot: React.FC = observer(() => {
 
   const handleDisplayFiltersUpdate = useCallback(
     (updatedDisplayFilter: Partial<IIssueDisplayFilterOptions>) => {
-      if (!workspaceSlug) return;
+      if (!workspaceSlug || !globalViewId) return;
 
-      updateFilters(workspaceSlug.toString(), undefined, EIssueFilterType.DISPLAY_FILTERS, { ...updatedDisplayFilter });
+      updateFilters(
+        workspaceSlug.toString(),
+        undefined,
+        EIssueFilterType.DISPLAY_FILTERS,
+        { ...updatedDisplayFilter },
+        globalViewId.toString()
+      );
     },
     [updateFilters, workspaceSlug]
   );

From 39eb8c98d165266c8d1e9d3af98e2079f7648905 Mon Sep 17 00:00:00 2001
From: Nikhil <118773738+pablohashescobar@users.noreply.github.com>
Date: Fri, 2 Feb 2024 16:43:05 +0530
Subject: [PATCH 05/58] dev: validation for external id and external source
 (#3552)

* dev: error response for duplicate items created through external apis

* dev: return identifier and also add the validation for state

* fix: validation for external id and external source
---
 apiserver/plane/api/views/cycle.py  | 40 ++++++++++++++++++++++++++
 apiserver/plane/api/views/issue.py  | 44 +++++++++++++++++++++++++++++
 apiserver/plane/api/views/module.py | 42 ++++++++++++++++++++++++++-
 apiserver/plane/api/views/state.py  | 41 +++++++++++++++++++++++++++
 4 files changed, 166 insertions(+), 1 deletion(-)

diff --git a/apiserver/plane/api/views/cycle.py b/apiserver/plane/api/views/cycle.py
index c296bb111..7a9cfb1b5 100644
--- a/apiserver/plane/api/views/cycle.py
+++ b/apiserver/plane/api/views/cycle.py
@@ -243,6 +243,29 @@ class CycleAPIEndpoint(WebhookMixin, BaseAPIView):
         ):
             serializer = CycleSerializer(data=request.data)
             if serializer.is_valid():
+                if (
+                    request.data.get("external_id")
+                    and request.data.get("external_source")
+                    and Cycle.objects.filter(
+                        project_id=project_id,
+                        workspace__slug=slug,
+                        external_source=request.data.get("external_source"),
+                        external_id=request.data.get("external_id"),
+                    ).exists()
+                ):
+                    cycle = Cycle.objects.filter(
+                        workspace__slug=slug,
+                        project_id=project_id,
+                        external_source=request.data.get("external_source"),
+                        external_id=request.data.get("external_id"),
+                    ).first()
+                    return Response(
+                        {
+                            "error": "Cycle with the same external id and external source already exists",
+                            "cycle": str(cycle.id),
+                        },
+                        status=status.HTTP_409_CONFLICT,
+                    )
                 serializer.save(
                     project_id=project_id,
                     owned_by=request.user,
@@ -289,6 +312,23 @@ class CycleAPIEndpoint(WebhookMixin, BaseAPIView):
 
         serializer = CycleSerializer(cycle, data=request.data, partial=True)
         if serializer.is_valid():
+            if (
+                request.data.get("external_id")
+                and (cycle.external_id != request.data.get("external_id"))
+                and Cycle.objects.filter(
+                    project_id=project_id,
+                    workspace__slug=slug,
+                    external_source=request.data.get("external_source", cycle.external_source),
+                    external_id=request.data.get("external_id"),
+                ).exists()
+            ):
+                return Response(
+                    {
+                        "error": "Cycle with the same external id and external source already exists",
+                        "cycle_id": str(cycle.id),
+                    },
+                    status=status.HTTP_409_CONFLICT,
+                )
             serializer.save()
             return Response(serializer.data, status=status.HTTP_200_OK)
         return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
diff --git a/apiserver/plane/api/views/issue.py b/apiserver/plane/api/views/issue.py
index e91f2a5f6..530eef5bf 100644
--- a/apiserver/plane/api/views/issue.py
+++ b/apiserver/plane/api/views/issue.py
@@ -220,6 +220,30 @@ class IssueAPIEndpoint(WebhookMixin, BaseAPIView):
         )
 
         if serializer.is_valid():
+            if (
+                request.data.get("external_id")
+                and request.data.get("external_source")
+                and Issue.objects.filter(
+                    project_id=project_id,
+                    workspace__slug=slug,
+                    external_source=request.data.get("external_source"),
+                    external_id=request.data.get("external_id"),
+                ).exists()
+            ):
+                issue = Issue.objects.filter(
+                    workspace__slug=slug,
+                    project_id=project_id,
+                    external_id=request.data.get("external_id"),
+                    external_source=request.data.get("external_source"),
+                ).first()
+                return Response(
+                    {
+                        "error": "Issue with the same external id and external source already exists",
+                        "issue_id": str(issue.id),
+                    },
+                    status=status.HTTP_409_CONFLICT,
+                )
+
             serializer.save()
 
             # Track the issue
@@ -256,6 +280,24 @@ class IssueAPIEndpoint(WebhookMixin, BaseAPIView):
             partial=True,
         )
         if serializer.is_valid():
+            if (
+                str(request.data.get("external_id"))
+                and (issue.external_id != str(request.data.get("external_id")))
+                and Issue.objects.filter(
+                    project_id=project_id,
+                    workspace__slug=slug,
+                    external_source=request.data.get("external_source", issue.external_source),
+                    external_id=request.data.get("external_id"),
+                ).exists()
+            ):
+                return Response(
+                    {
+                        "error": "Issue with the same external id and external source already exists",
+                        "issue_id": str(issue.id),
+                    },
+                    status=status.HTTP_409_CONFLICT,
+                )
+
             serializer.save()
             issue_activity.delay(
                 type="issue.activity.updated",
@@ -263,6 +305,8 @@ class IssueAPIEndpoint(WebhookMixin, BaseAPIView):
                 actor_id=str(request.user.id),
                 issue_id=str(pk),
                 project_id=str(project_id),
+                external_id__isnull=False,
+                external_source__isnull=False,
                 current_instance=current_instance,
                 epoch=int(timezone.now().timestamp()),
             )
diff --git a/apiserver/plane/api/views/module.py b/apiserver/plane/api/views/module.py
index 1a9a21a3c..e2d59e126 100644
--- a/apiserver/plane/api/views/module.py
+++ b/apiserver/plane/api/views/module.py
@@ -132,6 +132,29 @@ class ModuleAPIEndpoint(WebhookMixin, BaseAPIView):
             },
         )
         if serializer.is_valid():
+            if (
+                request.data.get("external_id")
+                and request.data.get("external_source")
+                and Module.objects.filter(
+                    project_id=project_id,
+                    workspace__slug=slug,
+                    external_source=request.data.get("external_source"),
+                    external_id=request.data.get("external_id"),
+                ).exists()
+            ):
+                module = Module.objects.filter(
+                    project_id=project_id,
+                    workspace__slug=slug,
+                    external_source=request.data.get("external_source"),
+                    external_id=request.data.get("external_id"),
+                ).first()
+                return Response(
+                    {
+                        "error": "Module with the same external id and external source already exists",
+                        "module_id": str(module.id),
+                    },
+                    status=status.HTTP_409_CONFLICT,
+                )
             serializer.save()
             module = Module.objects.get(pk=serializer.data["id"])
             serializer = ModuleSerializer(module)
@@ -149,8 +172,25 @@ class ModuleAPIEndpoint(WebhookMixin, BaseAPIView):
             partial=True,
         )
         if serializer.is_valid():
+            if (
+                request.data.get("external_id")
+                and (module.external_id != request.data.get("external_id"))
+                and Module.objects.filter(
+                    project_id=project_id,
+                    workspace__slug=slug,
+                    external_source=request.data.get("external_source", module.external_source),
+                    external_id=request.data.get("external_id"),
+                ).exists()
+            ):
+                return Response(
+                    {
+                        "error": "Module with the same external id and external source already exists",
+                        "module_id": str(module.id),
+                    },
+                    status=status.HTTP_409_CONFLICT,
+                )
             serializer.save()
-            return Response(serializer.data, status=status.HTTP_201_CREATED)
+            return Response(serializer.data, status=status.HTTP_200_OK)
         return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
 
     def get(self, request, slug, project_id, pk=None):
diff --git a/apiserver/plane/api/views/state.py b/apiserver/plane/api/views/state.py
index f931c2ed2..88fb083f0 100644
--- a/apiserver/plane/api/views/state.py
+++ b/apiserver/plane/api/views/state.py
@@ -38,6 +38,30 @@ class StateAPIEndpoint(BaseAPIView):
             data=request.data, context={"project_id": project_id}
         )
         if serializer.is_valid():
+            if (
+                request.data.get("external_id")
+                and request.data.get("external_source")
+                and State.objects.filter(
+                    project_id=project_id,
+                    workspace__slug=slug,
+                    external_source=request.data.get("external_source"),
+                    external_id=request.data.get("external_id"),
+                ).exists()
+            ):
+                state = State.objects.filter(
+                    workspace__slug=slug,
+                    project_id=project_id,
+                    external_id=request.data.get("external_id"),
+                    external_source=request.data.get("external_source"),
+                ).first()
+                return Response(
+                    {
+                        "error": "State with the same external id and external source already exists",
+                        "state_id": str(state.id),
+                    },
+                    status=status.HTTP_409_CONFLICT,
+                )
+
             serializer.save(project_id=project_id)
             return Response(serializer.data, status=status.HTTP_200_OK)
         return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
@@ -91,6 +115,23 @@ class StateAPIEndpoint(BaseAPIView):
         )
         serializer = StateSerializer(state, data=request.data, partial=True)
         if serializer.is_valid():
+            if (
+                str(request.data.get("external_id"))
+                and (state.external_id != str(request.data.get("external_id")))
+                and State.objects.filter(
+                    project_id=project_id,
+                    workspace__slug=slug,
+                    external_source=request.data.get("external_source", state.external_source),
+                    external_id=request.data.get("external_id"),
+                ).exists()
+            ):
+                return Response(
+                    {
+                        "error": "State with the same external id and external source already exists",
+                        "state_id": str(state.id),
+                    },
+                    status=status.HTTP_409_CONFLICT,
+                )
             serializer.save()
             return Response(serializer.data, status=status.HTTP_200_OK)
         return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)

From a8ec2b69144d7f525a4d40f0aef44bcf8b40e6de Mon Sep 17 00:00:00 2001
From: sriram veeraghanta <veeraghanta.sriram@gmail.com>
Date: Sat, 3 Feb 2024 00:35:29 +0530
Subject: [PATCH 06/58] fix: error handling in pages list page

---
 web/components/pages/pages-list/list-item.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/components/pages/pages-list/list-item.tsx b/web/components/pages/pages-list/list-item.tsx
index 960e222ce..03133d5df 100644
--- a/web/components/pages/pages-list/list-item.tsx
+++ b/web/components/pages/pages-list/list-item.tsx
@@ -229,7 +229,7 @@ export const PagesListItem: FC<IPagesListItem> = observer(({ pageId, projectId }
                 )}
                 <Tooltip
                   position="top-right"
-                  tooltipContent={`Created by ${ownerDetails?.member.display_name} on ${renderFormattedDate(
+                  tooltipContent={`Created by ${ownerDetails?.member?.display_name} on ${renderFormattedDate(
                     created_at
                   )}`}
                 >

From 7d07afd59c1ccf1447c907ccb47de236610db2ad Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Mon, 5 Feb 2024 12:34:53 +0530
Subject: [PATCH 07/58] chore: cycle and module sidebar analytics improvement
 (#3559)

* chore: cycle and module store update action updated

* chore: cycle and module issue store actions updated

* chore: cycle and module retrieve endpoints updated

* fix: app sidebar z index and priority icon fix

* chore: cycle and module sidebar and stats updated
---
 apiserver/plane/app/views/cycle.py            | 24 +++++++--------
 apiserver/plane/app/views/module.py           | 12 ++++----
 packages/ui/src/icons/priority-icon.tsx       |  1 -
 .../core/sidebar/progress-chart.tsx           | 19 +++++++-----
 web/components/cycles/sidebar.tsx             | 30 ++++++++-----------
 web/components/modules/sidebar.tsx            | 16 ++++------
 web/layouts/app-layout/sidebar.tsx            | 22 ++++++--------
 web/store/cycle.store.ts                      |  1 +
 web/store/issue/cycle/issue.store.ts          |  6 ++++
 web/store/issue/module/issue.store.ts         |  6 ++++
 web/store/module.store.ts                     |  1 +
 11 files changed, 70 insertions(+), 68 deletions(-)

diff --git a/apiserver/plane/app/views/cycle.py b/apiserver/plane/app/views/cycle.py
index 23a227fef..32f593e1e 100644
--- a/apiserver/plane/app/views/cycle.py
+++ b/apiserver/plane/app/views/cycle.py
@@ -242,13 +242,13 @@ class CycleViewSet(WebhookMixin, BaseViewSet):
                     .values("display_name", "assignee_id", "avatar")
                     .annotate(
                         total_issues=Count(
-                            "assignee_id",
+                            "id",
                             filter=Q(archived_at__isnull=True, is_draft=False),
                         ),
                     )
                     .annotate(
                         completed_issues=Count(
-                            "assignee_id",
+                            "id",
                             filter=Q(
                                 completed_at__isnull=False,
                                 archived_at__isnull=True,
@@ -258,7 +258,7 @@ class CycleViewSet(WebhookMixin, BaseViewSet):
                     )
                     .annotate(
                         pending_issues=Count(
-                            "assignee_id",
+                            "id",
                             filter=Q(
                                 completed_at__isnull=True,
                                 archived_at__isnull=True,
@@ -281,13 +281,13 @@ class CycleViewSet(WebhookMixin, BaseViewSet):
                     .values("label_name", "color", "label_id")
                     .annotate(
                         total_issues=Count(
-                            "label_id",
+                            "id",
                             filter=Q(archived_at__isnull=True, is_draft=False),
                         )
                     )
                     .annotate(
                         completed_issues=Count(
-                            "label_id",
+                            "id",
                             filter=Q(
                                 completed_at__isnull=False,
                                 archived_at__isnull=True,
@@ -297,7 +297,7 @@ class CycleViewSet(WebhookMixin, BaseViewSet):
                     )
                     .annotate(
                         pending_issues=Count(
-                            "label_id",
+                            "id",
                             filter=Q(
                                 completed_at__isnull=True,
                                 archived_at__isnull=True,
@@ -419,13 +419,13 @@ class CycleViewSet(WebhookMixin, BaseViewSet):
             )
             .annotate(
                 total_issues=Count(
-                    "assignee_id",
+                    "id",
                     filter=Q(archived_at__isnull=True, is_draft=False),
                 ),
             )
             .annotate(
                 completed_issues=Count(
-                    "assignee_id",
+                    "id",
                     filter=Q(
                         completed_at__isnull=False,
                         archived_at__isnull=True,
@@ -435,7 +435,7 @@ class CycleViewSet(WebhookMixin, BaseViewSet):
             )
             .annotate(
                 pending_issues=Count(
-                    "assignee_id",
+                    "id",
                     filter=Q(
                         completed_at__isnull=True,
                         archived_at__isnull=True,
@@ -459,13 +459,13 @@ class CycleViewSet(WebhookMixin, BaseViewSet):
             .values("label_name", "color", "label_id")
             .annotate(
                 total_issues=Count(
-                    "label_id",
+                    "id",
                     filter=Q(archived_at__isnull=True, is_draft=False),
                 ),
             )
             .annotate(
                 completed_issues=Count(
-                    "label_id",
+                    "id",
                     filter=Q(
                         completed_at__isnull=False,
                         archived_at__isnull=True,
@@ -475,7 +475,7 @@ class CycleViewSet(WebhookMixin, BaseViewSet):
             )
             .annotate(
                 pending_issues=Count(
-                    "label_id",
+                    "id",
                     filter=Q(
                         completed_at__isnull=True,
                         archived_at__isnull=True,
diff --git a/apiserver/plane/app/views/module.py b/apiserver/plane/app/views/module.py
index 1f055129a..fafcfed4b 100644
--- a/apiserver/plane/app/views/module.py
+++ b/apiserver/plane/app/views/module.py
@@ -197,7 +197,7 @@ class ModuleViewSet(WebhookMixin, BaseViewSet):
             )
             .annotate(
                 total_issues=Count(
-                    "assignee_id",
+                    "id",
                     filter=Q(
                         archived_at__isnull=True,
                         is_draft=False,
@@ -206,7 +206,7 @@ class ModuleViewSet(WebhookMixin, BaseViewSet):
             )
             .annotate(
                 completed_issues=Count(
-                    "assignee_id",
+                    "id",
                     filter=Q(
                         completed_at__isnull=False,
                         archived_at__isnull=True,
@@ -216,7 +216,7 @@ class ModuleViewSet(WebhookMixin, BaseViewSet):
             )
             .annotate(
                 pending_issues=Count(
-                    "assignee_id",
+                    "id",
                     filter=Q(
                         completed_at__isnull=True,
                         archived_at__isnull=True,
@@ -239,7 +239,7 @@ class ModuleViewSet(WebhookMixin, BaseViewSet):
             .values("label_name", "color", "label_id")
             .annotate(
                 total_issues=Count(
-                    "label_id",
+                    "id",
                     filter=Q(
                         archived_at__isnull=True,
                         is_draft=False,
@@ -248,7 +248,7 @@ class ModuleViewSet(WebhookMixin, BaseViewSet):
             )
             .annotate(
                 completed_issues=Count(
-                    "label_id",
+                    "id",
                     filter=Q(
                         completed_at__isnull=False,
                         archived_at__isnull=True,
@@ -258,7 +258,7 @@ class ModuleViewSet(WebhookMixin, BaseViewSet):
             )
             .annotate(
                 pending_issues=Count(
-                    "label_id",
+                    "id",
                     filter=Q(
                         completed_at__isnull=True,
                         archived_at__isnull=True,
diff --git a/packages/ui/src/icons/priority-icon.tsx b/packages/ui/src/icons/priority-icon.tsx
index caa821305..0b98b3e6b 100644
--- a/packages/ui/src/icons/priority-icon.tsx
+++ b/packages/ui/src/icons/priority-icon.tsx
@@ -47,7 +47,6 @@ export const PriorityIcon: React.FC<IPriorityIcon> = (props) => {
         >
           <Icon
             size={size}
-            viewBox="0 0 23.5 24"
             className={cn(
               {
                 "text-white": priority === "urgent",
diff --git a/web/components/core/sidebar/progress-chart.tsx b/web/components/core/sidebar/progress-chart.tsx
index 3d47d8eca..ca21756fc 100644
--- a/web/components/core/sidebar/progress-chart.tsx
+++ b/web/components/core/sidebar/progress-chart.tsx
@@ -86,12 +86,15 @@ const ProgressChart: React.FC<Props> = ({ distribution, startDate, endDate, tota
           {
             id: "pending",
             color: "#3F76FF",
-            data: chartData.map((item, index) => ({
-              index,
-              x: item.currentDate,
-              y: item.pending,
-              color: "#3F76FF",
-            })),
+            data:
+              chartData.length > 0
+                ? chartData.map((item, index) => ({
+                    index,
+                    x: item.currentDate,
+                    y: item.pending,
+                    color: "#3F76FF",
+                  }))
+                : [],
             enableArea: true,
           },
           {
@@ -121,7 +124,9 @@ const ProgressChart: React.FC<Props> = ({ distribution, startDate, endDate, tota
         enableArea
         colors={(datum) => datum.color ?? "#3F76FF"}
         customYAxisTickValues={[0, totalIssues]}
-        gridXValues={chartData.map((item, index) => (index % 2 === 0 ? item.currentDate : ""))}
+        gridXValues={
+          chartData.length > 0 ? chartData.map((item, index) => (index % 2 === 0 ? item.currentDate : "")) : undefined
+        }
         enableSlices="x"
         sliceTooltip={(datum) => (
           <div className="rounded-md border border-custom-border-200 bg-custom-background-80 p-2 text-xs">
diff --git a/web/components/cycles/sidebar.tsx b/web/components/cycles/sidebar.tsx
index 4bf76f91f..5fa1d2459 100644
--- a/web/components/cycles/sidebar.tsx
+++ b/web/components/cycles/sidebar.tsx
@@ -319,13 +319,7 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
   const currentCycle = CYCLE_STATUS.find((status) => status.value === cycleStatus);
 
   const issueCount =
-    cycleDetails.total_issues === 0
-      ? "0 Issue"
-      : cycleDetails.total_issues === cycleDetails.completed_issues
-      ? cycleDetails.total_issues > 1
-        ? `${cycleDetails.total_issues}`
-        : `${cycleDetails.total_issues}`
-      : `${cycleDetails.completed_issues}/${cycleDetails.total_issues}`;
+    cycleDetails.total_issues === 0 ? "0 Issue" : `${cycleDetails.completed_issues}/${cycleDetails.total_issues}`;
 
   const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserWorkspaceRoles.MEMBER;
 
@@ -575,7 +569,9 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
                   <Transition show={open}>
                     <Disclosure.Panel>
                       <div className="flex flex-col gap-3">
-                        {isStartValid && isEndValid ? (
+                        {cycleDetails.distribution?.completion_chart &&
+                        cycleDetails.start_date &&
+                        cycleDetails.end_date ? (
                           <div className="h-full w-full pt-4">
                             <div className="flex  items-start  gap-4 py-2 text-xs">
                               <div className="flex items-center gap-3 text-custom-text-100">
@@ -589,16 +585,14 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
                                 </div>
                               </div>
                             </div>
-                            {cycleDetails && cycleDetails.distribution && (
-                              <div className="relative h-40 w-80">
-                                <ProgressChart
-                                  distribution={cycleDetails.distribution?.completion_chart ?? {}}
-                                  startDate={cycleDetails.start_date ?? ""}
-                                  endDate={cycleDetails.end_date ?? ""}
-                                  totalIssues={cycleDetails.total_issues}
-                                />
-                              </div>
-                            )}
+                            <div className="relative h-40 w-80">
+                              <ProgressChart
+                                distribution={cycleDetails.distribution?.completion_chart}
+                                startDate={cycleDetails.start_date}
+                                endDate={cycleDetails.end_date}
+                                totalIssues={cycleDetails.total_issues}
+                              />
+                            </div>
                           </div>
                         ) : (
                           ""
diff --git a/web/components/modules/sidebar.tsx b/web/components/modules/sidebar.tsx
index f43326b6b..8b1aa28e8 100644
--- a/web/components/modules/sidebar.tsx
+++ b/web/components/modules/sidebar.tsx
@@ -262,13 +262,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
   const moduleStatus = MODULE_STATUS.find((status) => status.value === moduleDetails.status);
 
   const issueCount =
-    moduleDetails.total_issues === 0
-      ? "0 Issue"
-      : moduleDetails.total_issues === moduleDetails.completed_issues
-      ? moduleDetails.total_issues > 1
-        ? `${moduleDetails.total_issues}`
-        : `${moduleDetails.total_issues}`
-      : `${moduleDetails.completed_issues}/${moduleDetails.total_issues}`;
+    moduleDetails.total_issues === 0 ? "0 Issue" : `${moduleDetails.completed_issues}/${moduleDetails.total_issues}`;
 
   const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER;
 
@@ -582,7 +576,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
                   <Transition show={open}>
                     <Disclosure.Panel>
                       <div className="flex flex-col gap-3">
-                        {isStartValid && isEndValid ? (
+                        {moduleDetails.start_date && moduleDetails.target_date ? (
                           <div className=" h-full w-full pt-4">
                             <div className="flex  items-start  gap-4 py-2 text-xs">
                               <div className="flex items-center gap-3 text-custom-text-100">
@@ -598,9 +592,9 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
                             </div>
                             <div className="relative h-40 w-80">
                               <ProgressChart
-                                distribution={moduleDetails.distribution?.completion_chart}
-                                startDate={moduleDetails.start_date ?? ""}
-                                endDate={moduleDetails.target_date ?? ""}
+                                distribution={moduleDetails.distribution?.completion_chart ?? {}}
+                                startDate={moduleDetails.start_date}
+                                endDate={moduleDetails.target_date}
                                 totalIssues={moduleDetails.total_issues}
                               />
                             </div>
diff --git a/web/layouts/app-layout/sidebar.tsx b/web/layouts/app-layout/sidebar.tsx
index d9ce3c3f0..e211e7884 100644
--- a/web/layouts/app-layout/sidebar.tsx
+++ b/web/layouts/app-layout/sidebar.tsx
@@ -12,7 +12,7 @@ import { ProjectSidebarList } from "components/project";
 import { useApplication } from "hooks/store";
 import useOutsideClickDetector from "hooks/use-outside-click-detector";
 
-export interface IAppSidebar { }
+export interface IAppSidebar {}
 
 export const AppSidebar: FC<IAppSidebar> = observer(() => {
   // store hooks
@@ -34,24 +34,23 @@ export const AppSidebar: FC<IAppSidebar> = observer(() => {
       }
     };
     handleResize();
-    window.addEventListener('resize', handleResize);
+    window.addEventListener("resize", handleResize);
     return () => {
-      window.removeEventListener('resize', handleResize);
+      window.removeEventListener("resize", handleResize);
     };
   }, [themStore]);
 
   return (
     <div
-      className={`inset-y-0 z-30 flex h-full flex-shrink-0 flex-grow-0 flex-col border-r border-custom-sidebar-border-200 bg-custom-sidebar-background-100 duration-300
+      className={`inset-y-0 z-20 flex h-full flex-shrink-0 flex-grow-0 flex-col border-r border-custom-sidebar-border-200 bg-custom-sidebar-background-100 duration-300
         fixed md:relative
         ${themStore.sidebarCollapsed ? "-ml-[280px]" : ""}
         sm:${themStore.sidebarCollapsed ? "-ml-[280px]" : ""}
-        md:ml-0 ${themStore.sidebarCollapsed ? 'w-[80px]' : 'w-[280px]'}
-        lg:ml-0 ${themStore.sidebarCollapsed ? 'w-[80px]' : 'w-[280px]'}
-      `}    >
-      <div
-        ref={ref}
-        className="flex h-full w-full flex-1 flex-col">
+        md:ml-0 ${themStore.sidebarCollapsed ? "w-[80px]" : "w-[280px]"}
+        lg:ml-0 ${themStore.sidebarCollapsed ? "w-[80px]" : "w-[280px]"}
+      `}
+    >
+      <div ref={ref} className="flex h-full w-full flex-1 flex-col">
         <WorkspaceSidebarDropdown />
         <WorkspaceSidebarQuickAction />
         <WorkspaceSidebarMenu />
@@ -61,6 +60,3 @@ export const AppSidebar: FC<IAppSidebar> = observer(() => {
     </div>
   );
 });
-
-
-
diff --git a/web/store/cycle.store.ts b/web/store/cycle.store.ts
index ed5077385..bb6824c08 100644
--- a/web/store/cycle.store.ts
+++ b/web/store/cycle.store.ts
@@ -304,6 +304,7 @@ export class CycleStore implements ICycleStore {
         set(this.cycleMap, [cycleId], { ...this.cycleMap?.[cycleId], ...data });
       });
       const response = await this.cycleService.patchCycle(workspaceSlug, projectId, cycleId, data);
+      this.fetchCycleDetails(workspaceSlug, projectId, cycleId);
       return response;
     } catch (error) {
       console.log("Failed to patch cycle from cycle store");
diff --git a/web/store/issue/cycle/issue.store.ts b/web/store/issue/cycle/issue.store.ts
index 286222e4a..71618d51c 100644
--- a/web/store/issue/cycle/issue.store.ts
+++ b/web/store/issue/cycle/issue.store.ts
@@ -152,6 +152,7 @@ export class CycleIssues extends IssueHelperStore implements ICycleIssues {
 
       const params = this.rootIssueStore?.cycleIssuesFilter?.appliedFilters;
       const response = await this.cycleService.getCycleIssuesWithParams(workspaceSlug, projectId, cycleId, params);
+      this.rootIssueStore.rootStore.cycle.fetchCycleDetails(workspaceSlug, projectId, cycleId);
 
       runInAction(() => {
         set(
@@ -182,6 +183,7 @@ export class CycleIssues extends IssueHelperStore implements ICycleIssues {
 
       const response = await this.rootIssueStore.projectIssues.createIssue(workspaceSlug, projectId, data);
       await this.addIssueToCycle(workspaceSlug, projectId, cycleId, [response.id]);
+      this.rootIssueStore.rootStore.cycle.fetchCycleDetails(workspaceSlug, projectId, cycleId);
 
       return response;
     } catch (error) {
@@ -218,6 +220,7 @@ export class CycleIssues extends IssueHelperStore implements ICycleIssues {
       if (!cycleId) throw new Error("Cycle Id is required");
 
       const response = await this.rootIssueStore.projectIssues.removeIssue(workspaceSlug, projectId, issueId);
+      this.rootIssueStore.rootStore.cycle.fetchCycleDetails(workspaceSlug, projectId, cycleId);
 
       const issueIndex = this.issues[cycleId].findIndex((_issueId) => _issueId === issueId);
       if (issueIndex >= 0)
@@ -246,6 +249,7 @@ export class CycleIssues extends IssueHelperStore implements ICycleIssues {
       });
 
       const response = await this.createIssue(workspaceSlug, projectId, data, cycleId);
+      this.rootIssueStore.rootStore.cycle.fetchCycleDetails(workspaceSlug, projectId, cycleId);
 
       const quickAddIssueIndex = this.issues[cycleId].findIndex((_issueId) => _issueId === data.id);
       if (quickAddIssueIndex >= 0)
@@ -273,6 +277,7 @@ export class CycleIssues extends IssueHelperStore implements ICycleIssues {
       issueIds.forEach((issueId) => {
         this.rootStore.issues.updateIssue(issueId, { cycle_id: cycleId });
       });
+      this.rootIssueStore.rootStore.cycle.fetchCycleDetails(workspaceSlug, projectId, cycleId);
 
       return issueToCycle;
     } catch (error) {
@@ -289,6 +294,7 @@ export class CycleIssues extends IssueHelperStore implements ICycleIssues {
       this.rootStore.issues.updateIssue(issueId, { cycle_id: null });
 
       const response = await this.issueService.removeIssueFromCycle(workspaceSlug, projectId, cycleId, issueId);
+      this.rootIssueStore.rootStore.cycle.fetchCycleDetails(workspaceSlug, projectId, cycleId);
 
       return response;
     } catch (error) {
diff --git a/web/store/issue/module/issue.store.ts b/web/store/issue/module/issue.store.ts
index e32b97df0..c9ed459a1 100644
--- a/web/store/issue/module/issue.store.ts
+++ b/web/store/issue/module/issue.store.ts
@@ -156,6 +156,7 @@ export class ModuleIssues extends IssueHelperStore implements IModuleIssues {
 
       const params = this.rootIssueStore?.moduleIssuesFilter?.appliedFilters;
       const response = await this.moduleService.getModuleIssues(workspaceSlug, projectId, moduleId, params);
+      this.rootIssueStore.rootStore.module.fetchModuleDetails(workspaceSlug, projectId, moduleId);
 
       runInAction(() => {
         set(
@@ -187,6 +188,7 @@ export class ModuleIssues extends IssueHelperStore implements IModuleIssues {
 
       const response = await this.rootIssueStore.projectIssues.createIssue(workspaceSlug, projectId, data);
       await this.addIssuesToModule(workspaceSlug, projectId, moduleId, [response.id]);
+      this.rootIssueStore.rootStore.module.fetchModuleDetails(workspaceSlug, projectId, moduleId);
 
       return response;
     } catch (error) {
@@ -223,6 +225,7 @@ export class ModuleIssues extends IssueHelperStore implements IModuleIssues {
       if (!moduleId) throw new Error("Module Id is required");
 
       const response = await this.rootIssueStore.projectIssues.removeIssue(workspaceSlug, projectId, issueId);
+      this.rootIssueStore.rootStore.module.fetchModuleDetails(workspaceSlug, projectId, moduleId);
 
       const issueIndex = this.issues[moduleId].findIndex((_issueId) => _issueId === issueId);
       if (issueIndex >= 0)
@@ -251,6 +254,7 @@ export class ModuleIssues extends IssueHelperStore implements IModuleIssues {
       });
 
       const response = await this.createIssue(workspaceSlug, projectId, data, moduleId);
+      this.rootIssueStore.rootStore.module.fetchModuleDetails(workspaceSlug, projectId, moduleId);
 
       const quickAddIssueIndex = this.issues[moduleId].findIndex((_issueId) => _issueId === data.id);
       if (quickAddIssueIndex >= 0)
@@ -284,6 +288,7 @@ export class ModuleIssues extends IssueHelperStore implements IModuleIssues {
           else return uniq(concat(issueModuleIds, [moduleId]));
         });
       });
+      this.rootIssueStore.rootStore.module.fetchModuleDetails(workspaceSlug, projectId, moduleId);
 
       return issueToModule;
     } catch (error) {
@@ -314,6 +319,7 @@ export class ModuleIssues extends IssueHelperStore implements IModuleIssues {
         moduleId,
         issueIds
       );
+      this.rootIssueStore.rootStore.module.fetchModuleDetails(workspaceSlug, projectId, moduleId);
 
       return response;
     } catch (error) {
diff --git a/web/store/module.store.ts b/web/store/module.store.ts
index f0f576cbc..7ebccc23c 100644
--- a/web/store/module.store.ts
+++ b/web/store/module.store.ts
@@ -196,6 +196,7 @@ export class ModulesStore implements IModuleStore {
         set(this.moduleMap, [moduleId], { ...originalModuleDetails, ...data });
       });
       const response = await this.moduleService.patchModule(workspaceSlug, projectId, moduleId, data);
+      this.fetchModuleDetails(workspaceSlug, projectId, moduleId);
       return response;
     } catch (error) {
       console.error("Failed to update module in module store", error);

From 0165abab3e10c88e824b32a7f221ad5b63bb3210 Mon Sep 17 00:00:00 2001
From: Lakhan Baheti <94619783+1akhanBaheti@users.noreply.github.com>
Date: Mon, 5 Feb 2024 13:19:07 +0530
Subject: [PATCH 08/58] chore: posthog events improved (#3554)

* chore: events naming convention changed

* chore: track element added for project related events

* chore: track element added for cycle related events

* chore: track element added for module related events

* chore: issue related events updated

* refactor: event tracker store

* refactor: event-tracker store

* fix: posthog changes

---------

Co-authored-by: sriram veeraghanta <veeraghanta.sriram@gmail.com>
---
 .../actions/project-actions.tsx               |   9 +-
 .../command-palette/command-modal.tsx         |   8 +-
 .../command-palette/command-palette.tsx       |   7 +-
 web/components/cycles/cycles-board-card.tsx   |   9 +-
 web/components/cycles/cycles-list-item.tsx    |   9 +-
 web/components/cycles/delete-modal.tsx        |  16 +-
 web/components/cycles/modal.tsx               |  17 +-
 web/components/cycles/sidebar.tsx             |   6 +-
 .../dashboard/project-empty-state.tsx         |  11 +-
 .../dashboard/widgets/recent-projects.tsx     |   4 +-
 web/components/headers/cycle-issues.tsx       |   5 +-
 web/components/headers/cycles.tsx             |   6 +-
 web/components/headers/module-issues.tsx      |   5 +-
 web/components/headers/modules-list.tsx       |   8 +-
 web/components/headers/project-issues.tsx     |  15 +-
 .../headers/project-view-issues.tsx           |   3 +-
 web/components/headers/projects.tsx           |  10 +-
 web/components/inbox/inbox-issue-actions.tsx  |  36 ++--
 .../inbox/modals/create-issue-modal.tsx       |  35 ++--
 .../integration/jira/give-details.tsx         |  10 +-
 web/components/issues/attachment/root.tsx     |  33 +++-
 .../issues/issue-detail/inbox/root.tsx        |  36 +++-
 web/components/issues/issue-detail/root.tsx   | 116 ++++++++++++-
 .../calendar/quick-add-issue-form.tsx         |  16 +-
 .../issue-layouts/empty-states/cycle.tsx      |   6 +-
 .../empty-states/global-view.tsx              |   8 +-
 .../issue-layouts/empty-states/module.tsx     |   6 +-
 .../empty-states/project-issues.tsx           |  10 +-
 .../empty-states/project-view.tsx             |  10 +-
 .../gantt/quick-add-issue-form.tsx            |  16 +-
 .../issue-layouts/kanban/base-kanban-root.tsx |   8 +-
 .../issues/issue-layouts/kanban/block.tsx     |   5 +-
 .../kanban/headers/group-by-card.tsx          |  26 ++-
 .../kanban/quick-add-issue-form.tsx           |  16 +-
 .../issues/issue-layouts/list/block.tsx       |   7 +-
 .../issues/issue-layouts/list/blocks-list.tsx |   2 +-
 .../list/headers/group-by-card.tsx            |  23 ++-
 .../list/quick-add-issue-form.tsx             |  18 +-
 .../properties/all-properties.tsx             |  98 +++++++++--
 .../quick-action-dropdowns/all-issue.tsx      |   6 +
 .../quick-action-dropdowns/archived-issue.tsx |  14 +-
 .../quick-action-dropdowns/cycle-issue.tsx    |   9 +
 .../quick-action-dropdowns/module-issue.tsx   |   9 +
 .../quick-action-dropdowns/project-issue.tsx  |   9 +-
 .../roots/all-issue-layout-root.tsx           |  13 +-
 .../spreadsheet/columns/assignee-column.tsx   |  13 +-
 .../spreadsheet/columns/due-date-column.tsx   |  14 +-
 .../spreadsheet/columns/estimate-column.tsx   |   6 +-
 .../spreadsheet/columns/label-column.tsx      |   6 +-
 .../spreadsheet/columns/priority-column.tsx   |   4 +-
 .../spreadsheet/columns/start-date-column.tsx |  14 +-
 .../spreadsheet/columns/state-column.tsx      |   4 +-
 .../issue-layouts/spreadsheet/issue-row.tsx   |  18 +-
 .../spreadsheet/quick-add-issue-form.tsx      |  21 ++-
 .../issues/issue-modal/draft-issue-layout.tsx |  22 ++-
 web/components/issues/issue-modal/modal.tsx   |  72 ++++----
 web/components/issues/peek-overview/root.tsx  | 113 ++++++++++++-
 web/components/issues/sub-issues/root.tsx     |  66 +++++++-
 .../modules/delete-module-modal.tsx           |  16 +-
 web/components/modules/modal.tsx              |  29 ++--
 web/components/modules/module-card-item.tsx   |   5 +-
 web/components/modules/module-list-item.tsx   |   5 +-
 web/components/modules/modules-list-view.tsx  |   8 +-
 web/components/modules/sidebar.tsx            |  11 +-
 web/components/onboarding/invitations.tsx     |  11 +-
 web/components/onboarding/tour/root.tsx       |  10 +-
 .../page-views/workspace-dashboard.tsx        |  15 +-
 web/components/project/card-list.tsx          |  10 +-
 .../project/create-project-modal.tsx          |  31 ++--
 .../project/delete-project-modal.tsx          |  34 ++--
 web/components/project/form.tsx               |  34 ++--
 .../project/leave-project-modal.tsx           |  10 +-
 web/components/project/member-list.tsx        |   6 +-
 .../project/send-project-invitation-modal.tsx |  14 +-
 .../project/settings/features-list.tsx        |   8 +-
 web/components/project/sidebar-list-item.tsx  |  45 ++---
 web/components/project/sidebar-list.tsx       |   7 +-
 .../states/create-update-state-inline.tsx     |  14 +-
 web/components/states/delete-state-modal.tsx  |  10 +-
 .../project-setting-state-list-item.tsx       |   6 +-
 .../states/project-setting-state-list.tsx     |   6 +-
 .../workspace/create-workspace-form.tsx       |  12 +-
 .../workspace/delete-workspace-modal.tsx      |  10 +-
 .../workspace/settings/workspace-details.tsx  |  10 +-
 web/components/workspace/sidebar-dropdown.tsx |  31 ++--
 .../workspace/sidebar-quick-action.tsx        |   9 +-
 web/constants/event-tracker.ts                | 105 ++++++++++++
 web/constants/spreadsheet.ts                  |   6 +-
 web/hooks/store/index.ts                      |   1 +
 web/hooks/store/use-event-tracker.ts          |  11 ++
 web/layouts/auth-layout/project-wrapper.tsx   |   7 +-
 web/lib/app-provider.tsx                      |   6 +-
 ...sthog-wrapper.tsx => posthog-provider.tsx} |  12 +-
 web/lib/redirect.ts                           |  16 --
 web/pages/[workspaceSlug]/analytics.tsx       |   6 +-
 .../projects/[projectId]/cycles/index.tsx     |   4 +-
 .../[workspaceSlug]/settings/members.tsx      |  10 +-
 web/pages/invitations/index.tsx               |   8 +-
 web/pages/onboarding/index.tsx                |   8 +-
 web/store/application/event-tracker.store.ts  |  79 ---------
 web/store/application/index.ts                |   5 +-
 web/store/event-tracker.store.ts              | 155 ++++++++++++++++++
 web/store/root.store.ts                       |   3 +
 103 files changed, 1385 insertions(+), 596 deletions(-)
 create mode 100644 web/constants/event-tracker.ts
 create mode 100644 web/hooks/store/use-event-tracker.ts
 rename web/lib/{wrappers/posthog-wrapper.tsx => posthog-provider.tsx} (82%)
 delete mode 100644 web/lib/redirect.ts
 delete mode 100644 web/store/application/event-tracker.store.ts
 create mode 100644 web/store/event-tracker.store.ts

diff --git a/web/components/command-palette/actions/project-actions.tsx b/web/components/command-palette/actions/project-actions.tsx
index 44b5e6111..bdd08a0d8 100644
--- a/web/components/command-palette/actions/project-actions.tsx
+++ b/web/components/command-palette/actions/project-actions.tsx
@@ -1,7 +1,7 @@
 import { Command } from "cmdk";
 import { ContrastIcon, FileText } from "lucide-react";
 // hooks
-import { useApplication } from "hooks/store";
+import { useApplication, useEventTracker } from "hooks/store";
 // ui
 import { DiceIcon, PhotoFilterIcon } from "@plane/ui";
 
@@ -14,8 +14,8 @@ export const CommandPaletteProjectActions: React.FC<Props> = (props) => {
 
   const {
     commandPalette: { toggleCreateCycleModal, toggleCreateModuleModal, toggleCreatePageModal, toggleCreateViewModal },
-    eventTracker: { setTrackElement },
   } = useApplication();
+  const { setTrackElement } = useEventTracker();
 
   return (
     <>
@@ -23,7 +23,7 @@ export const CommandPaletteProjectActions: React.FC<Props> = (props) => {
         <Command.Item
           onSelect={() => {
             closePalette();
-            setTrackElement("COMMAND_PALETTE");
+            setTrackElement("Command palette");
             toggleCreateCycleModal(true);
           }}
           className="focus:outline-none"
@@ -39,6 +39,7 @@ export const CommandPaletteProjectActions: React.FC<Props> = (props) => {
         <Command.Item
           onSelect={() => {
             closePalette();
+            setTrackElement("Command palette");
             toggleCreateModuleModal(true);
           }}
           className="focus:outline-none"
@@ -54,6 +55,7 @@ export const CommandPaletteProjectActions: React.FC<Props> = (props) => {
         <Command.Item
           onSelect={() => {
             closePalette();
+            setTrackElement("Command palette");
             toggleCreateViewModal(true);
           }}
           className="focus:outline-none"
@@ -69,6 +71,7 @@ export const CommandPaletteProjectActions: React.FC<Props> = (props) => {
         <Command.Item
           onSelect={() => {
             closePalette();
+            setTrackElement("Command palette");
             toggleCreatePageModal(true);
           }}
           className="focus:outline-none"
diff --git a/web/components/command-palette/command-modal.tsx b/web/components/command-palette/command-modal.tsx
index 342827825..dbf349f9d 100644
--- a/web/components/command-palette/command-modal.tsx
+++ b/web/components/command-palette/command-modal.tsx
@@ -6,7 +6,7 @@ import { Dialog, Transition } from "@headlessui/react";
 import { observer } from "mobx-react-lite";
 import { FolderPlus, Search, Settings } from "lucide-react";
 // hooks
-import { useApplication, useProject } from "hooks/store";
+import { useApplication, useEventTracker, useProject } from "hooks/store";
 // services
 import { WorkspaceService } from "services/workspace.service";
 import { IssueService } from "services/issue";
@@ -64,8 +64,8 @@ export const CommandModal: React.FC = observer(() => {
       toggleCreateIssueModal,
       toggleCreateProjectModal,
     },
-    eventTracker: { setTrackElement },
   } = useApplication();
+  const { setTrackElement } = useEventTracker();
 
   // router
   const router = useRouter();
@@ -278,7 +278,7 @@ export const CommandModal: React.FC = observer(() => {
                           <Command.Item
                             onSelect={() => {
                               closePalette();
-                              setTrackElement("COMMAND_PALETTE");
+                              setTrackElement("Command Palette");
                               toggleCreateIssueModal(true);
                             }}
                             className="focus:bg-custom-background-80"
@@ -296,7 +296,7 @@ export const CommandModal: React.FC = observer(() => {
                             <Command.Item
                               onSelect={() => {
                                 closePalette();
-                                setTrackElement("COMMAND_PALETTE");
+                                setTrackElement("Command palette");
                                 toggleCreateProjectModal(true);
                               }}
                               className="focus:outline-none"
diff --git a/web/components/command-palette/command-palette.tsx b/web/components/command-palette/command-palette.tsx
index 213c35f8e..e6349e0b4 100644
--- a/web/components/command-palette/command-palette.tsx
+++ b/web/components/command-palette/command-palette.tsx
@@ -3,7 +3,7 @@ import { useRouter } from "next/router";
 import useSWR from "swr";
 import { observer } from "mobx-react-lite";
 // hooks
-import { useApplication, useIssues, useUser } from "hooks/store";
+import { useApplication, useEventTracker, useIssues, useUser } from "hooks/store";
 import useToast from "hooks/use-toast";
 // components
 import { CommandModal, ShortcutsModal } from "components/command-palette";
@@ -32,8 +32,8 @@ export const CommandPalette: FC = observer(() => {
   const {
     commandPalette,
     theme: { toggleSidebar },
-    eventTracker: { setTrackElement },
   } = useApplication();
+  const { setTrackElement } = useEventTracker();
   const { currentUser } = useUser();
   const {
     issues: { removeIssue },
@@ -118,11 +118,10 @@ export const CommandPalette: FC = observer(() => {
           toggleSidebar();
         }
       } else if (!isAnyModalOpen) {
+        setTrackElement("Shortcut key");
         if (keyPressed === "c") {
-          setTrackElement("SHORTCUT_KEY");
           toggleCreateIssueModal(true);
         } else if (keyPressed === "p") {
-          setTrackElement("SHORTCUT_KEY");
           toggleCreateProjectModal(true);
         } else if (keyPressed === "h") {
           toggleShortcutModal(true);
diff --git a/web/components/cycles/cycles-board-card.tsx b/web/components/cycles/cycles-board-card.tsx
index d2279aeb4..8da2be9ec 100644
--- a/web/components/cycles/cycles-board-card.tsx
+++ b/web/components/cycles/cycles-board-card.tsx
@@ -2,7 +2,7 @@ import { FC, MouseEvent, useState } from "react";
 import { useRouter } from "next/router";
 import Link from "next/link";
 // hooks
-import { useApplication, useCycle, useUser } from "hooks/store";
+import { useEventTracker, useCycle, useUser } from "hooks/store";
 import useToast from "hooks/use-toast";
 // components
 import { CycleCreateUpdateModal, CycleDeleteModal } from "components/cycles";
@@ -33,9 +33,7 @@ export const CyclesBoardCard: FC<ICyclesBoardCard> = (props) => {
   // router
   const router = useRouter();
   // store
-  const {
-    eventTracker: { setTrackElement },
-  } = useApplication();
+  const { setTrackElement } = useEventTracker();
   const {
     membership: { currentProjectRole },
   } = useUser();
@@ -117,14 +115,15 @@ export const CyclesBoardCard: FC<ICyclesBoardCard> = (props) => {
   const handleEditCycle = (e: MouseEvent<HTMLButtonElement>) => {
     e.preventDefault();
     e.stopPropagation();
+    setTrackElement("Cycles page board layout");
     setUpdateModal(true);
   };
 
   const handleDeleteCycle = (e: MouseEvent<HTMLButtonElement>) => {
     e.preventDefault();
     e.stopPropagation();
+    setTrackElement("Cycles page board layout");
     setDeleteModal(true);
-    setTrackElement("CYCLE_PAGE_BOARD_LAYOUT");
   };
 
   const openCycleOverview = (e: MouseEvent<HTMLButtonElement>) => {
diff --git a/web/components/cycles/cycles-list-item.tsx b/web/components/cycles/cycles-list-item.tsx
index e34f4b30b..86de8d0c0 100644
--- a/web/components/cycles/cycles-list-item.tsx
+++ b/web/components/cycles/cycles-list-item.tsx
@@ -2,7 +2,7 @@ import { FC, MouseEvent, useState } from "react";
 import Link from "next/link";
 import { useRouter } from "next/router";
 // hooks
-import { useApplication, useCycle, useUser } from "hooks/store";
+import { useEventTracker, useCycle, useUser } from "hooks/store";
 import useToast from "hooks/use-toast";
 // components
 import { CycleCreateUpdateModal, CycleDeleteModal } from "components/cycles";
@@ -37,9 +37,7 @@ export const CyclesListItem: FC<TCyclesListItem> = (props) => {
   // router
   const router = useRouter();
   // store hooks
-  const {
-    eventTracker: { setTrackElement },
-  } = useApplication();
+  const { setTrackElement } = useEventTracker();
   const {
     membership: { currentProjectRole },
   } = useUser();
@@ -90,14 +88,15 @@ export const CyclesListItem: FC<TCyclesListItem> = (props) => {
   const handleEditCycle = (e: MouseEvent<HTMLButtonElement>) => {
     e.preventDefault();
     e.stopPropagation();
+    setTrackElement("Cycles page list layout");
     setUpdateModal(true);
   };
 
   const handleDeleteCycle = (e: MouseEvent<HTMLButtonElement>) => {
     e.preventDefault();
     e.stopPropagation();
+    setTrackElement("Cycles page list layout");
     setDeleteModal(true);
-    setTrackElement("CYCLE_PAGE_LIST_LAYOUT");
   };
 
   const openCycleOverview = (e: MouseEvent<HTMLButtonElement>) => {
diff --git a/web/components/cycles/delete-modal.tsx b/web/components/cycles/delete-modal.tsx
index 44da175b4..32e067833 100644
--- a/web/components/cycles/delete-modal.tsx
+++ b/web/components/cycles/delete-modal.tsx
@@ -4,7 +4,7 @@ import { Dialog, Transition } from "@headlessui/react";
 import { observer } from "mobx-react-lite";
 import { AlertTriangle } from "lucide-react";
 // hooks
-import { useApplication, useCycle } from "hooks/store";
+import { useEventTracker, useCycle } from "hooks/store";
 import useToast from "hooks/use-toast";
 // components
 import { Button } from "@plane/ui";
@@ -27,9 +27,7 @@ export const CycleDeleteModal: React.FC<ICycleDelete> = observer((props) => {
   const router = useRouter();
   const { cycleId, peekCycle } = router.query;
   // store hooks
-  const {
-    eventTracker: { postHogEventTracker },
-  } = useApplication();
+  const { captureCycleEvent } = useEventTracker();
   const { deleteCycle } = useCycle();
   // toast alert
   const { setToastAlert } = useToast();
@@ -46,13 +44,15 @@ export const CycleDeleteModal: React.FC<ICycleDelete> = observer((props) => {
             title: "Success!",
             message: "Cycle deleted successfully.",
           });
-          postHogEventTracker("CYCLE_DELETE", {
-            state: "SUCCESS",
+          captureCycleEvent({
+            eventName: "Cycle deleted",
+            payload: { ...cycle, state: "SUCCESS" },
           });
         })
         .catch(() => {
-          postHogEventTracker("CYCLE_DELETE", {
-            state: "FAILED",
+          captureCycleEvent({
+            eventName: "Cycle deleted",
+            payload: { ...cycle, state: "FAILED" },
           });
         });
 
diff --git a/web/components/cycles/modal.tsx b/web/components/cycles/modal.tsx
index 8144feef7..7e17e55f1 100644
--- a/web/components/cycles/modal.tsx
+++ b/web/components/cycles/modal.tsx
@@ -3,7 +3,7 @@ import { Dialog, Transition } from "@headlessui/react";
 // services
 import { CycleService } from "services/cycle.service";
 // hooks
-import { useApplication, useCycle, useProject } from "hooks/store";
+import { useEventTracker, useCycle, useProject } from "hooks/store";
 import useToast from "hooks/use-toast";
 import useLocalStorage from "hooks/use-local-storage";
 // components
@@ -27,9 +27,7 @@ export const CycleCreateUpdateModal: React.FC<CycleModalProps> = (props) => {
   // states
   const [activeProject, setActiveProject] = useState<string | null>(null);
   // store hooks
-  const {
-    eventTracker: { postHogEventTracker },
-  } = useApplication();
+  const { captureCycleEvent } = useEventTracker();
   const { workspaceProjectIds } = useProject();
   const { createCycle, updateCycleDetails } = useCycle();
   // toast alert
@@ -48,9 +46,9 @@ export const CycleCreateUpdateModal: React.FC<CycleModalProps> = (props) => {
           title: "Success!",
           message: "Cycle created successfully.",
         });
-        postHogEventTracker("CYCLE_CREATE", {
-          ...res,
-          state: "SUCCESS",
+        captureCycleEvent({
+          eventName: "Cycle created",
+          payload: { ...res, state: "SUCCESS" },
         });
       })
       .catch((err) => {
@@ -59,8 +57,9 @@ export const CycleCreateUpdateModal: React.FC<CycleModalProps> = (props) => {
           title: "Error!",
           message: err.detail ?? "Error in creating cycle. Please try again.",
         });
-        postHogEventTracker("CYCLE_CREATE", {
-          state: "FAILED",
+        captureCycleEvent({
+          eventName: "Cycle created",
+          payload: { ...payload, state: "FAILED" },
         });
       });
   };
diff --git a/web/components/cycles/sidebar.tsx b/web/components/cycles/sidebar.tsx
index 5fa1d2459..c61679304 100644
--- a/web/components/cycles/sidebar.tsx
+++ b/web/components/cycles/sidebar.tsx
@@ -6,7 +6,7 @@ import { Disclosure, Popover, Transition } from "@headlessui/react";
 // services
 import { CycleService } from "services/cycle.service";
 // hooks
-import { useApplication, useCycle, useMember, useUser } from "hooks/store";
+import { useEventTracker, useCycle, useUser, useMember } from "hooks/store";
 import useToast from "hooks/use-toast";
 // components
 import { SidebarProgressStats } from "components/core";
@@ -66,9 +66,7 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
   const router = useRouter();
   const { workspaceSlug, projectId, peekCycle } = router.query;
   // store hooks
-  const {
-    eventTracker: { setTrackElement },
-  } = useApplication();
+  const { setTrackElement } = useEventTracker();
   const {
     membership: { currentProjectRole },
   } = useUser();
diff --git a/web/components/dashboard/project-empty-state.tsx b/web/components/dashboard/project-empty-state.tsx
index c0ac90f34..bb7f82f34 100644
--- a/web/components/dashboard/project-empty-state.tsx
+++ b/web/components/dashboard/project-empty-state.tsx
@@ -1,7 +1,7 @@
 import Image from "next/image";
 import { observer } from "mobx-react-lite";
 // hooks
-import { useApplication, useUser } from "hooks/store";
+import { useApplication, useEventTracker, useUser } from "hooks/store";
 // ui
 import { Button } from "@plane/ui";
 // assets
@@ -14,6 +14,7 @@ export const DashboardProjectEmptyState = observer(() => {
   const {
     commandPalette: { toggleCreateProjectModal },
   } = useApplication();
+  const { setTrackElement } = useEventTracker();
   const {
     membership: { currentWorkspaceRole },
   } = useUser();
@@ -31,7 +32,13 @@ export const DashboardProjectEmptyState = observer(() => {
       <Image src={ProjectEmptyStateImage} className="w-full" alt="Project empty state" />
       {canCreateProject && (
         <div className="flex justify-center">
-          <Button variant="primary" onClick={() => toggleCreateProjectModal(true)}>
+          <Button
+            variant="primary"
+            onClick={() => {
+              setTrackElement("Project empty state");
+              toggleCreateProjectModal(true);
+            }}
+          >
             Build your first project
           </Button>
         </div>
diff --git a/web/components/dashboard/widgets/recent-projects.tsx b/web/components/dashboard/widgets/recent-projects.tsx
index aae8ff54b..eb7a5e4e5 100644
--- a/web/components/dashboard/widgets/recent-projects.tsx
+++ b/web/components/dashboard/widgets/recent-projects.tsx
@@ -3,7 +3,7 @@ import Link from "next/link";
 import { observer } from "mobx-react-lite";
 import { Plus } from "lucide-react";
 // hooks
-import { useApplication, useDashboard, useProject, useUser } from "hooks/store";
+import { useApplication, useEventTracker, useDashboard, useProject, useUser } from "hooks/store";
 // components
 import { WidgetLoader, WidgetProps } from "components/dashboard/widgets";
 // ui
@@ -72,6 +72,7 @@ export const RecentProjectsWidget: React.FC<WidgetProps> = observer((props) => {
   const {
     commandPalette: { toggleCreateProjectModal },
   } = useApplication();
+  const { setTrackElement } = useEventTracker();
   const {
     membership: { currentWorkspaceRole },
   } = useUser();
@@ -105,6 +106,7 @@ export const RecentProjectsWidget: React.FC<WidgetProps> = observer((props) => {
             onClick={(e) => {
               e.preventDefault();
               e.stopPropagation();
+              setTrackElement("Sidebar");
               toggleCreateProjectModal(true);
             }}
           >
diff --git a/web/components/headers/cycle-issues.tsx b/web/components/headers/cycle-issues.tsx
index 8e2ceab10..7cfc492f4 100644
--- a/web/components/headers/cycle-issues.tsx
+++ b/web/components/headers/cycle-issues.tsx
@@ -5,6 +5,7 @@ import Link from "next/link";
 // hooks
 import {
   useApplication,
+  useEventTracker,
   useCycle,
   useLabel,
   useMember,
@@ -70,8 +71,8 @@ export const CycleIssuesHeader: React.FC = observer(() => {
   const { currentProjectCycleIds, getCycleById } = useCycle();
   const {
     commandPalette: { toggleCreateIssueModal },
-    eventTracker: { setTrackElement },
   } = useApplication();
+  const { setTrackElement } = useEventTracker();
   const {
     membership: { currentProjectRole },
   } = useUser();
@@ -238,7 +239,7 @@ export const CycleIssuesHeader: React.FC = observer(() => {
               </Button>
               <Button
                 onClick={() => {
-                  setTrackElement("CYCLE_PAGE_HEADER");
+                  setTrackElement("Cycle issues page");
                   toggleCreateIssueModal(true, EIssuesStoreType.CYCLE);
                 }}
                 size="sm"
diff --git a/web/components/headers/cycles.tsx b/web/components/headers/cycles.tsx
index fbf1ca6e2..a9ad3a01f 100644
--- a/web/components/headers/cycles.tsx
+++ b/web/components/headers/cycles.tsx
@@ -3,7 +3,7 @@ import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
 import { Plus } from "lucide-react";
 // hooks
-import { useApplication, useProject, useUser } from "hooks/store";
+import { useApplication, useEventTracker, useProject, useUser } from "hooks/store";
 // ui
 import { Breadcrumbs, Button, ContrastIcon } from "@plane/ui";
 // helpers
@@ -20,8 +20,8 @@ export const CyclesHeader: FC = observer(() => {
   // store hooks
   const {
     commandPalette: { toggleCreateCycleModal },
-    eventTracker: { setTrackElement },
   } = useApplication();
+  const { setTrackElement } = useEventTracker();
   const {
     membership: { currentProjectRole },
   } = useUser();
@@ -70,7 +70,7 @@ export const CyclesHeader: FC = observer(() => {
             size="sm"
             prependIcon={<Plus />}
             onClick={() => {
-              setTrackElement("CYCLES_PAGE_HEADER");
+              setTrackElement("Cycles page");
               toggleCreateCycleModal(true);
             }}
           >
diff --git a/web/components/headers/module-issues.tsx b/web/components/headers/module-issues.tsx
index 5ec67a3d7..70e4dbeea 100644
--- a/web/components/headers/module-issues.tsx
+++ b/web/components/headers/module-issues.tsx
@@ -5,6 +5,7 @@ import Link from "next/link";
 // hooks
 import {
   useApplication,
+  useEventTracker,
   useLabel,
   useMember,
   useModule,
@@ -73,8 +74,8 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
   const { projectModuleIds, getModuleById } = useModule();
   const {
     commandPalette: { toggleCreateIssueModal },
-    eventTracker: { setTrackElement },
   } = useApplication();
+  const { setTrackElement } = useEventTracker();
   const {
     membership: { currentProjectRole },
   } = useUser();
@@ -241,7 +242,7 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
               </Button>
               <Button
                 onClick={() => {
-                  setTrackElement("MODULE_PAGE_HEADER");
+                  setTrackElement("Module issues page");
                   toggleCreateIssueModal(true, EIssuesStoreType.MODULE);
                 }}
                 size="sm"
diff --git a/web/components/headers/modules-list.tsx b/web/components/headers/modules-list.tsx
index a0a7227f7..91e05db46 100644
--- a/web/components/headers/modules-list.tsx
+++ b/web/components/headers/modules-list.tsx
@@ -2,7 +2,7 @@ import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
 import { Plus } from "lucide-react";
 // hooks
-import { useApplication, useProject, useUser } from "hooks/store";
+import { useApplication, useEventTracker, useProject, useUser } from "hooks/store";
 import useLocalStorage from "hooks/use-local-storage";
 // ui
 import { Breadcrumbs, Button, Tooltip, DiceIcon } from "@plane/ui";
@@ -21,6 +21,7 @@ export const ModulesListHeader: React.FC = observer(() => {
   const { workspaceSlug } = router.query;
   // store hooks
   const { commandPalette: commandPaletteStore } = useApplication();
+  const { setTrackElement } = useEventTracker();
   const {
     membership: { currentProjectRole },
   } = useUser();
@@ -90,7 +91,10 @@ export const ModulesListHeader: React.FC = observer(() => {
             variant="primary"
             size="sm"
             prependIcon={<Plus />}
-            onClick={() => commandPaletteStore.toggleCreateModuleModal(true)}
+            onClick={() => {
+              setTrackElement("Modules page");
+              commandPaletteStore.toggleCreateModuleModal(true);
+            }}
           >
             Add Module
           </Button>
diff --git a/web/components/headers/project-issues.tsx b/web/components/headers/project-issues.tsx
index 29ecb16c7..769d6c945 100644
--- a/web/components/headers/project-issues.tsx
+++ b/web/components/headers/project-issues.tsx
@@ -4,7 +4,16 @@ import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
 import { ArrowLeft, Briefcase, Circle, ExternalLink, Plus } from "lucide-react";
 // hooks
-import { useApplication, useLabel, useProject, useProjectState, useUser, useInbox, useMember } from "hooks/store";
+import {
+  useApplication,
+  useEventTracker,
+  useLabel,
+  useProject,
+  useProjectState,
+  useUser,
+  useInbox,
+  useMember,
+} from "hooks/store";
 // components
 import { DisplayFiltersSelection, FiltersDropdown, FilterSelection, LayoutSelection } from "components/issues";
 import { ProjectAnalyticsModal } from "components/analytics";
@@ -36,8 +45,8 @@ export const ProjectIssuesHeader: React.FC = observer(() => {
   } = useIssues(EIssuesStoreType.PROJECT);
   const {
     commandPalette: { toggleCreateIssueModal },
-    eventTracker: { setTrackElement },
   } = useApplication();
+  const { setTrackElement } = useEventTracker();
   const {
     membership: { currentProjectRole },
   } = useUser();
@@ -221,7 +230,7 @@ export const ProjectIssuesHeader: React.FC = observer(() => {
               </Button>
               <Button
                 onClick={() => {
-                  setTrackElement("PROJECT_PAGE_HEADER");
+                  setTrackElement("Project issues page");
                   toggleCreateIssueModal(true, EIssuesStoreType.PROJECT);
                 }}
                 size="sm"
diff --git a/web/components/headers/project-view-issues.tsx b/web/components/headers/project-view-issues.tsx
index 050400a2c..56cd54f0b 100644
--- a/web/components/headers/project-view-issues.tsx
+++ b/web/components/headers/project-view-issues.tsx
@@ -6,6 +6,7 @@ import Link from "next/link";
 // hooks
 import {
   useApplication,
+  useEventTracker,
   useIssues,
   useLabel,
   useMember,
@@ -41,9 +42,9 @@ export const ProjectViewIssuesHeader: React.FC = observer(() => {
   const {
     issuesFilter: { issueFilters, updateFilters },
   } = useIssues(EIssuesStoreType.PROJECT_VIEW);
+  const { setTrackElement } = useEventTracker();
   const {
     commandPalette: { toggleCreateIssueModal },
-    eventTracker: { setTrackElement },
   } = useApplication();
   const {
     membership: { currentProjectRole },
diff --git a/web/components/headers/projects.tsx b/web/components/headers/projects.tsx
index 33192930e..34e8ffa08 100644
--- a/web/components/headers/projects.tsx
+++ b/web/components/headers/projects.tsx
@@ -1,7 +1,7 @@
 import { observer } from "mobx-react-lite";
 import { Search, Plus, Briefcase } from "lucide-react";
 // hooks
-import { useApplication, useProject, useUser } from "hooks/store";
+import { useApplication, useEventTracker, useProject, useUser } from "hooks/store";
 // ui
 import { Breadcrumbs, Button } from "@plane/ui";
 // constants
@@ -12,10 +12,8 @@ import { BreadcrumbLink } from "components/common";
 
 export const ProjectsHeader = observer(() => {
   // store hooks
-  const {
-    commandPalette: commandPaletteStore,
-    eventTracker: { setTrackElement },
-  } = useApplication();
+  const { commandPalette: commandPaletteStore } = useApplication();
+  const { setTrackElement } = useEventTracker();
   const {
     membership: { currentWorkspaceRole },
   } = useUser();
@@ -53,7 +51,7 @@ export const ProjectsHeader = observer(() => {
             prependIcon={<Plus />}
             size="sm"
             onClick={() => {
-              setTrackElement("PROJECTS_PAGE_HEADER");
+              setTrackElement("Projects page");
               commandPaletteStore.toggleCreateProjectModal(true);
             }}
           >
diff --git a/web/components/inbox/inbox-issue-actions.tsx b/web/components/inbox/inbox-issue-actions.tsx
index 0ca28b950..82253af88 100644
--- a/web/components/inbox/inbox-issue-actions.tsx
+++ b/web/components/inbox/inbox-issue-actions.tsx
@@ -4,7 +4,7 @@ import { observer } from "mobx-react-lite";
 import DatePicker from "react-datepicker";
 import { Popover } from "@headlessui/react";
 // hooks
-import { useApplication, useUser, useInboxIssues, useIssueDetail, useWorkspace } from "hooks/store";
+import { useUser, useInboxIssues, useIssueDetail, useWorkspace, useEventTracker } from "hooks/store";
 import useToast from "hooks/use-toast";
 // components
 import {
@@ -38,9 +38,7 @@ export const InboxIssueActionsHeader: FC<TInboxIssueActionsHeader> = observer((p
   // router
   const router = useRouter();
   // hooks
-  const {
-    eventTracker: { postHogEventTracker },
-  } = useApplication();
+  const { captureIssueEvent } = useEventTracker();
   const { currentWorkspace } = useWorkspace();
   const {
     issues: { getInboxIssuesByInboxId, getInboxIssueByIssueId, updateInboxIssueStatus, removeInboxIssue },
@@ -87,17 +85,19 @@ export const InboxIssueActionsHeader: FC<TInboxIssueActionsHeader> = observer((p
           if (!workspaceSlug || !projectId || !inboxId || !inboxIssueId || !currentWorkspace)
             throw new Error("Missing required parameters");
           await removeInboxIssue(workspaceSlug, projectId, inboxId, inboxIssueId);
-          postHogEventTracker(
-            "ISSUE_DELETED",
-            {
+          captureIssueEvent({
+            eventName: "Issue deleted",
+            payload: {
+              id: inboxIssueId,
               state: "SUCCESS",
+              element: "Inbox page",
             },
-            {
+            group: {
               isGrouping: true,
               groupType: "Workspace_metrics",
               groupId: currentWorkspace?.id!,
-            }
-          );
+            },
+          });
           router.push({
             pathname: `/${workspaceSlug}/projects/${projectId}/inbox/${inboxId}`,
           });
@@ -107,17 +107,19 @@ export const InboxIssueActionsHeader: FC<TInboxIssueActionsHeader> = observer((p
             title: "Error!",
             message: "Something went wrong while deleting inbox issue. Please try again.",
           });
-          postHogEventTracker(
-            "ISSUE_DELETED",
-            {
+          captureIssueEvent({
+            eventName: "Issue deleted",
+            payload: {
+              id: inboxIssueId,
               state: "FAILED",
+              element: "Inbox page",
             },
-            {
+            group: {
               isGrouping: true,
               groupType: "Workspace_metrics",
               groupId: currentWorkspace?.id!,
-            }
-          );
+            },
+          });
         }
       },
     }),
@@ -130,7 +132,7 @@ export const InboxIssueActionsHeader: FC<TInboxIssueActionsHeader> = observer((p
       updateInboxIssueStatus,
       removeInboxIssue,
       setToastAlert,
-      postHogEventTracker,
+      captureIssueEvent,
       router,
     ]
   );
diff --git a/web/components/inbox/modals/create-issue-modal.tsx b/web/components/inbox/modals/create-issue-modal.tsx
index e152c1b03..066f172ca 100644
--- a/web/components/inbox/modals/create-issue-modal.tsx
+++ b/web/components/inbox/modals/create-issue-modal.tsx
@@ -6,7 +6,7 @@ import { Controller, useForm } from "react-hook-form";
 import { RichTextEditorWithRef } from "@plane/rich-text-editor";
 import { Sparkle } from "lucide-react";
 // hooks
-import { useApplication, useWorkspace, useInboxIssues, useMention } from "hooks/store";
+import { useApplication, useEventTracker, useWorkspace, useInboxIssues, useMention } from "hooks/store";
 import useToast from "hooks/use-toast";
 // services
 import { FileService } from "services/file.service";
@@ -63,8 +63,8 @@ export const CreateInboxIssueModal: React.FC<Props> = observer((props) => {
   } = useInboxIssues();
   const {
     config: { envConfig },
-    eventTracker: { postHogEventTracker },
   } = useApplication();
+  const { captureIssueEvent } = useEventTracker();
   const { currentWorkspace } = useWorkspace();
 
   const {
@@ -93,32 +93,37 @@ export const CreateInboxIssueModal: React.FC<Props> = observer((props) => {
           router.push(`/${workspaceSlug}/projects/${projectId}/inbox/${inboxId}?inboxIssueId=${res.id}`);
           handleClose();
         } else reset(defaultValues);
-        postHogEventTracker(
-          "ISSUE_CREATED",
-          {
-            ...res,
+        captureIssueEvent({
+          eventName: "Issue created",
+          payload: {
+            ...formData,
             state: "SUCCESS",
+            element: "Inbox page",
           },
-          {
+          group: {
             isGrouping: true,
             groupType: "Workspace_metrics",
             groupId: currentWorkspace?.id!,
-          }
-        );
+          },
+          path: router.pathname,
+        });
       })
       .catch((error) => {
         console.error(error);
-        postHogEventTracker(
-          "ISSUE_CREATED",
-          {
+        captureIssueEvent({
+          eventName: "Issue created",
+          payload: {
+            ...formData,
             state: "FAILED",
+            element: "Inbox page",
           },
-          {
+          group: {
             isGrouping: true,
             groupType: "Workspace_metrics",
             groupId: currentWorkspace?.id!,
-          }
-        );
+          },
+          path: router.pathname,
+        });
       });
   };
 
diff --git a/web/components/integration/jira/give-details.tsx b/web/components/integration/jira/give-details.tsx
index 0d90ba0a5..ed2ea77ae 100644
--- a/web/components/integration/jira/give-details.tsx
+++ b/web/components/integration/jira/give-details.tsx
@@ -4,7 +4,7 @@ import { observer } from "mobx-react-lite";
 import { useFormContext, Controller } from "react-hook-form";
 import { Plus } from "lucide-react";
 // hooks
-import { useApplication, useProject } from "hooks/store";
+import { useApplication, useEventTracker, useProject } from "hooks/store";
 // components
 import { CustomSelect, Input } from "@plane/ui";
 // helpers
@@ -14,10 +14,8 @@ import { IJiraImporterForm } from "@plane/types";
 
 export const JiraGetImportDetail: React.FC = observer(() => {
   // store hooks
-  const {
-    commandPalette: commandPaletteStore,
-    eventTracker: { setTrackElement },
-  } = useApplication();
+  const { commandPalette: commandPaletteStore } = useApplication();
+  const { setTrackElement } = useEventTracker();
   const { workspaceProjectIds, getProjectById } = useProject();
   // form info
   const {
@@ -202,7 +200,7 @@ export const JiraGetImportDetail: React.FC = observer(() => {
                   <button
                     type="button"
                     onClick={() => {
-                      setTrackElement("JIRA_IMPORT_DETAIL");
+                      setTrackElement("Jira import detail page");
                       commandPaletteStore.toggleCreateProjectModal(true);
                     }}
                     className="flex cursor-pointer select-none items-center space-x-2 truncate rounded px-1 py-1.5 text-custom-text-200"
diff --git a/web/components/issues/attachment/root.tsx b/web/components/issues/attachment/root.tsx
index 79a6dc840..11d74af0e 100644
--- a/web/components/issues/attachment/root.tsx
+++ b/web/components/issues/attachment/root.tsx
@@ -1,6 +1,6 @@
 import { FC, useMemo } from "react";
 // hooks
-import { useIssueDetail } from "hooks/store";
+import { useEventTracker, useIssueDetail } from "hooks/store";
 import useToast from "hooks/use-toast";
 // components
 import { IssueAttachmentUpload } from "./attachment-upload";
@@ -23,6 +23,7 @@ export const IssueAttachmentRoot: FC<TIssueAttachmentRoot> = (props) => {
   const { workspaceSlug, projectId, issueId, disabled = false } = props;
   // hooks
   const { createAttachment, removeAttachment } = useIssueDetail();
+  const { captureIssueEvent } = useEventTracker();
   const { setToastAlert } = useToast();
 
   const handleAttachmentOperations: TAttachmentOperations = useMemo(
@@ -30,13 +31,25 @@ export const IssueAttachmentRoot: FC<TIssueAttachmentRoot> = (props) => {
       create: async (data: FormData) => {
         try {
           if (!workspaceSlug || !projectId || !issueId) throw new Error("Missing required fields");
-          await createAttachment(workspaceSlug, projectId, issueId, data);
+          const res = await createAttachment(workspaceSlug, projectId, issueId, data);
           setToastAlert({
             message: "The attachment has been successfully uploaded",
             type: "success",
             title: "Attachment uploaded",
           });
+          captureIssueEvent({
+            eventName: "Issue updated",
+            payload: { id: issueId, state: "SUCCESS", element: "Issue detail page" },
+            updates: {
+              changed_property: "attachment",
+              change_details: res.id,
+            },
+          });
         } catch (error) {
+          captureIssueEvent({
+            eventName: "Issue updated",
+            payload: { id: issueId, state: "FAILED", element: "Issue detail page" },
+          });
           setToastAlert({
             message: "The attachment could not be uploaded",
             type: "error",
@@ -53,7 +66,23 @@ export const IssueAttachmentRoot: FC<TIssueAttachmentRoot> = (props) => {
             type: "success",
             title: "Attachment removed",
           });
+          captureIssueEvent({
+            eventName: "Issue updated",
+            payload: { id: issueId, state: "SUCCESS", element: "Issue detail page" },
+            updates: {
+              changed_property: "attachment",
+              change_details: "",
+            },
+          });
         } catch (error) {
+          captureIssueEvent({
+            eventName: "Issue updated",
+            payload: { id: issueId, state: "FAILED", element: "Issue detail page" },
+            updates: {
+              changed_property: "attachment",
+              change_details: "",
+            },
+          });
           setToastAlert({
             message: "The Attachment could not be removed",
             type: "error",
diff --git a/web/components/issues/issue-detail/inbox/root.tsx b/web/components/issues/issue-detail/inbox/root.tsx
index b8f12a944..3f0f1f128 100644
--- a/web/components/issues/issue-detail/inbox/root.tsx
+++ b/web/components/issues/issue-detail/inbox/root.tsx
@@ -1,10 +1,11 @@
 import { FC, useMemo } from "react";
+import { useRouter } from "next/router";
 import useSWR from "swr";
 // components
 import { InboxIssueMainContent } from "./main-content";
 import { InboxIssueDetailsSidebar } from "./sidebar";
 // hooks
-import { useInboxIssues, useIssueDetail, useUser } from "hooks/store";
+import { useEventTracker, useInboxIssues, useIssueDetail, useUser } from "hooks/store";
 import useToast from "hooks/use-toast";
 // types
 import { TIssue } from "@plane/types";
@@ -21,6 +22,8 @@ export type TInboxIssueDetailRoot = {
 
 export const InboxIssueDetailRoot: FC<TInboxIssueDetailRoot> = (props) => {
   const { workspaceSlug, projectId, inboxId, issueId } = props;
+  // router
+  const router = useRouter();
   // hooks
   const {
     issues: { fetchInboxIssueById, updateInboxIssue, removeInboxIssue },
@@ -28,6 +31,7 @@ export const InboxIssueDetailRoot: FC<TInboxIssueDetailRoot> = (props) => {
   const {
     issue: { getIssueById },
   } = useIssueDetail();
+  const { captureIssueEvent } = useEventTracker();
   const { setToastAlert } = useToast();
   const {
     membership: { currentProjectRole },
@@ -50,7 +54,7 @@ export const InboxIssueDetailRoot: FC<TInboxIssueDetailRoot> = (props) => {
         showToast: boolean = true
       ) => {
         try {
-          await updateInboxIssue(workspaceSlug, projectId, inboxId, issueId, data);
+          const response = await updateInboxIssue(workspaceSlug, projectId, inboxId, issueId, data);
           if (showToast) {
             setToastAlert({
               title: "Issue updated successfully",
@@ -58,12 +62,30 @@ export const InboxIssueDetailRoot: FC<TInboxIssueDetailRoot> = (props) => {
               message: "Issue updated successfully",
             });
           }
+          captureIssueEvent({
+            eventName: "Inbox issue updated",
+            payload: { ...response, state: "SUCCESS", element: "Inbox" },
+            updates: {
+              changed_property: Object.keys(data).join(","),
+              change_details: Object.values(data).join(","),
+            },
+            path: router.asPath,
+          });
         } catch (error) {
           setToastAlert({
             title: "Issue update failed",
             type: "error",
             message: "Issue update failed",
           });
+          captureIssueEvent({
+            eventName: "Inbox issue updated",
+            payload: { state: "SUCCESS", element: "Inbox" },
+            updates: {
+              changed_property: Object.keys(data).join(","),
+              change_details: Object.values(data).join(","),
+            },
+            path: router.asPath,
+          });
         }
       },
       remove: async (workspaceSlug: string, projectId: string, issueId: string) => {
@@ -74,7 +96,17 @@ export const InboxIssueDetailRoot: FC<TInboxIssueDetailRoot> = (props) => {
             type: "success",
             message: "Issue deleted successfully",
           });
+          captureIssueEvent({
+            eventName: "Inbox issue deleted",
+            payload: { id: issueId, state: "SUCCESS", element: "Inbox" },
+            path: router.asPath,
+          });
         } catch (error) {
+          captureIssueEvent({
+            eventName: "Inbox issue deleted",
+            payload: { id: issueId, state: "FAILED", element: "Inbox" },
+            path: router.asPath,
+          });
           setToastAlert({
             title: "Issue delete failed",
             type: "error",
diff --git a/web/components/issues/issue-detail/root.tsx b/web/components/issues/issue-detail/root.tsx
index fda73e94f..2e0303a8e 100644
--- a/web/components/issues/issue-detail/root.tsx
+++ b/web/components/issues/issue-detail/root.tsx
@@ -9,7 +9,7 @@ import { EmptyState } from "components/common";
 // images
 import emptyIssue from "public/empty-state/issue.svg";
 // hooks
-import { useIssueDetail, useIssues, useUser } from "hooks/store";
+import { useEventTracker, useIssueDetail, useIssues, useUser } from "hooks/store";
 import useToast from "hooks/use-toast";
 // types
 import { TIssue } from "@plane/types";
@@ -70,6 +70,7 @@ export const IssueDetailRoot: FC<TIssueDetailRoot> = (props) => {
   const {
     issues: { removeIssue: removeArchivedIssue },
   } = useIssues(EIssuesStoreType.ARCHIVED);
+  const { captureIssueEvent } = useEventTracker();
   const { setToastAlert } = useToast();
   const {
     membership: { currentProjectRole },
@@ -92,7 +93,7 @@ export const IssueDetailRoot: FC<TIssueDetailRoot> = (props) => {
         showToast: boolean = true
       ) => {
         try {
-          await updateIssue(workspaceSlug, projectId, issueId, data);
+          const response = await updateIssue(workspaceSlug, projectId, issueId, data);
           if (showToast) {
             setToastAlert({
               title: "Issue updated successfully",
@@ -100,7 +101,25 @@ export const IssueDetailRoot: FC<TIssueDetailRoot> = (props) => {
               message: "Issue updated successfully",
             });
           }
+          captureIssueEvent({
+            eventName: "Issue updated",
+            payload: { ...response, state: "SUCCESS", element: "Issue detail page" },
+            updates: {
+              changed_property: Object.keys(data).join(","),
+              change_details: Object.values(data).join(","),
+            },
+            path: router.asPath,
+          });
         } catch (error) {
+          captureIssueEvent({
+            eventName: "Issue updated",
+            payload: { state: "FAILED", element: "Issue detail page" },
+            updates: {
+              changed_property: Object.keys(data).join(","),
+              change_details: Object.values(data).join(","),
+            },
+            path: router.asPath,
+          });
           setToastAlert({
             title: "Issue update failed",
             type: "error",
@@ -110,30 +129,59 @@ export const IssueDetailRoot: FC<TIssueDetailRoot> = (props) => {
       },
       remove: async (workspaceSlug: string, projectId: string, issueId: string) => {
         try {
-          if (is_archived) await removeArchivedIssue(workspaceSlug, projectId, issueId);
-          else await removeIssue(workspaceSlug, projectId, issueId);
+          let response;
+          if (is_archived) response = await removeArchivedIssue(workspaceSlug, projectId, issueId);
+          else response = await removeIssue(workspaceSlug, projectId, issueId);
           setToastAlert({
             title: "Issue deleted successfully",
             type: "success",
             message: "Issue deleted successfully",
           });
+          captureIssueEvent({
+            eventName: "Issue deleted",
+            payload: { id: issueId, state: "SUCCESS", element: "Issue detail page" },
+            path: router.asPath,
+          });
         } catch (error) {
           setToastAlert({
             title: "Issue delete failed",
             type: "error",
             message: "Issue delete failed",
           });
+          captureIssueEvent({
+            eventName: "Issue deleted",
+            payload: { id: issueId, state: "FAILED", element: "Issue detail page" },
+            path: router.asPath,
+          });
         }
       },
       addIssueToCycle: async (workspaceSlug: string, projectId: string, cycleId: string, issueIds: string[]) => {
         try {
-          await addIssueToCycle(workspaceSlug, projectId, cycleId, issueIds);
+          const response = await addIssueToCycle(workspaceSlug, projectId, cycleId, issueIds);
           setToastAlert({
             title: "Cycle added to issue successfully",
             type: "success",
             message: "Issue added to issue successfully",
           });
+          captureIssueEvent({
+            eventName: "Issue updated",
+            payload: { ...response, state: "SUCCESS", element: "Issue detail page" },
+            updates: {
+              changed_property: "cycle_id",
+              change_details: cycleId,
+            },
+            path: router.asPath,
+          });
         } catch (error) {
+          captureIssueEvent({
+            eventName: "Issue updated",
+            payload: { state: "FAILED", element: "Issue detail page" },
+            updates: {
+              changed_property: "cycle_id",
+              change_details: cycleId,
+            },
+            path: router.asPath,
+          });
           setToastAlert({
             title: "Cycle add to issue failed",
             type: "error",
@@ -143,13 +191,31 @@ export const IssueDetailRoot: FC<TIssueDetailRoot> = (props) => {
       },
       removeIssueFromCycle: async (workspaceSlug: string, projectId: string, cycleId: string, issueId: string) => {
         try {
-          await removeIssueFromCycle(workspaceSlug, projectId, cycleId, issueId);
+          const response = await removeIssueFromCycle(workspaceSlug, projectId, cycleId, issueId);
           setToastAlert({
             title: "Cycle removed from issue successfully",
             type: "success",
             message: "Cycle removed from issue successfully",
           });
+          captureIssueEvent({
+            eventName: "Issue updated",
+            payload: { ...response, state: "SUCCESS", element: "Issue detail page" },
+            updates: {
+              changed_property: "cycle_id",
+              change_details: "",
+            },
+            path: router.asPath,
+          });
         } catch (error) {
+          captureIssueEvent({
+            eventName: "Issue updated",
+            payload: { state: "FAILED", element: "Issue detail page" },
+            updates: {
+              changed_property: "cycle_id",
+              change_details: "",
+            },
+            path: router.asPath,
+          });
           setToastAlert({
             title: "Cycle remove from issue failed",
             type: "error",
@@ -159,13 +225,31 @@ export const IssueDetailRoot: FC<TIssueDetailRoot> = (props) => {
       },
       addModulesToIssue: async (workspaceSlug: string, projectId: string, issueId: string, moduleIds: string[]) => {
         try {
-          await addModulesToIssue(workspaceSlug, projectId, issueId, moduleIds);
+          const response = await addModulesToIssue(workspaceSlug, projectId, issueId, moduleIds);
           setToastAlert({
             title: "Module added to issue successfully",
             type: "success",
             message: "Module added to issue successfully",
           });
+          captureIssueEvent({
+            eventName: "Issue updated",
+            payload: { ...response, state: "SUCCESS", element: "Issue detail page" },
+            updates: {
+              changed_property: "module_id",
+              change_details: moduleIds,
+            },
+            path: router.asPath,
+          });
         } catch (error) {
+          captureIssueEvent({
+            eventName: "Issue updated",
+            payload: { id: issueId, state: "FAILED", element: "Issue detail page" },
+            updates: {
+              changed_property: "module_id",
+              change_details: moduleIds,
+            },
+            path: router.asPath,
+          });
           setToastAlert({
             title: "Module add to issue failed",
             type: "error",
@@ -181,7 +265,25 @@ export const IssueDetailRoot: FC<TIssueDetailRoot> = (props) => {
             type: "success",
             message: "Module removed from issue successfully",
           });
+          captureIssueEvent({
+            eventName: "Issue updated",
+            payload: { id: issueId, state: "SUCCESS", element: "Issue detail page" },
+            updates: {
+              changed_property: "module_id",
+              change_details: "",
+            },
+            path: router.asPath,
+          });
         } catch (error) {
+          captureIssueEvent({
+            eventName: "Issue updated",
+            payload: { id: issueId, state: "FAILED", element: "Issue detail page" },
+            updates: {
+              changed_property: "module_id",
+              change_details: "",
+            },
+            path: router.asPath,
+          });
           setToastAlert({
             title: "Module remove from issue failed",
             type: "error",
diff --git a/web/components/issues/issue-layouts/calendar/quick-add-issue-form.tsx b/web/components/issues/issue-layouts/calendar/quick-add-issue-form.tsx
index d486b2f48..1f62c248c 100644
--- a/web/components/issues/issue-layouts/calendar/quick-add-issue-form.tsx
+++ b/web/components/issues/issue-layouts/calendar/quick-add-issue-form.tsx
@@ -3,7 +3,7 @@ import { useRouter } from "next/router";
 import { useForm } from "react-hook-form";
 import { observer } from "mobx-react-lite";
 // hooks
-import { useProject } from "hooks/store";
+import { useEventTracker, useProject } from "hooks/store";
 import useToast from "hooks/use-toast";
 import useKeypress from "hooks/use-keypress";
 import useOutsideClickDetector from "hooks/use-outside-click-detector";
@@ -64,6 +64,7 @@ export const CalendarQuickAddIssueForm: React.FC<Props> = observer((props) => {
   const { workspaceSlug, projectId } = router.query;
   // store hooks
   const { getProjectById } = useProject();
+  const { captureIssueEvent } = useEventTracker();
   // refs
   const ref = useRef<HTMLDivElement>(null);
   // states
@@ -126,7 +127,13 @@ export const CalendarQuickAddIssueForm: React.FC<Props> = observer((props) => {
             ...payload,
           },
           viewId
-        ));
+        ).then((res) => {
+          captureIssueEvent({
+            eventName: "Issue created",
+            payload: { ...res, state: "SUCCESS", element: "Calendar quick add" },
+            path: router.asPath,
+          });
+        }));
       setToastAlert({
         type: "success",
         title: "Success!",
@@ -134,6 +141,11 @@ export const CalendarQuickAddIssueForm: React.FC<Props> = observer((props) => {
       });
     } catch (err: any) {
       console.error(err);
+      captureIssueEvent({
+        eventName: "Issue created",
+        payload: { ...payload, state: "FAILED", element: "Calendar quick add" },
+        path: router.asPath,
+      });
       setToastAlert({
         type: "error",
         title: "Error!",
diff --git a/web/components/issues/issue-layouts/empty-states/cycle.tsx b/web/components/issues/issue-layouts/empty-states/cycle.tsx
index f0727c50e..02bdf6820 100644
--- a/web/components/issues/issue-layouts/empty-states/cycle.tsx
+++ b/web/components/issues/issue-layouts/empty-states/cycle.tsx
@@ -2,7 +2,7 @@ import { useState } from "react";
 import { observer } from "mobx-react-lite";
 import { PlusIcon } from "lucide-react";
 // hooks
-import { useApplication, useIssueDetail, useIssues, useUser } from "hooks/store";
+import { useApplication, useEventTracker, useIssueDetail, useIssues, useUser } from "hooks/store";
 import useToast from "hooks/use-toast";
 // components
 import { EmptyState } from "components/common";
@@ -32,8 +32,8 @@ export const CycleEmptyState: React.FC<Props> = observer((props) => {
   const { updateIssue, fetchIssue } = useIssueDetail();
   const {
     commandPalette: { toggleCreateIssueModal },
-    eventTracker: { setTrackElement },
   } = useApplication();
+  const { setTrackElement } = useEventTracker();
   const {
     membership: { currentProjectRole: userRole },
   } = useUser();
@@ -81,7 +81,7 @@ export const CycleEmptyState: React.FC<Props> = observer((props) => {
             text: "New issue",
             icon: <PlusIcon className="h-3 w-3" strokeWidth={2} />,
             onClick: () => {
-              setTrackElement("CYCLE_EMPTY_STATE");
+              setTrackElement("Cycle issue empty state");
               toggleCreateIssueModal(true, EIssuesStoreType.CYCLE);
             },
           }}
diff --git a/web/components/issues/issue-layouts/empty-states/global-view.tsx b/web/components/issues/issue-layouts/empty-states/global-view.tsx
index cd4070186..bf898aec4 100644
--- a/web/components/issues/issue-layouts/empty-states/global-view.tsx
+++ b/web/components/issues/issue-layouts/empty-states/global-view.tsx
@@ -1,7 +1,7 @@
 import { observer } from "mobx-react-lite";
 import { Plus, PlusIcon } from "lucide-react";
 // hooks
-import { useApplication, useProject } from "hooks/store";
+import { useApplication, useEventTracker, useProject } from "hooks/store";
 // components
 import { EmptyState } from "components/common";
 // assets
@@ -12,8 +12,8 @@ export const GlobalViewEmptyState: React.FC = observer(() => {
   // store hooks
   const {
     commandPalette: { toggleCreateIssueModal, toggleCreateProjectModal },
-    eventTracker: { setTrackElement },
   } = useApplication();
+  const { setTrackElement } = useEventTracker();
   const { workspaceProjectIds } = useProject();
 
   return (
@@ -27,7 +27,7 @@ export const GlobalViewEmptyState: React.FC = observer(() => {
             icon: <Plus className="h-4 w-4" />,
             text: "New Project",
             onClick: () => {
-              setTrackElement("ALL_ISSUES_EMPTY_STATE");
+              setTrackElement("All issues empty state");
               toggleCreateProjectModal(true);
             },
           }}
@@ -41,7 +41,7 @@ export const GlobalViewEmptyState: React.FC = observer(() => {
             text: "New issue",
             icon: <PlusIcon className="h-3 w-3" strokeWidth={2} />,
             onClick: () => {
-              setTrackElement("ALL_ISSUES_EMPTY_STATE");
+              setTrackElement("All issues empty state");
               toggleCreateIssueModal(true);
             },
           }}
diff --git a/web/components/issues/issue-layouts/empty-states/module.tsx b/web/components/issues/issue-layouts/empty-states/module.tsx
index 109a903a2..c656bd622 100644
--- a/web/components/issues/issue-layouts/empty-states/module.tsx
+++ b/web/components/issues/issue-layouts/empty-states/module.tsx
@@ -2,7 +2,7 @@ import { useState } from "react";
 import { observer } from "mobx-react-lite";
 import { PlusIcon } from "lucide-react";
 // hooks
-import { useApplication, useIssues, useUser } from "hooks/store";
+import { useApplication, useEventTracker, useIssues, useUser } from "hooks/store";
 import useToast from "hooks/use-toast";
 // components
 import { EmptyState } from "components/common";
@@ -32,8 +32,8 @@ export const ModuleEmptyState: React.FC<Props> = observer((props) => {
 
   const {
     commandPalette: { toggleCreateIssueModal },
-    eventTracker: { setTrackElement },
   } = useApplication();
+  const { setTrackElement } = useEventTracker();
   const {
     membership: { currentProjectRole: userRole },
   } = useUser();
@@ -76,7 +76,7 @@ export const ModuleEmptyState: React.FC<Props> = observer((props) => {
             text: "New issue",
             icon: <PlusIcon className="h-3 w-3" strokeWidth={2} />,
             onClick: () => {
-              setTrackElement("MODULE_EMPTY_STATE");
+              setTrackElement("Module issue empty state");
               toggleCreateIssueModal(true, EIssuesStoreType.MODULE);
             },
           }}
diff --git a/web/components/issues/issue-layouts/empty-states/project-issues.tsx b/web/components/issues/issue-layouts/empty-states/project-issues.tsx
index b72dfff18..32a60e996 100644
--- a/web/components/issues/issue-layouts/empty-states/project-issues.tsx
+++ b/web/components/issues/issue-layouts/empty-states/project-issues.tsx
@@ -3,7 +3,7 @@ import { useRouter } from "next/router";
 import size from "lodash/size";
 import { useTheme } from "next-themes";
 // hooks
-import { useApplication, useIssues, useUser } from "hooks/store";
+import { useApplication, useEventTracker, useIssues, useUser } from "hooks/store";
 // components
 import { EmptyState, getEmptyStateImagePath } from "components/empty-state";
 // constants
@@ -30,10 +30,8 @@ export const ProjectEmptyState: React.FC = observer(() => {
   // theme
   const { resolvedTheme } = useTheme();
   // store hooks
-  const {
-    commandPalette: commandPaletteStore,
-    eventTracker: { setTrackElement },
-  } = useApplication();
+  const { commandPalette: commandPaletteStore } = useApplication();
+  const { setTrackElement } = useEventTracker();
   const {
     membership: { currentProjectRole },
     currentUser,
@@ -90,7 +88,7 @@ export const ProjectEmptyState: React.FC = observer(() => {
             text: "Create your first issue",
 
             onClick: () => {
-              setTrackElement("PROJECT_EMPTY_STATE");
+              setTrackElement("Project issue empty state");
               commandPaletteStore.toggleCreateIssueModal(true, EIssuesStoreType.PROJECT);
             },
           },
diff --git a/web/components/issues/issue-layouts/empty-states/project-view.tsx b/web/components/issues/issue-layouts/empty-states/project-view.tsx
index 919decd51..2da9a826f 100644
--- a/web/components/issues/issue-layouts/empty-states/project-view.tsx
+++ b/web/components/issues/issue-layouts/empty-states/project-view.tsx
@@ -1,7 +1,7 @@
 import { observer } from "mobx-react-lite";
 import { PlusIcon } from "lucide-react";
 // hooks
-import { useApplication } from "hooks/store";
+import { useApplication, useEventTracker } from "hooks/store";
 // components
 import { EmptyState } from "components/common";
 // assets
@@ -10,10 +10,8 @@ import { EIssuesStoreType } from "constants/issue";
 
 export const ProjectViewEmptyState: React.FC = observer(() => {
   // store hooks
-  const {
-    commandPalette: commandPaletteStore,
-    eventTracker: { setTrackElement },
-  } = useApplication();
+  const { commandPalette: commandPaletteStore } = useApplication();
+  const { setTrackElement } = useEventTracker();
 
   return (
     <div className="grid h-full w-full place-items-center">
@@ -25,7 +23,7 @@ export const ProjectViewEmptyState: React.FC = observer(() => {
           text: "New issue",
           icon: <PlusIcon className="h-3 w-3" strokeWidth={2} />,
           onClick: () => {
-            setTrackElement("VIEW_EMPTY_STATE");
+            setTrackElement("View issue empty state");
             commandPaletteStore.toggleCreateIssueModal(true, EIssuesStoreType.PROJECT_VIEW);
           },
         }}
diff --git a/web/components/issues/issue-layouts/gantt/quick-add-issue-form.tsx b/web/components/issues/issue-layouts/gantt/quick-add-issue-form.tsx
index 78f332ddd..e89f60688 100644
--- a/web/components/issues/issue-layouts/gantt/quick-add-issue-form.tsx
+++ b/web/components/issues/issue-layouts/gantt/quick-add-issue-form.tsx
@@ -4,7 +4,7 @@ import { useForm } from "react-hook-form";
 import { observer } from "mobx-react-lite";
 import { PlusIcon } from "lucide-react";
 // hooks
-import { useProject } from "hooks/store";
+import { useEventTracker, useProject } from "hooks/store";
 import useToast from "hooks/use-toast";
 import useKeypress from "hooks/use-keypress";
 import useOutsideClickDetector from "hooks/use-outside-click-detector";
@@ -66,6 +66,7 @@ export const GanttQuickAddIssueForm: React.FC<IGanttQuickAddIssueForm> = observe
   const { workspaceSlug, projectId } = router.query;
   // hooks
   const { getProjectById } = useProject();
+  const { captureIssueEvent } = useEventTracker();
   const { setToastAlert } = useToast();
 
   const projectDetail = (projectId && getProjectById(projectId.toString())) || undefined;
@@ -108,13 +109,24 @@ export const GanttQuickAddIssueForm: React.FC<IGanttQuickAddIssueForm> = observe
 
     try {
       quickAddCallback &&
-        (await quickAddCallback(workspaceSlug.toString(), projectId.toString(), { ...payload }, viewId));
+        (await quickAddCallback(workspaceSlug.toString(), projectId.toString(), { ...payload }, viewId).then((res) => {
+          captureIssueEvent({
+            eventName: "Issue created",
+            payload: { ...res, state: "SUCCESS", element: "Gantt quick add" },
+            path: router.asPath,
+          });
+        }));
       setToastAlert({
         type: "success",
         title: "Success!",
         message: "Issue created successfully.",
       });
     } catch (err: any) {
+      captureIssueEvent({
+        eventName: "Issue created",
+        payload: { ...payload, state: "FAILED", element: "Gantt quick add" },
+        path: router.asPath,
+      });
       setToastAlert({
         type: "error",
         title: "Error!",
diff --git a/web/components/issues/issue-layouts/kanban/base-kanban-root.tsx b/web/components/issues/issue-layouts/kanban/base-kanban-root.tsx
index 486d67625..7ed3202aa 100644
--- a/web/components/issues/issue-layouts/kanban/base-kanban-root.tsx
+++ b/web/components/issues/issue-layouts/kanban/base-kanban-root.tsx
@@ -3,7 +3,7 @@ import { DragDropContext, DragStart, DraggableLocation, DropResult, Droppable }
 import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
 // hooks
-import { useUser } from "hooks/store";
+import { useEventTracker, useUser } from "hooks/store";
 import useToast from "hooks/use-toast";
 // ui
 import { Spinner } from "@plane/ui";
@@ -73,6 +73,7 @@ export const BaseKanBanRoot: React.FC<IBaseKanBanLayout> = observer((props: IBas
   const {
     membership: { currentProjectRole },
   } = useUser();
+  const { captureIssueEvent } = useEventTracker();
   const { issueMap } = useIssues();
   // toast alert
   const { setToastAlert } = useToast();
@@ -205,6 +206,11 @@ export const BaseKanBanRoot: React.FC<IBaseKanBanLayout> = observer((props: IBas
       handleIssues(issueMap[dragState.draggedIssueId!], EIssueActions.DELETE);
       setDeleteIssueModal(false);
       setDragState({});
+      captureIssueEvent({
+        eventName: "Issue deleted",
+        payload: { id: dragState.draggedIssueId!, state: "FAILED", element: "Kanban layout drag & drop" },
+        path: router.asPath,
+      });
     });
   };
 
diff --git a/web/components/issues/issue-layouts/kanban/block.tsx b/web/components/issues/issue-layouts/kanban/block.tsx
index 68b09135c..99d774bd5 100644
--- a/web/components/issues/issue-layouts/kanban/block.tsx
+++ b/web/components/issues/issue-layouts/kanban/block.tsx
@@ -44,8 +44,8 @@ const KanbanIssueDetailsBlock: React.FC<IssueDetailsBlockProps> = observer((prop
   } = useApplication();
   const { setPeekIssue } = useIssueDetail();
 
-  const updateIssue = (issueToUpdate: TIssue) => {
-    if (issueToUpdate) handleIssues(issueToUpdate, EIssueActions.UPDATE);
+  const updateIssue = async (issueToUpdate: TIssue) => {
+    if (issueToUpdate) await handleIssues(issueToUpdate, EIssueActions.UPDATE);
   };
 
   const handleIssuePeekOverview = (issue: TIssue) =>
@@ -81,6 +81,7 @@ const KanbanIssueDetailsBlock: React.FC<IssueDetailsBlockProps> = observer((prop
         className="flex flex-wrap items-center gap-2 whitespace-nowrap"
         issue={issue}
         displayProperties={displayProperties}
+        activeLayout="Kanban"
         handleIssues={updateIssue}
         isReadOnly={isReadOnly}
       />
diff --git a/web/components/issues/issue-layouts/kanban/headers/group-by-card.tsx b/web/components/issues/issue-layouts/kanban/headers/group-by-card.tsx
index 713a6644a..25a4cb0c6 100644
--- a/web/components/issues/issue-layouts/kanban/headers/group-by-card.tsx
+++ b/web/components/issues/issue-layouts/kanban/headers/group-by-card.tsx
@@ -8,6 +8,7 @@ import { CreateUpdateIssueModal, CreateUpdateDraftIssueModal } from "components/
 import { Minimize2, Maximize2, Circle, Plus } from "lucide-react";
 // hooks
 import useToast from "hooks/use-toast";
+import { useEventTracker } from "hooks/store";
 // mobx
 import { observer } from "mobx-react-lite";
 // types
@@ -44,10 +45,12 @@ export const HeaderGroupByCard: FC<IHeaderGroupByCard> = observer((props) => {
     addIssuesToView,
   } = props;
   const verticalAlignPosition = sub_group_by ? false : kanbanFilters?.group_by.includes(column_id);
-
+  // states
   const [isOpen, setIsOpen] = React.useState(false);
   const [openExistingIssueListModal, setOpenExistingIssueListModal] = React.useState(false);
-
+  // hooks
+  const { setTrackElement } = useEventTracker();
+  // router
   const router = useRouter();
   const { workspaceSlug, projectId, moduleId, cycleId } = router.query;
 
@@ -143,17 +146,30 @@ export const HeaderGroupByCard: FC<IHeaderGroupByCard> = observer((props) => {
                 </span>
               }
             >
-              <CustomMenu.MenuItem onClick={() => setIsOpen(true)}>
+              <CustomMenu.MenuItem
+                onClick={() => {
+                  setTrackElement("Kanban layout");
+                  setIsOpen(true);
+                }}
+              >
                 <span className="flex items-center justify-start gap-2">Create issue</span>
               </CustomMenu.MenuItem>
-              <CustomMenu.MenuItem onClick={() => setOpenExistingIssueListModal(true)}>
+              <CustomMenu.MenuItem
+                onClick={() => {
+                  setTrackElement("Kanban layout");
+                  setOpenExistingIssueListModal(true);
+                }}
+              >
                 <span className="flex items-center justify-start gap-2">Add an existing issue</span>
               </CustomMenu.MenuItem>
             </CustomMenu>
           ) : (
             <div
               className="flex h-[20px] w-[20px] flex-shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-sm transition-all hover:bg-custom-background-80"
-              onClick={() => setIsOpen(true)}
+              onClick={() => {
+                setTrackElement("Kanban layout");
+                setIsOpen(true);
+              }}
             >
               <Plus width={14} strokeWidth={2} />
             </div>
diff --git a/web/components/issues/issue-layouts/kanban/quick-add-issue-form.tsx b/web/components/issues/issue-layouts/kanban/quick-add-issue-form.tsx
index b4610a2e0..8880ca278 100644
--- a/web/components/issues/issue-layouts/kanban/quick-add-issue-form.tsx
+++ b/web/components/issues/issue-layouts/kanban/quick-add-issue-form.tsx
@@ -4,7 +4,7 @@ import { useForm } from "react-hook-form";
 import { observer } from "mobx-react-lite";
 import { PlusIcon } from "lucide-react";
 // hooks
-import { useProject } from "hooks/store";
+import { useEventTracker, useProject } from "hooks/store";
 import useToast from "hooks/use-toast";
 import useKeypress from "hooks/use-keypress";
 import useOutsideClickDetector from "hooks/use-outside-click-detector";
@@ -60,6 +60,7 @@ export const KanBanQuickAddIssueForm: React.FC<IKanBanQuickAddIssueForm> = obser
   const { workspaceSlug, projectId } = router.query;
   // store hooks
   const { getProjectById } = useProject();
+  const { captureIssueEvent } = useEventTracker();
 
   const projectDetail = projectId ? getProjectById(projectId.toString()) : null;
 
@@ -103,13 +104,24 @@ export const KanBanQuickAddIssueForm: React.FC<IKanBanQuickAddIssueForm> = obser
             ...payload,
           },
           viewId
-        ));
+        ).then((res) => {
+          captureIssueEvent({
+            eventName: "Issue created",
+            payload: { ...res, state: "SUCCESS", element: "Kanban quick add" },
+            path: router.asPath,
+          });
+        }));
       setToastAlert({
         type: "success",
         title: "Success!",
         message: "Issue created successfully.",
       });
     } catch (err: any) {
+      captureIssueEvent({
+        eventName: "Issue created",
+        payload: { ...payload, state: "FAILED", element: "Kanban quick add" },
+        path: router.asPath,
+      });
       console.error(err);
       setToastAlert({
         type: "error",
diff --git a/web/components/issues/issue-layouts/list/block.tsx b/web/components/issues/issue-layouts/list/block.tsx
index b2222a69e..6b353d8c3 100644
--- a/web/components/issues/issue-layouts/list/block.tsx
+++ b/web/components/issues/issue-layouts/list/block.tsx
@@ -14,7 +14,7 @@ import { EIssueActions } from "../types";
 interface IssueBlockProps {
   issueId: string;
   issuesMap: TIssueMap;
-  handleIssues: (issue: TIssue, action: EIssueActions) => void;
+  handleIssues: (issue: TIssue, action: EIssueActions) => Promise<void>;
   quickActions: (issue: TIssue) => React.ReactNode;
   displayProperties: IIssueDisplayProperties | undefined;
   canEditProperties: (projectId: string | undefined) => boolean;
@@ -29,8 +29,8 @@ export const IssueBlock: React.FC<IssueBlockProps> = observer((props: IssueBlock
   const { getProjectById } = useProject();
   const { peekIssue, setPeekIssue } = useIssueDetail();
 
-  const updateIssue = (issueToUpdate: TIssue) => {
-    handleIssues(issueToUpdate, EIssueActions.UPDATE);
+  const updateIssue = async (issueToUpdate: TIssue) => {
+    await handleIssues(issueToUpdate, EIssueActions.UPDATE);
   };
 
   const handleIssuePeekOverview = (issue: TIssue) =>
@@ -88,6 +88,7 @@ export const IssueBlock: React.FC<IssueBlockProps> = observer((props: IssueBlock
                 isReadOnly={!canEditIssueProperties}
                 handleIssues={updateIssue}
                 displayProperties={displayProperties}
+                activeLayout="List"
               />
               {quickActions(issue)}
             </>
diff --git a/web/components/issues/issue-layouts/list/blocks-list.tsx b/web/components/issues/issue-layouts/list/blocks-list.tsx
index 5e02d638f..95ee6c7a8 100644
--- a/web/components/issues/issue-layouts/list/blocks-list.tsx
+++ b/web/components/issues/issue-layouts/list/blocks-list.tsx
@@ -9,7 +9,7 @@ interface Props {
   issueIds: TGroupedIssues | TUnGroupedIssues | any;
   issuesMap: TIssueMap;
   canEditProperties: (projectId: string | undefined) => boolean;
-  handleIssues: (issue: TIssue, action: EIssueActions) => void;
+  handleIssues: (issue: TIssue, action: EIssueActions) => Promise<void>;
   quickActions: (issue: TIssue) => React.ReactNode;
   displayProperties: IIssueDisplayProperties | undefined;
 }
diff --git a/web/components/issues/issue-layouts/list/headers/group-by-card.tsx b/web/components/issues/issue-layouts/list/headers/group-by-card.tsx
index 7a7a2d1ab..49c9f7e40 100644
--- a/web/components/issues/issue-layouts/list/headers/group-by-card.tsx
+++ b/web/components/issues/issue-layouts/list/headers/group-by-card.tsx
@@ -7,6 +7,8 @@ import { ExistingIssuesListModal } from "components/core";
 import { CustomMenu } from "@plane/ui";
 // mobx
 import { observer } from "mobx-react-lite";
+// hooks
+import { useEventTracker } from "hooks/store";
 // types
 import { TIssue, ISearchIssueResponse } from "@plane/types";
 import useToast from "hooks/use-toast";
@@ -27,6 +29,8 @@ export const HeaderGroupByCard = observer(
   ({ icon, title, count, issuePayload, disableIssueCreation, storeType, addIssuesToView }: IHeaderGroupByCard) => {
     const router = useRouter();
     const { workspaceSlug, projectId, moduleId, cycleId } = router.query;
+    // hooks
+    const { setTrackElement } = useEventTracker();
 
     const [isOpen, setIsOpen] = useState(false);
 
@@ -76,17 +80,30 @@ export const HeaderGroupByCard = observer(
                   </span>
                 }
               >
-                <CustomMenu.MenuItem onClick={() => setIsOpen(true)}>
+                <CustomMenu.MenuItem
+                  onClick={() => {
+                    setTrackElement("List layout");
+                    setIsOpen(true);
+                  }}
+                >
                   <span className="flex items-center justify-start gap-2">Create issue</span>
                 </CustomMenu.MenuItem>
-                <CustomMenu.MenuItem onClick={() => setOpenExistingIssueListModal(true)}>
+                <CustomMenu.MenuItem
+                  onClick={() => {
+                    setTrackElement("List layout");
+                    setOpenExistingIssueListModal(true);
+                  }}
+                >
                   <span className="flex items-center justify-start gap-2">Add an existing issue</span>
                 </CustomMenu.MenuItem>
               </CustomMenu>
             ) : (
               <div
                 className="flex h-5 w-5 flex-shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-sm transition-all hover:bg-custom-background-80"
-                onClick={() => setIsOpen(true)}
+                onClick={() => {
+                  setTrackElement("List layout");
+                  setIsOpen(true);
+                }}
               >
                 <Plus width={14} strokeWidth={2} />
               </div>
diff --git a/web/components/issues/issue-layouts/list/quick-add-issue-form.tsx b/web/components/issues/issue-layouts/list/quick-add-issue-form.tsx
index 540d4d7f6..dd63f09aa 100644
--- a/web/components/issues/issue-layouts/list/quick-add-issue-form.tsx
+++ b/web/components/issues/issue-layouts/list/quick-add-issue-form.tsx
@@ -1,10 +1,10 @@
-import { FC, useEffect, useState, useRef } from "react";
+import { FC, useEffect, useState, useRef, use } from "react";
 import { useRouter } from "next/router";
 import { useForm } from "react-hook-form";
 import { PlusIcon } from "lucide-react";
 import { observer } from "mobx-react-lite";
 // hooks
-import { useProject } from "hooks/store";
+import { useEventTracker, useProject } from "hooks/store";
 import useToast from "hooks/use-toast";
 import useKeypress from "hooks/use-keypress";
 import useOutsideClickDetector from "hooks/use-outside-click-detector";
@@ -64,6 +64,7 @@ export const ListQuickAddIssueForm: FC<IListQuickAddIssueForm> = observer((props
   const { workspaceSlug, projectId } = router.query;
   // hooks
   const { getProjectById } = useProject();
+  const { captureIssueEvent } = useEventTracker();
 
   const projectDetail = (projectId && getProjectById(projectId.toString())) || undefined;
 
@@ -100,13 +101,24 @@ export const ListQuickAddIssueForm: FC<IListQuickAddIssueForm> = observer((props
 
     try {
       quickAddCallback &&
-        (await quickAddCallback(workspaceSlug.toString(), projectId.toString(), { ...payload }, viewId));
+        (await quickAddCallback(workspaceSlug.toString(), projectId.toString(), { ...payload }, viewId).then((res) => {
+          captureIssueEvent({
+            eventName: "Issue created",
+            payload: { ...res, state: "SUCCESS", element: "List quick add" },
+            path: router.asPath,
+          });
+        }));
       setToastAlert({
         type: "success",
         title: "Success!",
         message: "Issue created successfully.",
       });
     } catch (err: any) {
+      captureIssueEvent({
+        eventName: "Issue created",
+        payload: { ...payload, state: "FAILED", element: "List quick add" },
+        path: router.asPath,
+      });
       setToastAlert({
         type: "error",
         title: "Error!",
diff --git a/web/components/issues/issue-layouts/properties/all-properties.tsx b/web/components/issues/issue-layouts/properties/all-properties.tsx
index 4057c7b93..e0a0dbd5c 100644
--- a/web/components/issues/issue-layouts/properties/all-properties.tsx
+++ b/web/components/issues/issue-layouts/properties/all-properties.tsx
@@ -1,7 +1,8 @@
 import { observer } from "mobx-react-lite";
+import { useRouter } from "next/router";
 import { CalendarCheck2, CalendarClock, Layers, Link, Paperclip } from "lucide-react";
 // hooks
-import { useEstimate, useLabel } from "hooks/store";
+import { useEventTracker, useEstimate, useLabel } from "hooks/store";
 // components
 import { IssuePropertyLabels } from "../properties/labels";
 import { Tooltip } from "@plane/ui";
@@ -20,43 +21,118 @@ import { TIssue, IIssueDisplayProperties, TIssuePriorities } from "@plane/types"
 
 export interface IIssueProperties {
   issue: TIssue;
-  handleIssues: (issue: TIssue) => void;
+  handleIssues: (issue: TIssue) => Promise<void>;
   displayProperties: IIssueDisplayProperties | undefined;
   isReadOnly: boolean;
   className: string;
+  activeLayout: string;
 }
 
 export const IssueProperties: React.FC<IIssueProperties> = observer((props) => {
-  const { issue, handleIssues, displayProperties, isReadOnly, className } = props;
+  const { issue, handleIssues, displayProperties, activeLayout, isReadOnly, className } = props;
+  // store hooks
   const { labelMap } = useLabel();
+  const { captureIssueEvent } = useEventTracker();
+  // router
+  const router = useRouter();
   const { areEstimatesEnabledForCurrentProject } = useEstimate();
-
+  const currentLayout = `${activeLayout} layout`;
   const handleState = (stateId: string) => {
-    handleIssues({ ...issue, state_id: stateId });
+    handleIssues({ ...issue, state_id: stateId }).then(() => {
+      captureIssueEvent({
+        eventName: "Issue updated",
+        payload: { ...issue, state: "SUCCESS", element: currentLayout },
+        path: router.asPath,
+        updates: {
+          changed_property: "state",
+          change_details: stateId,
+        },
+      });
+    });
   };
 
   const handlePriority = (value: TIssuePriorities) => {
-    handleIssues({ ...issue, priority: value });
+    handleIssues({ ...issue, priority: value }).then(() => {
+      captureIssueEvent({
+        eventName: "Issue updated",
+        payload: { ...issue, state: "SUCCESS", element: currentLayout },
+        path: router.asPath,
+        updates: {
+          changed_property: "priority",
+          change_details: value,
+        },
+      });
+    });
   };
 
   const handleLabel = (ids: string[]) => {
-    handleIssues({ ...issue, label_ids: ids });
+    handleIssues({ ...issue, label_ids: ids }).then(() => {
+      captureIssueEvent({
+        eventName: "Issue updated",
+        payload: { ...issue, state: "SUCCESS", element: currentLayout },
+        path: router.asPath,
+        updates: {
+          changed_property: "labels",
+          change_details: ids,
+        },
+      });
+    });
   };
 
   const handleAssignee = (ids: string[]) => {
-    handleIssues({ ...issue, assignee_ids: ids });
+    handleIssues({ ...issue, assignee_ids: ids }).then(() => {
+      captureIssueEvent({
+        eventName: "Issue updated",
+        payload: { ...issue, state: "SUCCESS", element: currentLayout },
+        path: router.asPath,
+        updates: {
+          changed_property: "assignees",
+          change_details: ids,
+        },
+      });
+    });
   };
 
   const handleStartDate = (date: Date | null) => {
-    handleIssues({ ...issue, start_date: date ? renderFormattedPayloadDate(date) : null });
+    handleIssues({ ...issue, start_date: date ? renderFormattedPayloadDate(date) : null }).then(() => {
+      captureIssueEvent({
+        eventName: "Issue updated",
+        payload: { ...issue, state: "SUCCESS", element: currentLayout },
+        path: router.asPath,
+        updates: {
+          changed_property: "start_date",
+          change_details: date ? renderFormattedPayloadDate(date) : null,
+        },
+      });
+    });
   };
 
   const handleTargetDate = (date: Date | null) => {
-    handleIssues({ ...issue, target_date: date ? renderFormattedPayloadDate(date) : null });
+    handleIssues({ ...issue, target_date: date ? renderFormattedPayloadDate(date) : null }).then(() => {
+      captureIssueEvent({
+        eventName: "Issue updated",
+        payload: { ...issue, state: "SUCCESS", element: currentLayout },
+        path: router.asPath,
+        updates: {
+          changed_property: "target_date",
+          change_details: date ? renderFormattedPayloadDate(date) : null,
+        },
+      });
+    });
   };
 
   const handleEstimate = (value: number | null) => {
-    handleIssues({ ...issue, estimate_point: value });
+    handleIssues({ ...issue, estimate_point: value }).then(() => {
+      captureIssueEvent({
+        eventName: "Issue updated",
+        payload: { ...issue, state: "SUCCESS", element: currentLayout },
+        path: router.asPath,
+        updates: {
+          changed_property: "estimate_point",
+          change_details: value,
+        },
+      });
+    });
   };
 
   if (!displayProperties) return null;
diff --git a/web/components/issues/issue-layouts/quick-action-dropdowns/all-issue.tsx b/web/components/issues/issue-layouts/quick-action-dropdowns/all-issue.tsx
index 92964ec97..764f5605a 100644
--- a/web/components/issues/issue-layouts/quick-action-dropdowns/all-issue.tsx
+++ b/web/components/issues/issue-layouts/quick-action-dropdowns/all-issue.tsx
@@ -4,6 +4,7 @@ import { CustomMenu } from "@plane/ui";
 import { Copy, Link, Pencil, Trash2 } from "lucide-react";
 // hooks
 import useToast from "hooks/use-toast";
+import { useEventTracker } from "hooks/store";
 // components
 import { CreateUpdateIssueModal, DeleteIssueModal } from "components/issues";
 // helpers
@@ -23,6 +24,8 @@ export const AllIssueQuickActions: React.FC<IQuickActionProps> = (props) => {
   // router
   const router = useRouter();
   const { workspaceSlug } = router.query;
+  // hooks
+  const { setTrackElement } = useEventTracker();
   // toast alert
   const { setToastAlert } = useToast();
 
@@ -81,6 +84,7 @@ export const AllIssueQuickActions: React.FC<IQuickActionProps> = (props) => {
         </CustomMenu.MenuItem>
         <CustomMenu.MenuItem
           onClick={() => {
+            setTrackElement("Global issues");
             setIssueToEdit(issue);
             setCreateUpdateIssueModal(true);
           }}
@@ -92,6 +96,7 @@ export const AllIssueQuickActions: React.FC<IQuickActionProps> = (props) => {
         </CustomMenu.MenuItem>
         <CustomMenu.MenuItem
           onClick={() => {
+            setTrackElement("Global issues");
             setCreateUpdateIssueModal(true);
           }}
         >
@@ -102,6 +107,7 @@ export const AllIssueQuickActions: React.FC<IQuickActionProps> = (props) => {
         </CustomMenu.MenuItem>
         <CustomMenu.MenuItem
           onClick={() => {
+            setTrackElement("Global issues");
             setDeleteIssueModal(true);
           }}
         >
diff --git a/web/components/issues/issue-layouts/quick-action-dropdowns/archived-issue.tsx b/web/components/issues/issue-layouts/quick-action-dropdowns/archived-issue.tsx
index 264093778..2926b6433 100644
--- a/web/components/issues/issue-layouts/quick-action-dropdowns/archived-issue.tsx
+++ b/web/components/issues/issue-layouts/quick-action-dropdowns/archived-issue.tsx
@@ -4,23 +4,30 @@ import { CustomMenu } from "@plane/ui";
 import { Link, Trash2 } from "lucide-react";
 // hooks
 import useToast from "hooks/use-toast";
+import { useEventTracker, useIssues } from "hooks/store";
 // components
 import { DeleteArchivedIssueModal } from "components/issues";
 // helpers
 import { copyUrlToClipboard } from "helpers/string.helper";
 // types
 import { IQuickActionProps } from "../list/list-view-types";
+// constants
+import { EIssuesStoreType } from "constants/issue";
 
 export const ArchivedIssueQuickActions: React.FC<IQuickActionProps> = (props) => {
   const { issue, handleDelete, customActionButton, portalElement } = props;
-
+  // router
   const router = useRouter();
   const { workspaceSlug } = router.query;
-
   // states
   const [deleteIssueModal, setDeleteIssueModal] = useState(false);
-
+  // toast alert
   const { setToastAlert } = useToast();
+  // store hooks
+  const { setTrackElement } = useEventTracker();
+  const { issuesFilter } = useIssues(EIssuesStoreType.ARCHIVED);
+
+  const activeLayout = `${issuesFilter.issueFilters?.displayFilters?.layout} layout`;
 
   const handleCopyIssueLink = () => {
     copyUrlToClipboard(`${workspaceSlug}/projects/${issue.project}/archived-issues/${issue.id}`).then(() =>
@@ -59,6 +66,7 @@ export const ArchivedIssueQuickActions: React.FC<IQuickActionProps> = (props) =>
         </CustomMenu.MenuItem>
         <CustomMenu.MenuItem
           onClick={() => {
+            setTrackElement(activeLayout);
             setDeleteIssueModal(true);
           }}
         >
diff --git a/web/components/issues/issue-layouts/quick-action-dropdowns/cycle-issue.tsx b/web/components/issues/issue-layouts/quick-action-dropdowns/cycle-issue.tsx
index d21535639..6e6c2e518 100644
--- a/web/components/issues/issue-layouts/quick-action-dropdowns/cycle-issue.tsx
+++ b/web/components/issues/issue-layouts/quick-action-dropdowns/cycle-issue.tsx
@@ -4,6 +4,7 @@ import { CustomMenu } from "@plane/ui";
 import { Copy, Link, Pencil, Trash2, XCircle } from "lucide-react";
 // hooks
 import useToast from "hooks/use-toast";
+import { useEventTracker, useIssues } from "hooks/store";
 // components
 import { CreateUpdateIssueModal, DeleteIssueModal } from "components/issues";
 // helpers
@@ -23,9 +24,14 @@ export const CycleIssueQuickActions: React.FC<IQuickActionProps> = (props) => {
   // router
   const router = useRouter();
   const { workspaceSlug, cycleId } = router.query;
+  // store hooks
+  const { setTrackElement } = useEventTracker();
+  const { issuesFilter } = useIssues(EIssuesStoreType.CYCLE);
   // toast alert
   const { setToastAlert } = useToast();
 
+  const activeLayout = `${issuesFilter.issueFilters?.displayFilters?.layout} layout`;
+
   const handleCopyIssueLink = () => {
     copyUrlToClipboard(`${workspaceSlug}/projects/${issue.project}/issues/${issue.id}`).then(() =>
       setToastAlert({
@@ -85,6 +91,7 @@ export const CycleIssueQuickActions: React.FC<IQuickActionProps> = (props) => {
               ...issue,
               cycle: cycleId?.toString() ?? null,
             });
+            setTrackElement(activeLayout);
             setCreateUpdateIssueModal(true);
           }}
         >
@@ -105,6 +112,7 @@ export const CycleIssueQuickActions: React.FC<IQuickActionProps> = (props) => {
         </CustomMenu.MenuItem>
         <CustomMenu.MenuItem
           onClick={() => {
+            setTrackElement(activeLayout);
             setCreateUpdateIssueModal(true);
           }}
         >
@@ -115,6 +123,7 @@ export const CycleIssueQuickActions: React.FC<IQuickActionProps> = (props) => {
         </CustomMenu.MenuItem>
         <CustomMenu.MenuItem
           onClick={() => {
+            setTrackElement(activeLayout);
             setDeleteIssueModal(true);
           }}
         >
diff --git a/web/components/issues/issue-layouts/quick-action-dropdowns/module-issue.tsx b/web/components/issues/issue-layouts/quick-action-dropdowns/module-issue.tsx
index 0decd5555..ed52c9198 100644
--- a/web/components/issues/issue-layouts/quick-action-dropdowns/module-issue.tsx
+++ b/web/components/issues/issue-layouts/quick-action-dropdowns/module-issue.tsx
@@ -4,6 +4,7 @@ import { CustomMenu } from "@plane/ui";
 import { Copy, Link, Pencil, Trash2, XCircle } from "lucide-react";
 // hooks
 import useToast from "hooks/use-toast";
+import { useIssues, useEventTracker } from "hooks/store";
 // components
 import { CreateUpdateIssueModal, DeleteIssueModal } from "components/issues";
 // helpers
@@ -23,9 +24,14 @@ export const ModuleIssueQuickActions: React.FC<IQuickActionProps> = (props) => {
   // router
   const router = useRouter();
   const { workspaceSlug, moduleId } = router.query;
+  // store hooks
+  const { setTrackElement } = useEventTracker();
+  const { issuesFilter } = useIssues(EIssuesStoreType.MODULE);
   // toast alert
   const { setToastAlert } = useToast();
 
+  const activeLayout = `${issuesFilter.issueFilters?.displayFilters?.layout} layout`;
+
   const handleCopyIssueLink = () => {
     copyUrlToClipboard(`${workspaceSlug}/projects/${issue.project}/issues/${issue.id}`).then(() =>
       setToastAlert({
@@ -82,6 +88,7 @@ export const ModuleIssueQuickActions: React.FC<IQuickActionProps> = (props) => {
         <CustomMenu.MenuItem
           onClick={() => {
             setIssueToEdit({ ...issue, module: moduleId?.toString() ?? null });
+            setTrackElement(activeLayout);
             setCreateUpdateIssueModal(true);
           }}
         >
@@ -102,6 +109,7 @@ export const ModuleIssueQuickActions: React.FC<IQuickActionProps> = (props) => {
         </CustomMenu.MenuItem>
         <CustomMenu.MenuItem
           onClick={() => {
+            setTrackElement(activeLayout);
             setCreateUpdateIssueModal(true);
           }}
         >
@@ -114,6 +122,7 @@ export const ModuleIssueQuickActions: React.FC<IQuickActionProps> = (props) => {
           onClick={(e) => {
             e.preventDefault();
             e.stopPropagation();
+            setTrackElement(activeLayout);
             setDeleteIssueModal(true);
           }}
         >
diff --git a/web/components/issues/issue-layouts/quick-action-dropdowns/project-issue.tsx b/web/components/issues/issue-layouts/quick-action-dropdowns/project-issue.tsx
index 044030184..e28dd9a42 100644
--- a/web/components/issues/issue-layouts/quick-action-dropdowns/project-issue.tsx
+++ b/web/components/issues/issue-layouts/quick-action-dropdowns/project-issue.tsx
@@ -3,7 +3,7 @@ import { useRouter } from "next/router";
 import { CustomMenu } from "@plane/ui";
 import { Copy, Link, Pencil, Trash2 } from "lucide-react";
 // hooks
-import { useUser } from "hooks/store";
+import { useEventTracker, useIssues, useUser } from "hooks/store";
 import useToast from "hooks/use-toast";
 // components
 import { CreateUpdateIssueModal, DeleteIssueModal } from "components/issues";
@@ -29,6 +29,10 @@ export const ProjectIssueQuickActions: React.FC<IQuickActionProps> = (props) =>
   const {
     membership: { currentProjectRole },
   } = useUser();
+  const { setTrackElement } = useEventTracker();
+  const { issuesFilter } = useIssues(EIssuesStoreType.PROJECT);
+
+  const activeLayout = `${issuesFilter.issueFilters?.displayFilters?.layout} layout`;
 
   const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER;
 
@@ -91,6 +95,7 @@ export const ProjectIssueQuickActions: React.FC<IQuickActionProps> = (props) =>
           <>
             <CustomMenu.MenuItem
               onClick={() => {
+                setTrackElement(activeLayout);
                 setIssueToEdit(issue);
                 setCreateUpdateIssueModal(true);
               }}
@@ -102,6 +107,7 @@ export const ProjectIssueQuickActions: React.FC<IQuickActionProps> = (props) =>
             </CustomMenu.MenuItem>
             <CustomMenu.MenuItem
               onClick={() => {
+                setTrackElement(activeLayout);
                 setCreateUpdateIssueModal(true);
               }}
             >
@@ -112,6 +118,7 @@ export const ProjectIssueQuickActions: React.FC<IQuickActionProps> = (props) =>
             </CustomMenu.MenuItem>
             <CustomMenu.MenuItem
               onClick={() => {
+                setTrackElement(activeLayout);
                 setDeleteIssueModal(true);
               }}
             >
diff --git a/web/components/issues/issue-layouts/roots/all-issue-layout-root.tsx b/web/components/issues/issue-layouts/roots/all-issue-layout-root.tsx
index c681736f5..6bbbfebb4 100644
--- a/web/components/issues/issue-layouts/roots/all-issue-layout-root.tsx
+++ b/web/components/issues/issue-layouts/roots/all-issue-layout-root.tsx
@@ -5,7 +5,7 @@ import useSWR from "swr";
 import isEmpty from "lodash/isEmpty";
 import { useTheme } from "next-themes";
 // hooks
-import { useApplication, useGlobalView, useIssues, useProject, useUser } from "hooks/store";
+import { useApplication, useEventTracker, useGlobalView, useIssues, useProject, useUser } from "hooks/store";
 import { useWorkspaceIssueProperties } from "hooks/use-workspace-issue-properties";
 // components
 import { GlobalViewsAppliedFiltersRoot, IssuePeekOverview } from "components/issues";
@@ -44,6 +44,7 @@ export const AllIssueLayoutRoot: React.FC = observer(() => {
   } = useUser();
   const { fetchAllGlobalViews } = useGlobalView();
   const { workspaceProjectIds } = useProject();
+  const { setTrackElement } = useEventTracker();
 
   const isDefaultView = ["all-issues", "assigned", "created", "subscribed"].includes(groupedIssueIds.dataViewId);
   const currentView = isDefaultView ? groupedIssueIds.dataViewId : "custom-view";
@@ -201,12 +202,18 @@ export const AllIssueLayoutRoot: React.FC = observer(() => {
                   ? currentView !== "custom-view" && currentView !== "subscribed"
                     ? {
                         text: "Create new issue",
-                        onClick: () => commandPaletteStore.toggleCreateIssueModal(true, EIssuesStoreType.PROJECT),
+                        onClick: () => {
+                          setTrackElement("All issues empty state");
+                          commandPaletteStore.toggleCreateIssueModal(true, EIssuesStoreType.PROJECT);
+                        },
                       }
                     : undefined
                   : {
                       text: "Start your first project",
-                      onClick: () => commandPaletteStore.toggleCreateProjectModal(true),
+                      onClick: () => {
+                        setTrackElement("All issues empty state");
+                        commandPaletteStore.toggleCreateProjectModal(true);
+                      },
                     }
               }
               disabled={!isEditingAllowed}
diff --git a/web/components/issues/issue-layouts/spreadsheet/columns/assignee-column.tsx b/web/components/issues/issue-layouts/spreadsheet/columns/assignee-column.tsx
index 2656143ac..e63a94b8c 100644
--- a/web/components/issues/issue-layouts/spreadsheet/columns/assignee-column.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/columns/assignee-column.tsx
@@ -7,7 +7,7 @@ import { TIssue } from "@plane/types";
 
 type Props = {
   issue: TIssue;
-  onChange: (issue: TIssue, data: Partial<TIssue>) => void;
+  onChange: (issue: TIssue, data: Partial<TIssue>, updates: any) => void;
   disabled: boolean;
 };
 
@@ -18,7 +18,16 @@ export const SpreadsheetAssigneeColumn: React.FC<Props> = observer((props: Props
     <div className="h-11 border-b-[0.5px] border-custom-border-200">
       <ProjectMemberDropdown
         value={issue?.assignee_ids ?? []}
-        onChange={(data) => onChange(issue, { assignee_ids: data })}
+        onChange={(data) => {
+          onChange(
+            issue,
+            { assignee_ids: data },
+            {
+              changed_property: "assignees",
+              change_details: data,
+            }
+          );
+        }}
         projectId={issue?.project_id}
         disabled={disabled}
         multiple
diff --git a/web/components/issues/issue-layouts/spreadsheet/columns/due-date-column.tsx b/web/components/issues/issue-layouts/spreadsheet/columns/due-date-column.tsx
index dbc27a3db..775275ca4 100644
--- a/web/components/issues/issue-layouts/spreadsheet/columns/due-date-column.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/columns/due-date-column.tsx
@@ -9,7 +9,7 @@ import { TIssue } from "@plane/types";
 
 type Props = {
   issue: TIssue;
-  onChange: (issue: TIssue, data: Partial<TIssue>) => void;
+  onChange: (issue: TIssue, data: Partial<TIssue>, updates: any) => void;
   disabled: boolean;
 };
 
@@ -20,7 +20,17 @@ export const SpreadsheetDueDateColumn: React.FC<Props> = observer((props: Props)
     <div className="h-11 border-b-[0.5px] border-custom-border-200">
       <DateDropdown
         value={issue.target_date}
-        onChange={(data) => onChange(issue, { target_date: data ? renderFormattedPayloadDate(data) : null })}
+        onChange={(data) => {
+          const targetDate = data ? renderFormattedPayloadDate(data) : null;
+          onChange(
+            issue,
+            { target_date: targetDate },
+            {
+              changed_property: "target_date",
+              change_details: targetDate,
+            }
+          );
+        }}
         disabled={disabled}
         placeholder="Due date"
         buttonVariant="transparent-with-text"
diff --git a/web/components/issues/issue-layouts/spreadsheet/columns/estimate-column.tsx b/web/components/issues/issue-layouts/spreadsheet/columns/estimate-column.tsx
index 50878ccce..0c86b24c0 100644
--- a/web/components/issues/issue-layouts/spreadsheet/columns/estimate-column.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/columns/estimate-column.tsx
@@ -6,7 +6,7 @@ import { TIssue } from "@plane/types";
 
 type Props = {
   issue: TIssue;
-  onChange: (issue: TIssue, data: Partial<TIssue>) => void;
+  onChange: (issue: TIssue, data: Partial<TIssue>, updates: any) => void;
   disabled: boolean;
 };
 
@@ -17,7 +17,9 @@ export const SpreadsheetEstimateColumn: React.FC<Props> = observer((props: Props
     <div className="h-11 border-b-[0.5px] border-custom-border-200">
       <EstimateDropdown
         value={issue.estimate_point}
-        onChange={(data) => onChange(issue, { estimate_point: data })}
+        onChange={(data) =>
+          onChange(issue, { estimate_point: data }, { changed_property: "estimate_point", change_details: data })
+        }
         projectId={issue.project_id}
         disabled={disabled}
         buttonVariant="transparent-with-text"
diff --git a/web/components/issues/issue-layouts/spreadsheet/columns/label-column.tsx b/web/components/issues/issue-layouts/spreadsheet/columns/label-column.tsx
index 82015056e..2812fb1ec 100644
--- a/web/components/issues/issue-layouts/spreadsheet/columns/label-column.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/columns/label-column.tsx
@@ -9,7 +9,7 @@ import { TIssue } from "@plane/types";
 
 type Props = {
   issue: TIssue;
-  onChange: (issue: TIssue, data: Partial<TIssue>) => void;
+  onChange: (issue: TIssue, data: Partial<TIssue>, updates: any) => void;
   disabled: boolean;
 };
 
@@ -25,9 +25,7 @@ export const SpreadsheetLabelColumn: React.FC<Props> = observer((props: Props) =
       projectId={issue.project_id ?? null}
       value={issue.label_ids}
       defaultOptions={defaultLabelOptions}
-      onChange={(data) => {
-        onChange(issue, { label_ids: data });
-      }}
+      onChange={(data) => onChange(issue, { label_ids: data },{ changed_property: "labels", change_details: data })}
       className="h-11 w-full border-b-[0.5px] border-custom-border-200 hover:bg-custom-background-80"
       buttonClassName="px-2.5 h-full"
       hideDropdownArrow
diff --git a/web/components/issues/issue-layouts/spreadsheet/columns/priority-column.tsx b/web/components/issues/issue-layouts/spreadsheet/columns/priority-column.tsx
index 0a8321740..1961b8717 100644
--- a/web/components/issues/issue-layouts/spreadsheet/columns/priority-column.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/columns/priority-column.tsx
@@ -7,7 +7,7 @@ import { TIssue } from "@plane/types";
 
 type Props = {
   issue: TIssue;
-  onChange: (issue: TIssue, data: Partial<TIssue>) => void;
+  onChange: (issue: TIssue, data: Partial<TIssue>,updates:any) => void;
   disabled: boolean;
 };
 
@@ -18,7 +18,7 @@ export const SpreadsheetPriorityColumn: React.FC<Props> = observer((props: Props
     <div className="h-11 border-b-[0.5px] border-custom-border-200">
       <PriorityDropdown
         value={issue.priority}
-        onChange={(data) => onChange(issue, { priority: data })}
+        onChange={(data) => onChange(issue, { priority: data },{changed_property:"priority",change_details:data})}
         disabled={disabled}
         buttonVariant="transparent-with-text"
         buttonClassName="rounded-none text-left"
diff --git a/web/components/issues/issue-layouts/spreadsheet/columns/start-date-column.tsx b/web/components/issues/issue-layouts/spreadsheet/columns/start-date-column.tsx
index 778f9cdac..076464f27 100644
--- a/web/components/issues/issue-layouts/spreadsheet/columns/start-date-column.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/columns/start-date-column.tsx
@@ -9,7 +9,7 @@ import { TIssue } from "@plane/types";
 
 type Props = {
   issue: TIssue;
-  onChange: (issue: TIssue, data: Partial<TIssue>) => void;
+  onChange: (issue: TIssue, data: Partial<TIssue>, updates: any) => void;
   disabled: boolean;
 };
 
@@ -20,7 +20,17 @@ export const SpreadsheetStartDateColumn: React.FC<Props> = observer((props: Prop
     <div className="h-11 border-b-[0.5px] border-custom-border-200">
       <DateDropdown
         value={issue.start_date}
-        onChange={(data) => onChange(issue, { start_date: data ? renderFormattedPayloadDate(data) : null })}
+        onChange={(data) => {
+          const startDate = data ? renderFormattedPayloadDate(data) : null;
+          onChange(
+            issue,
+            { start_date: startDate },
+            {
+              changed_property: "start_date",
+              change_details: startDate,
+            }
+          );
+        }}
         disabled={disabled}
         placeholder="Start date"
         buttonVariant="transparent-with-text"
diff --git a/web/components/issues/issue-layouts/spreadsheet/columns/state-column.tsx b/web/components/issues/issue-layouts/spreadsheet/columns/state-column.tsx
index 0050c8acf..83a7c8d0f 100644
--- a/web/components/issues/issue-layouts/spreadsheet/columns/state-column.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/columns/state-column.tsx
@@ -7,7 +7,7 @@ import { TIssue } from "@plane/types";
 
 type Props = {
   issue: TIssue;
-  onChange: (issue: TIssue, data: Partial<TIssue>) => void;
+  onChange: (issue: TIssue, data: Partial<TIssue>, updates: any) => void;
   disabled: boolean;
 };
 
@@ -19,7 +19,7 @@ export const SpreadsheetStateColumn: React.FC<Props> = observer((props) => {
       <StateDropdown
         projectId={issue.project_id}
         value={issue.state_id}
-        onChange={(data) => onChange(issue, { state_id: data })}
+        onChange={(data) => onChange(issue, { state_id: data }, { changed_property: "state", change_details: data })}
         disabled={disabled}
         buttonVariant="transparent-with-text"
         buttonClassName="rounded-none text-left"
diff --git a/web/components/issues/issue-layouts/spreadsheet/issue-row.tsx b/web/components/issues/issue-layouts/spreadsheet/issue-row.tsx
index 579b8863c..40ee85df7 100644
--- a/web/components/issues/issue-layouts/spreadsheet/issue-row.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/issue-row.tsx
@@ -11,7 +11,7 @@ import { WithDisplayPropertiesHOC } from "../properties/with-display-properties-
 import { ControlLink, Tooltip } from "@plane/ui";
 // hooks
 import useOutsideClickDetector from "hooks/use-outside-click-detector";
-import { useIssueDetail, useProject } from "hooks/store";
+import { useEventTracker, useIssueDetail, useProject } from "hooks/store";
 // helper
 import { cn } from "helpers/common.helper";
 // types
@@ -51,6 +51,7 @@ export const SpreadsheetIssueRow = observer((props: Props) => {
   //hooks
   const { getProjectById } = useProject();
   const { peekIssue, setPeekIssue } = useIssueDetail();
+  const { captureIssueEvent } = useEventTracker();
   // states
   const [isMenuActive, setIsMenuActive] = useState(false);
   const [isExpanded, setExpanded] = useState<boolean>(false);
@@ -174,8 +175,19 @@ export const SpreadsheetIssueRow = observer((props: Props) => {
               <td className="h-11 w-full min-w-[8rem] bg-custom-background-100 text-sm after:absolute after:w-full after:bottom-[-1px] after:border after:border-custom-border-100 border-r-[1px] border-custom-border-100">
                 <Column
                   issue={issueDetail}
-                  onChange={(issue: TIssue, data: Partial<TIssue>) =>
-                    handleIssues({ ...issue, ...data }, EIssueActions.UPDATE)
+                  onChange={(issue: TIssue, data: Partial<TIssue>, updates: any) =>
+                    handleIssues({ ...issue, ...data }, EIssueActions.UPDATE).then(() => {
+                      captureIssueEvent({
+                        eventName: "Issue updated",
+                        payload: {
+                          ...issue,
+                          ...data,
+                          element: "Spreadsheet layout",
+                        },
+                        updates: updates,
+                        path: router.asPath,
+                      });
+                    })
                   }
                   disabled={disableUserActions}
                 />
diff --git a/web/components/issues/issue-layouts/spreadsheet/quick-add-issue-form.tsx b/web/components/issues/issue-layouts/spreadsheet/quick-add-issue-form.tsx
index 605e8bea1..b0acd7237 100644
--- a/web/components/issues/issue-layouts/spreadsheet/quick-add-issue-form.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/quick-add-issue-form.tsx
@@ -1,9 +1,10 @@
 import { useEffect, useState, useRef } from "react";
+import { useRouter } from "next/router";
 import { useForm } from "react-hook-form";
 import { observer } from "mobx-react-lite";
 import { PlusIcon } from "lucide-react";
 // hooks
-import { useProject, useWorkspace } from "hooks/store";
+import { useEventTracker, useProject, useWorkspace } from "hooks/store";
 import useToast from "hooks/use-toast";
 import useKeypress from "hooks/use-keypress";
 import useOutsideClickDetector from "hooks/use-outside-click-detector";
@@ -58,6 +59,9 @@ export const SpreadsheetQuickAddIssueForm: React.FC<Props> = observer((props) =>
   // store hooks
   const { currentWorkspace } = useWorkspace();
   const { currentProjectDetails } = useProject();
+  const { captureIssueEvent } = useEventTracker();
+  // router
+  const router = useRouter();
   // form info
   const {
     reset,
@@ -155,13 +159,26 @@ export const SpreadsheetQuickAddIssueForm: React.FC<Props> = observer((props) =>
 
     try {
       quickAddCallback &&
-        (await quickAddCallback(currentWorkspace.slug, currentProjectDetails.id, { ...payload } as TIssue, viewId));
+        (await quickAddCallback(currentWorkspace.slug, currentProjectDetails.id, { ...payload } as TIssue, viewId).then(
+          (res) => {
+            captureIssueEvent({
+              eventName: "Issue created",
+              payload: { ...res, state: "SUCCESS", element: "Spreadsheet quick add" },
+              path: router.asPath,
+            });
+          }
+        ));
       setToastAlert({
         type: "success",
         title: "Success!",
         message: "Issue created successfully.",
       });
     } catch (err: any) {
+      captureIssueEvent({
+        eventName: "Issue created",
+        payload: { ...payload, state: "FAILED", element: "Spreadsheet quick add" },
+        path: router.asPath,
+      });
       console.error(err);
       setToastAlert({
         type: "error",
diff --git a/web/components/issues/issue-modal/draft-issue-layout.tsx b/web/components/issues/issue-modal/draft-issue-layout.tsx
index 274df2981..0616c98d7 100644
--- a/web/components/issues/issue-modal/draft-issue-layout.tsx
+++ b/web/components/issues/issue-modal/draft-issue-layout.tsx
@@ -3,6 +3,7 @@ import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
 // hooks
 import useToast from "hooks/use-toast";
+import { useEventTracker } from "hooks/store";
 // services
 import { IssueDraftService } from "services/issue";
 // components
@@ -42,6 +43,8 @@ export const DraftIssueLayout: React.FC<DraftIssueProps> = observer((props) => {
   const { workspaceSlug } = router.query;
   // toast alert
   const { setToastAlert } = useToast();
+  // store hooks
+  const { captureIssueEvent } = useEventTracker();
 
   const handleClose = () => {
     if (changesMade) setIssueDiscardModal(true);
@@ -55,24 +58,33 @@ export const DraftIssueLayout: React.FC<DraftIssueProps> = observer((props) => {
 
     await issueDraftService
       .createDraftIssue(workspaceSlug.toString(), projectId.toString(), payload)
-      .then(() => {
+      .then((res) => {
         setToastAlert({
           type: "success",
           title: "Success!",
           message: "Draft Issue created successfully.",
         });
-
+        captureIssueEvent({
+          eventName: "Draft issue created",
+          payload: { ...res, state: "SUCCESS" },
+          path: router.asPath,
+        });
         onChange(null);
         setIssueDiscardModal(false);
         onClose(false);
       })
-      .catch(() =>
+      .catch(() => {
         setToastAlert({
           type: "error",
           title: "Error!",
           message: "Issue could not be created. Please try again.",
-        })
-      );
+        });
+        captureIssueEvent({
+          eventName: "Draft issue created",
+          payload: { ...payload, state: "FAILED" },
+          path: router.asPath,
+        });
+      });
   };
 
   return (
diff --git a/web/components/issues/issue-modal/modal.tsx b/web/components/issues/issue-modal/modal.tsx
index 4dfee1ea2..3b5b35cea 100644
--- a/web/components/issues/issue-modal/modal.tsx
+++ b/web/components/issues/issue-modal/modal.tsx
@@ -1,8 +1,9 @@
 import React, { useEffect, useState } from "react";
+import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
 import { Dialog, Transition } from "@headlessui/react";
 // hooks
-import { useApplication, useCycle, useIssues, useModule, useProject, useWorkspace } from "hooks/store";
+import { useApplication, useEventTracker, useCycle, useIssues, useModule, useProject, useWorkspace } from "hooks/store";
 import useToast from "hooks/use-toast";
 import useLocalStorage from "hooks/use-local-storage";
 // components
@@ -12,7 +13,6 @@ import { IssueFormRoot } from "./form";
 import type { TIssue } from "@plane/types";
 // constants
 import { EIssuesStoreType, TCreateModalStoreTypes } from "constants/issue";
-
 export interface IssuesModalProps {
   data?: Partial<TIssue>;
   isOpen: boolean;
@@ -29,9 +29,7 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = observer((prop
   const [createMore, setCreateMore] = useState(false);
   const [activeProjectId, setActiveProjectId] = useState<string | null>(null);
   // store hooks
-  const {
-    eventTracker: { postHogEventTracker },
-  } = useApplication();
+  const { captureIssueEvent } = useEventTracker();
   const {
     router: { workspaceSlug, projectId, cycleId, moduleId, viewId: projectViewId },
   } = useApplication();
@@ -67,6 +65,8 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = observer((prop
       viewId: moduleId,
     },
   };
+  // router
+  const router = useRouter();
   // toast alert
   const { setToastAlert } = useToast();
   // local storage
@@ -141,18 +141,16 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = observer((prop
         title: "Success!",
         message: "Issue created successfully.",
       });
-      postHogEventTracker(
-        "ISSUE_CREATED",
-        {
-          ...response,
-          state: "SUCCESS",
-        },
-        {
+      captureIssueEvent({
+        eventName: "Issue created",
+        payload: { ...response, state: "SUCCESS" },
+        path: router.asPath,
+        group: {
           isGrouping: true,
           groupType: "Workspace_metrics",
           groupId: currentWorkspace?.id!,
-        }
-      );
+        },
+      });
       !createMore && handleClose();
       return response;
     } catch (error) {
@@ -161,17 +159,16 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = observer((prop
         title: "Error!",
         message: "Issue could not be created. Please try again.",
       });
-      postHogEventTracker(
-        "ISSUE_CREATED",
-        {
-          state: "FAILED",
-        },
-        {
+      captureIssueEvent({
+        eventName: "Issue created",
+        payload: { ...payload, state: "FAILED" },
+        path: router.asPath,
+        group: {
           isGrouping: true,
           groupType: "Workspace_metrics",
           groupId: currentWorkspace?.id!,
-        }
-      );
+        },
+      });
     }
   };
 
@@ -185,18 +182,16 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = observer((prop
         title: "Success!",
         message: "Issue updated successfully.",
       });
-      postHogEventTracker(
-        "ISSUE_UPDATED",
-        {
-          ...response,
-          state: "SUCCESS",
-        },
-        {
+      captureIssueEvent({
+        eventName: "Issue updated",
+        payload: { ...response, state: "SUCCESS" },
+        path: router.asPath,
+        group: {
           isGrouping: true,
           groupType: "Workspace_metrics",
           groupId: currentWorkspace?.id!,
-        }
-      );
+        },
+      });
       handleClose();
       return response;
     } catch (error) {
@@ -205,17 +200,16 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = observer((prop
         title: "Error!",
         message: "Issue could not be created. Please try again.",
       });
-      postHogEventTracker(
-        "ISSUE_UPDATED",
-        {
-          state: "FAILED",
-        },
-        {
+      captureIssueEvent({
+        eventName: "Issue updated",
+        payload: { ...payload, state: "FAILED" },
+        path: router.asPath,
+        group: {
           isGrouping: true,
           groupType: "Workspace_metrics",
           groupId: currentWorkspace?.id!,
-        }
-      );
+        },
+      });
     }
   };
 
diff --git a/web/components/issues/peek-overview/root.tsx b/web/components/issues/peek-overview/root.tsx
index 5041e5d2a..f14018ed4 100644
--- a/web/components/issues/peek-overview/root.tsx
+++ b/web/components/issues/peek-overview/root.tsx
@@ -1,8 +1,9 @@
 import { FC, Fragment, useEffect, useState, useMemo } from "react";
+import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
 // hooks
 import useToast from "hooks/use-toast";
-import { useIssueDetail, useIssues, useUser } from "hooks/store";
+import { useEventTracker, useIssueDetail, useIssues, useUser } from "hooks/store";
 // components
 import { IssueView } from "components/issues";
 // types
@@ -47,6 +48,8 @@ export const IssuePeekOverview: FC<IIssuePeekOverview> = observer((props) => {
   const { is_archived = false, onIssueUpdate } = props;
   // hooks
   const { setToastAlert } = useToast();
+  // router
+  const router = useRouter();
   const {
     membership: { currentWorkspaceAllProjectsRole },
   } = useUser();
@@ -61,6 +64,7 @@ export const IssuePeekOverview: FC<IIssuePeekOverview> = observer((props) => {
   } = useIssueDetail();
   const { addIssueToCycle, removeIssueFromCycle, addModulesToIssue, removeIssueFromModule, removeModulesFromIssue } =
     useIssueDetail();
+  const { captureIssueEvent } = useEventTracker();
   // state
   const [loader, setLoader] = useState(false);
 
@@ -98,7 +102,21 @@ export const IssuePeekOverview: FC<IIssuePeekOverview> = observer((props) => {
               type: "success",
               message: "Issue updated successfully",
             });
+          captureIssueEvent({
+            eventName: "Issue updated",
+            payload: { ...response, state: "SUCCESS", element: "Issue peek-overview" },
+            updates: {
+              changed_property: Object.keys(data).join(","),
+              change_details: Object.values(data).join(","),
+            },
+            path: router.asPath,
+          });
         } catch (error) {
+          captureIssueEvent({
+            eventName: "Issue updated",
+            payload: { state: "FAILED", element: "Issue peek-overview" },
+            path: router.asPath,
+          });
           setToastAlert({
             title: "Issue update failed",
             type: "error",
@@ -108,30 +126,59 @@ export const IssuePeekOverview: FC<IIssuePeekOverview> = observer((props) => {
       },
       remove: async (workspaceSlug: string, projectId: string, issueId: string) => {
         try {
-          if (is_archived) await removeArchivedIssue(workspaceSlug, projectId, issueId);
-          else await removeIssue(workspaceSlug, projectId, issueId);
+          let response;
+          if (is_archived) response = await removeArchivedIssue(workspaceSlug, projectId, issueId);
+          else response = await removeIssue(workspaceSlug, projectId, issueId);
           setToastAlert({
             title: "Issue deleted successfully",
             type: "success",
             message: "Issue deleted successfully",
           });
+          captureIssueEvent({
+            eventName: "Issue deleted",
+            payload: { id: issueId, state: "SUCCESS", element: "Issue peek-overview" },
+            path: router.asPath,
+          });
         } catch (error) {
           setToastAlert({
             title: "Issue delete failed",
             type: "error",
             message: "Issue delete failed",
           });
+          captureIssueEvent({
+            eventName: "Issue deleted",
+            payload: { id: issueId, state: "FAILED", element: "Issue peek-overview" },
+            path: router.asPath,
+          });
         }
       },
       addIssueToCycle: async (workspaceSlug: string, projectId: string, cycleId: string, issueIds: string[]) => {
         try {
-          await addIssueToCycle(workspaceSlug, projectId, cycleId, issueIds);
+          const response = await addIssueToCycle(workspaceSlug, projectId, cycleId, issueIds);
           setToastAlert({
             title: "Cycle added to issue successfully",
             type: "success",
             message: "Issue added to issue successfully",
           });
+          captureIssueEvent({
+            eventName: "Issue updated",
+            payload: { ...response, state: "SUCCESS", element: "Issue peek-overview" },
+            updates: {
+              changed_property: "cycle_id",
+              change_details: cycleId,
+            },
+            path: router.asPath,
+          });
         } catch (error) {
+          captureIssueEvent({
+            eventName: "Issue updated",
+            payload: { state: "FAILED", element: "Issue peek-overview" },
+            updates: {
+              changed_property: "cycle_id",
+              change_details: cycleId,
+            },
+            path: router.asPath,
+          });
           setToastAlert({
             title: "Cycle add to issue failed",
             type: "error",
@@ -141,29 +188,65 @@ export const IssuePeekOverview: FC<IIssuePeekOverview> = observer((props) => {
       },
       removeIssueFromCycle: async (workspaceSlug: string, projectId: string, cycleId: string, issueId: string) => {
         try {
-          await removeIssueFromCycle(workspaceSlug, projectId, cycleId, issueId);
+          const response = await removeIssueFromCycle(workspaceSlug, projectId, cycleId, issueId);
           setToastAlert({
             title: "Cycle removed from issue successfully",
             type: "success",
             message: "Cycle removed from issue successfully",
           });
+          captureIssueEvent({
+            eventName: "Issue updated",
+            payload: { ...response, state: "SUCCESS", element: "Issue peek-overview" },
+            updates: {
+              changed_property: "cycle_id",
+              change_details: "",
+            },
+            path: router.asPath,
+          });
         } catch (error) {
           setToastAlert({
             title: "Cycle remove from issue failed",
             type: "error",
             message: "Cycle remove from issue failed",
           });
+          captureIssueEvent({
+            eventName: "Issue updated",
+            payload: { state: "FAILED", element: "Issue peek-overview" },
+            updates: {
+              changed_property: "cycle_id",
+              change_details: "",
+            },
+            path: router.asPath,
+          });
         }
       },
       addModulesToIssue: async (workspaceSlug: string, projectId: string, issueId: string, moduleIds: string[]) => {
         try {
-          await addModulesToIssue(workspaceSlug, projectId, issueId, moduleIds);
+          const response = await addModulesToIssue(workspaceSlug, projectId, issueId, moduleIds);
           setToastAlert({
             title: "Module added to issue successfully",
             type: "success",
             message: "Module added to issue successfully",
           });
+          captureIssueEvent({
+            eventName: "Issue updated",
+            payload: { ...response, state: "SUCCESS", element: "Issue peek-overview" },
+            updates: {
+              changed_property: "module_id",
+              change_details: moduleIds,
+            },
+            path: router.asPath,
+          });
         } catch (error) {
+          captureIssueEvent({
+            eventName: "Issue updated",
+            payload: { id: issueId, state: "FAILED", element: "Issue peek-overview" },
+            updates: {
+              changed_property: "module_id",
+              change_details: moduleIds,
+            },
+            path: router.asPath,
+          });
           setToastAlert({
             title: "Module add to issue failed",
             type: "error",
@@ -179,7 +262,25 @@ export const IssuePeekOverview: FC<IIssuePeekOverview> = observer((props) => {
             type: "success",
             message: "Module removed from issue successfully",
           });
+          captureIssueEvent({
+            eventName: "Issue updated",
+            payload: { id: issueId, state: "SUCCESS", element: "Issue peek-overview" },
+            updates: {
+              changed_property: "module_id",
+              change_details: "",
+            },
+            path: router.asPath,
+          });
         } catch (error) {
+          captureIssueEvent({
+            eventName: "Issue updated",
+            payload: { id: issueId, state: "FAILED", element: "Issue peek-overview" },
+            updates: {
+              changed_property: "module_id",
+              change_details: "",
+            },
+            path: router.asPath,
+          });
           setToastAlert({
             title: "Module remove from issue failed",
             type: "error",
diff --git a/web/components/issues/sub-issues/root.tsx b/web/components/issues/sub-issues/root.tsx
index 7bb1b9a6b..2b93384e2 100644
--- a/web/components/issues/sub-issues/root.tsx
+++ b/web/components/issues/sub-issues/root.tsx
@@ -1,8 +1,9 @@
 import { FC, useMemo, useState } from "react";
+import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
 import { Plus, ChevronRight, ChevronDown, Loader } from "lucide-react";
 // hooks
-import { useIssueDetail } from "hooks/store";
+import { useEventTracker, useIssueDetail } from "hooks/store";
 import useToast from "hooks/use-toast";
 // components
 import { ExistingIssuesListModal } from "components/core";
@@ -43,6 +44,8 @@ export type TSubIssueOperations = {
 
 export const SubIssuesRoot: FC<ISubIssuesRoot> = observer((props) => {
   const { workspaceSlug, projectId, parentIssueId, disabled = false } = props;
+  // router
+  const router = useRouter();
   // store hooks
   const { setToastAlert } = useToast();
   const {
@@ -54,6 +57,7 @@ export const SubIssuesRoot: FC<ISubIssuesRoot> = observer((props) => {
     removeSubIssue,
     deleteSubIssue,
   } = useIssueDetail();
+  const { setTrackElement, captureIssueEvent } = useEventTracker();
   // state
 
   type TIssueCrudState = { toggle: boolean; parentIssueId: string | undefined; issue: TIssue | undefined };
@@ -151,6 +155,15 @@ export const SubIssuesRoot: FC<ISubIssuesRoot> = observer((props) => {
         try {
           setSubIssueHelpers(parentIssueId, "issue_loader", issueId);
           await updateSubIssue(workspaceSlug, projectId, parentIssueId, issueId, issueData, oldIssue, fromModal);
+          captureIssueEvent({
+            eventName: "Sub-issue updated",
+            payload: { ...oldIssue, ...issueData, state: "SUCCESS", element: "Issue detail page" },
+            updates: {
+              changed_property: Object.keys(issueData).join(","),
+              change_details: Object.values(issueData).join(","),
+            },
+            path: router.asPath,
+          });
           setToastAlert({
             type: "success",
             title: "Sub-issue updated successfully",
@@ -158,6 +171,15 @@ export const SubIssuesRoot: FC<ISubIssuesRoot> = observer((props) => {
           });
           setSubIssueHelpers(parentIssueId, "issue_loader", issueId);
         } catch (error) {
+          captureIssueEvent({
+            eventName: "Sub-issue updated",
+            payload: { ...oldIssue, ...issueData, state: "FAILED", element: "Issue detail page" },
+            updates: {
+              changed_property: Object.keys(issueData).join(","),
+              change_details: Object.values(issueData).join(","),
+            },
+            path: router.asPath,
+          });
           setToastAlert({
             type: "error",
             title: "Error updating sub-issue",
@@ -174,8 +196,26 @@ export const SubIssuesRoot: FC<ISubIssuesRoot> = observer((props) => {
             title: "Sub-issue removed successfully",
             message: "Sub-issue removed successfully",
           });
+          captureIssueEvent({
+            eventName: "Sub-issue removed",
+            payload: { id: issueId, state: "SUCCESS", element: "Issue detail page" },
+            updates: {
+              changed_property: "parent_id",
+              change_details: parentIssueId,
+            },
+            path: router.asPath,
+          });
           setSubIssueHelpers(parentIssueId, "issue_loader", issueId);
         } catch (error) {
+          captureIssueEvent({
+            eventName: "Sub-issue removed",
+            payload: { id: issueId, state: "FAILED", element: "Issue detail page" },
+            updates: {
+              changed_property: "parent_id",
+              change_details: parentIssueId,
+            },
+            path: router.asPath,
+          });
           setToastAlert({
             type: "error",
             title: "Error removing sub-issue",
@@ -192,8 +232,18 @@ export const SubIssuesRoot: FC<ISubIssuesRoot> = observer((props) => {
             title: "Issue deleted successfully",
             message: "Issue deleted successfully",
           });
+          captureIssueEvent({
+            eventName: "Sub-issue deleted",
+            payload: { id: issueId, state: "SUCCESS", element: "Issue detail page" },
+            path: router.asPath,
+          });
           setSubIssueHelpers(parentIssueId, "issue_loader", issueId);
         } catch (error) {
+          captureIssueEvent({
+            eventName: "Sub-issue removed",
+            payload: { id: issueId, state: "FAILED", element: "Issue detail page" },
+            path: router.asPath,
+          });
           setToastAlert({
             type: "error",
             title: "Error deleting issue",
@@ -258,13 +308,19 @@ export const SubIssuesRoot: FC<ISubIssuesRoot> = observer((props) => {
                   <div className="ml-auto flex flex-shrink-0 select-none items-center gap-2">
                     <div
                       className="cursor-pointer rounded border border-custom-border-100 p-1.5 px-2 shadow transition-all hover:bg-custom-background-80"
-                      onClick={() => handleIssueCrudState("create", parentIssueId, null)}
+                      onClick={() => {
+                        setTrackElement("Issue detail add sub-issue");
+                        handleIssueCrudState("create", parentIssueId, null);
+                      }}
                     >
                       Add sub-issue
                     </div>
                     <div
                       className="cursor-pointer rounded border border-custom-border-100 p-1.5 px-2 shadow transition-all hover:bg-custom-background-80"
-                      onClick={() => handleIssueCrudState("existing", parentIssueId, null)}
+                      onClick={() => {
+                        setTrackElement("Issue detail add sub-issue");
+                        handleIssueCrudState("existing", parentIssueId, null);
+                      }}
                     >
                       Add an existing issue
                     </div>
@@ -301,6 +357,7 @@ export const SubIssuesRoot: FC<ISubIssuesRoot> = observer((props) => {
                 >
                   <CustomMenu.MenuItem
                     onClick={() => {
+                      setTrackElement("Issue detail add sub-issue");
                       handleIssueCrudState("create", parentIssueId, null);
                     }}
                   >
@@ -308,6 +365,7 @@ export const SubIssuesRoot: FC<ISubIssuesRoot> = observer((props) => {
                   </CustomMenu.MenuItem>
                   <CustomMenu.MenuItem
                     onClick={() => {
+                      setTrackElement("Issue detail add sub-issue");
                       handleIssueCrudState("existing", parentIssueId, null);
                     }}
                   >
@@ -335,6 +393,7 @@ export const SubIssuesRoot: FC<ISubIssuesRoot> = observer((props) => {
                   >
                     <CustomMenu.MenuItem
                       onClick={() => {
+                        setTrackElement("Issue detail nested sub-issue");
                         handleIssueCrudState("create", parentIssueId, null);
                       }}
                     >
@@ -342,6 +401,7 @@ export const SubIssuesRoot: FC<ISubIssuesRoot> = observer((props) => {
                     </CustomMenu.MenuItem>
                     <CustomMenu.MenuItem
                       onClick={() => {
+                        setTrackElement("Issue detail nested sub-issue");
                         handleIssueCrudState("existing", parentIssueId, null);
                       }}
                     >
diff --git a/web/components/modules/delete-module-modal.tsx b/web/components/modules/delete-module-modal.tsx
index e86a8efd9..2727b4e3b 100644
--- a/web/components/modules/delete-module-modal.tsx
+++ b/web/components/modules/delete-module-modal.tsx
@@ -3,7 +3,7 @@ import { useRouter } from "next/router";
 import { Dialog, Transition } from "@headlessui/react";
 import { observer } from "mobx-react-lite";
 // hooks
-import { useApplication, useModule } from "hooks/store";
+import { useEventTracker, useModule } from "hooks/store";
 import useToast from "hooks/use-toast";
 // ui
 import { Button } from "@plane/ui";
@@ -26,9 +26,7 @@ export const DeleteModuleModal: React.FC<Props> = observer((props) => {
   const router = useRouter();
   const { workspaceSlug, projectId, moduleId, peekModule } = router.query;
   // store hooks
-  const {
-    eventTracker: { postHogEventTracker },
-  } = useApplication();
+  const { captureModuleEvent } = useEventTracker();
   const { deleteModule } = useModule();
   // toast alert
   const { setToastAlert } = useToast();
@@ -52,8 +50,9 @@ export const DeleteModuleModal: React.FC<Props> = observer((props) => {
           title: "Success!",
           message: "Module deleted successfully.",
         });
-        postHogEventTracker("MODULE_DELETED", {
-          state: "SUCCESS",
+        captureModuleEvent({
+          eventName: "Module deleted",
+          payload: { ...data, state: "SUCCESS" },
         });
       })
       .catch(() => {
@@ -62,8 +61,9 @@ export const DeleteModuleModal: React.FC<Props> = observer((props) => {
           title: "Error!",
           message: "Module could not be deleted. Please try again.",
         });
-        postHogEventTracker("MODULE_DELETED", {
-          state: "FAILED",
+        captureModuleEvent({
+          eventName: "Module deleted",
+          payload: { ...data, state: "FAILED" },
         });
       })
       .finally(() => {
diff --git a/web/components/modules/modal.tsx b/web/components/modules/modal.tsx
index e2ed02aa6..0852434c3 100644
--- a/web/components/modules/modal.tsx
+++ b/web/components/modules/modal.tsx
@@ -3,7 +3,7 @@ import { observer } from "mobx-react-lite";
 import { useForm } from "react-hook-form";
 import { Dialog, Transition } from "@headlessui/react";
 // hooks
-import { useApplication, useModule, useProject } from "hooks/store";
+import { useEventTracker, useModule, useProject } from "hooks/store";
 import useToast from "hooks/use-toast";
 // components
 import { ModuleForm } from "components/modules";
@@ -31,9 +31,7 @@ export const CreateUpdateModuleModal: React.FC<Props> = observer((props) => {
   // states
   const [activeProject, setActiveProject] = useState<string | null>(null);
   // store hooks
-  const {
-    eventTracker: { postHogEventTracker },
-  } = useApplication();
+  const { captureModuleEvent } = useEventTracker();
   const { workspaceProjectIds } = useProject();
   const { createModule, updateModuleDetails } = useModule();
   // toast alert
@@ -55,15 +53,14 @@ export const CreateUpdateModuleModal: React.FC<Props> = observer((props) => {
     await createModule(workspaceSlug.toString(), selectedProjectId, payload)
       .then((res) => {
         handleClose();
-
         setToastAlert({
           type: "success",
           title: "Success!",
           message: "Module created successfully.",
         });
-        postHogEventTracker("MODULE_CREATED", {
-          ...res,
-          state: "SUCCESS",
+        captureModuleEvent({
+          eventName: "Module created",
+          payload: { ...res, state: "SUCCESS" },
         });
       })
       .catch((err) => {
@@ -72,8 +69,9 @@ export const CreateUpdateModuleModal: React.FC<Props> = observer((props) => {
           title: "Error!",
           message: err.detail ?? "Module could not be created. Please try again.",
         });
-        postHogEventTracker("MODULE_CREATED", {
-          state: "FAILED",
+        captureModuleEvent({
+          eventName: "Module created",
+          payload: { ...data, state: "FAILED" },
         });
       });
   };
@@ -91,9 +89,9 @@ export const CreateUpdateModuleModal: React.FC<Props> = observer((props) => {
           title: "Success!",
           message: "Module updated successfully.",
         });
-        postHogEventTracker("MODULE_UPDATED", {
-          ...res,
-          state: "SUCCESS",
+        captureModuleEvent({
+          eventName: "Module updated",
+          payload: { ...res, state: "SUCCESS" },
         });
       })
       .catch((err) => {
@@ -102,8 +100,9 @@ export const CreateUpdateModuleModal: React.FC<Props> = observer((props) => {
           title: "Error!",
           message: err.detail ?? "Module could not be updated. Please try again.",
         });
-        postHogEventTracker("MODULE_UPDATED", {
-          state: "FAILED",
+        captureModuleEvent({
+          eventName: "Module updated",
+          payload: { ...data, state: "FAILED" },
         });
       });
   };
diff --git a/web/components/modules/module-card-item.tsx b/web/components/modules/module-card-item.tsx
index f9236ef10..3d83be010 100644
--- a/web/components/modules/module-card-item.tsx
+++ b/web/components/modules/module-card-item.tsx
@@ -4,7 +4,7 @@ import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
 import { Info, LinkIcon, Pencil, Star, Trash2 } from "lucide-react";
 // hooks
-import { useModule, useUser } from "hooks/store";
+import { useEventTracker, useModule, useUser } from "hooks/store";
 import useToast from "hooks/use-toast";
 // components
 import { CreateUpdateModuleModal, DeleteModuleModal } from "components/modules";
@@ -36,6 +36,7 @@ export const ModuleCardItem: React.FC<Props> = observer((props) => {
     membership: { currentProjectRole },
   } = useUser();
   const { getModuleById, addModuleToFavorites, removeModuleFromFavorites } = useModule();
+  const { setTrackElement } = useEventTracker();
   // derived values
   const moduleDetails = getModuleById(moduleId);
   const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER;
@@ -83,12 +84,14 @@ export const ModuleCardItem: React.FC<Props> = observer((props) => {
   const handleEditModule = (e: React.MouseEvent<HTMLButtonElement>) => {
     e.preventDefault();
     e.stopPropagation();
+    setTrackElement("Modules page board layout");
     setEditModal(true);
   };
 
   const handleDeleteModule = (e: React.MouseEvent<HTMLButtonElement>) => {
     e.preventDefault();
     e.stopPropagation();
+    setTrackElement("Modules page board layout");
     setDeleteModal(true);
   };
 
diff --git a/web/components/modules/module-list-item.tsx b/web/components/modules/module-list-item.tsx
index c24e75198..7232c8815 100644
--- a/web/components/modules/module-list-item.tsx
+++ b/web/components/modules/module-list-item.tsx
@@ -4,7 +4,7 @@ import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
 import { Check, Info, LinkIcon, Pencil, Star, Trash2, User2 } from "lucide-react";
 // hooks
-import { useModule, useUser } from "hooks/store";
+import { useModule, useUser, useEventTracker } from "hooks/store";
 import useToast from "hooks/use-toast";
 // components
 import { CreateUpdateModuleModal, DeleteModuleModal } from "components/modules";
@@ -36,6 +36,7 @@ export const ModuleListItem: React.FC<Props> = observer((props) => {
     membership: { currentProjectRole },
   } = useUser();
   const { getModuleById, addModuleToFavorites, removeModuleFromFavorites } = useModule();
+  const { setTrackElement } = useEventTracker();
   // derived values
   const moduleDetails = getModuleById(moduleId);
   const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER;
@@ -83,12 +84,14 @@ export const ModuleListItem: React.FC<Props> = observer((props) => {
   const handleEditModule = (e: React.MouseEvent<HTMLButtonElement>) => {
     e.preventDefault();
     e.stopPropagation();
+    setTrackElement("Modules page list layout");
     setEditModal(true);
   };
 
   const handleDeleteModule = (e: React.MouseEvent<HTMLButtonElement>) => {
     e.preventDefault();
     e.stopPropagation();
+    setTrackElement("Modules page list layout");
     setDeleteModal(true);
   };
 
diff --git a/web/components/modules/modules-list-view.tsx b/web/components/modules/modules-list-view.tsx
index 93b12d94c..b10908060 100644
--- a/web/components/modules/modules-list-view.tsx
+++ b/web/components/modules/modules-list-view.tsx
@@ -2,7 +2,7 @@ import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
 import { useTheme } from "next-themes";
 // hooks
-import { useApplication, useModule, useUser } from "hooks/store";
+import { useApplication, useEventTracker, useModule, useUser } from "hooks/store";
 import useLocalStorage from "hooks/use-local-storage";
 // components
 import { ModuleCardItem, ModuleListItem, ModulePeekOverview, ModulesListGanttChartView } from "components/modules";
@@ -20,6 +20,7 @@ export const ModulesListView: React.FC = observer(() => {
   const { resolvedTheme } = useTheme();
   // store hooks
   const { commandPalette: commandPaletteStore } = useApplication();
+  const { setTrackElement } = useEventTracker();
   const {
     membership: { currentProjectRole },
     currentUser,
@@ -106,7 +107,10 @@ export const ModulesListView: React.FC = observer(() => {
           }}
           primaryButton={{
             text: "Build your first module",
-            onClick: () => commandPaletteStore.toggleCreateModuleModal(true),
+            onClick: () => {
+              setTrackElement("Module empty state");
+              commandPaletteStore.toggleCreateModuleModal(true);
+            },
           }}
           size="lg"
           disabled={!isEditingAllowed}
diff --git a/web/components/modules/sidebar.tsx b/web/components/modules/sidebar.tsx
index 8b1aa28e8..c72478005 100644
--- a/web/components/modules/sidebar.tsx
+++ b/web/components/modules/sidebar.tsx
@@ -16,7 +16,7 @@ import {
   UserCircle2,
 } from "lucide-react";
 // hooks
-import { useModule, useUser } from "hooks/store";
+import { useModule, useUser, useEventTracker } from "hooks/store";
 import useToast from "hooks/use-toast";
 // components
 import { LinkModal, LinksList, SidebarProgressStats } from "components/core";
@@ -66,7 +66,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
     membership: { currentProjectRole },
   } = useUser();
   const { getModuleById, updateModuleDetails, createModuleLink, updateModuleLink, deleteModuleLink } = useModule();
-
+  const { setTrackElement } = useEventTracker();
   const moduleDetails = getModuleById(moduleId);
 
   const { setToastAlert } = useToast();
@@ -297,7 +297,12 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
             </button>
             {isEditingAllowed && (
               <CustomMenu placement="bottom-end" ellipsis>
-                <CustomMenu.MenuItem onClick={() => setModuleDeleteModal(true)}>
+                <CustomMenu.MenuItem
+                  onClick={() => {
+                    setTrackElement("Module peek-overview");
+                    setModuleDeleteModal(true);
+                  }}
+                >
                   <span className="flex items-center justify-start gap-2">
                     <Trash2 className="h-3 w-3" />
                     <span>Delete module</span>
diff --git a/web/components/onboarding/invitations.tsx b/web/components/onboarding/invitations.tsx
index c9ec19cc8..3315ff035 100644
--- a/web/components/onboarding/invitations.tsx
+++ b/web/components/onboarding/invitations.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import useSWR, { mutate } from "swr";
 // hooks
-import { useApplication, useUser, useWorkspace } from "hooks/store";
+import { useEventTracker, useUser, useWorkspace } from "hooks/store";
 // components
 import { Button } from "@plane/ui";
 // helpers
@@ -15,6 +15,7 @@ import { ROLE } from "constants/workspace";
 import { IWorkspaceMemberInvitation } from "@plane/types";
 // icons
 import { CheckCircle2, Search } from "lucide-react";
+import {} from "hooks/store/use-event-tracker";
 
 type Props = {
   handleNextStep: () => void;
@@ -28,9 +29,7 @@ export const Invitations: React.FC<Props> = (props) => {
   const [isJoiningWorkspaces, setIsJoiningWorkspaces] = useState(false);
   const [invitationsRespond, setInvitationsRespond] = useState<string[]>([]);
   // store hooks
-  const {
-    eventTracker: { postHogEventTracker },
-  } = useApplication();
+  const { captureEvent } = useEventTracker();
   const { currentUser, updateCurrentUser } = useUser();
   const { workspaces, fetchWorkspaces } = useWorkspace();
 
@@ -63,7 +62,7 @@ export const Invitations: React.FC<Props> = (props) => {
     await workspaceService
       .joinWorkspaces({ invitations: invitationsRespond })
       .then(async (res) => {
-        postHogEventTracker("MEMBER_ACCEPTED", { ...res, state: "SUCCESS", accepted_from: "App" });
+        captureEvent("Member accepted", { ...res, state: "SUCCESS", accepted_from: "App" });
         await fetchWorkspaces();
         await mutate(USER_WORKSPACES);
         await updateLastWorkspace();
@@ -72,7 +71,7 @@ export const Invitations: React.FC<Props> = (props) => {
       })
       .catch((error) => {
         console.error(error);
-        postHogEventTracker("MEMBER_ACCEPTED", { state: "FAILED", accepted_from: "App" });
+        captureEvent("Member accepted", { state: "FAILED", accepted_from: "App" });
       })
       .finally(() => setIsJoiningWorkspaces(false));
   };
diff --git a/web/components/onboarding/tour/root.tsx b/web/components/onboarding/tour/root.tsx
index 362c03ed5..6e1de15dd 100644
--- a/web/components/onboarding/tour/root.tsx
+++ b/web/components/onboarding/tour/root.tsx
@@ -3,7 +3,7 @@ import Image from "next/image";
 import { observer } from "mobx-react-lite";
 import { X } from "lucide-react";
 // hooks
-import { useApplication, useUser } from "hooks/store";
+import { useApplication, useEventTracker, useUser } from "hooks/store";
 // components
 import { TourSidebar } from "components/onboarding";
 // ui
@@ -78,10 +78,8 @@ export const TourRoot: React.FC<Props> = observer((props) => {
   // states
   const [step, setStep] = useState<TTourSteps>("welcome");
   // store hooks
-  const {
-    commandPalette: commandPaletteStore,
-    eventTracker: { setTrackElement },
-  } = useApplication();
+  const { commandPalette: commandPaletteStore } = useApplication();
+  const { setTrackElement } = useEventTracker();
   const { currentUser } = useUser();
 
   const currentStepIndex = TOUR_STEPS.findIndex((tourStep) => tourStep.key === step);
@@ -159,7 +157,7 @@ export const TourRoot: React.FC<Props> = observer((props) => {
                     variant="primary"
                     onClick={() => {
                       onComplete();
-                      setTrackElement("ONBOARDING_TOUR");
+                      setTrackElement("Onboarding tour");
                       commandPaletteStore.toggleCreateProjectModal(true);
                     }}
                   >
diff --git a/web/components/page-views/workspace-dashboard.tsx b/web/components/page-views/workspace-dashboard.tsx
index 3ae0b9e62..dc9c4de61 100644
--- a/web/components/page-views/workspace-dashboard.tsx
+++ b/web/components/page-views/workspace-dashboard.tsx
@@ -2,7 +2,7 @@ import { useEffect } from "react";
 import { useTheme } from "next-themes";
 import { observer } from "mobx-react-lite";
 // hooks
-import { useApplication, useDashboard, useProject, useUser } from "hooks/store";
+import { useApplication, useEventTracker, useDashboard, useProject, useUser } from "hooks/store";
 // components
 import { TourRoot } from "components/onboarding";
 import { UserGreetingsView } from "components/user";
@@ -18,9 +18,9 @@ export const WorkspaceDashboardView = observer(() => {
   // theme
   const { resolvedTheme } = useTheme();
   // store hooks
+  const { captureEvent, setTrackElement } = useEventTracker();
   const {
     commandPalette: { toggleCreateProjectModal },
-    eventTracker: { postHogEventTracker },
     router: { workspaceSlug },
   } = useApplication();
   const {
@@ -37,7 +37,7 @@ export const WorkspaceDashboardView = observer(() => {
   const handleTourCompleted = () => {
     updateTourCompleted()
       .then(() => {
-        postHogEventTracker("USER_TOUR_COMPLETE", {
+        captureEvent("User tour complete", {
           user_id: currentUser?.id,
           email: currentUser?.email,
           state: "SUCCESS",
@@ -62,7 +62,7 @@ export const WorkspaceDashboardView = observer(() => {
       {homeDashboardId && joinedProjectIds ? (
         <>
           {joinedProjectIds.length > 0 ? (
-            <div className="space-y-7 p-7 bg-custom-background-90 h-full w-full flex flex-col overflow-y-auto">
+            <div className="flex h-full w-full flex-col space-y-7 overflow-y-auto bg-custom-background-90 p-7">
               <IssuePeekOverview />
               {currentUser && <UserGreetingsView user={currentUser} />}
               {currentUser && !currentUser.is_tour_completed && (
@@ -81,7 +81,10 @@ export const WorkspaceDashboardView = observer(() => {
             progress."
               primaryButton={{
                 text: "Build your first project",
-                onClick: () => toggleCreateProjectModal(true),
+                onClick: () => {
+                  setTrackElement("Dashboard");
+                  toggleCreateProjectModal(true);
+                },
               }}
               comicBox={{
                 title: "Everything starts with a project in Plane",
@@ -93,7 +96,7 @@ export const WorkspaceDashboardView = observer(() => {
           )}
         </>
       ) : (
-        <div className="h-full w-full grid place-items-center">
+        <div className="grid h-full w-full place-items-center">
           <Spinner />
         </div>
       )}
diff --git a/web/components/project/card-list.tsx b/web/components/project/card-list.tsx
index 76e67e1b7..e7601ce35 100644
--- a/web/components/project/card-list.tsx
+++ b/web/components/project/card-list.tsx
@@ -1,7 +1,7 @@
 import { observer } from "mobx-react-lite";
 import { useTheme } from "next-themes";
 // hooks
-import { useApplication, useProject, useUser } from "hooks/store";
+import { useApplication, useEventTracker, useProject, useUser } from "hooks/store";
 // components
 import { ProjectCard } from "components/project";
 import { Loader } from "@plane/ui";
@@ -13,10 +13,8 @@ export const ProjectCardList = observer(() => {
   // theme
   const { resolvedTheme } = useTheme();
   // store hooks
-  const {
-    commandPalette: commandPaletteStore,
-    eventTracker: { setTrackElement },
-  } = useApplication();
+  const { commandPalette: commandPaletteStore } = useApplication();
+  const { setTrackElement } = useEventTracker();
   const {
     membership: { currentWorkspaceRole },
     currentUser,
@@ -66,7 +64,7 @@ export const ProjectCardList = observer(() => {
           primaryButton={{
             text: "Start your first project",
             onClick: () => {
-              setTrackElement("PROJECTS_EMPTY_STATE");
+              setTrackElement("Project empty state");
               commandPaletteStore.toggleCreateProjectModal(true);
             },
           }}
diff --git a/web/components/project/create-project-modal.tsx b/web/components/project/create-project-modal.tsx
index 1e6aa136a..377ef06c1 100644
--- a/web/components/project/create-project-modal.tsx
+++ b/web/components/project/create-project-modal.tsx
@@ -4,7 +4,7 @@ import { Dialog, Transition } from "@headlessui/react";
 import { observer } from "mobx-react-lite";
 import { X } from "lucide-react";
 // hooks
-import { useApplication, useProject, useUser, useWorkspace } from "hooks/store";
+import { useEventTracker, useProject, useUser, useWorkspace } from "hooks/store";
 import useToast from "hooks/use-toast";
 // ui
 import { Button, CustomSelect, Input, TextArea } from "@plane/ui";
@@ -61,9 +61,7 @@ export interface ICreateProjectForm {
 export const CreateProjectModal: FC<Props> = observer((props) => {
   const { isOpen, onClose, setToFavorite = false, workspaceSlug } = props;
   // store
-  const {
-    eventTracker: { postHogEventTracker },
-  } = useApplication();
+  const { captureProjectEvent } = useEventTracker();
   const {
     membership: { currentWorkspaceRole },
   } = useUser();
@@ -135,10 +133,14 @@ export const CreateProjectModal: FC<Props> = observer((props) => {
           ...res,
           state: "SUCCESS",
         };
-        postHogEventTracker("PROJECT_CREATED", newPayload, {
-          isGrouping: true,
-          groupType: "Workspace_metrics",
-          groupId: res.workspace,
+        captureProjectEvent({
+          eventName: "Project created",
+          payload: newPayload,
+          group: {
+            isGrouping: true,
+            groupType: "Workspace_metrics",
+            groupId: res.workspace,
+          },
         });
         setToastAlert({
           type: "success",
@@ -157,17 +159,18 @@ export const CreateProjectModal: FC<Props> = observer((props) => {
             title: "Error!",
             message: err.data[key],
           });
-          postHogEventTracker(
-            "PROJECT_CREATED",
-            {
+          captureProjectEvent({
+            eventName: "Project created",
+            payload: {
+              ...payload,
               state: "FAILED",
             },
-            {
+            group: {
               isGrouping: true,
               groupType: "Workspace_metrics",
               groupId: currentWorkspace?.id!,
-            }
-          );
+            },
+          });
         });
       });
   };
diff --git a/web/components/project/delete-project-modal.tsx b/web/components/project/delete-project-modal.tsx
index e2b0bc5f0..7e04a6ebd 100644
--- a/web/components/project/delete-project-modal.tsx
+++ b/web/components/project/delete-project-modal.tsx
@@ -4,7 +4,7 @@ import { Controller, useForm } from "react-hook-form";
 import { Dialog, Transition } from "@headlessui/react";
 import { AlertTriangle } from "lucide-react";
 // hooks
-import { useApplication, useProject, useWorkspace } from "hooks/store";
+import { useEventTracker, useProject, useWorkspace } from "hooks/store";
 import useToast from "hooks/use-toast";
 // ui
 import { Button, Input } from "@plane/ui";
@@ -25,9 +25,7 @@ const defaultValues = {
 export const DeleteProjectModal: React.FC<DeleteProjectModal> = (props) => {
   const { isOpen, project, onClose } = props;
   // store hooks
-  const {
-    eventTracker: { postHogEventTracker },
-  } = useApplication();
+  const { captureProjectEvent } = useEventTracker();
   const { currentWorkspace } = useWorkspace();
   const { deleteProject } = useProject();
   // router
@@ -63,17 +61,15 @@ export const DeleteProjectModal: React.FC<DeleteProjectModal> = (props) => {
         if (projectId && projectId.toString() === project.id) router.push(`/${workspaceSlug}/projects`);
 
         handleClose();
-        postHogEventTracker(
-          "PROJECT_DELETED",
-          {
-            state: "SUCCESS",
-          },
-          {
+        captureProjectEvent({
+          eventName: "Project deleted",
+          payload: { ...project, state: "SUCCESS", element: "Project general settings" },
+          group: {
             isGrouping: true,
             groupType: "Workspace_metrics",
             groupId: currentWorkspace?.id!,
-          }
-        );
+          },
+        });
         setToastAlert({
           type: "success",
           title: "Success!",
@@ -81,17 +77,15 @@ export const DeleteProjectModal: React.FC<DeleteProjectModal> = (props) => {
         });
       })
       .catch(() => {
-        postHogEventTracker(
-          "PROJECT_DELETED",
-          {
-            state: "FAILED",
-          },
-          {
+        captureProjectEvent({
+          eventName: "Project deleted",
+          payload: { ...project, state: "FAILED", element: "Project general settings" },
+          group: {
             isGrouping: true,
             groupType: "Workspace_metrics",
             groupId: currentWorkspace?.id!,
-          }
-        );
+          },
+        });
         setToastAlert({
           type: "error",
           title: "Error!",
diff --git a/web/components/project/form.tsx b/web/components/project/form.tsx
index 5be7033a4..f5efa7bc8 100644
--- a/web/components/project/form.tsx
+++ b/web/components/project/form.tsx
@@ -1,7 +1,7 @@
 import { FC, useEffect, useState } from "react";
 import { Controller, useForm } from "react-hook-form";
 // hooks
-import { useApplication, useProject, useWorkspace } from "hooks/store";
+import { useEventTracker, useProject, useWorkspace } from "hooks/store";
 import useToast from "hooks/use-toast";
 // components
 import EmojiIconPicker from "components/emoji-icon-picker";
@@ -32,9 +32,7 @@ export const ProjectDetailsForm: FC<IProjectDetailsForm> = (props) => {
   // states
   const [isLoading, setIsLoading] = useState(false);
   // store hooks
-  const {
-    eventTracker: { postHogEventTracker },
-  } = useApplication();
+  const { captureProjectEvent } = useEventTracker();
   const { currentWorkspace } = useWorkspace();
   const { updateProject } = useProject();
   // toast alert
@@ -79,15 +77,15 @@ export const ProjectDetailsForm: FC<IProjectDetailsForm> = (props) => {
 
     return updateProject(workspaceSlug.toString(), project.id, payload)
       .then((res) => {
-        postHogEventTracker(
-          "PROJECT_UPDATED",
-          { ...res, state: "SUCCESS" },
-          {
+        captureProjectEvent({
+          eventName: "Project updated",
+          payload: { ...res, state: "SUCCESS", element: "Project general settings" },
+          group: {
             isGrouping: true,
             groupType: "Workspace_metrics",
             groupId: res.workspace,
-          }
-        );
+          },
+        });
         setToastAlert({
           type: "success",
           title: "Success!",
@@ -95,17 +93,15 @@ export const ProjectDetailsForm: FC<IProjectDetailsForm> = (props) => {
         });
       })
       .catch((error) => {
-        postHogEventTracker(
-          "PROJECT_UPDATED",
-          {
-            state: "FAILED",
-          },
-          {
+        captureProjectEvent({
+          eventName: "Project updated",
+          payload: { ...payload, state: "FAILED", element: "Project general settings" },
+          group: {
             isGrouping: true,
             groupType: "Workspace_metrics",
-            groupId: currentWorkspace?.id!,
-          }
-        );
+            groupId: currentWorkspace?.id,
+          },
+        });
         setToastAlert({
           type: "error",
           title: "Error!",
diff --git a/web/components/project/leave-project-modal.tsx b/web/components/project/leave-project-modal.tsx
index 96fc8df59..941bbbaa6 100644
--- a/web/components/project/leave-project-modal.tsx
+++ b/web/components/project/leave-project-modal.tsx
@@ -5,7 +5,7 @@ import { Dialog, Transition } from "@headlessui/react";
 import { AlertTriangleIcon } from "lucide-react";
 import { observer } from "mobx-react-lite";
 // hooks
-import { useApplication, useUser } from "hooks/store";
+import { useEventTracker, useUser } from "hooks/store";
 import useToast from "hooks/use-toast";
 // ui
 import { Button, Input } from "@plane/ui";
@@ -34,9 +34,7 @@ export const LeaveProjectModal: FC<ILeaveProjectModal> = observer((props) => {
   const router = useRouter();
   const { workspaceSlug } = router.query;
   // store hooks
-  const {
-    eventTracker: { postHogEventTracker },
-  } = useApplication();
+  const { captureEvent } = useEventTracker();
   const {
     membership: { leaveProject },
   } = useUser();
@@ -65,7 +63,7 @@ export const LeaveProjectModal: FC<ILeaveProjectModal> = observer((props) => {
             .then(() => {
               handleClose();
               router.push(`/${workspaceSlug}/projects`);
-              postHogEventTracker("PROJECT_MEMBER_LEAVE", {
+              captureEvent("Project member leave", {
                 state: "SUCCESS",
               });
             })
@@ -75,7 +73,7 @@ export const LeaveProjectModal: FC<ILeaveProjectModal> = observer((props) => {
                 title: "Error!",
                 message: "Something went wrong please try again later.",
               });
-              postHogEventTracker("PROJECT_MEMBER_LEAVE", {
+              captureEvent("Project member leave", {
                 state: "FAILED",
               });
             });
diff --git a/web/components/project/member-list.tsx b/web/components/project/member-list.tsx
index 899348dd2..fa8008c8f 100644
--- a/web/components/project/member-list.tsx
+++ b/web/components/project/member-list.tsx
@@ -2,7 +2,7 @@ import { useState } from "react";
 import { observer } from "mobx-react-lite";
 import { Search } from "lucide-react";
 // hooks
-import { useApplication, useMember } from "hooks/store";
+import { useEventTracker, useMember } from "hooks/store";
 // components
 import { ProjectMemberListItem, SendProjectInvitationModal } from "components/project";
 // ui
@@ -13,9 +13,7 @@ export const ProjectMemberList: React.FC = observer(() => {
   const [inviteModal, setInviteModal] = useState(false);
   const [searchQuery, setSearchQuery] = useState("");
   // store hooks
-  const {
-    eventTracker: { setTrackElement },
-  } = useApplication();
+  const { setTrackElement } = useEventTracker();
   const {
     project: { projectMemberIds, getProjectMemberDetails },
   } = useMember();
diff --git a/web/components/project/send-project-invitation-modal.tsx b/web/components/project/send-project-invitation-modal.tsx
index b165a40ae..39fb5c974 100644
--- a/web/components/project/send-project-invitation-modal.tsx
+++ b/web/components/project/send-project-invitation-modal.tsx
@@ -5,7 +5,7 @@ import { useForm, Controller, useFieldArray } from "react-hook-form";
 import { Dialog, Transition } from "@headlessui/react";
 import { ChevronDown, Plus, X } from "lucide-react";
 // hooks
-import { useApplication, useMember, useUser, useWorkspace } from "hooks/store";
+import { useEventTracker, useMember, useUser, useWorkspace } from "hooks/store";
 import useToast from "hooks/use-toast";
 // ui
 import { Avatar, Button, CustomSelect, CustomSearchSelect } from "@plane/ui";
@@ -45,9 +45,7 @@ export const SendProjectInvitationModal: React.FC<Props> = observer((props) => {
   // toast alert
   const { setToastAlert } = useToast();
   // store hooks
-  const {
-    eventTracker: { postHogEventTracker },
-  } = useApplication();
+  const { captureEvent } = useEventTracker();
   const {
     membership: { currentProjectRole },
   } = useUser();
@@ -89,8 +87,8 @@ export const SendProjectInvitationModal: React.FC<Props> = observer((props) => {
           type: "success",
           message: "Members added successfully.",
         });
-        postHogEventTracker(
-          "MEMBER_ADDED",
+        captureEvent(
+          "Member added",
           {
             ...res,
             state: "SUCCESS",
@@ -104,8 +102,8 @@ export const SendProjectInvitationModal: React.FC<Props> = observer((props) => {
       })
       .catch((error) => {
         console.error(error);
-        postHogEventTracker(
-          "MEMBER_ADDED",
+        captureEvent(
+          "Member added",
           {
             state: "FAILED",
           },
diff --git a/web/components/project/settings/features-list.tsx b/web/components/project/settings/features-list.tsx
index ed45792f2..34aec4db6 100644
--- a/web/components/project/settings/features-list.tsx
+++ b/web/components/project/settings/features-list.tsx
@@ -4,7 +4,7 @@ import { observer } from "mobx-react-lite";
 import { ContrastIcon, FileText, Inbox, Layers } from "lucide-react";
 import { DiceIcon, ToggleSwitch } from "@plane/ui";
 // hooks
-import { useApplication, useProject, useUser, useWorkspace } from "hooks/store";
+import { useEventTracker, useProject, useUser, useWorkspace } from "hooks/store";
 import useToast from "hooks/use-toast";
 // types
 import { IProject } from "@plane/types";
@@ -51,9 +51,7 @@ export const ProjectFeaturesList: FC<Props> = observer(() => {
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
   // store hooks
-  const {
-    eventTracker: { setTrackElement, postHogEventTracker },
-  } = useApplication();
+  const { setTrackElement, captureEvent } = useEventTracker();
   const {
     currentUser,
     membership: { currentProjectRole },
@@ -94,7 +92,7 @@ export const ProjectFeaturesList: FC<Props> = observer(() => {
             value={Boolean(currentProjectDetails?.[feature.property as keyof IProject])}
             onChange={() => {
               setTrackElement("PROJECT_SETTINGS_FEATURES_PAGE");
-              postHogEventTracker(`TOGGLE_${feature.title.toUpperCase()}`, {
+              captureEvent(`Toggle ${feature.title.toLowerCase()}`, {
                 workspace_id: currentWorkspace?.id,
                 workspace_slug: currentWorkspace?.slug,
                 project_id: currentProjectDetails?.id,
diff --git a/web/components/project/sidebar-list-item.tsx b/web/components/project/sidebar-list-item.tsx
index 8e4188d81..d9cd81d5f 100644
--- a/web/components/project/sidebar-list-item.tsx
+++ b/web/components/project/sidebar-list-item.tsx
@@ -18,7 +18,7 @@ import {
   MoreHorizontal,
 } from "lucide-react";
 // hooks
-import { useApplication, useProject } from "hooks/store";
+import { useApplication,useEventTracker, useProject } from "hooks/store";
 import useOutsideClickDetector from "hooks/use-outside-click-detector";
 import useToast from "hooks/use-toast";
 // helpers
@@ -73,10 +73,8 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const { projectId, provided, snapshot, handleCopyText, shortContextMenu = false } = props;
   // store hooks
-  const {
-    theme: themeStore,
-    eventTracker: { setTrackElement },
-  } = useApplication();
+  const { theme: themeStore } = useApplication();
+  const { setTrackElement } = useEventTracker();
   const { addProjectToFavorites, removeProjectFromFavorites, getProjectById } = useProject();
   // states
   const [leaveProjectModalOpen, setLeaveProjectModal] = useState(false);
@@ -149,8 +147,9 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
         {({ open }) => (
           <>
             <div
-              className={`group relative flex w-full items-center rounded-md px-2 py-1 text-custom-sidebar-text-10 hover:bg-custom-sidebar-background-80 ${snapshot?.isDragging ? "opacity-60" : ""
-                } ${isMenuActive ? "!bg-custom-sidebar-background-80" : ""}`}
+              className={`group relative flex w-full items-center rounded-md px-2 py-1 text-custom-sidebar-text-10 hover:bg-custom-sidebar-background-80 ${
+                snapshot?.isDragging ? "opacity-60" : ""
+              } ${isMenuActive ? "!bg-custom-sidebar-background-80" : ""}`}
             >
               {provided && (
                 <Tooltip
@@ -159,9 +158,11 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
                 >
                   <button
                     type="button"
-                    className={`absolute -left-2.5 top-1/2 hidden -translate-y-1/2 rounded p-0.5 text-custom-sidebar-text-400 ${isCollapsed ? "" : "group-hover:!flex"
-                      } ${project.sort_order === null ? "cursor-not-allowed opacity-60" : ""} ${isMenuActive ? "!flex" : ""
-                      }`}
+                    className={`absolute -left-2.5 top-1/2 hidden -translate-y-1/2 rounded p-0.5 text-custom-sidebar-text-400 ${
+                      isCollapsed ? "" : "group-hover:!flex"
+                    } ${project.sort_order === null ? "cursor-not-allowed opacity-60" : ""} ${
+                      isMenuActive ? "!flex" : ""
+                    }`}
                     {...provided?.dragHandleProps}
                   >
                     <MoreVertical className="h-3.5" />
@@ -172,12 +173,14 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
               <Tooltip tooltipContent={`${project.name}`} position="right" className="ml-2" disabled={!isCollapsed}>
                 <Disclosure.Button
                   as="div"
-                  className={`flex flex-grow cursor-pointer select-none items-center truncate text-left text-sm font-medium ${isCollapsed ? "justify-center" : `justify-between`
-                    }`}
+                  className={`flex flex-grow cursor-pointer select-none items-center truncate text-left text-sm font-medium ${
+                    isCollapsed ? "justify-center" : `justify-between`
+                  }`}
                 >
                   <div
-                    className={`flex w-full flex-grow items-center gap-x-2 truncate ${isCollapsed ? "justify-center" : ""
-                      }`}
+                    className={`flex w-full flex-grow items-center gap-x-2 truncate ${
+                      isCollapsed ? "justify-center" : ""
+                    }`}
                   >
                     {project.emoji ? (
                       <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded uppercase">
@@ -197,8 +200,9 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
                   </div>
                   {!isCollapsed && (
                     <ChevronDown
-                      className={`hidden h-4 w-4 flex-shrink-0 ${open ? "rotate-180" : ""} ${isMenuActive ? "!block" : ""
-                        }  mb-0.5 text-custom-sidebar-text-400 duration-300 group-hover:!block`}
+                      className={`hidden h-4 w-4 flex-shrink-0 ${open ? "rotate-180" : ""} ${
+                        isMenuActive ? "!block" : ""
+                      }  mb-0.5 text-custom-sidebar-text-400 duration-300 group-hover:!block`}
                     />
                   )}
                 </Disclosure.Button>
@@ -322,10 +326,11 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
                           disabled={!isCollapsed}
                         >
                           <div
-                            className={`group flex items-center gap-2.5 rounded-md px-2 py-1.5 text-xs font-medium outline-none ${router.asPath.includes(item.href)
-                              ? "bg-custom-primary-100/10 text-custom-primary-100"
-                              : "text-custom-sidebar-text-300 hover:bg-custom-sidebar-background-80 focus:bg-custom-sidebar-background-80"
-                              } ${isCollapsed ? "justify-center" : ""}`}
+                            className={`group flex items-center gap-2.5 rounded-md px-2 py-1.5 text-xs font-medium outline-none ${
+                              router.asPath.includes(item.href)
+                                ? "bg-custom-primary-100/10 text-custom-primary-100"
+                                : "text-custom-sidebar-text-300 hover:bg-custom-sidebar-background-80 focus:bg-custom-sidebar-background-80"
+                            } ${isCollapsed ? "justify-center" : ""}`}
                           >
                             <item.Icon className="h-4 w-4 stroke-[1.5]" />
                             {!isCollapsed && item.name}
diff --git a/web/components/project/sidebar-list.tsx b/web/components/project/sidebar-list.tsx
index 5452c861d..d5ceb4736 100644
--- a/web/components/project/sidebar-list.tsx
+++ b/web/components/project/sidebar-list.tsx
@@ -5,7 +5,7 @@ import { Disclosure, Transition } from "@headlessui/react";
 import { observer } from "mobx-react-lite";
 import { ChevronDown, ChevronRight, Plus } from "lucide-react";
 // hooks
-import { useApplication, useProject, useUser } from "hooks/store";
+import { useApplication, useEventTracker, useProject, useUser } from "hooks/store";
 import useToast from "hooks/use-toast";
 // components
 import { CreateProjectModal, ProjectSidebarListItem } from "components/project";
@@ -25,8 +25,8 @@ export const ProjectSidebarList: FC = observer(() => {
   const {
     theme: { sidebarCollapsed },
     commandPalette: { toggleCreateProjectModal },
-    eventTracker: { setTrackElement },
   } = useApplication();
+  const { setTrackElement } = useEventTracker();
   const {
     membership: { currentWorkspaceRole },
   } = useUser();
@@ -217,6 +217,7 @@ export const ProjectSidebarList: FC = observer(() => {
                               <button
                                 className="opacity-0 group-hover:opacity-100"
                                 onClick={() => {
+                                  setTrackElement("Sidebar");
                                   setIsFavoriteProjectCreate(false);
                                   setIsProjectModalOpen(true);
                                 }}
@@ -267,7 +268,7 @@ export const ProjectSidebarList: FC = observer(() => {
             type="button"
             className="flex w-full items-center gap-2 px-3 text-sm text-custom-sidebar-text-200"
             onClick={() => {
-              setTrackElement("APP_SIDEBAR");
+              setTrackElement("Sidebar");
               toggleCreateProjectModal(true);
             }}
           >
diff --git a/web/components/states/create-update-state-inline.tsx b/web/components/states/create-update-state-inline.tsx
index 860444b6b..b12659a81 100644
--- a/web/components/states/create-update-state-inline.tsx
+++ b/web/components/states/create-update-state-inline.tsx
@@ -5,7 +5,7 @@ import { TwitterPicker } from "react-color";
 import { Popover, Transition } from "@headlessui/react";
 import { observer } from "mobx-react-lite";
 // hooks
-import { useApplication, useProjectState } from "hooks/store";
+import { useEventTracker, useProjectState } from "hooks/store";
 import useToast from "hooks/use-toast";
 // ui
 import { Button, CustomSelect, Input, Tooltip } from "@plane/ui";
@@ -36,9 +36,7 @@ export const CreateUpdateStateInline: React.FC<Props> = observer((props) => {
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
   // store hooks
-  const {
-    eventTracker: { postHogEventTracker, setTrackElement },
-  } = useApplication();
+  const { captureEvent, setTrackElement } = useEventTracker();
   const { createState, updateState } = useProjectState();
   // toast alert
   const { setToastAlert } = useToast();
@@ -88,7 +86,7 @@ export const CreateUpdateStateInline: React.FC<Props> = observer((props) => {
           title: "Success!",
           message: "State created successfully.",
         });
-        postHogEventTracker("STATE_CREATE", {
+        captureEvent("State created", {
           ...res,
           state: "SUCCESS",
         });
@@ -106,7 +104,7 @@ export const CreateUpdateStateInline: React.FC<Props> = observer((props) => {
             title: "Error!",
             message: "State could not be created. Please try again.",
           });
-        postHogEventTracker("STATE_CREATE", {
+        captureEvent("State created", {
           state: "FAILED",
         });
       });
@@ -118,7 +116,7 @@ export const CreateUpdateStateInline: React.FC<Props> = observer((props) => {
     await updateState(workspaceSlug.toString(), projectId.toString(), data.id, formData)
       .then((res) => {
         handleClose();
-        postHogEventTracker("STATE_UPDATE", {
+        captureEvent("State updated", {
           ...res,
           state: "SUCCESS",
         });
@@ -141,7 +139,7 @@ export const CreateUpdateStateInline: React.FC<Props> = observer((props) => {
             title: "Error!",
             message: "State could not be updated. Please try again.",
           });
-        postHogEventTracker("STATE_UPDATE", {
+        captureEvent("State updated", {
           state: "FAILED",
         });
       });
diff --git a/web/components/states/delete-state-modal.tsx b/web/components/states/delete-state-modal.tsx
index 26b542b71..4a0414092 100644
--- a/web/components/states/delete-state-modal.tsx
+++ b/web/components/states/delete-state-modal.tsx
@@ -4,7 +4,7 @@ import { Dialog, Transition } from "@headlessui/react";
 import { observer } from "mobx-react-lite";
 import { AlertTriangle } from "lucide-react";
 // hooks
-import { useApplication, useProjectState } from "hooks/store";
+import { useEventTracker, useProjectState } from "hooks/store";
 import useToast from "hooks/use-toast";
 // ui
 import { Button } from "@plane/ui";
@@ -25,9 +25,7 @@ export const DeleteStateModal: React.FC<Props> = observer((props) => {
   const router = useRouter();
   const { workspaceSlug } = router.query;
   // store hooks
-  const {
-    eventTracker: { postHogEventTracker },
-  } = useApplication();
+  const { captureEvent } = useEventTracker();
   const { deleteState } = useProjectState();
   // toast alert
   const { setToastAlert } = useToast();
@@ -44,7 +42,7 @@ export const DeleteStateModal: React.FC<Props> = observer((props) => {
 
     await deleteState(workspaceSlug.toString(), data.project_id, data.id)
       .then(() => {
-        postHogEventTracker("STATE_DELETE", {
+        captureEvent("State deleted", {
           state: "SUCCESS",
         });
         handleClose();
@@ -63,7 +61,7 @@ export const DeleteStateModal: React.FC<Props> = observer((props) => {
             title: "Error!",
             message: "State could not be deleted. Please try again.",
           });
-        postHogEventTracker("STATE_DELETE", {
+        captureEvent("State deleted", {
           state: "FAILED",
         });
       })
diff --git a/web/components/states/project-setting-state-list-item.tsx b/web/components/states/project-setting-state-list-item.tsx
index 0c1d41c80..401c482f3 100644
--- a/web/components/states/project-setting-state-list-item.tsx
+++ b/web/components/states/project-setting-state-list-item.tsx
@@ -2,7 +2,7 @@ import { useState } from "react";
 import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
 // hooks
-import { useApplication, useProjectState } from "hooks/store";
+import { useEventTracker, useProjectState } from "hooks/store";
 // ui
 import { Tooltip, StateGroupIcon } from "@plane/ui";
 // icons
@@ -28,9 +28,7 @@ export const StatesListItem: React.FC<Props> = observer((props) => {
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
   // store hooks
-  const {
-    eventTracker: { setTrackElement },
-  } = useApplication();
+  const { setTrackElement } = useEventTracker();
   const { markStateAsDefault, moveStatePosition } = useProjectState();
   // derived values
   const groupStates = statesList.filter((s) => s.group === state.group);
diff --git a/web/components/states/project-setting-state-list.tsx b/web/components/states/project-setting-state-list.tsx
index 3288880ea..99ac40d84 100644
--- a/web/components/states/project-setting-state-list.tsx
+++ b/web/components/states/project-setting-state-list.tsx
@@ -3,7 +3,7 @@ import { useRouter } from "next/router";
 import useSWR from "swr";
 import { observer } from "mobx-react-lite";
 // hooks
-import { useApplication, useProjectState } from "hooks/store";
+import { useEventTracker, useProjectState } from "hooks/store";
 // components
 import { CreateUpdateStateInline, DeleteStateModal, StateGroup, StatesListItem } from "components/states";
 // ui
@@ -21,9 +21,7 @@ export const ProjectSettingStateList: React.FC = observer(() => {
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
   // store
-  const {
-    eventTracker: { setTrackElement },
-  } = useApplication();
+  const { setTrackElement } = useEventTracker();
   const { groupedProjectStates, projectStates, fetchProjectStates } = useProjectState();
   // state
   const [activeGroup, setActiveGroup] = useState<StateGroup>(null);
diff --git a/web/components/workspace/create-workspace-form.tsx b/web/components/workspace/create-workspace-form.tsx
index 423c80640..8cb29edde 100644
--- a/web/components/workspace/create-workspace-form.tsx
+++ b/web/components/workspace/create-workspace-form.tsx
@@ -5,7 +5,7 @@ import { Controller, useForm } from "react-hook-form";
 // services
 import { WorkspaceService } from "services/workspace.service";
 // hooks
-import { useApplication, useWorkspace } from "hooks/store";
+import { useEventTracker, useWorkspace } from "hooks/store";
 import useToast from "hooks/use-toast";
 // ui
 import { Button, CustomSelect, Input } from "@plane/ui";
@@ -48,9 +48,7 @@ export const CreateWorkspaceForm: FC<Props> = observer((props) => {
   // router
   const router = useRouter();
   // store hooks
-  const {
-    eventTracker: { postHogEventTracker },
-  } = useApplication();
+  const { captureEvent } = useEventTracker();
   const { createWorkspace } = useWorkspace();
   // toast alert
   const { setToastAlert } = useToast();
@@ -72,7 +70,7 @@ export const CreateWorkspaceForm: FC<Props> = observer((props) => {
 
           await createWorkspace(formData)
             .then(async (res) => {
-              postHogEventTracker("WORKSPACE_CREATED", {
+              captureEvent("Workspace created", {
                 ...res,
                 state: "SUCCESS",
               });
@@ -90,7 +88,7 @@ export const CreateWorkspaceForm: FC<Props> = observer((props) => {
                 title: "Error!",
                 message: "Workspace could not be created. Please try again.",
               });
-              postHogEventTracker("WORKSPACE_CREATED", {
+              captureEvent("Workspace created", {
                 state: "FAILED",
               });
             });
@@ -102,7 +100,7 @@ export const CreateWorkspaceForm: FC<Props> = observer((props) => {
           title: "Error!",
           message: "Some error occurred while creating workspace. Please try again.",
         });
-        postHogEventTracker("WORKSPACE_CREATED", {
+        captureEvent("Workspace created", {
           state: "FAILED",
         });
       });
diff --git a/web/components/workspace/delete-workspace-modal.tsx b/web/components/workspace/delete-workspace-modal.tsx
index a35041a2a..acfe0648d 100644
--- a/web/components/workspace/delete-workspace-modal.tsx
+++ b/web/components/workspace/delete-workspace-modal.tsx
@@ -5,7 +5,7 @@ import { Controller, useForm } from "react-hook-form";
 import { Dialog, Transition } from "@headlessui/react";
 import { AlertTriangle } from "lucide-react";
 // hooks
-import { useApplication, useWorkspace } from "hooks/store";
+import { useEventTracker, useWorkspace } from "hooks/store";
 import useToast from "hooks/use-toast";
 // ui
 import { Button, Input } from "@plane/ui";
@@ -28,9 +28,7 @@ export const DeleteWorkspaceModal: React.FC<Props> = observer((props) => {
   // router
   const router = useRouter();
   // store hooks
-  const {
-    eventTracker: { postHogEventTracker },
-  } = useApplication();
+  const { captureEvent } = useEventTracker();
   const { deleteWorkspace } = useWorkspace();
   // toast alert
   const { setToastAlert } = useToast();
@@ -61,7 +59,7 @@ export const DeleteWorkspaceModal: React.FC<Props> = observer((props) => {
       .then((res) => {
         handleClose();
         router.push("/");
-        postHogEventTracker("WORKSPACE_DELETED", {
+        captureEvent("Workspace deleted", {
           res,
           state: "SUCCESS",
         });
@@ -77,7 +75,7 @@ export const DeleteWorkspaceModal: React.FC<Props> = observer((props) => {
           title: "Error!",
           message: "Something went wrong. Please try again later.",
         });
-        postHogEventTracker("WORKSPACE_DELETED", {
+        captureEvent("Workspace deleted", {
           state: "FAILED",
         });
       });
diff --git a/web/components/workspace/settings/workspace-details.tsx b/web/components/workspace/settings/workspace-details.tsx
index 87313c87d..e0ac68a24 100644
--- a/web/components/workspace/settings/workspace-details.tsx
+++ b/web/components/workspace/settings/workspace-details.tsx
@@ -6,7 +6,7 @@ import { ChevronDown, ChevronUp, Pencil } from "lucide-react";
 // services
 import { FileService } from "services/file.service";
 // hooks
-import { useApplication, useUser, useWorkspace } from "hooks/store";
+import { useEventTracker, useUser, useWorkspace } from "hooks/store";
 import useToast from "hooks/use-toast";
 // components
 import { DeleteWorkspaceModal } from "components/workspace";
@@ -37,9 +37,7 @@ export const WorkspaceDetails: FC = observer(() => {
   const [isImageRemoving, setIsImageRemoving] = useState(false);
   const [isImageUploadModalOpen, setIsImageUploadModalOpen] = useState(false);
   // store hooks
-  const {
-    eventTracker: { postHogEventTracker },
-  } = useApplication();
+  const { captureEvent } = useEventTracker();
   const {
     membership: { currentWorkspaceRole },
   } = useUser();
@@ -70,7 +68,7 @@ export const WorkspaceDetails: FC = observer(() => {
 
     await updateWorkspace(currentWorkspace.slug, payload)
       .then((res) => {
-        postHogEventTracker("WORKSPACE_UPDATED", {
+        captureEvent("Workspace updated", {
           ...res,
           state: "SUCCESS",
         });
@@ -81,7 +79,7 @@ export const WorkspaceDetails: FC = observer(() => {
         });
       })
       .catch((err) => {
-        postHogEventTracker("WORKSPACE_UPDATED", {
+        captureEvent("Workspace updated", {
           state: "FAILED",
         });
         console.error(err);
diff --git a/web/components/workspace/sidebar-dropdown.tsx b/web/components/workspace/sidebar-dropdown.tsx
index 0dfcfb803..4528882dd 100644
--- a/web/components/workspace/sidebar-dropdown.tsx
+++ b/web/components/workspace/sidebar-dropdown.tsx
@@ -8,7 +8,7 @@ import { mutate } from "swr";
 import { Check, ChevronDown, CircleUserRound, LogOut, Mails, PlusSquare, Settings, UserCircle2 } from "lucide-react";
 import { usePopper } from "react-popper";
 // hooks
-import { useApplication, useUser, useWorkspace } from "hooks/store";
+import { useApplication, useEventTracker, useUser, useWorkspace } from "hooks/store";
 // hooks
 import useToast from "hooks/use-toast";
 // ui
@@ -55,8 +55,8 @@ export const WorkspaceSidebarDropdown = observer(() => {
   // store hooks
   const {
     theme: { sidebarCollapsed, toggleSidebar },
-    eventTracker: { setTrackElement },
   } = useApplication();
+  const { setTrackElement } = useEventTracker();
   const { currentUser, updateCurrentUser, isUserInstanceAdmin, signOut } = useUser();
   const { currentWorkspace: activeWorkspace, workspaces } = useWorkspace();
   // hooks
@@ -110,13 +110,15 @@ export const WorkspaceSidebarDropdown = observer(() => {
           <>
             <Menu.Button className="group/menu-button h-full w-full truncate rounded-md text-sm font-medium text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80 focus:outline-none">
               <div
-                className={`flex items-center  gap-x-2 truncate rounded p-1 ${sidebarCollapsed ? "justify-center" : "justify-between"
-                  }`}
+                className={`flex items-center  gap-x-2 truncate rounded p-1 ${
+                  sidebarCollapsed ? "justify-center" : "justify-between"
+                }`}
               >
                 <div className="flex items-center gap-2 truncate">
                   <div
-                    className={`relative grid h-6 w-6 flex-shrink-0 place-items-center uppercase ${!activeWorkspace?.logo && "rounded bg-custom-primary-500 text-white"
-                      }`}
+                    className={`relative grid h-6 w-6 flex-shrink-0 place-items-center uppercase ${
+                      !activeWorkspace?.logo && "rounded bg-custom-primary-500 text-white"
+                    }`}
                   >
                     {activeWorkspace?.logo && activeWorkspace.logo !== "" ? (
                       <img
@@ -136,8 +138,9 @@ export const WorkspaceSidebarDropdown = observer(() => {
                 </div>
                 {!sidebarCollapsed && (
                   <ChevronDown
-                    className={`mx-1 hidden h-4 w-4 flex-shrink-0 group-hover/menu-button:block ${open ? "rotate-180" : ""
-                      } text-custom-sidebar-text-400 duration-300`}
+                    className={`mx-1 hidden h-4 w-4 flex-shrink-0 group-hover/menu-button:block ${
+                      open ? "rotate-180" : ""
+                    } text-custom-sidebar-text-400 duration-300`}
                   />
                 )}
               </div>
@@ -176,8 +179,9 @@ export const WorkspaceSidebarDropdown = observer(() => {
                               >
                                 <div className="flex items-center justify-start gap-2.5 truncate">
                                   <span
-                                    className={`relative flex h-6 w-6 flex-shrink-0 items-center  justify-center p-2 text-xs uppercase ${!workspace?.logo && "rounded bg-custom-primary-500 text-white"
-                                      }`}
+                                    className={`relative flex h-6 w-6 flex-shrink-0 items-center  justify-center p-2 text-xs uppercase ${
+                                      !workspace?.logo && "rounded bg-custom-primary-500 text-white"
+                                    }`}
                                   >
                                     {workspace?.logo && workspace.logo !== "" ? (
                                       <img
@@ -190,8 +194,9 @@ export const WorkspaceSidebarDropdown = observer(() => {
                                     )}
                                   </span>
                                   <h5
-                                    className={`truncate text-sm font-medium ${workspaceSlug === workspace.slug ? "" : "text-custom-text-200"
-                                      }`}
+                                    className={`truncate text-sm font-medium ${
+                                      workspaceSlug === workspace.slug ? "" : "text-custom-text-200"
+                                    }`}
                                   >
                                     {workspace.name}
                                   </h5>
@@ -338,4 +343,4 @@ export const WorkspaceSidebarDropdown = observer(() => {
       )}
     </div>
   );
-});
\ No newline at end of file
+});
diff --git a/web/components/workspace/sidebar-quick-action.tsx b/web/components/workspace/sidebar-quick-action.tsx
index 88fee55a6..6b3782a62 100644
--- a/web/components/workspace/sidebar-quick-action.tsx
+++ b/web/components/workspace/sidebar-quick-action.tsx
@@ -2,7 +2,7 @@ import { useRef, useState } from "react";
 import { observer } from "mobx-react-lite";
 import { ChevronUp, PenSquare, Search } from "lucide-react";
 // hooks
-import { useApplication, useUser } from "hooks/store";
+import { useApplication, useEventTracker, useUser } from "hooks/store";
 import useLocalStorage from "hooks/use-local-storage";
 // components
 import { CreateUpdateDraftIssueModal } from "components/issues";
@@ -14,11 +14,8 @@ export const WorkspaceSidebarQuickAction = observer(() => {
   // states
   const [isDraftIssueModalOpen, setIsDraftIssueModalOpen] = useState(false);
 
-  const {
-    theme: themeStore,
-    commandPalette: commandPaletteStore,
-    eventTracker: { setTrackElement },
-  } = useApplication();
+  const { theme: themeStore, commandPalette: commandPaletteStore } = useApplication();
+  const { setTrackElement } = useEventTracker();
   const {
     membership: { currentWorkspaceRole },
   } = useUser();
diff --git a/web/constants/event-tracker.ts b/web/constants/event-tracker.ts
new file mode 100644
index 000000000..67f1b1034
--- /dev/null
+++ b/web/constants/event-tracker.ts
@@ -0,0 +1,105 @@
+export type IssueEventProps = {
+  eventName: string;
+  payload: any;
+  updates?: any;
+  group?: EventGroupProps;
+  path?: string;
+};
+
+export type EventProps = {
+  eventName: string;
+  payload: any;
+  group?: EventGroupProps;
+};
+
+export type EventGroupProps = {
+  isGrouping?: boolean;
+  groupType?: string;
+  groupId?: string;
+};
+
+export const getProjectEventPayload = (payload: any) => ({
+  workspace_id: payload.workspace_id,
+  project_id: payload.id,
+  identifier: payload.identifier,
+  created_at: payload.created_at,
+  updated_at: payload.updated_at,
+  state: payload.state,
+  element: payload.element,
+});
+
+export const getCycleEventPayload = (payload: any) => ({
+  workspace_id: payload.workspace_id,
+  project_id: payload.id,
+  cycle_id: payload.id,
+  created_at: payload.created_at,
+  updated_at: payload.updated_at,
+  start_date: payload.start_date,
+  target_date: payload.target_date,
+  cycle_status: payload.status,
+  state: payload.state,
+  element: payload.element,
+});
+
+export const getModuleEventPayload = (payload: any) => ({
+  workspace_id: payload.workspace_id,
+  project_id: payload.id,
+  module_id: payload.id,
+  created_at: payload.created_at,
+  updated_at: payload.updated_at,
+  start_date: payload.start_date,
+  target_date: payload.target_date,
+  module_status: payload.status,
+  state: payload.state,
+  element: payload.element,
+});
+
+export const getIssueEventPayload = (props: IssueEventProps) => {
+  const { eventName, payload, updates, path } = props;
+  let eventPayload: any = {
+    issue_id: payload.id,
+    estimate_point: payload.estimate_point,
+    link_count: payload.link_count,
+    target_date: payload.target_date,
+    is_draft: payload.is_draft,
+    label_ids: payload.label_ids,
+    assignee_ids: payload.assignee_ids,
+    created_at: payload.created_at,
+    updated_at: payload.updated_at,
+    sequence_id: payload.sequence_id,
+    module_ids: payload.module_ids,
+    sub_issues_count: payload.sub_issues_count,
+    parent_id: payload.parent_id,
+    project_id: payload.project_id,
+    priority: payload.priority,
+    state_id: payload.state_id,
+    start_date: payload.start_date,
+    attachment_count: payload.attachment_count,
+    cycle_id: payload.cycle_id,
+    module_id: payload.module_id,
+    archived_at: payload.archived_at,
+    state: payload.state,
+    view_id: path?.includes("workspace-views") || path?.includes("views") ? path.split("/").pop() : "",
+  };
+
+  if (eventName === "Issue updated") {
+    eventPayload = {
+      ...eventPayload,
+      ...updates,
+      updated_from: props.path?.includes("workspace-views")
+        ? "All views"
+        : props.path?.includes("cycles")
+        ? "Cycle"
+        : props.path?.includes("modules")
+        ? "Module"
+        : props.path?.includes("views")
+        ? "Project view"
+        : props.path?.includes("inbox")
+        ? "Inbox"
+        : props.path?.includes("draft")
+        ? "Draft"
+        : "Project",
+    };
+  }
+  return eventPayload;
+};
diff --git a/web/constants/spreadsheet.ts b/web/constants/spreadsheet.ts
index 6a5e55a62..1668f2a1c 100644
--- a/web/constants/spreadsheet.ts
+++ b/web/constants/spreadsheet.ts
@@ -26,7 +26,11 @@ export const SPREADSHEET_PROPERTY_DETAILS: {
     descendingOrderKey: TIssueOrderByOptions;
     descendingOrderTitle: string;
     icon: FC<ISvgIcons>;
-    Column: React.FC<{ issue: TIssue; onChange: (issue: TIssue, data: Partial<TIssue>) => void; disabled: boolean }>;
+    Column: React.FC<{
+      issue: TIssue;
+      onChange: (issue: TIssue, data: Partial<TIssue>, updates: any) => void;
+      disabled: boolean;
+    }>;
   };
 } = {
   assignee: {
diff --git a/web/hooks/store/index.ts b/web/hooks/store/index.ts
index a0ce6b0e2..2349b1585 100644
--- a/web/hooks/store/index.ts
+++ b/web/hooks/store/index.ts
@@ -1,4 +1,5 @@
 export * from "./use-application";
+export * from "./use-event-tracker"
 export * from "./use-calendar-view";
 export * from "./use-cycle";
 export * from "./use-dashboard";
diff --git a/web/hooks/store/use-event-tracker.ts b/web/hooks/store/use-event-tracker.ts
new file mode 100644
index 000000000..bcff65ae0
--- /dev/null
+++ b/web/hooks/store/use-event-tracker.ts
@@ -0,0 +1,11 @@
+import { useContext } from "react";
+// mobx store
+import { StoreContext } from "contexts/store-context";
+// types
+import { IEventTrackerStore } from "store/event-tracker.store";
+
+export const useEventTracker = (): IEventTrackerStore => {
+  const context = useContext(StoreContext);
+  if (context === undefined) throw new Error("useEventTracker must be used within StoreProvider");
+  return context.eventTracker;
+};
diff --git a/web/layouts/auth-layout/project-wrapper.tsx b/web/layouts/auth-layout/project-wrapper.tsx
index d7d33fd0e..b9fd22f2d 100644
--- a/web/layouts/auth-layout/project-wrapper.tsx
+++ b/web/layouts/auth-layout/project-wrapper.tsx
@@ -5,6 +5,7 @@ import useSWR from "swr";
 // hooks
 import {
   useApplication,
+  useEventTracker,
   useCycle,
   useEstimate,
   useLabel,
@@ -34,6 +35,7 @@ export const ProjectAuthWrapper: FC<IProjectAuthWrapper> = observer((props) => {
   const {
     commandPalette: { toggleCreateProjectModal },
   } = useApplication();
+  const { setTrackElement } = useEventTracker();
   const {
     membership: { fetchUserProjectInfo, projectMemberInfo, hasPermissionToProject },
   } = useUser();
@@ -135,7 +137,10 @@ export const ProjectAuthWrapper: FC<IProjectAuthWrapper> = observer((props) => {
           image={emptyProject}
           primaryButton={{
             text: "Create Project",
-            onClick: () => toggleCreateProjectModal(true),
+            onClick: () => {
+              setTrackElement("Projects page empty state");
+              toggleCreateProjectModal(true);
+            },
           }}
         />
       </div>
diff --git a/web/lib/app-provider.tsx b/web/lib/app-provider.tsx
index dad6253c9..864c87f27 100644
--- a/web/lib/app-provider.tsx
+++ b/web/lib/app-provider.tsx
@@ -17,7 +17,7 @@ import { SWRConfig } from "swr";
 import { SWR_CONFIG } from "constants/swr-config";
 // dynamic imports
 const StoreWrapper = dynamic(() => import("lib/wrappers/store-wrapper"), { ssr: false });
-const PosthogWrapper = dynamic(() => import("lib/wrappers/posthog-wrapper"), { ssr: false });
+const PostHogProvider = dynamic(() => import("lib/posthog-provider"), { ssr: false });
 const CrispWrapper = dynamic(() => import("lib/wrappers/crisp-wrapper"), { ssr: false });
 
 // nprogress
@@ -47,7 +47,7 @@ export const AppProvider: FC<IAppProvider> = observer((props) => {
         <InstanceLayout>
           <StoreWrapper>
             <CrispWrapper user={currentUser}>
-              <PosthogWrapper
+              <PostHogProvider
                 user={currentUser}
                 workspaceRole={currentWorkspaceRole}
                 projectRole={currentProjectRole}
@@ -55,7 +55,7 @@ export const AppProvider: FC<IAppProvider> = observer((props) => {
                 posthogHost={envConfig?.posthog_host || null}
               >
                 <SWRConfig value={SWR_CONFIG}>{children}</SWRConfig>
-              </PosthogWrapper>
+              </PostHogProvider>
             </CrispWrapper>
           </StoreWrapper>
         </InstanceLayout>
diff --git a/web/lib/wrappers/posthog-wrapper.tsx b/web/lib/posthog-provider.tsx
similarity index 82%
rename from web/lib/wrappers/posthog-wrapper.tsx
rename to web/lib/posthog-provider.tsx
index f310f0c39..f42bf5194 100644
--- a/web/lib/wrappers/posthog-wrapper.tsx
+++ b/web/lib/posthog-provider.tsx
@@ -1,7 +1,7 @@
 import { FC, ReactNode, useEffect } from "react";
 import { useRouter } from "next/router";
 import posthog from "posthog-js";
-import { PostHogProvider } from "posthog-js/react";
+import { PostHogProvider as PHProvider } from "posthog-js/react";
 // mobx store provider
 import { IUser } from "@plane/types";
 // helpers
@@ -16,7 +16,7 @@ export interface IPosthogWrapper {
   posthogHost: string | null;
 }
 
-const PosthogWrapper: FC<IPosthogWrapper> = (props) => {
+const PostHogProvider: FC<IPosthogWrapper> = (props) => {
   const { children, user, workspaceRole, projectRole, posthogAPIKey, posthogHost } = props;
   // router
   const router = useRouter();
@@ -39,10 +39,6 @@ const PosthogWrapper: FC<IPosthogWrapper> = (props) => {
     if (posthogAPIKey && posthogHost) {
       posthog.init(posthogAPIKey, {
         api_host: posthogHost || "https://app.posthog.com",
-        // Enable debug mode in development
-        // loaded: (posthog) => {
-        //   if (process.env.NODE_ENV === "development") posthog.debug();
-        // },
         autocapture: false,
         capture_pageview: false, // Disable automatic pageview capture, as we capture manually
       });
@@ -63,9 +59,9 @@ const PosthogWrapper: FC<IPosthogWrapper> = (props) => {
   }, []);
 
   if (posthogAPIKey) {
-    return <PostHogProvider client={posthog}>{children}</PostHogProvider>;
+    return <PHProvider client={posthog}>{children}</PHProvider>;
   }
   return <>{children}</>;
 };
 
-export default PosthogWrapper;
+export default PostHogProvider;
diff --git a/web/lib/redirect.ts b/web/lib/redirect.ts
deleted file mode 100644
index 8c179fc10..000000000
--- a/web/lib/redirect.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import Router from "next/router";
-import type { NextPageContext } from "next";
-
-const redirect = (context: NextPageContext, target: any) => {
-  if (context.res) {
-    // server
-    // 303: "See other"
-    context.res.writeHead(301, { Location: target });
-    context.res.end();
-  } else {
-    // In the browser, we just pretend like this never even happened ;)
-    Router.push(target);
-  }
-};
-
-export default redirect;
diff --git a/web/pages/[workspaceSlug]/analytics.tsx b/web/pages/[workspaceSlug]/analytics.tsx
index 3d6d501f2..71173c2c2 100644
--- a/web/pages/[workspaceSlug]/analytics.tsx
+++ b/web/pages/[workspaceSlug]/analytics.tsx
@@ -3,7 +3,7 @@ import { observer } from "mobx-react-lite";
 import { Tab } from "@headlessui/react";
 import { useTheme } from "next-themes";
 // hooks
-import { useApplication, useProject, useUser } from "hooks/store";
+import { useApplication, useEventTracker, useProject, useUser } from "hooks/store";
 // layouts
 import { AppLayout } from "layouts/app-layout";
 // components
@@ -22,8 +22,8 @@ const AnalyticsPage: NextPageWithLayout = observer(() => {
   // store hooks
   const {
     commandPalette: { toggleCreateProjectModal },
-    eventTracker: { setTrackElement },
   } = useApplication();
+  const { setTrackElement } = useEventTracker();
   const {
     membership: { currentWorkspaceRole },
     currentUser,
@@ -72,7 +72,7 @@ const AnalyticsPage: NextPageWithLayout = observer(() => {
           primaryButton={{
             text: "Create Cycles and Modules first",
             onClick: () => {
-              setTrackElement("ANALYTICS_EMPTY_STATE");
+              setTrackElement("Analytics empty state");
               toggleCreateProjectModal(true);
             },
           }}
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/cycles/index.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/cycles/index.tsx
index d0dbb3514..22ec70b31 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/cycles/index.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/cycles/index.tsx
@@ -4,7 +4,7 @@ import { observer } from "mobx-react-lite";
 import { Tab } from "@headlessui/react";
 import { useTheme } from "next-themes";
 // hooks
-import { useCycle, useUser } from "hooks/store";
+import { useEventTracker, useCycle, useUser } from "hooks/store";
 import useLocalStorage from "hooks/use-local-storage";
 // layouts
 import { AppLayout } from "layouts/app-layout";
@@ -26,6 +26,7 @@ const ProjectCyclesPage: NextPageWithLayout = observer(() => {
   // theme
   const { resolvedTheme } = useTheme();
   // store hooks
+  const { setTrackElement } = useEventTracker();
   const {
     membership: { currentProjectRole },
     currentUser,
@@ -91,6 +92,7 @@ const ProjectCyclesPage: NextPageWithLayout = observer(() => {
             primaryButton={{
               text: "Set your first cycle",
               onClick: () => {
+                setTrackElement("Cycle empty state");
                 setCreateModal(true);
               },
             }}
diff --git a/web/pages/[workspaceSlug]/settings/members.tsx b/web/pages/[workspaceSlug]/settings/members.tsx
index cabc2aa92..1a185e402 100644
--- a/web/pages/[workspaceSlug]/settings/members.tsx
+++ b/web/pages/[workspaceSlug]/settings/members.tsx
@@ -3,7 +3,7 @@ import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
 import { Search } from "lucide-react";
 // hooks
-import { useApplication, useMember, useUser } from "hooks/store";
+import { useEventTracker, useMember, useUser } from "hooks/store";
 import useToast from "hooks/use-toast";
 // layouts
 import { AppLayout } from "layouts/app-layout";
@@ -27,9 +27,7 @@ const WorkspaceMembersSettingsPage: NextPageWithLayout = observer(() => {
   const router = useRouter();
   const { workspaceSlug } = router.query;
   // store hooks
-  const {
-    eventTracker: { postHogEventTracker, setTrackElement },
-  } = useApplication();
+  const { captureEvent, setTrackElement } = useEventTracker();
   const {
     membership: { currentWorkspaceRole },
   } = useUser();
@@ -45,7 +43,7 @@ const WorkspaceMembersSettingsPage: NextPageWithLayout = observer(() => {
     return inviteMembersToWorkspace(workspaceSlug.toString(), data)
       .then(() => {
         setInviteModal(false);
-        postHogEventTracker("MEMBER_INVITED", { state: "SUCCESS" });
+        captureEvent("Member invited", { state: "SUCCESS" });
         setToastAlert({
           type: "success",
           title: "Success!",
@@ -53,7 +51,7 @@ const WorkspaceMembersSettingsPage: NextPageWithLayout = observer(() => {
         });
       })
       .catch((err) => {
-        postHogEventTracker("MEMBER_INVITED", { state: "FAILED" });
+        captureEvent("Member invited", { state: "FAILED" });
         setToastAlert({
           type: "error",
           title: "Error!",
diff --git a/web/pages/invitations/index.tsx b/web/pages/invitations/index.tsx
index 0d2a1860b..1d8c3e774 100644
--- a/web/pages/invitations/index.tsx
+++ b/web/pages/invitations/index.tsx
@@ -10,7 +10,7 @@ import { CheckCircle2 } from "lucide-react";
 import { WorkspaceService } from "services/workspace.service";
 import { UserService } from "services/user.service";
 // hooks
-import { useApplication, useUser } from "hooks/store";
+import { useEventTracker, useUser } from "hooks/store";
 import useToast from "hooks/use-toast";
 // layouts
 import DefaultLayout from "layouts/default-layout";
@@ -40,9 +40,7 @@ const UserInvitationsPage: NextPageWithLayout = observer(() => {
   const [invitationsRespond, setInvitationsRespond] = useState<string[]>([]);
   const [isJoiningWorkspaces, setIsJoiningWorkspaces] = useState(false);
   // store hooks
-  const {
-    eventTracker: { postHogEventTracker },
-  } = useApplication();
+  const { captureEvent } = useEventTracker();
   const { currentUser, currentUserSettings } = useUser();
   // router
   const router = useRouter();
@@ -84,7 +82,7 @@ const UserInvitationsPage: NextPageWithLayout = observer(() => {
         mutate("USER_WORKSPACES");
         const firstInviteId = invitationsRespond[0];
         const redirectWorkspace = invitations?.find((i) => i.id === firstInviteId)?.workspace;
-        postHogEventTracker("MEMBER_ACCEPTED", {
+        captureEvent("Member accepted", {
           ...res,
           state: "SUCCESS",
           accepted_from: "App",
diff --git a/web/pages/onboarding/index.tsx b/web/pages/onboarding/index.tsx
index 53d4a3b3b..5a5911fca 100644
--- a/web/pages/onboarding/index.tsx
+++ b/web/pages/onboarding/index.tsx
@@ -8,7 +8,7 @@ import { ChevronDown } from "lucide-react";
 import { Menu, Transition } from "@headlessui/react";
 import { Controller, useForm } from "react-hook-form";
 // hooks
-import { useApplication, useUser, useWorkspace } from "hooks/store";
+import { useEventTracker, useUser, useWorkspace } from "hooks/store";
 import useUserAuth from "hooks/use-user-auth";
 // services
 import { WorkspaceService } from "services/workspace.service";
@@ -35,9 +35,7 @@ const OnboardingPage: NextPageWithLayout = observer(() => {
   // router
   const router = useRouter();
   // store hooks
-  const {
-    eventTracker: { postHogEventTracker },
-  } = useApplication();
+  const { captureEvent } = useEventTracker();
   const { currentUser, currentUserLoader, updateCurrentUser, updateUserOnBoard } = useUser();
   const { workspaces, fetchWorkspaces } = useWorkspace();
   // custom hooks
@@ -81,7 +79,7 @@ const OnboardingPage: NextPageWithLayout = observer(() => {
 
     await updateUserOnBoard()
       .then(() => {
-        postHogEventTracker("USER_ONBOARDING_COMPLETE", {
+        captureEvent("User onboarding completed", {
           user_role: user.role,
           email: user.email,
           user_id: user.id,
diff --git a/web/store/application/event-tracker.store.ts b/web/store/application/event-tracker.store.ts
deleted file mode 100644
index cc0ac22b2..000000000
--- a/web/store/application/event-tracker.store.ts
+++ /dev/null
@@ -1,79 +0,0 @@
-import { action, makeObservable, observable } from "mobx";
-import posthog from "posthog-js";
-// stores
-import { RootStore } from "../root.store";
-
-export interface IEventTrackerStore {
-  trackElement: string;
-  setTrackElement: (element: string) => void;
-  postHogEventTracker: (
-    eventName: string,
-    payload: object | [] | null,
-    group?: { isGrouping: boolean | null; groupType: string | null; groupId: string | null } | null
-  ) => void;
-}
-
-export class EventTrackerStore implements IEventTrackerStore {
-  trackElement: string = "";
-  rootStore;
-  constructor(_rootStore: RootStore) {
-    makeObservable(this, {
-      trackElement: observable,
-      setTrackElement: action.bound,
-      postHogEventTracker: action,
-    });
-    this.rootStore = _rootStore;
-  }
-
-  setTrackElement = (element: string) => {
-    this.trackElement = element;
-  };
-
-  postHogEventTracker = (
-    eventName: string,
-    payload: object | [] | null,
-    group?: { isGrouping: boolean | null; groupType: string | null; groupId: string | null } | null
-  ) => {
-    try {
-      const currentWorkspaceDetails = this.rootStore.workspaceRoot.workspaces.currentWorkspace;
-      const currentProjectDetails = this.rootStore.projectRoot.project.currentProjectDetails;
-      let extras: any = {
-        workspace_name: currentWorkspaceDetails?.name ?? "",
-        workspace_id: currentWorkspaceDetails?.id ?? "",
-        workspace_slug: currentWorkspaceDetails?.slug ?? "",
-        project_name: currentProjectDetails?.name ?? "",
-        project_id: currentProjectDetails?.id ?? "",
-        project_identifier: currentProjectDetails?.identifier ?? "",
-      };
-      if (["PROJECT_CREATED", "PROJECT_UPDATED"].includes(eventName)) {
-        const project_details: any = payload as object;
-        extras = {
-          ...extras,
-          project_name: project_details?.name ?? "",
-          project_id: project_details?.id ?? "",
-          project_identifier: project_details?.identifier ?? "",
-        };
-      }
-      if (group && group!.isGrouping === true) {
-        posthog?.group(group!.groupType!, group!.groupId!, {
-          date: new Date(),
-          workspace_id: group!.groupId,
-        });
-        posthog?.capture(eventName, {
-          ...payload,
-          extras: extras,
-          element: this.trackElement ?? "",
-        });
-      } else {
-        posthog?.capture(eventName, {
-          ...payload,
-          extras: extras,
-          element: this.trackElement ?? "",
-        });
-      }
-    } catch (error) {
-      throw error;
-    }
-    this.setTrackElement("");
-  };
-}
diff --git a/web/store/application/index.ts b/web/store/application/index.ts
index 672cf4fbe..30333535a 100644
--- a/web/store/application/index.ts
+++ b/web/store/application/index.ts
@@ -1,7 +1,7 @@
 import { RootStore } from "store/root.store";
 import { AppConfigStore, IAppConfigStore } from "./app-config.store";
 import { CommandPaletteStore, ICommandPaletteStore } from "./command-palette.store";
-import { EventTrackerStore, IEventTrackerStore } from "./event-tracker.store";
+import { EventTrackerStore, IEventTrackerStore } from "../event-tracker.store";
 // import { EventTrackerStore, IEventTrackerStore } from "./event-tracker.store";
 import { InstanceStore, IInstanceStore } from "./instance.store";
 import { RouterStore, IRouterStore } from "./router.store";
@@ -10,7 +10,6 @@ import { ThemeStore, IThemeStore } from "./theme.store";
 export interface IAppRootStore {
   config: IAppConfigStore;
   commandPalette: ICommandPaletteStore;
-  eventTracker: IEventTrackerStore;
   instance: IInstanceStore;
   theme: IThemeStore;
   router: IRouterStore;
@@ -19,7 +18,6 @@ export interface IAppRootStore {
 export class AppRootStore implements IAppRootStore {
   config: IAppConfigStore;
   commandPalette: ICommandPaletteStore;
-  eventTracker: IEventTrackerStore;
   instance: IInstanceStore;
   theme: IThemeStore;
   router: IRouterStore;
@@ -28,7 +26,6 @@ export class AppRootStore implements IAppRootStore {
     this.router = new RouterStore();
     this.config = new AppConfigStore();
     this.commandPalette = new CommandPaletteStore();
-    this.eventTracker = new EventTrackerStore(_rootStore);
     this.instance = new InstanceStore();
     this.theme = new ThemeStore();
   }
diff --git a/web/store/event-tracker.store.ts b/web/store/event-tracker.store.ts
new file mode 100644
index 000000000..89e279c40
--- /dev/null
+++ b/web/store/event-tracker.store.ts
@@ -0,0 +1,155 @@
+import { action, computed, makeObservable, observable } from "mobx";
+import posthog from "posthog-js";
+// stores
+import { RootStore } from "./root.store";
+import {
+  EventGroupProps,
+  EventProps,
+  IssueEventProps,
+  getCycleEventPayload,
+  getIssueEventPayload,
+  getModuleEventPayload,
+  getProjectEventPayload,
+} from "constants/event-tracker";
+
+export interface IEventTrackerStore {
+  // properties
+  trackElement: string;
+  // computed
+  getRequiredPayload: any;
+  // actions
+  setTrackElement: (element: string) => void;
+  captureEvent: (eventName: string, payload: object | [] | null, group?: EventGroupProps) => void;
+  captureProjectEvent: (props: EventProps) => void;
+  captureCycleEvent: (props: EventProps) => void;
+  captureModuleEvent: (props: EventProps) => void;
+  captureIssueEvent: (props: IssueEventProps) => void;
+}
+
+export class EventTrackerStore implements IEventTrackerStore {
+  trackElement: string = "";
+  rootStore;
+  constructor(_rootStore: RootStore) {
+    makeObservable(this, {
+      // properties
+      trackElement: observable,
+      // computed
+      getRequiredPayload: computed,
+      // actions
+      setTrackElement: action,
+      captureEvent: action,
+      captureProjectEvent: action,
+      captureCycleEvent: action,
+    });
+    // store
+    this.rootStore = _rootStore;
+  }
+
+  /**
+   * @description: Returns the necessary property for the event tracking
+   */
+  get getRequiredPayload() {
+    const currentWorkspaceDetails = this.rootStore.workspaceRoot.currentWorkspace;
+    const currentProjectDetails = this.rootStore.projectRoot.project.currentProjectDetails;
+    return {
+      workspace_id: currentWorkspaceDetails?.id ?? "",
+      project_id: currentProjectDetails?.id ?? "",
+    };
+  }
+
+  /**
+   * @description: Set the trigger point of event.
+   * @param {string} element
+   */
+  setTrackElement = (element: string) => {
+    this.trackElement = element;
+  };
+
+  postHogGroup = (group: EventGroupProps) => {
+    if (group && group!.isGrouping === true) {
+      posthog?.group(group!.groupType!, group!.groupId!, {
+        date: new Date(),
+        workspace_id: group!.groupId,
+      });
+    }
+  };
+
+  captureEvent = (eventName: string, payload: object | [] | null) => {
+    posthog?.capture(eventName, {
+      ...payload,
+      element: this.trackElement ?? "",
+    });
+  };
+
+  /**
+   * @description: Captures the project related events.
+   * @param {EventProps} props
+   */
+  captureProjectEvent = (props: EventProps) => {
+    const { eventName, payload, group } = props;
+    if (group) {
+      this.postHogGroup(group);
+    }
+    const eventPayload: any = getProjectEventPayload({
+      ...this.getRequiredPayload,
+      ...payload,
+      element: payload.element ?? this.trackElement,
+    });
+    posthog?.capture(eventName, eventPayload);
+    this.setTrackElement("");
+  };
+
+  /**
+   * @description: Captures the cycle related events.
+   * @param {EventProps} props
+   */
+  captureCycleEvent = (props: EventProps) => {
+    const { eventName, payload, group } = props;
+    if (group) {
+      this.postHogGroup(group);
+    }
+    const eventPayload: any = getCycleEventPayload({
+      ...this.getRequiredPayload,
+      ...payload,
+      element: payload.element ?? this.trackElement,
+    });
+    posthog?.capture(eventName, eventPayload);
+    this.setTrackElement("");
+  };
+
+  /**
+   * @description: Captures the module related events.
+   * @param {EventProps} props
+   */
+  captureModuleEvent = (props: EventProps) => {
+    const { eventName, payload, group } = props;
+    if (group) {
+      this.postHogGroup(group);
+    }
+    const eventPayload: any = getModuleEventPayload({
+      ...this.getRequiredPayload,
+      ...payload,
+      element: payload.element ?? this.trackElement,
+    });
+    posthog?.capture(eventName, eventPayload);
+    this.setTrackElement("");
+  };
+
+  /**
+   * @description: Captures the issue related events.
+   * @param {IssueEventProps} props
+   */
+  captureIssueEvent = (props: IssueEventProps) => {
+    const { eventName, payload, group } = props;
+    if (group) {
+      this.postHogGroup(group);
+    }
+    const eventPayload: any = {
+      ...getIssueEventPayload(props),
+      ...this.getRequiredPayload,
+      state_group: this.rootStore.state.getStateById(payload.state_id)?.group ?? "",
+      element: payload.element ?? this.trackElement,
+    };
+    posthog?.capture(eventName, eventPayload);
+  };
+}
diff --git a/web/store/root.store.ts b/web/store/root.store.ts
index b3aeeea04..3e0733249 100644
--- a/web/store/root.store.ts
+++ b/web/store/root.store.ts
@@ -1,6 +1,7 @@
 import { enableStaticRendering } from "mobx-react-lite";
 // root stores
 import { AppRootStore, IAppRootStore } from "./application";
+import { EventTrackerStore, IEventTrackerStore } from "./event-tracker.store";
 import { IProjectRootStore, ProjectRootStore } from "./project";
 import { CycleStore, ICycleStore } from "./cycle.store";
 import { IProjectViewStore, ProjectViewStore } from "./project-view.store";
@@ -22,6 +23,7 @@ enableStaticRendering(typeof window === "undefined");
 
 export class RootStore {
   app: IAppRootStore;
+  eventTracker: IEventTrackerStore;
   user: IUserRootStore;
   workspaceRoot: IWorkspaceRootStore;
   projectRoot: IProjectRootStore;
@@ -41,6 +43,7 @@ export class RootStore {
 
   constructor() {
     this.app = new AppRootStore(this);
+    this.eventTracker = new EventTrackerStore(this);
     this.user = new UserRootStore(this);
     this.workspaceRoot = new WorkspaceRootStore(this);
     this.projectRoot = new ProjectRootStore(this);

From ee0e3e2e252b6ee91e364c0e4840f074cd8bd2b0 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Mon, 5 Feb 2024 14:47:40 +0530
Subject: [PATCH 09/58] chore: active cycle issue transfer validation (#3560)

* fix: completed cycle list layout validation

* fix: completed cycle kanban layout validation

* fix: completed cycle spreadsheet layout validation

* fix: date dropdown disabled fix

* chore: quick action validation added for list, kanban and spreadsheet layout

* fix: calendar layout validation added
---
 web/components/dropdowns/date.tsx             |   1 +
 .../calendar/base-calendar-root.tsx           |  13 +-
 .../issue-layouts/calendar/calendar.tsx       |  16 ++-
 .../issue-layouts/calendar/day-tile.tsx       |   7 +-
 .../issue-layouts/calendar/issue-blocks.tsx   |   5 +-
 .../calendar/roots/cycle-root.tsx             |   7 +-
 .../issue-layouts/calendar/week-days.tsx      |   3 +
 .../issue-layouts/kanban/base-kanban-root.tsx |   5 +-
 .../issue-layouts/kanban/roots/cycle-root.tsx |  10 +-
 .../issue-layouts/list/base-list-root.tsx     |   4 +
 .../issues/issue-layouts/list/default.tsx     |   9 +-
 .../issue-layouts/list/list-view-types.d.ts   |   1 +
 .../issue-layouts/list/roots/cycle-root.tsx   |   9 +-
 .../quick-action-dropdowns/all-issue.tsx      |  68 ++++++-----
 .../quick-action-dropdowns/archived-issue.tsx |  35 ++++--
 .../quick-action-dropdowns/cycle-issue.tsx    | 112 +++++++++++-------
 .../quick-action-dropdowns/module-issue.tsx   | 110 ++++++++++-------
 .../quick-action-dropdowns/project-issue.tsx  |   4 +-
 .../spreadsheet/base-spreadsheet-root.tsx     |  14 ++-
 .../spreadsheet/roots/cycle-root.tsx          |  10 +-
 20 files changed, 288 insertions(+), 155 deletions(-)

diff --git a/web/components/dropdowns/date.tsx b/web/components/dropdowns/date.tsx
index 1dba6f780..3cd9ca16a 100644
--- a/web/components/dropdowns/date.tsx
+++ b/web/components/dropdowns/date.tsx
@@ -105,6 +105,7 @@ export const DateDropdown: React.FC<Props> = (props) => {
       tabIndex={tabIndex}
       className={cn("h-full", className)}
       onKeyDown={handleKeyDown}
+      disabled={disabled}
     >
       <Combobox.Button as={React.Fragment}>
         <button
diff --git a/web/components/issues/issue-layouts/calendar/base-calendar-root.tsx b/web/components/issues/issue-layouts/calendar/base-calendar-root.tsx
index 7cb53ad39..472d68085 100644
--- a/web/components/issues/issue-layouts/calendar/base-calendar-root.tsx
+++ b/web/components/issues/issue-layouts/calendar/base-calendar-root.tsx
@@ -11,11 +11,12 @@ import { TGroupedIssues, TIssue } from "@plane/types";
 import { IQuickActionProps } from "../list/list-view-types";
 import { EIssueActions } from "../types";
 import { handleDragDrop } from "./utils";
-import { useIssues } from "hooks/store";
+import { useIssues, useUser } from "hooks/store";
 import { ICycleIssues, ICycleIssuesFilter } from "store/issue/cycle";
 import { IModuleIssues, IModuleIssuesFilter } from "store/issue/module";
 import { IProjectIssues, IProjectIssuesFilter } from "store/issue/project";
 import { IProjectViewIssues, IProjectViewIssuesFilter } from "store/issue/project-views";
+import { EUserProjectRoles } from "constants/project";
 
 interface IBaseCalendarRoot {
   issueStore: IProjectIssues | IModuleIssues | ICycleIssues | IProjectViewIssues;
@@ -27,10 +28,11 @@ interface IBaseCalendarRoot {
     [EIssueActions.REMOVE]?: (issue: TIssue) => Promise<void>;
   };
   viewId?: string;
+  isCompletedCycle?: boolean;
 }
 
 export const BaseCalendarRoot = observer((props: IBaseCalendarRoot) => {
-  const { issueStore, issuesFilterStore, QuickActions, issueActions, viewId } = props;
+  const { issueStore, issuesFilterStore, QuickActions, issueActions, viewId, isCompletedCycle = false } = props;
 
   // router
   const router = useRouter();
@@ -39,6 +41,11 @@ export const BaseCalendarRoot = observer((props: IBaseCalendarRoot) => {
   // hooks
   const { setToastAlert } = useToast();
   const { issueMap } = useIssues();
+  const {
+    membership: { currentProjectRole },
+  } = useUser();
+
+  const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER;
 
   const displayFilters = issuesFilterStore.issueFilters?.displayFilters;
 
@@ -107,10 +114,12 @@ export const BaseCalendarRoot = observer((props: IBaseCalendarRoot) => {
                     ? async () => handleIssues(issue.target_date ?? "", issue, EIssueActions.REMOVE)
                     : undefined
                 }
+                readOnly={!isEditingAllowed || isCompletedCycle}
               />
             )}
             quickAddCallback={issueStore.quickAddIssue}
             viewId={viewId}
+            readOnly={!isEditingAllowed || isCompletedCycle}
           />
         </DragDropContext>
       </div>
diff --git a/web/components/issues/issue-layouts/calendar/calendar.tsx b/web/components/issues/issue-layouts/calendar/calendar.tsx
index 1652aa89b..c48f23068 100644
--- a/web/components/issues/issue-layouts/calendar/calendar.tsx
+++ b/web/components/issues/issue-layouts/calendar/calendar.tsx
@@ -31,11 +31,21 @@ type Props = {
     viewId?: string
   ) => Promise<TIssue | undefined>;
   viewId?: string;
+  readOnly?: boolean;
 };
 
 export const CalendarChart: React.FC<Props> = observer((props) => {
-  const { issuesFilterStore, issues, groupedIssueIds, layout, showWeekends, quickActions, quickAddCallback, viewId } =
-    props;
+  const {
+    issuesFilterStore,
+    issues,
+    groupedIssueIds,
+    layout,
+    showWeekends,
+    quickActions,
+    quickAddCallback,
+    viewId,
+    readOnly = false,
+  } = props;
   // store hooks
   const {
     issues: { viewFlags },
@@ -80,6 +90,7 @@ export const CalendarChart: React.FC<Props> = observer((props) => {
                     quickActions={quickActions}
                     quickAddCallback={quickAddCallback}
                     viewId={viewId}
+                    readOnly={readOnly}
                   />
                 ))}
             </div>
@@ -95,6 +106,7 @@ export const CalendarChart: React.FC<Props> = observer((props) => {
               quickActions={quickActions}
               quickAddCallback={quickAddCallback}
               viewId={viewId}
+              readOnly={readOnly}
             />
           )}
         </div>
diff --git a/web/components/issues/issue-layouts/calendar/day-tile.tsx b/web/components/issues/issue-layouts/calendar/day-tile.tsx
index 5b4885bf3..f98dba93a 100644
--- a/web/components/issues/issue-layouts/calendar/day-tile.tsx
+++ b/web/components/issues/issue-layouts/calendar/day-tile.tsx
@@ -28,6 +28,7 @@ type Props = {
     viewId?: string
   ) => Promise<TIssue | undefined>;
   viewId?: string;
+  readOnly?: boolean;
 };
 
 export const CalendarDayTile: React.FC<Props> = observer((props) => {
@@ -41,6 +42,7 @@ export const CalendarDayTile: React.FC<Props> = observer((props) => {
     disableIssueCreation,
     quickAddCallback,
     viewId,
+    readOnly = false,
   } = props;
   const [showAllIssues, setShowAllIssues] = useState(false);
   const calendarLayout = issuesFilterStore?.issueFilters?.displayFilters?.calendar?.layout ?? "month";
@@ -73,7 +75,7 @@ export const CalendarDayTile: React.FC<Props> = observer((props) => {
 
         {/* content */}
         <div className="h-full w-full">
-          <Droppable droppableId={formattedDatePayload} isDropDisabled={false}>
+          <Droppable droppableId={formattedDatePayload} isDropDisabled={readOnly}>
             {(provided, snapshot) => (
               <div
                 className={`h-full w-full select-none overflow-y-auto ${
@@ -89,9 +91,10 @@ export const CalendarDayTile: React.FC<Props> = observer((props) => {
                   issueIdList={issueIdList}
                   quickActions={quickActions}
                   showAllIssues={showAllIssues}
+                  isDragDisabled={readOnly}
                 />
 
-                {enableQuickIssueCreate && !disableIssueCreation && (
+                {enableQuickIssueCreate && !disableIssueCreation && !readOnly && (
                   <div className="px-2 py-1">
                     <CalendarQuickAddIssueForm
                       formKey="target_date"
diff --git a/web/components/issues/issue-layouts/calendar/issue-blocks.tsx b/web/components/issues/issue-layouts/calendar/issue-blocks.tsx
index f66bf2ec0..49ca84eb6 100644
--- a/web/components/issues/issue-layouts/calendar/issue-blocks.tsx
+++ b/web/components/issues/issue-layouts/calendar/issue-blocks.tsx
@@ -17,10 +17,11 @@ type Props = {
   issueIdList: string[] | null;
   quickActions: (issue: TIssue, customActionButton?: React.ReactElement) => React.ReactNode;
   showAllIssues?: boolean;
+  isDragDisabled?: boolean;
 };
 
 export const CalendarIssueBlocks: React.FC<Props> = observer((props) => {
-  const { issues, issueIdList, quickActions, showAllIssues = false } = props;
+  const { issues, issueIdList, quickActions, showAllIssues = false, isDragDisabled = false } = props;
   // hooks
   const {
     router: { workspaceSlug, projectId },
@@ -65,7 +66,7 @@ export const CalendarIssueBlocks: React.FC<Props> = observer((props) => {
           getProjectStates(issue?.project_id)?.find((state) => state?.id == issue?.state_id)?.color || "";
 
         return (
-          <Draggable key={issue.id} draggableId={issue.id} index={index}>
+          <Draggable key={issue.id} draggableId={issue.id} index={index} isDragDisabled={isDragDisabled}>
             {(provided, snapshot) => (
               <div
                 className="relative cursor-pointer p-1 px-2"
diff --git a/web/components/issues/issue-layouts/calendar/roots/cycle-root.tsx b/web/components/issues/issue-layouts/calendar/roots/cycle-root.tsx
index 585b1a5e1..1ef08ea61 100644
--- a/web/components/issues/issue-layouts/calendar/roots/cycle-root.tsx
+++ b/web/components/issues/issue-layouts/calendar/roots/cycle-root.tsx
@@ -1,7 +1,7 @@
 import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
 //hooks
-import { useIssues } from "hooks/store";
+import { useCycle, useIssues } from "hooks/store";
 // components
 import { CycleIssueQuickActions } from "components/issues";
 // types
@@ -13,6 +13,7 @@ import { useMemo } from "react";
 
 export const CycleCalendarLayout: React.FC = observer(() => {
   const { issues, issuesFilter } = useIssues(EIssuesStoreType.CYCLE);
+  const { currentProjectCompletedCycleIds } = useCycle();
 
   const router = useRouter();
   const { workspaceSlug, projectId, cycleId } = router.query;
@@ -38,6 +39,9 @@ export const CycleCalendarLayout: React.FC = observer(() => {
 
   if (!cycleId) return null;
 
+  const isCompletedCycle =
+    cycleId && currentProjectCompletedCycleIds ? currentProjectCompletedCycleIds.includes(cycleId.toString()) : false;
+
   return (
     <BaseCalendarRoot
       issueStore={issues}
@@ -45,6 +49,7 @@ export const CycleCalendarLayout: React.FC = observer(() => {
       QuickActions={CycleIssueQuickActions}
       issueActions={issueActions}
       viewId={cycleId.toString()}
+      isCompletedCycle={isCompletedCycle}
     />
   );
 });
diff --git a/web/components/issues/issue-layouts/calendar/week-days.tsx b/web/components/issues/issue-layouts/calendar/week-days.tsx
index c34aaef97..5a640a566 100644
--- a/web/components/issues/issue-layouts/calendar/week-days.tsx
+++ b/web/components/issues/issue-layouts/calendar/week-days.tsx
@@ -26,6 +26,7 @@ type Props = {
     viewId?: string
   ) => Promise<TIssue | undefined>;
   viewId?: string;
+  readOnly?: boolean;
 };
 
 export const CalendarWeekDays: React.FC<Props> = observer((props) => {
@@ -39,6 +40,7 @@ export const CalendarWeekDays: React.FC<Props> = observer((props) => {
     disableIssueCreation,
     quickAddCallback,
     viewId,
+    readOnly = false,
   } = props;
 
   const calendarLayout = issuesFilterStore?.issueFilters?.displayFilters?.calendar?.layout ?? "month";
@@ -67,6 +69,7 @@ export const CalendarWeekDays: React.FC<Props> = observer((props) => {
             disableIssueCreation={disableIssueCreation}
             quickAddCallback={quickAddCallback}
             viewId={viewId}
+            readOnly={readOnly}
           />
         );
       })}
diff --git a/web/components/issues/issue-layouts/kanban/base-kanban-root.tsx b/web/components/issues/issue-layouts/kanban/base-kanban-root.tsx
index 7ed3202aa..64b132267 100644
--- a/web/components/issues/issue-layouts/kanban/base-kanban-root.tsx
+++ b/web/components/issues/issue-layouts/kanban/base-kanban-root.tsx
@@ -46,6 +46,7 @@ export interface IBaseKanBanLayout {
   storeType?: TCreateModalStoreTypes;
   addIssuesToView?: (issueIds: string[]) => Promise<any>;
   canEditPropertiesBasedOnProject?: (projectId: string) => boolean;
+  isCompletedCycle?: boolean;
 }
 
 type KanbanDragState = {
@@ -65,6 +66,7 @@ export const BaseKanBanRoot: React.FC<IBaseKanBanLayout> = observer((props: IBas
     storeType,
     addIssuesToView,
     canEditPropertiesBasedOnProject,
+    isCompletedCycle = false,
   } = props;
   // router
   const router = useRouter();
@@ -183,6 +185,7 @@ export const BaseKanBanRoot: React.FC<IBaseKanBanLayout> = observer((props: IBas
         handleRemoveFromView={
           issueActions[EIssueActions.REMOVE] ? async () => handleIssues(issue, EIssueActions.REMOVE) : undefined
         }
+        readOnly={!isEditingAllowed || isCompletedCycle}
       />
     ),
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -282,7 +285,7 @@ export const BaseKanBanRoot: React.FC<IBaseKanBanLayout> = observer((props: IBas
               showEmptyGroup={userDisplayFilters?.show_empty_groups || true}
               quickAddCallback={issues?.quickAddIssue}
               viewId={viewId}
-              disableIssueCreation={!enableIssueCreation || !isEditingAllowed}
+              disableIssueCreation={!enableIssueCreation || !isEditingAllowed || isCompletedCycle}
               canEditProperties={canEditProperties}
               storeType={storeType}
               addIssuesToView={addIssuesToView}
diff --git a/web/components/issues/issue-layouts/kanban/roots/cycle-root.tsx b/web/components/issues/issue-layouts/kanban/roots/cycle-root.tsx
index 0903355ce..2b311f6eb 100644
--- a/web/components/issues/issue-layouts/kanban/roots/cycle-root.tsx
+++ b/web/components/issues/issue-layouts/kanban/roots/cycle-root.tsx
@@ -2,7 +2,7 @@ import React, { useMemo } from "react";
 import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
 // hooks
-import { useIssues } from "hooks/store";
+import { useCycle, useIssues } from "hooks/store";
 // ui
 import { CycleIssueQuickActions } from "components/issues";
 // types
@@ -20,6 +20,7 @@ export const CycleKanBanLayout: React.FC = observer(() => {
 
   // store
   const { issues, issuesFilter } = useIssues(EIssuesStoreType.CYCLE);
+  const { currentProjectCompletedCycleIds } = useCycle();
 
   const issueActions = useMemo(
     () => ({
@@ -42,6 +43,11 @@ export const CycleKanBanLayout: React.FC = observer(() => {
     [issues, workspaceSlug, cycleId]
   );
 
+  const isCompletedCycle =
+    cycleId && currentProjectCompletedCycleIds ? currentProjectCompletedCycleIds.includes(cycleId.toString()) : false;
+
+  const canEditIssueProperties = () => !isCompletedCycle;
+
   return (
     <BaseKanBanRoot
       issueActions={issueActions}
@@ -55,6 +61,8 @@ export const CycleKanBanLayout: React.FC = observer(() => {
         if (!workspaceSlug || !projectId || !cycleId) throw new Error();
         return issues.addIssueToCycle(workspaceSlug.toString(), projectId.toString(), cycleId.toString(), issueIds);
       }}
+      canEditPropertiesBasedOnProject={canEditIssueProperties}
+      isCompletedCycle={isCompletedCycle}
     />
   );
 });
diff --git a/web/components/issues/issue-layouts/list/base-list-root.tsx b/web/components/issues/issue-layouts/list/base-list-root.tsx
index 10f3582f1..8f661a9e6 100644
--- a/web/components/issues/issue-layouts/list/base-list-root.tsx
+++ b/web/components/issues/issue-layouts/list/base-list-root.tsx
@@ -51,6 +51,7 @@ interface IBaseListRoot {
   storeType: TCreateModalStoreTypes;
   addIssuesToView?: (issueIds: string[]) => Promise<any>;
   canEditPropertiesBasedOnProject?: (projectId: string) => boolean;
+  isCompletedCycle?: boolean;
 }
 
 export const BaseListRoot = observer((props: IBaseListRoot) => {
@@ -63,6 +64,7 @@ export const BaseListRoot = observer((props: IBaseListRoot) => {
     storeType,
     addIssuesToView,
     canEditPropertiesBasedOnProject,
+    isCompletedCycle = false,
   } = props;
   // mobx store
   const {
@@ -112,6 +114,7 @@ export const BaseListRoot = observer((props: IBaseListRoot) => {
         handleRemoveFromView={
           issueActions[EIssueActions.REMOVE] ? async () => handleIssues(issue, EIssueActions.REMOVE) : undefined
         }
+        readOnly={!isEditingAllowed || isCompletedCycle}
       />
     ),
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -136,6 +139,7 @@ export const BaseListRoot = observer((props: IBaseListRoot) => {
           disableIssueCreation={!enableIssueCreation || !isEditingAllowed}
           storeType={storeType}
           addIssuesToView={addIssuesToView}
+          isCompletedCycle={isCompletedCycle}
         />
       </div>
     </>
diff --git a/web/components/issues/issue-layouts/list/default.tsx b/web/components/issues/issue-layouts/list/default.tsx
index 95e31b758..dd6c8da22 100644
--- a/web/components/issues/issue-layouts/list/default.tsx
+++ b/web/components/issues/issue-layouts/list/default.tsx
@@ -37,6 +37,7 @@ export interface IGroupByList {
   storeType: TCreateModalStoreTypes;
   addIssuesToView?: (issueIds: string[]) => Promise<TIssue>;
   viewId?: string;
+  isCompletedCycle?: boolean;
 }
 
 const GroupByList: React.FC<IGroupByList> = (props) => {
@@ -55,6 +56,7 @@ const GroupByList: React.FC<IGroupByList> = (props) => {
     disableIssueCreation,
     storeType,
     addIssuesToView,
+    isCompletedCycle = false,
   } = props;
   // store hooks
   const member = useMember();
@@ -115,7 +117,7 @@ const GroupByList: React.FC<IGroupByList> = (props) => {
                     title={_list.name || ""}
                     count={is_list ? issueIds?.length || 0 : issueIds?.[_list.id]?.length || 0}
                     issuePayload={_list.payload}
-                    disableIssueCreation={disableIssueCreation || isGroupByCreatedBy}
+                    disableIssueCreation={disableIssueCreation || isGroupByCreatedBy || isCompletedCycle}
                     storeType={storeType}
                     addIssuesToView={addIssuesToView}
                   />
@@ -132,7 +134,7 @@ const GroupByList: React.FC<IGroupByList> = (props) => {
                   />
                 )}
 
-                {enableIssueQuickAdd && !disableIssueCreation && !isGroupByCreatedBy && (
+                {enableIssueQuickAdd && !disableIssueCreation && !isGroupByCreatedBy && !isCompletedCycle && (
                   <div className="sticky bottom-0 z-[1] w-full flex-shrink-0">
                     <ListQuickAddIssueForm
                       prePopulatedData={prePopulateQuickAddData(group_by, _list.id)}
@@ -168,6 +170,7 @@ export interface IList {
   disableIssueCreation?: boolean;
   storeType: TCreateModalStoreTypes;
   addIssuesToView?: (issueIds: string[]) => Promise<TIssue>;
+  isCompletedCycle?: boolean;
 }
 
 export const List: React.FC<IList> = (props) => {
@@ -186,6 +189,7 @@ export const List: React.FC<IList> = (props) => {
     disableIssueCreation,
     storeType,
     addIssuesToView,
+    isCompletedCycle = false,
   } = props;
 
   return (
@@ -205,6 +209,7 @@ export const List: React.FC<IList> = (props) => {
         disableIssueCreation={disableIssueCreation}
         storeType={storeType}
         addIssuesToView={addIssuesToView}
+        isCompletedCycle={isCompletedCycle}
       />
     </div>
   );
diff --git a/web/components/issues/issue-layouts/list/list-view-types.d.ts b/web/components/issues/issue-layouts/list/list-view-types.d.ts
index 9e3bb8701..1838316cb 100644
--- a/web/components/issues/issue-layouts/list/list-view-types.d.ts
+++ b/web/components/issues/issue-layouts/list/list-view-types.d.ts
@@ -5,4 +5,5 @@ export interface IQuickActionProps {
   handleRemoveFromView?: () => Promise<void>;
   customActionButton?: React.ReactElement;
   portalElement?: HTMLDivElement | null;
+  readOnly?: boolean;
 }
diff --git a/web/components/issues/issue-layouts/list/roots/cycle-root.tsx b/web/components/issues/issue-layouts/list/roots/cycle-root.tsx
index 89da8dd54..e30c207b6 100644
--- a/web/components/issues/issue-layouts/list/roots/cycle-root.tsx
+++ b/web/components/issues/issue-layouts/list/roots/cycle-root.tsx
@@ -2,7 +2,7 @@ import React, { useMemo } from "react";
 import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
 // hooks
-import { useIssues } from "hooks/store";
+import { useCycle, useIssues } from "hooks/store";
 // components
 import { CycleIssueQuickActions } from "components/issues";
 // types
@@ -19,6 +19,7 @@ export const CycleListLayout: React.FC = observer(() => {
   const { workspaceSlug, projectId, cycleId } = router.query;
   // store
   const { issues, issuesFilter } = useIssues(EIssuesStoreType.CYCLE);
+  const { currentProjectCompletedCycleIds } = useCycle();
 
   const issueActions = useMemo(
     () => ({
@@ -40,6 +41,10 @@ export const CycleListLayout: React.FC = observer(() => {
     }),
     [issues, workspaceSlug, cycleId]
   );
+  const isCompletedCycle =
+    cycleId && currentProjectCompletedCycleIds ? currentProjectCompletedCycleIds.includes(cycleId.toString()) : false;
+
+  const canEditIssueProperties = () => !isCompletedCycle;
 
   return (
     <BaseListRoot
@@ -53,6 +58,8 @@ export const CycleListLayout: React.FC = observer(() => {
         if (!workspaceSlug || !projectId || !cycleId) throw new Error();
         return issues.addIssueToCycle(workspaceSlug.toString(), projectId.toString(), cycleId.toString(), issueIds);
       }}
+      canEditPropertiesBasedOnProject={canEditIssueProperties}
+      isCompletedCycle={isCompletedCycle}
     />
   );
 });
diff --git a/web/components/issues/issue-layouts/quick-action-dropdowns/all-issue.tsx b/web/components/issues/issue-layouts/quick-action-dropdowns/all-issue.tsx
index 764f5605a..f97f1ea86 100644
--- a/web/components/issues/issue-layouts/quick-action-dropdowns/all-issue.tsx
+++ b/web/components/issues/issue-layouts/quick-action-dropdowns/all-issue.tsx
@@ -16,7 +16,7 @@ import { IQuickActionProps } from "../list/list-view-types";
 import { EIssuesStoreType } from "constants/issue";
 
 export const AllIssueQuickActions: React.FC<IQuickActionProps> = (props) => {
-  const { issue, handleDelete, handleUpdate, customActionButton, portalElement } = props;
+  const { issue, handleDelete, handleUpdate, customActionButton, portalElement, readOnly = false } = props;
   // states
   const [createUpdateIssueModal, setCreateUpdateIssueModal] = useState(false);
   const [issueToEdit, setIssueToEdit] = useState<TIssue | undefined>(undefined);
@@ -82,40 +82,44 @@ export const AllIssueQuickActions: React.FC<IQuickActionProps> = (props) => {
             Copy link
           </div>
         </CustomMenu.MenuItem>
-        <CustomMenu.MenuItem
-          onClick={() => {
-            setTrackElement("Global issues");
+        {!readOnly && (
+          <>
+            <CustomMenu.MenuItem
+              onClick={() => {
+                setTrackElement("Global issues");
             setIssueToEdit(issue);
+                setCreateUpdateIssueModal(true);
+              }}
+            >
+              <div className="flex items-center gap-2">
+                <Pencil className="h-3 w-3" />
+                Edit issue
+              </div>
+            </CustomMenu.MenuItem>
+            <CustomMenu.MenuItem
+              onClick={() => {
+                setTrackElement("Global issues");
             setCreateUpdateIssueModal(true);
-          }}
-        >
-          <div className="flex items-center gap-2">
-            <Pencil className="h-3 w-3" />
-            Edit issue
-          </div>
-        </CustomMenu.MenuItem>
-        <CustomMenu.MenuItem
-          onClick={() => {
-            setTrackElement("Global issues");
-            setCreateUpdateIssueModal(true);
-          }}
-        >
-          <div className="flex items-center gap-2">
-            <Copy className="h-3 w-3" />
-            Make a copy
-          </div>
-        </CustomMenu.MenuItem>
-        <CustomMenu.MenuItem
-          onClick={() => {
-            setTrackElement("Global issues");
+              }}
+            >
+              <div className="flex items-center gap-2">
+                <Copy className="h-3 w-3" />
+                Make a copy
+              </div>
+            </CustomMenu.MenuItem>
+            <CustomMenu.MenuItem
+              onClick={() => {
+                setTrackElement("Global issues");
             setDeleteIssueModal(true);
-          }}
-        >
-          <div className="flex items-center gap-2">
-            <Trash2 className="h-3 w-3" />
-            Delete issue
-          </div>
-        </CustomMenu.MenuItem>
+              }}
+            >
+              <div className="flex items-center gap-2">
+                <Trash2 className="h-3 w-3" />
+                Delete issue
+              </div>
+            </CustomMenu.MenuItem>
+          </>
+        )}
       </CustomMenu>
     </>
   );
diff --git a/web/components/issues/issue-layouts/quick-action-dropdowns/archived-issue.tsx b/web/components/issues/issue-layouts/quick-action-dropdowns/archived-issue.tsx
index 2926b6433..f96270176 100644
--- a/web/components/issues/issue-layouts/quick-action-dropdowns/archived-issue.tsx
+++ b/web/components/issues/issue-layouts/quick-action-dropdowns/archived-issue.tsx
@@ -4,18 +4,18 @@ import { CustomMenu } from "@plane/ui";
 import { Link, Trash2 } from "lucide-react";
 // hooks
 import useToast from "hooks/use-toast";
-import { useEventTracker, useIssues } from "hooks/store";
+import { useEventTracker, useIssues ,useUser} from "hooks/store";
 // components
 import { DeleteArchivedIssueModal } from "components/issues";
 // helpers
 import { copyUrlToClipboard } from "helpers/string.helper";
 // types
 import { IQuickActionProps } from "../list/list-view-types";
-// constants
+import { EUserProjectRoles } from "constants/project";
 import { EIssuesStoreType } from "constants/issue";
 
 export const ArchivedIssueQuickActions: React.FC<IQuickActionProps> = (props) => {
-  const { issue, handleDelete, customActionButton, portalElement } = props;
+  const { issue, handleDelete, customActionButton, portalElement, readOnly = false } = props;
   // router
   const router = useRouter();
   const { workspaceSlug } = router.query;
@@ -23,6 +23,13 @@ export const ArchivedIssueQuickActions: React.FC<IQuickActionProps> = (props) =>
   const [deleteIssueModal, setDeleteIssueModal] = useState(false);
   // toast alert
   const { setToastAlert } = useToast();
+
+  // store hooks
+  const {
+    membership: { currentProjectRole },
+  } = useUser();
+
+  const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER;
   // store hooks
   const { setTrackElement } = useEventTracker();
   const { issuesFilter } = useIssues(EIssuesStoreType.ARCHIVED);
@@ -64,17 +71,19 @@ export const ArchivedIssueQuickActions: React.FC<IQuickActionProps> = (props) =>
             Copy link
           </div>
         </CustomMenu.MenuItem>
-        <CustomMenu.MenuItem
-          onClick={() => {
-            setTrackElement(activeLayout);
+        {isEditingAllowed && !readOnly && (
+          <CustomMenu.MenuItem
+            onClick={() => {
+              setTrackElement(activeLayout);
             setDeleteIssueModal(true);
-          }}
-        >
-          <div className="flex items-center gap-2">
-            <Trash2 className="h-3 w-3" />
-            Delete issue
-          </div>
-        </CustomMenu.MenuItem>
+            }}
+          >
+            <div className="flex items-center gap-2">
+              <Trash2 className="h-3 w-3" />
+              Delete issue
+            </div>
+          </CustomMenu.MenuItem>
+        )}
       </CustomMenu>
     </>
   );
diff --git a/web/components/issues/issue-layouts/quick-action-dropdowns/cycle-issue.tsx b/web/components/issues/issue-layouts/quick-action-dropdowns/cycle-issue.tsx
index 6e6c2e518..8c3beb3d2 100644
--- a/web/components/issues/issue-layouts/quick-action-dropdowns/cycle-issue.tsx
+++ b/web/components/issues/issue-layouts/quick-action-dropdowns/cycle-issue.tsx
@@ -4,7 +4,7 @@ import { CustomMenu } from "@plane/ui";
 import { Copy, Link, Pencil, Trash2, XCircle } from "lucide-react";
 // hooks
 import useToast from "hooks/use-toast";
-import { useEventTracker, useIssues } from "hooks/store";
+import { useEventTracker, useIssues,useUser } from "hooks/store";
 // components
 import { CreateUpdateIssueModal, DeleteIssueModal } from "components/issues";
 // helpers
@@ -14,9 +14,18 @@ import { TIssue } from "@plane/types";
 import { IQuickActionProps } from "../list/list-view-types";
 // constants
 import { EIssuesStoreType } from "constants/issue";
+import { EUserProjectRoles } from "constants/project";
 
 export const CycleIssueQuickActions: React.FC<IQuickActionProps> = (props) => {
-  const { issue, handleDelete, handleUpdate, handleRemoveFromView, customActionButton, portalElement } = props;
+  const {
+    issue,
+    handleDelete,
+    handleUpdate,
+    handleRemoveFromView,
+    customActionButton,
+    portalElement,
+    readOnly = false,
+  } = props;
   // states
   const [createUpdateIssueModal, setCreateUpdateIssueModal] = useState(false);
   const [issueToEdit, setIssueToEdit] = useState<TIssue | undefined>(undefined);
@@ -30,6 +39,13 @@ export const CycleIssueQuickActions: React.FC<IQuickActionProps> = (props) => {
   // toast alert
   const { setToastAlert } = useToast();
 
+  // store hooks
+  const {
+    membership: { currentProjectRole },
+  } = useUser();
+
+  const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER;
+
   const activeLayout = `${issuesFilter.issueFilters?.displayFilters?.layout} layout`;
 
   const handleCopyIssueLink = () => {
@@ -85,53 +101,57 @@ export const CycleIssueQuickActions: React.FC<IQuickActionProps> = (props) => {
             Copy link
           </div>
         </CustomMenu.MenuItem>
-        <CustomMenu.MenuItem
-          onClick={() => {
-            setIssueToEdit({
-              ...issue,
-              cycle: cycleId?.toString() ?? null,
-            });
-            setTrackElement(activeLayout);
+        {isEditingAllowed && !readOnly && (
+          <>
+            <CustomMenu.MenuItem
+              onClick={() => {
+                setIssueToEdit({
+                  ...issue,
+                  cycle: cycleId?.toString() ?? null,
+                });
+                setTrackElement(activeLayout);
             setCreateUpdateIssueModal(true);
-          }}
-        >
-          <div className="flex items-center gap-2">
-            <Pencil className="h-3 w-3" />
-            Edit issue
-          </div>
-        </CustomMenu.MenuItem>
-        <CustomMenu.MenuItem
-          onClick={() => {
-            handleRemoveFromView && handleRemoveFromView();
-          }}
-        >
-          <div className="flex items-center gap-2">
-            <XCircle className="h-3 w-3" />
-            Remove from cycle
-          </div>
-        </CustomMenu.MenuItem>
-        <CustomMenu.MenuItem
-          onClick={() => {
-            setTrackElement(activeLayout);
+              }}
+            >
+              <div className="flex items-center gap-2">
+                <Pencil className="h-3 w-3" />
+                Edit issue
+              </div>
+            </CustomMenu.MenuItem>
+            <CustomMenu.MenuItem
+              onClick={() => {
+                handleRemoveFromView && handleRemoveFromView();
+              }}
+            >
+              <div className="flex items-center gap-2">
+                <XCircle className="h-3 w-3" />
+                Remove from cycle
+              </div>
+            </CustomMenu.MenuItem>
+            <CustomMenu.MenuItem
+              onClick={() => {
+                setTrackElement(activeLayout);
             setCreateUpdateIssueModal(true);
-          }}
-        >
-          <div className="flex items-center gap-2">
-            <Copy className="h-3 w-3" />
-            Make a copy
-          </div>
-        </CustomMenu.MenuItem>
-        <CustomMenu.MenuItem
-          onClick={() => {
-            setTrackElement(activeLayout);
+              }}
+            >
+              <div className="flex items-center gap-2">
+                <Copy className="h-3 w-3" />
+                Make a copy
+              </div>
+            </CustomMenu.MenuItem>
+            <CustomMenu.MenuItem
+              onClick={() => {
+                setTrackElement(activeLayout);
             setDeleteIssueModal(true);
-          }}
-        >
-          <div className="flex items-center gap-2">
-            <Trash2 className="h-3 w-3" />
-            Delete issue
-          </div>
-        </CustomMenu.MenuItem>
+              }}
+            >
+              <div className="flex items-center gap-2">
+                <Trash2 className="h-3 w-3" />
+                Delete issue
+              </div>
+            </CustomMenu.MenuItem>
+          </>
+        )}
       </CustomMenu>
     </>
   );
diff --git a/web/components/issues/issue-layouts/quick-action-dropdowns/module-issue.tsx b/web/components/issues/issue-layouts/quick-action-dropdowns/module-issue.tsx
index ed52c9198..a3ed73ec0 100644
--- a/web/components/issues/issue-layouts/quick-action-dropdowns/module-issue.tsx
+++ b/web/components/issues/issue-layouts/quick-action-dropdowns/module-issue.tsx
@@ -4,7 +4,7 @@ import { CustomMenu } from "@plane/ui";
 import { Copy, Link, Pencil, Trash2, XCircle } from "lucide-react";
 // hooks
 import useToast from "hooks/use-toast";
-import { useIssues, useEventTracker } from "hooks/store";
+import { useIssues, useEventTracker ,useUser } from "hooks/store";
 // components
 import { CreateUpdateIssueModal, DeleteIssueModal } from "components/issues";
 // helpers
@@ -14,9 +14,18 @@ import { TIssue } from "@plane/types";
 import { IQuickActionProps } from "../list/list-view-types";
 // constants
 import { EIssuesStoreType } from "constants/issue";
+import { EUserProjectRoles } from "constants/project";
 
 export const ModuleIssueQuickActions: React.FC<IQuickActionProps> = (props) => {
-  const { issue, handleDelete, handleUpdate, handleRemoveFromView, customActionButton, portalElement } = props;
+  const {
+    issue,
+    handleDelete,
+    handleUpdate,
+    handleRemoveFromView,
+    customActionButton,
+    portalElement,
+    readOnly = false,
+  } = props;
   // states
   const [createUpdateIssueModal, setCreateUpdateIssueModal] = useState(false);
   const [issueToEdit, setIssueToEdit] = useState<TIssue | undefined>(undefined);
@@ -30,6 +39,13 @@ export const ModuleIssueQuickActions: React.FC<IQuickActionProps> = (props) => {
   // toast alert
   const { setToastAlert } = useToast();
 
+  // store hooks
+  const {
+    membership: { currentProjectRole },
+  } = useUser();
+
+  const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER;
+
   const activeLayout = `${issuesFilter.issueFilters?.displayFilters?.layout} layout`;
 
   const handleCopyIssueLink = () => {
@@ -85,52 +101,56 @@ export const ModuleIssueQuickActions: React.FC<IQuickActionProps> = (props) => {
             Copy link
           </div>
         </CustomMenu.MenuItem>
-        <CustomMenu.MenuItem
-          onClick={() => {
-            setIssueToEdit({ ...issue, module: moduleId?.toString() ?? null });
-            setTrackElement(activeLayout);
+        {isEditingAllowed && !readOnly && (
+          <>
+            <CustomMenu.MenuItem
+              onClick={() => {
+                setIssueToEdit({ ...issue, module: moduleId?.toString() ?? null });
+                setTrackElement(activeLayout);
             setCreateUpdateIssueModal(true);
-          }}
-        >
-          <div className="flex items-center gap-2">
-            <Pencil className="h-3 w-3" />
-            Edit issue
-          </div>
-        </CustomMenu.MenuItem>
-        <CustomMenu.MenuItem
-          onClick={() => {
-            handleRemoveFromView && handleRemoveFromView();
-          }}
-        >
-          <div className="flex items-center gap-2">
-            <XCircle className="h-3 w-3" />
-            Remove from module
-          </div>
-        </CustomMenu.MenuItem>
-        <CustomMenu.MenuItem
-          onClick={() => {
-            setTrackElement(activeLayout);
+              }}
+            >
+              <div className="flex items-center gap-2">
+                <Pencil className="h-3 w-3" />
+                Edit issue
+              </div>
+            </CustomMenu.MenuItem>
+            <CustomMenu.MenuItem
+              onClick={() => {
+                handleRemoveFromView && handleRemoveFromView();
+              }}
+            >
+              <div className="flex items-center gap-2">
+                <XCircle className="h-3 w-3" />
+                Remove from module
+              </div>
+            </CustomMenu.MenuItem>
+            <CustomMenu.MenuItem
+              onClick={() => {
+                setTrackElement(activeLayout);
             setCreateUpdateIssueModal(true);
-          }}
-        >
-          <div className="flex items-center gap-2">
-            <Copy className="h-3 w-3" />
-            Make a copy
-          </div>
-        </CustomMenu.MenuItem>
-        <CustomMenu.MenuItem
-          onClick={(e) => {
-            e.preventDefault();
-            e.stopPropagation();
-            setTrackElement(activeLayout);
+              }}
+            >
+              <div className="flex items-center gap-2">
+                <Copy className="h-3 w-3" />
+                Make a copy
+              </div>
+            </CustomMenu.MenuItem>
+            <CustomMenu.MenuItem
+              onClick={(e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                setTrackElement(activeLayout);
             setDeleteIssueModal(true);
-          }}
-        >
-          <div className="flex items-center gap-2">
-            <Trash2 className="h-3 w-3" />
-            Delete issue
-          </div>
-        </CustomMenu.MenuItem>
+              }}
+            >
+              <div className="flex items-center gap-2">
+                <Trash2 className="h-3 w-3" />
+                Delete issue
+              </div>
+            </CustomMenu.MenuItem>
+          </>
+        )}
       </CustomMenu>
     </>
   );
diff --git a/web/components/issues/issue-layouts/quick-action-dropdowns/project-issue.tsx b/web/components/issues/issue-layouts/quick-action-dropdowns/project-issue.tsx
index e28dd9a42..13c7ac02a 100644
--- a/web/components/issues/issue-layouts/quick-action-dropdowns/project-issue.tsx
+++ b/web/components/issues/issue-layouts/quick-action-dropdowns/project-issue.tsx
@@ -17,7 +17,7 @@ import { EUserProjectRoles } from "constants/project";
 import { EIssuesStoreType } from "constants/issue";
 
 export const ProjectIssueQuickActions: React.FC<IQuickActionProps> = (props) => {
-  const { issue, handleDelete, handleUpdate, customActionButton, portalElement } = props;
+  const { issue, handleDelete, handleUpdate, customActionButton, portalElement, readOnly = false } = props;
   // router
   const router = useRouter();
   const { workspaceSlug } = router.query;
@@ -91,7 +91,7 @@ export const ProjectIssueQuickActions: React.FC<IQuickActionProps> = (props) =>
             Copy link
           </div>
         </CustomMenu.MenuItem>
-        {isEditingAllowed && (
+        {isEditingAllowed && !readOnly && (
           <>
             <CustomMenu.MenuItem
               onClick={() => {
diff --git a/web/components/issues/issue-layouts/spreadsheet/base-spreadsheet-root.tsx b/web/components/issues/issue-layouts/spreadsheet/base-spreadsheet-root.tsx
index 54df6ca24..e4efc5137 100644
--- a/web/components/issues/issue-layouts/spreadsheet/base-spreadsheet-root.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/base-spreadsheet-root.tsx
@@ -28,10 +28,19 @@ interface IBaseSpreadsheetRoot {
     [EIssueActions.REMOVE]?: (issue: TIssue) => void;
   };
   canEditPropertiesBasedOnProject?: (projectId: string) => boolean;
+  isCompletedCycle?: boolean;
 }
 
 export const BaseSpreadsheetRoot = observer((props: IBaseSpreadsheetRoot) => {
-  const { issueFiltersStore, issueStore, viewId, QuickActions, issueActions, canEditPropertiesBasedOnProject } = props;
+  const {
+    issueFiltersStore,
+    issueStore,
+    viewId,
+    QuickActions,
+    issueActions,
+    canEditPropertiesBasedOnProject,
+    isCompletedCycle = false,
+  } = props;
   // router
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query as { workspaceSlug: string; projectId: string };
@@ -95,6 +104,7 @@ export const BaseSpreadsheetRoot = observer((props: IBaseSpreadsheetRoot) => {
           issueActions[EIssueActions.REMOVE] ? async () => handleIssues(issue, EIssueActions.REMOVE) : undefined
         }
         portalElement={portalElement}
+        readOnly={!isEditingAllowed || isCompletedCycle}
       />
     ),
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -113,7 +123,7 @@ export const BaseSpreadsheetRoot = observer((props: IBaseSpreadsheetRoot) => {
       quickAddCallback={issueStore.quickAddIssue}
       viewId={viewId}
       enableQuickCreateIssue={enableQuickAdd}
-      disableIssueCreation={!enableIssueCreation || !isEditingAllowed}
+      disableIssueCreation={!enableIssueCreation || !isEditingAllowed || isCompletedCycle}
     />
   );
 });
diff --git a/web/components/issues/issue-layouts/spreadsheet/roots/cycle-root.tsx b/web/components/issues/issue-layouts/spreadsheet/roots/cycle-root.tsx
index 40b933557..7f92bd74c 100644
--- a/web/components/issues/issue-layouts/spreadsheet/roots/cycle-root.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/roots/cycle-root.tsx
@@ -2,7 +2,7 @@ import React, { useMemo } from "react";
 import { observer } from "mobx-react-lite";
 import { useRouter } from "next/router";
 // mobx store
-import { useIssues } from "hooks/store";
+import { useCycle, useIssues } from "hooks/store";
 // components
 import { BaseSpreadsheetRoot } from "../base-spreadsheet-root";
 import { EIssueActions } from "../../types";
@@ -15,6 +15,7 @@ export const CycleSpreadsheetLayout: React.FC = observer(() => {
   const { workspaceSlug, cycleId } = router.query as { workspaceSlug: string; cycleId: string };
 
   const { issues, issuesFilter } = useIssues(EIssuesStoreType.CYCLE);
+  const { currentProjectCompletedCycleIds } = useCycle();
 
   const issueActions = useMemo(
     () => ({
@@ -35,6 +36,11 @@ export const CycleSpreadsheetLayout: React.FC = observer(() => {
     [issues, workspaceSlug, cycleId]
   );
 
+  const isCompletedCycle =
+    cycleId && currentProjectCompletedCycleIds ? currentProjectCompletedCycleIds.includes(cycleId.toString()) : false;
+
+  const canEditIssueProperties = () => !isCompletedCycle;
+
   return (
     <BaseSpreadsheetRoot
       issueStore={issues}
@@ -42,6 +48,8 @@ export const CycleSpreadsheetLayout: React.FC = observer(() => {
       viewId={cycleId}
       issueActions={issueActions}
       QuickActions={CycleIssueQuickActions}
+      canEditPropertiesBasedOnProject={canEditIssueProperties}
+      isCompletedCycle={isCompletedCycle}
     />
   );
 });

From 0ee93dfd8cd2bedfe16cf74c5d86529045d28eb6 Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com>
Date: Mon, 5 Feb 2024 19:12:33 +0530
Subject: [PATCH 10/58] chore: added `None` filter option to the dashboard
 widgets (#3556)

* chore: added tab change animation

* chore: widgets filtering logic updated

* refactor: issues list widget

* fix: tab navigation transition

* fix: extra top spacing on opening the peek overview
---
 apiserver/plane/app/views/dashboard.py        | 34 ++++++++
 packages/types/src/dashboard.d.ts             |  3 +-
 .../dashboard/widgets/assigned-issues.tsx     | 75 ++++++++++--------
 .../dashboard/widgets/created-issues.tsx      | 74 ++++++++++-------
 .../widgets/issue-panels/issues-list.tsx      | 15 ++--
 .../widgets/issue-panels/tabs-list.tsx        | 79 ++++++++++++++-----
 .../dashboard/widgets/issues-by-priority.tsx  | 28 +++----
 .../widgets/issues-by-state-group.tsx         | 44 +++++------
 .../page-views/workspace-dashboard.tsx        | 20 ++---
 web/constants/dashboard.ts                    | 39 +++++++--
 web/helpers/dashboard.helper.ts               |  6 +-
 11 files changed, 270 insertions(+), 147 deletions(-)

diff --git a/apiserver/plane/app/views/dashboard.py b/apiserver/plane/app/views/dashboard.py
index 47fae2c9c..1366a2886 100644
--- a/apiserver/plane/app/views/dashboard.py
+++ b/apiserver/plane/app/views/dashboard.py
@@ -145,6 +145,23 @@ def dashboard_assigned_issues(self, request, slug):
         )
     ).order_by("priority_order")
 
+    if issue_type == "pending":
+        pending_issues_count = assigned_issues.filter(
+            state__group__in=["backlog", "started", "unstarted"]
+        ).count()
+        pending_issues = assigned_issues.filter(
+            state__group__in=["backlog", "started", "unstarted"]
+        )[:5]
+        return Response(
+            {
+                "issues": IssueSerializer(
+                    pending_issues, many=True, expand=self.expand
+                ).data,
+                "count": pending_issues_count,
+            },
+            status=status.HTTP_200_OK,
+        )
+
     if issue_type == "completed":
         completed_issues_count = assigned_issues.filter(
             state__group__in=["completed"]
@@ -257,6 +274,23 @@ def dashboard_created_issues(self, request, slug):
         )
     ).order_by("priority_order")
 
+    if issue_type == "pending":
+        pending_issues_count = created_issues.filter(
+            state__group__in=["backlog", "started", "unstarted"]
+        ).count()
+        pending_issues = created_issues.filter(
+            state__group__in=["backlog", "started", "unstarted"]
+        )[:5]
+        return Response(
+            {
+                "issues": IssueSerializer(
+                    pending_issues, many=True, expand=self.expand
+                ).data,
+                "count": pending_issues_count,
+            },
+            status=status.HTTP_200_OK,
+        )
+
     if issue_type == "completed":
         completed_issues_count = created_issues.filter(
             state__group__in=["completed"]
diff --git a/packages/types/src/dashboard.d.ts b/packages/types/src/dashboard.d.ts
index 31751c0d0..7cfa6aa85 100644
--- a/packages/types/src/dashboard.d.ts
+++ b/packages/types/src/dashboard.d.ts
@@ -13,9 +13,10 @@ export type TWidgetKeys =
   | "recent_projects"
   | "recent_collaborators";
 
-export type TIssuesListTypes = "upcoming" | "overdue" | "completed";
+export type TIssuesListTypes = "pending" | "upcoming" | "overdue" | "completed";
 
 export type TDurationFilterOptions =
+  | "none"
   | "today"
   | "this_week"
   | "this_month"
diff --git a/web/components/dashboard/widgets/assigned-issues.tsx b/web/components/dashboard/widgets/assigned-issues.tsx
index d4a27afc1..e2a54c05f 100644
--- a/web/components/dashboard/widgets/assigned-issues.tsx
+++ b/web/components/dashboard/widgets/assigned-issues.tsx
@@ -17,7 +17,7 @@ import { getCustomDates, getRedirectionFilters } from "helpers/dashboard.helper"
 // types
 import { TAssignedIssuesWidgetFilters, TAssignedIssuesWidgetResponse } from "@plane/types";
 // constants
-import { ISSUES_TABS_LIST } from "constants/dashboard";
+import { FILTERED_ISSUES_TABS_LIST, UNFILTERED_ISSUES_TABS_LIST } from "constants/dashboard";
 
 const WIDGET_KEY = "assigned_issues";
 
@@ -30,6 +30,8 @@ export const AssignedIssuesWidget: React.FC<WidgetProps> = observer((props) => {
   // derived values
   const widgetDetails = getWidgetDetails(workspaceSlug, dashboardId, WIDGET_KEY);
   const widgetStats = getWidgetStats<TAssignedIssuesWidgetResponse>(workspaceSlug, dashboardId, WIDGET_KEY);
+  const selectedTab = widgetDetails?.widget_filters.tab ?? "pending";
+  const selectedDurationFilter = widgetDetails?.widget_filters.target_date ?? "none";
 
   const handleUpdateFilters = async (filters: Partial<TAssignedIssuesWidgetFilters>) => {
     if (!widgetDetails) return;
@@ -41,68 +43,79 @@ export const AssignedIssuesWidget: React.FC<WidgetProps> = observer((props) => {
       filters,
     });
 
+    const filterDates = getCustomDates(filters.target_date ?? selectedDurationFilter);
     fetchWidgetStats(workspaceSlug, dashboardId, {
       widget_key: WIDGET_KEY,
-      issue_type: filters.tab ?? widgetDetails.widget_filters.tab ?? "upcoming",
-      target_date: getCustomDates(filters.target_date ?? widgetDetails.widget_filters.target_date ?? "this_week"),
+      issue_type: filters.tab ?? selectedTab,
+      ...(filterDates.trim() !== "" ? { target_date: filterDates } : {}),
       expand: "issue_relation",
     }).finally(() => setFetching(false));
   };
 
   useEffect(() => {
-    const filterDates = getCustomDates(widgetDetails?.widget_filters.target_date ?? "this_week");
+    const filterDates = getCustomDates(selectedDurationFilter);
 
     fetchWidgetStats(workspaceSlug, dashboardId, {
       widget_key: WIDGET_KEY,
-      issue_type: widgetDetails?.widget_filters.tab ?? "upcoming",
-      target_date: filterDates,
+      issue_type: selectedTab,
+      ...(filterDates.trim() !== "" ? { target_date: filterDates } : {}),
       expand: "issue_relation",
     });
+
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  const filterParams = getRedirectionFilters(widgetDetails?.widget_filters.tab ?? "upcoming");
+  const filterParams = getRedirectionFilters(selectedTab);
+  const tabsList = selectedDurationFilter === "none" ? UNFILTERED_ISSUES_TABS_LIST : FILTERED_ISSUES_TABS_LIST;
 
   if (!widgetDetails || !widgetStats) return <WidgetLoader widgetKey={WIDGET_KEY} />;
 
   return (
     <div className="bg-custom-background-100 rounded-xl border-[0.5px] border-custom-border-200 w-full hover:shadow-custom-shadow-4xl duration-300 flex flex-col min-h-96">
-      <div className="flex items-start justify-between gap-2 p-6 pl-7">
-        <div>
-          <Link
-            href={`/${workspaceSlug}/workspace-views/assigned/${filterParams}`}
-            className="text-lg font-semibold text-custom-text-300 hover:underline"
-          >
-            Assigned to you
-          </Link>
-          <p className="mt-3 text-xs font-medium text-custom-text-300">
-            Filtered by{" "}
-            <span className="border-[0.5px] border-custom-border-300 rounded py-1 px-2 ml-0.5">Due date</span>
-          </p>
-        </div>
+      <div className="flex items-center justify-between gap-2 p-6 pl-7">
+        <Link
+          href={`/${workspaceSlug}/workspace-views/assigned/${filterParams}`}
+          className="text-lg font-semibold text-custom-text-300 hover:underline"
+        >
+          Assigned to you
+        </Link>
         <DurationFilterDropdown
-          value={widgetDetails.widget_filters.target_date ?? "this_week"}
-          onChange={(val) =>
-            handleUpdateFilters({
-              target_date: val,
-            })
-          }
+          value={selectedDurationFilter}
+          onChange={(val) => {
+            if (val === selectedDurationFilter) return;
+
+            // switch to pending tab if target date is changed to none
+            if (val === "none" && selectedTab !== "completed") {
+              handleUpdateFilters({ target_date: val, tab: "pending" });
+              return;
+            }
+            // switch to upcoming tab if target date is changed to other than none
+            if (val !== "none" && selectedDurationFilter === "none" && selectedTab !== "completed") {
+              handleUpdateFilters({
+                target_date: val,
+                tab: "upcoming",
+              });
+              return;
+            }
+
+            handleUpdateFilters({ target_date: val });
+          }}
         />
       </div>
       <Tab.Group
         as="div"
-        defaultIndex={ISSUES_TABS_LIST.findIndex((t) => t.key === widgetDetails.widget_filters.tab ?? "upcoming")}
+        selectedIndex={tabsList.findIndex((tab) => tab.key === selectedTab)}
         onChange={(i) => {
-          const selectedTab = ISSUES_TABS_LIST[i];
-          handleUpdateFilters({ tab: selectedTab.key ?? "upcoming" });
+          const selectedTab = tabsList[i];
+          handleUpdateFilters({ tab: selectedTab?.key ?? "pending" });
         }}
         className="h-full flex flex-col"
       >
         <div className="px-6">
-          <TabsList />
+          <TabsList durationFilter={selectedDurationFilter} selectedTab={selectedTab} />
         </div>
         <Tab.Panels as="div" className="h-full">
-          {ISSUES_TABS_LIST.map((tab) => (
+          {tabsList.map((tab) => (
             <Tab.Panel key={tab.key} as="div" className="h-full flex flex-col">
               <WidgetIssuesList
                 issues={widgetStats.issues}
diff --git a/web/components/dashboard/widgets/created-issues.tsx b/web/components/dashboard/widgets/created-issues.tsx
index f5727f277..dcdff6685 100644
--- a/web/components/dashboard/widgets/created-issues.tsx
+++ b/web/components/dashboard/widgets/created-issues.tsx
@@ -17,7 +17,7 @@ import { getCustomDates, getRedirectionFilters } from "helpers/dashboard.helper"
 // types
 import { TCreatedIssuesWidgetFilters, TCreatedIssuesWidgetResponse } from "@plane/types";
 // constants
-import { ISSUES_TABS_LIST } from "constants/dashboard";
+import { FILTERED_ISSUES_TABS_LIST, UNFILTERED_ISSUES_TABS_LIST } from "constants/dashboard";
 
 const WIDGET_KEY = "created_issues";
 
@@ -30,6 +30,8 @@ export const CreatedIssuesWidget: React.FC<WidgetProps> = observer((props) => {
   // derived values
   const widgetDetails = getWidgetDetails(workspaceSlug, dashboardId, WIDGET_KEY);
   const widgetStats = getWidgetStats<TCreatedIssuesWidgetResponse>(workspaceSlug, dashboardId, WIDGET_KEY);
+  const selectedTab = widgetDetails?.widget_filters.tab ?? "pending";
+  const selectedDurationFilter = widgetDetails?.widget_filters.target_date ?? "none";
 
   const handleUpdateFilters = async (filters: Partial<TCreatedIssuesWidgetFilters>) => {
     if (!widgetDetails) return;
@@ -41,64 +43,76 @@ export const CreatedIssuesWidget: React.FC<WidgetProps> = observer((props) => {
       filters,
     });
 
+    const filterDates = getCustomDates(filters.target_date ?? selectedDurationFilter);
     fetchWidgetStats(workspaceSlug, dashboardId, {
       widget_key: WIDGET_KEY,
-      issue_type: filters.tab ?? widgetDetails.widget_filters.tab ?? "upcoming",
-      target_date: getCustomDates(filters.target_date ?? widgetDetails.widget_filters.target_date ?? "this_week"),
+      issue_type: filters.tab ?? selectedTab,
+      ...(filterDates.trim() !== "" ? { target_date: filterDates } : {}),
     }).finally(() => setFetching(false));
   };
 
   useEffect(() => {
+    const filterDates = getCustomDates(selectedDurationFilter);
+
     fetchWidgetStats(workspaceSlug, dashboardId, {
       widget_key: WIDGET_KEY,
-      issue_type: widgetDetails?.widget_filters.tab ?? "upcoming",
-      target_date: getCustomDates(widgetDetails?.widget_filters.target_date ?? "this_week"),
+      issue_type: selectedTab,
+      ...(filterDates.trim() !== "" ? { target_date: filterDates } : {}),
     });
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  const filterParams = getRedirectionFilters(widgetDetails?.widget_filters.tab ?? "upcoming");
+  const filterParams = getRedirectionFilters(selectedTab);
+  const tabsList = selectedDurationFilter === "none" ? UNFILTERED_ISSUES_TABS_LIST : FILTERED_ISSUES_TABS_LIST;
 
   if (!widgetDetails || !widgetStats) return <WidgetLoader widgetKey={WIDGET_KEY} />;
 
   return (
     <div className="bg-custom-background-100 rounded-xl border-[0.5px] border-custom-border-200 w-full hover:shadow-custom-shadow-4xl duration-300 flex flex-col min-h-96">
-      <div className="flex items-start justify-between gap-2 p-6 pl-7">
-        <div>
-          <Link
-            href={`/${workspaceSlug}/workspace-views/created/${filterParams}`}
-            className="text-lg font-semibold text-custom-text-300 hover:underline"
-          >
-            Created by you
-          </Link>
-          <p className="mt-3 text-xs font-medium text-custom-text-300">
-            Filtered by{" "}
-            <span className="border-[0.5px] border-custom-border-300 rounded py-1 px-2 ml-0.5">Due date</span>
-          </p>
-        </div>
+      <div className="flex items-center justify-between gap-2 p-6 pl-7">
+        <Link
+          href={`/${workspaceSlug}/workspace-views/created/${filterParams}`}
+          className="text-lg font-semibold text-custom-text-300 hover:underline"
+        >
+          Created by you
+        </Link>
         <DurationFilterDropdown
-          value={widgetDetails.widget_filters.target_date ?? "this_week"}
-          onChange={(val) =>
-            handleUpdateFilters({
-              target_date: val,
-            })
-          }
+          value={selectedDurationFilter}
+          onChange={(val) => {
+            if (val === selectedDurationFilter) return;
+
+            // switch to pending tab if target date is changed to none
+            if (val === "none" && selectedTab !== "completed") {
+              handleUpdateFilters({ target_date: val, tab: "pending" });
+              return;
+            }
+            // switch to upcoming tab if target date is changed to other than none
+            if (val !== "none" && selectedDurationFilter === "none" && selectedTab !== "completed") {
+              handleUpdateFilters({
+                target_date: val,
+                tab: "upcoming",
+              });
+              return;
+            }
+
+            handleUpdateFilters({ target_date: val });
+          }}
         />
       </div>
       <Tab.Group
         as="div"
-        defaultIndex={ISSUES_TABS_LIST.findIndex((t) => t.key === widgetDetails.widget_filters.tab ?? "upcoming")}
+        selectedIndex={tabsList.findIndex((tab) => tab.key === selectedTab)}
         onChange={(i) => {
-          const selectedTab = ISSUES_TABS_LIST[i];
-          handleUpdateFilters({ tab: selectedTab.key ?? "upcoming" });
+          const selectedTab = tabsList[i];
+          handleUpdateFilters({ tab: selectedTab.key ?? "pending" });
         }}
         className="h-full flex flex-col"
       >
         <div className="px-6">
-          <TabsList />
+          <TabsList durationFilter={selectedDurationFilter} selectedTab={selectedTab} />
         </div>
         <Tab.Panels as="div" className="h-full">
-          {ISSUES_TABS_LIST.map((tab) => (
+          {tabsList.map((tab) => (
             <Tab.Panel key={tab.key} as="div" className="h-full flex flex-col">
               <WidgetIssuesList
                 issues={widgetStats.issues}
diff --git a/web/components/dashboard/widgets/issue-panels/issues-list.tsx b/web/components/dashboard/widgets/issue-panels/issues-list.tsx
index a036b2d28..cf3f32232 100644
--- a/web/components/dashboard/widgets/issue-panels/issues-list.tsx
+++ b/web/components/dashboard/widgets/issue-panels/issues-list.tsx
@@ -14,7 +14,7 @@ import {
   IssueListItemProps,
 } from "components/dashboard/widgets";
 // ui
-import { Loader, getButtonStyling } from "@plane/ui";
+import { getButtonStyling } from "@plane/ui";
 // helpers
 import { cn } from "helpers/common.helper";
 import { getRedirectionFilters } from "helpers/dashboard.helper";
@@ -41,16 +41,18 @@ export const WidgetIssuesList: React.FC<WidgetIssuesListProps> = (props) => {
   const filterParams = getRedirectionFilters(tab);
 
   const ISSUE_LIST_ITEM: {
-    [key in string]: {
+    [key: string]: {
       [key in TIssuesListTypes]: React.FC<IssueListItemProps>;
     };
   } = {
     assigned: {
+      pending: AssignedUpcomingIssueListItem,
       upcoming: AssignedUpcomingIssueListItem,
       overdue: AssignedOverdueIssueListItem,
       completed: AssignedCompletedIssueListItem,
     },
     created: {
+      pending: CreatedUpcomingIssueListItem,
       upcoming: CreatedUpcomingIssueListItem,
       overdue: CreatedOverdueIssueListItem,
       completed: CreatedCompletedIssueListItem,
@@ -61,12 +63,7 @@ export const WidgetIssuesList: React.FC<WidgetIssuesListProps> = (props) => {
     <>
       <div className="h-full">
         {isLoading ? (
-          <Loader className="mt-7 mx-6 space-y-4">
-            <Loader.Item height="25px" />
-            <Loader.Item height="25px" />
-            <Loader.Item height="25px" />
-            <Loader.Item height="25px" />
-          </Loader>
+          <></>
         ) : issues.length > 0 ? (
           <>
             <div className="mt-7 mx-6 border-b-[0.5px] border-custom-border-200 grid grid-cols-6 gap-1 text-xs text-custom-text-300 pb-1">
@@ -81,7 +78,7 @@ export const WidgetIssuesList: React.FC<WidgetIssuesListProps> = (props) => {
                   {totalIssues}
                 </span>
               </h6>
-              {tab === "upcoming" && <h6 className="text-center">Due date</h6>}
+              {["upcoming", "pending"].includes(tab) && <h6 className="text-center">Due date</h6>}
               {tab === "overdue" && <h6 className="text-center">Due by</h6>}
               {type === "assigned" && tab !== "completed" && <h6 className="text-center">Blocked by</h6>}
               {type === "created" && <h6 className="text-center">Assigned to</h6>}
diff --git a/web/components/dashboard/widgets/issue-panels/tabs-list.tsx b/web/components/dashboard/widgets/issue-panels/tabs-list.tsx
index 6ef6ec0ee..9ce00a03c 100644
--- a/web/components/dashboard/widgets/issue-panels/tabs-list.tsx
+++ b/web/components/dashboard/widgets/issue-panels/tabs-list.tsx
@@ -1,26 +1,63 @@
+import { observer } from "mobx-react";
 import { Tab } from "@headlessui/react";
 // helpers
 import { cn } from "helpers/common.helper";
+// types
+import { TDurationFilterOptions, TIssuesListTypes } from "@plane/types";
 // constants
-import { ISSUES_TABS_LIST } from "constants/dashboard";
+import { FILTERED_ISSUES_TABS_LIST, UNFILTERED_ISSUES_TABS_LIST } from "constants/dashboard";
 
-export const TabsList = () => (
-  <Tab.List
-    as="div"
-    className="border-[0.5px] border-custom-border-200 rounded grid grid-cols-3 bg-custom-background-80"
-  >
-    {ISSUES_TABS_LIST.map((tab) => (
-      <Tab
-        key={tab.key}
-        className={({ selected }) =>
-          cn("font-semibold text-xs rounded py-1.5 focus:outline-none", {
-            "bg-custom-background-100 text-custom-text-300 shadow-[2px_0_8px_rgba(167,169,174,0.15)]": selected,
-            "text-custom-text-400": !selected,
-          })
-        }
-      >
-        {tab.label}
-      </Tab>
-    ))}
-  </Tab.List>
-);
+type Props = {
+  durationFilter: TDurationFilterOptions;
+  selectedTab: TIssuesListTypes;
+};
+
+export const TabsList: React.FC<Props> = observer((props) => {
+  const { durationFilter, selectedTab } = props;
+
+  const tabsList = durationFilter === "none" ? UNFILTERED_ISSUES_TABS_LIST : FILTERED_ISSUES_TABS_LIST;
+  const selectedTabIndex = tabsList.findIndex((tab) => tab.key === (selectedTab ?? "pending"));
+
+  return (
+    <Tab.List
+      as="div"
+      className="relative border-[0.5px] border-custom-border-200 rounded bg-custom-background-80 grid"
+      style={{
+        gridTemplateColumns: `repeat(${tabsList.length}, 1fr)`,
+      }}
+    >
+      <div
+        className={cn("absolute bg-custom-background-100 rounded transition-all duration-500 ease-in-out", {
+          // right shadow
+          "shadow-[2px_0_8px_rgba(167,169,174,0.15)]": selectedTabIndex !== tabsList.length - 1,
+          // left shadow
+          "shadow-[-2px_0_8px_rgba(167,169,174,0.15)]": selectedTabIndex !== 0,
+        })}
+        style={{
+          height: "calc(100% - 1px)",
+          width: `${100 / tabsList.length}%`,
+          transform: `translateX(${selectedTabIndex * 100}%)`,
+        }}
+      />
+      {tabsList.map((tab) => (
+        <Tab
+          key={tab.key}
+          className={cn(
+            "relative z-[1] font-semibold text-xs rounded py-1.5 text-custom-text-400 focus:outline-none",
+            "transition duration-500",
+            {
+              "text-custom-text-100 bg-custom-background-100": selectedTab === tab.key,
+              "hover:text-custom-text-300": selectedTab !== tab.key,
+              // // right shadow
+              // "shadow-[2px_0_8px_rgba(167,169,174,0.15)]": selectedTabIndex !== tabsList.length - 1,
+              // // left shadow
+              // "shadow-[-2px_0_8px_rgba(167,169,174,0.15)]": selectedTabIndex !== 0,
+            }
+          )}
+        >
+          <span className="scale-110">{tab.label}</span>
+        </Tab>
+      ))}
+    </Tab.List>
+  );
+});
diff --git a/web/components/dashboard/widgets/issues-by-priority.tsx b/web/components/dashboard/widgets/issues-by-priority.tsx
index 45b71466d..97884bccc 100644
--- a/web/components/dashboard/widgets/issues-by-priority.tsx
+++ b/web/components/dashboard/widgets/issues-by-priority.tsx
@@ -84,16 +84,18 @@ export const IssuesByPriorityWidget: React.FC<WidgetProps> = observer((props) =>
       filters,
     });
 
+    const filterDates = getCustomDates(filters.target_date ?? widgetDetails.widget_filters.target_date ?? "none");
     fetchWidgetStats(workspaceSlug, dashboardId, {
       widget_key: WIDGET_KEY,
-      target_date: getCustomDates(filters.target_date ?? widgetDetails.widget_filters.target_date ?? "this_week"),
+      ...(filterDates.trim() !== "" ? { target_date: filterDates } : {}),
     });
   };
 
   useEffect(() => {
+    const filterDates = getCustomDates(widgetDetails?.widget_filters.target_date ?? "none");
     fetchWidgetStats(workspaceSlug, dashboardId, {
       widget_key: WIDGET_KEY,
-      target_date: getCustomDates(widgetDetails?.widget_filters.target_date ?? "this_week"),
+      ...(filterDates.trim() !== "" ? { target_date: filterDates } : {}),
     });
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
@@ -129,21 +131,15 @@ export const IssuesByPriorityWidget: React.FC<WidgetProps> = observer((props) =>
 
   return (
     <div className="bg-custom-background-100 rounded-xl border-[0.5px] border-custom-border-200 w-full py-6 hover:shadow-custom-shadow-4xl duration-300 overflow-hidden min-h-96 flex flex-col">
-      <div className="flex items-start justify-between gap-2 pl-7 pr-6">
-        <div>
-          <Link
-            href={`/${workspaceSlug}/workspace-views/assigned`}
-            className="text-lg font-semibold text-custom-text-300 hover:underline"
-          >
-            Assigned by priority
-          </Link>
-          <p className="mt-3 text-xs font-medium text-custom-text-300">
-            Filtered by{" "}
-            <span className="border-[0.5px] border-custom-border-300 rounded py-1 px-2 ml-0.5">Due date</span>
-          </p>
-        </div>
+      <div className="flex items-center justify-between gap-2 pl-7 pr-6">
+        <Link
+          href={`/${workspaceSlug}/workspace-views/assigned`}
+          className="text-lg font-semibold text-custom-text-300 hover:underline"
+        >
+          Assigned by priority
+        </Link>
         <DurationFilterDropdown
-          value={widgetDetails.widget_filters.target_date ?? "this_week"}
+          value={widgetDetails.widget_filters.target_date ?? "none"}
           onChange={(val) =>
             handleUpdateFilters({
               target_date: val,
diff --git a/web/components/dashboard/widgets/issues-by-state-group.tsx b/web/components/dashboard/widgets/issues-by-state-group.tsx
index bd4171cfa..2f7f6ffae 100644
--- a/web/components/dashboard/widgets/issues-by-state-group.tsx
+++ b/web/components/dashboard/widgets/issues-by-state-group.tsx
@@ -43,17 +43,19 @@ export const IssuesByStateGroupWidget: React.FC<WidgetProps> = observer((props)
       filters,
     });
 
+    const filterDates = getCustomDates(filters.target_date ?? widgetDetails.widget_filters.target_date ?? "none");
     fetchWidgetStats(workspaceSlug, dashboardId, {
       widget_key: WIDGET_KEY,
-      target_date: getCustomDates(filters.target_date ?? widgetDetails.widget_filters.target_date ?? "this_week"),
+      ...(filterDates.trim() !== "" ? { target_date: filterDates } : {}),
     });
   };
 
   // fetch widget stats
   useEffect(() => {
+    const filterDates = getCustomDates(widgetDetails?.widget_filters.target_date ?? "none");
     fetchWidgetStats(workspaceSlug, dashboardId, {
       widget_key: WIDGET_KEY,
-      target_date: getCustomDates(widgetDetails?.widget_filters.target_date ?? "this_week"),
+      ...(filterDates.trim() !== "" ? { target_date: filterDates } : {}),
     });
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
@@ -72,14 +74,14 @@ export const IssuesByStateGroupWidget: React.FC<WidgetProps> = observer((props)
       startedCount > 0
         ? "started"
         : unStartedCount > 0
-          ? "unstarted"
-          : backlogCount > 0
-            ? "backlog"
-            : completedCount > 0
-              ? "completed"
-              : canceledCount > 0
-                ? "cancelled"
-                : null;
+        ? "unstarted"
+        : backlogCount > 0
+        ? "backlog"
+        : completedCount > 0
+        ? "completed"
+        : canceledCount > 0
+        ? "cancelled"
+        : null;
 
     setActiveStateGroup(stateGroup);
     setDefaultStateGroup(stateGroup);
@@ -128,21 +130,15 @@ export const IssuesByStateGroupWidget: React.FC<WidgetProps> = observer((props)
 
   return (
     <div className="bg-custom-background-100 rounded-xl border-[0.5px] border-custom-border-200 w-full py-6 hover:shadow-custom-shadow-4xl duration-300 overflow-hidden min-h-96 flex flex-col">
-      <div className="flex items-start justify-between gap-2 pl-7 pr-6">
-        <div>
-          <Link
-            href={`/${workspaceSlug}/workspace-views/assigned`}
-            className="text-lg font-semibold text-custom-text-300 hover:underline"
-          >
-            Assigned by state
-          </Link>
-          <p className="mt-3 text-xs font-medium text-custom-text-300">
-            Filtered by{" "}
-            <span className="border-[0.5px] border-custom-border-300 rounded py-1 px-2 ml-0.5">Due date</span>
-          </p>
-        </div>
+      <div className="flex items-center justify-between gap-2 pl-7 pr-6">
+        <Link
+          href={`/${workspaceSlug}/workspace-views/assigned`}
+          className="text-lg font-semibold text-custom-text-300 hover:underline"
+        >
+          Assigned by state
+        </Link>
         <DurationFilterDropdown
-          value={widgetDetails.widget_filters.target_date ?? "this_week"}
+          value={widgetDetails.widget_filters.target_date ?? "none"}
           onChange={(val) =>
             handleUpdateFilters({
               target_date: val,
diff --git a/web/components/page-views/workspace-dashboard.tsx b/web/components/page-views/workspace-dashboard.tsx
index dc9c4de61..93756d22a 100644
--- a/web/components/page-views/workspace-dashboard.tsx
+++ b/web/components/page-views/workspace-dashboard.tsx
@@ -62,16 +62,18 @@ export const WorkspaceDashboardView = observer(() => {
       {homeDashboardId && joinedProjectIds ? (
         <>
           {joinedProjectIds.length > 0 ? (
-            <div className="flex h-full w-full flex-col space-y-7 overflow-y-auto bg-custom-background-90 p-7">
+            <>
               <IssuePeekOverview />
-              {currentUser && <UserGreetingsView user={currentUser} />}
-              {currentUser && !currentUser.is_tour_completed && (
-                <div className="fixed left-0 top-0 z-20 grid h-full w-full place-items-center bg-custom-backdrop bg-opacity-50 transition-opacity">
-                  <TourRoot onComplete={handleTourCompleted} />
-                </div>
-              )}
-              <DashboardWidgets />
-            </div>
+              <div className="space-y-7 p-7 bg-custom-background-90 h-full w-full flex flex-col overflow-y-auto">
+                {currentUser && <UserGreetingsView user={currentUser} />}
+                {currentUser && !currentUser.is_tour_completed && (
+                  <div className="fixed left-0 top-0 z-20 grid h-full w-full place-items-center bg-custom-backdrop bg-opacity-50 transition-opacity">
+                    <TourRoot onComplete={handleTourCompleted} />
+                  </div>
+                )}
+                <DashboardWidgets />
+              </div>
+            </>
           ) : (
             <EmptyState
               image={emptyStateImage}
diff --git a/web/constants/dashboard.ts b/web/constants/dashboard.ts
index d23480cfe..3f251ca78 100644
--- a/web/constants/dashboard.ts
+++ b/web/constants/dashboard.ts
@@ -121,21 +121,25 @@ export const DURATION_FILTER_OPTIONS: {
   key: TDurationFilterOptions;
   label: string;
 }[] = [
+  {
+    key: "none",
+    label: "None",
+  },
   {
     key: "today",
-    label: "Today",
+    label: "Due today",
   },
   {
     key: "this_week",
-    label: "This week",
+    label: " Due this week",
   },
   {
     key: "this_month",
-    label: "This month",
+    label: "Due this month",
   },
   {
     key: "this_year",
-    label: "This year",
+    label: "Due this year",
   },
 ];
 
@@ -152,7 +156,7 @@ export const PROJECT_BACKGROUND_COLORS = [
 ];
 
 // assigned and created issues widgets tabs list
-export const ISSUES_TABS_LIST: {
+export const FILTERED_ISSUES_TABS_LIST: {
   key: TIssuesListTypes;
   label: string;
 }[] = [
@@ -170,7 +174,27 @@ export const ISSUES_TABS_LIST: {
   },
 ];
 
+// assigned and created issues widgets tabs list
+export const UNFILTERED_ISSUES_TABS_LIST: {
+  key: TIssuesListTypes;
+  label: string;
+}[] = [
+  {
+    key: "pending",
+    label: "Pending",
+  },
+  {
+    key: "completed",
+    label: "Marked completed",
+  },
+];
+
 export const ASSIGNED_ISSUES_EMPTY_STATES = {
+  pending: {
+    title: "Issues assigned to you that are pending\nwill show up here.",
+    darkImage: UpcomingIssuesDark,
+    lightImage: UpcomingIssuesLight,
+  },
   upcoming: {
     title: "Upcoming issues assigned to\nyou will show up here.",
     darkImage: UpcomingIssuesDark,
@@ -189,6 +213,11 @@ export const ASSIGNED_ISSUES_EMPTY_STATES = {
 };
 
 export const CREATED_ISSUES_EMPTY_STATES = {
+  pending: {
+    title: "Issues created by you that are pending\nwill show up here.",
+    darkImage: UpcomingIssuesDark,
+    lightImage: UpcomingIssuesLight,
+  },
   upcoming: {
     title: "Upcoming issues you created\nwill show up here.",
     darkImage: UpcomingIssuesDark,
diff --git a/web/helpers/dashboard.helper.ts b/web/helpers/dashboard.helper.ts
index 2a8ade4fa..8003f15e3 100644
--- a/web/helpers/dashboard.helper.ts
+++ b/web/helpers/dashboard.helper.ts
@@ -9,6 +9,8 @@ export const getCustomDates = (duration: TDurationFilterOptions): string => {
   let firstDay, lastDay;
 
   switch (duration) {
+    case "none":
+      return "";
     case "today":
       firstDay = renderFormattedPayloadDate(today);
       lastDay = renderFormattedPayloadDate(today);
@@ -32,7 +34,9 @@ export const getRedirectionFilters = (type: TIssuesListTypes): string => {
   const today = renderFormattedPayloadDate(new Date());
 
   const filterParams =
-    type === "upcoming"
+    type === "pending"
+      ? "?state_group=backlog,unstarted,started"
+      : type === "upcoming"
       ? `?target_date=${today};after`
       : type === "overdue"
       ? `?target_date=${today};before`

From 403595a897ebf4f4582669723e89252e33b63f14 Mon Sep 17 00:00:00 2001
From: Bavisetti Narayan <72156168+NarayanBavisetti@users.noreply.github.com>
Date: Mon, 5 Feb 2024 19:13:02 +0530
Subject: [PATCH 11/58] chore: removed email notification for new users (#3561)

---
 apiserver/plane/db/models/user.py | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/apiserver/plane/db/models/user.py b/apiserver/plane/db/models/user.py
index 6f8a82e56..f254a3cb7 100644
--- a/apiserver/plane/db/models/user.py
+++ b/apiserver/plane/db/models/user.py
@@ -172,4 +172,9 @@ def create_user_notification(sender, instance, created, **kwargs):
         from plane.db.models import UserNotificationPreference
         UserNotificationPreference.objects.create(
             user=instance,
+            property_change=False,
+            state_change=False,
+            comment=False,
+            mention=False,
+            issue_completed=False,
         )

From 4041c5bc5bca33230f7eb5dc593c8e810472a7f9 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Mon, 5 Feb 2024 19:13:21 +0530
Subject: [PATCH 12/58] chore: cycle and module sidebar improvement (#3562)

---
 web/components/core/sidebar/sidebar-progress-stats.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/components/core/sidebar/sidebar-progress-stats.tsx b/web/components/core/sidebar/sidebar-progress-stats.tsx
index c37cdf4b9..8fd021403 100644
--- a/web/components/core/sidebar/sidebar-progress-stats.tsx
+++ b/web/components/core/sidebar/sidebar-progress-stats.tsx
@@ -125,7 +125,7 @@ export const SidebarProgressStats: React.FC<Props> = ({
         </Tab>
       </Tab.List>
       <Tab.Panels className="flex w-full items-center justify-between text-custom-text-200">
-        <Tab.Panel as="div" className="flex h-44 w-full flex-col gap-1.5 overflow-y-auto pt-3.5">
+        <Tab.Panel as="div" className="flex min-h-44 w-full flex-col gap-1.5 overflow-y-auto pt-3.5">
           {distribution?.assignees.length > 0 ? (
             distribution.assignees.map((assignee, index) => {
               if (assignee.assignee_id)

From 30aaec9097845542ce020b27bff51103c8be6865 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Mon, 5 Feb 2024 20:46:01 +0530
Subject: [PATCH 13/58] chore: module date validation (#3565)

---
 web/components/modules/form.tsx    |  3 +--
 web/components/modules/sidebar.tsx | 24 ------------------------
 2 files changed, 1 insertion(+), 26 deletions(-)

diff --git a/web/components/modules/form.tsx b/web/components/modules/form.tsx
index 661d31ef5..be0792caa 100644
--- a/web/components/modules/form.tsx
+++ b/web/components/modules/form.tsx
@@ -70,7 +70,7 @@ export const ModuleForm: React.FC<Props> = ({
   const startDate = watch("start_date");
   const targetDate = watch("target_date");
 
-  const minDate = startDate ? new Date(startDate) : new Date();
+  const minDate = startDate ? new Date(startDate) : null;
   minDate?.setDate(minDate.getDate());
 
   const maxDate = targetDate ? new Date(targetDate) : null;
@@ -159,7 +159,6 @@ export const ModuleForm: React.FC<Props> = ({
                     onChange={(date) => onChange(date ? renderFormattedPayloadDate(date) : null)}
                     buttonVariant="border-with-text"
                     placeholder="Start date"
-                    minDate={new Date()}
                     maxDate={maxDate ?? undefined}
                     tabIndex={3}
                   />
diff --git a/web/components/modules/sidebar.tsx b/web/components/modules/sidebar.tsx
index c72478005..947885f9a 100644
--- a/web/components/modules/sidebar.tsx
+++ b/web/components/modules/sidebar.tsx
@@ -168,18 +168,6 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
     if (!watch("target_date") || watch("target_date") === "") endDateButtonRef.current?.click();
 
     if (watch("start_date") && watch("target_date") && watch("start_date") !== "" && watch("start_date") !== "") {
-      if (!isDateGreaterThanToday(`${watch("target_date")}`)) {
-        setToastAlert({
-          type: "error",
-          title: "Error!",
-          message: "Unable to create module in past date. Please enter a valid date.",
-        });
-        reset({
-          ...moduleDetails,
-        });
-        return;
-      }
-
       submitChanges({
         start_date: renderFormattedPayloadDate(`${watch("start_date")}`),
         target_date: renderFormattedPayloadDate(`${watch("target_date")}`),
@@ -198,18 +186,6 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
     if (!watch("start_date") || watch("start_date") === "") endDateButtonRef.current?.click();
 
     if (watch("start_date") && watch("target_date") && watch("start_date") !== "" && watch("start_date") !== "") {
-      if (!isDateGreaterThanToday(`${watch("target_date")}`)) {
-        setToastAlert({
-          type: "error",
-          title: "Error!",
-          message: "Unable to create module in past date. Please enter a valid date.",
-        });
-        reset({
-          ...moduleDetails,
-        });
-        return;
-      }
-
       submitChanges({
         start_date: renderFormattedPayloadDate(`${watch("start_date")}`),
         target_date: renderFormattedPayloadDate(`${watch("target_date")}`),

From 46ae0f98dcf14601346196e0abb1a8560f32ddb3 Mon Sep 17 00:00:00 2001
From: Manish Gupta <59428681+mguptahub@users.noreply.github.com>
Date: Tue, 6 Feb 2024 15:35:05 +0530
Subject: [PATCH 14/58] app_release value handled (#3571)

---
 deploy/selfhost/install.sh | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/deploy/selfhost/install.sh b/deploy/selfhost/install.sh
index 3f306c559..4e505cff9 100755
--- a/deploy/selfhost/install.sh
+++ b/deploy/selfhost/install.sh
@@ -49,7 +49,7 @@ function buildLocalImage() {
         cd $PLANE_TEMP_CODE_DIR
         if [ "$BRANCH" == "master" ];
         then
-            APP_RELEASE=latest
+            export APP_RELEASE=latest
         fi
 
         docker compose -f build.yml build --no-cache  >&2
@@ -205,6 +205,11 @@ else
     PULL_POLICY=never
 fi
 
+if [ "$BRANCH" == "master" ];
+then
+    export APP_RELEASE=latest
+fi
+
 # REMOVE SPECIAL CHARACTERS FROM BRANCH NAME
 if [ "$BRANCH" != "master" ];
 then

From ac2276922091eff084f8dd26f5e7d3b332d03d1b Mon Sep 17 00:00:00 2001
From: Bavisetti Narayan <72156168+NarayanBavisetti@users.noreply.github.com>
Date: Tue, 6 Feb 2024 16:47:14 +0530
Subject: [PATCH 15/58] chore: email trigger for new assignee (#3572)

---
 .../plane/bgtasks/issue_activites_task.py     | 27 ++++++++++++++++---
 1 file changed, 23 insertions(+), 4 deletions(-)

diff --git a/apiserver/plane/bgtasks/issue_activites_task.py b/apiserver/plane/bgtasks/issue_activites_task.py
index b9f6bd411..b86ab5e78 100644
--- a/apiserver/plane/bgtasks/issue_activites_task.py
+++ b/apiserver/plane/bgtasks/issue_activites_task.py
@@ -353,13 +353,18 @@ def track_assignees(
     issue_activities,
     epoch,
 ):
-    requested_assignees = set(
-        [str(asg) for asg in requested_data.get("assignee_ids", [])]
+    requested_assignees = (
+        set([str(asg) for asg in requested_data.get("assignee_ids", [])])
+        if requested_data is not None
+        else set()
     )
-    current_assignees = set(
-        [str(asg) for asg in current_instance.get("assignee_ids", [])]
+    current_assignees = (
+        set([str(asg) for asg in current_instance.get("assignee_ids", [])])
+        if current_instance is not None
+        else set()
     )
 
+
     added_assignees = requested_assignees - current_assignees
     dropped_assginees = current_assignees - requested_assignees
 
@@ -547,6 +552,20 @@ def create_issue_activity(
             epoch=epoch,
         )
     )
+    requested_data = (
+        json.loads(requested_data) if requested_data is not None else None
+    )
+    if requested_data.get("assignee_ids") is not None:
+        track_assignees(
+            requested_data,
+            current_instance,
+            issue_id,
+            project_id,
+            workspace_id,
+            actor_id,
+            issue_activities,
+            epoch,
+        )
 
 
 def update_issue_activity(

From 751b15a7a72f57a4bf0b3990c2f60491965994b2 Mon Sep 17 00:00:00 2001
From: Nikhil <118773738+pablohashescobar@users.noreply.github.com>
Date: Tue, 6 Feb 2024 17:00:42 +0530
Subject: [PATCH 16/58] dev: update the response for conflicting errors (#3568)

---
 apiserver/plane/api/views/cycle.py  |  4 +-
 apiserver/plane/api/views/issue.py  | 61 ++++++++++++++++++++++++++---
 apiserver/plane/api/views/module.py |  4 +-
 apiserver/plane/api/views/state.py  |  4 +-
 4 files changed, 62 insertions(+), 11 deletions(-)

diff --git a/apiserver/plane/api/views/cycle.py b/apiserver/plane/api/views/cycle.py
index 7a9cfb1b5..6f66c373e 100644
--- a/apiserver/plane/api/views/cycle.py
+++ b/apiserver/plane/api/views/cycle.py
@@ -262,7 +262,7 @@ class CycleAPIEndpoint(WebhookMixin, BaseAPIView):
                     return Response(
                         {
                             "error": "Cycle with the same external id and external source already exists",
-                            "cycle": str(cycle.id),
+                            "id": str(cycle.id),
                         },
                         status=status.HTTP_409_CONFLICT,
                     )
@@ -325,7 +325,7 @@ class CycleAPIEndpoint(WebhookMixin, BaseAPIView):
                 return Response(
                     {
                         "error": "Cycle with the same external id and external source already exists",
-                        "cycle_id": str(cycle.id),
+                        "id": str(cycle.id),
                     },
                     status=status.HTTP_409_CONFLICT,
                 )
diff --git a/apiserver/plane/api/views/issue.py b/apiserver/plane/api/views/issue.py
index 530eef5bf..a759b15f6 100644
--- a/apiserver/plane/api/views/issue.py
+++ b/apiserver/plane/api/views/issue.py
@@ -239,7 +239,7 @@ class IssueAPIEndpoint(WebhookMixin, BaseAPIView):
                 return Response(
                     {
                         "error": "Issue with the same external id and external source already exists",
-                        "issue_id": str(issue.id),
+                        "id": str(issue.id),
                     },
                     status=status.HTTP_409_CONFLICT,
                 )
@@ -286,14 +286,16 @@ class IssueAPIEndpoint(WebhookMixin, BaseAPIView):
                 and Issue.objects.filter(
                     project_id=project_id,
                     workspace__slug=slug,
-                    external_source=request.data.get("external_source", issue.external_source),
+                    external_source=request.data.get(
+                        "external_source", issue.external_source
+                    ),
                     external_id=request.data.get("external_id"),
                 ).exists()
             ):
                 return Response(
                     {
                         "error": "Issue with the same external id and external source already exists",
-                        "issue_id": str(issue.id),
+                        "id": str(issue.id),
                     },
                     status=status.HTTP_409_CONFLICT,
                 )
@@ -362,6 +364,30 @@ class LabelAPIEndpoint(BaseAPIView):
         try:
             serializer = LabelSerializer(data=request.data)
             if serializer.is_valid():
+                if (
+                    request.data.get("external_id")
+                    and request.data.get("external_source")
+                    and Label.objects.filter(
+                        project_id=project_id,
+                        workspace__slug=slug,
+                        external_source=request.data.get("external_source"),
+                        external_id=request.data.get("external_id"),
+                    ).exists()
+                ):
+                    label = Label.objects.filter(
+                        workspace__slug=slug,
+                        project_id=project_id,
+                        external_id=request.data.get("external_id"),
+                        external_source=request.data.get("external_source"),
+                    ).first()
+                    return Response(
+                        {
+                            "error": "Label with the same external id and external source already exists",
+                            "id": str(label.id),
+                        },
+                        status=status.HTTP_409_CONFLICT,
+                    )
+
                 serializer.save(project_id=project_id)
                 return Response(
                     serializer.data, status=status.HTTP_201_CREATED
@@ -370,11 +396,17 @@ class LabelAPIEndpoint(BaseAPIView):
                 serializer.errors, status=status.HTTP_400_BAD_REQUEST
             )
         except IntegrityError:
+            label = Label.objects.filter(
+                workspace__slug=slug,
+                project_id=project_id,
+                name=request.data.get("name"),
+            ).first()
             return Response(
                 {
-                    "error": "Label with the same name already exists in the project"
+                    "error": "Label with the same name already exists in the project",
+                    "id": str(label.id),
                 },
-                status=status.HTTP_400_BAD_REQUEST,
+                status=status.HTTP_409_CONFLICT,
             )
 
     def get(self, request, slug, project_id, pk=None):
@@ -401,6 +433,25 @@ class LabelAPIEndpoint(BaseAPIView):
         label = self.get_queryset().get(pk=pk)
         serializer = LabelSerializer(label, data=request.data, partial=True)
         if serializer.is_valid():
+            if (
+                str(request.data.get("external_id"))
+                and (label.external_id != str(request.data.get("external_id")))
+                and Issue.objects.filter(
+                    project_id=project_id,
+                    workspace__slug=slug,
+                    external_source=request.data.get(
+                        "external_source", label.external_source
+                    ),
+                    external_id=request.data.get("external_id"),
+                ).exists()
+            ):
+                return Response(
+                    {
+                        "error": "Label with the same external id and external source already exists",
+                        "id": str(label.id),
+                    },
+                    status=status.HTTP_409_CONFLICT,
+                )
             serializer.save()
             return Response(serializer.data, status=status.HTTP_200_OK)
         return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
diff --git a/apiserver/plane/api/views/module.py b/apiserver/plane/api/views/module.py
index e2d59e126..d509a53c7 100644
--- a/apiserver/plane/api/views/module.py
+++ b/apiserver/plane/api/views/module.py
@@ -151,7 +151,7 @@ class ModuleAPIEndpoint(WebhookMixin, BaseAPIView):
                 return Response(
                     {
                         "error": "Module with the same external id and external source already exists",
-                        "module_id": str(module.id),
+                        "id": str(module.id),
                     },
                     status=status.HTTP_409_CONFLICT,
                 )
@@ -185,7 +185,7 @@ class ModuleAPIEndpoint(WebhookMixin, BaseAPIView):
                 return Response(
                     {
                         "error": "Module with the same external id and external source already exists",
-                        "module_id": str(module.id),
+                        "id": str(module.id),
                     },
                     status=status.HTTP_409_CONFLICT,
                 )
diff --git a/apiserver/plane/api/views/state.py b/apiserver/plane/api/views/state.py
index 88fb083f0..0a262a071 100644
--- a/apiserver/plane/api/views/state.py
+++ b/apiserver/plane/api/views/state.py
@@ -57,7 +57,7 @@ class StateAPIEndpoint(BaseAPIView):
                 return Response(
                     {
                         "error": "State with the same external id and external source already exists",
-                        "state_id": str(state.id),
+                        "id": str(state.id),
                     },
                     status=status.HTTP_409_CONFLICT,
                 )
@@ -128,7 +128,7 @@ class StateAPIEndpoint(BaseAPIView):
                 return Response(
                     {
                         "error": "State with the same external id and external source already exists",
-                        "state_id": str(state.id),
+                        "id": str(state.id),
                     },
                     status=status.HTTP_409_CONFLICT,
                 )

From 4b2a9c833594594c682d86666ca381f5cf0b7dc7 Mon Sep 17 00:00:00 2001
From: Ramesh Kumar Chandra
 <31303617+rameshkumarchandra@users.noreply.github.com>
Date: Wed, 7 Feb 2024 13:44:03 +0530
Subject: [PATCH 17/58] style: responsive breadcrumbs and headers for
 dashboard, projects, project issues, cycles, cycle issues, module issues
 (#3580)

---
 .../analytics/project-modal/modal.tsx         |  10 +-
 web/components/cycles/cycle-mobile-header.tsx | 168 +++++++++++++
 web/components/cycles/cycles-list-item.tsx    | 164 ++++++-------
 web/components/headers/cycle-issues.tsx       | 227 ++++++++++--------
 web/components/headers/cycles.tsx             | 142 +++++++----
 web/components/headers/module-issues.tsx      | 225 +++++++++--------
 web/components/headers/project-issues.tsx     | 209 ++++++++--------
 web/components/headers/projects.tsx           |  11 +-
 .../headers/workspace-analytics.tsx           |   9 -
 .../headers/workspace-dashboard.tsx           |   8 +-
 .../filters/header/helpers/dropdown.tsx       |   9 +-
 .../issues/issues-mobile-header.tsx           | 166 +++++++++++++
 .../modules/module-mobile-header.tsx          | 162 +++++++++++++
 .../projects/[projectId]/cycles/index.tsx     |  55 +++--
 14 files changed, 1065 insertions(+), 500 deletions(-)
 create mode 100644 web/components/cycles/cycle-mobile-header.tsx
 create mode 100644 web/components/issues/issues-mobile-header.tsx
 create mode 100644 web/components/modules/module-mobile-header.tsx

diff --git a/web/components/analytics/project-modal/modal.tsx b/web/components/analytics/project-modal/modal.tsx
index a4b82c4b6..df61411f2 100644
--- a/web/components/analytics/project-modal/modal.tsx
+++ b/web/components/analytics/project-modal/modal.tsx
@@ -38,14 +38,12 @@ export const ProjectAnalyticsModal: React.FC<Props> = observer((props) => {
         >
           <Dialog.Panel className="fixed inset-0 z-20 h-full w-full overflow-y-auto">
             <div
-              className={`fixed right-0 top-0 z-20 h-full bg-custom-background-100 shadow-custom-shadow-md ${
-                fullScreen ? "w-full p-2" : "w-1/2"
-              }`}
+              className={`fixed right-0 top-0 z-20 h-full bg-custom-background-100 shadow-custom-shadow-md ${fullScreen ? "w-full p-2" : "w-full sm:w-full md:w-1/2"
+                }`}
             >
               <div
-                className={`flex h-full flex-col overflow-hidden border-custom-border-200 bg-custom-background-100 text-left ${
-                  fullScreen ? "rounded-lg border" : "border-l"
-                }`}
+                className={`flex h-full flex-col overflow-hidden border-custom-border-200 bg-custom-background-100 text-left ${fullScreen ? "rounded-lg border" : "border-l"
+                  }`}
               >
                 <ProjectAnalyticsModalHeader
                   fullScreen={fullScreen}
diff --git a/web/components/cycles/cycle-mobile-header.tsx b/web/components/cycles/cycle-mobile-header.tsx
new file mode 100644
index 000000000..b893bf993
--- /dev/null
+++ b/web/components/cycles/cycle-mobile-header.tsx
@@ -0,0 +1,168 @@
+import { useCallback, useState } from "react";
+import router from "next/router";
+//components
+import { CustomMenu } from "@plane/ui";
+// icons
+import { Calendar, ChevronDown, Kanban, List } from "lucide-react";
+import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOptions, TIssueLayouts } from "@plane/types";
+// hooks
+import { useIssues, useCycle, useProjectState, useLabel, useMember } from "hooks/store";
+// constants
+import { EIssueFilterType, EIssuesStoreType, ISSUE_DISPLAY_FILTERS_BY_LAYOUT, ISSUE_LAYOUTS } from "constants/issue";
+import { ProjectAnalyticsModal } from "components/analytics";
+import { DisplayFiltersSelection, FilterSelection, FiltersDropdown } from "components/issues";
+
+export const CycleMobileHeader = () => {
+  const [analyticsModal, setAnalyticsModal] = useState(false);
+  const { getCycleById } = useCycle();
+  const layouts = [
+    { key: "list", title: "List", icon: List },
+    { key: "kanban", title: "Kanban", icon: Kanban },
+    { key: "calendar", title: "Calendar", icon: Calendar },
+  ];
+
+  const { workspaceSlug, projectId, cycleId } = router.query as {
+    workspaceSlug: string;
+    projectId: string;
+    cycleId: string;
+  };
+  const cycleDetails = cycleId ? getCycleById(cycleId.toString()) : undefined;
+  // store hooks
+  const {
+    issuesFilter: { issueFilters, updateFilters },
+  } = useIssues(EIssuesStoreType.CYCLE);
+  const activeLayout = issueFilters?.displayFilters?.layout;
+
+  const handleLayoutChange = useCallback(
+    (layout: TIssueLayouts) => {
+      if (!workspaceSlug || !projectId) return;
+      updateFilters(workspaceSlug, projectId, EIssueFilterType.DISPLAY_FILTERS, { layout: layout }, cycleId);
+    },
+    [workspaceSlug, projectId, cycleId, updateFilters]
+  );
+
+  const { projectStates } = useProjectState();
+  const { projectLabels } = useLabel();
+  const {
+    project: { projectMemberIds },
+  } = useMember();
+
+  const handleFiltersUpdate = useCallback(
+    (key: keyof IIssueFilterOptions, value: string | string[]) => {
+      if (!workspaceSlug || !projectId) return;
+      const newValues = issueFilters?.filters?.[key] ?? [];
+
+      if (Array.isArray(value)) {
+        value.forEach((val) => {
+          if (!newValues.includes(val)) newValues.push(val);
+        });
+      } else {
+        if (issueFilters?.filters?.[key]?.includes(value)) newValues.splice(newValues.indexOf(value), 1);
+        else newValues.push(value);
+      }
+
+      updateFilters(workspaceSlug, projectId, EIssueFilterType.FILTERS, { [key]: newValues }, cycleId);
+    },
+    [workspaceSlug, projectId, cycleId, issueFilters, updateFilters]
+  );
+
+  const handleDisplayFilters = useCallback(
+    (updatedDisplayFilter: Partial<IIssueDisplayFilterOptions>) => {
+      if (!workspaceSlug || !projectId) return;
+      updateFilters(workspaceSlug, projectId, EIssueFilterType.DISPLAY_FILTERS, updatedDisplayFilter, cycleId);
+    },
+    [workspaceSlug, projectId, cycleId, updateFilters]
+  );
+
+  const handleDisplayProperties = useCallback(
+    (property: Partial<IIssueDisplayProperties>) => {
+      if (!workspaceSlug || !projectId) return;
+      updateFilters(workspaceSlug, projectId, EIssueFilterType.DISPLAY_PROPERTIES, property, cycleId);
+    },
+    [workspaceSlug, projectId, cycleId, updateFilters]
+  );
+
+  return (
+    <>
+      <ProjectAnalyticsModal
+        isOpen={analyticsModal}
+        onClose={() => setAnalyticsModal(false)}
+        cycleDetails={cycleDetails ?? undefined}
+      />
+      <div className="flex justify-evenly py-2 border-b border-custom-border-200">
+        <CustomMenu
+          maxHeight={"md"}
+          className="flex flex-grow justify-center text-custom-text-200 text-sm"
+          placement="bottom-start"
+          customButton={<span className="flex flex-grow justify-center text-custom-text-200 text-sm">Layout</span>}
+          customButtonClassName="flex flex-grow justify-center text-custom-text-200 text-sm"
+          closeOnSelect
+        >
+          {layouts.map((layout, index) => (
+            <CustomMenu.MenuItem
+              onClick={() => {
+                handleLayoutChange(ISSUE_LAYOUTS[index].key);
+              }}
+              className="flex items-center gap-2"
+            >
+              <layout.icon className="w-3 h-3" />
+              <div className="text-custom-text-300">{layout.title}</div>
+            </CustomMenu.MenuItem>
+          ))}
+        </CustomMenu>
+        <div className="flex flex-grow justify-center border-l border-custom-border-200 items-center text-custom-text-200 text-sm">
+          <FiltersDropdown
+            title="Filters"
+            placement="bottom-end"
+            menuButton={
+              <span className="flex items-center text-custom-text-200 text-sm">
+                Filters
+                <ChevronDown className="text-custom-text-200  h-4 w-4 ml-2" />
+              </span>
+            }
+          >
+            <FilterSelection
+              filters={issueFilters?.filters ?? {}}
+              handleFiltersUpdate={handleFiltersUpdate}
+              layoutDisplayFiltersOptions={
+                activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[activeLayout] : undefined
+              }
+              labels={projectLabels}
+              memberIds={projectMemberIds ?? undefined}
+              states={projectStates}
+            />
+          </FiltersDropdown>
+        </div>
+        <div className="flex flex-grow justify-center border-l border-custom-border-200 items-center text-custom-text-200 text-sm">
+          <FiltersDropdown
+            title="Display"
+            placement="bottom-end"
+            menuButton={
+              <span className="flex items-center text-custom-text-200 text-sm">
+                Display
+                <ChevronDown className="text-custom-text-200 h-4 w-4 ml-2" />
+              </span>
+            }
+          >
+            <DisplayFiltersSelection
+              layoutDisplayFiltersOptions={
+                activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[activeLayout] : undefined
+              }
+              displayFilters={issueFilters?.displayFilters ?? {}}
+              handleDisplayFiltersUpdate={handleDisplayFilters}
+              displayProperties={issueFilters?.displayProperties ?? {}}
+              handleDisplayPropertiesUpdate={handleDisplayProperties}
+            />
+          </FiltersDropdown>
+        </div>
+
+        <span
+          onClick={() => setAnalyticsModal(true)}
+          className="flex flex-grow justify-center text-custom-text-200 text-sm border-l border-custom-border-200"
+        >
+          Analytics
+        </span>
+      </div>
+    </>
+  );
+};
diff --git a/web/components/cycles/cycles-list-item.tsx b/web/components/cycles/cycles-list-item.tsx
index 86de8d0c0..a6d467091 100644
--- a/web/components/cycles/cycles-list-item.tsx
+++ b/web/components/cycles/cycles-list-item.tsx
@@ -159,10 +159,10 @@ export const CyclesListItem: FC<TCyclesListItem> = (props) => {
         projectId={projectId}
       />
       <Link href={`/${workspaceSlug}/projects/${projectId}/cycles/${cycleDetails.id}`}>
-        <div className="group flex h-16 w-full items-center justify-between gap-5 border-b border-custom-border-100 bg-custom-background-100 px-5 py-6 text-sm hover:bg-custom-background-90">
-          <div className="flex w-full items-center gap-3 truncate">
-            <div className="flex items-center gap-4 truncate">
-              <span className="flex-shrink-0">
+        <div className="group flex flex-col md:flex-row w-full items-center justify-between gap-5 border-b border-custom-border-100 bg-custom-background-100 px-5 py-6 text-sm hover:bg-custom-background-90">
+          <div className="relative w-full flex items-center justify-between gap-3 overflow-hidden">
+            <div className="relative w-full flex items-center gap-3 overflow-hidden">
+              <div className="flex-shrink-0">
                 <CircularProgressIndicator size={38} percentage={progress}>
                   {isCompleted ? (
                     progress === 100 ? (
@@ -176,95 +176,97 @@ export const CyclesListItem: FC<TCyclesListItem> = (props) => {
                     <span className="text-xs text-custom-text-300">{`${progress}%`}</span>
                   )}
                 </CircularProgressIndicator>
-              </span>
+              </div>
 
-              <div className="flex items-center gap-2.5">
-                <span className="flex-shrink-0">
-                  <CycleGroupIcon cycleGroup={cycleStatus} className="h-3.5 w-3.5" />
-                </span>
+              <div className="relative flex items-center gap-2.5 overflow-hidden">
+                <CycleGroupIcon cycleGroup={cycleStatus} className="h-3.5 w-3.5 flex-shrink-0" />
                 <Tooltip tooltipContent={cycleDetails.name} position="top">
-                  <span className="truncate text-base font-medium">{cycleDetails.name}</span>
+                  <span className="truncate line-clamp-1 inline-block overflow-hidden text-base font-medium">
+                    {cycleDetails.name}
+                  </span>
                 </Tooltip>
               </div>
-            </div>
-            <button onClick={openCycleOverview} className="z-10 hidden flex-shrink-0 group-hover:flex">
-              <Info className="h-4 w-4 text-custom-text-400" />
-            </button>
-          </div>
 
-          <div className="flex w-full items-center justify-end gap-2.5 md:w-auto md:flex-shrink-0 ">
-            <div className="flex items-center justify-center">
-              {currentCycle && (
-                <span
-                  className="flex h-6 w-20 items-center justify-center rounded-sm text-center text-xs"
-                  style={{
-                    color: currentCycle.color,
-                    backgroundColor: `${currentCycle.color}20`,
-                  }}
-                >
-                  {currentCycle.value === "current"
-                    ? `${daysLeft} ${daysLeft > 1 ? "days" : "day"} left`
-                    : `${currentCycle.label}`}
-                </span>
-              )}
+              <button onClick={openCycleOverview} className="flex-shrink-0 z-10 invisible group-hover:visible">
+                <Info className="h-4 w-4 text-custom-text-400" />
+              </button>
             </div>
 
-            {renderDate && (
-              <span className="flex w-40 items-center justify-center gap-2 text-xs text-custom-text-300">
-                {renderFormattedDate(startDate) ?? "_ _"} - {renderFormattedDate(endDate) ?? "_ _"}
-              </span>
-            )}
-
-            <Tooltip tooltipContent={`${cycleDetails.assignees.length} Members`}>
-              <div className="flex w-16 cursor-default items-center justify-center gap-1">
-                {cycleDetails.assignees.length > 0 ? (
-                  <AvatarGroup showTooltip={false}>
-                    {cycleDetails.assignees.map((assignee) => (
-                      <Avatar key={assignee.id} name={assignee.display_name} src={assignee.avatar} />
-                    ))}
-                  </AvatarGroup>
-                ) : (
-                  <span className="flex h-5 w-5 items-end justify-center rounded-full border border-dashed border-custom-text-400 bg-custom-background-80">
-                    <User2 className="h-4 w-4 text-custom-text-400" />
-                  </span>
-                )}
+            {currentCycle && (
+              <div
+                className="flex-shrink-0 relative flex h-6 w-20 items-center justify-center rounded-sm text-center text-xs"
+                style={{
+                  color: currentCycle.color,
+                  backgroundColor: `${currentCycle.color}20`,
+                }}
+              >
+                {currentCycle.value === "current"
+                  ? `${daysLeft} ${daysLeft > 1 ? "days" : "day"} left`
+                  : `${currentCycle.label}`}
               </div>
-            </Tooltip>
-            {isEditingAllowed &&
-              (cycleDetails.is_favorite ? (
-                <button type="button" onClick={handleRemoveFromFavorites}>
-                  <Star className="h-3.5 w-3.5 fill-current text-amber-500" />
-                </button>
-              ) : (
-                <button type="button" onClick={handleAddToFavorites}>
-                  <Star className="h-3.5 w-3.5 text-custom-text-200" />
-                </button>
-              ))}
+            )}
+          </div>
+          <div className="flex-shrink-0 relative overflow-hidden flex w-full items-center justify-between md:justify-end gap-2.5 md:w-auto md:flex-shrink-0 ">
+            <div className="text-xs text-custom-text-300">
+              {renderDate && `${renderFormattedDate(startDate) ?? `_ _`} - ${renderFormattedDate(endDate) ?? `_ _`}`}
+            </div>
 
-            <CustomMenu ellipsis>
-              {!isCompleted && isEditingAllowed && (
+            <div className="flex-shrink-0 relative flex items-center gap-3">
+              <Tooltip tooltipContent={`${cycleDetails.assignees.length} Members`}>
+                <div className="flex w-10 cursor-default items-center justify-center">
+                  {cycleDetails.assignees.length > 0 ? (
+                    <AvatarGroup showTooltip={false}>
+                      {cycleDetails.assignees.map((assignee) => (
+                        <Avatar key={assignee.id} name={assignee.display_name} src={assignee.avatar} />
+                      ))}
+                    </AvatarGroup>
+                  ) : (
+                    <span className="flex h-5 w-5 items-end justify-center rounded-full border border-dashed border-custom-text-400 bg-custom-background-80">
+                      <User2 className="h-4 w-4 text-custom-text-400" />
+                    </span>
+                  )}
+                </div>
+              </Tooltip>
+
+              {isEditingAllowed && (
                 <>
-                  <CustomMenu.MenuItem onClick={handleEditCycle}>
-                    <span className="flex items-center justify-start gap-2">
-                      <Pencil className="h-3 w-3" />
-                      <span>Edit cycle</span>
-                    </span>
-                  </CustomMenu.MenuItem>
-                  <CustomMenu.MenuItem onClick={handleDeleteCycle}>
-                    <span className="flex items-center justify-start gap-2">
-                      <Trash2 className="h-3 w-3" />
-                      <span>Delete cycle</span>
-                    </span>
-                  </CustomMenu.MenuItem>
+                  {cycleDetails.is_favorite ? (
+                    <button type="button" onClick={handleRemoveFromFavorites}>
+                      <Star className="h-3.5 w-3.5 fill-current text-amber-500" />
+                    </button>
+                  ) : (
+                    <button type="button" onClick={handleAddToFavorites}>
+                      <Star className="h-3.5 w-3.5 text-custom-text-200" />
+                    </button>
+                  )}
+
+                  <CustomMenu ellipsis>
+                    {!isCompleted && isEditingAllowed && (
+                      <>
+                        <CustomMenu.MenuItem onClick={handleEditCycle}>
+                          <span className="flex items-center justify-start gap-2">
+                            <Pencil className="h-3 w-3" />
+                            <span>Edit cycle</span>
+                          </span>
+                        </CustomMenu.MenuItem>
+                        <CustomMenu.MenuItem onClick={handleDeleteCycle}>
+                          <span className="flex items-center justify-start gap-2">
+                            <Trash2 className="h-3 w-3" />
+                            <span>Delete cycle</span>
+                          </span>
+                        </CustomMenu.MenuItem>
+                      </>
+                    )}
+                    <CustomMenu.MenuItem onClick={handleCopyText}>
+                      <span className="flex items-center justify-start gap-2">
+                        <LinkIcon className="h-3 w-3" />
+                        <span>Copy cycle link</span>
+                      </span>
+                    </CustomMenu.MenuItem>
+                  </CustomMenu>
                 </>
               )}
-              <CustomMenu.MenuItem onClick={handleCopyText}>
-                <span className="flex items-center justify-start gap-2">
-                  <LinkIcon className="h-3 w-3" />
-                  <span>Copy cycle link</span>
-                </span>
-              </CustomMenu.MenuItem>
-            </CustomMenu>
+            </div>
           </div>
         </div>
       </Link>
diff --git a/web/components/headers/cycle-issues.tsx b/web/components/headers/cycle-issues.tsx
index 7cfc492f4..44f4f944d 100644
--- a/web/components/headers/cycle-issues.tsx
+++ b/web/components/headers/cycle-issues.tsx
@@ -23,7 +23,7 @@ import { BreadcrumbLink } from "components/common";
 // ui
 import { Breadcrumbs, Button, ContrastIcon, CustomMenu } from "@plane/ui";
 // icons
-import { ArrowRight, Plus } from "lucide-react";
+import { ArrowRight, Plus, PanelRight } from "lucide-react";
 // helpers
 import { truncateText } from "helpers/string.helper";
 import { renderEmoji } from "helpers/emoji.helper";
@@ -32,6 +32,8 @@ import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOption
 // constants
 import { EIssueFilterType, EIssuesStoreType, ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "constants/issue";
 import { EUserProjectRoles } from "constants/project";
+import { cn } from "helpers/common.helper";
+import { CycleMobileHeader } from "components/cycles/cycle-mobile-header";
 
 const CycleDropdownOption: React.FC<{ cycleId: string }> = ({ cycleId }) => {
   // router
@@ -147,117 +149,136 @@ export const CycleIssuesHeader: React.FC = observer(() => {
         onClose={() => setAnalyticsModal(false)}
         cycleDetails={cycleDetails ?? undefined}
       />
-      <div className="relative z-10 flex h-[3.75rem] w-full items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
-        <div className="flex items-center gap-2">
-          <SidebarHamburgerToggle />
-          <Breadcrumbs>
-            <Breadcrumbs.BreadcrumbItem
-              type="text"
-              link={
-                <BreadcrumbLink
-                  label={currentProjectDetails?.name ?? "Project"}
-                  href={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`}
-                  icon={
-                    currentProjectDetails?.emoji ? (
-                      renderEmoji(currentProjectDetails.emoji)
-                    ) : currentProjectDetails?.icon_prop ? (
-                      renderEmoji(currentProjectDetails.icon_prop)
-                    ) : (
-                      <span className="flex h-4 w-4 items-center justify-center rounded bg-gray-700 uppercase text-white">
-                        {currentProjectDetails?.name.charAt(0)}
-                      </span>
-                    )
-                  }
-                />
-              }
+      <div className="relative z-10 w-full items-center gap-x-2 gap-y-4">
+        <div className="flex justify-between border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
+          <div className="flex items-center gap-2">
+            <SidebarHamburgerToggle />
+            <Breadcrumbs>
+              <Breadcrumbs.BreadcrumbItem
+                type="text"
+                link={
+                  <span>
+                    <span className="hidden md:block">
+                      <BreadcrumbLink
+                        label={currentProjectDetails?.name ?? "Project"}
+                        href={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`}
+                        icon={
+                          currentProjectDetails?.emoji ? (
+                            renderEmoji(currentProjectDetails.emoji)
+                          ) : currentProjectDetails?.icon_prop ? (
+                            renderEmoji(currentProjectDetails.icon_prop)
+                          ) : (
+                            <span className="flex h-4 w-4 items-center justify-center rounded bg-gray-700 uppercase text-white">
+                              {currentProjectDetails?.name.charAt(0)}
+                            </span>
+                          )
+                        }
+                      />
+                    </span>
+                    <Link href={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`} className="block md:hidden pl-2 text-custom-text-300">...</Link>
+                  </span>
+                }
+              />
+              <Breadcrumbs.BreadcrumbItem
+                type="text"
+                link={
+                  <BreadcrumbLink
+                    label="Cycles"
+                    href={`/${workspaceSlug}/projects/${projectId}/cycles`}
+                    icon={<ContrastIcon className="h-4 w-4 text-custom-text-300" />}
+                  />
+                }
+              />
+              <Breadcrumbs.BreadcrumbItem
+                type="component"
+                component={
+                  <CustomMenu
+                    label={
+                      <>
+                        <ContrastIcon className="h-3 w-3" />
+                        {cycleDetails?.name && truncateText(cycleDetails.name, 40)}
+                      </>
+                    }
+                    className="ml-1.5 flex-shrink-0"
+                    placement="bottom-start"
+                  >
+                    {currentProjectCycleIds?.map((cycleId) => (
+                      <CycleDropdownOption key={cycleId} cycleId={cycleId} />
+                    ))}
+                  </CustomMenu>
+                }
+              />
+            </Breadcrumbs>
+          </div>
+          <div className="hidden md:flex items-center gap-2 ">
+            <LayoutSelection
+              layouts={["list", "kanban", "calendar", "spreadsheet", "gantt_chart"]}
+              onChange={(layout) => handleLayoutChange(layout)}
+              selectedLayout={activeLayout}
             />
-            <Breadcrumbs.BreadcrumbItem
-              type="text"
-              link={
-                <BreadcrumbLink
-                  label="Cycles"
-                  href={`/${workspaceSlug}/projects/${projectId}/cycles`}
-                  icon={<ContrastIcon className="h-4 w-4 text-custom-text-300" />}
-                />
-              }
-            />
-            <Breadcrumbs.BreadcrumbItem
-              type="component"
-              component={
-                <CustomMenu
-                  label={
-                    <>
-                      <ContrastIcon className="h-3 w-3" />
-                      {cycleDetails?.name && truncateText(cycleDetails.name, 40)}
-                    </>
-                  }
-                  className="ml-1.5 flex-shrink-0"
-                  placement="bottom-start"
-                >
-                  {currentProjectCycleIds?.map((cycleId) => (
-                    <CycleDropdownOption key={cycleId} cycleId={cycleId} />
-                  ))}
-                </CustomMenu>
-              }
-            />
-          </Breadcrumbs>
-        </div>
-        <div className="flex items-center gap-2">
-          <LayoutSelection
-            layouts={["list", "kanban", "calendar", "spreadsheet", "gantt_chart"]}
-            onChange={(layout) => handleLayoutChange(layout)}
-            selectedLayout={activeLayout}
-          />
-          <FiltersDropdown title="Filters" placement="bottom-end">
-            <FilterSelection
-              filters={issueFilters?.filters ?? {}}
-              handleFiltersUpdate={handleFiltersUpdate}
-              layoutDisplayFiltersOptions={
-                activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[activeLayout] : undefined
-              }
-              labels={projectLabels}
-              memberIds={projectMemberIds ?? undefined}
-              states={projectStates}
-            />
-          </FiltersDropdown>
-          <FiltersDropdown title="Display" placement="bottom-end">
-            <DisplayFiltersSelection
-              layoutDisplayFiltersOptions={
-                activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[activeLayout] : undefined
-              }
-              displayFilters={issueFilters?.displayFilters ?? {}}
-              handleDisplayFiltersUpdate={handleDisplayFilters}
-              displayProperties={issueFilters?.displayProperties ?? {}}
-              handleDisplayPropertiesUpdate={handleDisplayProperties}
-            />
-          </FiltersDropdown>
+            <FiltersDropdown title="Filters" placement="bottom-end">
+              <FilterSelection
+                filters={issueFilters?.filters ?? {}}
+                handleFiltersUpdate={handleFiltersUpdate}
+                layoutDisplayFiltersOptions={
+                  activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[activeLayout] : undefined
+                }
+                labels={projectLabels}
+                memberIds={projectMemberIds ?? undefined}
+                states={projectStates}
+              />
+            </FiltersDropdown>
+            <FiltersDropdown title="Display" placement="bottom-end">
+              <DisplayFiltersSelection
+                layoutDisplayFiltersOptions={
+                  activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[activeLayout] : undefined
+                }
+                displayFilters={issueFilters?.displayFilters ?? {}}
+                handleDisplayFiltersUpdate={handleDisplayFilters}
+                displayProperties={issueFilters?.displayProperties ?? {}}
+                handleDisplayPropertiesUpdate={handleDisplayProperties}
+              />
+            </FiltersDropdown>
 
-          {canUserCreateIssue && (
-            <>
-              <Button onClick={() => setAnalyticsModal(true)} variant="neutral-primary" size="sm">
-                Analytics
-              </Button>
-              <Button
-                onClick={() => {
-                  setTrackElement("Cycle issues page");
-                  toggleCreateIssueModal(true, EIssuesStoreType.CYCLE);
-                }}
-                size="sm"
-                prependIcon={<Plus />}
-              >
-                Add Issue
-              </Button>
-            </>
-          )}
+            {canUserCreateIssue && (
+              <>
+                <Button onClick={() => setAnalyticsModal(true)} variant="neutral-primary" size="sm">
+                  Analytics
+                </Button>
+                <Button
+                  onClick={() => {
+                    setTrackElement("Cycle issues page");
+                    toggleCreateIssueModal(true, EIssuesStoreType.CYCLE);
+                  }}
+                  size="sm"
+                  prependIcon={<Plus />}
+                >
+                  Add Issue
+                </Button>
+              </>
+            )}
+            <button
+              type="button"
+              className="grid h-7 w-7 place-items-center rounded p-1 outline-none hover:bg-custom-sidebar-background-80"
+              onClick={toggleSidebar}
+            >
+              <ArrowRight className={`h-4 w-4 duration-300 ${isSidebarCollapsed ? "-rotate-180" : ""}`} />
+            </button>
+          </div>
           <button
             type="button"
-            className="grid h-7 w-7 place-items-center rounded p-1 outline-none hover:bg-custom-sidebar-background-80"
+            className="grid md:hidden h-7 w-7 place-items-center rounded p-1 outline-none hover:bg-custom-sidebar-background-80"
             onClick={toggleSidebar}
           >
-            <ArrowRight className={`h-4 w-4 duration-300 ${isSidebarCollapsed ? "-rotate-180" : ""}`} />
+            <PanelRight className={cn("w-4 h-4", !isSidebarCollapsed ? "text-[#3E63DD]" : "text-custom-text-200")} />
           </button>
         </div>
+        <div className="block sm:block md:hidden">
+          <CycleMobileHeader />
+        </div>
       </div>
     </>
   );
 });
+
+
diff --git a/web/components/headers/cycles.tsx b/web/components/headers/cycles.tsx
index a9ad3a01f..a4bf963ab 100644
--- a/web/components/headers/cycles.tsx
+++ b/web/components/headers/cycles.tsx
@@ -1,22 +1,24 @@
-import { FC } from "react";
+import { FC, useCallback } from "react";
 import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
-import { Plus } from "lucide-react";
+import { List, Plus } from "lucide-react";
 // hooks
 import { useApplication, useEventTracker, useProject, useUser } from "hooks/store";
 // ui
-import { Breadcrumbs, Button, ContrastIcon } from "@plane/ui";
+import { Breadcrumbs, Button, ContrastIcon, CustomMenu } from "@plane/ui";
 // helpers
 import { renderEmoji } from "helpers/emoji.helper";
 import { EUserProjectRoles } from "constants/project";
 // components
 import { SidebarHamburgerToggle } from "components/core/sidebar/sidebar-menu-hamburger-toggle";
 import { BreadcrumbLink } from "components/common";
+import { TCycleLayout } from "@plane/types";
+import { CYCLE_VIEW_LAYOUTS } from "constants/cycle";
+import useLocalStorage from "hooks/use-local-storage";
 
 export const CyclesHeader: FC = observer(() => {
   // router
   const router = useRouter();
-  const { workspaceSlug } = router.query;
   // store hooks
   const {
     commandPalette: { toggleCreateCycleModal },
@@ -30,54 +32,96 @@ export const CyclesHeader: FC = observer(() => {
   const canUserCreateCycle =
     currentProjectRole && [EUserProjectRoles.ADMIN, EUserProjectRoles.MEMBER].includes(currentProjectRole);
 
+  const { workspaceSlug } = router.query as {
+    workspaceSlug: string;
+  };
+  const { setValue: setCycleLayout } = useLocalStorage<TCycleLayout>("cycle_layout", "list");
+
+  const handleCurrentLayout = useCallback(
+    (_layout: TCycleLayout) => {
+      setCycleLayout(_layout);
+    },
+    [setCycleLayout]
+  );
+
   return (
-    <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
-      <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
-        <SidebarHamburgerToggle />
-        <div>
-          <Breadcrumbs>
-            <Breadcrumbs.BreadcrumbItem
-              type="text"
-              link={
-                <BreadcrumbLink
-                  label={currentProjectDetails?.name ?? "Project"}
-                  href={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`}
-                  icon={
-                    currentProjectDetails?.emoji ? (
-                      renderEmoji(currentProjectDetails.emoji)
-                    ) : currentProjectDetails?.icon_prop ? (
-                      renderEmoji(currentProjectDetails.icon_prop)
-                    ) : (
-                      <span className="flex h-4 w-4 items-center justify-center rounded bg-gray-700 uppercase text-white">
-                        {currentProjectDetails?.name.charAt(0)}
-                      </span>
-                    )
-                  }
-                />
-              }
-            />
-            <Breadcrumbs.BreadcrumbItem
-              type="text"
-              link={<BreadcrumbLink label="Cycles" icon={<ContrastIcon className="h-4 w-4 text-custom-text-300" />} />}
-            />
-          </Breadcrumbs>
+    <div className="relative z-10 items-center justify-between gap-x-2 gap-y-4">
+      <div className="flex border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
+        <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
+          <SidebarHamburgerToggle />
+          <div>
+            <Breadcrumbs>
+              <Breadcrumbs.BreadcrumbItem
+                type="text"
+                link={
+                  <BreadcrumbLink
+                    label={currentProjectDetails?.name ?? "Project"}
+                    href={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`}
+                    icon={
+                      currentProjectDetails?.emoji ? (
+                        renderEmoji(currentProjectDetails.emoji)
+                      ) : currentProjectDetails?.icon_prop ? (
+                        renderEmoji(currentProjectDetails.icon_prop)
+                      ) : (
+                        <span className="flex h-4 w-4 items-center justify-center rounded bg-gray-700 uppercase text-white">
+                          {currentProjectDetails?.name.charAt(0)}
+                        </span>
+                      )
+                    }
+                  />
+                }
+              />
+              <Breadcrumbs.BreadcrumbItem
+                type="text"
+                link={<BreadcrumbLink label="Cycles" icon={<ContrastIcon className="h-4 w-4 text-custom-text-300" />} />}
+              />
+            </Breadcrumbs>
+          </div>
         </div>
+        {canUserCreateCycle && (
+          <div className="flex items-center gap-3">
+            <Button
+              variant="primary"
+              size="sm"
+              prependIcon={<Plus />}
+              onClick={() => {
+                setTrackElement("Cycles page");
+                toggleCreateCycleModal(true);
+              }}
+            >
+              Add Cycle
+            </Button>
+          </div>
+        )}
+      </div>
+      <div className="flex justify-center sm:hidden">
+        <CustomMenu
+          maxHeight={"md"}
+          className="flex flex-grow justify-center text-custom-text-200 text-sm py-2 border-b border-custom-border-200 bg-custom-sidebar-background-100"
+          // placement="bottom-start"
+          customButton={
+            <span className="flex items-center gap-2">
+              <List className="h-4 w-4" />
+              <span className="flex flex-grow justify-center text-custom-text-200 text-sm">Layout</span>
+            </span>
+          }
+          customButtonClassName="flex flex-grow justify-center items-center text-custom-text-200 text-sm"
+          closeOnSelect
+        >
+          {CYCLE_VIEW_LAYOUTS.map((layout) => (
+            <CustomMenu.MenuItem
+              onClick={() => {
+                // handleLayoutChange(ISSUE_LAYOUTS[index].key);
+                handleCurrentLayout(layout.key as TCycleLayout);
+              }}
+              className="flex items-center gap-2"
+            >
+              <layout.icon className="w-3 h-3" />
+              <div className="text-custom-text-300">{layout.title}</div>
+            </CustomMenu.MenuItem>
+          ))}
+        </CustomMenu>
       </div>
-      {canUserCreateCycle && (
-        <div className="flex items-center gap-3">
-          <Button
-            variant="primary"
-            size="sm"
-            prependIcon={<Plus />}
-            onClick={() => {
-              setTrackElement("Cycles page");
-              toggleCreateCycleModal(true);
-            }}
-          >
-            Add Cycle
-          </Button>
-        </div>
-      )}
     </div>
   );
 });
diff --git a/web/components/headers/module-issues.tsx b/web/components/headers/module-issues.tsx
index 70e4dbeea..6287223b0 100644
--- a/web/components/headers/module-issues.tsx
+++ b/web/components/headers/module-issues.tsx
@@ -23,7 +23,7 @@ import { BreadcrumbLink } from "components/common";
 // ui
 import { Breadcrumbs, Button, CustomMenu, DiceIcon } from "@plane/ui";
 // icons
-import { ArrowRight, Plus } from "lucide-react";
+import { ArrowRight, PanelRight, Plus } from "lucide-react";
 // helpers
 import { truncateText } from "helpers/string.helper";
 import { renderEmoji } from "helpers/emoji.helper";
@@ -32,6 +32,8 @@ import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOption
 // constants
 import { EIssuesStoreType, EIssueFilterType, ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "constants/issue";
 import { EUserProjectRoles } from "constants/project";
+import { cn } from "helpers/common.helper";
+import { ModuleMobileHeader } from "components/modules/module-mobile-header";
 
 const ModuleDropdownOption: React.FC<{ moduleId: string }> = ({ moduleId }) => {
   // router
@@ -150,116 +152,127 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
         onClose={() => setAnalyticsModal(false)}
         moduleDetails={moduleDetails ?? undefined}
       />
-      <div className="relative z-10 flex h-[3.75rem] w-full items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
-        <div className="flex items-center gap-2">
-          <SidebarHamburgerToggle />
-          <Breadcrumbs>
-            <Breadcrumbs.BreadcrumbItem
-              type="text"
-              link={
-                <BreadcrumbLink
-                  label={currentProjectDetails?.name ?? "Project"}
-                  href={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`}
-                  icon={
-                    currentProjectDetails?.emoji ? (
-                      renderEmoji(currentProjectDetails.emoji)
-                    ) : currentProjectDetails?.icon_prop ? (
-                      renderEmoji(currentProjectDetails.icon_prop)
-                    ) : (
-                      <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
-                        {currentProjectDetails?.name.charAt(0)}
-                      </span>
-                    )
+      <div className="relative z-10 items-center gap-x-2 gap-y-4">
+        <div className="flex justify-between border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
+          <div className="flex items-center gap-2">
+            <SidebarHamburgerToggle />
+            <Breadcrumbs>
+              <Breadcrumbs.BreadcrumbItem
+                type="text"
+                link={
+                  <span>
+                    <span className="hidden md:block">
+                      <BreadcrumbLink
+                        label={currentProjectDetails?.name ?? "Project"}
+                        href={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`}
+                        icon={
+                          currentProjectDetails?.emoji ? (
+                            renderEmoji(currentProjectDetails.emoji)
+                          ) : currentProjectDetails?.icon_prop ? (
+                            renderEmoji(currentProjectDetails.icon_prop)
+                          ) : (
+                            <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
+                              {currentProjectDetails?.name.charAt(0)}
+                            </span>
+                          )
+                        }
+                      />
+                    </span>
+                    <Link href={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`} className="block md:hidden pl-2 text-custom-text-300">...</Link>
+                  </span>
+                }
+              />
+              <Breadcrumbs.BreadcrumbItem
+                type="text"
+                link={
+                  <BreadcrumbLink
+                    href={`/${workspaceSlug}/projects/${projectId}/modules`}
+                    label="Modules"
+                    icon={<DiceIcon className="h-4 w-4 text-custom-text-300" />}
+                  />
+                }
+              />
+              <Breadcrumbs.BreadcrumbItem
+                type="component"
+                component={
+                  <CustomMenu
+                    label={
+                      <>
+                        <DiceIcon className="h-3 w-3" />
+                        {moduleDetails?.name && truncateText(moduleDetails.name, 40)}
+                      </>
+                    }
+                    className="ml-1.5 flex-shrink-0"
+                    placement="bottom-start"
+                  >
+                    {projectModuleIds?.map((moduleId) => (
+                      <ModuleDropdownOption key={moduleId} moduleId={moduleId} />
+                    ))}
+                  </CustomMenu>
+                }
+              />
+            </Breadcrumbs>
+          </div>
+          <div className="flex items-center gap-2">
+            <div className="hidden md:flex gap-2">
+              <LayoutSelection
+                layouts={["list", "kanban", "calendar", "spreadsheet", "gantt_chart"]}
+                onChange={(layout) => handleLayoutChange(layout)}
+                selectedLayout={activeLayout}
+              />
+              <FiltersDropdown title="Filters" placement="bottom-end">
+                <FilterSelection
+                  filters={issueFilters?.filters ?? {}}
+                  handleFiltersUpdate={handleFiltersUpdate}
+                  layoutDisplayFiltersOptions={
+                    activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[activeLayout] : undefined
                   }
+                  labels={projectLabels}
+                  memberIds={projectMemberIds ?? undefined}
+                  states={projectStates}
                 />
-              }
-            />
-            <Breadcrumbs.BreadcrumbItem
-              type="text"
-              link={
-                <BreadcrumbLink
-                  href={`/${workspaceSlug}/projects/${projectId}/modules`}
-                  label="Modules"
-                  icon={<DiceIcon className="h-4 w-4 text-custom-text-300" />}
-                />
-              }
-            />
-            <Breadcrumbs.BreadcrumbItem
-              type="component"
-              component={
-                <CustomMenu
-                  label={
-                    <>
-                      <DiceIcon className="h-3 w-3" />
-                      {moduleDetails?.name && truncateText(moduleDetails.name, 40)}
-                    </>
+              </FiltersDropdown>
+              <FiltersDropdown title="Display" placement="bottom-end">
+                <DisplayFiltersSelection
+                  layoutDisplayFiltersOptions={
+                    activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[activeLayout] : undefined
                   }
-                  className="ml-1.5 flex-shrink-0"
-                  placement="bottom-start"
-                >
-                  {projectModuleIds?.map((moduleId) => (
-                    <ModuleDropdownOption key={moduleId} moduleId={moduleId} />
-                  ))}
-                </CustomMenu>
-              }
-            />
-          </Breadcrumbs>
-        </div>
-        <div className="flex items-center gap-2">
-          <LayoutSelection
-            layouts={["list", "kanban", "calendar", "spreadsheet", "gantt_chart"]}
-            onChange={(layout) => handleLayoutChange(layout)}
-            selectedLayout={activeLayout}
-          />
-          <FiltersDropdown title="Filters" placement="bottom-end">
-            <FilterSelection
-              filters={issueFilters?.filters ?? {}}
-              handleFiltersUpdate={handleFiltersUpdate}
-              layoutDisplayFiltersOptions={
-                activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[activeLayout] : undefined
-              }
-              labels={projectLabels}
-              memberIds={projectMemberIds ?? undefined}
-              states={projectStates}
-            />
-          </FiltersDropdown>
-          <FiltersDropdown title="Display" placement="bottom-end">
-            <DisplayFiltersSelection
-              layoutDisplayFiltersOptions={
-                activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[activeLayout] : undefined
-              }
-              displayFilters={issueFilters?.displayFilters ?? {}}
-              handleDisplayFiltersUpdate={handleDisplayFilters}
-              displayProperties={issueFilters?.displayProperties ?? {}}
-              handleDisplayPropertiesUpdate={handleDisplayProperties}
-            />
-          </FiltersDropdown>
+                  displayFilters={issueFilters?.displayFilters ?? {}}
+                  handleDisplayFiltersUpdate={handleDisplayFilters}
+                  displayProperties={issueFilters?.displayProperties ?? {}}
+                  handleDisplayPropertiesUpdate={handleDisplayProperties}
+                />
+              </FiltersDropdown>
+            </div>
 
-          {canUserCreateIssue && (
-            <>
-              <Button onClick={() => setAnalyticsModal(true)} variant="neutral-primary" size="sm">
-                Analytics
-              </Button>
-              <Button
-                onClick={() => {
-                  setTrackElement("Module issues page");
-                  toggleCreateIssueModal(true, EIssuesStoreType.MODULE);
-                }}
-                size="sm"
-                prependIcon={<Plus />}
-              >
-                Add Issue
-              </Button>
-            </>
-          )}
-          <button
-            type="button"
-            className="grid h-7 w-7 place-items-center rounded p-1 outline-none hover:bg-custom-sidebar-background-80"
-            onClick={toggleSidebar}
-          >
-            <ArrowRight className={`h-4 w-4 duration-300 ${isSidebarCollapsed ? "-rotate-180" : ""}`} />
-          </button>
+            {canUserCreateIssue && (
+              <>
+                <Button className="hidden md:block" onClick={() => setAnalyticsModal(true)} variant="neutral-primary" size="sm">
+                  Analytics
+                </Button>
+                <Button
+                  onClick={() => {
+                    setTrackElement("Module issues page");
+                    toggleCreateIssueModal(true, EIssuesStoreType.MODULE);
+                  }}
+                  size="sm"
+                  prependIcon={<Plus />}
+                >
+                  <span className="hidden md:block">Add</span> Issue
+                </Button>
+              </>
+            )}
+            <button
+              type="button"
+              className="grid h-7 w-7 place-items-center rounded p-1 outline-none hover:bg-custom-sidebar-background-80"
+              onClick={toggleSidebar}
+            >
+              <ArrowRight className={`h-4 w-4 duration-300 hidden md:block ${isSidebarCollapsed ? "-rotate-180" : ""}`} />
+              <PanelRight className={cn("w-4 h-4 block md:hidden", !isSidebarCollapsed ? "text-[#3E63DD]" : "text-custom-text-200")} />
+            </button>
+          </div>
         </div>
+        <ModuleMobileHeader />
       </div>
     </>
   );
diff --git a/web/components/headers/project-issues.tsx b/web/components/headers/project-issues.tsx
index 769d6c945..c819b25c3 100644
--- a/web/components/headers/project-issues.tsx
+++ b/web/components/headers/project-issues.tsx
@@ -2,7 +2,7 @@ import { useCallback, useState } from "react";
 import Link from "next/link";
 import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
-import { ArrowLeft, Briefcase, Circle, ExternalLink, Plus } from "lucide-react";
+import { Briefcase, Circle, ExternalLink, Plus } from "lucide-react";
 // hooks
 import {
   useApplication,
@@ -29,6 +29,7 @@ import { EIssueFilterType, EIssuesStoreType, ISSUE_DISPLAY_FILTERS_BY_LAYOUT } f
 import { renderEmoji } from "helpers/emoji.helper";
 import { EUserProjectRoles } from "constants/project";
 import { useIssues } from "hooks/store/use-issues";
+import { IssuesMobileHeader } from "components/issues/issues-mobile-header";
 
 export const ProjectIssuesHeader: React.FC = observer(() => {
   // states
@@ -114,118 +115,111 @@ export const ProjectIssuesHeader: React.FC = observer(() => {
         onClose={() => setAnalyticsModal(false)}
         projectDetails={currentProjectDetails ?? undefined}
       />
-      <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
-        <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
-          <SidebarHamburgerToggle />
-          <div className="block md:hidden">
-            <button
-              type="button"
-              className="grid h-8 w-8 place-items-center rounded border border-custom-border-200"
-              onClick={() => router.back()}
-            >
-              <ArrowLeft fontSize={14} strokeWidth={2} />
-            </button>
+      <div className=" relative z-10 items-center gap-x-2 gap-y-4">
+        <div className="flex items-center gap-2 p-4 border-b border-custom-border-200 bg-custom-sidebar-background-100">
+          <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
+            <SidebarHamburgerToggle />
+            <div>
+              <Breadcrumbs>
+                <Breadcrumbs.BreadcrumbItem
+                  type="text"
+                  link={
+                      <BreadcrumbLink
+                        href={`/${workspaceSlug}/projects`}
+                        label={currentProjectDetails?.name ?? "Project"}
+                        icon={
+                          currentProjectDetails ? (
+                            currentProjectDetails?.emoji ? (
+                              <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded uppercase">
+                                {renderEmoji(currentProjectDetails.emoji)}
+                              </span>
+                            ) : currentProjectDetails?.icon_prop ? (
+                              <div className="grid h-7 w-7 flex-shrink-0 place-items-center">
+                                {renderEmoji(currentProjectDetails.icon_prop)}
+                              </div>
+                            ) : (
+                              <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
+                                {currentProjectDetails?.name.charAt(0)}
+                              </span>
+                            )
+                          ) : (
+                            <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded uppercase">
+                              <Briefcase className="h-4 w-4" />
+                            </span>
+                          )
+                        }
+                      />
+                  }
+                />
+
+                <Breadcrumbs.BreadcrumbItem
+                  type="text"
+                  link={<BreadcrumbLink label="Issues" icon={<LayersIcon className="h-4 w-4 text-custom-text-300" />} />}
+                />
+              </Breadcrumbs>
+            </div>
+            {currentProjectDetails?.is_deployed && deployUrl && (
+              <a
+                href={`${deployUrl}/${workspaceSlug}/${currentProjectDetails?.id}`}
+                className="group flex items-center gap-1.5 rounded bg-custom-primary-100/10 px-2.5 py-1 text-xs font-medium text-custom-primary-100"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                <Circle className="h-1.5 w-1.5 fill-custom-primary-100" strokeWidth={2} />
+                Public
+                <ExternalLink className="hidden h-3 w-3 group-hover:block" strokeWidth={2} />
+              </a>
+            )}
           </div>
-          <div>
-            <Breadcrumbs>
-              <Breadcrumbs.BreadcrumbItem
-                type="text"
-                link={
-                  <BreadcrumbLink
-                    href={`/${workspaceSlug}/projects`}
-                    label={currentProjectDetails?.name ?? "Project"}
-                    icon={
-                      currentProjectDetails ? (
-                        currentProjectDetails?.emoji ? (
-                          <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded uppercase">
-                            {renderEmoji(currentProjectDetails.emoji)}
-                          </span>
-                        ) : currentProjectDetails?.icon_prop ? (
-                          <div className="grid h-7 w-7 flex-shrink-0 place-items-center">
-                            {renderEmoji(currentProjectDetails.icon_prop)}
-                          </div>
-                        ) : (
-                          <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
-                            {currentProjectDetails?.name.charAt(0)}
-                          </span>
-                        )
-                      ) : (
-                        <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded uppercase">
-                          <Briefcase className="h-4 w-4" />
-                        </span>
-                      )
-                    }
-                  />
+          <div className="items-center gap-2 hidden md:flex">
+            <LayoutSelection
+              layouts={["list", "kanban", "calendar", "spreadsheet", "gantt_chart"]}
+              onChange={(layout) => handleLayoutChange(layout)}
+              selectedLayout={activeLayout}
+            />
+            <FiltersDropdown title="Filters" placement="bottom-end">
+              <FilterSelection
+                filters={issueFilters?.filters ?? {}}
+                handleFiltersUpdate={handleFiltersUpdate}
+                layoutDisplayFiltersOptions={
+                  activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[activeLayout] : undefined
                 }
+                labels={projectLabels}
+                memberIds={projectMemberIds ?? undefined}
+                states={projectStates}
               />
+            </FiltersDropdown>
+            <FiltersDropdown title="Display" placement="bottom-end">
+              <DisplayFiltersSelection
+                layoutDisplayFiltersOptions={
+                  activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[activeLayout] : undefined
+                }
+                displayFilters={issueFilters?.displayFilters ?? {}}
+                handleDisplayFiltersUpdate={handleDisplayFilters}
+                displayProperties={issueFilters?.displayProperties ?? {}}
+                handleDisplayPropertiesUpdate={handleDisplayProperties}
+              />
+            </FiltersDropdown>
+
+            {currentProjectDetails?.inbox_view && inboxDetails && (
+              <Link href={`/${workspaceSlug}/projects/${projectId}/inbox/${inboxDetails?.id}`}>
+                <span>
+                  <Button variant="neutral-primary" size="sm" className="relative">
+                    Inbox
+                    {inboxDetails?.pending_issue_count > 0 && (
+                      <span className="absolute -right-1.5 -top-1.5 h-4 w-4 rounded-full border border-custom-sidebar-border-200 bg-custom-sidebar-background-80 text-custom-text-100">
+                        {inboxDetails?.pending_issue_count}
+                      </span>
+                    )}
+                  </Button>
+                </span>
+              </Link>
+            )}
 
-              <Breadcrumbs.BreadcrumbItem
-                type="text"
-                link={<BreadcrumbLink label="Issues" icon={<LayersIcon className="h-4 w-4 text-custom-text-300" />} />}
-              />
-            </Breadcrumbs>
           </div>
-          {currentProjectDetails?.is_deployed && deployUrl && (
-            <a
-              href={`${deployUrl}/${workspaceSlug}/${currentProjectDetails?.id}`}
-              className="group flex items-center gap-1.5 rounded bg-custom-primary-100/10 px-2.5 py-1 text-xs font-medium text-custom-primary-100"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              <Circle className="h-1.5 w-1.5 fill-custom-primary-100" strokeWidth={2} />
-              Public
-              <ExternalLink className="hidden h-3 w-3 group-hover:block" strokeWidth={2} />
-            </a>
-          )}
-        </div>
-        <div className="flex items-center gap-2">
-          <LayoutSelection
-            layouts={["list", "kanban", "calendar", "spreadsheet", "gantt_chart"]}
-            onChange={(layout) => handleLayoutChange(layout)}
-            selectedLayout={activeLayout}
-          />
-          <FiltersDropdown title="Filters" placement="bottom-end">
-            <FilterSelection
-              filters={issueFilters?.filters ?? {}}
-              handleFiltersUpdate={handleFiltersUpdate}
-              layoutDisplayFiltersOptions={
-                activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[activeLayout] : undefined
-              }
-              labels={projectLabels}
-              memberIds={projectMemberIds ?? undefined}
-              states={projectStates}
-            />
-          </FiltersDropdown>
-          <FiltersDropdown title="Display" placement="bottom-end">
-            <DisplayFiltersSelection
-              layoutDisplayFiltersOptions={
-                activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[activeLayout] : undefined
-              }
-              displayFilters={issueFilters?.displayFilters ?? {}}
-              handleDisplayFiltersUpdate={handleDisplayFilters}
-              displayProperties={issueFilters?.displayProperties ?? {}}
-              handleDisplayPropertiesUpdate={handleDisplayProperties}
-            />
-          </FiltersDropdown>
-
-          {currentProjectDetails?.inbox_view && inboxDetails && (
-            <Link href={`/${workspaceSlug}/projects/${projectId}/inbox/${inboxDetails?.id}`}>
-              <span>
-                <Button variant="neutral-primary" size="sm" className="relative">
-                  Inbox
-                  {inboxDetails?.pending_issue_count > 0 && (
-                    <span className="absolute -right-1.5 -top-1.5 h-4 w-4 rounded-full border border-custom-sidebar-border-200 bg-custom-sidebar-background-80 text-custom-text-100">
-                      {inboxDetails?.pending_issue_count}
-                    </span>
-                  )}
-                </Button>
-              </span>
-            </Link>
-          )}
-
           {canUserCreateIssue && (
             <>
-              <Button onClick={() => setAnalyticsModal(true)} variant="neutral-primary" size="sm">
+              <Button className="hidden md:block" onClick={() => setAnalyticsModal(true)} variant="neutral-primary" size="sm">
                 Analytics
               </Button>
               <Button
@@ -241,6 +235,9 @@ export const ProjectIssuesHeader: React.FC = observer(() => {
             </>
           )}
         </div>
+        <div className="block md:hidden">
+          <IssuesMobileHeader />
+        </div>
       </div>
     </>
   );
diff --git a/web/components/headers/projects.tsx b/web/components/headers/projects.tsx
index 34e8ffa08..34b1a6ef8 100644
--- a/web/components/headers/projects.tsx
+++ b/web/components/headers/projects.tsx
@@ -23,7 +23,7 @@ export const ProjectsHeader = observer(() => {
 
   return (
     <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
-      <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
+      <div className="flex flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
         <SidebarHamburgerToggle />
         <div>
           <Breadcrumbs>
@@ -34,12 +34,12 @@ export const ProjectsHeader = observer(() => {
           </Breadcrumbs>
         </div>
       </div>
-      <div className="flex items-center gap-3">
+      <div className="flex w-full justify-end items-center gap-3">
         {workspaceProjectIds && workspaceProjectIds?.length > 0 && (
-          <div className="flex w-full items-center justify-start gap-1 rounded-md border border-custom-border-200 bg-custom-background-100 px-2.5 py-1.5 text-custom-text-400">
-            <Search className="h-3.5 w-3.5" />
+          <div className=" flex items-center justify-start gap-1 rounded-md border border-custom-border-200 bg-custom-background-100 px-2.5 py-1.5 text-custom-text-400">
+            <Search className="h-3.5" />
             <input
-              className="w-full min-w-[234px] border-none bg-transparent text-sm focus:outline-none"
+              className="border-none w-full bg-transparent text-sm focus:outline-none"
               value={searchQuery}
               onChange={(e) => setSearchQuery(e.target.value)}
               placeholder="Search"
@@ -54,6 +54,7 @@ export const ProjectsHeader = observer(() => {
               setTrackElement("Projects page");
               commandPaletteStore.toggleCreateProjectModal(true);
             }}
+            className="items-center"
           >
             Add Project
           </Button>
diff --git a/web/components/headers/workspace-analytics.tsx b/web/components/headers/workspace-analytics.tsx
index 8bb4c9251..4d54dd965 100644
--- a/web/components/headers/workspace-analytics.tsx
+++ b/web/components/headers/workspace-analytics.tsx
@@ -16,15 +16,6 @@ export const WorkspaceAnalyticsHeader = () => {
       >
         <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
           <SidebarHamburgerToggle />
-          <div className="block md:hidden">
-            <button
-              type="button"
-              className="grid h-8 w-8 place-items-center rounded border border-custom-border-200"
-              onClick={() => router.back()}
-            >
-              <ArrowLeft fontSize={14} strokeWidth={2} />
-            </button>
-          </div>
           <div>
             <Breadcrumbs>
               <Breadcrumbs.BreadcrumbItem
diff --git a/web/components/headers/workspace-dashboard.tsx b/web/components/headers/workspace-dashboard.tsx
index 8dd6f31d5..2210a4270 100644
--- a/web/components/headers/workspace-dashboard.tsx
+++ b/web/components/headers/workspace-dashboard.tsx
@@ -37,13 +37,13 @@ export const WorkspaceDashboardHeader = () => {
             href="https://plane.so/changelog"
             target="_blank"
             rel="noopener noreferrer"
-            className="flex flex-shrink-0 items-center gap-1.5 rounded bg-custom-background-80 px-3 py-1.5 text-xs font-medium"
+            className="flex flex-shrink-0 items-center gap-1.5 rounded bg-custom-background-80 px-3 py-1.5"
           >
             <Zap size={14} strokeWidth={2} fill="rgb(var(--color-text-100))" />
-            {"What's new?"}
+            <span className="text-xs hidden sm:hidden md:block font-medium">{"What's new?"}</span>
           </a>
           <a
-            className="flex flex-shrink-0 items-center gap-1.5 rounded bg-custom-background-80 px-3 py-1.5 text-xs font-medium"
+            className="flex flex-shrink-0 items-center gap-1.5 rounded bg-custom-background-80 px-3 py-1.5 "
             href="https://github.com/makeplane/plane"
             target="_blank"
             rel="noopener noreferrer"
@@ -54,7 +54,7 @@ export const WorkspaceDashboardHeader = () => {
               width={16}
               alt="GitHub Logo"
             />
-            Star us on GitHub
+            <span className="text-xs font-medium hidden sm:hidden md:block">Star us on GitHub</span>
           </a>
         </div>
       </div>
diff --git a/web/components/issues/issue-layouts/filters/header/helpers/dropdown.tsx b/web/components/issues/issue-layouts/filters/header/helpers/dropdown.tsx
index 425f53b46..33b86ada1 100644
--- a/web/components/issues/issue-layouts/filters/header/helpers/dropdown.tsx
+++ b/web/components/issues/issue-layouts/filters/header/helpers/dropdown.tsx
@@ -13,10 +13,11 @@ type Props = {
   placement?: Placement;
   disabled?: boolean;
   tabIndex?: number;
+  menuButton?: React.ReactNode;
 };
 
 export const FiltersDropdown: React.FC<Props> = (props) => {
-  const { children, title = "Dropdown", placement, disabled = false, tabIndex } = props;
+  const { children, title = "Dropdown", placement, disabled = false, tabIndex, menuButton } = props;
 
   const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
   const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
@@ -33,7 +34,9 @@ export const FiltersDropdown: React.FC<Props> = (props) => {
         return (
           <>
             <Popover.Button as={React.Fragment}>
-              <Button
+              {menuButton ? <button role="button" ref={setReferenceElement}>
+                {menuButton}
+              </button> : <Button
                 disabled={disabled}
                 ref={setReferenceElement}
                 variant="neutral-primary"
@@ -46,7 +49,7 @@ export const FiltersDropdown: React.FC<Props> = (props) => {
                 <div className={`${open ? "text-custom-text-100" : "text-custom-text-200"}`}>
                   <span>{title}</span>
                 </div>
-              </Button>
+              </Button>}
             </Popover.Button>
             <Transition
               as={Fragment}
diff --git a/web/components/issues/issues-mobile-header.tsx b/web/components/issues/issues-mobile-header.tsx
new file mode 100644
index 000000000..2338e1848
--- /dev/null
+++ b/web/components/issues/issues-mobile-header.tsx
@@ -0,0 +1,166 @@
+import { useCallback, useState } from "react";
+import router from "next/router";
+// components
+import { CustomMenu } from "@plane/ui";
+// icons
+import { Calendar, ChevronDown, Kanban, List } from "lucide-react";
+// constants
+import { EIssueFilterType, EIssuesStoreType, ISSUE_DISPLAY_FILTERS_BY_LAYOUT, ISSUE_LAYOUTS } from "constants/issue";
+// hooks
+import { useIssues, useLabel, useMember, useProject, useProjectState } from "hooks/store";
+// layouts
+import { DisplayFiltersSelection, FilterSelection, FiltersDropdown } from "./issue-layouts";
+import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOptions, TIssueLayouts } from "@plane/types";
+import { ProjectAnalyticsModal } from "components/analytics";
+
+export const IssuesMobileHeader = () => {
+    const layouts = [
+        { key: "list", title: "List", icon: List },
+        { key: "kanban", title: "Kanban", icon: Kanban },
+        { key: "calendar", title: "Calendar", icon: Calendar },
+    ];
+    const [analyticsModal, setAnalyticsModal] = useState(false);
+    const { workspaceSlug, projectId } = router.query as {
+        workspaceSlug: string;
+        projectId: string;
+    };
+    const { currentProjectDetails } = useProject();
+    const { projectStates } = useProjectState();
+    const { projectLabels } = useLabel();
+
+    // store hooks
+    const {
+        issuesFilter: { issueFilters, updateFilters },
+    } = useIssues(EIssuesStoreType.PROJECT);
+    const {
+        project: { projectMemberIds },
+    } = useMember();
+    const activeLayout = issueFilters?.displayFilters?.layout;
+
+    const handleLayoutChange = useCallback(
+        (layout: TIssueLayouts) => {
+            if (!workspaceSlug || !projectId) return;
+            updateFilters(workspaceSlug, projectId, EIssueFilterType.DISPLAY_FILTERS, { layout: layout });
+        },
+        [workspaceSlug, projectId, updateFilters]
+    );
+
+    const handleFiltersUpdate = useCallback(
+        (key: keyof IIssueFilterOptions, value: string | string[]) => {
+            if (!workspaceSlug || !projectId) return;
+            const newValues = issueFilters?.filters?.[key] ?? [];
+
+            if (Array.isArray(value)) {
+                value.forEach((val) => {
+                    if (!newValues.includes(val)) newValues.push(val);
+                });
+            } else {
+                if (issueFilters?.filters?.[key]?.includes(value)) newValues.splice(newValues.indexOf(value), 1);
+                else newValues.push(value);
+            }
+
+            updateFilters(workspaceSlug, projectId, EIssueFilterType.FILTERS, { [key]: newValues });
+        },
+        [workspaceSlug, projectId, issueFilters, updateFilters]
+    );
+
+    const handleDisplayFilters = useCallback(
+        (updatedDisplayFilter: Partial<IIssueDisplayFilterOptions>) => {
+            if (!workspaceSlug || !projectId) return;
+            updateFilters(workspaceSlug, projectId, EIssueFilterType.DISPLAY_FILTERS, updatedDisplayFilter);
+        },
+        [workspaceSlug, projectId, updateFilters]
+    );
+
+    const handleDisplayProperties = useCallback(
+        (property: Partial<IIssueDisplayProperties>) => {
+            if (!workspaceSlug || !projectId) return;
+            updateFilters(workspaceSlug, projectId, EIssueFilterType.DISPLAY_PROPERTIES, property);
+        },
+        [workspaceSlug, projectId, updateFilters]
+    );
+
+    return (
+        <>
+            <ProjectAnalyticsModal
+                isOpen={analyticsModal}
+                onClose={() => setAnalyticsModal(false)}
+                projectDetails={currentProjectDetails ?? undefined}
+            />
+            <div className="flex justify-evenly py-2 border-b border-custom-border-200">
+                <CustomMenu
+                    maxHeight={"md"}
+                    className="flex flex-grow justify-center text-custom-text-200 text-sm"
+                    placement="bottom-start"
+                    customButton={<span className="flex flex-grow justify-center text-custom-text-200 text-sm">Layout</span>}
+                    customButtonClassName="flex flex-grow justify-center text-custom-text-200 text-sm"
+                    closeOnSelect
+                >
+                    {layouts.map((layout, index) => (
+                        <CustomMenu.MenuItem
+                            onClick={() => {
+                                handleLayoutChange(ISSUE_LAYOUTS[index].key);
+                            }}
+                            className="flex items-center gap-2"
+                        >
+                            <layout.icon className="w-3 h-3" />
+                            <div className="text-custom-text-300">{layout.title}</div>
+                        </CustomMenu.MenuItem>
+                    ))}
+                </CustomMenu>
+                <div className="flex flex-grow justify-center border-l border-custom-border-200 items-center text-custom-text-200 text-sm">
+                    <FiltersDropdown
+                        title="Filters"
+                        placement="bottom-end"
+                        menuButton={
+                            <span className="flex items-center text-custom-text-200 text-sm">
+                                Filters
+                                <ChevronDown className="text-custom-text-200  h-4 w-4 ml-2" />
+                            </span>
+                        }
+                    >
+                        <FilterSelection
+                            filters={issueFilters?.filters ?? {}}
+                            handleFiltersUpdate={handleFiltersUpdate}
+                            layoutDisplayFiltersOptions={
+                                activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[activeLayout] : undefined
+                            }
+                            labels={projectLabels}
+                            memberIds={projectMemberIds ?? undefined}
+                            states={projectStates}
+                        />
+                    </FiltersDropdown>
+                </div>
+                <div className="flex flex-grow justify-center border-l border-custom-border-200 items-center text-custom-text-200 text-sm">
+                    <FiltersDropdown
+                        title="Display"
+                        placement="bottom-end"
+                        menuButton={
+                            <span className="flex items-center text-custom-text-200 text-sm">
+                                Display
+                                <ChevronDown className="text-custom-text-200 h-4 w-4 ml-2" />
+                            </span>
+                        }
+                    >
+                        <DisplayFiltersSelection
+                            layoutDisplayFiltersOptions={
+                                activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[activeLayout] : undefined
+                            }
+                            displayFilters={issueFilters?.displayFilters ?? {}}
+                            handleDisplayFiltersUpdate={handleDisplayFilters}
+                            displayProperties={issueFilters?.displayProperties ?? {}}
+                            handleDisplayPropertiesUpdate={handleDisplayProperties}
+                        />
+                    </FiltersDropdown>
+                </div>
+
+                <button
+                    onClick={() => setAnalyticsModal(true)}
+                    className="flex flex-grow justify-center text-custom-text-200 text-sm border-l border-custom-border-200"
+                >
+                    Analytics
+                </button>
+            </div>
+        </>
+    );
+};
diff --git a/web/components/modules/module-mobile-header.tsx b/web/components/modules/module-mobile-header.tsx
new file mode 100644
index 000000000..b08c443d2
--- /dev/null
+++ b/web/components/modules/module-mobile-header.tsx
@@ -0,0 +1,162 @@
+import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOptions, TIssueLayouts } from "@plane/types";
+import { CustomMenu } from "@plane/ui";
+import { ProjectAnalyticsModal } from "components/analytics";
+import { DisplayFiltersSelection, FilterSelection, FiltersDropdown } from "components/issues";
+import { EIssueFilterType, EIssuesStoreType, ISSUE_DISPLAY_FILTERS_BY_LAYOUT, ISSUE_LAYOUTS } from "constants/issue";
+import { useIssues, useLabel, useMember, useModule, useProjectState } from "hooks/store";
+import { Calendar, ChevronDown, Kanban, List } from "lucide-react";
+import router from "next/router";
+import { useCallback, useState } from "react";
+
+export const ModuleMobileHeader = () => {
+    const [analyticsModal, setAnalyticsModal] = useState(false);
+    const { getModuleById } = useModule();
+    const layouts = [
+        { key: "list", title: "List", icon: List },
+        { key: "kanban", title: "Kanban", icon: Kanban },
+        { key: "calendar", title: "Calendar", icon: Calendar },
+    ];
+    const { workspaceSlug, projectId, moduleId } = router.query as {
+        workspaceSlug: string;
+        projectId: string;
+        moduleId: string;
+    };
+    const moduleDetails = moduleId ? getModuleById(moduleId.toString()) : undefined;
+
+    const {
+        issuesFilter: { issueFilters, updateFilters },
+    } = useIssues(EIssuesStoreType.MODULE);
+    const activeLayout = issueFilters?.displayFilters?.layout;
+    const { projectStates } = useProjectState();
+    const { projectLabels } = useLabel();
+    const {
+        project: { projectMemberIds },
+    } = useMember();
+
+    const handleLayoutChange = useCallback(
+        (layout: TIssueLayouts) => {
+            if (!workspaceSlug || !projectId) return;
+            updateFilters(workspaceSlug, projectId, EIssueFilterType.DISPLAY_FILTERS, { layout: layout }, moduleId);
+        },
+        [workspaceSlug, projectId, moduleId, updateFilters]
+    );
+
+    const handleFiltersUpdate = useCallback(
+        (key: keyof IIssueFilterOptions, value: string | string[]) => {
+            if (!workspaceSlug || !projectId) return;
+            const newValues = issueFilters?.filters?.[key] ?? [];
+
+            if (Array.isArray(value)) {
+                value.forEach((val) => {
+                    if (!newValues.includes(val)) newValues.push(val);
+                });
+            } else {
+                if (issueFilters?.filters?.[key]?.includes(value)) newValues.splice(newValues.indexOf(value), 1);
+                else newValues.push(value);
+            }
+
+            updateFilters(workspaceSlug, projectId, EIssueFilterType.FILTERS, { [key]: newValues }, moduleId);
+        },
+        [workspaceSlug, projectId, moduleId, issueFilters, updateFilters]
+    );
+
+    const handleDisplayFilters = useCallback(
+        (updatedDisplayFilter: Partial<IIssueDisplayFilterOptions>) => {
+            if (!workspaceSlug || !projectId) return;
+            updateFilters(workspaceSlug, projectId, EIssueFilterType.DISPLAY_FILTERS, updatedDisplayFilter, moduleId);
+        },
+        [workspaceSlug, projectId, moduleId, updateFilters]
+    );
+
+    const handleDisplayProperties = useCallback(
+        (property: Partial<IIssueDisplayProperties>) => {
+            if (!workspaceSlug || !projectId) return;
+            updateFilters(workspaceSlug, projectId, EIssueFilterType.DISPLAY_PROPERTIES, property, moduleId);
+        },
+        [workspaceSlug, projectId, moduleId, updateFilters]
+    );
+
+    return (
+        <>
+            <ProjectAnalyticsModal
+                isOpen={analyticsModal}
+                onClose={() => setAnalyticsModal(false)}
+                moduleDetails={moduleDetails ?? undefined}
+            />
+            <div className="flex justify-evenly py-2 border-b border-custom-border-200">
+                <CustomMenu
+                    maxHeight={"md"}
+                    className="flex flex-grow justify-center text-custom-text-200 text-sm"
+                    placement="bottom-start"
+                    customButton={<span className="flex flex-grow justify-center text-custom-text-200 text-sm">Layout</span>}
+                    customButtonClassName="flex flex-grow justify-center text-custom-text-200 text-sm"
+                    closeOnSelect
+                >
+                    {layouts.map((layout, index) => (
+                        <CustomMenu.MenuItem
+                            onClick={() => {
+                                handleLayoutChange(ISSUE_LAYOUTS[index].key);
+                            }}
+                            className="flex items-center gap-2"
+                        >
+                            <layout.icon className="w-3 h-3" />
+                            <div className="text-custom-text-300">{layout.title}</div>
+                        </CustomMenu.MenuItem>
+                    ))}
+                </CustomMenu>
+                <div className="flex flex-grow justify-center border-l border-custom-border-200 items-center text-custom-text-200 text-sm">
+                    <FiltersDropdown
+                        title="Filters"
+                        placement="bottom-end"
+                        menuButton={
+                            <span className="flex items-center text-custom-text-200 text-sm">
+                                Filters
+                                <ChevronDown className="text-custom-text-200  h-4 w-4 ml-2" />
+                            </span>
+                        }
+                    >
+                        <FilterSelection
+                            filters={issueFilters?.filters ?? {}}
+                            handleFiltersUpdate={handleFiltersUpdate}
+                            layoutDisplayFiltersOptions={
+                                activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[activeLayout] : undefined
+                            }
+                            labels={projectLabels}
+                            memberIds={projectMemberIds ?? undefined}
+                            states={projectStates}
+                        />
+                    </FiltersDropdown>
+                </div>
+                <div className="flex flex-grow justify-center border-l border-custom-border-200 items-center text-custom-text-200 text-sm">
+                    <FiltersDropdown
+                        title="Display"
+                        placement="bottom-end"
+                        menuButton={
+                            <span className="flex items-center text-custom-text-200 text-sm">
+                                Display
+                                <ChevronDown className="text-custom-text-200 h-4 w-4 ml-2" />
+                            </span>
+                        }
+                    >
+                        <DisplayFiltersSelection
+                            layoutDisplayFiltersOptions={
+                                activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[activeLayout] : undefined
+                            }
+                            displayFilters={issueFilters?.displayFilters ?? {}}
+                            handleDisplayFiltersUpdate={handleDisplayFilters}
+                            displayProperties={issueFilters?.displayProperties ?? {}}
+                            handleDisplayPropertiesUpdate={handleDisplayProperties}
+                        />
+                    </FiltersDropdown>
+                </div>
+
+                <button
+                    onClick={() => setAnalyticsModal(true)}
+                    className="flex flex-grow justify-center text-custom-text-200 text-sm border-l border-custom-border-200"
+                >
+                    Analytics
+                </button>
+            </div>
+        </>
+    );
+};
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/cycles/index.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/cycles/index.tsx
index 22ec70b31..0541dfce4 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/cycles/index.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/cycles/index.tsx
@@ -108,14 +108,13 @@ const ProjectCyclesPage: NextPageWithLayout = observer(() => {
           selectedIndex={CYCLE_TAB_LIST.findIndex((i) => i.key == cycleTab)}
           onChange={(i) => handleCurrentView(CYCLE_TAB_LIST[i]?.key ?? "active")}
         >
-          <div className="flex flex-col items-end justify-between gap-4 border-b border-custom-border-200 px-4 pb-4 sm:flex-row sm:items-center sm:px-5 sm:pb-0">
+          <div className="flex flex-col items-start justify-between gap-4 border-b border-custom-border-200 px-4 sm:flex-row sm:items-center sm:px-5 sm:pb-0">
             <Tab.List as="div" className="flex items-center overflow-x-scroll">
               {CYCLE_TAB_LIST.map((tab) => (
                 <Tab
                   key={tab.key}
                   className={({ selected }) =>
-                    `border-b-2 p-4 text-sm font-medium outline-none ${
-                      selected ? "border-custom-primary-100 text-custom-primary-100" : "border-transparent"
+                    `border-b-2 p-4 text-sm font-medium outline-none ${selected ? "border-custom-primary-100 text-custom-primary-100" : "border-transparent"
                     }`
                   }
                 >
@@ -123,32 +122,32 @@ const ProjectCyclesPage: NextPageWithLayout = observer(() => {
                 </Tab>
               ))}
             </Tab.List>
-            {cycleTab !== "active" && (
-              <div className="flex items-center gap-1 rounded bg-custom-background-80 p-1">
-                {CYCLE_VIEW_LAYOUTS.map((layout) => {
-                  if (layout.key === "gantt" && cycleTab === "draft") return null;
+            <div className="hidden sm:block">
+              {cycleTab !== "active" && (
+                <div className="flex items-center self-end sm:self-center md:self-center lg:self-center gap-1 rounded bg-custom-background-80 p-1">
+                  {CYCLE_VIEW_LAYOUTS.map((layout) => {
+                    if (layout.key === "gantt" && cycleTab === "draft") return null;
 
-                  return (
-                    <Tooltip key={layout.key} tooltipContent={layout.title}>
-                      <button
-                        type="button"
-                        className={`group grid h-[22px] w-7 place-items-center overflow-hidden rounded transition-all hover:bg-custom-background-100 ${
-                          cycleLayout == layout.key ? "bg-custom-background-100 shadow-custom-shadow-2xs" : ""
-                        }`}
-                        onClick={() => handleCurrentLayout(layout.key as TCycleLayout)}
-                      >
-                        <layout.icon
-                          strokeWidth={2}
-                          className={`h-3.5 w-3.5 ${
-                            cycleLayout == layout.key ? "text-custom-text-100" : "text-custom-text-200"
-                          }`}
-                        />
-                      </button>
-                    </Tooltip>
-                  );
-                })}
-              </div>
-            )}
+                    return (
+                      <Tooltip key={layout.key} tooltipContent={layout.title}>
+                        <button
+                          type="button"
+                          className={`group grid h-[22px] w-7 place-items-center overflow-hidden rounded transition-all hover:bg-custom-background-100 ${cycleLayout == layout.key ? "bg-custom-background-100 shadow-custom-shadow-2xs" : ""
+                            }`}
+                          onClick={() => handleCurrentLayout(layout.key as TCycleLayout)}
+                        >
+                          <layout.icon
+                            strokeWidth={2}
+                            className={`h-3.5 w-3.5 ${cycleLayout == layout.key ? "text-custom-text-100" : "text-custom-text-200"
+                              }`}
+                          />
+                        </button>
+                      </Tooltip>
+                    );
+                  })}
+                </div>
+              )}
+            </div>
           </div>
 
           <Tab.Panels as={Fragment}>

From 0a99a1a09131ae9f5566fbf0fe455c7306561d8e Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Wed, 7 Feb 2024 13:44:45 +0530
Subject: [PATCH 18/58] fix: dashboard header z index and workspace active
 cycles fix (#3581)

* fix: dashboard header z index fix

* chore: workspace active cycles upgrade page improvement
---
 web/components/headers/workspace-dashboard.tsx    |  2 +-
 .../workspace/workspace-active-cycles-upgrade.tsx | 15 ++-------------
 2 files changed, 3 insertions(+), 14 deletions(-)

diff --git a/web/components/headers/workspace-dashboard.tsx b/web/components/headers/workspace-dashboard.tsx
index 2210a4270..d074132e2 100644
--- a/web/components/headers/workspace-dashboard.tsx
+++ b/web/components/headers/workspace-dashboard.tsx
@@ -18,7 +18,7 @@ export const WorkspaceDashboardHeader = () => {
   return (
     <>
       <ProductUpdatesModal isOpen={isProductUpdatesModalOpen} setIsOpen={setIsProductUpdatesModalOpen} />
-      <div className="relative z-20 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
+      <div className="relative z-[15] flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
         <div className="flex items-center gap-2 overflow-ellipsis whitespace-nowrap">
           <SidebarHamburgerToggle />
           <div>
diff --git a/web/components/workspace/workspace-active-cycles-upgrade.tsx b/web/components/workspace/workspace-active-cycles-upgrade.tsx
index 31d31380d..086e95182 100644
--- a/web/components/workspace/workspace-active-cycles-upgrade.tsx
+++ b/web/components/workspace/workspace-active-cycles-upgrade.tsx
@@ -19,7 +19,7 @@ export const WorkspaceActiveCyclesUpgrade = observer(() => {
   const isDarkMode = currentUser?.theme.theme === "dark";
 
   return (
-    <div className="flex flex-col gap-10 p-8 rounded-xl">
+    <div className="flex flex-col gap-10 pt-8 px-8 rounded-xl h-full">
       <div
         className={cn("flex item-center justify-between rounded-xl min-h-[25rem]", {
           "bg-gradient-to-l from-[#CFCFCF]  to-[#212121]": currentUser?.theme.theme === "dark",
@@ -43,17 +43,6 @@ export const WorkspaceActiveCyclesUpgrade = observer(() => {
               <Crown className="h-3.5 w-3.5" />
               Upgrade
             </a>
-            <a
-              className={cn("text-sm underline", {
-                "text-white": currentUser?.theme.theme === "dark",
-                "text-blue-600": currentUser?.theme.theme === "light",
-              })}
-              href="https://plane.so/pricing"
-              target="_blank"
-              rel="noreferrer"
-            >
-              Talk custom pricing
-            </a>
           </div>
           <span className="absolute left-0 top-0">
             <Image
@@ -84,7 +73,7 @@ export const WorkspaceActiveCyclesUpgrade = observer(() => {
           </span>
         </div>
       </div>
-      <div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-5">
+      <div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-5 pb-8 h-full">
         {WORKSPACE_ACTIVE_CYCLES_DETAILS.map((item) => (
           <div className="flex flex-col gap-2 p-4 min-h-32 w-full bg-custom-background-80 rounded-md">
             <div className="flex items-center gap-2">

From 065226f8b2409048b2e485aef3691bdfd745ec84 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Wed, 7 Feb 2024 15:06:07 +0530
Subject: [PATCH 19/58] fix: draft issue peek overview (#3582)

* chore: project, view and shortcut modal alignment consistency

* chore: issue highlight list layout improvement

* fix: draft issue peek overview fix

* fix: draft issue layout inline editing
---
 web/components/command-palette/shortcuts-modal/modal.tsx       | 2 +-
 web/components/issues/issue-layouts/list/block.tsx             | 3 ++-
 .../issues/issue-layouts/roots/draft-issue-layout-root.tsx     | 3 +++
 web/components/project/create-project-modal.tsx                | 2 +-
 web/components/views/modal.tsx                                 | 2 +-
 web/store/issue/draft/issue.store.ts                           | 2 +-
 6 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/web/components/command-palette/shortcuts-modal/modal.tsx b/web/components/command-palette/shortcuts-modal/modal.tsx
index bc7d67d88..3054bdb28 100644
--- a/web/components/command-palette/shortcuts-modal/modal.tsx
+++ b/web/components/command-palette/shortcuts-modal/modal.tsx
@@ -47,7 +47,7 @@ export const ShortcutsModal: FC<Props> = (props) => {
             leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
           >
             <Dialog.Panel className="h-full w-full">
-              <div className="grid h-full w-full place-items-center p-5">
+              <div className="my-10 flex items-center justify-center p-4 text-center sm:p-0 md:my-20">
                 <div className="flex h-[61vh] w-full flex-col  space-y-4 overflow-hidden rounded-lg bg-custom-background-100 p-5 shadow-custom-shadow-md transition-all sm:w-[28rem]">
                   <Dialog.Title as="h3" className="flex justify-between">
                     <span className="text-lg font-medium">Keyboard shortcuts</span>
diff --git a/web/components/issues/issue-layouts/list/block.tsx b/web/components/issues/issue-layouts/list/block.tsx
index 6b353d8c3..c4ced9326 100644
--- a/web/components/issues/issue-layouts/list/block.tsx
+++ b/web/components/issues/issue-layouts/list/block.tsx
@@ -51,10 +51,11 @@ export const IssueBlock: React.FC<IssueBlockProps> = observer((props: IssueBlock
     <>
       <div
         className={cn(
-          "relative flex items-center gap-3 bg-custom-background-100 p-3 text-sm border border-transparent border-b-custom-border-200 last:border-b-transparent",
+          "relative flex items-center gap-3 bg-custom-background-100 p-3 text-sm border border-transparent border-b-custom-border-200",
           {
             "border border-custom-primary-70 hover:border-custom-primary-70":
               peekIssue && peekIssue.issueId === issue.id,
+            "last:border-b-transparent": peekIssue?.issueId !== issue.id,
           }
         )}
       >
diff --git a/web/components/issues/issue-layouts/roots/draft-issue-layout-root.tsx b/web/components/issues/issue-layouts/roots/draft-issue-layout-root.tsx
index 075a16aa2..8071b40e5 100644
--- a/web/components/issues/issue-layouts/roots/draft-issue-layout-root.tsx
+++ b/web/components/issues/issue-layouts/roots/draft-issue-layout-root.tsx
@@ -8,6 +8,7 @@ import { useIssues } from "hooks/store";
 import { DraftIssueAppliedFiltersRoot } from "../filters/applied-filters/roots/draft-issue";
 import { DraftIssueListLayout } from "../list/roots/draft-issue-root";
 import { ProjectDraftEmptyState } from "../empty-states";
+import { IssuePeekOverview } from "components/issues/peek-overview";
 // ui
 import { Spinner } from "@plane/ui";
 import { DraftKanBanLayout } from "../kanban/roots/draft-issue-root";
@@ -57,6 +58,8 @@ export const DraftIssueLayoutRoot: React.FC = observer(() => {
               ) : activeLayout === "kanban" ? (
                 <DraftKanBanLayout />
               ) : null}
+              {/* issue peek overview */}
+              <IssuePeekOverview />
             </div>
           )}
         </>
diff --git a/web/components/project/create-project-modal.tsx b/web/components/project/create-project-modal.tsx
index 377ef06c1..7d6a0c5e9 100644
--- a/web/components/project/create-project-modal.tsx
+++ b/web/components/project/create-project-modal.tsx
@@ -208,7 +208,7 @@ export const CreateProjectModal: FC<Props> = observer((props) => {
         </Transition.Child>
 
         <div className="fixed inset-0 z-20 overflow-y-auto">
-          <div className="flex min-h-full items-center justify-center p-4 text-center sm:p-0">
+          <div className="my-10 flex items-center justify-center p-4 text-center sm:p-0 md:my-20">
             <Transition.Child
               as={Fragment}
               enter="ease-out duration-300"
diff --git a/web/components/views/modal.tsx b/web/components/views/modal.tsx
index da983a8bc..43cea7d5c 100644
--- a/web/components/views/modal.tsx
+++ b/web/components/views/modal.tsx
@@ -81,7 +81,7 @@ export const CreateUpdateProjectViewModal: FC<Props> = observer((props) => {
         </Transition.Child>
 
         <div className="fixed inset-0 z-20 overflow-y-auto">
-          <div className="flex min-h-full items-center justify-center p-4 text-center sm:p-0">
+          <div className="my-10 flex items-center justify-center p-4 text-center sm:p-0 md:my-20">
             <Transition.Child
               as={Fragment}
               enter="ease-out duration-300"
diff --git a/web/store/issue/draft/issue.store.ts b/web/store/issue/draft/issue.store.ts
index f45c6fe20..13d14484a 100644
--- a/web/store/issue/draft/issue.store.ts
+++ b/web/store/issue/draft/issue.store.ts
@@ -29,7 +29,7 @@ export class DraftIssues extends IssueHelperStore implements IDraftIssues {
   viewFlags = {
     enableQuickAdd: false,
     enableIssueCreation: true,
-    enableInlineEditing: false,
+    enableInlineEditing: true,
   };
   // root store
   rootIssueStore: IIssueRootStore;

From 4563b50fad5c6e0a852272e1ba05f15890e101bd Mon Sep 17 00:00:00 2001
From: Bavisetti Narayan <72156168+NarayanBavisetti@users.noreply.github.com>
Date: Wed, 7 Feb 2024 15:13:35 +0530
Subject: [PATCH 20/58] chore: module issue count (#3566)

---
 apiserver/plane/app/views/module.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apiserver/plane/app/views/module.py b/apiserver/plane/app/views/module.py
index fafcfed4b..4792a1f79 100644
--- a/apiserver/plane/app/views/module.py
+++ b/apiserver/plane/app/views/module.py
@@ -334,7 +334,7 @@ class ModuleIssueViewSet(WebhookMixin, BaseViewSet):
 
     def get_queryset(self):
         return (
-            Issue.objects.filter(
+            Issue.issue_objects.filter(
                 project_id=self.kwargs.get("project_id"),
                 workspace__slug=self.kwargs.get("slug"),
                 issue_module__module_id=self.kwargs.get("module_id")

From 76db394ab144fb52cdb3816b5f4060872df6fe34 Mon Sep 17 00:00:00 2001
From: Bavisetti Narayan <72156168+NarayanBavisetti@users.noreply.github.com>
Date: Wed, 7 Feb 2024 15:14:30 +0530
Subject: [PATCH 21/58] chore: mention notification and webhook faliure (#3573)

* fix: mention rstrip error

* chore: webhook deactivation email

* chore: changed template

* chore: current site for external api's

* chore: mention in template displayed

* chore: mention tag fix

* chore: comment user name displayed
---
 apiserver/plane/api/views/base.py             |    8 +
 apiserver/plane/app/views/base.py             |    1 +
 .../plane/bgtasks/email_notification_task.py  |  254 +--
 apiserver/plane/bgtasks/notification_task.py  |    5 +-
 apiserver/plane/bgtasks/webhook_task.py       |   79 +-
 apiserver/plane/settings/common.py            |    2 -
 .../emails/notifications/issue-updates.html   |   46 +-
 .../notifications/webhook-deactivate.html     | 1544 +++++++++++++++++
 8 files changed, 1803 insertions(+), 136 deletions(-)
 create mode 100644 apiserver/templates/emails/notifications/webhook-deactivate.html

diff --git a/apiserver/plane/api/views/base.py b/apiserver/plane/api/views/base.py
index b069ef78c..edb89f9b1 100644
--- a/apiserver/plane/api/views/base.py
+++ b/apiserver/plane/api/views/base.py
@@ -1,6 +1,8 @@
 # Python imports
 import zoneinfo
 import json
+from urllib.parse import urlparse
+
 
 # Django imports
 from django.conf import settings
@@ -51,6 +53,11 @@ class WebhookMixin:
             and self.request.method in ["POST", "PATCH", "DELETE"]
             and response.status_code in [200, 201, 204]
         ):
+            url = request.build_absolute_uri()
+            parsed_url = urlparse(url)
+            # Extract the scheme and netloc
+            scheme = parsed_url.scheme
+            netloc = parsed_url.netloc
             # Push the object to delay
             send_webhook.delay(
                 event=self.webhook_event,
@@ -59,6 +66,7 @@ class WebhookMixin:
                 action=self.request.method,
                 slug=self.workspace_slug,
                 bulk=self.bulk,
+                current_site=f"{scheme}://{netloc}",
             )
 
         return response
diff --git a/apiserver/plane/app/views/base.py b/apiserver/plane/app/views/base.py
index e07cb811c..fa1e7559b 100644
--- a/apiserver/plane/app/views/base.py
+++ b/apiserver/plane/app/views/base.py
@@ -64,6 +64,7 @@ class WebhookMixin:
                 action=self.request.method,
                 slug=self.workspace_slug,
                 bulk=self.bulk,
+                current_site=request.META.get("HTTP_ORIGIN"),
             )
 
         return response
diff --git a/apiserver/plane/bgtasks/email_notification_task.py b/apiserver/plane/bgtasks/email_notification_task.py
index 713835033..9e9b348e1 100644
--- a/apiserver/plane/bgtasks/email_notification_task.py
+++ b/apiserver/plane/bgtasks/email_notification_task.py
@@ -1,5 +1,6 @@
-import json
 from datetime import datetime
+from bs4 import BeautifulSoup
+
 
 # Third party imports
 from celery import shared_task
@@ -9,7 +10,6 @@ from django.utils import timezone
 from django.core.mail import EmailMultiAlternatives, get_connection
 from django.template.loader import render_to_string
 from django.utils.html import strip_tags
-from django.conf import settings
 
 # Module imports
 from plane.db.models import EmailNotificationLog, User, Issue
@@ -40,7 +40,7 @@ def stack_email_notification():
     processed_notifications = []
     # Loop through all the issues to create the emails
     for receiver_id in receivers:
-        # Notifcation triggered for the receiver
+        # Notification triggered for the receiver
         receiver_notifications = [
             notification
             for notification in email_notifications
@@ -124,119 +124,153 @@ def create_payload(notification_data):
 
     return data
 
+def process_mention(mention_component):
+    soup = BeautifulSoup(mention_component, 'html.parser')
+    mentions = soup.find_all('mention-component')
+    for mention in mentions:
+        user_id = mention['id']
+        user = User.objects.get(pk=user_id)
+        user_name = user.display_name
+        highlighted_name = f"@{user_name}"
+        mention.replace_with(highlighted_name)
+    return str(soup)
+
+def process_html_content(content):
+    processed_content_list = []
+    for html_content in content:
+        processed_content = process_mention(html_content)
+        processed_content_list.append(processed_content)  
+    return processed_content_list
 
 @shared_task
 def send_email_notification(
     issue_id, notification_data, receiver_id, email_notification_ids
 ):
-    ri = redis_instance()
-    base_api = (ri.get(str(issue_id)).decode())
-    data = create_payload(notification_data=notification_data)
-
-    # Get email configurations
-    (
-        EMAIL_HOST,
-        EMAIL_HOST_USER,
-        EMAIL_HOST_PASSWORD,
-        EMAIL_PORT,
-        EMAIL_USE_TLS,
-        EMAIL_FROM,
-    ) = get_email_configuration()
-
-    receiver = User.objects.get(pk=receiver_id)
-    issue = Issue.objects.get(pk=issue_id)
-    template_data = []
-    total_changes = 0
-    comments = []
-    actors_involved = []
-    for actor_id, changes in data.items():
-        actor = User.objects.get(pk=actor_id)
-        total_changes = total_changes + len(changes)
-        comment = changes.pop("comment", False)
-        actors_involved.append(actor_id)
-        if comment:
-            comments.append(
-                {
-                    "actor_comments": comment,
-                    "actor_detail": {
-                        "avatar_url": actor.avatar,
-                        "first_name": actor.first_name,
-                        "last_name": actor.last_name,
-                    },
-                }
-            )
-        activity_time = changes.pop("activity_time")
-        # Parse the input string into a datetime object
-        formatted_time = datetime.strptime(activity_time, "%Y-%m-%d %H:%M:%S").strftime("%H:%M %p")
-
-        if changes:
-            template_data.append(
-                {
-                    "actor_detail": {
-                        "avatar_url": actor.avatar,
-                        "first_name": actor.first_name,
-                        "last_name": actor.last_name,
-                    },
-                    "changes": changes,
-                    "issue_details": {
-                        "name": issue.name,
-                        "identifier": f"{issue.project.identifier}-{issue.sequence_id}",
-                    },
-                    "activity_time": str(formatted_time),
-                }
-        )
-
-    summary = "Updates were made to the issue by"
-
-    # Send the mail
-    subject = f"{issue.project.identifier}-{issue.sequence_id} {issue.name}"
-    context = {
-        "data": template_data,
-        "summary": summary,
-        "actors_involved": len(set(actors_involved)),
-        "issue": {
-            "issue_identifier": f"{str(issue.project.identifier)}-{str(issue.sequence_id)}",
-            "name": issue.name,
-            "issue_url": f"{base_api}/{str(issue.project.workspace.slug)}/projects/{str(issue.project.id)}/issues/{str(issue.id)}",
-        },
-        "receiver": {
-            "email": receiver.email,
-        },
-        "issue_url": f"{base_api}/{str(issue.project.workspace.slug)}/projects/{str(issue.project.id)}/issues/{str(issue.id)}",
-        "project_url": f"{base_api}/{str(issue.project.workspace.slug)}/projects/{str(issue.project.id)}/issues/",
-        "workspace":str(issue.project.workspace.slug),
-        "project": str(issue.project.name),
-        "user_preference": f"{base_api}/profile/preferences/email",
-        "comments": comments,
-    }
-    html_content = render_to_string(
-        "emails/notifications/issue-updates.html", context
-    )
-    text_content = strip_tags(html_content)
-
     try:
-        connection = get_connection(
-            host=EMAIL_HOST,
-            port=int(EMAIL_PORT),
-            username=EMAIL_HOST_USER,
-            password=EMAIL_HOST_PASSWORD,
-            use_tls=EMAIL_USE_TLS == "1",
-        )
+        ri = redis_instance()
+        base_api = (ri.get(str(issue_id)).decode())
+        data = create_payload(notification_data=notification_data)
 
-        msg = EmailMultiAlternatives(
-            subject=subject,
-            body=text_content,
-            from_email=EMAIL_FROM,
-            to=[receiver.email],
-            connection=connection,
-        )
-        msg.attach_alternative(html_content, "text/html")
-        msg.send()
+        # Get email configurations
+        (
+            EMAIL_HOST,
+            EMAIL_HOST_USER,
+            EMAIL_HOST_PASSWORD,
+            EMAIL_PORT,
+            EMAIL_USE_TLS,
+            EMAIL_FROM,
+        ) = get_email_configuration()
 
-        EmailNotificationLog.objects.filter(
-            pk__in=email_notification_ids
-        ).update(sent_at=timezone.now())
-        return
-    except Exception as e:
-        print(e)
+        receiver = User.objects.get(pk=receiver_id)
+        issue = Issue.objects.get(pk=issue_id)
+        template_data = []
+        total_changes = 0
+        comments = []
+        actors_involved = []
+        for actor_id, changes in data.items():
+            actor = User.objects.get(pk=actor_id)
+            total_changes = total_changes + len(changes)
+            comment = changes.pop("comment", False)
+            mention = changes.pop("mention", False)
+            actors_involved.append(actor_id)
+            if comment:
+                comments.append(
+                    {
+                        "actor_comments": comment,
+                        "actor_detail": {
+                            "avatar_url": actor.avatar,
+                            "first_name": actor.first_name,
+                            "last_name": actor.last_name,
+                        },
+                    }
+                )
+            if mention:
+                mention["new_value"] = process_html_content(mention.get("new_value"))
+                mention["old_value"] = process_html_content(mention.get("old_value"))
+                comments.append(
+                    {
+                        "actor_comments": mention,
+                        "actor_detail": {
+                            "avatar_url": actor.avatar,
+                            "first_name": actor.first_name,
+                            "last_name": actor.last_name,
+                        },
+                    }
+                )
+            activity_time = changes.pop("activity_time")
+            # Parse the input string into a datetime object
+            formatted_time = datetime.strptime(activity_time, "%Y-%m-%d %H:%M:%S").strftime("%H:%M %p")
+
+            if changes:
+                template_data.append(
+                    {
+                        "actor_detail": {
+                            "avatar_url": actor.avatar,
+                            "first_name": actor.first_name,
+                            "last_name": actor.last_name,
+                        },
+                        "changes": changes,
+                        "issue_details": {
+                            "name": issue.name,
+                            "identifier": f"{issue.project.identifier}-{issue.sequence_id}",
+                        },
+                        "activity_time": str(formatted_time),
+                    }
+            )
+
+        summary = "Updates were made to the issue by"
+
+        # Send the mail
+        subject = f"{issue.project.identifier}-{issue.sequence_id} {issue.name}"
+        context = {
+            "data": template_data,
+            "summary": summary,
+            "actors_involved": len(set(actors_involved)),
+            "issue": {
+                "issue_identifier": f"{str(issue.project.identifier)}-{str(issue.sequence_id)}",
+                "name": issue.name,
+                "issue_url": f"{base_api}/{str(issue.project.workspace.slug)}/projects/{str(issue.project.id)}/issues/{str(issue.id)}",
+            },
+            "receiver": {
+                "email": receiver.email,
+            },
+            "issue_url": f"{base_api}/{str(issue.project.workspace.slug)}/projects/{str(issue.project.id)}/issues/{str(issue.id)}",
+            "project_url": f"{base_api}/{str(issue.project.workspace.slug)}/projects/{str(issue.project.id)}/issues/",
+            "workspace":str(issue.project.workspace.slug),
+            "project": str(issue.project.name),
+            "user_preference": f"{base_api}/profile/preferences/email",
+            "comments": comments,
+        }
+        html_content = render_to_string(
+            "emails/notifications/issue-updates.html", context
+        )
+        text_content = strip_tags(html_content)
+
+        try:
+            connection = get_connection(
+                host=EMAIL_HOST,
+                port=int(EMAIL_PORT),
+                username=EMAIL_HOST_USER,
+                password=EMAIL_HOST_PASSWORD,
+                use_tls=EMAIL_USE_TLS == "1",
+            )
+
+            msg = EmailMultiAlternatives(
+                subject=subject,
+                body=text_content,
+                from_email=EMAIL_FROM,
+                to=[receiver.email],
+                connection=connection,
+            )
+            msg.attach_alternative(html_content, "text/html")
+            msg.send()
+
+            EmailNotificationLog.objects.filter(
+                pk__in=email_notification_ids
+            ).update(sent_at=timezone.now())
+            return
+        except Exception as e:
+            print(e)
+            return
+    except Issue.DoesNotExist:
         return
diff --git a/apiserver/plane/bgtasks/notification_task.py b/apiserver/plane/bgtasks/notification_task.py
index 6cfbec72a..0a843e4a6 100644
--- a/apiserver/plane/bgtasks/notification_task.py
+++ b/apiserver/plane/bgtasks/notification_task.py
@@ -515,7 +515,7 @@ def notifications(
                             bulk_email_logs.append(
                                 EmailNotificationLog(
                                     triggered_by_id=actor_id,
-                                    receiver_id=subscriber,
+                                    receiver_id=mention_id,
                                     entity_identifier=issue_id,
                                     entity_name="issue",
                                     data={
@@ -552,6 +552,7 @@ def notifications(
                                             "old_value": str(
                                                 issue_activity.get("old_value")
                                             ),
+                                            "activity_time": issue_activity.get("created_at"),
                                         },
                                     },
                                 )
@@ -639,6 +640,7 @@ def notifications(
                                             "old_value": str(
                                                 last_activity.old_value
                                             ),
+                                            "activity_time": issue_activity.get("created_at"),
                                         },
                                     },
                                 )
@@ -695,6 +697,7 @@ def notifications(
                                                         "old_value"
                                                     )
                                                 ),
+                                                "activity_time": issue_activity.get("created_at"),
                                             },
                                         },
                                     )
diff --git a/apiserver/plane/bgtasks/webhook_task.py b/apiserver/plane/bgtasks/webhook_task.py
index 34bba0cf8..605f48dd9 100644
--- a/apiserver/plane/bgtasks/webhook_task.py
+++ b/apiserver/plane/bgtasks/webhook_task.py
@@ -7,6 +7,9 @@ import hmac
 # Django imports
 from django.conf import settings
 from django.core.serializers.json import DjangoJSONEncoder
+from django.core.mail import EmailMultiAlternatives, get_connection
+from django.template.loader import render_to_string
+from django.utils.html import strip_tags
 
 # Third party imports
 from celery import shared_task
@@ -22,10 +25,10 @@ from plane.db.models import (
     ModuleIssue,
     CycleIssue,
     IssueComment,
+    User,
 )
 from plane.api.serializers import (
     ProjectSerializer,
-    IssueSerializer,
     CycleSerializer,
     ModuleSerializer,
     CycleIssueSerializer,
@@ -34,6 +37,9 @@ from plane.api.serializers import (
     IssueExpandSerializer,
 )
 
+# Module imports
+from plane.license.utils.instance_value import get_email_configuration
+
 SERIALIZER_MAPPER = {
     "project": ProjectSerializer,
     "issue": IssueExpandSerializer,
@@ -72,7 +78,7 @@ def get_model_data(event, event_id, many=False):
     max_retries=5,
     retry_jitter=True,
 )
-def webhook_task(self, webhook, slug, event, event_data, action):
+def webhook_task(self, webhook, slug, event, event_data, action, current_site):
     try:
         webhook = Webhook.objects.get(id=webhook, workspace__slug=slug)
 
@@ -151,7 +157,18 @@ def webhook_task(self, webhook, slug, event, event_data, action):
             response_body=str(e),
             retry_count=str(self.request.retries),
         )
-
+        # Retry logic
+        if self.request.retries >= self.max_retries:
+            Webhook.objects.filter(pk=webhook.id).update(is_active=False)   
+            if webhook:
+                # send email for the deactivation of the webhook
+                send_webhook_deactivation_email(
+                    webhook_id=webhook.id,
+                    receiver_id=webhook.created_by_id,
+                    reason=str(e),
+                    current_site=current_site,
+                )
+            return
         raise requests.RequestException()
 
     except Exception as e:
@@ -162,7 +179,7 @@ def webhook_task(self, webhook, slug, event, event_data, action):
 
 
 @shared_task()
-def send_webhook(event, payload, kw, action, slug, bulk):
+def send_webhook(event, payload, kw, action, slug, bulk, current_site):
     try:
         webhooks = Webhook.objects.filter(workspace__slug=slug, is_active=True)
 
@@ -216,6 +233,7 @@ def send_webhook(event, payload, kw, action, slug, bulk):
                         event=event,
                         event_data=data,
                         action=action,
+                        current_site=current_site,
                     )
 
     except Exception as e:
@@ -223,3 +241,56 @@ def send_webhook(event, payload, kw, action, slug, bulk):
             print(e)
         capture_exception(e)
         return
+
+
+@shared_task
+def send_webhook_deactivation_email(webhook_id, receiver_id, current_site, reason):
+    # Get email configurations
+    (
+        EMAIL_HOST,
+        EMAIL_HOST_USER,
+        EMAIL_HOST_PASSWORD,
+        EMAIL_PORT,
+        EMAIL_USE_TLS,
+        EMAIL_FROM,
+    ) = get_email_configuration()
+
+    receiver = User.objects.get(pk=receiver_id)
+    webhook = Webhook.objects.get(pk=webhook_id) 
+    subject="Webhook Deactivated"
+    message=f"Webhook {webhook.url} has been deactivated due to failed requests."
+
+    # Send the mail
+    context = {
+        "email": receiver.email,
+        "message": message,
+        "webhook_url":f"{current_site}/{str(webhook.workspace.slug)}/settings/webhooks/{str(webhook.id)}",
+    }
+    html_content = render_to_string(
+        "emails/notifications/webhook-deactivate.html", context
+    )
+    text_content = strip_tags(html_content)
+
+    try:
+        connection = get_connection(
+            host=EMAIL_HOST,
+            port=int(EMAIL_PORT),
+            username=EMAIL_HOST_USER,
+            password=EMAIL_HOST_PASSWORD,
+            use_tls=EMAIL_USE_TLS == "1",
+        )
+
+        msg = EmailMultiAlternatives(
+            subject=subject,
+            body=text_content,
+            from_email=EMAIL_FROM,
+            to=[receiver.email],
+            connection=connection,
+        )
+        msg.attach_alternative(html_content, "text/html")
+        msg.send()
+
+        return
+    except Exception as e:
+        print(e)
+        return
diff --git a/apiserver/plane/settings/common.py b/apiserver/plane/settings/common.py
index 444248382..f03209250 100644
--- a/apiserver/plane/settings/common.py
+++ b/apiserver/plane/settings/common.py
@@ -282,10 +282,8 @@ if REDIS_SSL:
     redis_url = os.environ.get("REDIS_URL")
     broker_url = f"{redis_url}?ssl_cert_reqs={ssl.CERT_NONE.name}&ssl_ca_certs={certifi.where()}"
     CELERY_BROKER_URL = broker_url
-    CELERY_RESULT_BACKEND = broker_url
 else:
     CELERY_BROKER_URL = REDIS_URL
-    CELERY_RESULT_BACKEND = REDIS_URL
 
 CELERY_IMPORTS = (
     "plane.bgtasks.issue_automation_task",
diff --git a/apiserver/templates/emails/notifications/issue-updates.html b/apiserver/templates/emails/notifications/issue-updates.html
index fa50631c5..a7990562d 100644
--- a/apiserver/templates/emails/notifications/issue-updates.html
+++ b/apiserver/templates/emails/notifications/issue-updates.html
@@ -108,25 +108,33 @@
                   margin-bottom: 15px;
                   "
                   />
-               {% if actors_involved == 1 %}
-               <p style="font-size: 1rem;color: #1f2d5c; line-height: 28px">
-                  {{summary}}
-                  <span style="font-size: 1rem; font-weight: 700; line-height: 28px">
-                  {{ data.0.actor_detail.first_name}}
-                  {{data.0.actor_detail.last_name}}
-                  </span>.
-               </p>
-               {% else %}
-               <p style="font-size: 1rem;color: #1f2d5c; line-height: 28px">
-                  {{summary}}
-                  <span style="font-size: 1rem; font-weight: 700; line-height: 28px">
-                  {{ data.0.actor_detail.first_name}}
-                  {{data.0.actor_detail.last_name }}
-                  </span>and others.
-               </p>
-               {% endif %}
-
-
+                  {% if actors_involved == 1 %}
+                  <p style="font-size: 1rem;color: #1f2d5c; line-height: 28px">
+                     {{summary}}
+                     <span style="font-size: 1rem; font-weight: 700; line-height: 28px">
+                     {% if data|length > 0 %}
+                     {{ data.0.actor_detail.first_name}}
+                     {{data.0.actor_detail.last_name}}
+                     {% else %}
+                     {{ comments.0.actor_detail.first_name}}
+                     {{comments.0.actor_detail.last_name}}
+                     {% endif %}
+                     </span>.
+                  </p>
+                  {% else %}
+                  <p style="font-size: 1rem;color: #1f2d5c; line-height: 28px">
+                     {{summary}}
+                     <span style="font-size: 1rem; font-weight: 700; line-height: 28px">
+                     {% if data|length > 0 %}
+                     {{ data.0.actor_detail.first_name}}
+                     {{data.0.actor_detail.last_name}}
+                     {% else %}
+                     {{ comments.0.actor_detail.first_name}}
+                     {{comments.0.actor_detail.last_name}}
+                     {% endif %}
+                     </span>and others.
+                  </p>
+                  {% endif %}
                <!-- {% if actors_involved == 1 %}
                {% if data|length > 0 and comments|length == 0 %}
                <p style="font-size: 1rem;color: #1f2d5c; line-height: 28px">
diff --git a/apiserver/templates/emails/notifications/webhook-deactivate.html b/apiserver/templates/emails/notifications/webhook-deactivate.html
new file mode 100644
index 000000000..054395235
--- /dev/null
+++ b/apiserver/templates/emails/notifications/webhook-deactivate.html
@@ -0,0 +1,1544 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html
+  xmlns="http://www.w3.org/1999/xhtml"
+  xmlns:v="urn:schemas-microsoft-com:vml"
+  xmlns:o="urn:schemas-microsoft-com:office:office"
+>
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="format-detection" content="telephone=no" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>{{ message }}</title>
+    <style type="text/css" emogrify="no">
+      #outlook a {
+        padding: 0;
+      }
+      .ExternalClass {
+        width: 100%;
+      }
+      .ExternalClass,
+      .ExternalClass p,
+      .ExternalClass span,
+      .ExternalClass font,
+      .ExternalClass td,
+      .ExternalClass div {
+        line-height: 100%;
+      }
+      table td {
+        border-collapse: collapse;
+        mso-line-height-rule: exactly;
+      }
+      .editable.image {
+        font-size: 0 !important;
+        line-height: 0 !important;
+      }
+      .nl2go_preheader {
+        display: none !important;
+        mso-hide: all !important;
+        mso-line-height-rule: exactly;
+        visibility: hidden !important;
+        line-height: 0px !important;
+        font-size: 0px !important;
+      }
+      body {
+        width: 100% !important;
+        -webkit-text-size-adjust: 100%;
+        -ms-text-size-adjust: 100%;
+        margin: 0;
+        padding: 0;
+      }
+      img {
+        outline: none;
+        text-decoration: none;
+        -ms-interpolation-mode: bicubic;
+      }
+      a img {
+        border: none;
+      }
+      table {
+        border-collapse: collapse;
+        mso-table-lspace: 0pt;
+        mso-table-rspace: 0pt;
+      }
+      th {
+        font-weight: normal;
+        text-align: left;
+      }
+      *[class="gmail-fix"] {
+        display: none !important;
+      }
+    </style>
+    <style type="text/css" emogrify="no">
+      @media (max-width: 600px) {
+        .gmx-killpill {
+          content: " \03D1";
+        }
+      }
+    </style>
+    <style type="text/css" emogrify="no">
+      @media (max-width: 600px) {
+        .gmx-killpill {
+          content: " \03D1";
+        }
+        .r0-o {
+          border-style: solid !important;
+          margin: 0 auto 0 auto !important;
+          width: 320px !important;
+        }
+        .r1-i {
+          background-color: #ffffff !important;
+        }
+        .r2-c {
+          box-sizing: border-box !important;
+          text-align: center !important;
+          valign: top !important;
+          width: 100% !important;
+        }
+        .r3-o {
+          border-style: solid !important;
+          margin: 0 auto 0 auto !important;
+          width: 100% !important;
+        }
+        .r4-i {
+          padding-bottom: 20px !important;
+          padding-left: 15px !important;
+          padding-right: 15px !important;
+          padding-top: 20px !important;
+        }
+        .r5-c {
+          box-sizing: border-box !important;
+          display: block !important;
+          valign: top !important;
+          width: 100% !important;
+        }
+        .r6-o {
+          border-style: solid !important;
+          width: 100% !important;
+        }
+        .r7-i {
+          padding-left: 0px !important;
+          padding-right: 0px !important;
+        }
+        .r8-c {
+          box-sizing: border-box !important;
+          text-align: left !important;
+          valign: top !important;
+          width: 100% !important;
+        }
+        .r9-o {
+          border-style: solid !important;
+          margin: 0 auto 0 0 !important;
+          width: 100% !important;
+        }
+        .r10-i {
+          padding-bottom: 10px !important;
+          padding-left: 0px !important;
+          padding-right: 0px !important;
+          padding-top: 10px !important;
+        }
+        .r11-i {
+          padding-bottom: 15px !important;
+          padding-top: 15px !important;
+          text-align: left !important;
+        }
+        .r12-c {
+          box-sizing: border-box !important;
+          padding: 0 !important;
+          text-align: center !important;
+          valign: top !important;
+          width: 100% !important;
+        }
+        .r13-o {
+          border-style: solid !important;
+          margin: 0 auto 0 auto !important;
+          margin-bottom: 15px !important;
+          margin-top: 15px !important;
+          width: 100% !important;
+        }
+        .r14-i {
+          padding: 0 !important;
+          text-align: center !important;
+        }
+        .r15-r {
+          background-color: #3f76ff !important;
+          border-radius: 4px !important;
+          border-width: 0px !important;
+          box-sizing: border-box;
+          height: initial !important;
+          padding: 0 !important;
+          padding-bottom: 12px !important;
+          padding-top: 12px !important;
+          text-align: center !important;
+          width: 100% !important;
+        }
+        .r16-i {
+          padding-bottom: 0px !important;
+          padding-left: 15px !important;
+          padding-right: 15px !important;
+          padding-top: 0px !important;
+        }
+        .r17-c {
+          box-sizing: border-box !important;
+          text-align: center !important;
+          width: 100% !important;
+        }
+        .r18-i {
+          padding-bottom: 5px !important;
+          padding-top: 5px !important;
+        }
+        .r19-i {
+          padding-bottom: 15px !important;
+          padding-left: 15px !important;
+          padding-right: 15px !important;
+          padding-top: 15px !important;
+        }
+        .r20-o {
+          border-bottom-color: #efefef !important;
+          border-bottom-width: 2px !important;
+          border-left-color: #efefef !important;
+          border-left-width: 2px !important;
+          border-right-color: #efefef !important;
+          border-right-width: 2px !important;
+          border-style: solid !important;
+          border-top-color: #efefef !important;
+          border-top-width: 2px !important;
+          margin: 0 auto 0 0 !important;
+          width: 100% !important;
+        }
+        .r21-i {
+          padding-bottom: 5px !important;
+          padding-left: 5px !important;
+          padding-right: 5px !important;
+          padding-top: 5px !important;
+          text-align: left !important;
+        }
+        .r22-i {
+          padding-bottom: 5px !important;
+          padding-left: 15px !important;
+          padding-right: 15px !important;
+          padding-top: 5px !important;
+        }
+        .r23-c {
+          box-sizing: border-box !important;
+          width: 100% !important;
+        }
+        .r24-i {
+          font-size: 0px !important;
+          padding-bottom: 10px !important;
+          padding-left: 65px !important;
+          padding-right: 65px !important;
+          padding-top: 10px !important;
+        }
+        .r25-c {
+          box-sizing: border-box !important;
+          width: 32px !important;
+        }
+        .r26-o {
+          border-style: solid !important;
+          margin-right: 8px !important;
+          width: 32px !important;
+        }
+        .r27-o {
+          border-style: solid !important;
+          margin-right: 0px !important;
+          width: 32px !important;
+        }
+        .r28-i {
+          padding-bottom: 0px !important;
+          padding-top: 5px !important;
+          text-align: center !important;
+        }
+        body {
+          -webkit-text-size-adjust: none;
+        }
+        .nl2go-responsive-hide {
+          display: none;
+        }
+        .nl2go-body-table {
+          min-width: unset !important;
+        }
+        .mobshow {
+          height: auto !important;
+          overflow: visible !important;
+          max-height: unset !important;
+          visibility: visible !important;
+          border: none !important;
+        }
+        .resp-table {
+          display: inline-table !important;
+        }
+        .magic-resp {
+          display: table-cell !important;
+        }
+      }
+    </style>
+    <style type="text/css">
+      p,
+      h1,
+      h2,
+      h3,
+      h4,
+      ol,
+      ul {
+        margin: 0;
+      }
+      a,
+      a:link {
+        color: #3f76ff;
+        text-decoration: underline;
+      }
+      .nl2go-default-textstyle {
+        color: #3b3f44;
+        font-family: georgia, serif;
+        font-size: 16px;
+        line-height: 1.5;
+        word-break: break-word;
+      }
+      .default-button {
+        color: #ffffff;
+        font-family: georgia, serif;
+        font-size: 16px;
+        font-style: normal;
+        font-weight: normal;
+        line-height: 1.15;
+        text-decoration: none;
+        word-break: break-word;
+      }
+      .default-heading1 {
+        color: #1f2d3d;
+        font-family: arial, helvetica, sans-serif;
+        font-size: 36px;
+        word-break: break-word;
+      }
+      .default-heading2 {
+        color: #1f2d3d;
+        font-family: arial, helvetica, sans-serif;
+        font-size: 32px;
+        word-break: break-word;
+      }
+      .default-heading3 {
+        color: #1f2d3d;
+        font-family: arial, helvetica, sans-serif;
+        font-size: 24px;
+        word-break: break-word;
+      }
+      .default-heading4 {
+        color: #1f2d3d;
+        font-family: arial, helvetica, sans-serif;
+        font-size: 18px;
+        word-break: break-word;
+      }
+      a[x-apple-data-detectors] {
+        color: inherit !important;
+        text-decoration: inherit !important;
+        font-size: inherit !important;
+        font-family: inherit !important;
+        font-weight: inherit !important;
+        line-height: inherit !important;
+      }
+      .no-show-for-you {
+        border: none;
+        display: none;
+        float: none;
+        font-size: 0;
+        height: 0;
+        line-height: 0;
+        max-height: 0;
+        mso-hide: all;
+        overflow: hidden;
+        table-layout: fixed;
+        visibility: hidden;
+        width: 0;
+      }
+    </style>
+    <!--[if mso
+      ]><xml>
+        <o:OfficeDocumentSettings>
+          <o:AllowPNG /> <o:PixelsPerInch>96</o:PixelsPerInch>
+        </o:OfficeDocumentSettings>
+      </xml><!
+    [endif]-->
+    <style type="text/css">
+      a:link {
+        color: #3f76ff;
+        text-decoration: underline;
+      }
+    </style>
+  </head>
+  <body
+    bgcolor="#ffffff"
+    text="#3b3f44"
+    link="#3f76ff"
+    yahoo="fix"
+    style="background-color: #ffffff"
+  >
+    <table
+      cellspacing="0"
+      cellpadding="0"
+      border="0"
+      role="presentation"
+      class="nl2go-body-table"
+      width="100%"
+      style="background-color: #ffffff; width: 100%"
+    >
+      <tr>
+        <td>
+          <table
+            cellspacing="0"
+            cellpadding="0"
+            border="0"
+            role="presentation"
+            width="600"
+            align="center"
+            class="r0-o"
+            style="table-layout: fixed; width: 600px"
+          >
+            <tr>
+              <td valign="top" class="r1-i" style="background-color: #ffffff">
+                <table
+                  cellspacing="0"
+                  cellpadding="0"
+                  border="0"
+                  role="presentation"
+                  width="100%"
+                  align="center"
+                  class="r3-o"
+                  style="table-layout: fixed; width: 100%"
+                >
+                  <tr>
+                    <td
+                      class="r4-i"
+                      style="padding-bottom: 20px; padding-top: 20px"
+                    >
+                      <table
+                        width="100%"
+                        cellspacing="0"
+                        cellpadding="0"
+                        border="0"
+                        role="presentation"
+                      >
+                        <tr>
+                          <th
+                            width="100%"
+                            valign="top"
+                            class="r5-c"
+                            style="font-weight: normal"
+                          >
+                            <table
+                              cellspacing="0"
+                              cellpadding="0"
+                              border="0"
+                              role="presentation"
+                              width="100%"
+                              class="r6-o"
+                              style="table-layout: fixed; width: 100%"
+                            >
+                              <tr>
+                                <td
+                                  valign="top"
+                                  class="r7-i"
+                                  style="
+                                    padding-left: 10px;
+                                    padding-right: 10px;
+                                  "
+                                >
+                                  <table
+                                    width="100%"
+                                    cellspacing="0"
+                                    cellpadding="0"
+                                    border="0"
+                                    role="presentation"
+                                  >
+                                    <tr>
+                                      <td class="r8-c" align="left">
+                                        <table
+                                          cellspacing="0"
+                                          cellpadding="0"
+                                          border="0"
+                                          role="presentation"
+                                          width="150"
+                                          class="r9-o"
+                                          style="
+                                            table-layout: fixed;
+                                            width: 150px;
+                                          "
+                                        >
+                                          <tr>
+                                            <td
+                                              style="
+                                                font-size: 0px;
+                                                line-height: 0px;
+                                              "
+                                            >
+                                              <img
+                                                src="https://img.mailinblue.com/5942152/images/content_library/original/64708f00b503b149db7ff135.png"
+                                                width="150"
+                                                border="0"
+                                                style="
+                                                  display: block;
+                                                  width: 100%;
+                                                "
+                                              />
+                                            </td>
+                                          </tr>
+                                        </table>
+                                      </td>
+                                    </tr>
+                                  </table>
+                                </td>
+                              </tr>
+                            </table>
+                          </th>
+                        </tr>
+                      </table>
+                    </td>
+                  </tr>
+                </table>
+                <table
+                  cellspacing="0"
+                  cellpadding="0"
+                  border="0"
+                  role="presentation"
+                  width="100%"
+                  align="center"
+                  class="r3-o"
+                  style="table-layout: fixed; width: 100%"
+                >
+                  <tr>
+                    <td
+                      class="r10-i"
+                      style="padding-bottom: 10px; padding-top: 10px"
+                    >
+                      <table
+                        width="100%"
+                        cellspacing="0"
+                        cellpadding="0"
+                        border="0"
+                        role="presentation"
+                      >
+                        <tr>
+                          <th
+                            width="100%"
+                            valign="top"
+                            class="r5-c"
+                            style="font-weight: normal"
+                          >
+                            <table
+                              cellspacing="0"
+                              cellpadding="0"
+                              border="0"
+                              role="presentation"
+                              width="100%"
+                              class="r6-o"
+                              style="table-layout: fixed; width: 100%"
+                            >
+                              <tr>
+                                <td
+                                  valign="top"
+                                  class="r7-i"
+                                  style="
+                                    padding-left: 15px;
+                                    padding-right: 15px;
+                                  "
+                                >
+                                  <table
+                                    width="100%"
+                                    cellspacing="0"
+                                    cellpadding="0"
+                                    border="0"
+                                    role="presentation"
+                                  >
+                                    <tr>
+                                      <td class="r8-c" align="left">
+                                        <table
+                                          cellspacing="0"
+                                          cellpadding="0"
+                                          border="0"
+                                          role="presentation"
+                                          width="100%"
+                                          class="r9-o"
+                                          style="
+                                            table-layout: fixed;
+                                            width: 100%;
+                                          "
+                                        >
+                                          <tr>
+                                            <td
+                                              align="left"
+                                              valign="top"
+                                              class="r11-i nl2go-default-textstyle"
+                                              style="
+                                                color: #3b3f44;
+                                                font-family: georgia, serif;
+                                                font-size: 16px;
+                                                line-height: 1.5;
+                                                word-break: break-word;
+                                                padding-bottom: 15px;
+                                                padding-top: 15px;
+                                                text-align: left;
+                                              "
+                                            >
+                                              <div>
+                                                <p
+                                                  style="
+                                                    -webkit-text-stroke-width: 0px;
+                                                    font-style: normal;
+                                                    letter-spacing: normal;
+                                                    margin: 0px;
+                                                    orphans: 2;
+                                                    text-decoration-style: initial;
+                                                    text-decoration-thickness: initial;
+                                                    text-indent: 0px;
+                                                    text-transform: none;
+                                                    white-space: normal;
+                                                    widows: 2;
+                                                    word-break: break-word;
+                                                    word-spacing: 0px;
+                                                  "
+                                                >
+                                                  {{ message }}
+                                                </p>
+                                              </div>
+                                            </td>
+                                          </tr>
+                                        </table>
+                                      </td>
+                                    </tr>
+                                    <tr
+                                      style="
+                                        display: flex;
+                                        align-items: center;
+                                        width: 100%;
+                                        justify-content: center;
+                                      "
+                                    >
+                                      <td
+                                        style="
+                                          display: flex;
+                                          align-items: center;
+                                          width: 100%;
+                                          justify-content: center;
+                                        "
+                                      >
+                                        <a
+                                          href="{{ webhook_url }}"
+                                          style="
+                                            text-decoration: none;
+                                            display: flex;
+                                            align-items: center;
+                                            width: 100%;
+                                            justify-content: center;
+                                          "
+                                        >
+                                          <span
+                                            style="
+                                              max-width: min-content;
+                                              white-space: nowrap;
+                                              background-color: #3f76ff;
+                                              padding: 10px 15px;
+                                              border: 1px solid #2f4ba8;
+                                              border-radius: 4px;
+                                              margin-top: 15px;
+                                              cursor: pointer;
+                                              font-size: 0.8rem;
+                                              color: #ffffff;
+                                              display: flex;
+                                              align-items: center;
+                                              justify-content: center;
+                                            "
+                                          >
+                                            View webhook
+                                          </span>
+                                        </a>
+                                      </td>
+                                    </tr>
+                                  </table>
+                                </td>
+                              </tr>
+                            </table>
+                          </th>
+                        </tr>
+                      </table>
+                    </td>
+                  </tr>
+                </table>
+                <table
+                  cellspacing="0"
+                  cellpadding="0"
+                  border="0"
+                  role="presentation"
+                  width="100%"
+                  align="center"
+                  class="r3-o"
+                  style="table-layout: fixed; width: 100%"
+                >
+                  <tr>
+                    <td class="r16-i">
+                      <table
+                        width="100%"
+                        cellspacing="0"
+                        cellpadding="0"
+                        border="0"
+                        role="presentation"
+                      >
+                        <tr>
+                          <th
+                            width="100%"
+                            valign="top"
+                            class="r5-c"
+                            style="font-weight: normal"
+                          >
+                            <table
+                              cellspacing="0"
+                              cellpadding="0"
+                              border="0"
+                              role="presentation"
+                              width="100%"
+                              class="r6-o"
+                              style="table-layout: fixed; width: 100%"
+                            >
+                              <tr>
+                                <td
+                                  valign="top"
+                                  class="r7-i"
+                                  style="
+                                    padding-left: 15px;
+                                    padding-right: 15px;
+                                  "
+                                >
+                                  <table
+                                    width="100%"
+                                    cellspacing="0"
+                                    cellpadding="0"
+                                    border="0"
+                                    role="presentation"
+                                  >
+                                    <tr>
+                                      <td class="r17-c" align="center">
+                                        <table
+                                          cellspacing="0"
+                                          cellpadding="0"
+                                          border="0"
+                                          role="presentation"
+                                          width="570"
+                                          class="r3-o"
+                                          style="table-layout: fixed"
+                                        >
+                                          <tr>
+                                            <td
+                                              class="r18-i"
+                                              style="
+                                                padding-bottom: 5px;
+                                                padding-top: 5px;
+                                                height: 1px;
+                                              "
+                                            >
+                                              <table
+                                                width="100%"
+                                                cellspacing="0"
+                                                cellpadding="0"
+                                                border="0"
+                                                role="presentation"
+                                              >
+                                                <tr>
+                                                  <td>
+                                                    <table
+                                                      width="100%"
+                                                      cellspacing="0"
+                                                      cellpadding="0"
+                                                      border="0"
+                                                      role="presentation"
+                                                      valign=""
+                                                      class="r18-i"
+                                                      height="1"
+                                                      style="
+                                                        border-top-style: solid;
+                                                        background-clip: border-box;
+                                                        border-top-color: #efefef;
+                                                        border-top-width: 1px;
+                                                        font-size: 1px;
+                                                        line-height: 1px;
+                                                      "
+                                                    >
+                                                      <tr>
+                                                        <td
+                                                          height="0"
+                                                          style="
+                                                            font-size: 0px;
+                                                            line-height: 0px;
+                                                          "
+                                                        >
+                                                          ­
+                                                        </td>
+                                                      </tr>
+                                                    </table>
+                                                  </td>
+                                                </tr>
+                                              </table>
+                                            </td>
+                                          </tr>
+                                        </table>
+                                      </td>
+                                    </tr>
+                                  </table>
+                                </td>
+                              </tr>
+                            </table>
+                          </th>
+                        </tr>
+                      </table>
+                    </td>
+                  </tr>
+                </table>
+                <table
+                  cellspacing="0"
+                  cellpadding="0"
+                  border="0"
+                  role="presentation"
+                  width="100%"
+                  align="center"
+                  class="r3-o"
+                  style="table-layout: fixed; width: 100%"
+                >
+                  <tr>
+                    <td
+                      class="r19-i"
+                      style="padding-bottom: 15px; padding-top: 15px"
+                    >
+                      <table
+                        width="100%"
+                        cellspacing="0"
+                        cellpadding="0"
+                        border="0"
+                        role="presentation"
+                      >
+                        <tr>
+                          <th
+                            width="100%"
+                            valign="top"
+                            class="r5-c"
+                            style="font-weight: normal"
+                          >
+                            <table
+                              cellspacing="0"
+                              cellpadding="0"
+                              border="0"
+                              role="presentation"
+                              width="100%"
+                              class="r6-o"
+                              style="table-layout: fixed; width: 100%"
+                            >
+                              <tr>
+                                <td
+                                  valign="top"
+                                  class="r7-i"
+                                  style="
+                                    padding-left: 15px;
+                                    padding-right: 15px;
+                                  "
+                                >
+                                  <table
+                                    width="100%"
+                                    cellspacing="0"
+                                    cellpadding="0"
+                                    border="0"
+                                    role="presentation"
+                                  >
+                                    <tr>
+                                      <td class="r8-c" align="left">
+                                        <table
+                                          cellspacing="0"
+                                          cellpadding="0"
+                                          border="0"
+                                          role="presentation"
+                                          width="100%"
+                                          class="r20-o"
+                                          style="
+                                            table-layout: fixed;
+                                            width: 100%;
+                                          "
+                                        >
+                                          <tr class="nl2go-responsive-hide">
+                                            <td
+                                              height="2"
+                                              width="2"
+                                              style="
+                                                font-size: 2px;
+                                                line-height: 2px;
+                                                background-color: #efefef;
+                                              "
+                                            >
+                                              ­
+                                            </td>
+                                            <td
+                                              height="2"
+                                              style="
+                                                font-size: 2px;
+                                                line-height: 2px;
+                                                background-color: #efefef;
+                                              "
+                                            >
+                                              ­
+                                            </td>
+                                            <td
+                                              height="2"
+                                              width="2"
+                                              style="
+                                                font-size: 2px;
+                                                line-height: 2px;
+                                                background-color: #efefef;
+                                              "
+                                            >
+                                              ­
+                                            </td>
+                                          </tr>
+                                          <tr>
+                                            <td
+                                              class="nl2go-responsive-hide"
+                                              width="2"
+                                              style="
+                                                font-size: 0px;
+                                                line-height: 1px;
+                                                background-color: #efefef;
+                                              "
+                                            >
+                                              ­
+                                            </td>
+                                            <td
+                                              align="left"
+                                              valign="top"
+                                              class="r21-i nl2go-default-textstyle"
+                                              style="
+                                                color: #3b3f44;
+                                                font-family: georgia, serif;
+                                                font-size: 16px;
+                                                word-break: break-word;
+                                                line-height: 1.5;
+                                                padding-bottom: 5px;
+                                                padding-left: 5px;
+                                                padding-right: 5px;
+                                                padding-top: 5px;
+                                                text-align: left;
+                                              "
+                                            >
+                                              <div>
+                                                <p style="margin: 0">
+                                                  <span style="font-size: 13px"
+                                                    >Despite our popularity, we
+                                                    are humbly early-stage. We
+                                                    are shipping fast, so please
+                                                    reach out to us with feature
+                                                    requests, major and minor
+                                                    nits, and anything else you
+                                                    find missing. We read every </span
+                                                  ><a
+                                                    href="https://discord.com/channels/1031547764020084846/1094927053867995176"
+                                                    title="Plane Support on Discod"
+                                                    target="_blank"
+                                                    style="
+                                                      color: #3f76ff;
+                                                      text-decoration: underline;
+                                                    "
+                                                    ><span
+                                                      style="font-size: 13px"
+                                                      >message</span
+                                                    ></a
+                                                  ><span style="font-size: 13px"
+                                                    >, </span
+                                                  ><a
+                                                    href="http://twitter.com/planepowers"
+                                                    title="@planepowers"
+                                                    target="_blank"
+                                                    style="
+                                                      color: #3f76ff;
+                                                      text-decoration: underline;
+                                                    "
+                                                    ><span
+                                                      style="font-size: 13px"
+                                                      >tweet</span
+                                                    ></a
+                                                  ><span style="font-size: 13px"
+                                                    >, and </span
+                                                  ><a
+                                                    href="https://github.com/makeplane/plane/issues"
+                                                    title="Plane's GitHub conversations"
+                                                    target="_blank"
+                                                    style="
+                                                      color: #3f76ff;
+                                                      text-decoration: underline;
+                                                    "
+                                                    ><span
+                                                      style="font-size: 13px"
+                                                      >conversation</span
+                                                    ></a
+                                                  ><span
+                                                    style="font-size: 13px"
+                                                  >
+                                                    and update </span
+                                                  ><a
+                                                    href="https://plane.sh/plane/0b170a1c-0e55-47cb-9307-ea49a05672b5?board=kanban"
+                                                    title="Plane's roadmap"
+                                                    target="_blank"
+                                                    style="
+                                                      color: #3f76ff;
+                                                      text-decoration: underline;
+                                                    "
+                                                    ><span
+                                                      style="font-size: 13px"
+                                                      >our public roadmap</span
+                                                    ></a
+                                                  ><span style="font-size: 13px"
+                                                    >.</span
+                                                  >
+                                                </p>
+                                              </div>
+                                            </td>
+                                            <td
+                                              class="nl2go-responsive-hide"
+                                              width="2"
+                                              style="
+                                                font-size: 0px;
+                                                line-height: 1px;
+                                                background-color: #efefef;
+                                              "
+                                            >
+                                              ­
+                                            </td>
+                                          </tr>
+                                          <tr class="nl2go-responsive-hide">
+                                            <td
+                                              height="2"
+                                              width="2"
+                                              style="
+                                                font-size: 2px;
+                                                line-height: 2px;
+                                                background-color: #efefef;
+                                              "
+                                            >
+                                              ­
+                                            </td>
+                                            <td
+                                              height="2"
+                                              style="
+                                                font-size: 2px;
+                                                line-height: 2px;
+                                                background-color: #efefef;
+                                              "
+                                            >
+                                              ­
+                                            </td>
+                                            <td
+                                              height="2"
+                                              width="2"
+                                              style="
+                                                font-size: 2px;
+                                                line-height: 2px;
+                                                background-color: #efefef;
+                                              "
+                                            >
+                                              ­
+                                            </td>
+                                          </tr>
+                                        </table>
+                                      </td>
+                                    </tr>
+                                  </table>
+                                </td>
+                              </tr>
+                            </table>
+                          </th>
+                        </tr>
+                      </table>
+                    </td>
+                  </tr>
+                </table>
+                <table
+                  cellspacing="0"
+                  cellpadding="0"
+                  border="0"
+                  role="presentation"
+                  width="100%"
+                  align="center"
+                  class="r3-o"
+                  style="table-layout: fixed; width: 100%"
+                >
+                  <tr>
+                    <td
+                      class="r22-i"
+                      style="padding-bottom: 5px; padding-top: 5px"
+                    >
+                      <table
+                        width="100%"
+                        cellspacing="0"
+                        cellpadding="0"
+                        border="0"
+                        role="presentation"
+                      >
+                        <tr>
+                          <th
+                            width="100%"
+                            valign="top"
+                            class="r5-c"
+                            style="font-weight: normal"
+                          >
+                            <table
+                              cellspacing="0"
+                              cellpadding="0"
+                              border="0"
+                              role="presentation"
+                              width="100%"
+                              class="r6-o"
+                              style="table-layout: fixed; width: 100%"
+                            >
+                              <tr>
+                                <td
+                                  valign="top"
+                                  class="r7-i"
+                                  style="
+                                    padding-left: 15px;
+                                    padding-right: 15px;
+                                  "
+                                >
+                                  <table
+                                    width="100%"
+                                    cellspacing="0"
+                                    cellpadding="0"
+                                    border="0"
+                                    role="presentation"
+                                  >
+                                    <tr>
+                                      <td class="r17-c" align="center">
+                                        <table
+                                          cellspacing="0"
+                                          cellpadding="0"
+                                          border="0"
+                                          role="presentation"
+                                          width="570"
+                                          align="center"
+                                          class="r3-o"
+                                          style="
+                                            table-layout: fixed;
+                                            width: 570px;
+                                          "
+                                        >
+                                          <tr>
+                                            <td valign="top">
+                                              <table
+                                                width="100%"
+                                                cellspacing="0"
+                                                cellpadding="0"
+                                                border="0"
+                                                role="presentation"
+                                              >
+                                                <tr>
+                                                  <td
+                                                    class="r23-c"
+                                                    style="
+                                                      display: inline-block;
+                                                    "
+                                                  >
+                                                    <table
+                                                      cellspacing="0"
+                                                      cellpadding="0"
+                                                      border="0"
+                                                      role="presentation"
+                                                      width="570"
+                                                      class="r6-o"
+                                                      style="
+                                                        table-layout: fixed;
+                                                        width: 570px;
+                                                      "
+                                                    >
+                                                      <tr>
+                                                        <td
+                                                          class="r24-i"
+                                                          style="
+                                                            padding-bottom: 10px;
+                                                            padding-left: 209px;
+                                                            padding-right: 209px;
+                                                            padding-top: 10px;
+                                                          "
+                                                        >
+                                                          <table
+                                                            width="100%"
+                                                            cellspacing="0"
+                                                            cellpadding="0"
+                                                            border="0"
+                                                            role="presentation"
+                                                          >
+                                                            <tr>
+                                                              <th
+                                                                width="40"
+                                                                class="r25-c mobshow resp-table"
+                                                                style="
+                                                                  font-weight: normal;
+                                                                "
+                                                              >
+                                                                <table
+                                                                  cellspacing="0"
+                                                                  cellpadding="0"
+                                                                  border="0"
+                                                                  role="presentation"
+                                                                  width="100%"
+                                                                  class="r26-o"
+                                                                  style="
+                                                                    table-layout: fixed;
+                                                                    width: 100%;
+                                                                  "
+                                                                >
+                                                                  <tr>
+                                                                    <td
+                                                                      class="r18-i"
+                                                                      style="
+                                                                        font-size: 0px;
+                                                                        line-height: 0px;
+                                                                        padding-bottom: 5px;
+                                                                        padding-top: 5px;
+                                                                      "
+                                                                    >
+                                                                      <a
+                                                                        href="https://github.com/makeplane"
+                                                                        target="_blank"
+                                                                        style="
+                                                                          color: #3f76ff;
+                                                                          text-decoration: underline;
+                                                                        "
+                                                                      >
+                                                                        <img
+                                                                          src="https://creative-assets.mailinblue.com/editor/social-icons/rounded_colored/github_32px.png"
+                                                                          width="32"
+                                                                          border="0"
+                                                                          style="
+                                                                            display: block;
+                                                                            width: 100%;
+                                                                          "
+                                                                      /></a>
+                                                                    </td>
+                                                                    <td
+                                                                      class="nl2go-responsive-hide"
+                                                                      width="8"
+                                                                      style="
+                                                                        font-size: 0px;
+                                                                        line-height: 1px;
+                                                                      "
+                                                                    >
+                                                                      ­
+                                                                    </td>
+                                                                  </tr>
+                                                                </table>
+                                                              </th>
+                                                              <th
+                                                                width="40"
+                                                                class="r25-c mobshow resp-table"
+                                                                style="
+                                                                  font-weight: normal;
+                                                                "
+                                                              >
+                                                                <table
+                                                                  cellspacing="0"
+                                                                  cellpadding="0"
+                                                                  border="0"
+                                                                  role="presentation"
+                                                                  width="100%"
+                                                                  class="r26-o"
+                                                                  style="
+                                                                    table-layout: fixed;
+                                                                    width: 100%;
+                                                                  "
+                                                                >
+                                                                  <tr>
+                                                                    <td
+                                                                      class="r18-i"
+                                                                      style="
+                                                                        font-size: 0px;
+                                                                        line-height: 0px;
+                                                                        padding-bottom: 5px;
+                                                                        padding-top: 5px;
+                                                                      "
+                                                                    >
+                                                                      <a
+                                                                        href="https://www.linkedin.com/company/planepowers/"
+                                                                        target="_blank"
+                                                                        style="
+                                                                          color: #3f76ff;
+                                                                          text-decoration: underline;
+                                                                        "
+                                                                      >
+                                                                        <img
+                                                                          src="https://creative-assets.mailinblue.com/editor/social-icons/rounded_colored/linkedin_32px.png"
+                                                                          width="32"
+                                                                          border="0"
+                                                                          style="
+                                                                            display: block;
+                                                                            width: 100%;
+                                                                          "
+                                                                      /></a>
+                                                                    </td>
+                                                                    <td
+                                                                      class="nl2go-responsive-hide"
+                                                                      width="8"
+                                                                      style="
+                                                                        font-size: 0px;
+                                                                        line-height: 1px;
+                                                                      "
+                                                                    >
+                                                                      ­
+                                                                    </td>
+                                                                  </tr>
+                                                                </table>
+                                                              </th>
+                                                              <th
+                                                                width="40"
+                                                                class="r25-c mobshow resp-table"
+                                                                style="
+                                                                  font-weight: normal;
+                                                                "
+                                                              >
+                                                                <table
+                                                                  cellspacing="0"
+                                                                  cellpadding="0"
+                                                                  border="0"
+                                                                  role="presentation"
+                                                                  width="100%"
+                                                                  class="r26-o"
+                                                                  style="
+                                                                    table-layout: fixed;
+                                                                    width: 100%;
+                                                                  "
+                                                                >
+                                                                  <tr>
+                                                                    <td
+                                                                      class="r18-i"
+                                                                      style="
+                                                                        font-size: 0px;
+                                                                        line-height: 0px;
+                                                                        padding-bottom: 5px;
+                                                                        padding-top: 5px;
+                                                                      "
+                                                                    >
+                                                                      <a
+                                                                        href="https://twitter.com/planepowers"
+                                                                        target="_blank"
+                                                                        style="
+                                                                          color: #3f76ff;
+                                                                          text-decoration: underline;
+                                                                        "
+                                                                      >
+                                                                        <img
+                                                                          src="https://creative-assets.mailinblue.com/editor/social-icons/rounded_colored/twitter_32px.png"
+                                                                          width="32"
+                                                                          border="0"
+                                                                          style="
+                                                                            display: block;
+                                                                            width: 100%;
+                                                                          "
+                                                                      /></a>
+                                                                    </td>
+                                                                    <td
+                                                                      class="nl2go-responsive-hide"
+                                                                      width="8"
+                                                                      style="
+                                                                        font-size: 0px;
+                                                                        line-height: 1px;
+                                                                      "
+                                                                    >
+                                                                      ­
+                                                                    </td>
+                                                                  </tr>
+                                                                </table>
+                                                              </th>
+                                                              <th
+                                                                width="32"
+                                                                class="r25-c mobshow resp-table"
+                                                                style="
+                                                                  font-weight: normal;
+                                                                "
+                                                              >
+                                                                <table
+                                                                  cellspacing="0"
+                                                                  cellpadding="0"
+                                                                  border="0"
+                                                                  role="presentation"
+                                                                  width="100%"
+                                                                  class="r27-o"
+                                                                  style="
+                                                                    table-layout: fixed;
+                                                                    width: 100%;
+                                                                  "
+                                                                >
+                                                                  <tr>
+                                                                    <td
+                                                                      class="r18-i"
+                                                                      style="
+                                                                        font-size: 0px;
+                                                                        line-height: 0px;
+                                                                        padding-bottom: 5px;
+                                                                        padding-top: 5px;
+                                                                      "
+                                                                    >
+                                                                      <a
+                                                                        href="https://plane.so/"
+                                                                        target="_blank"
+                                                                        style="
+                                                                          color: #3f76ff;
+                                                                          text-decoration: underline;
+                                                                        "
+                                                                      >
+                                                                        <img
+                                                                          src="https://creative-assets.mailinblue.com/editor/social-icons/rounded_colored/website_32px.png"
+                                                                          width="32"
+                                                                          border="0"
+                                                                          style="
+                                                                            display: block;
+                                                                            width: 100%;
+                                                                          "
+                                                                      /></a>
+                                                                    </td>
+                                                                  </tr>
+                                                                </table>
+                                                              </th>
+                                                            </tr>
+                                                          </table>
+                                                        </td>
+                                                      </tr>
+                                                    </table>
+                                                  </td>
+                                                </tr>
+                                              </table>
+                                            </td>
+                                          </tr>
+                                        </table>
+                                      </td>
+                                    </tr>
+                                  </table>
+                                </td>
+                              </tr>
+                            </table>
+                          </th>
+                        </tr>
+                      </table>
+                    </td>
+                  </tr>
+                </table>
+                <table
+                  cellspacing="0"
+                  cellpadding="0"
+                  border="0"
+                  role="presentation"
+                  width="100%"
+                  align="center"
+                  class="r3-o"
+                  style="table-layout: fixed; width: 100%"
+                >
+                  <tr>
+                    <td
+                      class="r22-i"
+                      style="padding-bottom: 5px; padding-top: 5px"
+                    >
+                      <table
+                        width="100%"
+                        cellspacing="0"
+                        cellpadding="0"
+                        border="0"
+                        role="presentation"
+                      >
+                        <tr>
+                          <th
+                            width="100%"
+                            valign="top"
+                            class="r5-c"
+                            style="font-weight: normal"
+                          >
+                            <table
+                              cellspacing="0"
+                              cellpadding="0"
+                              border="0"
+                              role="presentation"
+                              width="100%"
+                              class="r6-o"
+                              style="table-layout: fixed; width: 100%"
+                            >
+                              <tr>
+                                <td
+                                  valign="top"
+                                  class="r7-i"
+                                  style="
+                                    padding-left: 15px;
+                                    padding-right: 15px;
+                                  "
+                                >
+                                  <table
+                                    width="100%"
+                                    cellspacing="0"
+                                    cellpadding="0"
+                                    border="0"
+                                    role="presentation"
+                                  >
+                                    <tr>
+                                      <td class="r8-c" align="left">
+                                        <table
+                                          cellspacing="0"
+                                          cellpadding="0"
+                                          border="0"
+                                          role="presentation"
+                                          width="100%"
+                                          class="r9-o"
+                                          style="
+                                            table-layout: fixed;
+                                            width: 100%;
+                                          "
+                                        >
+                                          <tr>
+                                            <td
+                                              align="center"
+                                              valign="top"
+                                              class="r28-i nl2go-default-textstyle"
+                                              style="
+                                                color: #3b3f44;
+                                                font-family: georgia, serif;
+                                                word-break: break-word;
+                                                font-size: 18px;
+                                                line-height: 1.5;
+                                                padding-top: 5px;
+                                                text-align: center;
+                                              "
+                                            >
+                                              <div>
+                                                <p
+                                                  style="
+                                                    margin: 0;
+                                                    font-size: 14px;
+                                                  "
+                                                >
+                                                  <span style="font-size: 12px"
+                                                    >This email was sent to
+                                                    {{email}}. Please delete if
+                                                    you aren't the intended
+                                                    recipient.</span
+                                                  >
+                                                </p>
+                                              </div>
+                                            </td>
+                                          </tr>
+                                        </table>
+                                      </td>
+                                    </tr>
+                                  </table>
+                                </td>
+                              </tr>
+                            </table>
+                          </th>
+                        </tr>
+                      </table>
+                    </td>
+                  </tr>
+                </table>
+              </td>
+            </tr>
+          </table>
+        </td>
+      </tr>
+    </table>
+  </body>
+</html>

From 4a2e648f6d3af455ba32b453d5161bc1d61c7b41 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Wed, 7 Feb 2024 16:21:20 +0530
Subject: [PATCH 22/58] chore: workspace dashboard refactor (#3584)

---
 web/components/headers/workspace-dashboard.tsx | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/web/components/headers/workspace-dashboard.tsx b/web/components/headers/workspace-dashboard.tsx
index d074132e2..d8306ab40 100644
--- a/web/components/headers/workspace-dashboard.tsx
+++ b/web/components/headers/workspace-dashboard.tsx
@@ -1,4 +1,3 @@
-import { useState } from "react";
 import { LayoutGrid, Zap } from "lucide-react";
 import Image from "next/image";
 import { useTheme } from "next-themes";
@@ -6,18 +5,16 @@ import { useTheme } from "next-themes";
 import githubBlackImage from "/public/logos/github-black.png";
 import githubWhiteImage from "/public/logos/github-white.png";
 // components
-import { BreadcrumbLink, ProductUpdatesModal } from "components/common";
+import { BreadcrumbLink } from "components/common";
 import { Breadcrumbs } from "@plane/ui";
 import { SidebarHamburgerToggle } from "components/core/sidebar/sidebar-menu-hamburger-toggle";
 
 export const WorkspaceDashboardHeader = () => {
-  const [isProductUpdatesModalOpen, setIsProductUpdatesModalOpen] = useState(false);
   // hooks
   const { resolvedTheme } = useTheme();
 
   return (
     <>
-      <ProductUpdatesModal isOpen={isProductUpdatesModalOpen} setIsOpen={setIsProductUpdatesModalOpen} />
       <div className="relative z-[15] flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
         <div className="flex items-center gap-2 overflow-ellipsis whitespace-nowrap">
           <SidebarHamburgerToggle />

From a1d6c406272371e6dfe43f7a803063139753af31 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Lucas=20de=20Oliveira=20Lopes?=
 <55464917+jlucaso1@users.noreply.github.com>
Date: Wed, 7 Feb 2024 08:40:44 -0300
Subject: [PATCH 23/58] fix: show window closing alert only when page is not
 saved (#3577)

* fix: show window closing alert only when page is not saved

* chore: Refactor useReloadConfirmations hook

- Removed the `message` parameter, as it was not being used and not
  supported in modern browsers
- Changed the `isActive` flag to a temporary flag and added a TODO comment to remove it later.
- Implemented the `handleRouteChangeStart` function to handle route change events and prompt the user with a confirmation dialog before leaving the page.
- Updated the dependencies of the `handleBeforeUnload` and `handleRouteChangeStart` callbacks.
- Added event listeners for `beforeunload` and `routeChangeStart` events in the `useEffect` hook.
- Cleaned up the event listeners in the cleanup function of the `useEffect` hook.

fix: Fix reload confirmations in PageDetailsPage

- Removed the TODO comment regarding fixing reload confirmations with MobX, as it has been resolved.
- Passed the `pageStore?.isSubmitting === "submitting"` flag to the `useReloadConfirmations` hook instead of an undefined message.

This commit refactors the `useReloadConfirmations` hook to improve its functionality and fixes the usage in the `PageDetailsPage` component.

---------

Co-authored-by: Palanikannan1437 <73993394+Palanikannan1437@users.noreply.github.com>
---
 web/hooks/use-reload-confirmation.tsx         | 35 +++++++++++++------
 .../projects/[projectId]/pages/[pageId].tsx   |  5 ++-
 2 files changed, 27 insertions(+), 13 deletions(-)

diff --git a/web/hooks/use-reload-confirmation.tsx b/web/hooks/use-reload-confirmation.tsx
index cdaff7365..8343ea78d 100644
--- a/web/hooks/use-reload-confirmation.tsx
+++ b/web/hooks/use-reload-confirmation.tsx
@@ -1,26 +1,41 @@
 import { useCallback, useEffect, useState } from "react";
+import { useRouter } from "next/router";
 
-const useReloadConfirmations = (message?: string) => {
+//TODO: remove temp flag isActive later and use showAlert as the source of truth
+const useReloadConfirmations = (isActive = true) => {
   const [showAlert, setShowAlert] = useState(false);
+  const router = useRouter();
 
   const handleBeforeUnload = useCallback(
     (event: BeforeUnloadEvent) => {
+      if (!isActive || !showAlert) return;
       event.preventDefault();
       event.returnValue = "";
-      return message ?? "Are you sure you want to leave?";
     },
-    [message]
+    [isActive, showAlert]
+  );
+
+  const handleRouteChangeStart = useCallback(
+    (url: string) => {
+      if (!isActive || !showAlert) return;
+      const leave = confirm("Are you sure you want to leave? Changes you made may not be saved.");
+      if (!leave) {
+        router.events.emit("routeChangeError");
+        throw `Route change to "${url}" was aborted (this error can be safely ignored).`;
+      }
+    },
+    [isActive, showAlert, router.events]
   );
 
   useEffect(() => {
-    if (!showAlert) {
-      window.removeEventListener("beforeunload", handleBeforeUnload);
-      return;
-    }
-
     window.addEventListener("beforeunload", handleBeforeUnload);
-    return () => window.removeEventListener("beforeunload", handleBeforeUnload);
-  }, [handleBeforeUnload, showAlert]);
+    router.events.on("routeChangeStart", handleRouteChangeStart);
+
+    return () => {
+      window.removeEventListener("beforeunload", handleBeforeUnload);
+      router.events.off("routeChangeStart", handleRouteChangeStart);
+    };
+  }, [handleBeforeUnload, handleRouteChangeStart, router.events]);
 
   return { setShowAlert };
 };
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx b/web/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx
index be512dda0..93a814d57 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx
@@ -56,9 +56,6 @@ const PageDetailsPage: NextPageWithLayout = observer(() => {
   // toast alert
   const { setToastAlert } = useToast();
 
-  //TODO:fix reload confirmations, with mobx
-  const { setShowAlert } = useReloadConfirmations();
-
   const { handleSubmit, setValue, watch, getValues, control, reset } = useForm<IPage>({
     defaultValues: { name: "", description_html: "" },
   });
@@ -89,6 +86,8 @@ const PageDetailsPage: NextPageWithLayout = observer(() => {
 
   const pageStore = usePage(pageId as string);
 
+  const { setShowAlert } = useReloadConfirmations(pageStore?.isSubmitting === "submitting");
+
   useEffect(
     () => () => {
       if (pageStore) {

From 75b4c6e7d6d5c874830cd04d6d775dbbf9a6cf9b Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Wed, 7 Feb 2024 17:29:39 +0530
Subject: [PATCH 24/58] chore: posthog code refactor (#3586)

---
 web/pages/_document.tsx | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/web/pages/_document.tsx b/web/pages/_document.tsx
index 425862839..cc0411068 100644
--- a/web/pages/_document.tsx
+++ b/web/pages/_document.tsx
@@ -50,12 +50,6 @@ class MyDocument extends Document {
               src="https://plausible.io/js/script.js"
             />
           )}
-          {process.env.NEXT_PUBLIC_POSTHOG_KEY && process.env.NEXT_PUBLIC_POSTHOG_HOST && (
-            <Script id="posthog-tracking">
-              {`!function(t,e){var o,n,p,r;e.__SV||(window.posthog=e,e._i=[],e.init=function(i,s,a){function g(t,e){var o=e.split(".");2==o.length&&(t=t[o[0]],e=o[1]),t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}}(p=t.createElement("script")).type="text/javascript",p.async=!0,p.src=s.api_host+"/static/array.js",(r=t.getElementsByTagName("script")[0]).parentNode.insertBefore(p,r);var u=e;for(void 0!==a?u=e[a]=[]:a="posthog",u.people=u.people||[],u.toString=function(t){var e="posthog";return"posthog"!==a&&(e+="."+a),t||(e+=" (stub)"),e},u.people.toString=function(){return u.toString(1)+".people (stub)"},o="capture identify alias people.set people.set_once set_config register register_once unregister opt_out_capturing has_opted_out_capturing opt_in_capturing reset isFeatureEnabled onFeatureFlags getFeatureFlag getFeatureFlagPayload reloadFeatureFlags group updateEarlyAccessFeatureEnrollment getEarlyAccessFeatures getActiveMatchingSurveys getSurveys".split(" "),n=0;n<o.length;n++)g(u,o[n]);e._i.push([i,s,a])},e.__SV=1)}(document,window.posthog||[]);
-    posthog.init('${process.env.NEXT_PUBLIC_POSTHOG_KEY}',{api_host:'${process.env.NEXT_PUBLIC_POSTHOG_HOST}'})`}
-            </Script>
-          )}
         </body>
       </Html>
     );

From 0a35fcfbc0a1223b50dbf8efe5a462ec9fc0196e Mon Sep 17 00:00:00 2001
From: Bavisetti Narayan <72156168+NarayanBavisetti@users.noreply.github.com>
Date: Wed, 7 Feb 2024 20:20:54 +0530
Subject: [PATCH 25/58] chore: email template logo changed (#3575)

* chore: email template logo changed

* fix: icons image extensions

* fix: state icons

---------

Co-authored-by: LAKHAN BAHETI <lakhanbaheti9@gmail.com>
---
 .../emails/notifications/issue-updates.html   | 34 +++++++++++--------
 1 file changed, 19 insertions(+), 15 deletions(-)

diff --git a/apiserver/templates/emails/notifications/issue-updates.html b/apiserver/templates/emails/notifications/issue-updates.html
index a7990562d..3c561f37a 100644
--- a/apiserver/templates/emails/notifications/issue-updates.html
+++ b/apiserver/templates/emails/notifications/issue-updates.html
@@ -66,7 +66,7 @@
                         style="margin-left: 30px; margin-bottom: 20px; margin-top: 20px"
                         >
                         <img
-                           src="https://plane-marketing.s3.ap-south-1.amazonaws.com/plane-assets/emails/plane-logo.webp"
+                           src="https://plane-marketing.s3.ap-south-1.amazonaws.com/plane-assets/emails/plane-logo.png"
                            width="130"
                            height="40"
                            border="0"
@@ -280,7 +280,7 @@
                         <tr>
                            <td>
                               <img
-                                 src="https://plane-marketing.s3.ap-south-1.amazonaws.com/plane-assets/emails/due-date.webp"
+                                 src="https://plane-marketing.s3.ap-south-1.amazonaws.com/plane-assets/emails/due-date.png"
                                  width="12"
                                  height="12"
                                  border="0"
@@ -341,7 +341,7 @@
                         <tr>
                            <td>
                               <img
-                                 src="https://plane-marketing.s3.ap-south-1.amazonaws.com/plane-assets/emails/duplicate.webp"
+                                 src="https://plane-marketing.s3.ap-south-1.amazonaws.com/plane-assets/emails/duplicate.png"
                                  width="12"
                                  height="12"
                                  border="0"
@@ -436,7 +436,7 @@
                         <tr>
                            <td valign="top" style="white-space: nowrap; padding: 0px;">
                               <img
-                                 src="https://plane-marketing.s3.ap-south-1.amazonaws.com/plane-assets/emails/assignee.webp"
+                                 src="https://plane-marketing.s3.ap-south-1.amazonaws.com/plane-assets/emails/assignee.png"
                                  width="12"
                                  height="12"
                                  border="0"
@@ -532,7 +532,7 @@
                         <tr>
                            <td valign="top" style="white-space: nowrap; padding: 0px;">
                               <img
-                                 src="https://plane-marketing.s3.ap-south-1.amazonaws.com/plane-assets/emails/labels.webp"
+                                 src="https://plane-marketing.s3.ap-south-1.amazonaws.com/plane-assets/emails/labels.png"
                                  width="12"
                                  height="12"
                                  border="0"
@@ -629,7 +629,7 @@
                         <tr>
                            <td>
                               <img
-                                 src="https://plane-marketing.s3.ap-south-1.amazonaws.com/plane-assets/emails/state.webp"
+                                 src="https://plane-marketing.s3.ap-south-1.amazonaws.com/plane-assets/emails/state.png"
                                  width="12"
                                  height="12"
                                  border="0"
@@ -647,15 +647,17 @@
                                  State:
                               </p>
                            </td>
-                           <td >
+                           {% if update.changes.state.old_value.0 == 'Backlog' or  update.changes.state.old_value.0 == 'In Progress' or update.changes.state.old_value.0 == 'Done' or update.changes.state.old_value.0 == 'Cancelled' %}
+                           <td>
                               <img
-                                 src="{% if update.changes.state.old_value.0 == 'Backlog' %}https://plane-marketing.s3.ap-south-1.amazonaws.com/plane-assets/emails/backlog.webp{% endif %}{% if update.changes.state.old_value.0 == 'In Progress' %}https://plane-marketing.s3.ap-south-1.amazonaws.com/plane-assets/emails/in-progress.webp{% endif %}{% if update.changes.state.old_value.0 == 'Done' %}https://plane-marketing.s3.ap-south-1.amazonaws.com/plane-assets/emails/done.webp{% endif %}{% if update.changes.state.old_value.0 == 'Cancelled' %}https://plane-marketing.s3.ap-south-1.amazonaws.com/plane-assets/emails/cancelled.webp{% endif %}"
+                                 src="{% if update.changes.state.old_value.0 == 'Backlog' %}https://plane-marketing.s3.ap-south-1.amazonaws.com/plane-assets/emails/backlog.png{% endif %}{% if update.changes.state.old_value.0 == 'In Progress' %}https://plane-marketing.s3.ap-south-1.amazonaws.com/plane-assets/emails/in-progress.png{% endif %}{% if update.changes.state.old_value.0 == 'Done' %}https://plane-marketing.s3.ap-south-1.amazonaws.com/plane-assets/emails/done.png{% endif %}{% if update.changes.state.old_value.0 == 'Cancelled' %}https://plane-marketing.s3.ap-south-1.amazonaws.com/plane-assets/emails/cancelled.png{% endif %}"
                                  width="12"
                                  height="12"
                                  border="0"
                                  style="display: block; margin-left: 5px;"
                                  />
                            </td>
+                           {% endif %}
                            <td>
                               <p
                                  style="
@@ -669,22 +671,24 @@
                            </td>
                            <td style="padding-left: 10px; padding-right: 10px;">
                               <img
-                                 src="https://plane-marketing.s3.ap-south-1.amazonaws.com/plane-assets/emails/forward-arrow.webp"
+                                 src="https://plane-marketing.s3.ap-south-1.amazonaws.com/plane-assets/emails/forward-arrow.png"
                                  width="16"
                                  height="16"
                                  border="0"
                                  style="display: block;"
                                  />
                            </td>
-                           <td >
+                           {% if update.changes.state.new_value|last == 'Backlog' or  update.changes.state.new_value|last == 'In Progress' or update.changes.state.new_value|last == 'Done' or update.changes.state.new_value|last == 'Cancelled' %}
+                           <td>
                               <img
-                                 src="{% if update.changes.state.new_value|last == 'Backlog' %}https://plane-marketing.s3.ap-south-1.amazonaws.com/plane-assets/emails/backlog.webp{% elif update.changes.state.new_value|last == 'In Progress' %}https://plane-marketing.s3.ap-south-1.amazonaws.com/plane-assets/emails/in-progress.webp{% elif update.changes.state.new_value|last == 'Todo' %}https://plane-marketing.s3.ap-south-1.amazonaws.com/plane-assets/emails/todo.webp{% elif update.changes.state.new_value|last == 'Done' %}https://plane-marketing.s3.ap-south-1.amazonaws.com/plane-assets/emails/done.webp{% elif update.changes.state.new_value|last == 'Cancelled' %}https://plane-marketing.s3.ap-south-1.amazonaws.com/plane-assets/emails/cancelled.webp{% endif %}"
+                                 src="{% if update.changes.state.new_value|last == 'Backlog' %}https://plane-marketing.s3.ap-south-1.amazonaws.com/plane-assets/emails/backlog.png{% elif update.changes.state.new_value|last == 'In Progress' %}https://plane-marketing.s3.ap-south-1.amazonaws.com/plane-assets/emails/in-progress.png{% elif update.changes.state.new_value|last == 'Todo' %}https://plane-marketing.s3.ap-south-1.amazonaws.com/plane-assets/emails/todo.png{% elif update.changes.state.new_value|last == 'Done' %}https://plane-marketing.s3.ap-south-1.amazonaws.com/plane-assets/emails/done.png{% elif update.changes.state.new_value|last == 'Cancelled' %}https://plane-marketing.s3.ap-south-1.amazonaws.com/plane-assets/emails/cancelled.png{% endif %}"
                                  width="12"
                                  height="12"
                                  border="0"
                                  style="display: block;"
                                  />
                            </td>
+                           {% endif %}
                            <td>
                               <p
                                  style="
@@ -707,7 +711,7 @@
                         <tr>
                            <td valign="top">
                               <img
-                                 src="https://plane-marketing.s3.ap-south-1.amazonaws.com/plane-assets/emails/link.webp"
+                                 src="https://plane-marketing.s3.ap-south-1.amazonaws.com/plane-assets/emails/link.png"
                                  width="12"
                                  height="12"
                                  border="0"
@@ -768,7 +772,7 @@
                         <tr>
                            <td>
                               <img
-                                 src="https://plane-marketing.s3.ap-south-1.amazonaws.com/plane-assets/emails/priority.webp"
+                                 src="https://plane-marketing.s3.ap-south-1.amazonaws.com/plane-assets/emails/priority.png"
                                  width="12"
                                  height="12"
                                  border="0"
@@ -808,7 +812,7 @@
                            </td>
                            <td style="padding-left: 10px; padding-right: 10px;">
                               <img
-                                 src="https://plane-marketing.s3.ap-south-1.amazonaws.com/plane-assets/emails/forward-arrow.webp"
+                                 src="https://plane-marketing.s3.ap-south-1.amazonaws.com/plane-assets/emails/forward-arrow.png"
                                  width="16"
                                  height="16"
                                  border="0"
@@ -846,7 +850,7 @@
                         <tr style="overflow-wrap: break-word;">
                            <td> 
                               <img
-                                 src="https://plane-marketing.s3.ap-south-1.amazonaws.com/plane-assets/emails/blocking.webp"
+                                 src="https://plane-marketing.s3.ap-south-1.amazonaws.com/plane-assets/emails/blocking.png"
                                  width="12"
                                  height="12"
                                  border="0"

From 729b6ac79ee043f699cb4c1fed414eb2b313fabe Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Wed, 7 Feb 2024 20:45:05 +0530
Subject: [PATCH 26/58] fix: Handled the draft issue from issue create modal
 and optimised the draft issue store (#3588)

Co-authored-by: gurusainath <gurusainath007@gmail.com>
---
 apiserver/plane/app/views/issue.py            | 26 +++++-----
 .../command-palette/command-palette.tsx       |  3 ++
 .../headers/project-draft-issues.tsx          |  2 +-
 .../issues/issue-layouts/kanban/block.tsx     | 20 +++++---
 .../kanban/headers/group-by-card.tsx          | 23 ++++-----
 .../issues/issue-layouts/list/block.tsx       | 20 +++++---
 .../list/headers/group-by-card.tsx            | 22 +++------
 .../quick-action-dropdowns/project-issue.tsx  |  5 ++
 .../issues/issue-modal/draft-issue-layout.tsx |  3 ++
 web/components/issues/issue-modal/form.tsx    | 47 ++++++++++++++++---
 web/components/issues/issue-modal/modal.tsx   | 27 +++++++++--
 web/store/issue/draft/issue.store.ts          | 32 +++++++++----
 12 files changed, 151 insertions(+), 79 deletions(-)

diff --git a/apiserver/plane/app/views/issue.py b/apiserver/plane/app/views/issue.py
index 0b5c612d3..34bce8a0a 100644
--- a/apiserver/plane/app/views/issue.py
+++ b/apiserver/plane/app/views/issue.py
@@ -1668,15 +1668,9 @@ class IssueDraftViewSet(BaseViewSet):
 
     def get_queryset(self):
         return (
-            Issue.objects.annotate(
-                sub_issues_count=Issue.issue_objects.filter(
-                    parent=OuterRef("id")
-                )
-                .order_by()
-                .annotate(count=Func(F("id"), function="Count"))
-                .values("count")
+            Issue.objects.filter(
+                project_id=self.kwargs.get("project_id")
             )
-            .filter(project_id=self.kwargs.get("project_id"))
             .filter(workspace__slug=self.kwargs.get("slug"))
             .filter(is_draft=True)
             .select_related("workspace", "project", "state", "parent")
@@ -1710,7 +1704,7 @@ class IssueDraftViewSet(BaseViewSet):
                 .annotate(count=Func(F("id"), function="Count"))
                 .values("count")
             )
-        )
+        ).distinct()
 
     @method_decorator(gzip_page)
     def list(self, request, slug, project_id):
@@ -1832,7 +1826,10 @@ class IssueDraftViewSet(BaseViewSet):
                 notification=True,
                 origin=request.META.get("HTTP_ORIGIN"),
             )
-            return Response(serializer.data, status=status.HTTP_201_CREATED)
+            issue = (
+                self.get_queryset().filter(pk=serializer.data["id"]).first()
+            )
+            return Response(IssueSerializer(issue).data, status=status.HTTP_201_CREATED)
         return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
 
     def partial_update(self, request, slug, project_id, pk):
@@ -1868,10 +1865,13 @@ class IssueDraftViewSet(BaseViewSet):
         return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
 
     def retrieve(self, request, slug, project_id, pk=None):
-        issue = Issue.objects.get(
-            workspace__slug=slug, project_id=project_id, pk=pk, is_draft=True
+        issue = self.get_queryset().filter(pk=pk).first()
+        return Response(
+            IssueSerializer(
+                issue, fields=self.fields, expand=self.expand
+            ).data,
+            status=status.HTTP_200_OK,
         )
-        return Response(IssueSerializer(issue).data, status=status.HTTP_200_OK)
 
     def destroy(self, request, slug, project_id, pk=None):
         issue = Issue.objects.get(
diff --git a/web/components/command-palette/command-palette.tsx b/web/components/command-palette/command-palette.tsx
index e6349e0b4..396003589 100644
--- a/web/components/command-palette/command-palette.tsx
+++ b/web/components/command-palette/command-palette.tsx
@@ -163,6 +163,8 @@ export const CommandPalette: FC = observer(() => {
     return () => document.removeEventListener("keydown", handleKeyDown);
   }, [handleKeyDown]);
 
+  const isDraftIssue = router?.asPath?.includes("draft-issues") || false;
+
   if (!currentUser) return null;
 
   return (
@@ -217,6 +219,7 @@ export const CommandPalette: FC = observer(() => {
         onClose={() => toggleCreateIssueModal(false)}
         data={cycleId ? { cycle_id: cycleId.toString() } : moduleId ? { module_ids: [moduleId.toString()] } : undefined}
         storeType={createIssueStoreType}
+        isDraft={isDraftIssue}
       />
 
       {workspaceSlug && projectId && issueId && issueDetails && (
diff --git a/web/components/headers/project-draft-issues.tsx b/web/components/headers/project-draft-issues.tsx
index 0fe6a74c5..139ec0257 100644
--- a/web/components/headers/project-draft-issues.tsx
+++ b/web/components/headers/project-draft-issues.tsx
@@ -103,7 +103,7 @@ export const ProjectDraftIssueHeader: FC = observer(() => {
             <Breadcrumbs.BreadcrumbItem
               type="text"
               link={
-                <BreadcrumbLink label="Inbox Issues" icon={<LayersIcon className="h-4 w-4 text-custom-text-300" />} />
+                <BreadcrumbLink label="Draft Issues" icon={<LayersIcon className="h-4 w-4 text-custom-text-300" />} />
               }
             />
           </Breadcrumbs>
diff --git a/web/components/issues/issue-layouts/kanban/block.tsx b/web/components/issues/issue-layouts/kanban/block.tsx
index 99d774bd5..203ac4938 100644
--- a/web/components/issues/issue-layouts/kanban/block.tsx
+++ b/web/components/issues/issue-layouts/kanban/block.tsx
@@ -66,16 +66,22 @@ const KanbanIssueDetailsBlock: React.FC<IssueDetailsBlockProps> = observer((prop
         </div>
       </WithDisplayPropertiesHOC>
 
-      <ControlLink
-        href={`/${workspaceSlug}/projects/${projectId}/issues/${issue.id}`}
-        target="_blank"
-        onClick={() => handleIssuePeekOverview(issue)}
-        className="w-full line-clamp-1 cursor-pointer text-sm text-custom-text-100"
-      >
+      {issue?.is_draft ? (
         <Tooltip tooltipHeading="Title" tooltipContent={issue.name}>
           <span>{issue.name}</span>
         </Tooltip>
-      </ControlLink>
+      ) : (
+        <ControlLink
+          href={`/${workspaceSlug}/projects/${projectId}/issues/${issue.id}`}
+          target="_blank"
+          onClick={() => handleIssuePeekOverview(issue)}
+          className="w-full line-clamp-1 cursor-pointer text-sm text-custom-text-100"
+        >
+          <Tooltip tooltipHeading="Title" tooltipContent={issue.name}>
+            <span>{issue.name}</span>
+          </Tooltip>
+        </ControlLink>
+      )}
 
       <IssueProperties
         className="flex flex-wrap items-center gap-2 whitespace-nowrap"
diff --git a/web/components/issues/issue-layouts/kanban/headers/group-by-card.tsx b/web/components/issues/issue-layouts/kanban/headers/group-by-card.tsx
index 25a4cb0c6..8c92dc604 100644
--- a/web/components/issues/issue-layouts/kanban/headers/group-by-card.tsx
+++ b/web/components/issues/issue-layouts/kanban/headers/group-by-card.tsx
@@ -79,21 +79,14 @@ export const HeaderGroupByCard: FC<IHeaderGroupByCard> = observer((props) => {
 
   return (
     <>
-      {isDraftIssue ? (
-        <CreateUpdateDraftIssueModal
-          isOpen={isOpen}
-          handleClose={() => setIsOpen(false)}
-          prePopulateData={issuePayload}
-          fieldsToShow={["all"]}
-        />
-      ) : (
-        <CreateUpdateIssueModal
-          isOpen={isOpen}
-          onClose={() => setIsOpen(false)}
-          data={issuePayload}
-          storeType={storeType}
-        />
-      )}
+      <CreateUpdateIssueModal
+        isOpen={isOpen}
+        onClose={() => setIsOpen(false)}
+        data={issuePayload}
+        storeType={storeType}
+        isDraft={isDraftIssue}
+      />
+
       {renderExistingIssueModal && (
         <ExistingIssuesListModal
           workspaceSlug={workspaceSlug?.toString()}
diff --git a/web/components/issues/issue-layouts/list/block.tsx b/web/components/issues/issue-layouts/list/block.tsx
index c4ced9326..1ade285a9 100644
--- a/web/components/issues/issue-layouts/list/block.tsx
+++ b/web/components/issues/issue-layouts/list/block.tsx
@@ -69,16 +69,22 @@ export const IssueBlock: React.FC<IssueBlockProps> = observer((props: IssueBlock
           <div className="absolute left-0 top-0 z-[99999] h-full w-full animate-pulse bg-custom-background-100/20" />
         )}
 
-        <ControlLink
-          href={`/${workspaceSlug}/projects/${projectId}/issues/${issueId}`}
-          target="_blank"
-          onClick={() => handleIssuePeekOverview(issue)}
-          className="w-full line-clamp-1 cursor-pointer text-sm text-custom-text-100"
-        >
+        {issue?.is_draft ? (
           <Tooltip tooltipHeading="Title" tooltipContent={issue.name}>
             <span>{issue.name}</span>
           </Tooltip>
-        </ControlLink>
+        ) : (
+          <ControlLink
+            href={`/${workspaceSlug}/projects/${projectId}/issues/${issueId}`}
+            target="_blank"
+            onClick={() => handleIssuePeekOverview(issue)}
+            className="w-full line-clamp-1 cursor-pointer text-sm text-custom-text-100"
+          >
+            <Tooltip tooltipHeading="Title" tooltipContent={issue.name}>
+              <span>{issue.name}</span>
+            </Tooltip>
+          </ControlLink>
+        )}
 
         <div className="ml-auto flex flex-shrink-0 items-center gap-2">
           {!issue?.tempId ? (
diff --git a/web/components/issues/issue-layouts/list/headers/group-by-card.tsx b/web/components/issues/issue-layouts/list/headers/group-by-card.tsx
index 49c9f7e40..90270e1a1 100644
--- a/web/components/issues/issue-layouts/list/headers/group-by-card.tsx
+++ b/web/components/issues/issue-layouts/list/headers/group-by-card.tsx
@@ -109,21 +109,13 @@ export const HeaderGroupByCard = observer(
               </div>
             ))}
 
-          {isDraftIssue ? (
-            <CreateUpdateDraftIssueModal
-              isOpen={isOpen}
-              handleClose={() => setIsOpen(false)}
-              prePopulateData={issuePayload}
-              fieldsToShow={["all"]}
-            />
-          ) : (
-            <CreateUpdateIssueModal
-              isOpen={isOpen}
-              onClose={() => setIsOpen(false)}
-              data={issuePayload}
-              storeType={storeType}
-            />
-          )}
+          <CreateUpdateIssueModal
+            isOpen={isOpen}
+            onClose={() => setIsOpen(false)}
+            data={issuePayload}
+            storeType={storeType}
+            isDraft={isDraftIssue}
+          />
 
           {renderExistingIssueModal && (
             <ExistingIssuesListModal
diff --git a/web/components/issues/issue-layouts/quick-action-dropdowns/project-issue.tsx b/web/components/issues/issue-layouts/quick-action-dropdowns/project-issue.tsx
index 13c7ac02a..65adc8542 100644
--- a/web/components/issues/issue-layouts/quick-action-dropdowns/project-issue.tsx
+++ b/web/components/issues/issue-layouts/quick-action-dropdowns/project-issue.tsx
@@ -54,6 +54,8 @@ export const ProjectIssueQuickActions: React.FC<IQuickActionProps> = (props) =>
   };
   delete duplicateIssuePayload.id;
 
+  const isDraftIssue = router?.asPath?.includes("draft-issues") || false;
+
   return (
     <>
       <DeleteIssueModal
@@ -62,6 +64,7 @@ export const ProjectIssueQuickActions: React.FC<IQuickActionProps> = (props) =>
         handleClose={() => setDeleteIssueModal(false)}
         onSubmit={handleDelete}
       />
+
       <CreateUpdateIssueModal
         isOpen={createUpdateIssueModal}
         onClose={() => {
@@ -73,7 +76,9 @@ export const ProjectIssueQuickActions: React.FC<IQuickActionProps> = (props) =>
           if (issueToEdit && handleUpdate) await handleUpdate({ ...issueToEdit, ...data });
         }}
         storeType={EIssuesStoreType.PROJECT}
+        isDraft={isDraftIssue}
       />
+
       <CustomMenu
         placement="bottom-start"
         customButton={customActionButton}
diff --git a/web/components/issues/issue-modal/draft-issue-layout.tsx b/web/components/issues/issue-modal/draft-issue-layout.tsx
index 0616c98d7..1f9935c98 100644
--- a/web/components/issues/issue-modal/draft-issue-layout.tsx
+++ b/web/components/issues/issue-modal/draft-issue-layout.tsx
@@ -21,6 +21,7 @@ export interface DraftIssueProps {
   onClose: (saveDraftIssueInLocalStorage?: boolean) => void;
   onSubmit: (formData: Partial<TIssue>) => Promise<void>;
   projectId: string;
+  isDraft: boolean;
 }
 
 const issueDraftService = new IssueDraftService();
@@ -35,6 +36,7 @@ export const DraftIssueLayout: React.FC<DraftIssueProps> = observer((props) => {
     projectId,
     isCreateMoreToggleEnabled,
     onCreateMoreToggleChange,
+    isDraft,
   } = props;
   // states
   const [issueDiscardModal, setIssueDiscardModal] = useState(false);
@@ -107,6 +109,7 @@ export const DraftIssueLayout: React.FC<DraftIssueProps> = observer((props) => {
         onClose={handleClose}
         onSubmit={onSubmit}
         projectId={projectId}
+        isDraft={isDraft}
       />
     </>
   );
diff --git a/web/components/issues/issue-modal/form.tsx b/web/components/issues/issue-modal/form.tsx
index 31cb9dd66..430aa4920 100644
--- a/web/components/issues/issue-modal/form.tsx
+++ b/web/components/issues/issue-modal/form.tsx
@@ -1,4 +1,4 @@
-import React, { FC, useState, useRef, useEffect } from "react";
+import React, { FC, useState, useRef, useEffect, Fragment } from "react";
 import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
 import { Controller, useForm } from "react-hook-form";
@@ -55,8 +55,9 @@ export interface IssueFormProps {
   onCreateMoreToggleChange: (value: boolean) => void;
   onChange?: (formData: Partial<TIssue> | null) => void;
   onClose: () => void;
-  onSubmit: (values: Partial<TIssue>) => Promise<void>;
+  onSubmit: (values: Partial<TIssue>, is_draft_issue?: boolean) => Promise<void>;
   projectId: string;
+  isDraft: boolean;
 }
 
 // services
@@ -72,6 +73,7 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
     projectId: defaultProjectId,
     isCreateMoreToggleEnabled,
     onCreateMoreToggleChange,
+    isDraft,
   } = props;
   // states
   const [labelModal, setLabelModal] = useState(false);
@@ -137,8 +139,8 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
 
   const issueName = watch("name");
 
-  const handleFormSubmit = async (formData: Partial<TIssue>) => {
-    await onSubmit(formData);
+  const handleFormSubmit = async (formData: Partial<TIssue>, is_draft_issue = false) => {
+    await onSubmit(formData, is_draft_issue);
 
     setGptAssistantModal(false);
 
@@ -248,7 +250,7 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
           }}
         />
       )}
-      <form onSubmit={handleSubmit(handleFormSubmit)}>
+      <form>
         <div className="space-y-5">
           <div className="flex items-center gap-x-2">
             {/* Don't show project selection if editing an issue */}
@@ -670,7 +672,40 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
             <Button variant="neutral-primary" size="sm" onClick={onClose} tabIndex={17}>
               Discard
             </Button>
-            <Button type="submit" variant="primary" size="sm" loading={isSubmitting} tabIndex={18}>
+
+            {isDraft && (
+              <Fragment>
+                {data?.id ? (
+                  <Button
+                    variant="neutral-primary"
+                    size="sm"
+                    loading={isSubmitting}
+                    onClick={handleSubmit((data) => handleFormSubmit({ ...data, is_draft: false }))}
+                    tabIndex={18}
+                  >
+                    {isSubmitting ? "Moving" : "Move from draft"}
+                  </Button>
+                ) : (
+                  <Button
+                    variant="neutral-primary"
+                    size="sm"
+                    loading={isSubmitting}
+                    onClick={handleSubmit((data) => handleFormSubmit(data, true))}
+                    tabIndex={18}
+                  >
+                    {isSubmitting ? "Saving" : "Save as draft"}
+                  </Button>
+                )}
+              </Fragment>
+            )}
+
+            <Button
+              variant="primary"
+              size="sm"
+              loading={isSubmitting}
+              tabIndex={isDraft ? 19 : 18}
+              onClick={handleSubmit((data) => handleFormSubmit(data))}
+            >
               {data?.id ? (isSubmitting ? "Updating" : "Update issue") : isSubmitting ? "Creating" : "Create issue"}
             </Button>
           </div>
diff --git a/web/components/issues/issue-modal/modal.tsx b/web/components/issues/issue-modal/modal.tsx
index 3b5b35cea..02a087314 100644
--- a/web/components/issues/issue-modal/modal.tsx
+++ b/web/components/issues/issue-modal/modal.tsx
@@ -20,10 +20,19 @@ export interface IssuesModalProps {
   onSubmit?: (res: TIssue) => Promise<void>;
   withDraftIssueWrapper?: boolean;
   storeType?: TCreateModalStoreTypes;
+  isDraft?: boolean;
 }
 
 export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = observer((props) => {
-  const { data, isOpen, onClose, onSubmit, withDraftIssueWrapper = true, storeType = EIssuesStoreType.PROJECT } = props;
+  const {
+    data,
+    isOpen,
+    onClose,
+    onSubmit,
+    withDraftIssueWrapper = true,
+    storeType = EIssuesStoreType.PROJECT,
+    isDraft = false,
+  } = props;
   // states
   const [changesMade, setChangesMade] = useState<Partial<TIssue> | null>(null);
   const [createMore, setCreateMore] = useState(false);
@@ -42,6 +51,7 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = observer((prop
   const { issues: cycleIssues } = useIssues(EIssuesStoreType.CYCLE);
   const { issues: viewIssues } = useIssues(EIssuesStoreType.PROJECT_VIEW);
   const { issues: profileIssues } = useIssues(EIssuesStoreType.PROFILE);
+  const { issues: draftIssueStore } = useIssues(EIssuesStoreType.DRAFT);
   // store mapping based on current store
   const issueStores = {
     [EIssuesStoreType.PROJECT]: {
@@ -122,11 +132,16 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = observer((prop
     onClose();
   };
 
-  const handleCreateIssue = async (payload: Partial<TIssue>): Promise<TIssue | undefined> => {
+  const handleCreateIssue = async (
+    payload: Partial<TIssue>,
+    is_draft_issue: boolean = false
+  ): Promise<TIssue | undefined> => {
     if (!workspaceSlug || !payload.project_id) return;
 
     try {
-      const response = await currentIssueStore.createIssue(workspaceSlug, payload.project_id, payload, viewId);
+      const response = is_draft_issue
+        ? await draftIssueStore.createIssue(workspaceSlug, payload.project_id, payload)
+        : await currentIssueStore.createIssue(workspaceSlug, payload.project_id, payload, viewId);
       if (!response) throw new Error();
 
       currentIssueStore.fetchIssues(workspaceSlug, payload.project_id, "mutation", viewId);
@@ -213,7 +228,7 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = observer((prop
     }
   };
 
-  const handleFormSubmit = async (formData: Partial<TIssue>) => {
+  const handleFormSubmit = async (formData: Partial<TIssue>, is_draft_issue: boolean = false) => {
     if (!workspaceSlug || !formData.project_id || !storeType) return;
 
     const payload: Partial<TIssue> = {
@@ -222,7 +237,7 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = observer((prop
     };
 
     let response: TIssue | undefined = undefined;
-    if (!data?.id) response = await handleCreateIssue(payload);
+    if (!data?.id) response = await handleCreateIssue(payload, is_draft_issue);
     else response = await handleUpdateIssue(payload);
 
     if (response != undefined && onSubmit) await onSubmit(response);
@@ -274,6 +289,7 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = observer((prop
                     projectId={activeProjectId}
                     isCreateMoreToggleEnabled={createMore}
                     onCreateMoreToggleChange={handleCreateMoreToggleChange}
+                    isDraft={isDraft}
                   />
                 ) : (
                   <IssueFormRoot
@@ -287,6 +303,7 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = observer((prop
                     onCreateMoreToggleChange={handleCreateMoreToggleChange}
                     onSubmit={handleFormSubmit}
                     projectId={activeProjectId}
+                    isDraft={isDraft}
                   />
                 )}
               </Dialog.Panel>
diff --git a/web/store/issue/draft/issue.store.ts b/web/store/issue/draft/issue.store.ts
index 13d14484a..dc0f601eb 100644
--- a/web/store/issue/draft/issue.store.ts
+++ b/web/store/issue/draft/issue.store.ts
@@ -1,5 +1,9 @@
 import { action, observable, makeObservable, computed, runInAction } from "mobx";
 import set from "lodash/set";
+import update from "lodash/update";
+import uniq from "lodash/uniq";
+import concat from "lodash/concat";
+import pull from "lodash/pull";
 // base class
 import { IssueHelperStore } from "../helpers/issue-helper.store";
 // services
@@ -123,7 +127,7 @@ export class DraftIssues extends IssueHelperStore implements IDraftIssues {
       const response = await this.issueDraftService.createDraftIssue(workspaceSlug, projectId, data);
 
       runInAction(() => {
-        this.issues[projectId].push(response.id);
+        update(this.issues, [projectId], (issueIds = []) => uniq(concat(issueIds, response.id)));
       });
 
       this.rootStore.issues.addIssue([response]);
@@ -136,8 +140,17 @@ export class DraftIssues extends IssueHelperStore implements IDraftIssues {
 
   updateIssue = async (workspaceSlug: string, projectId: string, issueId: string, data: Partial<TIssue>) => {
     try {
-      this.rootStore.issues.updateIssue(issueId, data);
-      const response = await this.issueDraftService.updateDraftIssue(workspaceSlug, projectId, issueId, data);
+      const response = await this.rootIssueStore.projectIssues.updateIssue(workspaceSlug, projectId, issueId, data);
+
+      if (data.hasOwnProperty("is_draft") && data?.is_draft === false) {
+        runInAction(() => {
+          update(this.issues, [projectId], (issueIds = []) => {
+            if (issueIds.includes(issueId)) pull(issueIds, issueId);
+            return issueIds;
+          });
+        });
+      }
+
       return response;
     } catch (error) {
       this.fetchIssues(workspaceSlug, projectId, "mutation");
@@ -147,15 +160,14 @@ export class DraftIssues extends IssueHelperStore implements IDraftIssues {
 
   removeIssue = async (workspaceSlug: string, projectId: string, issueId: string) => {
     try {
-      const response = await this.issueDraftService.deleteDraftIssue(workspaceSlug, projectId, issueId);
+      const response = await this.rootIssueStore.projectIssues.removeIssue(workspaceSlug, projectId, issueId);
 
-      const issueIndex = this.issues[projectId].findIndex((_issueId) => _issueId === issueId);
-      if (issueIndex >= 0)
-        runInAction(() => {
-          this.issues[projectId].splice(issueIndex, 1);
+      runInAction(() => {
+        update(this.issues, [projectId], (issueIds = []) => {
+          if (issueIds.includes(issueId)) pull(issueIds, issueId);
+          return issueIds;
         });
-
-      this.rootStore.issues.removeIssue(issueId);
+      });
 
       return response;
     } catch (error) {

From 346c6f5414b250e2498d393fe60fa8cc9bdd56db Mon Sep 17 00:00:00 2001
From: Ramesh Kumar Chandra
 <31303617+rameshkumarchandra@users.noreply.github.com>
Date: Thu, 8 Feb 2024 00:16:00 +0530
Subject: [PATCH 27/58] fix: module header hide on bigger screens (#3590)

* fix: module header hide on bigger screens

* fix: Add Inbox back on mobile

---------

Co-authored-by: Maximilian Engel <maximilian.engel@swg.de>
Co-authored-by: sriram veeraghanta <veeraghanta.sriram@gmail.com>
---
 web/components/headers/project-issues.tsx       | 8 +++-----
 web/components/modules/module-mobile-header.tsx | 4 ++--
 2 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/web/components/headers/project-issues.tsx b/web/components/headers/project-issues.tsx
index c819b25c3..81e2d2d76 100644
--- a/web/components/headers/project-issues.tsx
+++ b/web/components/headers/project-issues.tsx
@@ -200,8 +200,8 @@ export const ProjectIssuesHeader: React.FC = observer(() => {
                 handleDisplayPropertiesUpdate={handleDisplayProperties}
               />
             </FiltersDropdown>
-
-            {currentProjectDetails?.inbox_view && inboxDetails && (
+          </div>
+          {currentProjectDetails?.inbox_view && inboxDetails && (
               <Link href={`/${workspaceSlug}/projects/${projectId}/inbox/${inboxDetails?.id}`}>
                 <span>
                   <Button variant="neutral-primary" size="sm" className="relative">
@@ -214,9 +214,7 @@ export const ProjectIssuesHeader: React.FC = observer(() => {
                   </Button>
                 </span>
               </Link>
-            )}
-
-          </div>
+          )}
           {canUserCreateIssue && (
             <>
               <Button className="hidden md:block" onClick={() => setAnalyticsModal(true)} variant="neutral-primary" size="sm">
diff --git a/web/components/modules/module-mobile-header.tsx b/web/components/modules/module-mobile-header.tsx
index b08c443d2..e9ed56a8d 100644
--- a/web/components/modules/module-mobile-header.tsx
+++ b/web/components/modules/module-mobile-header.tsx
@@ -77,7 +77,7 @@ export const ModuleMobileHeader = () => {
     );
 
     return (
-        <>
+        <div className="block md:hidden">
             <ProjectAnalyticsModal
                 isOpen={analyticsModal}
                 onClose={() => setAnalyticsModal(false)}
@@ -157,6 +157,6 @@ export const ModuleMobileHeader = () => {
                     Analytics
                 </button>
             </div>
-        </>
+        </div>
     );
 };

From a43dfc097d11d0b5f84e8d53c4ee8da029241291 Mon Sep 17 00:00:00 2001
From: Manish Gupta <59428681+mguptahub@users.noreply.github.com>
Date: Thu, 8 Feb 2024 11:47:52 +0530
Subject: [PATCH 28/58] feat: muti-arch build (#3569)

* arm build, supporting centos & alpine
---
 .github/workflows/build-branch.yml | 152 ++++++++++++---------
 deploy/1-click/install.sh          |   5 +-
 deploy/1-click/plane-app           | 203 +++++++++++++++++------------
 deploy/selfhost/docker-compose.yml |   4 -
 deploy/selfhost/install.sh         |  10 +-
 deploy/selfhost/variables.env      |  35 +++--
 6 files changed, 236 insertions(+), 173 deletions(-)

diff --git a/.github/workflows/build-branch.yml b/.github/workflows/build-branch.yml
index 38694a62e..c43305fc0 100644
--- a/.github/workflows/build-branch.yml
+++ b/.github/workflows/build-branch.yml
@@ -2,11 +2,6 @@ name: Branch Build
 
 on:
   workflow_dispatch:
-    inputs:
-      branch_name:
-        description: "Branch Name"
-        required: true
-        default: "preview"
   push:
     branches:
       - master
@@ -16,49 +11,71 @@ on:
     types: [released, prereleased]
 
 env:
-  TARGET_BRANCH: ${{ inputs.branch_name || github.ref_name || github.event.release.target_commitish }}
+  TARGET_BRANCH: ${{ github.ref_name || github.event.release.target_commitish }}
 
 jobs:
   branch_build_setup:
     name: Build-Push Web/Space/API/Proxy Docker Image
-    runs-on: ubuntu-20.04
-    steps:
-      - name: Check out the repo
-        uses: actions/checkout@v3.3.0
+    runs-on: ubuntu-latest
     outputs:
-      gh_branch_name: ${{ env.TARGET_BRANCH }}
+      gh_branch_name: ${{ steps.set_env_variables.outputs.TARGET_BRANCH }} 
+      gh_buildx_driver: ${{ steps.set_env_variables.outputs.BUILDX_DRIVER }}
+      gh_buildx_version: ${{ steps.set_env_variables.outputs.BUILDX_VERSION }}
+      gh_buildx_platforms: ${{ steps.set_env_variables.outputs.BUILDX_PLATFORMS }}
+      gh_buildx_endpoint: ${{ steps.set_env_variables.outputs.BUILDX_ENDPOINT }}
+
+    steps:
+      - id: set_env_variables
+        name: Set Environment Variables
+        run: |
+          if [ "${{ env.TARGET_BRANCH }}" == "master" ]; then
+            echo "BUILDX_DRIVER=cloud" >> $GITHUB_OUTPUT
+            echo "BUILDX_VERSION=lab:latest" >> $GITHUB_OUTPUT
+            echo "BUILDX_PLATFORMS=linux/amd64,linux/arm64" >> $GITHUB_OUTPUT
+            echo "BUILDX_ENDPOINT=makeplane/plane-dev" >> $GITHUB_OUTPUT
+          else
+            echo "BUILDX_DRIVER=docker-container" >> $GITHUB_OUTPUT
+            echo "BUILDX_VERSION=latest" >> $GITHUB_OUTPUT
+            echo "BUILDX_PLATFORMS=linux/amd64" >> $GITHUB_OUTPUT
+            echo "BUILDX_ENDPOINT=local" >> $GITHUB_OUTPUT
+          fi
+          echo "TARGET_BRANCH=${{ env.TARGET_BRANCH }}" >> $GITHUB_OUTPUT
 
   branch_build_push_frontend:
     runs-on: ubuntu-20.04
     needs: [branch_build_setup]
     env:
       FRONTEND_TAG: ${{ secrets.DOCKERHUB_USERNAME }}/plane-frontend:${{ needs.branch_build_setup.outputs.gh_branch_name }}
+      TARGET_BRANCH: ${{ needs.branch_build_setup.outputs.gh_branch_name }}
+      BUILDX_DRIVER: ${{ needs.branch_build_setup.outputs.gh_buildx_driver }}
+      BUILDX_VERSION: ${{ needs.branch_build_setup.outputs.gh_buildx_version }}
+      BUILDX_PLATFORMS: ${{ needs.branch_build_setup.outputs.gh_buildx_platforms }}
+      BUILDX_ENDPOINT: ${{ needs.branch_build_setup.outputs.gh_buildx_endpoint }}
     steps:
       - name: Set Frontend Docker Tag
         run: |
-          if [ "${{ needs.branch_build_setup.outputs.gh_branch_name }}" == "master" ] && [ "${{ github.event_name }}" == "release" ]; then
+          if [ "${{ env.TARGET_BRANCH }}" == "master" ] && [ "${{ github.event_name }}" == "release" ]; then
             TAG=${{ secrets.DOCKERHUB_USERNAME }}/plane-frontend:latest,${{ secrets.DOCKERHUB_USERNAME }}/plane-frontend:${{ github.event.release.tag_name }}
-          elif [ "${{ needs.branch_build_setup.outputs.gh_branch_name }}" == "master" ]; then
+          elif [ "${{ env.TARGET_BRANCH }}" == "master" ]; then
             TAG=${{ secrets.DOCKERHUB_USERNAME }}/plane-frontend:stable
           else
             TAG=${{ env.FRONTEND_TAG }}
           fi
           echo "FRONTEND_TAG=${TAG}" >> $GITHUB_ENV
-      - name: Docker Setup QEMU
-        uses: docker/setup-qemu-action@v3.0.0
-
-      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v3.0.0
-        with:
-          platforms: linux/amd64,linux/arm64
-          buildkitd-flags: "--allow-insecure-entitlement security.insecure"
 
       - name: Login to Docker Hub
-        uses: docker/login-action@v3.0.0
+        uses: docker/login-action@v3
         with:
           username: ${{ secrets.DOCKERHUB_USERNAME }}
           password: ${{ secrets.DOCKERHUB_TOKEN }}
 
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+        with:
+          driver: ${{ env.BUILDX_DRIVER }}
+          version: ${{ env.BUILDX_VERSION }}
+          endpoint: ${{ env.BUILDX_ENDPOINT }}
+
       - name: Check out the repo
         uses: actions/checkout@v4.1.1
 
@@ -67,7 +84,7 @@ jobs:
         with:
           context: .
           file: ./web/Dockerfile.web
-          platforms: linux/amd64
+          platforms: ${{ env.BUILDX_PLATFORMS }}
           tags: ${{ env.FRONTEND_TAG }}
           push: true
         env:
@@ -80,33 +97,36 @@ jobs:
     needs: [branch_build_setup]
     env:
       SPACE_TAG: ${{ secrets.DOCKERHUB_USERNAME }}/plane-space:${{ needs.branch_build_setup.outputs.gh_branch_name }}
+      TARGET_BRANCH: ${{ needs.branch_build_setup.outputs.gh_branch_name }}
+      BUILDX_DRIVER: ${{ needs.branch_build_setup.outputs.gh_buildx_driver }}
+      BUILDX_VERSION: ${{ needs.branch_build_setup.outputs.gh_buildx_version }}
+      BUILDX_PLATFORMS: ${{ needs.branch_build_setup.outputs.gh_buildx_platforms }}
+      BUILDX_ENDPOINT: ${{ needs.branch_build_setup.outputs.gh_buildx_endpoint }}
     steps:
       - name: Set Space Docker Tag
         run: |
-          if [ "${{ needs.branch_build_setup.outputs.gh_branch_name }}" == "master" ] && [ "${{ github.event_name }}" == "release" ]; then
+          if [ "${{ env.TARGET_BRANCH }}" == "master" ] && [ "${{ github.event_name }}" == "release" ]; then
             TAG=${{ secrets.DOCKERHUB_USERNAME }}/plane-space:latest,${{ secrets.DOCKERHUB_USERNAME }}/plane-space:${{ github.event.release.tag_name }}
-          elif [ "${{ needs.branch_build_setup.outputs.gh_branch_name }}" == "master" ]; then
+          elif [ "${{ env.TARGET_BRANCH }}" == "master" ]; then
             TAG=${{ secrets.DOCKERHUB_USERNAME }}/plane-space:stable
           else
             TAG=${{ env.SPACE_TAG }}
           fi
           echo "SPACE_TAG=${TAG}" >> $GITHUB_ENV
 
-      - name: Docker Setup QEMU
-        uses: docker/setup-qemu-action@v3.0.0
-
-      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v3.0.0
-        with:
-          platforms: linux/amd64,linux/arm64
-          buildkitd-flags: "--allow-insecure-entitlement security.insecure"
-
       - name: Login to Docker Hub
-        uses: docker/login-action@v3.0.0
+        uses: docker/login-action@v3
         with:
           username: ${{ secrets.DOCKERHUB_USERNAME }}
           password: ${{ secrets.DOCKERHUB_TOKEN }}
 
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+        with:
+          driver: ${{ env.BUILDX_DRIVER }}
+          version: ${{ env.BUILDX_VERSION }}
+          endpoint: ${{ env.BUILDX_ENDPOINT }}
+
       - name: Check out the repo
         uses: actions/checkout@v4.1.1
 
@@ -115,7 +135,7 @@ jobs:
         with:
           context: .
           file: ./space/Dockerfile.space
-          platforms: linux/amd64
+          platforms: ${{ env.BUILDX_PLATFORMS }}
           tags: ${{ env.SPACE_TAG }}
           push: true
         env:
@@ -128,33 +148,36 @@ jobs:
     needs: [branch_build_setup]
     env:
       BACKEND_TAG: ${{ secrets.DOCKERHUB_USERNAME }}/plane-backend:${{ needs.branch_build_setup.outputs.gh_branch_name }}
+      TARGET_BRANCH: ${{ needs.branch_build_setup.outputs.gh_branch_name }}
+      BUILDX_DRIVER: ${{ needs.branch_build_setup.outputs.gh_buildx_driver }}
+      BUILDX_VERSION: ${{ needs.branch_build_setup.outputs.gh_buildx_version }}
+      BUILDX_PLATFORMS: ${{ needs.branch_build_setup.outputs.gh_buildx_platforms }}
+      BUILDX_ENDPOINT: ${{ needs.branch_build_setup.outputs.gh_buildx_endpoint }}
     steps:
       - name: Set Backend Docker Tag
         run: |
-          if [ "${{ needs.branch_build_setup.outputs.gh_branch_name }}" == "master" ] && [ "${{ github.event_name }}" == "release" ]; then
+          if [ "${{ env.TARGET_BRANCH }}" == "master" ] && [ "${{ github.event_name }}" == "release" ]; then
             TAG=${{ secrets.DOCKERHUB_USERNAME }}/plane-backend:latest,${{ secrets.DOCKERHUB_USERNAME }}/plane-backend:${{ github.event.release.tag_name }}
-          elif [ "${{ needs.branch_build_setup.outputs.gh_branch_name }}" == "master" ]; then
+          elif [ "${{ env.TARGET_BRANCH }}" == "master" ]; then
             TAG=${{ secrets.DOCKERHUB_USERNAME }}/plane-backend:stable
           else
             TAG=${{ env.BACKEND_TAG }}
           fi
           echo "BACKEND_TAG=${TAG}" >> $GITHUB_ENV
 
-      - name: Docker Setup QEMU
-        uses: docker/setup-qemu-action@v3.0.0
-
-      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v3.0.0
-        with:
-          platforms: linux/amd64,linux/arm64
-          buildkitd-flags: "--allow-insecure-entitlement security.insecure"
-
       - name: Login to Docker Hub
-        uses: docker/login-action@v3.0.0
+        uses: docker/login-action@v3
         with:
           username: ${{ secrets.DOCKERHUB_USERNAME }}
           password: ${{ secrets.DOCKERHUB_TOKEN }}
 
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+        with:
+          driver: ${{ env.BUILDX_DRIVER }}
+          version: ${{ env.BUILDX_VERSION }}
+          endpoint: ${{ env.BUILDX_ENDPOINT }}
+
       - name: Check out the repo
         uses: actions/checkout@v4.1.1
 
@@ -163,7 +186,7 @@ jobs:
         with:
           context: ./apiserver
           file: ./apiserver/Dockerfile.api
-          platforms: linux/amd64
+          platforms: ${{ env.BUILDX_PLATFORMS }}
           push: true
           tags: ${{ env.BACKEND_TAG }}
         env:
@@ -171,38 +194,42 @@ jobs:
           DOCKER_USERNAME: ${{ secrets.DOCKERHUB_USERNAME }}
           DOCKER_PASSWORD: ${{ secrets.DOCKERHUB_TOKEN }}
 
+
   branch_build_push_proxy:
     runs-on: ubuntu-20.04
     needs: [branch_build_setup]
     env:
       PROXY_TAG: ${{ secrets.DOCKERHUB_USERNAME }}/plane-proxy:${{ needs.branch_build_setup.outputs.gh_branch_name }}
+      TARGET_BRANCH: ${{ needs.branch_build_setup.outputs.gh_branch_name }}
+      BUILDX_DRIVER: ${{ needs.branch_build_setup.outputs.gh_buildx_driver }}
+      BUILDX_VERSION: ${{ needs.branch_build_setup.outputs.gh_buildx_version }}
+      BUILDX_PLATFORMS: ${{ needs.branch_build_setup.outputs.gh_buildx_platforms }}
+      BUILDX_ENDPOINT: ${{ needs.branch_build_setup.outputs.gh_buildx_endpoint }}
     steps:
       - name: Set Proxy Docker Tag
         run: |
-          if [ "${{ needs.branch_build_setup.outputs.gh_branch_name }}" == "master" ] && [ "${{ github.event_name }}" == "release" ]; then
+          if [ "${{ env.TARGET_BRANCH }}" == "master" ] && [ "${{ github.event_name }}" == "release" ]; then
             TAG=${{ secrets.DOCKERHUB_USERNAME }}/plane-proxy:latest,${{ secrets.DOCKERHUB_USERNAME }}/plane-proxy:${{ github.event.release.tag_name }}
-          elif [ "${{ needs.branch_build_setup.outputs.gh_branch_name }}" == "master" ]; then
+          elif [ "${{ env.TARGET_BRANCH }}" == "master" ]; then
             TAG=${{ secrets.DOCKERHUB_USERNAME }}/plane-proxy:stable
           else
             TAG=${{ env.PROXY_TAG }}
           fi
           echo "PROXY_TAG=${TAG}" >> $GITHUB_ENV
 
-      - name: Docker Setup QEMU
-        uses: docker/setup-qemu-action@v3.0.0
-
-      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v3.0.0
-        with:
-          platforms: linux/amd64,linux/arm64
-          buildkitd-flags: "--allow-insecure-entitlement security.insecure"
-
       - name: Login to Docker Hub
-        uses: docker/login-action@v3.0.0
+        uses: docker/login-action@v3
         with:
           username: ${{ secrets.DOCKERHUB_USERNAME }}
           password: ${{ secrets.DOCKERHUB_TOKEN }}
 
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+        with:
+          driver: ${{ env.BUILDX_DRIVER }}
+          version: ${{ env.BUILDX_VERSION }}
+          endpoint: ${{ env.BUILDX_ENDPOINT }}
+
       - name: Check out the repo
         uses: actions/checkout@v4.1.1
 
@@ -211,10 +238,11 @@ jobs:
         with:
           context: ./nginx
           file: ./nginx/Dockerfile
-          platforms: linux/amd64
+          platforms: ${{ env.BUILDX_PLATFORMS }}
           tags: ${{ env.PROXY_TAG }}
           push: true
         env:
           DOCKER_BUILDKIT: 1
           DOCKER_USERNAME: ${{ secrets.DOCKERHUB_USERNAME }}
           DOCKER_PASSWORD: ${{ secrets.DOCKERHUB_TOKEN }}
+
diff --git a/deploy/1-click/install.sh b/deploy/1-click/install.sh
index f32be504d..917d08fdf 100644
--- a/deploy/1-click/install.sh
+++ b/deploy/1-click/install.sh
@@ -1,5 +1,6 @@
 #!/bin/bash
 
+# Check if the user has sudo access
 if command -v curl &> /dev/null; then
     sudo curl -sSL \
         -o /usr/local/bin/plane-app \
@@ -11,6 +12,6 @@ else
 fi
 
 sudo chmod +x /usr/local/bin/plane-app
-sudo sed -i 's/export BRANCH=${BRANCH:-master}/export BRANCH='${BRANCH:-master}'/' /usr/local/bin/plane-app
+sudo sed -i 's/export DEPLOY_BRANCH=${BRANCH:-master}/export DEPLOY_BRANCH='${BRANCH:-master}'/' /usr/local/bin/plane-app
 
-sudo  plane-app --help
\ No newline at end of file
+plane-app --help
diff --git a/deploy/1-click/plane-app b/deploy/1-click/plane-app
index 445f39d69..2d6ef0a6f 100644
--- a/deploy/1-click/plane-app
+++ b/deploy/1-click/plane-app
@@ -17,7 +17,7 @@ Project management tool from the future
 
 EOF
 }
-function update_env_files() {
+function update_env_file() {
     config_file=$1
     key=$2
     value=$3
@@ -25,14 +25,16 @@ function update_env_files() {
     # Check if the config file exists
     if [ ! -f "$config_file" ]; then
         echo "Config file not found. Creating a new one..." >&2
-        touch "$config_file"
+        sudo touch "$config_file"
     fi
 
     # Check if the key already exists in the config file
-    if grep -q "^$key=" "$config_file"; then
-        awk -v key="$key" -v value="$value" -F '=' '{if ($1 == key) $2 = value} 1' OFS='=' "$config_file" > "$config_file.tmp" && mv "$config_file.tmp" "$config_file"
+    if sudo grep "^$key=" "$config_file"; then
+        sudo awk -v key="$key" -v value="$value" -F '=' '{if ($1 == key) $2 = value} 1' OFS='=' "$config_file" | sudo tee "$config_file.tmp" > /dev/null
+        sudo mv "$config_file.tmp" "$config_file" &> /dev/null
     else
-        echo "$key=$value" >> "$config_file"
+        # sudo echo "$key=$value" >> "$config_file"
+        echo -e "$key=$value" | sudo tee -a "$config_file" > /dev/null
     fi
 }
 function read_env_file() {
@@ -42,12 +44,12 @@ function read_env_file() {
     # Check if the config file exists
     if [ ! -f "$config_file" ]; then
         echo "Config file not found. Creating a new one..." >&2
-        touch "$config_file"
+        sudo touch "$config_file"
     fi
 
     # Check if the key already exists in the config file
-    if grep -q "^$key=" "$config_file"; then
-        value=$(awk -v key="$key" -F '=' '{if ($1 == key) print $2}' "$config_file")
+    if sudo grep -q "^$key=" "$config_file"; then
+        value=$(sudo awk -v key="$key" -F '=' '{if ($1 == key) print $2}' "$config_file")
         echo "$value"
     else
         echo ""
@@ -55,19 +57,19 @@ function read_env_file() {
 }
 function update_config() {
     config_file="$PLANE_INSTALL_DIR/config.env"
-    update_env_files "$config_file" "$1" "$2"
+    update_env_file $config_file $1 $2
 }
 function read_config() {
     config_file="$PLANE_INSTALL_DIR/config.env"
-    read_env_file "$config_file" "$1"
+    read_env_file $config_file $1
 }
 function update_env() {
     config_file="$PLANE_INSTALL_DIR/.env"
-    update_env_files "$config_file" "$1" "$2"
+    update_env_file $config_file $1 $2
 }
 function read_env() {
     config_file="$PLANE_INSTALL_DIR/.env"
-    read_env_file "$config_file" "$1"
+    read_env_file $config_file $1
 }
 function show_message() {
     print_header
@@ -87,14 +89,14 @@ function prepare_environment() {
     show_message "Prepare Environment..." >&2
 
     show_message "- Updating OS with required tools ✋"  >&2
-    sudo apt-get update -y &> /dev/null
-    sudo apt-get upgrade -y &> /dev/null
+    sudo "$PACKAGE_MANAGER" update -y
+    sudo "$PACKAGE_MANAGER" upgrade -y
 
-    required_tools=("curl" "awk" "wget" "nano" "dialog" "git")
+    local required_tools=("curl" "awk" "wget" "nano" "dialog" "git" "uidmap")
 
     for tool in "${required_tools[@]}"; do
         if ! command -v $tool &> /dev/null; then
-            sudo apt install -y $tool &> /dev/null
+            sudo "$PACKAGE_MANAGER" install -y $tool
         fi
     done
 
@@ -103,11 +105,30 @@ function prepare_environment() {
     # Install Docker if not installed
     if ! command -v docker &> /dev/null; then
         show_message "- Installing Docker ✋"  >&2
-        sudo curl -o- https://get.docker.com | bash - 
+        # curl -o- https://get.docker.com | bash - 
 
-        if [ "$EUID" -ne 0 ]; then
-            dockerd-rootless-setuptool.sh install &> /dev/null
+        if [ "$PACKAGE_MANAGER" == "yum" ]; then
+            sudo $PACKAGE_MANAGER install -y yum-utils
+            sudo yum-config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo &> /dev/null
+        elif [ "$PACKAGE_MANAGER" == "apt-get" ]; then
+            # Add Docker's official GPG key:
+            sudo $PACKAGE_MANAGER update 
+            sudo $PACKAGE_MANAGER install ca-certificates curl &> /dev/null
+            sudo install -m 0755 -d /etc/apt/keyrings &> /dev/null
+            sudo curl -fsSL https://download.docker.com/linux/ubuntu/gpg -o /etc/apt/keyrings/docker.asc &> /dev/null
+            sudo chmod a+r /etc/apt/keyrings/docker.asc &> /dev/null
+
+            # Add the repository to Apt sources:
+            echo \
+                "deb [arch=$(dpkg --print-architecture) signed-by=/etc/apt/keyrings/docker.asc] https://download.docker.com/linux/ubuntu \
+                $(. /etc/os-release && echo "$VERSION_CODENAME") stable" | \
+                sudo tee /etc/apt/sources.list.d/docker.list > /dev/null
+            
+            sudo $PACKAGE_MANAGER update
         fi
+
+        sudo $PACKAGE_MANAGER install docker-ce docker-ce-cli containerd.io docker-buildx-plugin docker-compose-plugin -y
+
         show_message "- Docker Installed ✅" "replace_last_line"  >&2
     else
         show_message "- Docker is already installed ✅"  >&2
@@ -127,17 +148,17 @@ function prepare_environment() {
 function download_plane() {
     # Download Docker Compose File from github url 
     show_message "Downloading Plane Setup Files ✋"  >&2
-    curl -H 'Cache-Control: no-cache, no-store' \
+    sudo curl -H 'Cache-Control: no-cache, no-store' \
         -s -o $PLANE_INSTALL_DIR/docker-compose.yaml  \
-        https://raw.githubusercontent.com/makeplane/plane/$BRANCH/deploy/selfhost/docker-compose.yml?$(date +%s) 
+        https://raw.githubusercontent.com/makeplane/plane/$DEPLOY_BRANCH/deploy/selfhost/docker-compose.yml?token=$(date +%s) 
 
-    curl -H 'Cache-Control: no-cache, no-store' \
+    sudo curl -H 'Cache-Control: no-cache, no-store' \
         -s -o $PLANE_INSTALL_DIR/variables-upgrade.env \
-        https://raw.githubusercontent.com/makeplane/plane/$BRANCH/deploy/selfhost/variables.env?$(date +%s) 
+        https://raw.githubusercontent.com/makeplane/plane/$DEPLOY_BRANCH/deploy/selfhost/variables.env?token=$(date +%s) 
 
     # if .env does not exists rename variables-upgrade.env to .env
     if [ ! -f "$PLANE_INSTALL_DIR/.env" ]; then
-        mv $PLANE_INSTALL_DIR/variables-upgrade.env $PLANE_INSTALL_DIR/.env
+        sudo mv $PLANE_INSTALL_DIR/variables-upgrade.env $PLANE_INSTALL_DIR/.env
     fi
 
     show_message "Plane Setup Files Downloaded ✅" "replace_last_line"  >&2
@@ -186,7 +207,7 @@ function build_local_image() {
     PLANE_TEMP_CODE_DIR=$PLANE_INSTALL_DIR/temp
     sudo rm -rf $PLANE_TEMP_CODE_DIR > /dev/null
 
-    sudo git clone $REPO $PLANE_TEMP_CODE_DIR  --branch $BRANCH --single-branch -q > /dev/null
+    sudo git clone $REPO $PLANE_TEMP_CODE_DIR  --branch $DEPLOY_BRANCH --single-branch -q > /dev/null
 
     sudo cp $PLANE_TEMP_CODE_DIR/deploy/selfhost/build.yml $PLANE_TEMP_CODE_DIR/build.yml
 
@@ -199,25 +220,26 @@ function check_for_docker_images() {
     show_message "" >&2
     # show_message "Building Plane Images" >&2
     
-    update_env "DOCKERHUB_USER" "makeplane"
-    update_env "PULL_POLICY" "always"
     CURR_DIR=$(pwd)
     
-    if [ "$BRANCH" == "master" ]; then
+    if [ "$DEPLOY_BRANCH" == "master" ]; then
         update_env "APP_RELEASE" "latest"
         export APP_RELEASE=latest
     else
-        update_env "APP_RELEASE" "$BRANCH"
-        export APP_RELEASE=$BRANCH    
+        update_env "APP_RELEASE" "$DEPLOY_BRANCH"
+        export APP_RELEASE=$DEPLOY_BRANCH    
     fi
 
-    if [ $CPU_ARCH == "amd64" ] || [ $CPU_ARCH == "x86_64" ]; then
+    if [ $USE_GLOBAL_IMAGES == 1 ]; then
         # show_message "Building Plane Images for $CPU_ARCH is not required. Skipping... ✅" "replace_last_line" >&2
+        export DOCKERHUB_USER=makeplane
+        update_env "DOCKERHUB_USER" "$DOCKERHUB_USER"
+        update_env "PULL_POLICY" "always"
         echo "Building Plane Images for $CPU_ARCH is not required. Skipping..."
     else
         export DOCKERHUB_USER=myplane
         show_message "Building Plane Images for $CPU_ARCH " >&2
-        update_env "DOCKERHUB_USER" "myplane"
+        update_env "DOCKERHUB_USER" "$DOCKERHUB_USER"
         update_env "PULL_POLICY" "never"
 
         build_local_image
@@ -233,7 +255,7 @@ function check_for_docker_images() {
     sudo sed -i "s|- uploads:|- $DATA_DIR/minio:|g" $PLANE_INSTALL_DIR/docker-compose.yaml
 
     show_message "Downloading Plane Images for $CPU_ARCH ✋" >&2
-    docker compose -f $PLANE_INSTALL_DIR/docker-compose.yaml --env-file=$PLANE_INSTALL_DIR/.env pull
+    sudo docker compose -f $PLANE_INSTALL_DIR/docker-compose.yaml --env-file=$PLANE_INSTALL_DIR/.env pull
     show_message "Plane Images Downloaded ✅" "replace_last_line" >&2
 }
 function configure_plane() {
@@ -453,9 +475,11 @@ function install() {
     show_message ""
     if [ "$(uname)" == "Linux" ]; then
         OS="linux"
-        OS_NAME=$(awk -F= '/^ID=/{print $2}' /etc/os-release)
-        # check the OS 
-        if [ "$OS_NAME" == "ubuntu" ]; then
+        OS_NAME=$(sudo awk -F= '/^ID=/{print $2}' /etc/os-release)
+        OS_NAME=$(echo "$OS_NAME" | tr -d '"')
+        print_header
+        if [ "$OS_NAME" == "ubuntu" ] || [ "$OS_NAME" == "debian" ] || 
+                [ "$OS_NAME" == "centos" ] || [ "$OS_NAME" == "amazon" ]; then
             OS_SUPPORTED=true
             show_message "******** Installing Plane ********"
             show_message ""
@@ -488,7 +512,8 @@ function install() {
             fi
             
         else
-            PROGRESS_MSG="❌❌❌ Unsupported OS Detected ❌❌❌"
+            OS_SUPPORTED=false
+            PROGRESS_MSG="❌❌ Unsupported OS Varient Detected : $OS_NAME ❌❌"
             show_message ""
             exit 1
         fi
@@ -499,12 +524,17 @@ function install() {
     fi
 }
 function upgrade() {
+    print_header
     if [ "$(uname)" == "Linux" ]; then
         OS="linux"
-        OS_NAME=$(awk -F= '/^ID=/{print $2}' /etc/os-release)
-        # check the OS 
-        if [ "$OS_NAME" == "ubuntu" ]; then
+        OS_NAME=$(sudo awk -F= '/^ID=/{print $2}' /etc/os-release)
+        OS_NAME=$(echo "$OS_NAME" | tr -d '"')
+        if [ "$OS_NAME" == "ubuntu" ] || [ "$OS_NAME" == "debian" ] || 
+                [ "$OS_NAME" == "centos" ] || [ "$OS_NAME" == "amazon" ]; then
+
             OS_SUPPORTED=true
+            show_message "******** Upgrading Plane ********"
+            show_message ""
 
             prepare_environment
 
@@ -528,53 +558,49 @@ function upgrade() {
                 exit 1
             fi
         else
-            PROGRESS_MSG="Unsupported OS Detected"
+            PROGRESS_MSG="❌❌ Unsupported OS Varient Detected : $OS_NAME ❌❌"
             show_message ""
             exit 1
         fi
     else
-        PROGRESS_MSG="Unsupported OS Detected : $(uname)"
+        PROGRESS_MSG="❌❌❌ Unsupported OS Detected : $(uname) ❌❌❌"
         show_message ""
         exit 1
     fi
 }
 function uninstall() {
+    print_header
     if [ "$(uname)" == "Linux" ]; then
         OS="linux"
         OS_NAME=$(awk -F= '/^ID=/{print $2}' /etc/os-release)
-        # check the OS 
-        if [ "$OS_NAME" == "ubuntu" ]; then
+        OS_NAME=$(echo "$OS_NAME" | tr -d '"')
+        if [ "$OS_NAME" == "ubuntu" ] || [ "$OS_NAME" == "debian" ] || 
+                [ "$OS_NAME" == "centos" ] || [ "$OS_NAME" == "amazon" ]; then
+
             OS_SUPPORTED=true
             show_message "******** Uninstalling Plane ********"
             show_message ""
 
             stop_server
-            # CHECK IF PLANE SERVICE EXISTS
-            # if [ -f "/etc/systemd/system/plane.service" ]; then
-            #     sudo systemctl stop plane.service &> /dev/null
-            #     sudo systemctl disable plane.service &> /dev/null
-            #     sudo rm /etc/systemd/system/plane.service &> /dev/null
-            #     sudo systemctl daemon-reload &> /dev/null
-            # fi
-            # show_message "- Plane Service removed ✅"
 
             if ! [ -x "$(command -v docker)" ]; then
                 echo "DOCKER_NOT_INSTALLED" &> /dev/null
             else
                 # Ask of user input to confirm uninstall docker ?
-                CONFIRM_DOCKER_PURGE=$(dialog --title "Uninstall Docker" --yesno "Are you sure you want to uninstall docker ?" 8 60 3>&1 1>&2 2>&3)
+                CONFIRM_DOCKER_PURGE=$(dialog --title "Uninstall Docker" --defaultno --yesno "Are you sure you want to uninstall docker ?" 8 60 3>&1 1>&2 2>&3)
                 if [ $? -eq 0 ]; then
                     show_message "- Uninstalling Docker ✋"
-                    sudo apt-get purge -y docker-engine docker docker.io docker-ce docker-ce-cli docker-compose-plugin &> /dev/null
-                    sudo apt-get autoremove -y --purge docker-engine docker docker.io docker-ce docker-compose-plugin &> /dev/null
+                    sudo docker images -q | xargs -r sudo docker rmi -f &> /dev/null
+                    sudo "$PACKAGE_MANAGER" remove -y docker-engine docker docker.io docker-ce docker-ce-cli docker-compose-plugin &> /dev/null
+                    sudo "$PACKAGE_MANAGER" autoremove -y docker-engine docker docker.io docker-ce docker-compose-plugin &> /dev/null
                     show_message "- Docker Uninstalled ✅" "replace_last_line" >&2
                 fi
             fi
 
-            rm $PLANE_INSTALL_DIR/.env &> /dev/null
-            rm $PLANE_INSTALL_DIR/variables-upgrade.env &> /dev/null
-            rm $PLANE_INSTALL_DIR/config.env &> /dev/null
-            rm $PLANE_INSTALL_DIR/docker-compose.yaml &> /dev/null
+            sudo rm $PLANE_INSTALL_DIR/.env &> /dev/null
+            sudo rm $PLANE_INSTALL_DIR/variables-upgrade.env &> /dev/null
+            sudo rm $PLANE_INSTALL_DIR/config.env &> /dev/null
+            sudo rm $PLANE_INSTALL_DIR/docker-compose.yaml &> /dev/null
             
             # rm -rf $PLANE_INSTALL_DIR &> /dev/null
             show_message "- Configuration Cleaned ✅"
@@ -593,12 +619,12 @@ function uninstall() {
             show_message ""
             show_message ""
         else
-            PROGRESS_MSG="Unsupported OS Detected : $(uname) ❌"
+            PROGRESS_MSG="❌❌ Unsupported OS Varient Detected : $OS_NAME ❌❌"
             show_message ""
             exit 1
         fi
     else
-        PROGRESS_MSG="Unsupported OS Detected : $(uname) ❌"
+        PROGRESS_MSG="❌❌❌ Unsupported OS Detected : $(uname) ❌❌❌"
         show_message ""
         exit 1
     fi
@@ -608,15 +634,15 @@ function start_server() {
     env_file="$PLANE_INSTALL_DIR/.env"
     # check if both the files exits 
     if [ -f "$docker_compose_file" ] && [ -f "$env_file" ]; then
-        show_message "Starting Plane Server ✋"
-        docker compose -f $docker_compose_file --env-file=$env_file up -d
+        show_message "Starting Plane Server ($APP_RELEASE) ✋"
+        sudo docker compose -f $docker_compose_file --env-file=$env_file up -d
 
         # Wait for containers to be running
         echo "Waiting for containers to start..."
-        while ! docker compose -f "$docker_compose_file" --env-file="$env_file" ps --services --filter "status=running" --quiet | grep -q "."; do
+        while ! sudo docker compose -f "$docker_compose_file" --env-file="$env_file" ps --services --filter "status=running" --quiet | grep -q "."; do
             sleep 1
         done
-        show_message "Plane Server Started ✅" "replace_last_line" >&2
+        show_message "Plane Server Started ($APP_RELEASE) ✅" "replace_last_line" >&2
     else
         show_message "Plane Server not installed. Please install Plane first ❌" "replace_last_line" >&2
     fi
@@ -626,11 +652,11 @@ function stop_server() {
     env_file="$PLANE_INSTALL_DIR/.env"
     # check if both the files exits 
     if [ -f "$docker_compose_file" ] && [ -f "$env_file" ]; then
-        show_message "Stopping Plane Server ✋"
-        docker compose -f $docker_compose_file --env-file=$env_file down
-        show_message "Plane Server Stopped ✅" "replace_last_line" >&2
+        show_message "Stopping Plane Server ($APP_RELEASE) ✋"
+        sudo docker compose -f $docker_compose_file --env-file=$env_file down
+        show_message "Plane Server Stopped ($APP_RELEASE) ✅" "replace_last_line" >&2
     else
-        show_message "Plane Server not installed. Please install Plane first ❌" "replace_last_line" >&2
+        show_message "Plane Server not installed [Skipping] ✅" "replace_last_line" >&2
     fi
 }
 function restart_server() {
@@ -638,9 +664,9 @@ function restart_server() {
     env_file="$PLANE_INSTALL_DIR/.env"
     # check if both the files exits 
     if [ -f "$docker_compose_file" ] && [ -f "$env_file" ]; then
-        show_message "Restarting Plane Server ✋"
-        docker compose -f $docker_compose_file --env-file=$env_file restart
-        show_message "Plane Server Restarted ✅" "replace_last_line" >&2
+        show_message "Restarting Plane Server ($APP_RELEASE) ✋"
+        sudo docker compose -f $docker_compose_file --env-file=$env_file restart
+        show_message "Plane Server Restarted ($APP_RELEASE) ✅" "replace_last_line" >&2
     else
         show_message "Plane Server not installed. Please install Plane first ❌" "replace_last_line" >&2
     fi
@@ -666,28 +692,45 @@ function show_help() {
 }
 function update_installer() {
     show_message "Updating Plane Installer ✋" >&2
-    curl -H 'Cache-Control: no-cache, no-store' \
+    sudo curl -H 'Cache-Control: no-cache, no-store' \
         -s -o /usr/local/bin/plane-app  \
-        https://raw.githubusercontent.com/makeplane/plane/$BRANCH/deploy/1-click/install.sh?token=$(date +%s) 
+        https://raw.githubusercontent.com/makeplane/plane/$DEPLOY_BRANCH/deploy/1-click/plane-app?token=$(date +%s) 
 
-    chmod +x /usr/local/bin/plane-app > /dev/null&> /dev/null
+    sudo chmod +x /usr/local/bin/plane-app > /dev/null&> /dev/null
     show_message "Plane Installer Updated ✅" "replace_last_line" >&2
 }
 
-export BRANCH=${BRANCH:-master}
-export APP_RELEASE=$BRANCH
+export DEPLOY_BRANCH=${BRANCH:-master}
+export APP_RELEASE=$DEPLOY_BRANCH
 export DOCKERHUB_USER=makeplane
 export PULL_POLICY=always
 
+if [ "$DEPLOY_BRANCH" == "master" ]; then
+    export APP_RELEASE=latest
+fi
+
 PLANE_INSTALL_DIR=/opt/plane
 DATA_DIR=$PLANE_INSTALL_DIR/data
 LOG_DIR=$PLANE_INSTALL_DIR/log
 OS_SUPPORTED=false
 CPU_ARCH=$(uname -m)
 PROGRESS_MSG=""
-USE_GLOBAL_IMAGES=1
+USE_GLOBAL_IMAGES=0
+PACKAGE_MANAGER=""
 
-mkdir -p $PLANE_INSTALL_DIR/{data,log}
+if [[ $CPU_ARCH == "amd64" || $CPU_ARCH == "x86_64" || ( $DEPLOY_BRANCH == "master" && ( $CPU_ARCH == "arm64" || $CPU_ARCH == "aarch64" ) ) ]]; then
+    USE_GLOBAL_IMAGES=1
+fi
+
+sudo mkdir -p $PLANE_INSTALL_DIR/{data,log}
+
+if command -v apt-get &> /dev/null; then
+    PACKAGE_MANAGER="apt-get"
+elif command -v yum &> /dev/null; then
+    PACKAGE_MANAGER="yum"
+elif command -v apk &> /dev/null; then
+    PACKAGE_MANAGER="apk"
+fi
 
 if [ "$1" == "start" ]; then
     start_server
@@ -704,7 +747,7 @@ elif [ "$1" == "--upgrade" ] || [ "$1" == "-up" ]; then
     upgrade
 elif [ "$1" == "--uninstall" ] || [ "$1" == "-un" ]; then
     uninstall
-elif [ "$1" == "--update-installer" ] || [ "$1" == "-ui" ] ; then
+elif [ "$1" == "--update-installer" ] || [ "$1" == "-ui" ]; then
     update_installer
 elif [ "$1" == "--help" ] || [ "$1" == "-h" ]; then
     show_help
diff --git a/deploy/selfhost/docker-compose.yml b/deploy/selfhost/docker-compose.yml
index b223e722a..60861878c 100644
--- a/deploy/selfhost/docker-compose.yml
+++ b/deploy/selfhost/docker-compose.yml
@@ -38,10 +38,6 @@ x-app-env : &app-env
     - EMAIL_USE_SSL=${EMAIL_USE_SSL:-0}
     - DEFAULT_EMAIL=${DEFAULT_EMAIL:-captain@plane.so}
     - DEFAULT_PASSWORD=${DEFAULT_PASSWORD:-password123}
-    # OPENAI SETTINGS - Deprecated can be configured through admin panel
-    - OPENAI_API_BASE=${OPENAI_API_BASE:-https://api.openai.com/v1}
-    - OPENAI_API_KEY=${OPENAI_API_KEY:-""}
-    - GPT_ENGINE=${GPT_ENGINE:-"gpt-3.5-turbo"}
     # LOGIN/SIGNUP SETTINGS - Deprecated can be configured through admin panel
     - ENABLE_SIGNUP=${ENABLE_SIGNUP:-1}
     - ENABLE_EMAIL_PASSWORD=${ENABLE_EMAIL_PASSWORD:-1}
diff --git a/deploy/selfhost/install.sh b/deploy/selfhost/install.sh
index 4e505cff9..30f2d15d7 100755
--- a/deploy/selfhost/install.sh
+++ b/deploy/selfhost/install.sh
@@ -20,8 +20,8 @@ function buildLocalImage() {
         DO_BUILD="2"
     else 
         printf "\n" >&2
-        printf "${YELLOW}You are on ${ARCH} cpu architecture. ${NC}\n" >&2
-        printf "${YELLOW}Since the prebuilt ${ARCH} compatible docker images are not available for, we will be running the docker build on this system. ${NC} \n" >&2
+        printf "${YELLOW}You are on ${CPU_ARCH} cpu architecture. ${NC}\n" >&2
+        printf "${YELLOW}Since the prebuilt ${CPU_ARCH} compatible docker images are not available for, we will be running the docker build on this system. ${NC} \n" >&2
         printf "${YELLOW}This might take ${YELLOW}5-30 min based on your system's hardware configuration. \n ${NC} \n" >&2
         printf "\n" >&2
         printf "${GREEN}Select an option to proceed: ${NC}\n" >&2
@@ -149,7 +149,7 @@ function upgrade() {
 function askForAction() {
     echo
     echo "Select a Action you want to perform:"
-    echo "   1) Install (${ARCH})"
+    echo "   1) Install (${CPU_ARCH})"
     echo "   2) Start"
     echo "   3) Stop"
     echo "   4) Restart"
@@ -193,8 +193,8 @@ function askForAction() {
 }
 
 # CPU ARCHITECHTURE BASED SETTINGS
-ARCH=$(uname -m)
-if [ $ARCH == "amd64" ] || [ $ARCH == "x86_64" ];
+CPU_ARCH=$(uname -m)
+if [[ $CPU_ARCH == "amd64" || $CPU_ARCH == "x86_64" || ( $BRANCH == "master" && ( $CPU_ARCH == "arm64" || $CPU_ARCH == "aarch64" ) ) ]]; 
 then
     USE_GLOBAL_IMAGES=1
     DOCKERHUB_USER=makeplane
diff --git a/deploy/selfhost/variables.env b/deploy/selfhost/variables.env
index 4a3781811..6d2cde0ff 100644
--- a/deploy/selfhost/variables.env
+++ b/deploy/selfhost/variables.env
@@ -8,13 +8,13 @@ NGINX_PORT=80
 WEB_URL=http://localhost
 DEBUG=0
 NEXT_PUBLIC_DEPLOY_URL=http://localhost/spaces
-SENTRY_DSN=""
-SENTRY_ENVIRONMENT="production"
-GOOGLE_CLIENT_ID=""
-GITHUB_CLIENT_ID=""
-GITHUB_CLIENT_SECRET=""
+SENTRY_DSN=
+SENTRY_ENVIRONMENT=production
+GOOGLE_CLIENT_ID=
+GITHUB_CLIENT_ID=
+GITHUB_CLIENT_SECRET=
 DOCKERIZED=1 # deprecated
-CORS_ALLOWED_ORIGINS="http://localhost"
+CORS_ALLOWED_ORIGINS=http://localhost
 
 #DB SETTINGS
 PGHOST=plane-db
@@ -31,19 +31,14 @@ REDIS_PORT=6379
 REDIS_URL=redis://${REDIS_HOST}:6379/
 
 # EMAIL SETTINGS
-EMAIL_HOST=""
-EMAIL_HOST_USER=""
-EMAIL_HOST_PASSWORD=""
+EMAIL_HOST=
+EMAIL_HOST_USER=
+EMAIL_HOST_PASSWORD=
 EMAIL_PORT=587
-EMAIL_FROM="Team Plane <team@mailer.plane.so>"
+EMAIL_FROM=Team Plane <team@mailer.plane.so>
 EMAIL_USE_TLS=1
 EMAIL_USE_SSL=0
 
-# OPENAI SETTINGS
-OPENAI_API_BASE=https://api.openai.com/v1 # deprecated
-OPENAI_API_KEY="sk-" # deprecated
-GPT_ENGINE="gpt-3.5-turbo" # deprecated
-
 # LOGIN/SIGNUP SETTINGS
 ENABLE_SIGNUP=1
 ENABLE_EMAIL_PASSWORD=1
@@ -52,13 +47,13 @@ SECRET_KEY=60gp0byfz2dvffa45cxl20p1scy9xbpf6d8c5y0geejgkyp1b5
 
 # DATA STORE SETTINGS
 USE_MINIO=1
-AWS_REGION=""
-AWS_ACCESS_KEY_ID="access-key"
-AWS_SECRET_ACCESS_KEY="secret-key"
+AWS_REGION=
+AWS_ACCESS_KEY_ID=access-key
+AWS_SECRET_ACCESS_KEY=secret-key
 AWS_S3_ENDPOINT_URL=http://plane-minio:9000
 AWS_S3_BUCKET_NAME=uploads
-MINIO_ROOT_USER="access-key"
-MINIO_ROOT_PASSWORD="secret-key"
+MINIO_ROOT_USER=access-key
+MINIO_ROOT_PASSWORD=secret-key
 BUCKET_NAME=uploads
 FILE_SIZE_LIMIT=5242880
 

From fb3dd77b66bed774cb4bbf58bd9f7502c8faffeb Mon Sep 17 00:00:00 2001
From: rahulramesha <71900764+rahulramesha@users.noreply.github.com>
Date: Thu, 8 Feb 2024 11:49:00 +0530
Subject: [PATCH 29/58] feat: Keyboard navigation spreadsheet layout for issues
 (#3564)

* enable keyboard navigation for spreadsheet layout

* move the logic to table level instead of cell level

* fix perf issue that made it unusable

* fix scroll issue with navigation

* fix build errors
---
 packages/ui/src/dropdowns/custom-menu.tsx     | 36 +++++++---
 packages/ui/src/dropdowns/helper.tsx          |  2 +
 .../ui/src/hooks/use-dropdown-key-down.tsx    | 13 +++-
 web/components/common/breadcrumb-link.tsx     |  2 +-
 web/components/dropdowns/cycle.tsx            |  8 ++-
 web/components/dropdowns/date.tsx             |  8 ++-
 web/components/dropdowns/estimate.tsx         | 10 ++-
 .../dropdowns/member/project-member.tsx       | 10 ++-
 web/components/dropdowns/member/types.d.ts    |  1 +
 .../dropdowns/member/workspace-member.tsx     |  9 ++-
 web/components/dropdowns/module.tsx           | 10 ++-
 web/components/dropdowns/priority.tsx         | 10 ++-
 web/components/dropdowns/project.tsx          | 10 ++-
 web/components/dropdowns/state.tsx            | 10 ++-
 .../issue-layouts/properties/labels.tsx       | 20 ++++--
 .../spreadsheet/columns/assignee-column.tsx   |  4 +-
 .../spreadsheet/columns/due-date-column.tsx   |  4 +-
 .../spreadsheet/columns/estimate-column.tsx   |  4 +-
 .../spreadsheet/columns/header-column.tsx     |  9 ++-
 .../spreadsheet/columns/label-column.tsx      |  6 +-
 .../spreadsheet/columns/priority-column.tsx   |  6 +-
 .../spreadsheet/columns/start-date-column.tsx |  4 +-
 .../spreadsheet/columns/state-column.tsx      |  4 +-
 .../spreadsheet/issue-column.tsx              | 68 +++++++++++++++++++
 .../issue-layouts/spreadsheet/issue-row.tsx   | 60 ++++++----------
 .../spreadsheet/spreadsheet-header-column.tsx | 46 +++++++++++++
 .../spreadsheet/spreadsheet-header.tsx        | 36 ++++------
 .../spreadsheet/spreadsheet-table.tsx         |  5 +-
 web/constants/spreadsheet.ts                  |  1 +
 web/hooks/use-dropdown-key-down.tsx           | 22 ++++--
 web/hooks/use-table-keyboard-navigation.tsx   | 56 +++++++++++++++
 31 files changed, 368 insertions(+), 126 deletions(-)
 create mode 100644 web/components/issues/issue-layouts/spreadsheet/issue-column.tsx
 create mode 100644 web/components/issues/issue-layouts/spreadsheet/spreadsheet-header-column.tsx
 create mode 100644 web/hooks/use-table-keyboard-navigation.tsx

diff --git a/packages/ui/src/dropdowns/custom-menu.tsx b/packages/ui/src/dropdowns/custom-menu.tsx
index 7ef99370f..c7cce2475 100644
--- a/packages/ui/src/dropdowns/custom-menu.tsx
+++ b/packages/ui/src/dropdowns/custom-menu.tsx
@@ -15,6 +15,7 @@ const CustomMenu = (props: ICustomMenuDropdownProps) => {
   const {
     buttonClassName = "",
     customButtonClassName = "",
+    customButtonTabIndex = 0,
     placement,
     children,
     className = "",
@@ -29,6 +30,7 @@ const CustomMenu = (props: ICustomMenuDropdownProps) => {
     verticalEllipsis = false,
     portalElement,
     menuButtonOnClick,
+    onMenuClose,
     tabIndex,
     closeOnSelect,
   } = props;
@@ -47,18 +49,27 @@ const CustomMenu = (props: ICustomMenuDropdownProps) => {
     setIsOpen(true);
     if (referenceElement) referenceElement.focus();
   };
-  const closeDropdown = () => setIsOpen(false);
-  const handleKeyDown = useDropdownKeyDown(openDropdown, closeDropdown, isOpen);
+  const closeDropdown = () => {
+    isOpen && onMenuClose && onMenuClose();
+    setIsOpen(false);
+  };
+
+  const handleOnChange = () => {
+    if (closeOnSelect) closeDropdown();
+  };
+
+  const selectActiveItem = () => {
+    const activeItem: HTMLElement | undefined | null = dropdownRef.current?.querySelector(
+      `[data-headlessui-state="active"] button`
+    );
+    activeItem?.click();
+  };
+
+  const handleKeyDown = useDropdownKeyDown(openDropdown, closeDropdown, isOpen, selectActiveItem);
   useOutsideClickDetector(dropdownRef, closeDropdown);
 
   let menuItems = (
-    <Menu.Items
-      className="fixed z-10"
-      onClick={() => {
-        if (closeOnSelect) closeDropdown();
-      }}
-      static
-    >
+    <Menu.Items className="fixed z-10" static>
       <div
         className={cn(
           "my-1 overflow-y-scroll rounded-md border-[0.5px] border-custom-border-300 bg-custom-background-100 px-2 py-2.5 text-xs shadow-custom-shadow-rg focus:outline-none min-w-[12rem] whitespace-nowrap",
@@ -89,7 +100,8 @@ const CustomMenu = (props: ICustomMenuDropdownProps) => {
       ref={dropdownRef}
       tabIndex={tabIndex}
       className={cn("relative w-min text-left", className)}
-      onKeyDown={handleKeyDown}
+      onKeyDownCapture={handleKeyDown}
+      onChange={handleOnChange}
     >
       {({ open }) => (
         <>
@@ -103,6 +115,7 @@ const CustomMenu = (props: ICustomMenuDropdownProps) => {
                   if (menuButtonOnClick) menuButtonOnClick();
                 }}
                 className={customButtonClassName}
+                tabIndex={customButtonTabIndex}
               >
                 {customButton}
               </button>
@@ -122,6 +135,7 @@ const CustomMenu = (props: ICustomMenuDropdownProps) => {
                     className={`relative grid place-items-center rounded p-1 text-custom-text-200 outline-none hover:text-custom-text-100 ${
                       disabled ? "cursor-not-allowed" : "cursor-pointer hover:bg-custom-background-80"
                     } ${buttonClassName}`}
+                    tabIndex={customButtonTabIndex}
                   >
                     <MoreHorizontal className={`h-3.5 w-3.5 ${verticalEllipsis ? "rotate-90" : ""}`} />
                   </button>
@@ -142,6 +156,7 @@ const CustomMenu = (props: ICustomMenuDropdownProps) => {
                       openDropdown();
                       if (menuButtonOnClick) menuButtonOnClick();
                     }}
+                    tabIndex={customButtonTabIndex}
                   >
                     {label}
                     {!noChevron && <ChevronDown className="h-3.5 w-3.5" />}
@@ -159,6 +174,7 @@ const CustomMenu = (props: ICustomMenuDropdownProps) => {
 
 const MenuItem: React.FC<ICustomMenuItemProps> = (props) => {
   const { children, onClick, className = "" } = props;
+
   return (
     <Menu.Item as="div">
       {({ active, close }) => (
diff --git a/packages/ui/src/dropdowns/helper.tsx b/packages/ui/src/dropdowns/helper.tsx
index 06f1c44c0..930f332b9 100644
--- a/packages/ui/src/dropdowns/helper.tsx
+++ b/packages/ui/src/dropdowns/helper.tsx
@@ -3,6 +3,7 @@ import { Placement } from "@blueprintjs/popover2";
 
 export interface IDropdownProps {
   customButtonClassName?: string;
+  customButtonTabIndex?: number;
   buttonClassName?: string;
   className?: string;
   customButton?: JSX.Element;
@@ -23,6 +24,7 @@ export interface ICustomMenuDropdownProps extends IDropdownProps {
   noBorder?: boolean;
   verticalEllipsis?: boolean;
   menuButtonOnClick?: (...args: any) => void;
+  onMenuClose?: () => void;
   closeOnSelect?: boolean;
   portalElement?: Element | null;
 }
diff --git a/packages/ui/src/hooks/use-dropdown-key-down.tsx b/packages/ui/src/hooks/use-dropdown-key-down.tsx
index 1bb861477..b93a4d551 100644
--- a/packages/ui/src/hooks/use-dropdown-key-down.tsx
+++ b/packages/ui/src/hooks/use-dropdown-key-down.tsx
@@ -1,16 +1,23 @@
 import { useCallback } from "react";
 
 type TUseDropdownKeyDown = {
-  (onOpen: () => void, onClose: () => void, isOpen: boolean): (event: React.KeyboardEvent<HTMLElement>) => void;
+  (
+    onOpen: () => void,
+    onClose: () => void,
+    isOpen: boolean,
+    selectActiveItem?: () => void
+  ): (event: React.KeyboardEvent<HTMLElement>) => void;
 };
 
-export const useDropdownKeyDown: TUseDropdownKeyDown = (onOpen, onClose, isOpen) => {
+export const useDropdownKeyDown: TUseDropdownKeyDown = (onOpen, onClose, isOpen, selectActiveItem?) => {
   const handleKeyDown = useCallback(
     (event: React.KeyboardEvent<HTMLElement>) => {
       if (event.key === "Enter") {
-        event.stopPropagation();
         if (!isOpen) {
+          event.stopPropagation();
           onOpen();
+        } else {
+          selectActiveItem && selectActiveItem();
         }
       } else if (event.key === "Escape" && isOpen) {
         event.stopPropagation();
diff --git a/web/components/common/breadcrumb-link.tsx b/web/components/common/breadcrumb-link.tsx
index aebd7fc02..e5f1dbce6 100644
--- a/web/components/common/breadcrumb-link.tsx
+++ b/web/components/common/breadcrumb-link.tsx
@@ -11,7 +11,7 @@ export const BreadcrumbLink: React.FC<Props> = (props) => {
   const { href, label, icon } = props;
   return (
     <Tooltip tooltipContent={label} position="bottom">
-      <li className="flex items-center space-x-2">
+      <li className="flex items-center space-x-2" tabIndex={-1}>
         <div className="flex flex-wrap items-center gap-2.5">
           {href ? (
             <Link
diff --git a/web/components/dropdowns/cycle.tsx b/web/components/dropdowns/cycle.tsx
index d6d4da432..e3aa6df11 100644
--- a/web/components/dropdowns/cycle.tsx
+++ b/web/components/dropdowns/cycle.tsx
@@ -23,6 +23,7 @@ type Props = TDropdownProps & {
   dropdownArrow?: boolean;
   dropdownArrowClassName?: string;
   onChange: (val: string | null) => void;
+  onClose?: () => void;
   projectId: string;
   value: string | null;
 };
@@ -47,6 +48,7 @@ export const CycleDropdown: React.FC<Props> = observer((props) => {
     dropdownArrowClassName = "",
     hideIcon = false,
     onChange,
+    onClose,
     placeholder = "Cycle",
     placement,
     projectId,
@@ -123,8 +125,10 @@ export const CycleDropdown: React.FC<Props> = observer((props) => {
   };
 
   const handleClose = () => {
-    if (isOpen) setIsOpen(false);
+    if (!isOpen) return;
+    setIsOpen(false);
     if (referenceElement) referenceElement.blur();
+    onClose && onClose();
   };
 
   const toggleDropdown = () => {
@@ -163,7 +167,7 @@ export const CycleDropdown: React.FC<Props> = observer((props) => {
           <button
             ref={setReferenceElement}
             type="button"
-            className={cn("block h-full w-full outline-none", buttonContainerClassName)}
+            className={cn("clickable block h-full w-full outline-none", buttonContainerClassName)}
             onClick={handleOnClick}
           >
             {button}
diff --git a/web/components/dropdowns/date.tsx b/web/components/dropdowns/date.tsx
index 3cd9ca16a..2603b3eb2 100644
--- a/web/components/dropdowns/date.tsx
+++ b/web/components/dropdowns/date.tsx
@@ -23,6 +23,7 @@ type Props = TDropdownProps & {
   minDate?: Date;
   maxDate?: Date;
   onChange: (val: Date | null) => void;
+  onClose?: () => void;
   value: Date | string | null;
   closeOnSelect?: boolean;
 };
@@ -42,6 +43,7 @@ export const DateDropdown: React.FC<Props> = (props) => {
     minDate,
     maxDate,
     onChange,
+    onClose,
     placeholder = "Date",
     placement,
     showTooltip = false,
@@ -74,8 +76,10 @@ export const DateDropdown: React.FC<Props> = (props) => {
   };
 
   const handleClose = () => {
-    if (isOpen) setIsOpen(false);
+    if (!isOpen) return;
+    setIsOpen(false);
     if (referenceElement) referenceElement.blur();
+    onClose && onClose();
   };
 
   const toggleDropdown = () => {
@@ -112,7 +116,7 @@ export const DateDropdown: React.FC<Props> = (props) => {
           ref={setReferenceElement}
           type="button"
           className={cn(
-            "block h-full max-w-full outline-none",
+            "clickable block h-full max-w-full outline-none",
             {
               "cursor-not-allowed text-custom-text-200": disabled,
               "cursor-pointer": !disabled,
diff --git a/web/components/dropdowns/estimate.tsx b/web/components/dropdowns/estimate.tsx
index 88fec3199..48558a683 100644
--- a/web/components/dropdowns/estimate.tsx
+++ b/web/components/dropdowns/estimate.tsx
@@ -22,6 +22,7 @@ type Props = TDropdownProps & {
   dropdownArrow?: boolean;
   dropdownArrowClassName?: string;
   onChange: (val: number | null) => void;
+  onClose?: () => void;
   projectId: string;
   value: number | null;
 };
@@ -46,6 +47,7 @@ export const EstimateDropdown: React.FC<Props> = observer((props) => {
     dropdownArrowClassName = "",
     hideIcon = false,
     onChange,
+    onClose,
     placeholder = "Estimate",
     placement,
     projectId,
@@ -112,8 +114,10 @@ export const EstimateDropdown: React.FC<Props> = observer((props) => {
   };
 
   const handleClose = () => {
-    if (isOpen) setIsOpen(false);
+    if (!isOpen) return;
+    setIsOpen(false);
     if (referenceElement) referenceElement.blur();
+    onClose && onClose();
   };
 
   const toggleDropdown = () => {
@@ -152,7 +156,7 @@ export const EstimateDropdown: React.FC<Props> = observer((props) => {
           <button
             ref={setReferenceElement}
             type="button"
-            className={cn("block h-full w-full outline-none", buttonContainerClassName)}
+            className={cn("clickable block h-full w-full outline-none", buttonContainerClassName)}
             onClick={handleOnClick}
           >
             {button}
@@ -162,7 +166,7 @@ export const EstimateDropdown: React.FC<Props> = observer((props) => {
             ref={setReferenceElement}
             type="button"
             className={cn(
-              "block h-full max-w-full outline-none",
+              "clickable block h-full max-w-full outline-none",
               {
                 "cursor-not-allowed text-custom-text-200": disabled,
                 "cursor-pointer": !disabled,
diff --git a/web/components/dropdowns/member/project-member.tsx b/web/components/dropdowns/member/project-member.tsx
index cfbdf52e6..44cd3a701 100644
--- a/web/components/dropdowns/member/project-member.tsx
+++ b/web/components/dropdowns/member/project-member.tsx
@@ -21,6 +21,7 @@ import { BUTTON_VARIANTS_WITH_TEXT } from "../constants";
 
 type Props = {
   projectId: string;
+  onClose?: () => void;
 } & MemberDropdownProps;
 
 export const ProjectMemberDropdown: React.FC<Props> = observer((props) => {
@@ -36,6 +37,7 @@ export const ProjectMemberDropdown: React.FC<Props> = observer((props) => {
     hideIcon = false,
     multiple,
     onChange,
+    onClose,
     placeholder = "Members",
     placement,
     projectId,
@@ -105,8 +107,10 @@ export const ProjectMemberDropdown: React.FC<Props> = observer((props) => {
   };
 
   const handleClose = () => {
-    if (isOpen) setIsOpen(false);
+    if (!isOpen) return;
+    setIsOpen(false);
     if (referenceElement) referenceElement.blur();
+    onClose && onClose();
   };
 
   const toggleDropdown = () => {
@@ -144,7 +148,7 @@ export const ProjectMemberDropdown: React.FC<Props> = observer((props) => {
           <button
             ref={setReferenceElement}
             type="button"
-            className={cn("block h-full w-full outline-none", buttonContainerClassName)}
+            className={cn("clickable block h-full w-full outline-none", buttonContainerClassName)}
             onClick={handleOnClick}
           >
             {button}
@@ -154,7 +158,7 @@ export const ProjectMemberDropdown: React.FC<Props> = observer((props) => {
             ref={setReferenceElement}
             type="button"
             className={cn(
-              "block h-full max-w-full outline-none",
+              "clickable block h-full max-w-full outline-none",
               {
                 "cursor-not-allowed text-custom-text-200": disabled,
                 "cursor-pointer": !disabled,
diff --git a/web/components/dropdowns/member/types.d.ts b/web/components/dropdowns/member/types.d.ts
index 673bea8aa..21e6a534e 100644
--- a/web/components/dropdowns/member/types.d.ts
+++ b/web/components/dropdowns/member/types.d.ts
@@ -5,6 +5,7 @@ export type MemberDropdownProps = TDropdownProps & {
   dropdownArrow?: boolean;
   dropdownArrowClassName?: string;
   placeholder?: string;
+  onClose?: () => void;
 } & (
     | {
         multiple: false;
diff --git a/web/components/dropdowns/member/workspace-member.tsx b/web/components/dropdowns/member/workspace-member.tsx
index 980f344a6..d126b60f7 100644
--- a/web/components/dropdowns/member/workspace-member.tsx
+++ b/web/components/dropdowns/member/workspace-member.tsx
@@ -32,6 +32,7 @@ export const WorkspaceMemberDropdown: React.FC<MemberDropdownProps> = observer((
     hideIcon = false,
     multiple,
     onChange,
+    onClose,
     placeholder = "Members",
     placement,
     showTooltip = false,
@@ -95,8 +96,10 @@ export const WorkspaceMemberDropdown: React.FC<MemberDropdownProps> = observer((
   };
 
   const handleClose = () => {
-    if (isOpen) setIsOpen(false);
+    if (!isOpen) return;
+    setIsOpen(false);
     if (referenceElement) referenceElement.blur();
+    onClose && onClose();
   };
 
   const toggleDropdown = () => {
@@ -134,7 +137,7 @@ export const WorkspaceMemberDropdown: React.FC<MemberDropdownProps> = observer((
           <button
             ref={setReferenceElement}
             type="button"
-            className={cn("block h-full w-full outline-none", buttonContainerClassName)}
+            className={cn("clickable block h-full w-full outline-none", buttonContainerClassName)}
             onClick={handleOnClick}
           >
             {button}
@@ -144,7 +147,7 @@ export const WorkspaceMemberDropdown: React.FC<MemberDropdownProps> = observer((
             ref={setReferenceElement}
             type="button"
             className={cn(
-              "block h-full max-w-full outline-none",
+              "clickable block h-full max-w-full outline-none",
               {
                 "cursor-not-allowed text-custom-text-200": disabled,
                 "cursor-pointer": !disabled,
diff --git a/web/components/dropdowns/module.tsx b/web/components/dropdowns/module.tsx
index e673293e0..a9b64c1f1 100644
--- a/web/components/dropdowns/module.tsx
+++ b/web/components/dropdowns/module.tsx
@@ -24,6 +24,7 @@ type Props = TDropdownProps & {
   dropdownArrowClassName?: string;
   projectId: string;
   showCount?: boolean;
+  onClose?: () => void;
 } & (
     | {
         multiple: false;
@@ -151,6 +152,7 @@ export const ModuleDropdown: React.FC<Props> = observer((props) => {
     hideIcon = false,
     multiple,
     onChange,
+    onClose,
     placeholder = "Module",
     placement,
     projectId,
@@ -226,8 +228,10 @@ export const ModuleDropdown: React.FC<Props> = observer((props) => {
   };
 
   const handleClose = () => {
-    if (isOpen) setIsOpen(false);
+    if (!isOpen) return;
+    setIsOpen(false);
     if (referenceElement) referenceElement.blur();
+    onClose && onClose();
   };
 
   const toggleDropdown = () => {
@@ -271,7 +275,7 @@ export const ModuleDropdown: React.FC<Props> = observer((props) => {
           <button
             ref={setReferenceElement}
             type="button"
-            className={cn("block h-full w-full outline-none", buttonContainerClassName)}
+            className={cn("clickable block h-full w-full outline-none", buttonContainerClassName)}
             onClick={handleOnClick}
           >
             {button}
@@ -281,7 +285,7 @@ export const ModuleDropdown: React.FC<Props> = observer((props) => {
             ref={setReferenceElement}
             type="button"
             className={cn(
-              "block h-full max-w-full outline-none",
+              "clickable block h-full max-w-full outline-none",
               {
                 "cursor-not-allowed text-custom-text-200": disabled,
                 "cursor-pointer": !disabled,
diff --git a/web/components/dropdowns/priority.tsx b/web/components/dropdowns/priority.tsx
index f620e6818..1bab9a21e 100644
--- a/web/components/dropdowns/priority.tsx
+++ b/web/components/dropdowns/priority.tsx
@@ -23,6 +23,7 @@ type Props = TDropdownProps & {
   dropdownArrowClassName?: string;
   highlightUrgent?: boolean;
   onChange: (val: TIssuePriorities) => void;
+  onClose?: () => void;
   value: TIssuePriorities;
 };
 
@@ -260,6 +261,7 @@ export const PriorityDropdown: React.FC<Props> = (props) => {
     hideIcon = false,
     highlightUrgent = true,
     onChange,
+    onClose,
     placement,
     showTooltip = false,
     tabIndex,
@@ -308,8 +310,10 @@ export const PriorityDropdown: React.FC<Props> = (props) => {
   };
 
   const handleClose = () => {
-    if (isOpen) setIsOpen(false);
+    if (!isOpen) return;
+    setIsOpen(false);
     if (referenceElement) referenceElement.blur();
+    onClose && onClose();
   };
 
   const toggleDropdown = () => {
@@ -360,7 +364,7 @@ export const PriorityDropdown: React.FC<Props> = (props) => {
           <button
             ref={setReferenceElement}
             type="button"
-            className={cn("block h-full w-full outline-none", buttonContainerClassName)}
+            className={cn("clickable block h-full w-full outline-none", buttonContainerClassName)}
             onClick={handleOnClick}
           >
             {button}
@@ -370,7 +374,7 @@ export const PriorityDropdown: React.FC<Props> = (props) => {
             ref={setReferenceElement}
             type="button"
             className={cn(
-              "block h-full max-w-full outline-none",
+              "clickable block h-full max-w-full outline-none",
               {
                 "cursor-not-allowed text-custom-text-200": disabled,
                 "cursor-pointer": !disabled,
diff --git a/web/components/dropdowns/project.tsx b/web/components/dropdowns/project.tsx
index 719308a65..7991c4402 100644
--- a/web/components/dropdowns/project.tsx
+++ b/web/components/dropdowns/project.tsx
@@ -22,6 +22,7 @@ type Props = TDropdownProps & {
   dropdownArrow?: boolean;
   dropdownArrowClassName?: string;
   onChange: (val: string) => void;
+  onClose?: () => void;
   value: string | null;
 };
 
@@ -37,6 +38,7 @@ export const ProjectDropdown: React.FC<Props> = observer((props) => {
     dropdownArrowClassName = "",
     hideIcon = false,
     onChange,
+    onClose,
     placeholder = "Project",
     placement,
     showTooltip = false,
@@ -97,7 +99,9 @@ export const ProjectDropdown: React.FC<Props> = observer((props) => {
   };
 
   const handleClose = () => {
-    if (isOpen) setIsOpen(false);
+    if (!isOpen) return;
+    setIsOpen(false);
+    onClose && onClose();
     if (referenceElement) referenceElement.blur();
   };
 
@@ -137,7 +141,7 @@ export const ProjectDropdown: React.FC<Props> = observer((props) => {
           <button
             ref={setReferenceElement}
             type="button"
-            className={cn("block h-full w-full outline-none", buttonContainerClassName)}
+            className={cn("clickable block h-full w-full outline-none", buttonContainerClassName)}
             onClick={handleOnClick}
           >
             {button}
@@ -147,7 +151,7 @@ export const ProjectDropdown: React.FC<Props> = observer((props) => {
             ref={setReferenceElement}
             type="button"
             className={cn(
-              "block h-full max-w-full outline-none",
+              "clickable block h-full max-w-full outline-none",
               {
                 "cursor-not-allowed text-custom-text-200": disabled,
                 "cursor-pointer": !disabled,
diff --git a/web/components/dropdowns/state.tsx b/web/components/dropdowns/state.tsx
index e92dd40a0..a7f54adfb 100644
--- a/web/components/dropdowns/state.tsx
+++ b/web/components/dropdowns/state.tsx
@@ -23,6 +23,7 @@ type Props = TDropdownProps & {
   dropdownArrow?: boolean;
   dropdownArrowClassName?: string;
   onChange: (val: string) => void;
+  onClose?: () => void;
   projectId: string;
   value: string;
 };
@@ -39,6 +40,7 @@ export const StateDropdown: React.FC<Props> = observer((props) => {
     dropdownArrowClassName = "",
     hideIcon = false,
     onChange,
+    onClose,
     placement,
     projectId,
     showTooltip = false,
@@ -94,7 +96,9 @@ export const StateDropdown: React.FC<Props> = observer((props) => {
   };
 
   const handleClose = () => {
-    if (isOpen) setIsOpen(false);
+    if (!isOpen) return;
+    setIsOpen(false);
+    onClose && onClose();
     if (referenceElement) referenceElement.blur();
   };
 
@@ -134,7 +138,7 @@ export const StateDropdown: React.FC<Props> = observer((props) => {
           <button
             ref={setReferenceElement}
             type="button"
-            className={cn("block h-full w-full outline-none", buttonContainerClassName)}
+            className={cn("clickable block h-full w-full outline-none", buttonContainerClassName)}
             onClick={handleOnClick}
           >
             {button}
@@ -144,7 +148,7 @@ export const StateDropdown: React.FC<Props> = observer((props) => {
             ref={setReferenceElement}
             type="button"
             className={cn(
-              "block h-full max-w-full outline-none",
+              "clickable block h-full max-w-full outline-none",
               {
                 "cursor-not-allowed text-custom-text-200": disabled,
                 "cursor-pointer": !disabled,
diff --git a/web/components/issues/issue-layouts/properties/labels.tsx b/web/components/issues/issue-layouts/properties/labels.tsx
index 0f121bed7..7e14ad3da 100644
--- a/web/components/issues/issue-layouts/properties/labels.tsx
+++ b/web/components/issues/issue-layouts/properties/labels.tsx
@@ -4,6 +4,7 @@ import { usePopper } from "react-popper";
 import { Check, ChevronDown, Search, Tags } from "lucide-react";
 // hooks
 import { useApplication, useLabel } from "hooks/store";
+import { useDropdownKeyDown } from "hooks/use-dropdown-key-down";
 // components
 import { Combobox } from "@headlessui/react";
 import { Tooltip } from "@plane/ui";
@@ -25,6 +26,7 @@ export interface IIssuePropertyLabels {
   maxRender?: number;
   noLabelBorder?: boolean;
   placeholderText?: string;
+  onClose?: () => void;
 }
 
 export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((props) => {
@@ -33,6 +35,7 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
     value,
     defaultOptions = [],
     onChange,
+    onClose,
     disabled,
     hideDropdownArrow = false,
     className,
@@ -64,6 +67,12 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
     }
   };
 
+  const handleClose = () => {
+    onClose && onClose();
+  };
+
+  const handleKeyDown = useDropdownKeyDown(openDropDown, handleClose, false);
+
   const { styles, attributes } = usePopper(referenceElement, popperElement, {
     placement: placement ?? "bottom-start",
     modifiers: [
@@ -171,13 +180,14 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
       value={value}
       onChange={onChange}
       disabled={disabled}
+      onKeyDownCapture={handleKeyDown}
       multiple
     >
       <Combobox.Button as={Fragment}>
         <button
           ref={setReferenceElement}
           type="button"
-          className={`flex w-full items-center justify-between gap-1 text-xs ${
+          className={`clickable flex w-full items-center justify-between gap-1 text-xs ${
             disabled
               ? "cursor-not-allowed text-custom-text-200"
               : value.length <= maxRender
@@ -205,7 +215,7 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
               value={query}
               onChange={(e) => setQuery(e.target.value)}
               placeholder="Search"
-              displayValue={(assigned: any) => assigned?.name}
+              displayValue={(assigned: any) => assigned?.name || ""}
             />
           </div>
           <div className={`mt-2 max-h-48 space-y-1 overflow-y-scroll`}>
@@ -216,10 +226,10 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
                 <Combobox.Option
                   key={option.value}
                   value={option.value}
-                  className={({ selected }) =>
+                  className={({ active, selected }) =>
                     `flex cursor-pointer select-none items-center justify-between gap-2 truncate rounded px-1 py-1.5 hover:bg-custom-background-80 ${
-                      selected ? "text-custom-text-100" : "text-custom-text-200"
-                    }`
+                      active ? "bg-custom-background-80" : ""
+                    } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
                   }
                 >
                   {({ selected }) => (
diff --git a/web/components/issues/issue-layouts/spreadsheet/columns/assignee-column.tsx b/web/components/issues/issue-layouts/spreadsheet/columns/assignee-column.tsx
index e63a94b8c..b9450141b 100644
--- a/web/components/issues/issue-layouts/spreadsheet/columns/assignee-column.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/columns/assignee-column.tsx
@@ -7,12 +7,13 @@ import { TIssue } from "@plane/types";
 
 type Props = {
   issue: TIssue;
+  onClose: () => void;
   onChange: (issue: TIssue, data: Partial<TIssue>, updates: any) => void;
   disabled: boolean;
 };
 
 export const SpreadsheetAssigneeColumn: React.FC<Props> = observer((props: Props) => {
-  const { issue, onChange, disabled } = props;
+  const { issue, onChange, disabled, onClose } = props;
 
   return (
     <div className="h-11 border-b-[0.5px] border-custom-border-200">
@@ -37,6 +38,7 @@ export const SpreadsheetAssigneeColumn: React.FC<Props> = observer((props: Props
         }
         buttonClassName="text-left"
         buttonContainerClassName="w-full"
+        onClose={onClose}
       />
     </div>
   );
diff --git a/web/components/issues/issue-layouts/spreadsheet/columns/due-date-column.tsx b/web/components/issues/issue-layouts/spreadsheet/columns/due-date-column.tsx
index 775275ca4..c5674cee9 100644
--- a/web/components/issues/issue-layouts/spreadsheet/columns/due-date-column.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/columns/due-date-column.tsx
@@ -9,12 +9,13 @@ import { TIssue } from "@plane/types";
 
 type Props = {
   issue: TIssue;
+  onClose: () => void;
   onChange: (issue: TIssue, data: Partial<TIssue>, updates: any) => void;
   disabled: boolean;
 };
 
 export const SpreadsheetDueDateColumn: React.FC<Props> = observer((props: Props) => {
-  const { issue, onChange, disabled } = props;
+  const { issue, onChange, disabled, onClose } = props;
 
   return (
     <div className="h-11 border-b-[0.5px] border-custom-border-200">
@@ -36,6 +37,7 @@ export const SpreadsheetDueDateColumn: React.FC<Props> = observer((props: Props)
         buttonVariant="transparent-with-text"
         buttonClassName="rounded-none text-left"
         buttonContainerClassName="w-full"
+        onClose={onClose}
       />
     </div>
   );
diff --git a/web/components/issues/issue-layouts/spreadsheet/columns/estimate-column.tsx b/web/components/issues/issue-layouts/spreadsheet/columns/estimate-column.tsx
index 0c86b24c0..f7a472b49 100644
--- a/web/components/issues/issue-layouts/spreadsheet/columns/estimate-column.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/columns/estimate-column.tsx
@@ -6,12 +6,13 @@ import { TIssue } from "@plane/types";
 
 type Props = {
   issue: TIssue;
+  onClose: () => void;
   onChange: (issue: TIssue, data: Partial<TIssue>, updates: any) => void;
   disabled: boolean;
 };
 
 export const SpreadsheetEstimateColumn: React.FC<Props> = observer((props: Props) => {
-  const { issue, onChange, disabled } = props;
+  const { issue, onChange, disabled, onClose } = props;
 
   return (
     <div className="h-11 border-b-[0.5px] border-custom-border-200">
@@ -25,6 +26,7 @@ export const SpreadsheetEstimateColumn: React.FC<Props> = observer((props: Props
         buttonVariant="transparent-with-text"
         buttonClassName="rounded-none text-left"
         buttonContainerClassName="w-full"
+        onClose={onClose}
       />
     </div>
   );
diff --git a/web/components/issues/issue-layouts/spreadsheet/columns/header-column.tsx b/web/components/issues/issue-layouts/spreadsheet/columns/header-column.tsx
index dc9f8c7c6..73478c6ac 100644
--- a/web/components/issues/issue-layouts/spreadsheet/columns/header-column.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/columns/header-column.tsx
@@ -20,10 +20,11 @@ interface Props {
   property: keyof IIssueDisplayProperties;
   displayFilters: IIssueDisplayFilterOptions;
   handleDisplayFilterUpdate: (data: Partial<IIssueDisplayFilterOptions>) => void;
+  onClose: () => void;
 }
 
-export const SpreadsheetHeaderColumn = (props: Props) => {
-  const { displayFilters, handleDisplayFilterUpdate, property } = props;
+export const HeaderColumn = (props: Props) => {
+  const { displayFilters, handleDisplayFilterUpdate, property, onClose } = props;
 
   const { storedValue: selectedMenuItem, setValue: setSelectedMenuItem } = useLocalStorage(
     "spreadsheetViewSorting",
@@ -44,7 +45,8 @@ export const SpreadsheetHeaderColumn = (props: Props) => {
 
   return (
     <CustomMenu
-      customButtonClassName="!w-full"
+      customButtonClassName="clickable !w-full"
+      customButtonTabIndex={-1}
       className="!w-full"
       customButton={
         <div className="flex w-full cursor-pointer items-center justify-between gap-1.5 py-2 text-sm text-custom-text-200 hover:text-custom-text-100">
@@ -62,6 +64,7 @@ export const SpreadsheetHeaderColumn = (props: Props) => {
           </div>
         </div>
       }
+      onMenuClose={onClose}
       placement="bottom-end"
     >
       <CustomMenu.MenuItem onClick={() => handleOrderBy(propertyDetails.ascendingOrderKey, property)}>
diff --git a/web/components/issues/issue-layouts/spreadsheet/columns/label-column.tsx b/web/components/issues/issue-layouts/spreadsheet/columns/label-column.tsx
index 2812fb1ec..60e429c9f 100644
--- a/web/components/issues/issue-layouts/spreadsheet/columns/label-column.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/columns/label-column.tsx
@@ -9,12 +9,13 @@ import { TIssue } from "@plane/types";
 
 type Props = {
   issue: TIssue;
+  onClose: () => void;
   onChange: (issue: TIssue, data: Partial<TIssue>, updates: any) => void;
   disabled: boolean;
 };
 
 export const SpreadsheetLabelColumn: React.FC<Props> = observer((props: Props) => {
-  const { issue, onChange, disabled } = props;
+  const { issue, onChange, disabled, onClose } = props;
   // hooks
   const { labelMap } = useLabel();
 
@@ -25,13 +26,14 @@ export const SpreadsheetLabelColumn: React.FC<Props> = observer((props: Props) =
       projectId={issue.project_id ?? null}
       value={issue.label_ids}
       defaultOptions={defaultLabelOptions}
-      onChange={(data) => onChange(issue, { label_ids: data },{ changed_property: "labels", change_details: data })}
+      onChange={(data) => onChange(issue, { label_ids: data }, { changed_property: "labels", change_details: data })}
       className="h-11 w-full border-b-[0.5px] border-custom-border-200 hover:bg-custom-background-80"
       buttonClassName="px-2.5 h-full"
       hideDropdownArrow
       maxRender={1}
       disabled={disabled}
       placeholderText="Select labels"
+      onClose={onClose}
     />
   );
 });
diff --git a/web/components/issues/issue-layouts/spreadsheet/columns/priority-column.tsx b/web/components/issues/issue-layouts/spreadsheet/columns/priority-column.tsx
index 1961b8717..b8801559c 100644
--- a/web/components/issues/issue-layouts/spreadsheet/columns/priority-column.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/columns/priority-column.tsx
@@ -7,22 +7,24 @@ import { TIssue } from "@plane/types";
 
 type Props = {
   issue: TIssue;
+  onClose: () => void;
   onChange: (issue: TIssue, data: Partial<TIssue>,updates:any) => void;
   disabled: boolean;
 };
 
 export const SpreadsheetPriorityColumn: React.FC<Props> = observer((props: Props) => {
-  const { issue, onChange, disabled } = props;
+  const { issue, onChange, disabled, onClose } = props;
 
   return (
     <div className="h-11 border-b-[0.5px] border-custom-border-200">
       <PriorityDropdown
         value={issue.priority}
-        onChange={(data) => onChange(issue, { priority: data },{changed_property:"priority",change_details:data})}
+        onChange={(data) => onChange(issue, { priority: data }, { changed_property: "priority", change_details: data })}
         disabled={disabled}
         buttonVariant="transparent-with-text"
         buttonClassName="rounded-none text-left"
         buttonContainerClassName="w-full"
+        onClose={onClose}
       />
     </div>
   );
diff --git a/web/components/issues/issue-layouts/spreadsheet/columns/start-date-column.tsx b/web/components/issues/issue-layouts/spreadsheet/columns/start-date-column.tsx
index 076464f27..fcbd817b6 100644
--- a/web/components/issues/issue-layouts/spreadsheet/columns/start-date-column.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/columns/start-date-column.tsx
@@ -9,12 +9,13 @@ import { TIssue } from "@plane/types";
 
 type Props = {
   issue: TIssue;
+  onClose: () => void;
   onChange: (issue: TIssue, data: Partial<TIssue>, updates: any) => void;
   disabled: boolean;
 };
 
 export const SpreadsheetStartDateColumn: React.FC<Props> = observer((props: Props) => {
-  const { issue, onChange, disabled } = props;
+  const { issue, onChange, disabled, onClose } = props;
 
   return (
     <div className="h-11 border-b-[0.5px] border-custom-border-200">
@@ -36,6 +37,7 @@ export const SpreadsheetStartDateColumn: React.FC<Props> = observer((props: Prop
         buttonVariant="transparent-with-text"
         buttonClassName="rounded-none text-left"
         buttonContainerClassName="w-full"
+        onClose={onClose}
       />
     </div>
   );
diff --git a/web/components/issues/issue-layouts/spreadsheet/columns/state-column.tsx b/web/components/issues/issue-layouts/spreadsheet/columns/state-column.tsx
index 83a7c8d0f..1a029db12 100644
--- a/web/components/issues/issue-layouts/spreadsheet/columns/state-column.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/columns/state-column.tsx
@@ -7,12 +7,13 @@ import { TIssue } from "@plane/types";
 
 type Props = {
   issue: TIssue;
+  onClose: () => void;
   onChange: (issue: TIssue, data: Partial<TIssue>, updates: any) => void;
   disabled: boolean;
 };
 
 export const SpreadsheetStateColumn: React.FC<Props> = observer((props) => {
-  const { issue, onChange, disabled } = props;
+  const { issue, onChange, disabled, onClose } = props;
 
   return (
     <div className="h-11 border-b-[0.5px] border-custom-border-200">
@@ -24,6 +25,7 @@ export const SpreadsheetStateColumn: React.FC<Props> = observer((props) => {
         buttonVariant="transparent-with-text"
         buttonClassName="rounded-none text-left"
         buttonContainerClassName="w-full"
+        onClose={onClose}
       />
     </div>
   );
diff --git a/web/components/issues/issue-layouts/spreadsheet/issue-column.tsx b/web/components/issues/issue-layouts/spreadsheet/issue-column.tsx
new file mode 100644
index 000000000..5d2e62fa5
--- /dev/null
+++ b/web/components/issues/issue-layouts/spreadsheet/issue-column.tsx
@@ -0,0 +1,68 @@
+import { useRef } from "react";
+import { useRouter } from "next/router";
+// types
+import { IIssueDisplayProperties, TIssue } from "@plane/types";
+import { EIssueActions } from "../types";
+// constants
+import { SPREADSHEET_PROPERTY_DETAILS } from "constants/spreadsheet";
+// components
+import { WithDisplayPropertiesHOC } from "../properties/with-display-properties-HOC";
+import { useEventTracker } from "hooks/store";
+import { observer } from "mobx-react";
+
+type Props = {
+  displayProperties: IIssueDisplayProperties;
+  issueDetail: TIssue;
+  disableUserActions: boolean;
+  property: keyof IIssueDisplayProperties;
+  handleIssues: (issue: TIssue, action: EIssueActions) => Promise<void>;
+  isEstimateEnabled: boolean;
+};
+
+export const IssueColumn = observer((props: Props) => {
+  const { displayProperties, issueDetail, disableUserActions, property, handleIssues, isEstimateEnabled } = props;
+  // router
+  const router = useRouter();
+  const tableCellRef = useRef<HTMLTableCellElement | null>(null);
+  const { captureIssueEvent } = useEventTracker();
+
+  const shouldRenderProperty = property === "estimate" ? isEstimateEnabled : true;
+
+  const { Column } = SPREADSHEET_PROPERTY_DETAILS[property];
+
+  return (
+    <WithDisplayPropertiesHOC
+      displayProperties={displayProperties}
+      displayPropertyKey={property}
+      shouldRenderProperty={shouldRenderProperty}
+    >
+      <td
+        tabIndex={0}
+        className="h-11 w-full min-w-[8rem] bg-custom-background-100 text-sm after:absolute after:w-full after:bottom-[-1px] after:border after:border-custom-border-100 border-r-[1px] border-custom-border-100 focus:border-custom-primary-70"
+        ref={tableCellRef}
+      >
+        <Column
+          issue={issueDetail}
+          onChange={(issue: TIssue, data: Partial<TIssue>, updates: any) =>
+            handleIssues({ ...issue, ...data }, EIssueActions.UPDATE).then(() => {
+              captureIssueEvent({
+                eventName: "Issue updated",
+                payload: {
+                  ...issue,
+                  ...data,
+                  element: "Spreadsheet layout",
+                },
+                updates: updates,
+                path: router.asPath,
+              });
+            })
+          }
+          disabled={disableUserActions}
+          onClose={() => {
+            tableCellRef?.current?.focus();
+          }}
+        />
+      </td>
+    </WithDisplayPropertiesHOC>
+  );
+});
diff --git a/web/components/issues/issue-layouts/spreadsheet/issue-row.tsx b/web/components/issues/issue-layouts/spreadsheet/issue-row.tsx
index 40ee85df7..2a97045fe 100644
--- a/web/components/issues/issue-layouts/spreadsheet/issue-row.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/issue-row.tsx
@@ -4,14 +4,15 @@ import { observer } from "mobx-react-lite";
 // icons
 import { ChevronRight, MoreHorizontal } from "lucide-react";
 // constants
-import { SPREADSHEET_PROPERTY_DETAILS, SPREADSHEET_PROPERTY_LIST } from "constants/spreadsheet";
+import { SPREADSHEET_PROPERTY_LIST } from "constants/spreadsheet";
 // components
 import { WithDisplayPropertiesHOC } from "../properties/with-display-properties-HOC";
+import { IssueColumn } from "./issue-column";
 // ui
 import { ControlLink, Tooltip } from "@plane/ui";
 // hooks
 import useOutsideClickDetector from "hooks/use-outside-click-detector";
-import { useEventTracker, useIssueDetail, useProject } from "hooks/store";
+import { useIssueDetail, useProject } from "hooks/store";
 // helper
 import { cn } from "helpers/common.helper";
 // types
@@ -51,7 +52,6 @@ export const SpreadsheetIssueRow = observer((props: Props) => {
   //hooks
   const { getProjectById } = useProject();
   const { peekIssue, setPeekIssue } = useIssueDetail();
-  const { captureIssueEvent } = useEventTracker();
   // states
   const [isMenuActive, setIsMenuActive] = useState(false);
   const [isExpanded, setExpanded] = useState<boolean>(false);
@@ -106,11 +106,12 @@ export const SpreadsheetIssueRow = observer((props: Props) => {
         {/* first column/ issue name and key column */}
         <td
           className={cn(
-            "sticky group left-0 h-11  w-[28rem] flex items-center bg-custom-background-100 text-sm after:absolute border-r-[0.5px] border-custom-border-200",
+            "sticky group left-0 h-11  w-[28rem] flex items-center bg-custom-background-100 text-sm after:absolute border-r-[0.5px] border-custom-border-200 focus:border-custom-primary-70",
             {
               "border-b-[0.5px]": peekIssue?.issueId !== issueDetail.id,
             }
           )}
+          tabIndex={0}
         >
           <WithDisplayPropertiesHOC displayProperties={displayProperties} displayPropertyKey="key">
             <div
@@ -149,11 +150,14 @@ export const SpreadsheetIssueRow = observer((props: Props) => {
             href={`/${workspaceSlug}/projects/${issueDetail.project_id}/issues/${issueId}`}
             target="_blank"
             onClick={() => handleIssuePeekOverview(issueDetail)}
-            className="w-full line-clamp-1 cursor-pointer text-sm text-custom-text-100"
+            className="clickable w-full line-clamp-1 cursor-pointer text-sm text-custom-text-100"
           >
             <div className="w-full overflow-hidden">
               <Tooltip tooltipHeading="Title" tooltipContent={issueDetail.name}>
-                <div className="h-full w-full cursor-pointer truncate px-4 py-2.5 text-left text-[0.825rem] text-custom-text-100">
+                <div
+                  className="h-full w-full cursor-pointer truncate px-4 py-2.5 text-left text-[0.825rem] text-custom-text-100"
+                  tabIndex={-1}
+                >
                   {issueDetail.name}
                 </div>
               </Tooltip>
@@ -161,40 +165,16 @@ export const SpreadsheetIssueRow = observer((props: Props) => {
           </ControlLink>
         </td>
         {/* Rest of the columns */}
-        {SPREADSHEET_PROPERTY_LIST.map((property) => {
-          const { Column } = SPREADSHEET_PROPERTY_DETAILS[property];
-
-          const shouldRenderProperty = property === "estimate" ? isEstimateEnabled : true;
-
-          return (
-            <WithDisplayPropertiesHOC
-              displayProperties={displayProperties}
-              displayPropertyKey={property}
-              shouldRenderProperty={shouldRenderProperty}
-            >
-              <td className="h-11 w-full min-w-[8rem] bg-custom-background-100 text-sm after:absolute after:w-full after:bottom-[-1px] after:border after:border-custom-border-100 border-r-[1px] border-custom-border-100">
-                <Column
-                  issue={issueDetail}
-                  onChange={(issue: TIssue, data: Partial<TIssue>, updates: any) =>
-                    handleIssues({ ...issue, ...data }, EIssueActions.UPDATE).then(() => {
-                      captureIssueEvent({
-                        eventName: "Issue updated",
-                        payload: {
-                          ...issue,
-                          ...data,
-                          element: "Spreadsheet layout",
-                        },
-                        updates: updates,
-                        path: router.asPath,
-                      });
-                    })
-                  }
-                  disabled={disableUserActions}
-                />
-              </td>
-            </WithDisplayPropertiesHOC>
-          );
-        })}
+        {SPREADSHEET_PROPERTY_LIST.map((property) => (
+          <IssueColumn
+            displayProperties={displayProperties}
+            issueDetail={issueDetail}
+            disableUserActions={disableUserActions}
+            property={property}
+            handleIssues={handleIssues}
+            isEstimateEnabled={isEstimateEnabled}
+          />
+        ))}
       </tr>
 
       {isExpanded &&
diff --git a/web/components/issues/issue-layouts/spreadsheet/spreadsheet-header-column.tsx b/web/components/issues/issue-layouts/spreadsheet/spreadsheet-header-column.tsx
new file mode 100644
index 000000000..588c7be9e
--- /dev/null
+++ b/web/components/issues/issue-layouts/spreadsheet/spreadsheet-header-column.tsx
@@ -0,0 +1,46 @@
+import { useRef } from "react";
+//types
+import { IIssueDisplayFilterOptions, IIssueDisplayProperties } from "@plane/types";
+//components
+import { WithDisplayPropertiesHOC } from "../properties/with-display-properties-HOC";
+import { HeaderColumn } from "./columns/header-column";
+import { observer } from "mobx-react";
+
+interface Props {
+  displayProperties: IIssueDisplayProperties;
+  property: keyof IIssueDisplayProperties;
+  isEstimateEnabled: boolean;
+  displayFilters: IIssueDisplayFilterOptions;
+  handleDisplayFilterUpdate: (data: Partial<IIssueDisplayFilterOptions>) => void;
+}
+export const SpreadsheetHeaderColumn = observer((props: Props) => {
+  const { displayProperties, displayFilters, property, isEstimateEnabled, handleDisplayFilterUpdate } = props;
+
+  //hooks
+  const tableHeaderCellRef = useRef<HTMLTableCellElement | null>(null);
+
+  const shouldRenderProperty = property === "estimate" ? isEstimateEnabled : true;
+
+  return (
+    <WithDisplayPropertiesHOC
+      displayProperties={displayProperties}
+      displayPropertyKey={property}
+      shouldRenderProperty={shouldRenderProperty}
+    >
+      <th
+        className="h-11 w-full min-w-[8rem] items-center bg-custom-background-90 text-sm font-medium px-4 py-1 border border-b-0 border-t-0 border-custom-border-100 focus:border-custom-primary-70"
+        ref={tableHeaderCellRef}
+        tabIndex={0}
+      >
+        <HeaderColumn
+          displayFilters={displayFilters}
+          handleDisplayFilterUpdate={handleDisplayFilterUpdate}
+          property={property}
+          onClose={() => {
+            tableHeaderCellRef?.current?.focus();
+          }}
+        />
+      </th>
+    </WithDisplayPropertiesHOC>
+  );
+});
diff --git a/web/components/issues/issue-layouts/spreadsheet/spreadsheet-header.tsx b/web/components/issues/issue-layouts/spreadsheet/spreadsheet-header.tsx
index 704c9f904..64d1ec0e1 100644
--- a/web/components/issues/issue-layouts/spreadsheet/spreadsheet-header.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/spreadsheet-header.tsx
@@ -6,8 +6,7 @@ import { IIssueDisplayFilterOptions, IIssueDisplayProperties } from "@plane/type
 import { SPREADSHEET_PROPERTY_LIST } from "constants/spreadsheet";
 // components
 import { WithDisplayPropertiesHOC } from "../properties/with-display-properties-HOC";
-import { SpreadsheetHeaderColumn } from "./columns/header-column";
-
+import { SpreadsheetHeaderColumn } from "./spreadsheet-header-column";
 
 interface Props {
   displayProperties: IIssueDisplayProperties;
@@ -22,7 +21,10 @@ export const SpreadsheetHeader = (props: Props) => {
   return (
     <thead className="sticky top-0 left-0 z-[1] border-b-[0.5px] border-custom-border-100">
       <tr>
-        <th className="sticky left-0 z-[1] h-11 w-[28rem] flex items-center bg-custom-background-90 text-sm font-medium before:absolute before:h-full before:right-0 before:border-[0.5px]  before:border-custom-border-100">
+        <th
+          className="sticky left-0 z-[1] h-11 w-[28rem] flex items-center bg-custom-background-90 text-sm font-medium before:absolute before:h-full before:right-0 before:border-[0.5px]  before:border-custom-border-100"
+          tabIndex={-1}
+        >
           <WithDisplayPropertiesHOC displayProperties={displayProperties} displayPropertyKey="key">
             <span className="flex h-full w-24 flex-shrink-0 items-center px-4 py-2.5">
               <span className="mr-1.5 text-custom-text-400">#</span>ID
@@ -34,25 +36,15 @@ export const SpreadsheetHeader = (props: Props) => {
           </span>
         </th>
 
-        {SPREADSHEET_PROPERTY_LIST.map((property) => {
-          const shouldRenderProperty = property === "estimate" ? isEstimateEnabled : true;
-
-          return (
-            <WithDisplayPropertiesHOC
-              displayProperties={displayProperties}
-              displayPropertyKey={property}
-              shouldRenderProperty={shouldRenderProperty}
-            >
-              <th className="h-11 w-full min-w-[8rem] items-center bg-custom-background-90 text-sm font-medium px-4 py-1 border border-b-0 border-t-0 border-custom-border-100">
-                <SpreadsheetHeaderColumn
-                  displayFilters={displayFilters}
-                  handleDisplayFilterUpdate={handleDisplayFilterUpdate}
-                  property={property}
-                />
-              </th>
-            </WithDisplayPropertiesHOC>
-          );
-        })}
+        {SPREADSHEET_PROPERTY_LIST.map((property) => (
+          <SpreadsheetHeaderColumn
+            property={property}
+            displayProperties={displayProperties}
+            displayFilters={displayFilters}
+            handleDisplayFilterUpdate={handleDisplayFilterUpdate}
+            isEstimateEnabled={isEstimateEnabled}
+          />
+        ))}
       </tr>
     </thead>
   );
diff --git a/web/components/issues/issue-layouts/spreadsheet/spreadsheet-table.tsx b/web/components/issues/issue-layouts/spreadsheet/spreadsheet-table.tsx
index 369e6633c..e63b01dfb 100644
--- a/web/components/issues/issue-layouts/spreadsheet/spreadsheet-table.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/spreadsheet-table.tsx
@@ -5,6 +5,7 @@ import { EIssueActions } from "../types";
 //components
 import { SpreadsheetIssueRow } from "./issue-row";
 import { SpreadsheetHeader } from "./spreadsheet-header";
+import { useTableKeyboardNavigation } from "hooks/use-table-keyboard-navigation";
 
 type Props = {
   displayProperties: IIssueDisplayProperties;
@@ -35,8 +36,10 @@ export const SpreadsheetTable = observer((props: Props) => {
     canEditProperties,
   } = props;
 
+  const handleKeyBoardNavigation = useTableKeyboardNavigation();
+
   return (
-    <table className="overflow-y-auto">
+    <table className="overflow-y-auto" onKeyDown={handleKeyBoardNavigation}>
       <SpreadsheetHeader
         displayProperties={displayProperties}
         displayFilters={displayFilters}
diff --git a/web/constants/spreadsheet.ts b/web/constants/spreadsheet.ts
index 1668f2a1c..1a0097eb8 100644
--- a/web/constants/spreadsheet.ts
+++ b/web/constants/spreadsheet.ts
@@ -28,6 +28,7 @@ export const SPREADSHEET_PROPERTY_DETAILS: {
     icon: FC<ISvgIcons>;
     Column: React.FC<{
       issue: TIssue;
+      onClose: () => void;
       onChange: (issue: TIssue, data: Partial<TIssue>, updates: any) => void;
       disabled: boolean;
     }>;
diff --git a/web/hooks/use-dropdown-key-down.tsx b/web/hooks/use-dropdown-key-down.tsx
index 99511b0fc..228e35575 100644
--- a/web/hooks/use-dropdown-key-down.tsx
+++ b/web/hooks/use-dropdown-key-down.tsx
@@ -1,23 +1,31 @@
 import { useCallback } from "react";
 
 type TUseDropdownKeyDown = {
-  (onEnterKeyDown: () => void, onEscKeyDown: () => void): (event: React.KeyboardEvent<HTMLElement>) => void;
+  (onEnterKeyDown: () => void, onEscKeyDown: () => void, stopPropagation?: boolean): (
+    event: React.KeyboardEvent<HTMLElement>
+  ) => void;
 };
 
-export const useDropdownKeyDown: TUseDropdownKeyDown = (onEnterKeyDown, onEscKeyDown) => {
+export const useDropdownKeyDown: TUseDropdownKeyDown = (onEnterKeyDown, onEscKeyDown, stopPropagation = true) => {
+  const stopEventPropagation = (event: React.KeyboardEvent<HTMLElement>) => {
+    if (stopPropagation) {
+      event.stopPropagation();
+      event.preventDefault();
+    }
+  };
+
   const handleKeyDown = useCallback(
     (event: React.KeyboardEvent<HTMLElement>) => {
       if (event.key === "Enter") {
-        event.stopPropagation();
-        event.preventDefault();
+        stopEventPropagation(event);
+
         onEnterKeyDown();
       } else if (event.key === "Escape") {
-        event.stopPropagation();
-        event.preventDefault();
+        stopEventPropagation(event);
         onEscKeyDown();
       }
     },
-    [onEnterKeyDown, onEscKeyDown]
+    [onEnterKeyDown, onEscKeyDown, stopEventPropagation]
   );
 
   return handleKeyDown;
diff --git a/web/hooks/use-table-keyboard-navigation.tsx b/web/hooks/use-table-keyboard-navigation.tsx
new file mode 100644
index 000000000..0d1c26f3c
--- /dev/null
+++ b/web/hooks/use-table-keyboard-navigation.tsx
@@ -0,0 +1,56 @@
+export const useTableKeyboardNavigation = () => {
+  const getPreviousRow = (element: HTMLElement) => {
+    const previousRow = element.closest("tr")?.previousSibling;
+
+    if (previousRow) return previousRow;
+    //if previous row does not exist in the parent check the row with the header of the table
+    return element.closest("tbody")?.previousSibling?.childNodes?.[0];
+  };
+
+  const getNextRow = (element: HTMLElement) => {
+    const nextRow = element.closest("tr")?.nextSibling;
+
+    if (nextRow) return nextRow;
+    //if next row does not exist in the parent check the row with the body of the table
+    return element.closest("thead")?.nextSibling?.childNodes?.[0];
+  };
+
+  const handleKeyBoardNavigation = function (e: React.KeyboardEvent<HTMLTableElement>) {
+    const element = e.target as HTMLElement;
+
+    if (!(element?.tagName === "TD" || element?.tagName === "TH")) return;
+
+    let c: HTMLElement | null = null;
+    if (e.key == "ArrowRight") {
+      // Right Arrow
+      c = element.nextSibling as HTMLElement;
+    } else if (e.key == "ArrowLeft") {
+      // Left Arrow
+      c = element.previousSibling as HTMLElement;
+    } else if (e.key == "ArrowUp") {
+      // Up Arrow
+      const index = Array.prototype.indexOf.call(element?.parentNode?.childNodes || [], element);
+      const prevRow = getPreviousRow(element);
+
+      c = prevRow?.childNodes?.[index] as HTMLElement;
+    } else if (e.key == "ArrowDown") {
+      // Down Arrow
+      const index = Array.prototype.indexOf.call(element?.parentNode?.childNodes || [], element);
+      const nextRow = getNextRow(element);
+
+      c = nextRow?.childNodes[index] as HTMLElement;
+    } else if (e.key == "Enter" || e.key == "Space") {
+      e.preventDefault();
+      (element?.querySelector(".clickable") as HTMLElement)?.click();
+      return;
+    }
+
+    if (!c) return;
+
+    e.preventDefault();
+    c?.focus();
+    c?.scrollIntoView({ behavior: "smooth", block: "center", inline: "end" });
+  };
+
+  return handleKeyBoardNavigation;
+};

From 1a7b5d72226e29f0084396c1008d23cd8fc5e09c Mon Sep 17 00:00:00 2001
From: Manish Gupta <59428681+mguptahub@users.noreply.github.com>
Date: Thu, 8 Feb 2024 12:26:55 +0530
Subject: [PATCH 30/58] build fix (#3594)

---
 .github/workflows/build-branch.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/build-branch.yml b/.github/workflows/build-branch.yml
index c43305fc0..603f08e94 100644
--- a/.github/workflows/build-branch.yml
+++ b/.github/workflows/build-branch.yml
@@ -37,7 +37,7 @@ jobs:
             echo "BUILDX_DRIVER=docker-container" >> $GITHUB_OUTPUT
             echo "BUILDX_VERSION=latest" >> $GITHUB_OUTPUT
             echo "BUILDX_PLATFORMS=linux/amd64" >> $GITHUB_OUTPUT
-            echo "BUILDX_ENDPOINT=local" >> $GITHUB_OUTPUT
+            echo "BUILDX_ENDPOINT=" >> $GITHUB_OUTPUT
           fi
           echo "TARGET_BRANCH=${{ env.TARGET_BRANCH }}" >> $GITHUB_OUTPUT
 

From c1c0297b6d2ae6562d948c3da08c2904702cd459 Mon Sep 17 00:00:00 2001
From: guru_sainath <gurusainath007@gmail.com>
Date: Thu, 8 Feb 2024 13:08:19 +0530
Subject: [PATCH 31/58] fix: handled issue create modal submission on clicking
 enter key (#3593)

---
 web/components/issues/issue-modal/form.tsx | 10 ++--------
 1 file changed, 2 insertions(+), 8 deletions(-)

diff --git a/web/components/issues/issue-modal/form.tsx b/web/components/issues/issue-modal/form.tsx
index 430aa4920..544ebeb15 100644
--- a/web/components/issues/issue-modal/form.tsx
+++ b/web/components/issues/issue-modal/form.tsx
@@ -250,7 +250,7 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
           }}
         />
       )}
-      <form>
+      <form onSubmit={handleSubmit((data) => handleFormSubmit(data))}>
         <div className="space-y-5">
           <div className="flex items-center gap-x-2">
             {/* Don't show project selection if editing an issue */}
@@ -699,13 +699,7 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
               </Fragment>
             )}
 
-            <Button
-              variant="primary"
-              size="sm"
-              loading={isSubmitting}
-              tabIndex={isDraft ? 19 : 18}
-              onClick={handleSubmit((data) => handleFormSubmit(data))}
-            >
+            <Button variant="primary" type="submit" size="sm" loading={isSubmitting} tabIndex={isDraft ? 19 : 18}>
               {data?.id ? (isSubmitting ? "Updating" : "Update issue") : isSubmitting ? "Creating" : "Create issue"}
             </Button>
           </div>

From 9545dc77d6173059390da8bf842a2de43fea2676 Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com>
Date: Thu, 8 Feb 2024 13:30:16 +0530
Subject: [PATCH 32/58] fix: cycle and module reordering in the gantt chart
 (#3570)

* fix: cycle and module reordering in the gantt chart

* chore: hide duration from sidebar if no dates are assigned

* chore: updated date helper functions to accept undefined params

* chore: update cycle sidebar condition
---
 .../cycles/active-cycle-details.tsx           |  2 +-
 web/components/cycles/cycles-board-card.tsx   |  2 +-
 web/components/cycles/cycles-list-item.tsx    |  2 +-
 .../cycles/gantt-chart/cycles-list-layout.tsx | 44 ++--------
 web/components/cycles/sidebar.tsx             |  5 +-
 .../widgets/issue-panels/issue-list-item.tsx  |  4 +-
 .../gantt-chart/helpers/block-structure.tsx   |  3 +-
 .../gantt-chart/sidebar/cycle-sidebar.tsx     | 10 ++-
 .../gantt-chart/sidebar/module-sidebar.tsx    | 10 ++-
 .../sidebar/project-view-sidebar.tsx          | 10 ++-
 .../gantt-chart/sidebar/sidebar.tsx           | 13 ++-
 web/components/issues/index.ts                |  1 -
 .../issues/view-select/due-date.tsx           | 81 -------------------
 .../issues/view-select/estimate.tsx           | 64 ---------------
 web/components/issues/view-select/index.ts    |  3 -
 .../issues/view-select/start-date.tsx         | 72 -----------------
 .../gantt-chart/modules-list-layout.tsx       | 42 +++++-----
 web/helpers/date-time.helper.ts               | 15 ++--
 web/store/cycle.store.ts                      | 12 +--
 web/store/module.store.ts                     |  4 +-
 20 files changed, 75 insertions(+), 324 deletions(-)
 delete mode 100644 web/components/issues/view-select/due-date.tsx
 delete mode 100644 web/components/issues/view-select/estimate.tsx
 delete mode 100644 web/components/issues/view-select/index.ts
 delete mode 100644 web/components/issues/view-select/start-date.tsx

diff --git a/web/components/cycles/active-cycle-details.tsx b/web/components/cycles/active-cycle-details.tsx
index a0101b1c1..2fa79ec3a 100644
--- a/web/components/cycles/active-cycle-details.tsx
+++ b/web/components/cycles/active-cycle-details.tsx
@@ -150,7 +150,7 @@ export const ActiveCycleDetails: React.FC<IActiveCycleDetails> = observer((props
     color: group.color,
   }));
 
-  const daysLeft = findHowManyDaysLeft(activeCycle.end_date ?? new Date());
+  const daysLeft = findHowManyDaysLeft(activeCycle.end_date) ?? 0;
 
   return (
     <div className="grid-row-2 grid divide-y rounded-[10px] border border-custom-border-200 bg-custom-background-100 shadow">
diff --git a/web/components/cycles/cycles-board-card.tsx b/web/components/cycles/cycles-board-card.tsx
index 8da2be9ec..bad7df0e5 100644
--- a/web/components/cycles/cycles-board-card.tsx
+++ b/web/components/cycles/cycles-board-card.tsx
@@ -137,7 +137,7 @@ export const CyclesBoardCard: FC<ICyclesBoardCard> = (props) => {
     });
   };
 
-  const daysLeft = findHowManyDaysLeft(cycleDetails.end_date ?? new Date());
+  const daysLeft = findHowManyDaysLeft(cycleDetails.end_date) ?? 0;
 
   return (
     <div>
diff --git a/web/components/cycles/cycles-list-item.tsx b/web/components/cycles/cycles-list-item.tsx
index a6d467091..725480241 100644
--- a/web/components/cycles/cycles-list-item.tsx
+++ b/web/components/cycles/cycles-list-item.tsx
@@ -140,7 +140,7 @@ export const CyclesListItem: FC<TCyclesListItem> = (props) => {
 
   const currentCycle = CYCLE_STATUS.find((status) => status.value === cycleStatus);
 
-  const daysLeft = findHowManyDaysLeft(cycleDetails.end_date ?? new Date());
+  const daysLeft = findHowManyDaysLeft(cycleDetails.end_date) ?? 0;
 
   return (
     <>
diff --git a/web/components/cycles/gantt-chart/cycles-list-layout.tsx b/web/components/cycles/gantt-chart/cycles-list-layout.tsx
index 26d04e103..797fc9e39 100644
--- a/web/components/cycles/gantt-chart/cycles-list-layout.tsx
+++ b/web/components/cycles/gantt-chart/cycles-list-layout.tsx
@@ -1,11 +1,8 @@
 import { FC } from "react";
 import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
-import { KeyedMutator } from "swr";
 // hooks
 import { useCycle, useUser } from "hooks/store";
-// services
-import { CycleService } from "services/cycle.service";
 // components
 import { GanttChartRoot, IBlockUpdateData, CycleGanttSidebar } from "components/gantt-chart";
 import { CycleGanttBlock } from "components/cycles";
@@ -17,14 +14,10 @@ import { EUserProjectRoles } from "constants/project";
 type Props = {
   workspaceSlug: string;
   cycleIds: string[];
-  mutateCycles?: KeyedMutator<ICycle[]>;
 };
 
-// services
-const cycleService = new CycleService();
-
 export const CyclesListGanttChartView: FC<Props> = observer((props) => {
-  const { cycleIds, mutateCycles } = props;
+  const { cycleIds } = props;
   // router
   const router = useRouter();
   const { workspaceSlug } = router.query;
@@ -32,38 +25,15 @@ export const CyclesListGanttChartView: FC<Props> = observer((props) => {
   const {
     membership: { currentProjectRole },
   } = useUser();
-  const { getCycleById } = useCycle();
+  const { getCycleById, updateCycleDetails } = useCycle();
 
-  const handleCycleUpdate = (cycle: ICycle, payload: IBlockUpdateData) => {
-    if (!workspaceSlug) return;
-    mutateCycles &&
-      mutateCycles((prevData: any) => {
-        if (!prevData) return prevData;
+  const handleCycleUpdate = async (cycle: ICycle, data: IBlockUpdateData) => {
+    if (!workspaceSlug || !cycle) return;
 
-        const newList = prevData.map((p: any) => ({
-          ...p,
-          ...(p.id === cycle.id
-            ? {
-                start_date: payload.start_date ? payload.start_date : p.start_date,
-                target_date: payload.target_date ? payload.target_date : p.end_date,
-                sort_order: payload.sort_order ? payload.sort_order.newSortOrder : p.sort_order,
-              }
-            : {}),
-        }));
+    const payload: any = { ...data };
+    if (data.sort_order) payload.sort_order = data.sort_order.newSortOrder;
 
-        if (payload.sort_order) {
-          const removedElement = newList.splice(payload.sort_order.sourceIndex, 1)[0];
-          newList.splice(payload.sort_order.destinationIndex, 0, removedElement);
-        }
-
-        return newList;
-      }, false);
-
-    const newPayload: any = { ...payload };
-
-    if (newPayload.sort_order && payload.sort_order) newPayload.sort_order = payload.sort_order.newSortOrder;
-
-    cycleService.patchCycle(workspaceSlug.toString(), cycle.project, cycle.id, newPayload);
+    await updateCycleDetails(workspaceSlug.toString(), cycle.project, cycle.id, payload);
   };
 
   const blockFormat = (blocks: (ICycle | null)[]) => {
diff --git a/web/components/cycles/sidebar.tsx b/web/components/cycles/sidebar.tsx
index c61679304..299c71008 100644
--- a/web/components/cycles/sidebar.tsx
+++ b/web/components/cycles/sidebar.tsx
@@ -318,6 +318,7 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
 
   const issueCount =
     cycleDetails.total_issues === 0 ? "0 Issue" : `${cycleDetails.completed_issues}/${cycleDetails.total_issues}`;
+  const daysLeft = findHowManyDaysLeft(cycleDetails.end_date);
 
   const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserWorkspaceRoles.MEMBER;
 
@@ -375,8 +376,8 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
                   backgroundColor: `${currentCycle.color}20`,
                 }}
               >
-                {currentCycle.value === "current"
-                  ? `${findHowManyDaysLeft(cycleDetails.end_date ?? new Date())} ${currentCycle.label}`
+                {currentCycle.value === "current" && daysLeft !== undefined
+                  ? `${daysLeft} ${currentCycle.label}`
                   : `${currentCycle.label}`}
               </span>
             )}
diff --git a/web/components/dashboard/widgets/issue-panels/issue-list-item.tsx b/web/components/dashboard/widgets/issue-panels/issue-list-item.tsx
index 3da862d91..fe003e167 100644
--- a/web/components/dashboard/widgets/issue-panels/issue-list-item.tsx
+++ b/web/components/dashboard/widgets/issue-panels/issue-list-item.tsx
@@ -83,7 +83,7 @@ export const AssignedOverdueIssueListItem: React.FC<IssueListItemProps> = observ
   const blockedByIssueProjectDetails =
     blockedByIssues.length === 1 ? getProjectById(blockedByIssues[0]?.project_id ?? "") : null;
 
-  const dueBy = findTotalDaysInRange(new Date(issueDetails.target_date ?? ""), new Date(), false);
+  const dueBy = findTotalDaysInRange(new Date(issueDetails.target_date ?? ""), new Date(), false) ?? 0;
 
   return (
     <ControlLink
@@ -212,7 +212,7 @@ export const CreatedOverdueIssueListItem: React.FC<IssueListItemProps> = observe
 
   const projectDetails = getProjectById(issue.project_id);
 
-  const dueBy = findTotalDaysInRange(new Date(issue.target_date ?? ""), new Date(), false);
+  const dueBy = findTotalDaysInRange(new Date(issue.target_date ?? ""), new Date(), false) ?? 0;
 
   return (
     <ControlLink
diff --git a/web/components/gantt-chart/helpers/block-structure.tsx b/web/components/gantt-chart/helpers/block-structure.tsx
index a7071ba28..0f18b43cc 100644
--- a/web/components/gantt-chart/helpers/block-structure.tsx
+++ b/web/components/gantt-chart/helpers/block-structure.tsx
@@ -3,8 +3,7 @@ import { TIssue } from "@plane/types";
 import { IGanttBlock } from "components/gantt-chart";
 
 export const renderIssueBlocksStructure = (blocks: TIssue[]): IGanttBlock[] =>
-  blocks &&
-  blocks.map((block) => ({
+  blocks?.map((block) => ({
     data: block,
     id: block.id,
     sort_order: block.sort_order,
diff --git a/web/components/gantt-chart/sidebar/cycle-sidebar.tsx b/web/components/gantt-chart/sidebar/cycle-sidebar.tsx
index 1af1529c2..dddccda5a 100644
--- a/web/components/gantt-chart/sidebar/cycle-sidebar.tsx
+++ b/web/components/gantt-chart/sidebar/cycle-sidebar.tsx
@@ -93,7 +93,7 @@ export const CycleGanttSidebar: React.FC<Props> = (props) => {
             <>
               {blocks ? (
                 blocks.map((block, index) => {
-                  const duration = findTotalDaysInRange(block.start_date ?? "", block.target_date ?? "");
+                  const duration = findTotalDaysInRange(block.start_date, block.target_date);
 
                   return (
                     <Draggable
@@ -130,9 +130,11 @@ export const CycleGanttSidebar: React.FC<Props> = (props) => {
                               <div className="flex-grow truncate">
                                 <CycleGanttSidebarBlock data={block.data} />
                               </div>
-                              <div className="flex-shrink-0 text-sm text-custom-text-200">
-                                {duration} day{duration > 1 ? "s" : ""}
-                              </div>
+                              {duration !== undefined && (
+                                <div className="flex-shrink-0 text-sm text-custom-text-200">
+                                  {duration} day{duration > 1 ? "s" : ""}
+                                </div>
+                              )}
                             </div>
                           </div>
                         </div>
diff --git a/web/components/gantt-chart/sidebar/module-sidebar.tsx b/web/components/gantt-chart/sidebar/module-sidebar.tsx
index 30f146dc5..8f8788787 100644
--- a/web/components/gantt-chart/sidebar/module-sidebar.tsx
+++ b/web/components/gantt-chart/sidebar/module-sidebar.tsx
@@ -93,7 +93,7 @@ export const ModuleGanttSidebar: React.FC<Props> = (props) => {
             <>
               {blocks ? (
                 blocks.map((block, index) => {
-                  const duration = findTotalDaysInRange(block.start_date ?? "", block.target_date ?? "");
+                  const duration = findTotalDaysInRange(block.start_date, block.target_date);
 
                   return (
                     <Draggable
@@ -130,9 +130,11 @@ export const ModuleGanttSidebar: React.FC<Props> = (props) => {
                               <div className="flex-grow truncate">
                                 <ModuleGanttSidebarBlock data={block.data} />
                               </div>
-                              <div className="flex-shrink-0 text-sm text-custom-text-200">
-                                {duration} day{duration > 1 ? "s" : ""}
-                              </div>
+                              {duration !== undefined && (
+                                <div className="flex-shrink-0 text-sm text-custom-text-200">
+                                  {duration} day{duration > 1 ? "s" : ""}
+                                </div>
+                              )}
                             </div>
                           </div>
                         </div>
diff --git a/web/components/gantt-chart/sidebar/project-view-sidebar.tsx b/web/components/gantt-chart/sidebar/project-view-sidebar.tsx
index da7382859..6e31215c1 100644
--- a/web/components/gantt-chart/sidebar/project-view-sidebar.tsx
+++ b/web/components/gantt-chart/sidebar/project-view-sidebar.tsx
@@ -94,7 +94,7 @@ export const ProjectViewGanttSidebar: React.FC<Props> = (props) => {
             <>
               {blocks ? (
                 blocks.map((block, index) => {
-                  const duration = findTotalDaysInRange(block.start_date ?? "", block.target_date ?? "");
+                  const duration = findTotalDaysInRange(block.start_date, block.target_date);
 
                   return (
                     <Draggable
@@ -131,9 +131,11 @@ export const ProjectViewGanttSidebar: React.FC<Props> = (props) => {
                               <div className="flex-grow truncate">
                                 <IssueGanttSidebarBlock data={block.data} />
                               </div>
-                              <div className="flex-shrink-0 text-sm text-custom-text-200">
-                                {duration} day{duration > 1 ? "s" : ""}
-                              </div>
+                              {duration !== undefined && (
+                                <div className="flex-shrink-0 text-sm text-custom-text-200">
+                                  {duration} day{duration > 1 ? "s" : ""}
+                                </div>
+                              )}
                             </div>
                           </div>
                         </div>
diff --git a/web/components/gantt-chart/sidebar/sidebar.tsx b/web/components/gantt-chart/sidebar/sidebar.tsx
index bca39a0bd..12de8e127 100644
--- a/web/components/gantt-chart/sidebar/sidebar.tsx
+++ b/web/components/gantt-chart/sidebar/sidebar.tsx
@@ -119,10 +119,7 @@ export const IssueGanttSidebar: React.FC<Props> = (props) => {
                   // hide the block if it doesn't have start and target dates and showAllBlocks is false
                   if (!showAllBlocks && !isBlockVisibleOnSidebar) return;
 
-                  const duration =
-                    !block.start_date || !block.target_date
-                      ? null
-                      : findTotalDaysInRange(block.start_date, block.target_date);
+                  const duration = findTotalDaysInRange(block.start_date, block.target_date);
 
                   return (
                     <Draggable
@@ -166,13 +163,13 @@ export const IssueGanttSidebar: React.FC<Props> = (props) => {
                               <div className="flex-grow truncate">
                                 <IssueGanttSidebarBlock data={block.data} />
                               </div>
-                              <div className="flex-shrink-0 text-sm text-custom-text-200">
-                                {duration && (
+                              {duration !== undefined && (
+                                <div className="flex-shrink-0 text-sm text-custom-text-200">
                                   <span>
                                     {duration} day{duration > 1 ? "s" : ""}
                                   </span>
-                                )}
-                              </div>
+                                </div>
+                              )}
                             </div>
                           </div>
                         </div>
diff --git a/web/components/issues/index.ts b/web/components/issues/index.ts
index 3cf88cb7c..3904049e9 100644
--- a/web/components/issues/index.ts
+++ b/web/components/issues/index.ts
@@ -1,6 +1,5 @@
 export * from "./attachment";
 export * from "./issue-modal";
-export * from "./view-select";
 export * from "./delete-issue-modal";
 export * from "./description-form";
 export * from "./issue-layouts";
diff --git a/web/components/issues/view-select/due-date.tsx b/web/components/issues/view-select/due-date.tsx
deleted file mode 100644
index d61e7586a..000000000
--- a/web/components/issues/view-select/due-date.tsx
+++ /dev/null
@@ -1,81 +0,0 @@
-// ui
-import { CustomDatePicker } from "components/ui";
-import { Tooltip } from "@plane/ui";
-import { CalendarCheck } from "lucide-react";
-// helpers
-import { findHowManyDaysLeft, renderFormattedDate } from "helpers/date-time.helper";
-// types
-import { TIssue } from "@plane/types";
-
-type Props = {
-  issue: TIssue;
-  onChange: (date: string | null) => void;
-  handleOnOpen?: () => void;
-  handleOnClose?: () => void;
-  tooltipPosition?: "top" | "bottom";
-  className?: string;
-  noBorder?: boolean;
-  disabled: boolean;
-};
-
-export const ViewDueDateSelect: React.FC<Props> = ({
-  issue,
-  onChange,
-  handleOnOpen,
-  handleOnClose,
-  tooltipPosition = "top",
-  className = "",
-  noBorder = false,
-  disabled,
-}) => {
-  const minDate = issue.start_date ? new Date(issue.start_date) : null;
-  minDate?.setDate(minDate.getDate());
-
-  return (
-    <Tooltip
-      tooltipHeading="Due date"
-      tooltipContent={issue.target_date ? renderFormattedDate(issue.target_date) ?? "N/A" : "N/A"}
-      position={tooltipPosition}
-    >
-      <div
-        className={`group max-w-[6.5rem] flex-shrink-0 ${className} ${
-          issue.target_date === null
-            ? ""
-            : issue.target_date < new Date().toISOString()
-            ? "text-red-600"
-            : findHowManyDaysLeft(issue.target_date) <= 3 && "text-orange-400"
-        }`}
-      >
-        <CustomDatePicker
-          value={issue?.target_date}
-          onChange={onChange}
-          className={`bg-transparent ${issue?.target_date ? "w-[6.5rem]" : "w-[5rem] text-center"}`}
-          customInput={
-            <div
-              className={`flex items-center justify-center gap-2 rounded border border-custom-border-200 px-2 py-1 text-xs shadow-sm duration-200 hover:bg-custom-background-80 ${
-                issue.target_date ? "pr-6 text-custom-text-300" : "text-custom-text-400"
-              } ${disabled ? "cursor-not-allowed" : "cursor-pointer"}`}
-            >
-              {issue.target_date ? (
-                <>
-                  <CalendarCheck className="h-3.5 w-3.5 flex-shrink-0" />
-                  <span>{renderFormattedDate(issue.target_date) ?? "_ _"}</span>
-                </>
-              ) : (
-                <>
-                  <CalendarCheck className="h-3.5 w-3.5 flex-shrink-0" />
-                  <span>Due Date</span>
-                </>
-              )}
-            </div>
-          }
-          minDate={minDate ?? undefined}
-          noBorder={noBorder}
-          handleOnOpen={handleOnOpen}
-          handleOnClose={handleOnClose}
-          disabled={disabled}
-        />
-      </div>
-    </Tooltip>
-  );
-};
diff --git a/web/components/issues/view-select/estimate.tsx b/web/components/issues/view-select/estimate.tsx
deleted file mode 100644
index 1739f3aaa..000000000
--- a/web/components/issues/view-select/estimate.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-import React from "react";
-import { observer } from "mobx-react-lite";
-import { Triangle } from "lucide-react";
-import sortBy from "lodash/sortBy";
-// store hooks
-import { useEstimate } from "hooks/store";
-// ui
-import { CustomSelect, Tooltip } from "@plane/ui";
-// types
-import { TIssue } from "@plane/types";
-
-type Props = {
-  issue: TIssue;
-  onChange: (data: number) => void;
-  tooltipPosition?: "top" | "bottom";
-  customButton?: boolean;
-  disabled: boolean;
-};
-
-export const ViewEstimateSelect: React.FC<Props> = observer((props) => {
-  const { issue, onChange, tooltipPosition = "top", customButton = false, disabled } = props;
-  const { areEstimatesEnabledForCurrentProject, activeEstimateDetails, getEstimatePointValue } = useEstimate();
-
-  const estimateValue = getEstimatePointValue(issue.estimate_point, issue.project_id);
-
-  const estimateLabels = (
-    <Tooltip tooltipHeading="Estimate" tooltipContent={estimateValue} position={tooltipPosition}>
-      <div className="flex items-center gap-1 text-custom-text-200">
-        <Triangle className="h-3 w-3" />
-        {estimateValue ?? "None"}
-      </div>
-    </Tooltip>
-  );
-
-  if (!areEstimatesEnabledForCurrentProject) return null;
-
-  return (
-    <CustomSelect
-      value={issue.estimate_point}
-      onChange={onChange}
-      {...(customButton ? { customButton: estimateLabels } : { label: estimateLabels })}
-      maxHeight="md"
-      noChevron
-      disabled={disabled}
-    >
-      <CustomSelect.Option value={null}>
-        <>
-          <span>
-            <Triangle className="h-3 w-3" />
-          </span>
-          None
-        </>
-      </CustomSelect.Option>
-      {sortBy(activeEstimateDetails?.points, "key")?.map((estimate) => (
-        <CustomSelect.Option key={estimate.id} value={estimate.key}>
-          <>
-            <Triangle className="h-3 w-3" />
-            {estimate.value}
-          </>
-        </CustomSelect.Option>
-      ))}
-    </CustomSelect>
-  );
-});
diff --git a/web/components/issues/view-select/index.ts b/web/components/issues/view-select/index.ts
deleted file mode 100644
index 8eb88cb0d..000000000
--- a/web/components/issues/view-select/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export * from "./due-date";
-export * from "./estimate";
-export * from "./start-date";
diff --git a/web/components/issues/view-select/start-date.tsx b/web/components/issues/view-select/start-date.tsx
deleted file mode 100644
index 039bc0cb5..000000000
--- a/web/components/issues/view-select/start-date.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-// ui
-import { CustomDatePicker } from "components/ui";
-import { Tooltip } from "@plane/ui";
-import { CalendarClock } from "lucide-react";
-// helpers
-import { renderFormattedDate } from "helpers/date-time.helper";
-// types
-import { TIssue } from "@plane/types";
-
-type Props = {
-  issue: TIssue;
-  onChange: (date: string | null) => void;
-  handleOnOpen?: () => void;
-  handleOnClose?: () => void;
-  tooltipPosition?: "top" | "bottom";
-  className?: string;
-  noBorder?: boolean;
-  disabled: boolean;
-};
-
-export const ViewStartDateSelect: React.FC<Props> = ({
-  issue,
-  onChange,
-  handleOnOpen,
-  handleOnClose,
-  tooltipPosition = "top",
-  className = "",
-  noBorder = false,
-  disabled,
-}) => {
-  const maxDate = issue.target_date ? new Date(issue.target_date) : null;
-  maxDate?.setDate(maxDate.getDate());
-
-  return (
-    <Tooltip
-      tooltipHeading="Start date"
-      tooltipContent={issue.start_date ? renderFormattedDate(issue.start_date) ?? "N/A" : "N/A"}
-      position={tooltipPosition}
-    >
-      <div className={`group max-w-[6.5rem] flex-shrink-0 ${className}`}>
-        <CustomDatePicker
-          value={issue?.start_date}
-          onChange={onChange}
-          maxDate={maxDate ?? undefined}
-          noBorder={noBorder}
-          handleOnOpen={handleOnOpen}
-          customInput={
-            <div
-              className={`flex items-center justify-center gap-2 rounded border border-custom-border-200 px-2 py-1 text-xs shadow-sm duration-200 hover:bg-custom-background-80 ${
-                issue?.start_date ? "pr-6 text-custom-text-300" : "text-custom-text-400"
-              } ${disabled ? "cursor-not-allowed" : "cursor-pointer"}`}
-            >
-              {issue?.start_date ? (
-                <>
-                  <CalendarClock className="h-3.5 w-3.5 flex-shrink-0" />
-                  <span>{renderFormattedDate(issue?.start_date ?? "_ _")}</span>
-                </>
-              ) : (
-                <>
-                  <CalendarClock className="h-3.5 w-3.5 flex-shrink-0" />
-                  <span>Start Date</span>
-                </>
-              )}
-            </div>
-          }
-          handleOnClose={handleOnClose}
-          disabled={disabled}
-        />
-      </div>
-    </Tooltip>
-  );
-};
diff --git a/web/components/modules/gantt-chart/modules-list-layout.tsx b/web/components/modules/gantt-chart/modules-list-layout.tsx
index d1cbd0dfa..53948f71d 100644
--- a/web/components/modules/gantt-chart/modules-list-layout.tsx
+++ b/web/components/modules/gantt-chart/modules-list-layout.tsx
@@ -13,37 +13,32 @@ export const ModulesListGanttChartView: React.FC = observer(() => {
   const router = useRouter();
   const { workspaceSlug } = router.query;
   // store
-  const { projectModuleIds, moduleMap } = useModule();
   const { currentProjectDetails } = useProject();
+  const { projectModuleIds, moduleMap, updateModuleDetails } = useModule();
 
-  const handleModuleUpdate = (module: IModule, payload: IBlockUpdateData) => {
-    if (!workspaceSlug) return;
-    //  FIXME
-    //updateModuleGanttStructure(workspaceSlug.toString(), module.project, module, payload);
+  const handleModuleUpdate = async (module: IModule, data: IBlockUpdateData) => {
+    if (!workspaceSlug || !module) return;
+
+    const payload: any = { ...data };
+    if (data.sort_order) payload.sort_order = data.sort_order.newSortOrder;
+
+    await updateModuleDetails(workspaceSlug.toString(), module.project, module.id, payload);
   };
 
   const blockFormat = (blocks: string[]) =>
-    blocks && blocks.length > 0
-      ? blocks
-          .filter((blockId) => {
-            const block = moduleMap[blockId];
-            return block.start_date && block.target_date && new Date(block.start_date) <= new Date(block.target_date);
-          })
-          .map((blockId) => {
-            const block = moduleMap[blockId];
-            return {
-              data: block,
-              id: block.id,
-              sort_order: block.sort_order,
-              start_date: new Date(block.start_date ?? ""),
-              target_date: new Date(block.target_date ?? ""),
-            };
-          })
-      : [];
+    blocks?.map((blockId) => {
+      const block = moduleMap[blockId];
+      return {
+        data: block,
+        id: block.id,
+        sort_order: block.sort_order,
+        start_date: block.start_date ? new Date(block.start_date) : null,
+        target_date: block.target_date ? new Date(block.target_date) : null,
+      };
+    });
 
   const isAllowed = currentProjectDetails?.member_role === 20 || currentProjectDetails?.member_role === 15;
 
-  const modules = projectModuleIds;
   return (
     <div className="h-full w-full overflow-y-auto">
       <GanttChartRoot
@@ -57,6 +52,7 @@ export const ModulesListGanttChartView: React.FC = observer(() => {
         enableBlockRightResize={isAllowed}
         enableBlockMove={isAllowed}
         enableReorder={isAllowed}
+        showAllBlocks
       />
     </div>
   );
diff --git a/web/helpers/date-time.helper.ts b/web/helpers/date-time.helper.ts
index bc5daa2a3..b629e60ec 100644
--- a/web/helpers/date-time.helper.ts
+++ b/web/helpers/date-time.helper.ts
@@ -87,11 +87,11 @@ export const renderFormattedTime = (date: string | Date, timeFormat: "12-hour" |
  * @example checkIfStringIsDate("2021-01-01", "2021-01-08") // 8
  */
 export const findTotalDaysInRange = (
-  startDate: Date | string,
-  endDate: Date | string,
+  startDate: Date | string | undefined | null,
+  endDate: Date | string | undefined | null,
   inclusive: boolean = true
-): number => {
-  if (!startDate || !endDate) return 0;
+): number | undefined => {
+  if (!startDate || !endDate) return undefined;
   // Parse the dates to check if they are valid
   const parsedStartDate = new Date(startDate);
   const parsedEndDate = new Date(endDate);
@@ -110,8 +110,11 @@ export const findTotalDaysInRange = (
  * @param {boolean} inclusive (optional) // default true
  * @example findHowManyDaysLeft("2024-01-01") // 3
  */
-export const findHowManyDaysLeft = (date: string | Date, inclusive: boolean = true): number => {
-  if (!date) return 0;
+export const findHowManyDaysLeft = (
+  date: Date | string | undefined | null,
+  inclusive: boolean = true
+): number | undefined => {
+  if (!date) return undefined;
   // Pass the date to findTotalDaysInRange function to find the total number of days in range from today
   return findTotalDaysInRange(new Date(), date, inclusive);
 };
diff --git a/web/store/cycle.store.ts b/web/store/cycle.store.ts
index bb6824c08..51340d740 100644
--- a/web/store/cycle.store.ts
+++ b/web/store/cycle.store.ts
@@ -103,7 +103,7 @@ export class CycleStore implements ICycleStore {
     const projectId = this.rootStore.app.router.projectId;
     if (!projectId || !this.fetchedMap[projectId]) return null;
     let allCycles = Object.values(this.cycleMap ?? {}).filter((c) => c?.project === projectId);
-    allCycles = sortBy(allCycles, [(c) => !c.is_favorite, (c) => c.name.toLowerCase()]);
+    allCycles = sortBy(allCycles, [(c) => c.sort_order]);
     const allCycleIds = allCycles.map((c) => c.id);
     return allCycleIds;
   }
@@ -118,7 +118,7 @@ export class CycleStore implements ICycleStore {
       const hasEndDatePassed = isPast(new Date(c.end_date ?? ""));
       return c.project === projectId && hasEndDatePassed;
     });
-    completedCycles = sortBy(completedCycles, [(c) => !c.is_favorite, (c) => c.name.toLowerCase()]);
+    completedCycles = sortBy(completedCycles, [(c) => c.sort_order]);
     const completedCycleIds = completedCycles.map((c) => c.id);
     return completedCycleIds;
   }
@@ -133,7 +133,7 @@ export class CycleStore implements ICycleStore {
       const isStartDateUpcoming = isFuture(new Date(c.start_date ?? ""));
       return c.project === projectId && isStartDateUpcoming;
     });
-    upcomingCycles = sortBy(upcomingCycles, [(c) => !c.is_favorite, (c) => c.name.toLowerCase()]);
+    upcomingCycles = sortBy(upcomingCycles, [(c) => c.sort_order]);
     const upcomingCycleIds = upcomingCycles.map((c) => c.id);
     return upcomingCycleIds;
   }
@@ -148,7 +148,7 @@ export class CycleStore implements ICycleStore {
       const hasEndDatePassed = isPast(new Date(c.end_date ?? ""));
       return c.project === projectId && !hasEndDatePassed;
     });
-    incompleteCycles = sortBy(incompleteCycles, [(c) => !c.is_favorite, (c) => c.name.toLowerCase()]);
+    incompleteCycles = sortBy(incompleteCycles, [(c) => c.sort_order]);
     const incompleteCycleIds = incompleteCycles.map((c) => c.id);
     return incompleteCycleIds;
   }
@@ -162,7 +162,7 @@ export class CycleStore implements ICycleStore {
     let draftCycles = Object.values(this.cycleMap ?? {}).filter(
       (c) => c.project === projectId && !c.start_date && !c.end_date
     );
-    draftCycles = sortBy(draftCycles, [(c) => !c.is_favorite, (c) => c.name.toLowerCase()]);
+    draftCycles = sortBy(draftCycles, [(c) => c.sort_order]);
     const draftCycleIds = draftCycles.map((c) => c.id);
     return draftCycleIds;
   }
@@ -203,7 +203,7 @@ export class CycleStore implements ICycleStore {
     if (!this.fetchedMap[projectId]) return null;
 
     let cycles = Object.values(this.cycleMap ?? {}).filter((c) => c.project === projectId);
-    cycles = sortBy(cycles, [(c) => !c.is_favorite, (c) => c.name.toLowerCase()]);
+    cycles = sortBy(cycles, [(c) => c.sort_order]);
     const cycleIds = cycles.map((c) => c.id);
     return cycleIds || null;
   });
diff --git a/web/store/module.store.ts b/web/store/module.store.ts
index 7ebccc23c..5c80e39d0 100644
--- a/web/store/module.store.ts
+++ b/web/store/module.store.ts
@@ -100,7 +100,7 @@ export class ModulesStore implements IModuleStore {
     const projectId = this.rootStore.app.router.projectId;
     if (!projectId || !this.fetchedMap[projectId]) return null;
     let projectModules = Object.values(this.moduleMap).filter((m) => m.project === projectId);
-    projectModules = sortBy(projectModules, [(m) => !m.is_favorite, (m) => m.name.toLowerCase()]);
+    projectModules = sortBy(projectModules, [(m) => m.sort_order]);
     const projectModuleIds = projectModules.map((m) => m.id);
     return projectModuleIds || null;
   }
@@ -120,7 +120,7 @@ export class ModulesStore implements IModuleStore {
     if (!this.fetchedMap[projectId]) return null;
 
     let projectModules = Object.values(this.moduleMap).filter((m) => m.project === projectId);
-    projectModules = sortBy(projectModules, [(m) => !m.is_favorite, (m) => m.name.toLowerCase()]);
+    projectModules = sortBy(projectModules, [(m) => m.sort_order]);
     const projectModuleIds = projectModules.map((m) => m.id);
     return projectModuleIds;
   });

From 55afef204d415096dfad1a27899aaf19557adcc9 Mon Sep 17 00:00:00 2001
From: Ramesh Kumar Chandra
 <31303617+rameshkumarchandra@users.noreply.github.com>
Date: Thu, 8 Feb 2024 17:49:26 +0530
Subject: [PATCH 33/58] style: responsive profile (#3596)

* style: responsive profile

* style: profile header drop down, sidebar auto show hide depending on the screen width

* fix: item tap on white space in the drop down menu in profile header

* fix: profile layout breaking on big screens in page visit
---
 .../sidebar/sidebar-menu-hamburger-toggle.tsx |   2 +-
 web/components/headers/user-profile.tsx       |  72 ++-
 web/components/profile/navbar.tsx             |  11 +-
 web/components/profile/sidebar.tsx            |  43 +-
 .../profile/preferences/layout.tsx            |  55 +-
 .../profile/preferences/sidebar.tsx           |  29 +-
 .../settings-layout/profile/sidebar.tsx       |  92 ++-
 web/layouts/user-profile-layout/layout.tsx    |   7 +-
 .../profile/[userId]/assigned.tsx             |   2 +-
 .../profile/[userId]/created.tsx              |   2 +-
 .../profile/[userId]/index.tsx                |   2 +-
 .../profile/[userId]/subscribed.tsx           |   2 +-
 web/pages/profile/activity.tsx                |  20 +-
 web/pages/profile/change-password.tsx         |   6 +
 web/pages/profile/index.tsx                   | 575 +++++++++---------
 web/pages/profile/preferences/theme.tsx       |   2 +-
 web/store/application/theme.store.ts          |  18 +
 17 files changed, 571 insertions(+), 369 deletions(-)

diff --git a/web/components/core/sidebar/sidebar-menu-hamburger-toggle.tsx b/web/components/core/sidebar/sidebar-menu-hamburger-toggle.tsx
index 0e34eac2c..fe7b8d177 100644
--- a/web/components/core/sidebar/sidebar-menu-hamburger-toggle.tsx
+++ b/web/components/core/sidebar/sidebar-menu-hamburger-toggle.tsx
@@ -3,7 +3,7 @@ import { Menu } from "lucide-react";
 import { useApplication } from "hooks/store";
 import { observer } from "mobx-react";
 
-export const SidebarHamburgerToggle: FC = observer (() => {
+export const SidebarHamburgerToggle: FC = observer(() => {
   const { theme: themStore } = useApplication();
   return (
     <div
diff --git a/web/components/headers/user-profile.tsx b/web/components/headers/user-profile.tsx
index d54f73009..f933d4dfa 100644
--- a/web/components/headers/user-profile.tsx
+++ b/web/components/headers/user-profile.tsx
@@ -1,18 +1,78 @@
 // ui
-import { Breadcrumbs } from "@plane/ui";
+import { Breadcrumbs, CustomMenu } from "@plane/ui";
 import { BreadcrumbLink } from "components/common";
 // components
 import { SidebarHamburgerToggle } from "components/core/sidebar/sidebar-menu-hamburger-toggle";
+import { cn } from "helpers/common.helper";
+import { FC } from "react";
+import { useApplication, useUser } from "hooks/store";
+import { ChevronDown, PanelRight } from "lucide-react";
+import { observer } from "mobx-react-lite";
+import { PROFILE_ADMINS_TAB, PROFILE_VIEWER_TAB } from "constants/profile";
+import Link from "next/link";
+import { useRouter } from "next/router";
 
-export const UserProfileHeader = () => (
-  <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
+type TUserProfileHeader = {
+  type?: string | undefined
+}
+
+export const UserProfileHeader: FC<TUserProfileHeader> = observer((props) => {
+  const { type = undefined } = props
+
+  const router = useRouter();
+  const { workspaceSlug, userId } = router.query;
+
+  const AUTHORIZED_ROLES = [20, 15, 10];
+  const {
+    membership: { currentWorkspaceRole },
+  } = useUser();
+
+  if (!currentWorkspaceRole) return null;
+
+  const isAuthorized = AUTHORIZED_ROLES.includes(currentWorkspaceRole);
+  const tabsList = isAuthorized ? [...PROFILE_VIEWER_TAB, ...PROFILE_ADMINS_TAB] : PROFILE_VIEWER_TAB;
+
+  const { theme: themStore } = useApplication();
+
+  return (<div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
     <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
       <SidebarHamburgerToggle />
-      <div>
+      <div className="flex justify-between w-full">
         <Breadcrumbs>
           <Breadcrumbs.BreadcrumbItem type="text" link={<BreadcrumbLink href="/profile" label="Activity Overview" />} />
         </Breadcrumbs>
+        <div className="flex gap-4 md:hidden">
+          <CustomMenu
+            maxHeight={"md"}
+            className="flex flex-grow justify-center text-custom-text-200 text-sm"
+            placement="bottom-start"
+            customButton={
+              <div className="flex gap-2 items-center px-2 py-1.5 border border-custom-border-400 rounded-md">
+                <span className="flex flex-grow justify-center text-custom-text-200 text-sm">{type}</span>
+                <ChevronDown className="w-4 h-4 text-custom-text-400" />
+              </div>
+            }
+            customButtonClassName="flex flex-grow justify-center text-custom-text-200 text-sm"
+            closeOnSelect
+          >
+            <></>
+            {tabsList.map((tab) => (
+              <CustomMenu.MenuItem
+                className="flex items-center gap-2"
+              >
+                <Link key={tab.route} href={`/${workspaceSlug}/profile/${userId}/${tab.route}`} className="text-custom-text-300 w-full">{tab.label}</Link>
+              </CustomMenu.MenuItem>
+            ))}
+          </CustomMenu>
+          <button className="transition-all block md:hidden" onClick={() => { themStore.toggleProfileSidebar(); console.log(themStore.profileSidebarCollapsed) }}>
+            <PanelRight className={
+              cn("w-4 h-4 block md:hidden", !themStore.profileSidebarCollapsed ? "text-[#3E63DD]" : "text-custom-text-200")
+            } />
+          </button>
+        </div>
       </div>
     </div>
-  </div>
-);
+  </div>)
+});
+
+
diff --git a/web/components/profile/navbar.tsx b/web/components/profile/navbar.tsx
index 44dfe57d1..4361b7a9d 100644
--- a/web/components/profile/navbar.tsx
+++ b/web/components/profile/navbar.tsx
@@ -22,16 +22,15 @@ export const ProfileNavbar: React.FC<Props> = (props) => {
   const tabsList = isAuthorized ? [...PROFILE_VIEWER_TAB, ...PROFILE_ADMINS_TAB] : PROFILE_VIEWER_TAB;
 
   return (
-    <div className="sticky -top-0.5 z-10 flex items-center justify-between gap-4 border-b border-custom-border-300 bg-custom-background-100 px-4 sm:px-5 md:static">
+    <div className="sticky -top-0.5 z-10 hidden md:flex items-center justify-between gap-4 border-b border-custom-border-300 bg-custom-background-100 px-4 sm:px-5 md:static">
       <div className="flex items-center overflow-x-scroll">
         {tabsList.map((tab) => (
           <Link key={tab.route} href={`/${workspaceSlug}/profile/${userId}/${tab.route}`}>
             <span
-              className={`flex whitespace-nowrap border-b-2 p-4 text-sm font-medium outline-none ${
-                router.pathname === tab.selected
-                  ? "border-custom-primary-100 text-custom-primary-100"
-                  : "border-transparent"
-              }`}
+              className={`flex whitespace-nowrap border-b-2 p-4 text-sm font-medium outline-none ${router.pathname === tab.selected
+                ? "border-custom-primary-100 text-custom-primary-100"
+                : "border-transparent"
+                }`}
             >
               {tab.label}
             </span>
diff --git a/web/components/profile/sidebar.tsx b/web/components/profile/sidebar.tsx
index 3ce7747c9..b356b5adb 100644
--- a/web/components/profile/sidebar.tsx
+++ b/web/components/profile/sidebar.tsx
@@ -4,7 +4,7 @@ import useSWR from "swr";
 import { Disclosure, Transition } from "@headlessui/react";
 import { observer } from "mobx-react-lite";
 // hooks
-import { useUser } from "hooks/store";
+import { useApplication, useUser } from "hooks/store";
 // services
 import { UserService } from "services/user.service";
 // components
@@ -18,6 +18,8 @@ import { renderFormattedDate } from "helpers/date-time.helper";
 import { renderEmoji } from "helpers/emoji.helper";
 // fetch-keys
 import { USER_PROFILE_PROJECT_SEGREGATION } from "constants/fetch-keys";
+import useOutsideClickDetector from "hooks/use-outside-click-detector";
+import { useEffect, useRef } from "react";
 
 // services
 const userService = new UserService();
@@ -28,6 +30,8 @@ export const ProfileSidebar = observer(() => {
   const { workspaceSlug, userId } = router.query;
   // store hooks
   const { currentUser } = useUser();
+  const { theme: themStore } = useApplication();
+  const ref = useRef<HTMLDivElement>(null);
 
   const { data: userProjectsData } = useSWR(
     workspaceSlug && userId ? USER_PROFILE_PROJECT_SEGREGATION(workspaceSlug.toString(), userId.toString()) : null,
@@ -36,6 +40,14 @@ export const ProfileSidebar = observer(() => {
       : null
   );
 
+  useOutsideClickDetector(ref, () => {
+    if (themStore.profileSidebarCollapsed === false) {
+      if (window.innerWidth < 768) {
+        themStore.toggleProfileSidebar();
+      }
+    }
+  });
+
   const userDetails = [
     {
       label: "Joined on",
@@ -47,8 +59,26 @@ export const ProfileSidebar = observer(() => {
     },
   ];
 
+  useEffect(() => {
+    const handleToggleProfileSidebar = () => {
+      if (window && window.innerWidth < 768) {
+        themStore.toggleProfileSidebar(true);
+      }
+      if (window && themStore.profileSidebarCollapsed && window.innerWidth >= 768) {
+        themStore.toggleProfileSidebar(false);
+      }
+    };
+
+    window.addEventListener("resize", handleToggleProfileSidebar);
+    handleToggleProfileSidebar();
+    return () => window.removeEventListener("resize", handleToggleProfileSidebar);
+  }, [themStore]);
+
   return (
-    <div className="w-full flex-shrink-0 overflow-y-auto shadow-custom-shadow-sm md:h-full md:w-80 border-l border-custom-border-100">
+    <div
+      className={`flex-shrink-0 overflow-hidden overflow-y-auto shadow-custom-shadow-sm border-l border-custom-border-100 bg-custom-sidebar-background-100 h-full z-[5] fixed md:relative transition-all w-full md:w-[300px]`}
+      style={themStore.profileSidebarCollapsed ? { marginLeft: `${window?.innerWidth || 0}px` } : {}}
+    >
       {userProjectsData ? (
         <>
           <div className="relative h-32">
@@ -132,13 +162,12 @@ export const ProfileSidebar = observer(() => {
                             {project.assigned_issues > 0 && (
                               <Tooltip tooltipContent="Completion percentage" position="left">
                                 <div
-                                  className={`rounded px-1 py-0.5 text-xs font-medium ${
-                                    completedIssuePercentage <= 35
-                                      ? "bg-red-500/10 text-red-500"
-                                      : completedIssuePercentage <= 70
+                                  className={`rounded px-1 py-0.5 text-xs font-medium ${completedIssuePercentage <= 35
+                                    ? "bg-red-500/10 text-red-500"
+                                    : completedIssuePercentage <= 70
                                       ? "bg-yellow-500/10 text-yellow-500"
                                       : "bg-green-500/10 text-green-500"
-                                  }`}
+                                    }`}
                                 >
                                   {completedIssuePercentage}%
                                 </div>
diff --git a/web/layouts/settings-layout/profile/preferences/layout.tsx b/web/layouts/settings-layout/profile/preferences/layout.tsx
index 9d17350a9..b25935f4e 100644
--- a/web/layouts/settings-layout/profile/preferences/layout.tsx
+++ b/web/layouts/settings-layout/profile/preferences/layout.tsx
@@ -2,6 +2,11 @@ import { FC, ReactNode } from "react";
 // layout
 import { ProfileSettingsLayout } from "layouts/settings-layout";
 import { ProfilePreferenceSettingsSidebar } from "./sidebar";
+import { SidebarHamburgerToggle } from "components/core/sidebar/sidebar-menu-hamburger-toggle";
+import { CustomMenu } from "@plane/ui";
+import { ChevronDown } from "lucide-react";
+import Link from "next/link";
+import { useRouter } from "next/router";
 
 interface IProfilePreferenceSettingsLayout {
   children: ReactNode;
@@ -10,9 +15,57 @@ interface IProfilePreferenceSettingsLayout {
 
 export const ProfilePreferenceSettingsLayout: FC<IProfilePreferenceSettingsLayout> = (props) => {
   const { children, header } = props;
+  const router = useRouter();
+
+  const showMenuItem = () => {
+    const item = router.asPath.split('/');
+    let splittedItem = item[item.length - 1];
+    splittedItem = splittedItem.replace(splittedItem[0], splittedItem[0].toUpperCase());
+    console.log(splittedItem);
+    return splittedItem;
+  }
+
+  const profilePreferenceLinks: Array<{
+    label: string;
+    href: string;
+  }> = [
+      {
+        label: "Theme",
+        href: `/profile/preferences/theme`,
+      },
+      {
+        label: "Email",
+        href: `/profile/preferences/email`,
+      },
+    ];
 
   return (
-    <ProfileSettingsLayout>
+    <ProfileSettingsLayout header={
+      <div className="md:hidden flex flex-shrink-0 gap-4 items-center justify-start border-b border-custom-border-200 p-4">
+        <SidebarHamburgerToggle />
+        <CustomMenu
+          maxHeight={"md"}
+          className="flex flex-grow justify-center text-custom-text-200 text-sm"
+          placement="bottom-start"
+          customButton={
+            <div className="flex gap-2 items-center px-2 py-1.5 border rounded-md border-custom-border-400">
+              <span className="flex flex-grow justify-center text-custom-text-200 text-sm">{showMenuItem()}</span>
+              <ChevronDown className="w-4 h-4 text-custom-text-400" />
+            </div>
+          }
+          customButtonClassName="flex flex-grow justify-start text-custom-text-200 text-sm"
+        >
+          <></>
+          {profilePreferenceLinks.map((link) => (
+            <CustomMenu.MenuItem
+              className="flex items-center gap-2"
+            >
+              <Link key={link.href} href={link.href} className="text-custom-text-300 w-full">{link.label}</Link>
+            </CustomMenu.MenuItem>
+          ))}
+        </CustomMenu>
+      </div>
+    }>
       <div className="relative flex h-screen w-full overflow-hidden">
         <ProfilePreferenceSettingsSidebar />
         <main className="relative flex h-full w-full flex-col overflow-hidden bg-custom-background-100">
diff --git a/web/layouts/settings-layout/profile/preferences/sidebar.tsx b/web/layouts/settings-layout/profile/preferences/sidebar.tsx
index d1eec1233..7f43f3cad 100644
--- a/web/layouts/settings-layout/profile/preferences/sidebar.tsx
+++ b/web/layouts/settings-layout/profile/preferences/sidebar.tsx
@@ -9,28 +9,27 @@ export const ProfilePreferenceSettingsSidebar = () => {
     label: string;
     href: string;
   }> = [
-    {
-      label: "Theme",
-      href: `/profile/preferences/theme`,
-    },
-    {
-      label: "Email",
-      href: `/profile/preferences/email`,
-    },
-  ];
+      {
+        label: "Theme",
+        href: `/profile/preferences/theme`,
+      },
+      {
+        label: "Email",
+        href: `/profile/preferences/email`,
+      },
+    ];
   return (
-    <div className="flex w-96 flex-col gap-6 px-8 py-12">
+    <div className="hidden md:flex w-96 flex-col gap-6 px-8 py-12">
       <div className="flex flex-col gap-4">
         <span className="text-xs font-semibold text-custom-text-400">Preference</span>
         <div className="flex w-full flex-col gap-2">
           {profilePreferenceLinks.map((link) => (
             <Link key={link.href} href={link.href}>
               <div
-                className={`rounded-md px-4 py-2 text-sm font-medium ${
-                  (link.label === "Import" ? router.asPath.includes(link.href) : router.asPath === link.href)
-                    ? "bg-custom-primary-100/10 text-custom-primary-100"
-                    : "text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80 focus:bg-custom-sidebar-background-80"
-                }`}
+                className={`rounded-md px-4 py-2 text-sm font-medium ${(link.label === "Import" ? router.asPath.includes(link.href) : router.asPath === link.href)
+                  ? "bg-custom-primary-100/10 text-custom-primary-100"
+                  : "text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80 focus:bg-custom-sidebar-background-80"
+                  }`}
               >
                 {link.label}
               </div>
diff --git a/web/layouts/settings-layout/profile/sidebar.tsx b/web/layouts/settings-layout/profile/sidebar.tsx
index 0a97b3364..4b8a1b854 100644
--- a/web/layouts/settings-layout/profile/sidebar.tsx
+++ b/web/layouts/settings-layout/profile/sidebar.tsx
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { mutate } from "swr";
 import Link from "next/link";
 import { useRouter } from "next/router";
@@ -12,6 +12,7 @@ import useToast from "hooks/use-toast";
 import { Tooltip } from "@plane/ui";
 // constants
 import { PROFILE_ACTION_LINKS } from "constants/profile";
+import useOutsideClickDetector from "hooks/use-outside-click-detector";
 
 const WORKSPACE_ACTION_LINKS = [
   {
@@ -52,6 +53,35 @@ export const ProfileLayoutSidebar = observer(() => {
     currentUserSettings?.workspace?.fallback_workspace_slug ||
     "";
 
+  const ref = useRef<HTMLDivElement>(null);
+
+  useOutsideClickDetector(ref, () => {
+    if (sidebarCollapsed === false) {
+      if (window.innerWidth < 768) {
+        toggleSidebar();
+      }
+    }
+  });
+
+  useEffect(() => {
+    const handleResize = () => {
+      if (window.innerWidth <= 768) {
+        toggleSidebar(true);
+      }
+    };
+    handleResize();
+    window.addEventListener("resize", handleResize);
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, [toggleSidebar]);
+
+  const handleItemClick = () => {
+    if (window.innerWidth < 768) {
+      toggleSidebar();
+    }
+  };
+
   const handleSignOut = async () => {
     setIsSigningOut(true);
 
@@ -73,16 +103,18 @@ export const ProfileLayoutSidebar = observer(() => {
 
   return (
     <div
-      className={`fixed inset-y-0 z-20 flex h-full flex-shrink-0 flex-grow-0 flex-col border-r border-custom-sidebar-border-200 bg-custom-sidebar-background-100 duration-300 md:relative ${
-        sidebarCollapsed ? "" : "md:w-[280px]"
-      } ${sidebarCollapsed ? "left-0" : "-left-full md:left-0"}`}
+      className={`fixed inset-y-0 z-20 flex h-full flex-shrink-0 flex-grow-0 flex-col border-r border-custom-sidebar-border-200 bg-custom-sidebar-background-100 duration-300 md:relative 
+        ${sidebarCollapsed ? "-ml-[280px]" : ""}
+        sm:${sidebarCollapsed ? "-ml-[280px]" : ""}
+        md:ml-0 ${sidebarCollapsed ? "w-[80px]" : "w-[280px]"}
+        lg:ml-0 ${sidebarCollapsed ? "w-[80px]" : "w-[280px]"}
+      `}
     >
-      <div className="flex h-full w-full flex-col gap-y-4">
+      <div ref={ref} className="flex h-full w-full flex-col gap-y-4">
         <Link href={`/${redirectWorkspaceSlug}`}>
           <div
-            className={`flex flex-shrink-0 items-center gap-2 truncate px-4 pt-4 ${
-              sidebarCollapsed ? "justify-center" : ""
-            }`}
+            className={`flex flex-shrink-0 items-center gap-2 truncate px-4 pt-4 ${sidebarCollapsed ? "justify-center" : ""
+              }`}
           >
             <span className="grid h-5 w-5 flex-shrink-0 place-items-center">
               <ChevronLeft className="h-5 w-5" strokeWidth={1} />
@@ -101,14 +133,13 @@ export const ProfileLayoutSidebar = observer(() => {
               if (link.key === "change-password" && currentUser?.is_password_autoset) return null;
 
               return (
-                <Link key={link.key} href={link.href} className="block w-full">
+                <Link key={link.key} href={link.href} className="block w-full" onClick={handleItemClick}>
                   <Tooltip tooltipContent={link.label} position="right" className="ml-2" disabled={!sidebarCollapsed}>
                     <div
-                      className={`group flex w-full items-center gap-2.5 rounded-md px-3 py-2 text-sm font-medium outline-none ${
-                        link.highlight(router.pathname)
-                          ? "bg-custom-primary-100/10 text-custom-primary-100"
-                          : "text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80"
-                      } ${sidebarCollapsed ? "justify-center" : ""}`}
+                      className={`group flex w-full items-center gap-2.5 rounded-md px-3 py-2 text-sm font-medium outline-none ${link.highlight(router.pathname)
+                        ? "bg-custom-primary-100/10 text-custom-primary-100"
+                        : "text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80"
+                        } ${sidebarCollapsed ? "justify-center" : ""}`}
                     >
                       {<link.Icon className="h-4 w-4" />}
                       {!sidebarCollapsed && link.label}
@@ -129,19 +160,17 @@ export const ProfileLayoutSidebar = observer(() => {
                 <Link
                   key={workspace.id}
                   href={`/${workspace.slug}`}
-                  className={`flex flex-grow cursor-pointer select-none items-center truncate text-left text-sm font-medium ${
-                    sidebarCollapsed ? "justify-center" : `justify-between`
-                  }`}
+                  className={`flex flex-grow cursor-pointer select-none items-center truncate text-left text-sm font-medium ${sidebarCollapsed ? "justify-center" : `justify-between`
+                    }`}
+                  onClick={handleItemClick}
                 >
                   <span
-                    className={`flex w-full flex-grow items-center gap-x-2 truncate rounded-md px-3 py-1 hover:bg-custom-sidebar-background-80 ${
-                      sidebarCollapsed ? "justify-center" : ""
-                    }`}
+                    className={`flex w-full flex-grow items-center gap-x-2 truncate rounded-md px-3 py-1 hover:bg-custom-sidebar-background-80 ${sidebarCollapsed ? "justify-center" : ""
+                      }`}
                   >
                     <span
-                      className={`relative flex h-6 w-6 flex-shrink-0 items-center  justify-center p-2 text-xs uppercase ${
-                        !workspace?.logo && "rounded bg-custom-primary-500 text-white"
-                      }`}
+                      className={`relative flex h-6 w-6 flex-shrink-0 items-center  justify-center p-2 text-xs uppercase ${!workspace?.logo && "rounded bg-custom-primary-500 text-white"
+                        }`}
                     >
                       {workspace?.logo && workspace.logo !== "" ? (
                         <img
@@ -163,12 +192,11 @@ export const ProfileLayoutSidebar = observer(() => {
           )}
           <div className="mt-1.5">
             {WORKSPACE_ACTION_LINKS.map((link) => (
-              <Link className="block w-full" key={link.key} href={link.href}>
+              <Link className="block w-full" key={link.key} href={link.href} onClick={handleItemClick}>
                 <Tooltip tooltipContent={link.label} position="right" className="ml-2" disabled={!sidebarCollapsed}>
                   <div
-                    className={`group flex w-full items-center gap-2.5 rounded-md px-3 py-2 text-sm font-medium text-custom-sidebar-text-200 outline-none hover:bg-custom-sidebar-background-80 focus:bg-custom-sidebar-background-80 ${
-                      sidebarCollapsed ? "justify-center" : ""
-                    }`}
+                    className={`group flex w-full items-center gap-2.5 rounded-md px-3 py-2 text-sm font-medium text-custom-sidebar-text-200 outline-none hover:bg-custom-sidebar-background-80 focus:bg-custom-sidebar-background-80 ${sidebarCollapsed ? "justify-center" : ""
+                      }`}
                   >
                     {<link.Icon className="h-4 w-4" />}
                     {!sidebarCollapsed && link.label}
@@ -180,9 +208,8 @@ export const ProfileLayoutSidebar = observer(() => {
         </div>
         <div className="flex flex-shrink-0 flex-grow items-end px-6 py-2">
           <div
-            className={`flex w-full ${
-              sidebarCollapsed ? "flex-col justify-center gap-2" : "items-center justify-between gap-2"
-            }`}
+            className={`flex w-full ${sidebarCollapsed ? "flex-col justify-center gap-2" : "items-center justify-between gap-2"
+              }`}
           >
             <button
               type="button"
@@ -202,9 +229,8 @@ export const ProfileLayoutSidebar = observer(() => {
             </button>
             <button
               type="button"
-              className={`ml-auto hidden place-items-center rounded-md p-1.5 text-custom-text-200 outline-none hover:bg-custom-background-90 hover:text-custom-text-100 md:grid ${
-                sidebarCollapsed ? "w-full" : ""
-              }`}
+              className={`ml-auto hidden place-items-center rounded-md p-1.5 text-custom-text-200 outline-none hover:bg-custom-background-90 hover:text-custom-text-100 md:grid ${sidebarCollapsed ? "w-full" : ""
+                }`}
               onClick={() => toggleSidebar()}
             >
               <MoveLeft className={`h-3.5 w-3.5 duration-300 ${sidebarCollapsed ? "rotate-180" : ""}`} />
diff --git a/web/layouts/user-profile-layout/layout.tsx b/web/layouts/user-profile-layout/layout.tsx
index 60c17d8d4..5ff3891e0 100644
--- a/web/layouts/user-profile-layout/layout.tsx
+++ b/web/layouts/user-profile-layout/layout.tsx
@@ -28,9 +28,8 @@ export const ProfileAuthWrapper: React.FC<Props> = observer((props) => {
   const isAuthorizedPath = router.pathname.includes("assigned" || "created" || "subscribed");
 
   return (
-    <div className="h-full w-full md:flex md:flex-row-reverse md:overflow-hidden">
-      <ProfileSidebar />
-      <div className="flex w-full flex-col md:h-full md:overflow-hidden">
+    <div className="h-full w-full realtive flex flex-row">
+      <div className="w-full realtive flex flex-col">
         <ProfileNavbar isAuthorized={isAuthorized} showProfileIssuesFilter={showProfileIssuesFilter} />
         {isAuthorized || !isAuthorizedPath ? (
           <div className={`w-full overflow-hidden md:h-full ${className}`}>{children}</div>
@@ -40,6 +39,8 @@ export const ProfileAuthWrapper: React.FC<Props> = observer((props) => {
           </div>
         )}
       </div>
+
+      <ProfileSidebar />
     </div>
   );
 });
diff --git a/web/pages/[workspaceSlug]/profile/[userId]/assigned.tsx b/web/pages/[workspaceSlug]/profile/[userId]/assigned.tsx
index fe5de0454..0808b9503 100644
--- a/web/pages/[workspaceSlug]/profile/[userId]/assigned.tsx
+++ b/web/pages/[workspaceSlug]/profile/[userId]/assigned.tsx
@@ -12,7 +12,7 @@ const ProfileAssignedIssuesPage: NextPageWithLayout = () => <ProfileIssuesPage t
 
 ProfileAssignedIssuesPage.getLayout = function getLayout(page: ReactElement) {
   return (
-    <AppLayout header={<UserProfileHeader />}>
+    <AppLayout header={<UserProfileHeader type="Assigned" />}>
       <ProfileAuthWrapper showProfileIssuesFilter>{page}</ProfileAuthWrapper>
     </AppLayout>
   );
diff --git a/web/pages/[workspaceSlug]/profile/[userId]/created.tsx b/web/pages/[workspaceSlug]/profile/[userId]/created.tsx
index d91dd8d65..76f4c1fba 100644
--- a/web/pages/[workspaceSlug]/profile/[userId]/created.tsx
+++ b/web/pages/[workspaceSlug]/profile/[userId]/created.tsx
@@ -14,7 +14,7 @@ const ProfileCreatedIssuesPage: NextPageWithLayout = () => <ProfileIssuesPage ty
 
 ProfileCreatedIssuesPage.getLayout = function getLayout(page: ReactElement) {
   return (
-    <AppLayout header={<UserProfileHeader />}>
+    <AppLayout header={<UserProfileHeader type="Created" />}>
       <ProfileAuthWrapper showProfileIssuesFilter>{page}</ProfileAuthWrapper>
     </AppLayout>
   );
diff --git a/web/pages/[workspaceSlug]/profile/[userId]/index.tsx b/web/pages/[workspaceSlug]/profile/[userId]/index.tsx
index f56a8c14f..486d8d7e3 100644
--- a/web/pages/[workspaceSlug]/profile/[userId]/index.tsx
+++ b/web/pages/[workspaceSlug]/profile/[userId]/index.tsx
@@ -56,7 +56,7 @@ const ProfileOverviewPage: NextPageWithLayout = () => {
 
 ProfileOverviewPage.getLayout = function getLayout(page: ReactElement) {
   return (
-    <AppLayout header={<UserProfileHeader />}>
+    <AppLayout header={<UserProfileHeader type='Summary' />}>
       <ProfileAuthWrapper>{page}</ProfileAuthWrapper>
     </AppLayout>
   );
diff --git a/web/pages/[workspaceSlug]/profile/[userId]/subscribed.tsx b/web/pages/[workspaceSlug]/profile/[userId]/subscribed.tsx
index 44d802a1b..257c23655 100644
--- a/web/pages/[workspaceSlug]/profile/[userId]/subscribed.tsx
+++ b/web/pages/[workspaceSlug]/profile/[userId]/subscribed.tsx
@@ -14,7 +14,7 @@ const ProfileSubscribedIssuesPage: NextPageWithLayout = () => <ProfileIssuesPage
 
 ProfileSubscribedIssuesPage.getLayout = function getLayout(page: ReactElement) {
   return (
-    <AppLayout header={<UserProfileHeader />}>
+    <AppLayout header={<UserProfileHeader type="Subscribed" />}>
       <ProfileAuthWrapper showProfileIssuesFilter>{page}</ProfileAuthWrapper>
     </AppLayout>
   );
diff --git a/web/pages/profile/activity.tsx b/web/pages/profile/activity.tsx
index e76473cf4..d0c83ffdb 100644
--- a/web/pages/profile/activity.tsx
+++ b/web/pages/profile/activity.tsx
@@ -21,6 +21,7 @@ import { USER_ACTIVITY } from "constants/fetch-keys";
 import { calculateTimeAgo } from "helpers/date-time.helper";
 // type
 import { NextPageWithLayout } from "lib/types";
+import { SidebarHamburgerToggle } from "components/core/sidebar/sidebar-menu-hamburger-toggle";
 
 const userService = new UserService();
 
@@ -30,8 +31,10 @@ const ProfileActivityPage: NextPageWithLayout = observer(() => {
   const { currentUser } = useUser();
 
   return (
-    <section className="mx-auto mt-16 flex h-full w-full flex-col overflow-hidden px-8 pb-8 lg:w-3/5">
-      <div className="flex items-center border-b border-custom-border-100 pb-3.5">
+
+    <section className="mx-auto mt-5  md:mt-16 flex h-full w-full flex-col overflow-hidden 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>
       {userActivity ? (
@@ -94,12 +97,12 @@ const ProfileActivityPage: NextPageWithLayout = observer(() => {
 
               const message =
                 activityItem.verb === "created" &&
-                activityItem.field !== "cycles" &&
-                activityItem.field !== "modules" &&
-                activityItem.field !== "attachment" &&
-                activityItem.field !== "link" &&
-                activityItem.field !== "estimate" &&
-                !activityItem.field ? (
+                  activityItem.field !== "cycles" &&
+                  activityItem.field !== "modules" &&
+                  activityItem.field !== "attachment" &&
+                  activityItem.field !== "link" &&
+                  activityItem.field !== "estimate" &&
+                  !activityItem.field ? (
                   <span>
                     created <IssueLink activity={activityItem} />
                   </span>
@@ -187,6 +190,7 @@ const ProfileActivityPage: NextPageWithLayout = observer(() => {
         </Loader>
       )}
     </section>
+
   );
 });
 
diff --git a/web/pages/profile/change-password.tsx b/web/pages/profile/change-password.tsx
index 59bc657c7..4641837fd 100644
--- a/web/pages/profile/change-password.tsx
+++ b/web/pages/profile/change-password.tsx
@@ -14,6 +14,7 @@ import { ProfileSettingsLayout } from "layouts/settings-layout";
 import { Button, Input, Spinner } from "@plane/ui";
 // types
 import { NextPageWithLayout } from "lib/types";
+import { SidebarHamburgerToggle } from "components/core/sidebar/sidebar-menu-hamburger-toggle";
 
 interface FormValues {
   old_password: string;
@@ -86,6 +87,10 @@ const ChangePasswordPage: NextPageWithLayout = observer(() => {
     );
 
   return (
+    <div className="flex flex-col h-full">
+      <div className="block md:hidden flex-shrink-0 border-b border-custom-border-200 p-4">
+        <SidebarHamburgerToggle />
+      </div>
     <form
       onSubmit={handleSubmit(handleChangePassword)}
       className="mx-auto mt-16 flex h-full w-full flex-col gap-8 px-8 pb-8 lg:w-3/5"
@@ -168,6 +173,7 @@ const ChangePasswordPage: NextPageWithLayout = observer(() => {
         </Button>
       </div>
     </form>
+    </div>
   );
 });
 
diff --git a/web/pages/profile/index.tsx b/web/pages/profile/index.tsx
index 294ef3574..655d6a4bd 100644
--- a/web/pages/profile/index.tsx
+++ b/web/pages/profile/index.tsx
@@ -23,6 +23,7 @@ import type { NextPageWithLayout } from "lib/types";
 // constants
 import { USER_ROLES } from "constants/workspace";
 import { TIME_ZONES } from "constants/timezones";
+import { SidebarHamburgerToggle } from "components/core/sidebar/sidebar-menu-hamburger-toggle";
 
 const defaultValues: Partial<IUser> = {
   avatar: "",
@@ -56,7 +57,7 @@ const ProfileSettingsPage: NextPageWithLayout = observer(() => {
   // store hooks
   const { currentUser: myProfile, updateCurrentUser, currentUserLoader } = useUser();
   // custom hooks
-  const {} = useUserAuth({ user: myProfile, isLoading: currentUserLoader });
+  const { } = useUserAuth({ user: myProfile, isLoading: currentUserLoader });
 
   useEffect(() => {
     reset({ ...defaultValues, ...myProfile });
@@ -136,304 +137,310 @@ const ProfileSettingsPage: NextPageWithLayout = observer(() => {
 
   return (
     <>
-      <Controller
-        control={control}
-        name="avatar"
-        render={({ field: { onChange, value } }) => (
-          <UserImageUploadModal
-            isOpen={isImageUploadModalOpen}
-            onClose={() => setIsImageUploadModalOpen(false)}
-            isRemoving={isRemoving}
-            handleDelete={() => handleDelete(myProfile?.avatar, true)}
-            onSuccess={(url) => {
-              onChange(url);
-              handleSubmit(onSubmit)();
-              setIsImageUploadModalOpen(false);
-            }}
-            value={value && value.trim() !== "" ? value : null}
-          />
-        )}
-      />
-      <DeactivateAccountModal isOpen={deactivateAccountModal} onClose={() => setDeactivateAccountModal(false)} />
-      <div className="mx-auto flex h-full w-full flex-col space-y-10 overflow-y-auto pt-16 px-8 pb-8 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={myProfile?.first_name ?? "Cover image"}
+      <div className="flex flex-col h-full">
+        <div className="block md:hidden flex-shrink-0 border-b border-custom-border-200 p-4">
+          <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(myProfile?.avatar, true)}
+                onSuccess={(url) => {
+                  onChange(url);
+                  handleSubmit(onSubmit)();
+                  setIsImageUploadModalOpen(false);
+                }}
+                value={value && value.trim() !== "" ? value : null}
               />
-              <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">
-                          <User2 className="h-full w-full text-custom-text-200" />
-                        </div>
-                      ) : (
-                        <div className="relative h-16 w-16 overflow-hidden">
-                          <img
-                            src={watch("avatar")}
-                            className="absolute left-0 top-0 h-full w-full rounded-lg object-cover"
-                            onClick={() => setIsImageUploadModalOpen(true)}
-                            alt={myProfile.display_name}
-                            role="button"
-                          />
-                        </div>
+            )}
+          />
+          <DeactivateAccountModal isOpen={deactivateAccountModal} onClose={() => setDeactivateAccountModal(false)} />
+          <div className="mx-auto flex h-full w-full flex-col space-y-10 overflow-y-auto pt-10 md:pt-16 px-8 pb-8 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={myProfile?.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">
+                              <User2 className="h-full w-full text-custom-text-200" />
+                            </div>
+                          ) : (
+                            <div className="relative h-16 w-16 overflow-hidden">
+                              <img
+                                src={watch("avatar")}
+                                className="absolute left-0 top-0 h-full w-full rounded-lg object-cover"
+                                onClick={() => setIsImageUploadModalOpen(true)}
+                                alt={myProfile.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"}
+                        />
                       )}
-                    </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"}
-                    />
-                  )}
-                />
-              </div>
-            </div>
+                <div className="item-center mt-4 flex justify-between 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="item-center mt-4 flex justify-between 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/${myProfile.id}`}>
+                  {/* <Link href={`/profile/${myProfile.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 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"
+                <div className="grid grid-cols-1 gap-6 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"
-                      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" : ""}`}
+                      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" : ""}`}
+                        />
+                      )}
                     />
-                  )}
-                />
-                {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"
-                    />
-                  )}
-                />
-              </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 rounded-md cursor-not-allowed !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" : ""}`}
-                    />
-                  )}
-                />
-                {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>
-        </form>
-        <Disclosure as="div" className="border-t border-custom-border-100 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>
+                    {errors.first_name && <span className="text-xs text-red-500">Please enter first name</span>}
                   </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"
+                        />
+                      )}
+                    />
+                  </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 rounded-md cursor-not-allowed !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" : ""}`}
+                        />
+                      )}
+                    />
+                    {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>
+            </form>
+            <Disclosure as="div" className="border-t border-custom-border-100 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>
+        </div>
       </div>
     </>
   );
diff --git a/web/pages/profile/preferences/theme.tsx b/web/pages/profile/preferences/theme.tsx
index 51386bc29..0885ff6c8 100644
--- a/web/pages/profile/preferences/theme.tsx
+++ b/web/pages/profile/preferences/theme.tsx
@@ -48,7 +48,7 @@ const ProfilePreferencesThemePage: NextPageWithLayout = observer(() => {
   return (
     <>
       {currentUser ? (
-        <div className="mx-auto mt-14 h-full w-full overflow-y-auto px-6 lg:px-20 pb-8">
+        <div className="mx-auto mt-10 md:mt-14 h-full w-full overflow-y-auto px-6 lg:px-20 pb-8">
           <div className="flex items-center border-b border-custom-border-100 pb-3.5">
             <h3 className="text-xl font-medium">Preferences</h3>
           </div>
diff --git a/web/store/application/theme.store.ts b/web/store/application/theme.store.ts
index 1c6f792eb..7ecc0e770 100644
--- a/web/store/application/theme.store.ts
+++ b/web/store/application/theme.store.ts
@@ -7,15 +7,18 @@ export interface IThemeStore {
   // observables
   theme: string | null;
   sidebarCollapsed: boolean | undefined;
+  profileSidebarCollapsed: boolean | undefined;
   // actions
   toggleSidebar: (collapsed?: boolean) => void;
   setTheme: (theme: any) => void;
+  toggleProfileSidebar: (collapsed?: boolean) => void;
 }
 
 export class ThemeStore implements IThemeStore {
   // observables
   sidebarCollapsed: boolean | undefined = undefined;
   theme: string | null = null;
+  profileSidebarCollapsed: boolean | undefined = undefined;
   // root store
   rootStore;
 
@@ -24,9 +27,11 @@ export class ThemeStore implements IThemeStore {
       // observable
       sidebarCollapsed: observable.ref,
       theme: observable.ref,
+      profileSidebarCollapsed: observable.ref,
       // action
       toggleSidebar: action,
       setTheme: action,
+      toggleProfileSidebar: action,
       // computed
     });
     // root store
@@ -46,6 +51,19 @@ export class ThemeStore implements IThemeStore {
     localStorage.setItem("app_sidebar_collapsed", this.sidebarCollapsed.toString());
   };
 
+  /**
+   * Toggle the profile sidebar collapsed state
+   * @param collapsed
+   */
+  toggleProfileSidebar = (collapsed?: boolean) => {
+    if (collapsed === undefined) {
+      this.profileSidebarCollapsed = !this.profileSidebarCollapsed;
+    } else {
+      this.profileSidebarCollapsed = collapsed;
+    }
+    localStorage.setItem("profile_sidebar_collapsed", this.profileSidebarCollapsed.toString());
+  };
+
   /**
    * Sets the user theme and applies it to the platform
    * @param _theme

From e69fcd410c0848c47cc7f13d7ed1c142c4b23e6b Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Thu, 8 Feb 2024 17:53:36 +0530
Subject: [PATCH 34/58] chore: custom menu dropdown improvement (#3599)

* conflict: merge conflict resolved

* chore: breadcrumbs component improvement
---
 packages/ui/src/breadcrumbs/breadcrumbs.tsx | 2 +-
 packages/ui/src/dropdowns/custom-menu.tsx   | 7 +++++++
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/packages/ui/src/breadcrumbs/breadcrumbs.tsx b/packages/ui/src/breadcrumbs/breadcrumbs.tsx
index 0f09764ac..a2ae1d680 100644
--- a/packages/ui/src/breadcrumbs/breadcrumbs.tsx
+++ b/packages/ui/src/breadcrumbs/breadcrumbs.tsx
@@ -10,7 +10,7 @@ type BreadcrumbsProps = {
 const Breadcrumbs = ({ children }: BreadcrumbsProps) => (
   <div className="flex items-center space-x-2">
     {React.Children.map(children, (child, index) => (
-      <div key={index} className="flex flex-wrap items-center gap-2.5">
+      <div key={index} className="flex items-center gap-2.5">
         {child}
         {index !== React.Children.count(children) - 1 && (
           <ChevronRight className="h-3.5 w-3.5 flex-shrink-0 text-custom-text-400" aria-hidden="true" />
diff --git a/packages/ui/src/dropdowns/custom-menu.tsx b/packages/ui/src/dropdowns/custom-menu.tsx
index 7ef99370f..6dc49bc80 100644
--- a/packages/ui/src/dropdowns/custom-menu.tsx
+++ b/packages/ui/src/dropdowns/custom-menu.tsx
@@ -48,7 +48,13 @@ const CustomMenu = (props: ICustomMenuDropdownProps) => {
     if (referenceElement) referenceElement.focus();
   };
   const closeDropdown = () => setIsOpen(false);
+
   const handleKeyDown = useDropdownKeyDown(openDropdown, closeDropdown, isOpen);
+
+  const handleOnClick = () => {
+    if (closeOnSelect) closeDropdown();
+  };
+
   useOutsideClickDetector(dropdownRef, closeDropdown);
 
   let menuItems = (
@@ -90,6 +96,7 @@ const CustomMenu = (props: ICustomMenuDropdownProps) => {
       tabIndex={tabIndex}
       className={cn("relative w-min text-left", className)}
       onKeyDown={handleKeyDown}
+      onClick={handleOnClick}
     >
       {({ open }) => (
         <>

From 4a145f7a06a89b2e24257d5f3ca0e1fdc9abf21d Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Thu, 8 Feb 2024 17:55:57 +0530
Subject: [PATCH 35/58] fix: notification card snooze (#3598)

* fix: resolved event propagation issue with notification card snooze button

* fix: resolved event propagation issue with notification card snooze button
---
 packages/ui/src/dropdowns/custom-menu.tsx          | 9 ++++++---
 web/components/notifications/notification-card.tsx | 3 ---
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/ui/src/dropdowns/custom-menu.tsx b/packages/ui/src/dropdowns/custom-menu.tsx
index 6dc49bc80..a2b5ebe3d 100644
--- a/packages/ui/src/dropdowns/custom-menu.tsx
+++ b/packages/ui/src/dropdowns/custom-menu.tsx
@@ -105,7 +105,8 @@ const CustomMenu = (props: ICustomMenuDropdownProps) => {
               <button
                 ref={setReferenceElement}
                 type="button"
-                onClick={() => {
+                onClick={(e) => {
+                  e.stopPropagation();
                   openDropdown();
                   if (menuButtonOnClick) menuButtonOnClick();
                 }}
@@ -121,7 +122,8 @@ const CustomMenu = (props: ICustomMenuDropdownProps) => {
                   <button
                     ref={setReferenceElement}
                     type="button"
-                    onClick={() => {
+                    onClick={(e) => {
+                      e.stopPropagation();
                       openDropdown();
                       if (menuButtonOnClick) menuButtonOnClick();
                     }}
@@ -145,7 +147,8 @@ const CustomMenu = (props: ICustomMenuDropdownProps) => {
                         ? "cursor-not-allowed text-custom-text-200"
                         : "cursor-pointer hover:bg-custom-background-80"
                     } ${buttonClassName}`}
-                    onClick={() => {
+                    onClick={(e) => {
+                      e.stopPropagation();
                       openDropdown();
                       if (menuButtonOnClick) menuButtonOnClick();
                     }}
diff --git a/web/components/notifications/notification-card.tsx b/web/components/notifications/notification-card.tsx
index 58b79ac3e..7a372c5d8 100644
--- a/web/components/notifications/notification-card.tsx
+++ b/web/components/notifications/notification-card.tsx
@@ -208,9 +208,6 @@ export const NotificationCard: React.FC<NotificationCardProps> = (props) => {
         <Tooltip tooltipContent="Snooze">
           <CustomMenu
             className="flex items-center"
-            menuButtonOnClick={(e: { stopPropagation: () => void }) => {
-              e.stopPropagation();
-            }}
             customButton={
               <div className="flex w-full items-center gap-x-2 rounded bg-custom-background-80 p-0.5 text-sm hover:bg-custom-background-100">
                 <Clock className="h-3.5 w-3.5 text-custom-text-300" />

From 2e129682b7b9e66c6115efd18ecb2b6d1b29397d Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com>
Date: Thu, 8 Feb 2024 17:57:22 +0530
Subject: [PATCH 36/58] fix: incorrect dashboard tab (#3597)

* fix: incorrect dashboard tab

* chore: added comments for the helper functions

* style: updated tabs list UI

* chore: default widget filters changed

* fix: build errors

---------

Co-authored-by: NarayanBavisetti <narayan3119@gmail.com>
---
 .../db/migrations/0059_auto_20240208_0957.py  | 33 +++++++++++++++++++
 packages/types/src/dashboard.d.ts             |  8 ++---
 .../dashboard/widgets/assigned-issues.tsx     | 14 ++++----
 .../dashboard/widgets/created-issues.tsx      | 14 ++++----
 .../widgets/issue-panels/tabs-list.tsx        | 32 +++++++++---------
 .../dashboard/widgets/issues-by-priority.tsx  | 10 +++---
 .../widgets/issues-by-state-group.tsx         |  9 ++---
 web/helpers/dashboard.helper.ts               | 25 ++++++++++++++
 8 files changed, 102 insertions(+), 43 deletions(-)
 create mode 100644 apiserver/plane/db/migrations/0059_auto_20240208_0957.py

diff --git a/apiserver/plane/db/migrations/0059_auto_20240208_0957.py b/apiserver/plane/db/migrations/0059_auto_20240208_0957.py
new file mode 100644
index 000000000..c4c43fa4b
--- /dev/null
+++ b/apiserver/plane/db/migrations/0059_auto_20240208_0957.py
@@ -0,0 +1,33 @@
+# Generated by Django 4.2.7 on 2024-02-08 09:57
+
+from django.db import migrations
+
+
+def widgets_filter_change(apps, schema_editor):
+    Widget = apps.get_model("db", "Widget")
+    widgets_to_update = []
+
+    # Define the filter dictionaries for each widget key
+    filters_mapping = {
+        "assigned_issues": {"duration": "none", "tab": "pending"},
+        "created_issues": {"duration": "none", "tab": "pending"},
+        "issues_by_state_groups": {"duration": "none"},
+        "issues_by_priority": {"duration": "none"},
+    }
+
+    # Iterate over widgets and update filters if applicable
+    for widget in Widget.objects.all():
+        if widget.key in filters_mapping:
+            widget.filters = filters_mapping[widget.key]
+            widgets_to_update.append(widget)
+
+    # Bulk update the widgets
+    Widget.objects.bulk_update(widgets_to_update, ["filters"], batch_size=10)
+
+class Migration(migrations.Migration):
+    dependencies = [
+        ('db', '0058_alter_moduleissue_issue_and_more'),
+    ]
+    operations = [
+        migrations.RunPython(widgets_filter_change)
+    ]
diff --git a/packages/types/src/dashboard.d.ts b/packages/types/src/dashboard.d.ts
index 7cfa6aa85..407b5cd79 100644
--- a/packages/types/src/dashboard.d.ts
+++ b/packages/types/src/dashboard.d.ts
@@ -24,21 +24,21 @@ export type TDurationFilterOptions =
 
 // widget filters
 export type TAssignedIssuesWidgetFilters = {
-  target_date?: TDurationFilterOptions;
+  duration?: TDurationFilterOptions;
   tab?: TIssuesListTypes;
 };
 
 export type TCreatedIssuesWidgetFilters = {
-  target_date?: TDurationFilterOptions;
+  duration?: TDurationFilterOptions;
   tab?: TIssuesListTypes;
 };
 
 export type TIssuesByStateGroupsWidgetFilters = {
-  target_date?: TDurationFilterOptions;
+  duration?: TDurationFilterOptions;
 };
 
 export type TIssuesByPriorityWidgetFilters = {
-  target_date?: TDurationFilterOptions;
+  duration?: TDurationFilterOptions;
 };
 
 export type TWidgetFiltersFormData =
diff --git a/web/components/dashboard/widgets/assigned-issues.tsx b/web/components/dashboard/widgets/assigned-issues.tsx
index e2a54c05f..ed6bac324 100644
--- a/web/components/dashboard/widgets/assigned-issues.tsx
+++ b/web/components/dashboard/widgets/assigned-issues.tsx
@@ -13,7 +13,7 @@ import {
   WidgetProps,
 } from "components/dashboard/widgets";
 // helpers
-import { getCustomDates, getRedirectionFilters } from "helpers/dashboard.helper";
+import { getCustomDates, getRedirectionFilters, getTabKey } from "helpers/dashboard.helper";
 // types
 import { TAssignedIssuesWidgetFilters, TAssignedIssuesWidgetResponse } from "@plane/types";
 // constants
@@ -30,8 +30,8 @@ export const AssignedIssuesWidget: React.FC<WidgetProps> = observer((props) => {
   // derived values
   const widgetDetails = getWidgetDetails(workspaceSlug, dashboardId, WIDGET_KEY);
   const widgetStats = getWidgetStats<TAssignedIssuesWidgetResponse>(workspaceSlug, dashboardId, WIDGET_KEY);
-  const selectedTab = widgetDetails?.widget_filters.tab ?? "pending";
-  const selectedDurationFilter = widgetDetails?.widget_filters.target_date ?? "none";
+  const selectedDurationFilter = widgetDetails?.widget_filters.duration ?? "none";
+  const selectedTab = getTabKey(selectedDurationFilter, widgetDetails?.widget_filters.tab);
 
   const handleUpdateFilters = async (filters: Partial<TAssignedIssuesWidgetFilters>) => {
     if (!widgetDetails) return;
@@ -43,7 +43,7 @@ export const AssignedIssuesWidget: React.FC<WidgetProps> = observer((props) => {
       filters,
     });
 
-    const filterDates = getCustomDates(filters.target_date ?? selectedDurationFilter);
+    const filterDates = getCustomDates(filters.duration ?? selectedDurationFilter);
     fetchWidgetStats(workspaceSlug, dashboardId, {
       widget_key: WIDGET_KEY,
       issue_type: filters.tab ?? selectedTab,
@@ -86,19 +86,19 @@ export const AssignedIssuesWidget: React.FC<WidgetProps> = observer((props) => {
 
             // switch to pending tab if target date is changed to none
             if (val === "none" && selectedTab !== "completed") {
-              handleUpdateFilters({ target_date: val, tab: "pending" });
+              handleUpdateFilters({ duration: val, tab: "pending" });
               return;
             }
             // switch to upcoming tab if target date is changed to other than none
             if (val !== "none" && selectedDurationFilter === "none" && selectedTab !== "completed") {
               handleUpdateFilters({
-                target_date: val,
+                duration: val,
                 tab: "upcoming",
               });
               return;
             }
 
-            handleUpdateFilters({ target_date: val });
+            handleUpdateFilters({ duration: val });
           }}
         />
       </div>
diff --git a/web/components/dashboard/widgets/created-issues.tsx b/web/components/dashboard/widgets/created-issues.tsx
index dcdff6685..4ef5708c8 100644
--- a/web/components/dashboard/widgets/created-issues.tsx
+++ b/web/components/dashboard/widgets/created-issues.tsx
@@ -13,7 +13,7 @@ import {
   WidgetProps,
 } from "components/dashboard/widgets";
 // helpers
-import { getCustomDates, getRedirectionFilters } from "helpers/dashboard.helper";
+import { getCustomDates, getRedirectionFilters, getTabKey } from "helpers/dashboard.helper";
 // types
 import { TCreatedIssuesWidgetFilters, TCreatedIssuesWidgetResponse } from "@plane/types";
 // constants
@@ -30,8 +30,8 @@ export const CreatedIssuesWidget: React.FC<WidgetProps> = observer((props) => {
   // derived values
   const widgetDetails = getWidgetDetails(workspaceSlug, dashboardId, WIDGET_KEY);
   const widgetStats = getWidgetStats<TCreatedIssuesWidgetResponse>(workspaceSlug, dashboardId, WIDGET_KEY);
-  const selectedTab = widgetDetails?.widget_filters.tab ?? "pending";
-  const selectedDurationFilter = widgetDetails?.widget_filters.target_date ?? "none";
+  const selectedDurationFilter = widgetDetails?.widget_filters.duration ?? "none";
+  const selectedTab = getTabKey(selectedDurationFilter, widgetDetails?.widget_filters.tab);
 
   const handleUpdateFilters = async (filters: Partial<TCreatedIssuesWidgetFilters>) => {
     if (!widgetDetails) return;
@@ -43,7 +43,7 @@ export const CreatedIssuesWidget: React.FC<WidgetProps> = observer((props) => {
       filters,
     });
 
-    const filterDates = getCustomDates(filters.target_date ?? selectedDurationFilter);
+    const filterDates = getCustomDates(filters.duration ?? selectedDurationFilter);
     fetchWidgetStats(workspaceSlug, dashboardId, {
       widget_key: WIDGET_KEY,
       issue_type: filters.tab ?? selectedTab,
@@ -83,19 +83,19 @@ export const CreatedIssuesWidget: React.FC<WidgetProps> = observer((props) => {
 
             // switch to pending tab if target date is changed to none
             if (val === "none" && selectedTab !== "completed") {
-              handleUpdateFilters({ target_date: val, tab: "pending" });
+              handleUpdateFilters({ duration: val, tab: "pending" });
               return;
             }
             // switch to upcoming tab if target date is changed to other than none
             if (val !== "none" && selectedDurationFilter === "none" && selectedTab !== "completed") {
               handleUpdateFilters({
-                target_date: val,
+                duration: val,
                 tab: "upcoming",
               });
               return;
             }
 
-            handleUpdateFilters({ target_date: val });
+            handleUpdateFilters({ duration: val });
           }}
         />
       </div>
diff --git a/web/components/dashboard/widgets/issue-panels/tabs-list.tsx b/web/components/dashboard/widgets/issue-panels/tabs-list.tsx
index 9ce00a03c..306c2fdeb 100644
--- a/web/components/dashboard/widgets/issue-panels/tabs-list.tsx
+++ b/web/components/dashboard/widgets/issue-panels/tabs-list.tsx
@@ -16,42 +16,40 @@ export const TabsList: React.FC<Props> = observer((props) => {
   const { durationFilter, selectedTab } = props;
 
   const tabsList = durationFilter === "none" ? UNFILTERED_ISSUES_TABS_LIST : FILTERED_ISSUES_TABS_LIST;
-  const selectedTabIndex = tabsList.findIndex((tab) => tab.key === (selectedTab ?? "pending"));
+  const selectedTabIndex = tabsList.findIndex((tab) => tab.key === selectedTab);
 
   return (
     <Tab.List
       as="div"
-      className="relative border-[0.5px] border-custom-border-200 rounded bg-custom-background-80 grid"
+      className="relative border-[0.5px] border-custom-border-200 rounded bg-custom-background-80 p-[1px] grid"
       style={{
         gridTemplateColumns: `repeat(${tabsList.length}, 1fr)`,
       }}
     >
       <div
-        className={cn("absolute bg-custom-background-100 rounded transition-all duration-500 ease-in-out", {
-          // right shadow
-          "shadow-[2px_0_8px_rgba(167,169,174,0.15)]": selectedTabIndex !== tabsList.length - 1,
-          // left shadow
-          "shadow-[-2px_0_8px_rgba(167,169,174,0.15)]": selectedTabIndex !== 0,
-        })}
+        className={cn(
+          "absolute top-1/2 left-[1px] bg-custom-background-100 rounded-[3px] transition-all duration-500 ease-in-out",
+          {
+            // right shadow
+            "shadow-[2px_0_8px_rgba(167,169,174,0.15)]": selectedTabIndex !== tabsList.length - 1,
+            // left shadow
+            "shadow-[-2px_0_8px_rgba(167,169,174,0.15)]": selectedTabIndex !== 0,
+          }
+        )}
         style={{
-          height: "calc(100% - 1px)",
-          width: `${100 / tabsList.length}%`,
-          transform: `translateX(${selectedTabIndex * 100}%)`,
+          height: "calc(100% - 2px)",
+          width: `calc(${100 / tabsList.length}% - 1px)`,
+          transform: `translate(${selectedTabIndex * 100}%, -50%)`,
         }}
       />
       {tabsList.map((tab) => (
         <Tab
           key={tab.key}
           className={cn(
-            "relative z-[1] font-semibold text-xs rounded py-1.5 text-custom-text-400 focus:outline-none",
-            "transition duration-500",
+            "relative z-[1] font-semibold text-xs rounded-[3px] py-1.5 text-custom-text-400 focus:outline-none transition duration-500",
             {
               "text-custom-text-100 bg-custom-background-100": selectedTab === tab.key,
               "hover:text-custom-text-300": selectedTab !== tab.key,
-              // // right shadow
-              // "shadow-[2px_0_8px_rgba(167,169,174,0.15)]": selectedTabIndex !== tabsList.length - 1,
-              // // left shadow
-              // "shadow-[-2px_0_8px_rgba(167,169,174,0.15)]": selectedTabIndex !== 0,
             }
           )}
         >
diff --git a/web/components/dashboard/widgets/issues-by-priority.tsx b/web/components/dashboard/widgets/issues-by-priority.tsx
index 97884bccc..91e321b05 100644
--- a/web/components/dashboard/widgets/issues-by-priority.tsx
+++ b/web/components/dashboard/widgets/issues-by-priority.tsx
@@ -73,8 +73,10 @@ export const IssuesByPriorityWidget: React.FC<WidgetProps> = observer((props) =>
   const { dashboardId, workspaceSlug } = props;
   // store hooks
   const { fetchWidgetStats, getWidgetDetails, getWidgetStats, updateDashboardWidgetFilters } = useDashboard();
+  // derived values
   const widgetDetails = getWidgetDetails(workspaceSlug, dashboardId, WIDGET_KEY);
   const widgetStats = getWidgetStats<TIssuesByPriorityWidgetResponse[]>(workspaceSlug, dashboardId, WIDGET_KEY);
+  const selectedDuration = widgetDetails?.widget_filters.duration ?? "none";
 
   const handleUpdateFilters = async (filters: Partial<TIssuesByPriorityWidgetFilters>) => {
     if (!widgetDetails) return;
@@ -84,7 +86,7 @@ export const IssuesByPriorityWidget: React.FC<WidgetProps> = observer((props) =>
       filters,
     });
 
-    const filterDates = getCustomDates(filters.target_date ?? widgetDetails.widget_filters.target_date ?? "none");
+    const filterDates = getCustomDates(filters.duration ?? selectedDuration);
     fetchWidgetStats(workspaceSlug, dashboardId, {
       widget_key: WIDGET_KEY,
       ...(filterDates.trim() !== "" ? { target_date: filterDates } : {}),
@@ -92,7 +94,7 @@ export const IssuesByPriorityWidget: React.FC<WidgetProps> = observer((props) =>
   };
 
   useEffect(() => {
-    const filterDates = getCustomDates(widgetDetails?.widget_filters.target_date ?? "none");
+    const filterDates = getCustomDates(selectedDuration);
     fetchWidgetStats(workspaceSlug, dashboardId, {
       widget_key: WIDGET_KEY,
       ...(filterDates.trim() !== "" ? { target_date: filterDates } : {}),
@@ -139,10 +141,10 @@ export const IssuesByPriorityWidget: React.FC<WidgetProps> = observer((props) =>
           Assigned by priority
         </Link>
         <DurationFilterDropdown
-          value={widgetDetails.widget_filters.target_date ?? "none"}
+          value={selectedDuration}
           onChange={(val) =>
             handleUpdateFilters({
-              target_date: val,
+              duration: val,
             })
           }
         />
diff --git a/web/components/dashboard/widgets/issues-by-state-group.tsx b/web/components/dashboard/widgets/issues-by-state-group.tsx
index 2f7f6ffae..a0eb6c70f 100644
--- a/web/components/dashboard/widgets/issues-by-state-group.tsx
+++ b/web/components/dashboard/widgets/issues-by-state-group.tsx
@@ -34,6 +34,7 @@ export const IssuesByStateGroupWidget: React.FC<WidgetProps> = observer((props)
   // derived values
   const widgetDetails = getWidgetDetails(workspaceSlug, dashboardId, WIDGET_KEY);
   const widgetStats = getWidgetStats<TIssuesByStateGroupsWidgetResponse[]>(workspaceSlug, dashboardId, WIDGET_KEY);
+  const selectedDuration = widgetDetails?.widget_filters.duration ?? "none";
 
   const handleUpdateFilters = async (filters: Partial<TIssuesByStateGroupsWidgetFilters>) => {
     if (!widgetDetails) return;
@@ -43,7 +44,7 @@ export const IssuesByStateGroupWidget: React.FC<WidgetProps> = observer((props)
       filters,
     });
 
-    const filterDates = getCustomDates(filters.target_date ?? widgetDetails.widget_filters.target_date ?? "none");
+    const filterDates = getCustomDates(filters.duration ?? selectedDuration);
     fetchWidgetStats(workspaceSlug, dashboardId, {
       widget_key: WIDGET_KEY,
       ...(filterDates.trim() !== "" ? { target_date: filterDates } : {}),
@@ -52,7 +53,7 @@ export const IssuesByStateGroupWidget: React.FC<WidgetProps> = observer((props)
 
   // fetch widget stats
   useEffect(() => {
-    const filterDates = getCustomDates(widgetDetails?.widget_filters.target_date ?? "none");
+    const filterDates = getCustomDates(selectedDuration);
     fetchWidgetStats(workspaceSlug, dashboardId, {
       widget_key: WIDGET_KEY,
       ...(filterDates.trim() !== "" ? { target_date: filterDates } : {}),
@@ -138,10 +139,10 @@ export const IssuesByStateGroupWidget: React.FC<WidgetProps> = observer((props)
           Assigned by state
         </Link>
         <DurationFilterDropdown
-          value={widgetDetails.widget_filters.target_date ?? "none"}
+          value={selectedDuration}
           onChange={(val) =>
             handleUpdateFilters({
-              target_date: val,
+              duration: val,
             })
           }
         />
diff --git a/web/helpers/dashboard.helper.ts b/web/helpers/dashboard.helper.ts
index 8003f15e3..90319a90b 100644
--- a/web/helpers/dashboard.helper.ts
+++ b/web/helpers/dashboard.helper.ts
@@ -4,6 +4,10 @@ import { renderFormattedPayloadDate } from "./date-time.helper";
 // types
 import { TDurationFilterOptions, TIssuesListTypes } from "@plane/types";
 
+/**
+ * @description returns date range based on the duration filter
+ * @param duration
+ */
 export const getCustomDates = (duration: TDurationFilterOptions): string => {
   const today = new Date();
   let firstDay, lastDay;
@@ -30,6 +34,10 @@ export const getCustomDates = (duration: TDurationFilterOptions): string => {
   }
 };
 
+/**
+ * @description returns redirection filters for the issues list
+ * @param type
+ */
 export const getRedirectionFilters = (type: TIssuesListTypes): string => {
   const today = renderFormattedPayloadDate(new Date());
 
@@ -44,3 +52,20 @@ export const getRedirectionFilters = (type: TIssuesListTypes): string => {
 
   return filterParams;
 };
+
+/**
+ * @description returns the tab key based on the duration filter
+ * @param duration
+ * @param tab
+ */
+export const getTabKey = (duration: TDurationFilterOptions, tab: TIssuesListTypes | undefined): TIssuesListTypes => {
+  if (!tab) return "completed";
+
+  if (tab === "completed") return tab;
+
+  if (duration === "none") return "pending";
+  else {
+    if (["upcoming", "overdue"].includes(tab)) return tab;
+    else return "upcoming";
+  }
+};

From 3a14f19c993933415f79e98648877dbf995cd098 Mon Sep 17 00:00:00 2001
From: Ramesh Kumar Chandra
 <31303617+rameshkumarchandra@users.noreply.github.com>
Date: Fri, 9 Feb 2024 15:52:25 +0530
Subject: [PATCH 37/58] style: responsive analytics (#3604)

---
 .../custom-analytics/custom-analytics.tsx     | 28 +++++++----
 .../analytics/custom-analytics/select-bar.tsx |  5 +-
 .../sidebar/projects-list.tsx                 |  4 +-
 .../sidebar/sidebar-header.tsx                |  6 +--
 .../custom-analytics/sidebar/sidebar.tsx      | 46 +++++++++----------
 .../analytics/project-modal/main-content.tsx  |  7 ++-
 web/components/headers/user-profile.tsx       |  2 +-
 .../headers/workspace-analytics.tsx           | 35 ++++++++++++--
 web/components/profile/sidebar.tsx            | 16 +++----
 web/pages/[workspaceSlug]/analytics.tsx       | 15 ++++--
 web/store/application/theme.store.ts          | 18 ++++++++
 11 files changed, 118 insertions(+), 64 deletions(-)

diff --git a/web/components/analytics/custom-analytics/custom-analytics.tsx b/web/components/analytics/custom-analytics/custom-analytics.tsx
index a3c083b02..0c3ec8925 100644
--- a/web/components/analytics/custom-analytics/custom-analytics.tsx
+++ b/web/components/analytics/custom-analytics/custom-analytics.tsx
@@ -10,6 +10,8 @@ import { CustomAnalyticsSelectBar, CustomAnalyticsMainContent, CustomAnalyticsSi
 import { IAnalyticsParams } from "@plane/types";
 // fetch-keys
 import { ANALYTICS } from "constants/fetch-keys";
+import { cn } from "helpers/common.helper";
+import { useApplication } from "hooks/store";
 
 type Props = {
   additionalParams?: Partial<IAnalyticsParams>;
@@ -46,11 +48,13 @@ export const CustomAnalytics: React.FC<Props> = observer((props) => {
     workspaceSlug ? () => analyticsService.getAnalytics(workspaceSlug.toString(), params) : null
   );
 
+  const { theme: themeStore } = useApplication();
+
   const isProjectLevel = projectId ? true : false;
 
   return (
-    <div className={`flex flex-col-reverse overflow-hidden ${fullScreen ? "md:grid md:h-full md:grid-cols-4" : ""}`}>
-      <div className="col-span-3 flex h-full flex-col overflow-hidden">
+    <div className={cn("relative w-full h-full flex overflow-hidden", isProjectLevel ? "flex-col-reverse" : "")}>
+      <div className="w-full flex h-full flex-col overflow-hidden">
         <CustomAnalyticsSelectBar
           control={control}
           setValue={setValue}
@@ -61,16 +65,22 @@ export const CustomAnalytics: React.FC<Props> = observer((props) => {
         <CustomAnalyticsMainContent
           analytics={analytics}
           error={analyticsError}
-          fullScreen={fullScreen}
           params={params}
+          fullScreen={fullScreen}
         />
       </div>
-      <CustomAnalyticsSidebar
-        analytics={analytics}
-        params={params}
-        fullScreen={fullScreen}
-        isProjectLevel={isProjectLevel}
-      />
+
+      <div
+        className={cn(
+          "border-l border-custom-border-200 transition-all",
+          !isProjectLevel
+            ? "absolute right-0 top-0 bottom-0 md:relative flex-shrink-0 h-full max-w-[250px] sm:max-w-full"
+            : ""
+        )}
+        style={themeStore.workspaceAnalyticsSidebarCollapsed ? { right: `-${window?.innerWidth || 0}px` } : {}}
+      >
+        <CustomAnalyticsSidebar analytics={analytics} params={params} isProjectLevel={isProjectLevel} />
+      </div>
     </div>
   );
 });
diff --git a/web/components/analytics/custom-analytics/select-bar.tsx b/web/components/analytics/custom-analytics/select-bar.tsx
index 19f83e40b..31acb8471 100644
--- a/web/components/analytics/custom-analytics/select-bar.tsx
+++ b/web/components/analytics/custom-analytics/select-bar.tsx
@@ -22,9 +22,8 @@ export const CustomAnalyticsSelectBar: React.FC<Props> = observer((props) => {
 
   return (
     <div
-      className={`grid items-center gap-4 px-5 py-2.5 ${isProjectLevel ? "grid-cols-3" : "grid-cols-2"} ${
-        fullScreen ? "md:py-5 lg:grid-cols-4" : ""
-      }`}
+      className={`grid items-center gap-4 px-5 py-2.5 ${isProjectLevel ? "grid-cols-1 sm:grid-cols-3" : "grid-cols-2"} ${fullScreen ? "md:py-5 lg:grid-cols-4" : ""
+        }`}
     >
       {!isProjectLevel && (
         <div>
diff --git a/web/components/analytics/custom-analytics/sidebar/projects-list.tsx b/web/components/analytics/custom-analytics/sidebar/projects-list.tsx
index d09e8def4..f7ba07b75 100644
--- a/web/components/analytics/custom-analytics/sidebar/projects-list.tsx
+++ b/web/components/analytics/custom-analytics/sidebar/projects-list.tsx
@@ -17,9 +17,9 @@ export const CustomAnalyticsSidebarProjectsList: React.FC<Props> = observer((pro
   const { getProjectById } = useProject();
 
   return (
-    <div className="hidden h-full overflow-hidden md:flex md:flex-col">
+    <div className="relative flex flex-col gap-4 h-full">
       <h4 className="font-medium">Selected Projects</h4>
-      <div className="mt-4 h-full space-y-6 overflow-y-auto">
+      <div className="relative space-y-6 overflow-hidden overflow-y-auto">
         {projectIds.map((projectId) => {
           const project = getProjectById(projectId);
 
diff --git a/web/components/analytics/custom-analytics/sidebar/sidebar-header.tsx b/web/components/analytics/custom-analytics/sidebar/sidebar-header.tsx
index 4a18011d1..ee677fe91 100644
--- a/web/components/analytics/custom-analytics/sidebar/sidebar-header.tsx
+++ b/web/components/analytics/custom-analytics/sidebar/sidebar-header.tsx
@@ -26,7 +26,7 @@ export const CustomAnalyticsSidebarHeader = observer(() => {
     <>
       {projectId ? (
         cycleDetails ? (
-          <div className="hidden h-full overflow-y-auto md:block">
+          <div className="h-full overflow-y-auto">
             <h4 className="break-words font-medium">Analytics for {cycleDetails.name}</h4>
             <div className="mt-4 space-y-4">
               <div className="flex items-center gap-2 text-xs">
@@ -52,7 +52,7 @@ export const CustomAnalyticsSidebarHeader = observer(() => {
             </div>
           </div>
         ) : moduleDetails ? (
-          <div className="hidden h-full overflow-y-auto md:block">
+          <div className="h-full overflow-y-auto">
             <h4 className="break-words font-medium">Analytics for {moduleDetails.name}</h4>
             <div className="mt-4 space-y-4">
               <div className="flex items-center gap-2 text-xs">
@@ -78,7 +78,7 @@ export const CustomAnalyticsSidebarHeader = observer(() => {
             </div>
           </div>
         ) : (
-          <div className="hidden h-full overflow-y-auto md:flex md:flex-col">
+          <div className="h-full overflow-y-auto">
             <div className="flex items-center gap-1">
               {projectDetails?.emoji ? (
                 <div className="grid h-6 w-6 flex-shrink-0 place-items-center">{renderEmoji(projectDetails.emoji)}</div>
diff --git a/web/components/analytics/custom-analytics/sidebar/sidebar.tsx b/web/components/analytics/custom-analytics/sidebar/sidebar.tsx
index 59013a3e3..c2e12dc3c 100644
--- a/web/components/analytics/custom-analytics/sidebar/sidebar.tsx
+++ b/web/components/analytics/custom-analytics/sidebar/sidebar.tsx
@@ -1,4 +1,4 @@
-import { useEffect } from "react";
+import { useEffect, } from "react";
 import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
 import { mutate } from "swr";
@@ -19,18 +19,18 @@ import { renderFormattedDate } from "helpers/date-time.helper";
 import { IAnalyticsParams, IAnalyticsResponse, IExportAnalyticsFormData, IWorkspace } from "@plane/types";
 // fetch-keys
 import { ANALYTICS } from "constants/fetch-keys";
+import { cn } from "helpers/common.helper";
 
 type Props = {
   analytics: IAnalyticsResponse | undefined;
   params: IAnalyticsParams;
-  fullScreen: boolean;
   isProjectLevel: boolean;
 };
 
 const analyticsService = new AnalyticsService();
 
 export const CustomAnalyticsSidebar: React.FC<Props> = observer((props) => {
-  const { analytics, params, fullScreen, isProjectLevel = false } = props;
+  const { analytics, params, isProjectLevel = false } = props;
   // router
   const router = useRouter();
   const { workspaceSlug, projectId, cycleId, moduleId } = router.query;
@@ -138,18 +138,14 @@ export const CustomAnalyticsSidebar: React.FC<Props> = observer((props) => {
 
   const selectedProjects = params.project && params.project.length > 0 ? params.project : workspaceProjectIds;
 
+
   return (
-    <div
-      className={`flex items-center justify-between space-y-2 px-5 py-2.5 ${
-        fullScreen
-          ? "overflow-hidden border-l border-custom-border-200 md:h-full md:flex-col md:items-start md:space-y-4 md:border-l md:border-custom-border-200 md:py-5"
-          : ""
-      }`}
+    <div className={cn("relative h-full flex w-full gap-2 justify-between items-start px-5 py-4 bg-custom-sidebar-background-100", !isProjectLevel ? "flex-col" : "")}
     >
       <div className="flex flex-wrap items-center gap-2">
         <div className="flex items-center gap-1 rounded-md bg-custom-background-80 px-3 py-1 text-xs text-custom-text-200">
           <LayersIcon height={14} width={14} />
-          {analytics ? analytics.total : "..."} Issues
+          {analytics ? analytics.total : "..."} <div className={cn(isProjectLevel ? "hidden md:block" : "")}>Issues</div>
         </div>
         {isProjectLevel && (
           <div className="flex items-center gap-1 rounded-md bg-custom-background-80 px-3 py-1 text-xs text-custom-text-200">
@@ -158,36 +154,36 @@ export const CustomAnalyticsSidebar: React.FC<Props> = observer((props) => {
               (cycleId
                 ? cycleDetails?.created_at
                 : moduleId
-                ? moduleDetails?.created_at
-                : projectDetails?.created_at) ?? ""
+                  ? moduleDetails?.created_at
+                  : projectDetails?.created_at) ?? ""
             )}
           </div>
         )}
       </div>
-      <div className="h-full w-full overflow-hidden">
-        {fullScreen ? (
-          <>
-            {!isProjectLevel && selectedProjects && selectedProjects.length > 0 && (
-              <CustomAnalyticsSidebarProjectsList projectIds={selectedProjects} />
-            )}
-            <CustomAnalyticsSidebarHeader />
-          </>
-        ) : null}
+
+      <div className={cn("h-full w-full overflow-hidden", isProjectLevel ? "hidden" : "block")}>
+        <>
+          {!isProjectLevel && selectedProjects && selectedProjects.length > 0 && (
+            <CustomAnalyticsSidebarProjectsList projectIds={selectedProjects} />
+          )}
+          <CustomAnalyticsSidebarHeader />
+        </>
       </div>
-      <div className="flex flex-wrap items-center gap-2 justify-self-end">
+
+      <div className="flex flex-wrap items-center gap-2 justify-end">
         <Button
           variant="neutral-primary"
-          prependIcon={<RefreshCw className="h-3.5 w-3.5" />}
+          prependIcon={<RefreshCw className="h-3 md:h-3.5 w-3 md:w-3.5" />}
           onClick={() => {
             if (!workspaceSlug) return;
 
             mutate(ANALYTICS(workspaceSlug.toString(), params));
           }}
         >
-          Refresh
+          <div className={cn(isProjectLevel ? "hidden md:block" : "")}>Refresh</div>
         </Button>
         <Button variant="primary" prependIcon={<Download className="h-3.5 w-3.5" />} onClick={exportAnalytics}>
-          Export as CSV
+          <div className={cn(isProjectLevel ? "hidden md:block" : "")}>Export as CSV</div>
         </Button>
       </div>
     </div>
diff --git a/web/components/analytics/project-modal/main-content.tsx b/web/components/analytics/project-modal/main-content.tsx
index 09423e6dd..a04a43260 100644
--- a/web/components/analytics/project-modal/main-content.tsx
+++ b/web/components/analytics/project-modal/main-content.tsx
@@ -20,16 +20,15 @@ export const ProjectAnalyticsModalMainContent: React.FC<Props> = observer((props
 
   return (
     <Tab.Group as={React.Fragment}>
-      <Tab.List as="div" className="space-x-2 border-b border-custom-border-200 p-5 pt-0">
+      <Tab.List as="div" className="flex space-x-2 border-b border-custom-border-200 px-0 md:px-5 py-0 md:py-3">
         {ANALYTICS_TABS.map((tab) => (
           <Tab
             key={tab.key}
             className={({ selected }) =>
-              `rounded-3xl border border-custom-border-200 px-4 py-2 text-xs hover:bg-custom-background-80 ${
-                selected ? "bg-custom-background-80" : ""
+              `rounded-0 w-full md:w-max md:rounded-3xl border-b md:border border-custom-border-200 focus:outline-none px-0 md:px-4 py-2 text-xs hover:bg-custom-background-80 ${selected ? "border-custom-primary-100 text-custom-primary-100 md:bg-custom-background-80 md:text-custom-text-200 md:border-custom-border-200" : "border-transparent"
               }`
             }
-            onClick={() => {}}
+            onClick={() => { }}
           >
             {tab.title}
           </Tab>
diff --git a/web/components/headers/user-profile.tsx b/web/components/headers/user-profile.tsx
index f933d4dfa..30bc5b2a9 100644
--- a/web/components/headers/user-profile.tsx
+++ b/web/components/headers/user-profile.tsx
@@ -64,7 +64,7 @@ export const UserProfileHeader: FC<TUserProfileHeader> = observer((props) => {
               </CustomMenu.MenuItem>
             ))}
           </CustomMenu>
-          <button className="transition-all block md:hidden" onClick={() => { themStore.toggleProfileSidebar(); console.log(themStore.profileSidebarCollapsed) }}>
+          <button className="transition-all block md:hidden" onClick={() => { themStore.toggleProfileSidebar() }}>
             <PanelRight className={
               cn("w-4 h-4 block md:hidden", !themStore.profileSidebarCollapsed ? "text-[#3E63DD]" : "text-custom-text-200")
             } />
diff --git a/web/components/headers/workspace-analytics.tsx b/web/components/headers/workspace-analytics.tsx
index 4d54dd965..a6ad67f05 100644
--- a/web/components/headers/workspace-analytics.tsx
+++ b/web/components/headers/workspace-analytics.tsx
@@ -1,13 +1,35 @@
 import { useRouter } from "next/router";
-import { ArrowLeft, BarChart2 } from "lucide-react";
+import { BarChart2, PanelRight } from "lucide-react";
 // ui
 import { Breadcrumbs } from "@plane/ui";
 // components
 import { SidebarHamburgerToggle } from "components/core/sidebar/sidebar-menu-hamburger-toggle";
 import { BreadcrumbLink } from "components/common";
+import { useApplication } from "hooks/store";
+import { observer } from "mobx-react";
+import { cn } from "helpers/common.helper";
+import { useEffect } from "react";
 
-export const WorkspaceAnalyticsHeader = () => {
+export const WorkspaceAnalyticsHeader = observer(() => {
   const router = useRouter();
+  const { analytics_tab } = router.query;
+
+  const { theme: themeStore } = useApplication();
+
+  useEffect(() => {
+    const handleToggleWorkspaceAnalyticsSidebar = () => {
+      if (window && window.innerWidth < 768) {
+        themeStore.toggleWorkspaceAnalyticsSidebar(true);
+      }
+      if (window && themeStore.workspaceAnalyticsSidebarCollapsed && window.innerWidth >= 768) {
+        themeStore.toggleWorkspaceAnalyticsSidebar(false);
+      }
+    };
+
+    window.addEventListener("resize", handleToggleWorkspaceAnalyticsSidebar);
+    handleToggleWorkspaceAnalyticsSidebar();
+    return () => window.removeEventListener("resize", handleToggleWorkspaceAnalyticsSidebar);
+  }, [themeStore]);
 
   return (
     <>
@@ -16,7 +38,7 @@ export const WorkspaceAnalyticsHeader = () => {
       >
         <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
           <SidebarHamburgerToggle />
-          <div>
+          <div className="flex items-center justify-between w-full">
             <Breadcrumbs>
               <Breadcrumbs.BreadcrumbItem
                 type="text"
@@ -25,9 +47,14 @@ export const WorkspaceAnalyticsHeader = () => {
                 }
               />
             </Breadcrumbs>
+            {analytics_tab === 'custom' &&
+              <button className="block md:hidden" onClick={() => { themeStore.toggleWorkspaceAnalyticsSidebar() }}>
+                <PanelRight className={cn("w-4 h-4 block md:hidden", !themeStore.workspaceAnalyticsSidebarCollapsed ? "text-custom-primary-100" : "text-custom-text-200")} />
+              </button>
+            }
           </div>
         </div>
       </div>
     </>
   );
-};
+});
diff --git a/web/components/profile/sidebar.tsx b/web/components/profile/sidebar.tsx
index b356b5adb..107c1f528 100644
--- a/web/components/profile/sidebar.tsx
+++ b/web/components/profile/sidebar.tsx
@@ -30,7 +30,7 @@ export const ProfileSidebar = observer(() => {
   const { workspaceSlug, userId } = router.query;
   // store hooks
   const { currentUser } = useUser();
-  const { theme: themStore } = useApplication();
+  const { theme: themeStore } = useApplication();
   const ref = useRef<HTMLDivElement>(null);
 
   const { data: userProjectsData } = useSWR(
@@ -41,9 +41,9 @@ export const ProfileSidebar = observer(() => {
   );
 
   useOutsideClickDetector(ref, () => {
-    if (themStore.profileSidebarCollapsed === false) {
+    if (themeStore.profileSidebarCollapsed === false) {
       if (window.innerWidth < 768) {
-        themStore.toggleProfileSidebar();
+        themeStore.toggleProfileSidebar();
       }
     }
   });
@@ -62,22 +62,22 @@ export const ProfileSidebar = observer(() => {
   useEffect(() => {
     const handleToggleProfileSidebar = () => {
       if (window && window.innerWidth < 768) {
-        themStore.toggleProfileSidebar(true);
+        themeStore.toggleProfileSidebar(true);
       }
-      if (window && themStore.profileSidebarCollapsed && window.innerWidth >= 768) {
-        themStore.toggleProfileSidebar(false);
+      if (window && themeStore.profileSidebarCollapsed && window.innerWidth >= 768) {
+        themeStore.toggleProfileSidebar(false);
       }
     };
 
     window.addEventListener("resize", handleToggleProfileSidebar);
     handleToggleProfileSidebar();
     return () => window.removeEventListener("resize", handleToggleProfileSidebar);
-  }, [themStore]);
+  }, [themeStore]);
 
   return (
     <div
       className={`flex-shrink-0 overflow-hidden overflow-y-auto shadow-custom-shadow-sm border-l border-custom-border-100 bg-custom-sidebar-background-100 h-full z-[5] fixed md:relative transition-all w-full md:w-[300px]`}
-      style={themStore.profileSidebarCollapsed ? { marginLeft: `${window?.innerWidth || 0}px` } : {}}
+      style={themeStore.profileSidebarCollapsed ? { marginLeft: `${window?.innerWidth || 0}px` } : {}}
     >
       {userProjectsData ? (
         <>
diff --git a/web/pages/[workspaceSlug]/analytics.tsx b/web/pages/[workspaceSlug]/analytics.tsx
index 71173c2c2..d4cb28e6f 100644
--- a/web/pages/[workspaceSlug]/analytics.tsx
+++ b/web/pages/[workspaceSlug]/analytics.tsx
@@ -15,8 +15,11 @@ import { ANALYTICS_TABS } from "constants/analytics";
 import { EUserWorkspaceRoles } from "constants/workspace";
 // type
 import { NextPageWithLayout } from "lib/types";
+import { useRouter } from "next/router";
 
 const AnalyticsPage: NextPageWithLayout = observer(() => {
+  const router = useRouter()
+  const { analytics_tab } = router.query
   // theme
   const { resolvedTheme } = useTheme();
   // store hooks
@@ -38,17 +41,19 @@ const AnalyticsPage: NextPageWithLayout = observer(() => {
     <>
       {workspaceProjectIds && workspaceProjectIds.length > 0 ? (
         <div className="flex h-full flex-col overflow-hidden bg-custom-background-100">
-          <Tab.Group as={Fragment}>
-            <Tab.List as="div" className="space-x-2 border-b border-custom-border-200 px-5 py-3">
+          <Tab.Group as={Fragment} defaultIndex={analytics_tab === 'custom' ? 1 : 0}>
+            <Tab.List as="div" className="flex space-x-2 border-b border-custom-border-200 px-0 md:px-5 py-0 md:py-3">
               {ANALYTICS_TABS.map((tab) => (
                 <Tab
                   key={tab.key}
                   className={({ selected }) =>
-                    `rounded-3xl border border-custom-border-200 px-4 py-2 text-xs hover:bg-custom-background-80 ${
-                      selected ? "bg-custom-background-80" : ""
+                    `rounded-0 w-full md:w-max md:rounded-3xl border-b md:border border-custom-border-200 focus:outline-none px-0 md:px-4 py-2 text-xs hover:bg-custom-background-80 ${selected ? "border-custom-primary-100 text-custom-primary-100 md:bg-custom-background-80 md:text-custom-text-200 md:border-custom-border-200" : "border-transparent"
                     }`
                   }
-                  onClick={() => {}}
+                  onClick={() => {
+                    router.query.analytics_tab = tab.key
+                    router.push(router)
+                  }}
                 >
                   {tab.title}
                 </Tab>
diff --git a/web/store/application/theme.store.ts b/web/store/application/theme.store.ts
index 7ecc0e770..f264c175d 100644
--- a/web/store/application/theme.store.ts
+++ b/web/store/application/theme.store.ts
@@ -8,10 +8,12 @@ export interface IThemeStore {
   theme: string | null;
   sidebarCollapsed: boolean | undefined;
   profileSidebarCollapsed: boolean | undefined;
+  workspaceAnalyticsSidebarCollapsed: boolean | undefined;
   // actions
   toggleSidebar: (collapsed?: boolean) => void;
   setTheme: (theme: any) => void;
   toggleProfileSidebar: (collapsed?: boolean) => void;
+  toggleWorkspaceAnalyticsSidebar: (collapsed?: boolean) => void;
 }
 
 export class ThemeStore implements IThemeStore {
@@ -19,6 +21,7 @@ export class ThemeStore implements IThemeStore {
   sidebarCollapsed: boolean | undefined = undefined;
   theme: string | null = null;
   profileSidebarCollapsed: boolean | undefined = undefined;
+  workspaceAnalyticsSidebarCollapsed: boolean | undefined = undefined;
   // root store
   rootStore;
 
@@ -28,10 +31,12 @@ export class ThemeStore implements IThemeStore {
       sidebarCollapsed: observable.ref,
       theme: observable.ref,
       profileSidebarCollapsed: observable.ref,
+      workspaceAnalyticsSidebarCollapsed: observable.ref,
       // action
       toggleSidebar: action,
       setTheme: action,
       toggleProfileSidebar: action,
+      toggleWorkspaceAnalyticsSidebar: action
       // computed
     });
     // root store
@@ -64,6 +69,19 @@ export class ThemeStore implements IThemeStore {
     localStorage.setItem("profile_sidebar_collapsed", this.profileSidebarCollapsed.toString());
   };
 
+  /**
+   * Toggle the profile sidebar collapsed state
+   * @param collapsed
+   */
+  toggleWorkspaceAnalyticsSidebar = (collapsed?: boolean) => {
+    if (collapsed === undefined) {
+      this.workspaceAnalyticsSidebarCollapsed = !this.workspaceAnalyticsSidebarCollapsed;
+    } else {
+      this.workspaceAnalyticsSidebarCollapsed = collapsed;
+    }
+    localStorage.setItem("workspace_analytics_sidebar_collapsed", this.workspaceAnalyticsSidebarCollapsed.toString());
+  };
+
   /**
    * Sets the user theme and applies it to the platform
    * @param _theme

From e2affc3fa66e93d015c486deae05e2ef27f78d85 Mon Sep 17 00:00:00 2001
From: rahulramesha <71900764+rahulramesha@users.noreply.github.com>
Date: Fri, 9 Feb 2024 15:53:15 +0530
Subject: [PATCH 38/58] chore: virtualization ish behaviour for issue layouts
 (#3538)

* Virtualization like core changes with intersection observer

* Virtualization like changes for spreadsheet

* Virtualization like changes for list

* Virtualization like changes for kanban

* add logic to render all the issues at once

* revert back the changes for list to follow the old pattern of grouping

* fix column shadow in spreadsheet for rendering rows

* fix constant draggable height while dragging and rendering blocks in kanban

* fix height glitch while rendered rows adjust to default height

* remove loading animation for issue layouts

* reduce requestIdleCallback timer to 300ms

* remove logic for index tarcking to force render as the same effect seems to be achieved by removing requestIdleCallback

* Fix Kanban droppable height

* fix spreadsheet sub issue loading

* force change in reference to re render the render if visible component when the order of list changes

* add comments and minor changes
---
 packages/types/src/issues.d.ts                |   9 +
 web/components/core/render-if-visible-HOC.tsx |  80 ++++++
 .../issue-layouts/kanban/base-kanban-root.tsx |  11 +-
 .../issues/issue-layouts/kanban/block.tsx     |  38 ++-
 .../issue-layouts/kanban/blocks-list.tsx      |   9 +-
 .../issues/issue-layouts/kanban/default.tsx   |  19 +-
 .../issue-layouts/kanban/kanban-group.tsx     |   7 +
 .../issues/issue-layouts/kanban/swimlanes.tsx |   9 +
 .../issue-layouts/list/base-list-root.tsx     |  40 ++-
 .../issues/issue-layouts/list/block.tsx       |  97 ++++---
 .../issues/issue-layouts/list/blocks-list.tsx |  32 ++-
 .../issues/issue-layouts/list/default.tsx     |  23 +-
 .../issue-layouts/spreadsheet/issue-row.tsx   | 237 +++++++++++-------
 .../spreadsheet/spreadsheet-table.tsx         |  42 ++++
 .../spreadsheet/spreadsheet-view.tsx          |  38 +--
 web/components/issues/issue-layouts/utils.tsx |   4 +-
 web/constants/issue.ts                        |   9 +-
 17 files changed, 467 insertions(+), 237 deletions(-)
 create mode 100644 web/components/core/render-if-visible-HOC.tsx

diff --git a/packages/types/src/issues.d.ts b/packages/types/src/issues.d.ts
index c54943f90..1f4a35dd4 100644
--- a/packages/types/src/issues.d.ts
+++ b/packages/types/src/issues.d.ts
@@ -221,3 +221,12 @@ export interface IGroupByColumn {
 export interface IIssueMap {
   [key: string]: TIssue;
 }
+
+export interface IIssueListRow {
+  id: string;
+  groupId: string;
+  type: "HEADER" | "NO_ISSUES" | "QUICK_ADD" | "ISSUE";
+  name?: string;
+  icon?: ReactElement | undefined;
+  payload?: Partial<TIssue>;
+}
diff --git a/web/components/core/render-if-visible-HOC.tsx b/web/components/core/render-if-visible-HOC.tsx
new file mode 100644
index 000000000..26ae15285
--- /dev/null
+++ b/web/components/core/render-if-visible-HOC.tsx
@@ -0,0 +1,80 @@
+import { cn } from "helpers/common.helper";
+import React, { useState, useRef, useEffect, ReactNode, MutableRefObject } from "react";
+
+type Props = {
+  defaultHeight?: string;
+  verticalOffset?: number;
+  horizonatlOffset?: number;
+  root?: MutableRefObject<HTMLElement | null>;
+  children: ReactNode;
+  as?: keyof JSX.IntrinsicElements;
+  classNames?: string;
+  alwaysRender?: boolean;
+  placeholderChildren?: ReactNode;
+  pauseHeightUpdateWhileRendering?: boolean;
+  changingReference?: any;
+};
+
+const RenderIfVisible: React.FC<Props> = (props) => {
+  const {
+    defaultHeight = "300px",
+    root,
+    verticalOffset = 50,
+    horizonatlOffset = 0,
+    as = "div",
+    children,
+    classNames = "",
+    alwaysRender = false, //render the children even if it is not visble in root
+    placeholderChildren = null, //placeholder children
+    pauseHeightUpdateWhileRendering = false, //while this is true the height of the blocks are maintained
+    changingReference, //This is to force render when this reference is changed
+  } = props;
+  const [shouldVisible, setShouldVisible] = useState<boolean>(alwaysRender);
+  const placeholderHeight = useRef<string>(defaultHeight);
+  const intersectionRef = useRef<HTMLElement | null>(null);
+
+  const isVisible = alwaysRender || shouldVisible;
+
+  // Set visibility with intersection observer
+  useEffect(() => {
+    if (intersectionRef.current) {
+      const observer = new IntersectionObserver(
+        (entries) => {
+          if (typeof window !== undefined && window.requestIdleCallback) {
+            window.requestIdleCallback(() => setShouldVisible(entries[0].isIntersecting), {
+              timeout: 300,
+            });
+          } else {
+            setShouldVisible(entries[0].isIntersecting);
+          }
+        },
+        {
+          root: root?.current,
+          rootMargin: `${verticalOffset}% ${horizonatlOffset}% ${verticalOffset}% ${horizonatlOffset}%`,
+        }
+      );
+      observer.observe(intersectionRef.current);
+      return () => {
+        if (intersectionRef.current) {
+          observer.unobserve(intersectionRef.current);
+        }
+      };
+    }
+  }, [root?.current, intersectionRef, children, changingReference]);
+
+  //Set height after render
+  useEffect(() => {
+    if (intersectionRef.current && isVisible) {
+      placeholderHeight.current = `${intersectionRef.current.offsetHeight}px`;
+    }
+  }, [isVisible, intersectionRef, alwaysRender, pauseHeightUpdateWhileRendering]);
+
+  const child = isVisible ? <>{children}</> : placeholderChildren;
+  const style =
+    isVisible && !pauseHeightUpdateWhileRendering ? {} : { height: placeholderHeight.current, width: "100%" };
+  const className = isVisible ? classNames : cn(classNames, "bg-custom-background-80");
+
+  return React.createElement(as, { ref: intersectionRef, style, className }, child);
+};
+
+export default RenderIfVisible;
diff --git a/web/components/issues/issue-layouts/kanban/base-kanban-root.tsx b/web/components/issues/issue-layouts/kanban/base-kanban-root.tsx
index 64b132267..36d5e0315 100644
--- a/web/components/issues/issue-layouts/kanban/base-kanban-root.tsx
+++ b/web/components/issues/issue-layouts/kanban/base-kanban-root.tsx
@@ -1,4 +1,4 @@
-import { FC, useCallback, useState } from "react";
+import { FC, useCallback, useRef, useState } from "react";
 import { DragDropContext, DragStart, DraggableLocation, DropResult, Droppable } from "@hello-pangea/dnd";
 import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
@@ -94,6 +94,8 @@ export const BaseKanBanRoot: React.FC<IBaseKanBanLayout> = observer((props: IBas
 
   const { enableInlineEditing, enableQuickAdd, enableIssueCreation } = issues?.viewFlags || {};
 
+  const scrollableContainerRef = useRef<HTMLDivElement | null>(null);
+
   // states
   const [isDragStarted, setIsDragStarted] = useState<boolean>(false);
   const [dragState, setDragState] = useState<KanbanDragState>({});
@@ -245,7 +247,10 @@ export const BaseKanBanRoot: React.FC<IBaseKanBanLayout> = observer((props: IBas
         </div>
       )}
 
-      <div className="horizontal-scroll-enable relative h-full w-full overflow-auto bg-custom-background-90">
+      <div
+        className="flex horizontal-scroll-enable relative h-full w-full overflow-auto bg-custom-background-90"
+        ref={scrollableContainerRef}
+      >
         <div className="relative h-max w-max min-w-full bg-custom-background-90 px-2">
           <DragDropContext onDragStart={onDragStart} onDragEnd={onDragEnd}>
             {/* drag and delete component */}
@@ -289,6 +294,8 @@ export const BaseKanBanRoot: React.FC<IBaseKanBanLayout> = observer((props: IBas
               canEditProperties={canEditProperties}
               storeType={storeType}
               addIssuesToView={addIssuesToView}
+              scrollableContainerRef={scrollableContainerRef}
+              isDragStarted={isDragStarted}
             />
           </DragDropContext>
         </div>
diff --git a/web/components/issues/issue-layouts/kanban/block.tsx b/web/components/issues/issue-layouts/kanban/block.tsx
index 203ac4938..24cbe9908 100644
--- a/web/components/issues/issue-layouts/kanban/block.tsx
+++ b/web/components/issues/issue-layouts/kanban/block.tsx
@@ -1,4 +1,4 @@
-import { memo } from "react";
+import { MutableRefObject, memo } from "react";
 import { Draggable, DraggableProvided, DraggableStateSnapshot } from "@hello-pangea/dnd";
 import { observer } from "mobx-react-lite";
 // hooks
@@ -13,6 +13,7 @@ import { TIssue, IIssueDisplayProperties, IIssueMap } from "@plane/types";
 import { EIssueActions } from "../types";
 // helper
 import { cn } from "helpers/common.helper";
+import RenderIfVisible from "components/core/render-if-visible-HOC";
 
 interface IssueBlockProps {
   peekIssueId?: string;
@@ -25,6 +26,9 @@ interface IssueBlockProps {
   handleIssues: (issue: TIssue, action: EIssueActions) => void;
   quickActions: (issue: TIssue) => React.ReactNode;
   canEditProperties: (projectId: string | undefined) => boolean;
+  scrollableContainerRef?: MutableRefObject<HTMLDivElement | null>;
+  isDragStarted?: boolean;
+  issueIds: string[]; //DO NOT REMOVE< needed to force render for virtualization
 }
 
 interface IssueDetailsBlockProps {
@@ -107,6 +111,9 @@ export const KanbanIssueBlock: React.FC<IssueBlockProps> = memo((props) => {
     handleIssues,
     quickActions,
     canEditProperties,
+    scrollableContainerRef,
+    isDragStarted,
+    issueIds,
   } = props;
 
   const issue = issuesMap[issueId];
@@ -129,24 +136,31 @@ export const KanbanIssueBlock: React.FC<IssueBlockProps> = memo((props) => {
           {...provided.dragHandleProps}
           ref={provided.innerRef}
         >
-          {issue.tempId !== undefined && (
-            <div className="absolute left-0 top-0 z-[99999] h-full w-full animate-pulse bg-custom-background-100/20" />
-          )}
           <div
             className={cn(
-              "space-y-2 rounded border-[0.5px] border-custom-border-200 bg-custom-background-100 px-3 py-2 text-sm transition-all hover:border-custom-border-400",
+              "rounded border-[0.5px] border-custom-border-200 bg-custom-background-100 px-3 py-2 text-sm transition-all hover:border-custom-border-400",
               { "hover:cursor-grab": !isDragDisabled },
               { "border-custom-primary-100": snapshot.isDragging },
               { "border border-custom-primary-70 hover:border-custom-primary-70": peekIssueId === issue.id }
             )}
           >
-            <KanbanIssueDetailsBlock
-              issue={issue}
-              displayProperties={displayProperties}
-              handleIssues={handleIssues}
-              quickActions={quickActions}
-              isReadOnly={!canEditIssueProperties}
-            />
+            <RenderIfVisible
+              classNames="space-y-2"
+              root={scrollableContainerRef}
+              defaultHeight="100px"
+              horizonatlOffset={50}
+              alwaysRender={snapshot.isDragging}
+              pauseHeightUpdateWhileRendering={isDragStarted}
+              changingReference={issueIds}
+            >
+              <KanbanIssueDetailsBlock
+                issue={issue}
+                displayProperties={displayProperties}
+                handleIssues={handleIssues}
+                quickActions={quickActions}
+                isReadOnly={!canEditIssueProperties}
+              />
+            </RenderIfVisible>
           </div>
         </div>
       )}
diff --git a/web/components/issues/issue-layouts/kanban/blocks-list.tsx b/web/components/issues/issue-layouts/kanban/blocks-list.tsx
index 15c797833..3746111e5 100644
--- a/web/components/issues/issue-layouts/kanban/blocks-list.tsx
+++ b/web/components/issues/issue-layouts/kanban/blocks-list.tsx
@@ -1,4 +1,4 @@
-import { memo } from "react";
+import { MutableRefObject, memo } from "react";
 //types
 import { TIssue, IIssueDisplayProperties, IIssueMap } from "@plane/types";
 import { EIssueActions } from "../types";
@@ -16,6 +16,8 @@ interface IssueBlocksListProps {
   handleIssues: (issue: TIssue, action: EIssueActions) => void;
   quickActions: (issue: TIssue, customActionButton?: React.ReactElement) => React.ReactNode;
   canEditProperties: (projectId: string | undefined) => boolean;
+  scrollableContainerRef?: MutableRefObject<HTMLDivElement | null>;
+  isDragStarted?: boolean;
 }
 
 const KanbanIssueBlocksListMemo: React.FC<IssueBlocksListProps> = (props) => {
@@ -30,6 +32,8 @@ const KanbanIssueBlocksListMemo: React.FC<IssueBlocksListProps> = (props) => {
     handleIssues,
     quickActions,
     canEditProperties,
+    scrollableContainerRef,
+    isDragStarted,
   } = props;
 
   return (
@@ -56,6 +60,9 @@ const KanbanIssueBlocksListMemo: React.FC<IssueBlocksListProps> = (props) => {
                 index={index}
                 isDragDisabled={isDragDisabled}
                 canEditProperties={canEditProperties}
+                scrollableContainerRef={scrollableContainerRef}
+                isDragStarted={isDragStarted}
+                issueIds={issueIds} //passing to force render for virtualization whenever parent rerenders
               />
             );
           })}
diff --git a/web/components/issues/issue-layouts/kanban/default.tsx b/web/components/issues/issue-layouts/kanban/default.tsx
index de6c1ddae..f11321944 100644
--- a/web/components/issues/issue-layouts/kanban/default.tsx
+++ b/web/components/issues/issue-layouts/kanban/default.tsx
@@ -20,6 +20,7 @@ import {
 import { EIssueActions } from "../types";
 import { getGroupByColumns } from "../utils";
 import { TCreateModalStoreTypes } from "constants/issue";
+import { MutableRefObject } from "react";
 
 export interface IGroupByKanBan {
   issuesMap: IIssueMap;
@@ -45,6 +46,8 @@ export interface IGroupByKanBan {
   storeType?: TCreateModalStoreTypes;
   addIssuesToView?: (issueIds: string[]) => Promise<TIssue>;
   canEditProperties: (projectId: string | undefined) => boolean;
+  scrollableContainerRef?: MutableRefObject<HTMLDivElement | null>;
+  isDragStarted?: boolean;
 }
 
 const GroupByKanBan: React.FC<IGroupByKanBan> = observer((props) => {
@@ -67,6 +70,8 @@ const GroupByKanBan: React.FC<IGroupByKanBan> = observer((props) => {
     storeType,
     addIssuesToView,
     canEditProperties,
+    scrollableContainerRef,
+    isDragStarted,
   } = props;
 
   const member = useMember();
@@ -92,11 +97,7 @@ const GroupByKanBan: React.FC<IGroupByKanBan> = observer((props) => {
           const groupByVisibilityToggle = visibilityGroupBy(_list);
 
           return (
-            <div
-              className={`relative flex flex-shrink-0 flex-col h-full group ${
-                groupByVisibilityToggle ? `` : `w-[340px]`
-              }`}
-            >
+            <div className={`relative flex flex-shrink-0 flex-col group ${groupByVisibilityToggle ? `` : `w-[340px]`}`}>
               {sub_group_by === null && (
                 <div className="flex-shrink-0 sticky top-0 z-[2] w-full bg-custom-background-90 py-1">
                   <HeaderGroupByCard
@@ -135,6 +136,8 @@ const GroupByKanBan: React.FC<IGroupByKanBan> = observer((props) => {
                   disableIssueCreation={disableIssueCreation}
                   canEditProperties={canEditProperties}
                   groupByVisibilityToggle={groupByVisibilityToggle}
+                  scrollableContainerRef={scrollableContainerRef}
+                  isDragStarted={isDragStarted}
                 />
               )}
             </div>
@@ -168,6 +171,8 @@ export interface IKanBan {
   storeType?: TCreateModalStoreTypes;
   addIssuesToView?: (issueIds: string[]) => Promise<TIssue>;
   canEditProperties: (projectId: string | undefined) => boolean;
+  scrollableContainerRef?: MutableRefObject<HTMLDivElement | null>;
+  isDragStarted?: boolean;
 }
 
 export const KanBan: React.FC<IKanBan> = observer((props) => {
@@ -189,6 +194,8 @@ export const KanBan: React.FC<IKanBan> = observer((props) => {
     storeType,
     addIssuesToView,
     canEditProperties,
+    scrollableContainerRef,
+    isDragStarted,
   } = props;
 
   const issueKanBanView = useKanbanView();
@@ -213,6 +220,8 @@ export const KanBan: React.FC<IKanBan> = observer((props) => {
       storeType={storeType}
       addIssuesToView={addIssuesToView}
       canEditProperties={canEditProperties}
+      scrollableContainerRef={scrollableContainerRef}
+      isDragStarted={isDragStarted}
     />
   );
 });
diff --git a/web/components/issues/issue-layouts/kanban/kanban-group.tsx b/web/components/issues/issue-layouts/kanban/kanban-group.tsx
index 1a25c563e..7cbda05e1 100644
--- a/web/components/issues/issue-layouts/kanban/kanban-group.tsx
+++ b/web/components/issues/issue-layouts/kanban/kanban-group.tsx
@@ -1,3 +1,4 @@
+import { MutableRefObject } from "react";
 import { Droppable } from "@hello-pangea/dnd";
 // hooks
 import { useProjectState } from "hooks/store";
@@ -37,6 +38,8 @@ interface IKanbanGroup {
   disableIssueCreation?: boolean;
   canEditProperties: (projectId: string | undefined) => boolean;
   groupByVisibilityToggle: boolean;
+  scrollableContainerRef?: MutableRefObject<HTMLDivElement | null>;
+  isDragStarted?: boolean;
 }
 
 export const KanbanGroup = (props: IKanbanGroup) => {
@@ -57,6 +60,8 @@ export const KanbanGroup = (props: IKanbanGroup) => {
     disableIssueCreation,
     quickAddCallback,
     viewId,
+    scrollableContainerRef,
+    isDragStarted,
   } = props;
   // hooks
   const projectState = useProjectState();
@@ -127,6 +132,8 @@ export const KanbanGroup = (props: IKanbanGroup) => {
               handleIssues={handleIssues}
               quickActions={quickActions}
               canEditProperties={canEditProperties}
+              scrollableContainerRef={scrollableContainerRef}
+              isDragStarted={isDragStarted}
             />
 
             {provided.placeholder}
diff --git a/web/components/issues/issue-layouts/kanban/swimlanes.tsx b/web/components/issues/issue-layouts/kanban/swimlanes.tsx
index 1b9f27828..5fdb58ef0 100644
--- a/web/components/issues/issue-layouts/kanban/swimlanes.tsx
+++ b/web/components/issues/issue-layouts/kanban/swimlanes.tsx
@@ -1,3 +1,4 @@
+import { MutableRefObject } from "react";
 import { observer } from "mobx-react-lite";
 // components
 import { KanBan } from "./default";
@@ -80,6 +81,7 @@ interface ISubGroupSwimlane extends ISubGroupSwimlaneHeader {
     viewId?: string
   ) => Promise<TIssue | undefined>;
   viewId?: string;
+  scrollableContainerRef?: MutableRefObject<HTMLDivElement | null>;
 }
 const SubGroupSwimlane: React.FC<ISubGroupSwimlane> = observer((props) => {
   const {
@@ -99,6 +101,8 @@ const SubGroupSwimlane: React.FC<ISubGroupSwimlane> = observer((props) => {
     addIssuesToView,
     quickAddCallback,
     viewId,
+    scrollableContainerRef,
+    isDragStarted,
   } = props;
 
   const calculateIssueCount = (column_id: string) => {
@@ -150,6 +154,8 @@ const SubGroupSwimlane: React.FC<ISubGroupSwimlane> = observer((props) => {
                   addIssuesToView={addIssuesToView}
                   quickAddCallback={quickAddCallback}
                   viewId={viewId}
+                  scrollableContainerRef={scrollableContainerRef}
+                  isDragStarted={isDragStarted}
                 />
               </div>
             )}
@@ -183,6 +189,7 @@ export interface IKanBanSwimLanes {
   ) => Promise<TIssue | undefined>;
   viewId?: string;
   canEditProperties: (projectId: string | undefined) => boolean;
+  scrollableContainerRef?: MutableRefObject<HTMLDivElement | null>;
 }
 
 export const KanBanSwimLanes: React.FC<IKanBanSwimLanes> = observer((props) => {
@@ -204,6 +211,7 @@ export const KanBanSwimLanes: React.FC<IKanBanSwimLanes> = observer((props) => {
     addIssuesToView,
     quickAddCallback,
     viewId,
+    scrollableContainerRef,
   } = props;
 
   const member = useMember();
@@ -249,6 +257,7 @@ export const KanBanSwimLanes: React.FC<IKanBanSwimLanes> = observer((props) => {
           canEditProperties={canEditProperties}
           quickAddCallback={quickAddCallback}
           viewId={viewId}
+          scrollableContainerRef={scrollableContainerRef}
         />
       )}
     </div>
diff --git a/web/components/issues/issue-layouts/list/base-list-root.tsx b/web/components/issues/issue-layouts/list/base-list-root.tsx
index 8f661a9e6..b1441cff7 100644
--- a/web/components/issues/issue-layouts/list/base-list-root.tsx
+++ b/web/components/issues/issue-layouts/list/base-list-root.tsx
@@ -122,26 +122,24 @@ export const BaseListRoot = observer((props: IBaseListRoot) => {
   );
 
   return (
-    <>
-      <div className={`relative h-full w-full bg-custom-background-90`}>
-        <List
-          issuesMap={issueMap}
-          displayProperties={displayProperties}
-          group_by={group_by}
-          handleIssues={handleIssues}
-          quickActions={renderQuickActions}
-          issueIds={issueIds}
-          showEmptyGroup={showEmptyGroup}
-          viewId={viewId}
-          quickAddCallback={issues?.quickAddIssue}
-          enableIssueQuickAdd={!!enableQuickAdd}
-          canEditProperties={canEditProperties}
-          disableIssueCreation={!enableIssueCreation || !isEditingAllowed}
-          storeType={storeType}
-          addIssuesToView={addIssuesToView}
-          isCompletedCycle={isCompletedCycle}
-        />
-      </div>
-    </>
+    <div className={`relative h-full w-full bg-custom-background-90`}>
+      <List
+        issuesMap={issueMap}
+        displayProperties={displayProperties}
+        group_by={group_by}
+        handleIssues={handleIssues}
+        quickActions={renderQuickActions}
+        issueIds={issueIds}
+        showEmptyGroup={showEmptyGroup}
+        viewId={viewId}
+        quickAddCallback={issues?.quickAddIssue}
+        enableIssueQuickAdd={!!enableQuickAdd}
+        canEditProperties={canEditProperties}
+        disableIssueCreation={!enableIssueCreation || !isEditingAllowed}
+        storeType={storeType}
+        addIssuesToView={addIssuesToView}
+        isCompletedCycle={isCompletedCycle}
+      />
+    </div>
   );
 });
diff --git a/web/components/issues/issue-layouts/list/block.tsx b/web/components/issues/issue-layouts/list/block.tsx
index 1ade285a9..ceec7b219 100644
--- a/web/components/issues/issue-layouts/list/block.tsx
+++ b/web/components/issues/issue-layouts/list/block.tsx
@@ -48,64 +48,59 @@ export const IssueBlock: React.FC<IssueBlockProps> = observer((props: IssueBlock
   const projectDetails = getProjectById(issue.project_id);
 
   return (
-    <>
-      <div
-        className={cn(
-          "relative flex items-center gap-3 bg-custom-background-100 p-3 text-sm border border-transparent border-b-custom-border-200",
-          {
-            "border border-custom-primary-70 hover:border-custom-primary-70":
+    <div
+      className={cn("min-h-12 relative flex items-center gap-3 bg-custom-background-100 p-3 text-sm", {
+        "border border-custom-primary-70 hover:border-custom-primary-70":
               peekIssue && peekIssue.issueId === issue.id,
-            "last:border-b-transparent": peekIssue?.issueId !== issue.id,
-          }
-        )}
-      >
-        {displayProperties && displayProperties?.key && (
-          <div className="flex-shrink-0 text-xs font-medium text-custom-text-300">
-            {projectDetails?.identifier}-{issue.sequence_id}
-          </div>
-        )}
+            "last:border-b-transparent": peekIssue?.issueId !== issue.id
+      })}
+    >
+      {displayProperties && displayProperties?.key && (
+        <div className="flex-shrink-0 text-xs font-medium text-custom-text-300">
+          {projectDetails?.identifier}-{issue.sequence_id}
+        </div>
+      )}
 
-        {issue?.tempId !== undefined && (
-          <div className="absolute left-0 top-0 z-[99999] h-full w-full animate-pulse bg-custom-background-100/20" />
-        )}
+      {issue?.tempId !== undefined && (
+        <div className="absolute left-0 top-0 z-[99999] h-full w-full animate-pulse bg-custom-background-100/20" />
+      )}
 
-        {issue?.is_draft ? (
+      {issue?.is_draft ? (
+        <Tooltip tooltipHeading="Title" tooltipContent={issue.name}>
+          <span>{issue.name}</span>
+        </Tooltip>
+      ) : (
+        <ControlLink
+          href={`/${workspaceSlug}/projects/${projectId}/issues/${issueId}`}
+          target="_blank"
+          onClick={() => handleIssuePeekOverview(issue)}
+          className="w-full line-clamp-1 cursor-pointer text-sm text-custom-text-100"
+        >
           <Tooltip tooltipHeading="Title" tooltipContent={issue.name}>
             <span>{issue.name}</span>
           </Tooltip>
-        ) : (
-          <ControlLink
-            href={`/${workspaceSlug}/projects/${projectId}/issues/${issueId}`}
-            target="_blank"
-            onClick={() => handleIssuePeekOverview(issue)}
-            className="w-full line-clamp-1 cursor-pointer text-sm text-custom-text-100"
-          >
-            <Tooltip tooltipHeading="Title" tooltipContent={issue.name}>
-              <span>{issue.name}</span>
-            </Tooltip>
-          </ControlLink>
-        )}
+        </ControlLink>
+      )}
 
-        <div className="ml-auto flex flex-shrink-0 items-center gap-2">
-          {!issue?.tempId ? (
-            <>
-              <IssueProperties
-                className="relative flex items-center gap-2 whitespace-nowrap"
-                issue={issue}
-                isReadOnly={!canEditIssueProperties}
-                handleIssues={updateIssue}
-                displayProperties={displayProperties}
-                activeLayout="List"
-              />
-              {quickActions(issue)}
-            </>
-          ) : (
-            <div className="h-4 w-4">
-              <Spinner className="h-4 w-4" />
-            </div>
-          )}
-        </div>
+      <div className="ml-auto flex flex-shrink-0 items-center gap-2">
+        {!issue?.tempId ? (
+          <>
+            <IssueProperties
+              className="relative flex items-center gap-2 whitespace-nowrap"
+              issue={issue}
+              isReadOnly={!canEditIssueProperties}
+              handleIssues={updateIssue}
+              displayProperties={displayProperties}
+              activeLayout="List"
+            />
+            {quickActions(issue)}
+          </>
+        ) : (
+          <div className="h-4 w-4">
+            <Spinner className="h-4 w-4" />
+          </div>
+        )}
       </div>
-    </>
+    </div>
   );
 });
diff --git a/web/components/issues/issue-layouts/list/blocks-list.tsx b/web/components/issues/issue-layouts/list/blocks-list.tsx
index 95ee6c7a8..d3c8d1406 100644
--- a/web/components/issues/issue-layouts/list/blocks-list.tsx
+++ b/web/components/issues/issue-layouts/list/blocks-list.tsx
@@ -1,9 +1,10 @@
-import { FC } from "react";
+import { FC, MutableRefObject } from "react";
 // components
 import { IssueBlock } from "components/issues";
 // types
 import { TGroupedIssues, TIssue, IIssueDisplayProperties, TIssueMap, TUnGroupedIssues } from "@plane/types";
 import { EIssueActions } from "../types";
+import RenderIfVisible from "components/core/render-if-visible-HOC";
 
 interface Props {
   issueIds: TGroupedIssues | TUnGroupedIssues | any;
@@ -12,27 +13,34 @@ interface Props {
   handleIssues: (issue: TIssue, action: EIssueActions) => Promise<void>;
   quickActions: (issue: TIssue) => React.ReactNode;
   displayProperties: IIssueDisplayProperties | undefined;
+  containerRef: MutableRefObject<HTMLDivElement | null>;
 }
 
 export const IssueBlocksList: FC<Props> = (props) => {
-  const { issueIds, issuesMap, handleIssues, quickActions, displayProperties, canEditProperties } = props;
+  const { issueIds, issuesMap, handleIssues, quickActions, displayProperties, canEditProperties, containerRef } = props;
 
   return (
     <div className="relative h-full w-full">
       {issueIds && issueIds.length > 0 ? (
         issueIds.map((issueId: string) => {
           if (!issueId) return null;
-
           return (
-            <IssueBlock
-              key={issueId}
-              issueId={issueId}
-              issuesMap={issuesMap}
-              handleIssues={handleIssues}
-              quickActions={quickActions}
-              canEditProperties={canEditProperties}
-              displayProperties={displayProperties}
-            />
+            <RenderIfVisible
+              key={`${issueId}`}
+              defaultHeight="3rem"
+              root={containerRef}
+              classNames={"relative border border-transparent border-b-custom-border-200 last:border-b-transparent"}
+              changingReference={issueIds}
+            >
+              <IssueBlock
+                issueId={issueId}
+                issuesMap={issuesMap}
+                handleIssues={handleIssues}
+                quickActions={quickActions}
+                canEditProperties={canEditProperties}
+                displayProperties={displayProperties}
+              />
+            </RenderIfVisible>
           );
         })
       ) : (
diff --git a/web/components/issues/issue-layouts/list/default.tsx b/web/components/issues/issue-layouts/list/default.tsx
index dd6c8da22..373897fda 100644
--- a/web/components/issues/issue-layouts/list/default.tsx
+++ b/web/components/issues/issue-layouts/list/default.tsx
@@ -1,5 +1,7 @@
+import { useRef } from "react";
 // components
 import { IssueBlocksList, ListQuickAddIssueForm } from "components/issues";
+import { HeaderGroupByCard } from "./headers/group-by-card";
 // hooks
 import { useLabel, useMember, useProject, useProjectState } from "hooks/store";
 // types
@@ -10,12 +12,12 @@ import {
   IIssueDisplayProperties,
   TIssueMap,
   TUnGroupedIssues,
+  IGroupByColumn,
 } from "@plane/types";
 import { EIssueActions } from "../types";
 // constants
-import { HeaderGroupByCard } from "./headers/group-by-card";
-import { getGroupByColumns } from "../utils";
 import { TCreateModalStoreTypes } from "constants/issue";
+import { getGroupByColumns } from "../utils";
 
 export interface IGroupByList {
   issueIds: TGroupedIssues | TUnGroupedIssues | any;
@@ -64,9 +66,11 @@ const GroupByList: React.FC<IGroupByList> = (props) => {
   const label = useLabel();
   const projectState = useProjectState();
 
-  const list = getGroupByColumns(group_by as GroupByColumnTypes, project, label, projectState, member, true);
+  const containerRef = useRef<HTMLDivElement | null>(null);
 
-  if (!list) return null;
+  const groups = getGroupByColumns(group_by as GroupByColumnTypes, project, label, projectState, member, true);
+
+  if (!groups) return null;
 
   const prePopulateQuickAddData = (groupByKey: string | null, value: any) => {
     const defaultState = projectState.projectStates?.find((state) => state.default);
@@ -104,11 +108,11 @@ const GroupByList: React.FC<IGroupByList> = (props) => {
   const isGroupByCreatedBy = group_by === "created_by";
 
   return (
-    <div className="relative h-full w-full">
-      {list &&
-        list.length > 0 &&
-        list.map(
-          (_list: any) =>
+    <div ref={containerRef} className="relative overflow-auto h-full w-full">
+      {groups &&
+        groups.length > 0 &&
+        groups.map(
+          (_list: IGroupByColumn) =>
             validateEmptyIssueGroups(is_list ? issueIds : issueIds?.[_list.id]) && (
               <div key={_list.id} className={`flex flex-shrink-0 flex-col`}>
                 <div className="sticky top-0 z-[2] w-full flex-shrink-0 border-b border-custom-border-200 bg-custom-background-90 px-3 py-1">
@@ -131,6 +135,7 @@ const GroupByList: React.FC<IGroupByList> = (props) => {
                     quickActions={quickActions}
                     displayProperties={displayProperties}
                     canEditProperties={canEditProperties}
+                    containerRef={containerRef}
                   />
                 )}
 
diff --git a/web/components/issues/issue-layouts/spreadsheet/issue-row.tsx b/web/components/issues/issue-layouts/spreadsheet/issue-row.tsx
index 2a97045fe..840ea39f9 100644
--- a/web/components/issues/issue-layouts/spreadsheet/issue-row.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/issue-row.tsx
@@ -1,4 +1,4 @@
-import { useRef, useState } from "react";
+import { Dispatch, MutableRefObject, SetStateAction, useRef, useState } from "react";
 import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
 // icons
@@ -7,6 +7,7 @@ import { ChevronRight, MoreHorizontal } from "lucide-react";
 import { SPREADSHEET_PROPERTY_LIST } from "constants/spreadsheet";
 // components
 import { WithDisplayPropertiesHOC } from "../properties/with-display-properties-HOC";
+import RenderIfVisible from "components/core/render-if-visible-HOC";
 import { IssueColumn } from "./issue-column";
 // ui
 import { ControlLink, Tooltip } from "@plane/ui";
@@ -32,6 +33,9 @@ interface Props {
   portalElement: React.MutableRefObject<HTMLDivElement | null>;
   nestingLevel: number;
   issueId: string;
+  isScrolled: MutableRefObject<boolean>;
+  containerRef: MutableRefObject<HTMLTableElement | null>;
+  issueIds: string[];
 }
 
 export const SpreadsheetIssueRow = observer((props: Props) => {
@@ -44,8 +48,96 @@ export const SpreadsheetIssueRow = observer((props: Props) => {
     handleIssues,
     quickActions,
     canEditProperties,
+    isScrolled,
+    containerRef,
+    issueIds,
   } = props;
 
+  const [isExpanded, setExpanded] = useState<boolean>(false);
+  const { subIssues: subIssuesStore } = useIssueDetail();
+
+  const subIssues = subIssuesStore.subIssuesByIssueId(issueId);
+
+  return (
+    <>
+      {/* first column/ issue name and key column */}
+      <RenderIfVisible
+        as="tr"
+        defaultHeight="calc(2.75rem - 1px)"
+        root={containerRef}
+        placeholderChildren={<td colSpan={100} className="border-b-[0.5px]" />}
+        changingReference={issueIds}
+      >
+        <IssueRowDetails
+          issueId={issueId}
+          displayProperties={displayProperties}
+          quickActions={quickActions}
+          canEditProperties={canEditProperties}
+          nestingLevel={nestingLevel}
+          isEstimateEnabled={isEstimateEnabled}
+          handleIssues={handleIssues}
+          portalElement={portalElement}
+          isScrolled={isScrolled}
+          isExpanded={isExpanded}
+          setExpanded={setExpanded}
+        />
+      </RenderIfVisible>
+
+      {isExpanded &&
+        subIssues &&
+        subIssues.length > 0 &&
+        subIssues.map((subIssueId: string) => (
+          <SpreadsheetIssueRow
+            key={subIssueId}
+            issueId={subIssueId}
+            displayProperties={displayProperties}
+            quickActions={quickActions}
+            canEditProperties={canEditProperties}
+            nestingLevel={nestingLevel + 1}
+            isEstimateEnabled={isEstimateEnabled}
+            handleIssues={handleIssues}
+            portalElement={portalElement}
+            isScrolled={isScrolled}
+            containerRef={containerRef}
+            issueIds={issueIds}
+          />
+        ))}
+    </>
+  );
+});
+
+interface IssueRowDetailsProps {
+  displayProperties: IIssueDisplayProperties;
+  isEstimateEnabled: boolean;
+  quickActions: (
+    issue: TIssue,
+    customActionButton?: React.ReactElement,
+    portalElement?: HTMLDivElement | null
+  ) => React.ReactNode;
+  canEditProperties: (projectId: string | undefined) => boolean;
+  handleIssues: (issue: TIssue, action: EIssueActions) => Promise<void>;
+  portalElement: React.MutableRefObject<HTMLDivElement | null>;
+  nestingLevel: number;
+  issueId: string;
+  isScrolled: MutableRefObject<boolean>;
+  isExpanded: boolean;
+  setExpanded: Dispatch<SetStateAction<boolean>>;
+}
+
+const IssueRowDetails = observer((props: IssueRowDetailsProps) => {
+  const {
+    displayProperties,
+    issueId,
+    isEstimateEnabled,
+    nestingLevel,
+    portalElement,
+    handleIssues,
+    quickActions,
+    canEditProperties,
+    isScrolled,
+    isExpanded,
+    setExpanded,
+  } = props;
   // router
   const router = useRouter();
   const { workspaceSlug } = router.query;
@@ -54,8 +146,6 @@ export const SpreadsheetIssueRow = observer((props: Props) => {
   const { peekIssue, setPeekIssue } = useIssueDetail();
   // states
   const [isMenuActive, setIsMenuActive] = useState(false);
-  const [isExpanded, setExpanded] = useState<boolean>(false);
-
   const menuActionRef = useRef<HTMLDivElement | null>(null);
 
   const handleIssuePeekOverview = (issue: TIssue) => {
@@ -66,7 +156,6 @@ export const SpreadsheetIssueRow = observer((props: Props) => {
   const { subIssues: subIssuesStore, issue } = useIssueDetail();
 
   const issueDetail = issue.getIssueById(issueId);
-  const subIssues = subIssuesStore.subIssuesByIssueId(issueId);
 
   const paddingLeft = `${nestingLevel * 54}px`;
 
@@ -91,81 +180,77 @@ export const SpreadsheetIssueRow = observer((props: Props) => {
       <MoreHorizontal className="h-3.5 w-3.5" />
     </div>
   );
-
   if (!issueDetail) return null;
 
   const disableUserActions = !canEditProperties(issueDetail.project_id);
 
   return (
     <>
-      <tr
-        className={cn({
-          "border border-custom-primary-70 hover:border-custom-primary-70": peekIssue?.issueId === issueDetail.id,
-        })}
+      <td
+        className={cn(
+          "sticky group left-0 h-11  w-[28rem] flex items-center bg-custom-background-100 text-sm after:absolute border-r-[0.5px] border-custom-border-200",
+          {
+            "border-b-[0.5px]": peekIssue?.issueId !== issueDetail.id,
+          },
+          {
+            "border border-custom-primary-70 hover:border-custom-primary-70": peekIssue?.issueId === issueDetail.id,
+          },
+          {
+            "shadow-[8px_22px_22px_10px_rgba(0,0,0,0.05)]": isScrolled.current,
+          }
+        )}
+        tabIndex={0}
       >
-        {/* first column/ issue name and key column */}
-        <td
-          className={cn(
-            "sticky group left-0 h-11  w-[28rem] flex items-center bg-custom-background-100 text-sm after:absolute border-r-[0.5px] border-custom-border-200 focus:border-custom-primary-70",
-            {
-              "border-b-[0.5px]": peekIssue?.issueId !== issueDetail.id,
-            }
-          )}
-          tabIndex={0}
-        >
-          <WithDisplayPropertiesHOC displayProperties={displayProperties} displayPropertyKey="key">
-            <div
-              className="flex min-w-min items-center gap-1.5 px-4 py-2.5 pr-0"
-              style={issueDetail.parent_id && nestingLevel !== 0 ? { paddingLeft } : {}}
-            >
-              <div className="relative flex cursor-pointer items-center text-center text-xs hover:text-custom-text-100">
-                <span
-                  className={`flex items-center justify-center font-medium  group-hover:opacity-0 ${
-                    isMenuActive ? "opacity-0" : "opacity-100"
-                  }`}
-                >
-                  {getProjectById(issueDetail.project_id)?.identifier}-{issueDetail.sequence_id}
-                </span>
+        <WithDisplayPropertiesHOC displayProperties={displayProperties} displayPropertyKey="key">
+          <div
+            className="flex min-w-min items-center gap-1.5 px-4 py-2.5 pr-0"
+            style={issueDetail.parent_id && nestingLevel !== 0 ? { paddingLeft } : {}}
+          >
+            <div className="relative flex cursor-pointer items-center text-center text-xs hover:text-custom-text-100">
+              <span
+                className={`flex items-center justify-center font-medium  group-hover:opacity-0 ${
+                  isMenuActive ? "opacity-0" : "opacity-100"
+                }`}
+              >
+                {getProjectById(issueDetail.project_id)?.identifier}-{issueDetail.sequence_id}
+              </span>
 
-                {canEditProperties(issueDetail.project_id) && (
-                  <div className={`absolute left-2.5 top-0 hidden group-hover:block ${isMenuActive ? "!block" : ""}`}>
-                    {quickActions(issueDetail, customActionButton, portalElement.current)}
-                  </div>
-                )}
-              </div>
-
-              {issueDetail.sub_issues_count > 0 && (
-                <div className="flex h-6 w-6 items-center justify-center">
-                  <button
-                    className="h-5 w-5 cursor-pointer rounded-sm hover:bg-custom-background-90 hover:text-custom-text-100"
-                    onClick={() => handleToggleExpand()}
-                  >
-                    <ChevronRight className={`h-3.5 w-3.5 ${isExpanded ? "rotate-90" : ""}`} />
-                  </button>
+              {canEditProperties(issueDetail.project_id) && (
+                <div className={`absolute left-2.5 top-0 hidden group-hover:block ${isMenuActive ? "!block" : ""}`}>
+                  {quickActions(issueDetail, customActionButton, portalElement.current)}
                 </div>
               )}
             </div>
-          </WithDisplayPropertiesHOC>
-          <ControlLink
-            href={`/${workspaceSlug}/projects/${issueDetail.project_id}/issues/${issueId}`}
-            target="_blank"
-            onClick={() => handleIssuePeekOverview(issueDetail)}
-            className="clickable w-full line-clamp-1 cursor-pointer text-sm text-custom-text-100"
-          >
-            <div className="w-full overflow-hidden">
-              <Tooltip tooltipHeading="Title" tooltipContent={issueDetail.name}>
-                <div
-                  className="h-full w-full cursor-pointer truncate px-4 py-2.5 text-left text-[0.825rem] text-custom-text-100"
-                  tabIndex={-1}
+
+            {issueDetail.sub_issues_count > 0 && (
+              <div className="flex h-6 w-6 items-center justify-center">
+                <button
+                  className="h-5 w-5 cursor-pointer rounded-sm hover:bg-custom-background-90 hover:text-custom-text-100"
+                  onClick={() => handleToggleExpand()}
                 >
-                  {issueDetail.name}
-                </div>
-              </Tooltip>
-            </div>
-          </ControlLink>
-        </td>
-        {/* Rest of the columns */}
-        {SPREADSHEET_PROPERTY_LIST.map((property) => (
+                  <ChevronRight className={`h-3.5 w-3.5 ${isExpanded ? "rotate-90" : ""}`} />
+                </button>
+              </div>
+            )}
+          </div>
+        </WithDisplayPropertiesHOC>
+        <ControlLink
+          href={`/${workspaceSlug}/projects/${issueDetail.project_id}/issues/${issueId}`}
+          target="_blank"
+          onClick={() => handleIssuePeekOverview(issueDetail)}
+          className="clickable w-full line-clamp-1 cursor-pointer text-sm text-custom-text-100"
+        >
+          <div className="w-full overflow-hidden">
+            <Tooltip tooltipHeading="Title" tooltipContent={issueDetail.name}>
+              <div className="h-full w-full cursor-pointer truncate px-4 py-2.5 text-left text-[0.825rem] text-custom-text-100" tabIndex={-1}>
+                {issueDetail.name}
+              </div>
+            </Tooltip>
+          </div>
+        </ControlLink>
+      </td>
+      {/* Rest of the columns */}
+      {SPREADSHEET_PROPERTY_LIST.map((property) => (
           <IssueColumn
             displayProperties={displayProperties}
             issueDetail={issueDetail}
@@ -175,24 +260,6 @@ export const SpreadsheetIssueRow = observer((props: Props) => {
             isEstimateEnabled={isEstimateEnabled}
           />
         ))}
-      </tr>
-
-      {isExpanded &&
-        subIssues &&
-        subIssues.length > 0 &&
-        subIssues.map((subIssueId: string) => (
-          <SpreadsheetIssueRow
-            key={subIssueId}
-            issueId={subIssueId}
-            displayProperties={displayProperties}
-            quickActions={quickActions}
-            canEditProperties={canEditProperties}
-            nestingLevel={nestingLevel + 1}
-            isEstimateEnabled={isEstimateEnabled}
-            handleIssues={handleIssues}
-            portalElement={portalElement}
-          />
-        ))}
     </>
   );
 });
diff --git a/web/components/issues/issue-layouts/spreadsheet/spreadsheet-table.tsx b/web/components/issues/issue-layouts/spreadsheet/spreadsheet-table.tsx
index e63b01dfb..5d45157cc 100644
--- a/web/components/issues/issue-layouts/spreadsheet/spreadsheet-table.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/spreadsheet-table.tsx
@@ -1,4 +1,5 @@
 import { observer } from "mobx-react-lite";
+import { MutableRefObject, useEffect, useRef } from "react";
 //types
 import { IIssueDisplayFilterOptions, IIssueDisplayProperties, TIssue } from "@plane/types";
 import { EIssueActions } from "../types";
@@ -21,6 +22,7 @@ type Props = {
   handleIssues: (issue: TIssue, action: EIssueActions) => Promise<void>;
   canEditProperties: (projectId: string | undefined) => boolean;
   portalElement: React.MutableRefObject<HTMLDivElement | null>;
+  containerRef: MutableRefObject<HTMLTableElement | null>;
 };
 
 export const SpreadsheetTable = observer((props: Props) => {
@@ -34,8 +36,45 @@ export const SpreadsheetTable = observer((props: Props) => {
     quickActions,
     handleIssues,
     canEditProperties,
+    containerRef,
   } = props;
 
+  // states
+  const isScrolled = useRef(false);
+
+  const handleScroll = () => {
+    if (!containerRef.current) return;
+    const scrollLeft = containerRef.current.scrollLeft;
+
+    const columnShadow = "8px 22px 22px 10px rgba(0, 0, 0, 0.05)"; // shadow for regular columns
+    const headerShadow = "8px -22px 22px 10px rgba(0, 0, 0, 0.05)"; // shadow for headers
+
+    //The shadow styles are added this way to avoid re-render of all the rows of table, which could be costly
+    if (scrollLeft > 0 !== isScrolled.current) {
+      const firtColumns = containerRef.current.querySelectorAll("table tr td:first-child, th:first-child");
+
+      for (let i = 0; i < firtColumns.length; i++) {
+        const shadow = i === 0 ? headerShadow : columnShadow;
+        if (scrollLeft > 0) {
+          (firtColumns[i] as HTMLElement).style.boxShadow = shadow;
+        } else {
+          (firtColumns[i] as HTMLElement).style.boxShadow = "none";
+        }
+      }
+      isScrolled.current = scrollLeft > 0;
+    }
+  };
+
+  useEffect(() => {
+    const currentContainerRef = containerRef.current;
+
+    if (currentContainerRef) currentContainerRef.addEventListener("scroll", handleScroll);
+
+    return () => {
+      if (currentContainerRef) currentContainerRef.removeEventListener("scroll", handleScroll);
+    };
+  }, []);
+
   const handleKeyBoardNavigation = useTableKeyboardNavigation();
 
   return (
@@ -58,6 +97,9 @@ export const SpreadsheetTable = observer((props: Props) => {
             isEstimateEnabled={isEstimateEnabled}
             handleIssues={handleIssues}
             portalElement={portalElement}
+            containerRef={containerRef}
+            isScrolled={isScrolled}
+            issueIds={issueIds}
           />
         ))}
       </tbody>
diff --git a/web/components/issues/issue-layouts/spreadsheet/spreadsheet-view.tsx b/web/components/issues/issue-layouts/spreadsheet/spreadsheet-view.tsx
index e99b17850..1ac815ced 100644
--- a/web/components/issues/issue-layouts/spreadsheet/spreadsheet-view.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/spreadsheet-view.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from "react";
+import React, { useRef } from "react";
 import { observer } from "mobx-react-lite";
 // components
 import { Spinner } from "@plane/ui";
@@ -48,8 +48,6 @@ export const SpreadsheetView: React.FC<Props> = observer((props) => {
     enableQuickCreateIssue,
     disableIssueCreation,
   } = props;
-  // states
-  const isScrolled = useRef(false);
   // refs
   const containerRef = useRef<HTMLTableElement | null>(null);
   const portalRef = useRef<HTMLDivElement | null>(null);
@@ -58,39 +56,6 @@ export const SpreadsheetView: React.FC<Props> = observer((props) => {
 
   const isEstimateEnabled: boolean = currentProjectDetails?.estimate !== null;
 
-  const handleScroll = () => {
-    if (!containerRef.current) return;
-    const scrollLeft = containerRef.current.scrollLeft;
-
-    const columnShadow = "8px 22px 22px 10px rgba(0, 0, 0, 0.05)"; // shadow for regular columns
-    const headerShadow = "8px -22px 22px 10px rgba(0, 0, 0, 0.05)"; // shadow for headers
-
-    //The shadow styles are added this way to avoid re-render of all the rows of table, which could be costly
-    if (scrollLeft > 0 !== isScrolled.current) {
-      const firtColumns = containerRef.current.querySelectorAll("table tr td:first-child, th:first-child");
-
-      for (let i = 0; i < firtColumns.length; i++) {
-        const shadow = i === 0 ? headerShadow : columnShadow;
-        if (scrollLeft > 0) {
-          (firtColumns[i] as HTMLElement).style.boxShadow = shadow;
-        } else {
-          (firtColumns[i] as HTMLElement).style.boxShadow = "none";
-        }
-      }
-      isScrolled.current = scrollLeft > 0;
-    }
-  };
-
-  useEffect(() => {
-    const currentContainerRef = containerRef.current;
-
-    if (currentContainerRef) currentContainerRef.addEventListener("scroll", handleScroll);
-
-    return () => {
-      if (currentContainerRef) currentContainerRef.removeEventListener("scroll", handleScroll);
-    };
-  }, []);
-
   if (!issueIds || issueIds.length === 0)
     return (
       <div className="grid h-full w-full place-items-center">
@@ -112,6 +77,7 @@ export const SpreadsheetView: React.FC<Props> = observer((props) => {
           quickActions={quickActions}
           handleIssues={handleIssues}
           canEditProperties={canEditProperties}
+          containerRef={containerRef}
         />
       </div>
       <div className="border-t border-custom-border-100">
diff --git a/web/components/issues/issue-layouts/utils.tsx b/web/components/issues/issue-layouts/utils.tsx
index 83ec363b9..0c3367dc1 100644
--- a/web/components/issues/issue-layouts/utils.tsx
+++ b/web/components/issues/issue-layouts/utils.tsx
@@ -1,10 +1,10 @@
 import { Avatar, PriorityIcon, StateGroupIcon } from "@plane/ui";
-import { ISSUE_PRIORITIES } from "constants/issue";
+import { EIssueListRow, ISSUE_PRIORITIES } from "constants/issue";
 import { renderEmoji } from "helpers/emoji.helper";
 import { IMemberRootStore } from "store/member";
 import { IProjectStore } from "store/project/project.store";
 import { IStateStore } from "store/state.store";
-import { GroupByColumnTypes, IGroupByColumn } from "@plane/types";
+import { GroupByColumnTypes, IGroupByColumn, IIssueListRow, TGroupedIssues, TUnGroupedIssues } from "@plane/types";
 import { STATE_GROUPS } from "constants/state";
 import { ILabelStore } from "store/label.store";
 
diff --git a/web/constants/issue.ts b/web/constants/issue.ts
index 57dff280e..5b6ce8187 100644
--- a/web/constants/issue.ts
+++ b/web/constants/issue.ts
@@ -412,6 +412,13 @@ export const ISSUE_DISPLAY_FILTERS_BY_LAYOUT: {
   },
 };
 
+export enum EIssueListRow {
+  HEADER = "HEADER",
+  ISSUE = "ISSUE",
+  NO_ISSUES = "NO_ISSUES",
+  QUICK_ADD = "QUICK_ADD",
+}
+
 export const getValueFromObject = (object: Object, key: string): string | number | boolean | null => {
   const keys = key ? key.split(".") : [];
 
@@ -442,4 +449,4 @@ export const groupReactionEmojis = (reactions: any) => {
   }
 
   return _groupedEmojis;
-};
+};
\ No newline at end of file

From 27037a2177c1a79da5f37eb8d2ae694512ea7de6 Mon Sep 17 00:00:00 2001
From: Bavisetti Narayan <72156168+NarayanBavisetti@users.noreply.github.com>
Date: Fri, 9 Feb 2024 15:53:54 +0530
Subject: [PATCH 39/58] feat: completed cycle snapshot (#3600)

* fix: transfer cycle old distribtion captured

* chore: active cycle snapshot

* chore: migration file changed

* chore: distribution payload changed

* chore: labels and assignee structure change

* chore: migration changes

* chore: cycle snapshot progress payload updated

* chore: cycle snapshot progress type added

* chore: snapshot progress stats updated in cycle sidebar

* chore: empty string validation

---------

Co-authored-by: Anmol Singh Bhatia <anmolsinghbhatia@plane.so>
---
 apiserver/plane/app/views/cycle.py            | 224 +++++++++++++++++-
 .../0060_cycle_progress_snapshot.py           |  18 ++
 apiserver/plane/db/models/cycle.py            |   1 +
 packages/types/src/cycles.d.ts                |  18 ++
 packages/ui/src/dropdowns/custom-menu.tsx     |   4 -
 web/components/cycles/sidebar.tsx             | 152 ++++++++----
 6 files changed, 370 insertions(+), 47 deletions(-)
 create mode 100644 apiserver/plane/db/migrations/0060_cycle_progress_snapshot.py

diff --git a/apiserver/plane/app/views/cycle.py b/apiserver/plane/app/views/cycle.py
index 32f593e1e..63d8d28ae 100644
--- a/apiserver/plane/app/views/cycle.py
+++ b/apiserver/plane/app/views/cycle.py
@@ -20,6 +20,7 @@ from django.core import serializers
 from django.utils import timezone
 from django.utils.decorators import method_decorator
 from django.views.decorators.gzip import gzip_page
+from django.core.serializers.json import DjangoJSONEncoder
 
 # Third party imports
 from rest_framework.response import Response
@@ -312,6 +313,7 @@ class CycleViewSet(WebhookMixin, BaseViewSet):
                     "labels": label_distribution,
                     "completion_chart": {},
                 }
+
                 if data[0]["start_date"] and data[0]["end_date"]:
                     data[0]["distribution"][
                         "completion_chart"
@@ -840,10 +842,230 @@ class TransferCycleIssueEndpoint(BaseAPIView):
                 status=status.HTTP_400_BAD_REQUEST,
             )
 
-        new_cycle = Cycle.objects.get(
+        new_cycle = Cycle.objects.filter(
             workspace__slug=slug, project_id=project_id, pk=new_cycle_id
+        ).first()
+
+        old_cycle = (
+            Cycle.objects.filter(
+                workspace__slug=slug, project_id=project_id, pk=cycle_id
+            )
+            .annotate(
+                total_issues=Count(
+                    "issue_cycle",
+                    filter=Q(
+                        issue_cycle__issue__archived_at__isnull=True,
+                        issue_cycle__issue__is_draft=False,
+                    ),
+                )
+            )
+            .annotate(
+                completed_issues=Count(
+                    "issue_cycle__issue__state__group",
+                    filter=Q(
+                        issue_cycle__issue__state__group="completed",
+                        issue_cycle__issue__archived_at__isnull=True,
+                        issue_cycle__issue__is_draft=False,
+                    ),
+                )
+            )
+            .annotate(
+                cancelled_issues=Count(
+                    "issue_cycle__issue__state__group",
+                    filter=Q(
+                        issue_cycle__issue__state__group="cancelled",
+                        issue_cycle__issue__archived_at__isnull=True,
+                        issue_cycle__issue__is_draft=False,
+                    ),
+                )
+            )
+            .annotate(
+                started_issues=Count(
+                    "issue_cycle__issue__state__group",
+                    filter=Q(
+                        issue_cycle__issue__state__group="started",
+                        issue_cycle__issue__archived_at__isnull=True,
+                        issue_cycle__issue__is_draft=False,
+                    ),
+                )
+            )
+            .annotate(
+                unstarted_issues=Count(
+                    "issue_cycle__issue__state__group",
+                    filter=Q(
+                        issue_cycle__issue__state__group="unstarted",
+                        issue_cycle__issue__archived_at__isnull=True,
+                        issue_cycle__issue__is_draft=False,
+                    ),
+                )
+            )
+            .annotate(
+                backlog_issues=Count(
+                    "issue_cycle__issue__state__group",
+                    filter=Q(
+                        issue_cycle__issue__state__group="backlog",
+                        issue_cycle__issue__archived_at__isnull=True,
+                        issue_cycle__issue__is_draft=False,
+                    ),
+                )
+            )
+            .annotate(
+                total_estimates=Sum("issue_cycle__issue__estimate_point")
+            )
+            .annotate(
+                completed_estimates=Sum(
+                    "issue_cycle__issue__estimate_point",
+                    filter=Q(
+                        issue_cycle__issue__state__group="completed",
+                        issue_cycle__issue__archived_at__isnull=True,
+                        issue_cycle__issue__is_draft=False,
+                    ),
+                )
+            )
+            .annotate(
+                started_estimates=Sum(
+                    "issue_cycle__issue__estimate_point",
+                    filter=Q(
+                        issue_cycle__issue__state__group="started",
+                        issue_cycle__issue__archived_at__isnull=True,
+                        issue_cycle__issue__is_draft=False,
+                    ),
+                )
+            )
         )
 
+        # Pass the new_cycle queryset to burndown_plot
+        completion_chart = burndown_plot(
+            queryset=old_cycle.first(),
+            slug=slug,
+            project_id=project_id,
+            cycle_id=cycle_id,
+        )
+
+        assignee_distribution = (
+            Issue.objects.filter(
+                issue_cycle__cycle_id=cycle_id,
+                workspace__slug=slug,
+                project_id=project_id,
+            )
+            .annotate(display_name=F("assignees__display_name"))
+            .annotate(assignee_id=F("assignees__id"))
+            .annotate(avatar=F("assignees__avatar"))
+            .values("display_name", "assignee_id", "avatar")
+            .annotate(
+                total_issues=Count(
+                    "id",
+                    filter=Q(archived_at__isnull=True, is_draft=False),
+                ),
+            )
+            .annotate(
+                completed_issues=Count(
+                    "id",
+                    filter=Q(
+                        completed_at__isnull=False,
+                        archived_at__isnull=True,
+                        is_draft=False,
+                    ),
+                )
+            )
+            .annotate(
+                pending_issues=Count(
+                    "id",
+                    filter=Q(
+                        completed_at__isnull=True,
+                        archived_at__isnull=True,
+                        is_draft=False,
+                    ),
+                )
+            )
+            .order_by("display_name")
+        )
+
+        label_distribution = (
+            Issue.objects.filter(
+                issue_cycle__cycle_id=cycle_id,
+                workspace__slug=slug,
+                project_id=project_id,
+            )
+            .annotate(label_name=F("labels__name"))
+            .annotate(color=F("labels__color"))
+            .annotate(label_id=F("labels__id"))
+            .values("label_name", "color", "label_id")
+            .annotate(
+                total_issues=Count(
+                    "id",
+                    filter=Q(archived_at__isnull=True, is_draft=False),
+                )
+            )
+            .annotate(
+                completed_issues=Count(
+                    "id",
+                    filter=Q(
+                        completed_at__isnull=False,
+                        archived_at__isnull=True,
+                        is_draft=False,
+                    ),
+                )
+            )
+            .annotate(
+                pending_issues=Count(
+                    "id",
+                    filter=Q(
+                        completed_at__isnull=True,
+                        archived_at__isnull=True,
+                        is_draft=False,
+                    ),
+                )
+            )
+            .order_by("label_name")
+        )
+
+        assignee_distribution_data = [
+            {
+                "display_name": item["display_name"],
+                "assignee_id": str(item["assignee_id"]) if item["assignee_id"] else None,
+                "avatar": item["avatar"],
+                "total_issues": item["total_issues"],
+                "completed_issues": item["completed_issues"],
+                "pending_issues": item["pending_issues"],
+            }
+            for item in assignee_distribution
+        ]
+
+        label_distribution_data = [
+            {
+                "label_name": item["label_name"],
+                "color": item["color"],
+                "label_id": str(item["label_id"]) if item["label_id"] else None,
+                "total_issues": item["total_issues"],
+                "completed_issues": item["completed_issues"],
+                "pending_issues": item["pending_issues"],
+            }
+            for item in label_distribution
+        ]
+
+        current_cycle = Cycle.objects.filter(
+            workspace__slug=slug, project_id=project_id, pk=cycle_id
+        ).first()
+
+        current_cycle.progress_snapshot = {
+            "total_issues": old_cycle.first().total_issues,
+            "completed_issues": old_cycle.first().completed_issues,
+            "cancelled_issues": old_cycle.first().cancelled_issues,
+            "started_issues": old_cycle.first().started_issues,
+            "unstarted_issues": old_cycle.first().unstarted_issues,
+            "backlog_issues": old_cycle.first().backlog_issues,
+            "total_estimates": old_cycle.first().total_estimates,
+            "completed_estimates": old_cycle.first().completed_estimates,
+            "started_estimates": old_cycle.first().started_estimates,
+            "distribution":{
+                "labels": label_distribution_data,
+                "assignees": assignee_distribution_data,
+                "completion_chart": completion_chart,
+            },
+        }
+        current_cycle.save(update_fields=["progress_snapshot"])
+
         if (
             new_cycle.end_date is not None
             and new_cycle.end_date < timezone.now().date()
diff --git a/apiserver/plane/db/migrations/0060_cycle_progress_snapshot.py b/apiserver/plane/db/migrations/0060_cycle_progress_snapshot.py
new file mode 100644
index 000000000..074e20a16
--- /dev/null
+++ b/apiserver/plane/db/migrations/0060_cycle_progress_snapshot.py
@@ -0,0 +1,18 @@
+# Generated by Django 4.2.7 on 2024-02-08 09:18
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('db', '0059_auto_20240208_0957'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='cycle',
+            name='progress_snapshot',
+            field=models.JSONField(default=dict),
+        ),
+    ]
diff --git a/apiserver/plane/db/models/cycle.py b/apiserver/plane/db/models/cycle.py
index 5251c68ec..d802dbc1e 100644
--- a/apiserver/plane/db/models/cycle.py
+++ b/apiserver/plane/db/models/cycle.py
@@ -68,6 +68,7 @@ class Cycle(ProjectBaseModel):
     sort_order = models.FloatField(default=65535)
     external_source = models.CharField(max_length=255, null=True, blank=True)
     external_id = models.CharField(max_length=255, blank=True, null=True)
+    progress_snapshot = models.JSONField(default=dict)
 
     class Meta:
         verbose_name = "Cycle"
diff --git a/packages/types/src/cycles.d.ts b/packages/types/src/cycles.d.ts
index 12cbab4c6..5d715385a 100644
--- a/packages/types/src/cycles.d.ts
+++ b/packages/types/src/cycles.d.ts
@@ -31,6 +31,7 @@ export interface ICycle {
   issue: string;
   name: string;
   owned_by: string;
+  progress_snapshot: TProgressSnapshot;
   project: string;
   project_detail: IProjectLite;
   status: TCycleGroups;
@@ -49,6 +50,23 @@ export interface ICycle {
   workspace_detail: IWorkspaceLite;
 }
 
+export type TProgressSnapshot = {
+  backlog_issues: number;
+  cancelled_issues: number;
+  completed_estimates: number | null;
+  completed_issues: number;
+  distribution?: {
+    assignees: TAssigneesDistribution[];
+    completion_chart: TCompletionChartDistribution;
+    labels: TLabelsDistribution[];
+  };
+  started_estimates: number | null;
+  started_issues: number;
+  total_estimates: number | null;
+  total_issues: number;
+  unstarted_issues: number;
+};
+
 export type TAssigneesDistribution = {
   assignee_id: string | null;
   avatar: string | null;
diff --git a/packages/ui/src/dropdowns/custom-menu.tsx b/packages/ui/src/dropdowns/custom-menu.tsx
index 5dd2923a8..37aba932a 100644
--- a/packages/ui/src/dropdowns/custom-menu.tsx
+++ b/packages/ui/src/dropdowns/custom-menu.tsx
@@ -54,10 +54,6 @@ const CustomMenu = (props: ICustomMenuDropdownProps) => {
     setIsOpen(false);
   };
 
-  const handleOnChange = () => {
-    if (closeOnSelect) closeDropdown();
-  };
-
   const selectActiveItem = () => {
     const activeItem: HTMLElement | undefined | null = dropdownRef.current?.querySelector(
       `[data-headlessui-state="active"] button`
diff --git a/web/components/cycles/sidebar.tsx b/web/components/cycles/sidebar.tsx
index 299c71008..6966779b5 100644
--- a/web/components/cycles/sidebar.tsx
+++ b/web/components/cycles/sidebar.tsx
@@ -3,6 +3,7 @@ import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
 import { useForm } from "react-hook-form";
 import { Disclosure, Popover, Transition } from "@headlessui/react";
+import isEmpty from "lodash/isEmpty";
 // services
 import { CycleService } from "services/cycle.service";
 // hooks
@@ -293,7 +294,11 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
   const isEndValid = new Date(`${cycleDetails?.end_date}`) >= new Date(`${cycleDetails?.start_date}`);
 
   const progressPercentage = cycleDetails
-    ? Math.round((cycleDetails.completed_issues / cycleDetails.total_issues) * 100)
+    ? isCompleted
+      ? Math.round(
+          (cycleDetails.progress_snapshot.completed_issues / cycleDetails.progress_snapshot.total_issues) * 100
+        )
+      : Math.round((cycleDetails.completed_issues / cycleDetails.total_issues) * 100)
     : null;
 
   if (!cycleDetails)
@@ -317,7 +322,14 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
   const currentCycle = CYCLE_STATUS.find((status) => status.value === cycleStatus);
 
   const issueCount =
-    cycleDetails.total_issues === 0 ? "0 Issue" : `${cycleDetails.completed_issues}/${cycleDetails.total_issues}`;
+    isCompleted && !isEmpty(cycleDetails.progress_snapshot)
+      ? cycleDetails.progress_snapshot.total_issues === 0
+        ? "0 Issue"
+        : `${cycleDetails.progress_snapshot.completed_issues}/${cycleDetails.progress_snapshot.total_issues}`
+      : cycleDetails.total_issues === 0
+      ? "0 Issue"
+      : `${cycleDetails.completed_issues}/${cycleDetails.total_issues}`;
+
   const daysLeft = findHowManyDaysLeft(cycleDetails.end_date);
 
   const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserWorkspaceRoles.MEMBER;
@@ -568,49 +580,105 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
                   <Transition show={open}>
                     <Disclosure.Panel>
                       <div className="flex flex-col gap-3">
-                        {cycleDetails.distribution?.completion_chart &&
-                        cycleDetails.start_date &&
-                        cycleDetails.end_date ? (
-                          <div className="h-full w-full pt-4">
-                            <div className="flex  items-start  gap-4 py-2 text-xs">
-                              <div className="flex items-center gap-3 text-custom-text-100">
-                                <div className="flex items-center justify-center gap-1">
-                                  <span className="h-2.5 w-2.5 rounded-full bg-[#A9BBD0]" />
-                                  <span>Ideal</span>
+                        {isCompleted && !isEmpty(cycleDetails.progress_snapshot) ? (
+                          <>
+                            {cycleDetails.progress_snapshot.distribution?.completion_chart &&
+                              cycleDetails.start_date &&
+                              cycleDetails.end_date && (
+                                <div className="h-full w-full pt-4">
+                                  <div className="flex  items-start  gap-4 py-2 text-xs">
+                                    <div className="flex items-center gap-3 text-custom-text-100">
+                                      <div className="flex items-center justify-center gap-1">
+                                        <span className="h-2.5 w-2.5 rounded-full bg-[#A9BBD0]" />
+                                        <span>Ideal</span>
+                                      </div>
+                                      <div className="flex items-center justify-center gap-1">
+                                        <span className="h-2.5 w-2.5 rounded-full bg-[#4C8FFF]" />
+                                        <span>Current</span>
+                                      </div>
+                                    </div>
+                                  </div>
+                                  <div className="relative h-40 w-80">
+                                    <ProgressChart
+                                      distribution={cycleDetails.progress_snapshot.distribution?.completion_chart}
+                                      startDate={cycleDetails.start_date}
+                                      endDate={cycleDetails.end_date}
+                                      totalIssues={cycleDetails.progress_snapshot.total_issues}
+                                    />
+                                  </div>
                                 </div>
-                                <div className="flex items-center justify-center gap-1">
-                                  <span className="h-2.5 w-2.5 rounded-full bg-[#4C8FFF]" />
-                                  <span>Current</span>
-                                </div>
-                              </div>
-                            </div>
-                            <div className="relative h-40 w-80">
-                              <ProgressChart
-                                distribution={cycleDetails.distribution?.completion_chart}
-                                startDate={cycleDetails.start_date}
-                                endDate={cycleDetails.end_date}
-                                totalIssues={cycleDetails.total_issues}
-                              />
-                            </div>
-                          </div>
+                              )}
+                          </>
                         ) : (
-                          ""
+                          <>
+                            {cycleDetails.distribution?.completion_chart &&
+                              cycleDetails.start_date &&
+                              cycleDetails.end_date && (
+                                <div className="h-full w-full pt-4">
+                                  <div className="flex  items-start  gap-4 py-2 text-xs">
+                                    <div className="flex items-center gap-3 text-custom-text-100">
+                                      <div className="flex items-center justify-center gap-1">
+                                        <span className="h-2.5 w-2.5 rounded-full bg-[#A9BBD0]" />
+                                        <span>Ideal</span>
+                                      </div>
+                                      <div className="flex items-center justify-center gap-1">
+                                        <span className="h-2.5 w-2.5 rounded-full bg-[#4C8FFF]" />
+                                        <span>Current</span>
+                                      </div>
+                                    </div>
+                                  </div>
+                                  <div className="relative h-40 w-80">
+                                    <ProgressChart
+                                      distribution={cycleDetails.distribution?.completion_chart}
+                                      startDate={cycleDetails.start_date}
+                                      endDate={cycleDetails.end_date}
+                                      totalIssues={cycleDetails.total_issues}
+                                    />
+                                  </div>
+                                </div>
+                              )}
+                          </>
                         )}
-                        {cycleDetails.total_issues > 0 && cycleDetails.distribution && (
-                          <div className="h-full w-full border-t border-custom-border-200 pt-5">
-                            <SidebarProgressStats
-                              distribution={cycleDetails.distribution}
-                              groupedIssues={{
-                                backlog: cycleDetails.backlog_issues,
-                                unstarted: cycleDetails.unstarted_issues,
-                                started: cycleDetails.started_issues,
-                                completed: cycleDetails.completed_issues,
-                                cancelled: cycleDetails.cancelled_issues,
-                              }}
-                              totalIssues={cycleDetails.total_issues}
-                              isPeekView={Boolean(peekCycle)}
-                            />
-                          </div>
+                        {/* stats */}
+                        {isCompleted && !isEmpty(cycleDetails.progress_snapshot) ? (
+                          <>
+                            {cycleDetails.progress_snapshot.total_issues > 0 &&
+                              cycleDetails.progress_snapshot.distribution && (
+                                <div className="h-full w-full border-t border-custom-border-200 pt-5">
+                                  <SidebarProgressStats
+                                    distribution={cycleDetails.progress_snapshot.distribution}
+                                    groupedIssues={{
+                                      backlog: cycleDetails.progress_snapshot.backlog_issues,
+                                      unstarted: cycleDetails.progress_snapshot.unstarted_issues,
+                                      started: cycleDetails.progress_snapshot.started_issues,
+                                      completed: cycleDetails.progress_snapshot.completed_issues,
+                                      cancelled: cycleDetails.progress_snapshot.cancelled_issues,
+                                    }}
+                                    totalIssues={cycleDetails.progress_snapshot.total_issues}
+                                    isPeekView={Boolean(peekCycle)}
+                                  />
+                                </div>
+                              )}
+                          </>
+                        ) : (
+                          <>
+                            {cycleDetails.total_issues > 0 && cycleDetails.distribution && (
+                              <div className="h-full w-full border-t border-custom-border-200 pt-5">
+                                <SidebarProgressStats
+                                  distribution={cycleDetails.distribution}
+                                  groupedIssues={{
+                                    backlog: cycleDetails.backlog_issues,
+                                    unstarted: cycleDetails.unstarted_issues,
+                                    started: cycleDetails.started_issues,
+                                    completed: cycleDetails.completed_issues,
+                                    cancelled: cycleDetails.cancelled_issues,
+                                  }}
+                                  totalIssues={cycleDetails.total_issues}
+                                  isPeekView={Boolean(peekCycle)}
+                                />
+                              </div>
+                            )}
+                          </>
                         )}
                       </div>
                     </Disclosure.Panel>

From 8d730e66804978430451b1fd15b180facc02be03 Mon Sep 17 00:00:00 2001
From: rahulramesha <71900764+rahulramesha@users.noreply.github.com>
Date: Fri, 9 Feb 2024 16:14:08 +0530
Subject: [PATCH 40/58] fix: spreadsheet date validation and sorting (#3607)

* fix validation for start and end date in spreadsheet layout

* revamp logic for sorting in all fields
---
 .../spreadsheet/columns/due-date-column.tsx   |   1 +
 .../spreadsheet/columns/start-date-column.tsx |   1 +
 web/store/issue/helpers/issue-helper.store.ts | 165 ++++++++++++++----
 web/store/issue/root.store.ts                 |  39 +++--
 web/store/member/workspace-member.store.ts    |   8 +
 5 files changed, 160 insertions(+), 54 deletions(-)

diff --git a/web/components/issues/issue-layouts/spreadsheet/columns/due-date-column.tsx b/web/components/issues/issue-layouts/spreadsheet/columns/due-date-column.tsx
index c5674cee9..98262b504 100644
--- a/web/components/issues/issue-layouts/spreadsheet/columns/due-date-column.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/columns/due-date-column.tsx
@@ -21,6 +21,7 @@ export const SpreadsheetDueDateColumn: React.FC<Props> = observer((props: Props)
     <div className="h-11 border-b-[0.5px] border-custom-border-200">
       <DateDropdown
         value={issue.target_date}
+        minDate={issue.start_date ? new Date(issue.start_date) : undefined}
         onChange={(data) => {
           const targetDate = data ? renderFormattedPayloadDate(data) : null;
           onChange(
diff --git a/web/components/issues/issue-layouts/spreadsheet/columns/start-date-column.tsx b/web/components/issues/issue-layouts/spreadsheet/columns/start-date-column.tsx
index fcbd817b6..82c00fc12 100644
--- a/web/components/issues/issue-layouts/spreadsheet/columns/start-date-column.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/columns/start-date-column.tsx
@@ -21,6 +21,7 @@ export const SpreadsheetStartDateColumn: React.FC<Props> = observer((props: Prop
     <div className="h-11 border-b-[0.5px] border-custom-border-200">
       <DateDropdown
         value={issue.start_date}
+        maxDate={issue.target_date ? new Date(issue.target_date) : undefined}
         onChange={(data) => {
           const startDate = data ? renderFormattedPayloadDate(data) : null;
           onChange(
diff --git a/web/store/issue/helpers/issue-helper.store.ts b/web/store/issue/helpers/issue-helper.store.ts
index 5fdf0df82..ff5dba9dd 100644
--- a/web/store/issue/helpers/issue-helper.store.ts
+++ b/web/store/issue/helpers/issue-helper.store.ts
@@ -1,7 +1,7 @@
-import sortBy from "lodash/sortBy";
+import orderBy from "lodash/orderBy";
 import get from "lodash/get";
 import indexOf from "lodash/indexOf";
-import reverse from "lodash/reverse";
+import isEmpty from "lodash/isEmpty";
 import values from "lodash/values";
 // types
 import { TIssue, TIssueMap, TIssueGroupByOptions, TIssueOrderByOptions } from "@plane/types";
@@ -144,98 +144,189 @@ export class IssueHelperStore implements TIssueHelperStore {
   issueDisplayFiltersDefaultData = (groupBy: string | null): string[] => {
     switch (groupBy) {
       case "state":
-        return this.rootStore?.states || [];
+        return Object.keys(this.rootStore?.stateMap || {});
       case "state_detail.group":
         return Object.keys(STATE_GROUPS);
       case "priority":
         return ISSUE_PRIORITIES.map((i) => i.key);
       case "labels":
-        return this.rootStore?.labels || [];
+        return Object.keys(this.rootStore?.labelMap || {});
       case "created_by":
-        return this.rootStore?.members || [];
+        return Object.keys(this.rootStore?.workSpaceMemberRolesMap || {});
       case "assignees":
-        return this.rootStore?.members || [];
+        return Object.keys(this.rootStore?.workSpaceMemberRolesMap || {});
       case "project":
-        return this.rootStore?.projects || [];
+        return Object.keys(this.rootStore?.projectMap || {});
       default:
         return [];
     }
   };
 
+  /**
+   * This Method is used to get data of the issue based on the ids of the data for states, labels adn assignees
+   * @param dataType what type of data is being sent
+   * @param dataIds id/ids of the data that is to be populated
+   * @param order ascending or descending for arrays of data
+   * @returns string | string[] of sortable fields to be used for sorting
+   */
+  populateIssueDataForSorting(
+    dataType: "state_id" | "label_ids" | "assignee_ids",
+    dataIds: string | string[] | null | undefined,
+    order?: "asc" | "desc"
+  ) {
+    if (!dataIds) return;
+
+    const dataValues: string[] = [];
+    const isDataIdsArray = Array.isArray(dataIds);
+    const dataIdsArray = isDataIdsArray ? dataIds : [dataIds];
+
+    switch (dataType) {
+      case "state_id":
+        const stateMap = this.rootStore?.stateMap;
+        if (!stateMap) break;
+        for (const dataId of dataIdsArray) {
+          const state = stateMap[dataId];
+          if (state && state.name) dataValues.push(state.name.toLocaleLowerCase());
+        }
+        break;
+      case "label_ids":
+        const labelMap = this.rootStore?.labelMap;
+        if (!labelMap) break;
+        for (const dataId of dataIdsArray) {
+          const label = labelMap[dataId];
+          if (label && label.name) dataValues.push(label.name.toLocaleLowerCase());
+        }
+        break;
+      case "assignee_ids":
+        const memberMap = this.rootStore?.memberMap;
+        if (!memberMap) break;
+        for (const dataId of dataIdsArray) {
+          const member = memberMap[dataId];
+          if (memberMap && member.first_name) dataValues.push(member.first_name.toLocaleLowerCase());
+        }
+        break;
+    }
+
+    return isDataIdsArray ? (order ? orderBy(dataValues, undefined, [order]) : dataValues) : dataValues[0];
+  }
+
+  /**
+   * This Method is mainly used to filter out empty values in the begining
+   * @param key key of the value that is to be checked if empty
+   * @param object any object in which the key's value is to be checked
+   * @returns 1 if emoty, 0 if not empty
+   */
+  getSortOrderToFilterEmptyValues(key: string, object: any) {
+    const value = object?.[key];
+
+    if (typeof value !== "number" && isEmpty(value)) return 1;
+
+    return 0;
+  }
+
   issuesSortWithOrderBy = (issueObject: TIssueMap, key: Partial<TIssueOrderByOptions>): TIssue[] => {
     let array = values(issueObject);
-    array = reverse(sortBy(array, "created_at"));
+    array = orderBy(array, "created_at");
+
     switch (key) {
       case "sort_order":
-        return sortBy(array, "sort_order");
-
+        return orderBy(array, "sort_order");
       case "state__name":
-        return reverse(sortBy(array, "state"));
+        return orderBy(array, (issue) => this.populateIssueDataForSorting("state_id", issue["state_id"]));
       case "-state__name":
-        return sortBy(array, "state");
-
+        return orderBy(array, (issue) => this.populateIssueDataForSorting("state_id", issue["state_id"]), ["desc"]);
       // dates
       case "created_at":
-        return sortBy(array, "created_at");
+        return orderBy(array, "created_at");
       case "-created_at":
-        return reverse(sortBy(array, "created_at"));
-
+        return orderBy(array, "created_at", ["desc"]);
       case "updated_at":
-        return sortBy(array, "updated_at");
+        return orderBy(array, "updated_at");
       case "-updated_at":
-        return reverse(sortBy(array, "updated_at"));
-
+        return orderBy(array, "updated_at", ["desc"]);
       case "start_date":
-        return sortBy(array, "start_date");
+        return orderBy(array, [this.getSortOrderToFilterEmptyValues.bind(null, "start_date"), "start_date"]); //preferring sorting based on empty values to always keep the empty values below
       case "-start_date":
-        return reverse(sortBy(array, "start_date"));
+        return orderBy(
+          array,
+          [this.getSortOrderToFilterEmptyValues.bind(null, "start_date"), "start_date"], //preferring sorting based on empty values to always keep the empty values below
+          ["asc", "desc"]
+        );
 
       case "target_date":
-        return sortBy(array, "target_date");
+        return orderBy(array, [this.getSortOrderToFilterEmptyValues.bind(null, "target_date"), "target_date"]); //preferring sorting based on empty values to always keep the empty values below
       case "-target_date":
-        return reverse(sortBy(array, "target_date"));
+        return orderBy(
+          array,
+          [this.getSortOrderToFilterEmptyValues.bind(null, "target_date"), "target_date"], //preferring sorting based on empty values to always keep the empty values below
+          ["asc", "desc"]
+        );
 
       // custom
       case "priority": {
         const sortArray = ISSUE_PRIORITIES.map((i) => i.key);
-        return reverse(sortBy(array, (_issue: TIssue) => indexOf(sortArray, _issue.priority)));
+        return orderBy(array, (_issue: TIssue) => indexOf(sortArray, _issue.priority), ["desc"]);
       }
       case "-priority": {
         const sortArray = ISSUE_PRIORITIES.map((i) => i.key);
-        return sortBy(array, (_issue: TIssue) => indexOf(sortArray, _issue.priority));
+        return orderBy(array, (_issue: TIssue) => indexOf(sortArray, _issue.priority));
       }
 
       // number
       case "attachment_count":
-        return sortBy(array, "attachment_count");
+        return orderBy(array, "attachment_count");
       case "-attachment_count":
-        return reverse(sortBy(array, "attachment_count"));
+        return orderBy(array, "attachment_count", ["desc"]);
 
       case "estimate_point":
-        return sortBy(array, "estimate_point");
+        return orderBy(array, [this.getSortOrderToFilterEmptyValues.bind(null, "estimate_point"), "estimate_point"]); //preferring sorting based on empty values to always keep the empty values below
       case "-estimate_point":
-        return reverse(sortBy(array, "estimate_point"));
+        return orderBy(
+          array,
+          [this.getSortOrderToFilterEmptyValues.bind(null, "estimate_point"), "estimate_point"], //preferring sorting based on empty values to always keep the empty values below
+          ["asc", "desc"]
+        );
 
       case "link_count":
-        return sortBy(array, "link_count");
+        return orderBy(array, "link_count");
       case "-link_count":
-        return reverse(sortBy(array, "link_count"));
+        return orderBy(array, "link_count", ["desc"]);
 
       case "sub_issues_count":
-        return sortBy(array, "sub_issues_count");
+        return orderBy(array, "sub_issues_count");
       case "-sub_issues_count":
-        return reverse(sortBy(array, "sub_issues_count"));
+        return orderBy(array, "sub_issues_count", ["desc"]);
 
       // Array
       case "labels__name":
-        return reverse(sortBy(array, "labels"));
+        return orderBy(array, [
+          this.getSortOrderToFilterEmptyValues.bind(null, "label_ids"), //preferring sorting based on empty values to always keep the empty values below
+          (issue) => this.populateIssueDataForSorting("label_ids", issue["label_ids"], "asc"),
+        ]);
       case "-labels__name":
-        return sortBy(array, "labels");
+        return orderBy(
+          array,
+          [
+            this.getSortOrderToFilterEmptyValues.bind(null, "label_ids"), //preferring sorting based on empty values to always keep the empty values below
+            (issue) => this.populateIssueDataForSorting("label_ids", issue["label_ids"], "desc"),
+          ],
+          ["asc", "desc"]
+        );
 
       case "assignees__first_name":
-        return reverse(sortBy(array, "assignees"));
+        return orderBy(array, [
+          this.getSortOrderToFilterEmptyValues.bind(null, "assignee_ids"), //preferring sorting based on empty values to always keep the empty values below
+          (issue) => this.populateIssueDataForSorting("assignee_ids", issue["assignee_ids"], "asc"),
+        ]);
       case "-assignees__first_name":
-        return sortBy(array, "assignees");
+        return orderBy(
+          array,
+          [
+            this.getSortOrderToFilterEmptyValues.bind(null, "assignee_ids"), //preferring sorting based on empty values to always keep the empty values below
+            (issue) => this.populateIssueDataForSorting("assignee_ids", issue["assignee_ids"], "desc"),
+          ],
+          ["asc", "desc"]
+        );
 
       default:
         return array;
diff --git a/web/store/issue/root.store.ts b/web/store/issue/root.store.ts
index b2425757c..ee2e6d84d 100644
--- a/web/store/issue/root.store.ts
+++ b/web/store/issue/root.store.ts
@@ -4,7 +4,7 @@ import isEmpty from "lodash/isEmpty";
 import { RootStore } from "../root.store";
 import { IStateStore, StateStore } from "../state.store";
 // issues data store
-import { IState } from "@plane/types";
+import { IIssueLabel, IProject, IState, IUserLite } from "@plane/types";
 import { IIssueStore, IssueStore } from "./issue.store";
 import { IIssueDetail, IssueDetail } from "./issue-details/root.store";
 import { IWorkspaceIssuesFilter, WorkspaceIssuesFilter, IWorkspaceIssues, WorkspaceIssues } from "./workspace";
@@ -22,6 +22,7 @@ import { IArchivedIssuesFilter, ArchivedIssuesFilter, IArchivedIssues, ArchivedI
 import { IDraftIssuesFilter, DraftIssuesFilter, IDraftIssues, DraftIssues } from "./draft";
 import { IIssueKanBanViewStore, IssueKanBanViewStore } from "./issue_kanban_view.store";
 import { ICalendarStore, CalendarStore } from "./issue_calendar_view.store";
+import { IWorkspaceMembership } from "store/member/workspace-member.store";
 
 export interface IIssueRootStore {
   currentUserId: string | undefined;
@@ -32,11 +33,12 @@ export interface IIssueRootStore {
   viewId: string | undefined;
   globalViewId: string | undefined; // all issues view id
   userId: string | undefined; // user profile detail Id
-  states: string[] | undefined;
+  stateMap: Record<string, IState> | undefined;
   stateDetails: IState[] | undefined;
-  labels: string[] | undefined;
-  members: string[] | undefined;
-  projects: string[] | undefined;
+  labelMap: Record<string, IIssueLabel> | undefined;
+  workSpaceMemberRolesMap: Record<string, IWorkspaceMembership> | undefined;
+  memberMap: Record<string, IUserLite> | undefined;
+  projectMap: Record<string, IProject> | undefined;
 
   rootStore: RootStore;
 
@@ -83,11 +85,12 @@ export class IssueRootStore implements IIssueRootStore {
   viewId: string | undefined = undefined;
   globalViewId: string | undefined = undefined;
   userId: string | undefined = undefined;
-  states: string[] | undefined = undefined;
+  stateMap: Record<string, IState> | undefined = undefined;
   stateDetails: IState[] | undefined = undefined;
-  labels: string[] | undefined = undefined;
-  members: string[] | undefined = undefined;
-  projects: string[] | undefined = undefined;
+  labelMap: Record<string, IIssueLabel> | undefined = undefined;
+  workSpaceMemberRolesMap: Record<string, IWorkspaceMembership> | undefined = undefined;
+  memberMap: Record<string, IUserLite> | undefined = undefined;
+  projectMap: Record<string, IProject> | undefined = undefined;
 
   rootStore: RootStore;
 
@@ -133,11 +136,12 @@ export class IssueRootStore implements IIssueRootStore {
       viewId: observable.ref,
       userId: observable.ref,
       globalViewId: observable.ref,
-      states: observable,
+      stateMap: observable,
       stateDetails: observable,
-      labels: observable,
-      members: observable,
-      projects: observable,
+      labelMap: observable,
+      memberMap: observable,
+      workSpaceMemberRolesMap: observable,
+      projectMap: observable,
     });
 
     this.rootStore = rootStore;
@@ -151,13 +155,14 @@ export class IssueRootStore implements IIssueRootStore {
       if (rootStore.app.router.viewId) this.viewId = rootStore.app.router.viewId;
       if (rootStore.app.router.globalViewId) this.globalViewId = rootStore.app.router.globalViewId;
       if (rootStore.app.router.userId) this.userId = rootStore.app.router.userId;
-      if (!isEmpty(rootStore?.state?.stateMap)) this.states = Object.keys(rootStore?.state?.stateMap);
+      if (!isEmpty(rootStore?.state?.stateMap)) this.stateMap = rootStore?.state?.stateMap;
       if (!isEmpty(rootStore?.state?.projectStates)) this.stateDetails = rootStore?.state?.projectStates;
-      if (!isEmpty(rootStore?.label?.labelMap)) this.labels = Object.keys(rootStore?.label?.labelMap);
+      if (!isEmpty(rootStore?.label?.labelMap)) this.labelMap = rootStore?.label?.labelMap;
       if (!isEmpty(rootStore?.memberRoot?.workspace?.workspaceMemberMap))
-        this.members = Object.keys(rootStore?.memberRoot?.workspace?.workspaceMemberMap);
+        this.workSpaceMemberRolesMap = rootStore?.memberRoot?.workspace?.memberMap || undefined;
+      if (!isEmpty(rootStore?.memberRoot?.memberMap)) this.memberMap = rootStore?.memberRoot?.memberMap || undefined;
       if (!isEmpty(rootStore?.projectRoot?.project?.projectMap))
-        this.projects = Object.keys(rootStore?.projectRoot?.project?.projectMap);
+        this.projectMap = rootStore?.projectRoot?.project?.projectMap;
     });
 
     this.issues = new IssueStore();
diff --git a/web/store/member/workspace-member.store.ts b/web/store/member/workspace-member.store.ts
index ff65d0eb9..1dae25bd4 100644
--- a/web/store/member/workspace-member.store.ts
+++ b/web/store/member/workspace-member.store.ts
@@ -26,6 +26,7 @@ export interface IWorkspaceMemberStore {
   // computed
   workspaceMemberIds: string[] | null;
   workspaceMemberInvitationIds: string[] | null;
+  memberMap: Record<string, IWorkspaceMembership> | null;
   // computed actions
   getSearchedWorkspaceMemberIds: (searchQuery: string) => string[] | null;
   getSearchedWorkspaceInvitationIds: (searchQuery: string) => string[] | null;
@@ -68,6 +69,7 @@ export class WorkspaceMemberStore implements IWorkspaceMemberStore {
       // computed
       workspaceMemberIds: computed,
       workspaceMemberInvitationIds: computed,
+      memberMap: computed,
       // actions
       fetchWorkspaceMembers: action,
       updateMember: action,
@@ -100,6 +102,12 @@ export class WorkspaceMemberStore implements IWorkspaceMemberStore {
     return memberIds;
   }
 
+  get memberMap() {
+    const workspaceSlug = this.routerStore.workspaceSlug;
+    if (!workspaceSlug) return null;
+    return this.workspaceMemberMap?.[workspaceSlug] ?? {};
+  }
+
   get workspaceMemberInvitationIds() {
     const workspaceSlug = this.routerStore.workspaceSlug;
     if (!workspaceSlug) return null;

From be5d1eb9f96c066d9c949cd26d5f13a391505165 Mon Sep 17 00:00:00 2001
From: Lakhan Baheti <94619783+1akhanBaheti@users.noreply.github.com>
Date: Fri, 9 Feb 2024 16:17:39 +0530
Subject: [PATCH 41/58] fix: notification popover responsiveness (#3602)

* fix: notification popover responsiveness

* fix: build errors

* fix: typo
---
 .../notifications/notification-card.tsx       | 289 ++++++++++++------
 .../notifications/notification-header.tsx     |  20 +-
 .../notifications/notification-popover.tsx    | 273 +++++++++--------
 .../select-snooze-till-modal.tsx              |  13 +-
 4 files changed, 360 insertions(+), 235 deletions(-)

diff --git a/web/components/notifications/notification-card.tsx b/web/components/notifications/notification-card.tsx
index 7a372c5d8..e709bbca3 100644
--- a/web/components/notifications/notification-card.tsx
+++ b/web/components/notifications/notification-card.tsx
@@ -1,7 +1,7 @@
-import React from "react";
+import React, { useEffect, useRef } from "react";
 import Image from "next/image";
 import { useRouter } from "next/router";
-import { ArchiveRestore, Clock, MessageSquare, User2 } from "lucide-react";
+import { ArchiveRestore, Clock, MessageSquare, MoreVertical, User2 } from "lucide-react";
 import Link from "next/link";
 // hooks
 import useToast from "hooks/use-toast";
@@ -14,6 +14,7 @@ import { replaceUnderscoreIfSnakeCase, truncateText, stripAndTruncateHTML } from
 import { calculateTimeAgo, renderFormattedTime, renderFormattedDate } from "helpers/date-time.helper";
 // type
 import type { IUserNotification } from "@plane/types";
+import { Menu } from "@headlessui/react";
 
 type NotificationCardProps = {
   notification: IUserNotification;
@@ -40,8 +41,73 @@ export const NotificationCard: React.FC<NotificationCardProps> = (props) => {
 
   const router = useRouter();
   const { workspaceSlug } = router.query;
-
+  // states
+  const [showSnoozeOptions, setshowSnoozeOptions] = React.useState(false);
+  // toast alert
   const { setToastAlert } = useToast();
+  // refs
+  const snoozeRef = useRef<HTMLDivElement | null>(null);
+
+  const moreOptions = [
+    {
+      id: 1,
+      name: notification.read_at ? "Mark as unread" : "Mark as read",
+      icon: <MessageSquare className="h-3.5 w-3.5 text-custom-text-300" />,
+      onClick: () => {
+        markNotificationReadStatusToggle(notification.id).then(() => {
+          setToastAlert({
+            title: notification.read_at ? "Notification marked as read" : "Notification marked as unread",
+            type: "success",
+          });
+        });
+      },
+    },
+    {
+      id: 2,
+      name: notification.archived_at ? "Unarchive" : "Archive",
+      icon: notification.archived_at ? (
+        <ArchiveRestore className="h-3.5 w-3.5 text-custom-text-300" />
+      ) : (
+        <ArchiveIcon className="h-3.5 w-3.5 text-custom-text-300" />
+      ),
+      onClick: () => {
+        markNotificationArchivedStatus(notification.id).then(() => {
+          setToastAlert({
+            title: notification.archived_at ? "Notification un-archived" : "Notification archived",
+            type: "success",
+          });
+        });
+      },
+    },
+  ];
+
+  const snoozeOptionOnClick = (date: Date | null) => {
+    if (!date) {
+      setSelectedNotificationForSnooze(notification.id);
+      return;
+    }
+    markSnoozeNotification(notification.id, date).then(() => {
+      setToastAlert({
+        title: `Notification snoozed till ${renderFormattedDate(date)}`,
+        type: "success",
+      });
+    });
+  };
+
+  // close snooze options on outside click
+  useEffect(() => {
+    const handleClickOutside = (event: any) => {
+      if (snoozeRef.current && !snoozeRef.current?.contains(event.target)) {
+        setshowSnoozeOptions(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside, true);
+    document.addEventListener("touchend", handleClickOutside, true);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside, true);
+      document.removeEventListener("touchend", handleClickOutside, true);
+    };
+  }, []);
 
   if (isSnoozedTabOpen && new Date(notification.snoozed_till!) < new Date()) return null;
 
@@ -87,57 +153,136 @@ export const NotificationCard: React.FC<NotificationCardProps> = (props) => {
         )}
       </div>
       <div className="w-full space-y-2.5 overflow-hidden">
-        {!notification.message ? (
-          <div className="w-full break-words text-sm">
-            <span className="font-semibold">
-              {notification.triggered_by_details.is_bot
-                ? notification.triggered_by_details.first_name
-                : notification.triggered_by_details.display_name}{" "}
-            </span>
-            {notification.data.issue_activity.field !== "comment" && notification.data.issue_activity.verb}{" "}
-            {notification.data.issue_activity.field === "comment"
-              ? "commented"
-              : notification.data.issue_activity.field === "None"
-              ? null
-              : replaceUnderscoreIfSnakeCase(notification.data.issue_activity.field)}{" "}
-            {notification.data.issue_activity.field !== "comment" && notification.data.issue_activity.field !== "None"
-              ? "to"
-              : ""}
-            <span className="font-semibold">
-              {" "}
-              {notification.data.issue_activity.field !== "None" ? (
-                notification.data.issue_activity.field !== "comment" ? (
-                  notification.data.issue_activity.field === "target_date" ? (
-                    renderFormattedDate(notification.data.issue_activity.new_value)
-                  ) : notification.data.issue_activity.field === "attachment" ? (
-                    "the issue"
-                  ) : notification.data.issue_activity.field === "description" ? (
-                    stripAndTruncateHTML(notification.data.issue_activity.new_value, 55)
+        <div className="flex items-start">
+          {!notification.message ? (
+            <div className="w-full break-words text-sm">
+              <span className="font-semibold">
+                {notification.triggered_by_details.is_bot
+                  ? notification.triggered_by_details.first_name
+                  : notification.triggered_by_details.display_name}{" "}
+              </span>
+              {notification.data.issue_activity.field !== "comment" && notification.data.issue_activity.verb}{" "}
+              {notification.data.issue_activity.field === "comment"
+                ? "commented"
+                : notification.data.issue_activity.field === "None"
+                ? null
+                : replaceUnderscoreIfSnakeCase(notification.data.issue_activity.field)}{" "}
+              {notification.data.issue_activity.field !== "comment" && notification.data.issue_activity.field !== "None"
+                ? "to"
+                : ""}
+              <span className="font-semibold">
+                {" "}
+                {notification.data.issue_activity.field !== "None" ? (
+                  notification.data.issue_activity.field !== "comment" ? (
+                    notification.data.issue_activity.field === "target_date" ? (
+                      renderFormattedDate(notification.data.issue_activity.new_value)
+                    ) : notification.data.issue_activity.field === "attachment" ? (
+                      "the issue"
+                    ) : notification.data.issue_activity.field === "description" ? (
+                      stripAndTruncateHTML(notification.data.issue_activity.new_value, 55)
+                    ) : (
+                      notification.data.issue_activity.new_value
+                    )
                   ) : (
-                    notification.data.issue_activity.new_value
+                    <span>
+                      {`"`}
+                      {notification.data.issue_activity.new_value.length > 55
+                        ? notification?.data?.issue_activity?.issue_comment?.slice(0, 50) + "..."
+                        : notification.data.issue_activity.issue_comment}
+                      {`"`}
+                    </span>
                   )
                 ) : (
-                  <span>
-                    {`"`}
-                    {notification.data.issue_activity.new_value.length > 55
-                      ? notification?.data?.issue_activity?.issue_comment?.slice(0, 50) + "..."
-                      : notification.data.issue_activity.issue_comment}
-                    {`"`}
-                  </span>
-                )
-              ) : (
-                "the issue and assigned it to you."
+                  "the issue and assigned it to you."
+                )}
+              </span>
+            </div>
+          ) : (
+            <div className="w-full break-words text-sm">
+              <span className="semi-bold">{notification.message}</span>
+            </div>
+          )}
+          <div className="flex md:hidden items-start">
+            <Menu as="div" className={" w-min text-left"}>
+              {({ open }) => (
+                <>
+                  <Menu.Button as={React.Fragment}>
+                    <button
+                      onClick={(e) => e.stopPropagation()}
+                      className="flex w-full items-center gap-x-2 rounded p-0.5 text-sm"
+                    >
+                      <MoreVertical className="h-3.5 w-3.5 text-custom-text-300" />
+                    </button>
+                  </Menu.Button>
+                  {open && (
+                    <Menu.Items className={"absolute right-0 z-10"} static>
+                      <div
+                        className={
+                          "my-1 overflow-y-scroll rounded-md border-[0.5px] border-custom-border-300 bg-custom-background-100 px-2 py-2.5 text-xs shadow-custom-shadow-rg focus:outline-none min-w-[12rem] whitespace-nowrap"
+                        }
+                      >
+                        {moreOptions.map((item) => (
+                          <Menu.Item as="div">
+                            {({ close }) => (
+                              <button
+                                onClick={(e) => {
+                                  e.stopPropagation();
+                                  e.preventDefault();
+                                  item.onClick();
+                                  close();
+                                }}
+                                className="flex gap-x-2 items-center p-1.5"
+                              >
+                                {item.icon}
+                                {item.name}
+                              </button>
+                            )}
+                          </Menu.Item>
+                        ))}
+                        <Menu.Item as="div">
+                          <div
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              e.preventDefault();
+                              setshowSnoozeOptions(true);
+                            }}
+                            className="flex gap-x-2 items-center p-1.5"
+                          >
+                            <Clock className="h-3.5 w-3.5 text-custom-text-300" />
+                            Snooze
+                          </div>
+                        </Menu.Item>
+                      </div>
+                    </Menu.Items>
+                  )}
+                </>
               )}
-            </span>
+            </Menu>
+            {showSnoozeOptions && (
+              <div
+                ref={snoozeRef}
+                className="absolute right-36 z-20 my-1 top-24 overflow-y-scroll rounded-md border-[0.5px] border-custom-border-300 bg-custom-background-100 px-2 py-2.5 text-xs shadow-custom-shadow-rg focus:outline-none min-w-[12rem] whitespace-nowrap"
+              >
+                {snoozeOptions.map((item) => (
+                  <p
+                    className="p-1.5"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      e.preventDefault();
+                      setshowSnoozeOptions(false);
+                      snoozeOptionOnClick(item.value);
+                    }}
+                  >
+                    {item.label}
+                  </p>
+                ))}
+              </div>
+            )}
           </div>
-        ) : (
-          <div className="w-full break-words text-sm">
-            <span className="semi-bold">{notification.message}</span>
-          </div>
-        )}
+        </div>
 
         <div className="flex justify-between gap-2 text-xs">
-          <p className="text-custom-text-300">
+          <p className="text-custom-text-300 line-clamp-1">
             {truncateText(
               `${notification.data.issue.identifier}-${notification.data.issue.sequence_id} ${notification.data.issue.name}`,
               50
@@ -152,43 +297,12 @@ export const NotificationCard: React.FC<NotificationCardProps> = (props) => {
               </span>
             </p>
           ) : (
-            <p className="flex-shrink-0 text-custom-text-300">{calculateTimeAgo(notification.created_at)}</p>
+            <p className="flex-shrink-0 text-custom-text-300 mt-auto">{calculateTimeAgo(notification.created_at)}</p>
           )}
         </div>
       </div>
-      <div className="absolute right-3 top-3 hidden gap-x-3 py-1 group-hover:flex">
-        {[
-          {
-            id: 1,
-            name: notification.read_at ? "Mark as unread" : "Mark as read",
-            icon: <MessageSquare className="h-3.5 w-3.5 text-custom-text-300" />,
-            onClick: () => {
-              markNotificationReadStatusToggle(notification.id).then(() => {
-                setToastAlert({
-                  title: notification.read_at ? "Notification marked as read" : "Notification marked as unread",
-                  type: "success",
-                });
-              });
-            },
-          },
-          {
-            id: 2,
-            name: notification.archived_at ? "Unarchive" : "Archive",
-            icon: notification.archived_at ? (
-              <ArchiveRestore className="h-3.5 w-3.5 text-custom-text-300" />
-            ) : (
-              <ArchiveIcon className="h-3.5 w-3.5 text-custom-text-300" />
-            ),
-            onClick: () => {
-              markNotificationArchivedStatus(notification.id).then(() => {
-                setToastAlert({
-                  title: notification.archived_at ? "Notification un-archived" : "Notification archived",
-                  type: "success",
-                });
-              });
-            },
-          },
-        ].map((item) => (
+      <div className="absolute right-3 top-3 hidden gap-x-3 py-1 md:group-hover:flex">
+        {moreOptions.map((item) => (
           <Tooltip tooltipContent={item.name}>
             <button
               type="button"
@@ -221,18 +335,7 @@ export const NotificationCard: React.FC<NotificationCardProps> = (props) => {
                 onClick={(e) => {
                   e.stopPropagation();
                   e.preventDefault();
-
-                  if (!item.value) {
-                    setSelectedNotificationForSnooze(notification.id);
-                    return;
-                  }
-
-                  markSnoozeNotification(notification.id, item.value).then(() => {
-                    setToastAlert({
-                      title: `Notification snoozed till ${renderFormattedDate(item.value)}`,
-                      type: "success",
-                    });
-                  });
+                  snoozeOptionOnClick(item.value);
                 }}
               >
                 {item.label}
diff --git a/web/components/notifications/notification-header.tsx b/web/components/notifications/notification-header.tsx
index 39bf0e8fb..c8ba54ab4 100644
--- a/web/components/notifications/notification-header.tsx
+++ b/web/components/notifications/notification-header.tsx
@@ -1,5 +1,7 @@
 import React from "react";
 import { ArrowLeft, CheckCheck, Clock, ListFilter, MoreVertical, RefreshCw, X } from "lucide-react";
+// components
+import { SidebarHamburgerToggle } from "components/core/sidebar/sidebar-menu-hamburger-toggle";
 // ui
 import { ArchiveIcon, CustomMenu, Tooltip } from "@plane/ui";
 // helpers
@@ -65,7 +67,11 @@ export const NotificationHeader: React.FC<NotificationHeaderProps> = (props) =>
   return (
     <>
       <div className="flex items-center justify-between px-5 pt-5">
-        <h2 className="mb-2 text-xl font-semibold">Notifications</h2>
+        <div className="flex items-center gap-x-2 ">
+          <SidebarHamburgerToggle />
+          <h2 className="md:text-xl md:font-semibold">Notifications</h2>
+        </div>
+
         <div className="flex items-center justify-center gap-x-4 text-custom-text-200">
           <Tooltip tooltipContent="Refresh">
             <button
@@ -128,11 +134,13 @@ export const NotificationHeader: React.FC<NotificationHeaderProps> = (props) =>
               </div>
             </CustomMenu.MenuItem>
           </CustomMenu>
-          <Tooltip tooltipContent="Close">
-            <button type="button" onClick={() => closePopover()}>
-              <X className="h-3.5 w-3.5" />
-            </button>
-          </Tooltip>
+          <div className="hidden md:block">
+            <Tooltip tooltipContent="Close">
+              <button type="button" onClick={() => closePopover()}>
+                <X className="h-3.5 w-3.5" />
+              </button>
+            </Tooltip>
+          </div>
         </div>
       </div>
       <div className="mt-5 w-full border-b border-custom-border-300 px-5">
diff --git a/web/components/notifications/notification-popover.tsx b/web/components/notifications/notification-popover.tsx
index 4b55ea4cb..47fdae6ef 100644
--- a/web/components/notifications/notification-popover.tsx
+++ b/web/components/notifications/notification-popover.tsx
@@ -5,6 +5,7 @@ import { observer } from "mobx-react-lite";
 // hooks
 import { useApplication } from "hooks/store";
 import useUserNotification from "hooks/use-user-notifications";
+import useOutsideClickDetector from "hooks/use-outside-click-detector";
 // components
 import { EmptyState } from "components/common";
 import { SnoozeNotificationModal, NotificationCard, NotificationHeader } from "components/notifications";
@@ -15,8 +16,12 @@ import emptyNotification from "public/empty-state/notification.svg";
 import { getNumberCount } from "helpers/string.helper";
 
 export const NotificationPopover = observer(() => {
+  // states
+  const [isActive, setIsActive] = React.useState(false);
   // store hooks
   const { theme: themeStore } = useApplication();
+  // refs
+  const notificationPopoverRef = React.useRef<HTMLDivElement | null>(null);
 
   const {
     notifications,
@@ -44,8 +49,11 @@ export const NotificationPopover = observer(() => {
     setFetchNotifications,
     markAllNotificationsAsRead,
   } = useUserNotification();
-
   const isSidebarCollapsed = themeStore.sidebarCollapsed;
+  useOutsideClickDetector(notificationPopoverRef, () => {
+    // if snooze modal is open, then don't close the popover
+    if (selectedNotificationForSnooze === null) setIsActive(false);
+  });
 
   return (
     <>
@@ -54,141 +62,142 @@ export const NotificationPopover = observer(() => {
         onClose={() => setSelectedNotificationForSnooze(null)}
         onSubmit={markSnoozeNotification}
         notification={notifications?.find((notification) => notification.id === selectedNotificationForSnooze) || null}
-        onSuccess={() => {
-          setSelectedNotificationForSnooze(null);
-        }}
+        onSuccess={() => setSelectedNotificationForSnooze(null)}
       />
-      <Popover className="relative w-full">
-        {({ open: isActive, close: closePopover }) => {
-          if (isActive) setFetchNotifications(true);
+      <Popover ref={notificationPopoverRef} className="md:relative w-full">
+        <>
+          <Tooltip tooltipContent="Notifications" position="right" className="ml-2" disabled={!isSidebarCollapsed}>
+            <button
+              className={`group relative flex w-full items-center gap-2.5 rounded-md px-3 py-2 text-sm font-medium outline-none ${
+                isActive
+                  ? "bg-custom-primary-100/10 text-custom-primary-100"
+                  : "text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80"
+              } ${isSidebarCollapsed ? "justify-center" : ""}`}
+              onClick={() => {
+                if (window.innerWidth < 768) themeStore.toggleSidebar();
+                if (!isActive) setFetchNotifications(true);
+                setIsActive(!isActive);
+              }}
+            >
+              <Bell className="h-4 w-4" />
+              {isSidebarCollapsed ? null : <span>Notifications</span>}
+              {totalNotificationCount && totalNotificationCount > 0 ? (
+                isSidebarCollapsed ? (
+                  <span className="absolute right-3.5 top-2 h-2 w-2 rounded-full bg-custom-primary-300" />
+                ) : (
+                  <span className="ml-auto rounded-full bg-custom-primary-300 px-1.5 text-xs text-white">
+                    {getNumberCount(totalNotificationCount)}
+                  </span>
+                )
+              ) : null}
+            </button>
+          </Tooltip>
+          <Transition
+            show={isActive}
+            as={Fragment}
+            enter="transition ease-out duration-200"
+            enterFrom="opacity-0 translate-y-1"
+            enterTo="opacity-100 translate-y-0"
+            leave="transition ease-in duration-150"
+            leaveFrom="opacity-100 translate-y-0"
+            leaveTo="opacity-0 translate-y-1"
+          >
+            <Popover.Panel
+              className="absolute top-0 left-[280px] md:-top-36 md:ml-8 md:h-[50vh] z-10 flex h-full w-[100vw] flex-col rounded-xl md:border border-custom-border-300 bg-custom-background-100 shadow-lg md:left-full md:w-[36rem]"
+              static
+            >
+              <NotificationHeader
+                notificationCount={notificationCount}
+                notificationMutate={notificationMutate}
+                closePopover={() => setIsActive(false)}
+                isRefreshing={isRefreshing}
+                snoozed={snoozed}
+                archived={archived}
+                readNotification={readNotification}
+                selectedTab={selectedTab}
+                setSnoozed={setSnoozed}
+                setArchived={setArchived}
+                setReadNotification={setReadNotification}
+                setSelectedTab={setSelectedTab}
+                markAllNotificationsAsRead={markAllNotificationsAsRead}
+              />
 
-          return (
-            <>
-              <Tooltip tooltipContent="Notifications" position="right" className="ml-2" disabled={!isSidebarCollapsed}>
-                <Popover.Button
-                  className={`group relative flex w-full items-center gap-2.5 rounded-md px-3 py-2 text-sm font-medium outline-none ${
-                    isActive
-                      ? "bg-custom-primary-100/10 text-custom-primary-100"
-                      : "text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80"
-                  } ${isSidebarCollapsed ? "justify-center" : ""}`}
-                >
-                  <Bell className="h-4 w-4" />
-                  {isSidebarCollapsed ? null : <span>Notifications</span>}
-                  {totalNotificationCount && totalNotificationCount > 0 ? (
-                    isSidebarCollapsed ? (
-                      <span className="absolute right-3.5 top-2 h-2 w-2 rounded-full bg-custom-primary-300" />
-                    ) : (
-                      <span className="ml-auto rounded-full bg-custom-primary-300 px-1.5 text-xs text-white">
-                        {getNumberCount(totalNotificationCount)}
-                      </span>
-                    )
-                  ) : null}
-                </Popover.Button>
-              </Tooltip>
-              <Transition
-                as={Fragment}
-                enter="transition ease-out duration-200"
-                enterFrom="opacity-0 translate-y-1"
-                enterTo="opacity-100 translate-y-0"
-                leave="transition ease-in duration-150"
-                leaveFrom="opacity-100 translate-y-0"
-                leaveTo="opacity-0 translate-y-1"
-              >
-                <Popover.Panel className="absolute -top-36 left-0 z-10 ml-8 flex h-[50vh] w-[20rem] flex-col rounded-xl border border-custom-border-300 bg-custom-background-100 shadow-lg md:left-full md:w-[36rem]">
-                  <NotificationHeader
-                    notificationCount={notificationCount}
-                    notificationMutate={notificationMutate}
-                    closePopover={closePopover}
-                    isRefreshing={isRefreshing}
-                    snoozed={snoozed}
-                    archived={archived}
-                    readNotification={readNotification}
-                    selectedTab={selectedTab}
-                    setSnoozed={setSnoozed}
-                    setArchived={setArchived}
-                    setReadNotification={setReadNotification}
-                    setSelectedTab={setSelectedTab}
-                    markAllNotificationsAsRead={markAllNotificationsAsRead}
-                  />
-
-                  {notifications ? (
-                    notifications.length > 0 ? (
-                      <div className="h-full overflow-y-auto">
-                        <div className="divide-y divide-custom-border-100">
-                          {notifications.map((notification) => (
-                            <NotificationCard
-                              key={notification.id}
-                              isSnoozedTabOpen={snoozed}
-                              closePopover={closePopover}
-                              notification={notification}
-                              markNotificationArchivedStatus={markNotificationArchivedStatus}
-                              markNotificationReadStatus={markNotificationAsRead}
-                              markNotificationReadStatusToggle={markNotificationReadStatus}
-                              setSelectedNotificationForSnooze={setSelectedNotificationForSnooze}
-                              markSnoozeNotification={markSnoozeNotification}
-                            />
-                          ))}
-                        </div>
-                        {isLoadingMore && (
-                          <div className="my-6 flex items-center justify-center text-sm">
-                            <div role="status">
-                              <svg
-                                aria-hidden="true"
-                                className="mr-2 h-6 w-6 animate-spin fill-blue-600 text-custom-text-200"
-                                viewBox="0 0 100 101"
-                                fill="none"
-                                xmlns="http://www.w3.org/2000/svg"
-                              >
-                                <path
-                                  d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
-                                  fill="currentColor"
-                                />
-                                <path
-                                  d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
-                                  fill="currentFill"
-                                />
-                              </svg>
-                              <span className="sr-only">Loading...</span>
-                            </div>
-                            <p>Loading notifications</p>
-                          </div>
-                        )}
-                        {hasMore && !isLoadingMore && (
-                          <button
-                            type="button"
-                            className="my-6 flex w-full items-center justify-center text-sm font-medium text-custom-primary-100"
-                            disabled={isLoadingMore}
-                            onClick={() => {
-                              setSize((prev) => prev + 1);
-                            }}
-                          >
-                            Load More
-                          </button>
-                        )}
-                      </div>
-                    ) : (
-                      <div className="grid h-full w-full scale-75 place-items-center overflow-hidden">
-                        <EmptyState
-                          title="You're updated with all the notifications"
-                          description="You have read all the notifications."
-                          image={emptyNotification}
+              {notifications ? (
+                notifications.length > 0 ? (
+                  <div className="h-full overflow-y-auto">
+                    <div className="divide-y divide-custom-border-100">
+                      {notifications.map((notification) => (
+                        <NotificationCard
+                          key={notification.id}
+                          isSnoozedTabOpen={snoozed}
+                          closePopover={() => setIsActive(false)}
+                          notification={notification}
+                          markNotificationArchivedStatus={markNotificationArchivedStatus}
+                          markNotificationReadStatus={markNotificationAsRead}
+                          markNotificationReadStatusToggle={markNotificationReadStatus}
+                          setSelectedNotificationForSnooze={setSelectedNotificationForSnooze}
+                          markSnoozeNotification={markSnoozeNotification}
                         />
+                      ))}
+                    </div>
+                    {isLoadingMore && (
+                      <div className="my-6 flex items-center justify-center text-sm">
+                        <div role="status">
+                          <svg
+                            aria-hidden="true"
+                            className="mr-2 h-6 w-6 animate-spin fill-blue-600 text-custom-text-200"
+                            viewBox="0 0 100 101"
+                            fill="none"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
+                              fill="currentColor"
+                            />
+                            <path
+                              d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
+                              fill="currentFill"
+                            />
+                          </svg>
+                          <span className="sr-only">Loading...</span>
+                        </div>
+                        <p>Loading notifications</p>
                       </div>
-                    )
-                  ) : (
-                    <Loader className="space-y-4 overflow-y-auto p-5">
-                      <Loader.Item height="50px" />
-                      <Loader.Item height="50px" />
-                      <Loader.Item height="50px" />
-                      <Loader.Item height="50px" />
-                      <Loader.Item height="50px" />
-                    </Loader>
-                  )}
-                </Popover.Panel>
-              </Transition>
-            </>
-          );
-        }}
+                    )}
+                    {hasMore && !isLoadingMore && (
+                      <button
+                        type="button"
+                        className="my-6 flex w-full items-center justify-center text-sm font-medium text-custom-primary-100"
+                        disabled={isLoadingMore}
+                        onClick={() => {
+                          setSize((prev) => prev + 1);
+                        }}
+                      >
+                        Load More
+                      </button>
+                    )}
+                  </div>
+                ) : (
+                  <div className="grid h-full w-full scale-75 place-items-center overflow-hidden">
+                    <EmptyState
+                      title="You're updated with all the notifications"
+                      description="You have read all the notifications."
+                      image={emptyNotification}
+                    />
+                  </div>
+                )
+              ) : (
+                <Loader className="space-y-4 overflow-y-auto p-5">
+                  <Loader.Item height="50px" />
+                  <Loader.Item height="50px" />
+                  <Loader.Item height="50px" />
+                  <Loader.Item height="50px" />
+                  <Loader.Item height="50px" />
+                </Loader>
+              )}
+            </Popover.Panel>
+          </Transition>
+        </>
       </Popover>
     </>
   );
diff --git a/web/components/notifications/select-snooze-till-modal.tsx b/web/components/notifications/select-snooze-till-modal.tsx
index ab3497bb8..2ad4b0ef2 100644
--- a/web/components/notifications/select-snooze-till-modal.tsx
+++ b/web/components/notifications/select-snooze-till-modal.tsx
@@ -109,7 +109,12 @@ export const SnoozeNotificationModal: FC<SnoozeModalProps> = (props) => {
   };
 
   const handleClose = () => {
-    onClose();
+    // This is a workaround to fix the issue of the Notification popover modal close on closing this modal
+    const closeTimeout = setTimeout(() => {
+      onClose();
+      clearTimeout(closeTimeout);
+    }, 50);
+
     const timeout = setTimeout(() => {
       reset({ ...defaultValues });
       clearTimeout(timeout);
@@ -142,7 +147,7 @@ export const SnoozeNotificationModal: FC<SnoozeModalProps> = (props) => {
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative transform rounded-lg bg-custom-background-100 p-5 text-left shadow-custom-shadow-md transition-all sm:w-full sm:max-w-2xl">
+              <Dialog.Panel className="relative transform rounded-lg bg-custom-background-100 p-5 text-left shadow-custom-shadow-md transition-all w-full sm:w-full sm:!max-w-2xl">
                 <form onSubmit={handleSubmit(onSubmit)}>
                   <div className="flex items-center justify-between">
                     <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-custom-text-100">
@@ -156,8 +161,8 @@ export const SnoozeNotificationModal: FC<SnoozeModalProps> = (props) => {
                     </div>
                   </div>
 
-                  <div className="mt-5 flex items-center gap-3">
-                    <div className="flex-1">
+                  <div className="mt-5 flex flex-col md:!flex-row md:items-center gap-3">
+                    <div className="flex-1 pb-3 md:pb-0">
                       <h6 className="mb-2 block text-sm font-medium text-custom-text-400">Pick a date</h6>
                       <Controller
                         name="date"

From 4f72ebded9b99f26d4e71ae4de37b5642d45168d Mon Sep 17 00:00:00 2001
From: Lakhan Baheti <94619783+1akhanBaheti@users.noreply.github.com>
Date: Fri, 9 Feb 2024 16:22:08 +0530
Subject: [PATCH 42/58] chore: added sign-up/in, onboarding, dashboard,
 all-issues related events (#3595)

* chore: added event constants

* chore: added workspace events

* chore: added workspace group for events

* chore: member invitation event added

* chore: added project pages related events.

* fix: member integer role to string

* chore: added sign-up & sign-in events

* chore: added global-view related events

* chore: added notification related events

* chore: project, cycle property change added

* chore: cycle favourite, and change-properties added

* chore: module davorite, and sidebar property changes added

* fix: build errors

* chore: all events defined in constants
---
 apiserver/plane/app/views/auth_extended.py    |  12 +-
 apiserver/plane/app/views/authentication.py   |   8 +-
 apiserver/plane/app/views/oauth.py            |   4 +-
 .../sign-in-forms/optional-set-password.tsx   |  27 +++-
 .../account/sign-in-forms/password.tsx        |  16 +-
 web/components/account/sign-in-forms/root.tsx |  11 +-
 .../account/sign-in-forms/unique-code.tsx     |  18 ++-
 .../sign-up-forms/optional-set-password.tsx   |  27 +++-
 web/components/account/sign-up-forms/root.tsx |  11 +-
 .../account/sign-up-forms/unique-code.tsx     |  19 ++-
 web/components/cycles/cycles-board-card.tsx   |  47 ++++--
 web/components/cycles/cycles-list-item.tsx    |  59 ++++---
 web/components/cycles/delete-modal.tsx        |   6 +-
 web/components/cycles/form.tsx                |   6 +-
 web/components/cycles/modal.tsx               |  23 ++-
 web/components/cycles/sidebar.tsx             |  73 ++++++---
 web/components/headers/pages.tsx              |  13 +-
 .../headers/workspace-dashboard.tsx           |  21 ++-
 web/components/inbox/inbox-issue-actions.tsx  |  17 +-
 .../inbox/modals/create-issue-modal.tsx       |  17 +-
 web/components/issues/attachment/root.tsx     |   8 +-
 web/components/issues/issue-detail/root.tsx   |  25 +--
 .../calendar/quick-add-issue-form.tsx         |   6 +-
 .../roots/global-view-root.tsx                |  12 +-
 .../gantt/quick-add-issue-form.tsx            |   6 +-
 .../issue-layouts/kanban/base-kanban-root.tsx |   3 +-
 .../kanban/quick-add-issue-form.tsx           |   6 +-
 .../list/quick-add-issue-form.tsx             |   6 +-
 .../properties/all-properties.tsx             |  16 +-
 .../spreadsheet/quick-add-issue-form.tsx      |   6 +-
 web/components/issues/issue-modal/modal.tsx   |  30 +---
 web/components/issues/peek-overview/root.tsx  |  25 +--
 .../modules/delete-module-modal.tsx           |   6 +-
 web/components/modules/form.tsx               |   6 +-
 web/components/modules/modal.tsx              |  18 ++-
 web/components/modules/module-card-item.tsx   |  47 ++++--
 web/components/modules/module-list-item.tsx   |  43 +++--
 web/components/modules/sidebar.tsx            |  33 +++-
 .../notifications/notification-card.tsx       |  29 +++-
 .../notifications/notification-header.tsx     |  21 ++-
 .../notifications/notification-popover.tsx    |  11 +-
 web/components/onboarding/invitations.tsx     |  23 ++-
 web/components/onboarding/invite-members.tsx  |  28 +++-
 web/components/onboarding/tour/root.tsx       |  19 ++-
 web/components/onboarding/user-details.tsx    |  20 ++-
 web/components/onboarding/workspace.tsx       |  35 +++-
 .../page-views/workspace-dashboard.tsx        |   6 +-
 .../pages/create-update-page-modal.tsx        |  34 +++-
 web/components/pages/delete-page-modal.tsx    |  19 ++-
 .../project/create-project-modal.tsx          |  17 +-
 .../project/delete-project-modal.tsx          |  16 +-
 web/components/project/form.tsx               |  26 ++-
 .../project/leave-project-modal.tsx           |   8 +-
 web/components/project/member-list-item.tsx   |   9 +-
 .../project/send-project-invitation-modal.tsx |  43 +++--
 .../project/settings/features-list.tsx        |  10 +-
 .../states/create-update-state-inline.tsx     |  42 +++--
 web/components/states/delete-state-modal.tsx  |  20 ++-
 .../workspace/create-workspace-form.tsx       |  26 +--
 .../workspace/delete-workspace-modal.tsx      |  23 ++-
 .../workspace/settings/members-list-item.tsx  |  12 +-
 .../workspace/settings/workspace-details.tsx  |  21 ++-
 web/components/workspace/sidebar-dropdown.tsx |   1 -
 web/components/workspace/sidebar-menu.tsx     |  25 +--
 .../workspace/views/delete-view-modal.tsx     |  21 ++-
 web/components/workspace/views/header.tsx     |  11 +-
 web/components/workspace/views/modal.tsx      |  38 ++++-
 .../workspace/views/view-list-item.tsx        |   4 +-
 web/constants/event-tracker.ts                | 139 ++++++++++++++--
 web/lib/app-provider.tsx                      |   4 +-
 web/lib/posthog-provider.tsx                  |  23 ++-
 web/package.json                              |   2 +-
 .../projects/[projectId]/pages/index.tsx      |   8 +-
 .../[workspaceSlug]/settings/members.tsx      |  36 +++--
 web/pages/accounts/forgot-password.tsx        |  16 +-
 web/pages/accounts/reset-password.tsx         |  21 ++-
 web/pages/invitations/index.tsx               |  21 ++-
 web/pages/onboarding/index.tsx                |   4 +-
 web/store/event-tracker.store.ts              | 152 +++++++++++++-----
 web/store/user/index.ts                       |   2 +
 80 files changed, 1276 insertions(+), 507 deletions(-)

diff --git a/apiserver/plane/app/views/auth_extended.py b/apiserver/plane/app/views/auth_extended.py
index 501f47657..29cb43e38 100644
--- a/apiserver/plane/app/views/auth_extended.py
+++ b/apiserver/plane/app/views/auth_extended.py
@@ -401,8 +401,8 @@ class EmailCheckEndpoint(BaseAPIView):
                 email=email,
                 user_agent=request.META.get("HTTP_USER_AGENT"),
                 ip=request.META.get("REMOTE_ADDR"),
-                event_name="SIGN_IN",
-                medium="MAGIC_LINK",
+                event_name="Sign up",
+                medium="Magic link",
                 first_time=True,
             )
             key, token, current_attempt = generate_magic_token(email=email)
@@ -438,8 +438,8 @@ class EmailCheckEndpoint(BaseAPIView):
                     email=email,
                     user_agent=request.META.get("HTTP_USER_AGENT"),
                     ip=request.META.get("REMOTE_ADDR"),
-                    event_name="SIGN_IN",
-                    medium="MAGIC_LINK",
+                    event_name="Sign in",
+                    medium="Magic link",
                     first_time=False,
                 )
 
@@ -468,8 +468,8 @@ class EmailCheckEndpoint(BaseAPIView):
                     email=email,
                     user_agent=request.META.get("HTTP_USER_AGENT"),
                     ip=request.META.get("REMOTE_ADDR"),
-                    event_name="SIGN_IN",
-                    medium="EMAIL",
+                    event_name="Sign in",
+                    medium="Email",
                     first_time=False,
                 )
 
diff --git a/apiserver/plane/app/views/authentication.py b/apiserver/plane/app/views/authentication.py
index a41200d61..c2b3e0b7e 100644
--- a/apiserver/plane/app/views/authentication.py
+++ b/apiserver/plane/app/views/authentication.py
@@ -274,8 +274,8 @@ class SignInEndpoint(BaseAPIView):
             email=email,
             user_agent=request.META.get("HTTP_USER_AGENT"),
             ip=request.META.get("REMOTE_ADDR"),
-            event_name="SIGN_IN",
-            medium="EMAIL",
+            event_name="Sign in",
+            medium="Email",
             first_time=False,
         )
 
@@ -349,8 +349,8 @@ class MagicSignInEndpoint(BaseAPIView):
                     email=email,
                     user_agent=request.META.get("HTTP_USER_AGENT"),
                     ip=request.META.get("REMOTE_ADDR"),
-                    event_name="SIGN_IN",
-                    medium="MAGIC_LINK",
+                    event_name="Sign in",
+                    medium="Magic link",
                     first_time=False,
                 )
 
diff --git a/apiserver/plane/app/views/oauth.py b/apiserver/plane/app/views/oauth.py
index de90e4337..8152fb0ee 100644
--- a/apiserver/plane/app/views/oauth.py
+++ b/apiserver/plane/app/views/oauth.py
@@ -296,7 +296,7 @@ class OauthEndpoint(BaseAPIView):
                 email=email,
                 user_agent=request.META.get("HTTP_USER_AGENT"),
                 ip=request.META.get("REMOTE_ADDR"),
-                event_name="SIGN_IN",
+                event_name="Sign in",
                 medium=medium.upper(),
                 first_time=False,
             )
@@ -427,7 +427,7 @@ class OauthEndpoint(BaseAPIView):
                 email=email,
                 user_agent=request.META.get("HTTP_USER_AGENT"),
                 ip=request.META.get("REMOTE_ADDR"),
-                event_name="SIGN_IN",
+                event_name="Sign up",
                 medium=medium.upper(),
                 first_time=True,
             )
diff --git a/web/components/account/sign-in-forms/optional-set-password.tsx b/web/components/account/sign-in-forms/optional-set-password.tsx
index d7a595298..1ea5ca792 100644
--- a/web/components/account/sign-in-forms/optional-set-password.tsx
+++ b/web/components/account/sign-in-forms/optional-set-password.tsx
@@ -4,12 +4,14 @@ import { Controller, useForm } from "react-hook-form";
 import { AuthService } from "services/auth.service";
 // hooks
 import useToast from "hooks/use-toast";
+import { useEventTracker } from "hooks/store";
 // ui
 import { Button, Input } from "@plane/ui";
 // helpers
 import { checkEmailValidity } from "helpers/string.helper";
 // icons
 import { Eye, EyeOff } from "lucide-react";
+import { PASSWORD_CREATE_SELECTED, PASSWORD_CREATE_SKIPPED } from "constants/event-tracker";
 
 type Props = {
   email: string;
@@ -34,6 +36,8 @@ export const SignInOptionalSetPasswordForm: React.FC<Props> = (props) => {
   // states
   const [isGoingToWorkspace, setIsGoingToWorkspace] = useState(false);
   const [showPassword, setShowPassword] = useState(false);
+  // store hooks
+  const { captureEvent } = useEventTracker();
   // toast alert
   const { setToastAlert } = useToast();
   // form info
@@ -63,21 +67,34 @@ export const SignInOptionalSetPasswordForm: React.FC<Props> = (props) => {
           title: "Success!",
           message: "Password created successfully.",
         });
+        captureEvent(PASSWORD_CREATE_SELECTED, {
+          state: "SUCCESS",
+          first_time: false,
+        });
         await handleSignInRedirection();
       })
-      .catch((err) =>
+      .catch((err) => {
+        captureEvent(PASSWORD_CREATE_SELECTED, {
+          state: "FAILED",
+          first_time: false,
+        });
         setToastAlert({
           type: "error",
           title: "Error!",
           message: err?.error ?? "Something went wrong. Please try again.",
-        })
-      );
+        });
+      });
   };
 
   const handleGoToWorkspace = async () => {
     setIsGoingToWorkspace(true);
-
-    await handleSignInRedirection().finally(() => setIsGoingToWorkspace(false));
+    await handleSignInRedirection().finally(() => {
+      captureEvent(PASSWORD_CREATE_SKIPPED, {
+        state: "SUCCESS",
+        first_time: false,
+      });
+      setIsGoingToWorkspace(false);
+    });
   };
 
   return (
diff --git a/web/components/account/sign-in-forms/password.tsx b/web/components/account/sign-in-forms/password.tsx
index fe20d5b10..98719df63 100644
--- a/web/components/account/sign-in-forms/password.tsx
+++ b/web/components/account/sign-in-forms/password.tsx
@@ -7,7 +7,7 @@ import { Eye, EyeOff, XCircle } from "lucide-react";
 import { AuthService } from "services/auth.service";
 // hooks
 import useToast from "hooks/use-toast";
-import { useApplication } from "hooks/store";
+import { useApplication, useEventTracker } from "hooks/store";
 // components
 import { ESignInSteps, ForgotPasswordPopover } from "components/account";
 // ui
@@ -16,6 +16,8 @@ import { Button, Input } from "@plane/ui";
 import { checkEmailValidity } from "helpers/string.helper";
 // types
 import { IPasswordSignInData } from "@plane/types";
+// constants
+import { FORGOT_PASSWORD, SIGN_IN_WITH_PASSWORD } from "constants/event-tracker";
 
 type Props = {
   email: string;
@@ -46,6 +48,7 @@ export const SignInPasswordForm: React.FC<Props> = observer((props) => {
   const {
     config: { envConfig },
   } = useApplication();
+  const { captureEvent } = useEventTracker();
   // derived values
   const isSmtpConfigured = envConfig?.is_smtp_configured;
   // form info
@@ -72,7 +75,13 @@ export const SignInPasswordForm: React.FC<Props> = observer((props) => {
 
     await authService
       .passwordSignIn(payload)
-      .then(async () => await onSubmit())
+      .then(async () => {
+        captureEvent(SIGN_IN_WITH_PASSWORD, {
+          state: "SUCCESS",
+          first_time: false,
+        });
+        await onSubmit();
+      })
       .catch((err) =>
         setToastAlert({
           type: "error",
@@ -182,9 +191,10 @@ export const SignInPasswordForm: React.FC<Props> = observer((props) => {
               </div>
             )}
           />
-          <div className="w-full text-right mt-2 pb-3">
+          <div className="mt-2 w-full pb-3 text-right">
             {isSmtpConfigured ? (
               <Link
+                onClick={() => captureEvent(FORGOT_PASSWORD)}
                 href={`/accounts/forgot-password?email=${email}`}
                 className="text-xs font-medium text-custom-primary-100"
               >
diff --git a/web/components/account/sign-in-forms/root.tsx b/web/components/account/sign-in-forms/root.tsx
index c92cd4bd4..62f63caea 100644
--- a/web/components/account/sign-in-forms/root.tsx
+++ b/web/components/account/sign-in-forms/root.tsx
@@ -2,7 +2,7 @@ import React, { useEffect, useState } from "react";
 import Link from "next/link";
 import { observer } from "mobx-react-lite";
 // hooks
-import { useApplication } from "hooks/store";
+import { useApplication, useEventTracker } from "hooks/store";
 import useSignInRedirection from "hooks/use-sign-in-redirection";
 // components
 import { LatestFeatureBlock } from "components/common";
@@ -13,6 +13,8 @@ import {
   OAuthOptions,
   SignInOptionalSetPasswordForm,
 } from "components/account";
+// constants
+import { NAVIGATE_TO_SIGNUP } from "constants/event-tracker";
 
 export enum ESignInSteps {
   EMAIL = "EMAIL",
@@ -32,6 +34,7 @@ export const SignInRoot = observer(() => {
   const {
     config: { envConfig },
   } = useApplication();
+  const { captureEvent } = useEventTracker();
   // derived values
   const isSmtpConfigured = envConfig?.is_smtp_configured;
 
@@ -110,7 +113,11 @@ export const SignInRoot = observer(() => {
             <OAuthOptions handleSignInRedirection={handleRedirection} type="sign_in" />
             <p className="text-xs text-onboarding-text-300 text-center mt-6">
               Don{"'"}t have an account?{" "}
-              <Link href="/accounts/sign-up" className="text-custom-primary-100 font-medium underline">
+              <Link
+                href="/accounts/sign-up"
+                onClick={() => captureEvent(NAVIGATE_TO_SIGNUP, {})}
+                className="text-custom-primary-100 font-medium underline"
+              >
                 Sign up
               </Link>
             </p>
diff --git a/web/components/account/sign-in-forms/unique-code.tsx b/web/components/account/sign-in-forms/unique-code.tsx
index 6e0ae3745..55dbe86e2 100644
--- a/web/components/account/sign-in-forms/unique-code.tsx
+++ b/web/components/account/sign-in-forms/unique-code.tsx
@@ -7,12 +7,15 @@ import { UserService } from "services/user.service";
 // hooks
 import useToast from "hooks/use-toast";
 import useTimer from "hooks/use-timer";
+import { useEventTracker } from "hooks/store";
 // ui
 import { Button, Input } from "@plane/ui";
 // helpers
 import { checkEmailValidity } from "helpers/string.helper";
 // types
 import { IEmailCheckData, IMagicSignInData } from "@plane/types";
+// constants
+import { CODE_VERIFIED } from "constants/event-tracker";
 
 type Props = {
   email: string;
@@ -41,6 +44,8 @@ export const SignInUniqueCodeForm: React.FC<Props> = (props) => {
   const [isRequestingNewCode, setIsRequestingNewCode] = useState(false);
   // toast alert
   const { setToastAlert } = useToast();
+  // store hooks
+  const { captureEvent } = useEventTracker();
   // timer
   const { timer: resendTimerCode, setTimer: setResendCodeTimer } = useTimer(30);
   // form info
@@ -69,17 +74,22 @@ export const SignInUniqueCodeForm: React.FC<Props> = (props) => {
     await authService
       .magicSignIn(payload)
       .then(async () => {
+        captureEvent(CODE_VERIFIED, {
+          state: "SUCCESS",
+        });
         const currentUser = await userService.currentUser();
-
         await onSubmit(currentUser.is_password_autoset);
       })
-      .catch((err) =>
+      .catch((err) => {
+        captureEvent(CODE_VERIFIED, {
+          state: "FAILED",
+        });
         setToastAlert({
           type: "error",
           title: "Error!",
           message: err?.error ?? "Something went wrong. Please try again.",
-        })
-      );
+        });
+      });
   };
 
   const handleSendNewCode = async (formData: TUniqueCodeFormValues) => {
diff --git a/web/components/account/sign-up-forms/optional-set-password.tsx b/web/components/account/sign-up-forms/optional-set-password.tsx
index db14f0ccb..b49adabbb 100644
--- a/web/components/account/sign-up-forms/optional-set-password.tsx
+++ b/web/components/account/sign-up-forms/optional-set-password.tsx
@@ -4,12 +4,14 @@ import { Controller, useForm } from "react-hook-form";
 import { AuthService } from "services/auth.service";
 // hooks
 import useToast from "hooks/use-toast";
+import { useEventTracker } from "hooks/store";
 // ui
 import { Button, Input } from "@plane/ui";
 // helpers
 import { checkEmailValidity } from "helpers/string.helper";
 // constants
 import { ESignUpSteps } from "components/account";
+import { PASSWORD_CREATE_SELECTED, PASSWORD_CREATE_SKIPPED, SETUP_PASSWORD } from "constants/event-tracker";
 // icons
 import { Eye, EyeOff } from "lucide-react";
 
@@ -37,6 +39,8 @@ export const SignUpOptionalSetPasswordForm: React.FC<Props> = (props) => {
   // states
   const [isGoingToWorkspace, setIsGoingToWorkspace] = useState(false);
   const [showPassword, setShowPassword] = useState(false);
+  // store hooks
+  const { captureEvent } = useEventTracker();
   // toast alert
   const { setToastAlert } = useToast();
   // form info
@@ -66,21 +70,34 @@ export const SignUpOptionalSetPasswordForm: React.FC<Props> = (props) => {
           title: "Success!",
           message: "Password created successfully.",
         });
+        captureEvent(SETUP_PASSWORD, {
+          state: "SUCCESS",
+          first_time: true,
+        });
         await handleSignInRedirection();
       })
-      .catch((err) =>
+      .catch((err) => {
+        captureEvent(SETUP_PASSWORD, {
+          state: "FAILED",
+          first_time: true,
+        });
         setToastAlert({
           type: "error",
           title: "Error!",
           message: err?.error ?? "Something went wrong. Please try again.",
-        })
-      );
+        });
+      });
   };
 
   const handleGoToWorkspace = async () => {
     setIsGoingToWorkspace(true);
-
-    await handleSignInRedirection().finally(() => setIsGoingToWorkspace(false));
+    await handleSignInRedirection().finally(() => {
+      captureEvent(PASSWORD_CREATE_SKIPPED, {
+        state: "SUCCESS",
+        first_time: true,
+      });
+      setIsGoingToWorkspace(false);
+    });
   };
 
   return (
diff --git a/web/components/account/sign-up-forms/root.tsx b/web/components/account/sign-up-forms/root.tsx
index da9d7d79a..8eeb5e99f 100644
--- a/web/components/account/sign-up-forms/root.tsx
+++ b/web/components/account/sign-up-forms/root.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from "react";
 import { observer } from "mobx-react-lite";
 // hooks
-import { useApplication } from "hooks/store";
+import { useApplication, useEventTracker } from "hooks/store";
 import useSignInRedirection from "hooks/use-sign-in-redirection";
 // components
 import {
@@ -12,6 +12,8 @@ import {
   SignUpUniqueCodeForm,
 } from "components/account";
 import Link from "next/link";
+// constants
+import { NAVIGATE_TO_SIGNIN } from "constants/event-tracker";
 
 export enum ESignUpSteps {
   EMAIL = "EMAIL",
@@ -32,6 +34,7 @@ export const SignUpRoot = observer(() => {
   const {
     config: { envConfig },
   } = useApplication();
+  const { captureEvent } = useEventTracker();
 
   // step 1 submit handler- email verification
   const handleEmailVerification = () => setSignInStep(ESignUpSteps.UNIQUE_CODE);
@@ -86,7 +89,11 @@ export const SignUpRoot = observer(() => {
           <OAuthOptions handleSignInRedirection={handleRedirection} type="sign_up" />
           <p className="text-xs text-onboarding-text-300 text-center mt-6">
             Already using Plane?{" "}
-            <Link href="/" className="text-custom-primary-100 font-medium underline">
+            <Link
+              href="/"
+              onClick={() => captureEvent(NAVIGATE_TO_SIGNIN, {})}
+              className="text-custom-primary-100 font-medium underline"
+            >
               Sign in
             </Link>
           </p>
diff --git a/web/components/account/sign-up-forms/unique-code.tsx b/web/components/account/sign-up-forms/unique-code.tsx
index 7764b627e..1b54ef9eb 100644
--- a/web/components/account/sign-up-forms/unique-code.tsx
+++ b/web/components/account/sign-up-forms/unique-code.tsx
@@ -8,12 +8,15 @@ import { UserService } from "services/user.service";
 // hooks
 import useToast from "hooks/use-toast";
 import useTimer from "hooks/use-timer";
+import { useEventTracker } from "hooks/store";
 // ui
 import { Button, Input } from "@plane/ui";
 // helpers
 import { checkEmailValidity } from "helpers/string.helper";
 // types
 import { IEmailCheckData, IMagicSignInData } from "@plane/types";
+// constants
+import { CODE_VERIFIED } from "constants/event-tracker";
 
 type Props = {
   email: string;
@@ -39,6 +42,8 @@ export const SignUpUniqueCodeForm: React.FC<Props> = (props) => {
   const { email, handleEmailClear, onSubmit } = props;
   // states
   const [isRequestingNewCode, setIsRequestingNewCode] = useState(false);
+  // store hooks
+  const { captureEvent } = useEventTracker();
   // toast alert
   const { setToastAlert } = useToast();
   // timer
@@ -69,17 +74,22 @@ export const SignUpUniqueCodeForm: React.FC<Props> = (props) => {
     await authService
       .magicSignIn(payload)
       .then(async () => {
+        captureEvent(CODE_VERIFIED, {
+          state: "SUCCESS",
+        });
         const currentUser = await userService.currentUser();
-
         await onSubmit(currentUser.is_password_autoset);
       })
-      .catch((err) =>
+      .catch((err) => {
+        captureEvent(CODE_VERIFIED, {
+          state: "FAILED",
+        });
         setToastAlert({
           type: "error",
           title: "Error!",
           message: err?.error ?? "Something went wrong. Please try again.",
-        })
-      );
+        });
+      });
   };
 
   const handleSendNewCode = async (formData: TUniqueCodeFormValues) => {
@@ -96,7 +106,6 @@ export const SignUpUniqueCodeForm: React.FC<Props> = (props) => {
           title: "Success!",
           message: "A new unique code has been sent to your email.",
         });
-
         reset({
           email: formData.email,
           token: "",
diff --git a/web/components/cycles/cycles-board-card.tsx b/web/components/cycles/cycles-board-card.tsx
index bad7df0e5..375c15301 100644
--- a/web/components/cycles/cycles-board-card.tsx
+++ b/web/components/cycles/cycles-board-card.tsx
@@ -16,6 +16,7 @@ import { copyTextToClipboard } from "helpers/string.helper";
 // constants
 import { CYCLE_STATUS } from "constants/cycle";
 import { EUserWorkspaceRoles } from "constants/workspace";
+import { CYCLE_FAVORITED, CYCLE_UNFAVORITED } from "constants/event-tracker";
 //.types
 import { TCycleGroups } from "@plane/types";
 
@@ -33,7 +34,7 @@ export const CyclesBoardCard: FC<ICyclesBoardCard> = (props) => {
   // router
   const router = useRouter();
   // store
-  const { setTrackElement } = useEventTracker();
+  const { setTrackElement, captureEvent } = useEventTracker();
   const {
     membership: { currentProjectRole },
   } = useUser();
@@ -90,39 +91,55 @@ export const CyclesBoardCard: FC<ICyclesBoardCard> = (props) => {
     e.preventDefault();
     if (!workspaceSlug || !projectId) return;
 
-    addCycleToFavorites(workspaceSlug?.toString(), projectId.toString(), cycleId).catch(() => {
-      setToastAlert({
-        type: "error",
-        title: "Error!",
-        message: "Couldn't add the cycle to favorites. Please try again.",
+    addCycleToFavorites(workspaceSlug?.toString(), projectId.toString(), cycleId)
+      .then(() => {
+        captureEvent(CYCLE_FAVORITED, {
+          cycle_id: cycleId,
+          element: "Grid layout",
+          state: "SUCCESS",
+        });
+      })
+      .catch(() => {
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Couldn't add the cycle to favorites. Please try again.",
+        });
       });
-    });
   };
 
   const handleRemoveFromFavorites = (e: MouseEvent<HTMLButtonElement>) => {
     e.preventDefault();
     if (!workspaceSlug || !projectId) return;
 
-    removeCycleFromFavorites(workspaceSlug?.toString(), projectId.toString(), cycleId).catch(() => {
-      setToastAlert({
-        type: "error",
-        title: "Error!",
-        message: "Couldn't add the cycle to favorites. Please try again.",
+    removeCycleFromFavorites(workspaceSlug?.toString(), projectId.toString(), cycleId)
+      .then(() => {
+        captureEvent(CYCLE_UNFAVORITED, {
+          cycle_id: cycleId,
+          element: "Grid layout",
+          state: "SUCCESS",
+        });
+      })
+      .catch(() => {
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Couldn't add the cycle to favorites. Please try again.",
+        });
       });
-    });
   };
 
   const handleEditCycle = (e: MouseEvent<HTMLButtonElement>) => {
     e.preventDefault();
     e.stopPropagation();
-    setTrackElement("Cycles page board layout");
+    setTrackElement("Cycles page grid layout");
     setUpdateModal(true);
   };
 
   const handleDeleteCycle = (e: MouseEvent<HTMLButtonElement>) => {
     e.preventDefault();
     e.stopPropagation();
-    setTrackElement("Cycles page board layout");
+    setTrackElement("Cycles page grid layout");
     setDeleteModal(true);
   };
 
diff --git a/web/components/cycles/cycles-list-item.tsx b/web/components/cycles/cycles-list-item.tsx
index 725480241..98392cd0e 100644
--- a/web/components/cycles/cycles-list-item.tsx
+++ b/web/components/cycles/cycles-list-item.tsx
@@ -18,6 +18,7 @@ import { CYCLE_STATUS } from "constants/cycle";
 import { EUserWorkspaceRoles } from "constants/workspace";
 // types
 import { TCycleGroups } from "@plane/types";
+import { CYCLE_FAVORITED, CYCLE_UNFAVORITED } from "constants/event-tracker";
 
 type TCyclesListItem = {
   cycleId: string;
@@ -37,7 +38,7 @@ export const CyclesListItem: FC<TCyclesListItem> = (props) => {
   // router
   const router = useRouter();
   // store hooks
-  const { setTrackElement } = useEventTracker();
+  const { setTrackElement, captureEvent } = useEventTracker();
   const {
     membership: { currentProjectRole },
   } = useUser();
@@ -63,26 +64,42 @@ export const CyclesListItem: FC<TCyclesListItem> = (props) => {
     e.preventDefault();
     if (!workspaceSlug || !projectId) return;
 
-    addCycleToFavorites(workspaceSlug?.toString(), projectId.toString(), cycleId).catch(() => {
-      setToastAlert({
-        type: "error",
-        title: "Error!",
-        message: "Couldn't add the cycle to favorites. Please try again.",
+    addCycleToFavorites(workspaceSlug?.toString(), projectId.toString(), cycleId)
+      .then(() => {
+        captureEvent(CYCLE_FAVORITED, {
+          cycle_id: cycleId,
+          element: "List layout",
+          state: "SUCCESS",
+        });
+      })
+      .catch(() => {
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Couldn't add the cycle to favorites. Please try again.",
+        });
       });
-    });
   };
 
   const handleRemoveFromFavorites = (e: MouseEvent<HTMLButtonElement>) => {
     e.preventDefault();
     if (!workspaceSlug || !projectId) return;
 
-    removeCycleFromFavorites(workspaceSlug?.toString(), projectId.toString(), cycleId).catch(() => {
-      setToastAlert({
-        type: "error",
-        title: "Error!",
-        message: "Couldn't add the cycle to favorites. Please try again.",
+    removeCycleFromFavorites(workspaceSlug?.toString(), projectId.toString(), cycleId)
+      .then(() => {
+        captureEvent(CYCLE_UNFAVORITED, {
+          cycle_id: cycleId,
+          element: "List layout",
+          state: "SUCCESS",
+        });
+      })
+      .catch(() => {
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Couldn't add the cycle to favorites. Please try again.",
+        });
       });
-    });
   };
 
   const handleEditCycle = (e: MouseEvent<HTMLButtonElement>) => {
@@ -159,9 +176,9 @@ export const CyclesListItem: FC<TCyclesListItem> = (props) => {
         projectId={projectId}
       />
       <Link href={`/${workspaceSlug}/projects/${projectId}/cycles/${cycleDetails.id}`}>
-        <div className="group flex flex-col md:flex-row w-full items-center justify-between gap-5 border-b border-custom-border-100 bg-custom-background-100 px-5 py-6 text-sm hover:bg-custom-background-90">
-          <div className="relative w-full flex items-center justify-between gap-3 overflow-hidden">
-            <div className="relative w-full flex items-center gap-3 overflow-hidden">
+        <div className="group flex w-full flex-col items-center justify-between gap-5 border-b border-custom-border-100 bg-custom-background-100 px-5 py-6 text-sm hover:bg-custom-background-90 md:flex-row">
+          <div className="relative flex w-full items-center justify-between gap-3 overflow-hidden">
+            <div className="relative flex w-full items-center gap-3 overflow-hidden">
               <div className="flex-shrink-0">
                 <CircularProgressIndicator size={38} percentage={progress}>
                   {isCompleted ? (
@@ -181,20 +198,20 @@ export const CyclesListItem: FC<TCyclesListItem> = (props) => {
               <div className="relative flex items-center gap-2.5 overflow-hidden">
                 <CycleGroupIcon cycleGroup={cycleStatus} className="h-3.5 w-3.5 flex-shrink-0" />
                 <Tooltip tooltipContent={cycleDetails.name} position="top">
-                  <span className="truncate line-clamp-1 inline-block overflow-hidden text-base font-medium">
+                  <span className="line-clamp-1 inline-block overflow-hidden truncate text-base font-medium">
                     {cycleDetails.name}
                   </span>
                 </Tooltip>
               </div>
 
-              <button onClick={openCycleOverview} className="flex-shrink-0 z-10 invisible group-hover:visible">
+              <button onClick={openCycleOverview} className="invisible z-10 flex-shrink-0 group-hover:visible">
                 <Info className="h-4 w-4 text-custom-text-400" />
               </button>
             </div>
 
             {currentCycle && (
               <div
-                className="flex-shrink-0 relative flex h-6 w-20 items-center justify-center rounded-sm text-center text-xs"
+                className="relative flex h-6 w-20 flex-shrink-0 items-center justify-center rounded-sm text-center text-xs"
                 style={{
                   color: currentCycle.color,
                   backgroundColor: `${currentCycle.color}20`,
@@ -206,12 +223,12 @@ export const CyclesListItem: FC<TCyclesListItem> = (props) => {
               </div>
             )}
           </div>
-          <div className="flex-shrink-0 relative overflow-hidden flex w-full items-center justify-between md:justify-end gap-2.5 md:w-auto md:flex-shrink-0 ">
+          <div className="relative flex w-full flex-shrink-0 items-center justify-between gap-2.5 overflow-hidden md:w-auto md:flex-shrink-0 md:justify-end ">
             <div className="text-xs text-custom-text-300">
               {renderDate && `${renderFormattedDate(startDate) ?? `_ _`} - ${renderFormattedDate(endDate) ?? `_ _`}`}
             </div>
 
-            <div className="flex-shrink-0 relative flex items-center gap-3">
+            <div className="relative flex flex-shrink-0 items-center gap-3">
               <Tooltip tooltipContent={`${cycleDetails.assignees.length} Members`}>
                 <div className="flex w-10 cursor-default items-center justify-center">
                   {cycleDetails.assignees.length > 0 ? (
diff --git a/web/components/cycles/delete-modal.tsx b/web/components/cycles/delete-modal.tsx
index 32e067833..5dc0306ab 100644
--- a/web/components/cycles/delete-modal.tsx
+++ b/web/components/cycles/delete-modal.tsx
@@ -10,6 +10,8 @@ import useToast from "hooks/use-toast";
 import { Button } from "@plane/ui";
 // types
 import { ICycle } from "@plane/types";
+// constants
+import { CYCLE_DELETED } from "constants/event-tracker";
 
 interface ICycleDelete {
   cycle: ICycle;
@@ -45,13 +47,13 @@ export const CycleDeleteModal: React.FC<ICycleDelete> = observer((props) => {
             message: "Cycle deleted successfully.",
           });
           captureCycleEvent({
-            eventName: "Cycle deleted",
+            eventName: CYCLE_DELETED,
             payload: { ...cycle, state: "SUCCESS" },
           });
         })
         .catch(() => {
           captureCycleEvent({
-            eventName: "Cycle deleted",
+            eventName: CYCLE_DELETED,
             payload: { ...cycle, state: "FAILED" },
           });
         });
diff --git a/web/components/cycles/form.tsx b/web/components/cycles/form.tsx
index 865cc68a1..dfe2a878e 100644
--- a/web/components/cycles/form.tsx
+++ b/web/components/cycles/form.tsx
@@ -10,7 +10,7 @@ import { renderFormattedPayloadDate } from "helpers/date-time.helper";
 import { ICycle } from "@plane/types";
 
 type Props = {
-  handleFormSubmit: (values: Partial<ICycle>) => Promise<void>;
+  handleFormSubmit: (values: Partial<ICycle>, dirtyFields: any) => Promise<void>;
   handleClose: () => void;
   status: boolean;
   projectId: string;
@@ -29,7 +29,7 @@ export const CycleForm: React.FC<Props> = (props) => {
   const { handleFormSubmit, handleClose, status, projectId, setActiveProject, data } = props;
   // form data
   const {
-    formState: { errors, isSubmitting },
+    formState: { errors, isSubmitting, dirtyFields },
     handleSubmit,
     control,
     watch,
@@ -61,7 +61,7 @@ export const CycleForm: React.FC<Props> = (props) => {
   maxDate?.setDate(maxDate.getDate() - 1);
 
   return (
-    <form onSubmit={handleSubmit(handleFormSubmit)}>
+    <form onSubmit={handleSubmit((formData)=>handleFormSubmit(formData,dirtyFields))}>
       <div className="space-y-5">
         <div className="flex items-center gap-x-3">
           {!status && (
diff --git a/web/components/cycles/modal.tsx b/web/components/cycles/modal.tsx
index 7e17e55f1..e8f19d6a1 100644
--- a/web/components/cycles/modal.tsx
+++ b/web/components/cycles/modal.tsx
@@ -10,6 +10,8 @@ import useLocalStorage from "hooks/use-local-storage";
 import { CycleForm } from "components/cycles";
 // types
 import type { CycleDateCheckData, ICycle, TCycleView } from "@plane/types";
+// constants
+import { CYCLE_CREATED, CYCLE_UPDATED } from "constants/event-tracker";
 
 type CycleModalProps = {
   isOpen: boolean;
@@ -47,7 +49,7 @@ export const CycleCreateUpdateModal: React.FC<CycleModalProps> = (props) => {
           message: "Cycle created successfully.",
         });
         captureCycleEvent({
-          eventName: "Cycle created",
+          eventName: CYCLE_CREATED,
           payload: { ...res, state: "SUCCESS" },
         });
       })
@@ -58,18 +60,23 @@ export const CycleCreateUpdateModal: React.FC<CycleModalProps> = (props) => {
           message: err.detail ?? "Error in creating cycle. Please try again.",
         });
         captureCycleEvent({
-          eventName: "Cycle created",
+          eventName: CYCLE_CREATED,
           payload: { ...payload, state: "FAILED" },
         });
       });
   };
 
-  const handleUpdateCycle = async (cycleId: string, payload: Partial<ICycle>) => {
+  const handleUpdateCycle = async (cycleId: string, payload: Partial<ICycle>, dirtyFields: any) => {
     if (!workspaceSlug || !projectId) return;
 
     const selectedProjectId = payload.project ?? projectId.toString();
     await updateCycleDetails(workspaceSlug, selectedProjectId, cycleId, payload)
-      .then(() => {
+      .then((res) => {
+        const changed_properties = Object.keys(dirtyFields);
+        captureCycleEvent({
+          eventName: CYCLE_UPDATED,
+          payload: { ...res, changed_properties: changed_properties, state: "SUCCESS" },
+        });
         setToastAlert({
           type: "success",
           title: "Success!",
@@ -77,6 +84,10 @@ export const CycleCreateUpdateModal: React.FC<CycleModalProps> = (props) => {
         });
       })
       .catch((err) => {
+        captureCycleEvent({
+          eventName: CYCLE_UPDATED,
+          payload: { ...payload, state: "FAILED" },
+        });
         setToastAlert({
           type: "error",
           title: "Error!",
@@ -95,7 +106,7 @@ export const CycleCreateUpdateModal: React.FC<CycleModalProps> = (props) => {
     return status;
   };
 
-  const handleFormSubmit = async (formData: Partial<ICycle>) => {
+  const handleFormSubmit = async (formData: Partial<ICycle>, dirtyFields: any) => {
     if (!workspaceSlug || !projectId) return;
 
     const payload: Partial<ICycle> = {
@@ -119,7 +130,7 @@ export const CycleCreateUpdateModal: React.FC<CycleModalProps> = (props) => {
     }
 
     if (isDateValid) {
-      if (data) await handleUpdateCycle(data.id, payload);
+      if (data) await handleUpdateCycle(data.id, payload, dirtyFields);
       else {
         await handleCreateCycle(payload).then(() => {
           setCycleTab("all");
diff --git a/web/components/cycles/sidebar.tsx b/web/components/cycles/sidebar.tsx
index 6966779b5..27182247b 100644
--- a/web/components/cycles/sidebar.tsx
+++ b/web/components/cycles/sidebar.tsx
@@ -39,6 +39,7 @@ import {
 import { ICycle } from "@plane/types";
 // constants
 import { EUserWorkspaceRoles } from "constants/workspace";
+import { CYCLE_UPDATED } from "constants/event-tracker";
 // fetch-keys
 import { CYCLE_STATUS } from "constants/cycle";
 
@@ -67,7 +68,7 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
   const router = useRouter();
   const { workspaceSlug, projectId, peekCycle } = router.query;
   // store hooks
-  const { setTrackElement } = useEventTracker();
+  const { setTrackElement, captureCycleEvent } = useEventTracker();
   const {
     membership: { currentProjectRole },
   } = useUser();
@@ -83,10 +84,32 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
     defaultValues,
   });
 
-  const submitChanges = (data: Partial<ICycle>) => {
+  const submitChanges = (data: Partial<ICycle>, changedProperty: string) => {
     if (!workspaceSlug || !projectId || !cycleId) return;
 
-    updateCycleDetails(workspaceSlug.toString(), projectId.toString(), cycleId.toString(), data);
+    updateCycleDetails(workspaceSlug.toString(), projectId.toString(), cycleId.toString(), data)
+      .then((res) => {
+        captureCycleEvent({
+          eventName: CYCLE_UPDATED,
+          payload: {
+            ...res,
+            changed_properties: [changedProperty],
+            element: "Right side-peek",
+            state: "SUCCESS",
+          },
+        });
+      })
+
+      .catch((_) => {
+        captureCycleEvent({
+          eventName: CYCLE_UPDATED,
+          payload: {
+            ...data,
+            element: "Right side-peek",
+            state: "FAILED",
+          },
+        });
+      });
   };
 
   const handleCopyText = () => {
@@ -146,10 +169,13 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
         });
 
         if (isDateValidForExistingCycle) {
-          submitChanges({
-            start_date: renderFormattedPayloadDate(`${watch("start_date")}`),
-            end_date: renderFormattedPayloadDate(`${watch("end_date")}`),
-          });
+          submitChanges(
+            {
+              start_date: renderFormattedPayloadDate(`${watch("start_date")}`),
+              end_date: renderFormattedPayloadDate(`${watch("end_date")}`),
+            },
+            "start_date"
+          );
           setToastAlert({
             type: "success",
             title: "Success!",
@@ -174,10 +200,13 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
       });
 
       if (isDateValid) {
-        submitChanges({
-          start_date: renderFormattedPayloadDate(`${watch("start_date")}`),
-          end_date: renderFormattedPayloadDate(`${watch("end_date")}`),
-        });
+        submitChanges(
+          {
+            start_date: renderFormattedPayloadDate(`${watch("start_date")}`),
+            end_date: renderFormattedPayloadDate(`${watch("end_date")}`),
+          },
+          "start_date"
+        );
         setToastAlert({
           type: "success",
           title: "Success!",
@@ -219,10 +248,13 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
         });
 
         if (isDateValidForExistingCycle) {
-          submitChanges({
-            start_date: renderFormattedPayloadDate(`${watch("start_date")}`),
-            end_date: renderFormattedPayloadDate(`${watch("end_date")}`),
-          });
+          submitChanges(
+            {
+              start_date: renderFormattedPayloadDate(`${watch("start_date")}`),
+              end_date: renderFormattedPayloadDate(`${watch("end_date")}`),
+            },
+            "end_date"
+          );
           setToastAlert({
             type: "success",
             title: "Success!",
@@ -246,10 +278,13 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
       });
 
       if (isDateValid) {
-        submitChanges({
-          start_date: renderFormattedPayloadDate(`${watch("start_date")}`),
-          end_date: renderFormattedPayloadDate(`${watch("end_date")}`),
-        });
+        submitChanges(
+          {
+            start_date: renderFormattedPayloadDate(`${watch("start_date")}`),
+            end_date: renderFormattedPayloadDate(`${watch("end_date")}`),
+          },
+          "end_date"
+        );
         setToastAlert({
           type: "success",
           title: "Success!",
diff --git a/web/components/headers/pages.tsx b/web/components/headers/pages.tsx
index 28116b323..1984971d6 100644
--- a/web/components/headers/pages.tsx
+++ b/web/components/headers/pages.tsx
@@ -2,7 +2,7 @@ import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
 import { FileText, Plus } from "lucide-react";
 // hooks
-import { useApplication, useProject, useUser } from "hooks/store";
+import { useApplication, useEventTracker, useProject, useUser } from "hooks/store";
 // ui
 import { Breadcrumbs, Button } from "@plane/ui";
 // helpers
@@ -25,6 +25,7 @@ export const PagesHeader = observer(() => {
     membership: { currentProjectRole },
   } = useUser();
   const { currentProjectDetails } = useProject();
+  const { setTrackElement } = useEventTracker();
 
   const canUserCreatePage =
     currentProjectRole && [EUserProjectRoles.ADMIN, EUserProjectRoles.MEMBER].includes(currentProjectRole);
@@ -64,7 +65,15 @@ export const PagesHeader = observer(() => {
       </div>
       {canUserCreatePage && (
         <div className="flex items-center gap-2">
-          <Button variant="primary" prependIcon={<Plus />} size="sm" onClick={() => toggleCreatePageModal(true)}>
+          <Button
+            variant="primary"
+            prependIcon={<Plus />}
+            size="sm"
+            onClick={() => {
+              setTrackElement("Project pages page");
+              toggleCreatePageModal(true);
+            }}
+          >
             Create Page
           </Button>
         </div>
diff --git a/web/components/headers/workspace-dashboard.tsx b/web/components/headers/workspace-dashboard.tsx
index d8306ab40..6b85577f6 100644
--- a/web/components/headers/workspace-dashboard.tsx
+++ b/web/components/headers/workspace-dashboard.tsx
@@ -4,13 +4,18 @@ import { useTheme } from "next-themes";
 // images
 import githubBlackImage from "/public/logos/github-black.png";
 import githubWhiteImage from "/public/logos/github-white.png";
+// hooks
+import { useEventTracker } from "hooks/store";
 // components
 import { BreadcrumbLink } from "components/common";
 import { Breadcrumbs } from "@plane/ui";
 import { SidebarHamburgerToggle } from "components/core/sidebar/sidebar-menu-hamburger-toggle";
+// constants
+import { CHANGELOG_REDIRECTED, GITHUB_REDIRECTED } from "constants/event-tracker";
 
 export const WorkspaceDashboardHeader = () => {
   // hooks
+  const { captureEvent } = useEventTracker();
   const { resolvedTheme } = useTheme();
 
   return (
@@ -31,16 +36,26 @@ export const WorkspaceDashboardHeader = () => {
         </div>
         <div className="flex items-center gap-3 px-3">
           <a
+            onClick={() =>
+              captureEvent(CHANGELOG_REDIRECTED, {
+                element: "navbar",
+              })
+            }
             href="https://plane.so/changelog"
             target="_blank"
             rel="noopener noreferrer"
             className="flex flex-shrink-0 items-center gap-1.5 rounded bg-custom-background-80 px-3 py-1.5"
           >
             <Zap size={14} strokeWidth={2} fill="rgb(var(--color-text-100))" />
-            <span className="text-xs hidden sm:hidden md:block font-medium">{"What's new?"}</span>
+            <span className="hidden text-xs font-medium sm:hidden md:block">{"What's new?"}</span>
           </a>
           <a
-            className="flex flex-shrink-0 items-center gap-1.5 rounded bg-custom-background-80 px-3 py-1.5 "
+            onClick={() =>
+              captureEvent(GITHUB_REDIRECTED, {
+                element: "navbar",
+              })
+            }
+            className="flex flex-shrink-0 items-center gap-1.5 rounded bg-custom-background-80 px-3 py-1.5"
             href="https://github.com/makeplane/plane"
             target="_blank"
             rel="noopener noreferrer"
@@ -51,7 +66,7 @@ export const WorkspaceDashboardHeader = () => {
               width={16}
               alt="GitHub Logo"
             />
-            <span className="text-xs font-medium hidden sm:hidden md:block">Star us on GitHub</span>
+            <span className="hidden text-xs font-medium sm:hidden md:block">Star us on GitHub</span>
           </a>
         </div>
       </div>
diff --git a/web/components/inbox/inbox-issue-actions.tsx b/web/components/inbox/inbox-issue-actions.tsx
index 82253af88..998ad268c 100644
--- a/web/components/inbox/inbox-issue-actions.tsx
+++ b/web/components/inbox/inbox-issue-actions.tsx
@@ -20,6 +20,7 @@ import { CheckCircle2, ChevronDown, ChevronUp, Clock, FileStack, Trash2, XCircle
 // types
 import type { TInboxStatus, TInboxDetailedStatus } from "@plane/types";
 import { EUserProjectRoles } from "constants/project";
+import { ISSUE_DELETED } from "constants/event-tracker";
 
 type TInboxIssueActionsHeader = {
   workspaceSlug: string;
@@ -86,17 +87,12 @@ export const InboxIssueActionsHeader: FC<TInboxIssueActionsHeader> = observer((p
             throw new Error("Missing required parameters");
           await removeInboxIssue(workspaceSlug, projectId, inboxId, inboxIssueId);
           captureIssueEvent({
-            eventName: "Issue deleted",
+            eventName: ISSUE_DELETED,
             payload: {
               id: inboxIssueId,
               state: "SUCCESS",
               element: "Inbox page",
-            },
-            group: {
-              isGrouping: true,
-              groupType: "Workspace_metrics",
-              groupId: currentWorkspace?.id!,
-            },
+            }
           });
           router.push({
             pathname: `/${workspaceSlug}/projects/${projectId}/inbox/${inboxId}`,
@@ -108,17 +104,12 @@ export const InboxIssueActionsHeader: FC<TInboxIssueActionsHeader> = observer((p
             message: "Something went wrong while deleting inbox issue. Please try again.",
           });
           captureIssueEvent({
-            eventName: "Issue deleted",
+            eventName: ISSUE_DELETED,
             payload: {
               id: inboxIssueId,
               state: "FAILED",
               element: "Inbox page",
             },
-            group: {
-              isGrouping: true,
-              groupType: "Workspace_metrics",
-              groupId: currentWorkspace?.id!,
-            },
           });
         }
       },
diff --git a/web/components/inbox/modals/create-issue-modal.tsx b/web/components/inbox/modals/create-issue-modal.tsx
index 066f172ca..84c4bef1e 100644
--- a/web/components/inbox/modals/create-issue-modal.tsx
+++ b/web/components/inbox/modals/create-issue-modal.tsx
@@ -18,6 +18,8 @@ import { GptAssistantPopover } from "components/core";
 import { Button, Input, ToggleSwitch } from "@plane/ui";
 // types
 import { TIssue } from "@plane/types";
+// constants
+import { ISSUE_CREATED } from "constants/event-tracker";
 
 type Props = {
   isOpen: boolean;
@@ -65,7 +67,6 @@ export const CreateInboxIssueModal: React.FC<Props> = observer((props) => {
     config: { envConfig },
   } = useApplication();
   const { captureIssueEvent } = useEventTracker();
-  const { currentWorkspace } = useWorkspace();
 
   const {
     control,
@@ -94,34 +95,24 @@ export const CreateInboxIssueModal: React.FC<Props> = observer((props) => {
           handleClose();
         } else reset(defaultValues);
         captureIssueEvent({
-          eventName: "Issue created",
+          eventName: ISSUE_CREATED,
           payload: {
             ...formData,
             state: "SUCCESS",
             element: "Inbox page",
           },
-          group: {
-            isGrouping: true,
-            groupType: "Workspace_metrics",
-            groupId: currentWorkspace?.id!,
-          },
           path: router.pathname,
         });
       })
       .catch((error) => {
         console.error(error);
         captureIssueEvent({
-          eventName: "Issue created",
+          eventName: ISSUE_CREATED,
           payload: {
             ...formData,
             state: "FAILED",
             element: "Inbox page",
           },
-          group: {
-            isGrouping: true,
-            groupType: "Workspace_metrics",
-            groupId: currentWorkspace?.id!,
-          },
           path: router.pathname,
         });
       });
diff --git a/web/components/issues/attachment/root.tsx b/web/components/issues/attachment/root.tsx
index 11d74af0e..ffa17d337 100644
--- a/web/components/issues/attachment/root.tsx
+++ b/web/components/issues/attachment/root.tsx
@@ -38,7 +38,7 @@ export const IssueAttachmentRoot: FC<TIssueAttachmentRoot> = (props) => {
             title: "Attachment uploaded",
           });
           captureIssueEvent({
-            eventName: "Issue updated",
+            eventName: "Issue attachment added",
             payload: { id: issueId, state: "SUCCESS", element: "Issue detail page" },
             updates: {
               changed_property: "attachment",
@@ -47,7 +47,7 @@ export const IssueAttachmentRoot: FC<TIssueAttachmentRoot> = (props) => {
           });
         } catch (error) {
           captureIssueEvent({
-            eventName: "Issue updated",
+            eventName: "Issue attachment added",
             payload: { id: issueId, state: "FAILED", element: "Issue detail page" },
           });
           setToastAlert({
@@ -67,7 +67,7 @@ export const IssueAttachmentRoot: FC<TIssueAttachmentRoot> = (props) => {
             title: "Attachment removed",
           });
           captureIssueEvent({
-            eventName: "Issue updated",
+            eventName: "Issue attachment deleted",
             payload: { id: issueId, state: "SUCCESS", element: "Issue detail page" },
             updates: {
               changed_property: "attachment",
@@ -76,7 +76,7 @@ export const IssueAttachmentRoot: FC<TIssueAttachmentRoot> = (props) => {
           });
         } catch (error) {
           captureIssueEvent({
-            eventName: "Issue updated",
+            eventName: "Issue attachment deleted",
             payload: { id: issueId, state: "FAILED", element: "Issue detail page" },
             updates: {
               changed_property: "attachment",
diff --git a/web/components/issues/issue-detail/root.tsx b/web/components/issues/issue-detail/root.tsx
index 2e0303a8e..92badf4b2 100644
--- a/web/components/issues/issue-detail/root.tsx
+++ b/web/components/issues/issue-detail/root.tsx
@@ -16,6 +16,7 @@ import { TIssue } from "@plane/types";
 // constants
 import { EUserProjectRoles } from "constants/project";
 import { EIssuesStoreType } from "constants/issue";
+import { ISSUE_UPDATED, ISSUE_DELETED } from "constants/event-tracker";
 
 export type TIssueOperations = {
   fetch: (workspaceSlug: string, projectId: string, issueId: string) => Promise<void>;
@@ -102,7 +103,7 @@ export const IssueDetailRoot: FC<TIssueDetailRoot> = (props) => {
             });
           }
           captureIssueEvent({
-            eventName: "Issue updated",
+            eventName: ISSUE_UPDATED,
             payload: { ...response, state: "SUCCESS", element: "Issue detail page" },
             updates: {
               changed_property: Object.keys(data).join(","),
@@ -112,7 +113,7 @@ export const IssueDetailRoot: FC<TIssueDetailRoot> = (props) => {
           });
         } catch (error) {
           captureIssueEvent({
-            eventName: "Issue updated",
+            eventName: ISSUE_UPDATED,
             payload: { state: "FAILED", element: "Issue detail page" },
             updates: {
               changed_property: Object.keys(data).join(","),
@@ -138,7 +139,7 @@ export const IssueDetailRoot: FC<TIssueDetailRoot> = (props) => {
             message: "Issue deleted successfully",
           });
           captureIssueEvent({
-            eventName: "Issue deleted",
+            eventName: ISSUE_DELETED,
             payload: { id: issueId, state: "SUCCESS", element: "Issue detail page" },
             path: router.asPath,
           });
@@ -149,7 +150,7 @@ export const IssueDetailRoot: FC<TIssueDetailRoot> = (props) => {
             message: "Issue delete failed",
           });
           captureIssueEvent({
-            eventName: "Issue deleted",
+            eventName: ISSUE_DELETED,
             payload: { id: issueId, state: "FAILED", element: "Issue detail page" },
             path: router.asPath,
           });
@@ -164,7 +165,7 @@ export const IssueDetailRoot: FC<TIssueDetailRoot> = (props) => {
             message: "Issue added to issue successfully",
           });
           captureIssueEvent({
-            eventName: "Issue updated",
+            eventName: ISSUE_UPDATED,
             payload: { ...response, state: "SUCCESS", element: "Issue detail page" },
             updates: {
               changed_property: "cycle_id",
@@ -174,7 +175,7 @@ export const IssueDetailRoot: FC<TIssueDetailRoot> = (props) => {
           });
         } catch (error) {
           captureIssueEvent({
-            eventName: "Issue updated",
+            eventName: ISSUE_UPDATED,
             payload: { state: "FAILED", element: "Issue detail page" },
             updates: {
               changed_property: "cycle_id",
@@ -198,7 +199,7 @@ export const IssueDetailRoot: FC<TIssueDetailRoot> = (props) => {
             message: "Cycle removed from issue successfully",
           });
           captureIssueEvent({
-            eventName: "Issue updated",
+            eventName: ISSUE_UPDATED,
             payload: { ...response, state: "SUCCESS", element: "Issue detail page" },
             updates: {
               changed_property: "cycle_id",
@@ -208,7 +209,7 @@ export const IssueDetailRoot: FC<TIssueDetailRoot> = (props) => {
           });
         } catch (error) {
           captureIssueEvent({
-            eventName: "Issue updated",
+            eventName: ISSUE_UPDATED,
             payload: { state: "FAILED", element: "Issue detail page" },
             updates: {
               changed_property: "cycle_id",
@@ -232,7 +233,7 @@ export const IssueDetailRoot: FC<TIssueDetailRoot> = (props) => {
             message: "Module added to issue successfully",
           });
           captureIssueEvent({
-            eventName: "Issue updated",
+            eventName: ISSUE_UPDATED,
             payload: { ...response, state: "SUCCESS", element: "Issue detail page" },
             updates: {
               changed_property: "module_id",
@@ -242,7 +243,7 @@ export const IssueDetailRoot: FC<TIssueDetailRoot> = (props) => {
           });
         } catch (error) {
           captureIssueEvent({
-            eventName: "Issue updated",
+            eventName: ISSUE_UPDATED,
             payload: { id: issueId, state: "FAILED", element: "Issue detail page" },
             updates: {
               changed_property: "module_id",
@@ -266,7 +267,7 @@ export const IssueDetailRoot: FC<TIssueDetailRoot> = (props) => {
             message: "Module removed from issue successfully",
           });
           captureIssueEvent({
-            eventName: "Issue updated",
+            eventName: ISSUE_UPDATED,
             payload: { id: issueId, state: "SUCCESS", element: "Issue detail page" },
             updates: {
               changed_property: "module_id",
@@ -276,7 +277,7 @@ export const IssueDetailRoot: FC<TIssueDetailRoot> = (props) => {
           });
         } catch (error) {
           captureIssueEvent({
-            eventName: "Issue updated",
+            eventName: ISSUE_UPDATED,
             payload: { id: issueId, state: "FAILED", element: "Issue detail page" },
             updates: {
               changed_property: "module_id",
diff --git a/web/components/issues/issue-layouts/calendar/quick-add-issue-form.tsx b/web/components/issues/issue-layouts/calendar/quick-add-issue-form.tsx
index 1f62c248c..6db9323fa 100644
--- a/web/components/issues/issue-layouts/calendar/quick-add-issue-form.tsx
+++ b/web/components/issues/issue-layouts/calendar/quick-add-issue-form.tsx
@@ -13,6 +13,8 @@ import { createIssuePayload } from "helpers/issue.helper";
 import { PlusIcon } from "lucide-react";
 // types
 import { TIssue } from "@plane/types";
+// constants
+import { ISSUE_CREATED } from "constants/event-tracker";
 
 type Props = {
   formKey: keyof TIssue;
@@ -129,7 +131,7 @@ export const CalendarQuickAddIssueForm: React.FC<Props> = observer((props) => {
           viewId
         ).then((res) => {
           captureIssueEvent({
-            eventName: "Issue created",
+            eventName: ISSUE_CREATED,
             payload: { ...res, state: "SUCCESS", element: "Calendar quick add" },
             path: router.asPath,
           });
@@ -142,7 +144,7 @@ export const CalendarQuickAddIssueForm: React.FC<Props> = observer((props) => {
     } catch (err: any) {
       console.error(err);
       captureIssueEvent({
-        eventName: "Issue created",
+        eventName: ISSUE_CREATED,
         payload: { ...payload, state: "FAILED", element: "Calendar quick add" },
         path: router.asPath,
       });
diff --git a/web/components/issues/issue-layouts/filters/applied-filters/roots/global-view-root.tsx b/web/components/issues/issue-layouts/filters/applied-filters/roots/global-view-root.tsx
index 0dae3c8bd..c03e86504 100644
--- a/web/components/issues/issue-layouts/filters/applied-filters/roots/global-view-root.tsx
+++ b/web/components/issues/issue-layouts/filters/applied-filters/roots/global-view-root.tsx
@@ -2,7 +2,7 @@ import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
 import isEqual from "lodash/isEqual";
 // hooks
-import { useGlobalView, useIssues, useLabel, useUser } from "hooks/store";
+import { useEventTracker, useGlobalView, useIssues, useLabel, useUser } from "hooks/store";
 //ui
 import { Button } from "@plane/ui";
 // components
@@ -11,6 +11,8 @@ import { AppliedFiltersList } from "components/issues";
 import { IIssueFilterOptions, TStaticViewTypes } from "@plane/types";
 import { EIssueFilterType, EIssuesStoreType } from "constants/issue";
 import { DEFAULT_GLOBAL_VIEWS_LIST, EUserWorkspaceRoles } from "constants/workspace";
+// constants
+import { GLOBAL_VIEW_UPDATED } from "constants/event-tracker";
 
 type Props = {
   globalViewId: string;
@@ -27,6 +29,7 @@ export const GlobalViewsAppliedFiltersRoot = observer((props: Props) => {
   } = useIssues(EIssuesStoreType.GLOBAL);
   const { workspaceLabels } = useLabel();
   const { globalViewMap, updateGlobalView } = useGlobalView();
+  const { captureEvent } = useEventTracker();
   const {
     membership: { currentWorkspaceRole },
   } = useUser();
@@ -91,6 +94,13 @@ export const GlobalViewsAppliedFiltersRoot = observer((props: Props) => {
       filters: {
         ...(appliedFilters ?? {}),
       },
+    }).then((res) => {
+      captureEvent(GLOBAL_VIEW_UPDATED, {
+        view_id: res.id,
+        applied_filters: res.filters,
+        state: "SUCCESS",
+        element: "Spreadsheet view",
+      });
     });
   };
 
diff --git a/web/components/issues/issue-layouts/gantt/quick-add-issue-form.tsx b/web/components/issues/issue-layouts/gantt/quick-add-issue-form.tsx
index e89f60688..bfecb993b 100644
--- a/web/components/issues/issue-layouts/gantt/quick-add-issue-form.tsx
+++ b/web/components/issues/issue-layouts/gantt/quick-add-issue-form.tsx
@@ -13,6 +13,8 @@ import { renderFormattedPayloadDate } from "helpers/date-time.helper";
 import { createIssuePayload } from "helpers/issue.helper";
 // types
 import { IProject, TIssue } from "@plane/types";
+// constants
+import { ISSUE_CREATED } from "constants/event-tracker";
 
 interface IInputProps {
   formKey: string;
@@ -111,7 +113,7 @@ export const GanttQuickAddIssueForm: React.FC<IGanttQuickAddIssueForm> = observe
       quickAddCallback &&
         (await quickAddCallback(workspaceSlug.toString(), projectId.toString(), { ...payload }, viewId).then((res) => {
           captureIssueEvent({
-            eventName: "Issue created",
+            eventName: ISSUE_CREATED,
             payload: { ...res, state: "SUCCESS", element: "Gantt quick add" },
             path: router.asPath,
           });
@@ -123,7 +125,7 @@ export const GanttQuickAddIssueForm: React.FC<IGanttQuickAddIssueForm> = observe
       });
     } catch (err: any) {
       captureIssueEvent({
-        eventName: "Issue created",
+        eventName: ISSUE_CREATED,
         payload: { ...payload, state: "FAILED", element: "Gantt quick add" },
         path: router.asPath,
       });
diff --git a/web/components/issues/issue-layouts/kanban/base-kanban-root.tsx b/web/components/issues/issue-layouts/kanban/base-kanban-root.tsx
index 36d5e0315..83f72d8ea 100644
--- a/web/components/issues/issue-layouts/kanban/base-kanban-root.tsx
+++ b/web/components/issues/issue-layouts/kanban/base-kanban-root.tsx
@@ -25,6 +25,7 @@ import { IProfileIssues, IProfileIssuesFilter } from "store/issue/profile";
 import { IModuleIssues, IModuleIssuesFilter } from "store/issue/module";
 import { IProjectViewIssues, IProjectViewIssuesFilter } from "store/issue/project-views";
 import { EIssueFilterType, TCreateModalStoreTypes } from "constants/issue";
+import { ISSUE_DELETED } from "constants/event-tracker";
 
 export interface IBaseKanBanLayout {
   issues: IProjectIssues | ICycleIssues | IDraftIssues | IModuleIssues | IProjectViewIssues | IProfileIssues;
@@ -212,7 +213,7 @@ export const BaseKanBanRoot: React.FC<IBaseKanBanLayout> = observer((props: IBas
       setDeleteIssueModal(false);
       setDragState({});
       captureIssueEvent({
-        eventName: "Issue deleted",
+        eventName: ISSUE_DELETED,
         payload: { id: dragState.draggedIssueId!, state: "FAILED", element: "Kanban layout drag & drop" },
         path: router.asPath,
       });
diff --git a/web/components/issues/issue-layouts/kanban/quick-add-issue-form.tsx b/web/components/issues/issue-layouts/kanban/quick-add-issue-form.tsx
index 8880ca278..513163431 100644
--- a/web/components/issues/issue-layouts/kanban/quick-add-issue-form.tsx
+++ b/web/components/issues/issue-layouts/kanban/quick-add-issue-form.tsx
@@ -12,6 +12,8 @@ import useOutsideClickDetector from "hooks/use-outside-click-detector";
 import { createIssuePayload } from "helpers/issue.helper";
 // types
 import { TIssue } from "@plane/types";
+// constants
+import { ISSUE_CREATED } from "constants/event-tracker";
 
 const Inputs = (props: any) => {
   const { register, setFocus, projectDetail } = props;
@@ -106,7 +108,7 @@ export const KanBanQuickAddIssueForm: React.FC<IKanBanQuickAddIssueForm> = obser
           viewId
         ).then((res) => {
           captureIssueEvent({
-            eventName: "Issue created",
+            eventName: ISSUE_CREATED,
             payload: { ...res, state: "SUCCESS", element: "Kanban quick add" },
             path: router.asPath,
           });
@@ -118,7 +120,7 @@ export const KanBanQuickAddIssueForm: React.FC<IKanBanQuickAddIssueForm> = obser
       });
     } catch (err: any) {
       captureIssueEvent({
-        eventName: "Issue created",
+        eventName: ISSUE_CREATED,
         payload: { ...payload, state: "FAILED", element: "Kanban quick add" },
         path: router.asPath,
       });
diff --git a/web/components/issues/issue-layouts/list/quick-add-issue-form.tsx b/web/components/issues/issue-layouts/list/quick-add-issue-form.tsx
index dd63f09aa..8d1ce6d9c 100644
--- a/web/components/issues/issue-layouts/list/quick-add-issue-form.tsx
+++ b/web/components/issues/issue-layouts/list/quick-add-issue-form.tsx
@@ -12,6 +12,8 @@ import useOutsideClickDetector from "hooks/use-outside-click-detector";
 import { TIssue, IProject } from "@plane/types";
 // types
 import { createIssuePayload } from "helpers/issue.helper";
+// constants
+import { ISSUE_CREATED } from "constants/event-tracker";
 
 interface IInputProps {
   formKey: string;
@@ -103,7 +105,7 @@ export const ListQuickAddIssueForm: FC<IListQuickAddIssueForm> = observer((props
       quickAddCallback &&
         (await quickAddCallback(workspaceSlug.toString(), projectId.toString(), { ...payload }, viewId).then((res) => {
           captureIssueEvent({
-            eventName: "Issue created",
+            eventName: ISSUE_CREATED,
             payload: { ...res, state: "SUCCESS", element: "List quick add" },
             path: router.asPath,
           });
@@ -115,7 +117,7 @@ export const ListQuickAddIssueForm: FC<IListQuickAddIssueForm> = observer((props
       });
     } catch (err: any) {
       captureIssueEvent({
-        eventName: "Issue created",
+        eventName: ISSUE_CREATED,
         payload: { ...payload, state: "FAILED", element: "List quick add" },
         path: router.asPath,
       });
diff --git a/web/components/issues/issue-layouts/properties/all-properties.tsx b/web/components/issues/issue-layouts/properties/all-properties.tsx
index e0a0dbd5c..4d851545e 100644
--- a/web/components/issues/issue-layouts/properties/all-properties.tsx
+++ b/web/components/issues/issue-layouts/properties/all-properties.tsx
@@ -18,6 +18,8 @@ import {
 import { renderFormattedPayloadDate } from "helpers/date-time.helper";
 // types
 import { TIssue, IIssueDisplayProperties, TIssuePriorities } from "@plane/types";
+// constants
+import { ISSUE_UPDATED } from "constants/event-tracker";
 
 export interface IIssueProperties {
   issue: TIssue;
@@ -40,7 +42,7 @@ export const IssueProperties: React.FC<IIssueProperties> = observer((props) => {
   const handleState = (stateId: string) => {
     handleIssues({ ...issue, state_id: stateId }).then(() => {
       captureIssueEvent({
-        eventName: "Issue updated",
+        eventName: ISSUE_UPDATED,
         payload: { ...issue, state: "SUCCESS", element: currentLayout },
         path: router.asPath,
         updates: {
@@ -54,7 +56,7 @@ export const IssueProperties: React.FC<IIssueProperties> = observer((props) => {
   const handlePriority = (value: TIssuePriorities) => {
     handleIssues({ ...issue, priority: value }).then(() => {
       captureIssueEvent({
-        eventName: "Issue updated",
+        eventName: ISSUE_UPDATED,
         payload: { ...issue, state: "SUCCESS", element: currentLayout },
         path: router.asPath,
         updates: {
@@ -68,7 +70,7 @@ export const IssueProperties: React.FC<IIssueProperties> = observer((props) => {
   const handleLabel = (ids: string[]) => {
     handleIssues({ ...issue, label_ids: ids }).then(() => {
       captureIssueEvent({
-        eventName: "Issue updated",
+        eventName: ISSUE_UPDATED,
         payload: { ...issue, state: "SUCCESS", element: currentLayout },
         path: router.asPath,
         updates: {
@@ -82,7 +84,7 @@ export const IssueProperties: React.FC<IIssueProperties> = observer((props) => {
   const handleAssignee = (ids: string[]) => {
     handleIssues({ ...issue, assignee_ids: ids }).then(() => {
       captureIssueEvent({
-        eventName: "Issue updated",
+        eventName: ISSUE_UPDATED,
         payload: { ...issue, state: "SUCCESS", element: currentLayout },
         path: router.asPath,
         updates: {
@@ -96,7 +98,7 @@ export const IssueProperties: React.FC<IIssueProperties> = observer((props) => {
   const handleStartDate = (date: Date | null) => {
     handleIssues({ ...issue, start_date: date ? renderFormattedPayloadDate(date) : null }).then(() => {
       captureIssueEvent({
-        eventName: "Issue updated",
+        eventName: ISSUE_UPDATED,
         payload: { ...issue, state: "SUCCESS", element: currentLayout },
         path: router.asPath,
         updates: {
@@ -110,7 +112,7 @@ export const IssueProperties: React.FC<IIssueProperties> = observer((props) => {
   const handleTargetDate = (date: Date | null) => {
     handleIssues({ ...issue, target_date: date ? renderFormattedPayloadDate(date) : null }).then(() => {
       captureIssueEvent({
-        eventName: "Issue updated",
+        eventName: ISSUE_UPDATED,
         payload: { ...issue, state: "SUCCESS", element: currentLayout },
         path: router.asPath,
         updates: {
@@ -124,7 +126,7 @@ export const IssueProperties: React.FC<IIssueProperties> = observer((props) => {
   const handleEstimate = (value: number | null) => {
     handleIssues({ ...issue, estimate_point: value }).then(() => {
       captureIssueEvent({
-        eventName: "Issue updated",
+        eventName: ISSUE_UPDATED,
         payload: { ...issue, state: "SUCCESS", element: currentLayout },
         path: router.asPath,
         updates: {
diff --git a/web/components/issues/issue-layouts/spreadsheet/quick-add-issue-form.tsx b/web/components/issues/issue-layouts/spreadsheet/quick-add-issue-form.tsx
index b0acd7237..3cba3c6cd 100644
--- a/web/components/issues/issue-layouts/spreadsheet/quick-add-issue-form.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/quick-add-issue-form.tsx
@@ -12,6 +12,8 @@ import useOutsideClickDetector from "hooks/use-outside-click-detector";
 import { createIssuePayload } from "helpers/issue.helper";
 // types
 import { TIssue } from "@plane/types";
+// constants
+import { ISSUE_CREATED } from "constants/event-tracker";
 
 type Props = {
   formKey: keyof TIssue;
@@ -162,7 +164,7 @@ export const SpreadsheetQuickAddIssueForm: React.FC<Props> = observer((props) =>
         (await quickAddCallback(currentWorkspace.slug, currentProjectDetails.id, { ...payload } as TIssue, viewId).then(
           (res) => {
             captureIssueEvent({
-              eventName: "Issue created",
+              eventName: ISSUE_CREATED,
               payload: { ...res, state: "SUCCESS", element: "Spreadsheet quick add" },
               path: router.asPath,
             });
@@ -175,7 +177,7 @@ export const SpreadsheetQuickAddIssueForm: React.FC<Props> = observer((props) =>
       });
     } catch (err: any) {
       captureIssueEvent({
-        eventName: "Issue created",
+        eventName: ISSUE_CREATED,
         payload: { ...payload, state: "FAILED", element: "Spreadsheet quick add" },
         path: router.asPath,
       });
diff --git a/web/components/issues/issue-modal/modal.tsx b/web/components/issues/issue-modal/modal.tsx
index 02a087314..97d977ace 100644
--- a/web/components/issues/issue-modal/modal.tsx
+++ b/web/components/issues/issue-modal/modal.tsx
@@ -13,6 +13,8 @@ import { IssueFormRoot } from "./form";
 import type { TIssue } from "@plane/types";
 // constants
 import { EIssuesStoreType, TCreateModalStoreTypes } from "constants/issue";
+import { ISSUE_CREATED, ISSUE_UPDATED } from "constants/event-tracker";
+
 export interface IssuesModalProps {
   data?: Partial<TIssue>;
   isOpen: boolean;
@@ -157,14 +159,9 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = observer((prop
         message: "Issue created successfully.",
       });
       captureIssueEvent({
-        eventName: "Issue created",
+        eventName: ISSUE_CREATED,
         payload: { ...response, state: "SUCCESS" },
         path: router.asPath,
-        group: {
-          isGrouping: true,
-          groupType: "Workspace_metrics",
-          groupId: currentWorkspace?.id!,
-        },
       });
       !createMore && handleClose();
       return response;
@@ -175,14 +172,9 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = observer((prop
         message: "Issue could not be created. Please try again.",
       });
       captureIssueEvent({
-        eventName: "Issue created",
+        eventName: ISSUE_CREATED,
         payload: { ...payload, state: "FAILED" },
         path: router.asPath,
-        group: {
-          isGrouping: true,
-          groupType: "Workspace_metrics",
-          groupId: currentWorkspace?.id!,
-        },
       });
     }
   };
@@ -198,14 +190,9 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = observer((prop
         message: "Issue updated successfully.",
       });
       captureIssueEvent({
-        eventName: "Issue updated",
+        eventName: ISSUE_UPDATED,
         payload: { ...response, state: "SUCCESS" },
         path: router.asPath,
-        group: {
-          isGrouping: true,
-          groupType: "Workspace_metrics",
-          groupId: currentWorkspace?.id!,
-        },
       });
       handleClose();
       return response;
@@ -216,14 +203,9 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = observer((prop
         message: "Issue could not be created. Please try again.",
       });
       captureIssueEvent({
-        eventName: "Issue updated",
+        eventName: ISSUE_UPDATED,
         payload: { ...payload, state: "FAILED" },
         path: router.asPath,
-        group: {
-          isGrouping: true,
-          groupType: "Workspace_metrics",
-          groupId: currentWorkspace?.id!,
-        },
       });
     }
   };
diff --git a/web/components/issues/peek-overview/root.tsx b/web/components/issues/peek-overview/root.tsx
index f14018ed4..b491ebe36 100644
--- a/web/components/issues/peek-overview/root.tsx
+++ b/web/components/issues/peek-overview/root.tsx
@@ -11,6 +11,7 @@ import { TIssue } from "@plane/types";
 // constants
 import { EUserProjectRoles } from "constants/project";
 import { EIssuesStoreType } from "constants/issue";
+import { ISSUE_UPDATED, ISSUE_DELETED } from "constants/event-tracker";
 
 interface IIssuePeekOverview {
   is_archived?: boolean;
@@ -103,7 +104,7 @@ export const IssuePeekOverview: FC<IIssuePeekOverview> = observer((props) => {
               message: "Issue updated successfully",
             });
           captureIssueEvent({
-            eventName: "Issue updated",
+            eventName: ISSUE_UPDATED,
             payload: { ...response, state: "SUCCESS", element: "Issue peek-overview" },
             updates: {
               changed_property: Object.keys(data).join(","),
@@ -113,7 +114,7 @@ export const IssuePeekOverview: FC<IIssuePeekOverview> = observer((props) => {
           });
         } catch (error) {
           captureIssueEvent({
-            eventName: "Issue updated",
+            eventName: ISSUE_UPDATED,
             payload: { state: "FAILED", element: "Issue peek-overview" },
             path: router.asPath,
           });
@@ -135,7 +136,7 @@ export const IssuePeekOverview: FC<IIssuePeekOverview> = observer((props) => {
             message: "Issue deleted successfully",
           });
           captureIssueEvent({
-            eventName: "Issue deleted",
+            eventName: ISSUE_DELETED,
             payload: { id: issueId, state: "SUCCESS", element: "Issue peek-overview" },
             path: router.asPath,
           });
@@ -146,7 +147,7 @@ export const IssuePeekOverview: FC<IIssuePeekOverview> = observer((props) => {
             message: "Issue delete failed",
           });
           captureIssueEvent({
-            eventName: "Issue deleted",
+            eventName: ISSUE_DELETED,
             payload: { id: issueId, state: "FAILED", element: "Issue peek-overview" },
             path: router.asPath,
           });
@@ -161,7 +162,7 @@ export const IssuePeekOverview: FC<IIssuePeekOverview> = observer((props) => {
             message: "Issue added to issue successfully",
           });
           captureIssueEvent({
-            eventName: "Issue updated",
+            eventName: ISSUE_UPDATED,
             payload: { ...response, state: "SUCCESS", element: "Issue peek-overview" },
             updates: {
               changed_property: "cycle_id",
@@ -171,7 +172,7 @@ export const IssuePeekOverview: FC<IIssuePeekOverview> = observer((props) => {
           });
         } catch (error) {
           captureIssueEvent({
-            eventName: "Issue updated",
+            eventName: ISSUE_UPDATED,
             payload: { state: "FAILED", element: "Issue peek-overview" },
             updates: {
               changed_property: "cycle_id",
@@ -195,7 +196,7 @@ export const IssuePeekOverview: FC<IIssuePeekOverview> = observer((props) => {
             message: "Cycle removed from issue successfully",
           });
           captureIssueEvent({
-            eventName: "Issue updated",
+            eventName: ISSUE_UPDATED,
             payload: { ...response, state: "SUCCESS", element: "Issue peek-overview" },
             updates: {
               changed_property: "cycle_id",
@@ -210,7 +211,7 @@ export const IssuePeekOverview: FC<IIssuePeekOverview> = observer((props) => {
             message: "Cycle remove from issue failed",
           });
           captureIssueEvent({
-            eventName: "Issue updated",
+            eventName: ISSUE_UPDATED,
             payload: { state: "FAILED", element: "Issue peek-overview" },
             updates: {
               changed_property: "cycle_id",
@@ -229,7 +230,7 @@ export const IssuePeekOverview: FC<IIssuePeekOverview> = observer((props) => {
             message: "Module added to issue successfully",
           });
           captureIssueEvent({
-            eventName: "Issue updated",
+            eventName: ISSUE_UPDATED,
             payload: { ...response, state: "SUCCESS", element: "Issue peek-overview" },
             updates: {
               changed_property: "module_id",
@@ -239,7 +240,7 @@ export const IssuePeekOverview: FC<IIssuePeekOverview> = observer((props) => {
           });
         } catch (error) {
           captureIssueEvent({
-            eventName: "Issue updated",
+            eventName: ISSUE_UPDATED,
             payload: { id: issueId, state: "FAILED", element: "Issue peek-overview" },
             updates: {
               changed_property: "module_id",
@@ -263,7 +264,7 @@ export const IssuePeekOverview: FC<IIssuePeekOverview> = observer((props) => {
             message: "Module removed from issue successfully",
           });
           captureIssueEvent({
-            eventName: "Issue updated",
+            eventName: ISSUE_UPDATED,
             payload: { id: issueId, state: "SUCCESS", element: "Issue peek-overview" },
             updates: {
               changed_property: "module_id",
@@ -273,7 +274,7 @@ export const IssuePeekOverview: FC<IIssuePeekOverview> = observer((props) => {
           });
         } catch (error) {
           captureIssueEvent({
-            eventName: "Issue updated",
+            eventName: ISSUE_UPDATED,
             payload: { id: issueId, state: "FAILED", element: "Issue peek-overview" },
             updates: {
               changed_property: "module_id",
diff --git a/web/components/modules/delete-module-modal.tsx b/web/components/modules/delete-module-modal.tsx
index 2727b4e3b..636a828ae 100644
--- a/web/components/modules/delete-module-modal.tsx
+++ b/web/components/modules/delete-module-modal.tsx
@@ -11,6 +11,8 @@ import { Button } from "@plane/ui";
 import { AlertTriangle } from "lucide-react";
 // types
 import type { IModule } from "@plane/types";
+// constants
+import { MODULE_DELETED } from "constants/event-tracker";
 
 type Props = {
   data: IModule;
@@ -51,7 +53,7 @@ export const DeleteModuleModal: React.FC<Props> = observer((props) => {
           message: "Module deleted successfully.",
         });
         captureModuleEvent({
-          eventName: "Module deleted",
+          eventName: MODULE_DELETED,
           payload: { ...data, state: "SUCCESS" },
         });
       })
@@ -62,7 +64,7 @@ export const DeleteModuleModal: React.FC<Props> = observer((props) => {
           message: "Module could not be deleted. Please try again.",
         });
         captureModuleEvent({
-          eventName: "Module deleted",
+          eventName: MODULE_DELETED,
           payload: { ...data, state: "FAILED" },
         });
       })
diff --git a/web/components/modules/form.tsx b/web/components/modules/form.tsx
index be0792caa..8fa63e826 100644
--- a/web/components/modules/form.tsx
+++ b/web/components/modules/form.tsx
@@ -11,7 +11,7 @@ import { renderFormattedPayloadDate } from "helpers/date-time.helper";
 import { IModule } from "@plane/types";
 
 type Props = {
-  handleFormSubmit: (values: Partial<IModule>) => Promise<void>;
+  handleFormSubmit: (values: Partial<IModule>, dirtyFields: any) => Promise<void>;
   handleClose: () => void;
   status: boolean;
   projectId: string;
@@ -36,7 +36,7 @@ export const ModuleForm: React.FC<Props> = ({
   data,
 }) => {
   const {
-    formState: { errors, isSubmitting },
+    formState: { errors, isSubmitting, dirtyFields },
     handleSubmit,
     watch,
     control,
@@ -53,7 +53,7 @@ export const ModuleForm: React.FC<Props> = ({
   });
 
   const handleCreateUpdateModule = async (formData: Partial<IModule>) => {
-    await handleFormSubmit(formData);
+    await handleFormSubmit(formData, dirtyFields);
 
     reset({
       ...defaultValues,
diff --git a/web/components/modules/modal.tsx b/web/components/modules/modal.tsx
index 0852434c3..7990386df 100644
--- a/web/components/modules/modal.tsx
+++ b/web/components/modules/modal.tsx
@@ -9,6 +9,8 @@ import useToast from "hooks/use-toast";
 import { ModuleForm } from "components/modules";
 // types
 import type { IModule } from "@plane/types";
+// constants
+import { MODULE_CREATED, MODULE_UPDATED } from "constants/event-tracker";
 
 type Props = {
   isOpen: boolean;
@@ -59,7 +61,7 @@ export const CreateUpdateModuleModal: React.FC<Props> = observer((props) => {
           message: "Module created successfully.",
         });
         captureModuleEvent({
-          eventName: "Module created",
+          eventName: MODULE_CREATED,
           payload: { ...res, state: "SUCCESS" },
         });
       })
@@ -70,13 +72,13 @@ export const CreateUpdateModuleModal: React.FC<Props> = observer((props) => {
           message: err.detail ?? "Module could not be created. Please try again.",
         });
         captureModuleEvent({
-          eventName: "Module created",
+          eventName: MODULE_CREATED,
           payload: { ...data, state: "FAILED" },
         });
       });
   };
 
-  const handleUpdateModule = async (payload: Partial<IModule>) => {
+  const handleUpdateModule = async (payload: Partial<IModule>, dirtyFields: any) => {
     if (!workspaceSlug || !projectId || !data) return;
 
     const selectedProjectId = payload.project ?? projectId.toString();
@@ -90,8 +92,8 @@ export const CreateUpdateModuleModal: React.FC<Props> = observer((props) => {
           message: "Module updated successfully.",
         });
         captureModuleEvent({
-          eventName: "Module updated",
-          payload: { ...res, state: "SUCCESS" },
+          eventName: MODULE_UPDATED,
+          payload: { ...res, changed_properties: Object.keys(dirtyFields), state: "SUCCESS" },
         });
       })
       .catch((err) => {
@@ -101,20 +103,20 @@ export const CreateUpdateModuleModal: React.FC<Props> = observer((props) => {
           message: err.detail ?? "Module could not be updated. Please try again.",
         });
         captureModuleEvent({
-          eventName: "Module updated",
+          eventName: MODULE_UPDATED,
           payload: { ...data, state: "FAILED" },
         });
       });
   };
 
-  const handleFormSubmit = async (formData: Partial<IModule>) => {
+  const handleFormSubmit = async (formData: Partial<IModule>, dirtyFields: any) => {
     if (!workspaceSlug || !projectId) return;
 
     const payload: Partial<IModule> = {
       ...formData,
     };
     if (!data) await handleCreateModule(payload);
-    else await handleUpdateModule(payload);
+    else await handleUpdateModule(payload, dirtyFields);
   };
 
   useEffect(() => {
diff --git a/web/components/modules/module-card-item.tsx b/web/components/modules/module-card-item.tsx
index 3d83be010..219942550 100644
--- a/web/components/modules/module-card-item.tsx
+++ b/web/components/modules/module-card-item.tsx
@@ -16,6 +16,7 @@ import { renderFormattedDate } from "helpers/date-time.helper";
 // constants
 import { MODULE_STATUS } from "constants/module";
 import { EUserProjectRoles } from "constants/project";
+import { MODULE_FAVORITED, MODULE_UNFAVORITED } from "constants/event-tracker";
 
 type Props = {
   moduleId: string;
@@ -36,7 +37,7 @@ export const ModuleCardItem: React.FC<Props> = observer((props) => {
     membership: { currentProjectRole },
   } = useUser();
   const { getModuleById, addModuleToFavorites, removeModuleFromFavorites } = useModule();
-  const { setTrackElement } = useEventTracker();
+  const { setTrackElement, captureEvent } = useEventTracker();
   // derived values
   const moduleDetails = getModuleById(moduleId);
   const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER;
@@ -46,13 +47,21 @@ export const ModuleCardItem: React.FC<Props> = observer((props) => {
     e.preventDefault();
     if (!workspaceSlug || !projectId) return;
 
-    addModuleToFavorites(workspaceSlug.toString(), projectId.toString(), moduleId).catch(() => {
-      setToastAlert({
-        type: "error",
-        title: "Error!",
-        message: "Couldn't add the module to favorites. Please try again.",
+    addModuleToFavorites(workspaceSlug.toString(), projectId.toString(), moduleId)
+      .then(() => {
+        captureEvent(MODULE_FAVORITED, {
+          module_id: moduleId,
+          element: "Grid layout",
+          state: "SUCCESS",
+        });
+      })
+      .catch(() => {
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Couldn't add the module to favorites. Please try again.",
+        });
       });
-    });
   };
 
   const handleRemoveFromFavorites = (e: React.MouseEvent<HTMLButtonElement>) => {
@@ -60,13 +69,21 @@ export const ModuleCardItem: React.FC<Props> = observer((props) => {
     e.preventDefault();
     if (!workspaceSlug || !projectId) return;
 
-    removeModuleFromFavorites(workspaceSlug.toString(), projectId.toString(), moduleId).catch(() => {
-      setToastAlert({
-        type: "error",
-        title: "Error!",
-        message: "Couldn't remove the module from favorites. Please try again.",
+    removeModuleFromFavorites(workspaceSlug.toString(), projectId.toString(), moduleId)
+      .then(() => {
+        captureEvent(MODULE_UNFAVORITED, {
+          module_id: moduleId,
+          element: "Grid layout",
+          state: "SUCCESS",
+        });
+      })
+      .catch(() => {
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Couldn't remove the module from favorites. Please try again.",
+        });
       });
-    });
   };
 
   const handleCopyText = (e: React.MouseEvent<HTMLButtonElement>) => {
@@ -84,14 +101,14 @@ export const ModuleCardItem: React.FC<Props> = observer((props) => {
   const handleEditModule = (e: React.MouseEvent<HTMLButtonElement>) => {
     e.preventDefault();
     e.stopPropagation();
-    setTrackElement("Modules page board layout");
+    setTrackElement("Modules page grid layout");
     setEditModal(true);
   };
 
   const handleDeleteModule = (e: React.MouseEvent<HTMLButtonElement>) => {
     e.preventDefault();
     e.stopPropagation();
-    setTrackElement("Modules page board layout");
+    setTrackElement("Modules page grid layout");
     setDeleteModal(true);
   };
 
diff --git a/web/components/modules/module-list-item.tsx b/web/components/modules/module-list-item.tsx
index 7232c8815..23e3e5ed4 100644
--- a/web/components/modules/module-list-item.tsx
+++ b/web/components/modules/module-list-item.tsx
@@ -16,6 +16,7 @@ import { renderFormattedDate } from "helpers/date-time.helper";
 // constants
 import { MODULE_STATUS } from "constants/module";
 import { EUserProjectRoles } from "constants/project";
+import { MODULE_FAVORITED, MODULE_UNFAVORITED } from "constants/event-tracker";
 
 type Props = {
   moduleId: string;
@@ -36,7 +37,7 @@ export const ModuleListItem: React.FC<Props> = observer((props) => {
     membership: { currentProjectRole },
   } = useUser();
   const { getModuleById, addModuleToFavorites, removeModuleFromFavorites } = useModule();
-  const { setTrackElement } = useEventTracker();
+  const { setTrackElement, captureEvent } = useEventTracker();
   // derived values
   const moduleDetails = getModuleById(moduleId);
   const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER;
@@ -46,13 +47,21 @@ export const ModuleListItem: React.FC<Props> = observer((props) => {
     e.preventDefault();
     if (!workspaceSlug || !projectId) return;
 
-    addModuleToFavorites(workspaceSlug.toString(), projectId.toString(), moduleId).catch(() => {
-      setToastAlert({
-        type: "error",
-        title: "Error!",
-        message: "Couldn't add the module to favorites. Please try again.",
+    addModuleToFavorites(workspaceSlug.toString(), projectId.toString(), moduleId)
+      .then(() => {
+        captureEvent(MODULE_FAVORITED, {
+          module_id: moduleId,
+          element: "Grid layout",
+          state: "SUCCESS",
+        });
+      })
+      .catch(() => {
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Couldn't add the module to favorites. Please try again.",
+        });
       });
-    });
   };
 
   const handleRemoveFromFavorites = (e: React.MouseEvent<HTMLButtonElement>) => {
@@ -60,13 +69,21 @@ export const ModuleListItem: React.FC<Props> = observer((props) => {
     e.preventDefault();
     if (!workspaceSlug || !projectId) return;
 
-    removeModuleFromFavorites(workspaceSlug.toString(), projectId.toString(), moduleId).catch(() => {
-      setToastAlert({
-        type: "error",
-        title: "Error!",
-        message: "Couldn't remove the module from favorites. Please try again.",
+    removeModuleFromFavorites(workspaceSlug.toString(), projectId.toString(), moduleId)
+      .then(() => {
+        captureEvent(MODULE_UNFAVORITED, {
+          module_id: moduleId,
+          element: "Grid layout",
+          state: "SUCCESS",
+        });
+      })
+      .catch(() => {
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Couldn't remove the module from favorites. Please try again.",
+        });
       });
-    });
   };
 
   const handleCopyText = (e: React.MouseEvent<HTMLButtonElement>) => {
diff --git a/web/components/modules/sidebar.tsx b/web/components/modules/sidebar.tsx
index 947885f9a..6b7ac1b3a 100644
--- a/web/components/modules/sidebar.tsx
+++ b/web/components/modules/sidebar.tsx
@@ -34,6 +34,7 @@ import { ILinkDetails, IModule, ModuleLink } from "@plane/types";
 // constant
 import { MODULE_STATUS } from "constants/module";
 import { EUserProjectRoles } from "constants/project";
+import { MODULE_LINK_CREATED, MODULE_LINK_DELETED, MODULE_LINK_UPDATED, MODULE_UPDATED } from "constants/event-tracker";
 
 const defaultValues: Partial<IModule> = {
   lead: "",
@@ -66,7 +67,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
     membership: { currentProjectRole },
   } = useUser();
   const { getModuleById, updateModuleDetails, createModuleLink, updateModuleLink, deleteModuleLink } = useModule();
-  const { setTrackElement } = useEventTracker();
+  const { setTrackElement, captureModuleEvent, captureEvent } = useEventTracker();
   const moduleDetails = getModuleById(moduleId);
 
   const { setToastAlert } = useToast();
@@ -77,7 +78,19 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
 
   const submitChanges = (data: Partial<IModule>) => {
     if (!workspaceSlug || !projectId || !moduleId) return;
-    updateModuleDetails(workspaceSlug.toString(), projectId.toString(), moduleId.toString(), data);
+    updateModuleDetails(workspaceSlug.toString(), projectId.toString(), moduleId.toString(), data)
+      .then((res) => {
+        captureModuleEvent({
+          eventName: MODULE_UPDATED,
+          payload: { ...res, changed_properties: Object.keys(data)[0], element: "Right side-peek", state: "SUCCESS" },
+        });
+      })
+      .catch((_) => {
+        captureModuleEvent({
+          eventName: MODULE_UPDATED,
+          payload: { ...data, state: "FAILED" },
+        });
+      });
   };
 
   const handleCreateLink = async (formData: ModuleLink) => {
@@ -87,6 +100,10 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
 
     createModuleLink(workspaceSlug.toString(), projectId.toString(), moduleId.toString(), payload)
       .then(() => {
+        captureEvent(MODULE_LINK_CREATED, {
+          module_id: moduleId,
+          state: "SUCCESS",
+        });
         setToastAlert({
           type: "success",
           title: "Module link created",
@@ -109,6 +126,10 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
 
     updateModuleLink(workspaceSlug.toString(), projectId.toString(), moduleId.toString(), linkId, payload)
       .then(() => {
+        captureEvent(MODULE_LINK_UPDATED, {
+          module_id: moduleId,
+          state: "SUCCESS",
+        });
         setToastAlert({
           type: "success",
           title: "Module link updated",
@@ -129,6 +150,10 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
 
     deleteModuleLink(workspaceSlug.toString(), projectId.toString(), moduleId.toString(), linkId)
       .then(() => {
+        captureEvent(MODULE_LINK_DELETED, {
+          module_id: moduleId,
+          state: "SUCCESS",
+        });
         setToastAlert({
           type: "success",
           title: "Module link deleted",
@@ -187,8 +212,8 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
 
     if (watch("start_date") && watch("target_date") && watch("start_date") !== "" && watch("start_date") !== "") {
       submitChanges({
-        start_date: renderFormattedPayloadDate(`${watch("start_date")}`),
         target_date: renderFormattedPayloadDate(`${watch("target_date")}`),
+        start_date: renderFormattedPayloadDate(`${watch("start_date")}`),
       });
       setToastAlert({
         type: "success",
@@ -294,7 +319,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
             <Controller
               control={control}
               name="status"
-              render={({ field: { value } }) => (
+              render={({ field: { value, onChange } }) => (
                 <CustomSelect
                   customButton={
                     <span
diff --git a/web/components/notifications/notification-card.tsx b/web/components/notifications/notification-card.tsx
index 7a372c5d8..4332486c0 100644
--- a/web/components/notifications/notification-card.tsx
+++ b/web/components/notifications/notification-card.tsx
@@ -5,6 +5,7 @@ import { ArchiveRestore, Clock, MessageSquare, User2 } from "lucide-react";
 import Link from "next/link";
 // hooks
 import useToast from "hooks/use-toast";
+import { useEventTracker } from "hooks/store";
 // icons
 import { ArchiveIcon, CustomMenu, Tooltip } from "@plane/ui";
 // constants
@@ -13,9 +14,12 @@ import { snoozeOptions } from "constants/notification";
 import { replaceUnderscoreIfSnakeCase, truncateText, stripAndTruncateHTML } from "helpers/string.helper";
 import { calculateTimeAgo, renderFormattedTime, renderFormattedDate } from "helpers/date-time.helper";
 // type
-import type { IUserNotification } from "@plane/types";
+import type { IUserNotification, NotificationType } from "@plane/types";
+// constants
+import { ISSUE_OPENED, NOTIFICATIONS_READ, NOTIFICATION_ARCHIVED, NOTIFICATION_SNOOZED } from "constants/event-tracker";
 
 type NotificationCardProps = {
+  selectedTab: NotificationType;
   notification: IUserNotification;
   isSnoozedTabOpen: boolean;
   closePopover: () => void;
@@ -28,6 +32,7 @@ type NotificationCardProps = {
 
 export const NotificationCard: React.FC<NotificationCardProps> = (props) => {
   const {
+    selectedTab,
     notification,
     isSnoozedTabOpen,
     closePopover,
@@ -37,6 +42,8 @@ export const NotificationCard: React.FC<NotificationCardProps> = (props) => {
     setSelectedNotificationForSnooze,
     markSnoozeNotification,
   } = props;
+  // store hooks
+  const { captureEvent } = useEventTracker();
 
   const router = useRouter();
   const { workspaceSlug } = router.query;
@@ -49,6 +56,10 @@ export const NotificationCard: React.FC<NotificationCardProps> = (props) => {
     <Link
       onClick={() => {
         markNotificationReadStatus(notification.id);
+        captureEvent(ISSUE_OPENED, {
+          issue_id: notification.data.issue.id,
+          element: "notification",
+        });
         closePopover();
       }}
       href={`/${workspaceSlug}/projects/${notification.project}/${
@@ -164,6 +175,11 @@ export const NotificationCard: React.FC<NotificationCardProps> = (props) => {
             icon: <MessageSquare className="h-3.5 w-3.5 text-custom-text-300" />,
             onClick: () => {
               markNotificationReadStatusToggle(notification.id).then(() => {
+                captureEvent(NOTIFICATIONS_READ, {
+                  issue_id: notification.data.issue.id,
+                  tab: selectedTab,
+                  state: "SUCCESS",
+                });
                 setToastAlert({
                   title: notification.read_at ? "Notification marked as read" : "Notification marked as unread",
                   type: "success",
@@ -181,6 +197,11 @@ export const NotificationCard: React.FC<NotificationCardProps> = (props) => {
             ),
             onClick: () => {
               markNotificationArchivedStatus(notification.id).then(() => {
+                captureEvent(NOTIFICATION_ARCHIVED, {
+                  issue_id: notification.data.issue.id,
+                  tab: selectedTab,
+                  state: "SUCCESS",
+                });
                 setToastAlert({
                   title: notification.archived_at ? "Notification un-archived" : "Notification archived",
                   type: "success",
@@ -195,7 +216,6 @@ export const NotificationCard: React.FC<NotificationCardProps> = (props) => {
               onClick={(e) => {
                 e.stopPropagation();
                 e.preventDefault();
-
                 item.onClick();
               }}
               key={item.id}
@@ -228,6 +248,11 @@ export const NotificationCard: React.FC<NotificationCardProps> = (props) => {
                   }
 
                   markSnoozeNotification(notification.id, item.value).then(() => {
+                    captureEvent(NOTIFICATION_SNOOZED, {
+                      issue_id: notification.data.issue.id,
+                      tab: selectedTab,
+                      state: "SUCCESS",
+                    });
                     setToastAlert({
                       title: `Notification snoozed till ${renderFormattedDate(item.value)}`,
                       type: "success",
diff --git a/web/components/notifications/notification-header.tsx b/web/components/notifications/notification-header.tsx
index 39bf0e8fb..cf3a9fd36 100644
--- a/web/components/notifications/notification-header.tsx
+++ b/web/components/notifications/notification-header.tsx
@@ -2,10 +2,19 @@ import React from "react";
 import { ArrowLeft, CheckCheck, Clock, ListFilter, MoreVertical, RefreshCw, X } from "lucide-react";
 // ui
 import { ArchiveIcon, CustomMenu, Tooltip } from "@plane/ui";
+// hooks
+import { useEventTracker } from "hooks/store";
 // helpers
 import { getNumberCount } from "helpers/string.helper";
 // type
 import type { NotificationType, NotificationCount } from "@plane/types";
+// constants
+import {
+  ARCHIVED_NOTIFICATIONS,
+  NOTIFICATIONS_READ,
+  SNOOZED_NOTIFICATIONS,
+  UNREAD_NOTIFICATIONS,
+} from "constants/event-tracker";
 
 type NotificationHeaderProps = {
   notificationCount?: NotificationCount | null;
@@ -39,6 +48,8 @@ export const NotificationHeader: React.FC<NotificationHeaderProps> = (props) =>
     setSelectedTab,
     markAllNotificationsAsRead,
   } = props;
+  // store hooks
+  const { captureEvent } = useEventTracker();
 
   const notificationTabs: Array<{
     label: string;
@@ -84,6 +95,7 @@ export const NotificationHeader: React.FC<NotificationHeaderProps> = (props) =>
                 setSnoozed(false);
                 setArchived(false);
                 setReadNotification((prev) => !prev);
+                captureEvent(UNREAD_NOTIFICATIONS);
               }}
             >
               <ListFilter className="h-3.5 w-3.5" />
@@ -97,7 +109,12 @@ export const NotificationHeader: React.FC<NotificationHeaderProps> = (props) =>
             }
             closeOnSelect
           >
-            <CustomMenu.MenuItem onClick={markAllNotificationsAsRead}>
+            <CustomMenu.MenuItem
+              onClick={() => {
+                markAllNotificationsAsRead();
+                captureEvent(NOTIFICATIONS_READ);
+              }}
+            >
               <div className="flex items-center gap-2">
                 <CheckCheck className="h-3.5 w-3.5" />
                 Mark all as read
@@ -108,6 +125,7 @@ export const NotificationHeader: React.FC<NotificationHeaderProps> = (props) =>
                 setArchived(false);
                 setReadNotification(false);
                 setSnoozed((prev) => !prev);
+                captureEvent(SNOOZED_NOTIFICATIONS);
               }}
             >
               <div className="flex items-center gap-2">
@@ -120,6 +138,7 @@ export const NotificationHeader: React.FC<NotificationHeaderProps> = (props) =>
                 setSnoozed(false);
                 setReadNotification(false);
                 setArchived((prev) => !prev);
+                captureEvent(ARCHIVED_NOTIFICATIONS);
               }}
             >
               <div className="flex items-center gap-2">
diff --git a/web/components/notifications/notification-popover.tsx b/web/components/notifications/notification-popover.tsx
index 4b55ea4cb..2b0689c34 100644
--- a/web/components/notifications/notification-popover.tsx
+++ b/web/components/notifications/notification-popover.tsx
@@ -3,7 +3,7 @@ import { Popover, Transition } from "@headlessui/react";
 import { Bell } from "lucide-react";
 import { observer } from "mobx-react-lite";
 // hooks
-import { useApplication } from "hooks/store";
+import { useApplication, useEventTracker } from "hooks/store";
 import useUserNotification from "hooks/use-user-notifications";
 // components
 import { EmptyState } from "components/common";
@@ -13,10 +13,13 @@ import { Loader, Tooltip } from "@plane/ui";
 import emptyNotification from "public/empty-state/notification.svg";
 // helpers
 import { getNumberCount } from "helpers/string.helper";
+// constants
+import { SIDEBAR_CLICKED } from "constants/event-tracker";
 
 export const NotificationPopover = observer(() => {
   // store hooks
   const { theme: themeStore } = useApplication();
+  const { captureEvent } = useEventTracker();
 
   const {
     notifications,
@@ -66,6 +69,11 @@ export const NotificationPopover = observer(() => {
             <>
               <Tooltip tooltipContent="Notifications" position="right" className="ml-2" disabled={!isSidebarCollapsed}>
                 <Popover.Button
+                  onClick={() =>
+                    captureEvent(SIDEBAR_CLICKED, {
+                      destination: "notifications",
+                    })
+                  }
                   className={`group relative flex w-full items-center gap-2.5 rounded-md px-3 py-2 text-sm font-medium outline-none ${
                     isActive
                       ? "bg-custom-primary-100/10 text-custom-primary-100"
@@ -120,6 +128,7 @@ export const NotificationPopover = observer(() => {
                               key={notification.id}
                               isSnoozedTabOpen={snoozed}
                               closePopover={closePopover}
+                              selectedTab={selectedTab}
                               notification={notification}
                               markNotificationArchivedStatus={markNotificationArchivedStatus}
                               markNotificationReadStatus={markNotificationAsRead}
diff --git a/web/components/onboarding/invitations.tsx b/web/components/onboarding/invitations.tsx
index 3315ff035..c176ed580 100644
--- a/web/components/onboarding/invitations.tsx
+++ b/web/components/onboarding/invitations.tsx
@@ -11,11 +11,13 @@ import { WorkspaceService } from "services/workspace.service";
 // constants
 import { USER_WORKSPACES, USER_WORKSPACE_INVITATIONS } from "constants/fetch-keys";
 import { ROLE } from "constants/workspace";
+import { MEMBER_ACCEPTED } from "constants/event-tracker";
 // types
 import { IWorkspaceMemberInvitation } from "@plane/types";
 // icons
 import { CheckCircle2, Search } from "lucide-react";
 import {} from "hooks/store/use-event-tracker";
+import { getUserRole } from "helpers/user.helper";
 
 type Props = {
   handleNextStep: () => void;
@@ -58,11 +60,19 @@ export const Invitations: React.FC<Props> = (props) => {
     if (invitationsRespond.length <= 0) return;
 
     setIsJoiningWorkspaces(true);
+    const invitation = invitations?.find((invitation) => invitation.id === invitationsRespond[0]);
 
     await workspaceService
       .joinWorkspaces({ invitations: invitationsRespond })
-      .then(async (res) => {
-        captureEvent("Member accepted", { ...res, state: "SUCCESS", accepted_from: "App" });
+      .then(async () => {
+        captureEvent(MEMBER_ACCEPTED, {
+          member_id: invitation?.id,
+          role: getUserRole(invitation?.role!),
+          project_id: undefined,
+          accepted_from: "App",
+          state: "SUCCESS",
+          element: "Workspace invitations page",
+        });
         await fetchWorkspaces();
         await mutate(USER_WORKSPACES);
         await updateLastWorkspace();
@@ -71,7 +81,14 @@ export const Invitations: React.FC<Props> = (props) => {
       })
       .catch((error) => {
         console.error(error);
-        captureEvent("Member accepted", { state: "FAILED", accepted_from: "App" });
+        captureEvent(MEMBER_ACCEPTED, {
+          member_id: invitation?.id,
+          role: getUserRole(invitation?.role!),
+          project_id: undefined,
+          accepted_from: "App",
+          state: "FAILED",
+          element: "Workspace invitations page",
+        });
       })
       .finally(() => setIsJoiningWorkspaces(false));
   };
diff --git a/web/components/onboarding/invite-members.tsx b/web/components/onboarding/invite-members.tsx
index dc6e2db96..561a428d6 100644
--- a/web/components/onboarding/invite-members.tsx
+++ b/web/components/onboarding/invite-members.tsx
@@ -18,6 +18,7 @@ import { Check, ChevronDown, Plus, XCircle } from "lucide-react";
 import { WorkspaceService } from "services/workspace.service";
 // hooks
 import useToast from "hooks/use-toast";
+import { useEventTracker } from "hooks/store";
 // ui
 import { Button, Input } from "@plane/ui";
 // components
@@ -28,6 +29,9 @@ import useDynamicDropdownPosition from "hooks/use-dynamic-dropdown";
 import { IUser, IWorkspace, TOnboardingSteps } from "@plane/types";
 // constants
 import { EUserWorkspaceRoles, ROLE } from "constants/workspace";
+import { MEMBER_INVITED } from "constants/event-tracker";
+// helpers
+import { getUserRole } from "helpers/user.helper";
 // assets
 import user1 from "public/users/user-1.png";
 import user2 from "public/users/user-2.png";
@@ -267,6 +271,8 @@ export const InviteMembers: React.FC<Props> = (props) => {
 
   const { setToastAlert } = useToast();
   const { resolvedTheme } = useTheme();
+  // store hooks
+  const { captureEvent } = useEventTracker();
 
   const {
     control,
@@ -305,6 +311,17 @@ export const InviteMembers: React.FC<Props> = (props) => {
         })),
       })
       .then(async () => {
+        captureEvent(MEMBER_INVITED, {
+          emails: [
+            ...payload.emails.map((email) => ({
+              email: email.email,
+              role: getUserRole(email.role),
+            })),
+          ],
+          project_id: undefined,
+          state: "SUCCESS",
+          element: "Onboarding",
+        });
         setToastAlert({
           type: "success",
           title: "Success!",
@@ -313,13 +330,18 @@ export const InviteMembers: React.FC<Props> = (props) => {
 
         await nextStep();
       })
-      .catch((err) =>
+      .catch((err) => {
+        captureEvent(MEMBER_INVITED, {
+          project_id: undefined,
+          state: "FAILED",
+          element: "Onboarding",
+        });
         setToastAlert({
           type: "error",
           title: "Error!",
           message: err?.error,
-        })
-      );
+        });
+      });
   };
 
   const appendField = () => {
diff --git a/web/components/onboarding/tour/root.tsx b/web/components/onboarding/tour/root.tsx
index 6e1de15dd..c09a2a94c 100644
--- a/web/components/onboarding/tour/root.tsx
+++ b/web/components/onboarding/tour/root.tsx
@@ -15,6 +15,8 @@ import CyclesTour from "public/onboarding/cycles.webp";
 import ModulesTour from "public/onboarding/modules.webp";
 import ViewsTour from "public/onboarding/views.webp";
 import PagesTour from "public/onboarding/pages.webp";
+// constants
+import { PRODUCT_TOUR_SKIPPED, PRODUCT_TOUR_STARTED } from "constants/event-tracker";
 
 type Props = {
   onComplete: () => void;
@@ -79,7 +81,7 @@ export const TourRoot: React.FC<Props> = observer((props) => {
   const [step, setStep] = useState<TTourSteps>("welcome");
   // store hooks
   const { commandPalette: commandPaletteStore } = useApplication();
-  const { setTrackElement } = useEventTracker();
+  const { setTrackElement, captureEvent } = useEventTracker();
   const { currentUser } = useUser();
 
   const currentStepIndex = TOUR_STEPS.findIndex((tourStep) => tourStep.key === step);
@@ -103,13 +105,22 @@ export const TourRoot: React.FC<Props> = observer((props) => {
               </p>
               <div className="flex h-full items-end">
                 <div className="mt-8 flex items-center gap-6">
-                  <Button variant="primary" onClick={() => setStep("issues")}>
+                  <Button
+                    variant="primary"
+                    onClick={() => {
+                      captureEvent(PRODUCT_TOUR_STARTED);
+                      setStep("issues");
+                    }}
+                  >
                     Take a Product Tour
                   </Button>
                   <button
                     type="button"
                     className="bg-transparent text-xs font-medium text-custom-primary-100 outline-custom-text-100"
-                    onClick={onComplete}
+                    onClick={() => {
+                      captureEvent(PRODUCT_TOUR_SKIPPED);
+                      onComplete();
+                    }}
                   >
                     No thanks, I will explore it myself
                   </button>
@@ -156,8 +167,8 @@ export const TourRoot: React.FC<Props> = observer((props) => {
                   <Button
                     variant="primary"
                     onClick={() => {
+                      setTrackElement("Product tour");
                       onComplete();
-                      setTrackElement("Onboarding tour");
                       commandPaletteStore.toggleCreateProjectModal(true);
                     }}
                   >
diff --git a/web/components/onboarding/user-details.tsx b/web/components/onboarding/user-details.tsx
index 23d340413..ac4a3c198 100644
--- a/web/components/onboarding/user-details.tsx
+++ b/web/components/onboarding/user-details.tsx
@@ -4,7 +4,7 @@ import { Controller, useForm } from "react-hook-form";
 import { observer } from "mobx-react-lite";
 import { Camera, User2 } from "lucide-react";
 // hooks
-import { useUser, useWorkspace } from "hooks/store";
+import { useEventTracker, useUser, useWorkspace } from "hooks/store";
 // components
 import { Button, Input } from "@plane/ui";
 import { OnboardingSidebar, OnboardingStepIndicator } from "components/onboarding";
@@ -15,6 +15,7 @@ import { IUser } from "@plane/types";
 import { FileService } from "services/file.service";
 // assets
 import IssuesSvg from "public/onboarding/onboarding-issues.webp";
+import { USER_DETAILS } from "constants/event-tracker";
 
 const defaultValues: Partial<IUser> = {
   first_name: "",
@@ -48,6 +49,7 @@ export const UserDetails: React.FC<Props> = observer((props) => {
   // store hooks
   const { updateCurrentUser } = useUser();
   const { workspaces } = useWorkspace();
+  const { captureEvent } = useEventTracker();
   // derived values
   const workspaceName = workspaces ? Object.values(workspaces)?.[0]?.name : "New Workspace";
   // form info
@@ -76,7 +78,21 @@ export const UserDetails: React.FC<Props> = observer((props) => {
       },
     };
 
-    await updateCurrentUser(payload);
+    await updateCurrentUser(payload)
+      .then(() => {
+        captureEvent(USER_DETAILS, {
+          use_case: formData.use_case,
+          state: "SUCCESS",
+          element: "Onboarding",
+        });
+      })
+      .catch(() => {
+        captureEvent(USER_DETAILS, {
+          use_case: formData.use_case,
+          state: "FAILED",
+          element: "Onboarding",
+        });
+      });
   };
   const handleDelete = (url: string | null | undefined) => {
     if (!url) return;
diff --git a/web/components/onboarding/workspace.tsx b/web/components/onboarding/workspace.tsx
index c08e8f243..ad9342e3a 100644
--- a/web/components/onboarding/workspace.tsx
+++ b/web/components/onboarding/workspace.tsx
@@ -5,12 +5,13 @@ import { Button, Input } from "@plane/ui";
 // types
 import { IUser, IWorkspace, TOnboardingSteps } from "@plane/types";
 // hooks
-import { useUser, useWorkspace } from "hooks/store";
+import { useEventTracker, useUser, useWorkspace } from "hooks/store";
 import useToast from "hooks/use-toast";
 // services
 import { WorkspaceService } from "services/workspace.service";
 // constants
 import { RESTRICTED_URLS } from "constants/workspace";
+import { WORKSPACE_CREATED } from "constants/event-tracker";
 
 type Props = {
   stepChange: (steps: Partial<TOnboardingSteps>) => Promise<void>;
@@ -33,6 +34,7 @@ export const Workspace: React.FC<Props> = (props) => {
   // store hooks
   const { updateCurrentUser } = useUser();
   const { createWorkspace, fetchWorkspaces, workspaces } = useWorkspace();
+  const { captureWorkspaceEvent } = useEventTracker();
   // toast alert
   const { setToastAlert } = useToast();
 
@@ -46,31 +48,48 @@ export const Workspace: React.FC<Props> = (props) => {
           setSlugError(false);
 
           await createWorkspace(formData)
-            .then(async () => {
+            .then(async (res) => {
               setToastAlert({
                 type: "success",
                 title: "Success!",
                 message: "Workspace created successfully.",
               });
+              captureWorkspaceEvent({
+                eventName: WORKSPACE_CREATED,
+                payload: {
+                  ...res,
+                  state: "SUCCESS",
+                  first_time: true,
+                  element: "Onboarding",
+                },
+              });
               await fetchWorkspaces();
               await completeStep();
             })
-            .catch(() =>
+            .catch(() => {
+              captureWorkspaceEvent({
+                eventName: WORKSPACE_CREATED,
+                payload: {
+                  state: "FAILED",
+                  first_time: true,
+                  element: "Onboarding",
+                },
+              });
               setToastAlert({
                 type: "error",
                 title: "Error!",
                 message: "Workspace could not be created. Please try again.",
-              })
-            );
+              });
+            });
         } else setSlugError(true);
       })
-      .catch(() => {
+      .catch(() =>
         setToastAlert({
           type: "error",
           title: "Error!",
           message: "Some error occurred while creating workspace. Please try again.",
-        });
-      });
+        })
+      );
   };
 
   const completeStep = async () => {
diff --git a/web/components/page-views/workspace-dashboard.tsx b/web/components/page-views/workspace-dashboard.tsx
index 93756d22a..8f8622c18 100644
--- a/web/components/page-views/workspace-dashboard.tsx
+++ b/web/components/page-views/workspace-dashboard.tsx
@@ -13,6 +13,7 @@ import { EmptyState, getEmptyStateImagePath } from "components/empty-state";
 import { Spinner } from "@plane/ui";
 // constants
 import { EUserWorkspaceRoles } from "constants/workspace";
+import { PRODUCT_TOUR_COMPLETED } from "constants/event-tracker";
 
 export const WorkspaceDashboardView = observer(() => {
   // theme
@@ -37,9 +38,8 @@ export const WorkspaceDashboardView = observer(() => {
   const handleTourCompleted = () => {
     updateTourCompleted()
       .then(() => {
-        captureEvent("User tour complete", {
+        captureEvent(PRODUCT_TOUR_COMPLETED, {
           user_id: currentUser?.id,
-          email: currentUser?.email,
           state: "SUCCESS",
         });
       })
@@ -84,7 +84,7 @@ export const WorkspaceDashboardView = observer(() => {
               primaryButton={{
                 text: "Build your first project",
                 onClick: () => {
-                  setTrackElement("Dashboard");
+                  setTrackElement("Dashboard empty state");
                   toggleCreateProjectModal(true);
                 },
               }}
diff --git a/web/components/pages/create-update-page-modal.tsx b/web/components/pages/create-update-page-modal.tsx
index b13f68fa4..31cee45b3 100644
--- a/web/components/pages/create-update-page-modal.tsx
+++ b/web/components/pages/create-update-page-modal.tsx
@@ -3,10 +3,14 @@ import { useRouter } from "next/router";
 import { Dialog, Transition } from "@headlessui/react";
 // components
 import { PageForm } from "./page-form";
+// hooks
+import { useEventTracker } from "hooks/store";
 // types
 import { IPage } from "@plane/types";
 import { useProjectPages } from "hooks/store/use-project-page";
 import { IPageStore } from "store/page.store";
+// constants
+import { PAGE_CREATED, PAGE_UPDATED } from "constants/event-tracker";
 
 type Props = {
   // data?: IPage | null;
@@ -21,12 +25,30 @@ export const CreateUpdatePageModal: FC<Props> = (props) => {
   // router
   const router = useRouter();
   const { workspaceSlug } = router.query;
-
+  // store hooks
   const { createPage } = useProjectPages();
+  const { capturePageEvent } = useEventTracker();
 
   const createProjectPage = async (payload: IPage) => {
     if (!workspaceSlug) return;
-    await createPage(workspaceSlug.toString(), projectId, payload);
+    await createPage(workspaceSlug.toString(), projectId, payload)
+      .then((res) => {
+        capturePageEvent({
+          eventName: PAGE_CREATED,
+          payload: {
+            ...res,
+            state: "SUCCESS",
+          },
+        });
+      })
+      .catch(() => {
+        capturePageEvent({
+          eventName: PAGE_CREATED,
+          payload: {
+            state: "FAILED",
+          },
+        });
+      });
   };
 
   const handleFormSubmit = async (formData: IPage) => {
@@ -39,6 +61,14 @@ export const CreateUpdatePageModal: FC<Props> = (props) => {
         if (pageStore.access !== formData.access) {
           formData.access === 1 ? await pageStore.makePrivate() : await pageStore.makePublic();
         }
+        capturePageEvent({
+          eventName: PAGE_UPDATED,
+          payload: {
+            ...pageStore,
+            state: "SUCCESS",
+          },
+        });
+        console.log("Page updated successfully", pageStore);
       } else {
         await createProjectPage(formData);
       }
diff --git a/web/components/pages/delete-page-modal.tsx b/web/components/pages/delete-page-modal.tsx
index 736f21359..bba19b31c 100644
--- a/web/components/pages/delete-page-modal.tsx
+++ b/web/components/pages/delete-page-modal.tsx
@@ -4,12 +4,14 @@ import { observer } from "mobx-react-lite";
 import { Dialog, Transition } from "@headlessui/react";
 import { AlertTriangle } from "lucide-react";
 // hooks
-import { usePage } from "hooks/store";
+import { useEventTracker, usePage } from "hooks/store";
 import useToast from "hooks/use-toast";
 // ui
 import { Button } from "@plane/ui";
 // types
 import { useProjectPages } from "hooks/store/use-project-page";
+// constants
+import { PAGE_DELETED } from "constants/event-tracker";
 
 type TConfirmPageDeletionProps = {
   pageId: string;
@@ -27,6 +29,7 @@ export const DeletePageModal: React.FC<TConfirmPageDeletionProps> = observer((pr
   const { workspaceSlug, projectId } = router.query;
   // store hooks
   const { deletePage } = useProjectPages();
+  const { capturePageEvent } = useEventTracker();
   const pageStore = usePage(pageId);
 
   // toast alert
@@ -49,6 +52,13 @@ export const DeletePageModal: React.FC<TConfirmPageDeletionProps> = observer((pr
     // Delete Page will only delete the page from the archive page map, at this point only archived pages can be deleted
     await deletePage(workspaceSlug.toString(), projectId as string, pageId)
       .then(() => {
+        capturePageEvent({
+          eventName: PAGE_DELETED,
+          payload: {
+            ...pageStore,
+            state: "SUCCESS",
+          },
+        });
         handleClose();
         setToastAlert({
           type: "success",
@@ -57,6 +67,13 @@ export const DeletePageModal: React.FC<TConfirmPageDeletionProps> = observer((pr
         });
       })
       .catch(() => {
+        capturePageEvent({
+          eventName: PAGE_DELETED,
+          payload: {
+            ...pageStore,
+            state: "FAILED",
+          },
+        });
         setToastAlert({
           type: "error",
           title: "Error!",
diff --git a/web/components/project/create-project-modal.tsx b/web/components/project/create-project-modal.tsx
index 7d6a0c5e9..db0c284f2 100644
--- a/web/components/project/create-project-modal.tsx
+++ b/web/components/project/create-project-modal.tsx
@@ -18,6 +18,7 @@ import { getRandomEmoji, renderEmoji } from "helpers/emoji.helper";
 import { NETWORK_CHOICES, PROJECT_UNSPLASH_COVERS } from "constants/project";
 // constants
 import { EUserWorkspaceRoles } from "constants/workspace";
+import { PROJECT_CREATED } from "constants/event-tracker";
 
 type Props = {
   isOpen: boolean;
@@ -134,13 +135,8 @@ export const CreateProjectModal: FC<Props> = observer((props) => {
           state: "SUCCESS",
         };
         captureProjectEvent({
-          eventName: "Project created",
+          eventName: PROJECT_CREATED,
           payload: newPayload,
-          group: {
-            isGrouping: true,
-            groupType: "Workspace_metrics",
-            groupId: res.workspace,
-          },
         });
         setToastAlert({
           type: "success",
@@ -160,16 +156,11 @@ export const CreateProjectModal: FC<Props> = observer((props) => {
             message: err.data[key],
           });
           captureProjectEvent({
-            eventName: "Project created",
+            eventName: PROJECT_CREATED,
             payload: {
               ...payload,
               state: "FAILED",
-            },
-            group: {
-              isGrouping: true,
-              groupType: "Workspace_metrics",
-              groupId: currentWorkspace?.id!,
-            },
+            }
           });
         });
       });
diff --git a/web/components/project/delete-project-modal.tsx b/web/components/project/delete-project-modal.tsx
index 7e04a6ebd..791ac3672 100644
--- a/web/components/project/delete-project-modal.tsx
+++ b/web/components/project/delete-project-modal.tsx
@@ -10,6 +10,8 @@ import useToast from "hooks/use-toast";
 import { Button, Input } from "@plane/ui";
 // types
 import type { IProject } from "@plane/types";
+// constants
+import { PROJECT_DELETED } from "constants/event-tracker";
 
 type DeleteProjectModal = {
   isOpen: boolean;
@@ -62,13 +64,8 @@ export const DeleteProjectModal: React.FC<DeleteProjectModal> = (props) => {
 
         handleClose();
         captureProjectEvent({
-          eventName: "Project deleted",
+          eventName: PROJECT_DELETED,
           payload: { ...project, state: "SUCCESS", element: "Project general settings" },
-          group: {
-            isGrouping: true,
-            groupType: "Workspace_metrics",
-            groupId: currentWorkspace?.id!,
-          },
         });
         setToastAlert({
           type: "success",
@@ -78,13 +75,8 @@ export const DeleteProjectModal: React.FC<DeleteProjectModal> = (props) => {
       })
       .catch(() => {
         captureProjectEvent({
-          eventName: "Project deleted",
+          eventName: PROJECT_DELETED,
           payload: { ...project, state: "FAILED", element: "Project general settings" },
-          group: {
-            isGrouping: true,
-            groupType: "Workspace_metrics",
-            groupId: currentWorkspace?.id!,
-          },
         });
         setToastAlert({
           type: "error",
diff --git a/web/components/project/form.tsx b/web/components/project/form.tsx
index f5efa7bc8..f46dee6b9 100644
--- a/web/components/project/form.tsx
+++ b/web/components/project/form.tsx
@@ -18,6 +18,7 @@ import { renderFormattedDate } from "helpers/date-time.helper";
 import { NETWORK_CHOICES } from "constants/project";
 // services
 import { ProjectService } from "services/project";
+import { PROJECT_UPDATED } from "constants/event-tracker";
 
 export interface IProjectDetailsForm {
   project: IProject;
@@ -45,7 +46,7 @@ export const ProjectDetailsForm: FC<IProjectDetailsForm> = (props) => {
     setValue,
     setError,
     reset,
-    formState: { errors },
+    formState: { errors, dirtyFields },
   } = useForm<IProject>({
     defaultValues: {
       ...project,
@@ -77,13 +78,15 @@ export const ProjectDetailsForm: FC<IProjectDetailsForm> = (props) => {
 
     return updateProject(workspaceSlug.toString(), project.id, payload)
       .then((res) => {
+        const changed_properties = Object.keys(dirtyFields);
+        console.log(dirtyFields);
         captureProjectEvent({
-          eventName: "Project updated",
-          payload: { ...res, state: "SUCCESS", element: "Project general settings" },
-          group: {
-            isGrouping: true,
-            groupType: "Workspace_metrics",
-            groupId: res.workspace,
+          eventName: PROJECT_UPDATED,
+          payload: {
+            ...res,
+            changed_properties: changed_properties,
+            state: "SUCCESS",
+            element: "Project general settings",
           },
         });
         setToastAlert({
@@ -94,13 +97,8 @@ export const ProjectDetailsForm: FC<IProjectDetailsForm> = (props) => {
       })
       .catch((error) => {
         captureProjectEvent({
-          eventName: "Project updated",
+          eventName: PROJECT_UPDATED,
           payload: { ...payload, state: "FAILED", element: "Project general settings" },
-          group: {
-            isGrouping: true,
-            groupType: "Workspace_metrics",
-            groupId: currentWorkspace?.id,
-          },
         });
         setToastAlert({
           type: "error",
@@ -153,7 +151,7 @@ export const ProjectDetailsForm: FC<IProjectDetailsForm> = (props) => {
         <div className="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent" />
 
         <img src={watch("cover_image")!} alt={watch("cover_image")!} className="h-44 w-full rounded-md object-cover" />
-        <div className="absolute bottom-4 z-5 flex w-full items-end justify-between gap-3 px-4">
+        <div className="z-5 absolute bottom-4 flex w-full items-end justify-between gap-3 px-4">
           <div className="flex flex-grow gap-3 truncate">
             <div className="flex h-[52px] w-[52px] flex-shrink-0 items-center justify-center rounded-lg bg-custom-background-90">
               <div className="grid h-7 w-7 place-items-center">
diff --git a/web/components/project/leave-project-modal.tsx b/web/components/project/leave-project-modal.tsx
index 941bbbaa6..0827568ce 100644
--- a/web/components/project/leave-project-modal.tsx
+++ b/web/components/project/leave-project-modal.tsx
@@ -11,6 +11,8 @@ import useToast from "hooks/use-toast";
 import { Button, Input } from "@plane/ui";
 // types
 import { IProject } from "@plane/types";
+// constants
+import { PROJECT_MEMBER_LEAVE } from "constants/event-tracker";
 
 type FormData = {
   projectName: string;
@@ -63,8 +65,9 @@ export const LeaveProjectModal: FC<ILeaveProjectModal> = observer((props) => {
             .then(() => {
               handleClose();
               router.push(`/${workspaceSlug}/projects`);
-              captureEvent("Project member leave", {
+              captureEvent(PROJECT_MEMBER_LEAVE, {
                 state: "SUCCESS",
+                element: "Project settings members page",
               });
             })
             .catch(() => {
@@ -73,8 +76,9 @@ export const LeaveProjectModal: FC<ILeaveProjectModal> = observer((props) => {
                 title: "Error!",
                 message: "Something went wrong please try again later.",
               });
-              captureEvent("Project member leave", {
+              captureEvent(PROJECT_MEMBER_LEAVE, {
                 state: "FAILED",
+                element: "Project settings members page",
               });
             });
         } else {
diff --git a/web/components/project/member-list-item.tsx b/web/components/project/member-list-item.tsx
index 175cf9bd4..6a27eccd5 100644
--- a/web/components/project/member-list-item.tsx
+++ b/web/components/project/member-list-item.tsx
@@ -3,7 +3,7 @@ import { useRouter } from "next/router";
 import Link from "next/link";
 import { observer } from "mobx-react-lite";
 // hooks
-import { useMember, useProject, useUser } from "hooks/store";
+import { useEventTracker, useMember, useProject, useUser } from "hooks/store";
 import useToast from "hooks/use-toast";
 // components
 import { ConfirmProjectMemberRemove } from "components/project";
@@ -14,6 +14,7 @@ import { ChevronDown, Dot, XCircle } from "lucide-react";
 // constants
 import { ROLE } from "constants/workspace";
 import { EUserProjectRoles } from "constants/project";
+import { PROJECT_MEMBER_LEAVE } from "constants/event-tracker";
 
 type Props = {
   userId: string;
@@ -35,6 +36,7 @@ export const ProjectMemberListItem: React.FC<Props> = observer((props) => {
   const {
     project: { removeMemberFromProject, getProjectMemberDetails, updateMember },
   } = useMember();
+  const { captureEvent } = useEventTracker();
   // toast alert
   const { setToastAlert } = useToast();
 
@@ -48,8 +50,11 @@ export const ProjectMemberListItem: React.FC<Props> = observer((props) => {
     if (userDetails.member.id === currentUser?.id) {
       await leaveProject(workspaceSlug.toString(), projectId.toString())
         .then(async () => {
+          captureEvent(PROJECT_MEMBER_LEAVE, {
+            state: "SUCCESS",
+            element: "Project settings members page",
+          });
           await fetchProjects(workspaceSlug.toString());
-
           router.push(`/${workspaceSlug}/projects`);
         })
         .catch((err) =>
diff --git a/web/components/project/send-project-invitation-modal.tsx b/web/components/project/send-project-invitation-modal.tsx
index 39fb5c974..7c02ce8d0 100644
--- a/web/components/project/send-project-invitation-modal.tsx
+++ b/web/components/project/send-project-invitation-modal.tsx
@@ -9,9 +9,12 @@ import { useEventTracker, useMember, useUser, useWorkspace } from "hooks/store";
 import useToast from "hooks/use-toast";
 // ui
 import { Avatar, Button, CustomSelect, CustomSearchSelect } from "@plane/ui";
+// helpers
+import { getUserRole } from "helpers/user.helper";
 // constants
 import { ROLE } from "constants/workspace";
 import { EUserProjectRoles } from "constants/project";
+import { PROJECT_MEMBER_ADDED } from "constants/event-tracker";
 
 type Props = {
   isOpen: boolean;
@@ -49,7 +52,6 @@ export const SendProjectInvitationModal: React.FC<Props> = observer((props) => {
   const {
     membership: { currentProjectRole },
   } = useUser();
-  const { currentWorkspace } = useWorkspace();
   const {
     project: { projectMemberIds, bulkAddMembersToProject },
     workspace: { workspaceMemberIds, getWorkspaceMemberDetails },
@@ -79,7 +81,7 @@ export const SendProjectInvitationModal: React.FC<Props> = observer((props) => {
     const payload = { ...formData };
 
     await bulkAddMembersToProject(workspaceSlug.toString(), projectId.toString(), payload)
-      .then((res) => {
+      .then(() => {
         if (onSuccess) onSuccess();
         onClose();
         setToastAlert({
@@ -87,32 +89,23 @@ export const SendProjectInvitationModal: React.FC<Props> = observer((props) => {
           type: "success",
           message: "Members added successfully.",
         });
-        captureEvent(
-          "Member added",
-          {
-            ...res,
-            state: "SUCCESS",
-          },
-          {
-            isGrouping: true,
-            groupType: "Workspace_metrics",
-            groupId: currentWorkspace?.id!,
-          }
-        );
+        captureEvent(PROJECT_MEMBER_ADDED, {
+          members: [
+            ...payload.members.map((member) => ({
+              member_id: member.member_id,
+              role: ROLE[member.role],
+            })),
+          ],
+          state: "SUCCESS",
+          element: "Project settings members page",
+        });
       })
       .catch((error) => {
         console.error(error);
-        captureEvent(
-          "Member added",
-          {
-            state: "FAILED",
-          },
-          {
-            isGrouping: true,
-            groupType: "Workspace_metrics",
-            groupId: currentWorkspace?.id!,
-          }
-        );
+        captureEvent(PROJECT_MEMBER_ADDED, {
+          state: "FAILED",
+          element: "Project settings members page",
+        });
       })
       .finally(() => {
         reset(defaultValues);
diff --git a/web/components/project/settings/features-list.tsx b/web/components/project/settings/features-list.tsx
index 34aec4db6..22e69827e 100644
--- a/web/components/project/settings/features-list.tsx
+++ b/web/components/project/settings/features-list.tsx
@@ -51,12 +51,11 @@ export const ProjectFeaturesList: FC<Props> = observer(() => {
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
   // store hooks
-  const { setTrackElement, captureEvent } = useEventTracker();
+  const { captureEvent } = useEventTracker();
   const {
     currentUser,
     membership: { currentProjectRole },
   } = useUser();
-  const { currentWorkspace } = useWorkspace();
   const { currentProjectDetails, updateProject } = useProject();
   const isAdmin = currentProjectRole === EUserProjectRoles.ADMIN;
   // toast alert
@@ -91,14 +90,9 @@ export const ProjectFeaturesList: FC<Props> = observer(() => {
           <ToggleSwitch
             value={Boolean(currentProjectDetails?.[feature.property as keyof IProject])}
             onChange={() => {
-              setTrackElement("PROJECT_SETTINGS_FEATURES_PAGE");
               captureEvent(`Toggle ${feature.title.toLowerCase()}`, {
-                workspace_id: currentWorkspace?.id,
-                workspace_slug: currentWorkspace?.slug,
-                project_id: currentProjectDetails?.id,
-                project_name: currentProjectDetails?.name,
-                project_identifier: currentProjectDetails?.identifier,
                 enabled: !currentProjectDetails?.[feature.property as keyof IProject],
+                element: "Project settings feature page",
               });
               handleSubmit({
                 [feature.property]: !currentProjectDetails?.[feature.property as keyof IProject],
diff --git a/web/components/states/create-update-state-inline.tsx b/web/components/states/create-update-state-inline.tsx
index b12659a81..037cd483d 100644
--- a/web/components/states/create-update-state-inline.tsx
+++ b/web/components/states/create-update-state-inline.tsx
@@ -13,6 +13,7 @@ import { Button, CustomSelect, Input, Tooltip } from "@plane/ui";
 import type { IState } from "@plane/types";
 // constants
 import { GROUP_CHOICES } from "constants/project";
+import { STATE_CREATED, STATE_UPDATED } from "constants/event-tracker";
 
 type Props = {
   data: IState | null;
@@ -36,7 +37,7 @@ export const CreateUpdateStateInline: React.FC<Props> = observer((props) => {
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
   // store hooks
-  const { captureEvent, setTrackElement } = useEventTracker();
+  const { captureProjectStateEvent, setTrackElement } = useEventTracker();
   const { createState, updateState } = useProjectState();
   // toast alert
   const { setToastAlert } = useToast();
@@ -86,9 +87,13 @@ export const CreateUpdateStateInline: React.FC<Props> = observer((props) => {
           title: "Success!",
           message: "State created successfully.",
         });
-        captureEvent("State created", {
-          ...res,
-          state: "SUCCESS",
+        captureProjectStateEvent({
+          eventName: STATE_CREATED,
+          payload: {
+            ...res,
+            state: "SUCCESS",
+            element: "Project settings states page",
+          },
         });
       })
       .catch((error) => {
@@ -104,8 +109,14 @@ export const CreateUpdateStateInline: React.FC<Props> = observer((props) => {
             title: "Error!",
             message: "State could not be created. Please try again.",
           });
-        captureEvent("State created", {
-          state: "FAILED",
+
+        captureProjectStateEvent({
+          eventName: STATE_CREATED,
+          payload: {
+            ...formData,
+            state: "FAILED",
+            element: "Project settings states page",
+          },
         });
       });
   };
@@ -116,9 +127,13 @@ export const CreateUpdateStateInline: React.FC<Props> = observer((props) => {
     await updateState(workspaceSlug.toString(), projectId.toString(), data.id, formData)
       .then((res) => {
         handleClose();
-        captureEvent("State updated", {
-          ...res,
-          state: "SUCCESS",
+        captureProjectStateEvent({
+          eventName: STATE_UPDATED,
+          payload: {
+            ...res,
+            state: "SUCCESS",
+            element: "Project settings states page",
+          },
         });
         setToastAlert({
           type: "success",
@@ -139,8 +154,13 @@ export const CreateUpdateStateInline: React.FC<Props> = observer((props) => {
             title: "Error!",
             message: "State could not be updated. Please try again.",
           });
-        captureEvent("State updated", {
-          state: "FAILED",
+        captureProjectStateEvent({
+          eventName: STATE_UPDATED,
+          payload: {
+            ...formData,
+            state: "FAILED",
+            element: "Project settings states page",
+          },
         });
       });
   };
diff --git a/web/components/states/delete-state-modal.tsx b/web/components/states/delete-state-modal.tsx
index 4a0414092..12de38608 100644
--- a/web/components/states/delete-state-modal.tsx
+++ b/web/components/states/delete-state-modal.tsx
@@ -10,6 +10,8 @@ import useToast from "hooks/use-toast";
 import { Button } from "@plane/ui";
 // types
 import type { IState } from "@plane/types";
+// constants
+import { STATE_DELETED } from "constants/event-tracker";
 
 type Props = {
   isOpen: boolean;
@@ -25,7 +27,7 @@ export const DeleteStateModal: React.FC<Props> = observer((props) => {
   const router = useRouter();
   const { workspaceSlug } = router.query;
   // store hooks
-  const { captureEvent } = useEventTracker();
+  const { captureProjectStateEvent } = useEventTracker();
   const { deleteState } = useProjectState();
   // toast alert
   const { setToastAlert } = useToast();
@@ -42,8 +44,12 @@ export const DeleteStateModal: React.FC<Props> = observer((props) => {
 
     await deleteState(workspaceSlug.toString(), data.project_id, data.id)
       .then(() => {
-        captureEvent("State deleted", {
-          state: "SUCCESS",
+        captureProjectStateEvent({
+          eventName: STATE_DELETED,
+          payload: {
+            ...data,
+            state: "SUCCESS",
+          },
         });
         handleClose();
       })
@@ -61,8 +67,12 @@ export const DeleteStateModal: React.FC<Props> = observer((props) => {
             title: "Error!",
             message: "State could not be deleted. Please try again.",
           });
-        captureEvent("State deleted", {
-          state: "FAILED",
+        captureProjectStateEvent({
+          eventName: STATE_DELETED,
+          payload: {
+            ...data,
+            state: "FAILED",
+          },
         });
       })
       .finally(() => {
diff --git a/web/components/workspace/create-workspace-form.tsx b/web/components/workspace/create-workspace-form.tsx
index 8cb29edde..b4f164469 100644
--- a/web/components/workspace/create-workspace-form.tsx
+++ b/web/components/workspace/create-workspace-form.tsx
@@ -13,6 +13,7 @@ import { Button, CustomSelect, Input } from "@plane/ui";
 import { IWorkspace } from "@plane/types";
 // constants
 import { ORGANIZATION_SIZE, RESTRICTED_URLS } from "constants/workspace";
+import { WORKSPACE_CREATED } from "constants/event-tracker";
 
 type Props = {
   onSubmit?: (res: IWorkspace) => Promise<void>;
@@ -48,7 +49,7 @@ export const CreateWorkspaceForm: FC<Props> = observer((props) => {
   // router
   const router = useRouter();
   // store hooks
-  const { captureEvent } = useEventTracker();
+  const { captureWorkspaceEvent } = useEventTracker();
   const { createWorkspace } = useWorkspace();
   // toast alert
   const { setToastAlert } = useToast();
@@ -70,9 +71,13 @@ export const CreateWorkspaceForm: FC<Props> = observer((props) => {
 
           await createWorkspace(formData)
             .then(async (res) => {
-              captureEvent("Workspace created", {
-                ...res,
-                state: "SUCCESS",
+              captureWorkspaceEvent({
+                eventName: WORKSPACE_CREATED,
+                payload: {
+                  ...res,
+                  state: "SUCCESS",
+                  element: "Create workspace page",
+                },
               });
               setToastAlert({
                 type: "success",
@@ -83,14 +88,18 @@ export const CreateWorkspaceForm: FC<Props> = observer((props) => {
               if (onSubmit) await onSubmit(res);
             })
             .catch(() => {
+              captureWorkspaceEvent({
+                eventName: WORKSPACE_CREATED,
+                payload: {
+                  state: "FAILED",
+                  element: "Create workspace page",
+                },
+              });
               setToastAlert({
                 type: "error",
                 title: "Error!",
                 message: "Workspace could not be created. Please try again.",
               });
-              captureEvent("Workspace created", {
-                state: "FAILED",
-              });
             });
         } else setSlugError(true);
       })
@@ -100,9 +109,6 @@ export const CreateWorkspaceForm: FC<Props> = observer((props) => {
           title: "Error!",
           message: "Some error occurred while creating workspace. Please try again.",
         });
-        captureEvent("Workspace created", {
-          state: "FAILED",
-        });
       });
   };
 
diff --git a/web/components/workspace/delete-workspace-modal.tsx b/web/components/workspace/delete-workspace-modal.tsx
index acfe0648d..a90ac9cdf 100644
--- a/web/components/workspace/delete-workspace-modal.tsx
+++ b/web/components/workspace/delete-workspace-modal.tsx
@@ -11,6 +11,8 @@ import useToast from "hooks/use-toast";
 import { Button, Input } from "@plane/ui";
 // types
 import type { IWorkspace } from "@plane/types";
+// constants
+import { WORKSPACE_DELETED } from "constants/event-tracker";
 
 type Props = {
   isOpen: boolean;
@@ -28,7 +30,7 @@ export const DeleteWorkspaceModal: React.FC<Props> = observer((props) => {
   // router
   const router = useRouter();
   // store hooks
-  const { captureEvent } = useEventTracker();
+  const { captureWorkspaceEvent } = useEventTracker();
   const { deleteWorkspace } = useWorkspace();
   // toast alert
   const { setToastAlert } = useToast();
@@ -59,9 +61,13 @@ export const DeleteWorkspaceModal: React.FC<Props> = observer((props) => {
       .then((res) => {
         handleClose();
         router.push("/");
-        captureEvent("Workspace deleted", {
-          res,
-          state: "SUCCESS",
+        captureWorkspaceEvent({
+          eventName: WORKSPACE_DELETED,
+          payload: {
+            ...data,
+            state: "SUCCESS",
+            element: "Workspace general settings page",
+          },
         });
         setToastAlert({
           type: "success",
@@ -75,8 +81,13 @@ export const DeleteWorkspaceModal: React.FC<Props> = observer((props) => {
           title: "Error!",
           message: "Something went wrong. Please try again later.",
         });
-        captureEvent("Workspace deleted", {
-          state: "FAILED",
+        captureWorkspaceEvent({
+          eventName: WORKSPACE_DELETED,
+          payload: {
+            ...data,
+            state: "FAILED",
+            element: "Workspace general settings page",
+          },
         });
       });
   };
diff --git a/web/components/workspace/settings/members-list-item.tsx b/web/components/workspace/settings/members-list-item.tsx
index 9fa5962a3..76c9bbedf 100644
--- a/web/components/workspace/settings/members-list-item.tsx
+++ b/web/components/workspace/settings/members-list-item.tsx
@@ -4,7 +4,7 @@ import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
 import { ChevronDown, Dot, XCircle } from "lucide-react";
 // hooks
-import { useMember, useUser } from "hooks/store";
+import { useEventTracker, useMember, useUser } from "hooks/store";
 import useToast from "hooks/use-toast";
 // components
 import { ConfirmWorkspaceMemberRemove } from "components/workspace";
@@ -12,6 +12,7 @@ import { ConfirmWorkspaceMemberRemove } from "components/workspace";
 import { CustomSelect, Tooltip } from "@plane/ui";
 // constants
 import { EUserWorkspaceRoles, ROLE } from "constants/workspace";
+import { WORKSPACE_MEMBER_lEAVE } from "constants/event-tracker";
 
 type Props = {
   memberId: string;
@@ -33,6 +34,7 @@ export const WorkspaceMembersListItem: FC<Props> = observer((props) => {
   const {
     workspace: { updateMember, removeMemberFromWorkspace, getWorkspaceMemberDetails },
   } = useMember();
+  const { captureEvent } = useEventTracker();
   // toast alert
   const { setToastAlert } = useToast();
   // derived values
@@ -42,7 +44,13 @@ export const WorkspaceMembersListItem: FC<Props> = observer((props) => {
     if (!workspaceSlug || !currentUserSettings) return;
 
     await leaveWorkspace(workspaceSlug.toString())
-      .then(() => router.push("/profile"))
+      .then(() => {
+        captureEvent(WORKSPACE_MEMBER_lEAVE, {
+          state: "SUCCESS",
+          element: "Workspace settings members page",
+        });
+        router.push("/profile");
+      })
       .catch((err) =>
         setToastAlert({
           type: "error",
diff --git a/web/components/workspace/settings/workspace-details.tsx b/web/components/workspace/settings/workspace-details.tsx
index e0ac68a24..44da4291f 100644
--- a/web/components/workspace/settings/workspace-details.tsx
+++ b/web/components/workspace/settings/workspace-details.tsx
@@ -19,6 +19,7 @@ import { copyUrlToClipboard } from "helpers/string.helper";
 import { IWorkspace } from "@plane/types";
 // constants
 import { EUserWorkspaceRoles, ORGANIZATION_SIZE } from "constants/workspace";
+import { WORKSPACE_UPDATED } from "constants/event-tracker";
 
 const defaultValues: Partial<IWorkspace> = {
   name: "",
@@ -37,7 +38,7 @@ export const WorkspaceDetails: FC = observer(() => {
   const [isImageRemoving, setIsImageRemoving] = useState(false);
   const [isImageUploadModalOpen, setIsImageUploadModalOpen] = useState(false);
   // store hooks
-  const { captureEvent } = useEventTracker();
+  const { captureWorkspaceEvent } = useEventTracker();
   const {
     membership: { currentWorkspaceRole },
   } = useUser();
@@ -68,9 +69,13 @@ export const WorkspaceDetails: FC = observer(() => {
 
     await updateWorkspace(currentWorkspace.slug, payload)
       .then((res) => {
-        captureEvent("Workspace updated", {
-          ...res,
-          state: "SUCCESS",
+        captureWorkspaceEvent({
+          eventName: WORKSPACE_UPDATED,
+          payload: {
+            ...res,
+            state: "SUCCESS",
+            element: "Workspace general settings page",
+          },
         });
         setToastAlert({
           title: "Success",
@@ -79,8 +84,12 @@ export const WorkspaceDetails: FC = observer(() => {
         });
       })
       .catch((err) => {
-        captureEvent("Workspace updated", {
-          state: "FAILED",
+        captureWorkspaceEvent({
+          eventName: WORKSPACE_UPDATED,
+          payload: {
+            state: "FAILED",
+            element: "Workspace general settings page",
+          },
         });
         console.error(err);
       });
diff --git a/web/components/workspace/sidebar-dropdown.tsx b/web/components/workspace/sidebar-dropdown.tsx
index 4528882dd..87bb4c868 100644
--- a/web/components/workspace/sidebar-dropdown.tsx
+++ b/web/components/workspace/sidebar-dropdown.tsx
@@ -222,7 +222,6 @@ export const WorkspaceSidebarDropdown = observer(() => {
                   <div className="flex w-full flex-col items-start justify-start gap-2 px-4 py-2 text-sm">
                     <Link
                       href="/create-workspace"
-                      onClick={() => setTrackElement("APP_SIDEBAR_WORKSPACE_DROPDOWN")}
                       className="w-full"
                     >
                       <Menu.Item
diff --git a/web/components/workspace/sidebar-menu.tsx b/web/components/workspace/sidebar-menu.tsx
index 615fe88fb..774a231db 100644
--- a/web/components/workspace/sidebar-menu.tsx
+++ b/web/components/workspace/sidebar-menu.tsx
@@ -3,7 +3,7 @@ import Link from "next/link";
 import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
 // hooks
-import { useApplication, useUser } from "hooks/store";
+import { useApplication, useEventTracker, useUser } from "hooks/store";
 // components
 import { NotificationPopover } from "components/notifications";
 // ui
@@ -12,12 +12,14 @@ import { Crown } from "lucide-react";
 // constants
 import { EUserWorkspaceRoles } from "constants/workspace";
 import { SIDEBAR_MENU_ITEMS } from "constants/dashboard";
+import { SIDEBAR_CLICKED } from "constants/event-tracker";
 // helper
 import { cn } from "helpers/common.helper";
 
 export const WorkspaceSidebarMenu = observer(() => {
   // store hooks
   const { theme: themeStore } = useApplication();
+  const { captureEvent } = useEventTracker();
   const {
     membership: { currentWorkspaceRole },
   } = useUser();
@@ -27,10 +29,13 @@ export const WorkspaceSidebarMenu = observer(() => {
   // computed
   const workspaceMemberInfo = currentWorkspaceRole || EUserWorkspaceRoles.GUEST;
 
-  const handleLinkClick = () => {
+  const handleLinkClick = (itemKey: string) => {
     if (window.innerWidth < 768) {
       themeStore.toggleSidebar();
     }
+    captureEvent(SIDEBAR_CLICKED, {
+      destination: itemKey,
+    });
   };
 
   return (
@@ -38,11 +43,8 @@ export const WorkspaceSidebarMenu = observer(() => {
       {SIDEBAR_MENU_ITEMS.map(
         (link) =>
           workspaceMemberInfo >= link.access && (
-            <Link key={link.key}
-              href={`/${workspaceSlug}${link.href}`}
-              onClick={handleLinkClick}
-            >
-              <span className="block w-full my-1">
+            <Link key={link.key} href={`/${workspaceSlug}${link.href}`} onClick={() => handleLinkClick(link.key)}>
+              <span className="my-1 block w-full">
                 <Tooltip
                   tooltipContent={link.label}
                   position="right"
@@ -50,10 +52,11 @@ export const WorkspaceSidebarMenu = observer(() => {
                   disabled={!themeStore?.sidebarCollapsed}
                 >
                   <div
-                    className={`group flex w-full items-center gap-2.5 rounded-md px-3 py-2 text-sm font-medium outline-none ${link.highlight(router.asPath, `/${workspaceSlug}`)
-                      ? "bg-custom-primary-100/10 text-custom-primary-100"
-                      : "text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80 focus:bg-custom-sidebar-background-80"
-                      } ${themeStore?.sidebarCollapsed ? "justify-center" : ""}`}
+                    className={`group flex w-full items-center gap-2.5 rounded-md px-3 py-2 text-sm font-medium outline-none ${
+                      link.highlight(router.asPath, `/${workspaceSlug}`)
+                        ? "bg-custom-primary-100/10 text-custom-primary-100"
+                        : "text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80 focus:bg-custom-sidebar-background-80"
+                    } ${themeStore?.sidebarCollapsed ? "justify-center" : ""}`}
                   >
                     {
                       <link.Icon
diff --git a/web/components/workspace/views/delete-view-modal.tsx b/web/components/workspace/views/delete-view-modal.tsx
index 64a9870ad..b6028d541 100644
--- a/web/components/workspace/views/delete-view-modal.tsx
+++ b/web/components/workspace/views/delete-view-modal.tsx
@@ -4,12 +4,14 @@ import { Dialog, Transition } from "@headlessui/react";
 import { observer } from "mobx-react-lite";
 import { AlertTriangle } from "lucide-react";
 // store hooks
-import { useGlobalView } from "hooks/store";
+import { useGlobalView, useEventTracker } from "hooks/store";
 import useToast from "hooks/use-toast";
 // ui
 import { Button } from "@plane/ui";
 // types
 import { IWorkspaceView } from "@plane/types";
+// constants
+import { GLOBAL_VIEW_DELETED } from "constants/event-tracker";
 
 type Props = {
   data: IWorkspaceView;
@@ -26,6 +28,7 @@ export const DeleteGlobalViewModal: React.FC<Props> = observer((props) => {
   const { workspaceSlug } = router.query;
   // store hooks
   const { deleteGlobalView } = useGlobalView();
+  const { captureEvent } = useEventTracker();
   // toast alert
   const { setToastAlert } = useToast();
 
@@ -39,13 +42,23 @@ export const DeleteGlobalViewModal: React.FC<Props> = observer((props) => {
     setIsDeleteLoading(true);
 
     await deleteGlobalView(workspaceSlug.toString(), data.id)
-      .catch(() =>
+      .then(() => {
+        captureEvent(GLOBAL_VIEW_DELETED, {
+          view_id: data.id,
+          state: "SUCCESS",
+        });
+      })
+      .catch(() => {
+        captureEvent(GLOBAL_VIEW_DELETED, {
+          view_id: data.id,
+          state: "FAILED",
+        });
         setToastAlert({
           type: "error",
           title: "Error!",
           message: "Something went wrong while deleting the view. Please try again.",
-        })
-      )
+        });
+      })
       .finally(() => {
         setIsDeleteLoading(false);
         handleClose();
diff --git a/web/components/workspace/views/header.tsx b/web/components/workspace/views/header.tsx
index 9c9b40c47..43375cb24 100644
--- a/web/components/workspace/views/header.tsx
+++ b/web/components/workspace/views/header.tsx
@@ -4,11 +4,12 @@ import Link from "next/link";
 import { observer } from "mobx-react-lite";
 import { Plus } from "lucide-react";
 // store hooks
-import { useGlobalView, useUser } from "hooks/store";
+import { useEventTracker, useGlobalView, useUser } from "hooks/store";
 // components
 import { CreateUpdateWorkspaceViewModal } from "components/workspace";
 // constants
 import { DEFAULT_GLOBAL_VIEWS_LIST, EUserWorkspaceRoles } from "constants/workspace";
+import { GLOBAL_VIEW_OPENED } from "constants/event-tracker";
 
 const ViewTab = observer((props: { viewId: string }) => {
   const { viewId } = props;
@@ -49,11 +50,19 @@ export const GlobalViewsHeader: React.FC = observer(() => {
   const {
     membership: { currentWorkspaceRole },
   } = useUser();
+  const { captureEvent } = useEventTracker();
 
   // bring the active view to the centre of the header
   useEffect(() => {
     if (!globalViewId) return;
 
+    captureEvent(GLOBAL_VIEW_OPENED, {
+      view_id: globalViewId,
+      view_type: ["all-issues", "assigned", "created", "subscribed"].includes(globalViewId.toString())
+        ? "Default"
+        : "Custom",
+    });
+
     const activeTabElement = document.querySelector(`#global-view-${globalViewId.toString()}`);
 
     if (activeTabElement) activeTabElement.scrollIntoView({ behavior: "smooth", inline: "center" });
diff --git a/web/components/workspace/views/modal.tsx b/web/components/workspace/views/modal.tsx
index b015b4cb6..b66d555fa 100644
--- a/web/components/workspace/views/modal.tsx
+++ b/web/components/workspace/views/modal.tsx
@@ -3,12 +3,14 @@ import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
 import { Dialog, Transition } from "@headlessui/react";
 // store hooks
-import { useGlobalView } from "hooks/store";
+import { useEventTracker, useGlobalView } from "hooks/store";
 import useToast from "hooks/use-toast";
 // components
 import { WorkspaceViewForm } from "components/workspace";
 // types
 import { IWorkspaceView } from "@plane/types";
+// constants
+import { GLOBAL_VIEW_CREATED, GLOBAL_VIEW_UPDATED } from "constants/event-tracker";
 
 type Props = {
   data?: IWorkspaceView;
@@ -24,6 +26,7 @@ export const CreateUpdateWorkspaceViewModal: React.FC<Props> = observer((props)
   const { workspaceSlug } = router.query;
   // store hooks
   const { createGlobalView, updateGlobalView } = useGlobalView();
+  const { captureEvent } = useEventTracker();
   // toast alert
   const { setToastAlert } = useToast();
 
@@ -43,6 +46,11 @@ export const CreateUpdateWorkspaceViewModal: React.FC<Props> = observer((props)
 
     await createGlobalView(workspaceSlug.toString(), payloadData)
       .then((res) => {
+        captureEvent(GLOBAL_VIEW_CREATED, {
+          view_id: res.id,
+          applied_filters: res.filters,
+          state: "SUCCESS",
+        });
         setToastAlert({
           type: "success",
           title: "Success!",
@@ -52,13 +60,17 @@ export const CreateUpdateWorkspaceViewModal: React.FC<Props> = observer((props)
         router.push(`/${workspaceSlug}/workspace-views/${res.id}`);
         handleClose();
       })
-      .catch(() =>
+      .catch(() => {
+        captureEvent(GLOBAL_VIEW_CREATED, {
+          applied_filters: payload?.filters,
+          state: "FAILED",
+        });
         setToastAlert({
           type: "error",
           title: "Error!",
           message: "View could not be created. Please try again.",
-        })
-      );
+        });
+      });
   };
 
   const handleUpdateView = async (payload: Partial<IWorkspaceView>) => {
@@ -72,7 +84,12 @@ export const CreateUpdateWorkspaceViewModal: React.FC<Props> = observer((props)
     };
 
     await updateGlobalView(workspaceSlug.toString(), data.id, payloadData)
-      .then(() => {
+      .then((res) => {
+        captureEvent(GLOBAL_VIEW_UPDATED, {
+          view_id: res.id,
+          applied_filters: res.filters,
+          state: "SUCCESS",
+        });
         setToastAlert({
           type: "success",
           title: "Success!",
@@ -80,13 +97,18 @@ export const CreateUpdateWorkspaceViewModal: React.FC<Props> = observer((props)
         });
         handleClose();
       })
-      .catch(() =>
+      .catch(() => {
+        captureEvent(GLOBAL_VIEW_UPDATED, {
+          view_id: data.id,
+          applied_filters: data.filters,
+          state: "FAILED",
+        });
         setToastAlert({
           type: "error",
           title: "Error!",
           message: "View could not be updated. Please try again.",
-        })
-      );
+        });
+      });
   };
 
   const handleFormSubmit = async (formData: Partial<IWorkspaceView>) => {
diff --git a/web/components/workspace/views/view-list-item.tsx b/web/components/workspace/views/view-list-item.tsx
index 1d9289037..ad551494b 100644
--- a/web/components/workspace/views/view-list-item.tsx
+++ b/web/components/workspace/views/view-list-item.tsx
@@ -4,7 +4,7 @@ import Link from "next/link";
 import { observer } from "mobx-react-lite";
 import { Pencil, Trash2 } from "lucide-react";
 // store hooks
-import { useGlobalView } from "hooks/store";
+import { useEventTracker, useGlobalView } from "hooks/store";
 // components
 import { CreateUpdateWorkspaceViewModal, DeleteGlobalViewModal } from "components/workspace";
 // ui
@@ -25,6 +25,7 @@ export const GlobalViewListItem: React.FC<Props> = observer((props) => {
   const { workspaceSlug } = router.query;
   // store hooks
   const { getViewDetailsById } = useGlobalView();
+  const {setTrackElement} = useEventTracker();
   // derived data
   const view = getViewDetailsById(viewId);
 
@@ -59,6 +60,7 @@ export const GlobalViewListItem: React.FC<Props> = observer((props) => {
                       onClick={(e) => {
                         e.preventDefault();
                         e.stopPropagation();
+                        setTrackElement("List view");
                         setUpdateViewModal(true);
                       }}
                     >
diff --git a/web/constants/event-tracker.ts b/web/constants/event-tracker.ts
index 67f1b1034..a0bf0b5bb 100644
--- a/web/constants/event-tracker.ts
+++ b/web/constants/event-tracker.ts
@@ -2,26 +2,31 @@ export type IssueEventProps = {
   eventName: string;
   payload: any;
   updates?: any;
-  group?: EventGroupProps;
   path?: string;
 };
 
 export type EventProps = {
   eventName: string;
   payload: any;
-  group?: EventGroupProps;
 };
 
-export type EventGroupProps = {
-  isGrouping?: boolean;
-  groupType?: string;
-  groupId?: string;
-};
+export const getWorkspaceEventPayload = (payload: any) => ({
+  workspace_id: payload.id,
+  created_at: payload.created_at,
+  updated_at: payload.updated_at,
+  organization_size: payload.organization_size,
+  first_time: payload.first_time,
+  state: payload.state,
+  element: payload.element,
+});
 
 export const getProjectEventPayload = (payload: any) => ({
   workspace_id: payload.workspace_id,
   project_id: payload.id,
   identifier: payload.identifier,
+  project_visibility: payload.network == 2 ? "Public" : "Private",
+  changed_properties: payload.changed_properties,
+  lead_id: payload.project_lead,
   created_at: payload.created_at,
   updated_at: payload.updated_at,
   state: payload.state,
@@ -30,26 +35,43 @@ export const getProjectEventPayload = (payload: any) => ({
 
 export const getCycleEventPayload = (payload: any) => ({
   workspace_id: payload.workspace_id,
-  project_id: payload.id,
+  project_id: payload.project,
   cycle_id: payload.id,
   created_at: payload.created_at,
   updated_at: payload.updated_at,
   start_date: payload.start_date,
   target_date: payload.target_date,
   cycle_status: payload.status,
+  changed_properties: payload.changed_properties,
   state: payload.state,
   element: payload.element,
 });
 
 export const getModuleEventPayload = (payload: any) => ({
   workspace_id: payload.workspace_id,
-  project_id: payload.id,
+  project_id: payload.project,
   module_id: payload.id,
   created_at: payload.created_at,
   updated_at: payload.updated_at,
   start_date: payload.start_date,
   target_date: payload.target_date,
   module_status: payload.status,
+  lead_id: payload.lead,
+  changed_properties: payload.changed_properties,
+  member_ids: payload.members,
+  state: payload.state,
+  element: payload.element,
+});
+
+export const getPageEventPayload = (payload: any) => ({
+  workspace_id: payload.workspace_id,
+  project_id: payload.project,
+  created_at: payload.created_at,
+  updated_at: payload.updated_at,
+  access: payload.access === 0 ? "Public" : "Private",
+  is_locked: payload.is_locked,
+  archived_at: payload.archived_at,
+  created_by: payload.created_by,
   state: payload.state,
   element: payload.element,
 });
@@ -71,6 +93,7 @@ export const getIssueEventPayload = (props: IssueEventProps) => {
     sub_issues_count: payload.sub_issues_count,
     parent_id: payload.parent_id,
     project_id: payload.project_id,
+    workspace_id: payload.workspace_id,
     priority: payload.priority,
     state_id: payload.state_id,
     start_date: payload.start_date,
@@ -82,7 +105,7 @@ export const getIssueEventPayload = (props: IssueEventProps) => {
     view_id: path?.includes("workspace-views") || path?.includes("views") ? path.split("/").pop() : "",
   };
 
-  if (eventName === "Issue updated") {
+  if (eventName === ISSUE_UPDATED) {
     eventPayload = {
       ...eventPayload,
       ...updates,
@@ -103,3 +126,99 @@ export const getIssueEventPayload = (props: IssueEventProps) => {
   }
   return eventPayload;
 };
+
+export const getProjectStateEventPayload = (payload: any) => {
+  return {
+    workspace_id: payload.workspace_id,
+    project_id: payload.id,
+    state_id: payload.id,
+    created_at: payload.created_at,
+    updated_at: payload.updated_at,
+    group: payload.group,
+    color: payload.color,
+    default: payload.default,
+    state: payload.state,
+    element: payload.element,
+  };
+};
+
+// Workspace crud Events
+export const WORKSPACE_CREATED = "Workspace created";
+export const WORKSPACE_UPDATED = "Workspace updated";
+export const WORKSPACE_DELETED = "Workspace deleted";
+// Project Events
+export const PROJECT_CREATED = "Project created";
+export const PROJECT_UPDATED = "Project updated";
+export const PROJECT_DELETED = "Project deleted";
+// Cycle Events
+export const CYCLE_CREATED = "Cycle created";
+export const CYCLE_UPDATED = "Cycle updated";
+export const CYCLE_DELETED = "Cycle deleted";
+export const CYCLE_FAVORITED = "Cycle favorited";
+export const CYCLE_UNFAVORITED = "Cycle unfavorited";
+// Module Events
+export const MODULE_CREATED = "Module created";
+export const MODULE_UPDATED = "Module updated";
+export const MODULE_DELETED = "Module deleted";
+export const MODULE_FAVORITED = "Module favorited";
+export const MODULE_UNFAVORITED = "Module unfavorited";
+export const MODULE_LINK_CREATED = "Module link created";
+export const MODULE_LINK_UPDATED = "Module link updated";
+export const MODULE_LINK_DELETED = "Module link deleted";
+// Issue Events
+export const ISSUE_CREATED = "Issue created";
+export const ISSUE_UPDATED = "Issue updated";
+export const ISSUE_DELETED = "Issue deleted";
+export const ISSUE_OPENED = "Issue opened";
+// Project State Events
+export const STATE_CREATED = "State created";
+export const STATE_UPDATED = "State updated";
+export const STATE_DELETED = "State deleted";
+// Project Page Events
+export const PAGE_CREATED = "Page created";
+export const PAGE_UPDATED = "Page updated";
+export const PAGE_DELETED = "Page deleted";
+// Member Events
+export const MEMBER_INVITED = "Member invited";
+export const MEMBER_ACCEPTED = "Member accepted";
+export const PROJECT_MEMBER_ADDED = "Project member added";
+export const PROJECT_MEMBER_LEAVE = "Project member leave";
+export const WORKSPACE_MEMBER_lEAVE = "Workspace member leave";
+// Sign-in & Sign-up Events
+export const NAVIGATE_TO_SIGNUP = "Navigate to sign-up page";
+export const NAVIGATE_TO_SIGNIN = "Navigate to sign-in page";
+export const CODE_VERIFIED = "Code verified";
+export const SETUP_PASSWORD = "Password setup";
+export const PASSWORD_CREATE_SELECTED = "Password created";
+export const PASSWORD_CREATE_SKIPPED = "Skipped to setup";
+export const SIGN_IN_WITH_PASSWORD = "Sign in with password";
+export const FORGOT_PASSWORD = "Forgot password clicked";
+export const FORGOT_PASS_LINK = "Forgot password link generated";
+export const NEW_PASS_CREATED = "New password created";
+// Onboarding Events
+export const USER_DETAILS = "User details added";
+export const USER_ONBOARDING_COMPLETED = "User onboarding completed";
+// Product Tour Events
+export const PRODUCT_TOUR_STARTED = "Product tour started";
+export const PRODUCT_TOUR_COMPLETED = "Product tour completed";
+export const PRODUCT_TOUR_SKIPPED = "Product tour skipped";
+// Dashboard Events
+export const CHANGELOG_REDIRECTED = "Changelog redirected";
+export const GITHUB_REDIRECTED = "Github redirected";
+// Sidebar Events
+export const SIDEBAR_CLICKED = "Sidenav clicked";
+// Global View Events
+export const GLOBAL_VIEW_CREATED = "Global view created";
+export const GLOBAL_VIEW_UPDATED = "Global view updated";
+export const GLOBAL_VIEW_DELETED = "Global view deleted";
+export const GLOBAL_VIEW_OPENED = "Global view opened";
+// Notification Events
+export const NOTIFICATION_ARCHIVED = "Notification archived";
+export const NOTIFICATION_SNOOZED = "Notification snoozed";
+export const NOTIFICATION_READ = "Notification marked read";
+export const UNREAD_NOTIFICATIONS = "Unread notifications viewed";
+export const NOTIFICATIONS_READ = "All notifications marked read";
+export const SNOOZED_NOTIFICATIONS= "Snoozed notifications viewed";
+export const ARCHIVED_NOTIFICATIONS = "Archived notifications viewed";
+// Groups
+export const GROUP_WORKSPACE = "Workspace_metrics";
diff --git a/web/lib/app-provider.tsx b/web/lib/app-provider.tsx
index 864c87f27..64d323cf0 100644
--- a/web/lib/app-provider.tsx
+++ b/web/lib/app-provider.tsx
@@ -5,7 +5,7 @@ import NProgress from "nprogress";
 import { observer } from "mobx-react-lite";
 import { ThemeProvider } from "next-themes";
 // hooks
-import { useApplication, useUser } from "hooks/store";
+import { useApplication, useUser, useWorkspace } from "hooks/store";
 // constants
 import { THEMES } from "constants/themes";
 // layouts
@@ -37,6 +37,7 @@ export const AppProvider: FC<IAppProvider> = observer((props) => {
     currentUser,
     membership: { currentProjectRole, currentWorkspaceRole },
   } = useUser();
+  const { currentWorkspace } = useWorkspace();
   const {
     config: { envConfig },
   } = useApplication();
@@ -49,6 +50,7 @@ export const AppProvider: FC<IAppProvider> = observer((props) => {
             <CrispWrapper user={currentUser}>
               <PostHogProvider
                 user={currentUser}
+                currentWorkspaceId= {currentWorkspace?.id}
                 workspaceRole={currentWorkspaceRole}
                 projectRole={currentProjectRole}
                 posthogAPIKey={envConfig?.posthog_api_key || null}
diff --git a/web/lib/posthog-provider.tsx b/web/lib/posthog-provider.tsx
index f42bf5194..e8c1b7899 100644
--- a/web/lib/posthog-provider.tsx
+++ b/web/lib/posthog-provider.tsx
@@ -1,4 +1,4 @@
-import { FC, ReactNode, useEffect } from "react";
+import { FC, ReactNode, useEffect, useState } from "react";
 import { useRouter } from "next/router";
 import posthog from "posthog-js";
 import { PostHogProvider as PHProvider } from "posthog-js/react";
@@ -6,10 +6,13 @@ import { PostHogProvider as PHProvider } from "posthog-js/react";
 import { IUser } from "@plane/types";
 // helpers
 import { getUserRole } from "helpers/user.helper";
+// constants
+import { GROUP_WORKSPACE } from "constants/event-tracker";
 
 export interface IPosthogWrapper {
   children: ReactNode;
   user: IUser | null;
+  currentWorkspaceId: string | undefined;
   workspaceRole: number | undefined;
   projectRole: number | undefined;
   posthogAPIKey: string | null;
@@ -17,7 +20,9 @@ export interface IPosthogWrapper {
 }
 
 const PostHogProvider: FC<IPosthogWrapper> = (props) => {
-  const { children, user, workspaceRole, projectRole, posthogAPIKey, posthogHost } = props;
+  const { children, user, workspaceRole, currentWorkspaceId, projectRole, posthogAPIKey, posthogHost } = props;
+  // states
+  const [lastWorkspaceId, setLastWorkspaceId] = useState(currentWorkspaceId);
   // router
   const router = useRouter();
 
@@ -25,10 +30,11 @@ const PostHogProvider: FC<IPosthogWrapper> = (props) => {
     if (user) {
       // Identify sends an event, so you want may want to limit how often you call it
       posthog?.identify(user.email, {
-        email: user.email,
+        id: user.id,
         first_name: user.first_name,
         last_name: user.last_name,
-        id: user.id,
+        email: user.email,
+        use_case: user.use_case,
         workspace_role: workspaceRole ? getUserRole(workspaceRole) : undefined,
         project_role: projectRole ? getUserRole(projectRole) : undefined,
       });
@@ -45,6 +51,15 @@ const PostHogProvider: FC<IPosthogWrapper> = (props) => {
     }
   }, [posthogAPIKey, posthogHost]);
 
+  useEffect(() => {
+    // Join workspace group on workspace change
+    if (lastWorkspaceId !== currentWorkspaceId && currentWorkspaceId && user) {
+      setLastWorkspaceId(currentWorkspaceId);
+      posthog?.identify(user.email);
+      posthog?.group(GROUP_WORKSPACE, currentWorkspaceId);
+    }
+  }, [currentWorkspaceId, user]);
+
   useEffect(() => {
     // Track page views
     const handleRouteChange = () => {
diff --git a/web/package.json b/web/package.json
index f62768927..b05616abc 100644
--- a/web/package.json
+++ b/web/package.json
@@ -45,7 +45,7 @@
     "next-pwa": "^5.6.0",
     "next-themes": "^0.2.1",
     "nprogress": "^0.2.0",
-    "posthog-js": "^1.88.4",
+    "posthog-js": "^1.105.0",
     "react": "18.2.0",
     "react-color": "^2.19.3",
     "react-datepicker": "^4.8.0",
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/pages/index.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/pages/index.tsx
index 10cda05e1..b0ab29285 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/pages/index.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/pages/index.tsx
@@ -6,7 +6,7 @@ import useSWR from "swr";
 import { observer } from "mobx-react-lite";
 import { useTheme } from "next-themes";
 // hooks
-import { useApplication, useUser } from "hooks/store";
+import { useApplication, useEventTracker, useUser } from "hooks/store";
 import useLocalStorage from "hooks/use-local-storage";
 import useUserAuth from "hooks/use-user-auth";
 // layouts
@@ -60,6 +60,7 @@ const ProjectPagesPage: NextPageWithLayout = observer(() => {
   const {
     commandPalette: { toggleCreatePageModal },
   } = useApplication();
+  const { setTrackElement } = useEventTracker();
 
   const { fetchProjectPages, fetchArchivedProjectPages, loader, archivedPageLoader, projectPageIds, archivedPageIds } =
     useProjectPages();
@@ -194,7 +195,10 @@ const ProjectPagesPage: NextPageWithLayout = observer(() => {
           description="Pages are thoughts potting space in Plane. Take down meeting notes, format them easily, embed issues, lay them out using a library of components, and keep them all in your project’s context. To make short work of any doc, invoke Galileo, Plane’s AI, with a shortcut or the click of a button."
           primaryButton={{
             text: "Create your first page",
-            onClick: () => toggleCreatePageModal(true),
+            onClick: () => {
+              setTrackElement("Pages empty state");
+              toggleCreatePageModal(true);
+            },
           }}
           comicBox={{
             title: "A page can be a doc or a doc of docs.",
diff --git a/web/pages/[workspaceSlug]/settings/members.tsx b/web/pages/[workspaceSlug]/settings/members.tsx
index 1a185e402..6e9d8d924 100644
--- a/web/pages/[workspaceSlug]/settings/members.tsx
+++ b/web/pages/[workspaceSlug]/settings/members.tsx
@@ -16,8 +16,11 @@ import { Button } from "@plane/ui";
 // types
 import { NextPageWithLayout } from "lib/types";
 import { IWorkspaceBulkInviteFormData } from "@plane/types";
+// helpers
+import { getUserRole } from "helpers/user.helper";
 // constants
 import { EUserWorkspaceRoles } from "constants/workspace";
+import { MEMBER_INVITED } from "constants/event-tracker";
 
 const WorkspaceMembersSettingsPage: NextPageWithLayout = observer(() => {
   // states
@@ -43,7 +46,17 @@ const WorkspaceMembersSettingsPage: NextPageWithLayout = observer(() => {
     return inviteMembersToWorkspace(workspaceSlug.toString(), data)
       .then(() => {
         setInviteModal(false);
-        captureEvent("Member invited", { state: "SUCCESS" });
+        captureEvent(MEMBER_INVITED, {
+          emails: [
+            ...data.emails.map((email) => ({
+              email: email.email,
+              role: getUserRole(email.role),
+            })),
+          ],
+          project_id: undefined,
+          state: "SUCCESS",
+          element: "Workspace settings member page",
+        });
         setToastAlert({
           type: "success",
           title: "Success!",
@@ -51,7 +64,17 @@ const WorkspaceMembersSettingsPage: NextPageWithLayout = observer(() => {
         });
       })
       .catch((err) => {
-        captureEvent("Member invited", { state: "FAILED" });
+        captureEvent(MEMBER_INVITED, {
+          emails: [
+            ...data.emails.map((email) => ({
+              email: email.email,
+              role: getUserRole(email.role),
+            })),
+          ],
+          project_id: undefined,
+          state: "FAILED",
+          element: "Workspace settings member page",
+        });
         setToastAlert({
           type: "error",
           title: "Error!",
@@ -84,14 +107,7 @@ const WorkspaceMembersSettingsPage: NextPageWithLayout = observer(() => {
             />
           </div>
           {hasAddMemberPermission && (
-            <Button
-              variant="primary"
-              size="sm"
-              onClick={() => {
-                setTrackElement("WORKSPACE_SETTINGS_MEMBERS_PAGE_HEADER");
-                setInviteModal(true);
-              }}
-            >
+            <Button variant="primary" size="sm" onClick={() => setInviteModal(true)}>
               Add member
             </Button>
           )}
diff --git a/web/pages/accounts/forgot-password.tsx b/web/pages/accounts/forgot-password.tsx
index 8d3c4cd28..07fa86045 100644
--- a/web/pages/accounts/forgot-password.tsx
+++ b/web/pages/accounts/forgot-password.tsx
@@ -7,6 +7,7 @@ import { AuthService } from "services/auth.service";
 // hooks
 import useToast from "hooks/use-toast";
 import useTimer from "hooks/use-timer";
+import { useEventTracker } from "hooks/store";
 // layouts
 import DefaultLayout from "layouts/default-layout";
 // components
@@ -19,6 +20,7 @@ import BluePlaneLogoWithoutText from "public/plane-logos/blue-without-text.png";
 import { checkEmailValidity } from "helpers/string.helper";
 // type
 import { NextPageWithLayout } from "lib/types";
+import { FORGOT_PASS_LINK } from "constants/event-tracker";
 
 type TForgotPasswordFormValues = {
   email: string;
@@ -35,6 +37,8 @@ const ForgotPasswordPage: NextPageWithLayout = () => {
   // router
   const router = useRouter();
   const { email } = router.query;
+  // store hooks
+  const { captureEvent } = useEventTracker();
   // toast
   const { setToastAlert } = useToast();
   // timer
@@ -57,6 +61,9 @@ const ForgotPasswordPage: NextPageWithLayout = () => {
         email: formData.email,
       })
       .then(() => {
+        captureEvent(FORGOT_PASS_LINK, {
+          state: "SUCCESS",
+        });
         setToastAlert({
           type: "success",
           title: "Email sent",
@@ -65,13 +72,16 @@ const ForgotPasswordPage: NextPageWithLayout = () => {
         });
         setResendCodeTimer(30);
       })
-      .catch((err) =>
+      .catch((err) => {
+        captureEvent(FORGOT_PASS_LINK, {
+          state: "FAILED",
+        });
         setToastAlert({
           type: "error",
           title: "Error!",
           message: err?.error ?? "Something went wrong. Please try again.",
-        })
-      );
+        });
+      });
   };
 
   return (
diff --git a/web/pages/accounts/reset-password.tsx b/web/pages/accounts/reset-password.tsx
index 9854ec5bb..c4258f39e 100644
--- a/web/pages/accounts/reset-password.tsx
+++ b/web/pages/accounts/reset-password.tsx
@@ -7,6 +7,7 @@ import { AuthService } from "services/auth.service";
 // hooks
 import useToast from "hooks/use-toast";
 import useSignInRedirection from "hooks/use-sign-in-redirection";
+import { useEventTracker } from "hooks/store";
 // layouts
 import DefaultLayout from "layouts/default-layout";
 // components
@@ -21,6 +22,8 @@ import { checkEmailValidity } from "helpers/string.helper";
 import { NextPageWithLayout } from "lib/types";
 // icons
 import { Eye, EyeOff } from "lucide-react";
+// constants
+import { NEW_PASS_CREATED } from "constants/event-tracker";
 
 type TResetPasswordFormValues = {
   email: string;
@@ -41,6 +44,8 @@ const ResetPasswordPage: NextPageWithLayout = () => {
   const { uidb64, token, email } = router.query;
   // states
   const [showPassword, setShowPassword] = useState(false);
+  // store hooks
+  const { captureEvent } = useEventTracker();
   // toast
   const { setToastAlert } = useToast();
   // sign in redirection hook
@@ -66,14 +71,22 @@ const ResetPasswordPage: NextPageWithLayout = () => {
 
     await authService
       .resetPassword(uidb64.toString(), token.toString(), payload)
-      .then(() => handleRedirection())
-      .catch((err) =>
+      .then(() => {
+        captureEvent(NEW_PASS_CREATED, {
+          state: "SUCCESS",
+        });
+        handleRedirection();
+      })
+      .catch((err) => {
+        captureEvent(NEW_PASS_CREATED, {
+          state: "FAILED",
+        });
         setToastAlert({
           type: "error",
           title: "Error!",
           message: err?.error ?? "Something went wrong. Please try again.",
-        })
-      );
+        });
+      });
   };
 
   return (
diff --git a/web/pages/invitations/index.tsx b/web/pages/invitations/index.tsx
index 1d8c3e774..26ced2010 100644
--- a/web/pages/invitations/index.tsx
+++ b/web/pages/invitations/index.tsx
@@ -23,11 +23,13 @@ import WhiteHorizontalLogo from "public/plane-logos/white-horizontal-with-blue-l
 import emptyInvitation from "public/empty-state/invitation.svg";
 // helpers
 import { truncateText } from "helpers/string.helper";
+import { getUserRole } from "helpers/user.helper";
 // types
 import { NextPageWithLayout } from "lib/types";
 import type { IWorkspaceMemberInvitation } from "@plane/types";
 // constants
 import { ROLE } from "constants/workspace";
+import { MEMBER_ACCEPTED } from "constants/event-tracker";
 // components
 import { EmptyState } from "components/common";
 
@@ -40,7 +42,7 @@ const UserInvitationsPage: NextPageWithLayout = observer(() => {
   const [invitationsRespond, setInvitationsRespond] = useState<string[]>([]);
   const [isJoiningWorkspaces, setIsJoiningWorkspaces] = useState(false);
   // store hooks
-  const { captureEvent } = useEventTracker();
+  const { captureEvent, joinWorkspaceMetricGroup } = useEventTracker();
   const { currentUser, currentUserSettings } = useUser();
   // router
   const router = useRouter();
@@ -81,11 +83,16 @@ const UserInvitationsPage: NextPageWithLayout = observer(() => {
       .then((res) => {
         mutate("USER_WORKSPACES");
         const firstInviteId = invitationsRespond[0];
+        const invitation = invitations?.find((i) => i.id === firstInviteId);
         const redirectWorkspace = invitations?.find((i) => i.id === firstInviteId)?.workspace;
-        captureEvent("Member accepted", {
-          ...res,
-          state: "SUCCESS",
+        joinWorkspaceMetricGroup(redirectWorkspace?.id);
+        captureEvent(MEMBER_ACCEPTED, {
+          member_id: invitation?.id,
+          role: getUserRole(invitation?.role!),
+          project_id: undefined,
           accepted_from: "App",
+          state: "SUCCESS",
+          element: "Workspace invitations page",
         });
         userService
           .updateUser({ last_workspace_id: redirectWorkspace?.id })
@@ -103,6 +110,12 @@ const UserInvitationsPage: NextPageWithLayout = observer(() => {
           });
       })
       .catch(() => {
+        captureEvent(MEMBER_ACCEPTED, {
+          project_id: undefined,
+          accepted_from: "App",
+          state: "FAILED",
+          element: "Workspace invitations page",
+        });
         setToastAlert({
           type: "error",
           title: "Error!",
diff --git a/web/pages/onboarding/index.tsx b/web/pages/onboarding/index.tsx
index 5a5911fca..99886156d 100644
--- a/web/pages/onboarding/index.tsx
+++ b/web/pages/onboarding/index.tsx
@@ -24,6 +24,8 @@ import BluePlaneLogoWithoutText from "public/plane-logos/blue-without-text.png";
 // types
 import { IUser, TOnboardingSteps } from "@plane/types";
 import { NextPageWithLayout } from "lib/types";
+// constants
+import { USER_ONBOARDING_COMPLETED } from "constants/event-tracker";
 
 // services
 const workspaceService = new WorkspaceService();
@@ -79,7 +81,7 @@ const OnboardingPage: NextPageWithLayout = observer(() => {
 
     await updateUserOnBoard()
       .then(() => {
-        captureEvent("User onboarding completed", {
+        captureEvent(USER_ONBOARDING_COMPLETED, {
           user_role: user.role,
           email: user.email,
           user_id: user.id,
diff --git a/web/store/event-tracker.store.ts b/web/store/event-tracker.store.ts
index 89e279c40..744ad44fb 100644
--- a/web/store/event-tracker.store.ts
+++ b/web/store/event-tracker.store.ts
@@ -3,39 +3,49 @@ import posthog from "posthog-js";
 // stores
 import { RootStore } from "./root.store";
 import {
-  EventGroupProps,
+  GROUP_WORKSPACE,
+  WORKSPACE_CREATED,
   EventProps,
   IssueEventProps,
   getCycleEventPayload,
   getIssueEventPayload,
   getModuleEventPayload,
   getProjectEventPayload,
+  getProjectStateEventPayload,
+  getWorkspaceEventPayload,
+  getPageEventPayload,
 } from "constants/event-tracker";
 
 export interface IEventTrackerStore {
   // properties
-  trackElement: string;
+  trackElement: string | undefined;
   // computed
-  getRequiredPayload: any;
+  getRequiredProperties: any;
   // actions
+  resetSession: () => void;
   setTrackElement: (element: string) => void;
-  captureEvent: (eventName: string, payload: object | [] | null, group?: EventGroupProps) => void;
+  captureEvent: (eventName: string, payload?: any) => void;
+  joinWorkspaceMetricGroup: (workspaceId?: string) => void;
+  captureWorkspaceEvent: (props: EventProps) => void;
   captureProjectEvent: (props: EventProps) => void;
   captureCycleEvent: (props: EventProps) => void;
   captureModuleEvent: (props: EventProps) => void;
+  capturePageEvent: (props: EventProps) => void;
   captureIssueEvent: (props: IssueEventProps) => void;
+  captureProjectStateEvent: (props: EventProps) => void;
 }
 
 export class EventTrackerStore implements IEventTrackerStore {
-  trackElement: string = "";
+  trackElement: string | undefined = undefined;
   rootStore;
   constructor(_rootStore: RootStore) {
     makeObservable(this, {
       // properties
       trackElement: observable,
       // computed
-      getRequiredPayload: computed,
+      getRequiredProperties: computed,
       // actions
+      resetSession: action,
       setTrackElement: action,
       captureEvent: action,
       captureProjectEvent: action,
@@ -48,12 +58,12 @@ export class EventTrackerStore implements IEventTrackerStore {
   /**
    * @description: Returns the necessary property for the event tracking
    */
-  get getRequiredPayload() {
+  get getRequiredProperties() {
     const currentWorkspaceDetails = this.rootStore.workspaceRoot.currentWorkspace;
     const currentProjectDetails = this.rootStore.projectRoot.project.currentProjectDetails;
     return {
-      workspace_id: currentWorkspaceDetails?.id ?? "",
-      project_id: currentProjectDetails?.id ?? "",
+      workspace_id: currentWorkspaceDetails?.id,
+      project_id: currentProjectDetails?.id,
     };
   }
 
@@ -61,42 +71,74 @@ export class EventTrackerStore implements IEventTrackerStore {
    * @description: Set the trigger point of event.
    * @param {string} element
    */
-  setTrackElement = (element: string) => {
+  setTrackElement = (element?: string) => {
     this.trackElement = element;
   };
 
-  postHogGroup = (group: EventGroupProps) => {
-    if (group && group!.isGrouping === true) {
-      posthog?.group(group!.groupType!, group!.groupId!, {
-        date: new Date(),
-        workspace_id: group!.groupId,
-      });
-    }
+  /**
+   * @description: Reset the session.
+   */
+  resetSession = () => {
+    posthog?.reset();
   };
 
-  captureEvent = (eventName: string, payload: object | [] | null) => {
-    posthog?.capture(eventName, {
-      ...payload,
-      element: this.trackElement ?? "",
+  /**
+   * @description: Creates the workspace metric group.
+   * @param {string} userEmail
+   * @param {string} workspaceId
+   */
+  joinWorkspaceMetricGroup = (workspaceId?: string) => {
+    if (!workspaceId) return;
+    posthog?.group(GROUP_WORKSPACE, workspaceId, {
+      date: new Date().toDateString(),
+      workspace_id: workspaceId,
     });
   };
 
+  /**
+   * @description: Captures the event.
+   * @param {string} eventName
+   * @param {any} payload
+   */
+  captureEvent = (eventName: string, payload?: any) => {
+    posthog?.capture(eventName, {
+      ...this.getRequiredProperties,
+      ...payload,
+      element: payload?.element ?? this.trackElement,
+    });
+    this.setTrackElement(undefined);
+  };
+
+  /**
+   * @description: Captures the workspace crud related events.
+   * @param {EventProps} props
+   */
+  captureWorkspaceEvent = (props: EventProps) => {
+    const { eventName, payload } = props;
+    if (eventName === WORKSPACE_CREATED && payload.state == "SUCCESS") {
+      this.joinWorkspaceMetricGroup(payload.id);
+    }
+    const eventPayload: any = getWorkspaceEventPayload({
+      ...payload,
+      element: payload.element ?? this.trackElement,
+    });
+    posthog?.capture(eventName, eventPayload);
+    this.setTrackElement(undefined);
+  };
+
   /**
    * @description: Captures the project related events.
    * @param {EventProps} props
    */
   captureProjectEvent = (props: EventProps) => {
-    const { eventName, payload, group } = props;
-    if (group) {
-      this.postHogGroup(group);
-    }
+    const { eventName, payload } = props;
     const eventPayload: any = getProjectEventPayload({
-      ...this.getRequiredPayload,
+      ...this.getRequiredProperties,
       ...payload,
       element: payload.element ?? this.trackElement,
     });
     posthog?.capture(eventName, eventPayload);
-    this.setTrackElement("");
+    this.setTrackElement(undefined);
   };
 
   /**
@@ -104,17 +146,14 @@ export class EventTrackerStore implements IEventTrackerStore {
    * @param {EventProps} props
    */
   captureCycleEvent = (props: EventProps) => {
-    const { eventName, payload, group } = props;
-    if (group) {
-      this.postHogGroup(group);
-    }
+    const { eventName, payload } = props;
     const eventPayload: any = getCycleEventPayload({
-      ...this.getRequiredPayload,
+      ...this.getRequiredProperties,
       ...payload,
       element: payload.element ?? this.trackElement,
     });
     posthog?.capture(eventName, eventPayload);
-    this.setTrackElement("");
+    this.setTrackElement(undefined);
   };
 
   /**
@@ -122,17 +161,29 @@ export class EventTrackerStore implements IEventTrackerStore {
    * @param {EventProps} props
    */
   captureModuleEvent = (props: EventProps) => {
-    const { eventName, payload, group } = props;
-    if (group) {
-      this.postHogGroup(group);
-    }
+    const { eventName, payload } = props;
     const eventPayload: any = getModuleEventPayload({
-      ...this.getRequiredPayload,
+      ...this.getRequiredProperties,
       ...payload,
       element: payload.element ?? this.trackElement,
     });
     posthog?.capture(eventName, eventPayload);
-    this.setTrackElement("");
+    this.setTrackElement(undefined);
+  };
+
+  /**
+   * @description: Captures the project pages related events.
+   * @param {EventProps} props
+   */
+  capturePageEvent = (props: EventProps) => {
+    const { eventName, payload } = props;
+    const eventPayload: any = getPageEventPayload({
+      ...this.getRequiredProperties,
+      ...payload,
+      element: payload.element ?? this.trackElement,
+    });
+    posthog?.capture(eventName, eventPayload);
+    this.setTrackElement(undefined);
   };
 
   /**
@@ -140,16 +191,29 @@ export class EventTrackerStore implements IEventTrackerStore {
    * @param {IssueEventProps} props
    */
   captureIssueEvent = (props: IssueEventProps) => {
-    const { eventName, payload, group } = props;
-    if (group) {
-      this.postHogGroup(group);
-    }
+    const { eventName, payload } = props;
     const eventPayload: any = {
       ...getIssueEventPayload(props),
-      ...this.getRequiredPayload,
+      ...this.getRequiredProperties,
       state_group: this.rootStore.state.getStateById(payload.state_id)?.group ?? "",
       element: payload.element ?? this.trackElement,
     };
     posthog?.capture(eventName, eventPayload);
+    this.setTrackElement(undefined);
+  };
+
+  /**
+   * @description: Captures the issue related events.
+   * @param {IssueEventProps} props
+   */
+  captureProjectStateEvent = (props: EventProps) => {
+    const { eventName, payload } = props;
+    const eventPayload: any = getProjectStateEventPayload({
+      ...this.getRequiredProperties,
+      ...payload,
+      element: payload.element ?? this.trackElement,
+    });
+    posthog?.capture(eventName, eventPayload);
+    this.setTrackElement(undefined);
   };
 }
diff --git a/web/store/user/index.ts b/web/store/user/index.ts
index b07764a05..15f9e5772 100644
--- a/web/store/user/index.ts
+++ b/web/store/user/index.ts
@@ -250,6 +250,7 @@ export class UserRootStore implements IUserRootStore {
         this.isUserLoggedIn = false;
       });
       this.membership = new UserMembershipStore(this.rootStore);
+      this.rootStore.eventTracker.resetSession();
       this.rootStore.resetOnSignout();
     });
 
@@ -264,6 +265,7 @@ export class UserRootStore implements IUserRootStore {
         this.isUserLoggedIn = false;
       });
       this.membership = new UserMembershipStore(this.rootStore);
+      this.rootStore.eventTracker.resetSession();
       this.rootStore.resetOnSignout();
     });
 }

From 1927fdd437ce1f0bdfe67ffa441bc2bc07fcacfe Mon Sep 17 00:00:00 2001
From: Prateek Shourya <prateekshourya29@gmail.com>
Date: Fri, 9 Feb 2024 16:37:39 +0530
Subject: [PATCH 43/58] feat: checkbox component (#3603)

* feat: custom checkbox component.

* improvement: checkbox component implementation in email notification settings.

* improvement: add loader in email notification settings page.
---
 packages/ui/src/form-fields/checkbox.tsx      | 67 +++++++++++++++++++
 packages/ui/src/form-fields/index.ts          |  1 +
 .../preferences/email-notification-form.tsx   | 39 +++--------
 web/pages/profile/preferences/email.tsx       | 14 +++-
 4 files changed, 91 insertions(+), 30 deletions(-)
 create mode 100644 packages/ui/src/form-fields/checkbox.tsx

diff --git a/packages/ui/src/form-fields/checkbox.tsx b/packages/ui/src/form-fields/checkbox.tsx
new file mode 100644
index 000000000..09b90b03b
--- /dev/null
+++ b/packages/ui/src/form-fields/checkbox.tsx
@@ -0,0 +1,67 @@
+import * as React from "react";
+
+export interface CheckboxProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  intermediate?: boolean;
+  className?: string;
+}
+
+const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>((props, ref) => {
+  const { id, name, checked, intermediate = false, disabled, className = "", ...rest } = props;
+
+  return (
+    <div className={`relative w-full flex gap-2 ${className}`}>
+      <input
+        id={id}
+        ref={ref}
+        type="checkbox"
+        name={name}
+        checked={checked}
+        className={`
+          appearance-none shrink-0 w-4 h-4 border rounded-[3px] focus:outline-1 focus:outline-offset-4 focus:outline-custom-primary-50
+          ${
+            disabled
+              ? "border-custom-border-200 bg-custom-background-80 cursor-not-allowed"
+              : `cursor-pointer ${
+                  checked || intermediate
+                    ? "border-custom-primary-40 bg-custom-primary-100 hover:bg-custom-primary-200"
+                    : "border-custom-border-300 hover:border-custom-border-400 bg-white"
+                }`
+          }
+        `}
+        disabled={disabled}
+        {...rest}
+      />
+      <svg
+        className={`absolute w-4 h-4 p-0.5 pointer-events-none outline-none ${
+          disabled ? "stroke-custom-text-400 opacity-40" : "stroke-white"
+        } ${checked ? "block" : "hidden"}`}
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="3"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      >
+        <polyline points="20 6 9 17 4 12" />
+      </svg>
+      <svg
+        className={`absolute w-4 h-4 p-0.5 pointer-events-none outline-none ${
+          disabled ? "stroke-custom-text-400 opacity-40" : "stroke-white"
+        } ${intermediate && !checked ? "block" : "hidden"}`}
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 8 8"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="3"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      >
+        <path d="M5.75 4H2.25" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+      </svg>
+    </div>
+  );
+});
+Checkbox.displayName = "form-checkbox-field";
+
+export { Checkbox };
diff --git a/packages/ui/src/form-fields/index.ts b/packages/ui/src/form-fields/index.ts
index 9cac73428..f19adcdc5 100644
--- a/packages/ui/src/form-fields/index.ts
+++ b/packages/ui/src/form-fields/index.ts
@@ -1,3 +1,4 @@
 export * from "./input";
 export * from "./textarea";
 export * from "./input-color-picker";
+export * from "./checkbox";
diff --git a/web/components/profile/preferences/email-notification-form.tsx b/web/components/profile/preferences/email-notification-form.tsx
index 898044c60..e041b28d8 100644
--- a/web/components/profile/preferences/email-notification-form.tsx
+++ b/web/components/profile/preferences/email-notification-form.tsx
@@ -1,7 +1,7 @@
-import { FC } from "react";
+import React, { FC } from "react";
 import { Controller, useForm } from "react-hook-form";
 // ui
-import { Button } from "@plane/ui";
+import { Button, Checkbox } from "@plane/ui";
 // hooks
 import useToast from "hooks/use-toast";
 // services
@@ -23,6 +23,7 @@ export const EmailNotificationForm: FC<IEmailNotificationFormProps> = (props) =>
   // form data
   const {
     handleSubmit,
+    watch,
     control,
     setValue,
     formState: { isSubmitting, isDirty, dirtyFields },
@@ -78,12 +79,7 @@ export const EmailNotificationForm: FC<IEmailNotificationFormProps> = (props) =>
               control={control}
               name="property_change"
               render={({ field: { value, onChange } }) => (
-                <input
-                  type="checkbox"
-                  checked={value}
-                  onChange={() => onChange(!value)}
-                  className="w-3.5 h-3.5 mx-2 cursor-pointer !border-custom-border-100"
-                />
+                <Checkbox checked={value} onChange={() => onChange(!value)} className="mx-2" />
               )}
             />
           </div>
@@ -100,14 +96,14 @@ export const EmailNotificationForm: FC<IEmailNotificationFormProps> = (props) =>
               control={control}
               name="state_change"
               render={({ field: { value, onChange } }) => (
-                <input
-                  type="checkbox"
+                <Checkbox
                   checked={value}
+                  intermediate={!value && watch("issue_completed")}
                   onChange={() => {
                     setValue("issue_completed", !value);
                     onChange(!value);
                   }}
-                  className="w-3.5 h-3.5 mx-2 cursor-pointer"
+                  className="mx-2"
                 />
               )}
             />
@@ -123,12 +119,7 @@ export const EmailNotificationForm: FC<IEmailNotificationFormProps> = (props) =>
               control={control}
               name="issue_completed"
               render={({ field: { value, onChange } }) => (
-                <input
-                  type="checkbox"
-                  checked={value}
-                  onChange={() => onChange(!value)}
-                  className="w-3.5 h-3.5 mx-2 cursor-pointer"
-                />
+                <Checkbox checked={value} onChange={() => onChange(!value)} className="mx-2" />
               )}
             />
           </div>
@@ -145,12 +136,7 @@ export const EmailNotificationForm: FC<IEmailNotificationFormProps> = (props) =>
               control={control}
               name="comment"
               render={({ field: { value, onChange } }) => (
-                <input
-                  type="checkbox"
-                  checked={value}
-                  onChange={() => onChange(!value)}
-                  className="w-3.5 h-3.5 mx-2 cursor-pointer"
-                />
+                <Checkbox checked={value} onChange={() => onChange(!value)} className="mx-2" />
               )}
             />
           </div>
@@ -167,12 +153,7 @@ export const EmailNotificationForm: FC<IEmailNotificationFormProps> = (props) =>
               control={control}
               name="mention"
               render={({ field: { value, onChange } }) => (
-                <input
-                  type="checkbox"
-                  checked={value}
-                  onChange={() => onChange(!value)}
-                  className="w-3.5 h-3.5 mx-2 cursor-pointer"
-                />
+                <Checkbox checked={value} onChange={() => onChange(!value)} className="mx-2" />
               )}
             />
           </div>
diff --git a/web/pages/profile/preferences/email.tsx b/web/pages/profile/preferences/email.tsx
index 714d8b555..7db6df113 100644
--- a/web/pages/profile/preferences/email.tsx
+++ b/web/pages/profile/preferences/email.tsx
@@ -2,6 +2,8 @@ import { ReactElement } from "react";
 import useSWR from "swr";
 // layouts
 import { ProfilePreferenceSettingsLayout } from "layouts/settings-layout/profile/preferences";
+// ui
+import { Loader } from "@plane/ui";
 // components
 import { EmailNotificationForm } from "components/profile/preferences";
 // services
@@ -14,10 +16,20 @@ const userService = new UserService();
 
 const ProfilePreferencesThemePage: NextPageWithLayout = () => {
   // fetching user email notification settings
-  const { data } = useSWR("CURRENT_USER_EMAIL_NOTIFICATION_SETTINGS", () =>
+  const { data, isLoading } = useSWR("CURRENT_USER_EMAIL_NOTIFICATION_SETTINGS", () =>
     userService.currentUserEmailNotificationSettings()
   );
 
+  if (isLoading) {
+    return (
+      <Loader className="space-y-4 mt-8 px-6 lg:px-20">
+        <Loader.Item height="40px" />
+        <Loader.Item height="40px" />
+        <Loader.Item height="40px" />
+      </Loader>
+    );
+  }
+
   if (!data) {
     return null;
   }

From 3f7f91e120bd75c10047451464fdfddba5e6f5b1 Mon Sep 17 00:00:00 2001
From: Ramesh Kumar Chandra
 <31303617+rameshkumarchandra@users.noreply.github.com>
Date: Mon, 12 Feb 2024 12:34:15 +0530
Subject: [PATCH 44/58] fix: breadcrumbs responsiveness fix, modules list
 mobile responsive layout component added, inbox button fix for
 responsiveness, board view card responsiveness in cycles and modules (#3620)

---
 packages/ui/src/breadcrumbs/breadcrumbs.tsx   |  72 ++++++--
 web/components/cycles/cycle-peek-overview.tsx |   2 +-
 web/components/cycles/cycles-board-card.tsx   |   8 +-
 web/components/cycles/cycles-list-item.tsx    |   2 +-
 web/components/cycles/sidebar.tsx             |  26 ++-
 web/components/headers/cycle-issues.tsx       |   6 +-
 web/components/headers/cycles.tsx             |   4 +-
 web/components/headers/module-issues.tsx      |  11 +-
 web/components/headers/modules-list.tsx       | 156 +++++++++-------
 web/components/headers/project-issues.tsx     |  75 ++++----
 web/components/headers/project-settings.tsx   |   2 +-
 web/components/headers/projects.tsx           |   2 +-
 web/components/modules/module-card-item.tsx   |   8 +-
 web/components/modules/module-list-item.tsx   | 171 +++++++++---------
 .../modules/module-peek-overview.tsx          |   2 +-
 web/components/modules/sidebar.tsx            |  27 ++-
 16 files changed, 320 insertions(+), 254 deletions(-)

diff --git a/packages/ui/src/breadcrumbs/breadcrumbs.tsx b/packages/ui/src/breadcrumbs/breadcrumbs.tsx
index a2ae1d680..9a3b69bb8 100644
--- a/packages/ui/src/breadcrumbs/breadcrumbs.tsx
+++ b/packages/ui/src/breadcrumbs/breadcrumbs.tsx
@@ -1,35 +1,73 @@
 import * as React from "react";
-
-// icons
 import { ChevronRight } from "lucide-react";
 
 type BreadcrumbsProps = {
-  children: any;
+  children: React.ReactNode;
+  onBack?: () => void;
 };
 
-const Breadcrumbs = ({ children }: BreadcrumbsProps) => (
-  <div className="flex items-center space-x-2">
-    {React.Children.map(children, (child, index) => (
-      <div key={index} className="flex items-center gap-2.5">
-        {child}
-        {index !== React.Children.count(children) - 1 && (
-          <ChevronRight className="h-3.5 w-3.5 flex-shrink-0 text-custom-text-400" aria-hidden="true" />
-        )}
-      </div>
-    ))}
-  </div>
-);
+const Breadcrumbs = ({ children, onBack }: BreadcrumbsProps) => {
+  const [isSmallScreen, setIsSmallScreen] = React.useState(false);
+
+  React.useEffect(() => {
+    const handleResize = () => {
+      setIsSmallScreen(window.innerWidth <= 640); // Adjust this value as per your requirement
+    };
+
+    window.addEventListener("resize", handleResize);
+    handleResize(); // Call it initially to set the correct state
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+
+  const childrenArray = React.Children.toArray(children);
+
+  return (
+    <div className="flex items-center space-x-2 overflow-hidden">
+      {!isSmallScreen && (
+        <>
+          {childrenArray.map((child, index) => (
+            <React.Fragment key={index}>
+              {index > 0 && !isSmallScreen && (
+                <div className="flex items-center gap-2.5">
+                  <ChevronRight
+                    className="h-3.5 w-3.5 flex-shrink-0 text-custom-text-400"
+                    aria-hidden="true"
+                  />
+                </div>
+              )}
+              <div className={`flex items-center gap-2.5 ${isSmallScreen && index > 0 ? 'hidden sm:flex' : 'flex'}`}>
+                {child}
+              </div>
+            </React.Fragment>
+          ))}
+        </>
+      )}
+
+      {isSmallScreen && childrenArray.length > 1 && (
+        <>
+          <div className="flex items-center gap-2.5">
+            {onBack && <span onClick={onBack} className="text-custom-text-200">...</span>}
+            <ChevronRight className="h-3.5 w-3.5 flex-shrink-0 text-custom-text-400" aria-hidden="true" />
+          </div>
+          <div className="flex items-center gap-2.5">{childrenArray[childrenArray.length - 1]}</div>
+        </>
+      )}
+      {isSmallScreen && childrenArray.length === 1 && childrenArray}
+    </div>
+  );
+};
 
 type Props = {
   type?: "text" | "component";
   component?: React.ReactNode;
   link?: JSX.Element;
 };
+
 const BreadcrumbItem: React.FC<Props> = (props) => {
   const { type = "text", component, link } = props;
-  return <>{type != "text" ? <div className="flex items-center space-x-2">{component}</div> : link}</>;
+  return <>{type !== "text" ? <div className="flex items-center space-x-2">{component}</div> : link}</>;
 };
 
 Breadcrumbs.BreadcrumbItem = BreadcrumbItem;
 
-export { Breadcrumbs, BreadcrumbItem };
+export { Breadcrumbs, BreadcrumbItem };
\ No newline at end of file
diff --git a/web/components/cycles/cycle-peek-overview.tsx b/web/components/cycles/cycle-peek-overview.tsx
index b7acff358..fbfb46b50 100644
--- a/web/components/cycles/cycle-peek-overview.tsx
+++ b/web/components/cycles/cycle-peek-overview.tsx
@@ -38,7 +38,7 @@ export const CyclePeekOverview: React.FC<Props> = observer(({ projectId, workspa
       {peekCycle && (
         <div
           ref={ref}
-          className="flex h-full w-[24rem] flex-shrink-0 flex-col gap-3.5 overflow-y-auto border-l border-custom-border-100 bg-custom-sidebar-background-100 px-6 py-3.5 duration-300"
+          className="flex h-full w-full max-w-[24rem] flex-shrink-0 flex-col gap-3.5 overflow-y-auto border-l border-custom-border-100 bg-custom-sidebar-background-100 px-6 py-3.5 duration-300 fixed md:relative right-0 z-[9]"
           style={{
             boxShadow:
               "0px 1px 4px 0px rgba(0, 0, 0, 0.06), 0px 2px 4px 0px rgba(16, 24, 40, 0.06), 0px 1px 8px -1px rgba(16, 24, 40, 0.06)",
diff --git a/web/components/cycles/cycles-board-card.tsx b/web/components/cycles/cycles-board-card.tsx
index bad7df0e5..366688dac 100644
--- a/web/components/cycles/cycles-board-card.tsx
+++ b/web/components/cycles/cycles-board-card.tsx
@@ -68,8 +68,8 @@ export const CyclesBoardCard: FC<ICyclesBoardCard> = (props) => {
     ? cycleTotalIssues === 0
       ? "0 Issue"
       : cycleTotalIssues === cycleDetails.completed_issues
-      ? `${cycleTotalIssues} Issue${cycleTotalIssues > 1 ? "s" : ""}`
-      : `${cycleDetails.completed_issues}/${cycleTotalIssues} Issues`
+        ? `${cycleTotalIssues} Issue${cycleTotalIssues > 1 ? "s" : ""}`
+        : `${cycleDetails.completed_issues}/${cycleTotalIssues} Issues`
     : "0 Issue";
 
   const handleCopyText = (e: MouseEvent<HTMLButtonElement>) => {
@@ -158,7 +158,7 @@ export const CyclesBoardCard: FC<ICyclesBoardCard> = (props) => {
       />
 
       <Link href={`/${workspaceSlug}/projects/${projectId}/cycles/${cycleDetails.id}`}>
-        <div className="flex h-44 w-full min-w-[250px] flex-col justify-between rounded  border border-custom-border-100 bg-custom-background-100 p-4 text-sm hover:shadow-md">
+        <div className="flex h-44 w-full flex-col justify-between rounded  border border-custom-border-100 bg-custom-background-100 p-4 text-sm hover:shadow-md">
           <div className="flex items-center justify-between gap-2">
             <div className="flex items-center gap-3 truncate">
               <span className="flex-shrink-0">
@@ -236,7 +236,7 @@ export const CyclesBoardCard: FC<ICyclesBoardCard> = (props) => {
               ) : (
                 <span className="text-xs text-custom-text-400">No due date</span>
               )}
-              <div className="z-10 flex items-center gap-1.5">
+              <div className="z-[5] flex items-center gap-1.5">
                 {isEditingAllowed &&
                   (cycleDetails.is_favorite ? (
                     <button type="button" onClick={handleRemoveFromFavorites}>
diff --git a/web/components/cycles/cycles-list-item.tsx b/web/components/cycles/cycles-list-item.tsx
index 725480241..43a6323ad 100644
--- a/web/components/cycles/cycles-list-item.tsx
+++ b/web/components/cycles/cycles-list-item.tsx
@@ -187,7 +187,7 @@ export const CyclesListItem: FC<TCyclesListItem> = (props) => {
                 </Tooltip>
               </div>
 
-              <button onClick={openCycleOverview} className="flex-shrink-0 z-10 invisible group-hover:visible">
+              <button onClick={openCycleOverview} className="flex-shrink-0 z-[5] invisible group-hover:visible">
                 <Info className="h-4 w-4 text-custom-text-400" />
               </button>
             </div>
diff --git a/web/components/cycles/sidebar.tsx b/web/components/cycles/sidebar.tsx
index 299c71008..1a7bf9c58 100644
--- a/web/components/cycles/sidebar.tsx
+++ b/web/components/cycles/sidebar.tsx
@@ -403,15 +403,13 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
                   <>
                     <Popover.Button
                       ref={startDateButtonRef}
-                      className={`w-full cursor-pointer rounded-sm text-sm font-medium text-custom-text-300 hover:bg-custom-background-80 ${
-                        isEditingAllowed ? "cursor-pointer" : "cursor-not-allowed"
-                      }`}
+                      className={`w-full cursor-pointer rounded-sm text-sm font-medium text-custom-text-300 hover:bg-custom-background-80 ${isEditingAllowed ? "cursor-pointer" : "cursor-not-allowed"
+                        }`}
                       disabled={isCompleted || !isEditingAllowed}
                     >
                       <span
-                        className={`group flex w-full items-center justify-between gap-2 px-1.5 py-1 text-sm ${
-                          watch("start_date") ? "" : "text-custom-text-400"
-                        }`}
+                        className={`group flex w-full items-center justify-between gap-2 px-1.5 py-1 text-sm ${watch("start_date") ? "" : "text-custom-text-400"
+                          }`}
                       >
                         {renderFormattedDate(startDate) ?? "No date selected"}
                       </span>
@@ -460,15 +458,13 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
                   <>
                     <Popover.Button
                       ref={endDateButtonRef}
-                      className={`w-full cursor-pointer rounded-sm text-sm font-medium text-custom-text-300 hover:bg-custom-background-80 ${
-                        isEditingAllowed ? "cursor-pointer" : "cursor-not-allowed"
-                      }`}
+                      className={`w-full cursor-pointer rounded-sm text-sm font-medium text-custom-text-300 hover:bg-custom-background-80 ${isEditingAllowed ? "cursor-pointer" : "cursor-not-allowed"
+                        }`}
                       disabled={isCompleted || !isEditingAllowed}
                     >
                       <span
-                        className={`group flex w-full items-center justify-between gap-2 px-1.5 py-1 text-sm ${
-                          watch("end_date") ? "" : "text-custom-text-400"
-                        }`}
+                        className={`group flex w-full items-center justify-between gap-2 px-1.5 py-1 text-sm ${watch("end_date") ? "" : "text-custom-text-400"
+                          }`}
                       >
                         {renderFormattedDate(endDate) ?? "No date selected"}
                       </span>
@@ -569,8 +565,8 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
                     <Disclosure.Panel>
                       <div className="flex flex-col gap-3">
                         {cycleDetails.distribution?.completion_chart &&
-                        cycleDetails.start_date &&
-                        cycleDetails.end_date ? (
+                          cycleDetails.start_date &&
+                          cycleDetails.end_date ? (
                           <div className="h-full w-full pt-4">
                             <div className="flex  items-start  gap-4 py-2 text-xs">
                               <div className="flex items-center gap-3 text-custom-text-100">
@@ -584,7 +580,7 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
                                 </div>
                               </div>
                             </div>
-                            <div className="relative h-40 w-80">
+                            <div className="relative h-40 w-full max-w-80">
                               <ProgressChart
                                 distribution={cycleDetails.distribution?.completion_chart}
                                 startDate={cycleDetails.start_date}
diff --git a/web/components/headers/cycle-issues.tsx b/web/components/headers/cycle-issues.tsx
index 44f4f944d..05030c500 100644
--- a/web/components/headers/cycle-issues.tsx
+++ b/web/components/headers/cycle-issues.tsx
@@ -153,7 +153,7 @@ export const CycleIssuesHeader: React.FC = observer(() => {
         <div className="flex justify-between border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
           <div className="flex items-center gap-2">
             <SidebarHamburgerToggle />
-            <Breadcrumbs>
+            <Breadcrumbs onBack={router.back}>
               <Breadcrumbs.BreadcrumbItem
                 type="text"
                 link={
@@ -196,7 +196,9 @@ export const CycleIssuesHeader: React.FC = observer(() => {
                     label={
                       <>
                         <ContrastIcon className="h-3 w-3" />
-                        {cycleDetails?.name && truncateText(cycleDetails.name, 40)}
+                        <div className=" w-auto max-w-[70px] sm:max-w-[200px] inline-block truncate line-clamp-1 overflow-hidden whitespace-nowrap">
+                          {cycleDetails?.name && cycleDetails.name}
+                        </div>
                       </>
                     }
                     className="ml-1.5 flex-shrink-0"
diff --git a/web/components/headers/cycles.tsx b/web/components/headers/cycles.tsx
index a4bf963ab..496fabecd 100644
--- a/web/components/headers/cycles.tsx
+++ b/web/components/headers/cycles.tsx
@@ -50,7 +50,7 @@ export const CyclesHeader: FC = observer(() => {
         <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
           <SidebarHamburgerToggle />
           <div>
-            <Breadcrumbs>
+            <Breadcrumbs onBack={router.back}>
               <Breadcrumbs.BreadcrumbItem
                 type="text"
                 link={
@@ -89,7 +89,7 @@ export const CyclesHeader: FC = observer(() => {
                 toggleCreateCycleModal(true);
               }}
             >
-              Add Cycle
+              <div className="hidden sm:block">Add</div> Cycle
             </Button>
           </div>
         )}
diff --git a/web/components/headers/module-issues.tsx b/web/components/headers/module-issues.tsx
index 6287223b0..d51c0f432 100644
--- a/web/components/headers/module-issues.tsx
+++ b/web/components/headers/module-issues.tsx
@@ -21,7 +21,7 @@ import { ProjectAnalyticsModal } from "components/analytics";
 import { SidebarHamburgerToggle } from "components/core/sidebar/sidebar-menu-hamburger-toggle";
 import { BreadcrumbLink } from "components/common";
 // ui
-import { Breadcrumbs, Button, CustomMenu, DiceIcon } from "@plane/ui";
+import { Breadcrumbs, Button, CustomMenu, DiceIcon, LayersIcon } from "@plane/ui";
 // icons
 import { ArrowRight, PanelRight, Plus } from "lucide-react";
 // helpers
@@ -156,7 +156,7 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
         <div className="flex justify-between border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
           <div className="flex items-center gap-2">
             <SidebarHamburgerToggle />
-            <Breadcrumbs>
+            <Breadcrumbs onBack={router.back}>
               <Breadcrumbs.BreadcrumbItem
                 type="text"
                 link={
@@ -199,7 +199,9 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
                     label={
                       <>
                         <DiceIcon className="h-3 w-3" />
-                        {moduleDetails?.name && truncateText(moduleDetails.name, 40)}
+                        <div className="w-auto max-w-[70px] sm:max-w-[200px] inline-block truncate line-clamp-1 overflow-hidden whitespace-nowrap">
+                          {moduleDetails?.name && moduleDetails.name}
+                        </div>
                       </>
                     }
                     className="ml-1.5 flex-shrink-0"
@@ -251,6 +253,7 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
                   Analytics
                 </Button>
                 <Button
+                  className="hidden sm:flex"
                   onClick={() => {
                     setTrackElement("Module issues page");
                     toggleCreateIssueModal(true, EIssuesStoreType.MODULE);
@@ -258,7 +261,7 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
                   size="sm"
                   prependIcon={<Plus />}
                 >
-                  <span className="hidden md:block">Add</span> Issue
+                  Add Issue
                 </Button>
               </>
             )}
diff --git a/web/components/headers/modules-list.tsx b/web/components/headers/modules-list.tsx
index 91e05db46..9ad34678a 100644
--- a/web/components/headers/modules-list.tsx
+++ b/web/components/headers/modules-list.tsx
@@ -1,11 +1,11 @@
 import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
-import { Plus } from "lucide-react";
+import { GanttChartSquare, LayoutGrid, List, Plus } from "lucide-react";
 // hooks
 import { useApplication, useEventTracker, useProject, useUser } from "hooks/store";
 import useLocalStorage from "hooks/use-local-storage";
 // ui
-import { Breadcrumbs, Button, Tooltip, DiceIcon } from "@plane/ui";
+import { Breadcrumbs, Button, Tooltip, DiceIcon, CustomMenu } from "@plane/ui";
 // helper
 import { renderEmoji } from "helpers/emoji.helper";
 // constants
@@ -31,75 +31,101 @@ export const ModulesListHeader: React.FC = observer(() => {
 
   const canUserCreateModule =
     currentProjectRole && [EUserProjectRoles.ADMIN, EUserProjectRoles.MEMBER].includes(currentProjectRole);
-
   return (
-    <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
-      <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
-        <SidebarHamburgerToggle />
-        <div>
-          <Breadcrumbs>
-            <Breadcrumbs.BreadcrumbItem
-              type="text"
-              link={
-                <BreadcrumbLink
-                  href={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`}
-                  label={currentProjectDetails?.name ?? "Project"}
-                  icon={
-                    currentProjectDetails?.emoji ? (
-                      renderEmoji(currentProjectDetails.emoji)
-                    ) : currentProjectDetails?.icon_prop ? (
-                      renderEmoji(currentProjectDetails.icon_prop)
-                    ) : (
-                      <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
-                        {currentProjectDetails?.name.charAt(0)}
-                      </span>
-                    )
-                  }
-                />
-              }
-            />
-            <Breadcrumbs.BreadcrumbItem
-              type="text"
-              link={<BreadcrumbLink label="Modules" icon={<DiceIcon className="h-4 w-4 text-custom-text-300" />} />}
-            />
-          </Breadcrumbs>
+    <div>
+      <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
+        <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
+          <SidebarHamburgerToggle />
+          <div>
+            <Breadcrumbs onBack={router.back}>
+              <Breadcrumbs.BreadcrumbItem
+                type="text"
+                link={
+                  <BreadcrumbLink
+                    href={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`}
+                    label={currentProjectDetails?.name ?? "Project"}
+                    icon={
+                      currentProjectDetails?.emoji ? (
+                        renderEmoji(currentProjectDetails.emoji)
+                      ) : currentProjectDetails?.icon_prop ? (
+                        renderEmoji(currentProjectDetails.icon_prop)
+                      ) : (
+                        <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
+                          {currentProjectDetails?.name.charAt(0)}
+                        </span>
+                      )
+                    }
+                  />
+                }
+              />
+              <Breadcrumbs.BreadcrumbItem
+                type="text"
+                link={<BreadcrumbLink label="Modules" icon={<DiceIcon className="h-4 w-4 text-custom-text-300" />} />}
+              />
+            </Breadcrumbs>
+          </div>
+        </div>
+        <div className="flex items-center gap-2">
+          <div className="items-center gap-1 rounded bg-custom-background-80 p-1 hidden md:flex">
+            {MODULE_VIEW_LAYOUTS.map((layout) => (
+              <Tooltip key={layout.key} tooltipContent={layout.title}>
+                <button
+                  type="button"
+                  className={`group grid h-[22px] w-7 place-items-center overflow-hidden rounded transition-all hover:bg-custom-background-100 ${modulesView == layout.key ? "bg-custom-background-100 shadow-custom-shadow-2xs" : ""
+                    }`}
+                  onClick={() => setModulesView(layout.key)}
+                >
+                  <layout.icon
+                    strokeWidth={2}
+                    className={`h-3.5 w-3.5 ${modulesView == layout.key ? "text-custom-text-100" : "text-custom-text-200"
+                      }`}
+                  />
+                </button>
+              </Tooltip>
+            ))}
+          </div>
+          {canUserCreateModule && (
+            <Button
+              variant="primary"
+              size="sm"
+              prependIcon={<Plus />}
+              onClick={() => {
+                setTrackElement("Modules page");
+                commandPaletteStore.toggleCreateModuleModal(true);
+              }}
+            >
+              <div className="hidden sm:block">Add</div> Module
+            </Button>
+          )}
         </div>
       </div>
-      <div className="flex items-center gap-2">
-        <div className="flex items-center gap-1 rounded bg-custom-background-80 p-1">
+      <div className="flex justify-center md:hidden">
+        <CustomMenu
+          maxHeight={"md"}
+          className="flex flex-grow justify-center text-custom-text-200 text-sm py-2 border-b border-custom-border-200 bg-custom-sidebar-background-100"
+          // placement="bottom-start"
+          customButton={
+            <span className="flex items-center gap-2">
+              {modulesView === 'gantt_chart' ? <GanttChartSquare className="w-3 h-3" /> : modulesView === 'grid' ? <LayoutGrid className="w-3 h-3" /> : <List className="w-3 h-3" />}
+              <span className="flex flex-grow justify-center text-custom-text-200 text-sm">Layout</span>
+            </span>
+          }
+          customButtonClassName="flex flex-grow justify-center items-center text-custom-text-200 text-sm"
+          closeOnSelect
+        >
           {MODULE_VIEW_LAYOUTS.map((layout) => (
-            <Tooltip key={layout.key} tooltipContent={layout.title}>
-              <button
-                type="button"
-                className={`group grid h-[22px] w-7 place-items-center overflow-hidden rounded transition-all hover:bg-custom-background-100 ${
-                  modulesView == layout.key ? "bg-custom-background-100 shadow-custom-shadow-2xs" : ""
-                }`}
-                onClick={() => setModulesView(layout.key)}
-              >
-                <layout.icon
-                  strokeWidth={2}
-                  className={`h-3.5 w-3.5 ${
-                    modulesView == layout.key ? "text-custom-text-100" : "text-custom-text-200"
-                  }`}
-                />
-              </button>
-            </Tooltip>
+            <CustomMenu.MenuItem
+              onClick={() => setModulesView(layout.key)}
+              className="flex items-center gap-2"
+            >
+              <layout.icon className="w-3 h-3" />
+              <div className="text-custom-text-300">{layout.title}</div>
+            </CustomMenu.MenuItem>
           ))}
-        </div>
-        {canUserCreateModule && (
-          <Button
-            variant="primary"
-            size="sm"
-            prependIcon={<Plus />}
-            onClick={() => {
-              setTrackElement("Modules page");
-              commandPaletteStore.toggleCreateModuleModal(true);
-            }}
-          >
-            Add Module
-          </Button>
-        )}
+        </CustomMenu>
       </div>
     </div>
   );
 });
+
+
diff --git a/web/components/headers/project-issues.tsx b/web/components/headers/project-issues.tsx
index 81e2d2d76..c645c6318 100644
--- a/web/components/headers/project-issues.tsx
+++ b/web/components/headers/project-issues.tsx
@@ -2,7 +2,7 @@ import { useCallback, useState } from "react";
 import Link from "next/link";
 import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
-import { Briefcase, Circle, ExternalLink, Plus } from "lucide-react";
+import { Briefcase, Circle, ExternalLink, Plus, Inbox } from "lucide-react";
 // hooks
 import {
   useApplication,
@@ -120,35 +120,35 @@ export const ProjectIssuesHeader: React.FC = observer(() => {
           <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
             <SidebarHamburgerToggle />
             <div>
-              <Breadcrumbs>
+              <Breadcrumbs onBack={() => router.back()}>
                 <Breadcrumbs.BreadcrumbItem
                   type="text"
                   link={
-                      <BreadcrumbLink
-                        href={`/${workspaceSlug}/projects`}
-                        label={currentProjectDetails?.name ?? "Project"}
-                        icon={
-                          currentProjectDetails ? (
-                            currentProjectDetails?.emoji ? (
-                              <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded uppercase">
-                                {renderEmoji(currentProjectDetails.emoji)}
-                              </span>
-                            ) : currentProjectDetails?.icon_prop ? (
-                              <div className="grid h-7 w-7 flex-shrink-0 place-items-center">
-                                {renderEmoji(currentProjectDetails.icon_prop)}
-                              </div>
-                            ) : (
-                              <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
-                                {currentProjectDetails?.name.charAt(0)}
-                              </span>
-                            )
-                          ) : (
+                    <BreadcrumbLink
+                      href={`/${workspaceSlug}/projects`}
+                      label={currentProjectDetails?.name ?? "Project"}
+                      icon={
+                        currentProjectDetails ? (
+                          currentProjectDetails?.emoji ? (
                             <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded uppercase">
-                              <Briefcase className="h-4 w-4" />
+                              {renderEmoji(currentProjectDetails.emoji)}
+                            </span>
+                          ) : currentProjectDetails?.icon_prop ? (
+                            <div className="grid h-7 w-7 flex-shrink-0 place-items-center">
+                              {renderEmoji(currentProjectDetails.icon_prop)}
+                            </div>
+                          ) : (
+                            <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
+                              {currentProjectDetails?.name.charAt(0)}
                             </span>
                           )
-                        }
-                      />
+                        ) : (
+                          <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded uppercase">
+                            <Briefcase className="h-4 w-4" />
+                          </span>
+                        )
+                      }
+                    />
                   }
                 />
 
@@ -202,18 +202,19 @@ export const ProjectIssuesHeader: React.FC = observer(() => {
             </FiltersDropdown>
           </div>
           {currentProjectDetails?.inbox_view && inboxDetails && (
-              <Link href={`/${workspaceSlug}/projects/${projectId}/inbox/${inboxDetails?.id}`}>
-                <span>
-                  <Button variant="neutral-primary" size="sm" className="relative">
-                    Inbox
-                    {inboxDetails?.pending_issue_count > 0 && (
-                      <span className="absolute -right-1.5 -top-1.5 h-4 w-4 rounded-full border border-custom-sidebar-border-200 bg-custom-sidebar-background-80 text-custom-text-100">
-                        {inboxDetails?.pending_issue_count}
-                      </span>
-                    )}
-                  </Button>
-                </span>
-              </Link>
+            <Link href={`/${workspaceSlug}/projects/${projectId}/inbox/${inboxDetails?.id}`}>
+              <span className="hidden md:block" >
+                <Button variant="neutral-primary" size="sm" className="relative">
+                  Inbox
+                  {inboxDetails?.pending_issue_count > 0 && (
+                    <span className="absolute -right-1.5 -top-1.5 h-4 w-4 rounded-full border border-custom-sidebar-border-200 bg-custom-sidebar-background-80 text-custom-text-100">
+                      {inboxDetails?.pending_issue_count}
+                    </span>
+                  )}
+                </Button>
+              </span>
+              <Inbox className="w-4 h-4 mr-2 text-custom-text-200" />
+            </Link>
           )}
           {canUserCreateIssue && (
             <>
@@ -228,7 +229,7 @@ export const ProjectIssuesHeader: React.FC = observer(() => {
                 size="sm"
                 prependIcon={<Plus />}
               >
-                Add Issue
+                <div className="hidden sm:block">Add</div> Issue
               </Button>
             </>
           )}
diff --git a/web/components/headers/project-settings.tsx b/web/components/headers/project-settings.tsx
index fdb033a21..b70a4614f 100644
--- a/web/components/headers/project-settings.tsx
+++ b/web/components/headers/project-settings.tsx
@@ -36,7 +36,7 @@ export const ProjectSettingHeader: FC<IProjectSettingHeader> = observer((props)
       <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
         <div>
           <div className="z-50">
-            <Breadcrumbs>
+            <Breadcrumbs onBack={router.back}>
               <Breadcrumbs.BreadcrumbItem
                 type="text"
                 link={
diff --git a/web/components/headers/projects.tsx b/web/components/headers/projects.tsx
index 34b1a6ef8..f6dd7fd3c 100644
--- a/web/components/headers/projects.tsx
+++ b/web/components/headers/projects.tsx
@@ -56,7 +56,7 @@ export const ProjectsHeader = observer(() => {
             }}
             className="items-center"
           >
-            Add Project
+            <div className="hidden sm:block">Add</div> Project
           </Button>
         )}
       </div>
diff --git a/web/components/modules/module-card-item.tsx b/web/components/modules/module-card-item.tsx
index 3d83be010..3275f1fe0 100644
--- a/web/components/modules/module-card-item.tsx
+++ b/web/components/modules/module-card-item.tsx
@@ -130,8 +130,8 @@ export const ModuleCardItem: React.FC<Props> = observer((props) => {
     ? !moduleTotalIssues || moduleTotalIssues === 0
       ? "0 Issue"
       : moduleTotalIssues === moduleDetails.completed_issues
-      ? `${moduleTotalIssues} Issue${moduleTotalIssues > 1 ? "s" : ""}`
-      : `${moduleDetails.completed_issues}/${moduleTotalIssues} Issues`
+        ? `${moduleTotalIssues} Issue${moduleTotalIssues > 1 ? "s" : ""}`
+        : `${moduleDetails.completed_issues}/${moduleTotalIssues} Issues`
     : "0 Issue";
 
   return (
@@ -147,7 +147,7 @@ export const ModuleCardItem: React.FC<Props> = observer((props) => {
       )}
       <DeleteModuleModal data={moduleDetails} isOpen={deleteModal} onClose={() => setDeleteModal(false)} />
       <Link href={`/${workspaceSlug}/projects/${moduleDetails.project}/modules/${moduleDetails.id}`}>
-        <div className="flex h-44 w-full min-w-[250px] flex-col justify-between rounded  border border-custom-border-100 bg-custom-background-100 p-4 text-sm hover:shadow-md">
+        <div className="flex h-44 w-full flex-col justify-between rounded  border border-custom-border-100 bg-custom-background-100 p-4 text-sm hover:shadow-md">
           <div>
             <div className="flex items-center justify-between gap-2">
               <Tooltip tooltipContent={moduleDetails.name} position="top">
@@ -223,7 +223,7 @@ export const ModuleCardItem: React.FC<Props> = observer((props) => {
                 <span className="text-xs text-custom-text-400">No due date</span>
               )}
 
-              <div className="z-10 flex items-center gap-1.5">
+              <div className="z-[5] flex items-center gap-1.5">
                 {isEditingAllowed &&
                   (moduleDetails.is_favorite ? (
                     <button type="button" onClick={handleRemoveFromFavorites}>
diff --git a/web/components/modules/module-list-item.tsx b/web/components/modules/module-list-item.tsx
index 7232c8815..81d0a6d6c 100644
--- a/web/components/modules/module-list-item.tsx
+++ b/web/components/modules/module-list-item.tsx
@@ -137,38 +137,37 @@ export const ModuleListItem: React.FC<Props> = observer((props) => {
       )}
       <DeleteModuleModal data={moduleDetails} isOpen={deleteModal} onClose={() => setDeleteModal(false)} />
       <Link href={`/${workspaceSlug}/projects/${moduleDetails.project}/modules/${moduleDetails.id}`}>
-        <div className="group flex h-16 w-full items-center justify-between gap-5 border-b border-custom-border-100 bg-custom-background-100 px-5 py-6 text-sm hover:bg-custom-background-90">
-          <div className="flex w-full items-center gap-3 truncate">
-            <div className="flex items-center gap-4 truncate">
-              <span className="flex-shrink-0">
-                <CircularProgressIndicator size={38} percentage={progress}>
-                  {completedModuleCheck ? (
-                    progress === 100 ? (
+        <div className="group flex w-full items-center justify-between gap-5 border-b border-custom-border-100 bg-custom-background-100 flex-col sm:flex-row px-5 py-6 text-sm hover:bg-custom-background-90">
+          <div className="relative flex w-full items-center gap-3 justify-between overflow-hidden">
+            <div className="relative w-full flex items-center gap-3 overflow-hidden">
+              <div className="flex items-center gap-4 truncate">
+                <span className="flex-shrink-0">
+                  <CircularProgressIndicator size={38} percentage={progress}>
+                    {completedModuleCheck ? (
+                      progress === 100 ? (
+                        <Check className="h-3 w-3 stroke-[2] text-custom-primary-100" />
+                      ) : (
+                        <span className="text-sm text-custom-primary-100">{`!`}</span>
+                      )
+                    ) : progress === 100 ? (
                       <Check className="h-3 w-3 stroke-[2] text-custom-primary-100" />
                     ) : (
-                      <span className="text-sm text-custom-primary-100">{`!`}</span>
-                    )
-                  ) : progress === 100 ? (
-                    <Check className="h-3 w-3 stroke-[2] text-custom-primary-100" />
-                  ) : (
-                    <span className="text-xs text-custom-text-300">{`${progress}%`}</span>
-                  )}
-                </CircularProgressIndicator>
-              </span>
-              <Tooltip tooltipContent={moduleDetails.name} position="top">
-                <span className="truncate text-base font-medium">{moduleDetails.name}</span>
-              </Tooltip>
+                      <span className="text-xs text-custom-text-300">{`${progress}%`}</span>
+                    )}
+                  </CircularProgressIndicator>
+                </span>
+                <Tooltip tooltipContent={moduleDetails.name} position="top">
+                  <span className="truncate text-base font-medium">{moduleDetails.name}</span>
+                </Tooltip>
+              </div>
+              <button onClick={openModuleOverview} className="z-[5] hidden flex-shrink-0 group-hover:flex">
+                <Info className="h-4 w-4 text-custom-text-400" />
+              </button>
             </div>
-            <button onClick={openModuleOverview} className="z-10 hidden flex-shrink-0 group-hover:flex">
-              <Info className="h-4 w-4 text-custom-text-400" />
-            </button>
-          </div>
-
-          <div className="flex w-full items-center justify-end gap-2.5 md:w-auto md:flex-shrink-0 ">
-            <div className="flex items-center justify-center">
+            <div className="flex items-center justify-center flex-shrink-0">
               {moduleStatus && (
                 <span
-                  className="flex h-6 w-20 items-center justify-center rounded-sm text-center text-xs"
+                  className="flex h-6 w-20 items-center justify-center rounded-sm text-center text-xs flex-shrink-0"
                   style={{
                     color: moduleStatus.color,
                     backgroundColor: `${moduleStatus.color}20`,
@@ -178,64 +177,70 @@ export const ModuleListItem: React.FC<Props> = observer((props) => {
                 </span>
               )}
             </div>
+          </div>
 
-            {renderDate && (
-              <span className="flex w-40 items-center justify-center gap-2 text-xs text-custom-text-300">
-                {renderFormattedDate(startDate) ?? "_ _"} - {renderFormattedDate(endDate) ?? "_ _"}
-              </span>
-            )}
-
-            <Tooltip tooltipContent={`${moduleDetails.members_detail.length} Members`}>
-              <div className="flex w-16 cursor-default items-center justify-center gap-1">
-                {moduleDetails.members_detail.length > 0 ? (
-                  <AvatarGroup showTooltip={false}>
-                    {moduleDetails.members_detail.map((member) => (
-                      <Avatar key={member.id} name={member.display_name} src={member.avatar} />
-                    ))}
-                  </AvatarGroup>
-                ) : (
-                  <span className="flex h-5 w-5 items-end justify-center rounded-full border border-dashed border-custom-text-400 bg-custom-background-80">
-                    <User2 className="h-4 w-4 text-custom-text-400" />
-                  </span>
-                )}
-              </div>
-            </Tooltip>
-
-            {isEditingAllowed &&
-              (moduleDetails.is_favorite ? (
-                <button type="button" onClick={handleRemoveFromFavorites} className="z-[1]">
-                  <Star className="h-3.5 w-3.5 fill-current text-amber-500" />
-                </button>
-              ) : (
-                <button type="button" onClick={handleAddToFavorites} className="z-[1]">
-                  <Star className="h-3.5 w-3.5 text-custom-text-300" />
-                </button>
-              ))}
-
-            <CustomMenu verticalEllipsis buttonClassName="z-[1]">
-              {isEditingAllowed && (
-                <>
-                  <CustomMenu.MenuItem onClick={handleEditModule}>
-                    <span className="flex items-center justify-start gap-2">
-                      <Pencil className="h-3 w-3" />
-                      <span>Edit module</span>
-                    </span>
-                  </CustomMenu.MenuItem>
-                  <CustomMenu.MenuItem onClick={handleDeleteModule}>
-                    <span className="flex items-center justify-start gap-2">
-                      <Trash2 className="h-3 w-3" />
-                      <span>Delete module</span>
-                    </span>
-                  </CustomMenu.MenuItem>
-                </>
-              )}
-              <CustomMenu.MenuItem onClick={handleCopyText}>
-                <span className="flex items-center justify-start gap-2">
-                  <LinkIcon className="h-3 w-3" />
-                  <span>Copy module link</span>
+          <div className="flex w-full sm:w-auto relative overflow-hidden items-center gap-2.5 justify-between sm:justify-end sm:flex-shrink-0 ">
+            <div className="text-xs text-custom-text-300">
+              {renderDate && (
+                <span className=" text-xs text-custom-text-300">
+                  {renderFormattedDate(startDate) ?? "_ _"} - {renderFormattedDate(endDate) ?? "_ _"}
                 </span>
-              </CustomMenu.MenuItem>
-            </CustomMenu>
+              )}
+            </div>
+
+            <div className="flex-shrink-0 relative flex items-center gap-3">
+              <Tooltip tooltipContent={`${moduleDetails.members_detail.length} Members`}>
+                <div className="flex w-10 cursor-default items-center justify-center gap-1">
+                  {moduleDetails.members_detail.length > 0 ? (
+                    <AvatarGroup showTooltip={false}>
+                      {moduleDetails.members_detail.map((member) => (
+                        <Avatar key={member.id} name={member.display_name} src={member.avatar} />
+                      ))}
+                    </AvatarGroup>
+                  ) : (
+                    <span className="flex h-5 w-5 items-end justify-center rounded-full border border-dashed border-custom-text-400 bg-custom-background-80">
+                      <User2 className="h-4 w-4 text-custom-text-400" />
+                    </span>
+                  )}
+                </div>
+              </Tooltip>
+
+              {isEditingAllowed &&
+                (moduleDetails.is_favorite ? (
+                  <button type="button" onClick={handleRemoveFromFavorites} className="z-[1]">
+                    <Star className="h-3.5 w-3.5 fill-current text-amber-500" />
+                  </button>
+                ) : (
+                  <button type="button" onClick={handleAddToFavorites} className="z-[1]">
+                    <Star className="h-3.5 w-3.5 text-custom-text-300" />
+                  </button>
+                ))}
+
+              <CustomMenu verticalEllipsis buttonClassName="z-[1]">
+                {isEditingAllowed && (
+                  <>
+                    <CustomMenu.MenuItem onClick={handleEditModule}>
+                      <span className="flex items-center justify-start gap-2">
+                        <Pencil className="h-3 w-3" />
+                        <span>Edit module</span>
+                      </span>
+                    </CustomMenu.MenuItem>
+                    <CustomMenu.MenuItem onClick={handleDeleteModule}>
+                      <span className="flex items-center justify-start gap-2">
+                        <Trash2 className="h-3 w-3" />
+                        <span>Delete module</span>
+                      </span>
+                    </CustomMenu.MenuItem>
+                  </>
+                )}
+                <CustomMenu.MenuItem onClick={handleCopyText}>
+                  <span className="flex items-center justify-start gap-2">
+                    <LinkIcon className="h-3 w-3" />
+                    <span>Copy module link</span>
+                  </span>
+                </CustomMenu.MenuItem>
+              </CustomMenu>
+            </div>
           </div>
         </div>
       </Link>
diff --git a/web/components/modules/module-peek-overview.tsx b/web/components/modules/module-peek-overview.tsx
index f82d436bc..81614b61b 100644
--- a/web/components/modules/module-peek-overview.tsx
+++ b/web/components/modules/module-peek-overview.tsx
@@ -39,7 +39,7 @@ export const ModulePeekOverview: React.FC<Props> = observer(({ projectId, worksp
       {peekModule && (
         <div
           ref={ref}
-          className="flex h-full w-[24rem] flex-shrink-0 flex-col gap-3.5 overflow-y-auto border-l border-custom-border-100 bg-custom-sidebar-background-100 px-6 py-3.5 duration-300"
+          className="flex h-full w-full max-w-[24rem] flex-shrink-0 flex-col gap-3.5 overflow-y-auto border-l border-custom-border-100 bg-custom-sidebar-background-100 px-6 py-3.5 duration-300 absolute md:relative right-0 z-[9]"
           style={{
             boxShadow:
               "0px 1px 4px 0px rgba(0, 0, 0, 0.06), 0px 2px 4px 0px rgba(16, 24, 40, 0.06), 0px 1px 8px -1px rgba(16, 24, 40, 0.06)",
diff --git a/web/components/modules/sidebar.tsx b/web/components/modules/sidebar.tsx
index 947885f9a..0109d7c6c 100644
--- a/web/components/modules/sidebar.tsx
+++ b/web/components/modules/sidebar.tsx
@@ -298,9 +298,8 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
                 <CustomSelect
                   customButton={
                     <span
-                      className={`flex h-6 w-20 items-center justify-center rounded-sm text-center text-xs ${
-                        isEditingAllowed ? "cursor-pointer" : "cursor-not-allowed"
-                      }`}
+                      className={`flex h-6 w-20 items-center justify-center rounded-sm text-center text-xs ${isEditingAllowed ? "cursor-pointer" : "cursor-not-allowed"
+                        }`}
                       style={{
                         color: moduleStatus ? moduleStatus.color : "#a3a3a2",
                         backgroundColor: moduleStatus ? `${moduleStatus.color}20` : "#a3a3a220",
@@ -349,15 +348,13 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
                   <>
                     <Popover.Button
                       ref={startDateButtonRef}
-                      className={`w-full cursor-pointer rounded-sm text-sm font-medium text-custom-text-300 hover:bg-custom-background-80 ${
-                        isEditingAllowed ? "cursor-pointer" : "cursor-not-allowed"
-                      }`}
+                      className={`w-full cursor-pointer rounded-sm text-sm font-medium text-custom-text-300 hover:bg-custom-background-80 ${isEditingAllowed ? "cursor-pointer" : "cursor-not-allowed"
+                        }`}
                       disabled={!isEditingAllowed}
                     >
                       <span
-                        className={`group flex w-full items-center justify-between gap-2 px-1.5 py-1 text-sm ${
-                          watch("start_date") ? "" : "text-custom-text-400"
-                        }`}
+                        className={`group flex w-full items-center justify-between gap-2 px-1.5 py-1 text-sm ${watch("start_date") ? "" : "text-custom-text-400"
+                          }`}
                       >
                         {renderFormattedDate(startDate) ?? "No date selected"}
                       </span>
@@ -405,15 +402,13 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
                   <>
                     <Popover.Button
                       ref={endDateButtonRef}
-                      className={`w-full cursor-pointer rounded-sm text-sm font-medium text-custom-text-300 hover:bg-custom-background-80 ${
-                        isEditingAllowed ? "cursor-pointer" : "cursor-not-allowed"
-                      }`}
+                      className={`w-full cursor-pointer rounded-sm text-sm font-medium text-custom-text-300 hover:bg-custom-background-80 ${isEditingAllowed ? "cursor-pointer" : "cursor-not-allowed"
+                        }`}
                       disabled={!isEditingAllowed}
                     >
                       <span
-                        className={`group flex w-full items-center justify-between gap-2 px-1.5 py-1 text-sm ${
-                          watch("target_date") ? "" : "text-custom-text-400"
-                        }`}
+                        className={`group flex w-full items-center justify-between gap-2 px-1.5 py-1 text-sm ${watch("target_date") ? "" : "text-custom-text-400"
+                          }`}
                       >
                         {renderFormattedDate(endDate) ?? "No date selected"}
                       </span>
@@ -571,7 +566,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
                                 </div>
                               </div>
                             </div>
-                            <div className="relative h-40 w-80">
+                            <div className="relative h-40 w-full max-w-80">
                               <ProgressChart
                                 distribution={moduleDetails.distribution?.completion_chart ?? {}}
                                 startDate={moduleDetails.start_date}

From 5bce2014c500944b972065f9bb4ab26044cf28a0 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Mon, 12 Feb 2024 12:42:52 +0530
Subject: [PATCH 45/58] chore(deps): bump cryptography in
 /apiserver/requirements (#3619)

Bumps [cryptography](https://github.com/pyca/cryptography) from 41.0.6 to 42.0.0.
- [Changelog](https://github.com/pyca/cryptography/blob/main/CHANGELOG.rst)
- [Commits](https://github.com/pyca/cryptography/compare/41.0.6...42.0.0)

---
updated-dependencies:
- dependency-name: cryptography
  dependency-type: direct:production
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
---
 apiserver/requirements/base.txt | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apiserver/requirements/base.txt b/apiserver/requirements/base.txt
index 0e7a18fa8..176649e02 100644
--- a/apiserver/requirements/base.txt
+++ b/apiserver/requirements/base.txt
@@ -30,7 +30,7 @@ openpyxl==3.1.2
 beautifulsoup4==4.12.2
 dj-database-url==2.1.0
 posthog==3.0.2
-cryptography==41.0.6
+cryptography==42.0.0
 lxml==4.9.3
 boto3==1.28.40
 

From 0a36850d03e534e5dd21a30b1ae99d352a0009fd Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com>
Date: Mon, 12 Feb 2024 12:43:45 +0530
Subject: [PATCH 46/58] chore: show project tour modal before project creation
 (#3611)

---
 web/components/page-views/workspace-dashboard.tsx | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/web/components/page-views/workspace-dashboard.tsx b/web/components/page-views/workspace-dashboard.tsx
index 8f8622c18..890cce27f 100644
--- a/web/components/page-views/workspace-dashboard.tsx
+++ b/web/components/page-views/workspace-dashboard.tsx
@@ -59,6 +59,11 @@ export const WorkspaceDashboardView = observer(() => {
 
   return (
     <>
+      {currentUser && !currentUser.is_tour_completed && (
+        <div className="fixed left-0 top-0 z-20 grid h-full w-full place-items-center bg-custom-backdrop bg-opacity-50 transition-opacity">
+          <TourRoot onComplete={handleTourCompleted} />
+        </div>
+      )}
       {homeDashboardId && joinedProjectIds ? (
         <>
           {joinedProjectIds.length > 0 ? (
@@ -66,11 +71,7 @@ export const WorkspaceDashboardView = observer(() => {
               <IssuePeekOverview />
               <div className="space-y-7 p-7 bg-custom-background-90 h-full w-full flex flex-col overflow-y-auto">
                 {currentUser && <UserGreetingsView user={currentUser} />}
-                {currentUser && !currentUser.is_tour_completed && (
-                  <div className="fixed left-0 top-0 z-20 grid h-full w-full place-items-center bg-custom-backdrop bg-opacity-50 transition-opacity">
-                    <TourRoot onComplete={handleTourCompleted} />
-                  </div>
-                )}
+
                 <DashboardWidgets />
               </div>
             </>

From 4b67a41b41aa8f92f9fddb295799fb20720d7068 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Mon, 12 Feb 2024 12:44:16 +0530
Subject: [PATCH 47/58] chore(deps): bump django from 4.2.7 to 4.2.10 in
 /apiserver/requirements (#3606)

Bumps [django](https://github.com/django/django) from 4.2.7 to 4.2.10.
- [Commits](https://github.com/django/django/compare/4.2.7...4.2.10)

---
updated-dependencies:
- dependency-name: django
  dependency-type: direct:production
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
---
 apiserver/requirements/base.txt | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apiserver/requirements/base.txt b/apiserver/requirements/base.txt
index 176649e02..194bf8d90 100644
--- a/apiserver/requirements/base.txt
+++ b/apiserver/requirements/base.txt
@@ -1,6 +1,6 @@
 # base requirements
 
-Django==4.2.7
+Django==4.2.10
 psycopg==3.1.12
 djangorestframework==3.14.0
 redis==4.6.0

From 963d26ccdad56e90dec885065bee420132c6a86c Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com>
Date: Mon, 12 Feb 2024 15:08:17 +0530
Subject: [PATCH 48/58] refactor: Gantt chart layout (#3585)

* chore: gantt sidebar and main content scroll sync

* chore: add arrow navigation position logic

* refactor: scroll position update logic

* refactor: gantt chart components

* refactor: gantt sidebar

* fix: vertical scroll issue

* fix: move to the hidden block button flickering

* refactor: gantt sidebar components

* chore: move timeline header outside

* fix gantt scroll issue

* fix: sticky position issues

* fix: infinite timeline scroll logic

* chore: removed unnecessary import statements

---------

Co-authored-by: rahulramesha <rahulramesham@gmail.com>
---
 web/components/cycles/gantt-chart/blocks.tsx  |  55 ++-
 .../cycles/gantt-chart/cycles-list-layout.tsx |   2 +-
 .../{blocks-display.tsx => blocks-list.tsx}   |  78 +++--
 web/components/gantt-chart/blocks/index.ts    |   2 +-
 web/components/gantt-chart/chart/header.tsx   |  59 ++++
 web/components/gantt-chart/chart/index.ts     |   4 +
 web/components/gantt-chart/chart/index.tsx    | 324 ------------------
 .../gantt-chart/chart/main-content.tsx        | 120 +++++++
 web/components/gantt-chart/chart/month.tsx    |  72 ----
 web/components/gantt-chart/chart/root.tsx     | 203 +++++++++++
 .../gantt-chart/chart/{ => views}/bi-week.tsx |   2 +-
 .../gantt-chart/chart/{ => views}/day.tsx     |   2 +-
 .../gantt-chart/chart/{ => views}/hours.tsx   |   2 +-
 .../gantt-chart/chart/views/index.ts          |   7 +
 .../gantt-chart/chart/views/month.tsx         |  76 ++++
 .../gantt-chart/chart/{ => views}/quarter.tsx |   2 +-
 .../gantt-chart/chart/{ => views}/week.tsx    |   2 +-
 .../gantt-chart/chart/{ => views}/year.tsx    |   2 +-
 web/components/gantt-chart/constants.ts       |   5 +
 web/components/gantt-chart/contexts/index.tsx |  17 +-
 ...block-structure.tsx => block-structure.ts} |   0
 .../gantt-chart/helpers/draggable.tsx         | 117 ++++---
 web/components/gantt-chart/index.ts           |   1 +
 web/components/gantt-chart/root.tsx           |   4 +-
 .../sidebar/{cycle-sidebar.tsx => cycles.tsx} |  36 +-
 web/components/gantt-chart/sidebar/index.ts   |   9 +-
 web/components/gantt-chart/sidebar/issues.tsx | 195 +++++++++++
 .../{module-sidebar.tsx => modules.tsx}       |  34 +-
 ...ect-view-sidebar.tsx => project-views.tsx} |  19 +-
 web/components/gantt-chart/sidebar/root.tsx   |  41 +++
 .../gantt-chart/sidebar/sidebar.tsx           | 198 -----------
 .../issue-layouts/gantt/base-gantt-root.tsx   |   2 +-
 .../issues/issue-layouts/gantt/blocks.tsx     |  84 +++--
 .../gantt/quick-add-issue-form.tsx            |  32 +-
 web/components/modules/gantt-chart/blocks.tsx |  54 ++-
 .../gantt-chart/modules-list-layout.tsx       |   2 +-
 36 files changed, 1035 insertions(+), 829 deletions(-)
 rename web/components/gantt-chart/blocks/{blocks-display.tsx => blocks-list.tsx} (61%)
 create mode 100644 web/components/gantt-chart/chart/header.tsx
 create mode 100644 web/components/gantt-chart/chart/index.ts
 delete mode 100644 web/components/gantt-chart/chart/index.tsx
 create mode 100644 web/components/gantt-chart/chart/main-content.tsx
 delete mode 100644 web/components/gantt-chart/chart/month.tsx
 create mode 100644 web/components/gantt-chart/chart/root.tsx
 rename web/components/gantt-chart/chart/{ => views}/bi-week.tsx (97%)
 rename web/components/gantt-chart/chart/{ => views}/day.tsx (98%)
 rename web/components/gantt-chart/chart/{ => views}/hours.tsx (97%)
 create mode 100644 web/components/gantt-chart/chart/views/index.ts
 create mode 100644 web/components/gantt-chart/chart/views/month.tsx
 rename web/components/gantt-chart/chart/{ => views}/quarter.tsx (98%)
 rename web/components/gantt-chart/chart/{ => views}/week.tsx (98%)
 rename web/components/gantt-chart/chart/{ => views}/year.tsx (98%)
 create mode 100644 web/components/gantt-chart/constants.ts
 rename web/components/gantt-chart/helpers/{block-structure.tsx => block-structure.ts} (100%)
 rename web/components/gantt-chart/sidebar/{cycle-sidebar.tsx => cycles.tsx} (85%)
 create mode 100644 web/components/gantt-chart/sidebar/issues.tsx
 rename web/components/gantt-chart/sidebar/{module-sidebar.tsx => modules.tsx} (86%)
 rename web/components/gantt-chart/sidebar/{project-view-sidebar.tsx => project-views.tsx} (92%)
 create mode 100644 web/components/gantt-chart/sidebar/root.tsx
 delete mode 100644 web/components/gantt-chart/sidebar/sidebar.tsx

diff --git a/web/components/cycles/gantt-chart/blocks.tsx b/web/components/cycles/gantt-chart/blocks.tsx
index 46bc04039..beb239d87 100644
--- a/web/components/cycles/gantt-chart/blocks.tsx
+++ b/web/components/cycles/gantt-chart/blocks.tsx
@@ -1,16 +1,30 @@
 import { useRouter } from "next/router";
+import { observer } from "mobx-react";
+// hooks
+import { useApplication, useCycle } from "hooks/store";
 // ui
 import { Tooltip, ContrastIcon } from "@plane/ui";
 // helpers
 import { renderFormattedDate } from "helpers/date-time.helper";
-// types
-import { ICycle } from "@plane/types";
 
-export const CycleGanttBlock = ({ data }: { data: ICycle }) => {
+type Props = {
+  cycleId: string;
+};
+
+export const CycleGanttBlock: React.FC<Props> = observer((props) => {
+  const { cycleId } = props;
+  // router
   const router = useRouter();
-  const { workspaceSlug } = router.query;
+  // store hooks
+  const {
+    router: { workspaceSlug },
+  } = useApplication();
+  const { getCycleById } = useCycle();
+  // derived values
+  const cycleDetails = getCycleById(cycleId);
+
+  const cycleStatus = cycleDetails?.status.toLocaleLowerCase();
 
-  const cycleStatus = data.status.toLocaleLowerCase();
   return (
     <div
       className="relative flex h-full w-full items-center rounded"
@@ -26,36 +40,45 @@ export const CycleGanttBlock = ({ data }: { data: ICycle }) => {
             ? "rgb(var(--color-text-200))"
             : "",
       }}
-      onClick={() => router.push(`/${workspaceSlug}/projects/${data?.project}/cycles/${data?.id}`)}
+      onClick={() => router.push(`/${workspaceSlug}/projects/${cycleDetails?.project}/cycles/${cycleDetails?.id}`)}
     >
       <div className="absolute left-0 top-0 h-full w-full bg-custom-background-100/50" />
       <Tooltip
         tooltipContent={
           <div className="space-y-1">
-            <h5>{data?.name}</h5>
+            <h5>{cycleDetails?.name}</h5>
             <div>
-              {renderFormattedDate(data?.start_date ?? "")} to {renderFormattedDate(data?.end_date ?? "")}
+              {renderFormattedDate(cycleDetails?.start_date ?? "")} to{" "}
+              {renderFormattedDate(cycleDetails?.end_date ?? "")}
             </div>
           </div>
         }
         position="top-left"
       >
-        <div className="relative w-full truncate px-2.5 py-1 text-sm text-custom-text-100">{data?.name}</div>
+        <div className="relative w-full truncate px-2.5 py-1 text-sm text-custom-text-100">{cycleDetails?.name}</div>
       </Tooltip>
     </div>
   );
-};
+});
 
-export const CycleGanttSidebarBlock = ({ data }: { data: ICycle }) => {
+export const CycleGanttSidebarBlock: React.FC<Props> = observer((props) => {
+  const { cycleId } = props;
+  // router
   const router = useRouter();
-  const { workspaceSlug } = router.query;
+  // store hooks
+  const {
+    router: { workspaceSlug },
+  } = useApplication();
+  const { getCycleById } = useCycle();
+  // derived values
+  const cycleDetails = getCycleById(cycleId);
 
-  const cycleStatus = data.status.toLocaleLowerCase();
+  const cycleStatus = cycleDetails?.status.toLocaleLowerCase();
 
   return (
     <div
       className="relative flex h-full w-full items-center gap-2"
-      onClick={() => router.push(`/${workspaceSlug}/projects/${data?.project}/cycles/${data?.id}`)}
+      onClick={() => router.push(`/${workspaceSlug}/projects/${cycleDetails?.project}/cycles/${cycleDetails?.id}`)}
     >
       <ContrastIcon
         className="h-5 w-5 flex-shrink-0"
@@ -71,7 +94,7 @@ export const CycleGanttSidebarBlock = ({ data }: { data: ICycle }) => {
             : ""
         }`}
       />
-      <h6 className="flex-grow truncate text-sm font-medium">{data?.name}</h6>
+      <h6 className="flex-grow truncate text-sm font-medium">{cycleDetails?.name}</h6>
     </div>
   );
-};
+});
diff --git a/web/components/cycles/gantt-chart/cycles-list-layout.tsx b/web/components/cycles/gantt-chart/cycles-list-layout.tsx
index 797fc9e39..421a73a4a 100644
--- a/web/components/cycles/gantt-chart/cycles-list-layout.tsx
+++ b/web/components/cycles/gantt-chart/cycles-list-layout.tsx
@@ -63,7 +63,7 @@ export const CyclesListGanttChartView: FC<Props> = observer((props) => {
         blocks={cycleIds ? blockFormat(cycleIds.map((c) => getCycleById(c))) : null}
         blockUpdateHandler={(block, payload) => handleCycleUpdate(block, payload)}
         sidebarToRender={(props) => <CycleGanttSidebar {...props} />}
-        blockToRender={(data: ICycle) => <CycleGanttBlock data={data} />}
+        blockToRender={(data: ICycle) => <CycleGanttBlock cycleId={data.id} />}
         enableBlockLeftResize={false}
         enableBlockRightResize={false}
         enableBlockMove={false}
diff --git a/web/components/gantt-chart/blocks/blocks-display.tsx b/web/components/gantt-chart/blocks/blocks-list.tsx
similarity index 61%
rename from web/components/gantt-chart/blocks/blocks-display.tsx
rename to web/components/gantt-chart/blocks/blocks-list.tsx
index e13be116b..b65f04bb6 100644
--- a/web/components/gantt-chart/blocks/blocks-display.tsx
+++ b/web/components/gantt-chart/blocks/blocks-list.tsx
@@ -1,3 +1,4 @@
+import { observer } from "mobx-react";
 import { FC } from "react";
 // hooks
 import { useIssueDetail } from "hooks/store";
@@ -8,6 +9,8 @@ import { renderFormattedPayloadDate } from "helpers/date-time.helper";
 import { cn } from "helpers/common.helper";
 // types
 import { IBlockUpdateData, IGanttBlock } from "../types";
+// constants
+import { BLOCK_HEIGHT, HEADER_HEIGHT } from "../constants";
 
 export type GanttChartBlocksProps = {
   itemsContainerWidth: number;
@@ -20,7 +23,7 @@ export type GanttChartBlocksProps = {
   showAllBlocks: boolean;
 };
 
-export const GanttChartBlocks: FC<GanttChartBlocksProps> = (props) => {
+export const GanttChartBlocksList: FC<GanttChartBlocksProps> = observer((props) => {
   const {
     itemsContainerWidth,
     blocks,
@@ -31,9 +34,10 @@ export const GanttChartBlocks: FC<GanttChartBlocksProps> = (props) => {
     enableBlockMove,
     showAllBlocks,
   } = props;
-
-  const { activeBlock, dispatch } = useChart();
+  // store hooks
   const { peekIssue } = useIssueDetail();
+  // chart hook
+  const { activeBlock, dispatch } = useChart();
 
   // update the active block on hover
   const updateActiveBlock = (block: IGanttBlock | null) => {
@@ -77,43 +81,51 @@ export const GanttChartBlocks: FC<GanttChartBlocksProps> = (props) => {
 
   return (
     <div
-      className="relative z-[5] mt-[72px] h-full overflow-hidden overflow-y-auto"
-      style={{ width: `${itemsContainerWidth}px` }}
+      className="h-full"
+      style={{
+        width: `${itemsContainerWidth}px`,
+        marginTop: `${HEADER_HEIGHT}px`,
+      }}
     >
-      {blocks &&
-        blocks.length > 0 &&
-        blocks.map((block) => {
-          // hide the block if it doesn't have start and target dates and showAllBlocks is false
-          if (!showAllBlocks && !(block.start_date && block.target_date)) return;
+      {blocks?.map((block) => {
+        // hide the block if it doesn't have start and target dates and showAllBlocks is false
+        if (!showAllBlocks && !(block.start_date && block.target_date)) return;
 
-          const isBlockVisibleOnChart = block.start_date && block.target_date;
+        const isBlockVisibleOnChart = block.start_date && block.target_date;
 
-          return (
+        return (
+          <div
+            key={`block-${block.id}`}
+            className="relative min-w-full w-max"
+            style={{
+              height: `${BLOCK_HEIGHT}px`,
+            }}
+          >
             <div
-              key={`block-${block.id}`}
-              className={cn(
-                "h-11",
-                { "rounded bg-custom-background-80": activeBlock?.id === block.id },
-                {
-                  "rounded-l border border-r-0 border-custom-primary-70 hover:border-custom-primary-70":
-                    peekIssue?.issueId === block.data.id,
-                }
-              )}
+              className={cn("relative h-full", {
+                "bg-custom-background-80": activeBlock?.id === block.id,
+                "rounded-l border border-r-0 border-custom-primary-70 hover:border-custom-primary-70":
+                  peekIssue?.issueId === block.data.id,
+              })}
               onMouseEnter={() => updateActiveBlock(block)}
               onMouseLeave={() => updateActiveBlock(null)}
             >
-              {!isBlockVisibleOnChart && <ChartAddBlock block={block} blockUpdateHandler={blockUpdateHandler} />}
-              <ChartDraggable
-                block={block}
-                blockToRender={blockToRender}
-                handleBlock={(...args) => handleChartBlockPosition(block, ...args)}
-                enableBlockLeftResize={enableBlockLeftResize}
-                enableBlockRightResize={enableBlockRightResize}
-                enableBlockMove={enableBlockMove}
-              />
+              {isBlockVisibleOnChart ? (
+                <ChartDraggable
+                  block={block}
+                  blockToRender={blockToRender}
+                  handleBlock={(...args) => handleChartBlockPosition(block, ...args)}
+                  enableBlockLeftResize={enableBlockLeftResize}
+                  enableBlockRightResize={enableBlockRightResize}
+                  enableBlockMove={enableBlockMove}
+                />
+              ) : (
+                <ChartAddBlock block={block} blockUpdateHandler={blockUpdateHandler} />
+              )}
             </div>
-          );
-        })}
+          </div>
+        );
+      })}
     </div>
   );
-};
+});
diff --git a/web/components/gantt-chart/blocks/index.ts b/web/components/gantt-chart/blocks/index.ts
index 18ca5da9e..c99f8af32 100644
--- a/web/components/gantt-chart/blocks/index.ts
+++ b/web/components/gantt-chart/blocks/index.ts
@@ -1 +1 @@
-export * from "./blocks-display";
+export * from "./blocks-list";
diff --git a/web/components/gantt-chart/chart/header.tsx b/web/components/gantt-chart/chart/header.tsx
new file mode 100644
index 000000000..6dcfdc36f
--- /dev/null
+++ b/web/components/gantt-chart/chart/header.tsx
@@ -0,0 +1,59 @@
+import { Expand, Shrink } from "lucide-react";
+// hooks
+import { useChart } from "../hooks";
+// helpers
+import { cn } from "helpers/common.helper";
+// types
+import { IGanttBlock, TGanttViews } from "../types";
+
+type Props = {
+  blocks: IGanttBlock[] | null;
+  fullScreenMode: boolean;
+  handleChartView: (view: TGanttViews) => void;
+  handleToday: () => void;
+  loaderTitle: string;
+  title: string;
+  toggleFullScreenMode: () => void;
+};
+
+export const GanttChartHeader: React.FC<Props> = (props) => {
+  const { blocks, fullScreenMode, handleChartView, handleToday, loaderTitle, title, toggleFullScreenMode } = props;
+  // chart hook
+  const { currentView, allViews } = useChart();
+
+  return (
+    <div className="relative flex w-full flex-shrink-0 flex-wrap items-center gap-2 whitespace-nowrap px-2.5 py-2 z-10">
+      <div className="flex items-center gap-2 text-lg font-medium">{title}</div>
+      <div className="ml-auto">
+        <div className="ml-auto text-sm font-medium">{blocks ? `${blocks.length} ${loaderTitle}` : "Loading..."}</div>
+      </div>
+
+      <div className="flex flex-wrap items-center gap-2">
+        {allViews?.map((chartView: any) => (
+          <div
+            key={chartView?.key}
+            className={cn("cursor-pointer rounded-sm p-1 px-2 text-xs", {
+              "bg-custom-background-80": currentView === chartView?.key,
+              "hover:bg-custom-background-90": currentView !== chartView?.key,
+            })}
+            onClick={() => handleChartView(chartView?.key)}
+          >
+            {chartView?.title}
+          </div>
+        ))}
+      </div>
+
+      <button type="button" className="rounded-sm p-1 px-2 text-xs hover:bg-custom-background-80" onClick={handleToday}>
+        Today
+      </button>
+
+      <button
+        type="button"
+        className="flex items-center justify-center rounded-sm border border-custom-border-200 p-1 transition-all hover:bg-custom-background-80"
+        onClick={toggleFullScreenMode}
+      >
+        {fullScreenMode ? <Shrink className="h-4 w-4" /> : <Expand className="h-4 w-4" />}
+      </button>
+    </div>
+  );
+};
diff --git a/web/components/gantt-chart/chart/index.ts b/web/components/gantt-chart/chart/index.ts
new file mode 100644
index 000000000..68b20b89a
--- /dev/null
+++ b/web/components/gantt-chart/chart/index.ts
@@ -0,0 +1,4 @@
+export * from "./views";
+export * from "./header";
+export * from "./main-content";
+export * from "./root";
diff --git a/web/components/gantt-chart/chart/index.tsx b/web/components/gantt-chart/chart/index.tsx
deleted file mode 100644
index 4592bfb5b..000000000
--- a/web/components/gantt-chart/chart/index.tsx
+++ /dev/null
@@ -1,324 +0,0 @@
-import { FC, useEffect, useState } from "react";
-// icons
-// components
-import { GanttChartBlocks } from "components/gantt-chart";
-// import { GanttSidebar } from "../sidebar";
-// import { HourChartView } from "./hours";
-// import { DayChartView } from "./day";
-// import { WeekChartView } from "./week";
-// import { BiWeekChartView } from "./bi-week";
-import { MonthChartView } from "./month";
-// import { QuarterChartView } from "./quarter";
-// import { YearChartView } from "./year";
-// icons
-import { Expand, Shrink } from "lucide-react";
-// views
-import {
-  // generateHourChart,
-  // generateDayChart,
-  // generateWeekChart,
-  // generateBiWeekChart,
-  generateMonthChart,
-  // generateQuarterChart,
-  // generateYearChart,
-  getNumberOfDaysBetweenTwoDatesInMonth,
-  // getNumberOfDaysBetweenTwoDatesInQuarter,
-  // getNumberOfDaysBetweenTwoDatesInYear,
-  getMonthChartItemPositionWidthInMonth,
-} from "../views";
-// types
-import { ChartDataType, IBlockUpdateData, IGanttBlock, TGanttViews } from "../types";
-// data
-import { currentViewDataWithView } from "../data";
-// context
-import { useChart } from "../hooks";
-
-type ChartViewRootProps = {
-  border: boolean;
-  title: string;
-  loaderTitle: string;
-  blocks: IGanttBlock[] | null;
-  blockUpdateHandler: (block: any, payload: IBlockUpdateData) => void;
-  blockToRender: (data: any) => React.ReactNode;
-  sidebarToRender: (props: any) => React.ReactNode;
-  enableBlockLeftResize: boolean;
-  enableBlockRightResize: boolean;
-  enableBlockMove: boolean;
-  enableReorder: boolean;
-  bottomSpacing: boolean;
-  showAllBlocks: boolean;
-};
-
-export const ChartViewRoot: FC<ChartViewRootProps> = (props) => {
-  const {
-    border,
-    title,
-    blocks = null,
-    loaderTitle,
-    blockUpdateHandler,
-    sidebarToRender,
-    blockToRender,
-    enableBlockLeftResize,
-    enableBlockRightResize,
-    enableBlockMove,
-    enableReorder,
-    bottomSpacing,
-    showAllBlocks,
-  } = props;
-  // states
-  const [itemsContainerWidth, setItemsContainerWidth] = useState<number>(0);
-  const [fullScreenMode, setFullScreenMode] = useState<boolean>(false);
-  const [chartBlocks, setChartBlocks] = useState<IGanttBlock[] | null>(null); // blocks state management starts
-  // hooks
-  const { currentView, currentViewData, renderView, dispatch, allViews, updateScrollLeft } = useChart();
-
-  const renderBlockStructure = (view: any, blocks: IGanttBlock[] | null) =>
-    blocks && blocks.length > 0
-      ? blocks.map((block: any) => ({
-          ...block,
-          position: getMonthChartItemPositionWidthInMonth(view, block),
-        }))
-      : [];
-
-  useEffect(() => {
-    if (currentViewData && blocks) setChartBlocks(() => renderBlockStructure(currentViewData, blocks));
-  }, [currentViewData, blocks]);
-
-  // blocks state management ends
-
-  const handleChartView = (key: TGanttViews) => updateCurrentViewRenderPayload(null, key);
-
-  const updateCurrentViewRenderPayload = (side: null | "left" | "right", view: TGanttViews) => {
-    const selectedCurrentView: TGanttViews = view;
-    const selectedCurrentViewData: ChartDataType | undefined =
-      selectedCurrentView && selectedCurrentView === currentViewData?.key
-        ? currentViewData
-        : currentViewDataWithView(view);
-
-    if (selectedCurrentViewData === undefined) return;
-
-    let currentRender: any;
-
-    // if (view === "hours") currentRender = generateHourChart(selectedCurrentViewData, side);
-    // if (view === "day") currentRender = generateDayChart(selectedCurrentViewData, side);
-    // if (view === "week") currentRender = generateWeekChart(selectedCurrentViewData, side);
-    // if (view === "bi_week") currentRender = generateBiWeekChart(selectedCurrentViewData, side);
-    if (selectedCurrentView === "month") currentRender = generateMonthChart(selectedCurrentViewData, side);
-    // if (view === "quarter") currentRender = generateQuarterChart(selectedCurrentViewData, side);
-    // if (selectedCurrentView === "year")
-    //   currentRender = generateYearChart(selectedCurrentViewData, side);
-
-    // updating the prevData, currentData and nextData
-    if (currentRender.payload.length > 0) {
-      if (side === "left") {
-        dispatch({
-          type: "PARTIAL_UPDATE",
-          payload: {
-            currentView: selectedCurrentView,
-            currentViewData: currentRender.state,
-            renderView: [...currentRender.payload, ...renderView],
-          },
-        });
-        updatingCurrentLeftScrollPosition(currentRender.scrollWidth);
-        setItemsContainerWidth(itemsContainerWidth + currentRender.scrollWidth);
-      } else if (side === "right") {
-        dispatch({
-          type: "PARTIAL_UPDATE",
-          payload: {
-            currentView: view,
-            currentViewData: currentRender.state,
-            renderView: [...renderView, ...currentRender.payload],
-          },
-        });
-        setItemsContainerWidth(itemsContainerWidth + currentRender.scrollWidth);
-      } else {
-        dispatch({
-          type: "PARTIAL_UPDATE",
-          payload: {
-            currentView: view,
-            currentViewData: currentRender.state,
-            renderView: [...currentRender.payload],
-          },
-        });
-        setItemsContainerWidth(currentRender.scrollWidth);
-        setTimeout(() => {
-          handleScrollToCurrentSelectedDate(currentRender.state, currentRender.state.data.currentDate);
-        }, 50);
-      }
-    }
-  };
-
-  const handleToday = () => updateCurrentViewRenderPayload(null, currentView);
-
-  // handling the scroll positioning from left and right
-  useEffect(() => {
-    handleToday();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  const updatingCurrentLeftScrollPosition = (width: number) => {
-    const scrollContainer = document.getElementById("scroll-container") as HTMLElement;
-
-    if (!scrollContainer) return;
-
-    scrollContainer.scrollLeft = width + scrollContainer?.scrollLeft;
-    setItemsContainerWidth(width + scrollContainer?.scrollLeft);
-  };
-
-  const handleScrollToCurrentSelectedDate = (currentState: ChartDataType, date: Date) => {
-    const scrollContainer = document.getElementById("scroll-container") as HTMLElement;
-
-    if (!scrollContainer) return;
-
-    const clientVisibleWidth: number = scrollContainer?.clientWidth;
-    let scrollWidth: number = 0;
-    let daysDifference: number = 0;
-
-    // if (currentView === "hours")
-    //   daysDifference = getNumberOfDaysBetweenTwoDatesInMonth(currentState.data.startDate, date);
-    // if (currentView === "day")
-    //   daysDifference = getNumberOfDaysBetweenTwoDatesInMonth(currentState.data.startDate, date);
-    // if (currentView === "week")
-    //   daysDifference = getNumberOfDaysBetweenTwoDatesInMonth(currentState.data.startDate, date);
-    // if (currentView === "bi_week")
-    //   daysDifference = getNumberOfDaysBetweenTwoDatesInMonth(currentState.data.startDate, date);
-    if (currentView === "month")
-      daysDifference = getNumberOfDaysBetweenTwoDatesInMonth(currentState.data.startDate, date);
-    // if (currentView === "quarter")
-    //   daysDifference = getNumberOfDaysBetweenTwoDatesInQuarter(currentState.data.startDate, date);
-    // if (currentView === "year")
-    //   daysDifference = getNumberOfDaysBetweenTwoDatesInYear(currentState.data.startDate, date);
-
-    scrollWidth = daysDifference * currentState.data.width - (clientVisibleWidth / 2 - currentState.data.width);
-
-    scrollContainer.scrollLeft = scrollWidth;
-  };
-
-  // handling scroll functionality
-  const onScroll = () => {
-    const scrollContainer = document.getElementById("scroll-container") as HTMLElement;
-
-    if (!scrollContainer) return;
-
-    const scrollWidth: number = scrollContainer?.scrollWidth;
-    const clientVisibleWidth: number = scrollContainer?.clientWidth;
-    const currentScrollPosition: number = scrollContainer?.scrollLeft;
-
-    updateScrollLeft(currentScrollPosition);
-
-    const approxRangeLeft: number = scrollWidth >= clientVisibleWidth + 1000 ? 1000 : scrollWidth - clientVisibleWidth;
-    const approxRangeRight: number = scrollWidth - (approxRangeLeft + clientVisibleWidth);
-
-    if (currentScrollPosition >= approxRangeRight) updateCurrentViewRenderPayload("right", currentView);
-    if (currentScrollPosition <= approxRangeLeft) updateCurrentViewRenderPayload("left", currentView);
-  };
-
-  return (
-    <div
-      className={`${
-        fullScreenMode ? `fixed bottom-0 left-0 right-0 top-0 z-[999999] bg-custom-background-100` : `relative`
-      } ${
-        border ? `border border-custom-border-200` : ``
-      } flex h-full select-none flex-col rounded-sm bg-custom-background-100 shadow`}
-    >
-      {/* chart header */}
-      <div className="flex w-full flex-shrink-0 flex-wrap items-center gap-2 whitespace-nowrap px-2.5 py-2">
-        {title && (
-          <div className="flex items-center gap-2 text-lg font-medium">
-            <div>{title}</div>
-            {/* <div className="text-xs rounded-full px-2 py-1 font-bold border border-custom-primary/75 bg-custom-primary/5 text-custom-text-100">
-              Gantt View Beta
-            </div> */}
-          </div>
-        )}
-
-        <div className="ml-auto">
-          {blocks === null ? (
-            <div className="ml-auto text-sm font-medium">Loading...</div>
-          ) : (
-            <div className="ml-auto text-sm font-medium">
-              {blocks.length} {loaderTitle}
-            </div>
-          )}
-        </div>
-
-        <div className="flex flex-wrap items-center gap-2">
-          {allViews &&
-            allViews.length > 0 &&
-            // eslint-disable-next-line @typescript-eslint/no-unused-vars
-            allViews.map((_chatView: any, _idx: any) => (
-              <div
-                key={_chatView?.key}
-                className={`cursor-pointer rounded-sm p-1 px-2 text-xs ${
-                  currentView === _chatView?.key ? `bg-custom-background-80` : `hover:bg-custom-background-90`
-                }`}
-                onClick={() => handleChartView(_chatView?.key)}
-              >
-                {_chatView?.title}
-              </div>
-            ))}
-        </div>
-
-        <div className="flex items-center gap-1">
-          <div
-            className="cursor-pointer rounded-sm p-1 px-2 text-xs hover:bg-custom-background-80"
-            onClick={handleToday}
-          >
-            Today
-          </div>
-        </div>
-
-        <div
-          className="flex cursor-pointer items-center justify-center rounded-sm border border-custom-border-200 p-1 transition-all hover:bg-custom-background-80"
-          onClick={() => setFullScreenMode((prevData) => !prevData)}
-        >
-          {fullScreenMode ? <Shrink className="h-4 w-4" /> : <Expand className="h-4 w-4" />}
-        </div>
-      </div>
-
-      {/* content */}
-      <div
-        id="gantt-container"
-        className={`relative flex h-full w-full flex-1 overflow-hidden border-t border-custom-border-200 ${
-          bottomSpacing ? "mb-8" : ""
-        }`}
-      >
-        <div id="gantt-sidebar" className="flex h-full w-1/4 flex-col border-r border-custom-border-200">
-          <div className="box-border flex h-[60px] flex-shrink-0 items-end justify-between gap-2 border-b border-custom-border-200 pb-2 pl-10 pr-4 text-sm font-medium text-custom-text-300">
-            <h6>{title}</h6>
-            <h6>Duration</h6>
-          </div>
-
-          {sidebarToRender && sidebarToRender({ title, blockUpdateHandler, blocks, enableReorder })}
-        </div>
-        <div
-          className="horizontal-scroll-enable relative flex h-full w-full flex-1 flex-col overflow-hidden overflow-x-auto"
-          id="scroll-container"
-          onScroll={onScroll}
-        >
-          {/* {currentView && currentView === "hours" && <HourChartView />} */}
-          {/* {currentView && currentView === "day" && <DayChartView />} */}
-          {/* {currentView && currentView === "week" && <WeekChartView />} */}
-          {/* {currentView && currentView === "bi_week" && <BiWeekChartView />} */}
-          {currentView && currentView === "month" && <MonthChartView />}
-          {/* {currentView && currentView === "quarter" && <QuarterChartView />} */}
-          {/* {currentView && currentView === "year" && <YearChartView />} */}
-
-          {/* blocks */}
-          {currentView && currentViewData && (
-            <GanttChartBlocks
-              itemsContainerWidth={itemsContainerWidth}
-              blocks={chartBlocks}
-              blockToRender={blockToRender}
-              blockUpdateHandler={blockUpdateHandler}
-              enableBlockLeftResize={enableBlockLeftResize}
-              enableBlockRightResize={enableBlockRightResize}
-              enableBlockMove={enableBlockMove}
-              showAllBlocks={showAllBlocks}
-            />
-          )}
-        </div>
-      </div>
-    </div>
-  );
-};
diff --git a/web/components/gantt-chart/chart/main-content.tsx b/web/components/gantt-chart/chart/main-content.tsx
new file mode 100644
index 000000000..950f3550c
--- /dev/null
+++ b/web/components/gantt-chart/chart/main-content.tsx
@@ -0,0 +1,120 @@
+// components
+import {
+  BiWeekChartView,
+  DayChartView,
+  GanttChartBlocksList,
+  GanttChartSidebar,
+  HourChartView,
+  IBlockUpdateData,
+  IGanttBlock,
+  MonthChartView,
+  QuarterChartView,
+  TGanttViews,
+  WeekChartView,
+  YearChartView,
+  useChart,
+} from "components/gantt-chart";
+// helpers
+import { cn } from "helpers/common.helper";
+
+type Props = {
+  blocks: IGanttBlock[] | null;
+  blockToRender: (data: any) => React.ReactNode;
+  blockUpdateHandler: (block: any, payload: IBlockUpdateData) => void;
+  bottomSpacing: boolean;
+  chartBlocks: IGanttBlock[] | null;
+  enableBlockLeftResize: boolean;
+  enableBlockMove: boolean;
+  enableBlockRightResize: boolean;
+  enableReorder: boolean;
+  itemsContainerWidth: number;
+  showAllBlocks: boolean;
+  sidebarToRender: (props: any) => React.ReactNode;
+  title: string;
+  updateCurrentViewRenderPayload: (direction: "left" | "right", currentView: TGanttViews) => void;
+};
+
+export const GanttChartMainContent: React.FC<Props> = (props) => {
+  const {
+    blocks,
+    blockToRender,
+    blockUpdateHandler,
+    bottomSpacing,
+    chartBlocks,
+    enableBlockLeftResize,
+    enableBlockMove,
+    enableBlockRightResize,
+    enableReorder,
+    itemsContainerWidth,
+    showAllBlocks,
+    sidebarToRender,
+    title,
+    updateCurrentViewRenderPayload,
+  } = props;
+  // chart hook
+  const { currentView, currentViewData, updateScrollLeft } = useChart();
+  // handling scroll functionality
+  const onScroll = (e: React.UIEvent<HTMLDivElement, UIEvent>) => {
+    const { clientWidth, scrollLeft, scrollWidth } = e.currentTarget;
+
+    updateScrollLeft(scrollLeft);
+
+    const approxRangeLeft = scrollLeft >= clientWidth + 1000 ? 1000 : scrollLeft - clientWidth;
+    const approxRangeRight = scrollWidth - (scrollLeft + clientWidth);
+
+    if (approxRangeRight < 1000) updateCurrentViewRenderPayload("right", currentView);
+    if (approxRangeLeft < 1000) updateCurrentViewRenderPayload("left", currentView);
+  };
+
+  const CHART_VIEW_COMPONENTS: {
+    [key in TGanttViews]: React.FC;
+  } = {
+    hours: HourChartView,
+    day: DayChartView,
+    week: WeekChartView,
+    bi_week: BiWeekChartView,
+    month: MonthChartView,
+    quarter: QuarterChartView,
+    year: YearChartView,
+  };
+
+  if (!currentView) return null;
+  const ActiveChartView = CHART_VIEW_COMPONENTS[currentView];
+
+  return (
+    <div
+      // DO NOT REMOVE THE ID
+      id="gantt-container"
+      className={cn(
+        "h-full w-full overflow-auto horizontal-scroll-enable flex border-t-[0.5px] border-custom-border-200",
+        {
+          "mb-8": bottomSpacing,
+        }
+      )}
+      onScroll={onScroll}
+    >
+      <GanttChartSidebar
+        blocks={blocks}
+        blockUpdateHandler={blockUpdateHandler}
+        enableReorder={enableReorder}
+        sidebarToRender={sidebarToRender}
+        title={title}
+      />
+      <div className="relative min-h-full h-max flex-shrink-0 flex-grow">
+        <ActiveChartView />
+        {currentViewData && (
+          <GanttChartBlocksList
+            itemsContainerWidth={itemsContainerWidth}
+            blocks={chartBlocks}
+            blockToRender={blockToRender}
+            blockUpdateHandler={blockUpdateHandler}
+            enableBlockLeftResize={enableBlockLeftResize}
+            enableBlockRightResize={enableBlockRightResize}
+            enableBlockMove={enableBlockMove}
+            showAllBlocks={showAllBlocks}
+          />
+        )}
+      </div>
+    </div>
+  );
+};
diff --git a/web/components/gantt-chart/chart/month.tsx b/web/components/gantt-chart/chart/month.tsx
deleted file mode 100644
index 0b7a4c452..000000000
--- a/web/components/gantt-chart/chart/month.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-import { FC } from "react";
-// hooks
-import { useChart } from "../hooks";
-// types
-import { IMonthBlock } from "../views";
-
-export const MonthChartView: FC<any> = () => {
-  const { currentViewData, renderView } = useChart();
-
-  const monthBlocks: IMonthBlock[] = renderView;
-
-  return (
-    <>
-      <div className="absolute flex h-full flex-grow divide-x divide-custom-border-100/50">
-        {monthBlocks &&
-          monthBlocks.length > 0 &&
-          monthBlocks.map((block, _idxRoot) => (
-            <div key={`month-${block?.month}-${block?.year}`} className="relative flex flex-col">
-              <div className="h-[60px] w-full">
-                <div className="relative h-[30px]">
-                  <div className="sticky left-0 inline-flex whitespace-nowrap px-3 py-2 text-xs font-medium capitalize">
-                    {block?.title}
-                  </div>
-                </div>
-
-                <div className="flex h-[30px] w-full">
-                  {block?.children &&
-                    block?.children.length > 0 &&
-                    block?.children.map((monthDay, _idx) => (
-                      <div
-                        key={`sub-title-${_idxRoot}-${_idx}`}
-                        className="flex-shrink-0 border-b border-custom-border-200 py-1 text-center capitalize"
-                        style={{ width: `${currentViewData?.data.width}px` }}
-                      >
-                        <div className="space-x-1 text-xs">
-                          <span className="text-custom-text-200">{monthDay.dayData.shortTitle[0]}</span>{" "}
-                          <span className={monthDay.today ? "rounded-full bg-custom-primary-100 px-1 text-white" : ""}>
-                            {monthDay.day}
-                          </span>
-                        </div>
-                      </div>
-                    ))}
-                </div>
-              </div>
-
-              <div className="flex h-full w-full divide-x divide-custom-border-100/50">
-                {block?.children &&
-                  block?.children.length > 0 &&
-                  block?.children.map((monthDay, _idx) => (
-                    <div
-                      key={`column-${_idxRoot}-${_idx}`}
-                      className="relative flex h-full flex-col overflow-hidden whitespace-nowrap"
-                      style={{ width: `${currentViewData?.data.width}px` }}
-                    >
-                      <div
-                        className={`relative flex h-full w-full flex-1 justify-center ${
-                          ["sat", "sun"].includes(monthDay?.dayData?.shortTitle || "") ? `bg-custom-background-90` : ``
-                        }`}
-                      >
-                        {/* {monthDay?.today && (
-                          <div className="absolute top-0 bottom-0 w-[1px] bg-red-500" />
-                        )} */}
-                      </div>
-                    </div>
-                  ))}
-              </div>
-            </div>
-          ))}
-      </div>
-    </>
-  );
-};
diff --git a/web/components/gantt-chart/chart/root.tsx b/web/components/gantt-chart/chart/root.tsx
new file mode 100644
index 000000000..961cb2fee
--- /dev/null
+++ b/web/components/gantt-chart/chart/root.tsx
@@ -0,0 +1,203 @@
+import { FC, useEffect, useState } from "react";
+// components
+import { GanttChartHeader, useChart, GanttChartMainContent } from "components/gantt-chart";
+// views
+import {
+  generateMonthChart,
+  getNumberOfDaysBetweenTwoDatesInMonth,
+  getMonthChartItemPositionWidthInMonth,
+} from "../views";
+// helpers
+import { cn } from "helpers/common.helper";
+// types
+import { ChartDataType, IBlockUpdateData, IGanttBlock, TGanttViews } from "../types";
+// data
+import { currentViewDataWithView } from "../data";
+// constants
+import { SIDEBAR_WIDTH } from "../constants";
+
+type ChartViewRootProps = {
+  border: boolean;
+  title: string;
+  loaderTitle: string;
+  blocks: IGanttBlock[] | null;
+  blockUpdateHandler: (block: any, payload: IBlockUpdateData) => void;
+  blockToRender: (data: any) => React.ReactNode;
+  sidebarToRender: (props: any) => React.ReactNode;
+  enableBlockLeftResize: boolean;
+  enableBlockRightResize: boolean;
+  enableBlockMove: boolean;
+  enableReorder: boolean;
+  bottomSpacing: boolean;
+  showAllBlocks: boolean;
+};
+
+export const ChartViewRoot: FC<ChartViewRootProps> = (props) => {
+  const {
+    border,
+    title,
+    blocks = null,
+    loaderTitle,
+    blockUpdateHandler,
+    sidebarToRender,
+    blockToRender,
+    enableBlockLeftResize,
+    enableBlockRightResize,
+    enableBlockMove,
+    enableReorder,
+    bottomSpacing,
+    showAllBlocks,
+  } = props;
+  // states
+  const [itemsContainerWidth, setItemsContainerWidth] = useState(0);
+  const [fullScreenMode, setFullScreenMode] = useState(false);
+  const [chartBlocks, setChartBlocks] = useState<IGanttBlock[] | null>(null);
+  // hooks
+  const { currentView, currentViewData, renderView, dispatch } = useChart();
+
+  // rendering the block structure
+  const renderBlockStructure = (view: any, blocks: IGanttBlock[] | null) =>
+    blocks
+      ? blocks.map((block: any) => ({
+          ...block,
+          position: getMonthChartItemPositionWidthInMonth(view, block),
+        }))
+      : [];
+
+  useEffect(() => {
+    if (!currentViewData || !blocks) return;
+    setChartBlocks(() => renderBlockStructure(currentViewData, blocks));
+  }, [currentViewData, blocks]);
+
+  const updateCurrentViewRenderPayload = (side: null | "left" | "right", view: TGanttViews) => {
+    const selectedCurrentView: TGanttViews = view;
+    const selectedCurrentViewData: ChartDataType | undefined =
+      selectedCurrentView && selectedCurrentView === currentViewData?.key
+        ? currentViewData
+        : currentViewDataWithView(view);
+
+    if (selectedCurrentViewData === undefined) return;
+
+    let currentRender: any;
+    if (selectedCurrentView === "month") currentRender = generateMonthChart(selectedCurrentViewData, side);
+
+    // updating the prevData, currentData and nextData
+    if (currentRender.payload.length > 0) {
+      if (side === "left") {
+        dispatch({
+          type: "PARTIAL_UPDATE",
+          payload: {
+            currentView: selectedCurrentView,
+            currentViewData: currentRender.state,
+            renderView: [...currentRender.payload, ...renderView],
+          },
+        });
+        updatingCurrentLeftScrollPosition(currentRender.scrollWidth);
+        setItemsContainerWidth(itemsContainerWidth + currentRender.scrollWidth);
+      } else if (side === "right") {
+        dispatch({
+          type: "PARTIAL_UPDATE",
+          payload: {
+            currentView: view,
+            currentViewData: currentRender.state,
+            renderView: [...renderView, ...currentRender.payload],
+          },
+        });
+        setItemsContainerWidth(itemsContainerWidth + currentRender.scrollWidth);
+      } else {
+        dispatch({
+          type: "PARTIAL_UPDATE",
+          payload: {
+            currentView: view,
+            currentViewData: currentRender.state,
+            renderView: [...currentRender.payload],
+          },
+        });
+        setItemsContainerWidth(currentRender.scrollWidth);
+        setTimeout(() => {
+          handleScrollToCurrentSelectedDate(currentRender.state, currentRender.state.data.currentDate);
+        }, 50);
+      }
+    }
+  };
+
+  const handleToday = () => updateCurrentViewRenderPayload(null, currentView);
+
+  // handling the scroll positioning from left and right
+  useEffect(() => {
+    handleToday();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const updatingCurrentLeftScrollPosition = (width: number) => {
+    const scrollContainer = document.querySelector("#gantt-container") as HTMLDivElement;
+    if (!scrollContainer) return;
+
+    scrollContainer.scrollLeft = width + scrollContainer?.scrollLeft;
+    setItemsContainerWidth(width + scrollContainer?.scrollLeft);
+  };
+
+  const handleScrollToCurrentSelectedDate = (currentState: ChartDataType, date: Date) => {
+    const scrollContainer = document.querySelector("#gantt-container") as HTMLDivElement;
+    if (!scrollContainer) return;
+
+    const clientVisibleWidth: number = scrollContainer?.clientWidth;
+    let scrollWidth: number = 0;
+    let daysDifference: number = 0;
+
+    // if (currentView === "hours")
+    //   daysDifference = getNumberOfDaysBetweenTwoDatesInMonth(currentState.data.startDate, date);
+    // if (currentView === "day")
+    //   daysDifference = getNumberOfDaysBetweenTwoDatesInMonth(currentState.data.startDate, date);
+    // if (currentView === "week")
+    //   daysDifference = getNumberOfDaysBetweenTwoDatesInMonth(currentState.data.startDate, date);
+    // if (currentView === "bi_week")
+    //   daysDifference = getNumberOfDaysBetweenTwoDatesInMonth(currentState.data.startDate, date);
+    if (currentView === "month")
+      daysDifference = getNumberOfDaysBetweenTwoDatesInMonth(currentState.data.startDate, date);
+    // if (currentView === "quarter")
+    //   daysDifference = getNumberOfDaysBetweenTwoDatesInQuarter(currentState.data.startDate, date);
+    // if (currentView === "year")
+    //   daysDifference = getNumberOfDaysBetweenTwoDatesInYear(currentState.data.startDate, date);
+
+    scrollWidth =
+      daysDifference * currentState.data.width - (clientVisibleWidth / 2 - currentState.data.width) + SIDEBAR_WIDTH / 2;
+
+    scrollContainer.scrollLeft = scrollWidth;
+  };
+
+  return (
+    <div
+      className={cn("relative flex flex-col h-full select-none rounded-sm bg-custom-background-100 shadow", {
+        "fixed inset-0 z-[999999] bg-custom-background-100": fullScreenMode,
+        "border-[0.5px] border-custom-border-200": border,
+      })}
+    >
+      <GanttChartHeader
+        blocks={blocks}
+        fullScreenMode={fullScreenMode}
+        toggleFullScreenMode={() => setFullScreenMode((prevData) => !prevData)}
+        handleChartView={(key) => updateCurrentViewRenderPayload(null, key)}
+        handleToday={handleToday}
+        loaderTitle={loaderTitle}
+        title={title}
+      />
+      <GanttChartMainContent
+        blocks={blocks}
+        blockToRender={blockToRender}
+        blockUpdateHandler={blockUpdateHandler}
+        bottomSpacing={bottomSpacing}
+        chartBlocks={chartBlocks}
+        enableBlockLeftResize={enableBlockLeftResize}
+        enableBlockMove={enableBlockMove}
+        enableBlockRightResize={enableBlockRightResize}
+        enableReorder={enableReorder}
+        itemsContainerWidth={itemsContainerWidth}
+        showAllBlocks={showAllBlocks}
+        sidebarToRender={sidebarToRender}
+        title={title}
+        updateCurrentViewRenderPayload={updateCurrentViewRenderPayload}
+      />
+    </div>
+  );
+};
diff --git a/web/components/gantt-chart/chart/bi-week.tsx b/web/components/gantt-chart/chart/views/bi-week.tsx
similarity index 97%
rename from web/components/gantt-chart/chart/bi-week.tsx
rename to web/components/gantt-chart/chart/views/bi-week.tsx
index f4a6080cd..6e53d5390 100644
--- a/web/components/gantt-chart/chart/bi-week.tsx
+++ b/web/components/gantt-chart/chart/views/bi-week.tsx
@@ -1,6 +1,6 @@
 import { FC } from "react";
 // context
-import { useChart } from "../hooks";
+import { useChart } from "components/gantt-chart";
 
 export const BiWeekChartView: FC<any> = () => {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
diff --git a/web/components/gantt-chart/chart/day.tsx b/web/components/gantt-chart/chart/views/day.tsx
similarity index 98%
rename from web/components/gantt-chart/chart/day.tsx
rename to web/components/gantt-chart/chart/views/day.tsx
index 32b3caca0..a50b7748a 100644
--- a/web/components/gantt-chart/chart/day.tsx
+++ b/web/components/gantt-chart/chart/views/day.tsx
@@ -1,6 +1,6 @@
 import { FC } from "react";
 // context
-import { useChart } from "../hooks";
+import { useChart } from "../../hooks";
 
 export const DayChartView: FC<any> = () => {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
diff --git a/web/components/gantt-chart/chart/hours.tsx b/web/components/gantt-chart/chart/views/hours.tsx
similarity index 97%
rename from web/components/gantt-chart/chart/hours.tsx
rename to web/components/gantt-chart/chart/views/hours.tsx
index 5693b38b8..e1fd02e3f 100644
--- a/web/components/gantt-chart/chart/hours.tsx
+++ b/web/components/gantt-chart/chart/views/hours.tsx
@@ -1,6 +1,6 @@
 import { FC } from "react";
 // context
-import { useChart } from "../hooks";
+import { useChart } from "components/gantt-chart";
 
 export const HourChartView: FC<any> = () => {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
diff --git a/web/components/gantt-chart/chart/views/index.ts b/web/components/gantt-chart/chart/views/index.ts
new file mode 100644
index 000000000..8936623c2
--- /dev/null
+++ b/web/components/gantt-chart/chart/views/index.ts
@@ -0,0 +1,7 @@
+export * from "./bi-week";
+export * from "./day";
+export * from "./hours";
+export * from "./month";
+export * from "./quarter";
+export * from "./week";
+export * from "./year";
diff --git a/web/components/gantt-chart/chart/views/month.tsx b/web/components/gantt-chart/chart/views/month.tsx
new file mode 100644
index 000000000..13f60c2b4
--- /dev/null
+++ b/web/components/gantt-chart/chart/views/month.tsx
@@ -0,0 +1,76 @@
+import { FC } from "react";
+// hooks
+import { useChart } from "components/gantt-chart";
+// helpers
+import { cn } from "helpers/common.helper";
+// types
+import { IMonthBlock } from "../../views";
+// constants
+import { HEADER_HEIGHT, SIDEBAR_WIDTH } from "components/gantt-chart/constants";
+
+export const MonthChartView: FC<any> = () => {
+  // chart hook
+  const { currentViewData, renderView } = useChart();
+  const monthBlocks: IMonthBlock[] = renderView;
+
+  return (
+    <>
+      <div className="absolute top-0 left-0 h-full w-max flex divide-x divide-custom-border-100/50">
+        {monthBlocks?.map((block, rootIndex) => (
+          <div key={`month-${block?.month}-${block?.year}`} className="relative">
+            <div
+              className="w-full sticky top-0 z-[5] bg-custom-background-100"
+              style={{
+                height: `${HEADER_HEIGHT}px`,
+              }}
+            >
+              <div className="h-1/2">
+                <div
+                  className="sticky inline-flex whitespace-nowrap px-3 py-2 text-xs font-medium capitalize"
+                  style={{
+                    left: `${SIDEBAR_WIDTH}px`,
+                  }}
+                >
+                  {block?.title}
+                </div>
+              </div>
+              <div className="h-1/2 w-full flex">
+                {block?.children?.map((monthDay, index) => (
+                  <div
+                    key={`sub-title-${rootIndex}-${index}`}
+                    className="flex-shrink-0 border-b-[0.5px] border-custom-border-200 py-1 text-center capitalize"
+                    style={{ width: `${currentViewData?.data.width}px` }}
+                  >
+                    <div className="space-x-1 text-xs">
+                      <span className="text-custom-text-200">{monthDay.dayData.shortTitle[0]}</span>{" "}
+                      <span
+                        className={cn({
+                          "rounded-full bg-custom-primary-100 px-1 text-white": monthDay.today,
+                        })}
+                      >
+                        {monthDay.day}
+                      </span>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+            <div className="h-full w-full flex divide-x divide-custom-border-100/50">
+              {block?.children?.map((monthDay, index) => (
+                <div
+                  key={`column-${rootIndex}-${index}`}
+                  className="h-full overflow-hidden"
+                  style={{ width: `${currentViewData?.data.width}px` }}
+                >
+                  {["sat", "sun"].includes(monthDay?.dayData?.shortTitle) && (
+                    <div className="h-full bg-custom-background-90" />
+                  )}
+                </div>
+              ))}
+            </div>
+          </div>
+        ))}
+      </div>
+    </>
+  );
+};
diff --git a/web/components/gantt-chart/chart/quarter.tsx b/web/components/gantt-chart/chart/views/quarter.tsx
similarity index 98%
rename from web/components/gantt-chart/chart/quarter.tsx
rename to web/components/gantt-chart/chart/views/quarter.tsx
index a15f6f34d..ffbc1cbfe 100644
--- a/web/components/gantt-chart/chart/quarter.tsx
+++ b/web/components/gantt-chart/chart/views/quarter.tsx
@@ -1,6 +1,6 @@
 import { FC } from "react";
 // context
-import { useChart } from "../hooks";
+import { useChart } from "../../hooks";
 
 export const QuarterChartView: FC<any> = () => {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
diff --git a/web/components/gantt-chart/chart/week.tsx b/web/components/gantt-chart/chart/views/week.tsx
similarity index 98%
rename from web/components/gantt-chart/chart/week.tsx
rename to web/components/gantt-chart/chart/views/week.tsx
index b90caf8b7..8170affa4 100644
--- a/web/components/gantt-chart/chart/week.tsx
+++ b/web/components/gantt-chart/chart/views/week.tsx
@@ -1,6 +1,6 @@
 import { FC } from "react";
 // context
-import { useChart } from "../hooks";
+import { useChart } from "../../hooks";
 
 export const WeekChartView: FC<any> = () => {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
diff --git a/web/components/gantt-chart/chart/year.tsx b/web/components/gantt-chart/chart/views/year.tsx
similarity index 98%
rename from web/components/gantt-chart/chart/year.tsx
rename to web/components/gantt-chart/chart/views/year.tsx
index 7c3a34b53..9dbeedece 100644
--- a/web/components/gantt-chart/chart/year.tsx
+++ b/web/components/gantt-chart/chart/views/year.tsx
@@ -1,6 +1,6 @@
 import { FC } from "react";
 // context
-import { useChart } from "../hooks";
+import { useChart } from "../../hooks";
 
 export const YearChartView: FC<any> = () => {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
diff --git a/web/components/gantt-chart/constants.ts b/web/components/gantt-chart/constants.ts
new file mode 100644
index 000000000..958985cf1
--- /dev/null
+++ b/web/components/gantt-chart/constants.ts
@@ -0,0 +1,5 @@
+export const BLOCK_HEIGHT = 44;
+
+export const HEADER_HEIGHT = 60;
+
+export const SIDEBAR_WIDTH = 360;
diff --git a/web/components/gantt-chart/contexts/index.tsx b/web/components/gantt-chart/contexts/index.tsx
index 137cc2607..84e7a19b5 100644
--- a/web/components/gantt-chart/contexts/index.tsx
+++ b/web/components/gantt-chart/contexts/index.tsx
@@ -24,6 +24,7 @@ const chartReducer = (state: ChartContextData, action: ChartContextActionPayload
 const initialView = "month";
 
 export const ChartContextProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  // states;
   const [state, dispatch] = useState<ChartContextData>({
     currentView: initialView,
     currentViewData: currentViewDataWithView(initialView),
@@ -31,23 +32,25 @@ export const ChartContextProvider: React.FC<{ children: React.ReactNode }> = ({
     allViews: allViewsWithData,
     activeBlock: null,
   });
-
   const [scrollLeft, setScrollLeft] = useState(0);
 
   const handleDispatch = (action: ChartContextActionPayload): ChartContextData => {
     const newState = chartReducer(state, action);
-
     dispatch(() => newState);
-
     return newState;
   };
 
-  const updateScrollLeft = (scrollLeft: number) => {
-    setScrollLeft(scrollLeft);
-  };
+  const updateScrollLeft = (scrollLeft: number) => setScrollLeft(scrollLeft);
 
   return (
-    <ChartContext.Provider value={{ ...state, scrollLeft, updateScrollLeft, dispatch: handleDispatch }}>
+    <ChartContext.Provider
+      value={{
+        ...state,
+        scrollLeft,
+        updateScrollLeft,
+        dispatch: handleDispatch,
+      }}
+    >
       {children}
     </ChartContext.Provider>
   );
diff --git a/web/components/gantt-chart/helpers/block-structure.tsx b/web/components/gantt-chart/helpers/block-structure.ts
similarity index 100%
rename from web/components/gantt-chart/helpers/block-structure.tsx
rename to web/components/gantt-chart/helpers/block-structure.ts
diff --git a/web/components/gantt-chart/helpers/draggable.tsx b/web/components/gantt-chart/helpers/draggable.tsx
index d2c4448bb..ac1602346 100644
--- a/web/components/gantt-chart/helpers/draggable.tsx
+++ b/web/components/gantt-chart/helpers/draggable.tsx
@@ -1,9 +1,11 @@
 import React, { useEffect, useRef, useState } from "react";
-import { ArrowLeft, ArrowRight } from "lucide-react";
+import { ArrowRight } from "lucide-react";
 // hooks
-import { useChart } from "../hooks";
-// types
-import { IGanttBlock } from "../types";
+import { IGanttBlock, useChart } from "components/gantt-chart";
+// helpers
+import { cn } from "helpers/common.helper";
+// constants
+import { SIDEBAR_WIDTH } from "../constants";
 
 type Props = {
   block: IGanttBlock;
@@ -20,7 +22,7 @@ export const ChartDraggable: React.FC<Props> = (props) => {
   const [isLeftResizing, setIsLeftResizing] = useState(false);
   const [isRightResizing, setIsRightResizing] = useState(false);
   const [isMoving, setIsMoving] = useState(false);
-  const [posFromLeft, setPosFromLeft] = useState<number | null>(null);
+  const [isHidden, setIsHidden] = useState(true);
   // refs
   const resizableRef = useRef<HTMLDivElement>(null);
   // chart hook
@@ -31,12 +33,10 @@ export const ChartDraggable: React.FC<Props> = (props) => {
 
     let delWidth = 0;
 
-    const ganttContainer = document.querySelector("#gantt-container") as HTMLElement;
-    const ganttSidebar = document.querySelector("#gantt-sidebar") as HTMLElement;
+    const ganttContainer = document.querySelector("#gantt-container") as HTMLDivElement;
+    const ganttSidebar = document.querySelector("#gantt-sidebar") as HTMLDivElement;
 
-    const scrollContainer = document.querySelector("#scroll-container") as HTMLElement;
-
-    if (!ganttContainer || !ganttSidebar || !scrollContainer) return 0;
+    if (!ganttContainer || !ganttSidebar) return 0;
 
     const posFromLeft = e.clientX;
     // manually scroll to left if reached the left end while dragging
@@ -45,7 +45,7 @@ export const ChartDraggable: React.FC<Props> = (props) => {
 
       delWidth = -5;
 
-      scrollContainer.scrollBy(delWidth, 0);
+      ganttContainer.scrollBy(delWidth, 0);
     } else delWidth = e.movementX;
 
     // manually scroll to right if reached the right end while dragging
@@ -55,7 +55,7 @@ export const ChartDraggable: React.FC<Props> = (props) => {
 
       delWidth = 5;
 
-      scrollContainer.scrollBy(delWidth, 0);
+      ganttContainer.scrollBy(delWidth, 0);
     } else delWidth = e.movementX;
 
     return delWidth;
@@ -201,50 +201,61 @@ export const ChartDraggable: React.FC<Props> = (props) => {
   };
   // scroll to a hidden block
   const handleScrollToBlock = () => {
-    const scrollContainer = document.querySelector("#scroll-container") as HTMLElement;
-
+    const scrollContainer = document.querySelector("#gantt-container") as HTMLDivElement;
     if (!scrollContainer || !block.position) return;
-
     // update container's scroll position to the block's position
     scrollContainer.scrollLeft = block.position.marginLeft - 4;
   };
-  // update block position from viewport's left end on scroll
-  useEffect(() => {
-    const block = resizableRef.current;
-
-    if (!block) return;
-
-    setPosFromLeft(block.getBoundingClientRect().left);
-  }, [scrollLeft]);
   // check if block is hidden on either side
   const isBlockHiddenOnLeft =
     block.position?.marginLeft &&
     block.position?.width &&
     scrollLeft > block.position.marginLeft + block.position.width;
-  const isBlockHiddenOnRight = posFromLeft && window && posFromLeft > window.innerWidth;
+
+  useEffect(() => {
+    const intersectionRoot = document.querySelector("#gantt-container") as HTMLDivElement;
+    const resizableBlock = resizableRef.current;
+    if (!resizableBlock || !intersectionRoot) return;
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          setIsHidden(!entry.isIntersecting);
+        });
+      },
+      {
+        root: intersectionRoot,
+        rootMargin: `0px 0px 0px -${SIDEBAR_WIDTH}px`,
+      }
+    );
+
+    observer.observe(resizableBlock);
+
+    return () => {
+      observer.unobserve(resizableBlock);
+    };
+  }, [block.data.name]);
 
   return (
     <>
-      {/* move to left side hidden block button */}
-      {isBlockHiddenOnLeft && (
-        <div
-          className="fixed z-[1] ml-1 mt-1.5 grid h-8 w-8 cursor-pointer place-items-center rounded border border-custom-border-300 bg-custom-background-80 text-custom-text-200 hover:text-custom-text-100"
+      {/* move to the hidden block */}
+      {isHidden && (
+        <button
+          type="button"
+          className="sticky z-[1] grid h-8 w-8 translate-y-1.5 cursor-pointer place-items-center rounded border border-custom-border-300 bg-custom-background-80 text-custom-text-200 hover:text-custom-text-100"
+          style={{
+            left: `${SIDEBAR_WIDTH + 4}px`,
+          }}
           onClick={handleScrollToBlock}
         >
-          <ArrowLeft className="h-3.5 w-3.5" />
-        </div>
-      )}
-      {/* move to right side hidden block button */}
-      {isBlockHiddenOnRight && (
-        <div
-          className="fixed right-1 z-[1] mt-1.5 grid h-8 w-8 cursor-pointer place-items-center rounded border border-custom-border-300 bg-custom-background-80 text-custom-text-200 hover:text-custom-text-100"
-          onClick={handleScrollToBlock}
-        >
-          <ArrowRight className="h-3.5 w-3.5" />
-        </div>
+          <ArrowRight
+            className={cn("h-3.5 w-3.5", {
+              "rotate-180": isBlockHiddenOnLeft,
+            })}
+          />
+        </button>
       )}
       <div
-        id={`block-${block.id}`}
         ref={resizableRef}
         className="group relative inline-flex h-full cursor-pointer items-center font-medium transition-all"
         style={{
@@ -259,17 +270,22 @@ export const ChartDraggable: React.FC<Props> = (props) => {
               onMouseDown={handleBlockLeftResize}
               onMouseEnter={() => setIsLeftResizing(true)}
               onMouseLeave={() => setIsLeftResizing(false)}
-              className="absolute -left-2.5 top-1/2 z-[3] h-full w-6 -translate-y-1/2 cursor-col-resize rounded-md"
+              className="absolute -left-2.5 top-1/2 -translate-y-1/2 z-[3] h-full w-6 cursor-col-resize rounded-md"
             />
             <div
-              className={`absolute top-1/2 h-7 w-1 -translate-y-1/2 rounded-sm bg-custom-background-100 transition-all duration-300 ${
-                isLeftResizing ? "-left-2.5" : "left-1"
-              }`}
+              className={cn(
+                "absolute left-1 top-1/2 -translate-y-1/2 h-7 w-1 rounded-sm bg-custom-background-100 transition-all duration-300",
+                {
+                  "-left-2.5": isLeftResizing,
+                }
+              )}
             />
           </>
         )}
         <div
-          className={`relative z-[2] flex h-8 w-full items-center rounded ${isMoving ? "pointer-events-none" : ""}`}
+          className={cn("relative z-[2] flex h-8 w-full items-center rounded", {
+            "pointer-events-none": isMoving,
+          })}
           onMouseDown={handleBlockMove}
         >
           {blockToRender(block.data)}
@@ -281,12 +297,15 @@ export const ChartDraggable: React.FC<Props> = (props) => {
               onMouseDown={handleBlockRightResize}
               onMouseEnter={() => setIsRightResizing(true)}
               onMouseLeave={() => setIsRightResizing(false)}
-              className="absolute -right-2.5 top-1/2 z-[2] h-full w-6 -translate-y-1/2 cursor-col-resize rounded-md"
+              className="absolute -right-2.5 top-1/2 -translate-y-1/2 z-[2] h-full w-6 cursor-col-resize rounded-md"
             />
             <div
-              className={`absolute top-1/2 h-7 w-1 -translate-y-1/2 rounded-sm bg-custom-background-100 transition-all duration-300 ${
-                isRightResizing ? "-right-2.5" : "right-1"
-              }`}
+              className={cn(
+                "absolute right-1 top-1/2 -translate-y-1/2 h-7 w-1 rounded-sm bg-custom-background-100 transition-all duration-300",
+                {
+                  "-right-2.5": isRightResizing,
+                }
+              )}
             />
           </>
         )}
diff --git a/web/components/gantt-chart/index.ts b/web/components/gantt-chart/index.ts
index ead696086..54a2cc597 100644
--- a/web/components/gantt-chart/index.ts
+++ b/web/components/gantt-chart/index.ts
@@ -1,4 +1,5 @@
 export * from "./blocks";
+export * from "./chart";
 export * from "./helpers";
 export * from "./hooks";
 export * from "./root";
diff --git a/web/components/gantt-chart/root.tsx b/web/components/gantt-chart/root.tsx
index 7673da88e..c8576436e 100644
--- a/web/components/gantt-chart/root.tsx
+++ b/web/components/gantt-chart/root.tsx
@@ -1,10 +1,8 @@
 import { FC } from "react";
 // components
-import { ChartViewRoot } from "./chart";
+import { ChartViewRoot, IBlockUpdateData, IGanttBlock } from "components/gantt-chart";
 // context
 import { ChartContextProvider } from "./contexts";
-// types
-import { IBlockUpdateData, IGanttBlock } from "./types";
 
 type GanttChartRootProps = {
   border?: boolean;
diff --git a/web/components/gantt-chart/sidebar/cycle-sidebar.tsx b/web/components/gantt-chart/sidebar/cycles.tsx
similarity index 85%
rename from web/components/gantt-chart/sidebar/cycle-sidebar.tsx
rename to web/components/gantt-chart/sidebar/cycles.tsx
index dddccda5a..384869a40 100644
--- a/web/components/gantt-chart/sidebar/cycle-sidebar.tsx
+++ b/web/components/gantt-chart/sidebar/cycles.tsx
@@ -1,4 +1,3 @@
-import { useRouter } from "next/router";
 import { DragDropContext, Draggable, DropResult, Droppable } from "@hello-pangea/dnd";
 import { MoreVertical } from "lucide-react";
 // hooks
@@ -9,8 +8,11 @@ import { Loader } from "@plane/ui";
 import { CycleGanttSidebarBlock } from "components/cycles";
 // helpers
 import { findTotalDaysInRange } from "helpers/date-time.helper";
+import { cn } from "helpers/common.helper";
 // types
 import { IBlockUpdateData, IGanttBlock } from "components/gantt-chart/types";
+// constants
+import { BLOCK_HEIGHT } from "../constants";
 
 type Props = {
   title: string;
@@ -20,12 +22,8 @@ type Props = {
 };
 
 export const CycleGanttSidebar: React.FC<Props> = (props) => {
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const { title, blockUpdateHandler, blocks, enableReorder } = props;
-
-  const router = useRouter();
-  const { cycleId } = router.query;
-
+  const { blockUpdateHandler, blocks, enableReorder } = props;
+  // chart hook
   const { activeBlock, dispatch } = useChart();
 
   // update the active block on hover
@@ -84,12 +82,7 @@ export const CycleGanttSidebar: React.FC<Props> = (props) => {
     <DragDropContext onDragEnd={handleOrderChange}>
       <Droppable droppableId="gantt-sidebar">
         {(droppableProvided) => (
-          <div
-            id={`gantt-sidebar-${cycleId}`}
-            className="mt-3 max-h-full overflow-y-auto pl-2.5"
-            ref={droppableProvided.innerRef}
-            {...droppableProvided.droppableProps}
-          >
+          <div className="h-full" ref={droppableProvided.innerRef} {...droppableProvided.droppableProps}>
             <>
               {blocks ? (
                 blocks.map((block, index) => {
@@ -104,7 +97,9 @@ export const CycleGanttSidebar: React.FC<Props> = (props) => {
                     >
                       {(provided, snapshot) => (
                         <div
-                          className={`h-11 ${snapshot.isDragging ? "rounded bg-custom-background-80" : ""}`}
+                          className={cn({
+                            "rounded bg-custom-background-80": snapshot.isDragging,
+                          })}
                           onMouseEnter={() => updateActiveBlock(block)}
                           onMouseLeave={() => updateActiveBlock(null)}
                           ref={provided.innerRef}
@@ -112,9 +107,12 @@ export const CycleGanttSidebar: React.FC<Props> = (props) => {
                         >
                           <div
                             id={`sidebar-block-${block.id}`}
-                            className={`group flex h-full w-full items-center gap-2 rounded-l px-2 pr-4 ${
-                              activeBlock?.id === block.id ? "bg-custom-background-80" : ""
-                            }`}
+                            className={cn("group w-full flex items-center gap-2 pl-2 pr-4", {
+                              "bg-custom-background-80": activeBlock?.id === block.id,
+                            })}
+                            style={{
+                              height: `${BLOCK_HEIGHT}px`,
+                            }}
                           >
                             {enableReorder && (
                               <button
@@ -128,9 +126,9 @@ export const CycleGanttSidebar: React.FC<Props> = (props) => {
                             )}
                             <div className="flex h-full flex-grow items-center justify-between gap-2 truncate">
                               <div className="flex-grow truncate">
-                                <CycleGanttSidebarBlock data={block.data} />
+                                <CycleGanttSidebarBlock cycleId={block.data.id} />
                               </div>
-                              {duration !== undefined && (
+                              {duration && (
                                 <div className="flex-shrink-0 text-sm text-custom-text-200">
                                   {duration} day{duration > 1 ? "s" : ""}
                                 </div>
diff --git a/web/components/gantt-chart/sidebar/index.ts b/web/components/gantt-chart/sidebar/index.ts
index 8b1d72237..8a068a7c5 100644
--- a/web/components/gantt-chart/sidebar/index.ts
+++ b/web/components/gantt-chart/sidebar/index.ts
@@ -1,4 +1,5 @@
-export * from "./cycle-sidebar";
-export * from "./module-sidebar";
-export * from "./sidebar";
-export * from "./project-view-sidebar";
+export * from "./cycles";
+export * from "./issues";
+export * from "./modules";
+export * from "./project-views";
+export * from "./root";
diff --git a/web/components/gantt-chart/sidebar/issues.tsx b/web/components/gantt-chart/sidebar/issues.tsx
new file mode 100644
index 000000000..77b373ac8
--- /dev/null
+++ b/web/components/gantt-chart/sidebar/issues.tsx
@@ -0,0 +1,195 @@
+import { observer } from "mobx-react";
+import { DragDropContext, Draggable, Droppable, DropResult } from "@hello-pangea/dnd";
+import { MoreVertical } from "lucide-react";
+// hooks
+import { useChart } from "components/gantt-chart/hooks";
+import { useIssueDetail } from "hooks/store";
+// ui
+import { Loader } from "@plane/ui";
+// components
+import { GanttQuickAddIssueForm, IssueGanttSidebarBlock } from "components/issues";
+// helpers
+import { findTotalDaysInRange } from "helpers/date-time.helper";
+import { cn } from "helpers/common.helper";
+// types
+import { IGanttBlock, IBlockUpdateData } from "components/gantt-chart/types";
+import { TIssue } from "@plane/types";
+import { BLOCK_HEIGHT } from "../constants";
+
+type Props = {
+  blockUpdateHandler: (block: any, payload: IBlockUpdateData) => void;
+  blocks: IGanttBlock[] | null;
+  enableReorder: boolean;
+  enableQuickIssueCreate?: boolean;
+  quickAddCallback?: (
+    workspaceSlug: string,
+    projectId: string,
+    data: TIssue,
+    viewId?: string
+  ) => Promise<TIssue | undefined>;
+  viewId?: string;
+  disableIssueCreation?: boolean;
+  showAllBlocks?: boolean;
+};
+
+export const IssueGanttSidebar: React.FC<Props> = observer((props) => {
+  const {
+    blockUpdateHandler,
+    blocks,
+    enableReorder,
+    enableQuickIssueCreate,
+    quickAddCallback,
+    viewId,
+    disableIssueCreation,
+    showAllBlocks = false,
+  } = props;
+
+  const { activeBlock, dispatch } = useChart();
+  const { peekIssue } = useIssueDetail();
+
+  // update the active block on hover
+  const updateActiveBlock = (block: IGanttBlock | null) => {
+    dispatch({
+      type: "PARTIAL_UPDATE",
+      payload: {
+        activeBlock: block,
+      },
+    });
+  };
+
+  const handleOrderChange = (result: DropResult) => {
+    if (!blocks) return;
+
+    const { source, destination } = result;
+
+    // return if dropped outside the list
+    if (!destination) return;
+
+    // return if dropped on the same index
+    if (source.index === destination.index) return;
+
+    let updatedSortOrder = blocks[source.index].sort_order;
+
+    // update the sort order to the lowest if dropped at the top
+    if (destination.index === 0) updatedSortOrder = blocks[0].sort_order - 1000;
+    // update the sort order to the highest if dropped at the bottom
+    else if (destination.index === blocks.length - 1) updatedSortOrder = blocks[blocks.length - 1].sort_order + 1000;
+    // update the sort order to the average of the two adjacent blocks if dropped in between
+    else {
+      const destinationSortingOrder = blocks[destination.index].sort_order;
+      const relativeDestinationSortingOrder =
+        source.index < destination.index
+          ? blocks[destination.index + 1].sort_order
+          : blocks[destination.index - 1].sort_order;
+
+      updatedSortOrder = (destinationSortingOrder + relativeDestinationSortingOrder) / 2;
+    }
+
+    // extract the element from the source index and insert it at the destination index without updating the entire array
+    const removedElement = blocks.splice(source.index, 1)[0];
+    blocks.splice(destination.index, 0, removedElement);
+
+    // call the block update handler with the updated sort order, new and old index
+    blockUpdateHandler(removedElement.data, {
+      sort_order: {
+        destinationIndex: destination.index,
+        newSortOrder: updatedSortOrder,
+        sourceIndex: source.index,
+      },
+    });
+  };
+
+  return (
+    <>
+      <DragDropContext onDragEnd={handleOrderChange}>
+        <Droppable droppableId="gantt-sidebar">
+          {(droppableProvided) => (
+            <div ref={droppableProvided.innerRef} {...droppableProvided.droppableProps}>
+              <>
+                {blocks ? (
+                  blocks.map((block, index) => {
+                    const isBlockVisibleOnSidebar = block.start_date && block.target_date;
+
+                    // hide the block if it doesn't have start and target dates and showAllBlocks is false
+                    if (!showAllBlocks && !isBlockVisibleOnSidebar) return;
+
+                    const duration =
+                      !block.start_date || !block.target_date
+                        ? null
+                        : findTotalDaysInRange(block.start_date, block.target_date);
+
+                    return (
+                      <Draggable
+                        key={`sidebar-block-${block.id}`}
+                        draggableId={`sidebar-block-${block.id}`}
+                        index={index}
+                        isDragDisabled={!enableReorder}
+                      >
+                        {(provided, snapshot) => (
+                          <div
+                            className={cn({
+                              "rounded bg-custom-background-80": snapshot.isDragging,
+                              "rounded-l border border-r-0 border-custom-primary-70 hover:border-custom-primary-70":
+                                peekIssue?.issueId === block.data.id,
+                            })}
+                            onMouseEnter={() => updateActiveBlock(block)}
+                            onMouseLeave={() => updateActiveBlock(null)}
+                            ref={provided.innerRef}
+                            {...provided.draggableProps}
+                          >
+                            <div
+                              className={cn("group w-full flex items-center gap-2 pl-2 pr-4", {
+                                "bg-custom-background-80": activeBlock?.id === block.id,
+                              })}
+                              style={{
+                                height: `${BLOCK_HEIGHT}px`,
+                              }}
+                            >
+                              {enableReorder && (
+                                <button
+                                  type="button"
+                                  className="flex flex-shrink-0 rounded p-0.5 text-custom-sidebar-text-200 opacity-0 group-hover:opacity-100"
+                                  {...provided.dragHandleProps}
+                                >
+                                  <MoreVertical className="h-3.5 w-3.5" />
+                                  <MoreVertical className="-ml-5 h-3.5 w-3.5" />
+                                </button>
+                              )}
+                              <div className="flex h-full flex-grow items-center justify-between gap-2 truncate">
+                                <div className="flex-grow truncate">
+                                  <IssueGanttSidebarBlock issueId={block.data.id} />
+                                </div>
+                                {duration && (
+                                  <div className="flex-shrink-0 text-sm text-custom-text-200">
+                                    <span>
+                                      {duration} day{duration > 1 ? "s" : ""}
+                                    </span>
+                                  </div>
+                                )}
+                              </div>
+                            </div>
+                          </div>
+                        )}
+                      </Draggable>
+                    );
+                  })
+                ) : (
+                  <Loader className="space-y-3 pr-2">
+                    <Loader.Item height="34px" />
+                    <Loader.Item height="34px" />
+                    <Loader.Item height="34px" />
+                    <Loader.Item height="34px" />
+                  </Loader>
+                )}
+                {droppableProvided.placeholder}
+              </>
+            </div>
+          )}
+        </Droppable>
+      </DragDropContext>
+      {enableQuickIssueCreate && !disableIssueCreation && (
+        <GanttQuickAddIssueForm quickAddCallback={quickAddCallback} viewId={viewId} />
+      )}
+    </>
+  );
+});
diff --git a/web/components/gantt-chart/sidebar/module-sidebar.tsx b/web/components/gantt-chart/sidebar/modules.tsx
similarity index 86%
rename from web/components/gantt-chart/sidebar/module-sidebar.tsx
rename to web/components/gantt-chart/sidebar/modules.tsx
index 8f8788787..bdf8ca571 100644
--- a/web/components/gantt-chart/sidebar/module-sidebar.tsx
+++ b/web/components/gantt-chart/sidebar/modules.tsx
@@ -1,4 +1,3 @@
-import { useRouter } from "next/router";
 import { DragDropContext, Draggable, Droppable, DropResult } from "@hello-pangea/dnd";
 import { MoreVertical } from "lucide-react";
 // hooks
@@ -9,8 +8,11 @@ import { Loader } from "@plane/ui";
 import { ModuleGanttSidebarBlock } from "components/modules";
 // helpers
 import { findTotalDaysInRange } from "helpers/date-time.helper";
+import { cn } from "helpers/common.helper";
 // types
 import { IBlockUpdateData, IGanttBlock } from "components/gantt-chart";
+// constants
+import { BLOCK_HEIGHT } from "../constants";
 
 type Props = {
   title: string;
@@ -20,12 +22,8 @@ type Props = {
 };
 
 export const ModuleGanttSidebar: React.FC<Props> = (props) => {
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const { title, blockUpdateHandler, blocks, enableReorder } = props;
-
-  const router = useRouter();
-  const { cycleId } = router.query;
-
+  const { blockUpdateHandler, blocks, enableReorder } = props;
+  // chart hook
   const { activeBlock, dispatch } = useChart();
 
   // update the active block on hover
@@ -84,12 +82,7 @@ export const ModuleGanttSidebar: React.FC<Props> = (props) => {
     <DragDropContext onDragEnd={handleOrderChange}>
       <Droppable droppableId="gantt-sidebar">
         {(droppableProvided) => (
-          <div
-            id={`gantt-sidebar-${cycleId}`}
-            className="mt-3 max-h-full overflow-y-auto pl-2.5"
-            ref={droppableProvided.innerRef}
-            {...droppableProvided.droppableProps}
-          >
+          <div className="h-full" ref={droppableProvided.innerRef} {...droppableProvided.droppableProps}>
             <>
               {blocks ? (
                 blocks.map((block, index) => {
@@ -104,7 +97,9 @@ export const ModuleGanttSidebar: React.FC<Props> = (props) => {
                     >
                       {(provided, snapshot) => (
                         <div
-                          className={`h-11 ${snapshot.isDragging ? "rounded bg-custom-background-80" : ""}`}
+                          className={cn({
+                            "rounded bg-custom-background-80": snapshot.isDragging,
+                          })}
                           onMouseEnter={() => updateActiveBlock(block)}
                           onMouseLeave={() => updateActiveBlock(null)}
                           ref={provided.innerRef}
@@ -112,9 +107,12 @@ export const ModuleGanttSidebar: React.FC<Props> = (props) => {
                         >
                           <div
                             id={`sidebar-block-${block.id}`}
-                            className={`group flex h-full w-full items-center gap-2 rounded-l px-2 pr-4 ${
-                              activeBlock?.id === block.id ? "bg-custom-background-80" : ""
-                            }`}
+                            className={cn("group w-full flex items-center gap-2 pl-2 pr-4", {
+                              "bg-custom-background-80": activeBlock?.id === block.id,
+                            })}
+                            style={{
+                              height: `${BLOCK_HEIGHT}px`,
+                            }}
                           >
                             {enableReorder && (
                               <button
@@ -128,7 +126,7 @@ export const ModuleGanttSidebar: React.FC<Props> = (props) => {
                             )}
                             <div className="flex h-full flex-grow items-center justify-between gap-2 truncate">
                               <div className="flex-grow truncate">
-                                <ModuleGanttSidebarBlock data={block.data} />
+                                <ModuleGanttSidebarBlock moduleId={block.data.id} />
                               </div>
                               {duration !== undefined && (
                                 <div className="flex-shrink-0 text-sm text-custom-text-200">
diff --git a/web/components/gantt-chart/sidebar/project-view-sidebar.tsx b/web/components/gantt-chart/sidebar/project-views.tsx
similarity index 92%
rename from web/components/gantt-chart/sidebar/project-view-sidebar.tsx
rename to web/components/gantt-chart/sidebar/project-views.tsx
index 6e31215c1..a27c4dded 100644
--- a/web/components/gantt-chart/sidebar/project-view-sidebar.tsx
+++ b/web/components/gantt-chart/sidebar/project-views.tsx
@@ -1,4 +1,3 @@
-import { useRouter } from "next/router";
 import { DragDropContext, Draggable, Droppable, DropResult } from "@hello-pangea/dnd";
 import { MoreVertical } from "lucide-react";
 // hooks
@@ -11,6 +10,8 @@ import { IssueGanttSidebarBlock } from "components/issues";
 import { findTotalDaysInRange } from "helpers/date-time.helper";
 // types
 import { IBlockUpdateData, IGanttBlock } from "components/gantt-chart/types";
+// constants
+import { BLOCK_HEIGHT } from "../constants";
 
 type Props = {
   title: string;
@@ -21,12 +22,8 @@ type Props = {
 };
 
 export const ProjectViewGanttSidebar: React.FC<Props> = (props) => {
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const { title, blockUpdateHandler, blocks, enableReorder } = props;
-
-  const router = useRouter();
-  const { cycleId } = router.query;
-
+  const { blockUpdateHandler, blocks, enableReorder } = props;
+  // chart hook
   const { activeBlock, dispatch } = useChart();
 
   // update the active block on hover
@@ -86,7 +83,6 @@ export const ProjectViewGanttSidebar: React.FC<Props> = (props) => {
       <Droppable droppableId="gantt-sidebar">
         {(droppableProvided) => (
           <div
-            id={`gantt-sidebar-${cycleId}`}
             className="mt-3 max-h-full overflow-y-auto pl-2.5"
             ref={droppableProvided.innerRef}
             {...droppableProvided.droppableProps}
@@ -105,7 +101,10 @@ export const ProjectViewGanttSidebar: React.FC<Props> = (props) => {
                     >
                       {(provided, snapshot) => (
                         <div
-                          className={`h-11 ${snapshot.isDragging ? "rounded bg-custom-background-80" : ""}`}
+                          className={`${snapshot.isDragging ? "rounded bg-custom-background-80" : ""}`}
+                          style={{
+                            height: `${BLOCK_HEIGHT}px`,
+                          }}
                           onMouseEnter={() => updateActiveBlock(block)}
                           onMouseLeave={() => updateActiveBlock(null)}
                           ref={provided.innerRef}
@@ -129,7 +128,7 @@ export const ProjectViewGanttSidebar: React.FC<Props> = (props) => {
                             )}
                             <div className="flex h-full flex-grow items-center justify-between gap-2 truncate">
                               <div className="flex-grow truncate">
-                                <IssueGanttSidebarBlock data={block.data} />
+                                <IssueGanttSidebarBlock issueId={block.data.id} />
                               </div>
                               {duration !== undefined && (
                                 <div className="flex-shrink-0 text-sm text-custom-text-200">
diff --git a/web/components/gantt-chart/sidebar/root.tsx b/web/components/gantt-chart/sidebar/root.tsx
new file mode 100644
index 000000000..ceefb5809
--- /dev/null
+++ b/web/components/gantt-chart/sidebar/root.tsx
@@ -0,0 +1,41 @@
+// components
+import { IBlockUpdateData, IGanttBlock } from "components/gantt-chart";
+// constants
+import { HEADER_HEIGHT, SIDEBAR_WIDTH } from "../constants";
+
+type Props = {
+  blocks: IGanttBlock[] | null;
+  blockUpdateHandler: (block: any, payload: IBlockUpdateData) => void;
+  enableReorder: boolean;
+  sidebarToRender: (props: any) => React.ReactNode;
+  title: string;
+};
+
+export const GanttChartSidebar: React.FC<Props> = (props) => {
+  const { blocks, blockUpdateHandler, enableReorder, sidebarToRender, title } = props;
+
+  return (
+    <div
+      // DO NOT REMOVE THE ID
+      id="gantt-sidebar"
+      className="sticky left-0 z-10 min-h-full h-max flex-shrink-0 border-r-[0.5px] border-custom-border-200"
+      style={{
+        width: `${SIDEBAR_WIDTH}px`,
+      }}
+    >
+      <div
+        className="box-border flex-shrink-0 flex items-end justify-between gap-2 border-b-[0.5px] border-custom-border-200 pb-2 pl-8 pr-4 text-sm font-medium text-custom-text-300 sticky top-0 z-10 bg-custom-background-100"
+        style={{
+          height: `${HEADER_HEIGHT}px`,
+        }}
+      >
+        <h6>{title}</h6>
+        <h6>Duration</h6>
+      </div>
+
+      <div className="min-h-full h-max bg-custom-background-100">
+        {sidebarToRender && sidebarToRender({ title, blockUpdateHandler, blocks, enableReorder })}
+      </div>
+    </div>
+  );
+};
diff --git a/web/components/gantt-chart/sidebar/sidebar.tsx b/web/components/gantt-chart/sidebar/sidebar.tsx
deleted file mode 100644
index 12de8e127..000000000
--- a/web/components/gantt-chart/sidebar/sidebar.tsx
+++ /dev/null
@@ -1,198 +0,0 @@
-import { useRouter } from "next/router";
-import { DragDropContext, Draggable, Droppable, DropResult } from "@hello-pangea/dnd";
-import { MoreVertical } from "lucide-react";
-// hooks
-import { useChart } from "components/gantt-chart/hooks";
-import { useIssueDetail } from "hooks/store";
-// ui
-import { Loader } from "@plane/ui";
-// components
-import { GanttQuickAddIssueForm, IssueGanttSidebarBlock } from "components/issues";
-// helpers
-import { findTotalDaysInRange } from "helpers/date-time.helper";
-import { cn } from "helpers/common.helper";
-// types
-import { IGanttBlock, IBlockUpdateData } from "components/gantt-chart/types";
-import { TIssue } from "@plane/types";
-
-type Props = {
-  blockUpdateHandler: (block: any, payload: IBlockUpdateData) => void;
-  blocks: IGanttBlock[] | null;
-  enableReorder: boolean;
-  enableQuickIssueCreate?: boolean;
-  quickAddCallback?: (
-    workspaceSlug: string,
-    projectId: string,
-    data: TIssue,
-    viewId?: string
-  ) => Promise<TIssue | undefined>;
-  viewId?: string;
-  disableIssueCreation?: boolean;
-  showAllBlocks?: boolean;
-};
-
-export const IssueGanttSidebar: React.FC<Props> = (props) => {
-  const {
-    blockUpdateHandler,
-    blocks,
-    enableReorder,
-    enableQuickIssueCreate,
-    quickAddCallback,
-    viewId,
-    disableIssueCreation,
-    showAllBlocks = false,
-  } = props;
-
-  const router = useRouter();
-  const { cycleId } = router.query;
-
-  const { activeBlock, dispatch } = useChart();
-  const { peekIssue } = useIssueDetail();
-
-  // update the active block on hover
-  const updateActiveBlock = (block: IGanttBlock | null) => {
-    dispatch({
-      type: "PARTIAL_UPDATE",
-      payload: {
-        activeBlock: block,
-      },
-    });
-  };
-
-  const handleOrderChange = (result: DropResult) => {
-    if (!blocks) return;
-
-    const { source, destination } = result;
-
-    // return if dropped outside the list
-    if (!destination) return;
-
-    // return if dropped on the same index
-    if (source.index === destination.index) return;
-
-    let updatedSortOrder = blocks[source.index].sort_order;
-
-    // update the sort order to the lowest if dropped at the top
-    if (destination.index === 0) updatedSortOrder = blocks[0].sort_order - 1000;
-    // update the sort order to the highest if dropped at the bottom
-    else if (destination.index === blocks.length - 1) updatedSortOrder = blocks[blocks.length - 1].sort_order + 1000;
-    // update the sort order to the average of the two adjacent blocks if dropped in between
-    else {
-      const destinationSortingOrder = blocks[destination.index].sort_order;
-      const relativeDestinationSortingOrder =
-        source.index < destination.index
-          ? blocks[destination.index + 1].sort_order
-          : blocks[destination.index - 1].sort_order;
-
-      updatedSortOrder = (destinationSortingOrder + relativeDestinationSortingOrder) / 2;
-    }
-
-    // extract the element from the source index and insert it at the destination index without updating the entire array
-    const removedElement = blocks.splice(source.index, 1)[0];
-    blocks.splice(destination.index, 0, removedElement);
-
-    // call the block update handler with the updated sort order, new and old index
-    blockUpdateHandler(removedElement.data, {
-      sort_order: {
-        destinationIndex: destination.index,
-        newSortOrder: updatedSortOrder,
-        sourceIndex: source.index,
-      },
-    });
-  };
-
-  return (
-    <DragDropContext onDragEnd={handleOrderChange}>
-      <Droppable droppableId="gantt-sidebar">
-        {(droppableProvided) => (
-          <div
-            id={`gantt-sidebar-${cycleId}`}
-            className="mt-[12px] max-h-full overflow-y-auto pl-2.5"
-            ref={droppableProvided.innerRef}
-            {...droppableProvided.droppableProps}
-          >
-            <>
-              {blocks ? (
-                blocks.map((block, index) => {
-                  const isBlockVisibleOnSidebar = block.start_date && block.target_date;
-
-                  // hide the block if it doesn't have start and target dates and showAllBlocks is false
-                  if (!showAllBlocks && !isBlockVisibleOnSidebar) return;
-
-                  const duration = findTotalDaysInRange(block.start_date, block.target_date);
-
-                  return (
-                    <Draggable
-                      key={`sidebar-block-${block.id}`}
-                      draggableId={`sidebar-block-${block.id}`}
-                      index={index}
-                      isDragDisabled={!enableReorder}
-                    >
-                      {(provided, snapshot) => (
-                        <div
-                          className={cn(
-                            "h-11",
-                            { "rounded bg-custom-background-80": snapshot.isDragging },
-                            {
-                              "rounded-l border border-r-0 border-custom-primary-70 hover:border-custom-primary-70":
-                                peekIssue?.issueId === block.data.id,
-                            }
-                          )}
-                          onMouseEnter={() => updateActiveBlock(block)}
-                          onMouseLeave={() => updateActiveBlock(null)}
-                          ref={provided.innerRef}
-                          {...provided.draggableProps}
-                        >
-                          <div
-                            id={`sidebar-block-${block.id}`}
-                            className={`group flex h-full w-full items-center gap-2 rounded-l px-2 pr-4 ${
-                              activeBlock?.id === block.id ? "bg-custom-background-80" : ""
-                            }`}
-                          >
-                            {enableReorder && (
-                              <button
-                                type="button"
-                                className="flex flex-shrink-0 rounded p-0.5 text-custom-sidebar-text-200 opacity-0 group-hover:opacity-100"
-                                {...provided.dragHandleProps}
-                              >
-                                <MoreVertical className="h-3.5 w-3.5" />
-                                <MoreVertical className="-ml-5 h-3.5 w-3.5" />
-                              </button>
-                            )}
-                            <div className="flex h-full flex-grow items-center justify-between gap-2 truncate">
-                              <div className="flex-grow truncate">
-                                <IssueGanttSidebarBlock data={block.data} />
-                              </div>
-                              {duration !== undefined && (
-                                <div className="flex-shrink-0 text-sm text-custom-text-200">
-                                  <span>
-                                    {duration} day{duration > 1 ? "s" : ""}
-                                  </span>
-                                </div>
-                              )}
-                            </div>
-                          </div>
-                        </div>
-                      )}
-                    </Draggable>
-                  );
-                })
-              ) : (
-                <Loader className="space-y-3 pr-2">
-                  <Loader.Item height="34px" />
-                  <Loader.Item height="34px" />
-                  <Loader.Item height="34px" />
-                  <Loader.Item height="34px" />
-                </Loader>
-              )}
-              {droppableProvided.placeholder}
-            </>
-            {enableQuickIssueCreate && !disableIssueCreation && (
-              <GanttQuickAddIssueForm quickAddCallback={quickAddCallback} viewId={viewId} />
-            )}
-          </div>
-        )}
-      </Droppable>
-    </DragDropContext>
-  );
-};
diff --git a/web/components/issues/issue-layouts/gantt/base-gantt-root.tsx b/web/components/issues/issue-layouts/gantt/base-gantt-root.tsx
index 601205b5c..b0eb2be9c 100644
--- a/web/components/issues/issue-layouts/gantt/base-gantt-root.tsx
+++ b/web/components/issues/issue-layouts/gantt/base-gantt-root.tsx
@@ -69,7 +69,7 @@ export const BaseGanttRoot: React.FC<IBaseGanttRoot> = observer((props: IBaseGan
           loaderTitle="Issues"
           blocks={issues ? renderIssueBlocksStructure(issues as TIssue[]) : null}
           blockUpdateHandler={updateIssueBlockStructure}
-          blockToRender={(data: TIssue) => <IssueGanttBlock data={data} />}
+          blockToRender={(data: TIssue) => <IssueGanttBlock issueId={data.id} />}
           sidebarToRender={(props) => (
             <IssueGanttSidebar
               {...props}
diff --git a/web/components/issues/issue-layouts/gantt/blocks.tsx b/web/components/issues/issue-layouts/gantt/blocks.tsx
index cf1d5d700..18a767455 100644
--- a/web/components/issues/issue-layouts/gantt/blocks.tsx
+++ b/web/components/issues/issue-layouts/gantt/blocks.tsx
@@ -1,33 +1,41 @@
+import { observer } from "mobx-react";
+// hooks
+import { useApplication, useIssueDetail, useProject, useProjectState } from "hooks/store";
 // ui
 import { Tooltip, StateGroupIcon, ControlLink } from "@plane/ui";
 // helpers
 import { renderFormattedDate } from "helpers/date-time.helper";
-// types
-import { TIssue } from "@plane/types";
-import { useApplication, useIssueDetail, useProject, useProjectState } from "hooks/store";
 
-export const IssueGanttBlock = ({ data }: { data: TIssue }) => {
-  // hooks
+type Props = {
+  issueId: string;
+};
+
+export const IssueGanttBlock: React.FC<Props> = observer((props) => {
+  const { issueId } = props;
+  // store hooks
   const {
     router: { workspaceSlug },
   } = useApplication();
   const { getProjectStates } = useProjectState();
-  const { setPeekIssue } = useIssueDetail();
+  const {
+    issue: { getIssueById },
+    setPeekIssue,
+  } = useIssueDetail();
+  // derived values
+  const issueDetails = getIssueById(issueId);
+  const stateDetails =
+    issueDetails && getProjectStates(issueDetails?.project_id)?.find((state) => state?.id == issueDetails?.state_id);
 
   const handleIssuePeekOverview = () =>
     workspaceSlug &&
-    data &&
-    data.project_id &&
-    data.id &&
-    setPeekIssue({ workspaceSlug, projectId: data.project_id, issueId: data.id });
-
-  const stateColor = getProjectStates(data?.project_id)?.find((state) => state?.id == data?.state_id)?.color || "";
+    issueDetails &&
+    setPeekIssue({ workspaceSlug, projectId: issueDetails.project_id, issueId: issueDetails.id });
 
   return (
     <div
       className="relative flex h-full w-full cursor-pointer items-center rounded"
       style={{
-        backgroundColor: stateColor,
+        backgroundColor: stateDetails?.color,
       }}
       onClick={handleIssuePeekOverview}
     >
@@ -35,58 +43,62 @@ export const IssueGanttBlock = ({ data }: { data: TIssue }) => {
       <Tooltip
         tooltipContent={
           <div className="space-y-1">
-            <h5>{data?.name}</h5>
+            <h5>{issueDetails?.name}</h5>
             <div>
-              {renderFormattedDate(data?.start_date ?? "")} to {renderFormattedDate(data?.target_date ?? "")}
+              {renderFormattedDate(issueDetails?.start_date ?? "")} to{" "}
+              {renderFormattedDate(issueDetails?.target_date ?? "")}
             </div>
           </div>
         }
         position="top-left"
       >
-        <div className="relative w-full truncate px-2.5 py-1 text-sm text-custom-text-100">{data?.name}</div>
+        <div className="relative w-full truncate px-2.5 py-1 text-sm text-custom-text-100 overflow-hidden">
+          {issueDetails?.name}
+        </div>
       </Tooltip>
     </div>
   );
-};
+});
 
 // rendering issues on gantt sidebar
-export const IssueGanttSidebarBlock = ({ data }: { data: TIssue }) => {
-  // hooks
-  const { getProjectStates } = useProjectState();
+export const IssueGanttSidebarBlock: React.FC<Props> = observer((props) => {
+  const { issueId } = props;
+  // store hooks
+  const { getStateById } = useProjectState();
   const { getProjectById } = useProject();
   const {
     router: { workspaceSlug },
   } = useApplication();
-  const { setPeekIssue } = useIssueDetail();
+  const {
+    issue: { getIssueById },
+    setPeekIssue,
+  } = useIssueDetail();
+  // derived values
+  const issueDetails = getIssueById(issueId);
+  const projectDetails = issueDetails && getProjectById(issueDetails?.project_id);
+  const stateDetails = issueDetails && getStateById(issueDetails?.state_id);
 
   const handleIssuePeekOverview = () =>
     workspaceSlug &&
-    data &&
-    data.project_id &&
-    data.id &&
-    setPeekIssue({ workspaceSlug, projectId: data.project_id, issueId: data.id });
-
-  const currentStateDetails =
-    getProjectStates(data?.project_id)?.find((state) => state?.id == data?.state_id) || undefined;
+    issueDetails &&
+    setPeekIssue({ workspaceSlug, projectId: issueDetails.project_id, issueId: issueDetails.id });
 
   return (
     <ControlLink
-      href={`/${workspaceSlug}/projects/${data.project_id}/issues/${data.id}`}
+      href={`/${workspaceSlug}/projects/${issueDetails?.project_id}/issues/${issueDetails?.id}`}
       target="_blank"
       onClick={handleIssuePeekOverview}
       className="w-full line-clamp-1 cursor-pointer text-sm text-custom-text-100"
     >
       <div className="relative flex h-full w-full cursor-pointer items-center gap-2" onClick={handleIssuePeekOverview}>
-        {currentStateDetails != undefined && (
-          <StateGroupIcon stateGroup={currentStateDetails?.group} color={currentStateDetails?.color} />
-        )}
+        {stateDetails && <StateGroupIcon stateGroup={stateDetails?.group} color={stateDetails?.color} />}
         <div className="flex-shrink-0 text-xs text-custom-text-300">
-          {getProjectById(data?.project_id)?.identifier} {data?.sequence_id}
+          {projectDetails?.identifier} {issueDetails?.sequence_id}
         </div>
-        <Tooltip tooltipHeading="Title" tooltipContent={data.name}>
-          <span className="flex-grow truncate text-sm font-medium">{data?.name}</span>
+        <Tooltip tooltipHeading="Title" tooltipContent={issueDetails?.name}>
+          <span className="flex-grow truncate text-sm font-medium">{issueDetails?.name}</span>
         </Tooltip>
       </div>
     </ControlLink>
   );
-};
+});
diff --git a/web/components/issues/issue-layouts/gantt/quick-add-issue-form.tsx b/web/components/issues/issue-layouts/gantt/quick-add-issue-form.tsx
index bfecb993b..1ddd21ce2 100644
--- a/web/components/issues/issue-layouts/gantt/quick-add-issue-form.tsx
+++ b/web/components/issues/issue-layouts/gantt/quick-add-issue-form.tsx
@@ -11,6 +11,7 @@ import useOutsideClickDetector from "hooks/use-outside-click-detector";
 // helpers
 import { renderFormattedPayloadDate } from "helpers/date-time.helper";
 import { createIssuePayload } from "helpers/issue.helper";
+import { cn } from "helpers/common.helper";
 // types
 import { IProject, TIssue } from "@plane/types";
 // constants
@@ -138,10 +139,12 @@ export const GanttQuickAddIssueForm: React.FC<IGanttQuickAddIssueForm> = observe
   };
   return (
     <>
-      <div
-        className={`${errors && errors?.name && errors?.name?.message ? `border border-red-500/20 bg-red-500/10` : ``}`}
-      >
-        {isOpen ? (
+      {isOpen ? (
+        <div
+          className={cn("sticky bottom-0 z-[1] bg-custom-background-100", {
+            "border border-red-500/20 bg-red-500/10": errors && errors?.name && errors?.name?.message,
+          })}
+        >
           <div className="shadow-custom-shadow-sm">
             <form
               ref={ref}
@@ -152,16 +155,17 @@ export const GanttQuickAddIssueForm: React.FC<IGanttQuickAddIssueForm> = observe
             </form>
             <div className="px-3 py-2 text-xs italic text-custom-text-200">{`Press 'Enter' to add another issue`}</div>
           </div>
-        ) : (
-          <div
-            className="flex w-full cursor-pointer items-center gap-2 p-3 py-3 text-custom-primary-100"
-            onClick={() => setIsOpen(true)}
-          >
-            <PlusIcon className="h-3.5 w-3.5 stroke-2" />
-            <span className="text-sm font-medium text-custom-primary-100">New Issue</span>
-          </div>
-        )}
-      </div>
+        </div>
+      ) : (
+        <button
+          type="button"
+          className="sticky bottom-0 z-[1] flex w-full cursor-pointer items-center gap-2 p-3 py-3 text-custom-primary-100 bg-custom-background-100"
+          onClick={() => setIsOpen(true)}
+        >
+          <PlusIcon className="h-3.5 w-3.5 stroke-2" />
+          <span className="text-sm font-medium text-custom-primary-100">New Issue</span>
+        </button>
+      )}
     </>
   );
 });
diff --git a/web/components/modules/gantt-chart/blocks.tsx b/web/components/modules/gantt-chart/blocks.tsx
index 72717f12b..188d7b130 100644
--- a/web/components/modules/gantt-chart/blocks.tsx
+++ b/web/components/modules/gantt-chart/blocks.tsx
@@ -1,52 +1,74 @@
 import { useRouter } from "next/router";
+import { observer } from "mobx-react";
+// hooks
+import { useApplication, useModule } from "hooks/store";
 // ui
 import { Tooltip, ModuleStatusIcon } from "@plane/ui";
 // helpers
 import { renderFormattedDate } from "helpers/date-time.helper";
-// types
-import { IModule } from "@plane/types";
 // constants
 import { MODULE_STATUS } from "constants/module";
 
-export const ModuleGanttBlock = ({ data }: { data: IModule }) => {
+type Props = {
+  moduleId: string;
+};
+
+export const ModuleGanttBlock: React.FC<Props> = observer((props) => {
+  const { moduleId } = props;
+  // router
   const router = useRouter();
-  const { workspaceSlug } = router.query;
+  // store hooks
+  const {
+    router: { workspaceSlug },
+  } = useApplication();
+  const { getModuleById } = useModule();
+  // derived values
+  const moduleDetails = getModuleById(moduleId);
 
   return (
     <div
       className="relative flex h-full w-full items-center rounded"
-      style={{ backgroundColor: MODULE_STATUS.find((s) => s.value === data?.status)?.color }}
-      onClick={() => router.push(`/${workspaceSlug}/projects/${data?.project}/modules/${data?.id}`)}
+      style={{ backgroundColor: MODULE_STATUS.find((s) => s.value === moduleDetails?.status)?.color }}
+      onClick={() => router.push(`/${workspaceSlug}/projects/${moduleDetails?.project}/modules/${moduleDetails?.id}`)}
     >
       <div className="absolute left-0 top-0 h-full w-full bg-custom-background-100/50" />
       <Tooltip
         tooltipContent={
           <div className="space-y-1">
-            <h5>{data?.name}</h5>
+            <h5>{moduleDetails?.name}</h5>
             <div>
-              {renderFormattedDate(data?.start_date ?? "")} to {renderFormattedDate(data?.target_date ?? "")}
+              {renderFormattedDate(moduleDetails?.start_date ?? "")} to{" "}
+              {renderFormattedDate(moduleDetails?.target_date ?? "")}
             </div>
           </div>
         }
         position="top-left"
       >
-        <div className="relative w-full truncate px-2.5 py-1 text-sm text-custom-text-100">{data?.name}</div>
+        <div className="relative w-full truncate px-2.5 py-1 text-sm text-custom-text-100">{moduleDetails?.name}</div>
       </Tooltip>
     </div>
   );
-};
+});
 
-export const ModuleGanttSidebarBlock = ({ data }: { data: IModule }) => {
+export const ModuleGanttSidebarBlock: React.FC<Props> = observer((props) => {
+  const { moduleId } = props;
+  // router
   const router = useRouter();
-  const { workspaceSlug } = router.query;
+  // store hooks
+  const {
+    router: { workspaceSlug },
+  } = useApplication();
+  const { getModuleById } = useModule();
+  // derived values
+  const moduleDetails = getModuleById(moduleId);
 
   return (
     <div
       className="relative flex h-full w-full items-center gap-2"
-      onClick={() => router.push(`/${workspaceSlug}/projects/${data?.project}/modules/${data.id}`)}
+      onClick={() => router.push(`/${workspaceSlug}/projects/${moduleDetails?.project}/modules/${moduleDetails?.id}`)}
     >
-      <ModuleStatusIcon status={data?.status ?? "backlog"} height="16px" width="16px" />
-      <h6 className="flex-grow truncate text-sm font-medium">{data.name}</h6>
+      <ModuleStatusIcon status={moduleDetails?.status ?? "backlog"} height="16px" width="16px" />
+      <h6 className="flex-grow truncate text-sm font-medium">{moduleDetails?.name}</h6>
     </div>
   );
-};
+});
diff --git a/web/components/modules/gantt-chart/modules-list-layout.tsx b/web/components/modules/gantt-chart/modules-list-layout.tsx
index 53948f71d..a3f37df5c 100644
--- a/web/components/modules/gantt-chart/modules-list-layout.tsx
+++ b/web/components/modules/gantt-chart/modules-list-layout.tsx
@@ -47,7 +47,7 @@ export const ModulesListGanttChartView: React.FC = observer(() => {
         blocks={projectModuleIds ? blockFormat(projectModuleIds) : null}
         sidebarToRender={(props) => <ModuleGanttSidebar {...props} />}
         blockUpdateHandler={(block, payload) => handleModuleUpdate(block, payload)}
-        blockToRender={(data: IModule) => <ModuleGanttBlock data={data} />}
+        blockToRender={(data: IModule) => <ModuleGanttBlock moduleId={data.id} />}
         enableBlockLeftResize={isAllowed}
         enableBlockRightResize={isAllowed}
         enableBlockMove={isAllowed}

From 0fb43c6fc5e74d0f6824f52f58389177097d60d9 Mon Sep 17 00:00:00 2001
From: Bavisetti Narayan <72156168+NarayanBavisetti@users.noreply.github.com>
Date: Mon, 12 Feb 2024 15:26:02 +0530
Subject: [PATCH 49/58] chore: Removing 'description_html' from Issue List
 (#3623)

* chore: removed issue description from issue list

* fix: issue description handling on peekoverview

---------

Co-authored-by: sriram veeraghanta <veeraghanta.sriram@gmail.com>
---
 apiserver/plane/app/serializers/__init__.py   |  1 +
 apiserver/plane/app/serializers/issue.py      |  8 +-
 apiserver/plane/app/views/issue.py            |  3 +-
 web/components/issues/description-form.tsx    | 94 +++++++++++--------
 .../issues/peek-overview/issue-detail.tsx     |  6 +-
 ...aft.service.tsx => issue_draft.service.ts} |  0
 web/store/issue/issue-details/issue.store.ts  |  9 +-
 web/store/issue/issue.store.ts                |  6 +-
 8 files changed, 77 insertions(+), 50 deletions(-)
 rename web/services/issue/{issue_draft.service.tsx => issue_draft.service.ts} (100%)

diff --git a/apiserver/plane/app/serializers/__init__.py b/apiserver/plane/app/serializers/__init__.py
index 0d72f9192..28e881060 100644
--- a/apiserver/plane/app/serializers/__init__.py
+++ b/apiserver/plane/app/serializers/__init__.py
@@ -68,6 +68,7 @@ from .issue import (
     IssueRelationSerializer,
     RelatedIssueSerializer,
     IssuePublicSerializer,
+    IssueDetailSerializer,
 )
 
 from .module import (
diff --git a/apiserver/plane/app/serializers/issue.py b/apiserver/plane/app/serializers/issue.py
index be98bc312..90069bd41 100644
--- a/apiserver/plane/app/serializers/issue.py
+++ b/apiserver/plane/app/serializers/issue.py
@@ -586,7 +586,6 @@ class IssueSerializer(DynamicBaseSerializer):
             "id",
             "name",
             "state_id",
-            "description_html",
             "sort_order",
             "completed_at",
             "estimate_point",
@@ -618,6 +617,13 @@ class IssueSerializer(DynamicBaseSerializer):
         return [module for module in obj.issue_module.values_list("module_id", flat=True)]
 
 
+class IssueDetailSerializer(IssueSerializer):
+    description_html = serializers.CharField() 
+
+    class Meta(IssueSerializer.Meta):
+        fields = IssueSerializer.Meta.fields + ['description_html']
+
+
 class IssueLiteSerializer(DynamicBaseSerializer):
     workspace_detail = WorkspaceLiteSerializer(
         read_only=True, source="workspace"
diff --git a/apiserver/plane/app/views/issue.py b/apiserver/plane/app/views/issue.py
index 34bce8a0a..c8845150a 100644
--- a/apiserver/plane/app/views/issue.py
+++ b/apiserver/plane/app/views/issue.py
@@ -50,6 +50,7 @@ from plane.app.serializers import (
     CommentReactionSerializer,
     IssueRelationSerializer,
     RelatedIssueSerializer,
+    IssueDetailSerializer,
 )
 from plane.app.permissions import (
     ProjectEntityPermission,
@@ -267,7 +268,7 @@ class IssueViewSet(WebhookMixin, BaseViewSet):
     def retrieve(self, request, slug, project_id, pk=None):
         issue = self.get_queryset().filter(pk=pk).first()
         return Response(
-            IssueSerializer(
+            IssueDetailSerializer(
                 issue, fields=self.fields, expand=self.expand
             ).data,
             status=status.HTTP_200_OK,
diff --git a/web/components/issues/description-form.tsx b/web/components/issues/description-form.tsx
index ca6d7e0e7..b7601ef52 100644
--- a/web/components/issues/description-form.tsx
+++ b/web/components/issues/description-form.tsx
@@ -4,7 +4,7 @@ import { Controller, useForm } from "react-hook-form";
 import useReloadConfirmations from "hooks/use-reload-confirmation";
 import debounce from "lodash/debounce";
 // components
-import { TextArea } from "@plane/ui";
+import { Loader, TextArea } from "@plane/ui";
 import { RichReadOnlyEditor, RichTextEditor } from "@plane/rich-text-editor";
 // types
 import { TIssue } from "@plane/types";
@@ -12,6 +12,8 @@ import { TIssueOperations } from "./issue-detail";
 // services
 import { FileService } from "services/file.service";
 import { useMention, useWorkspace } from "hooks/store";
+import { observer } from "mobx-react";
+import { isNil } from "lodash";
 
 export interface IssueDescriptionFormValues {
   name: string;
@@ -36,7 +38,7 @@ export interface IssueDetailsProps {
 
 const fileService = new FileService();
 
-export const IssueDescriptionForm: FC<IssueDetailsProps> = (props) => {
+export const IssueDescriptionForm: FC<IssueDetailsProps> = observer((props) => {
   const { workspaceSlug, projectId, issueId, issue, issueOperations, disabled, isSubmitting, setIsSubmitting } = props;
   const workspaceStore = useWorkspace();
   const workspaceId = workspaceStore.getWorkspaceBySlug(workspaceSlug)?.id as string;
@@ -71,12 +73,20 @@ export const IssueDescriptionForm: FC<IssueDetailsProps> = (props) => {
   // editor rerendering on every save
   useEffect(() => {
     if (issue.id) {
-      setLocalIssueDescription({ id: issue.id, description_html: issue.description_html });
       setLocalTitleValue(issue.name);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [issue.id]); // TODO: verify the exhaustive-deps warning
 
+  useEffect(() => {
+    if (issue.description_html) {
+      setLocalIssueDescription((state) => {
+        if (!isNil(state.description_html)) return state;
+        return { id: issue.id, description_html: issue.description_html };
+      });
+    }
+  }, [issue.description_html]);
+
   const handleDescriptionFormSubmit = useCallback(
     async (formData: Partial<TIssue>) => {
       if (!formData?.name || formData?.name.length === 0 || formData?.name.length > 255) return;
@@ -167,42 +177,48 @@ export const IssueDescriptionForm: FC<IssueDetailsProps> = (props) => {
       </div>
       <span>{errors.name ? errors.name.message : null}</span>
       <div className="relative">
-        <Controller
-          name="description_html"
-          control={control}
-          render={({ field: { onChange } }) =>
-            !disabled ? (
-              <RichTextEditor
-                cancelUploadImage={fileService.cancelUpload}
-                uploadFile={fileService.getUploadFileFunction(workspaceSlug)}
-                deleteFile={fileService.getDeleteImageFunction(workspaceId)}
-                restoreFile={fileService.getRestoreImageFunction(workspaceId)}
-                value={localIssueDescription.description_html}
-                rerenderOnPropsChange={localIssueDescription}
-                setShouldShowAlert={setShowAlert}
-                setIsSubmitting={setIsSubmitting}
-                dragDropEnabled
-                customClassName="min-h-[150px] shadow-sm"
-                onChange={(description: Object, description_html: string) => {
-                  setShowAlert(true);
-                  setIsSubmitting("submitting");
-                  onChange(description_html);
-                  debouncedFormSave();
-                }}
-                mentionSuggestions={mentionSuggestions}
-                mentionHighlights={mentionHighlights}
-              />
-            ) : (
-              <RichReadOnlyEditor
-                value={localIssueDescription.description_html}
-                customClassName="!p-0 !pt-2 text-custom-text-200"
-                noBorder={disabled}
-                mentionHighlights={mentionHighlights}
-              />
-            )
-          }
-        />
+        {issue.description_html ? (
+          <Controller
+            name="description_html"
+            control={control}
+            render={({ field: { onChange } }) =>
+              !disabled ? (
+                <RichTextEditor
+                  cancelUploadImage={fileService.cancelUpload}
+                  uploadFile={fileService.getUploadFileFunction(workspaceSlug)}
+                  deleteFile={fileService.getDeleteImageFunction(workspaceId)}
+                  restoreFile={fileService.getRestoreImageFunction(workspaceId)}
+                  value={localIssueDescription.description_html}
+                  rerenderOnPropsChange={localIssueDescription}
+                  setShouldShowAlert={setShowAlert}
+                  setIsSubmitting={setIsSubmitting}
+                  dragDropEnabled
+                  customClassName="min-h-[150px] shadow-sm"
+                  onChange={(description: Object, description_html: string) => {
+                    setShowAlert(true);
+                    setIsSubmitting("submitting");
+                    onChange(description_html);
+                    debouncedFormSave();
+                  }}
+                  mentionSuggestions={mentionSuggestions}
+                  mentionHighlights={mentionHighlights}
+                />
+              ) : (
+                <RichReadOnlyEditor
+                  value={localIssueDescription.description_html}
+                  customClassName="!p-0 !pt-2 text-custom-text-200"
+                  noBorder={disabled}
+                  mentionHighlights={mentionHighlights}
+                />
+              )
+            }
+          />
+        ) : (
+          <Loader>
+            <Loader.Item height="150px" />
+          </Loader>
+        )}
       </div>
     </div>
   );
-};
+});
diff --git a/web/components/issues/peek-overview/issue-detail.tsx b/web/components/issues/peek-overview/issue-detail.tsx
index fefba1713..8c5101938 100644
--- a/web/components/issues/peek-overview/issue-detail.tsx
+++ b/web/components/issues/peek-overview/issue-detail.tsx
@@ -4,6 +4,7 @@ import { useIssueDetail, useProject, useUser } from "hooks/store";
 // components
 import { IssueDescriptionForm, TIssueOperations } from "components/issues";
 import { IssueReaction } from "../issue-detail/reactions";
+import { observer } from "mobx-react";
 
 interface IPeekOverviewIssueDetails {
   workspaceSlug: string;
@@ -15,7 +16,7 @@ interface IPeekOverviewIssueDetails {
   setIsSubmitting: (value: "submitting" | "submitted" | "saved") => void;
 }
 
-export const PeekOverviewIssueDetails: FC<IPeekOverviewIssueDetails> = (props) => {
+export const PeekOverviewIssueDetails: FC<IPeekOverviewIssueDetails> = observer((props) => {
   const { workspaceSlug, projectId, issueId, issueOperations, disabled, isSubmitting, setIsSubmitting } = props;
   // store hooks
   const { getProjectById } = useProject();
@@ -23,6 +24,7 @@ export const PeekOverviewIssueDetails: FC<IPeekOverviewIssueDetails> = (props) =
   const {
     issue: { getIssueById },
   } = useIssueDetail();
+
   // derived values
   const issue = getIssueById(issueId);
   if (!issue) return <></>;
@@ -53,4 +55,4 @@ export const PeekOverviewIssueDetails: FC<IPeekOverviewIssueDetails> = (props) =
       )}
     </>
   );
-};
+});
diff --git a/web/services/issue/issue_draft.service.tsx b/web/services/issue/issue_draft.service.ts
similarity index 100%
rename from web/services/issue/issue_draft.service.tsx
rename to web/services/issue/issue_draft.service.ts
diff --git a/web/store/issue/issue-details/issue.store.ts b/web/store/issue/issue-details/issue.store.ts
index 46605c771..43a7ca093 100644
--- a/web/store/issue/issue-details/issue.store.ts
+++ b/web/store/issue/issue-details/issue.store.ts
@@ -4,6 +4,7 @@ import { IssueArchiveService, IssueService } from "services/issue";
 // types
 import { IIssueDetail } from "./root.store";
 import { TIssue } from "@plane/types";
+import { computedFn } from "mobx-utils";
 
 export interface IIssueStoreActions {
   // actions
@@ -44,10 +45,10 @@ export class IssueStore implements IIssueStore {
   }
 
   // helper methods
-  getIssueById = (issueId: string) => {
+  getIssueById = computedFn((issueId: string) => {
     if (!issueId) return undefined;
     return this.rootIssueDetailStore.rootIssueStore.issues.getIssueById(issueId) ?? undefined;
-  };
+  });
 
   // actions
   fetchIssue = async (workspaceSlug: string, projectId: string, issueId: string, isArchived = false) => {
@@ -63,12 +64,12 @@ export class IssueStore implements IIssueStore {
 
       if (!issue) throw new Error("Issue not found");
 
-      this.rootIssueDetailStore.rootIssueStore.issues.addIssue([issue]);
+      this.rootIssueDetailStore.rootIssueStore.issues.addIssue([issue], true);
 
       // store handlers from issue detail
       // parent
       if (issue && issue?.parent && issue?.parent?.id)
-        this.rootIssueDetailStore.rootIssueStore.issues.addIssue([issue?.parent]);
+        this.rootIssueDetailStore.rootIssueStore.issues.addIssue([issue.parent]);
       // assignees
       // labels
       // state
diff --git a/web/store/issue/issue.store.ts b/web/store/issue/issue.store.ts
index 8ee689daf..36b2d8741 100644
--- a/web/store/issue/issue.store.ts
+++ b/web/store/issue/issue.store.ts
@@ -10,7 +10,7 @@ export type IIssueStore = {
   // observables
   issuesMap: Record<string, TIssue>; // Record defines issue_id as key and TIssue as value
   // actions
-  addIssue(issues: TIssue[]): void;
+  addIssue(issues: TIssue[], shouldReplace?: boolean): void;
   updateIssue(issueId: string, issue: Partial<TIssue>): void;
   removeIssue(issueId: string): void;
   // helper methods
@@ -39,11 +39,11 @@ export class IssueStore implements IIssueStore {
    * @param {TIssue[]} issues
    * @returns {void}
    */
-  addIssue = (issues: TIssue[]) => {
+  addIssue = (issues: TIssue[], shouldReplace = false) => {
     if (issues && issues.length <= 0) return;
     runInAction(() => {
       issues.forEach((issue) => {
-        if (!this.issuesMap[issue.id]) set(this.issuesMap, issue.id, issue);
+        if (!this.issuesMap[issue.id] || shouldReplace) set(this.issuesMap, issue.id, issue);
       });
     });
   };

From eb0af8de59eee38dc9fcbbcbee0bcea1defb9f3c Mon Sep 17 00:00:00 2001
From: Ramesh Kumar Chandra
 <31303617+rameshkumarchandra@users.noreply.github.com>
Date: Mon, 12 Feb 2024 15:58:22 +0530
Subject: [PATCH 50/58] fix: inbox issues icon in project header render in big
 screen (#3622)

Co-authored-by: sriram veeraghanta <veeraghanta.sriram@gmail.com>
---
 web/components/headers/project-issues.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/components/headers/project-issues.tsx b/web/components/headers/project-issues.tsx
index c645c6318..5c44a84d6 100644
--- a/web/components/headers/project-issues.tsx
+++ b/web/components/headers/project-issues.tsx
@@ -213,7 +213,7 @@ export const ProjectIssuesHeader: React.FC = observer(() => {
                   )}
                 </Button>
               </span>
-              <Inbox className="w-4 h-4 mr-2 text-custom-text-200" />
+              <Inbox className="w-4 h-4 mr-2 text-custom-text-200 block md:hidden" />
             </Link>
           )}
           {canUserCreateIssue && (

From e29edfc02b268855b2fad746e3c6e0dd590ef8b6 Mon Sep 17 00:00:00 2001
From: Ramesh Kumar Chandra
 <31303617+rameshkumarchandra@users.noreply.github.com>
Date: Mon, 12 Feb 2024 17:01:24 +0530
Subject: [PATCH 51/58] style: issue detail responsiveness (#3625)

---
 .../headers/project-issue-details.tsx         | 12 +++++++++--
 .../actions/helpers/activity-block.tsx        |  2 +-
 web/components/issues/issue-detail/root.tsx   | 16 +++++++++------
 .../issues/issue-detail/sidebar.tsx           | 13 ++++++------
 .../issues/issue-detail/subscription.tsx      | 14 ++++++++++---
 .../spreadsheet/columns/header-column.tsx     | 19 +++++++++---------
 .../projects/[projectId]/issues/[issueId].tsx | 20 +++++++++++++++++--
 web/store/application/theme.store.ts          | 16 ++++++++++++++-
 8 files changed, 80 insertions(+), 32 deletions(-)

diff --git a/web/components/headers/project-issue-details.tsx b/web/components/headers/project-issue-details.tsx
index 8d3a22682..3732f2598 100644
--- a/web/components/headers/project-issue-details.tsx
+++ b/web/components/headers/project-issue-details.tsx
@@ -3,7 +3,7 @@ import useSWR from "swr";
 import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
 // hooks
-import { useProject } from "hooks/store";
+import { useApplication, useProject } from "hooks/store";
 // ui
 import { Breadcrumbs, LayersIcon } from "@plane/ui";
 // helpers
@@ -15,6 +15,8 @@ import { ISSUE_DETAILS } from "constants/fetch-keys";
 // components
 import { SidebarHamburgerToggle } from "components/core/sidebar/sidebar-menu-hamburger-toggle";
 import { BreadcrumbLink } from "components/common";
+import { PanelRight } from "lucide-react";
+import { cn } from "helpers/common.helper";
 
 // services
 const issueService = new IssueService();
@@ -25,6 +27,7 @@ export const ProjectIssueDetailsHeader: FC = observer(() => {
   const { workspaceSlug, projectId, issueId } = router.query;
   // store hooks
   const { currentProjectDetails, getProjectById } = useProject();
+  const { theme: themeStore } = useApplication();
 
   const { data: issueDetails } = useSWR(
     workspaceSlug && projectId && issueId ? ISSUE_DETAILS(issueId as string) : null,
@@ -33,12 +36,14 @@ export const ProjectIssueDetailsHeader: FC = observer(() => {
       : null
   );
 
+  const isSidebarCollapsed = themeStore.issueDetailSidebarCollapsed;
+
   return (
     <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
       <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
         <SidebarHamburgerToggle />
         <div>
-          <Breadcrumbs>
+          <Breadcrumbs onBack={router.back}>
             <Breadcrumbs.BreadcrumbItem
               type="text"
               link={
@@ -85,6 +90,9 @@ export const ProjectIssueDetailsHeader: FC = observer(() => {
           </Breadcrumbs>
         </div>
       </div>
+      <button className="block md:hidden" onClick={() => themeStore.toggleIssueDetailSidebar()}>
+        <PanelRight className={cn("w-4 h-4 ", !isSidebarCollapsed ? "text-custom-primary-100" : " text-custom-text-200")} />
+      </button>
     </div>
   );
 });
diff --git a/web/components/issues/issue-detail/issue-activity/activity/actions/helpers/activity-block.tsx b/web/components/issues/issue-detail/issue-activity/activity/actions/helpers/activity-block.tsx
index eabe5d518..c7b75340b 100644
--- a/web/components/issues/issue-detail/issue-activity/activity/actions/helpers/activity-block.tsx
+++ b/web/components/issues/issue-detail/issue-activity/activity/actions/helpers/activity-block.tsx
@@ -33,7 +33,7 @@ export const IssueActivityBlockComponent: FC<TIssueActivityBlockComponent> = (pr
       }`}
     >
       <div className="absolute left-[13px] top-0 bottom-0 w-0.5 bg-custom-background-80" aria-hidden={true} />
-      <div className="flex-shrink-0 ring-6 w-7 h-7 rounded-full overflow-hidden flex justify-center items-center z-10 bg-custom-background-80 text-custom-text-200">
+      <div className="flex-shrink-0 ring-6 w-7 h-7 rounded-full overflow-hidden flex justify-center items-center z-[4] bg-custom-background-80 text-custom-text-200">
         {icon ? icon : <Network className="w-3.5 h-3.5" />}
       </div>
       <div className="w-full text-custom-text-200">
diff --git a/web/components/issues/issue-detail/root.tsx b/web/components/issues/issue-detail/root.tsx
index 2e0303a8e..902ba7c25 100644
--- a/web/components/issues/issue-detail/root.tsx
+++ b/web/components/issues/issue-detail/root.tsx
@@ -9,13 +9,14 @@ import { EmptyState } from "components/common";
 // images
 import emptyIssue from "public/empty-state/issue.svg";
 // hooks
-import { useEventTracker, useIssueDetail, useIssues, useUser } from "hooks/store";
+import { useApplication, useEventTracker, useIssueDetail, useIssues, useUser } from "hooks/store";
 import useToast from "hooks/use-toast";
 // types
 import { TIssue } from "@plane/types";
 // constants
 import { EUserProjectRoles } from "constants/project";
 import { EIssuesStoreType } from "constants/issue";
+import { observer } from "mobx-react";
 
 export type TIssueOperations = {
   fetch: (workspaceSlug: string, projectId: string, issueId: string) => Promise<void>;
@@ -51,7 +52,7 @@ export type TIssueDetailRoot = {
   is_archived?: boolean;
 };
 
-export const IssueDetailRoot: FC<TIssueDetailRoot> = (props) => {
+export const IssueDetailRoot: FC<TIssueDetailRoot> = observer((props) => {
   const { workspaceSlug, projectId, issueId, is_archived = false } = props;
   // router
   const router = useRouter();
@@ -75,6 +76,7 @@ export const IssueDetailRoot: FC<TIssueDetailRoot> = (props) => {
   const {
     membership: { currentProjectRole },
   } = useUser();
+  const { theme: themeStore } = useApplication();
 
   const issueOperations: TIssueOperations = useMemo(
     () => ({
@@ -346,8 +348,8 @@ export const IssueDetailRoot: FC<TIssueDetailRoot> = (props) => {
           }}
         />
       ) : (
-        <div className="flex h-full overflow-hidden">
-          <div className="h-full w-2/3 space-y-5 divide-y-2 divide-custom-border-300 overflow-y-auto p-5">
+        <div className="flex w-full h-full overflow-hidden">
+          <div className="h-full w-full max-w-2/3 space-y-5 divide-y-2 divide-custom-border-300 overflow-y-auto p-5">
             <IssueMainContent
               workspaceSlug={workspaceSlug}
               projectId={projectId}
@@ -356,7 +358,9 @@ export const IssueDetailRoot: FC<TIssueDetailRoot> = (props) => {
               is_editable={!is_archived && is_editable}
             />
           </div>
-          <div className="h-full w-1/3 space-y-5 overflow-hidden border-l border-custom-border-300 py-5">
+          <div className="h-full w-full sm:w-1/2 md:w-1/3 space-y-5 overflow-hidden border-l border-custom-border-300 py-5 fixed md:relative bg-custom-sidebar-background-100 right-0 z-[5]"
+            style={themeStore.issueDetailSidebarCollapsed ? { right: `-${window?.innerWidth || 0}px` } : {}}
+          >
             <IssueDetailsSidebar
               workspaceSlug={workspaceSlug}
               projectId={projectId}
@@ -373,4 +377,4 @@ export const IssueDetailRoot: FC<TIssueDetailRoot> = (props) => {
       <IssuePeekOverview />
     </>
   );
-};
+});
diff --git a/web/components/issues/issue-detail/sidebar.tsx b/web/components/issues/issue-detail/sidebar.tsx
index 668d3538f..c78bbe942 100644
--- a/web/components/issues/issue-detail/sidebar.tsx
+++ b/web/components/issues/issue-detail/sidebar.tsx
@@ -187,9 +187,8 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
                 buttonVariant={issue?.assignee_ids?.length > 1 ? "transparent-without-text" : "transparent-with-text"}
                 className="w-3/5 flex-grow group"
                 buttonContainerClassName="w-full text-left"
-                buttonClassName={`text-sm justify-between ${
-                  issue?.assignee_ids.length > 0 ? "" : "text-custom-text-400"
-                }`}
+                buttonClassName={`text-sm justify-between ${issue?.assignee_ids.length > 0 ? "" : "text-custom-text-400"
+                  }`}
                 hideIcon={issue.assignee_ids?.length === 0}
                 dropdownArrow
                 dropdownArrowClassName="h-3.5 w-3.5 hidden group-hover:inline"
@@ -233,8 +232,8 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
                 buttonClassName={`text-sm ${issue?.start_date ? "" : "text-custom-text-400"}`}
                 hideIcon
                 clearIconClassName="h-3 w-3 hidden group-hover:inline"
-                // TODO: add this logic
-                // showPlaceholderIcon
+              // TODO: add this logic
+              // showPlaceholderIcon
               />
             </div>
 
@@ -259,8 +258,8 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
                 buttonClassName={`text-sm ${issue?.target_date ? "" : "text-custom-text-400"}`}
                 hideIcon
                 clearIconClassName="h-3 w-3 hidden group-hover:inline"
-                // TODO: add this logic
-                // showPlaceholderIcon
+              // TODO: add this logic
+              // showPlaceholderIcon
               />
             </div>
 
diff --git a/web/components/issues/issue-detail/subscription.tsx b/web/components/issues/issue-detail/subscription.tsx
index b57e75bed..8d05140b3 100644
--- a/web/components/issues/issue-detail/subscription.tsx
+++ b/web/components/issues/issue-detail/subscription.tsx
@@ -1,5 +1,5 @@
 import { FC, useState } from "react";
-import { Bell } from "lucide-react";
+import { Bell, BellOff } from "lucide-react";
 import { observer } from "mobx-react-lite";
 // UI
 import { Button } from "@plane/ui";
@@ -52,12 +52,20 @@ export const IssueSubscription: FC<TIssueSubscription> = observer((props) => {
     <div>
       <Button
         size="sm"
-        prependIcon={<Bell className="h-3 w-3" />}
+        prependIcon={subscription?.subscribed ? <BellOff /> : <Bell className="h-3 w-3" />}
         variant="outline-primary"
         className="hover:!bg-custom-primary-100/20"
         onClick={handleSubscription}
       >
-        {loading ? "Loading..." : subscription?.subscribed ? "Unsubscribe" : "Subscribe"}
+        {loading ? (
+          <span>
+            <span className="hidden sm:block">Loading</span>...
+          </span>
+        ) : subscription?.subscribed ? (
+          <div className="hidden sm:block">Unsubscribe</div>
+        ) : (
+          <div className="hidden sm:block">Subscribe</div>
+        )}
       </Button>
     </div>
   );
diff --git a/web/components/issues/issue-layouts/spreadsheet/columns/header-column.tsx b/web/components/issues/issue-layouts/spreadsheet/columns/header-column.tsx
index dc9f8c7c6..95982ab25 100644
--- a/web/components/issues/issue-layouts/spreadsheet/columns/header-column.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/columns/header-column.tsx
@@ -63,14 +63,14 @@ export const SpreadsheetHeaderColumn = (props: Props) => {
         </div>
       }
       placement="bottom-end"
+      closeOnSelect
     >
       <CustomMenu.MenuItem onClick={() => handleOrderBy(propertyDetails.ascendingOrderKey, property)}>
         <div
-          className={`flex items-center justify-between gap-1.5 px-1 ${
-            selectedMenuItem === `${propertyDetails.ascendingOrderKey}_${property}`
-              ? "text-custom-text-100"
-              : "text-custom-text-200 hover:text-custom-text-100"
-          }`}
+          className={`flex items-center justify-between gap-1.5 px-1 ${selectedMenuItem === `${propertyDetails.ascendingOrderKey}_${property}`
+            ? "text-custom-text-100"
+            : "text-custom-text-200 hover:text-custom-text-100"
+            }`}
         >
           <div className="flex items-center gap-2">
             <ArrowDownWideNarrow className="h-3 w-3 stroke-[1.5]" />
@@ -84,11 +84,10 @@ export const SpreadsheetHeaderColumn = (props: Props) => {
       </CustomMenu.MenuItem>
       <CustomMenu.MenuItem onClick={() => handleOrderBy(propertyDetails.descendingOrderKey, property)}>
         <div
-          className={`flex items-center justify-between gap-1.5 px-1 ${
-            selectedMenuItem === `${propertyDetails.descendingOrderKey}_${property}`
-              ? "text-custom-text-100"
-              : "text-custom-text-200 hover:text-custom-text-100"
-          }`}
+          className={`flex items-center justify-between gap-1.5 px-1 ${selectedMenuItem === `${propertyDetails.descendingOrderKey}_${property}`
+            ? "text-custom-text-100"
+            : "text-custom-text-200 hover:text-custom-text-100"
+            }`}
         >
           <div className="flex items-center gap-2">
             <ArrowUpNarrowWide className="h-3 w-3 stroke-[1.5]" />
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx b/web/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx
index 6be784368..64f43939e 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx
@@ -1,4 +1,4 @@
-import React, { ReactElement } from "react";
+import React, { ReactElement, useEffect } from "react";
 import { useRouter } from "next/router";
 import useSWR from "swr";
 import { observer } from "mobx-react-lite";
@@ -12,7 +12,7 @@ import { Loader } from "@plane/ui";
 // types
 import { NextPageWithLayout } from "lib/types";
 // fetch-keys
-import { useIssueDetail } from "hooks/store";
+import { useApplication, useIssueDetail } from "hooks/store";
 
 const IssueDetailsPage: NextPageWithLayout = observer(() => {
   // router
@@ -23,6 +23,7 @@ const IssueDetailsPage: NextPageWithLayout = observer(() => {
     fetchIssue,
     issue: { getIssueById },
   } = useIssueDetail();
+  const { theme: themeStore } = useApplication();
 
   const { isLoading } = useSWR(
     workspaceSlug && projectId && issueId ? `ISSUE_DETAIL_${workspaceSlug}_${projectId}_${issueId}` : null,
@@ -34,6 +35,21 @@ const IssueDetailsPage: NextPageWithLayout = observer(() => {
   const issue = getIssueById(issueId?.toString() || "") || undefined;
   const issueLoader = !issue || isLoading ? true : false;
 
+  useEffect(() => {
+    const handleToggleIssueDetailSidebar = () => {
+      if (window && window.innerWidth < 768) {
+        themeStore.toggleIssueDetailSidebar(true);
+      }
+      if (window && themeStore.issueDetailSidebarCollapsed && window.innerWidth >= 768) {
+        themeStore.toggleIssueDetailSidebar(false);
+      }
+    };
+
+    window.addEventListener("resize", handleToggleIssueDetailSidebar);
+    handleToggleIssueDetailSidebar();
+    return () => window.removeEventListener("resize", handleToggleIssueDetailSidebar);
+  }, [themeStore]);
+
   return (
     <>
       {issueLoader ? (
diff --git a/web/store/application/theme.store.ts b/web/store/application/theme.store.ts
index f264c175d..505f3803c 100644
--- a/web/store/application/theme.store.ts
+++ b/web/store/application/theme.store.ts
@@ -9,11 +9,13 @@ export interface IThemeStore {
   sidebarCollapsed: boolean | undefined;
   profileSidebarCollapsed: boolean | undefined;
   workspaceAnalyticsSidebarCollapsed: boolean | undefined;
+  issueDetailSidebarCollapsed: boolean | undefined;
   // actions
   toggleSidebar: (collapsed?: boolean) => void;
   setTheme: (theme: any) => void;
   toggleProfileSidebar: (collapsed?: boolean) => void;
   toggleWorkspaceAnalyticsSidebar: (collapsed?: boolean) => void;
+  toggleIssueDetailSidebar: (collapsed?: boolean) => void;
 }
 
 export class ThemeStore implements IThemeStore {
@@ -22,6 +24,7 @@ export class ThemeStore implements IThemeStore {
   theme: string | null = null;
   profileSidebarCollapsed: boolean | undefined = undefined;
   workspaceAnalyticsSidebarCollapsed: boolean | undefined = undefined;
+  issueDetailSidebarCollapsed: boolean | undefined = undefined;
   // root store
   rootStore;
 
@@ -32,11 +35,13 @@ export class ThemeStore implements IThemeStore {
       theme: observable.ref,
       profileSidebarCollapsed: observable.ref,
       workspaceAnalyticsSidebarCollapsed: observable.ref,
+      issueDetailSidebarCollapsed: observable.ref,
       // action
       toggleSidebar: action,
       setTheme: action,
       toggleProfileSidebar: action,
-      toggleWorkspaceAnalyticsSidebar: action
+      toggleWorkspaceAnalyticsSidebar: action,
+      toggleIssueDetailSidebar: action,
       // computed
     });
     // root store
@@ -82,6 +87,15 @@ export class ThemeStore implements IThemeStore {
     localStorage.setItem("workspace_analytics_sidebar_collapsed", this.workspaceAnalyticsSidebarCollapsed.toString());
   };
 
+  toggleIssueDetailSidebar = (collapsed?: boolean) => {
+    if(collapsed === undefined) {
+      this.issueDetailSidebarCollapsed = !this.issueDetailSidebarCollapsed;
+    } else {
+      this.issueDetailSidebarCollapsed = collapsed;
+    }
+    localStorage.setItem("issue_detail_sidebar_collapsed", this.issueDetailSidebarCollapsed.toString());
+  }
+
   /**
    * Sets the user theme and applies it to the platform
    * @param _theme

From 042ed04a0359913674d6eb612bcb43fce0dfeda1 Mon Sep 17 00:00:00 2001
From: Lakhan Baheti <94619783+1akhanBaheti@users.noreply.github.com>
Date: Mon, 12 Feb 2024 17:01:58 +0530
Subject: [PATCH 52/58] fix: project-pages responsiveness (#3624)

* fix: pages responsiveness

* fix: build errors
---
 .../src/ui/components/editor-header.tsx       |  6 +--
 .../src/ui/components/page-renderer.tsx       |  2 +-
 .../src/ui/components/summary-popover.tsx     | 34 ++++++++++-----
 .../editor/document-editor/src/ui/index.tsx   |  8 +++-
 .../src/ui/menu/fixed-menu.tsx                |  2 +-
 .../sidebar/sidebar-menu-hamburger-toggle.tsx |  2 +-
 web/components/empty-state/empty-state.tsx    |  8 ++--
 web/components/headers/page-details.tsx       | 41 ++++++++++++-------
 .../pages/create-update-page-modal.tsx        |  2 +-
 web/components/pages/page-form.tsx            |  4 +-
 web/components/pages/pages-list/list-item.tsx |  2 +-
 .../pages/pages-list/recent-pages-list.tsx    |  2 +-
 .../projects/[projectId]/pages/index.tsx      | 26 ++++++++++--
 13 files changed, 94 insertions(+), 45 deletions(-)

diff --git a/packages/editor/document-editor/src/ui/components/editor-header.tsx b/packages/editor/document-editor/src/ui/components/editor-header.tsx
index 3501785a7..a322ddddc 100644
--- a/packages/editor/document-editor/src/ui/components/editor-header.tsx
+++ b/packages/editor/document-editor/src/ui/components/editor-header.tsx
@@ -42,8 +42,8 @@ export const EditorHeader = (props: IEditorHeader) => {
   } = props;
 
   return (
-    <div className="flex items-center border-b border-custom-border-200 px-5 py-2">
-      <div className="w-56 flex-shrink-0 lg:w-72">
+    <div className="flex items-center border-b border-custom-border-200 md:px-5 px-3 py-2">
+      <div className="md:w-56 flex-shrink-0 lg:w-72 w-fit">
         <SummaryPopover
           editor={editor}
           markings={markings}
@@ -52,7 +52,7 @@ export const EditorHeader = (props: IEditorHeader) => {
         />
       </div>
 
-      <div className="flex-shrink-0">
+      <div className="flex-shrink-0 hidden md:flex">
         {!readonly && uploadFile && (
           <FixedMenu editor={editor} uploadFile={uploadFile} setIsSubmitting={setIsSubmitting} />
         )}
diff --git a/packages/editor/document-editor/src/ui/components/page-renderer.tsx b/packages/editor/document-editor/src/ui/components/page-renderer.tsx
index c60ac0e7a..06b9e70ff 100644
--- a/packages/editor/document-editor/src/ui/components/page-renderer.tsx
+++ b/packages/editor/document-editor/src/ui/components/page-renderer.tsx
@@ -152,7 +152,7 @@ export const PageRenderer = (props: IPageRenderer) => {
   );
 
   return (
-    <div className="w-full pb-64 pl-7 pt-5 page-renderer">
+    <div className="w-full pb-64 md:pl-7 pl-3 pt-5 page-renderer">
       {!readonly ? (
         <input
           onChange={(e) => handlePageTitleChange(e.target.value)}
diff --git a/packages/editor/document-editor/src/ui/components/summary-popover.tsx b/packages/editor/document-editor/src/ui/components/summary-popover.tsx
index d3ec64f1c..12903bb3d 100644
--- a/packages/editor/document-editor/src/ui/components/summary-popover.tsx
+++ b/packages/editor/document-editor/src/ui/components/summary-popover.tsx
@@ -40,16 +40,30 @@ export const SummaryPopover: React.FC<Props> = (props) => {
       >
         <List className="h-4 w-4" />
       </button>
-      {!sidePeekVisible && (
-        <div
-          className="z-10 hidden max-h-80 w-64 overflow-y-auto rounded border-[0.5px] border-custom-border-200 bg-custom-background-100 p-3 shadow-custom-shadow-rg group-hover/summary-popover:block"
-          ref={setPopperElement}
-          style={summaryPopoverStyles.popper}
-          {...summaryPopoverAttributes.popper}
-        >
-          <ContentBrowser editor={editor} markings={markings} />
-        </div>
-      )}
+      <div className="md:hidden block">
+        {sidePeekVisible && (
+          <div
+            className="z-10 max-h-80 w-64 overflow-y-auto rounded border-[0.5px] border-custom-border-200 bg-custom-background-100 p-3 shadow-custom-shadow-rg"
+            ref={setPopperElement}
+            style={summaryPopoverStyles.popper}
+            {...summaryPopoverAttributes.popper}
+          >
+            <ContentBrowser editor={editor} markings={markings} />
+          </div>
+        )}
+      </div>
+      <div className="hidden md:block">
+        {!sidePeekVisible && (
+          <div
+            className="z-10 hidden max-h-80 w-64 overflow-y-auto rounded border-[0.5px] border-custom-border-200 bg-custom-background-100 p-3 shadow-custom-shadow-rg group-hover/summary-popover:block"
+            ref={setPopperElement}
+            style={summaryPopoverStyles.popper}
+            {...summaryPopoverAttributes.popper}
+          >
+            <ContentBrowser editor={editor} markings={markings} />
+          </div>
+        )}
+      </div>
     </div>
   );
 };
diff --git a/packages/editor/document-editor/src/ui/index.tsx b/packages/editor/document-editor/src/ui/index.tsx
index d1bdbc935..2491e04c7 100644
--- a/packages/editor/document-editor/src/ui/index.tsx
+++ b/packages/editor/document-editor/src/ui/index.tsx
@@ -10,6 +10,7 @@ import { DocumentDetails } from "src/types/editor-types";
 import { PageRenderer } from "src/ui/components/page-renderer";
 import { getMenuOptions } from "src/utils/menu-options";
 import { useRouter } from "next/router";
+import { FixedMenu } from "src";
 
 interface IDocumentEditor {
   // document info
@@ -149,11 +150,14 @@ const DocumentEditor = ({
         documentDetails={documentDetails}
         isSubmitting={isSubmitting}
       />
+      <div className="flex-shrink-0 md:hidden border-b border-custom-border-200 pl-3 py-2">
+        {uploadFile && <FixedMenu editor={editor} uploadFile={uploadFile} setIsSubmitting={setIsSubmitting} />}
+      </div>
       <div className="flex h-full w-full overflow-y-auto frame-renderer">
-        <div className="sticky top-0 h-full w-56 flex-shrink-0 lg:w-72">
+        <div className="sticky top-0 h-full w-56 flex-shrink-0 lg:w-72 hidden md:block">
           <SummarySideBar editor={editor} markings={markings} sidePeekVisible={sidePeekVisible} />
         </div>
-        <div className="h-full w-[calc(100%-14rem)] lg:w-[calc(100%-18rem-18rem)] page-renderer">
+        <div className="h-full w-full md:w-[calc(100%-14rem)] lg:w-[calc(100%-18rem-18rem)] page-renderer">
           <PageRenderer
             onActionCompleteHandler={onActionCompleteHandler}
             hideDragHandle={hideDragHandleOnMouseLeave}
diff --git a/packages/editor/document-editor/src/ui/menu/fixed-menu.tsx b/packages/editor/document-editor/src/ui/menu/fixed-menu.tsx
index cac42e1f9..be57a4a91 100644
--- a/packages/editor/document-editor/src/ui/menu/fixed-menu.tsx
+++ b/packages/editor/document-editor/src/ui/menu/fixed-menu.tsx
@@ -77,7 +77,7 @@ export const FixedMenu = (props: EditorBubbleMenuProps) => {
   }
 
   return (
-    <div className="flex items-center divide-x divide-custom-border-200">
+    <div className="flex flex-wrap items-center divide-x divide-custom-border-200">
       <div className="flex items-center gap-0.5 pr-2">
         {basicMarkItems.map((item) => (
           <button
diff --git a/web/components/core/sidebar/sidebar-menu-hamburger-toggle.tsx b/web/components/core/sidebar/sidebar-menu-hamburger-toggle.tsx
index fe7b8d177..30d764ab1 100644
--- a/web/components/core/sidebar/sidebar-menu-hamburger-toggle.tsx
+++ b/web/components/core/sidebar/sidebar-menu-hamburger-toggle.tsx
@@ -7,7 +7,7 @@ export const SidebarHamburgerToggle: FC = observer(() => {
   const { theme: themStore } = useApplication();
   return (
     <div
-      className="w-7 h-7 rounded flex justify-center items-center bg-custom-background-80 transition-all hover:bg-custom-background-90 cursor-pointer group md:hidden"
+      className="w-7 h-7 flex-shrink-0 rounded flex justify-center items-center bg-custom-background-80 transition-all hover:bg-custom-background-90 cursor-pointer group md:hidden"
       onClick={() => themStore.toggleSidebar()}
     >
       <Menu size={14} className="text-custom-text-200 group-hover:text-custom-text-100 transition-all" />
diff --git a/web/components/empty-state/empty-state.tsx b/web/components/empty-state/empty-state.tsx
index adc11b546..4a5aeca02 100644
--- a/web/components/empty-state/empty-state.tsx
+++ b/web/components/empty-state/empty-state.tsx
@@ -65,14 +65,14 @@ export const EmptyState: React.FC<Props> = ({
   );
 
   return (
-    <div className="flex items-center justify-center min-h-full min-w-full overflow-y-auto py-10 px-20">
+    <div className="flex items-center justify-center min-h-full min-w-full overflow-y-auto py-10 md:px-20 px-5">
       <div
         className={cn("flex flex-col gap-5", {
-          "min-w-[24rem] max-w-[45rem]": size === "sm",
-          "min-w-[30rem] max-w-[60rem]": size === "lg",
+          "md:min-w-[24rem] max-w-[45rem]": size === "sm",
+          "md:min-w-[30rem] max-w-[60rem]": size === "lg",
         })}
       >
-        <div className="flex flex-col gap-1.5 flex-shrink-0">{emptyStateHeader}</div>
+        <div className="flex flex-col gap-1.5 flex-shrink">{emptyStateHeader}</div>
 
         <Image
           src={image}
diff --git a/web/components/headers/page-details.tsx b/web/components/headers/page-details.tsx
index 83595af60..e2a427db7 100644
--- a/web/components/headers/page-details.tsx
+++ b/web/components/headers/page-details.tsx
@@ -36,23 +36,34 @@ export const PageDetailsHeader: FC<IPagesHeaderProps> = observer((props) => {
             <Breadcrumbs.BreadcrumbItem
               type="text"
               link={
-                <BreadcrumbLink
-                  href={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`}
-                  label={currentProjectDetails?.name ?? "Project"}
-                  icon={
-                    currentProjectDetails?.emoji ? (
-                      renderEmoji(currentProjectDetails.emoji)
-                    ) : currentProjectDetails?.icon_prop ? (
-                      renderEmoji(currentProjectDetails.icon_prop)
-                    ) : (
-                      <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
-                        {currentProjectDetails?.name.charAt(0)}
-                      </span>
-                    )
-                  }
-                />
+                <span>
+                  <span className="hidden md:block">
+                    <BreadcrumbLink
+                      href={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`}
+                      label={currentProjectDetails?.name ?? "Project"}
+                      icon={
+                        currentProjectDetails?.emoji ? (
+                          renderEmoji(currentProjectDetails.emoji)
+                        ) : currentProjectDetails?.icon_prop ? (
+                          renderEmoji(currentProjectDetails.icon_prop)
+                        ) : (
+                          <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
+                            {currentProjectDetails?.name.charAt(0)}
+                          </span>
+                        )
+                      }
+                    />
+                  </span>
+                  <span className="md:hidden">
+                    <BreadcrumbLink
+                      href={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`}
+                      label={"..."}
+                    />
+                  </span>
+                </span>
               }
             />
+
             <Breadcrumbs.BreadcrumbItem
               type="text"
               link={
diff --git a/web/components/pages/create-update-page-modal.tsx b/web/components/pages/create-update-page-modal.tsx
index b13f68fa4..21b37236d 100644
--- a/web/components/pages/create-update-page-modal.tsx
+++ b/web/components/pages/create-update-page-modal.tsx
@@ -74,7 +74,7 @@ export const CreateUpdatePageModal: FC<Props> = (props) => {
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative transform rounded-lg bg-custom-background-100 p-5 px-4 text-left shadow-custom-shadow-md transition-all sm:w-full sm:max-w-2xl">
+              <Dialog.Panel className="relative transform rounded-lg bg-custom-background-100 p-5 px-4 text-left shadow-custom-shadow-md transition-all w-full sm:max-w-2xl">
                 <PageForm handleFormSubmit={handleFormSubmit} handleClose={handleClose} pageStore={pageStore} />
               </Dialog.Panel>
             </Transition.Child>
diff --git a/web/components/pages/page-form.tsx b/web/components/pages/page-form.tsx
index 79d378c59..4f5874e5f 100644
--- a/web/components/pages/page-form.tsx
+++ b/web/components/pages/page-form.tsx
@@ -67,7 +67,7 @@ export const PageForm: React.FC<Props> = (props) => {
           </div>
         </div>
       </div>
-      <div className="mt-5 flex items-center justify-between gap-2">
+      <div className="mt-5 md:flex items-center justify-between gap-2">
         <Controller
           control={control}
           name="access"
@@ -100,7 +100,7 @@ export const PageForm: React.FC<Props> = (props) => {
             </div>
           )}
         />
-        <div className="flex items-center gap-2">
+        <div className="flex items-center gap-2 justify-end mt-5 md:mt-0">
           <Button variant="neutral-primary" size="sm" onClick={handleClose} tabIndex={4}>
             Cancel
           </Button>
diff --git a/web/components/pages/pages-list/list-item.tsx b/web/components/pages/pages-list/list-item.tsx
index 03133d5df..6b1a4793d 100644
--- a/web/components/pages/pages-list/list-item.tsx
+++ b/web/components/pages/pages-list/list-item.tsx
@@ -155,7 +155,7 @@ export const PagesListItem: FC<IPagesListItem> = observer(({ pageId, projectId }
       <DeletePageModal isOpen={deletePageModal} onClose={() => setDeletePageModal(false)} pageId={pageId} />
       <li>
         <Link href={`/${workspaceSlug}/projects/${projectId}/pages/${pageId}`}>
-          <div className="relative rounded p-4 text-custom-text-200 hover:bg-custom-background-80">
+          <div className="relative rounded p-3 md:p-4 text-custom-text-200 hover:bg-custom-background-80">
             <div className="flex items-center justify-between">
               <div className="flex items-center gap-2 overflow-hidden">
                 <FileText className="h-4 w-4 shrink-0" />
diff --git a/web/components/pages/pages-list/recent-pages-list.tsx b/web/components/pages/pages-list/recent-pages-list.tsx
index 960d5253b..e998629c6 100644
--- a/web/components/pages/pages-list/recent-pages-list.tsx
+++ b/web/components/pages/pages-list/recent-pages-list.tsx
@@ -52,7 +52,7 @@ export const RecentPagesList: FC = observer(() => {
 
             return (
               <div key={key}>
-                <h2 className="sticky top-0 z-[1] mb-2 bg-custom-background-100 text-xl font-semibold capitalize">
+                <h2 className="sticky top-0 z-[1] mb-2 bg-custom-background-100 text-xl font-semibold capitalize px-3 md:p-0">
                   {replaceUnderscoreIfSnakeCase(key)}
                 </h2>
                 <PagesListView pageIds={recentProjectPages[key]} />
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/pages/index.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/pages/index.tsx
index 10cda05e1..b935ee238 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/pages/index.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/pages/index.tsx
@@ -102,6 +102,25 @@ const ProjectPagesPage: NextPageWithLayout = observer(() => {
 
   const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserWorkspaceRoles.MEMBER;
 
+  const mobileTabList = (
+    <Tab.List as="div" className="flex items-center justify-between border-b border-custom-border-200 px-3 pt-3 mb-4">
+      <div className="flex flex-wrap items-center gap-4">
+        {PAGE_TABS_LIST.map((tab) => (
+          <Tab
+            key={tab.key}
+            className={({ selected }) =>
+              `text-sm outline-none pb-3 ${
+                selected ? "border-custom-primary-100 text-custom-primary-100 border-b" : ""
+              }`
+            }
+          >
+            {tab.title}
+          </Tab>
+        ))}
+      </div>
+    </Tab.List>
+  );
+
   if (loader || archivedPageLoader)
     return (
       <div className="flex items-center justify-center h-full w-full">
@@ -120,8 +139,8 @@ const ProjectPagesPage: NextPageWithLayout = observer(() => {
               projectId={projectId.toString()}
             />
           )}
-          <div className="flex h-full flex-col space-y-5 overflow-hidden p-6">
-            <div className="flex justify-between gap-4">
+          <div className="flex h-full flex-col md:space-y-5 overflow-hidden md:p-6">
+            <div className="justify-between gap-4 hidden md:flex">
               <h3 className="text-2xl font-semibold text-custom-text-100">Pages</h3>
             </div>
             <Tab.Group
@@ -146,7 +165,8 @@ const ProjectPagesPage: NextPageWithLayout = observer(() => {
                 }
               }}
             >
-              <Tab.List as="div" className="mb-6 flex items-center justify-between">
+              <div className="md:hidden">{mobileTabList}</div>
+              <Tab.List as="div" className="mb-6 items-center justify-between hidden md:flex">
                 <div className="flex flex-wrap items-center gap-4">
                   {PAGE_TABS_LIST.map((tab) => (
                     <Tab

From fc8edab59b3025508717f8aa8bb06839bff6c747 Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com>
Date: Mon, 12 Feb 2024 19:10:07 +0530
Subject: [PATCH 53/58] fix: sidebar height, authorization (#3626)

---
 .../gantt-chart/blocks/blocks-list.tsx        |  4 +-
 .../gantt-chart/chart/main-content.tsx        |  3 +
 web/components/gantt-chart/chart/root.tsx     |  3 +
 .../gantt-chart/chart/views/month.tsx         | 94 +++++++++----------
 web/components/gantt-chart/root.tsx           | 11 ++-
 web/components/gantt-chart/sidebar/root.tsx   |  2 +-
 .../issue-layouts/gantt/base-gantt-root.tsx   |  1 +
 .../gantt-chart/modules-list-layout.tsx       |  1 +
 8 files changed, 65 insertions(+), 54 deletions(-)

diff --git a/web/components/gantt-chart/blocks/blocks-list.tsx b/web/components/gantt-chart/blocks/blocks-list.tsx
index b65f04bb6..1bc75ea8f 100644
--- a/web/components/gantt-chart/blocks/blocks-list.tsx
+++ b/web/components/gantt-chart/blocks/blocks-list.tsx
@@ -20,6 +20,7 @@ export type GanttChartBlocksProps = {
   enableBlockLeftResize: boolean;
   enableBlockRightResize: boolean;
   enableBlockMove: boolean;
+  enableAddBlock: boolean;
   showAllBlocks: boolean;
 };
 
@@ -32,6 +33,7 @@ export const GanttChartBlocksList: FC<GanttChartBlocksProps> = observer((props)
     enableBlockLeftResize,
     enableBlockRightResize,
     enableBlockMove,
+    enableAddBlock,
     showAllBlocks,
   } = props;
   // store hooks
@@ -120,7 +122,7 @@ export const GanttChartBlocksList: FC<GanttChartBlocksProps> = observer((props)
                   enableBlockMove={enableBlockMove}
                 />
               ) : (
-                <ChartAddBlock block={block} blockUpdateHandler={blockUpdateHandler} />
+                enableAddBlock && <ChartAddBlock block={block} blockUpdateHandler={blockUpdateHandler} />
               )}
             </div>
           </div>
diff --git a/web/components/gantt-chart/chart/main-content.tsx b/web/components/gantt-chart/chart/main-content.tsx
index 950f3550c..35bd6bc07 100644
--- a/web/components/gantt-chart/chart/main-content.tsx
+++ b/web/components/gantt-chart/chart/main-content.tsx
@@ -27,6 +27,7 @@ type Props = {
   enableBlockMove: boolean;
   enableBlockRightResize: boolean;
   enableReorder: boolean;
+  enableAddBlock: boolean;
   itemsContainerWidth: number;
   showAllBlocks: boolean;
   sidebarToRender: (props: any) => React.ReactNode;
@@ -45,6 +46,7 @@ export const GanttChartMainContent: React.FC<Props> = (props) => {
     enableBlockMove,
     enableBlockRightResize,
     enableReorder,
+    enableAddBlock,
     itemsContainerWidth,
     showAllBlocks,
     sidebarToRender,
@@ -111,6 +113,7 @@ export const GanttChartMainContent: React.FC<Props> = (props) => {
             enableBlockLeftResize={enableBlockLeftResize}
             enableBlockRightResize={enableBlockRightResize}
             enableBlockMove={enableBlockMove}
+            enableAddBlock={enableAddBlock}
             showAllBlocks={showAllBlocks}
           />
         )}
diff --git a/web/components/gantt-chart/chart/root.tsx b/web/components/gantt-chart/chart/root.tsx
index 961cb2fee..4cb6bc10e 100644
--- a/web/components/gantt-chart/chart/root.tsx
+++ b/web/components/gantt-chart/chart/root.tsx
@@ -28,6 +28,7 @@ type ChartViewRootProps = {
   enableBlockRightResize: boolean;
   enableBlockMove: boolean;
   enableReorder: boolean;
+  enableAddBlock: boolean;
   bottomSpacing: boolean;
   showAllBlocks: boolean;
 };
@@ -45,6 +46,7 @@ export const ChartViewRoot: FC<ChartViewRootProps> = (props) => {
     enableBlockRightResize,
     enableBlockMove,
     enableReorder,
+    enableAddBlock,
     bottomSpacing,
     showAllBlocks,
   } = props;
@@ -192,6 +194,7 @@ export const ChartViewRoot: FC<ChartViewRootProps> = (props) => {
         enableBlockMove={enableBlockMove}
         enableBlockRightResize={enableBlockRightResize}
         enableReorder={enableReorder}
+        enableAddBlock={enableAddBlock}
         itemsContainerWidth={itemsContainerWidth}
         showAllBlocks={showAllBlocks}
         sidebarToRender={sidebarToRender}
diff --git a/web/components/gantt-chart/chart/views/month.tsx b/web/components/gantt-chart/chart/views/month.tsx
index 13f60c2b4..c559e9688 100644
--- a/web/components/gantt-chart/chart/views/month.tsx
+++ b/web/components/gantt-chart/chart/views/month.tsx
@@ -14,63 +14,61 @@ export const MonthChartView: FC<any> = () => {
   const monthBlocks: IMonthBlock[] = renderView;
 
   return (
-    <>
-      <div className="absolute top-0 left-0 h-full w-max flex divide-x divide-custom-border-100/50">
-        {monthBlocks?.map((block, rootIndex) => (
-          <div key={`month-${block?.month}-${block?.year}`} className="relative">
-            <div
-              className="w-full sticky top-0 z-[5] bg-custom-background-100"
-              style={{
-                height: `${HEADER_HEIGHT}px`,
-              }}
-            >
-              <div className="h-1/2">
-                <div
-                  className="sticky inline-flex whitespace-nowrap px-3 py-2 text-xs font-medium capitalize"
-                  style={{
-                    left: `${SIDEBAR_WIDTH}px`,
-                  }}
-                >
-                  {block?.title}
-                </div>
-              </div>
-              <div className="h-1/2 w-full flex">
-                {block?.children?.map((monthDay, index) => (
-                  <div
-                    key={`sub-title-${rootIndex}-${index}`}
-                    className="flex-shrink-0 border-b-[0.5px] border-custom-border-200 py-1 text-center capitalize"
-                    style={{ width: `${currentViewData?.data.width}px` }}
-                  >
-                    <div className="space-x-1 text-xs">
-                      <span className="text-custom-text-200">{monthDay.dayData.shortTitle[0]}</span>{" "}
-                      <span
-                        className={cn({
-                          "rounded-full bg-custom-primary-100 px-1 text-white": monthDay.today,
-                        })}
-                      >
-                        {monthDay.day}
-                      </span>
-                    </div>
-                  </div>
-                ))}
+    <div className="absolute top-0 left-0 h-full w-max flex divide-x divide-custom-border-100/50">
+      {monthBlocks?.map((block, rootIndex) => (
+        <div key={`month-${block?.month}-${block?.year}`} className="relative">
+          <div
+            className="w-full sticky top-0 z-[5] bg-custom-background-100"
+            style={{
+              height: `${HEADER_HEIGHT}px`,
+            }}
+          >
+            <div className="h-1/2">
+              <div
+                className="sticky inline-flex whitespace-nowrap px-3 py-2 text-xs font-medium capitalize"
+                style={{
+                  left: `${SIDEBAR_WIDTH}px`,
+                }}
+              >
+                {block?.title}
               </div>
             </div>
-            <div className="h-full w-full flex divide-x divide-custom-border-100/50">
+            <div className="h-1/2 w-full flex">
               {block?.children?.map((monthDay, index) => (
                 <div
-                  key={`column-${rootIndex}-${index}`}
-                  className="h-full overflow-hidden"
+                  key={`sub-title-${rootIndex}-${index}`}
+                  className="flex-shrink-0 border-b-[0.5px] border-custom-border-200 py-1 text-center capitalize"
                   style={{ width: `${currentViewData?.data.width}px` }}
                 >
-                  {["sat", "sun"].includes(monthDay?.dayData?.shortTitle) && (
-                    <div className="h-full bg-custom-background-90" />
-                  )}
+                  <div className="space-x-1 text-xs">
+                    <span className="text-custom-text-200">{monthDay.dayData.shortTitle[0]}</span>{" "}
+                    <span
+                      className={cn({
+                        "rounded-full bg-custom-primary-100 px-1 text-white": monthDay.today,
+                      })}
+                    >
+                      {monthDay.day}
+                    </span>
+                  </div>
                 </div>
               ))}
             </div>
           </div>
-        ))}
-      </div>
-    </>
+          <div className="h-full w-full flex divide-x divide-custom-border-100/50">
+            {block?.children?.map((monthDay, index) => (
+              <div
+                key={`column-${rootIndex}-${index}`}
+                className="h-full overflow-hidden"
+                style={{ width: `${currentViewData?.data.width}px` }}
+              >
+                {["sat", "sun"].includes(monthDay?.dayData?.shortTitle) && (
+                  <div className="h-full bg-custom-background-90" />
+                )}
+              </div>
+            ))}
+          </div>
+        </div>
+      ))}
+    </div>
   );
 };
diff --git a/web/components/gantt-chart/root.tsx b/web/components/gantt-chart/root.tsx
index c8576436e..2e9a8aca1 100644
--- a/web/components/gantt-chart/root.tsx
+++ b/web/components/gantt-chart/root.tsx
@@ -16,6 +16,7 @@ type GanttChartRootProps = {
   enableBlockRightResize?: boolean;
   enableBlockMove?: boolean;
   enableReorder?: boolean;
+  enableAddBlock?: boolean;
   bottomSpacing?: boolean;
   showAllBlocks?: boolean;
 };
@@ -29,10 +30,11 @@ export const GanttChartRoot: FC<GanttChartRootProps> = (props) => {
     blockUpdateHandler,
     sidebarToRender,
     blockToRender,
-    enableBlockLeftResize = true,
-    enableBlockRightResize = true,
-    enableBlockMove = true,
-    enableReorder = true,
+    enableBlockLeftResize = false,
+    enableBlockRightResize = false,
+    enableBlockMove = false,
+    enableReorder = false,
+    enableAddBlock = false,
     bottomSpacing = false,
     showAllBlocks = false,
   } = props;
@@ -51,6 +53,7 @@ export const GanttChartRoot: FC<GanttChartRootProps> = (props) => {
         enableBlockRightResize={enableBlockRightResize}
         enableBlockMove={enableBlockMove}
         enableReorder={enableReorder}
+        enableAddBlock={enableAddBlock}
         bottomSpacing={bottomSpacing}
         showAllBlocks={showAllBlocks}
       />
diff --git a/web/components/gantt-chart/sidebar/root.tsx b/web/components/gantt-chart/sidebar/root.tsx
index ceefb5809..b76112059 100644
--- a/web/components/gantt-chart/sidebar/root.tsx
+++ b/web/components/gantt-chart/sidebar/root.tsx
@@ -18,7 +18,7 @@ export const GanttChartSidebar: React.FC<Props> = (props) => {
     <div
       // DO NOT REMOVE THE ID
       id="gantt-sidebar"
-      className="sticky left-0 z-10 min-h-full h-max flex-shrink-0 border-r-[0.5px] border-custom-border-200"
+      className="sticky top-0 left-0 z-10 min-h-full h-max flex-shrink-0 border-r-[0.5px] border-custom-border-200 bg-custom-background-100"
       style={{
         width: `${SIDEBAR_WIDTH}px`,
       }}
diff --git a/web/components/issues/issue-layouts/gantt/base-gantt-root.tsx b/web/components/issues/issue-layouts/gantt/base-gantt-root.tsx
index b0eb2be9c..95729a103 100644
--- a/web/components/issues/issue-layouts/gantt/base-gantt-root.tsx
+++ b/web/components/issues/issue-layouts/gantt/base-gantt-root.tsx
@@ -84,6 +84,7 @@ export const BaseGanttRoot: React.FC<IBaseGanttRoot> = observer((props: IBaseGan
           enableBlockRightResize={isAllowed}
           enableBlockMove={isAllowed}
           enableReorder={appliedDisplayFilters?.order_by === "sort_order" && isAllowed}
+          enableAddBlock={isAllowed}
           showAllBlocks
         />
       </div>
diff --git a/web/components/modules/gantt-chart/modules-list-layout.tsx b/web/components/modules/gantt-chart/modules-list-layout.tsx
index a3f37df5c..8384c164e 100644
--- a/web/components/modules/gantt-chart/modules-list-layout.tsx
+++ b/web/components/modules/gantt-chart/modules-list-layout.tsx
@@ -52,6 +52,7 @@ export const ModulesListGanttChartView: React.FC = observer(() => {
         enableBlockRightResize={isAllowed}
         enableBlockMove={isAllowed}
         enableReorder={isAllowed}
+        enableAddBlock={isAllowed}
         showAllBlocks
       />
     </div>

From afda3ee6ca6d6f7fd401e714e2681f95f280cd75 Mon Sep 17 00:00:00 2001
From: Prateek Shourya <prateekshourya29@gmail.com>
Date: Mon, 12 Feb 2024 19:10:41 +0530
Subject: [PATCH 54/58] fix: priority sort order in display filters. (#3627)

---
 web/constants/issue.ts | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/web/constants/issue.ts b/web/constants/issue.ts
index 5b6ce8187..ccf609b1f 100644
--- a/web/constants/issue.ts
+++ b/web/constants/issue.ts
@@ -88,7 +88,7 @@ export const ISSUE_ORDER_BY_OPTIONS: {
   { key: "-updated_at", title: "Last Updated" },
   { key: "start_date", title: "Start Date" },
   { key: "target_date", title: "Due Date" },
-  { key: "priority", title: "Priority" },
+  { key: "-priority", title: "Priority" },
 ];
 
 export const ISSUE_FILTER_OPTIONS: {
@@ -237,7 +237,7 @@ export const ISSUE_DISPLAY_FILTERS_BY_LAYOUT: {
       display_properties: true,
       display_filters: {
         group_by: ["state_detail.group", "priority", "project", "labels", null],
-        order_by: ["sort_order", "-created_at", "-updated_at", "start_date", "priority"],
+        order_by: ["sort_order", "-created_at", "-updated_at", "start_date", "-priority"],
         type: [null, "active", "backlog"],
       },
       extra_options: {
@@ -250,7 +250,7 @@ export const ISSUE_DISPLAY_FILTERS_BY_LAYOUT: {
       display_properties: true,
       display_filters: {
         group_by: ["state_detail.group", "priority", "project", "labels"],
-        order_by: ["sort_order", "-created_at", "-updated_at", "start_date", "priority"],
+        order_by: ["sort_order", "-created_at", "-updated_at", "start_date", "-priority"],
         type: [null, "active", "backlog"],
       },
       extra_options: {
@@ -265,7 +265,7 @@ export const ISSUE_DISPLAY_FILTERS_BY_LAYOUT: {
       display_properties: true,
       display_filters: {
         group_by: ["state", "state_detail.group", "priority", "labels", "assignees", "created_by", null],
-        order_by: ["sort_order", "-created_at", "-updated_at", "start_date", "priority"],
+        order_by: ["sort_order", "-created_at", "-updated_at", "start_date", "-priority"],
         type: [null, "active", "backlog"],
       },
       extra_options: {
@@ -280,7 +280,7 @@ export const ISSUE_DISPLAY_FILTERS_BY_LAYOUT: {
       display_properties: true,
       display_filters: {
         group_by: ["state_detail.group", "priority", "project", "labels", null],
-        order_by: ["sort_order", "-created_at", "-updated_at", "start_date", "priority"],
+        order_by: ["sort_order", "-created_at", "-updated_at", "start_date", "-priority"],
         type: [null, "active", "backlog"],
       },
       extra_options: {
@@ -293,7 +293,7 @@ export const ISSUE_DISPLAY_FILTERS_BY_LAYOUT: {
       display_properties: true,
       display_filters: {
         group_by: ["state_detail.group", "priority", "project", "labels"],
-        order_by: ["sort_order", "-created_at", "-updated_at", "start_date", "priority"],
+        order_by: ["sort_order", "-created_at", "-updated_at", "start_date", "-priority"],
         type: [null, "active", "backlog"],
       },
       extra_options: {
@@ -352,7 +352,7 @@ export const ISSUE_DISPLAY_FILTERS_BY_LAYOUT: {
       display_properties: true,
       display_filters: {
         group_by: ["state", "priority", "labels", "assignees", "created_by", null],
-        order_by: ["sort_order", "-created_at", "-updated_at", "start_date", "priority"],
+        order_by: ["sort_order", "-created_at", "-updated_at", "start_date", "-priority"],
         type: [null, "active", "backlog"],
       },
       extra_options: {
@@ -366,7 +366,7 @@ export const ISSUE_DISPLAY_FILTERS_BY_LAYOUT: {
       display_filters: {
         group_by: ["state", "priority", "labels", "assignees", "created_by"],
         sub_group_by: ["state", "priority", "labels", "assignees", "created_by", null],
-        order_by: ["sort_order", "-created_at", "-updated_at", "start_date", "priority", "target_date"],
+        order_by: ["sort_order", "-created_at", "-updated_at", "start_date", "-priority", "target_date"],
         type: [null, "active", "backlog"],
       },
       extra_options: {
@@ -389,7 +389,7 @@ export const ISSUE_DISPLAY_FILTERS_BY_LAYOUT: {
       filters: ["priority", "state", "assignees", "mentions", "created_by", "labels", "start_date", "target_date"],
       display_properties: true,
       display_filters: {
-        order_by: ["sort_order", "-created_at", "-updated_at", "start_date", "priority"],
+        order_by: ["sort_order", "-created_at", "-updated_at", "start_date", "-priority"],
         type: [null, "active", "backlog"],
       },
       extra_options: {
@@ -401,7 +401,7 @@ export const ISSUE_DISPLAY_FILTERS_BY_LAYOUT: {
       filters: ["priority", "state", "assignees", "mentions", "created_by", "labels", "start_date", "target_date"],
       display_properties: false,
       display_filters: {
-        order_by: ["sort_order", "-created_at", "-updated_at", "start_date", "priority"],
+        order_by: ["sort_order", "-created_at", "-updated_at", "start_date", "-priority"],
         type: [null, "active", "backlog"],
       },
       extra_options: {

From 41a9dc36031b95dae0d6b42bb8712f5bd210b548 Mon Sep 17 00:00:00 2001
From: Ramesh Kumar Chandra
 <31303617+rameshkumarchandra@users.noreply.github.com>
Date: Mon, 12 Feb 2024 19:11:56 +0530
Subject: [PATCH 55/58] fix: pages table of content drop down close on click
 and app sidebar expansion by default on big screens (#3629)

---
 .../src/ui/components/content-browser.tsx          | 14 ++++++++++----
 .../src/ui/components/summary-popover.tsx          |  7 +++----
 web/layouts/app-layout/sidebar.tsx                 |  5 ++++-
 3 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/packages/editor/document-editor/src/ui/components/content-browser.tsx b/packages/editor/document-editor/src/ui/components/content-browser.tsx
index 18a50a5a8..97231ea96 100644
--- a/packages/editor/document-editor/src/ui/components/content-browser.tsx
+++ b/packages/editor/document-editor/src/ui/components/content-browser.tsx
@@ -6,10 +6,16 @@ import { scrollSummary } from "src/utils/editor-summary-utils";
 interface ContentBrowserProps {
   editor: Editor;
   markings: IMarking[];
+  setSidePeekVisible?: (sidePeekState: boolean) => void;
 }
 
 export const ContentBrowser = (props: ContentBrowserProps) => {
-  const { editor, markings } = props;
+  const { editor, markings, setSidePeekVisible } = props;
+
+  const handleOnClick = (marking: IMarking) => {
+    scrollSummary(editor, marking);
+    if (setSidePeekVisible) setSidePeekVisible(false);
+  }
 
   return (
     <div className="flex h-full flex-col overflow-hidden">
@@ -18,11 +24,11 @@ export const ContentBrowser = (props: ContentBrowserProps) => {
         {markings.length !== 0 ? (
           markings.map((marking) =>
             marking.level === 1 ? (
-              <HeadingComp onClick={() => scrollSummary(editor, marking)} heading={marking.text} />
+              <HeadingComp onClick={() => handleOnClick(marking)} heading={marking.text} />
             ) : marking.level === 2 ? (
-              <SubheadingComp onClick={() => scrollSummary(editor, marking)} subHeading={marking.text} />
+              <SubheadingComp onClick={() => handleOnClick(marking)} subHeading={marking.text} />
             ) : (
-              <HeadingThreeComp heading={marking.text} onClick={() => scrollSummary(editor, marking)} />
+              <HeadingThreeComp heading={marking.text} onClick={() => handleOnClick(marking)} />
             )
           )
         ) : (
diff --git a/packages/editor/document-editor/src/ui/components/summary-popover.tsx b/packages/editor/document-editor/src/ui/components/summary-popover.tsx
index 12903bb3d..6ad7cad83 100644
--- a/packages/editor/document-editor/src/ui/components/summary-popover.tsx
+++ b/packages/editor/document-editor/src/ui/components/summary-popover.tsx
@@ -33,9 +33,8 @@ export const SummaryPopover: React.FC<Props> = (props) => {
       <button
         type="button"
         ref={setReferenceElement}
-        className={`grid h-7 w-7 place-items-center rounded ${
-          sidePeekVisible ? "bg-custom-primary-100/20 text-custom-primary-100" : "text-custom-text-300"
-        }`}
+        className={`grid h-7 w-7 place-items-center rounded ${sidePeekVisible ? "bg-custom-primary-100/20 text-custom-primary-100" : "text-custom-text-300"
+          }`}
         onClick={() => setSidePeekVisible(!sidePeekVisible)}
       >
         <List className="h-4 w-4" />
@@ -48,7 +47,7 @@ export const SummaryPopover: React.FC<Props> = (props) => {
             style={summaryPopoverStyles.popper}
             {...summaryPopoverAttributes.popper}
           >
-            <ContentBrowser editor={editor} markings={markings} />
+            <ContentBrowser setSidePeekVisible={setSidePeekVisible} editor={editor} markings={markings} />
           </div>
         )}
       </div>
diff --git a/web/layouts/app-layout/sidebar.tsx b/web/layouts/app-layout/sidebar.tsx
index e211e7884..0ccbf2606 100644
--- a/web/layouts/app-layout/sidebar.tsx
+++ b/web/layouts/app-layout/sidebar.tsx
@@ -12,7 +12,7 @@ import { ProjectSidebarList } from "components/project";
 import { useApplication } from "hooks/store";
 import useOutsideClickDetector from "hooks/use-outside-click-detector";
 
-export interface IAppSidebar {}
+export interface IAppSidebar { }
 
 export const AppSidebar: FC<IAppSidebar> = observer(() => {
   // store hooks
@@ -32,6 +32,9 @@ export const AppSidebar: FC<IAppSidebar> = observer(() => {
       if (window.innerWidth <= 768) {
         themStore.toggleSidebar(true);
       }
+      if (window.innerWidth > 768) {
+        themStore.toggleSidebar(false);
+      }
     };
     handleResize();
     window.addEventListener("resize", handleResize);

From 73d12cf1bb7326b405ee85d6183c547f45ab79e1 Mon Sep 17 00:00:00 2001
From: sriram veeraghanta <veeraghanta.sriram@gmail.com>
Date: Mon, 12 Feb 2024 20:23:12 +0530
Subject: [PATCH 56/58] fix: package version upgrade

---
 web/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/package.json b/web/package.json
index b05616abc..9670c2833 100644
--- a/web/package.json
+++ b/web/package.json
@@ -1,6 +1,6 @@
 {
   "name": "web",
-  "version": "0.15.0",
+  "version": "0.15.1",
   "private": true,
   "scripts": {
     "dev": "turbo run develop",

From a303e52039e39db1d11568b69269cbf729c4abf5 Mon Sep 17 00:00:00 2001
From: sriram veeraghanta <veeraghanta.sriram@gmail.com>
Date: Mon, 12 Feb 2024 20:23:39 +0530
Subject: [PATCH 57/58] fix: package version upgrade

---
 apiserver/package.json                        | 2 +-
 package.json                                  | 4 ++--
 packages/editor/core/package.json             | 2 +-
 packages/editor/document-editor/package.json  | 2 +-
 packages/editor/extensions/package.json       | 2 +-
 packages/editor/lite-text-editor/package.json | 2 +-
 packages/editor/rich-text-editor/package.json | 2 +-
 packages/eslint-config-custom/package.json    | 2 +-
 packages/tailwind-config-custom/package.json  | 2 +-
 packages/tsconfig/package.json                | 2 +-
 packages/types/package.json                   | 2 +-
 packages/ui/package.json                      | 2 +-
 space/package.json                            | 2 +-
 13 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/apiserver/package.json b/apiserver/package.json
index 120314ed3..fb4f8441d 100644
--- a/apiserver/package.json
+++ b/apiserver/package.json
@@ -1,4 +1,4 @@
 {
   "name": "plane-api",
-  "version": "0.15.0"
+  "version": "0.15.1"
 }
diff --git a/package.json b/package.json
index 64bd22058..762ce322a 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "repository": "https://github.com/makeplane/plane.git",
-  "version": "0.15.0",
+  "version": "0.15.1",
   "license": "AGPL-3.0",
   "private": true,
   "workspaces": [
@@ -34,4 +34,4 @@
     "@types/react": "18.2.42"
   },
   "packageManager": "yarn@1.22.19"
-}
\ No newline at end of file
+}
diff --git a/packages/editor/core/package.json b/packages/editor/core/package.json
index 8b31acdaf..7f7f4831a 100644
--- a/packages/editor/core/package.json
+++ b/packages/editor/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@plane/editor-core",
-  "version": "0.15.0",
+  "version": "0.15.1",
   "description": "Core Editor that powers Plane",
   "private": true,
   "main": "./dist/index.mjs",
diff --git a/packages/editor/document-editor/package.json b/packages/editor/document-editor/package.json
index 7a3e9bdad..b33bc12fb 100644
--- a/packages/editor/document-editor/package.json
+++ b/packages/editor/document-editor/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@plane/document-editor",
-  "version": "0.15.0",
+  "version": "0.15.1",
   "description": "Package that powers Plane's Pages Editor",
   "main": "./dist/index.mjs",
   "module": "./dist/index.mjs",
diff --git a/packages/editor/extensions/package.json b/packages/editor/extensions/package.json
index 339249320..8481abdf3 100644
--- a/packages/editor/extensions/package.json
+++ b/packages/editor/extensions/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@plane/editor-extensions",
-  "version": "0.15.0",
+  "version": "0.15.1",
   "description": "Package that powers Plane's Editor with extensions",
   "private": true,
   "main": "./dist/index.mjs",
diff --git a/packages/editor/lite-text-editor/package.json b/packages/editor/lite-text-editor/package.json
index 2272b9030..71d70399d 100644
--- a/packages/editor/lite-text-editor/package.json
+++ b/packages/editor/lite-text-editor/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@plane/lite-text-editor",
-  "version": "0.15.0",
+  "version": "0.15.1",
   "description": "Package that powers Plane's Comment Editor",
   "private": true,
   "main": "./dist/index.mjs",
diff --git a/packages/editor/rich-text-editor/package.json b/packages/editor/rich-text-editor/package.json
index 7bd0920da..a85a8b998 100644
--- a/packages/editor/rich-text-editor/package.json
+++ b/packages/editor/rich-text-editor/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@plane/rich-text-editor",
-  "version": "0.15.0",
+  "version": "0.15.1",
   "description": "Rich Text Editor that powers Plane",
   "private": true,
   "main": "./dist/index.mjs",
diff --git a/packages/eslint-config-custom/package.json b/packages/eslint-config-custom/package.json
index 93ad475f8..6bfe67261 100644
--- a/packages/eslint-config-custom/package.json
+++ b/packages/eslint-config-custom/package.json
@@ -1,7 +1,7 @@
 {
   "name": "eslint-config-custom",
   "private": true,
-  "version": "0.15.0",
+  "version": "0.15.1",
   "main": "index.js",
   "license": "MIT",
   "dependencies": {
diff --git a/packages/tailwind-config-custom/package.json b/packages/tailwind-config-custom/package.json
index b04497011..50ede8674 100644
--- a/packages/tailwind-config-custom/package.json
+++ b/packages/tailwind-config-custom/package.json
@@ -1,6 +1,6 @@
 {
   "name": "tailwind-config-custom",
-  "version": "0.15.0",
+  "version": "0.15.1",
   "description": "common tailwind configuration across monorepo",
   "main": "index.js",
   "private": true,
diff --git a/packages/tsconfig/package.json b/packages/tsconfig/package.json
index 0ad6f2ba9..42ce3fed5 100644
--- a/packages/tsconfig/package.json
+++ b/packages/tsconfig/package.json
@@ -1,6 +1,6 @@
 {
   "name": "tsconfig",
-  "version": "0.15.0",
+  "version": "0.15.1",
   "private": true,
   "files": [
     "base.json",
diff --git a/packages/types/package.json b/packages/types/package.json
index 8fa98db30..0e5c2eb16 100644
--- a/packages/types/package.json
+++ b/packages/types/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@plane/types",
-  "version": "0.15.0",
+  "version": "0.15.1",
   "private": true,
   "main": "./src/index.d.ts"
 }
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 9228cf9bb..912fcfeb8 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -2,7 +2,7 @@
   "name": "@plane/ui",
   "description": "UI components shared across multiple apps internally",
   "private": true,
-  "version": "0.15.0",
+  "version": "0.15.1",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
diff --git a/space/package.json b/space/package.json
index 7d180d5ff..9ee7279cd 100644
--- a/space/package.json
+++ b/space/package.json
@@ -1,6 +1,6 @@
 {
   "name": "space",
-  "version": "0.15.0",
+  "version": "0.15.1",
   "private": true,
   "scripts": {
     "dev": "turbo run develop",

From d90aaba842cfd4cdc85eb5745710d087d6cb495f Mon Sep 17 00:00:00 2001
From: rahulramesha <71900764+rahulramesha@users.noreply.github.com>
Date: Mon, 12 Feb 2024 20:25:37 +0530
Subject: [PATCH 58/58] chore: change border of placeholder for spreadsheet
 (#3631)

* change border to place holder for spreadsheet

* add completed cylces exception fix

* remove window idle callback for making issues visible
---
 web/components/core/render-if-visible-HOC.tsx    | 16 +++++++++-------
 web/components/cycles/sidebar.tsx                |  2 +-
 .../issue-layouts/spreadsheet/issue-row.tsx      |  2 +-
 3 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/web/components/core/render-if-visible-HOC.tsx b/web/components/core/render-if-visible-HOC.tsx
index 26ae15285..24ae19fe7 100644
--- a/web/components/core/render-if-visible-HOC.tsx
+++ b/web/components/core/render-if-visible-HOC.tsx
@@ -40,13 +40,15 @@ const RenderIfVisible: React.FC<Props> = (props) => {
     if (intersectionRef.current) {
       const observer = new IntersectionObserver(
         (entries) => {
-          if (typeof window !== undefined && window.requestIdleCallback) {
-            window.requestIdleCallback(() => setShouldVisible(entries[0].isIntersecting), {
-              timeout: 300,
-            });
-          } else {
-            setShouldVisible(entries[0].isIntersecting);
-          }
+          //DO no remove comments for future
+          // if (typeof window !== undefined && window.requestIdleCallback) {
+          //   window.requestIdleCallback(() => setShouldVisible(entries[0].isIntersecting), {
+          //     timeout: 300,
+          //   });
+          // } else {
+          //   setShouldVisible(entries[0].isIntersecting);
+          // }
+          setShouldVisible(entries[0].isIntersecting);
         },
         {
           root: root?.current,
diff --git a/web/components/cycles/sidebar.tsx b/web/components/cycles/sidebar.tsx
index 8335baf06..c825feb37 100644
--- a/web/components/cycles/sidebar.tsx
+++ b/web/components/cycles/sidebar.tsx
@@ -329,7 +329,7 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
   const isEndValid = new Date(`${cycleDetails?.end_date}`) >= new Date(`${cycleDetails?.start_date}`);
 
   const progressPercentage = cycleDetails
-    ? isCompleted
+    ? isCompleted && cycleDetails?.progress_snapshot
       ? Math.round(
           (cycleDetails.progress_snapshot.completed_issues / cycleDetails.progress_snapshot.total_issues) * 100
         )
diff --git a/web/components/issues/issue-layouts/spreadsheet/issue-row.tsx b/web/components/issues/issue-layouts/spreadsheet/issue-row.tsx
index 840ea39f9..b07dc93e2 100644
--- a/web/components/issues/issue-layouts/spreadsheet/issue-row.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/issue-row.tsx
@@ -65,7 +65,7 @@ export const SpreadsheetIssueRow = observer((props: Props) => {
         as="tr"
         defaultHeight="calc(2.75rem - 1px)"
         root={containerRef}
-        placeholderChildren={<td colSpan={100} className="border-b-[0.5px]" />}
+        placeholderChildren={<td colSpan={100} className="border-b-[0.5px] border-custom-border-200" />}
         changingReference={issueIds}
       >
         <IssueRowDetails