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 e82944c03e5..0f09764acca 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 00000000000..aebd7fc02af
--- /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 04aaa851260..0eff24d9314 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 fc0075030e7..8e2ceab100d 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 cf2d97ab68a..fbf1ca6e20a 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 debcbc21324..cca1a972b94 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 84a284f2e69..5ec67a3d7b5 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 1f6f3a7e5f9..a0a7227f769 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 d2a9598179d..83595af60e4 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 2afb549a0f1..28116b32367 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 0c6329ac9f2..e9f37bf6e2c 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 76e5e6fcccb..24c69f0935d 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 e393450af0b..3b3e05f1a12 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 ee12653748d..b7ca78ede3d 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 10f07f779ba..0fe6a74c5b9 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 29ea9fc4721..b5260edd7ec 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 7b45d3fcf96..8d3a22682ec 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 04a7ecb6435..29ecb16c7f4 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 eff05aba545..fdb033a214a 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 abe13c4e22a..050400a2c44 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 e9dc4abadaa..bb070a22f57 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 96929f7b09e..33192930e4c 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 dca0dc7e6d6..d54f73009e7 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 90cbccd81e9..195b8947159 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 2ae3734719d..8bb4c92510b 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 d576cb96378..b7c05929cd5 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 625b7991cce..5ced552048e 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 f86abf6e6d5..2607fe91d62 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 da13e635378..4dfee1ea207 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 0b98b3e6b66..caa8213058f 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 307a65ad2e3..701db6ad945 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 0db293a656c..4844ea406e5 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 af2c11660bb..a036b2d281f 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 1a4c2646b4f..31bdee58795 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 b7c05929cd5..8dd6f31d51c 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 ef8548c6618..d9ce3c3f08b 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    | 12 +++++++++---
 2 files changed, 10 insertions(+), 4 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 eb7005cbd91..486d676254b 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 2ba02367415..c681736f524 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;
-
-      updateFilters(workspaceSlug.toString(), undefined, EIssueFilterType.DISPLAY_FILTERS, { ...updatedDisplayFilter });
+      if (!workspaceSlug || !globalViewId) return;
+
+      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 c296bb11180..7a9cfb1b5cb 100644
--- a/apiserver/plane/api/views/cycle.py
+++ b/apiserver/plane/api/views/cycle.py
@@ -243,6 +243,29 @@ def post(self, request, slug, project_id):
         ):
             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 @@ def patch(self, request, slug, project_id, pk):
 
         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 e91f2a5f66f..530eef5bf42 100644
--- a/apiserver/plane/api/views/issue.py
+++ b/apiserver/plane/api/views/issue.py
@@ -220,6 +220,30 @@ def post(self, request, slug, project_id):
         )
 
         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 @@ def patch(self, request, slug, project_id, pk=None):
             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 @@ def patch(self, request, slug, project_id, pk=None):
                 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 1a9a21a3c19..e2d59e126f8 100644
--- a/apiserver/plane/api/views/module.py
+++ b/apiserver/plane/api/views/module.py
@@ -132,6 +132,29 @@ def post(self, request, slug, project_id):
             },
         )
         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 @@ def patch(self, request, slug, project_id, pk):
             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 f931c2ed264..88fb083f05e 100644
--- a/apiserver/plane/api/views/state.py
+++ b/apiserver/plane/api/views/state.py
@@ -38,6 +38,30 @@ def post(self, request, slug, project_id):
             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 @@ def patch(self, request, slug, project_id, state_id=None):
         )
         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 960e222ce1e..03133d5df07 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 23a227fefb7..32f593e1e3d 100644
--- a/apiserver/plane/app/views/cycle.py
+++ b/apiserver/plane/app/views/cycle.py
@@ -242,13 +242,13 @@ def list(self, request, slug, project_id):
                     .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 @@ def list(self, request, slug, project_id):
                     )
                     .annotate(
                         pending_issues=Count(
-                            "assignee_id",
+                            "id",
                             filter=Q(
                                 completed_at__isnull=True,
                                 archived_at__isnull=True,
@@ -281,13 +281,13 @@ def list(self, request, slug, project_id):
                     .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 @@ def list(self, request, slug, project_id):
                     )
                     .annotate(
                         pending_issues=Count(
-                            "label_id",
+                            "id",
                             filter=Q(
                                 completed_at__isnull=True,
                                 archived_at__isnull=True,
@@ -419,13 +419,13 @@ def retrieve(self, request, slug, project_id, pk):
             )
             .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 @@ def retrieve(self, request, slug, project_id, pk):
             )
             .annotate(
                 pending_issues=Count(
-                    "assignee_id",
+                    "id",
                     filter=Q(
                         completed_at__isnull=True,
                         archived_at__isnull=True,
@@ -459,13 +459,13 @@ def retrieve(self, request, slug, project_id, pk):
             .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 @@ def retrieve(self, request, slug, project_id, pk):
             )
             .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 1f055129a90..fafcfed4b35 100644
--- a/apiserver/plane/app/views/module.py
+++ b/apiserver/plane/app/views/module.py
@@ -197,7 +197,7 @@ def retrieve(self, request, slug, project_id, pk):
             )
             .annotate(
                 total_issues=Count(
-                    "assignee_id",
+                    "id",
                     filter=Q(
                         archived_at__isnull=True,
                         is_draft=False,
@@ -206,7 +206,7 @@ def retrieve(self, request, slug, project_id, pk):
             )
             .annotate(
                 completed_issues=Count(
-                    "assignee_id",
+                    "id",
                     filter=Q(
                         completed_at__isnull=False,
                         archived_at__isnull=True,
@@ -216,7 +216,7 @@ def retrieve(self, request, slug, project_id, pk):
             )
             .annotate(
                 pending_issues=Count(
-                    "assignee_id",
+                    "id",
                     filter=Q(
                         completed_at__isnull=True,
                         archived_at__isnull=True,
@@ -239,7 +239,7 @@ def retrieve(self, request, slug, project_id, pk):
             .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 @@ def retrieve(self, request, slug, project_id, pk):
             )
             .annotate(
                 completed_issues=Count(
-                    "label_id",
+                    "id",
                     filter=Q(
                         completed_at__isnull=False,
                         archived_at__isnull=True,
@@ -258,7 +258,7 @@ def retrieve(self, request, slug, project_id, pk):
             )
             .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 caa8213058f..0b98b3e6b66 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 3d47d8eca25..ca21756fc31 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 4bf76f91f79..5fa1d24593a 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 f43326b6b0b..8b1aa28e839 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 d9ce3c3f08b..e211e7884a1 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 ed5077385c5..bb6824c0809 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 286222e4a19..71618d51c60 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 e32b97df0e6..c9ed459a1e4 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 f0f576cbcf0..7ebccc23c56 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 44b5e6111fd..bdd08a0d83f 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 34282782536..dbf349f9d73 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 213c35f8ee9..e6349e0b4a2 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 d2279aeb4e3..8da2be9ece1 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 e34f4b30b2d..86de8d0c0ca 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 44da175b49a..32e067833e6 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 8144feef7e0..7e17e55f1ee 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 5fa1d24593a..c61679304ea 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 c0ac90f34e5..bb7f82f341a 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 aae8ff54b47..eb7a5e4e552 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 8e2ceab100d..7cfc492f4fd 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 fbf1ca6e20a..a9ad3a01f27 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 5ec67a3d7b5..70e4dbeeaa8 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 a0a7227f769..91e05db462b 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 29ecb16c7f4..769d6c945f7 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 050400a2c44..56cd54f0be2 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 33192930e4c..34e8ffa08cb 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 0ca28b9506f..82253af88bc 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 e152c1b031a..066f172ca1f 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 0d90ba0a5d7..ed2ea77ae42 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 79a6dc8408e..11d74af0e31 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 b8f12a944cc..3f0f1f128e9 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 fda73e94ffe..2e0303a8ef4 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 d486b2f4873..1f62c248c61 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 f0727c50e55..02bdf6820ce 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 cd4070186a6..bf898aec489 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 109a903a288..c656bd62271 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 b72dfff184d..32a60e996b5 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 919decd5106..2da9a826ff9 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 78f332ddde1..e89f606886c 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 486d676254b..7ed3202aa32 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 68b09135c95..99d774bd572 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 713a6644a19..25a4cb0c6d2 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 b4610a2e0e9..8880ca27846 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 b2222a69ea1..6b353d8c3fd 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 5e02d638f77..95ee6c7a849 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 7a7a2d1ab88..49c9f7e4069 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 540d4d7f685..dd63f09aa98 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 4057c7b932d..e0a0dbd5c67 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 92964ec9791..764f5605a5b 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 2640937786f..2926b64337f 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 d215356396f..6e6c2e51826 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 0decd5555b3..ed52c9198b3 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 044030184c8..e28dd9a42ae 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 c681736f524..6bbbfebb4e7 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 2656143ac14..e63a94b8c56 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 dbc27a3db72..775275ca4db 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 50878cccea3..0c86b24c0fb 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 82015056e39..2812fb1ecd1 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 0a83217403f..1961b8717cb 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 778f9cdac3d..076464f270a 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 0050c8acfd3..83a7c8d0fee 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 579b8863ccf..40ee85df7cb 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 605e8bea142..b0acd7237fb 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 274df29818b..0616c98d737 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 4dfee1ea207..3b5b35ceaca 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 5041e5d2a86..f14018ed435 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 7bb1b9a6b6f..2b93384e2f1 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 e86a8efd92e..2727b4e3be4 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 e2ed02aa61c..0852434c3db 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 f9236ef10f0..3d83be010da 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 c24e75198fa..7232c8815f8 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 93b12d94c02..b10908060f3 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 8b1aa28e839..c7247800512 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 c9ec19cc8a0..3315ff03572 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 362c03ed5b7..6e1de15dd5d 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 3ae0b9e62a0..dc9c4de612c 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 76e67e1b706..e7601ce3509 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 1e6aa136abd..377ef06c1df 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 e2b0bc5f0d8..7e04a6ebd09 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 5be7033a4c7..f5efa7bc8e7 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 96fc8df595c..941bbbaa6a6 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 899348dd21a..fa8008c8f2e 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 b165a40ae41..39fb5c9741a 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 ed45792f24c..34aec4db61e 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 8e4188d8110..d9cd81d5f63 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 5452c861df9..d5ceb473607 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 860444b6bcc..b12659a81b6 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 26b542b71c4..4a041409279 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 0c1d41c804b..401c482f3ab 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 3288880ea4d..99ac40d84f0 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 423c80640a7..8cb29eddeb3 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 a35041a2af7..acfe0648d75 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 87313c87dec..e0ac68a2470 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 0dfcfb803ec..4528882ddd6 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 88fee55a683..6b3782a6258 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 00000000000..67f1b1034e4
--- /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 6a5e55a62c0..1668f2a1c07 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 a0ce6b0e213..2349b1585a7 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 00000000000..bcff65ae06b
--- /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 d7d33fd0ebb..b9fd22f2d17 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 dad6253c9de..864c87f27aa 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 f310f0c3978..f42bf519474 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 8c179fc10fb..00000000000
--- 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 3d6d501f2e4..71173c2c2e6 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 d0dbb351478..22ec70b3106 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 cabc2aa927f..1a185e402ae 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 0d2a1860b19..1d8c3e77412 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 53d4a3b3bf3..5a5911fcaee 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 cc0ac22b28d..00000000000
--- 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 672cf4fbe55..30333535a42 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 00000000000..89e279c402e
--- /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 b3aeeea0407..3e07332499b 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 1dba6f78037..3cd9ca16a72 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 7cb53ad3934..472d6808580 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 1652aa89bf1..c48f23068b6 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 5b4885bf3e2..f98dba93a47 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 f66bf2ec091..49ca84eb6c6 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 585b1a5e127..1ef08ea6158 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 c34aaef972c..5a640a56695 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 7ed3202aa32..64b1322674a 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 0903355ceec..2b311f6eb95 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 10f3582f14b..8f661a9e612 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 95e31b758c8..dd6c8da228e 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 9e3bb8701f6..1838316cb90 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 89da8dd54b5..e30c207b649 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 764f5605a5b..f97f1ea86ce 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 2926b64337f..f962701769b 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 6e6c2e51826..8c3beb3d2c1 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 ed52c9198b3..a3ed73ec0c9 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 e28dd9a42ae..13c7ac02aec 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 54df6ca2446..e4efc513746 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 40b93355792..7f92bd74ca6 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 47fae2c9ca1..1366a2886a9 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 31751c0d06c..7cfa6aa8563 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 d4a27afc154..e2a54c05f6e 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 f5727f277df..dcdff6685a9 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 a036b2d281f..cf3f322329e 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 6ef6ec0eea5..9ce00a03c59 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 45b71466d1f..97884bccc1f 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 bd4171cfa2d..2f7f6ffae87 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 dc9c4de612c..93756d22a29 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 d23480cfe5c..3f251ca7811 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 2a8ade4fa51..8003f15e32d 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 6f8a82e5672..f254a3cb734 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 c37cdf4b927..8fd02140388 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 661d31ef555..be0792caadc 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 c7247800512..947885f9afd 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 3f306c559f1..4e505cff9c6 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 b9f6bd41103..b86ab5e783e 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 7a9cfb1b5cb..6f66c373ec6 100644
--- a/apiserver/plane/api/views/cycle.py
+++ b/apiserver/plane/api/views/cycle.py
@@ -262,7 +262,7 @@ def post(self, request, slug, project_id):
                     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 @@ def patch(self, request, slug, project_id, pk):
                 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 530eef5bf42..a759b15f6e0 100644
--- a/apiserver/plane/api/views/issue.py
+++ b/apiserver/plane/api/views/issue.py
@@ -239,7 +239,7 @@ def post(self, request, slug, project_id):
                 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 @@ def patch(self, request, slug, project_id, pk=None):
                 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 @@ def post(self, request, slug, project_id):
         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 @@ def post(self, request, slug, project_id):
                 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 @@ def patch(self, request, slug, project_id, pk=None):
         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 e2d59e126f8..d509a53c79d 100644
--- a/apiserver/plane/api/views/module.py
+++ b/apiserver/plane/api/views/module.py
@@ -151,7 +151,7 @@ def post(self, request, slug, project_id):
                 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 @@ def patch(self, request, slug, project_id, pk):
                 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 88fb083f05e..0a262a071d4 100644
--- a/apiserver/plane/api/views/state.py
+++ b/apiserver/plane/api/views/state.py
@@ -57,7 +57,7 @@ def post(self, request, slug, project_id):
                 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 @@ def patch(self, request, slug, project_id, state_id=None):
                 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    | 162 +++++++------
 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     | 207 ++++++++--------
 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     |  57 +++--
 14 files changed, 1064 insertions(+), 499 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 a4b82c4b6d0..df61411f205 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 00000000000..b893bf99308
--- /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 86de8d0c0ca..a6d46709101 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>
+            {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>
             )}
+          </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>
 
-            <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>
-                )}
-              </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 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>
 
-            <CustomMenu ellipsis>
-              {!isCompleted && isEditingAllowed && (
+              {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 7cfc492f4fd..44f4f944de4 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 a9ad3a01f27..a4bf963ab26 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 70e4dbeeaa8..6287223b075 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 769d6c945f7..c819b25c343 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}
               />
-
-              <Breadcrumbs.BreadcrumbItem
-                type="text"
-                link={<BreadcrumbLink label="Issues" icon={<LayersIcon className="h-4 w-4 text-custom-text-300" />} />}
+            </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}
               />
-            </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>
+            </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>
-          )}
+            {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>
+            )}
 
+          </div>
           {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 34e8ffa08cb..34b1a6ef8da 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 8bb4c92510b..4d54dd9659a 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 8dd6f31d51c..2210a42706c 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 425f53b46ad..33b86ada1ff 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 00000000000..2338e184817
--- /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 00000000000..b08c443d2c0
--- /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 22ec70b3106..0541dfce41d 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;
-
-                  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 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>
+              )}
+            </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 2210a42706c..d074132e26e 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 31d31380de9..086e9518244 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 bc7d67d88bf..3054bdb2896 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 6b353d8c3fd..c4ced93262c 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 075a16aa277..8071b40e59a 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 377ef06c1df..7d6a0c5e9c5 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 da983a8bcac..43cea7d5c94 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 f45c6fe204b..13d14484a4c 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 fafcfed4b35..4792a1f7996 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  |  248 +--
 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, 1800 insertions(+), 133 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 b069ef78c1a..edb89f9b187 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 @@ def finalize_response(self, request, response, *args, **kwargs):
             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 @@ def finalize_response(self, request, response, *args, **kwargs):
                 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 e07cb811cc8..fa1e7559b06 100644
--- a/apiserver/plane/app/views/base.py
+++ b/apiserver/plane/app/views/base.py
@@ -64,6 +64,7 @@ def finalize_response(self, request, response, *args, **kwargs):
                 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 713835033f6..9e9b348e197 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.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,
-                    },
-                }
+    try:
+        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)
+            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),
+                    }
             )
-        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)
+        summary = "Updates were made to the issue by"
 
-    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",
+        # 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)
 
-        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()
+        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",
+            )
 
-        EmailNotificationLog.objects.filter(
-            pk__in=email_notification_ids
-        ).update(sent_at=timezone.now())
-        return
-    except Exception as e:
-        print(e)
+            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 6cfbec72a96..0a843e4a63a 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 34bba0cf87a..605f48dd944 100644
--- a/apiserver/plane/bgtasks/webhook_task.py
+++ b/apiserver/plane/bgtasks/webhook_task.py
@@ -7,6 +7,9 @@
 # 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 @@
     ModuleIssue,
     CycleIssue,
     IssueComment,
+    User,
 )
 from plane.api.serializers import (
     ProjectSerializer,
-    IssueSerializer,
     CycleSerializer,
     ModuleSerializer,
     CycleIssueSerializer,
@@ -34,6 +37,9 @@
     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 444248382ff..f032092504c 100644
--- a/apiserver/plane/settings/common.py
+++ b/apiserver/plane/settings/common.py
@@ -282,10 +282,8 @@
     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 fa50631c557..a7990562d47 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 00000000000..05439523514
--- /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 d074132e26e..d8306ab40e9 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 cdaff736522..8343ea78df8 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]
   );
 
-  useEffect(() => {
-    if (!showAlert) {
-      window.removeEventListener("beforeunload", handleBeforeUnload);
-      return;
-    }
+  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(() => {
     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 be512dda031..93a814d57ed 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 42586283917..cc0411068ca 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 a7990562d47..3c561f37ac2 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 0b5c612d399..34bce8a0a91 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 @@ def get_queryset(self):
                 .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 @@ def create(self, request, slug, project_id):
                 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 @@ def partial_update(self, request, slug, project_id, pk):
         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 e6349e0b4a2..396003589a4 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 0fe6a74c5b9..139ec025797 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 99d774bd572..203ac4938b7 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 25a4cb0c6d2..8c92dc604e3 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 c4ced93262c..1ade285a99f 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 49c9f7e4069..90270e1a15a 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 13c7ac02aec..65adc85427c 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 0616c98d737..1f9935c989e 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 31cb9dd669f..430aa4920bf 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 3b5b35ceaca..02a08731486 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 13d14484a4c..dc0f601eb66 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 c819b25c343..81e2d2d76be 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 b08c443d2c0..e9ed56a8de8 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           | 205 +++++++++++++++++------------
 deploy/selfhost/docker-compose.yml |   4 -
 deploy/selfhost/install.sh         |  10 +-
 deploy/selfhost/variables.env      |  35 +++--
 6 files changed, 237 insertions(+), 174 deletions(-)

diff --git a/.github/workflows/build-branch.yml b/.github/workflows/build-branch.yml
index 38694a62ea5..c43305fc0da 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 f32be504d0f..917d08fdf88 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 445f39d697e..2d6ef0a6f1b 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 - 
-
-        if [ "$EUID" -ne 0 ]; then
-            dockerd-rootless-setuptool.sh install &> /dev/null
+        # curl -o- https://get.docker.com | bash - 
+
+        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=""
+
+if [[ $CPU_ARCH == "amd64" || $CPU_ARCH == "x86_64" || ( $DEPLOY_BRANCH == "master" && ( $CPU_ARCH == "arm64" || $CPU_ARCH == "aarch64" ) ) ]]; then
+    USE_GLOBAL_IMAGES=1
+fi
 
-mkdir -p $PLANE_INSTALL_DIR/{data,log}
+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 b223e722ab0..60861878cb5 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 4e505cff9c6..30f2d15d72c 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 4a378181154..6d2cde0ffb9 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 7ef99370f5a..c7cce24758d 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 06f1c44c0a3..930f332b9c0 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 1bb861477f5..b93a4d551ca 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 aebd7fc02af..e5f1dbce6cb 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 d6d4da432ec..e3aa6df11db 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 3cd9ca16a72..2603b3eb2bc 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 88fec31993d..48558a683f7 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 cfbdf52e69a..44cd3a7016a 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 673bea8aa20..21e6a534e04 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 980f344a69a..d126b60f72b 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 e673293e003..a9b64c1f1f7 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 f620e6818fc..1bab9a21e9c 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 719308a6552..7991c44024c 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 e92dd40a067..a7f54adfbe0 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 0f121bed797..7e14ad3da24 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 e63a94b8c56..b9450141b97 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 775275ca4db..c5674cee974 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 0c86b24c0fb..f7a472b49f9 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 dc9f8c7c69a..73478c6ac83 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 2812fb1ecd1..60e429c9fc8 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 1961b8717cb..b8801559c5a 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 076464f270a..fcbd817b6a1 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 83a7c8d0fee..1a029db1212 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 00000000000..5d2e62fa55e
--- /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 40ee85df7cb..2a97045fefb 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 00000000000..588c7be9ee4
--- /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 704c9f9047c..64d1ec0e157 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 369e6633cdc..e63b01dfb00 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 1668f2a1c07..1a0097eb895 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 99511b0fc29..228e3557511 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 00000000000..0d1c26f3c27
--- /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 c43305fc0da..603f08e9422 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 430aa4920bf..544ebeb15de 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 a0101b1c1b3..2fa79ec3adb 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 8da2be9ece1..bad7df0e557 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 a6d46709101..72548024175 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 26d04e103ae..797fc9e393c 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 handleCycleUpdate = (cycle: ICycle, payload: IBlockUpdateData) => {
-    if (!workspaceSlug) return;
-    mutateCycles &&
-      mutateCycles((prevData: any) => {
-        if (!prevData) return prevData;
-
-        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,
-              }
-            : {}),
-        }));
-
-        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 { getCycleById, updateCycleDetails } = useCycle();
 
-    const newPayload: any = { ...payload };
+  const handleCycleUpdate = async (cycle: ICycle, data: IBlockUpdateData) => {
+    if (!workspaceSlug || !cycle) return;
 
-    if (newPayload.sort_order && payload.sort_order) newPayload.sort_order = payload.sort_order.newSortOrder;
+    const payload: any = { ...data };
+    if (data.sort_order) payload.sort_order = data.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 c61679304ea..299c710084a 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 3da862d91bb..fe003e16710 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 a7071ba282f..0f18b43cc45 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 1af1529c27c..dddccda5a75 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 30f146dc55a..8f8788787cf 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 da7382859f7..6e31215c1c5 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 bca39a0bd6d..12de8e127ff 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 3cf88cb7c4a..3904049e9c4 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 d61e7586ac7..00000000000
--- 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 1739f3aaad6..00000000000
--- 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 8eb88cb0dee..00000000000
--- 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 039bc0cb5ee..00000000000
--- 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 d1cbd0dfaba..53948f71db5 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 bc5daa2a358..b629e60ec3e 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 bb6824c0809..51340d740a1 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 7ebccc23c56..5c80e39d012 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                   | 535 +++++++++---------
 web/pages/profile/preferences/theme.tsx       |   2 +-
 web/store/application/theme.store.ts          |  18 +
 17 files changed, 551 insertions(+), 349 deletions(-)

diff --git a/web/components/core/sidebar/sidebar-menu-hamburger-toggle.tsx b/web/components/core/sidebar/sidebar-menu-hamburger-toggle.tsx
index 0e34eac2c41..fe7b8d177ba 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 d54f73009e7..f933d4dfac9 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 44dfe57d18c..4361b7a9d2f 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 3ce7747c9bc..b356b5adb3c 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 9d17350a986..b25935f4e24 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 d1eec12331b..7f43f3cad17 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 0a97b336484..4b8a1b85437 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 60c17d8d4ef..5ff3891e027 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 fe5de045419..0808b9503e3 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 d91dd8d658c..76f4c1fbac8 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 f56a8c14f3a..486d8d7e3f9 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 44d802a1bb0..257c2365588 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 e76473cf46d..d0c83ffdbdd 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 59bc657c76e..4641837fde0 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 294ef35742e..655d6a4bd17 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>
-                      )}
-                    </button>
+            )}
+          />
+          <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>
-              </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)}
+                  <div className="absolute bottom-3 right-3 flex">
+                    <Controller
                       control={control}
-                      value={value ?? "https://images.unsplash.com/photo-1506383796573-caf02b4a79ab"}
+                      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>
                 </div>
-                <span className="text-sm tracking-tight">{watch("email")}</span>
-              </div>
 
-              {/* <Link href={`/profile/${myProfile.id}`}>
+                <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}`}>
               <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>
+                    {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>
+                  <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"
+                    <Controller
+                      control={control}
                       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"
+                      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>
 
-              <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"
+                  <div className="flex flex-col gap-1">
+                    <h4 className="text-sm">
+                      Email<span className="text-red-500">*</span>
+                    </h4>
+                    <Controller
+                      control={control}
                       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
+                      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>
 
-              <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">
+                      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.";
+                  <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.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 < 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.";
+                          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" : ""}`}
+                          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>
+                    {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>
+                  <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
+                    <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>
+                    {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 className="flex items-center justify-between py-2">
+                    <Button variant="primary" type="submit" loading={isLoading}>
+                      {isLoading ? "Saving..." : "Save changes"}
+                    </Button>
+                  </div>
+                </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>
-        </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>
     </>
   );
diff --git a/web/pages/profile/preferences/theme.tsx b/web/pages/profile/preferences/theme.tsx
index 51386bc29d6..0885ff6c853 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 1c6f792eb79..7ecc0e77087 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 0f09764acca..a2ae1d6808e 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 7ef99370f5a..6dc49bc80bd 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 6dc49bc80bd..a2b5ebe3db4 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 58b79ac3eb3..7a372c5d8de 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 00000000000..c4c43fa4bf6
--- /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 7cfa6aa8563..407b5cd794e 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 e2a54c05f6e..ed6bac324d7 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 dcdff6685a9..4ef5708c867 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 9ce00a03c59..306c2fdeb9a 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 97884bccc1f..91e321b05f7 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 2f7f6ffae87..a0eb6c70f8c 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 8003f15e32d..90319a90b90 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 a3c083b027c..0c3ec89250b 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 19f83e40b99..31acb84718c 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 d09e8def49a..f7ba07b75c4 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 4a18011d154..ee677fe91e1 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 59013a3e3e2..c2e12dc3c2c 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 09423e6dd71..a04a4326010 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 f933d4dfac9..30bc5b2a961 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 4d54dd9659a..a6ad67f05e0 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 b356b5adb3c..107c1f5281c 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 71173c2c2e6..d4cb28e6fa9 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 7ecc0e77087..f264c175da2 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       |  95 ++++---
 .../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, 466 insertions(+), 236 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 c54943f901d..1f4a35dd470 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 00000000000..26ae15285d0
--- /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 64b1322674a..36d5e03151c 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 203ac4938b7..24cbe990843 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 15c797833ac..3746111e599 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 de6c1ddae7b..f11321944e2 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 1a25c563e78..7cbda05e1e7 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 1b9f27828f7..5fdb58ef0a6 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 8f661a9e612..b1441cff7d1 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 1ade285a99f..ceec7b219cc 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>
+      )}
+
+      <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)}
+          </>
         ) : (
-          <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="h-4 w-4">
+            <Spinner className="h-4 w-4" />
+          </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>
-    </>
+    </div>
   );
 });
diff --git a/web/components/issues/issue-layouts/list/blocks-list.tsx b/web/components/issues/issue-layouts/list/blocks-list.tsx
index 95ee6c7a849..d3c8d14061e 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 dd6c8da228e..373897fda6a 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);
+
+  const groups = getGroupByColumns(group_by as GroupByColumnTypes, project, label, projectState, member, true);
 
-  if (!list) return null;
+  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 2a97045fefb..840ea39f9cb 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>
-
-                {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 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>
 
-              {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 e63b01dfb00..5d45157cc41 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 e99b1785008..1ac815cede4 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 83ec363b9da..0c3367dc1bb 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 57dff280ee5..5b6ce818770 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 32f593e1e3d..63d8d28aea6 100644
--- a/apiserver/plane/app/views/cycle.py
+++ b/apiserver/plane/app/views/cycle.py
@@ -20,6 +20,7 @@
 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 @@ def list(self, request, slug, project_id):
                     "labels": label_distribution,
                     "completion_chart": {},
                 }
+
                 if data[0]["start_date"] and data[0]["end_date"]:
                     data[0]["distribution"][
                         "completion_chart"
@@ -840,10 +842,230 @@ def post(self, request, slug, project_id, cycle_id):
                 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 00000000000..074e20a16b8
--- /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 5251c68ec9f..d802dbc1e09 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 12cbab4c61a..5d715385a0e 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 5dd2923a8e8..37aba932a59 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 299c710084a..6966779b542 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>
-                                </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>
+                        {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>
-                            </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 c5674cee974..98262b50430 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 fcbd817b6a1..82c00fc124f 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 5fdf0df82d4..ff5dba9dd2e 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 b2425757cc3..ee2e6d84dde 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 ff65d0eb99f..1dae25bd402 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    | 271 ++++++++--------
 .../select-snooze-till-modal.tsx              |  13 +-
 4 files changed, 359 insertions(+), 234 deletions(-)

diff --git a/web/components/notifications/notification-card.tsx b/web/components/notifications/notification-card.tsx
index 7a372c5d8de..e709bbca3bc 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>
-          </div>
-        ) : (
-          <div className="w-full break-words text-sm">
-            <span className="semi-bold">{notification.message}</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>
 
         <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 39bf0e8fb5a..c8ba54ab41e 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 4b55ea4cb21..47fdae6ef9c 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);
-
-          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}
-                  />
+      <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}
+              />
 
-                  {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}
+              {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>
-                        {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}
-                        />
+                        <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 ab3497bb8c5..2ad4b0ef228 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              | 148 +++++++++++++-----
 web/store/user/index.ts                       |   2 +
 80 files changed, 1274 insertions(+), 505 deletions(-)

diff --git a/apiserver/plane/app/views/auth_extended.py b/apiserver/plane/app/views/auth_extended.py
index 501f4765788..29cb43e3865 100644
--- a/apiserver/plane/app/views/auth_extended.py
+++ b/apiserver/plane/app/views/auth_extended.py
@@ -401,8 +401,8 @@ def post(self, request):
                 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 @@ def post(self, request):
                     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 @@ def post(self, request):
                     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 a41200d61a0..c2b3e0b7e4e 100644
--- a/apiserver/plane/app/views/authentication.py
+++ b/apiserver/plane/app/views/authentication.py
@@ -274,8 +274,8 @@ def post(self, request):
             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 @@ def post(self, request):
                     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 de90e433740..8152fb0eee4 100644
--- a/apiserver/plane/app/views/oauth.py
+++ b/apiserver/plane/app/views/oauth.py
@@ -296,7 +296,7 @@ def post(self, request):
                 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 @@ def post(self, request):
                 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 d7a5952984f..1ea5ca79217 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 fe20d5b1076..98719df63a1 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 c92cd4bd457..62f63caea69 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 6e0ae374526..55dbe86e246 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 db14f0ccb50..b49adabbb5c 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 da9d7d79a96..8eeb5e99f96 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 7764b627edf..1b54ef9ebc1 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 bad7df0e557..375c1530154 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 72548024175..98392cd0ea8 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 32e067833e6..5dc0306ab45 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 865cc68a1ab..dfe2a878e69 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 7e17e55f1ee..e8f19d6a18d 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 6966779b542..27182247bb9 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 28116b32367..1984971d6ed 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 d8306ab40e9..6b85577f67d 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 82253af88bc..998ad268c5f 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 066f172ca1f..84c4bef1ea8 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 11d74af0e31..ffa17d3371e 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 2e0303a8ef4..92badf4b253 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 1f62c248c61..6db9323facc 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 0dae3c8bd45..c03e8650474 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 e89f606886c..bfecb993bad 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 36d5e03151c..83f72d8ea05 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 8880ca27846..51316343182 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 dd63f09aa98..8d1ce6d9c54 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 e0a0dbd5c67..4d851545e97 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 b0acd7237fb..3cba3c6cdb8 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 02a08731486..97d977acef2 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 f14018ed435..b491ebe3638 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 2727b4e3be4..636a828aee5 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 be0792caadc..8fa63e826eb 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 0852434c3db..7990386df91 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 3d83be010da..219942550c7 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 7232c8815f8..23e3e5ed425 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 947885f9afd..6b7ac1b3a97 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 7a372c5d8de..4332486c09a 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 39bf0e8fb5a..cf3a9fd3680 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 4b55ea4cb21..2b0689c346a 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 3315ff03572..c176ed58025 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 dc6e2db9652..561a428d626 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 6e1de15dd5d..c09a2a94cf5 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 23d34041383..ac4a3c1984d 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 c08e8f2435e..ad9342e3aef 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 93756d22a29..8f8622c18f1 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 b13f68fa43d..31cee45b346 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 736f21359c4..bba19b31c95 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 7d6a0c5e9c5..db0c284f234 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 7e04a6ebd09..791ac3672ca 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 f5efa7bc8e7..f46dee6b921 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 941bbbaa6a6..0827568ce50 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 175cf9bd473..6a27eccd512 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 39fb5c9741a..7c02ce8d070 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 34aec4db61e..22e69827efa 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 b12659a81b6..037cd483d90 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 4a041409279..12de3860872 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 8cb29eddeb3..b4f1644698e 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 acfe0648d75..a90ac9cdf81 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 9fa5962a3d9..76c9bbedf8b 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 e0ac68a2470..44da4291f66 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 4528882ddd6..87bb4c86882 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 615fe88fb31..774a231db75 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 64a9870add1..b6028d5417f 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 9c9b40c47d2..43375cb246b 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 b015b4cb652..b66d555fa64 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 1d9289037dc..ad551494b12 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 67f1b1034e4..a0bf0b5bbe8 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 864c87f27aa..64d323cf0de 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 f42bf519474..e8c1b7899a4 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 f62768927d1..b05616abc02 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 10cda05e124..b0ab2928523 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 1a185e402ae..6e9d8d924a8 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 8d3c4cd2814..07fa86045ec 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 9854ec5bb2f..c4258f39e4a 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 1d8c3e77412..26ced201012 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 5a5911fcaee..99886156dcc 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 89e279c402e..744ad44fbab 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,24 +71,59 @@ 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) => {
+  /**
+   * @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: this.trackElement ?? "",
+      element: payload.element ?? this.trackElement,
     });
+    posthog?.capture(eventName, eventPayload);
+    this.setTrackElement(undefined);
   };
 
   /**
@@ -86,17 +131,14 @@ export class EventTrackerStore implements IEventTrackerStore {
    * @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 b07764a05ca..15f9e57728e 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 00000000000..09b90b03bed
--- /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 9cac734283e..f19adcdc5c2 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 898044c60aa..e041b28d8f3 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 714d8b5558e..7db6df11359 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   | 169 +++++++++---------
 .../modules/module-peek-overview.tsx          |   2 +-
 web/components/modules/sidebar.tsx            |  27 ++-
 16 files changed, 319 insertions(+), 253 deletions(-)

diff --git a/packages/ui/src/breadcrumbs/breadcrumbs.tsx b/packages/ui/src/breadcrumbs/breadcrumbs.tsx
index a2ae1d6808e..9a3b69bb8c2 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 b7acff358ab..fbfb46b50b5 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 bad7df0e557..366688dacd5 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 72548024175..43a6323ad7b 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 299c710084a..1a7bf9c58bd 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 44f4f944de4..05030c5001a 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 a4bf963ab26..496fabecd46 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 6287223b075..d51c0f43233 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 91e05db462b..9ad34678a72 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 81e2d2d76be..c645c6318c8 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 fdb033a214a..b70a4614f55 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 34b1a6ef8da..f6dd7fd3cae 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 3d83be010da..3275f1fe08f 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 7232c8815f8..81d0a6d6ce4 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>
+
+          <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>
+              )}
+            </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>
+            <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>
                 ) : (
-                  <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>
+                  <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>
+                  </>
                 )}
-              </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>
+                <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 f82d436bcde..81614b61ba7 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 947885f9afd..0109d7c6c54 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 0e7a18fa86b..176649e0287 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 8f8622c18f1..890cce27f9e 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 176649e0287..194bf8d903a 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 46bc04039d7..beb239d87ec 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 797fc9e393c..421a73a4a5d 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 e13be116b68..b65f04bb6d7 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 18ca5da9e86..c99f8af3298 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 00000000000..6dcfdc36f1a
--- /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 00000000000..68b20b89a15
--- /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 4592bfb5b1b..00000000000
--- 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 00000000000..950f3550c62
--- /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 0b7a4c452dc..00000000000
--- 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 00000000000..961cb2feeae
--- /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 f4a6080cd4f..6e53d5390ca 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 32b3caca0f0..a50b7748ad7 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 5693b38b8ee..e1fd02e3f94 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 00000000000..8936623c2d9
--- /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 00000000000..13f60c2b430
--- /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 a15f6f34d13..ffbc1cbfe85 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 b90caf8b7f1..8170affa466 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 7c3a34b53da..9dbeedeceff 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 00000000000..958985cf166
--- /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 137cc2607c2..84e7a19b5e8 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 d2c4448bbcc..ac1602346fe 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 ead6960868b..54a2cc597a7 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 7673da88e78..c8576436e9e 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 dddccda5a75..384869a407c 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 8b1d7223725..8a068a7c50d 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 00000000000..77b373ac8ff
--- /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 8f8788787cf..bdf8ca571e5 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 6e31215c1c5..a27c4dded1f 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 00000000000..ceefb580915
--- /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 12de8e127ff..00000000000
--- 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 601205b5c8a..b0eb2be9cce 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 cf1d5d70097..18a767455c1 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 bfecb993bad..1ddd21ce2ae 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 72717f12b87..188d7b130d1 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 53948f71db5..a3f37df5c97 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 0d72f919241..28e88106031 100644
--- a/apiserver/plane/app/serializers/__init__.py
+++ b/apiserver/plane/app/serializers/__init__.py
@@ -68,6 +68,7 @@
     IssueRelationSerializer,
     RelatedIssueSerializer,
     IssuePublicSerializer,
+    IssueDetailSerializer,
 )
 
 from .module import (
diff --git a/apiserver/plane/app/serializers/issue.py b/apiserver/plane/app/serializers/issue.py
index be98bc312eb..90069bd41bd 100644
--- a/apiserver/plane/app/serializers/issue.py
+++ b/apiserver/plane/app/serializers/issue.py
@@ -586,7 +586,6 @@ class Meta:
             "id",
             "name",
             "state_id",
-            "description_html",
             "sort_order",
             "completed_at",
             "estimate_point",
@@ -618,6 +617,13 @@ def get_module_ids(self, obj):
         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 34bce8a0a91..c8845150a52 100644
--- a/apiserver/plane/app/views/issue.py
+++ b/apiserver/plane/app/views/issue.py
@@ -50,6 +50,7 @@
     CommentReactionSerializer,
     IssueRelationSerializer,
     RelatedIssueSerializer,
+    IssueDetailSerializer,
 )
 from plane.app.permissions import (
     ProjectEntityPermission,
@@ -267,7 +268,7 @@ def create(self, request, slug, project_id):
     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 ca6d7e0e7b6..b7601ef52ed 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 fefba171300..8c510193843 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 46605c7716f..43a7ca09360 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 8ee689daf33..36b2d874162 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 c645c6318c8..5c44a84d668 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 8d3a22682ec..3732f2598af 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 eabe5d5187d..c7b75340ba0 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 2e0303a8ef4..902ba7c2525 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 668d3538fd1..c78bbe942a0 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 b57e75bedae..8d05140b373 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 dc9f8c7c69a..95982ab25af 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 6be7843688d..64f43939e66 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 f264c175da2..505f3803c03 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 3501785a7fc..a322ddddc5b 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 c60ac0e7aee..06b9e70ff2f 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 d3ec64f1c1d..12903bb3d82 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 d1bdbc93545..2491e04c7f4 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 cac42e1f905..be57a4a91c5 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 fe7b8d177ba..30d764ab181 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 adc11b546da..4a5aeca0291 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 83595af60e4..e2a427db78c 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 b13f68fa43d..21b37236d90 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 79d378c59a4..4f5874e5f5e 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 03133d5df07..6b1a4793d2c 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 960d5253bdc..e998629c668 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 10cda05e124..b935ee238bd 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 b65f04bb6d7..1bc75ea8f85 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 950f3550c62..35bd6bc07fd 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 961cb2feeae..4cb6bc10e60 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 13f60c2b430..c559e968854 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 c8576436e9e..2e9a8aca185 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 ceefb580915..b7611205966 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 b0eb2be9cce..95729a103a9 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 a3f37df5c97..8384c164ed3 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 5b6ce818770..ccf609b1fd5 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 18a50a5a84c..97231ea966f 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 12903bb3d82..6ad7cad835d 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 e211e7884a1..0ccbf260659 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 b05616abc02..9670c28335c 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 120314ed398..fb4f8441d43 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 64bd220589a..762ce322a0d 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 8b31acdaf6d..7f7f4831a03 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 7a3e9bdadf8..b33bc12fbf4 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 3392493201f..8481abdf31b 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 2272b903061..71d70399dc6 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 7bd0920da7b..a85a8b998e5 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 93ad475f883..6bfe6726172 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 b04497011ca..50ede8674b9 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 0ad6f2ba924..42ce3fed5d4 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 8fa98db3059..0e5c2eb16f0 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 9228cf9bb4b..912fcfeb8fb 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 7d180d5ff5a..9ee7279cd41 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 26ae15285d0..24ae19fe79b 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 8335baf06b4..c825feb379b 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 840ea39f9cb..b07dc93e24c 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