From a048e513b7910c3d3db3cc53ae9bc29fdf38e174 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Thu, 28 Sep 2023 20:34:57 +0530
Subject: [PATCH 01/38] chore: workspace view display filters and properties ,
 code refactor (#2295)

* chore: spreadsheet view context

* chore: spreadsheet context provider

* chore: spreadsheet view context

* chore: display filters and properties added in workspace view and code refactor

* fix: build error fix

* chore: set sub-issue display option to false for global views

---------

Co-authored-by: gurusainath <gurusainath007@gmail.com>
---
 .../command-palette/command-pallette.tsx      |   1 -
 web/components/core/filters/filters-list.tsx  |  61 +--
 web/components/core/filters/index.ts          |   1 +
 .../core/filters/workspace-filters-list.tsx   | 366 ++++++++++++++++++
 web/components/core/views/issues-view.tsx     |   1 -
 .../core/views/spreadsheet-view/index.ts      |   1 -
 .../issue-column/issue-column.tsx             |   6 +-
 .../spreadsheet-view/spreadsheet-columns.tsx  | 274 -------------
 .../spreadsheet-view/spreadsheet-view.tsx     | 354 +++++++++++++++--
 .../state-column/state-column.tsx             |   2 +-
 .../my-issues/my-issues-select-filters.tsx    | 125 +-----
 .../workspace-views/workpace-view-issues.tsx  | 221 +++++++++++
 .../workspace-views/workspace-all-issue.tsx   | 234 +++++++++++
 .../workspace-assigned-issue.tsx              | 155 ++++++++
 .../workspace-created-issues.tsx              | 147 +++++++
 .../workspace-issue-view-option.tsx           |  49 ++-
 .../workspace-subscribed-issue.tsx            | 148 +++++++
 .../profile/profile-issues-view-options.tsx   |  81 ++--
 web/components/ui/dropdowns/custom-menu.tsx   |   8 +-
 web/components/ui/dropdowns/types.d.ts        |   1 +
 web/components/views/delete-view-modal.tsx    |  81 ++--
 web/components/views/form.tsx                 |  33 +-
 web/components/views/modal.tsx                | 153 +++-----
 web/components/views/select-filters.tsx       | 262 +------------
 web/components/views/single-view-item.tsx     |   3 +-
 .../views/delete-workspace-view-modal.tsx     | 141 +++++++
 web/components/workspace/views/form.tsx       | 213 ++++++++++
 .../workspace/views/global-select-filters.tsx | 301 ++++++++++++++
 web/components/workspace/views/modal.tsx      | 155 ++++++++
 web/constants/fetch-keys.ts                   |  13 +-
 web/contexts/profile-issues-context.tsx       |   1 +
 web/contexts/workspace-view-context.tsx       | 235 +++++++++++
 web/hooks/my-issues/use-my-issues-filter.tsx  |   2 +-
 web/hooks/use-workspace-view.tsx              |  11 +
 web/hooks/use-worskpace-issue-filter.tsx      | 113 ------
 .../project-authorization-wrapper.tsx         |   5 +-
 .../workspace-authorization-wrapper.tsx       |  81 ++--
 .../projects/[projectId]/views/index.tsx      |   2 -
 .../workspace-views/[workspaceViewId].tsx     | 338 ++--------------
 .../workspace-views/all-issues.tsx            | 306 ++-------------
 .../workspace-views/assigned.tsx              | 221 ++---------
 .../workspace-views/created.tsx               | 221 ++---------
 .../[workspaceSlug]/workspace-views/index.tsx |  26 +-
 .../workspace-views/subscribed.tsx            | 221 ++---------
 web/services/workspace.service.ts             |  18 +-
 web/types/view-props.d.ts                     |  62 ++-
 web/types/views.d.ts                          |  12 +-
 web/types/workspace-views.d.ts                |  22 ++
 48 files changed, 3119 insertions(+), 2369 deletions(-)
 create mode 100644 web/components/core/filters/workspace-filters-list.tsx
 delete mode 100644 web/components/core/views/spreadsheet-view/spreadsheet-columns.tsx
 create mode 100644 web/components/issues/workspace-views/workpace-view-issues.tsx
 create mode 100644 web/components/issues/workspace-views/workspace-all-issue.tsx
 create mode 100644 web/components/issues/workspace-views/workspace-assigned-issue.tsx
 create mode 100644 web/components/issues/workspace-views/workspace-created-issues.tsx
 create mode 100644 web/components/issues/workspace-views/workspace-subscribed-issue.tsx
 create mode 100644 web/components/workspace/views/delete-workspace-view-modal.tsx
 create mode 100644 web/components/workspace/views/form.tsx
 create mode 100644 web/components/workspace/views/global-select-filters.tsx
 create mode 100644 web/components/workspace/views/modal.tsx
 create mode 100644 web/contexts/workspace-view-context.tsx
 create mode 100644 web/hooks/use-workspace-view.tsx
 delete mode 100644 web/hooks/use-worskpace-issue-filter.tsx
 create mode 100644 web/types/workspace-views.d.ts

diff --git a/web/components/command-palette/command-pallette.tsx b/web/components/command-palette/command-pallette.tsx
index 8e17cbafd..f183de9c6 100644
--- a/web/components/command-palette/command-pallette.tsx
+++ b/web/components/command-palette/command-pallette.tsx
@@ -161,7 +161,6 @@ export const CommandPalette: React.FC = observer(() => {
           />
           <CreateUpdateViewModal
             handleClose={() => setIsCreateViewModalOpen(false)}
-            viewType="project"
             isOpen={isCreateViewModalOpen}
             user={user}
           />
diff --git a/web/components/core/filters/filters-list.tsx b/web/components/core/filters/filters-list.tsx
index 50493c64f..697844a15 100644
--- a/web/components/core/filters/filters-list.tsx
+++ b/web/components/core/filters/filters-list.tsx
@@ -10,14 +10,7 @@ import { replaceUnderscoreIfSnakeCase } from "helpers/string.helper";
 // helpers
 import { renderShortDateWithYearFormat } from "helpers/date-time.helper";
 // types
-import {
-  IIssueFilterOptions,
-  IIssueLabels,
-  IProject,
-  IState,
-  IUserLite,
-  TStateGroups,
-} from "types";
+import { IIssueFilterOptions, IIssueLabels, IState, IUserLite, TStateGroups } from "types";
 // constants
 import { STATE_GROUP_COLORS } from "constants/state";
 
@@ -27,9 +20,7 @@ type Props = {
   clearAllFilters: (...args: any) => void;
   labels: IIssueLabels[] | undefined;
   members: IUserLite[] | undefined;
-  states?: IState[] | undefined;
-  stateGroup?: string[] | undefined;
-  project?: IProject[] | undefined;
+  states: IState[] | undefined;
 };
 
 export const FiltersList: React.FC<Props> = ({
@@ -39,7 +30,6 @@ export const FiltersList: React.FC<Props> = ({
   labels,
   members,
   states,
-  project,
 }) => {
   if (!filters) return <></>;
 
@@ -165,29 +155,6 @@ export const FiltersList: React.FC<Props> = ({
                     : key === "assignees"
                     ? filters.assignees?.map((memberId: string) => {
                         const member = members?.find((m) => m.id === memberId);
-                        return (
-                          <div
-                            key={memberId}
-                            className="inline-flex items-center gap-x-1 rounded-full bg-custom-background-90 px-1"
-                          >
-                            <Avatar user={member} />
-                            <span>{member?.display_name}</span>
-                            <span
-                              className="cursor-pointer"
-                              onClick={() =>
-                                setFilters({
-                                  assignees: filters.assignees?.filter((p: any) => p !== memberId),
-                                })
-                              }
-                            >
-                              <XMarkIcon className="h-3 w-3" />
-                            </span>
-                          </div>
-                        );
-                      })
-                    : key === "subscriber"
-                    ? filters.subscriber?.map((memberId: string) => {
-                        const member = members?.find((m) => m.id === memberId);
 
                         return (
                           <div
@@ -333,30 +300,6 @@ export const FiltersList: React.FC<Props> = ({
                           </div>
                         );
                       })
-                    : key === "project"
-                    ? filters.project?.map((projectId) => {
-                        const currentProject = project?.find((p) => p.id === projectId);
-                        console.log("currentProject", currentProject);
-                        console.log("currentProject", projectId);
-                        return (
-                          <p
-                            key={currentProject?.id}
-                            className="inline-flex items-center gap-x-1 rounded-full px-2 py-0.5 capitalize"
-                          >
-                            <span>{currentProject?.name}</span>
-                            <span
-                              className="cursor-pointer"
-                              onClick={() =>
-                                setFilters({
-                                  project: filters.project?.filter((p) => p !== projectId),
-                                })
-                              }
-                            >
-                              <XMarkIcon className="h-3 w-3" />
-                            </span>
-                          </p>
-                        );
-                      })
                     : (filters[key] as any)?.join(", ")}
                   <button
                     type="button"
diff --git a/web/components/core/filters/index.ts b/web/components/core/filters/index.ts
index d6455151e..558db6841 100644
--- a/web/components/core/filters/index.ts
+++ b/web/components/core/filters/index.ts
@@ -1,4 +1,5 @@
 export * from "./date-filter-modal";
 export * from "./date-filter-select";
 export * from "./filters-list";
+export * from "./workspace-filters-list";
 export * from "./issues-view-filter";
diff --git a/web/components/core/filters/workspace-filters-list.tsx b/web/components/core/filters/workspace-filters-list.tsx
new file mode 100644
index 000000000..dafab6e9d
--- /dev/null
+++ b/web/components/core/filters/workspace-filters-list.tsx
@@ -0,0 +1,366 @@
+import React from "react";
+
+// icons
+import { XMarkIcon } from "@heroicons/react/24/outline";
+import { PriorityIcon, StateGroupIcon } from "components/icons";
+// ui
+import { Avatar } from "components/ui";
+// helpers
+import { replaceUnderscoreIfSnakeCase } from "helpers/string.helper";
+// helpers
+import { renderShortDateWithYearFormat } from "helpers/date-time.helper";
+// types
+import {
+  IIssueLabels,
+  IProject,
+  IUserLite,
+  IWorkspaceIssueFilterOptions,
+  TStateGroups,
+} from "types";
+// constants
+import { STATE_GROUP_COLORS } from "constants/state";
+
+type Props = {
+  filters: Partial<IWorkspaceIssueFilterOptions>;
+  setFilters: (updatedFilter: Partial<IWorkspaceIssueFilterOptions>) => void;
+  clearAllFilters: (...args: any) => void;
+  labels: IIssueLabels[] | undefined;
+  members: IUserLite[] | undefined;
+  stateGroup: string[] | undefined;
+  project?: IProject[] | undefined;
+};
+
+export const WorkspaceFiltersList: React.FC<Props> = ({
+  filters,
+  setFilters,
+  clearAllFilters,
+  labels,
+  members,
+  stateGroup,
+  project,
+}) => {
+  if (!filters) return <></>;
+
+  const nullFilters = Object.keys(filters).filter(
+    (key) => filters[key as keyof IWorkspaceIssueFilterOptions] === null
+  );
+
+  return (
+    <div className="flex flex-1 flex-wrap items-center gap-2 text-xs">
+      {Object.keys(filters).map((filterKey) => {
+        const key = filterKey as keyof typeof filters;
+
+        if (filters[key] === null || (filters[key]?.length ?? 0) <= 0) return null;
+
+        return (
+          <div
+            key={key}
+            className="flex items-center gap-x-2 rounded-full border border-custom-border-200 bg-custom-background-80 px-2 py-1"
+          >
+            <span className="capitalize text-custom-text-200">
+              {key === "target_date" ? "Due Date" : replaceUnderscoreIfSnakeCase(key)}:
+            </span>
+            {filters[key] === null || (filters[key]?.length ?? 0) <= 0 ? (
+              <span className="inline-flex items-center px-2 py-0.5 font-medium">None</span>
+            ) : Array.isArray(filters[key]) ? (
+              <div className="space-x-2">
+                <div className="flex flex-wrap items-center gap-1">
+                  {key === "state_group"
+                    ? filters.state_group?.map((stateGroup) => {
+                        const group = stateGroup as TStateGroups;
+
+                        return (
+                          <p
+                            key={group}
+                            className="inline-flex items-center gap-x-1 rounded-full px-2 py-0.5 capitalize"
+                            style={{
+                              color: STATE_GROUP_COLORS[group],
+                              backgroundColor: `${STATE_GROUP_COLORS[group]}20`,
+                            }}
+                          >
+                            <span>
+                              <StateGroupIcon stateGroup={group} color={undefined} />
+                            </span>
+                            <span>{group}</span>
+                            <span
+                              className="cursor-pointer"
+                              onClick={() =>
+                                setFilters({
+                                  state_group: filters.state_group?.filter((g) => g !== group),
+                                })
+                              }
+                            >
+                              <XMarkIcon className="h-3 w-3" />
+                            </span>
+                          </p>
+                        );
+                      })
+                    : key === "priority"
+                    ? filters.priority?.map((priority: any) => (
+                        <p
+                          key={priority}
+                          className={`inline-flex items-center gap-x-1 rounded-full px-2 py-0.5 capitalize ${
+                            priority === "urgent"
+                              ? "bg-red-500/20 text-red-500"
+                              : priority === "high"
+                              ? "bg-orange-500/20 text-orange-500"
+                              : priority === "medium"
+                              ? "bg-yellow-500/20 text-yellow-500"
+                              : priority === "low"
+                              ? "bg-green-500/20 text-green-500"
+                              : "bg-custom-background-90 text-custom-text-200"
+                          }`}
+                        >
+                          <span>
+                            <PriorityIcon priority={priority} />
+                          </span>
+                          <span>{priority === "null" ? "None" : priority}</span>
+                          <span
+                            className="cursor-pointer"
+                            onClick={() =>
+                              setFilters({
+                                priority: filters.priority?.filter((p: any) => p !== priority),
+                              })
+                            }
+                          >
+                            <XMarkIcon className="h-3 w-3" />
+                          </span>
+                        </p>
+                      ))
+                    : key === "assignees"
+                    ? filters.assignees?.map((memberId: string) => {
+                        const member = members?.find((m) => m.id === memberId);
+                        return (
+                          <div
+                            key={memberId}
+                            className="inline-flex items-center gap-x-1 rounded-full bg-custom-background-90 px-1"
+                          >
+                            <Avatar user={member} />
+                            <span>{member?.display_name}</span>
+                            <span
+                              className="cursor-pointer"
+                              onClick={() =>
+                                setFilters({
+                                  assignees: filters.assignees?.filter((p: any) => p !== memberId),
+                                })
+                              }
+                            >
+                              <XMarkIcon className="h-3 w-3" />
+                            </span>
+                          </div>
+                        );
+                      })
+                    : key === "subscriber"
+                    ? filters.subscriber?.map((memberId: string) => {
+                        const member = members?.find((m) => m.id === memberId);
+
+                        return (
+                          <div
+                            key={memberId}
+                            className="inline-flex items-center gap-x-1 rounded-full bg-custom-background-90 px-1"
+                          >
+                            <Avatar user={member} />
+                            <span>{member?.display_name}</span>
+                            <span
+                              className="cursor-pointer"
+                              onClick={() =>
+                                setFilters({
+                                  assignees: filters.assignees?.filter((p: any) => p !== memberId),
+                                })
+                              }
+                            >
+                              <XMarkIcon className="h-3 w-3" />
+                            </span>
+                          </div>
+                        );
+                      })
+                    : key === "created_by"
+                    ? filters.created_by?.map((memberId: string) => {
+                        const member = members?.find((m) => m.id === memberId);
+
+                        return (
+                          <div
+                            key={`${memberId}-${key}`}
+                            className="inline-flex items-center gap-x-1 rounded-full bg-custom-background-90 px-1 capitalize"
+                          >
+                            <Avatar user={member} />
+                            <span>{member?.display_name}</span>
+                            <span
+                              className="cursor-pointer"
+                              onClick={() =>
+                                setFilters({
+                                  created_by: filters.created_by?.filter(
+                                    (p: any) => p !== memberId
+                                  ),
+                                })
+                              }
+                            >
+                              <XMarkIcon className="h-3 w-3" />
+                            </span>
+                          </div>
+                        );
+                      })
+                    : key === "labels"
+                    ? filters.labels?.map((labelId: string) => {
+                        const label = labels?.find((l) => l.id === labelId);
+
+                        if (!label) return null;
+                        const color = label.color !== "" ? label.color : "#0f172a";
+                        return (
+                          <div
+                            className="inline-flex items-center gap-x-1 rounded-full px-2 py-0.5"
+                            style={{
+                              color: color,
+                              backgroundColor: `${color}20`, // add 20% opacity
+                            }}
+                            key={labelId}
+                          >
+                            <div
+                              className="h-1.5 w-1.5 rounded-full"
+                              style={{
+                                backgroundColor: color,
+                              }}
+                            />
+                            <span>{label.name}</span>
+                            <span
+                              className="cursor-pointer"
+                              onClick={() =>
+                                setFilters({
+                                  labels: filters.labels?.filter((l: any) => l !== labelId),
+                                })
+                              }
+                            >
+                              <XMarkIcon
+                                className="h-3 w-3"
+                                style={{
+                                  color: color,
+                                }}
+                              />
+                            </span>
+                          </div>
+                        );
+                      })
+                    : key === "start_date"
+                    ? filters.start_date?.map((date: string) => {
+                        if (filters.start_date && filters.start_date.length <= 0) return null;
+
+                        const splitDate = date.split(";");
+
+                        return (
+                          <div
+                            key={date}
+                            className="inline-flex items-center gap-x-1 rounded-full border border-custom-border-200 bg-custom-background-100 px-1 py-0.5"
+                          >
+                            <div className="h-1.5 w-1.5 rounded-full" />
+                            <span className="capitalize">
+                              {splitDate[1]} {renderShortDateWithYearFormat(splitDate[0])}
+                            </span>
+                            <span
+                              className="cursor-pointer"
+                              onClick={() =>
+                                setFilters({
+                                  start_date: filters.start_date?.filter((d: any) => d !== date),
+                                })
+                              }
+                            >
+                              <XMarkIcon className="h-3 w-3" />
+                            </span>
+                          </div>
+                        );
+                      })
+                    : key === "target_date"
+                    ? filters.target_date?.map((date: string) => {
+                        if (filters.target_date && filters.target_date.length <= 0) return null;
+
+                        const splitDate = date.split(";");
+
+                        return (
+                          <div
+                            key={date}
+                            className="inline-flex items-center gap-x-1 rounded-full border border-custom-border-200 bg-custom-background-100 px-1 py-0.5"
+                          >
+                            <div className="h-1.5 w-1.5 rounded-full" />
+                            <span className="capitalize">
+                              {splitDate[1]} {renderShortDateWithYearFormat(splitDate[0])}
+                            </span>
+                            <span
+                              className="cursor-pointer"
+                              onClick={() =>
+                                setFilters({
+                                  target_date: filters.target_date?.filter((d: any) => d !== date),
+                                })
+                              }
+                            >
+                              <XMarkIcon className="h-3 w-3" />
+                            </span>
+                          </div>
+                        );
+                      })
+                    : key === "project"
+                    ? filters.project?.map((projectId) => {
+                        const currentProject = project?.find((p) => p.id === projectId);
+                        console.log("currentProject", currentProject);
+                        console.log("currentProject", projectId);
+                        return (
+                          <p
+                            key={currentProject?.id}
+                            className="inline-flex items-center gap-x-1 rounded-full px-2 py-0.5 capitalize"
+                          >
+                            <span>{currentProject?.name}</span>
+                            <span
+                              className="cursor-pointer"
+                              onClick={() =>
+                                setFilters({
+                                  project: filters.project?.filter((p) => p !== projectId),
+                                })
+                              }
+                            >
+                              <XMarkIcon className="h-3 w-3" />
+                            </span>
+                          </p>
+                        );
+                      })
+                    : (filters[key] as any)?.join(", ")}
+                  <button
+                    type="button"
+                    onClick={() =>
+                      setFilters({
+                        [key]: null,
+                      })
+                    }
+                  >
+                    <XMarkIcon className="h-3 w-3" />
+                  </button>
+                </div>
+              </div>
+            ) : (
+              <div className="flex items-center gap-x-1 capitalize">
+                {filters[key as keyof typeof filters]}
+                <button
+                  type="button"
+                  onClick={() =>
+                    setFilters({
+                      [key]: null,
+                    })
+                  }
+                >
+                  <XMarkIcon className="h-3 w-3" />
+                </button>
+              </div>
+            )}
+          </div>
+        );
+      })}
+      {Object.keys(filters).length > 0 && nullFilters.length !== Object.keys(filters).length && (
+        <button
+          type="button"
+          onClick={clearAllFilters}
+          className="flex items-center gap-x-1 rounded-full border border-custom-border-200 bg-custom-background-80 px-3 py-1.5 text-xs"
+        >
+          <span>Clear all filters</span>
+          <XMarkIcon className="h-3 w-3" />
+        </button>
+      )}
+    </div>
+  );
+};
diff --git a/web/components/core/views/issues-view.tsx b/web/components/core/views/issues-view.tsx
index 62bcd5e58..3c123c2ac 100644
--- a/web/components/core/views/issues-view.tsx
+++ b/web/components/core/views/issues-view.tsx
@@ -483,7 +483,6 @@ export const IssuesView: React.FC<Props> = ({
       <CreateUpdateViewModal
         isOpen={createViewModal !== null}
         handleClose={() => setCreateViewModal(null)}
-        viewType="project"
         preLoadedData={createViewModal}
         user={user}
       />
diff --git a/web/components/core/views/spreadsheet-view/index.ts b/web/components/core/views/spreadsheet-view/index.ts
index e72819dad..9bf8ed1b0 100644
--- a/web/components/core/views/spreadsheet-view/index.ts
+++ b/web/components/core/views/spreadsheet-view/index.ts
@@ -10,5 +10,4 @@ export * from "./state-column";
 export * from "./updated-on-column";
 export * from "./spreadsheet-view";
 export * from "./issue-column/issue-column";
-export * from "./spreadsheet-columns";
 export * from "./issue-column/spreadsheet-issue-column";
diff --git a/web/components/core/views/spreadsheet-view/issue-column/issue-column.tsx b/web/components/core/views/spreadsheet-view/issue-column/issue-column.tsx
index bb36c0e60..1afcda5e1 100644
--- a/web/components/core/views/spreadsheet-view/issue-column/issue-column.tsx
+++ b/web/components/core/views/spreadsheet-view/issue-column/issue-column.tsx
@@ -82,10 +82,10 @@ export const IssueColumn: React.FC<Props> = ({
   const isNotAllowed = userAuth.isGuest || userAuth.isViewer;
 
   return (
-    <div className="group flex items-center w-[28rem] text-sm h-11 sticky top-0 bg-custom-background-100 truncate border-b border-r border-custom-border-100">
+    <div className="group flex items-center w-[28rem] text-sm h-11 sticky top-0 bg-custom-background-100 truncate border-b border-r border-custom-border-200">
       <div
-        className="flex gap-1.5 px-4 pr-0 py-2.5 items-center"
-        style={issue.parent ? { paddingLeft } : {}}
+        className="flex gap-1.5 px-4 pr-0 py-2.5 items-center w-24"
+        style={issue.parent && nestingLevel !== 0 ? { paddingLeft } : {}}
       >
         <div className="relative flex items-center cursor-pointer text-xs text-center hover:text-custom-text-100">
           {properties.key && (
diff --git a/web/components/core/views/spreadsheet-view/spreadsheet-columns.tsx b/web/components/core/views/spreadsheet-view/spreadsheet-columns.tsx
deleted file mode 100644
index f52f1ab38..000000000
--- a/web/components/core/views/spreadsheet-view/spreadsheet-columns.tsx
+++ /dev/null
@@ -1,274 +0,0 @@
-import React from "react";
-// hooks
-import useSpreadsheetIssuesView from "hooks/use-spreadsheet-issues-view";
-import useLocalStorage from "hooks/use-local-storage";
-// component
-import { CustomMenu, Icon } from "components/ui";
-// icon
-import { CheckIcon, ChevronDownIcon } from "@heroicons/react/24/outline";
-// types
-import { TIssueOrderByOptions } from "types";
-
-type Props = {
-  columnData: any;
-  gridTemplateColumns: string;
-};
-
-export const SpreadsheetColumns: React.FC<Props> = ({ columnData, gridTemplateColumns }) => {
-  const { storedValue: selectedMenuItem, setValue: setSelectedMenuItem } = useLocalStorage(
-    "spreadsheetViewSorting",
-    ""
-  );
-  const { storedValue: activeSortingProperty, setValue: setActiveSortingProperty } =
-    useLocalStorage("spreadsheetViewActiveSortingProperty", "");
-
-  const { displayFilters, setDisplayFilters } = useSpreadsheetIssuesView();
-
-  const handleOrderBy = (order: TIssueOrderByOptions, itemKey: string) => {
-    setDisplayFilters({ order_by: order });
-    setSelectedMenuItem(`${order}_${itemKey}`);
-    setActiveSortingProperty(order === "-created_at" ? "" : itemKey);
-  };
-
-  return (
-    <div
-      className={`grid auto-rows-[minmax(36px,1fr)] w-full min-w-max`}
-      style={{ gridTemplateColumns }}
-    >
-      {columnData.map((col: any) => {
-        if (col.isActive) {
-          return (
-            <div
-              className={`bg-custom-background-90 w-full ${
-                col.propertyName === "title"
-                  ? "sticky left-0 z-20 bg-custom-background-90 pl-24"
-                  : ""
-              }`}
-            >
-              {col.propertyName === "title" ? (
-                <div
-                  className={`flex items-center justify-start gap-1.5 cursor-default text-sm text-custom-text-200 text-current w-full py-2.5 px-2`}
-                >
-                  {col.colName}
-                </div>
-              ) : (
-                <CustomMenu
-                  className="!w-full"
-                  customButton={
-                    <div
-                      className={`relative group flex items-center justify-start gap-1.5 cursor-pointer text-sm text-custom-text-200 hover:text-custom-text-100 w-full py-3 px-2 ${
-                        activeSortingProperty === col.propertyName ? "bg-custom-background-80" : ""
-                      }`}
-                    >
-                      {activeSortingProperty === col.propertyName && (
-                        <div className="absolute top-1 right-1.5">
-                          <Icon
-                            iconName="filter_list"
-                            className="flex items-center justify-center h-3.5 w-3.5 rounded-full bg-custom-primary text-xs text-white"
-                          />
-                        </div>
-                      )}
-
-                      {col.icon ? (
-                        <col.icon
-                          className={`text-custom-text-200 group-hover:text-custom-text-100 ${
-                            col.propertyName === "estimate" ? "-rotate-90" : ""
-                          }`}
-                          aria-hidden="true"
-                          height="14"
-                          width="14"
-                        />
-                      ) : col.propertyName === "priority" ? (
-                        <span className="text-sm material-symbols-rounded text-custom-text-200">
-                          signal_cellular_alt
-                        </span>
-                      ) : (
-                        ""
-                      )}
-
-                      {col.colName}
-                      <ChevronDownIcon className="h-3 w-3" aria-hidden="true" />
-                    </div>
-                  }
-                  width="xl"
-                >
-                  <CustomMenu.MenuItem
-                    onClick={() => {
-                      handleOrderBy(col.ascendingOrder, col.propertyName);
-                    }}
-                  >
-                    <div
-                      className={`group flex gap-1.5 px-1 items-center justify-between ${
-                        selectedMenuItem === `${col.ascendingOrder}_${col.propertyName}`
-                          ? "text-custom-text-100"
-                          : "text-custom-text-200 hover:text-custom-text-100"
-                      }`}
-                    >
-                      <div className="flex gap-2 items-center">
-                        {col.propertyName === "assignee" || col.propertyName === "labels" ? (
-                          <>
-                            <span className="relative flex items-center h-6 w-6">
-                              <Icon
-                                iconName="east"
-                                className="absolute left-0 rotate-90 text-xs leading-3"
-                              />
-                              <Icon iconName="sort" className="absolute right-0 text-sm" />
-                            </span>
-                            <span>A</span>
-                            <Icon iconName="east" className="text-sm" />
-                            <span>Z</span>
-                          </>
-                        ) : col.propertyName === "due_date" ||
-                          col.propertyName === "created_on" ||
-                          col.propertyName === "updated_on" ? (
-                          <>
-                            <span className="relative flex items-center h-6 w-6">
-                              <Icon
-                                iconName="east"
-                                className="absolute left-0 rotate-90 text-xs leading-3"
-                              />
-                              <Icon iconName="sort" className="absolute right-0 text-sm" />
-                            </span>
-                            <span>New</span>
-                            <Icon iconName="east" className="text-sm" />
-                            <span>Old</span>
-                          </>
-                        ) : (
-                          <>
-                            <span className="relative flex items-center h-6 w-6">
-                              <Icon
-                                iconName="east"
-                                className="absolute left-0 rotate-90 text-xs leading-3"
-                              />
-                              <Icon iconName="sort" className="absolute right-0 text-sm" />
-                            </span>
-                            <span>First</span>
-                            <Icon iconName="east" className="text-sm" />
-                            <span>Last</span>
-                          </>
-                        )}
-                      </div>
-
-                      <CheckIcon
-                        className={`h-3.5 w-3.5 opacity-0 group-hover:opacity-100 ${
-                          selectedMenuItem === `${col.ascendingOrder}_${col.propertyName}`
-                            ? "opacity-100"
-                            : ""
-                        }`}
-                      />
-                    </div>
-                  </CustomMenu.MenuItem>
-                  <CustomMenu.MenuItem
-                    className={`mt-0.5 ${
-                      selectedMenuItem === `${col.descendingOrder}_${col.propertyName}`
-                        ? "bg-custom-background-80"
-                        : ""
-                    }`}
-                    key={col.property}
-                    onClick={() => {
-                      handleOrderBy(col.descendingOrder, col.propertyName);
-                    }}
-                  >
-                    <div
-                      className={`group flex gap-1.5 px-1 items-center justify-between ${
-                        selectedMenuItem === `${col.descendingOrder}_${col.propertyName}`
-                          ? "text-custom-text-100"
-                          : "text-custom-text-200 hover:text-custom-text-100"
-                      }`}
-                    >
-                      <div className="flex gap-2 items-center">
-                        {col.propertyName === "assignee" || col.propertyName === "labels" ? (
-                          <>
-                            <span className="relative flex items-center h-6 w-6">
-                              <Icon
-                                iconName="east"
-                                className="absolute left-0 -rotate-90 text-xs leading-3"
-                              />
-                              <Icon
-                                iconName="sort"
-                                className="absolute rotate-180 transform scale-x-[-1] right-0 text-sm"
-                              />
-                            </span>
-                            <span>Z</span>
-                            <Icon iconName="east" className="text-sm" />
-                            <span>A</span>
-                          </>
-                        ) : col.propertyName === "due_date" ? (
-                          <>
-                            <span className="relative flex items-center h-6 w-6">
-                              <Icon
-                                iconName="east"
-                                className="absolute left-0 -rotate-90 text-xs leading-3"
-                              />
-                              <Icon
-                                iconName="sort"
-                                className="absolute rotate-180 transform scale-x-[-1] right-0 text-sm"
-                              />
-                            </span>
-                            <span>Old</span>
-                            <Icon iconName="east" className="text-sm" />
-                            <span>New</span>
-                          </>
-                        ) : (
-                          <>
-                            <span className="relative flex items-center h-6 w-6">
-                              <Icon
-                                iconName="east"
-                                className="absolute left-0 -rotate-90 text-xs leading-3"
-                              />
-                              <Icon
-                                iconName="sort"
-                                className="absolute rotate-180 transform scale-x-[-1] right-0 text-sm"
-                              />
-                            </span>
-                            <span>Last</span>
-                            <Icon iconName="east" className="text-sm" />
-                            <span>First</span>
-                          </>
-                        )}
-                      </div>
-
-                      <CheckIcon
-                        className={`h-3.5 w-3.5 opacity-0 group-hover:opacity-100 ${
-                          selectedMenuItem === `${col.descendingOrder}_${col.propertyName}`
-                            ? "opacity-100"
-                            : ""
-                        }`}
-                      />
-                    </div>
-                  </CustomMenu.MenuItem>
-                  {selectedMenuItem &&
-                    selectedMenuItem !== "" &&
-                    displayFilters?.order_by !== "-created_at" &&
-                    selectedMenuItem.includes(col.propertyName) && (
-                      <CustomMenu.MenuItem
-                        className={`mt-0.5${
-                          selectedMenuItem === `-created_at_${col.propertyName}`
-                            ? "bg-custom-background-80"
-                            : ""
-                        }`}
-                        key={col.property}
-                        onClick={() => {
-                          handleOrderBy("-created_at", col.propertyName);
-                        }}
-                      >
-                        <div className={`group flex gap-1.5 px-1 items-center justify-between `}>
-                          <div className="flex gap-1.5 items-center">
-                            <span className="relative flex items-center justify-center h-6 w-6">
-                              <Icon iconName="ink_eraser" className="text-sm" />
-                            </span>
-
-                            <span>Clear sorting</span>
-                          </div>
-                        </div>
-                      </CustomMenu.MenuItem>
-                    )}
-                </CustomMenu>
-              )}
-            </div>
-          );
-        }
-      })}
-    </div>
-  );
-};
diff --git a/web/components/core/views/spreadsheet-view/spreadsheet-view.tsx b/web/components/core/views/spreadsheet-view/spreadsheet-view.tsx
index b17ce8d2d..088a4837d 100644
--- a/web/components/core/views/spreadsheet-view/spreadsheet-view.tsx
+++ b/web/components/core/views/spreadsheet-view/spreadsheet-view.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from "react";
+import React, { useCallback, useEffect, useRef, useState } from "react";
 
 // next
 import { useRouter } from "next/router";
@@ -19,13 +19,20 @@ import {
   SpreadsheetStateColumn,
   SpreadsheetUpdatedOnColumn,
 } from "components/core";
-import { CustomMenu, Spinner } from "components/ui";
+import { CustomMenu, Icon, Spinner } from "components/ui";
 import { IssuePeekOverview } from "components/issues";
 // hooks
 import useIssuesProperties from "hooks/use-issue-properties";
+import useLocalStorage from "hooks/use-local-storage";
+import { useWorkspaceView } from "hooks/use-workspace-view";
 // types
-import { ICurrentUserResponse, IIssue, ISubIssueResponse, UserAuth } from "types";
-import useWorkspaceIssuesFilters from "hooks/use-worskpace-issue-filter";
+import {
+  ICurrentUserResponse,
+  IIssue,
+  ISubIssueResponse,
+  TIssueOrderByOptions,
+  UserAuth,
+} from "types";
 import {
   CYCLE_DETAILS,
   CYCLE_ISSUES_WITH_PARAMS,
@@ -39,7 +46,7 @@ import {
 import useSpreadsheetIssuesView from "hooks/use-spreadsheet-issues-view";
 import projectIssuesServices from "services/issues.service";
 // icon
-import { PlusIcon } from "lucide-react";
+import { CheckIcon, ChevronDownIcon, PlusIcon } from "lucide-react";
 
 type Props = {
   spreadsheetIssues: IIssue[];
@@ -70,6 +77,10 @@ export const SpreadsheetView: React.FC<Props> = ({
 
   const [isInlineCreateIssueFormOpen, setIsInlineCreateIssueFormOpen] = useState(false);
 
+  const [isScrolled, setIsScrolled] = useState(false);
+
+  const containerRef = useRef<HTMLDivElement | null>(null);
+
   const router = useRouter();
   const { workspaceSlug, projectId, cycleId, moduleId, viewId, workspaceViewId } = router.query;
 
@@ -77,6 +88,13 @@ export const SpreadsheetView: React.FC<Props> = ({
 
   const [properties] = useIssuesProperties(workspaceSlug as string, projectId as string);
 
+  const { storedValue: selectedMenuItem, setValue: setSelectedMenuItem } = useLocalStorage(
+    "spreadsheetViewSorting",
+    ""
+  );
+  const { storedValue: activeSortingProperty, setValue: setActiveSortingProperty } =
+    useLocalStorage("spreadsheetViewActiveSortingProperty", "");
+
   const workspaceIssuesPath = [
     {
       params: {
@@ -111,12 +129,9 @@ export const SpreadsheetView: React.FC<Props> = ({
     router.pathname.includes(path.path)
   );
 
-  const { params: workspaceViewParams } = useWorkspaceIssuesFilters(
-    workspaceSlug?.toString(),
-    workspaceViewId?.toString()
-  );
+  const { params: workspaceViewParams, handleFilters } = useWorkspaceView();
 
-  const { params } = useSpreadsheetIssuesView();
+  const { params, displayFilters, setDisplayFilters } = useSpreadsheetIssuesView();
 
   const partialUpdateIssue = useCallback(
     (formData: Partial<IIssue>, issue: IIssue) => {
@@ -199,8 +214,8 @@ export const SpreadsheetView: React.FC<Props> = ({
       moduleId,
       viewId,
       workspaceViewId,
-      currentWorkspaceIssuePath,
       workspaceViewParams,
+      currentWorkspaceIssuePath,
       params,
       user,
     ]
@@ -208,10 +223,216 @@ export const SpreadsheetView: React.FC<Props> = ({
 
   const isNotAllowed = userAuth.isGuest || userAuth.isViewer;
 
-  const renderColumn = (header: string, Component: React.ComponentType<any>) => (
-    <div className="relative flex flex-col h-max w-full bg-custom-background-100 rounded-sm">
+  const handleOrderBy = (order: TIssueOrderByOptions, itemKey: string) => {
+    if (!workspaceViewId || !currentWorkspaceIssuePath)
+      handleFilters("display_filters", { order_by: order });
+    else setDisplayFilters({ order_by: order });
+    setSelectedMenuItem(`${order}_${itemKey}`);
+    setActiveSortingProperty(order === "-created_at" ? "" : itemKey);
+  };
+
+  const renderColumn = (
+    header: string,
+    propertyName: string,
+    Component: React.ComponentType<any>,
+    ascendingOrder: TIssueOrderByOptions,
+    descendingOrder: TIssueOrderByOptions
+  ) => (
+    <div className="relative flex flex-col h-max w-full bg-custom-background-100">
       <div className="flex items-center min-w-[9rem] px-4 py-2.5 text-sm font-medium z-[1] h-11 w-full sticky top-0 bg-custom-background-90 border border-l-0 border-custom-border-200">
-        {header}
+        <CustomMenu
+          customButtonClassName="!w-full"
+          className="!w-full"
+          position="left"
+          customButton={
+            <div
+              className={`relative group flex items-center justify-between gap-1.5 cursor-pointer text-sm text-custom-text-200 hover:text-custom-text-100 w-full py-3 px-2 ${
+                activeSortingProperty === propertyName ? "bg-custom-background-80" : ""
+              }`}
+            >
+              {activeSortingProperty === propertyName && (
+                <div className="absolute top-1 right-1.5">
+                  <Icon
+                    iconName="filter_list"
+                    className="flex items-center justify-center h-3.5 w-3.5 rounded-full bg-custom-primary text-xs text-white"
+                  />
+                </div>
+              )}
+
+              {header}
+              <ChevronDownIcon className="h-3 w-3" aria-hidden="true" />
+            </div>
+          }
+          width="xl"
+        >
+          <CustomMenu.MenuItem
+            onClick={() => {
+              handleOrderBy(ascendingOrder, propertyName);
+            }}
+          >
+            <div
+              className={`group flex gap-1.5 px-1 items-center justify-between ${
+                selectedMenuItem === `${ascendingOrder}_${propertyName}`
+                  ? "text-custom-text-100"
+                  : "text-custom-text-200 hover:text-custom-text-100"
+              }`}
+            >
+              <div className="flex gap-2 items-center">
+                {propertyName === "assignee" || propertyName === "labels" ? (
+                  <>
+                    <span className="relative flex items-center h-6 w-6">
+                      <Icon
+                        iconName="east"
+                        className="absolute left-0 rotate-90 text-xs leading-3"
+                      />
+                      <Icon iconName="sort" className="absolute right-0 text-sm" />
+                    </span>
+                    <span>A</span>
+                    <Icon iconName="east" className="text-sm" />
+                    <span>Z</span>
+                  </>
+                ) : propertyName === "due_date" ||
+                  propertyName === "created_on" ||
+                  propertyName === "updated_on" ? (
+                  <>
+                    <span className="relative flex items-center h-6 w-6">
+                      <Icon
+                        iconName="east"
+                        className="absolute left-0 rotate-90 text-xs leading-3"
+                      />
+                      <Icon iconName="sort" className="absolute right-0 text-sm" />
+                    </span>
+                    <span>New</span>
+                    <Icon iconName="east" className="text-sm" />
+                    <span>Old</span>
+                  </>
+                ) : (
+                  <>
+                    <span className="relative flex items-center h-6 w-6">
+                      <Icon
+                        iconName="east"
+                        className="absolute left-0 rotate-90 text-xs leading-3"
+                      />
+                      <Icon iconName="sort" className="absolute right-0 text-sm" />
+                    </span>
+                    <span>First</span>
+                    <Icon iconName="east" className="text-sm" />
+                    <span>Last</span>
+                  </>
+                )}
+              </div>
+
+              <CheckIcon
+                className={`h-3.5 w-3.5 opacity-0 group-hover:opacity-100 ${
+                  selectedMenuItem === `${ascendingOrder}_${propertyName}` ? "opacity-100" : ""
+                }`}
+              />
+            </div>
+          </CustomMenu.MenuItem>
+          <CustomMenu.MenuItem
+            className={`mt-0.5 ${
+              selectedMenuItem === `${descendingOrder}_${propertyName}`
+                ? "bg-custom-background-80"
+                : ""
+            }`}
+            key={propertyName}
+            onClick={() => {
+              handleOrderBy(descendingOrder, propertyName);
+            }}
+          >
+            <div
+              className={`group flex gap-1.5 px-1 items-center justify-between ${
+                selectedMenuItem === `${descendingOrder}_${propertyName}`
+                  ? "text-custom-text-100"
+                  : "text-custom-text-200 hover:text-custom-text-100"
+              }`}
+            >
+              <div className="flex gap-2 items-center">
+                {propertyName === "assignee" || propertyName === "labels" ? (
+                  <>
+                    <span className="relative flex items-center h-6 w-6">
+                      <Icon
+                        iconName="east"
+                        className="absolute left-0 -rotate-90 text-xs leading-3"
+                      />
+                      <Icon
+                        iconName="sort"
+                        className="absolute rotate-180 transform scale-x-[-1] right-0 text-sm"
+                      />
+                    </span>
+                    <span>Z</span>
+                    <Icon iconName="east" className="text-sm" />
+                    <span>A</span>
+                  </>
+                ) : propertyName === "due_date" ? (
+                  <>
+                    <span className="relative flex items-center h-6 w-6">
+                      <Icon
+                        iconName="east"
+                        className="absolute left-0 -rotate-90 text-xs leading-3"
+                      />
+                      <Icon
+                        iconName="sort"
+                        className="absolute rotate-180 transform scale-x-[-1] right-0 text-sm"
+                      />
+                    </span>
+                    <span>Old</span>
+                    <Icon iconName="east" className="text-sm" />
+                    <span>New</span>
+                  </>
+                ) : (
+                  <>
+                    <span className="relative flex items-center h-6 w-6">
+                      <Icon
+                        iconName="east"
+                        className="absolute left-0 -rotate-90 text-xs leading-3"
+                      />
+                      <Icon
+                        iconName="sort"
+                        className="absolute rotate-180 transform scale-x-[-1] right-0 text-sm"
+                      />
+                    </span>
+                    <span>Last</span>
+                    <Icon iconName="east" className="text-sm" />
+                    <span>First</span>
+                  </>
+                )}
+              </div>
+
+              <CheckIcon
+                className={`h-3.5 w-3.5 opacity-0 group-hover:opacity-100 ${
+                  selectedMenuItem === `${descendingOrder}_${propertyName}` ? "opacity-100" : ""
+                }`}
+              />
+            </div>
+          </CustomMenu.MenuItem>
+          {selectedMenuItem &&
+            selectedMenuItem !== "" &&
+            displayFilters?.order_by !== "-created_at" &&
+            selectedMenuItem.includes(propertyName) && (
+              <CustomMenu.MenuItem
+                className={`mt-0.5${
+                  selectedMenuItem === `-created_at_${propertyName}`
+                    ? "bg-custom-background-80"
+                    : ""
+                }`}
+                key={propertyName}
+                onClick={() => {
+                  handleOrderBy("-created_at", propertyName);
+                }}
+              >
+                <div className={`group flex gap-1.5 px-1 items-center justify-between `}>
+                  <div className="flex gap-1.5 items-center">
+                    <span className="relative flex items-center justify-center h-6 w-6">
+                      <Icon iconName="ink_eraser" className="text-sm" />
+                    </span>
+
+                    <span>Clear sorting</span>
+                  </div>
+                </div>
+              </CustomMenu.MenuItem>
+            )}
+        </CustomMenu>
       </div>
       <div className="h-full min-w-[9rem] w-full">
         {spreadsheetIssues.map((issue: IIssue, index) => (
@@ -230,6 +451,27 @@ export const SpreadsheetView: React.FC<Props> = ({
     </div>
   );
 
+  const handleScroll = () => {
+    if (containerRef.current) {
+      const scrollLeft = containerRef.current.scrollLeft;
+      setIsScrolled(scrollLeft > 0);
+    }
+  };
+
+  useEffect(() => {
+    const currentContainerRef = containerRef.current;
+
+    if (currentContainerRef) {
+      currentContainerRef.addEventListener("scroll", handleScroll);
+    }
+
+    return () => {
+      if (currentContainerRef) {
+        currentContainerRef.removeEventListener("scroll", handleScroll);
+      }
+    };
+  }, []);
+
   return (
     <>
       <IssuePeekOverview
@@ -238,15 +480,19 @@ export const SpreadsheetView: React.FC<Props> = ({
         workspaceSlug={workspaceSlug?.toString() ?? ""}
         readOnly={disableUserActions}
       />
-      <div className="relative flex h-full w-full rounded-lg text-custom-text-200 overflow-x-auto whitespace-nowrap bg-custom-background-100">
+      <div className="relative flex h-full w-full rounded-lg text-custom-text-200 overflow-x-auto whitespace-nowrap bg-custom-background-200">
         <div className="h-full w-full flex flex-col">
-          <div className="flex max-h-full overflow-y-auto">
+          <div ref={containerRef} className="flex max-h-full h-full overflow-y-auto">
             {spreadsheetIssues ? (
               <>
                 <div className="sticky left-0 w-[28rem] z-[2]">
-                  <div className="relative flex flex-col h-max w-full bg-custom-background-100 rounded-sm z-[2]">
+                  <div
+                    className={`relative flex flex-col h-max w-full bg-custom-background-100 z-[2] ${
+                      isScrolled ? "shadow-r shadow-custom-shadow-xs" : ""
+                    }`}
+                  >
                     <div className="flex items-center text-sm font-medium z-[2] h-11 w-full sticky top-0 bg-custom-background-90 border border-l-0 border-custom-border-200">
-                      <span className="flex items-center px-4 py-2.5 h-full w-20 flex-shrink-0">
+                      <span className="flex items-center px-4 py-2.5 h-full w-24 flex-shrink-0">
                         ID
                       </span>
                       <span className="flex items-center px-4 py-2.5 h-full w-full flex-grow">
@@ -270,15 +516,69 @@ export const SpreadsheetView: React.FC<Props> = ({
                     ))}
                   </div>
                 </div>
-                {renderColumn("State", SpreadsheetStateColumn)}
-                {renderColumn("Priority", SpreadsheetPriorityColumn)}
-                {renderColumn("Assignees", SpreadsheetAssigneeColumn)}
-                {renderColumn("Label", SpreadsheetLabelColumn)}
-                {renderColumn("Start Date", SpreadsheetStartDateColumn)}
-                {renderColumn("Due Date", SpreadsheetDueDateColumn)}
-                {renderColumn("Estimate", SpreadsheetEstimateColumn)}
-                {renderColumn("Created On", SpreadsheetCreatedOnColumn)}
-                {renderColumn("Updated On", SpreadsheetUpdatedOnColumn)}
+                {renderColumn(
+                  "State",
+                  "state",
+                  SpreadsheetStateColumn,
+                  "state__name",
+                  "-state__name"
+                )}
+                {renderColumn(
+                  "Priority",
+                  "priority",
+                  SpreadsheetPriorityColumn,
+                  "priority",
+                  "-priority"
+                )}
+                {renderColumn(
+                  "Assignees",
+                  "assignee",
+                  SpreadsheetAssigneeColumn,
+                  "assignees__first_name",
+                  "-assignees__first_name"
+                )}
+                {renderColumn(
+                  "Label",
+                  "labels",
+                  SpreadsheetLabelColumn,
+                  "labels__name",
+                  "-labels__name"
+                )}
+                {renderColumn(
+                  "Start Date",
+                  "start_date",
+                  SpreadsheetStartDateColumn,
+                  "-start_date",
+                  "start_date"
+                )}
+                {renderColumn(
+                  "Due Date",
+                  "due_date",
+                  SpreadsheetDueDateColumn,
+                  "-target_date",
+                  "target_date"
+                )}
+                {renderColumn(
+                  "Estimate",
+                  "estimate",
+                  SpreadsheetEstimateColumn,
+                  "estimate_point",
+                  "-estimate_point"
+                )}
+                {renderColumn(
+                  "Created On",
+                  "created_on",
+                  SpreadsheetCreatedOnColumn,
+                  "-created_at",
+                  "created_at"
+                )}
+                {renderColumn(
+                  "Updated On",
+                  "updated_on",
+                  SpreadsheetUpdatedOnColumn,
+                  "-updated_at",
+                  "updated_at"
+                )}
               </>
             ) : (
               <div className="flex flex-col justify-center items-center h-full w-full">
diff --git a/web/components/core/views/spreadsheet-view/state-column/state-column.tsx b/web/components/core/views/spreadsheet-view/state-column/state-column.tsx
index a31345f3d..04c833b1d 100644
--- a/web/components/core/views/spreadsheet-view/state-column/state-column.tsx
+++ b/web/components/core/views/spreadsheet-view/state-column/state-column.tsx
@@ -76,7 +76,7 @@ export const StateColumn: React.FC<Props> = ({
             value={issue.state_detail}
             projectId={projectId}
             onChange={handleStateChange}
-            buttonClassName="!p-0 !rounded-none !shadow-none !border-0"
+            buttonClassName="!shadow-none !border-0"
             hideDropdownArrow
             disabled={isNotAllowed}
           />
diff --git a/web/components/issues/my-issues/my-issues-select-filters.tsx b/web/components/issues/my-issues/my-issues-select-filters.tsx
index 8085b5e78..ce8e03797 100644
--- a/web/components/issues/my-issues/my-issues-select-filters.tsx
+++ b/web/components/issues/my-issues/my-issues-select-filters.tsx
@@ -4,21 +4,18 @@ import { useRouter } from "next/router";
 
 import useSWR from "swr";
 
-// hook
-import useProjects from "hooks/use-projects";
-import useWorkspaceMembers from "hooks/use-workspace-members";
 // services
 import issuesService from "services/issues.service";
 // components
 import { DateFilterModal } from "components/core";
 // ui
-import { Avatar, MultiLevelDropdown } from "components/ui";
+import { MultiLevelDropdown } from "components/ui";
 // icons
 import { PriorityIcon, StateGroupIcon } from "components/icons";
 // helpers
 import { checkIfArraysHaveSameElements } from "helpers/array.helper";
 // types
-import { IIssueFilterOptions, TStateGroups } from "types";
+import { IIssueFilterOptions, IQuery, TStateGroups } from "types";
 // fetch-keys
 import { WORKSPACE_LABELS } from "constants/fetch-keys";
 // constants
@@ -26,7 +23,7 @@ import { GROUP_CHOICES, PRIORITIES } from "constants/project";
 import { DATE_FILTER_OPTIONS } from "constants/filters";
 
 type Props = {
-  filters: Partial<IIssueFilterOptions>;
+  filters: Partial<IIssueFilterOptions> | IQuery;
   onSelect: (option: any) => void;
   direction?: "left" | "right";
   height?: "sm" | "md" | "rg" | "lg";
@@ -58,11 +55,6 @@ export const MyIssuesSelectFilters: React.FC<Props> = ({
       : null
   );
 
-  const { projects: allProjects } = useProjects();
-  const joinedProjects = allProjects?.filter((p) => p.is_member);
-
-  const { workspaceMembers } = useWorkspaceMembers(workspaceSlug?.toString() ?? "");
-
   return (
     <>
       {isDateFilterModalOpen && (
@@ -82,19 +74,25 @@ export const MyIssuesSelectFilters: React.FC<Props> = ({
         height={height}
         options={[
           {
-            id: "project",
-            label: "Project",
-            value: joinedProjects,
+            id: "priority",
+            label: "Priority",
+            value: PRIORITIES,
             hasChildren: true,
-            children: joinedProjects?.map((project) => ({
-              id: project.id,
-              label: <div className="flex items-center gap-2">{project.name}</div>,
-              value: {
-                key: "project",
-                value: project.id,
-              },
-              selected: filters?.project?.includes(project.id),
-            })),
+            children: [
+              ...PRIORITIES.map((priority) => ({
+                id: priority === null ? "null" : priority,
+                label: (
+                  <div className="flex items-center gap-2 capitalize">
+                    <PriorityIcon priority={priority} /> {priority ?? "None"}
+                  </div>
+                ),
+                value: {
+                  key: "priority",
+                  value: priority === null ? "null" : priority,
+                },
+                selected: filters?.priority?.includes(priority === null ? "null" : priority),
+              })),
+            ],
           },
           {
             id: "state_group",
@@ -144,87 +142,6 @@ export const MyIssuesSelectFilters: React.FC<Props> = ({
               selected: filters?.labels?.includes(label.id),
             })),
           },
-          {
-            id: "priority",
-            label: "Priority",
-            value: PRIORITIES,
-            hasChildren: true,
-            children: [
-              ...PRIORITIES.map((priority) => ({
-                id: priority === null ? "null" : priority,
-                label: (
-                  <div className="flex items-center gap-2 capitalize">
-                    <PriorityIcon priority={priority} /> {priority ?? "None"}
-                  </div>
-                ),
-                value: {
-                  key: "priority",
-                  value: priority === null ? "null" : priority,
-                },
-                selected: filters?.priority?.includes(priority === null ? "null" : priority),
-              })),
-            ],
-          },
-          {
-            id: "created_by",
-            label: "Created by",
-            value: workspaceMembers,
-            hasChildren: true,
-            children: workspaceMembers?.map((member) => ({
-              id: member.member.id,
-              label: (
-                <div className="flex items-center gap-2">
-                  <Avatar user={member.member} />
-                  {member.member.display_name}
-                </div>
-              ),
-              value: {
-                key: "created_by",
-                value: member.member.id,
-              },
-              selected: filters?.created_by?.includes(member.member.id),
-            })),
-          },
-          {
-            id: "assignees",
-            label: "Assignees",
-            value: workspaceMembers,
-            hasChildren: true,
-            children: workspaceMembers?.map((member) => ({
-              id: member.member.id,
-              label: (
-                <div className="flex items-center gap-2">
-                  <Avatar user={member.member} />
-                  {member.member.display_name}
-                </div>
-              ),
-              value: {
-                key: "assignees",
-                value: member.member.id,
-              },
-              selected: filters?.assignees?.includes(member.member.id),
-            })),
-          },
-          {
-            id: "subscriber",
-            label: "Subscriber",
-            value: workspaceMembers,
-            hasChildren: true,
-            children: workspaceMembers?.map((member) => ({
-              id: member.member.id,
-              label: (
-                <div className="flex items-center gap-2">
-                  <Avatar user={member.member} />
-                  {member.member.display_name}
-                </div>
-              ),
-              value: {
-                key: "subscriber",
-                value: member.member.id,
-              },
-              selected: filters?.subscriber?.includes(member.member.id),
-            })),
-          },
           {
             id: "start_date",
             label: "Start date",
diff --git a/web/components/issues/workspace-views/workpace-view-issues.tsx b/web/components/issues/workspace-views/workpace-view-issues.tsx
new file mode 100644
index 000000000..708e0eb9f
--- /dev/null
+++ b/web/components/issues/workspace-views/workpace-view-issues.tsx
@@ -0,0 +1,221 @@
+import React, { useCallback, useState } from "react";
+
+import useSWR from "swr";
+
+import { useRouter } from "next/router";
+
+// context
+import { useProjectMyMembership } from "contexts/project-member.context";
+// service
+import projectIssuesServices from "services/issues.service";
+// hooks
+import useProjects from "hooks/use-projects";
+import useUser from "hooks/use-user";
+import { useWorkspaceView } from "hooks/use-workspace-view";
+import useWorkspaceMembers from "hooks/use-workspace-members";
+// components
+import { WorkspaceViewsNavigation } from "components/workspace/views/workpace-view-navigation";
+import { EmptyState, PrimaryButton } from "components/ui";
+import { SpreadsheetView, WorkspaceFiltersList } from "components/core";
+import { CreateUpdateIssueModal, DeleteIssueModal } from "components/issues";
+import { CreateUpdateWorkspaceViewModal } from "components/workspace/views/modal";
+// icon
+import { PlusIcon } from "components/icons";
+// image
+import emptyView from "public/empty-state/view.svg";
+// constants
+import { WORKSPACE_LABELS } from "constants/fetch-keys";
+import { STATE_GROUP } from "constants/project";
+// types
+import { IIssue, IWorkspaceIssueFilterOptions } from "types";
+
+export const WorkspaceViewIssues = () => {
+  const router = useRouter();
+  const { workspaceSlug, workspaceViewId } = router.query;
+
+  const { memberRole } = useProjectMyMembership();
+  const { user } = useUser();
+  const { isGuest, isViewer } = useWorkspaceMembers(
+    workspaceSlug?.toString(),
+    Boolean(workspaceSlug)
+  );
+  const { filters, viewIssues, mutateViewIssues, handleFilters } = useWorkspaceView();
+
+  const [createViewModal, setCreateViewModal] = useState<any>(null);
+
+  // create issue modal
+  const [createIssueModal, setCreateIssueModal] = useState(false);
+  const [preloadedData, setPreloadedData] = useState<
+    (Partial<IIssue> & { actionType: "createIssue" | "edit" | "delete" }) | undefined
+  >(undefined);
+
+  // update issue modal
+  const [editIssueModal, setEditIssueModal] = useState(false);
+  const [issueToEdit, setIssueToEdit] = useState<
+    (IIssue & { actionType: "edit" | "delete" }) | undefined
+  >(undefined);
+
+  // delete issue modal
+  const [deleteIssueModal, setDeleteIssueModal] = useState(false);
+  const [issueToDelete, setIssueToDelete] = useState<IIssue | null>(null);
+
+  const { projects: allProjects } = useProjects();
+  const joinedProjects = allProjects?.filter((p) => p.is_member);
+
+  const { data: workspaceLabels } = useSWR(
+    workspaceSlug ? WORKSPACE_LABELS(workspaceSlug.toString()) : null,
+    workspaceSlug ? () => projectIssuesServices.getWorkspaceLabels(workspaceSlug.toString()) : null
+  );
+
+  const { workspaceMembers } = useWorkspaceMembers(workspaceSlug?.toString() ?? "");
+
+  const makeIssueCopy = useCallback(
+    (issue: IIssue) => {
+      setCreateIssueModal(true);
+
+      setPreloadedData({ ...issue, name: `${issue.name} (Copy)`, actionType: "createIssue" });
+    },
+    [setCreateIssueModal, setPreloadedData]
+  );
+
+  const handleEditIssue = useCallback(
+    (issue: IIssue) => {
+      setEditIssueModal(true);
+      setIssueToEdit({
+        ...issue,
+        actionType: "edit",
+        cycle: issue.issue_cycle ? issue.issue_cycle.cycle : null,
+        module: issue.issue_module ? issue.issue_module.module : null,
+      });
+    },
+    [setEditIssueModal, setIssueToEdit]
+  );
+
+  const handleDeleteIssue = useCallback(
+    (issue: IIssue) => {
+      setDeleteIssueModal(true);
+      setIssueToDelete(issue);
+    },
+    [setDeleteIssueModal, setIssueToDelete]
+  );
+
+  const handleIssueAction = useCallback(
+    (issue: IIssue, action: "copy" | "edit" | "delete" | "updateDraft") => {
+      if (action === "copy") makeIssueCopy(issue);
+      else if (action === "edit") handleEditIssue(issue);
+      else if (action === "delete") handleDeleteIssue(issue);
+    },
+    [makeIssueCopy, handleEditIssue, handleDeleteIssue]
+  );
+
+  const nullFilters =
+    filters.filters &&
+    Object.keys(filters.filters).filter(
+      (key) => filters.filters[key as keyof IWorkspaceIssueFilterOptions] === null
+    );
+
+  const areFiltersApplied =
+    filters.filters &&
+    Object.keys(filters.filters).length > 0 &&
+    nullFilters.length !== Object.keys(filters.filters).length;
+
+  const isNotAllowed = isGuest || isViewer;
+  return (
+    <>
+      <CreateUpdateIssueModal
+        isOpen={createIssueModal && preloadedData?.actionType === "createIssue"}
+        handleClose={() => setCreateIssueModal(false)}
+        prePopulateData={{
+          ...preloadedData,
+        }}
+        onSubmit={async () => mutateViewIssues()}
+      />
+      <CreateUpdateIssueModal
+        isOpen={editIssueModal && issueToEdit?.actionType !== "delete"}
+        handleClose={() => setEditIssueModal(false)}
+        data={issueToEdit}
+        onSubmit={async () => mutateViewIssues()}
+      />
+      <DeleteIssueModal
+        handleClose={() => setDeleteIssueModal(false)}
+        isOpen={deleteIssueModal}
+        data={issueToDelete}
+        user={user}
+        onSubmit={async () => mutateViewIssues()}
+      />
+      <CreateUpdateWorkspaceViewModal
+        isOpen={createViewModal !== null}
+        handleClose={() => setCreateViewModal(null)}
+        preLoadedData={createViewModal}
+      />
+      <div className="h-full flex flex-col overflow-hidden bg-custom-background-100">
+        <div className="h-full w-full border-b border-custom-border-300">
+          <WorkspaceViewsNavigation handleAddView={() => setCreateViewModal(true)} />
+          {false ? (
+            <EmptyState
+              image={emptyView}
+              title="View does not exist"
+              description="The view you are looking for does not exist or has been deleted."
+              primaryButton={{
+                text: "View other views",
+                onClick: () => router.push(`/${workspaceSlug}/workspace-views`),
+              }}
+            />
+          ) : (
+            <div className="h-full w-full flex flex-col">
+              {areFiltersApplied && (
+                <>
+                  <div className="flex items-center justify-between gap-2 px-5 pt-3 pb-0">
+                    <WorkspaceFiltersList
+                      filters={filters.filters}
+                      setFilters={(updatedFilter) => handleFilters("filters", updatedFilter)}
+                      labels={workspaceLabels}
+                      members={workspaceMembers?.map((m) => m.member)}
+                      stateGroup={STATE_GROUP}
+                      project={joinedProjects}
+                      clearAllFilters={() =>
+                        handleFilters("filters", {
+                          assignees: null,
+                          created_by: null,
+                          labels: null,
+                          priority: null,
+                          state_group: null,
+                          start_date: null,
+                          target_date: null,
+                          subscriber: null,
+                          project: null,
+                        })
+                      }
+                    />
+                    <PrimaryButton
+                      onClick={() => {
+                        if (workspaceViewId) handleFilters("filters", filters.filters, true);
+                        else
+                          setCreateViewModal({
+                            query: filters.filters,
+                          });
+                      }}
+                      className="flex items-center gap-2 text-sm"
+                    >
+                      {!workspaceViewId && <PlusIcon className="h-4 w-4" />}
+                      {workspaceViewId ? "Update" : "Save"} view
+                    </PrimaryButton>
+                  </div>
+                  {<div className="mt-3 border-t border-custom-border-200" />}
+                </>
+              )}
+              <SpreadsheetView
+                spreadsheetIssues={viewIssues}
+                mutateIssues={mutateViewIssues}
+                handleIssueAction={handleIssueAction}
+                disableUserActions={isNotAllowed ?? false}
+                user={user}
+                userAuth={memberRole}
+              />
+            </div>
+          )}
+        </div>
+      </div>
+    </>
+  );
+};
diff --git a/web/components/issues/workspace-views/workspace-all-issue.tsx b/web/components/issues/workspace-views/workspace-all-issue.tsx
new file mode 100644
index 000000000..724b9d309
--- /dev/null
+++ b/web/components/issues/workspace-views/workspace-all-issue.tsx
@@ -0,0 +1,234 @@
+import { useCallback, useState } from "react";
+import { useRouter } from "next/router";
+
+import useSWR from "swr";
+
+// hook
+import useUser from "hooks/use-user";
+import useWorkspaceMembers from "hooks/use-workspace-members";
+import useProjects from "hooks/use-projects";
+import { useWorkspaceView } from "hooks/use-workspace-view";
+// context
+import { useProjectMyMembership } from "contexts/project-member.context";
+// services
+import workspaceService from "services/workspace.service";
+import projectIssuesServices from "services/issues.service";
+// components
+import { SpreadsheetView, WorkspaceFiltersList } from "components/core";
+import { WorkspaceViewsNavigation } from "components/workspace/views/workpace-view-navigation";
+import { CreateUpdateIssueModal, DeleteIssueModal } from "components/issues";
+import { CreateUpdateWorkspaceViewModal } from "components/workspace/views/modal";
+// ui
+import { PrimaryButton } from "components/ui";
+// icons
+import { PlusIcon } from "@heroicons/react/24/outline";
+// fetch-keys
+import { WORKSPACE_LABELS, WORKSPACE_VIEW_ISSUES } from "constants/fetch-keys";
+// constants
+import { STATE_GROUP } from "constants/project";
+// types
+import { IIssue, IWorkspaceIssueFilterOptions } from "types";
+
+export const WorkspaceAllIssue = () => {
+  const router = useRouter();
+  const { workspaceSlug, workspaceViewId } = router.query;
+
+  const [createViewModal, setCreateViewModal] = useState<any>(null);
+
+  // create issue modal
+  const [createIssueModal, setCreateIssueModal] = useState(false);
+  const [preloadedData, setPreloadedData] = useState<
+    (Partial<IIssue> & { actionType: "createIssue" | "edit" | "delete" }) | undefined
+  >(undefined);
+
+  // update issue modal
+  const [editIssueModal, setEditIssueModal] = useState(false);
+  const [issueToEdit, setIssueToEdit] = useState<
+    (IIssue & { actionType: "edit" | "delete" }) | undefined
+  >(undefined);
+
+  // delete issue modal
+  const [deleteIssueModal, setDeleteIssueModal] = useState(false);
+  const [issueToDelete, setIssueToDelete] = useState<IIssue | null>(null);
+
+  const { user } = useUser();
+  const { memberRole } = useProjectMyMembership();
+
+  const { workspaceMembers } = useWorkspaceMembers(workspaceSlug?.toString() ?? "");
+
+  const { data: workspaceLabels } = useSWR(
+    workspaceSlug ? WORKSPACE_LABELS(workspaceSlug.toString()) : null,
+    workspaceSlug ? () => projectIssuesServices.getWorkspaceLabels(workspaceSlug.toString()) : null
+  );
+
+  const { filters, handleFilters } = useWorkspaceView();
+
+  const params: any = {
+    assignees: filters?.filters?.assignees ? filters?.filters?.assignees.join(",") : undefined,
+    subscriber: filters?.filters?.subscriber ? filters?.filters?.subscriber.join(",") : undefined,
+    state_group: filters?.filters?.state_group
+      ? filters?.filters?.state_group.join(",")
+      : undefined,
+    priority: filters?.filters?.priority ? filters?.filters?.priority.join(",") : undefined,
+    labels: filters?.filters?.labels ? filters?.filters?.labels.join(",") : undefined,
+    created_by: filters?.filters?.created_by ? filters?.filters?.created_by.join(",") : undefined,
+    start_date: filters?.filters?.start_date ? filters?.filters?.start_date.join(",") : undefined,
+    target_date: filters?.filters?.target_date
+      ? filters?.filters?.target_date.join(",")
+      : undefined,
+    project: filters?.filters?.project ? filters?.filters?.project.join(",") : undefined,
+    sub_issue: false,
+    type: undefined,
+  };
+
+  const { data: viewIssues, mutate: mutateViewIssues } = useSWR(
+    workspaceSlug ? WORKSPACE_VIEW_ISSUES(workspaceSlug.toString(), params) : null,
+    workspaceSlug ? () => workspaceService.getViewIssues(workspaceSlug.toString(), params) : null
+  );
+
+  const makeIssueCopy = useCallback(
+    (issue: IIssue) => {
+      setCreateIssueModal(true);
+
+      setPreloadedData({ ...issue, name: `${issue.name} (Copy)`, actionType: "createIssue" });
+    },
+    [setCreateIssueModal, setPreloadedData]
+  );
+
+  const handleEditIssue = useCallback(
+    (issue: IIssue) => {
+      setEditIssueModal(true);
+      setIssueToEdit({
+        ...issue,
+        actionType: "edit",
+        cycle: issue.issue_cycle ? issue.issue_cycle.cycle : null,
+        module: issue.issue_module ? issue.issue_module.module : null,
+      });
+    },
+    [setEditIssueModal, setIssueToEdit]
+  );
+
+  const handleDeleteIssue = useCallback(
+    (issue: IIssue) => {
+      setDeleteIssueModal(true);
+      setIssueToDelete(issue);
+    },
+    [setDeleteIssueModal, setIssueToDelete]
+  );
+
+  const handleIssueAction = useCallback(
+    (issue: IIssue, action: "copy" | "edit" | "delete" | "updateDraft") => {
+      if (action === "copy") makeIssueCopy(issue);
+      else if (action === "edit") handleEditIssue(issue);
+      else if (action === "delete") handleDeleteIssue(issue);
+    },
+    [makeIssueCopy, handleEditIssue, handleDeleteIssue]
+  );
+
+  const nullFilters =
+    filters.filters &&
+    Object.keys(filters.filters).filter(
+      (key) => filters.filters[key as keyof IWorkspaceIssueFilterOptions] === null
+    );
+
+  const areFiltersApplied =
+    filters.filters &&
+    Object.keys(filters.filters).length > 0 &&
+    nullFilters.length !== Object.keys(filters.filters).length;
+
+  const { projects: allProjects } = useProjects();
+  const joinedProjects = allProjects?.filter((p) => p.is_member);
+
+  return (
+    <>
+      <CreateUpdateIssueModal
+        isOpen={createIssueModal && preloadedData?.actionType === "createIssue"}
+        handleClose={() => setCreateIssueModal(false)}
+        prePopulateData={{
+          ...preloadedData,
+        }}
+        onSubmit={async () => {
+          mutateViewIssues();
+        }}
+      />
+      <CreateUpdateIssueModal
+        isOpen={editIssueModal && issueToEdit?.actionType !== "delete"}
+        handleClose={() => setEditIssueModal(false)}
+        data={issueToEdit}
+        onSubmit={async () => {
+          mutateViewIssues();
+        }}
+      />
+      <DeleteIssueModal
+        handleClose={() => setDeleteIssueModal(false)}
+        isOpen={deleteIssueModal}
+        data={issueToDelete}
+        user={user}
+        onSubmit={async () => {
+          mutateViewIssues();
+        }}
+      />
+      <CreateUpdateWorkspaceViewModal
+        isOpen={createViewModal !== null}
+        handleClose={() => setCreateViewModal(null)}
+        preLoadedData={createViewModal}
+      />
+      <div className="h-full flex flex-col overflow-hidden bg-custom-background-100">
+        <div className="h-full w-full border-b border-custom-border-300">
+          <WorkspaceViewsNavigation handleAddView={() => setCreateViewModal(true)} />
+          <div className="h-full w-full flex flex-col">
+            {areFiltersApplied && (
+              <>
+                <div className="flex items-center justify-between gap-2 px-5 pt-3 pb-0">
+                  <WorkspaceFiltersList
+                    filters={filters.filters}
+                    setFilters={(updatedFilter) => handleFilters("filters", updatedFilter)}
+                    labels={workspaceLabels}
+                    members={workspaceMembers?.map((m) => m.member)}
+                    stateGroup={STATE_GROUP}
+                    project={joinedProjects}
+                    clearAllFilters={() =>
+                      handleFilters("filters", {
+                        assignees: null,
+                        created_by: null,
+                        labels: null,
+                        priority: null,
+                        state_group: null,
+                        start_date: null,
+                        target_date: null,
+                        subscriber: null,
+                        project: null,
+                      })
+                    }
+                  />
+                  <PrimaryButton
+                    onClick={() => {
+                      if (workspaceViewId) handleFilters("filters", filters.filters, true);
+                      else
+                        setCreateViewModal({
+                          query: filters.filters,
+                        });
+                    }}
+                    className="flex items-center gap-2 text-sm"
+                  >
+                    {!workspaceViewId && <PlusIcon className="h-4 w-4" />}
+                    {workspaceViewId ? "Update" : "Save"} view
+                  </PrimaryButton>
+                </div>
+                {<div className="mt-3 border-t border-custom-border-200" />}
+              </>
+            )}
+            <SpreadsheetView
+              spreadsheetIssues={viewIssues}
+              mutateIssues={mutateViewIssues}
+              handleIssueAction={handleIssueAction}
+              disableUserActions={false}
+              user={user}
+              userAuth={memberRole}
+            />
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
diff --git a/web/components/issues/workspace-views/workspace-assigned-issue.tsx b/web/components/issues/workspace-views/workspace-assigned-issue.tsx
new file mode 100644
index 000000000..ccee9ab84
--- /dev/null
+++ b/web/components/issues/workspace-views/workspace-assigned-issue.tsx
@@ -0,0 +1,155 @@
+import React, { useCallback, useState } from "react";
+import { useRouter } from "next/router";
+
+import useSWR from "swr";
+
+// hook
+import useUser from "hooks/use-user";
+// context
+import { useProjectMyMembership } from "contexts/project-member.context";
+// services
+import workspaceService from "services/workspace.service";
+// components
+import { SpreadsheetView } from "components/core";
+import { WorkspaceViewsNavigation } from "components/workspace/views/workpace-view-navigation";
+import { CreateUpdateIssueModal, DeleteIssueModal } from "components/issues";
+import { CreateUpdateWorkspaceViewModal } from "components/workspace/views/modal";
+// fetch-keys
+import { WORKSPACE_VIEW_ISSUES } from "constants/fetch-keys";
+// types
+import { IIssue } from "types";
+
+export const WorkspaceAssignedIssue = () => {
+  const [createViewModal, setCreateViewModal] = useState<any>(null);
+
+  // create issue modal
+  const [createIssueModal, setCreateIssueModal] = useState(false);
+  const [preloadedData, setPreloadedData] = useState<
+    (Partial<IIssue> & { actionType: "createIssue" | "edit" | "delete" }) | undefined
+  >(undefined);
+
+  // update issue modal
+  const [editIssueModal, setEditIssueModal] = useState(false);
+  const [issueToEdit, setIssueToEdit] = useState<
+    (IIssue & { actionType: "edit" | "delete" }) | undefined
+  >(undefined);
+
+  // delete issue modal
+  const [deleteIssueModal, setDeleteIssueModal] = useState(false);
+  const [issueToDelete, setIssueToDelete] = useState<IIssue | null>(null);
+
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  const { user } = useUser();
+
+  const { memberRole } = useProjectMyMembership();
+
+  const params: any = {
+    assignees: user?.id ?? undefined,
+    sub_issue: false,
+  };
+
+  //   const { data: viewDetails, error } = useSWR(
+  //     workspaceSlug && workspaceViewId ? WORKSPACE_VIEW_DETAILS(workspaceViewId.toString()) : null,
+  //     workspaceSlug && workspaceViewId
+  //       ? () => workspaceService.getViewDetails(workspaceSlug.toString(), workspaceViewId.toString())
+  //       : null
+  //   );
+
+  const { data: viewIssues, mutate: mutateIssues } = useSWR(
+    workspaceSlug ? WORKSPACE_VIEW_ISSUES(workspaceSlug.toString(), params) : null,
+    workspaceSlug ? () => workspaceService.getViewIssues(workspaceSlug.toString(), params) : null
+  );
+
+  const makeIssueCopy = useCallback(
+    (issue: IIssue) => {
+      setCreateIssueModal(true);
+
+      setPreloadedData({ ...issue, name: `${issue.name} (Copy)`, actionType: "createIssue" });
+    },
+    [setCreateIssueModal, setPreloadedData]
+  );
+
+  const handleEditIssue = useCallback(
+    (issue: IIssue) => {
+      setEditIssueModal(true);
+      setIssueToEdit({
+        ...issue,
+        actionType: "edit",
+        cycle: issue.issue_cycle ? issue.issue_cycle.cycle : null,
+        module: issue.issue_module ? issue.issue_module.module : null,
+      });
+    },
+    [setEditIssueModal, setIssueToEdit]
+  );
+
+  const handleDeleteIssue = useCallback(
+    (issue: IIssue) => {
+      setDeleteIssueModal(true);
+      setIssueToDelete(issue);
+    },
+    [setDeleteIssueModal, setIssueToDelete]
+  );
+
+  const handleIssueAction = useCallback(
+    (issue: IIssue, action: "copy" | "edit" | "delete" | "updateDraft") => {
+      if (action === "copy") makeIssueCopy(issue);
+      else if (action === "edit") handleEditIssue(issue);
+      else if (action === "delete") handleDeleteIssue(issue);
+    },
+    [makeIssueCopy, handleEditIssue, handleDeleteIssue]
+  );
+  return (
+    <>
+      <CreateUpdateIssueModal
+        isOpen={createIssueModal && preloadedData?.actionType === "createIssue"}
+        handleClose={() => setCreateIssueModal(false)}
+        prePopulateData={{
+          ...preloadedData,
+        }}
+        onSubmit={async () => {
+          mutateIssues();
+        }}
+      />
+      <CreateUpdateIssueModal
+        isOpen={editIssueModal && issueToEdit?.actionType !== "delete"}
+        handleClose={() => setEditIssueModal(false)}
+        data={issueToEdit}
+        onSubmit={async () => {
+          mutateIssues();
+        }}
+      />
+      <DeleteIssueModal
+        handleClose={() => setDeleteIssueModal(false)}
+        isOpen={deleteIssueModal}
+        data={issueToDelete}
+        user={user}
+        onSubmit={async () => {
+          mutateIssues();
+        }}
+      />
+      <CreateUpdateWorkspaceViewModal
+        isOpen={createViewModal !== null}
+        handleClose={() => setCreateViewModal(null)}
+        preLoadedData={createViewModal}
+      />
+      <div className="h-full flex flex-col overflow-hidden bg-custom-background-100">
+        <div className="h-full w-full border-b border-custom-border-300">
+          <WorkspaceViewsNavigation handleAddView={() => setCreateViewModal(true)} />
+
+          <div className="h-full w-full flex flex-col">
+            <SpreadsheetView
+              spreadsheetIssues={viewIssues}
+              mutateIssues={mutateIssues}
+              handleIssueAction={handleIssueAction}
+              disableUserActions={false}
+              user={user}
+              userAuth={memberRole}
+            />
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
diff --git a/web/components/issues/workspace-views/workspace-created-issues.tsx b/web/components/issues/workspace-views/workspace-created-issues.tsx
new file mode 100644
index 000000000..bcc83c38b
--- /dev/null
+++ b/web/components/issues/workspace-views/workspace-created-issues.tsx
@@ -0,0 +1,147 @@
+import React, { useCallback, useState } from "react";
+
+import { useRouter } from "next/router";
+
+import useSWR from "swr";
+
+// hook
+import useUser from "hooks/use-user";
+// context
+import { useProjectMyMembership } from "contexts/project-member.context";
+// services
+import workspaceService from "services/workspace.service";
+// components
+import { SpreadsheetView } from "components/core";
+import { WorkspaceViewsNavigation } from "components/workspace/views/workpace-view-navigation";
+import { CreateUpdateIssueModal, DeleteIssueModal } from "components/issues";
+import { CreateUpdateWorkspaceViewModal } from "components/workspace/views/modal";
+// fetch-keys
+import { WORKSPACE_VIEW_ISSUES } from "constants/fetch-keys";
+// types
+import { IIssue } from "types";
+
+export const WorkspaceCreatedIssues = () => {
+  const [createViewModal, setCreateViewModal] = useState<any>(null);
+
+  // create issue modal
+  const [createIssueModal, setCreateIssueModal] = useState(false);
+  const [preloadedData, setPreloadedData] = useState<
+    (Partial<IIssue> & { actionType: "createIssue" | "edit" | "delete" }) | undefined
+  >(undefined);
+
+  // update issue modal
+  const [editIssueModal, setEditIssueModal] = useState(false);
+  const [issueToEdit, setIssueToEdit] = useState<
+    (IIssue & { actionType: "edit" | "delete" }) | undefined
+  >(undefined);
+
+  // delete issue modal
+  const [deleteIssueModal, setDeleteIssueModal] = useState(false);
+  const [issueToDelete, setIssueToDelete] = useState<IIssue | null>(null);
+
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  const { user } = useUser();
+  const { memberRole } = useProjectMyMembership();
+
+  const params: any = {
+    created_by: user?.id ?? undefined,
+    sub_issue: false,
+  };
+
+  const { data: viewIssues, mutate: mutateIssues } = useSWR(
+    workspaceSlug ? WORKSPACE_VIEW_ISSUES(workspaceSlug.toString(), params) : null,
+    workspaceSlug ? () => workspaceService.getViewIssues(workspaceSlug.toString(), params) : null
+  );
+
+  const makeIssueCopy = useCallback(
+    (issue: IIssue) => {
+      setCreateIssueModal(true);
+
+      setPreloadedData({ ...issue, name: `${issue.name} (Copy)`, actionType: "createIssue" });
+    },
+    [setCreateIssueModal, setPreloadedData]
+  );
+
+  const handleEditIssue = useCallback(
+    (issue: IIssue) => {
+      setEditIssueModal(true);
+      setIssueToEdit({
+        ...issue,
+        actionType: "edit",
+        cycle: issue.issue_cycle ? issue.issue_cycle.cycle : null,
+        module: issue.issue_module ? issue.issue_module.module : null,
+      });
+    },
+    [setEditIssueModal, setIssueToEdit]
+  );
+
+  const handleDeleteIssue = useCallback(
+    (issue: IIssue) => {
+      setDeleteIssueModal(true);
+      setIssueToDelete(issue);
+    },
+    [setDeleteIssueModal, setIssueToDelete]
+  );
+
+  const handleIssueAction = useCallback(
+    (issue: IIssue, action: "copy" | "edit" | "delete" | "updateDraft") => {
+      if (action === "copy") makeIssueCopy(issue);
+      else if (action === "edit") handleEditIssue(issue);
+      else if (action === "delete") handleDeleteIssue(issue);
+    },
+    [makeIssueCopy, handleEditIssue, handleDeleteIssue]
+  );
+  return (
+    <>
+      <CreateUpdateIssueModal
+        isOpen={createIssueModal && preloadedData?.actionType === "createIssue"}
+        handleClose={() => setCreateIssueModal(false)}
+        prePopulateData={{
+          ...preloadedData,
+        }}
+        onSubmit={async () => {
+          mutateIssues();
+        }}
+      />
+      <CreateUpdateIssueModal
+        isOpen={editIssueModal && issueToEdit?.actionType !== "delete"}
+        handleClose={() => setEditIssueModal(false)}
+        data={issueToEdit}
+        onSubmit={async () => {
+          mutateIssues();
+        }}
+      />
+      <DeleteIssueModal
+        handleClose={() => setDeleteIssueModal(false)}
+        isOpen={deleteIssueModal}
+        data={issueToDelete}
+        user={user}
+        onSubmit={async () => {
+          mutateIssues();
+        }}
+      />
+      <CreateUpdateWorkspaceViewModal
+        isOpen={createViewModal !== null}
+        handleClose={() => setCreateViewModal(null)}
+        preLoadedData={createViewModal}
+      />
+      <div className="h-full flex flex-col overflow-hidden bg-custom-background-100">
+        <div className="h-full w-full border-b border-custom-border-300">
+          <WorkspaceViewsNavigation handleAddView={() => setCreateViewModal(true)} />
+          <div className="h-full w-full flex flex-col">
+            <SpreadsheetView
+              spreadsheetIssues={viewIssues}
+              mutateIssues={mutateIssues}
+              handleIssueAction={handleIssueAction}
+              disableUserActions={false}
+              user={user}
+              userAuth={memberRole}
+            />
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
diff --git a/web/components/issues/workspace-views/workspace-issue-view-option.tsx b/web/components/issues/workspace-views/workspace-issue-view-option.tsx
index 4e98cce92..b635ff870 100644
--- a/web/components/issues/workspace-views/workspace-issue-view-option.tsx
+++ b/web/components/issues/workspace-views/workspace-issue-view-option.tsx
@@ -3,10 +3,9 @@ import React from "react";
 import { useRouter } from "next/router";
 
 // hooks
-import useMyIssuesFilters from "hooks/my-issues/use-my-issues-filter";
-import useWorkspaceIssuesFilters from "hooks/use-worskpace-issue-filter";
+import { useWorkspaceView } from "hooks/use-workspace-view";
 // components
-import { MyIssuesSelectFilters } from "components/issues";
+import { GlobalSelectFilters } from "components/workspace/views/global-select-filters";
 // ui
 import { Tooltip } from "components/ui";
 // icons
@@ -33,12 +32,7 @@ export const WorkspaceIssuesViewOptions: React.FC = () => {
   const router = useRouter();
   const { workspaceSlug, workspaceViewId } = router.query;
 
-  const { displayFilters, setDisplayFilters } = useMyIssuesFilters(workspaceSlug?.toString());
-
-  const { filters, setFilters } = useWorkspaceIssuesFilters(
-    workspaceSlug?.toString(),
-    workspaceViewId?.toString()
-  );
+  const { filters, handleFilters } = useWorkspaceView();
 
   const isWorkspaceViewPath = router.pathname.includes("workspace-views/all-issues");
 
@@ -58,12 +52,12 @@ export const WorkspaceIssuesViewOptions: React.FC = () => {
             <button
               type="button"
               className={`grid h-7 w-7 place-items-center rounded p-1 outline-none hover:bg-custom-sidebar-background-100 duration-300 ${
-                displayFilters?.layout === option.type
+                filters.display_filters?.layout === option.type
                   ? "bg-custom-sidebar-background-100 shadow-sm"
                   : "text-custom-sidebar-text-200"
               }`}
               onClick={() => {
-                setDisplayFilters({ layout: option.type });
+                handleFilters("display_filters", { layout: option.type }, true);
                 if (option.type === "spreadsheet")
                   router.push(`/${workspaceSlug}/workspace-views/all-issues`);
                 else router.push(`/${workspaceSlug}/workspace-views`);
@@ -82,37 +76,38 @@ export const WorkspaceIssuesViewOptions: React.FC = () => {
 
       {showFilters && (
         <>
-          <MyIssuesSelectFilters
-            filters={filters}
+          <GlobalSelectFilters
+            filters={filters.filters}
             onSelect={(option) => {
-              const key = option.key as keyof typeof filters;
+              const key = option.key as keyof typeof filters.filters;
 
               if (key === "start_date" || key === "target_date") {
                 const valueExists = checkIfArraysHaveSameElements(
-                  filters?.[key] ?? [],
+                  filters.filters?.[key] ?? [],
                   option.value
                 );
 
-                setFilters({
+                handleFilters("filters", {
+                  ...filters,
                   [key]: valueExists ? null : option.value,
                 });
               } else {
-                const valueExists = filters[key]?.includes(option.value);
-
-                if (valueExists)
-                  setFilters({
-                    [option.key]: ((filters[key] ?? []) as any[])?.filter(
-                      (val) => val !== option.value
+                if (!filters?.filters?.[key]?.includes(option.value))
+                  handleFilters("filters", {
+                    ...filters,
+                    [key]: [...((filters?.filters?.[key] as any[]) ?? []), option.value],
+                  });
+                else {
+                  handleFilters("filters", {
+                    ...filters,
+                    [key]: (filters?.filters?.[key] as any[])?.filter(
+                      (item) => item !== option.value
                     ),
                   });
-                else
-                  setFilters({
-                    [option.key]: [...((filters[key] ?? []) as any[]), option.value],
-                  });
+                }
               }
             }}
             direction="left"
-            height="rg"
           />
         </>
       )}
diff --git a/web/components/issues/workspace-views/workspace-subscribed-issue.tsx b/web/components/issues/workspace-views/workspace-subscribed-issue.tsx
new file mode 100644
index 000000000..d9db2f347
--- /dev/null
+++ b/web/components/issues/workspace-views/workspace-subscribed-issue.tsx
@@ -0,0 +1,148 @@
+import React, { useCallback, useState } from "react";
+
+import { useRouter } from "next/router";
+
+import useSWR from "swr";
+
+// hook
+import useUser from "hooks/use-user";
+// context
+import { useProjectMyMembership } from "contexts/project-member.context";
+// services
+import workspaceService from "services/workspace.service";
+// components
+import { SpreadsheetView } from "components/core";
+import { WorkspaceViewsNavigation } from "components/workspace/views/workpace-view-navigation";
+import { CreateUpdateIssueModal, DeleteIssueModal } from "components/issues";
+import { CreateUpdateWorkspaceViewModal } from "components/workspace/views/modal";
+// fetch-keys
+import { WORKSPACE_VIEW_ISSUES } from "constants/fetch-keys";
+// types
+import { IIssue } from "types";
+
+export const WorkspaceSubscribedIssues = () => {
+  const [createViewModal, setCreateViewModal] = useState<any>(null);
+
+  // create issue modal
+  const [createIssueModal, setCreateIssueModal] = useState(false);
+  const [preloadedData, setPreloadedData] = useState<
+    (Partial<IIssue> & { actionType: "createIssue" | "edit" | "delete" }) | undefined
+  >(undefined);
+
+  // update issue modal
+  const [editIssueModal, setEditIssueModal] = useState(false);
+  const [issueToEdit, setIssueToEdit] = useState<
+    (IIssue & { actionType: "edit" | "delete" }) | undefined
+  >(undefined);
+
+  // delete issue modal
+  const [deleteIssueModal, setDeleteIssueModal] = useState(false);
+  const [issueToDelete, setIssueToDelete] = useState<IIssue | null>(null);
+
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  const { user } = useUser();
+  const { memberRole } = useProjectMyMembership();
+
+  const params: any = {
+    subscriber: user?.id ?? undefined,
+    sub_issue: false,
+  };
+
+  const { data: viewIssues, mutate: mutateIssues } = useSWR(
+    workspaceSlug ? WORKSPACE_VIEW_ISSUES(workspaceSlug.toString(), params) : null,
+    workspaceSlug ? () => workspaceService.getViewIssues(workspaceSlug.toString(), params) : null
+  );
+
+  const makeIssueCopy = useCallback(
+    (issue: IIssue) => {
+      setCreateIssueModal(true);
+
+      setPreloadedData({ ...issue, name: `${issue.name} (Copy)`, actionType: "createIssue" });
+    },
+    [setCreateIssueModal, setPreloadedData]
+  );
+
+  const handleEditIssue = useCallback(
+    (issue: IIssue) => {
+      setEditIssueModal(true);
+      setIssueToEdit({
+        ...issue,
+        actionType: "edit",
+        cycle: issue.issue_cycle ? issue.issue_cycle.cycle : null,
+        module: issue.issue_module ? issue.issue_module.module : null,
+      });
+    },
+    [setEditIssueModal, setIssueToEdit]
+  );
+
+  const handleDeleteIssue = useCallback(
+    (issue: IIssue) => {
+      setDeleteIssueModal(true);
+      setIssueToDelete(issue);
+    },
+    [setDeleteIssueModal, setIssueToDelete]
+  );
+
+  const handleIssueAction = useCallback(
+    (issue: IIssue, action: "copy" | "edit" | "delete" | "updateDraft") => {
+      if (action === "copy") makeIssueCopy(issue);
+      else if (action === "edit") handleEditIssue(issue);
+      else if (action === "delete") handleDeleteIssue(issue);
+    },
+    [makeIssueCopy, handleEditIssue, handleDeleteIssue]
+  );
+  return (
+    <>
+      <CreateUpdateIssueModal
+        isOpen={createIssueModal && preloadedData?.actionType === "createIssue"}
+        handleClose={() => setCreateIssueModal(false)}
+        prePopulateData={{
+          ...preloadedData,
+        }}
+        onSubmit={async () => {
+          mutateIssues();
+        }}
+      />
+      <CreateUpdateIssueModal
+        isOpen={editIssueModal && issueToEdit?.actionType !== "delete"}
+        handleClose={() => setEditIssueModal(false)}
+        data={issueToEdit}
+        onSubmit={async () => {
+          mutateIssues();
+        }}
+      />
+      <DeleteIssueModal
+        handleClose={() => setDeleteIssueModal(false)}
+        isOpen={deleteIssueModal}
+        data={issueToDelete}
+        user={user}
+        onSubmit={async () => {
+          mutateIssues();
+        }}
+      />
+      <CreateUpdateWorkspaceViewModal
+        isOpen={createViewModal !== null}
+        handleClose={() => setCreateViewModal(null)}
+        preLoadedData={createViewModal}
+      />
+      <div className="h-full flex flex-col overflow-hidden bg-custom-background-100">
+        <div className="h-full w-full border-b border-custom-border-300">
+          <WorkspaceViewsNavigation handleAddView={() => setCreateViewModal(true)} />
+
+          <div className="h-full w-full flex flex-col">
+            <SpreadsheetView
+              spreadsheetIssues={viewIssues}
+              mutateIssues={mutateIssues}
+              handleIssueAction={handleIssueAction}
+              disableUserActions={false}
+              user={user}
+              userAuth={memberRole}
+            />
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
diff --git a/web/components/profile/profile-issues-view-options.tsx b/web/components/profile/profile-issues-view-options.tsx
index c853da530..40b27ec2c 100644
--- a/web/components/profile/profile-issues-view-options.tsx
+++ b/web/components/profile/profile-issues-view-options.tsx
@@ -10,7 +10,7 @@ import useEstimateOption from "hooks/use-estimate-option";
 // components
 import { MyIssuesSelectFilters } from "components/issues";
 // ui
-import { CustomMenu, CustomSearchSelect, ToggleSwitch, Tooltip } from "components/ui";
+import { CustomMenu, ToggleSwitch, Tooltip } from "components/ui";
 // icons
 import { ChevronDownIcon } from "@heroicons/react/24/outline";
 import { FormatListBulletedOutlined, GridViewOutlined } from "@mui/icons-material";
@@ -21,7 +21,6 @@ import { checkIfArraysHaveSameElements } from "helpers/array.helper";
 import { Properties, TIssueViewOptions } from "types";
 // constants
 import { GROUP_BY_OPTIONS, ORDER_BY_OPTIONS, FILTER_ISSUE_OPTIONS } from "constants/issue";
-import useProjects from "hooks/use-projects";
 
 const issueViewOptions: { type: TIssueViewOptions; Icon: any }[] = [
   {
@@ -37,9 +36,6 @@ const issueViewOptions: { type: TIssueViewOptions; Icon: any }[] = [
 export const ProfileIssuesViewOptions: React.FC = () => {
   const router = useRouter();
   const { workspaceSlug, userId } = router.query;
-
-  const { projects } = useProjects();
-
   const {
     displayFilters,
     setDisplayFilters,
@@ -51,28 +47,12 @@ export const ProfileIssuesViewOptions: React.FC = () => {
 
   const { isEstimateActive } = useEstimateOption();
 
-  const options = projects?.map((project) => ({
-    value: project.id,
-    query: project.name + " " + project.identifier,
-    content: project.name,
-  }));
-
   if (
     !router.pathname.includes("assigned") &&
     !router.pathname.includes("created") &&
     !router.pathname.includes("subscribed")
   )
     return null;
-  // return (
-  //   <CustomSearchSelect
-  //     value={projects ?? null}
-  //     onChange={(val: string[] | null) => console.log(val)}
-  //     label="Filters"
-  //     options={options}
-  //     position="right"
-  //     multiple
-  //   />
-  // );
 
   return (
     <div className="flex items-center gap-2">
@@ -287,38 +267,39 @@ export const ProfileIssuesViewOptions: React.FC = () => {
                   <div className="space-y-2 py-3">
                     <h4 className="text-sm text-custom-text-200">Display Properties</h4>
                     <div className="flex flex-wrap items-center gap-2 text-custom-text-200">
-                      {Object.keys(displayProperties).map((key) => {
-                        if (key === "estimate" && !isEstimateActive) return null;
+                      {displayProperties &&
+                        Object.keys(displayProperties).map((key) => {
+                          if (key === "estimate" && !isEstimateActive) return null;
 
-                        if (
-                          displayFilters?.layout === "spreadsheet" &&
-                          (key === "attachment_count" ||
-                            key === "link" ||
-                            key === "sub_issue_count")
-                        )
-                          return null;
+                          if (
+                            displayFilters?.layout === "spreadsheet" &&
+                            (key === "attachment_count" ||
+                              key === "link" ||
+                              key === "sub_issue_count")
+                          )
+                            return null;
 
-                        if (
-                          displayFilters?.layout !== "spreadsheet" &&
-                          (key === "created_on" || key === "updated_on")
-                        )
-                          return null;
+                          if (
+                            displayFilters?.layout !== "spreadsheet" &&
+                            (key === "created_on" || key === "updated_on")
+                          )
+                            return null;
 
-                        return (
-                          <button
-                            key={key}
-                            type="button"
-                            className={`rounded border px-2 py-1 text-xs capitalize ${
-                              displayProperties[key as keyof Properties]
-                                ? "border-custom-primary bg-custom-primary text-white"
-                                : "border-custom-border-200"
-                            }`}
-                            onClick={() => setProperties(key as keyof Properties)}
-                          >
-                            {key === "key" ? "ID" : replaceUnderscoreIfSnakeCase(key)}
-                          </button>
-                        );
-                      })}
+                          return (
+                            <button
+                              key={key}
+                              type="button"
+                              className={`rounded border px-2 py-1 text-xs capitalize ${
+                                displayProperties[key as keyof Properties]
+                                  ? "border-custom-primary bg-custom-primary text-white"
+                                  : "border-custom-border-200"
+                              }`}
+                              onClick={() => setProperties(key as keyof Properties)}
+                            >
+                              {key === "key" ? "ID" : replaceUnderscoreIfSnakeCase(key)}
+                            </button>
+                          );
+                        })}
                     </div>
                   </div>
                 </div>
diff --git a/web/components/ui/dropdowns/custom-menu.tsx b/web/components/ui/dropdowns/custom-menu.tsx
index c451d4432..41450b2b3 100644
--- a/web/components/ui/dropdowns/custom-menu.tsx
+++ b/web/components/ui/dropdowns/custom-menu.tsx
@@ -19,6 +19,7 @@ export type CustomMenuProps = DropdownProps & {
 
 const CustomMenu = ({
   buttonClassName = "",
+  customButtonClassName = "",
   children,
   className = "",
   customButton,
@@ -40,7 +41,12 @@ const CustomMenu = ({
     {({ open }) => (
       <>
         {customButton ? (
-          <Menu.Button as="button" type="button" onClick={menuButtonOnClick}>
+          <Menu.Button
+            as="button"
+            type="button"
+            onClick={menuButtonOnClick}
+            className={customButtonClassName}
+          >
             {customButton}
           </Menu.Button>
         ) : (
diff --git a/web/components/ui/dropdowns/types.d.ts b/web/components/ui/dropdowns/types.d.ts
index aace1858a..b368a7ed8 100644
--- a/web/components/ui/dropdowns/types.d.ts
+++ b/web/components/ui/dropdowns/types.d.ts
@@ -1,5 +1,6 @@
 export type DropdownProps = {
   buttonClassName?: string;
+  customButtonClassName?: string;
   className?: string;
   customButton?: JSX.Element;
   disabled?: boolean;
diff --git a/web/components/views/delete-view-modal.tsx b/web/components/views/delete-view-modal.tsx
index 0d49c62cc..61c627430 100644
--- a/web/components/views/delete-view-modal.tsx
+++ b/web/components/views/delete-view-modal.tsx
@@ -8,7 +8,6 @@ import { mutate } from "swr";
 import { Dialog, Transition } from "@headlessui/react";
 // services
 import viewsService from "services/views.service";
-import workspaceService from "services/workspace.service";
 // hooks
 import useToast from "hooks/use-toast";
 // ui
@@ -18,17 +17,16 @@ import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
 // types
 import type { ICurrentUserResponse, IView } from "types";
 // fetch-keys
-import { VIEWS_LIST, WORKSPACE_VIEWS_LIST } from "constants/fetch-keys";
+import { VIEWS_LIST } from "constants/fetch-keys";
 
 type Props = {
   isOpen: boolean;
-  viewType: "project" | "workspace";
   setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
   data: IView | null;
   user: ICurrentUserResponse | undefined;
 };
 
-export const DeleteViewModal: React.FC<Props> = ({ isOpen, data, setIsOpen, viewType, user }) => {
+export const DeleteViewModal: React.FC<Props> = ({ isOpen, data, setIsOpen, user }) => {
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
 
   const router = useRouter();
@@ -43,64 +41,33 @@ export const DeleteViewModal: React.FC<Props> = ({ isOpen, data, setIsOpen, view
 
   const handleDeletion = async () => {
     setIsDeleteLoading(true);
+    if (!workspaceSlug || !data || !projectId) return;
 
-    if (viewType === "project") {
-      if (!workspaceSlug || !data || !projectId) return;
+    await viewsService
+      .deleteView(workspaceSlug as string, projectId as string, data.id, user)
+      .then(() => {
+        mutate<IView[]>(VIEWS_LIST(projectId as string), (views) =>
+          views?.filter((view) => view.id !== data.id)
+        );
 
-      await viewsService
-        .deleteView(workspaceSlug as string, projectId as string, data.id, user)
-        .then(() => {
-          mutate<IView[]>(VIEWS_LIST(projectId as string), (views) =>
-            views?.filter((view) => view.id !== data.id)
-          );
+        handleClose();
 
-          handleClose();
-
-          setToastAlert({
-            type: "success",
-            title: "Success!",
-            message: "View deleted successfully.",
-          });
-        })
-        .catch(() => {
-          setToastAlert({
-            type: "error",
-            title: "Error!",
-            message: "View could not be deleted. Please try again.",
-          });
-        })
-        .finally(() => {
-          setIsDeleteLoading(false);
+        setToastAlert({
+          type: "success",
+          title: "Success!",
+          message: "View deleted successfully.",
         });
-    } else {
-      if (!workspaceSlug || !data) return;
-
-      await workspaceService
-        .deleteView(workspaceSlug as string, data.id)
-        .then(() => {
-          mutate<IView[]>(WORKSPACE_VIEWS_LIST(workspaceSlug as string), (views) =>
-            views?.filter((view) => view.id !== data.id)
-          );
-
-          handleClose();
-
-          setToastAlert({
-            type: "success",
-            title: "Success!",
-            message: "View deleted successfully.",
-          });
-        })
-        .catch(() => {
-          setToastAlert({
-            type: "error",
-            title: "Error!",
-            message: "View could not be deleted. Please try again.",
-          });
-        })
-        .finally(() => {
-          setIsDeleteLoading(false);
+      })
+      .catch(() => {
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "View could not be deleted. Please try again.",
         });
-    }
+      })
+      .finally(() => {
+        setIsDeleteLoading(false);
+      });
   };
 
   return (
diff --git a/web/components/views/form.tsx b/web/components/views/form.tsx
index 29d16ca9c..0c57a9542 100644
--- a/web/components/views/form.tsx
+++ b/web/components/views/form.tsx
@@ -10,8 +10,6 @@ import { useForm } from "react-hook-form";
 import stateService from "services/state.service";
 // hooks
 import useProjectMembers from "hooks/use-project-members";
-import useProjects from "hooks/use-projects";
-import useWorkspaceMembers from "hooks/use-workspace-members";
 // components
 import { FiltersList } from "components/core";
 import { SelectFilters } from "components/views";
@@ -24,14 +22,13 @@ import { getStatesList } from "helpers/state.helper";
 import { IQuery, IView } from "types";
 import issuesService from "services/issues.service";
 // fetch-keys
-import { PROJECT_ISSUE_LABELS, STATES_LIST, WORKSPACE_LABELS } from "constants/fetch-keys";
+import { PROJECT_ISSUE_LABELS, STATES_LIST } from "constants/fetch-keys";
 
 type Props = {
   handleFormSubmit: (values: IView) => Promise<void>;
   handleClose: () => void;
   status: boolean;
   data?: IView | null;
-  viewType?: "workspace" | "project";
   preLoadedData?: Partial<IView> | null;
 };
 
@@ -45,7 +42,6 @@ export const ViewForm: React.FC<Props> = ({
   handleClose,
   status,
   data,
-  viewType,
   preLoadedData,
 }) => {
   const router = useRouter();
@@ -81,26 +77,8 @@ export const ViewForm: React.FC<Props> = ({
       ? () => issuesService.getIssueLabels(workspaceSlug.toString(), projectId.toString())
       : null
   );
-
-  const { data: workspaceLabels } = useSWR(
-    workspaceSlug ? WORKSPACE_LABELS(workspaceSlug.toString()) : null,
-    workspaceSlug ? () => issuesService.getWorkspaceLabels(workspaceSlug.toString()) : null
-  );
-
-  const labelOptions = viewType === "workspace" ? workspaceLabels : labels;
-
   const { members } = useProjectMembers(workspaceSlug?.toString(), projectId?.toString());
 
-  const { workspaceMembers } = useWorkspaceMembers(workspaceSlug?.toString() ?? "");
-
-  const memberOptions =
-    viewType === "workspace"
-      ? workspaceMembers?.map((m) => m.member)
-      : members?.map((m) => m.member);
-
-  const { projects: allProjects } = useProjects();
-  const joinedProjects = allProjects?.filter((p) => p.is_member);
-
   const handleCreateUpdateView = async (formData: IView) => {
     await handleFormSubmit(formData);
 
@@ -113,14 +91,12 @@ export const ViewForm: React.FC<Props> = ({
     setValue("query", {
       assignees: null,
       created_by: null,
-      subscriber: null,
       labels: null,
       priority: null,
       state: null,
-      state_group: null,
       start_date: null,
       target_date: null,
-      project: null,
+      type: null,
     });
   };
 
@@ -209,10 +185,9 @@ export const ViewForm: React.FC<Props> = ({
           <div>
             <FiltersList
               filters={filters}
-              labels={labelOptions}
-              members={memberOptions}
+              labels={labels}
+              members={members?.map((m) => m.member)}
               states={states}
-              project={joinedProjects}
               clearAllFilters={clearAllFilters}
               setFilters={(query: any) => {
                 setValue("query", {
diff --git a/web/components/views/modal.tsx b/web/components/views/modal.tsx
index 03f4f0b60..c1ff54231 100644
--- a/web/components/views/modal.tsx
+++ b/web/components/views/modal.tsx
@@ -8,7 +8,6 @@ import { mutate } from "swr";
 import { Dialog, Transition } from "@headlessui/react";
 // services
 import viewsService from "services/views.service";
-import workspaceService from "services/workspace.service";
 // hooks
 import useToast from "hooks/use-toast";
 // components
@@ -16,11 +15,10 @@ import { ViewForm } from "components/views";
 // types
 import { ICurrentUserResponse, IView } from "types";
 // fetch-keys
-import { VIEWS_LIST, WORKSPACE_VIEWS_LIST } from "constants/fetch-keys";
+import { VIEWS_LIST } from "constants/fetch-keys";
 
 type Props = {
   isOpen: boolean;
-  viewType: "project" | "workspace";
   handleClose: () => void;
   data?: IView | null;
   preLoadedData?: Partial<IView> | null;
@@ -29,7 +27,6 @@ type Props = {
 
 export const CreateUpdateViewModal: React.FC<Props> = ({
   isOpen,
-  viewType,
   handleClose,
   data,
   preLoadedData,
@@ -49,48 +46,25 @@ export const CreateUpdateViewModal: React.FC<Props> = ({
       ...payload,
       query_data: payload.query,
     };
+    await viewsService
+      .createView(workspaceSlug as string, projectId as string, payload, user)
+      .then(() => {
+        mutate(VIEWS_LIST(projectId as string));
+        handleClose();
 
-    if (viewType === "project") {
-      await viewsService
-        .createView(workspaceSlug as string, projectId as string, payload, user)
-        .then(() => {
-          mutate(VIEWS_LIST(projectId as string));
-          handleClose();
-
-          setToastAlert({
-            type: "success",
-            title: "Success!",
-            message: "View created successfully.",
-          });
-        })
-        .catch(() => {
-          setToastAlert({
-            type: "error",
-            title: "Error!",
-            message: "View could not be created. Please try again.",
-          });
+        setToastAlert({
+          type: "success",
+          title: "Success!",
+          message: "View created successfully.",
         });
-    } else {
-      await workspaceService
-        .createView(workspaceSlug as string, payload)
-        .then(() => {
-          mutate(WORKSPACE_VIEWS_LIST(workspaceSlug as string));
-          handleClose();
-
-          setToastAlert({
-            type: "success",
-            title: "Success!",
-            message: "View created successfully.",
-          });
-        })
-        .catch(() => {
-          setToastAlert({
-            type: "error",
-            title: "Error!",
-            message: "View could not be created. Please try again.",
-          });
+      })
+      .catch(() => {
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "View could not be created. Please try again.",
         });
-    }
+      });
   };
 
   const updateView = async (payload: IView) => {
@@ -98,79 +72,41 @@ export const CreateUpdateViewModal: React.FC<Props> = ({
       ...payload,
       query_data: payload.query,
     };
-    if (viewType === "project") {
-      await viewsService
-        .updateView(workspaceSlug as string, projectId as string, data?.id ?? "", payloadData, user)
-        .then((res) => {
-          mutate<IView[]>(
-            VIEWS_LIST(projectId as string),
-            (prevData) =>
-              prevData?.map((p) => {
-                if (p.id === res.id) return { ...p, ...payloadData };
+    await viewsService
+      .updateView(workspaceSlug as string, projectId as string, data?.id ?? "", payloadData, user)
+      .then((res) => {
+        mutate<IView[]>(
+          VIEWS_LIST(projectId as string),
+          (prevData) =>
+            prevData?.map((p) => {
+              if (p.id === res.id) return { ...p, ...payloadData };
 
-                return p;
-              }),
-            false
-          );
-          onClose();
+              return p;
+            }),
+          false
+        );
+        onClose();
 
-          setToastAlert({
-            type: "success",
-            title: "Success!",
-            message: "View updated successfully.",
-          });
-        })
-        .catch(() => {
-          setToastAlert({
-            type: "error",
-            title: "Error!",
-            message: "View could not be updated. Please try again.",
-          });
+        setToastAlert({
+          type: "success",
+          title: "Success!",
+          message: "View updated successfully.",
         });
-    } else {
-      await workspaceService
-        .updateView(workspaceSlug as string, data?.id ?? "", payloadData)
-        .then((res) => {
-          mutate<IView[]>(
-            WORKSPACE_VIEWS_LIST(workspaceSlug as string),
-            (prevData) =>
-              prevData?.map((p) => {
-                if (p.id === res.id) return { ...p, ...payloadData };
-
-                return p;
-              }),
-            false
-          );
-          onClose();
-
-          setToastAlert({
-            type: "success",
-            title: "Success!",
-            message: "View updated successfully.",
-          });
-        })
-        .catch(() => {
-          setToastAlert({
-            type: "error",
-            title: "Error!",
-            message: "View could not be updated. Please try again.",
-          });
+      })
+      .catch(() => {
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "View could not be updated. Please try again.",
         });
-    }
+      });
   };
 
   const handleFormSubmit = async (formData: IView) => {
-    if (viewType === "project") {
-      if (!workspaceSlug || !projectId) return;
+    if (!workspaceSlug || !projectId) return;
 
-      if (!data) await createView(formData);
-      else await updateView(formData);
-    } else {
-      if (!workspaceSlug) return;
-
-      if (!data) await createView(formData);
-      else await updateView(formData);
-    }
+    if (!data) await createView(formData);
+    else await updateView(formData);
   };
 
   return (
@@ -205,7 +141,6 @@ export const CreateUpdateViewModal: React.FC<Props> = ({
                   handleClose={handleClose}
                   status={data ? true : false}
                   data={data}
-                  viewType={viewType}
                   preLoadedData={preLoadedData}
                 />
               </Dialog.Panel>
diff --git a/web/components/views/select-filters.tsx b/web/components/views/select-filters.tsx
index 7b1324f5f..c3aadc33d 100644
--- a/web/components/views/select-filters.tsx
+++ b/web/components/views/select-filters.tsx
@@ -4,9 +4,6 @@ import { useRouter } from "next/router";
 
 import useSWR from "swr";
 
-// hook
-import useProjects from "hooks/use-projects";
-import useWorkspaceMembers from "hooks/use-workspace-members";
 // services
 import stateService from "services/state.service";
 import projectService from "services/project.service";
@@ -21,16 +18,11 @@ import { PriorityIcon, StateGroupIcon } from "components/icons";
 import { getStatesList } from "helpers/state.helper";
 import { checkIfArraysHaveSameElements } from "helpers/array.helper";
 // types
-import { IIssueFilterOptions, TStateGroups } from "types";
+import { IIssueFilterOptions } from "types";
 // fetch-keys
-import {
-  PROJECT_ISSUE_LABELS,
-  PROJECT_MEMBERS,
-  STATES_LIST,
-  WORKSPACE_LABELS,
-} from "constants/fetch-keys";
+import { PROJECT_ISSUE_LABELS, PROJECT_MEMBERS, STATES_LIST } from "constants/fetch-keys";
 // constants
-import { GROUP_CHOICES, PRIORITIES } from "constants/project";
+import { PRIORITIES } from "constants/project";
 import { DATE_FILTER_OPTIONS } from "constants/filters";
 
 type Props = {
@@ -56,7 +48,7 @@ export const SelectFilters: React.FC<Props> = ({
   });
 
   const router = useRouter();
-  const { workspaceSlug, projectId, workspaceViewId } = router.query;
+  const { workspaceSlug, projectId } = router.query;
 
   const { data: states } = useSWR(
     workspaceSlug && projectId ? STATES_LIST(projectId as string) : null,
@@ -66,20 +58,6 @@ export const SelectFilters: React.FC<Props> = ({
   );
   const statesList = getStatesList(states);
 
-  const workspaceViewPathName = [
-    "workspace-views",
-    "workspace-views/all-issues",
-    "workspace-views/assigned",
-    "workspace-views/created",
-    "workspace-views/subscribed",
-  ];
-
-  const isWorkspaceViewPath = workspaceViewPathName.some((pathname) =>
-    router.pathname.includes(pathname)
-  );
-
-  const isWorkspaceView = isWorkspaceViewPath || workspaceViewId;
-
   const { data: members } = useSWR(
     projectId ? PROJECT_MEMBERS(projectId as string) : null,
     workspaceSlug && projectId
@@ -87,8 +65,6 @@ export const SelectFilters: React.FC<Props> = ({
       : null
   );
 
-  const { workspaceMembers } = useWorkspaceMembers(workspaceSlug?.toString() ?? "");
-
   const { data: issueLabels } = useSWR(
     projectId ? PROJECT_ISSUE_LABELS(projectId.toString()) : null,
     workspaceSlug && projectId
@@ -96,14 +72,6 @@ export const SelectFilters: React.FC<Props> = ({
       : null
   );
 
-  const { data: workspaceLabels } = useSWR(
-    workspaceSlug ? WORKSPACE_LABELS(workspaceSlug.toString()) : null,
-    workspaceSlug ? () => issuesService.getWorkspaceLabels(workspaceSlug.toString()) : null
-  );
-
-  const { projects: allProjects } = useProjects();
-  const joinedProjects = allProjects?.filter((p) => p.is_member);
-
   const projectFilterOption = [
     {
       id: "priority",
@@ -283,226 +251,6 @@ export const SelectFilters: React.FC<Props> = ({
       ],
     },
   ];
-
-  const workspaceFilterOption = [
-    {
-      id: "project",
-      label: "Project",
-      value: joinedProjects,
-      hasChildren: true,
-      children: joinedProjects?.map((project) => ({
-        id: project.id,
-        label: <div className="flex items-center gap-2">{project.name}</div>,
-        value: {
-          key: "project",
-          value: project.id,
-        },
-        selected: filters?.project?.includes(project.id),
-      })),
-    },
-    {
-      id: "state_group",
-      label: "State groups",
-      value: GROUP_CHOICES,
-      hasChildren: true,
-      children: [
-        ...Object.keys(GROUP_CHOICES).map((key) => ({
-          id: key,
-          label: (
-            <div className="flex items-center gap-2">
-              <StateGroupIcon stateGroup={key as TStateGroups} />
-              {GROUP_CHOICES[key as keyof typeof GROUP_CHOICES]}
-            </div>
-          ),
-          value: {
-            key: "state_group",
-            value: key,
-          },
-          selected: filters?.state?.includes(key),
-        })),
-      ],
-    },
-    {
-      id: "labels",
-      label: "Labels",
-      value: workspaceLabels,
-      hasChildren: true,
-      children: workspaceLabels?.map((label) => ({
-        id: label.id,
-        label: (
-          <div className="flex items-center gap-2">
-            <div
-              className="h-2 w-2 rounded-full"
-              style={{
-                backgroundColor: label.color && label.color !== "" ? label.color : "#000000",
-              }}
-            />
-            {label.name}
-          </div>
-        ),
-        value: {
-          key: "labels",
-          value: label.id,
-        },
-        selected: filters?.labels?.includes(label.id),
-      })),
-    },
-    {
-      id: "priority",
-      label: "Priority",
-      value: PRIORITIES,
-      hasChildren: true,
-      children: PRIORITIES.map((priority) => ({
-        id: priority === null ? "null" : priority,
-        label: (
-          <div className="flex items-center gap-2 capitalize">
-            <PriorityIcon priority={priority} />
-            {priority ?? "None"}
-          </div>
-        ),
-        value: {
-          key: "priority",
-          value: priority === null ? "null" : priority,
-        },
-        selected: filters?.priority?.includes(priority === null ? "null" : priority),
-      })),
-    },
-    {
-      id: "created_by",
-      label: "Created by",
-      value: workspaceMembers,
-      hasChildren: true,
-      children: workspaceMembers?.map((member) => ({
-        id: member.member.id,
-        label: (
-          <div className="flex items-center gap-2">
-            <Avatar user={member.member} />
-            {member.member.display_name}
-          </div>
-        ),
-        value: {
-          key: "created_by",
-          value: member.member.id,
-        },
-        selected: filters?.created_by?.includes(member.member.id),
-      })),
-    },
-    {
-      id: "assignees",
-      label: "Assignees",
-      value: workspaceMembers,
-      hasChildren: true,
-      children: workspaceMembers?.map((member) => ({
-        id: member.member.id,
-        label: (
-          <div className="flex items-center gap-2">
-            <Avatar user={member.member} />
-            {member.member.display_name}
-          </div>
-        ),
-        value: {
-          key: "assignees",
-          value: member.member.id,
-        },
-        selected: filters?.assignees?.includes(member.member.id),
-      })),
-    },
-    {
-      id: "subscriber",
-      label: "Subscriber",
-      value: workspaceMembers,
-      hasChildren: true,
-      children: workspaceMembers?.map((member) => ({
-        id: member.member.id,
-        label: (
-          <div className="flex items-center gap-2">
-            <Avatar user={member.member} />
-            {member.member.display_name}
-          </div>
-        ),
-        value: {
-          key: "subscriber",
-          value: member.member.id,
-        },
-        selected: filters?.subscriber?.includes(member.member.id),
-      })),
-    },
-    {
-      id: "start_date",
-      label: "Start date",
-      value: DATE_FILTER_OPTIONS,
-      hasChildren: true,
-      children: [
-        ...DATE_FILTER_OPTIONS.map((option) => ({
-          id: option.name,
-          label: option.name,
-          value: {
-            key: "start_date",
-            value: option.value,
-          },
-          selected: checkIfArraysHaveSameElements(filters?.start_date ?? [], option.value),
-        })),
-        {
-          id: "custom",
-          label: "Custom",
-          value: "custom",
-          element: (
-            <button
-              onClick={() => {
-                setIsDateFilterModalOpen(true);
-                setDateFilterType({
-                  title: "Start date",
-                  type: "start_date",
-                });
-              }}
-              className="w-full rounded px-1 py-1.5 text-left text-custom-text-200 hover:bg-custom-background-80"
-            >
-              Custom
-            </button>
-          ),
-        },
-      ],
-    },
-    {
-      id: "target_date",
-      label: "Due date",
-      value: DATE_FILTER_OPTIONS,
-      hasChildren: true,
-      children: [
-        ...DATE_FILTER_OPTIONS.map((option) => ({
-          id: option.name,
-          label: option.name,
-          value: {
-            key: "target_date",
-            value: option.value,
-          },
-          selected: checkIfArraysHaveSameElements(filters?.target_date ?? [], option.value),
-        })),
-        {
-          id: "custom",
-          label: "Custom",
-          value: "custom",
-          element: (
-            <button
-              onClick={() => {
-                setIsDateFilterModalOpen(true);
-                setDateFilterType({
-                  title: "Due date",
-                  type: "target_date",
-                });
-              }}
-              className="w-full rounded px-1 py-1.5 text-left text-custom-text-200 hover:bg-custom-background-80"
-            >
-              Custom
-            </button>
-          ),
-        },
-      ],
-    },
-  ];
-
-  const filterOption = isWorkspaceView ? workspaceFilterOption : projectFilterOption;
-
   return (
     <>
       {isDateFilterModalOpen && (
@@ -520,7 +268,7 @@ export const SelectFilters: React.FC<Props> = ({
         onSelect={onSelect}
         direction={direction}
         height={height}
-        options={filterOption}
+        options={projectFilterOption}
       />
     </>
   );
diff --git a/web/components/views/single-view-item.tsx b/web/components/views/single-view-item.tsx
index d27eb3cf1..a2e0d213a 100644
--- a/web/components/views/single-view-item.tsx
+++ b/web/components/views/single-view-item.tsx
@@ -12,6 +12,7 @@ import { CustomMenu } from "components/ui";
 import viewsService from "services/views.service";
 // types
 import { IView } from "types";
+import { IWorkspaceView } from "types/workspace-views";
 // fetch keys
 import { VIEWS_LIST } from "constants/fetch-keys";
 // hooks
@@ -20,7 +21,7 @@ import useToast from "hooks/use-toast";
 import { truncateText } from "helpers/string.helper";
 
 type Props = {
-  view: IView;
+  view: IView | IWorkspaceView;
   viewType: "project" | "workspace";
   handleEditView: () => void;
   handleDeleteView: () => void;
diff --git a/web/components/workspace/views/delete-workspace-view-modal.tsx b/web/components/workspace/views/delete-workspace-view-modal.tsx
new file mode 100644
index 000000000..6030f630f
--- /dev/null
+++ b/web/components/workspace/views/delete-workspace-view-modal.tsx
@@ -0,0 +1,141 @@
+import React, { useState } from "react";
+
+import { useRouter } from "next/router";
+
+import { mutate } from "swr";
+
+// headless ui
+import { Dialog, Transition } from "@headlessui/react";
+// services
+import workspaceService from "services/workspace.service";
+// hooks
+import useToast from "hooks/use-toast";
+// ui
+import { DangerButton, SecondaryButton } from "components/ui";
+// icons
+import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
+// types
+import { IWorkspaceView } from "types/workspace-views";
+// fetch-keys
+import { WORKSPACE_VIEWS_LIST } from "constants/fetch-keys";
+
+type Props = {
+  isOpen: boolean;
+  setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  data: IWorkspaceView | null;
+};
+
+export const DeleteWorkspaceViewModal: React.FC<Props> = ({ isOpen, data, setIsOpen }) => {
+  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
+
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  const { setToastAlert } = useToast();
+
+  const handleClose = () => {
+    setIsOpen(false);
+    setIsDeleteLoading(false);
+  };
+
+  const handleDeletion = async () => {
+    setIsDeleteLoading(true);
+
+    if (!workspaceSlug || !data) return;
+
+    await workspaceService
+      .deleteView(workspaceSlug as string, data.id)
+      .then(() => {
+        mutate<IWorkspaceView[]>(WORKSPACE_VIEWS_LIST(workspaceSlug as string), (views) =>
+          views?.filter((view) => view.id !== data.id)
+        );
+
+        handleClose();
+
+        setToastAlert({
+          type: "success",
+          title: "Success!",
+          message: "View deleted successfully.",
+        });
+      })
+      .catch(() => {
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "View could not be deleted. Please try again.",
+        });
+      })
+      .finally(() => {
+        setIsDeleteLoading(false);
+      });
+  };
+
+  return (
+    <Transition.Root show={isOpen} as={React.Fragment}>
+      <Dialog as="div" className="relative z-20" onClose={handleClose}>
+        <Transition.Child
+          as={React.Fragment}
+          enter="ease-out duration-300"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          leave="ease-in duration-200"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" />
+        </Transition.Child>
+
+        <div className="fixed inset-0 z-20 overflow-y-auto">
+          <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
+            <Transition.Child
+              as={React.Fragment}
+              enter="ease-out duration-300"
+              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+              enterTo="opacity-100 translate-y-0 sm:scale-100"
+              leave="ease-in duration-200"
+              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 overflow-hidden rounded-lg border border-custom-border-200 bg-custom-background-100 text-left shadow-xl transition-all sm:my-8 sm:w-[40rem]">
+                <div className="px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+                  <div className="sm:flex sm:items-start">
+                    <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-500/20 sm:mx-0 sm:h-10 sm:w-10">
+                      <ExclamationTriangleIcon
+                        className="h-6 w-6 text-red-600"
+                        aria-hidden="true"
+                      />
+                    </div>
+                    <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
+                      <Dialog.Title
+                        as="h3"
+                        className="text-lg font-medium leading-6 text-custom-text-100"
+                      >
+                        Delete View
+                      </Dialog.Title>
+                      <div className="mt-2">
+                        <p className="text-sm text-custom-text-200">
+                          Are you sure you want to delete view-{" "}
+                          <span className="break-words font-medium text-custom-text-100">
+                            {data?.name}
+                          </span>
+                          ? All of the data related to the view will be permanently removed. This
+                          action cannot be undone.
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div className="flex justify-end gap-2 p-4 sm:px-6">
+                  <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
+                  <DangerButton onClick={handleDeletion} loading={isDeleteLoading}>
+                    {isDeleteLoading ? "Deleting..." : "Delete"}
+                  </DangerButton>
+                </div>
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
+};
diff --git a/web/components/workspace/views/form.tsx b/web/components/workspace/views/form.tsx
new file mode 100644
index 000000000..b16d61399
--- /dev/null
+++ b/web/components/workspace/views/form.tsx
@@ -0,0 +1,213 @@
+import { useEffect } from "react";
+
+import { useRouter } from "next/router";
+
+import useSWR from "swr";
+
+// react-hook-form
+import { useForm } from "react-hook-form";
+// services
+import issuesService from "services/issues.service";
+
+// hooks
+import useProjects from "hooks/use-projects";
+import useWorkspaceMembers from "hooks/use-workspace-members";
+// components
+import { WorkspaceFiltersList } from "components/core";
+import { GlobalSelectFilters } from "components/workspace/views/global-select-filters";
+
+// ui
+import { Input, PrimaryButton, SecondaryButton, TextArea } from "components/ui";
+// helpers
+import { checkIfArraysHaveSameElements } from "helpers/array.helper";
+// types
+import { IQuery } from "types";
+import { IWorkspaceView } from "types/workspace-views";
+// fetch-keys
+import { WORKSPACE_LABELS } from "constants/fetch-keys";
+import { STATE_GROUP } from "constants/project";
+
+type Props = {
+  handleFormSubmit: (values: IWorkspaceView) => Promise<void>;
+  handleClose: () => void;
+  status: boolean;
+  data?: IWorkspaceView | null;
+  preLoadedData?: Partial<IWorkspaceView> | null;
+};
+
+const defaultValues: Partial<IWorkspaceView> = {
+  name: "",
+  description: "",
+};
+
+export const WorkspaceViewForm: React.FC<Props> = ({
+  handleFormSubmit,
+  handleClose,
+  status,
+  data,
+  preLoadedData,
+}) => {
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  const {
+    register,
+    formState: { errors, isSubmitting },
+    handleSubmit,
+    reset,
+    watch,
+    setValue,
+  } = useForm<any>({
+    defaultValues,
+  });
+  const filters = watch("query");
+
+  const { data: labelOptions } = useSWR(
+    workspaceSlug ? WORKSPACE_LABELS(workspaceSlug.toString()) : null,
+    workspaceSlug ? () => issuesService.getWorkspaceLabels(workspaceSlug.toString()) : null
+  );
+
+  const { workspaceMembers } = useWorkspaceMembers(workspaceSlug?.toString() ?? "");
+
+  const memberOptions = workspaceMembers?.map((m) => m.member);
+
+  const { projects: allProjects } = useProjects();
+  const joinedProjects = allProjects?.filter((p) => p.is_member);
+
+  const handleCreateUpdateView = async (formData: IWorkspaceView) => {
+    await handleFormSubmit(formData);
+
+    reset({
+      ...defaultValues,
+    });
+  };
+
+  const clearAllFilters = () => {
+    setValue("query", {
+      assignees: null,
+      created_by: null,
+      subscriber: null,
+      labels: null,
+      priority: null,
+      state_group: null,
+      start_date: null,
+      target_date: null,
+      project: null,
+    });
+  };
+
+  useEffect(() => {
+    reset({
+      ...defaultValues,
+      ...preLoadedData,
+      ...data,
+    });
+  }, [data, preLoadedData, reset]);
+
+  useEffect(() => {
+    if (status && data) {
+      setValue("query", data.query_data);
+    }
+  }, [data, status, setValue]);
+
+  return (
+    <form onSubmit={handleSubmit(handleCreateUpdateView)}>
+      <div className="space-y-5">
+        <h3 className="text-lg font-medium leading-6 text-custom-text-100">
+          {status ? "Update" : "Create"} View
+        </h3>
+        <div className="space-y-3">
+          <div>
+            <Input
+              id="name"
+              name="name"
+              type="name"
+              placeholder="Title"
+              autoComplete="off"
+              className="resize-none text-xl"
+              error={errors.name}
+              register={register}
+              validations={{
+                required: "Title is required",
+                maxLength: {
+                  value: 255,
+                  message: "Title should be less than 255 characters",
+                },
+              }}
+            />
+          </div>
+          <div>
+            <TextArea
+              id="description"
+              name="description"
+              placeholder="Description"
+              className="h-32 resize-none text-sm"
+              error={errors.description}
+              register={register}
+            />
+          </div>
+          <div>
+            <GlobalSelectFilters
+              filters={filters}
+              onSelect={(option) => {
+                const key = option.key as keyof typeof filters;
+
+                if (key === "start_date" || key === "target_date") {
+                  const valueExists = checkIfArraysHaveSameElements(
+                    filters?.[key] ?? [],
+                    option.value
+                  );
+
+                  setValue("query", {
+                    ...filters,
+                    [key]: valueExists ? null : option.value,
+                  } as IQuery);
+                } else {
+                  if (!filters?.[key]?.includes(option.value))
+                    setValue("query", {
+                      ...filters,
+                      [key]: [...((filters?.[key] as any[]) ?? []), option.value],
+                    });
+                  else {
+                    setValue("query", {
+                      ...filters,
+                      [key]: (filters?.[key] as any[])?.filter((item) => item !== option.value),
+                    });
+                  }
+                }
+              }}
+            />
+          </div>
+          <div>
+            <WorkspaceFiltersList
+              filters={filters}
+              labels={labelOptions}
+              members={memberOptions}
+              project={joinedProjects}
+              stateGroup={STATE_GROUP}
+              clearAllFilters={clearAllFilters}
+              setFilters={(query: any) => {
+                setValue("query", {
+                  ...filters,
+                  ...query,
+                });
+              }}
+            />
+          </div>
+        </div>
+      </div>
+      <div className="mt-5 flex justify-end gap-2">
+        <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
+        <PrimaryButton type="submit" loading={isSubmitting}>
+          {status
+            ? isSubmitting
+              ? "Updating View..."
+              : "Update View"
+            : isSubmitting
+            ? "Creating View..."
+            : "Create View"}
+        </PrimaryButton>
+      </div>
+    </form>
+  );
+};
diff --git a/web/components/workspace/views/global-select-filters.tsx b/web/components/workspace/views/global-select-filters.tsx
new file mode 100644
index 000000000..967ee1bf8
--- /dev/null
+++ b/web/components/workspace/views/global-select-filters.tsx
@@ -0,0 +1,301 @@
+import { useState } from "react";
+
+import { useRouter } from "next/router";
+
+import useSWR from "swr";
+
+// hook
+import useProjects from "hooks/use-projects";
+import useWorkspaceMembers from "hooks/use-workspace-members";
+// services
+import issuesService from "services/issues.service";
+// components
+import { DateFilterModal } from "components/core";
+// ui
+import { Avatar, MultiLevelDropdown } from "components/ui";
+// icons
+import { PriorityIcon, StateGroupIcon } from "components/icons";
+// helpers
+import { checkIfArraysHaveSameElements } from "helpers/array.helper";
+// types
+import { IWorkspaceIssueFilterOptions, TStateGroups } from "types";
+// fetch-keys
+import { WORKSPACE_LABELS } from "constants/fetch-keys";
+// constants
+import { GROUP_CHOICES, PRIORITIES } from "constants/project";
+import { DATE_FILTER_OPTIONS } from "constants/filters";
+
+type Props = {
+  filters: Partial<IWorkspaceIssueFilterOptions>;
+  onSelect: (option: any) => void;
+  direction?: "left" | "right";
+  height?: "sm" | "md" | "rg" | "lg";
+};
+
+export const GlobalSelectFilters: React.FC<Props> = ({
+  filters,
+  onSelect,
+  direction = "right",
+  height = "md",
+}) => {
+  const [isDateFilterModalOpen, setIsDateFilterModalOpen] = useState(false);
+  const [dateFilterType, setDateFilterType] = useState<{
+    title: string;
+    type: "start_date" | "target_date";
+  }>({
+    title: "",
+    type: "start_date",
+  });
+
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  const { workspaceMembers } = useWorkspaceMembers(workspaceSlug?.toString() ?? "");
+
+  const { data: workspaceLabels } = useSWR(
+    workspaceSlug ? WORKSPACE_LABELS(workspaceSlug.toString()) : null,
+    workspaceSlug ? () => issuesService.getWorkspaceLabels(workspaceSlug.toString()) : null
+  );
+
+  const { projects: allProjects } = useProjects();
+  const joinedProjects = allProjects?.filter((p) => p.is_member);
+
+  const workspaceFilterOption = [
+    {
+      id: "project",
+      label: "Project",
+      value: joinedProjects,
+      hasChildren: true,
+      children: joinedProjects?.map((project) => ({
+        id: project.id,
+        label: <div className="flex items-center gap-2">{project.name}</div>,
+        value: {
+          key: "project",
+          value: project.id,
+        },
+        selected: filters?.project?.includes(project.id),
+      })),
+    },
+    {
+      id: "state_group",
+      label: "State groups",
+      value: GROUP_CHOICES,
+      hasChildren: true,
+      children: [
+        ...Object.keys(GROUP_CHOICES).map((key) => ({
+          id: key,
+          label: (
+            <div className="flex items-center gap-2">
+              <StateGroupIcon stateGroup={key as TStateGroups} />
+              {GROUP_CHOICES[key as keyof typeof GROUP_CHOICES]}
+            </div>
+          ),
+          value: {
+            key: "state_group",
+            value: key,
+          },
+          selected: filters?.state_group?.includes(key),
+        })),
+      ],
+    },
+    {
+      id: "labels",
+      label: "Labels",
+      value: workspaceLabels,
+      hasChildren: true,
+      children: workspaceLabels?.map((label) => ({
+        id: label.id,
+        label: (
+          <div className="flex items-center gap-2">
+            <div
+              className="h-2 w-2 rounded-full"
+              style={{
+                backgroundColor: label.color && label.color !== "" ? label.color : "#000000",
+              }}
+            />
+            {label.name}
+          </div>
+        ),
+        value: {
+          key: "labels",
+          value: label.id,
+        },
+        selected: filters?.labels?.includes(label.id),
+      })),
+    },
+    {
+      id: "priority",
+      label: "Priority",
+      value: PRIORITIES,
+      hasChildren: true,
+      children: PRIORITIES.map((priority) => ({
+        id: priority === null ? "null" : priority,
+        label: (
+          <div className="flex items-center gap-2 capitalize">
+            <PriorityIcon priority={priority} />
+            {priority ?? "None"}
+          </div>
+        ),
+        value: {
+          key: "priority",
+          value: priority === null ? "null" : priority,
+        },
+        selected: filters?.priority?.includes(priority === null ? "null" : priority),
+      })),
+    },
+    {
+      id: "created_by",
+      label: "Created by",
+      value: workspaceMembers,
+      hasChildren: true,
+      children: workspaceMembers?.map((member) => ({
+        id: member.member.id,
+        label: (
+          <div className="flex items-center gap-2">
+            <Avatar user={member.member} />
+            {member.member.display_name}
+          </div>
+        ),
+        value: {
+          key: "created_by",
+          value: member.member.id,
+        },
+        selected: filters?.created_by?.includes(member.member.id),
+      })),
+    },
+    {
+      id: "assignees",
+      label: "Assignees",
+      value: workspaceMembers,
+      hasChildren: true,
+      children: workspaceMembers?.map((member) => ({
+        id: member.member.id,
+        label: (
+          <div className="flex items-center gap-2">
+            <Avatar user={member.member} />
+            {member.member.display_name}
+          </div>
+        ),
+        value: {
+          key: "assignees",
+          value: member.member.id,
+        },
+        selected: filters?.assignees?.includes(member.member.id),
+      })),
+    },
+    {
+      id: "subscriber",
+      label: "Subscriber",
+      value: workspaceMembers,
+      hasChildren: true,
+      children: workspaceMembers?.map((member) => ({
+        id: member.member.id,
+        label: (
+          <div className="flex items-center gap-2">
+            <Avatar user={member.member} />
+            {member.member.display_name}
+          </div>
+        ),
+        value: {
+          key: "subscriber",
+          value: member.member.id,
+        },
+        selected: filters?.subscriber?.includes(member.member.id),
+      })),
+    },
+    {
+      id: "start_date",
+      label: "Start date",
+      value: DATE_FILTER_OPTIONS,
+      hasChildren: true,
+      children: [
+        ...DATE_FILTER_OPTIONS.map((option) => ({
+          id: option.name,
+          label: option.name,
+          value: {
+            key: "start_date",
+            value: option.value,
+          },
+          selected: checkIfArraysHaveSameElements(filters?.start_date ?? [], option.value),
+        })),
+        {
+          id: "custom",
+          label: "Custom",
+          value: "custom",
+          element: (
+            <button
+              onClick={() => {
+                setIsDateFilterModalOpen(true);
+                setDateFilterType({
+                  title: "Start date",
+                  type: "start_date",
+                });
+              }}
+              className="w-full rounded px-1 py-1.5 text-left text-custom-text-200 hover:bg-custom-background-80"
+            >
+              Custom
+            </button>
+          ),
+        },
+      ],
+    },
+    {
+      id: "target_date",
+      label: "Due date",
+      value: DATE_FILTER_OPTIONS,
+      hasChildren: true,
+      children: [
+        ...DATE_FILTER_OPTIONS.map((option) => ({
+          id: option.name,
+          label: option.name,
+          value: {
+            key: "target_date",
+            value: option.value,
+          },
+          selected: checkIfArraysHaveSameElements(filters?.target_date ?? [], option.value),
+        })),
+        {
+          id: "custom",
+          label: "Custom",
+          value: "custom",
+          element: (
+            <button
+              onClick={() => {
+                setIsDateFilterModalOpen(true);
+                setDateFilterType({
+                  title: "Due date",
+                  type: "target_date",
+                });
+              }}
+              className="w-full rounded px-1 py-1.5 text-left text-custom-text-200 hover:bg-custom-background-80"
+            >
+              Custom
+            </button>
+          ),
+        },
+      ],
+    },
+  ];
+
+  return (
+    <>
+      {isDateFilterModalOpen && (
+        <DateFilterModal
+          title={dateFilterType.title}
+          field={dateFilterType.type}
+          filters={filters as IWorkspaceIssueFilterOptions}
+          handleClose={() => setIsDateFilterModalOpen(false)}
+          isOpen={isDateFilterModalOpen}
+          onSelect={onSelect}
+        />
+      )}
+      <MultiLevelDropdown
+        label="Filters"
+        onSelect={onSelect}
+        direction={direction}
+        height={height}
+        options={workspaceFilterOption}
+      />
+    </>
+  );
+};
diff --git a/web/components/workspace/views/modal.tsx b/web/components/workspace/views/modal.tsx
new file mode 100644
index 000000000..48c3570cc
--- /dev/null
+++ b/web/components/workspace/views/modal.tsx
@@ -0,0 +1,155 @@
+import React from "react";
+
+import { useRouter } from "next/router";
+
+import { mutate } from "swr";
+
+// headless ui
+import { Dialog, Transition } from "@headlessui/react";
+// services
+import workspaceService from "services/workspace.service";
+// hooks
+import useToast from "hooks/use-toast";
+// components
+import { WorkspaceViewForm } from "components/workspace/views/form";
+// types
+import { IWorkspaceView } from "types/workspace-views";
+// fetch-keys
+import { WORKSPACE_VIEWS_LIST } from "constants/fetch-keys";
+
+type Props = {
+  isOpen: boolean;
+  handleClose: () => void;
+  data?: IWorkspaceView | null;
+  preLoadedData?: Partial<IWorkspaceView> | null;
+};
+
+export const CreateUpdateWorkspaceViewModal: React.FC<Props> = ({
+  isOpen,
+  handleClose,
+  data,
+  preLoadedData,
+}) => {
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  const { setToastAlert } = useToast();
+
+  const onClose = () => {
+    handleClose();
+  };
+
+  const createView = async (payload: any) => {
+    const payloadData = {
+      ...payload,
+      query_data: {
+        filters: payload.query,
+      },
+    };
+    await workspaceService
+      .createView(workspaceSlug as string, payloadData)
+      .then(() => {
+        mutate(WORKSPACE_VIEWS_LIST(workspaceSlug as string));
+        handleClose();
+
+        setToastAlert({
+          type: "success",
+          title: "Success!",
+          message: "View created successfully.",
+        });
+      })
+      .catch(() => {
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "View could not be created. Please try again.",
+        });
+      });
+  };
+
+  const updateView = async (payload: any) => {
+    const payloadData = {
+      ...payload,
+      query_data: {
+        filters: payload.query,
+      },
+    };
+    await workspaceService
+      .updateView(workspaceSlug as string, data?.id ?? "", payloadData)
+      .then((res) => {
+        mutate<IWorkspaceView[]>(
+          WORKSPACE_VIEWS_LIST(workspaceSlug as string),
+          (prevData) =>
+            prevData?.map((p) => {
+              if (p.id === res.id) return { ...p, ...payloadData };
+
+              return p;
+            }),
+          false
+        );
+        onClose();
+
+        setToastAlert({
+          type: "success",
+          title: "Success!",
+          message: "View updated successfully.",
+        });
+      })
+      .catch(() => {
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "View could not be updated. Please try again.",
+        });
+      });
+  };
+
+  const handleFormSubmit = async (formData: any) => {
+    if (!workspaceSlug) return;
+
+    if (!data) await createView(formData);
+    else await updateView(formData);
+  };
+
+  return (
+    <Transition.Root show={isOpen} as={React.Fragment}>
+      <Dialog as="div" className="relative z-20" onClose={handleClose}>
+        <Transition.Child
+          as={React.Fragment}
+          enter="ease-out duration-300"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          leave="ease-in duration-200"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" />
+        </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">
+            <Transition.Child
+              as={React.Fragment}
+              enter="ease-out duration-300"
+              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+              enterTo="opacity-100 translate-y-0 sm:scale-100"
+              leave="ease-in duration-200"
+              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 border border-custom-border-200 bg-custom-background-100 px-5 py-8 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
+                <WorkspaceViewForm
+                  handleFormSubmit={handleFormSubmit}
+                  handleClose={handleClose}
+                  status={data ? true : false}
+                  data={data}
+                  preLoadedData={preLoadedData}
+                />
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
+};
diff --git a/web/constants/fetch-keys.ts b/web/constants/fetch-keys.ts
index a1ead117f..ec6d38d1e 100644
--- a/web/constants/fetch-keys.ts
+++ b/web/constants/fetch-keys.ts
@@ -14,6 +14,7 @@ const paramsToKey = (params: any) => {
     sub_issue,
     start_target_date,
     project,
+    layout,
     subscriber,
   } = params;
 
@@ -31,6 +32,7 @@ const paramsToKey = (params: any) => {
   const type = params.type ? params.type.toUpperCase() : "NULL";
   const groupBy = params.group_by ? params.group_by.toUpperCase() : "NULL";
   const orderBy = params.order_by ? params.order_by.toUpperCase() : "NULL";
+  const layoutKey = layout ? layout.toUpperCase() : "";
 
   // sorting each keys in ascending order
   projectKey = projectKey.sort().join("_");
@@ -42,7 +44,7 @@ const paramsToKey = (params: any) => {
   labelsKey = labelsKey.sort().join("_");
   subscriberKey = subscriberKey.sort().join("_");
 
-  return `${projectKey}_${stateGroupKey}_${stateKey}_${priorityKey}_${assigneesKey}_${createdByKey}_${type}_${groupBy}_${orderBy}_${labelsKey}_${startDateKey}_${targetDateKey}_${sub_issue}_${startTargetDate}_${subscriberKey}`;
+  return `${layoutKey}_${projectKey}_${stateGroupKey}_${stateKey}_${priorityKey}_${assigneesKey}_${createdByKey}_${type}_${groupBy}_${orderBy}_${labelsKey}_${startDateKey}_${targetDateKey}_${sub_issue}_${startTargetDate}_${subscriberKey}`;
 };
 
 const inboxParamsToKey = (params: any) => {
@@ -162,12 +164,11 @@ export const WORKSPACE_VIEWS_LIST = (workspaceSlug: string) =>
   `WORKSPACE_VIEWS_LIST_${workspaceSlug.toUpperCase()}`;
 export const WORKSPACE_VIEW_DETAILS = (workspaceViewId: string) =>
   `WORKSPACE_VIEW_DETAILS_${workspaceViewId.toUpperCase()}`;
-export const WORKSPACE_VIEW_ISSUES = (workspaceViewId: string, params?: any) => {
+export const WORKSPACE_VIEW_ISSUES = (workspaceViewId: string, params: any) => {
   if (!params) return `WORKSPACE_VIEW_ISSUES_${workspaceViewId.toUpperCase()}`;
-
-  const paramsKey = paramsToKey(params);
-
-  return `WORKSPACE_VIEW_ISSUES_${workspaceViewId.toUpperCase()}_${paramsKey.toUpperCase()}`;
+  return `WORKSPACE_VIEW_ISSUES_${workspaceViewId.toUpperCase()}_${paramsToKey(
+    params
+  ).toUpperCase()}`;
 };
 
 export const PROJECT_ISSUES_DETAILS = (issueId: string) =>
diff --git a/web/contexts/profile-issues-context.tsx b/web/contexts/profile-issues-context.tsx
index 44c17b50a..e3f005334 100644
--- a/web/contexts/profile-issues-context.tsx
+++ b/web/contexts/profile-issues-context.tsx
@@ -177,6 +177,7 @@ export const ProfileIssuesContextProvider: React.FC<{ children: React.ReactNode
         type: "SET_PROPERTIES",
         payload: {
           display_properties: {
+            ...state.display_properties,
             [key]: !state.display_properties[key],
           },
         },
diff --git a/web/contexts/workspace-view-context.tsx b/web/contexts/workspace-view-context.tsx
new file mode 100644
index 000000000..2918a94f7
--- /dev/null
+++ b/web/contexts/workspace-view-context.tsx
@@ -0,0 +1,235 @@
+import { createContext, useEffect, useState } from "react";
+// next imports
+import { useRouter } from "next/router";
+// swr
+import useSWR, { KeyedMutator } from "swr";
+// services
+import workspaceService from "services/workspace.service";
+// types
+import { IIssue, IWorkspaceGlobalViewProps } from "types";
+import { IWorkspaceView } from "types/workspace-views";
+// fetch-keys
+import { WORKSPACE_VIEW_DETAILS, WORKSPACE_VIEW_ISSUES } from "constants/fetch-keys";
+
+export interface IWorkspaceViewContext {
+  params: any;
+  view: IWorkspaceView | undefined;
+  viewLoading: boolean;
+  viewIssues: IIssue[];
+  mutateViewIssues: KeyedMutator<any>;
+  viewIssueLoading: boolean;
+  filters: IWorkspaceGlobalViewProps;
+  handleFilters: (
+    filterType: "filters" | "display_filters" | "display_properties",
+    payload: { [key: string]: any },
+    saveFiltersToServer?: boolean
+  ) => void;
+}
+
+export const WorkspaceIssueViewContext = createContext<IWorkspaceViewContext | undefined>(
+  undefined
+);
+
+export const initialState: IWorkspaceGlobalViewProps = {
+  filters: {
+    assignees: null,
+    created_by: null,
+    labels: null,
+    priority: null,
+    state_group: null,
+    subscriber: null,
+    start_date: null,
+    target_date: null,
+    project: null,
+  },
+  display_filters: {
+    order_by: "-created_at",
+    sub_issue: false,
+    type: null,
+    layout: "spreadsheet",
+  },
+  display_properties: {
+    assignee: true,
+    start_date: true,
+    due_date: true,
+    key: true,
+    labels: true,
+    priority: true,
+    state: true,
+    sub_issue_count: true,
+    attachment_count: true,
+    link: true,
+    estimate: true,
+    created_on: true,
+    updated_on: true,
+  },
+};
+
+const saveViewFilters = async (
+  workspaceSlug: string,
+  workspaceViewId: string,
+  state: IWorkspaceGlobalViewProps
+) => {
+  await workspaceService.updateView(workspaceSlug, workspaceViewId, {
+    query_data: state,
+  });
+};
+
+export const WorkspaceViewProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const router = useRouter();
+  const { workspaceSlug, workspaceViewId } = router.query as {
+    workspaceSlug: string;
+    workspaceViewId: string;
+  };
+
+  const [filters, setFilters] = useState<IWorkspaceGlobalViewProps>(initialState);
+
+  const handleFilters = (
+    filterType: "filters" | "display_filters" | "display_properties",
+    payload: { [key: string]: any },
+    saveFiltersToServer?: boolean
+  ) => {
+    const updatedFilterPayload = {
+      ...filters,
+      [filterType]: {
+        ...filters[filterType],
+        ...payload,
+      },
+    };
+    setFilters(() => updatedFilterPayload);
+
+    if (saveFiltersToServer) saveViewFilters(workspaceSlug, workspaceViewId, updatedFilterPayload);
+  };
+
+  const computedFilter = (filters: any) => {
+    const computedFilters: any = {};
+    Object.keys(filters).map((key) => {
+      if (filters[key] != undefined)
+        computedFilters[key] =
+          typeof filters[key] === "string" || typeof filters[key] === "boolean"
+            ? filters[key]
+            : filters[key].join(",");
+    });
+    return computedFilters;
+  };
+
+  const computedParams = (filters: any) => {
+    const params: any = {
+      assignees: (filters && filters?.filters?.assignees) || undefined,
+      created_by: (filters && filters?.filters?.created_by) || undefined,
+      labels: (filters && filters?.filters?.labels) || undefined,
+      priority: (filters && filters?.filters?.priority) || undefined,
+      state_group: (filters && filters?.filters?.state_group) || undefined,
+      subscriber: (filters && filters?.filters?.subscriber) || undefined,
+      start_date: (filters && filters?.filters?.start_date) || undefined,
+      target_date: (filters && filters?.filters?.target_date) || undefined,
+      project: (filters && filters?.filters?.project) || undefined,
+      order_by: (filters && filters?.display_filters?.order_by) || "-created_at",
+      sub_issue: (filters && filters?.display_filters?.sub_issue) || false,
+      type: filters && filters?.display_filters?.type,
+    };
+    return params;
+  };
+
+  const params: any = {
+    assignees: filters?.filters.assignees ? filters?.filters?.assignees.join(",") : undefined,
+    created_by: filters?.filters.created_by ? filters?.filters?.created_by.join(",") : undefined,
+    labels: filters?.filters.labels ? filters?.filters?.labels.join(",") : undefined,
+    priority: filters?.filters.priority ? filters?.filters?.priority.join(",") : undefined,
+    state_group: filters?.filters.state_group ? filters?.filters?.state_group.join(",") : undefined,
+    subscriber: filters?.filters.subscriber ? filters?.filters?.subscriber.join(",") : undefined,
+    start_date: filters?.filters.start_date ? filters?.filters?.start_date.join(",") : undefined,
+    target_date: filters?.filters.target_date ? filters?.filters?.target_date.join(",") : undefined,
+    project: filters?.filters.project ? filters?.filters?.project.join(",") : undefined,
+
+    order_by: filters?.display_filters?.order_by
+      ? filters?.display_filters?.order_by
+      : "-created_at",
+    sub_issue: filters?.display_filters?.sub_issue ? filters?.display_filters?.sub_issue : false,
+    type: filters?.display_filters?.type ? filters?.display_filters?.type : undefined,
+    layout: filters?.display_filters?.layout ? filters?.display_filters?.layout : undefined,
+  };
+
+  const { data: view, isLoading: viewLoading } = useSWR(
+    workspaceSlug && workspaceViewId ? WORKSPACE_VIEW_DETAILS(workspaceViewId.toString()) : null,
+    workspaceSlug && workspaceViewId
+      ? () => workspaceService.getViewDetails(workspaceSlug.toString(), workspaceViewId.toString())
+      : null
+  );
+
+  const {
+    data: viewIssues,
+    mutate: mutateViewIssues,
+    isLoading: viewIssueLoading,
+  } = useSWR(
+    workspaceSlug && view && workspaceViewId && filters
+      ? WORKSPACE_VIEW_ISSUES(workspaceViewId.toString(), params)
+      : null,
+    workspaceSlug && view && workspaceViewId
+      ? () =>
+          workspaceService.getViewIssues(
+            workspaceSlug.toString(),
+            computedFilter(computedParams(filters))
+          )
+      : null
+  );
+
+  useEffect(() => {
+    if (view && view?.query_data) {
+      const payload = {
+        filters: {
+          ...view?.query_data?.filters,
+          assignees: view?.query_data?.filters?.assignees || null,
+          created_by: view?.query_data?.filters?.created_by || null,
+          labels: view?.query_data?.filters?.labels || null,
+          priority: view?.query_data?.filters?.priority || null,
+          state_group: view?.query_data?.filters?.state_group || null,
+          subscriber: view?.query_data?.filters?.subscriber || null,
+          start_date: view?.query_data?.filters?.start_date || null,
+          target_date: view?.query_data?.filters?.target_date || null,
+          project: view?.query_data?.filters?.project || null,
+        },
+        display_filters: {
+          ...view?.query_data?.display_filters,
+          order_by: view?.query_data?.display_filters?.order_by || "-created_at",
+          sub_issue: view?.query_data?.display_filters?.sub_issue || true,
+          type: view?.query_data?.display_filters?.type || null,
+        },
+        display_properties: {
+          ...view?.query_data?.display_properties,
+          assignee: view?.query_data?.display_properties?.assignee || true,
+          start_date: view?.query_data?.display_properties?.start_date || true,
+          due_date: view?.query_data?.display_properties?.due_date || true,
+          key: view?.query_data?.display_properties?.key || true,
+          labels: view?.query_data?.display_properties?.labels || true,
+          priority: view?.query_data?.display_properties?.priority || true,
+          state: view?.query_data?.display_properties?.state || true,
+          sub_issue_count: view?.query_data?.display_properties?.sub_issue_count || true,
+          attachment_count: view?.query_data?.display_properties?.attachment_count || true,
+          link: view?.query_data?.display_properties?.link || true,
+          estimate: view?.query_data?.display_properties?.estimate || true,
+          created_on: view?.query_data?.display_properties?.created_on || true,
+          updated_on: view?.query_data?.display_properties?.updated_on || true,
+        },
+      };
+      setFilters(payload);
+    }
+  }, [view, setFilters]);
+
+  return (
+    <WorkspaceIssueViewContext.Provider
+      value={{
+        params,
+        view,
+        viewLoading,
+        viewIssues,
+        mutateViewIssues,
+        viewIssueLoading,
+        filters,
+        handleFilters,
+      }}
+    >
+      {children}
+    </WorkspaceIssueViewContext.Provider>
+  );
+};
diff --git a/web/hooks/my-issues/use-my-issues-filter.tsx b/web/hooks/my-issues/use-my-issues-filter.tsx
index 5bfed634c..bc6a964c3 100644
--- a/web/hooks/my-issues/use-my-issues-filter.tsx
+++ b/web/hooks/my-issues/use-my-issues-filter.tsx
@@ -118,7 +118,7 @@ const useMyIssuesFilters = (workspaceSlug: string | undefined) => {
 
   const setProperty = useCallback(
     (key: keyof Properties) => {
-      if (!myWorkspace) return;
+      if (!myWorkspace?.view_props.display_properties) return;
 
       saveData({
         display_properties: {
diff --git a/web/hooks/use-workspace-view.tsx b/web/hooks/use-workspace-view.tsx
new file mode 100644
index 000000000..e183bc633
--- /dev/null
+++ b/web/hooks/use-workspace-view.tsx
@@ -0,0 +1,11 @@
+import { useContext } from "react";
+// types
+import { IWorkspaceViewContext, WorkspaceIssueViewContext } from "contexts/workspace-view-context";
+
+export const useWorkspaceView = (): IWorkspaceViewContext => {
+  const context = useContext(WorkspaceIssueViewContext);
+
+  if (!context) throw new Error("useWorkspaceView must be used within a WorkspaceIssueViewContext");
+
+  return context;
+};
diff --git a/web/hooks/use-worskpace-issue-filter.tsx b/web/hooks/use-worskpace-issue-filter.tsx
deleted file mode 100644
index 00af0a9f8..000000000
--- a/web/hooks/use-worskpace-issue-filter.tsx
+++ /dev/null
@@ -1,113 +0,0 @@
-import { useEffect, useCallback } from "react";
-
-import useSWR, { mutate } from "swr";
-
-// services
-import workspaceService from "services/workspace.service";
-// types
-import { IIssueFilterOptions, IView } from "types";
-// fetch-keys
-import { WORKSPACE_VIEW_DETAILS } from "constants/fetch-keys";
-
-const initialValues: IIssueFilterOptions = {
-  assignees: null,
-  created_by: null,
-  labels: null,
-  priority: null,
-  state: null,
-  state_group: null,
-  subscriber: null,
-  start_date: null,
-  target_date: null,
-  project: null,
-};
-
-const useWorkspaceIssuesFilters = (
-  workspaceSlug: string | undefined,
-  workspaceViewId: string | undefined
-) => {
-  const { data: workspaceViewDetails } = useSWR(
-    workspaceSlug && workspaceViewId ? WORKSPACE_VIEW_DETAILS(workspaceViewId) : null,
-    workspaceSlug && workspaceViewId
-      ? () => workspaceService.getViewDetails(workspaceSlug, workspaceViewId)
-      : null
-  );
-
-  const saveData = useCallback(
-    (data: Partial<IIssueFilterOptions>) => {
-      if (!workspaceSlug || !workspaceViewId || !workspaceViewDetails) return;
-
-      const oldData = { ...workspaceViewDetails };
-
-      mutate<IView>(
-        WORKSPACE_VIEW_DETAILS(workspaceViewId),
-        (prevData) => {
-          if (!prevData) return;
-          return {
-            ...prevData,
-            query_data: {
-              ...prevData?.query_data,
-              ...data,
-            },
-          };
-        },
-        false
-      );
-
-      workspaceService.updateView(workspaceSlug, workspaceViewId, {
-        query_data: {
-          ...oldData.query_data,
-          ...data,
-        },
-      });
-    },
-    [workspaceViewDetails, workspaceSlug, workspaceViewId]
-  );
-
-  const filters = workspaceViewDetails?.query_data ?? initialValues;
-
-  const setFilters = useCallback(
-    (updatedFilter: Partial<IIssueFilterOptions>) => {
-      if (!workspaceViewDetails) return;
-
-      saveData({
-        ...workspaceViewDetails?.query_data,
-        ...updatedFilter,
-      });
-    },
-    [workspaceViewDetails, saveData]
-  );
-
-  useEffect(() => {
-    if (!workspaceViewDetails || !workspaceSlug || !workspaceViewId) return;
-
-    if (!workspaceViewDetails.query_data) {
-      workspaceService.updateView(workspaceSlug, workspaceViewId, {
-        query_data: { ...initialValues },
-      });
-    }
-  }, [workspaceViewDetails, workspaceViewId, workspaceSlug]);
-
-  const params: any = {
-    assignees: filters?.assignees ? filters?.assignees.join(",") : undefined,
-    subscriber: filters?.subscriber ? filters?.subscriber.join(",") : undefined,
-    state: filters?.state ? filters?.state.join(",") : undefined,
-    state_group: filters?.state_group ? filters?.state_group.join(",") : undefined,
-    priority: filters?.priority ? filters?.priority.join(",") : undefined,
-    labels: filters?.labels ? filters?.labels.join(",") : undefined,
-    created_by: filters?.created_by ? filters?.created_by.join(",") : undefined,
-    start_date: filters?.start_date ? filters?.start_date.join(",") : undefined,
-    target_date: filters?.target_date ? filters?.target_date.join(",") : undefined,
-    project: filters?.project ? filters?.project.join(",") : undefined,
-    sub_issue: false,
-    type: undefined,
-  };
-
-  return {
-    params,
-    filters,
-    setFilters,
-  };
-};
-
-export default useWorkspaceIssuesFilters;
diff --git a/web/layouts/auth-layout/project-authorization-wrapper.tsx b/web/layouts/auth-layout/project-authorization-wrapper.tsx
index 66f4693af..386883736 100644
--- a/web/layouts/auth-layout/project-authorization-wrapper.tsx
+++ b/web/layouts/auth-layout/project-authorization-wrapper.tsx
@@ -5,6 +5,7 @@ import { useRouter } from "next/router";
 
 // contexts
 import { useProjectMyMembership, ProjectMemberProvider } from "contexts/project-member.context";
+import { WorkspaceViewProvider } from "contexts/workspace-view-context";
 // layouts
 import AppHeader from "layouts/app-layout/app-header";
 import AppSidebar from "layouts/app-layout/app-sidebar";
@@ -29,7 +30,9 @@ type Props = {
 
 export const ProjectAuthorizationWrapper: React.FC<Props> = (props) => (
   <ProjectMemberProvider>
-    <ProjectAuthorizationWrapped {...props} />
+    <WorkspaceViewProvider>
+      <ProjectAuthorizationWrapped {...props} />
+    </WorkspaceViewProvider>
   </ProjectMemberProvider>
 );
 
diff --git a/web/layouts/auth-layout/workspace-authorization-wrapper.tsx b/web/layouts/auth-layout/workspace-authorization-wrapper.tsx
index 9d74c9135..c8088a731 100644
--- a/web/layouts/auth-layout/workspace-authorization-wrapper.tsx
+++ b/web/layouts/auth-layout/workspace-authorization-wrapper.tsx
@@ -9,6 +9,7 @@ import useSWR from "swr";
 import workspaceServices from "services/workspace.service";
 // contexts
 import { WorkspaceMemberProvider } from "contexts/workspace-member.context";
+import { WorkspaceViewProvider } from "contexts/workspace-view-context";
 // layouts
 import AppSidebar from "layouts/app-layout/app-sidebar";
 import AppHeader from "layouts/app-layout/app-header";
@@ -81,47 +82,49 @@ export const WorkspaceAuthorizationLayout: React.FC<Props> = ({
   return (
     <UserAuthorizationLayout>
       <WorkspaceMemberProvider>
-        <CommandPalette />
-        <div className="relative flex h-screen w-full overflow-hidden">
-          <AppSidebar toggleSidebar={toggleSidebar} setToggleSidebar={setToggleSidebar} />
-          {settingsLayout && (memberType?.isGuest || memberType?.isViewer) ? (
-            <NotAuthorizedView
-              actionButton={
-                <Link href={`/${workspaceSlug}`}>
-                  <a>
-                    <PrimaryButton className="flex items-center gap-1">
-                      <LayerDiagonalIcon height={16} width={16} color="white" /> Go to workspace
-                    </PrimaryButton>
-                  </a>
-                </Link>
-              }
-              type="workspace"
-            />
-          ) : (
-            <main
-              className={`relative flex h-full w-full flex-col overflow-hidden ${
-                bg === "primary"
-                  ? "bg-custom-background-100"
-                  : bg === "secondary"
-                  ? "bg-custom-background-90"
-                  : "bg-custom-background-80"
-              }`}
-            >
-              <AppHeader
-                breadcrumbs={breadcrumbs}
-                left={left}
-                right={right}
-                setToggleSidebar={setToggleSidebar}
-                noHeader={noHeader}
+        <WorkspaceViewProvider>
+          <CommandPalette />
+          <div className="relative flex h-screen w-full overflow-hidden">
+            <AppSidebar toggleSidebar={toggleSidebar} setToggleSidebar={setToggleSidebar} />
+            {settingsLayout && (memberType?.isGuest || memberType?.isViewer) ? (
+              <NotAuthorizedView
+                actionButton={
+                  <Link href={`/${workspaceSlug}`}>
+                    <a>
+                      <PrimaryButton className="flex items-center gap-1">
+                        <LayerDiagonalIcon height={16} width={16} color="white" /> Go to workspace
+                      </PrimaryButton>
+                    </a>
+                  </Link>
+                }
+                type="workspace"
               />
-              <div className="h-full w-full overflow-hidden">
-                <div className="relative h-full w-full overflow-x-hidden overflow-y-scroll">
-                  {children}
+            ) : (
+              <main
+                className={`relative flex h-full w-full flex-col overflow-hidden ${
+                  bg === "primary"
+                    ? "bg-custom-background-100"
+                    : bg === "secondary"
+                    ? "bg-custom-background-90"
+                    : "bg-custom-background-80"
+                }`}
+              >
+                <AppHeader
+                  breadcrumbs={breadcrumbs}
+                  left={left}
+                  right={right}
+                  setToggleSidebar={setToggleSidebar}
+                  noHeader={noHeader}
+                />
+                <div className="h-full w-full overflow-hidden">
+                  <div className="relative h-full w-full overflow-x-hidden overflow-y-scroll">
+                    {children}
+                  </div>
                 </div>
-              </div>
-            </main>
-          )}
-        </div>
+              </main>
+            )}
+          </div>
+        </WorkspaceViewProvider>
       </WorkspaceMemberProvider>
     </UserAuthorizationLayout>
   );
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/views/index.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/views/index.tsx
index ea37a777a..c75cdd320 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/views/index.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/views/index.tsx
@@ -88,14 +88,12 @@ const ProjectViews: NextPage = () => {
     >
       <CreateUpdateViewModal
         isOpen={createUpdateViewModal}
-        viewType="project"
         handleClose={() => setCreateUpdateViewModal(false)}
         data={selectedViewToUpdate}
         user={user}
       />
       <DeleteViewModal
         isOpen={deleteViewModal}
-        viewType="project"
         data={selectedViewToDelete}
         setIsOpen={setDeleteViewModal}
         user={user}
diff --git a/web/pages/[workspaceSlug]/workspace-views/[workspaceViewId].tsx b/web/pages/[workspaceSlug]/workspace-views/[workspaceViewId].tsx
index cba4d802b..1f94604c7 100644
--- a/web/pages/[workspaceSlug]/workspace-views/[workspaceViewId].tsx
+++ b/web/pages/[workspaceSlug]/workspace-views/[workspaceViewId].tsx
@@ -1,322 +1,40 @@
-import { useCallback, useState } from "react";
-
-import { useRouter } from "next/router";
-
-import useSWR, { mutate } from "swr";
-
-// hook
-import useToast from "hooks/use-toast";
-import useWorkspaceIssuesFilters from "hooks/use-worskpace-issue-filter";
-import useProjects from "hooks/use-projects";
-import useUser from "hooks/use-user";
-import useWorkspaceMembers from "hooks/use-workspace-members";
-// context
-import { useProjectMyMembership } from "contexts/project-member.context";
-// services
-import workspaceService from "services/workspace.service";
-import projectIssuesServices from "services/issues.service";
 // layouts
 import { WorkspaceAuthorizationLayout } from "layouts/auth-layout";
 // components
-import { FiltersList, SpreadsheetView } from "components/core";
-import { WorkspaceViewsNavigation } from "components/workspace/views/workpace-view-navigation";
 import { WorkspaceIssuesViewOptions } from "components/issues/workspace-views/workspace-issue-view-option";
-import { CreateUpdateViewModal } from "components/views";
-import { CreateUpdateIssueModal, DeleteIssueModal } from "components/issues";
+import { WorkspaceViewIssues } from "components/issues/workspace-views/workpace-view-issues";
 // ui
-import { EmptyState, PrimaryButton } from "components/ui";
+import { PrimaryButton } from "components/ui";
 // icons
 import { PlusIcon } from "@heroicons/react/24/outline";
 import { CheckCircle } from "lucide-react";
-// images
-import emptyView from "public/empty-state/view.svg";
-// fetch-keys
-import {
-  WORKSPACE_LABELS,
-  WORKSPACE_VIEWS_LIST,
-  WORKSPACE_VIEW_DETAILS,
-  WORKSPACE_VIEW_ISSUES,
-} from "constants/fetch-keys";
-// constant
-import { STATE_GROUP } from "constants/project";
-// types
-import { IIssue, IIssueFilterOptions, IView } from "types";
 
-const WorkspaceView: React.FC = () => {
-  const [createViewModal, setCreateViewModal] = useState<any>(null);
-
-  // create issue modal
-  const [createIssueModal, setCreateIssueModal] = useState(false);
-  const [preloadedData, setPreloadedData] = useState<
-    (Partial<IIssue> & { actionType: "createIssue" | "edit" | "delete" }) | undefined
-  >(undefined);
-
-  // update issue modal
-  const [editIssueModal, setEditIssueModal] = useState(false);
-  const [issueToEdit, setIssueToEdit] = useState<
-    (IIssue & { actionType: "edit" | "delete" }) | undefined
-  >(undefined);
-
-  // delete issue modal
-  const [deleteIssueModal, setDeleteIssueModal] = useState(false);
-  const [issueToDelete, setIssueToDelete] = useState<IIssue | null>(null);
-
-  const router = useRouter();
-  const { workspaceSlug, workspaceViewId } = router.query;
-
-  const { memberRole } = useProjectMyMembership();
-
-  const { user } = useUser();
-  const { setToastAlert } = useToast();
-
-  const { data: viewDetails, error } = useSWR(
-    workspaceSlug && workspaceViewId ? WORKSPACE_VIEW_DETAILS(workspaceViewId.toString()) : null,
-    workspaceSlug && workspaceViewId
-      ? () => workspaceService.getViewDetails(workspaceSlug.toString(), workspaceViewId.toString())
-      : null
-  );
-
-  const { params, filters, setFilters } = useWorkspaceIssuesFilters(
-    workspaceSlug?.toString(),
-    workspaceViewId?.toString()
-  );
-
-  const { isGuest, isViewer } = useWorkspaceMembers(
-    workspaceSlug?.toString(),
-    Boolean(workspaceSlug)
-  );
-
-  const { data: viewIssues, mutate: mutateIssues } = useSWR(
-    workspaceSlug && viewDetails ? WORKSPACE_VIEW_ISSUES(workspaceSlug.toString(), params) : null,
-    workspaceSlug && viewDetails
-      ? () => workspaceService.getViewIssues(workspaceSlug.toString(), params)
-      : null
-  );
-
-  const { projects: allProjects } = useProjects();
-  const joinedProjects = allProjects?.filter((p) => p.is_member);
-
-  const { data: workspaceLabels } = useSWR(
-    workspaceSlug ? WORKSPACE_LABELS(workspaceSlug.toString()) : null,
-    workspaceSlug ? () => projectIssuesServices.getWorkspaceLabels(workspaceSlug.toString()) : null
-  );
-
-  const { workspaceMembers } = useWorkspaceMembers(workspaceSlug?.toString() ?? "");
-
-  const updateView = async (payload: IIssueFilterOptions) => {
-    const payloadData = {
-      query_data: payload,
-    };
-
-    await workspaceService
-      .updateView(workspaceSlug as string, workspaceViewId as string, payloadData)
-      .then((res) => {
-        mutate<IView[]>(
-          WORKSPACE_VIEWS_LIST(workspaceSlug as string),
-          (prevData) =>
-            prevData?.map((p) => {
-              if (p.id === res.id) return { ...p, ...payloadData };
-
-              return p;
-            }),
-          false
-        );
-        setToastAlert({
-          type: "success",
-          title: "Success!",
-          message: "View updated successfully.",
-        });
-      })
-      .catch(() => {
-        setToastAlert({
-          type: "error",
-          title: "Error!",
-          message: "View could not be updated. Please try again.",
-        });
-      });
-  };
-
-  const makeIssueCopy = useCallback(
-    (issue: IIssue) => {
-      setCreateIssueModal(true);
-
-      setPreloadedData({ ...issue, name: `${issue.name} (Copy)`, actionType: "createIssue" });
-    },
-    [setCreateIssueModal, setPreloadedData]
-  );
-
-  const handleEditIssue = useCallback(
-    (issue: IIssue) => {
-      setEditIssueModal(true);
-      setIssueToEdit({
-        ...issue,
-        actionType: "edit",
-        cycle: issue.issue_cycle ? issue.issue_cycle.cycle : null,
-        module: issue.issue_module ? issue.issue_module.module : null,
-      });
-    },
-    [setEditIssueModal, setIssueToEdit]
-  );
-
-  const handleDeleteIssue = useCallback(
-    (issue: IIssue) => {
-      setDeleteIssueModal(true);
-      setIssueToDelete(issue);
-    },
-    [setDeleteIssueModal, setIssueToDelete]
-  );
-
-  const handleIssueAction = useCallback(
-    (issue: IIssue, action: "copy" | "edit" | "delete" | "updateDraft") => {
-      if (action === "copy") makeIssueCopy(issue);
-      else if (action === "edit") handleEditIssue(issue);
-      else if (action === "delete") handleDeleteIssue(issue);
-    },
-    [makeIssueCopy, handleEditIssue, handleDeleteIssue]
-  );
-
-  const nullFilters =
-    filters &&
-    Object.keys(filters).filter((key) => filters[key as keyof IIssueFilterOptions] === null);
-
-  const areFiltersApplied =
-    filters &&
-    Object.keys(filters).length > 0 &&
-    nullFilters.length !== Object.keys(filters).length;
-
-  const isNotAllowed = isGuest || isViewer;
-
-  return (
-    <WorkspaceAuthorizationLayout
-      breadcrumbs={
-        <div className="flex gap-2 items-center">
-          <CheckCircle className="h-[18px] w-[18px] stroke-[1.5]" />
-          <span className="text-sm font-medium">
-            {viewDetails ? `${viewDetails.name} Issues` : "Workspace Issues"}
-          </span>
-        </div>
-      }
-      right={
-        <div className="flex items-center gap-2">
-          <WorkspaceIssuesViewOptions />
-          <PrimaryButton
-            className="flex items-center gap-2"
-            onClick={() => {
-              const e = new KeyboardEvent("keydown", { key: "c" });
-              document.dispatchEvent(e);
-            }}
-          >
-            <PlusIcon className="h-4 w-4" />
-            Add Issue
-          </PrimaryButton>
-        </div>
-      }
-    >
-      <CreateUpdateIssueModal
-        isOpen={createIssueModal && preloadedData?.actionType === "createIssue"}
-        handleClose={() => setCreateIssueModal(false)}
-        prePopulateData={{
-          ...preloadedData,
-        }}
-        onSubmit={async () => {
-          mutateIssues();
-        }}
-      />
-      <CreateUpdateIssueModal
-        isOpen={editIssueModal && issueToEdit?.actionType !== "delete"}
-        handleClose={() => setEditIssueModal(false)}
-        data={issueToEdit}
-        onSubmit={async () => {
-          mutateIssues();
-        }}
-      />
-      <DeleteIssueModal
-        handleClose={() => setDeleteIssueModal(false)}
-        isOpen={deleteIssueModal}
-        data={issueToDelete}
-        user={user}
-        onSubmit={async () => {
-          mutateIssues();
-        }}
-      />
-      <CreateUpdateViewModal
-        isOpen={createViewModal !== null}
-        handleClose={() => setCreateViewModal(null)}
-        viewType="workspace"
-        preLoadedData={createViewModal}
-        user={user}
-      />
-      <div className="h-full flex flex-col overflow-hidden bg-custom-background-100">
-        <div className="h-full w-full border-b border-custom-border-300">
-          <WorkspaceViewsNavigation handleAddView={() => setCreateViewModal(true)} />
-          {error ? (
-            <EmptyState
-              image={emptyView}
-              title="View does not exist"
-              description="The view you are looking for does not exist or has been deleted."
-              primaryButton={{
-                text: "View other views",
-                onClick: () => router.push(`/${workspaceSlug}/workspace-views`),
-              }}
-            />
-          ) : (
-            <div className="h-full w-full flex flex-col">
-              {areFiltersApplied && (
-                <>
-                  <div className="flex items-center justify-between gap-2 px-5 pt-3 pb-0">
-                    <FiltersList
-                      filters={filters}
-                      setFilters={(updatedFilter) => setFilters(updatedFilter)}
-                      labels={workspaceLabels}
-                      members={workspaceMembers?.map((m) => m.member)}
-                      stateGroup={STATE_GROUP}
-                      project={joinedProjects}
-                      clearAllFilters={() =>
-                        setFilters({
-                          assignees: null,
-                          created_by: null,
-                          labels: null,
-                          priority: null,
-                          state_group: null,
-                          start_date: null,
-                          target_date: null,
-                          subscriber: null,
-                          project: null,
-                        })
-                      }
-                    />
-                    <PrimaryButton
-                      onClick={() => {
-                        if (workspaceViewId) {
-                          updateView(filters);
-                        } else
-                          setCreateViewModal({
-                            query: filters,
-                          });
-                      }}
-                      className="flex items-center gap-2 text-sm"
-                    >
-                      {!workspaceViewId && <PlusIcon className="h-4 w-4" />}
-                      {workspaceViewId ? "Update" : "Save"} view
-                    </PrimaryButton>
-                  </div>
-                  {<div className="mt-3 border-t border-custom-border-200" />}
-                </>
-              )}
-              <SpreadsheetView
-                spreadsheetIssues={viewIssues}
-                mutateIssues={mutateIssues}
-                handleIssueAction={handleIssueAction}
-                disableUserActions={isNotAllowed ?? false}
-                user={user}
-                userAuth={memberRole}
-              />
-            </div>
-          )}
-        </div>
+const WorkspaceView = () => (
+  <WorkspaceAuthorizationLayout
+    breadcrumbs={
+      <div className="flex gap-2 items-center">
+        <CheckCircle className="h-[18px] w-[18px] stroke-[1.5]" />
+        <span className="text-sm font-medium">Workspace issues</span>
       </div>
-    </WorkspaceAuthorizationLayout>
-  );
-};
+    }
+    right={
+      <div className="flex items-center gap-2">
+        <WorkspaceIssuesViewOptions />
+        <PrimaryButton
+          className="flex items-center gap-2"
+          onClick={() => {
+            const e = new KeyboardEvent("keydown", { key: "c" });
+            document.dispatchEvent(e);
+          }}
+        >
+          <PlusIcon className="h-4 w-4" />
+          Add Issue
+        </PrimaryButton>
+      </div>
+    }
+  >
+    <WorkspaceViewIssues />
+  </WorkspaceAuthorizationLayout>
+);
 
 export default WorkspaceView;
diff --git a/web/pages/[workspaceSlug]/workspace-views/all-issues.tsx b/web/pages/[workspaceSlug]/workspace-views/all-issues.tsx
index 763784b8e..af3ad964f 100644
--- a/web/pages/[workspaceSlug]/workspace-views/all-issues.tsx
+++ b/web/pages/[workspaceSlug]/workspace-views/all-issues.tsx
@@ -1,283 +1,41 @@
-import { useCallback, useState } from "react";
-import { useRouter } from "next/router";
-
-import useSWR from "swr";
-
-// hook
-import useUser from "hooks/use-user";
-import useWorkspaceMembers from "hooks/use-workspace-members";
-import useProjects from "hooks/use-projects";
-import useMyIssuesFilters from "hooks/my-issues/use-my-issues-filter";
-// context
-import { useProjectMyMembership } from "contexts/project-member.context";
-// services
-import workspaceService from "services/workspace.service";
-import projectIssuesServices from "services/issues.service";
 // layouts
 import { WorkspaceAuthorizationLayout } from "layouts/auth-layout";
-// components
-import { FiltersList, SpreadsheetView } from "components/core";
-import { WorkspaceViewsNavigation } from "components/workspace/views/workpace-view-navigation";
-import { CreateUpdateViewModal } from "components/views";
-import { CreateUpdateIssueModal, DeleteIssueModal, MyIssuesViewOptions } from "components/issues";
-// ui
-import { EmptyState, PrimaryButton } from "components/ui";
+import { PrimaryButton } from "components/ui";
+// component
+import { WorkspaceIssuesViewOptions } from "components/issues/workspace-views/workspace-issue-view-option";
+import { WorkspaceAllIssue } from "components/issues/workspace-views/workspace-all-issue";
 // icons
 import { PlusIcon } from "@heroicons/react/24/outline";
 import { CheckCircle } from "lucide-react";
-// images
-import emptyView from "public/empty-state/view.svg";
-// fetch-keys
-import {
-  WORKSPACE_LABELS,
-  WORKSPACE_VIEW_DETAILS,
-  WORKSPACE_VIEW_ISSUES,
-} from "constants/fetch-keys";
-// constants
-import { STATE_GROUP } from "constants/project";
-// types
-import { IIssue, IIssueFilterOptions } from "types";
 
-const WorkspaceViewAllIssue: React.FC = () => {
-  const [createViewModal, setCreateViewModal] = useState<any>(null);
-
-  // create issue modal
-  const [createIssueModal, setCreateIssueModal] = useState(false);
-  const [preloadedData, setPreloadedData] = useState<
-    (Partial<IIssue> & { actionType: "createIssue" | "edit" | "delete" }) | undefined
-  >(undefined);
-
-  // update issue modal
-  const [editIssueModal, setEditIssueModal] = useState(false);
-  const [issueToEdit, setIssueToEdit] = useState<
-    (IIssue & { actionType: "edit" | "delete" }) | undefined
-  >(undefined);
-
-  // delete issue modal
-  const [deleteIssueModal, setDeleteIssueModal] = useState(false);
-  const [issueToDelete, setIssueToDelete] = useState<IIssue | null>(null);
-
-  const router = useRouter();
-  const { workspaceSlug, workspaceViewId } = router.query;
-
-  const { filters, setFilters } = useMyIssuesFilters(workspaceSlug?.toString());
-
-  const { user } = useUser();
-  const { memberRole } = useProjectMyMembership();
-
-  const { workspaceMembers } = useWorkspaceMembers(workspaceSlug?.toString() ?? "");
-
-  const { data: viewDetails, error } = useSWR(
-    workspaceSlug && workspaceViewId ? WORKSPACE_VIEW_DETAILS(workspaceViewId.toString()) : null,
-    workspaceSlug && workspaceViewId
-      ? () => workspaceService.getViewDetails(workspaceSlug.toString(), workspaceViewId.toString())
-      : null
-  );
-
-  const params: any = {
-    assignees: filters?.assignees ? filters?.assignees.join(",") : undefined,
-    subscriber: filters?.subscriber ? filters?.subscriber.join(",") : undefined,
-    state: filters?.state ? filters?.state.join(",") : undefined,
-    state_group: filters?.state_group ? filters?.state_group.join(",") : undefined,
-    priority: filters?.priority ? filters?.priority.join(",") : undefined,
-    labels: filters?.labels ? filters?.labels.join(",") : undefined,
-    created_by: filters?.created_by ? filters?.created_by.join(",") : undefined,
-    start_date: filters?.start_date ? filters?.start_date.join(",") : undefined,
-    target_date: filters?.target_date ? filters?.target_date.join(",") : undefined,
-    project: filters?.project ? filters?.project.join(",") : undefined,
-    sub_issue: false,
-    type: undefined,
-  };
-
-  const { data: viewIssues, mutate: mutateIssues } = useSWR(
-    workspaceSlug ? WORKSPACE_VIEW_ISSUES(workspaceSlug.toString(), params) : null,
-    workspaceSlug ? () => workspaceService.getViewIssues(workspaceSlug.toString(), params) : null
-  );
-
-  const makeIssueCopy = useCallback(
-    (issue: IIssue) => {
-      setCreateIssueModal(true);
-
-      setPreloadedData({ ...issue, name: `${issue.name} (Copy)`, actionType: "createIssue" });
-    },
-    [setCreateIssueModal, setPreloadedData]
-  );
-
-  const handleEditIssue = useCallback(
-    (issue: IIssue) => {
-      setEditIssueModal(true);
-      setIssueToEdit({
-        ...issue,
-        actionType: "edit",
-        cycle: issue.issue_cycle ? issue.issue_cycle.cycle : null,
-        module: issue.issue_module ? issue.issue_module.module : null,
-      });
-    },
-    [setEditIssueModal, setIssueToEdit]
-  );
-
-  const handleDeleteIssue = useCallback(
-    (issue: IIssue) => {
-      setDeleteIssueModal(true);
-      setIssueToDelete(issue);
-    },
-    [setDeleteIssueModal, setIssueToDelete]
-  );
-
-  const handleIssueAction = useCallback(
-    (issue: IIssue, action: "copy" | "edit" | "delete" | "updateDraft") => {
-      if (action === "copy") makeIssueCopy(issue);
-      else if (action === "edit") handleEditIssue(issue);
-      else if (action === "delete") handleDeleteIssue(issue);
-    },
-    [makeIssueCopy, handleEditIssue, handleDeleteIssue]
-  );
-
-  const nullFilters =
-    filters &&
-    Object.keys(filters).filter((key) => filters[key as keyof IIssueFilterOptions] === null);
-
-  const areFiltersApplied =
-    filters &&
-    Object.keys(filters).length > 0 &&
-    nullFilters.length !== Object.keys(filters).length;
-
-  const { projects: allProjects } = useProjects();
-  const joinedProjects = allProjects?.filter((p) => p.is_member);
-
-  const { data: workspaceLabels } = useSWR(
-    workspaceSlug ? WORKSPACE_LABELS(workspaceSlug.toString()) : null,
-    workspaceSlug ? () => projectIssuesServices.getWorkspaceLabels(workspaceSlug.toString()) : null
-  );
-
-  return (
-    <WorkspaceAuthorizationLayout
-      breadcrumbs={
-        <div className="flex gap-2 items-center">
-          <CheckCircle className="h-[18px] w-[18px] stroke-[1.5]" />
-          <span className="text-sm font-medium">
-            {viewDetails ? `${viewDetails.name} Issues` : "Workspace Issues"}
-          </span>
-        </div>
-      }
-      right={
-        <div className="flex items-center gap-2">
-          <MyIssuesViewOptions />
-          <PrimaryButton
-            className="flex items-center gap-2"
-            onClick={() => {
-              const e = new KeyboardEvent("keydown", { key: "c" });
-              document.dispatchEvent(e);
-            }}
-          >
-            <PlusIcon className="h-4 w-4" />
-            Add Issue
-          </PrimaryButton>
-        </div>
-      }
-    >
-      <CreateUpdateIssueModal
-        isOpen={createIssueModal && preloadedData?.actionType === "createIssue"}
-        handleClose={() => setCreateIssueModal(false)}
-        prePopulateData={{
-          ...preloadedData,
-        }}
-        onSubmit={async () => {
-          mutateIssues();
-        }}
-      />
-      <CreateUpdateIssueModal
-        isOpen={editIssueModal && issueToEdit?.actionType !== "delete"}
-        handleClose={() => setEditIssueModal(false)}
-        data={issueToEdit}
-        onSubmit={async () => {
-          mutateIssues();
-        }}
-      />
-      <DeleteIssueModal
-        handleClose={() => setDeleteIssueModal(false)}
-        isOpen={deleteIssueModal}
-        data={issueToDelete}
-        user={user}
-        onSubmit={async () => {
-          mutateIssues();
-        }}
-      />
-      <CreateUpdateViewModal
-        isOpen={createViewModal !== null}
-        handleClose={() => setCreateViewModal(null)}
-        viewType="workspace"
-        preLoadedData={createViewModal}
-        user={user}
-      />
-      <div className="h-full flex flex-col overflow-hidden bg-custom-background-100">
-        <div className="h-full w-full border-b border-custom-border-300">
-          <WorkspaceViewsNavigation handleAddView={() => setCreateViewModal(true)} />
-          {error ? (
-            <EmptyState
-              image={emptyView}
-              title="View does not exist"
-              description="The view you are looking for does not exist or has been deleted."
-              primaryButton={{
-                text: "View other views",
-                onClick: () => router.push(`/${workspaceSlug}/workspace-views`),
-              }}
-            />
-          ) : (
-            <div className="h-full w-full flex flex-col">
-              {areFiltersApplied && (
-                <>
-                  <div className="flex items-center justify-between gap-2 px-5 pt-3 pb-0">
-                    <FiltersList
-                      filters={filters}
-                      setFilters={(updatedFilter) => setFilters(updatedFilter)}
-                      labels={workspaceLabels}
-                      members={workspaceMembers?.map((m) => m.member)}
-                      stateGroup={STATE_GROUP}
-                      project={joinedProjects}
-                      clearAllFilters={() =>
-                        setFilters({
-                          assignees: null,
-                          created_by: null,
-                          labels: null,
-                          priority: null,
-                          state_group: null,
-                          start_date: null,
-                          target_date: null,
-                          subscriber: null,
-                          project: null,
-                        })
-                      }
-                    />
-                    <PrimaryButton
-                      onClick={() => {
-                        setCreateViewModal({
-                          query: filters,
-                        });
-                      }}
-                      className="flex items-center gap-2 text-sm"
-                    >
-                      {!workspaceViewId && <PlusIcon className="h-4 w-4" />}
-                      {workspaceViewId ? "Update" : "Save"} view
-                    </PrimaryButton>
-                  </div>
-                  {<div className="mt-3 border-t border-custom-border-200" />}
-                </>
-              )}
-              <SpreadsheetView
-                spreadsheetIssues={viewIssues}
-                mutateIssues={mutateIssues}
-                handleIssueAction={handleIssueAction}
-                disableUserActions={false}
-                user={user}
-                userAuth={memberRole}
-              />
-            </div>
-          )}
-        </div>
+const WorkspaceViewAllIssue = () => (
+  <WorkspaceAuthorizationLayout
+    breadcrumbs={
+      <div className="flex gap-2 items-center">
+        <CheckCircle className="h-[18px] w-[18px] stroke-[1.5]" />
+        <span className="text-sm font-medium">Workspace issues</span>
       </div>
-    </WorkspaceAuthorizationLayout>
-  );
-};
+    }
+    right={
+      <div className="flex items-center gap-2">
+        {/* <MyIssuesViewOptions /> */}
+        <WorkspaceIssuesViewOptions />
+
+        <PrimaryButton
+          className="flex items-center gap-2"
+          onClick={() => {
+            const e = new KeyboardEvent("keydown", { key: "c" });
+            document.dispatchEvent(e);
+          }}
+        >
+          <PlusIcon className="h-4 w-4" />
+          Add Issue
+        </PrimaryButton>
+      </div>
+    }
+  >
+    <WorkspaceAllIssue />
+  </WorkspaceAuthorizationLayout>
+);
 
 export default WorkspaceViewAllIssue;
diff --git a/web/pages/[workspaceSlug]/workspace-views/assigned.tsx b/web/pages/[workspaceSlug]/workspace-views/assigned.tsx
index 0cfd5a534..0edef4d81 100644
--- a/web/pages/[workspaceSlug]/workspace-views/assigned.tsx
+++ b/web/pages/[workspaceSlug]/workspace-views/assigned.tsx
@@ -1,205 +1,40 @@
-import { useCallback, useState } from "react";
-import { useRouter } from "next/router";
-
-import useSWR from "swr";
-
-// hook
-import useUser from "hooks/use-user";
-// context
-import { useProjectMyMembership } from "contexts/project-member.context";
-// services
-import workspaceService from "services/workspace.service";
 // layouts
 import { WorkspaceAuthorizationLayout } from "layouts/auth-layout";
 // components
-import { SpreadsheetView } from "components/core";
-import { WorkspaceViewsNavigation } from "components/workspace/views/workpace-view-navigation";
 import { WorkspaceIssuesViewOptions } from "components/issues/workspace-views/workspace-issue-view-option";
-import { CreateUpdateViewModal } from "components/views";
-import { CreateUpdateIssueModal, DeleteIssueModal } from "components/issues";
+import { WorkspaceAssignedIssue } from "components/issues/workspace-views/workspace-assigned-issue";
 // ui
-import { EmptyState, PrimaryButton } from "components/ui";
+import { PrimaryButton } from "components/ui";
 // icons
 import { PlusIcon } from "@heroicons/react/24/outline";
 import { CheckCircle } from "lucide-react";
-// images
-import emptyView from "public/empty-state/view.svg";
-// fetch-keys
-import { WORKSPACE_VIEW_DETAILS, WORKSPACE_VIEW_ISSUES } from "constants/fetch-keys";
-// types
-import { IIssue } from "types";
 
-const WorkspaceViewAssignedIssue: React.FC = () => {
-  const [createViewModal, setCreateViewModal] = useState<any>(null);
-
-  // create issue modal
-  const [createIssueModal, setCreateIssueModal] = useState(false);
-  const [preloadedData, setPreloadedData] = useState<
-    (Partial<IIssue> & { actionType: "createIssue" | "edit" | "delete" }) | undefined
-  >(undefined);
-
-  // update issue modal
-  const [editIssueModal, setEditIssueModal] = useState(false);
-  const [issueToEdit, setIssueToEdit] = useState<
-    (IIssue & { actionType: "edit" | "delete" }) | undefined
-  >(undefined);
-
-  // delete issue modal
-  const [deleteIssueModal, setDeleteIssueModal] = useState(false);
-  const [issueToDelete, setIssueToDelete] = useState<IIssue | null>(null);
-
-  const router = useRouter();
-  const { workspaceSlug, workspaceViewId } = router.query;
-
-  const { user } = useUser();
-
-  const { memberRole } = useProjectMyMembership();
-
-  const params: any = {
-    assignees: user?.id ?? undefined,
-    sub_issue: false,
-  };
-
-  const { data: viewDetails, error } = useSWR(
-    workspaceSlug && workspaceViewId ? WORKSPACE_VIEW_DETAILS(workspaceViewId.toString()) : null,
-    workspaceSlug && workspaceViewId
-      ? () => workspaceService.getViewDetails(workspaceSlug.toString(), workspaceViewId.toString())
-      : null
-  );
-
-  const { data: viewIssues, mutate: mutateIssues } = useSWR(
-    workspaceSlug ? WORKSPACE_VIEW_ISSUES(workspaceSlug.toString(), params) : null,
-    workspaceSlug ? () => workspaceService.getViewIssues(workspaceSlug.toString(), params) : null
-  );
-
-  const makeIssueCopy = useCallback(
-    (issue: IIssue) => {
-      setCreateIssueModal(true);
-
-      setPreloadedData({ ...issue, name: `${issue.name} (Copy)`, actionType: "createIssue" });
-    },
-    [setCreateIssueModal, setPreloadedData]
-  );
-
-  const handleEditIssue = useCallback(
-    (issue: IIssue) => {
-      setEditIssueModal(true);
-      setIssueToEdit({
-        ...issue,
-        actionType: "edit",
-        cycle: issue.issue_cycle ? issue.issue_cycle.cycle : null,
-        module: issue.issue_module ? issue.issue_module.module : null,
-      });
-    },
-    [setEditIssueModal, setIssueToEdit]
-  );
-
-  const handleDeleteIssue = useCallback(
-    (issue: IIssue) => {
-      setDeleteIssueModal(true);
-      setIssueToDelete(issue);
-    },
-    [setDeleteIssueModal, setIssueToDelete]
-  );
-
-  const handleIssueAction = useCallback(
-    (issue: IIssue, action: "copy" | "edit" | "delete" | "updateDraft") => {
-      if (action === "copy") makeIssueCopy(issue);
-      else if (action === "edit") handleEditIssue(issue);
-      else if (action === "delete") handleDeleteIssue(issue);
-    },
-    [makeIssueCopy, handleEditIssue, handleDeleteIssue]
-  );
-
-  return (
-    <WorkspaceAuthorizationLayout
-      breadcrumbs={
-        <div className="flex gap-2 items-center">
-          <CheckCircle className="h-[18px] w-[18px] stroke-[1.5]" />
-          <span className="text-sm font-medium">
-            {viewDetails ? `${viewDetails.name} Issues` : "Workspace Issues"}
-          </span>
-        </div>
-      }
-      right={
-        <div className="flex items-center gap-2">
-          <WorkspaceIssuesViewOptions />
-          <PrimaryButton
-            className="flex items-center gap-2"
-            onClick={() => {
-              const e = new KeyboardEvent("keydown", { key: "c" });
-              document.dispatchEvent(e);
-            }}
-          >
-            <PlusIcon className="h-4 w-4" />
-            Add Issue
-          </PrimaryButton>
-        </div>
-      }
-    >
-      <CreateUpdateIssueModal
-        isOpen={createIssueModal && preloadedData?.actionType === "createIssue"}
-        handleClose={() => setCreateIssueModal(false)}
-        prePopulateData={{
-          ...preloadedData,
-        }}
-        onSubmit={async () => {
-          mutateIssues();
-        }}
-      />
-      <CreateUpdateIssueModal
-        isOpen={editIssueModal && issueToEdit?.actionType !== "delete"}
-        handleClose={() => setEditIssueModal(false)}
-        data={issueToEdit}
-        onSubmit={async () => {
-          mutateIssues();
-        }}
-      />
-      <DeleteIssueModal
-        handleClose={() => setDeleteIssueModal(false)}
-        isOpen={deleteIssueModal}
-        data={issueToDelete}
-        user={user}
-        onSubmit={async () => {
-          mutateIssues();
-        }}
-      />
-      <CreateUpdateViewModal
-        isOpen={createViewModal !== null}
-        handleClose={() => setCreateViewModal(null)}
-        viewType="workspace"
-        preLoadedData={createViewModal}
-        user={user}
-      />
-      <div className="h-full flex flex-col overflow-hidden bg-custom-background-100">
-        <div className="h-full w-full border-b border-custom-border-300">
-          <WorkspaceViewsNavigation handleAddView={() => setCreateViewModal(true)} />
-          {error ? (
-            <EmptyState
-              image={emptyView}
-              title="View does not exist"
-              description="The view you are looking for does not exist or has been deleted."
-              primaryButton={{
-                text: "View other views",
-                onClick: () => router.push(`/${workspaceSlug}/workspace-views`),
-              }}
-            />
-          ) : (
-            <div className="h-full w-full flex flex-col">
-              <SpreadsheetView
-                spreadsheetIssues={viewIssues}
-                mutateIssues={mutateIssues}
-                handleIssueAction={handleIssueAction}
-                disableUserActions={false}
-                user={user}
-                userAuth={memberRole}
-              />
-            </div>
-          )}
-        </div>
+const WorkspaceViewAssignedIssue: React.FC = () => (
+  <WorkspaceAuthorizationLayout
+    breadcrumbs={
+      <div className="flex gap-2 items-center">
+        <CheckCircle className="h-[18px] w-[18px] stroke-[1.5]" />
+        <span className="text-sm font-medium">Workspace Issues</span>
       </div>
-    </WorkspaceAuthorizationLayout>
-  );
-};
+    }
+    right={
+      <div className="flex items-center gap-2">
+        <WorkspaceIssuesViewOptions />
+        <PrimaryButton
+          className="flex items-center gap-2"
+          onClick={() => {
+            const e = new KeyboardEvent("keydown", { key: "c" });
+            document.dispatchEvent(e);
+          }}
+        >
+          <PlusIcon className="h-4 w-4" />
+          Add Issue
+        </PrimaryButton>
+      </div>
+    }
+  >
+    <WorkspaceAssignedIssue />
+  </WorkspaceAuthorizationLayout>
+);
 
 export default WorkspaceViewAssignedIssue;
diff --git a/web/pages/[workspaceSlug]/workspace-views/created.tsx b/web/pages/[workspaceSlug]/workspace-views/created.tsx
index d41db871f..07ddbbae9 100644
--- a/web/pages/[workspaceSlug]/workspace-views/created.tsx
+++ b/web/pages/[workspaceSlug]/workspace-views/created.tsx
@@ -1,205 +1,40 @@
-import { useCallback, useState } from "react";
-
-import { useRouter } from "next/router";
-
-import useSWR from "swr";
-
-// hook
-import useUser from "hooks/use-user";
-// context
-import { useProjectMyMembership } from "contexts/project-member.context";
-// services
-import workspaceService from "services/workspace.service";
 // layouts
 import { WorkspaceAuthorizationLayout } from "layouts/auth-layout";
 // components
-import { SpreadsheetView } from "components/core";
-import { WorkspaceViewsNavigation } from "components/workspace/views/workpace-view-navigation";
 import { WorkspaceIssuesViewOptions } from "components/issues/workspace-views/workspace-issue-view-option";
-import { CreateUpdateViewModal } from "components/views";
-import { CreateUpdateIssueModal, DeleteIssueModal } from "components/issues";
+import { WorkspaceCreatedIssues } from "components/issues/workspace-views/workspace-created-issues";
 // ui
-import { EmptyState, PrimaryButton } from "components/ui";
+import { PrimaryButton } from "components/ui";
 // icons
 import { PlusIcon } from "@heroicons/react/24/outline";
 import { CheckCircle } from "lucide-react";
-// images
-import emptyView from "public/empty-state/view.svg";
-// fetch-keys
-import { WORKSPACE_VIEW_DETAILS, WORKSPACE_VIEW_ISSUES } from "constants/fetch-keys";
-// types
-import { IIssue } from "types";
 
-const WorkspaceViewCreatedIssue: React.FC = () => {
-  const [createViewModal, setCreateViewModal] = useState<any>(null);
-
-  // create issue modal
-  const [createIssueModal, setCreateIssueModal] = useState(false);
-  const [preloadedData, setPreloadedData] = useState<
-    (Partial<IIssue> & { actionType: "createIssue" | "edit" | "delete" }) | undefined
-  >(undefined);
-
-  // update issue modal
-  const [editIssueModal, setEditIssueModal] = useState(false);
-  const [issueToEdit, setIssueToEdit] = useState<
-    (IIssue & { actionType: "edit" | "delete" }) | undefined
-  >(undefined);
-
-  // delete issue modal
-  const [deleteIssueModal, setDeleteIssueModal] = useState(false);
-  const [issueToDelete, setIssueToDelete] = useState<IIssue | null>(null);
-
-  const router = useRouter();
-  const { workspaceSlug, workspaceViewId } = router.query;
-
-  const { user } = useUser();
-  const { memberRole } = useProjectMyMembership();
-
-  const params: any = {
-    created_by: user?.id ?? undefined,
-    sub_issue: false,
-  };
-
-  const { data: viewDetails, error } = useSWR(
-    workspaceSlug && workspaceViewId ? WORKSPACE_VIEW_DETAILS(workspaceViewId.toString()) : null,
-    workspaceSlug && workspaceViewId
-      ? () => workspaceService.getViewDetails(workspaceSlug.toString(), workspaceViewId.toString())
-      : null
-  );
-
-  const { data: viewIssues, mutate: mutateIssues } = useSWR(
-    workspaceSlug ? WORKSPACE_VIEW_ISSUES(workspaceSlug.toString(), params) : null,
-    workspaceSlug ? () => workspaceService.getViewIssues(workspaceSlug.toString(), params) : null
-  );
-
-  const makeIssueCopy = useCallback(
-    (issue: IIssue) => {
-      setCreateIssueModal(true);
-
-      setPreloadedData({ ...issue, name: `${issue.name} (Copy)`, actionType: "createIssue" });
-    },
-    [setCreateIssueModal, setPreloadedData]
-  );
-
-  const handleEditIssue = useCallback(
-    (issue: IIssue) => {
-      setEditIssueModal(true);
-      setIssueToEdit({
-        ...issue,
-        actionType: "edit",
-        cycle: issue.issue_cycle ? issue.issue_cycle.cycle : null,
-        module: issue.issue_module ? issue.issue_module.module : null,
-      });
-    },
-    [setEditIssueModal, setIssueToEdit]
-  );
-
-  const handleDeleteIssue = useCallback(
-    (issue: IIssue) => {
-      setDeleteIssueModal(true);
-      setIssueToDelete(issue);
-    },
-    [setDeleteIssueModal, setIssueToDelete]
-  );
-
-  const handleIssueAction = useCallback(
-    (issue: IIssue, action: "copy" | "edit" | "delete" | "updateDraft") => {
-      if (action === "copy") makeIssueCopy(issue);
-      else if (action === "edit") handleEditIssue(issue);
-      else if (action === "delete") handleDeleteIssue(issue);
-    },
-    [makeIssueCopy, handleEditIssue, handleDeleteIssue]
-  );
-
-  return (
-    <WorkspaceAuthorizationLayout
-      breadcrumbs={
-        <div className="flex gap-2 items-center">
-          <CheckCircle className="h-[18px] w-[18px] stroke-[1.5]" />
-          <span className="text-sm font-medium">
-            {viewDetails ? `${viewDetails.name} Issues` : "Workspace Issues"}
-          </span>
-        </div>
-      }
-      right={
-        <div className="flex items-center gap-2">
-          <WorkspaceIssuesViewOptions />
-          <PrimaryButton
-            className="flex items-center gap-2"
-            onClick={() => {
-              const e = new KeyboardEvent("keydown", { key: "c" });
-              document.dispatchEvent(e);
-            }}
-          >
-            <PlusIcon className="h-4 w-4" />
-            Add Issue
-          </PrimaryButton>
-        </div>
-      }
-    >
-      <CreateUpdateIssueModal
-        isOpen={createIssueModal && preloadedData?.actionType === "createIssue"}
-        handleClose={() => setCreateIssueModal(false)}
-        prePopulateData={{
-          ...preloadedData,
-        }}
-        onSubmit={async () => {
-          mutateIssues();
-        }}
-      />
-      <CreateUpdateIssueModal
-        isOpen={editIssueModal && issueToEdit?.actionType !== "delete"}
-        handleClose={() => setEditIssueModal(false)}
-        data={issueToEdit}
-        onSubmit={async () => {
-          mutateIssues();
-        }}
-      />
-      <DeleteIssueModal
-        handleClose={() => setDeleteIssueModal(false)}
-        isOpen={deleteIssueModal}
-        data={issueToDelete}
-        user={user}
-        onSubmit={async () => {
-          mutateIssues();
-        }}
-      />
-      <CreateUpdateViewModal
-        isOpen={createViewModal !== null}
-        handleClose={() => setCreateViewModal(null)}
-        viewType="workspace"
-        preLoadedData={createViewModal}
-        user={user}
-      />
-      <div className="h-full flex flex-col overflow-hidden bg-custom-background-100">
-        <div className="h-full w-full border-b border-custom-border-300">
-          <WorkspaceViewsNavigation handleAddView={() => setCreateViewModal(true)} />
-          {error ? (
-            <EmptyState
-              image={emptyView}
-              title="View does not exist"
-              description="The view you are looking for does not exist or has been deleted."
-              primaryButton={{
-                text: "View other views",
-                onClick: () => router.push(`/${workspaceSlug}/workspace-views`),
-              }}
-            />
-          ) : (
-            <div className="h-full w-full flex flex-col">
-              <SpreadsheetView
-                spreadsheetIssues={viewIssues}
-                mutateIssues={mutateIssues}
-                handleIssueAction={handleIssueAction}
-                disableUserActions={false}
-                user={user}
-                userAuth={memberRole}
-              />
-            </div>
-          )}
-        </div>
+const WorkspaceViewCreatedIssue: React.FC = () => (
+  <WorkspaceAuthorizationLayout
+    breadcrumbs={
+      <div className="flex gap-2 items-center">
+        <CheckCircle className="h-[18px] w-[18px] stroke-[1.5]" />
+        <span className="text-sm font-medium">Workspace Issues</span>
       </div>
-    </WorkspaceAuthorizationLayout>
-  );
-};
+    }
+    right={
+      <div className="flex items-center gap-2">
+        <WorkspaceIssuesViewOptions />
+        <PrimaryButton
+          className="flex items-center gap-2"
+          onClick={() => {
+            const e = new KeyboardEvent("keydown", { key: "c" });
+            document.dispatchEvent(e);
+          }}
+        >
+          <PlusIcon className="h-4 w-4" />
+          Add Issue
+        </PrimaryButton>
+      </div>
+    }
+  >
+    <WorkspaceCreatedIssues />
+  </WorkspaceAuthorizationLayout>
+);
 
 export default WorkspaceViewCreatedIssue;
diff --git a/web/pages/[workspaceSlug]/workspace-views/index.tsx b/web/pages/[workspaceSlug]/workspace-views/index.tsx
index 30d8925b6..a03393e1d 100644
--- a/web/pages/[workspaceSlug]/workspace-views/index.tsx
+++ b/web/pages/[workspaceSlug]/workspace-views/index.tsx
@@ -8,13 +8,13 @@ import useSWR from "swr";
 
 // services
 import workspaceService from "services/workspace.service";
-// hooks
-import useUser from "hooks/use-user";
 // layouts
 import { WorkspaceAuthorizationLayout } from "layouts/auth-layout";
 // components
-import { CreateUpdateViewModal, DeleteViewModal, SingleViewItem } from "components/views";
+import { SingleViewItem } from "components/views";
 import { WorkspaceIssuesViewOptions } from "components/issues/workspace-views/workspace-issue-view-option";
+import { CreateUpdateWorkspaceViewModal } from "components/workspace/views/modal";
+import { DeleteWorkspaceViewModal } from "components/workspace/views/delete-workspace-view-modal";
 // ui
 import { EmptyState, Input, Loader, PrimaryButton } from "components/ui";
 // icons
@@ -25,7 +25,7 @@ import { PhotoFilterOutlined } from "@mui/icons-material";
 import emptyView from "public/empty-state/view.svg";
 // types
 import type { NextPage } from "next";
-import { IView } from "types";
+import { IWorkspaceView } from "types/workspace-views";
 // constants
 import { WORKSPACE_VIEWS_LIST } from "constants/fetch-keys";
 // helper
@@ -35,16 +35,14 @@ const WorkspaceViews: NextPage = () => {
   const [query, setQuery] = useState("");
 
   const [createUpdateViewModal, setCreateUpdateViewModal] = useState(false);
-  const [selectedViewToUpdate, setSelectedViewToUpdate] = useState<IView | null>(null);
+  const [selectedViewToUpdate, setSelectedViewToUpdate] = useState<IWorkspaceView | null>(null);
 
   const [deleteViewModal, setDeleteViewModal] = useState(false);
-  const [selectedViewToDelete, setSelectedViewToDelete] = useState<IView | null>(null);
+  const [selectedViewToDelete, setSelectedViewToDelete] = useState<IWorkspaceView | null>(null);
 
   const router = useRouter();
   const { workspaceSlug } = router.query;
 
-  const { user } = useUser();
-
   const { data: workspaceViews } = useSWR(
     workspaceSlug ? WORKSPACE_VIEWS_LIST(workspaceSlug as string) : null,
     workspaceSlug ? () => workspaceService.getAllViews(workspaceSlug as string) : null
@@ -85,12 +83,12 @@ const WorkspaceViews: NextPage = () => {
       ? workspaceViews
       : workspaceViews?.filter((option) => option.name.toLowerCase().includes(query.toLowerCase()));
 
-  const handleEditView = (view: IView) => {
+  const handleEditView = (view: IWorkspaceView) => {
     setSelectedViewToUpdate(view);
     setCreateUpdateViewModal(true);
   };
 
-  const handleDeleteView = (view: IView) => {
+  const handleDeleteView = (view: IWorkspaceView) => {
     setSelectedViewToDelete(view);
     setDeleteViewModal(true);
   };
@@ -116,22 +114,18 @@ const WorkspaceViews: NextPage = () => {
         </div>
       }
     >
-      <CreateUpdateViewModal
+      <CreateUpdateWorkspaceViewModal
         isOpen={createUpdateViewModal}
         handleClose={() => {
           setCreateUpdateViewModal(false);
           setSelectedViewToUpdate(null);
         }}
         data={selectedViewToUpdate}
-        viewType="workspace"
-        user={user}
       />
-      <DeleteViewModal
+      <DeleteWorkspaceViewModal
         isOpen={deleteViewModal}
         data={selectedViewToDelete}
         setIsOpen={setDeleteViewModal}
-        viewType="workspace"
-        user={user}
       />
       <div className="flex flex-col">
         <div className="h-full w-full flex flex-col overflow-hidden">
diff --git a/web/pages/[workspaceSlug]/workspace-views/subscribed.tsx b/web/pages/[workspaceSlug]/workspace-views/subscribed.tsx
index 7a96b41ed..50da24a82 100644
--- a/web/pages/[workspaceSlug]/workspace-views/subscribed.tsx
+++ b/web/pages/[workspaceSlug]/workspace-views/subscribed.tsx
@@ -1,205 +1,40 @@
-import { useCallback, useState } from "react";
-
-import { useRouter } from "next/router";
-
-import useSWR from "swr";
-
-// hook
-import useUser from "hooks/use-user";
-// context
-import { useProjectMyMembership } from "contexts/project-member.context";
-// services
-import workspaceService from "services/workspace.service";
 // layouts
 import { WorkspaceAuthorizationLayout } from "layouts/auth-layout";
 // components
-import { SpreadsheetView } from "components/core";
-import { WorkspaceViewsNavigation } from "components/workspace/views/workpace-view-navigation";
 import { WorkspaceIssuesViewOptions } from "components/issues/workspace-views/workspace-issue-view-option";
-import { CreateUpdateViewModal } from "components/views";
-import { CreateUpdateIssueModal, DeleteIssueModal } from "components/issues";
+import { WorkspaceSubscribedIssues } from "components/issues/workspace-views/workspace-subscribed-issue";
 // ui
-import { EmptyState, PrimaryButton } from "components/ui";
+import { PrimaryButton } from "components/ui";
 // icons
 import { PlusIcon } from "@heroicons/react/24/outline";
 import { CheckCircle } from "lucide-react";
-// images
-import emptyView from "public/empty-state/view.svg";
-// fetch-keys
-import { WORKSPACE_VIEW_DETAILS, WORKSPACE_VIEW_ISSUES } from "constants/fetch-keys";
-// types
-import { IIssue } from "types";
 
-const WorkspaceViewSubscribedIssue: React.FC = () => {
-  const [createViewModal, setCreateViewModal] = useState<any>(null);
-
-  // create issue modal
-  const [createIssueModal, setCreateIssueModal] = useState(false);
-  const [preloadedData, setPreloadedData] = useState<
-    (Partial<IIssue> & { actionType: "createIssue" | "edit" | "delete" }) | undefined
-  >(undefined);
-
-  // update issue modal
-  const [editIssueModal, setEditIssueModal] = useState(false);
-  const [issueToEdit, setIssueToEdit] = useState<
-    (IIssue & { actionType: "edit" | "delete" }) | undefined
-  >(undefined);
-
-  // delete issue modal
-  const [deleteIssueModal, setDeleteIssueModal] = useState(false);
-  const [issueToDelete, setIssueToDelete] = useState<IIssue | null>(null);
-
-  const router = useRouter();
-  const { workspaceSlug, workspaceViewId } = router.query;
-
-  const { user } = useUser();
-  const { memberRole } = useProjectMyMembership();
-
-  const params: any = {
-    subscriber: user?.id ?? undefined,
-    sub_issue: false,
-  };
-
-  const { data: viewDetails, error } = useSWR(
-    workspaceSlug && workspaceViewId ? WORKSPACE_VIEW_DETAILS(workspaceViewId.toString()) : null,
-    workspaceSlug && workspaceViewId
-      ? () => workspaceService.getViewDetails(workspaceSlug.toString(), workspaceViewId.toString())
-      : null
-  );
-
-  const { data: viewIssues, mutate: mutateIssues } = useSWR(
-    workspaceSlug ? WORKSPACE_VIEW_ISSUES(workspaceSlug.toString(), params) : null,
-    workspaceSlug ? () => workspaceService.getViewIssues(workspaceSlug.toString(), params) : null
-  );
-
-  const makeIssueCopy = useCallback(
-    (issue: IIssue) => {
-      setCreateIssueModal(true);
-
-      setPreloadedData({ ...issue, name: `${issue.name} (Copy)`, actionType: "createIssue" });
-    },
-    [setCreateIssueModal, setPreloadedData]
-  );
-
-  const handleEditIssue = useCallback(
-    (issue: IIssue) => {
-      setEditIssueModal(true);
-      setIssueToEdit({
-        ...issue,
-        actionType: "edit",
-        cycle: issue.issue_cycle ? issue.issue_cycle.cycle : null,
-        module: issue.issue_module ? issue.issue_module.module : null,
-      });
-    },
-    [setEditIssueModal, setIssueToEdit]
-  );
-
-  const handleDeleteIssue = useCallback(
-    (issue: IIssue) => {
-      setDeleteIssueModal(true);
-      setIssueToDelete(issue);
-    },
-    [setDeleteIssueModal, setIssueToDelete]
-  );
-
-  const handleIssueAction = useCallback(
-    (issue: IIssue, action: "copy" | "edit" | "delete" | "updateDraft") => {
-      if (action === "copy") makeIssueCopy(issue);
-      else if (action === "edit") handleEditIssue(issue);
-      else if (action === "delete") handleDeleteIssue(issue);
-    },
-    [makeIssueCopy, handleEditIssue, handleDeleteIssue]
-  );
-
-  return (
-    <WorkspaceAuthorizationLayout
-      breadcrumbs={
-        <div className="flex gap-2 items-center">
-          <CheckCircle className="h-[18px] w-[18px] stroke-[1.5]" />
-          <span className="text-sm font-medium">
-            {viewDetails ? `${viewDetails.name} Issues` : "Workspace Issues"}
-          </span>
-        </div>
-      }
-      right={
-        <div className="flex items-center gap-2">
-          <WorkspaceIssuesViewOptions />
-          <PrimaryButton
-            className="flex items-center gap-2"
-            onClick={() => {
-              const e = new KeyboardEvent("keydown", { key: "c" });
-              document.dispatchEvent(e);
-            }}
-          >
-            <PlusIcon className="h-4 w-4" />
-            Add Issue
-          </PrimaryButton>
-        </div>
-      }
-    >
-      <CreateUpdateIssueModal
-        isOpen={createIssueModal && preloadedData?.actionType === "createIssue"}
-        handleClose={() => setCreateIssueModal(false)}
-        prePopulateData={{
-          ...preloadedData,
-        }}
-        onSubmit={async () => {
-          mutateIssues();
-        }}
-      />
-      <CreateUpdateIssueModal
-        isOpen={editIssueModal && issueToEdit?.actionType !== "delete"}
-        handleClose={() => setEditIssueModal(false)}
-        data={issueToEdit}
-        onSubmit={async () => {
-          mutateIssues();
-        }}
-      />
-      <DeleteIssueModal
-        handleClose={() => setDeleteIssueModal(false)}
-        isOpen={deleteIssueModal}
-        data={issueToDelete}
-        user={user}
-        onSubmit={async () => {
-          mutateIssues();
-        }}
-      />
-      <CreateUpdateViewModal
-        isOpen={createViewModal !== null}
-        handleClose={() => setCreateViewModal(null)}
-        viewType="workspace"
-        preLoadedData={createViewModal}
-        user={user}
-      />
-      <div className="h-full flex flex-col overflow-hidden bg-custom-background-100">
-        <div className="h-full w-full border-b border-custom-border-300">
-          <WorkspaceViewsNavigation handleAddView={() => setCreateViewModal(true)} />
-          {error ? (
-            <EmptyState
-              image={emptyView}
-              title="View does not exist"
-              description="The view you are looking for does not exist or has been deleted."
-              primaryButton={{
-                text: "View other views",
-                onClick: () => router.push(`/${workspaceSlug}/workspace-views`),
-              }}
-            />
-          ) : (
-            <div className="h-full w-full flex flex-col">
-              <SpreadsheetView
-                spreadsheetIssues={viewIssues}
-                mutateIssues={mutateIssues}
-                handleIssueAction={handleIssueAction}
-                disableUserActions={false}
-                user={user}
-                userAuth={memberRole}
-              />
-            </div>
-          )}
-        </div>
+const WorkspaceViewSubscribedIssue: React.FC = () => (
+  <WorkspaceAuthorizationLayout
+    breadcrumbs={
+      <div className="flex gap-2 items-center">
+        <CheckCircle className="h-[18px] w-[18px] stroke-[1.5]" />
+        <span className="text-sm font-medium">Workspace Issue</span>
       </div>
-    </WorkspaceAuthorizationLayout>
-  );
-};
+    }
+    right={
+      <div className="flex items-center gap-2">
+        <WorkspaceIssuesViewOptions />
+        <PrimaryButton
+          className="flex items-center gap-2"
+          onClick={() => {
+            const e = new KeyboardEvent("keydown", { key: "c" });
+            document.dispatchEvent(e);
+          }}
+        >
+          <PlusIcon className="h-4 w-4" />
+          Add Issue
+        </PrimaryButton>
+      </div>
+    }
+  >
+    <WorkspaceSubscribedIssues />
+  </WorkspaceAuthorizationLayout>
+);
 
 export default WorkspaceViewSubscribedIssue;
diff --git a/web/services/workspace.service.ts b/web/services/workspace.service.ts
index a3aa56507..f9859d3b3 100644
--- a/web/services/workspace.service.ts
+++ b/web/services/workspace.service.ts
@@ -14,9 +14,9 @@ import {
   ICurrentUserResponse,
   IWorkspaceBulkInviteFormData,
   IWorkspaceViewProps,
-  IView,
-  IIssueFilterOptions,
+  IWorkspaceViewIssuesParams,
 } from "types";
+import { IWorkspaceView } from "types/workspace-views";
 
 class WorkspaceService extends APIService {
   constructor() {
@@ -264,7 +264,7 @@ class WorkspaceService extends APIService {
       });
   }
 
-  async createView(workspaceSlug: string, data: IView): Promise<any> {
+  async createView(workspaceSlug: string, data: IWorkspaceView): Promise<any> {
     return this.post(`/api/workspaces/${workspaceSlug}/views/`, data)
       .then((response) => response?.data)
       .catch((error) => {
@@ -272,7 +272,11 @@ class WorkspaceService extends APIService {
       });
   }
 
-  async updateView(workspaceSlug: string, viewId: string, data: Partial<IView>): Promise<any> {
+  async updateView(
+    workspaceSlug: string,
+    viewId: string,
+    data: Partial<IWorkspaceView>
+  ): Promise<any> {
     return this.patch(`/api/workspaces/${workspaceSlug}/views/${viewId}/`, data)
       .then((response) => response?.data)
       .catch((error) => {
@@ -288,7 +292,7 @@ class WorkspaceService extends APIService {
       });
   }
 
-  async getAllViews(workspaceSlug: string): Promise<IView[]> {
+  async getAllViews(workspaceSlug: string): Promise<IWorkspaceView[]> {
     return this.get(`/api/workspaces/${workspaceSlug}/views/`)
       .then((response) => response?.data)
       .catch((error) => {
@@ -296,7 +300,7 @@ class WorkspaceService extends APIService {
       });
   }
 
-  async getViewDetails(workspaceSlug: string, viewId: string): Promise<IView> {
+  async getViewDetails(workspaceSlug: string, viewId: string): Promise<IWorkspaceView> {
     return this.get(`/api/workspaces/${workspaceSlug}/views/${viewId}/`)
       .then((response) => response?.data)
       .catch((error) => {
@@ -304,7 +308,7 @@ class WorkspaceService extends APIService {
       });
   }
 
-  async getViewIssues(workspaceSlug: string, params: IIssueFilterOptions): Promise<any> {
+  async getViewIssues(workspaceSlug: string, params: IWorkspaceViewIssuesParams): Promise<any> {
     return this.get(`/api/workspaces/${workspaceSlug}/issues/`, {
       params,
     })
diff --git a/web/types/view-props.d.ts b/web/types/view-props.d.ts
index 4cd6d63fd..ccc0270ec 100644
--- a/web/types/view-props.d.ts
+++ b/web/types/view-props.d.ts
@@ -1,3 +1,5 @@
+import { Properties } from "./workspace";
+
 export type TIssueViewOptions = "list" | "kanban" | "calendar" | "spreadsheet" | "gantt_chart";
 
 export type TIssueGroupByOptions =
@@ -12,19 +14,22 @@ export type TIssueGroupByOptions =
 
 export type TIssueOrderByOptions =
   | "-created_at"
+  | "created_at"
+  | "updated_at"
   | "-updated_at"
   | "priority"
+  | "-priority"
   | "sort_order"
   | "state__name"
   | "-state__name"
-  | "assignees__name"
-  | "-assignees__name"
+  | "assignees__first_name"
+  | "-assignees__first_name"
   | "labels__name"
   | "-labels__name"
   | "target_date"
   | "-target_date"
-  | "estimate__point"
-  | "-estimate__point"
+  | "estimate_point"
+  | "-estimate_point"
   | "start_date"
   | "-start_date";
 
@@ -33,12 +38,11 @@ export interface IIssueFilterOptions {
   created_by?: string[] | null;
   labels?: string[] | null;
   priority?: string[] | null;
-  start_date?: string[] | null;
+  start_date?: TStateGroups[] | null;
   state?: string[] | null;
-  state_group?: string[] | null;
+  state_group?: TStateGroups[] | null;
   subscriber?: string[] | null;
   target_date?: string[] | null;
-  project?: string[] | null;
 }
 
 export interface IIssueDisplayFilterOptions {
@@ -51,13 +55,53 @@ export interface IIssueDisplayFilterOptions {
   type?: "active" | "backlog" | null;
 }
 
+export interface IWorkspaceIssueFilterOptions {
+  assignees?: string[] | null;
+  created_by?: string[] | null;
+  labels?: string[] | null;
+  priority?: string[] | null;
+  state_group?: string[] | null;
+  subscriber?: string[] | null;
+  start_date?: string[] | null;
+  target_date?: string[] | null;
+  project?: string[] | null;
+}
+
+export interface IWorkspaceGlobalViewDisplayFilterOptions {
+  order_by?: string | undefined;
+  type?: "active" | "backlog" | null;
+  sub_issue?: boolean;
+  layout?: TIssueViewOptions;
+}
+
+export interface IWorkspaceViewIssuesParams {
+  assignees?: string | undefined;
+  created_by?: string | undefined;
+  labels?: string | undefined;
+  priority?: string | undefined;
+  start_date?: string | undefined;
+  state?: string | undefined;
+  state_group?: string | undefined;
+  subscriber?: string | undefined;
+  target_date?: string | undefined;
+  project?: string | undefined;
+  order_by?: string | undefined;
+  type?: "active" | "backlog" | undefined;
+  sub_issue?: boolean;
+}
+
 export interface IProjectViewProps {
   display_filters: IIssueDisplayFilterOptions | undefined;
   filters: IIssueFilterOptions;
 }
 
 export interface IWorkspaceViewProps {
-  display_filters: IIssueDisplayFilterOptions | undefined;
-  display_properties: Properties | undefined;
   filters: IIssueFilterOptions;
+  display_filters: IIssueDisplayFilterOptions | undefined;
+  display_properties: Properties;
+}
+export interface IWorkspaceGlobalViewProps {
+  filters: IWorkspaceIssueFilterOptions;
+  display_filters: IWorkspaceIssueDisplayFilterOptions | undefined;
+  display_properties: Properties | undefined;
 }
diff --git a/web/types/views.d.ts b/web/types/views.d.ts
index e9741a270..e1246af5a 100644
--- a/web/types/views.d.ts
+++ b/web/types/views.d.ts
@@ -1,5 +1,3 @@
-import { IIssueFilterOptions } from "./view-props";
-
 export interface IView {
   id: string;
   access: string;
@@ -10,15 +8,10 @@ export interface IView {
   updated_by: string;
   name: string;
   description: string;
-  query: IIssueFilterOptions;
-  query_data: IIssueFilterOptions;
+  query: IQuery;
+  query_data: IQuery;
   project: string;
   workspace: string;
-  workspace_detail: {
-    id: string;
-    name: string;
-    slug: string;
-  };
 }
 
 export interface IQuery {
@@ -30,5 +23,4 @@ export interface IQuery {
   start_date: string[] | null;
   target_date: string[] | null;
   type: "active" | "backlog" | null;
-  project: string[] | null;
 }
diff --git a/web/types/workspace-views.d.ts b/web/types/workspace-views.d.ts
new file mode 100644
index 000000000..0796e5cae
--- /dev/null
+++ b/web/types/workspace-views.d.ts
@@ -0,0 +1,22 @@
+import { IWorkspaceGlobalViewProps } from "./view-props";
+
+export interface IWorkspaceView {
+  id: string;
+  access: string;
+  created_at: Date;
+  updated_at: Date;
+  is_favorite: boolean;
+  created_by: string;
+  updated_by: string;
+  name: string;
+  description: string;
+  query: IWorkspaceGlobalViewProps;
+  query_data: IWorkspaceGlobalViewProps;
+  project: string;
+  workspace: string;
+  workspace_detail?: {
+    id: string;
+    name: string;
+    slug: string;
+  };
+}

From 6cb4b222d06d4705a0386b0798c728b5bb3ec1c0 Mon Sep 17 00:00:00 2001
From: Nikhil <118773738+pablohashescobar@users.noreply.github.com>
Date: Fri, 29 Sep 2023 12:27:19 +0530
Subject: [PATCH 02/38] chore: label create error (#2299)

---
 apiserver/plane/api/views/issue.py | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/apiserver/plane/api/views/issue.py b/apiserver/plane/api/views/issue.py
index 29f14e437..b5a62dd5d 100644
--- a/apiserver/plane/api/views/issue.py
+++ b/apiserver/plane/api/views/issue.py
@@ -712,10 +712,18 @@ class LabelViewSet(BaseViewSet):
         ProjectMemberPermission,
     ]
 
-    def perform_create(self, serializer):
-        serializer.save(
-            project_id=self.kwargs.get("project_id"),
-        )
+    def create(self, request, slug, project_id):
+        try:
+            serializer = LabelSerializer(data=request.data)
+            if serializer.is_valid():
+                serializer.save(project_id=project_id)
+                return Response(serializer.data, status=status.HTTP_201_CREATED)
+            return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
+        except IntegrityError:
+            return Response({"error": "Label with the same name already exists in the project"}, status=status.HTTP_400_BAD_REQUEST)
+        except Exception as e:
+            capture_exception(e)
+            return Response({"error": "Something went wrong please try again later"}, status=status.HTTP_400_BAD_REQUEST)
 
     def get_queryset(self):
         return self.filter_queryset(

From 459999e8c9b7b99183b823868b9f64d402eb5375 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Fri, 29 Sep 2023 12:36:38 +0530
Subject: [PATCH 03/38] chore: global issues ui improvement and bug fixes
 (#2300)

---
 .../issue-column/issue-column.tsx             |  4 +-
 .../spreadsheet-view/spreadsheet-view.tsx     |  4 +-
 .../workspace-views/workpace-view-issues.tsx  |  8 +-
 .../workspace-views/workspace-all-issue.tsx   |  8 +-
 web/components/views/single-view-item.tsx     |  2 +-
 web/components/workspace/sidebar-menu.tsx     |  2 +-
 web/components/workspace/views/modal.tsx      |  4 +-
 .../views/workpace-view-navigation.tsx        | 41 ++++++---
 web/contexts/workspace-view-context.tsx       | 22 ++---
 web/pages/[workspaceSlug]/settings/index.tsx  | 87 ++++++++++---------
 .../{[workspaceViewId].tsx => issues.tsx}     |  0
 11 files changed, 99 insertions(+), 83 deletions(-)
 rename web/pages/[workspaceSlug]/workspace-views/{[workspaceViewId].tsx => issues.tsx} (100%)

diff --git a/web/components/core/views/spreadsheet-view/issue-column/issue-column.tsx b/web/components/core/views/spreadsheet-view/issue-column/issue-column.tsx
index 1afcda5e1..d75df7343 100644
--- a/web/components/core/views/spreadsheet-view/issue-column/issue-column.tsx
+++ b/web/components/core/views/spreadsheet-view/issue-column/issue-column.tsx
@@ -82,7 +82,7 @@ export const IssueColumn: React.FC<Props> = ({
   const isNotAllowed = userAuth.isGuest || userAuth.isViewer;
 
   return (
-    <div className="group flex items-center w-[28rem] text-sm h-11 sticky top-0 bg-custom-background-100 truncate border-b border-r border-custom-border-200">
+    <div className="group flex items-center w-[28rem] text-sm h-11 sticky top-0 bg-custom-background-100 truncate border-b border-r border-custom-border-100">
       <div
         className="flex gap-1.5 px-4 pr-0 py-2.5 items-center w-24"
         style={issue.parent && nestingLevel !== 0 ? { paddingLeft } : {}}
@@ -101,7 +101,7 @@ export const IssueColumn: React.FC<Props> = ({
                 onInteraction={(nextOpenState) => setIsOpen(nextOpenState)}
                 content={
                   <div
-                    className={`flex flex-col gap-1.5 overflow-y-scroll whitespace-nowrap rounded-md border p-1 text-xs shadow-lg focus:outline-none max-h-44 min-w-full border-custom-border-200 bg-custom-background-90`}
+                    className={`flex flex-col gap-1.5 overflow-y-scroll whitespace-nowrap rounded-md border p-1 text-xs shadow-lg focus:outline-none max-h-44 min-w-full border-custom-border-100 bg-custom-background-90`}
                   >
                     <button
                       type="button"
diff --git a/web/components/core/views/spreadsheet-view/spreadsheet-view.tsx b/web/components/core/views/spreadsheet-view/spreadsheet-view.tsx
index 088a4837d..690865808 100644
--- a/web/components/core/views/spreadsheet-view/spreadsheet-view.tsx
+++ b/web/components/core/views/spreadsheet-view/spreadsheet-view.tsx
@@ -239,7 +239,7 @@ export const SpreadsheetView: React.FC<Props> = ({
     descendingOrder: TIssueOrderByOptions
   ) => (
     <div className="relative flex flex-col h-max w-full bg-custom-background-100">
-      <div className="flex items-center min-w-[9rem] px-4 py-2.5 text-sm font-medium z-[1] h-11 w-full sticky top-0 bg-custom-background-90 border border-l-0 border-custom-border-200">
+      <div className="flex items-center min-w-[9rem] px-4 py-2.5 text-sm font-medium z-[1] h-11 w-full sticky top-0 bg-custom-background-90 border border-l-0 border-custom-border-100">
         <CustomMenu
           customButtonClassName="!w-full"
           className="!w-full"
@@ -491,7 +491,7 @@ export const SpreadsheetView: React.FC<Props> = ({
                       isScrolled ? "shadow-r shadow-custom-shadow-xs" : ""
                     }`}
                   >
-                    <div className="flex items-center text-sm font-medium z-[2] h-11 w-full sticky top-0 bg-custom-background-90 border border-l-0 border-custom-border-200">
+                    <div className="flex items-center text-sm font-medium z-[2] h-11 w-full sticky top-0 bg-custom-background-90 border border-l-0 border-custom-border-100">
                       <span className="flex items-center px-4 py-2.5 h-full w-24 flex-shrink-0">
                         ID
                       </span>
diff --git a/web/components/issues/workspace-views/workpace-view-issues.tsx b/web/components/issues/workspace-views/workpace-view-issues.tsx
index 708e0eb9f..be9a4f838 100644
--- a/web/components/issues/workspace-views/workpace-view-issues.tsx
+++ b/web/components/issues/workspace-views/workpace-view-issues.tsx
@@ -31,7 +31,7 @@ import { IIssue, IWorkspaceIssueFilterOptions } from "types";
 
 export const WorkspaceViewIssues = () => {
   const router = useRouter();
-  const { workspaceSlug, workspaceViewId } = router.query;
+  const { workspaceSlug, viewId } = router.query;
 
   const { memberRole } = useProjectMyMembership();
   const { user } = useUser();
@@ -189,7 +189,7 @@ export const WorkspaceViewIssues = () => {
                     />
                     <PrimaryButton
                       onClick={() => {
-                        if (workspaceViewId) handleFilters("filters", filters.filters, true);
+                        if (viewId) handleFilters("filters", filters.filters, true);
                         else
                           setCreateViewModal({
                             query: filters.filters,
@@ -197,8 +197,8 @@ export const WorkspaceViewIssues = () => {
                       }}
                       className="flex items-center gap-2 text-sm"
                     >
-                      {!workspaceViewId && <PlusIcon className="h-4 w-4" />}
-                      {workspaceViewId ? "Update" : "Save"} view
+                      {!viewId && <PlusIcon className="h-4 w-4" />}
+                      {viewId ? "Update" : "Save"} view
                     </PrimaryButton>
                   </div>
                   {<div className="mt-3 border-t border-custom-border-200" />}
diff --git a/web/components/issues/workspace-views/workspace-all-issue.tsx b/web/components/issues/workspace-views/workspace-all-issue.tsx
index 724b9d309..f256e4a3e 100644
--- a/web/components/issues/workspace-views/workspace-all-issue.tsx
+++ b/web/components/issues/workspace-views/workspace-all-issue.tsx
@@ -31,7 +31,7 @@ import { IIssue, IWorkspaceIssueFilterOptions } from "types";
 
 export const WorkspaceAllIssue = () => {
   const router = useRouter();
-  const { workspaceSlug, workspaceViewId } = router.query;
+  const { workspaceSlug, viewId } = router.query;
 
   const [createViewModal, setCreateViewModal] = useState<any>(null);
 
@@ -203,7 +203,7 @@ export const WorkspaceAllIssue = () => {
                   />
                   <PrimaryButton
                     onClick={() => {
-                      if (workspaceViewId) handleFilters("filters", filters.filters, true);
+                      if (viewId) handleFilters("filters", filters.filters, true);
                       else
                         setCreateViewModal({
                           query: filters.filters,
@@ -211,8 +211,8 @@ export const WorkspaceAllIssue = () => {
                     }}
                     className="flex items-center gap-2 text-sm"
                   >
-                    {!workspaceViewId && <PlusIcon className="h-4 w-4" />}
-                    {workspaceViewId ? "Update" : "Save"} view
+                    {!viewId && <PlusIcon className="h-4 w-4" />}
+                    {viewId ? "Update" : "Save"} view
                   </PrimaryButton>
                 </div>
                 {<div className="mt-3 border-t border-custom-border-200" />}
diff --git a/web/components/views/single-view-item.tsx b/web/components/views/single-view-item.tsx
index a2e0d213a..4e5312229 100644
--- a/web/components/views/single-view-item.tsx
+++ b/web/components/views/single-view-item.tsx
@@ -91,7 +91,7 @@ export const SingleViewItem: React.FC<Props> = ({
   const viewRedirectionUrl =
     viewType === "project"
       ? `/${workspaceSlug}/projects/${projectId}/views/${view.id}`
-      : `/${workspaceSlug}/workspace-views/${view.id}`;
+      : `/${workspaceSlug}/workspace-views/issues?viewId=${view.id}`;
 
   return (
     <div className="group hover:bg-custom-background-90 border-b border-custom-border-200">
diff --git a/web/components/workspace/sidebar-menu.tsx b/web/components/workspace/sidebar-menu.tsx
index df38ea8af..d6c6ee3f9 100644
--- a/web/components/workspace/sidebar-menu.tsx
+++ b/web/components/workspace/sidebar-menu.tsx
@@ -34,7 +34,7 @@ const workspaceLinks = (workspaceSlug: string) => [
   },
   {
     Icon: TaskAltOutlined,
-    name: "Issues",
+    name: "All Issues",
     href: `/${workspaceSlug}/workspace-views/all-issues`,
   },
 ];
diff --git a/web/components/workspace/views/modal.tsx b/web/components/workspace/views/modal.tsx
index 48c3570cc..7d8f679b5 100644
--- a/web/components/workspace/views/modal.tsx
+++ b/web/components/workspace/views/modal.tsx
@@ -48,10 +48,12 @@ export const CreateUpdateWorkspaceViewModal: React.FC<Props> = ({
     };
     await workspaceService
       .createView(workspaceSlug as string, payloadData)
-      .then(() => {
+      .then((res) => {
         mutate(WORKSPACE_VIEWS_LIST(workspaceSlug as string));
         handleClose();
 
+        router.replace(`/${workspaceSlug}/workspace-views/issues?viewId=${res.id}`);
+
         setToastAlert({
           type: "success",
           title: "Success!",
diff --git a/web/components/workspace/views/workpace-view-navigation.tsx b/web/components/workspace/views/workpace-view-navigation.tsx
index c15943e8a..4e6a762b6 100644
--- a/web/components/workspace/views/workpace-view-navigation.tsx
+++ b/web/components/workspace/views/workpace-view-navigation.tsx
@@ -17,7 +17,7 @@ type Props = {
 
 export const WorkspaceViewsNavigation: React.FC<Props> = ({ handleAddView }) => {
   const router = useRouter();
-  const { workspaceSlug, workspaceViewId } = router.query;
+  const { workspaceSlug, viewId } = router.query;
 
   const { data: workspaceViews } = useSWR(
     workspaceSlug ? WORKSPACE_VIEWS_LIST(workspaceSlug.toString()) : null,
@@ -25,67 +25,80 @@ export const WorkspaceViewsNavigation: React.FC<Props> = ({ handleAddView }) =>
   );
 
   const isSelected = (pathName: string) => router.pathname.includes(pathName);
+  React.useEffect(() => {
+    const activeTabElement = document.getElementById("active-tab-global-view");
+    if (activeTabElement) activeTabElement.scrollIntoView({ behavior: "smooth", inline: "center" });
+  }, [viewId, workspaceViews]);
 
   const tabsList = [
     {
       key: "all",
       label: "All Issues",
       selected: isSelected("workspace-views/all-issues"),
-      onClick: () => router.push(`/${workspaceSlug}/workspace-views/all-issues`),
+      onClick: () => router.replace(`/${workspaceSlug}/workspace-views/all-issues`),
     },
     {
       key: "assigned",
       label: "Assigned",
       selected: isSelected("workspace-views/assigned"),
-      onClick: () => router.push(`/${workspaceSlug}/workspace-views/assigned`),
+      onClick: () => router.replace(`/${workspaceSlug}/workspace-views/assigned`),
     },
     {
       key: "created",
       label: "Created",
       selected: isSelected("workspace-views/created"),
-      onClick: () => router.push(`/${workspaceSlug}/workspace-views/created`),
+      onClick: () => router.replace(`/${workspaceSlug}/workspace-views/created`),
     },
     {
       key: "subscribed",
       label: "Subscribed",
       selected: isSelected("workspace-views/subscribed"),
-      onClick: () => router.push(`/${workspaceSlug}/workspace-views/subscribed`),
+      onClick: () => router.replace(`/${workspaceSlug}/workspace-views/subscribed`),
     },
   ];
 
   return (
-    <div className="group flex items-center overflow-x-scroll">
+    <div className="group flex items-center gap-x-1 overflow-x-scroll relative">
       {tabsList.map((tab) => (
         <button
           key={tab.key}
           type="button"
           onClick={tab.onClick}
-          className={`border-b-2 min-w-[96px] p-4 text-sm font-medium outline-none whitespace-nowrap ${
+          className={`border-b-2 min-w-min p-3 text-sm font-medium outline-none whitespace-nowrap flex-shrink-0 ${
             tab.selected
               ? "border-custom-primary-100 text-custom-primary-100"
-              : "border-transparent hover:border-custom-primary-100 hover:text-custom-primary-100"
+              : "border-transparent hover:border-custom-border-200 hover:text-custom-text-400"
           }`}
+          id={tab.selected ? `active-tab-global-view` : ``}
         >
           {tab.label}
         </button>
       ))}
+
       {workspaceViews &&
         workspaceViews.length > 0 &&
         workspaceViews?.map((view) => (
           <button
-            className={`border-b-2 min-w-[96px] p-4 text-sm font-medium outline-none whitespace-nowrap ${
-              view.id === workspaceViewId
+            className={`border-b-2 min-w-min p-3 text-sm font-medium outline-none whitespace-nowrap flex-shrink-0 ${
+              view.id === viewId
                 ? "border-custom-primary-100 text-custom-primary-100"
-                : "border-transparent hover:border-custom-primary-100 hover:text-custom-primary-100"
+                : "border-transparent hover:border-custom-border-200 hover:text-custom-text-400"
             }`}
-            onClick={() => router.push(`/${workspaceSlug}/workspace-views/${view.id}`)}
+            id={view.id === viewId ? `active-tab-global-view` : ``}
+            onClick={() =>
+              router.replace(`/${workspaceSlug}/workspace-views/issues?viewId=${view.id}`)
+            }
           >
             {view.name}
           </button>
         ))}
 
-      <button type="button" className="min-w-[96px] " onClick={handleAddView}>
-        <PlusIcon className="h-4 w-4 text-custom-primary-200 hover:text-current" />
+      <button
+        type="button"
+        className="flex items-center justify-center flex-shrink-0 sticky right-0 w-12 py-3 border-transparent bg-custom-background-100 hover:border-custom-border-200 hover:text-custom-text-400"
+        onClick={handleAddView}
+      >
+        <PlusIcon className="h-4 w-4 text-custom-primary-200" />
       </button>
     </div>
   );
diff --git a/web/contexts/workspace-view-context.tsx b/web/contexts/workspace-view-context.tsx
index 2918a94f7..3fc3dfa86 100644
--- a/web/contexts/workspace-view-context.tsx
+++ b/web/contexts/workspace-view-context.tsx
@@ -67,19 +67,19 @@ export const initialState: IWorkspaceGlobalViewProps = {
 
 const saveViewFilters = async (
   workspaceSlug: string,
-  workspaceViewId: string,
+  viewId: string,
   state: IWorkspaceGlobalViewProps
 ) => {
-  await workspaceService.updateView(workspaceSlug, workspaceViewId, {
+  await workspaceService.updateView(workspaceSlug, viewId, {
     query_data: state,
   });
 };
 
 export const WorkspaceViewProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
   const router = useRouter();
-  const { workspaceSlug, workspaceViewId } = router.query as {
+  const { workspaceSlug, viewId } = router.query as {
     workspaceSlug: string;
-    workspaceViewId: string;
+    viewId: string;
   };
 
   const [filters, setFilters] = useState<IWorkspaceGlobalViewProps>(initialState);
@@ -98,7 +98,7 @@ export const WorkspaceViewProvider: React.FC<{ children: React.ReactNode }> = ({
     };
     setFilters(() => updatedFilterPayload);
 
-    if (saveFiltersToServer) saveViewFilters(workspaceSlug, workspaceViewId, updatedFilterPayload);
+    if (saveFiltersToServer) saveViewFilters(workspaceSlug, viewId, updatedFilterPayload);
   };
 
   const computedFilter = (filters: any) => {
@@ -151,9 +151,9 @@ export const WorkspaceViewProvider: React.FC<{ children: React.ReactNode }> = ({
   };
 
   const { data: view, isLoading: viewLoading } = useSWR(
-    workspaceSlug && workspaceViewId ? WORKSPACE_VIEW_DETAILS(workspaceViewId.toString()) : null,
-    workspaceSlug && workspaceViewId
-      ? () => workspaceService.getViewDetails(workspaceSlug.toString(), workspaceViewId.toString())
+    workspaceSlug && viewId ? WORKSPACE_VIEW_DETAILS(viewId.toString()) : null,
+    workspaceSlug && viewId
+      ? () => workspaceService.getViewDetails(workspaceSlug.toString(), viewId.toString())
       : null
   );
 
@@ -162,10 +162,10 @@ export const WorkspaceViewProvider: React.FC<{ children: React.ReactNode }> = ({
     mutate: mutateViewIssues,
     isLoading: viewIssueLoading,
   } = useSWR(
-    workspaceSlug && view && workspaceViewId && filters
-      ? WORKSPACE_VIEW_ISSUES(workspaceViewId.toString(), params)
+    workspaceSlug && view && viewId && filters
+      ? WORKSPACE_VIEW_ISSUES(viewId.toString(), params)
       : null,
-    workspaceSlug && view && workspaceViewId
+    workspaceSlug && view && viewId
       ? () =>
           workspaceService.getViewIssues(
             workspaceSlug.toString(),
diff --git a/web/pages/[workspaceSlug]/settings/index.tsx b/web/pages/[workspaceSlug]/settings/index.tsx
index 7d0d8b1b6..4a2986dfa 100644
--- a/web/pages/[workspaceSlug]/settings/index.tsx
+++ b/web/pages/[workspaceSlug]/settings/index.tsx
@@ -312,51 +312,52 @@ const WorkspaceSettings: NextPage = () => {
                 </PrimaryButton>
               </div>
             </div>
+            {isAdmin && (
+              <Disclosure as="div" className="border-t border-custom-border-400">
+                {({ open }) => (
+                  <div className="w-full">
+                    <Disclosure.Button
+                      as="button"
+                      type="button"
+                      className="flex items-center justify-between w-full py-4"
+                    >
+                      <span className="text-xl tracking-tight">Delete Workspace</span>
+                      <Icon iconName={open ? "expand_less" : "expand_more"} className="!text-2xl" />
+                    </Disclosure.Button>
 
-            <Disclosure as="div" className="border-t border-custom-border-400">
-              {({ open }) => (
-                <div className="w-full">
-                  <Disclosure.Button
-                    as="button"
-                    type="button"
-                    className="flex items-center justify-between w-full py-4"
-                  >
-                    <span className="text-xl tracking-tight">Delete Workspace</span>
-                    <Icon iconName={open ? "expand_less" : "expand_more"} className="!text-2xl" />
-                  </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 workspace delete page is a critical area that
-                          requires careful consideration and attention. When deleting a workspace,
-                          all of the data and resources within that workspace will be permanently
-                          removed and cannot be recovered.
-                        </span>
-                        <div>
-                          <DangerButton
-                            onClick={() => setIsOpen(true)}
-                            className="!text-sm"
-                            outline
-                          >
-                            Delete my workspace
-                          </DangerButton>
+                    <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 workspace delete page is a critical area that
+                            requires careful consideration and attention. When deleting a workspace,
+                            all of the data and resources within that workspace will be permanently
+                            removed and cannot be recovered.
+                          </span>
+                          <div>
+                            <DangerButton
+                              onClick={() => setIsOpen(true)}
+                              className="!text-sm"
+                              outline
+                            >
+                              Delete my workspace
+                            </DangerButton>
+                          </div>
                         </div>
-                      </div>
-                    </Disclosure.Panel>
-                  </Transition>
-                </div>
-              )}
-            </Disclosure>
+                      </Disclosure.Panel>
+                    </Transition>
+                  </div>
+                )}
+              </Disclosure>
+            )}
           </div>
         ) : (
           <div className="flex items-center justify-center h-full w-full px-4 sm:px-0">
diff --git a/web/pages/[workspaceSlug]/workspace-views/[workspaceViewId].tsx b/web/pages/[workspaceSlug]/workspace-views/issues.tsx
similarity index 100%
rename from web/pages/[workspaceSlug]/workspace-views/[workspaceViewId].tsx
rename to web/pages/[workspaceSlug]/workspace-views/issues.tsx

From 2a770e4a9539f0327293c1e918744d5655fdb8a4 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Fri, 29 Sep 2023 15:05:27 +0530
Subject: [PATCH 04/38] chore: workspace view mutation fix ,bug fixes and code
 refactor (#2301)

* chore: workspace view mutation fix ,bug fixes and code refactor

* chore: update workspace view toast alert added
---
 .../issue-column/issue-column.tsx             | 147 +++++++--------
 .../spreadsheet-view/spreadsheet-view.tsx     | 170 ++++++++++--------
 .../my-issues/my-issues-view-options.tsx      |   4 +-
 .../workspace-views/workpace-view-issues.tsx  |  23 ++-
 .../workspace-views/workspace-all-issue.tsx   |  12 +-
 .../workspace-assigned-issue.tsx              |   7 -
 .../workspace-issue-view-option.tsx           |   4 +-
 web/components/views/single-view-item.tsx     |   2 +-
 .../views/workpace-view-navigation.tsx        |  10 +-
 web/constants/fetch-keys.ts                   |  12 +-
 web/contexts/workspace-view-context.tsx       |  22 +--
 .../workspace-views/all-issues.tsx            |   1 -
 web/types/view-props.d.ts                     |   2 +-
 13 files changed, 221 insertions(+), 195 deletions(-)

diff --git a/web/components/core/views/spreadsheet-view/issue-column/issue-column.tsx b/web/components/core/views/spreadsheet-view/issue-column/issue-column.tsx
index d75df7343..c00f085b2 100644
--- a/web/components/core/views/spreadsheet-view/issue-column/issue-column.tsx
+++ b/web/components/core/views/spreadsheet-view/issue-column/issue-column.tsx
@@ -83,88 +83,89 @@ export const IssueColumn: React.FC<Props> = ({
 
   return (
     <div className="group flex items-center w-[28rem] text-sm h-11 sticky top-0 bg-custom-background-100 truncate border-b border-r border-custom-border-100">
-      <div
-        className="flex gap-1.5 px-4 pr-0 py-2.5 items-center w-24"
-        style={issue.parent && nestingLevel !== 0 ? { paddingLeft } : {}}
-      >
-        <div className="relative flex items-center cursor-pointer text-xs text-center hover:text-custom-text-100">
-          {properties.key && (
-            <span className="flex items-center justify-center font-medium opacity-100 group-hover:opacity-0">
+      {properties.key && (
+        <div
+          className="flex gap-1.5 px-4 pr-0 py-2.5 items-center min-w-[96px]"
+          style={issue.parent && nestingLevel !== 0 ? { paddingLeft } : {}}
+        >
+          <div className="relative flex items-center cursor-pointer text-xs text-center hover:text-custom-text-100">
+            <span className="flex items-center justify-center font-medium opacity-100 group-hover:opacity-0 ">
               {issue.project_detail?.identifier}-{issue.sequence_id}
             </span>
-          )}
-          {!isNotAllowed && !disableUserActions && (
-            <div className="absolute top-0 left-2.5 opacity-0 group-hover:opacity-100">
-              <Popover2
-                isOpen={isOpen}
-                canEscapeKeyClose
-                onInteraction={(nextOpenState) => setIsOpen(nextOpenState)}
-                content={
-                  <div
-                    className={`flex flex-col gap-1.5 overflow-y-scroll whitespace-nowrap rounded-md border p-1 text-xs shadow-lg focus:outline-none max-h-44 min-w-full border-custom-border-100 bg-custom-background-90`}
-                  >
-                    <button
-                      type="button"
-                      className="hover:text-custom-text-200 w-full select-none gap-2 truncate rounded px-1 py-1.5 text-left text-custom-text-200 hover:bg-custom-background-80"
-                      onClick={() => {
-                        handleEditIssue(issue);
-                        setIsOpen(false);
-                      }}
-                    >
-                      <div className="flex items-center justify-start gap-2">
-                        <PencilIcon className="h-4 w-4" />
-                        <span>Edit issue</span>
-                      </div>
-                    </button>
 
-                    <button
-                      type="button"
-                      className="hover:text-custom-text-200 w-full select-none gap-2 truncate rounded px-1 py-1.5 text-left text-custom-text-200 hover:bg-custom-background-80"
-                      onClick={() => {
-                        handleDeleteIssue(issue);
-                        setIsOpen(false);
-                      }}
+            {!isNotAllowed && !disableUserActions && (
+              <div className="absolute top-0 left-2.5 opacity-0 group-hover:opacity-100">
+                <Popover2
+                  isOpen={isOpen}
+                  canEscapeKeyClose
+                  onInteraction={(nextOpenState) => setIsOpen(nextOpenState)}
+                  content={
+                    <div
+                      className={`flex flex-col gap-1.5 overflow-y-scroll whitespace-nowrap rounded-md border p-1 text-xs shadow-lg focus:outline-none max-h-44 min-w-full border-custom-border-100 bg-custom-background-90`}
                     >
-                      <div className="flex items-center justify-start gap-2">
-                        <TrashIcon className="h-4 w-4" />
-                        <span>Delete issue</span>
-                      </div>
-                    </button>
+                      <button
+                        type="button"
+                        className="hover:text-custom-text-200 w-full select-none gap-2 truncate rounded px-1 py-1.5 text-left text-custom-text-200 hover:bg-custom-background-80"
+                        onClick={() => {
+                          handleEditIssue(issue);
+                          setIsOpen(false);
+                        }}
+                      >
+                        <div className="flex items-center justify-start gap-2">
+                          <PencilIcon className="h-4 w-4" />
+                          <span>Edit issue</span>
+                        </div>
+                      </button>
 
-                    <button
-                      type="button"
-                      className="hover:text-custom-text-200 w-full select-none gap-2 truncate rounded px-1 py-1.5 text-left text-custom-text-200 hover:bg-custom-background-80"
-                      onClick={() => {
-                        handleCopyText();
-                        setIsOpen(false);
-                      }}
-                    >
-                      <div className="flex items-center justify-start gap-2">
-                        <LinkIcon className="h-4 w-4" />
-                        <span>Copy issue link</span>
-                      </div>
-                    </button>
-                  </div>
-                }
-                placement="bottom-start"
+                      <button
+                        type="button"
+                        className="hover:text-custom-text-200 w-full select-none gap-2 truncate rounded px-1 py-1.5 text-left text-custom-text-200 hover:bg-custom-background-80"
+                        onClick={() => {
+                          handleDeleteIssue(issue);
+                          setIsOpen(false);
+                        }}
+                      >
+                        <div className="flex items-center justify-start gap-2">
+                          <TrashIcon className="h-4 w-4" />
+                          <span>Delete issue</span>
+                        </div>
+                      </button>
+
+                      <button
+                        type="button"
+                        className="hover:text-custom-text-200 w-full select-none gap-2 truncate rounded px-1 py-1.5 text-left text-custom-text-200 hover:bg-custom-background-80"
+                        onClick={() => {
+                          handleCopyText();
+                          setIsOpen(false);
+                        }}
+                      >
+                        <div className="flex items-center justify-start gap-2">
+                          <LinkIcon className="h-4 w-4" />
+                          <span>Copy issue link</span>
+                        </div>
+                      </button>
+                    </div>
+                  }
+                  placement="bottom-start"
+                >
+                  <EllipsisHorizontalIcon className="h-5 w-5 text-custom-text-200" />
+                </Popover2>
+              </div>
+            )}
+          </div>
+
+          {issue.sub_issues_count > 0 && (
+            <div className="h-6 w-6 flex justify-center items-center">
+              <button
+                className="h-5 w-5 hover:bg-custom-background-90 hover:text-custom-text-100 rounded-sm cursor-pointer"
+                onClick={() => handleToggleExpand(issue.id)}
               >
-                <EllipsisHorizontalIcon className="h-5 w-5 text-custom-text-200" />
-              </Popover2>
+                <Icon iconName="chevron_right" className={`${expanded ? "rotate-90" : ""}`} />
+              </button>
             </div>
           )}
         </div>
-
-        {issue.sub_issues_count > 0 && (
-          <div className="h-6 w-6 flex justify-center items-center">
-            <button
-              className="h-5 w-5 hover:bg-custom-background-90 hover:text-custom-text-100 rounded-sm cursor-pointer"
-              onClick={() => handleToggleExpand(issue.id)}
-            >
-              <Icon iconName="chevron_right" className={`${expanded ? "rotate-90" : ""}`} />
-            </button>
-          </div>
-        )}
-      </div>
+      )}
       <span className="flex items-center px-4 py-2.5 h-full  truncate flex-grow">
         <button
           type="button"
diff --git a/web/components/core/views/spreadsheet-view/spreadsheet-view.tsx b/web/components/core/views/spreadsheet-view/spreadsheet-view.tsx
index 690865808..538ad5743 100644
--- a/web/components/core/views/spreadsheet-view/spreadsheet-view.tsx
+++ b/web/components/core/views/spreadsheet-view/spreadsheet-view.tsx
@@ -82,7 +82,7 @@ export const SpreadsheetView: React.FC<Props> = ({
   const containerRef = useRef<HTMLDivElement | null>(null);
 
   const router = useRouter();
-  const { workspaceSlug, projectId, cycleId, moduleId, viewId, workspaceViewId } = router.query;
+  const { workspaceSlug, projectId, cycleId, moduleId, viewId, globalViewId } = router.query;
 
   const type = cycleId ? "cycle" : moduleId ? "module" : "issue";
 
@@ -129,7 +129,17 @@ export const SpreadsheetView: React.FC<Props> = ({
     router.pathname.includes(path.path)
   );
 
-  const { params: workspaceViewParams, handleFilters } = useWorkspaceView();
+  const {
+    params: workspaceViewParams,
+    filters: workspaceViewFilters,
+    handleFilters,
+  } = useWorkspaceView();
+
+  const workspaceViewProperties = workspaceViewFilters.display_properties;
+
+  const isWorkspaceView = globalViewId || currentWorkspaceIssuePath;
+
+  const currentViewProperties = isWorkspaceView ? workspaceViewProperties : properties;
 
   const { params, displayFilters, setDisplayFilters } = useSpreadsheetIssuesView();
 
@@ -143,8 +153,8 @@ export const SpreadsheetView: React.FC<Props> = ({
         ? MODULE_ISSUES_WITH_PARAMS(moduleId.toString(), params)
         : viewId
         ? VIEW_ISSUES(viewId.toString(), params)
-        : workspaceViewId
-        ? WORKSPACE_VIEW_ISSUES(workspaceSlug.toString(), workspaceViewParams)
+        : globalViewId
+        ? WORKSPACE_VIEW_ISSUES(globalViewId.toString(), workspaceViewParams)
         : currentWorkspaceIssuePath
         ? WORKSPACE_VIEW_ISSUES(workspaceSlug.toString(), currentWorkspaceIssuePath?.params)
         : PROJECT_ISSUES_LIST_WITH_PARAMS(issue.project_detail.id, params);
@@ -213,7 +223,7 @@ export const SpreadsheetView: React.FC<Props> = ({
       cycleId,
       moduleId,
       viewId,
-      workspaceViewId,
+      globalViewId,
       workspaceViewParams,
       currentWorkspaceIssuePath,
       params,
@@ -224,7 +234,7 @@ export const SpreadsheetView: React.FC<Props> = ({
   const isNotAllowed = userAuth.isGuest || userAuth.isViewer;
 
   const handleOrderBy = (order: TIssueOrderByOptions, itemKey: string) => {
-    if (!workspaceViewId || !currentWorkspaceIssuePath)
+    if (!globalViewId || !currentWorkspaceIssuePath)
       handleFilters("display_filters", { order_by: order });
     else setDisplayFilters({ order_by: order });
     setSelectedMenuItem(`${order}_${itemKey}`);
@@ -442,7 +452,7 @@ export const SpreadsheetView: React.FC<Props> = ({
             projectId={issue.project_detail.id}
             partialUpdateIssue={partialUpdateIssue}
             expandedIssues={expandedIssues}
-            properties={properties}
+            properties={currentViewProperties}
             user={user}
             isNotAllowed={isNotAllowed}
           />
@@ -492,9 +502,11 @@ export const SpreadsheetView: React.FC<Props> = ({
                     }`}
                   >
                     <div className="flex items-center text-sm font-medium z-[2] h-11 w-full sticky top-0 bg-custom-background-90 border border-l-0 border-custom-border-100">
-                      <span className="flex items-center px-4 py-2.5 h-full w-24 flex-shrink-0">
-                        ID
-                      </span>
+                      {currentViewProperties.key && (
+                        <span className="flex items-center px-4 py-2.5 h-full w-24 flex-shrink-0">
+                          ID
+                        </span>
+                      )}
                       <span className="flex items-center px-4 py-2.5 h-full w-full flex-grow">
                         Issue
                       </span>
@@ -508,7 +520,7 @@ export const SpreadsheetView: React.FC<Props> = ({
                         expandedIssues={expandedIssues}
                         setExpandedIssues={setExpandedIssues}
                         setCurrentProjectId={setCurrentProjectId}
-                        properties={properties}
+                        properties={currentViewProperties}
                         handleIssueAction={handleIssueAction}
                         disableUserActions={disableUserActions}
                         userAuth={userAuth}
@@ -516,69 +528,79 @@ export const SpreadsheetView: React.FC<Props> = ({
                     ))}
                   </div>
                 </div>
-                {renderColumn(
-                  "State",
-                  "state",
-                  SpreadsheetStateColumn,
-                  "state__name",
-                  "-state__name"
-                )}
-                {renderColumn(
-                  "Priority",
-                  "priority",
-                  SpreadsheetPriorityColumn,
-                  "priority",
-                  "-priority"
-                )}
-                {renderColumn(
-                  "Assignees",
-                  "assignee",
-                  SpreadsheetAssigneeColumn,
-                  "assignees__first_name",
-                  "-assignees__first_name"
-                )}
-                {renderColumn(
-                  "Label",
-                  "labels",
-                  SpreadsheetLabelColumn,
-                  "labels__name",
-                  "-labels__name"
-                )}
-                {renderColumn(
-                  "Start Date",
-                  "start_date",
-                  SpreadsheetStartDateColumn,
-                  "-start_date",
-                  "start_date"
-                )}
-                {renderColumn(
-                  "Due Date",
-                  "due_date",
-                  SpreadsheetDueDateColumn,
-                  "-target_date",
-                  "target_date"
-                )}
-                {renderColumn(
-                  "Estimate",
-                  "estimate",
-                  SpreadsheetEstimateColumn,
-                  "estimate_point",
-                  "-estimate_point"
-                )}
-                {renderColumn(
-                  "Created On",
-                  "created_on",
-                  SpreadsheetCreatedOnColumn,
-                  "-created_at",
-                  "created_at"
-                )}
-                {renderColumn(
-                  "Updated On",
-                  "updated_on",
-                  SpreadsheetUpdatedOnColumn,
-                  "-updated_at",
-                  "updated_at"
-                )}
+                {currentViewProperties.state &&
+                  renderColumn(
+                    "State",
+                    "state",
+                    SpreadsheetStateColumn,
+                    "state__name",
+                    "-state__name"
+                  )}
+
+                {currentViewProperties.priority &&
+                  renderColumn(
+                    "Priority",
+                    "priority",
+                    SpreadsheetPriorityColumn,
+                    "priority",
+                    "-priority"
+                  )}
+                {currentViewProperties.assignee &&
+                  renderColumn(
+                    "Assignees",
+                    "assignee",
+                    SpreadsheetAssigneeColumn,
+                    "assignees__first_name",
+                    "-assignees__first_name"
+                  )}
+                {currentViewProperties.labels &&
+                  renderColumn(
+                    "Label",
+                    "labels",
+                    SpreadsheetLabelColumn,
+                    "labels__name",
+                    "-labels__name"
+                  )}
+                {currentViewProperties.start_date &&
+                  renderColumn(
+                    "Start Date",
+                    "start_date",
+                    SpreadsheetStartDateColumn,
+                    "-start_date",
+                    "start_date"
+                  )}
+                {currentViewProperties.due_date &&
+                  renderColumn(
+                    "Due Date",
+                    "due_date",
+                    SpreadsheetDueDateColumn,
+                    "-target_date",
+                    "target_date"
+                  )}
+                {currentViewProperties.estimate &&
+                  renderColumn(
+                    "Estimate",
+                    "estimate",
+                    SpreadsheetEstimateColumn,
+                    "estimate_point",
+                    "-estimate_point"
+                  )}
+                {currentViewProperties.created_on &&
+                  renderColumn(
+                    "Created On",
+                    "created_on",
+                    SpreadsheetCreatedOnColumn,
+                    "-created_at",
+                    "created_at"
+                  )}
+                {currentViewProperties.updated_on &&
+                  renderColumn(
+                    "Updated On",
+                    "updated_on",
+                    SpreadsheetUpdatedOnColumn,
+                    "-updated_at",
+                    "updated_at"
+                  )}
               </>
             ) : (
               <div className="flex flex-col justify-center items-center h-full w-full">
diff --git a/web/components/issues/my-issues/my-issues-view-options.tsx b/web/components/issues/my-issues/my-issues-view-options.tsx
index 1cbc467a8..69cfa1909 100644
--- a/web/components/issues/my-issues/my-issues-view-options.tsx
+++ b/web/components/issues/my-issues/my-issues-view-options.tsx
@@ -30,7 +30,7 @@ const issueViewOptions: { type: TIssueViewOptions; Icon: any }[] = [
 
 export const MyIssuesViewOptions: React.FC = () => {
   const router = useRouter();
-  const { workspaceSlug, workspaceViewId } = router.query;
+  const { workspaceSlug, globalViewId } = router.query;
 
   const { displayFilters, setDisplayFilters, filters, setFilters } = useMyIssuesFilters(
     workspaceSlug?.toString()
@@ -42,7 +42,7 @@ export const MyIssuesViewOptions: React.FC = () => {
     router.pathname.includes(pathname)
   );
 
-  const showFilters = isWorkspaceViewPath || workspaceViewId;
+  const showFilters = isWorkspaceViewPath || globalViewId;
 
   return (
     <div className="flex items-center gap-2">
diff --git a/web/components/issues/workspace-views/workpace-view-issues.tsx b/web/components/issues/workspace-views/workpace-view-issues.tsx
index be9a4f838..78a12f807 100644
--- a/web/components/issues/workspace-views/workpace-view-issues.tsx
+++ b/web/components/issues/workspace-views/workpace-view-issues.tsx
@@ -13,6 +13,7 @@ import useProjects from "hooks/use-projects";
 import useUser from "hooks/use-user";
 import { useWorkspaceView } from "hooks/use-workspace-view";
 import useWorkspaceMembers from "hooks/use-workspace-members";
+import useToast from "hooks/use-toast";
 // components
 import { WorkspaceViewsNavigation } from "components/workspace/views/workpace-view-navigation";
 import { EmptyState, PrimaryButton } from "components/ui";
@@ -31,7 +32,9 @@ import { IIssue, IWorkspaceIssueFilterOptions } from "types";
 
 export const WorkspaceViewIssues = () => {
   const router = useRouter();
-  const { workspaceSlug, viewId } = router.query;
+  const { workspaceSlug, globalViewId } = router.query;
+
+  const { setToastAlert } = useToast();
 
   const { memberRole } = useProjectMyMembership();
   const { user } = useUser();
@@ -111,7 +114,9 @@ export const WorkspaceViewIssues = () => {
   const nullFilters =
     filters.filters &&
     Object.keys(filters.filters).filter(
-      (key) => filters.filters[key as keyof IWorkspaceIssueFilterOptions] === null
+      (key) =>
+        filters.filters[key as keyof IWorkspaceIssueFilterOptions] === null ||
+        (filters.filters[key as keyof IWorkspaceIssueFilterOptions]?.length ?? 0) <= 0
     );
 
   const areFiltersApplied =
@@ -189,16 +194,22 @@ export const WorkspaceViewIssues = () => {
                     />
                     <PrimaryButton
                       onClick={() => {
-                        if (viewId) handleFilters("filters", filters.filters, true);
-                        else
+                        if (globalViewId) {
+                          handleFilters("filters", filters.filters, true);
+                          setToastAlert({
+                            title: "View updated",
+                            message: "Your view has been updated",
+                            type: "success",
+                          });
+                        } else
                           setCreateViewModal({
                             query: filters.filters,
                           });
                       }}
                       className="flex items-center gap-2 text-sm"
                     >
-                      {!viewId && <PlusIcon className="h-4 w-4" />}
-                      {viewId ? "Update" : "Save"} view
+                      {!globalViewId && <PlusIcon className="h-4 w-4" />}
+                      {globalViewId ? "Update" : "Save"} view
                     </PrimaryButton>
                   </div>
                   {<div className="mt-3 border-t border-custom-border-200" />}
diff --git a/web/components/issues/workspace-views/workspace-all-issue.tsx b/web/components/issues/workspace-views/workspace-all-issue.tsx
index f256e4a3e..4618c331d 100644
--- a/web/components/issues/workspace-views/workspace-all-issue.tsx
+++ b/web/components/issues/workspace-views/workspace-all-issue.tsx
@@ -31,7 +31,7 @@ import { IIssue, IWorkspaceIssueFilterOptions } from "types";
 
 export const WorkspaceAllIssue = () => {
   const router = useRouter();
-  const { workspaceSlug, viewId } = router.query;
+  const { workspaceSlug, globalViewId } = router.query;
 
   const [createViewModal, setCreateViewModal] = useState<any>(null);
 
@@ -128,7 +128,9 @@ export const WorkspaceAllIssue = () => {
   const nullFilters =
     filters.filters &&
     Object.keys(filters.filters).filter(
-      (key) => filters.filters[key as keyof IWorkspaceIssueFilterOptions] === null
+      (key) =>
+        filters.filters[key as keyof IWorkspaceIssueFilterOptions] === null ||
+        (filters.filters[key as keyof IWorkspaceIssueFilterOptions]?.length ?? 0) <= 0
     );
 
   const areFiltersApplied =
@@ -203,7 +205,7 @@ export const WorkspaceAllIssue = () => {
                   />
                   <PrimaryButton
                     onClick={() => {
-                      if (viewId) handleFilters("filters", filters.filters, true);
+                      if (globalViewId) handleFilters("filters", filters.filters, true);
                       else
                         setCreateViewModal({
                           query: filters.filters,
@@ -211,8 +213,8 @@ export const WorkspaceAllIssue = () => {
                     }}
                     className="flex items-center gap-2 text-sm"
                   >
-                    {!viewId && <PlusIcon className="h-4 w-4" />}
-                    {viewId ? "Update" : "Save"} view
+                    {!globalViewId && <PlusIcon className="h-4 w-4" />}
+                    {globalViewId ? "Update" : "Save"} view
                   </PrimaryButton>
                 </div>
                 {<div className="mt-3 border-t border-custom-border-200" />}
diff --git a/web/components/issues/workspace-views/workspace-assigned-issue.tsx b/web/components/issues/workspace-views/workspace-assigned-issue.tsx
index ccee9ab84..4469804ac 100644
--- a/web/components/issues/workspace-views/workspace-assigned-issue.tsx
+++ b/web/components/issues/workspace-views/workspace-assigned-issue.tsx
@@ -50,13 +50,6 @@ export const WorkspaceAssignedIssue = () => {
     sub_issue: false,
   };
 
-  //   const { data: viewDetails, error } = useSWR(
-  //     workspaceSlug && workspaceViewId ? WORKSPACE_VIEW_DETAILS(workspaceViewId.toString()) : null,
-  //     workspaceSlug && workspaceViewId
-  //       ? () => workspaceService.getViewDetails(workspaceSlug.toString(), workspaceViewId.toString())
-  //       : null
-  //   );
-
   const { data: viewIssues, mutate: mutateIssues } = useSWR(
     workspaceSlug ? WORKSPACE_VIEW_ISSUES(workspaceSlug.toString(), params) : null,
     workspaceSlug ? () => workspaceService.getViewIssues(workspaceSlug.toString(), params) : null
diff --git a/web/components/issues/workspace-views/workspace-issue-view-option.tsx b/web/components/issues/workspace-views/workspace-issue-view-option.tsx
index b635ff870..25ddc338a 100644
--- a/web/components/issues/workspace-views/workspace-issue-view-option.tsx
+++ b/web/components/issues/workspace-views/workspace-issue-view-option.tsx
@@ -30,13 +30,13 @@ const issueViewOptions: { type: TIssueViewOptions; Icon: any }[] = [
 
 export const WorkspaceIssuesViewOptions: React.FC = () => {
   const router = useRouter();
-  const { workspaceSlug, workspaceViewId } = router.query;
+  const { workspaceSlug, globalViewId } = router.query;
 
   const { filters, handleFilters } = useWorkspaceView();
 
   const isWorkspaceViewPath = router.pathname.includes("workspace-views/all-issues");
 
-  const showFilters = isWorkspaceViewPath || workspaceViewId;
+  const showFilters = isWorkspaceViewPath || globalViewId;
 
   return (
     <div className="flex items-center gap-2">
diff --git a/web/components/views/single-view-item.tsx b/web/components/views/single-view-item.tsx
index 4e5312229..6dba9c097 100644
--- a/web/components/views/single-view-item.tsx
+++ b/web/components/views/single-view-item.tsx
@@ -91,7 +91,7 @@ export const SingleViewItem: React.FC<Props> = ({
   const viewRedirectionUrl =
     viewType === "project"
       ? `/${workspaceSlug}/projects/${projectId}/views/${view.id}`
-      : `/${workspaceSlug}/workspace-views/issues?viewId=${view.id}`;
+      : `/${workspaceSlug}/workspace-views/issues?globalViewId=${view.id}`;
 
   return (
     <div className="group hover:bg-custom-background-90 border-b border-custom-border-200">
diff --git a/web/components/workspace/views/workpace-view-navigation.tsx b/web/components/workspace/views/workpace-view-navigation.tsx
index 4e6a762b6..867764a5d 100644
--- a/web/components/workspace/views/workpace-view-navigation.tsx
+++ b/web/components/workspace/views/workpace-view-navigation.tsx
@@ -17,7 +17,7 @@ type Props = {
 
 export const WorkspaceViewsNavigation: React.FC<Props> = ({ handleAddView }) => {
   const router = useRouter();
-  const { workspaceSlug, viewId } = router.query;
+  const { workspaceSlug, globalViewId } = router.query;
 
   const { data: workspaceViews } = useSWR(
     workspaceSlug ? WORKSPACE_VIEWS_LIST(workspaceSlug.toString()) : null,
@@ -28,7 +28,7 @@ export const WorkspaceViewsNavigation: React.FC<Props> = ({ handleAddView }) =>
   React.useEffect(() => {
     const activeTabElement = document.getElementById("active-tab-global-view");
     if (activeTabElement) activeTabElement.scrollIntoView({ behavior: "smooth", inline: "center" });
-  }, [viewId, workspaceViews]);
+  }, [globalViewId, workspaceViews]);
 
   const tabsList = [
     {
@@ -80,13 +80,13 @@ export const WorkspaceViewsNavigation: React.FC<Props> = ({ handleAddView }) =>
         workspaceViews?.map((view) => (
           <button
             className={`border-b-2 min-w-min p-3 text-sm font-medium outline-none whitespace-nowrap flex-shrink-0 ${
-              view.id === viewId
+              view.id === globalViewId
                 ? "border-custom-primary-100 text-custom-primary-100"
                 : "border-transparent hover:border-custom-border-200 hover:text-custom-text-400"
             }`}
-            id={view.id === viewId ? `active-tab-global-view` : ``}
+            id={view.id === globalViewId ? `active-tab-global-view` : ``}
             onClick={() =>
-              router.replace(`/${workspaceSlug}/workspace-views/issues?viewId=${view.id}`)
+              router.replace(`/${workspaceSlug}/workspace-views/issues?globalViewId=${view.id}`)
             }
           >
             {view.name}
diff --git a/web/constants/fetch-keys.ts b/web/constants/fetch-keys.ts
index ec6d38d1e..431b6aafc 100644
--- a/web/constants/fetch-keys.ts
+++ b/web/constants/fetch-keys.ts
@@ -162,13 +162,11 @@ export const PROJECT_DRAFT_ISSUES_LIST_WITH_PARAMS = (projectId: string, params?
 
 export const WORKSPACE_VIEWS_LIST = (workspaceSlug: string) =>
   `WORKSPACE_VIEWS_LIST_${workspaceSlug.toUpperCase()}`;
-export const WORKSPACE_VIEW_DETAILS = (workspaceViewId: string) =>
-  `WORKSPACE_VIEW_DETAILS_${workspaceViewId.toUpperCase()}`;
-export const WORKSPACE_VIEW_ISSUES = (workspaceViewId: string, params: any) => {
-  if (!params) return `WORKSPACE_VIEW_ISSUES_${workspaceViewId.toUpperCase()}`;
-  return `WORKSPACE_VIEW_ISSUES_${workspaceViewId.toUpperCase()}_${paramsToKey(
-    params
-  ).toUpperCase()}`;
+export const WORKSPACE_VIEW_DETAILS = (globalViewId: string) =>
+  `WORKSPACE_VIEW_DETAILS_${globalViewId.toUpperCase()}`;
+export const WORKSPACE_VIEW_ISSUES = (globalViewId: string, params: any) => {
+  if (!params) return `WORKSPACE_VIEW_ISSUES_${globalViewId.toUpperCase()}`;
+  return `WORKSPACE_VIEW_ISSUES_${globalViewId.toUpperCase()}_${paramsToKey(params).toUpperCase()}`;
 };
 
 export const PROJECT_ISSUES_DETAILS = (issueId: string) =>
diff --git a/web/contexts/workspace-view-context.tsx b/web/contexts/workspace-view-context.tsx
index 3fc3dfa86..9b9364637 100644
--- a/web/contexts/workspace-view-context.tsx
+++ b/web/contexts/workspace-view-context.tsx
@@ -67,19 +67,19 @@ export const initialState: IWorkspaceGlobalViewProps = {
 
 const saveViewFilters = async (
   workspaceSlug: string,
-  viewId: string,
+  globalViewId: string,
   state: IWorkspaceGlobalViewProps
 ) => {
-  await workspaceService.updateView(workspaceSlug, viewId, {
+  await workspaceService.updateView(workspaceSlug, globalViewId, {
     query_data: state,
   });
 };
 
 export const WorkspaceViewProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
   const router = useRouter();
-  const { workspaceSlug, viewId } = router.query as {
+  const { workspaceSlug, globalViewId } = router.query as {
     workspaceSlug: string;
-    viewId: string;
+    globalViewId: string;
   };
 
   const [filters, setFilters] = useState<IWorkspaceGlobalViewProps>(initialState);
@@ -98,7 +98,7 @@ export const WorkspaceViewProvider: React.FC<{ children: React.ReactNode }> = ({
     };
     setFilters(() => updatedFilterPayload);
 
-    if (saveFiltersToServer) saveViewFilters(workspaceSlug, viewId, updatedFilterPayload);
+    if (saveFiltersToServer) saveViewFilters(workspaceSlug, globalViewId, updatedFilterPayload);
   };
 
   const computedFilter = (filters: any) => {
@@ -151,9 +151,9 @@ export const WorkspaceViewProvider: React.FC<{ children: React.ReactNode }> = ({
   };
 
   const { data: view, isLoading: viewLoading } = useSWR(
-    workspaceSlug && viewId ? WORKSPACE_VIEW_DETAILS(viewId.toString()) : null,
-    workspaceSlug && viewId
-      ? () => workspaceService.getViewDetails(workspaceSlug.toString(), viewId.toString())
+    workspaceSlug && globalViewId ? WORKSPACE_VIEW_DETAILS(globalViewId.toString()) : null,
+    workspaceSlug && globalViewId
+      ? () => workspaceService.getViewDetails(workspaceSlug.toString(), globalViewId.toString())
       : null
   );
 
@@ -162,10 +162,10 @@ export const WorkspaceViewProvider: React.FC<{ children: React.ReactNode }> = ({
     mutate: mutateViewIssues,
     isLoading: viewIssueLoading,
   } = useSWR(
-    workspaceSlug && view && viewId && filters
-      ? WORKSPACE_VIEW_ISSUES(viewId.toString(), params)
+    workspaceSlug && view && globalViewId && filters
+      ? WORKSPACE_VIEW_ISSUES(globalViewId.toString(), params)
       : null,
-    workspaceSlug && view && viewId
+    workspaceSlug && view && globalViewId
       ? () =>
           workspaceService.getViewIssues(
             workspaceSlug.toString(),
diff --git a/web/pages/[workspaceSlug]/workspace-views/all-issues.tsx b/web/pages/[workspaceSlug]/workspace-views/all-issues.tsx
index af3ad964f..e41b50a4a 100644
--- a/web/pages/[workspaceSlug]/workspace-views/all-issues.tsx
+++ b/web/pages/[workspaceSlug]/workspace-views/all-issues.tsx
@@ -18,7 +18,6 @@ const WorkspaceViewAllIssue = () => (
     }
     right={
       <div className="flex items-center gap-2">
-        {/* <MyIssuesViewOptions /> */}
         <WorkspaceIssuesViewOptions />
 
         <PrimaryButton
diff --git a/web/types/view-props.d.ts b/web/types/view-props.d.ts
index ccc0270ec..2b2a5a153 100644
--- a/web/types/view-props.d.ts
+++ b/web/types/view-props.d.ts
@@ -103,5 +103,5 @@ export interface IWorkspaceViewProps {
 export interface IWorkspaceGlobalViewProps {
   filters: IWorkspaceIssueFilterOptions;
   display_filters: IWorkspaceIssueDisplayFilterOptions | undefined;
-  display_properties: Properties | undefined;
+  display_properties: Properties;
 }

From 1b2812591938d1c2f5c273ec7e55c3066127a87c Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Fri, 29 Sep 2023 15:29:50 +0530
Subject: [PATCH 05/38] chore: workspace view order by removed (#2303)

---
 .../spreadsheet-view/spreadsheet-view.tsx     | 385 +++++++++---------
 1 file changed, 194 insertions(+), 191 deletions(-)

diff --git a/web/components/core/views/spreadsheet-view/spreadsheet-view.tsx b/web/components/core/views/spreadsheet-view/spreadsheet-view.tsx
index 538ad5743..7852a5a9d 100644
--- a/web/components/core/views/spreadsheet-view/spreadsheet-view.tsx
+++ b/web/components/core/views/spreadsheet-view/spreadsheet-view.tsx
@@ -234,8 +234,7 @@ export const SpreadsheetView: React.FC<Props> = ({
   const isNotAllowed = userAuth.isGuest || userAuth.isViewer;
 
   const handleOrderBy = (order: TIssueOrderByOptions, itemKey: string) => {
-    if (!globalViewId || !currentWorkspaceIssuePath)
-      handleFilters("display_filters", { order_by: order });
+    if (globalViewId) handleFilters("display_filters", { order_by: order });
     else setDisplayFilters({ order_by: order });
     setSelectedMenuItem(`${order}_${itemKey}`);
     setActiveSortingProperty(order === "-created_at" ? "" : itemKey);
@@ -250,199 +249,203 @@ export const SpreadsheetView: React.FC<Props> = ({
   ) => (
     <div className="relative flex flex-col h-max w-full bg-custom-background-100">
       <div className="flex items-center min-w-[9rem] px-4 py-2.5 text-sm font-medium z-[1] h-11 w-full sticky top-0 bg-custom-background-90 border border-l-0 border-custom-border-100">
-        <CustomMenu
-          customButtonClassName="!w-full"
-          className="!w-full"
-          position="left"
-          customButton={
-            <div
-              className={`relative group flex items-center justify-between gap-1.5 cursor-pointer text-sm text-custom-text-200 hover:text-custom-text-100 w-full py-3 px-2 ${
-                activeSortingProperty === propertyName ? "bg-custom-background-80" : ""
-              }`}
-            >
-              {activeSortingProperty === propertyName && (
-                <div className="absolute top-1 right-1.5">
-                  <Icon
-                    iconName="filter_list"
-                    className="flex items-center justify-center h-3.5 w-3.5 rounded-full bg-custom-primary text-xs text-white"
-                  />
-                </div>
-              )}
-
-              {header}
-              <ChevronDownIcon className="h-3 w-3" aria-hidden="true" />
-            </div>
-          }
-          width="xl"
-        >
-          <CustomMenu.MenuItem
-            onClick={() => {
-              handleOrderBy(ascendingOrder, propertyName);
-            }}
-          >
-            <div
-              className={`group flex gap-1.5 px-1 items-center justify-between ${
-                selectedMenuItem === `${ascendingOrder}_${propertyName}`
-                  ? "text-custom-text-100"
-                  : "text-custom-text-200 hover:text-custom-text-100"
-              }`}
-            >
-              <div className="flex gap-2 items-center">
-                {propertyName === "assignee" || propertyName === "labels" ? (
-                  <>
-                    <span className="relative flex items-center h-6 w-6">
-                      <Icon
-                        iconName="east"
-                        className="absolute left-0 rotate-90 text-xs leading-3"
-                      />
-                      <Icon iconName="sort" className="absolute right-0 text-sm" />
-                    </span>
-                    <span>A</span>
-                    <Icon iconName="east" className="text-sm" />
-                    <span>Z</span>
-                  </>
-                ) : propertyName === "due_date" ||
-                  propertyName === "created_on" ||
-                  propertyName === "updated_on" ? (
-                  <>
-                    <span className="relative flex items-center h-6 w-6">
-                      <Icon
-                        iconName="east"
-                        className="absolute left-0 rotate-90 text-xs leading-3"
-                      />
-                      <Icon iconName="sort" className="absolute right-0 text-sm" />
-                    </span>
-                    <span>New</span>
-                    <Icon iconName="east" className="text-sm" />
-                    <span>Old</span>
-                  </>
-                ) : (
-                  <>
-                    <span className="relative flex items-center h-6 w-6">
-                      <Icon
-                        iconName="east"
-                        className="absolute left-0 rotate-90 text-xs leading-3"
-                      />
-                      <Icon iconName="sort" className="absolute right-0 text-sm" />
-                    </span>
-                    <span>First</span>
-                    <Icon iconName="east" className="text-sm" />
-                    <span>Last</span>
-                  </>
-                )}
-              </div>
-
-              <CheckIcon
-                className={`h-3.5 w-3.5 opacity-0 group-hover:opacity-100 ${
-                  selectedMenuItem === `${ascendingOrder}_${propertyName}` ? "opacity-100" : ""
+        {currentWorkspaceIssuePath ? (
+          <span>{header}</span>
+        ) : (
+          <CustomMenu
+            customButtonClassName="!w-full"
+            className="!w-full"
+            position="left"
+            customButton={
+              <div
+                className={`relative group flex items-center justify-between gap-1.5 cursor-pointer text-sm text-custom-text-200 hover:text-custom-text-100 w-full py-3 px-2 ${
+                  activeSortingProperty === propertyName ? "bg-custom-background-80" : ""
                 }`}
-              />
-            </div>
-          </CustomMenu.MenuItem>
-          <CustomMenu.MenuItem
-            className={`mt-0.5 ${
-              selectedMenuItem === `${descendingOrder}_${propertyName}`
-                ? "bg-custom-background-80"
-                : ""
-            }`}
-            key={propertyName}
-            onClick={() => {
-              handleOrderBy(descendingOrder, propertyName);
-            }}
-          >
-            <div
-              className={`group flex gap-1.5 px-1 items-center justify-between ${
-                selectedMenuItem === `${descendingOrder}_${propertyName}`
-                  ? "text-custom-text-100"
-                  : "text-custom-text-200 hover:text-custom-text-100"
-              }`}
-            >
-              <div className="flex gap-2 items-center">
-                {propertyName === "assignee" || propertyName === "labels" ? (
-                  <>
-                    <span className="relative flex items-center h-6 w-6">
-                      <Icon
-                        iconName="east"
-                        className="absolute left-0 -rotate-90 text-xs leading-3"
-                      />
-                      <Icon
-                        iconName="sort"
-                        className="absolute rotate-180 transform scale-x-[-1] right-0 text-sm"
-                      />
-                    </span>
-                    <span>Z</span>
-                    <Icon iconName="east" className="text-sm" />
-                    <span>A</span>
-                  </>
-                ) : propertyName === "due_date" ? (
-                  <>
-                    <span className="relative flex items-center h-6 w-6">
-                      <Icon
-                        iconName="east"
-                        className="absolute left-0 -rotate-90 text-xs leading-3"
-                      />
-                      <Icon
-                        iconName="sort"
-                        className="absolute rotate-180 transform scale-x-[-1] right-0 text-sm"
-                      />
-                    </span>
-                    <span>Old</span>
-                    <Icon iconName="east" className="text-sm" />
-                    <span>New</span>
-                  </>
-                ) : (
-                  <>
-                    <span className="relative flex items-center h-6 w-6">
-                      <Icon
-                        iconName="east"
-                        className="absolute left-0 -rotate-90 text-xs leading-3"
-                      />
-                      <Icon
-                        iconName="sort"
-                        className="absolute rotate-180 transform scale-x-[-1] right-0 text-sm"
-                      />
-                    </span>
-                    <span>Last</span>
-                    <Icon iconName="east" className="text-sm" />
-                    <span>First</span>
-                  </>
-                )}
-              </div>
-
-              <CheckIcon
-                className={`h-3.5 w-3.5 opacity-0 group-hover:opacity-100 ${
-                  selectedMenuItem === `${descendingOrder}_${propertyName}` ? "opacity-100" : ""
-                }`}
-              />
-            </div>
-          </CustomMenu.MenuItem>
-          {selectedMenuItem &&
-            selectedMenuItem !== "" &&
-            displayFilters?.order_by !== "-created_at" &&
-            selectedMenuItem.includes(propertyName) && (
-              <CustomMenu.MenuItem
-                className={`mt-0.5${
-                  selectedMenuItem === `-created_at_${propertyName}`
-                    ? "bg-custom-background-80"
-                    : ""
-                }`}
-                key={propertyName}
-                onClick={() => {
-                  handleOrderBy("-created_at", propertyName);
-                }}
               >
-                <div className={`group flex gap-1.5 px-1 items-center justify-between `}>
-                  <div className="flex gap-1.5 items-center">
-                    <span className="relative flex items-center justify-center h-6 w-6">
-                      <Icon iconName="ink_eraser" className="text-sm" />
-                    </span>
-
-                    <span>Clear sorting</span>
+                {activeSortingProperty === propertyName && (
+                  <div className="absolute top-1 right-1.5">
+                    <Icon
+                      iconName="filter_list"
+                      className="flex items-center justify-center h-3.5 w-3.5 rounded-full bg-custom-primary text-xs text-white"
+                    />
                   </div>
+                )}
+
+                {header}
+                <ChevronDownIcon className="h-3 w-3" aria-hidden="true" />
+              </div>
+            }
+            width="xl"
+          >
+            <CustomMenu.MenuItem
+              onClick={() => {
+                handleOrderBy(ascendingOrder, propertyName);
+              }}
+            >
+              <div
+                className={`group flex gap-1.5 px-1 items-center justify-between ${
+                  selectedMenuItem === `${ascendingOrder}_${propertyName}`
+                    ? "text-custom-text-100"
+                    : "text-custom-text-200 hover:text-custom-text-100"
+                }`}
+              >
+                <div className="flex gap-2 items-center">
+                  {propertyName === "assignee" || propertyName === "labels" ? (
+                    <>
+                      <span className="relative flex items-center h-6 w-6">
+                        <Icon
+                          iconName="east"
+                          className="absolute left-0 rotate-90 text-xs leading-3"
+                        />
+                        <Icon iconName="sort" className="absolute right-0 text-sm" />
+                      </span>
+                      <span>A</span>
+                      <Icon iconName="east" className="text-sm" />
+                      <span>Z</span>
+                    </>
+                  ) : propertyName === "due_date" ||
+                    propertyName === "created_on" ||
+                    propertyName === "updated_on" ? (
+                    <>
+                      <span className="relative flex items-center h-6 w-6">
+                        <Icon
+                          iconName="east"
+                          className="absolute left-0 rotate-90 text-xs leading-3"
+                        />
+                        <Icon iconName="sort" className="absolute right-0 text-sm" />
+                      </span>
+                      <span>New</span>
+                      <Icon iconName="east" className="text-sm" />
+                      <span>Old</span>
+                    </>
+                  ) : (
+                    <>
+                      <span className="relative flex items-center h-6 w-6">
+                        <Icon
+                          iconName="east"
+                          className="absolute left-0 rotate-90 text-xs leading-3"
+                        />
+                        <Icon iconName="sort" className="absolute right-0 text-sm" />
+                      </span>
+                      <span>First</span>
+                      <Icon iconName="east" className="text-sm" />
+                      <span>Last</span>
+                    </>
+                  )}
                 </div>
-              </CustomMenu.MenuItem>
-            )}
-        </CustomMenu>
+
+                <CheckIcon
+                  className={`h-3.5 w-3.5 opacity-0 group-hover:opacity-100 ${
+                    selectedMenuItem === `${ascendingOrder}_${propertyName}` ? "opacity-100" : ""
+                  }`}
+                />
+              </div>
+            </CustomMenu.MenuItem>
+            <CustomMenu.MenuItem
+              className={`mt-0.5 ${
+                selectedMenuItem === `${descendingOrder}_${propertyName}`
+                  ? "bg-custom-background-80"
+                  : ""
+              }`}
+              key={propertyName}
+              onClick={() => {
+                handleOrderBy(descendingOrder, propertyName);
+              }}
+            >
+              <div
+                className={`group flex gap-1.5 px-1 items-center justify-between ${
+                  selectedMenuItem === `${descendingOrder}_${propertyName}`
+                    ? "text-custom-text-100"
+                    : "text-custom-text-200 hover:text-custom-text-100"
+                }`}
+              >
+                <div className="flex gap-2 items-center">
+                  {propertyName === "assignee" || propertyName === "labels" ? (
+                    <>
+                      <span className="relative flex items-center h-6 w-6">
+                        <Icon
+                          iconName="east"
+                          className="absolute left-0 -rotate-90 text-xs leading-3"
+                        />
+                        <Icon
+                          iconName="sort"
+                          className="absolute rotate-180 transform scale-x-[-1] right-0 text-sm"
+                        />
+                      </span>
+                      <span>Z</span>
+                      <Icon iconName="east" className="text-sm" />
+                      <span>A</span>
+                    </>
+                  ) : propertyName === "due_date" ? (
+                    <>
+                      <span className="relative flex items-center h-6 w-6">
+                        <Icon
+                          iconName="east"
+                          className="absolute left-0 -rotate-90 text-xs leading-3"
+                        />
+                        <Icon
+                          iconName="sort"
+                          className="absolute rotate-180 transform scale-x-[-1] right-0 text-sm"
+                        />
+                      </span>
+                      <span>Old</span>
+                      <Icon iconName="east" className="text-sm" />
+                      <span>New</span>
+                    </>
+                  ) : (
+                    <>
+                      <span className="relative flex items-center h-6 w-6">
+                        <Icon
+                          iconName="east"
+                          className="absolute left-0 -rotate-90 text-xs leading-3"
+                        />
+                        <Icon
+                          iconName="sort"
+                          className="absolute rotate-180 transform scale-x-[-1] right-0 text-sm"
+                        />
+                      </span>
+                      <span>Last</span>
+                      <Icon iconName="east" className="text-sm" />
+                      <span>First</span>
+                    </>
+                  )}
+                </div>
+
+                <CheckIcon
+                  className={`h-3.5 w-3.5 opacity-0 group-hover:opacity-100 ${
+                    selectedMenuItem === `${descendingOrder}_${propertyName}` ? "opacity-100" : ""
+                  }`}
+                />
+              </div>
+            </CustomMenu.MenuItem>
+            {selectedMenuItem &&
+              selectedMenuItem !== "" &&
+              displayFilters?.order_by !== "-created_at" &&
+              selectedMenuItem.includes(propertyName) && (
+                <CustomMenu.MenuItem
+                  className={`mt-0.5${
+                    selectedMenuItem === `-created_at_${propertyName}`
+                      ? "bg-custom-background-80"
+                      : ""
+                  }`}
+                  key={propertyName}
+                  onClick={() => {
+                    handleOrderBy("-created_at", propertyName);
+                  }}
+                >
+                  <div className={`group flex gap-1.5 px-1 items-center justify-between `}>
+                    <div className="flex gap-1.5 items-center">
+                      <span className="relative flex items-center justify-center h-6 w-6">
+                        <Icon iconName="ink_eraser" className="text-sm" />
+                      </span>
+
+                      <span>Clear sorting</span>
+                    </div>
+                  </div>
+                </CustomMenu.MenuItem>
+              )}
+          </CustomMenu>
+        )}
       </div>
       <div className="h-full min-w-[9rem] w-full">
         {spreadsheetIssues.map((issue: IIssue, index) => (

From f1879a404d0d9f73eedc76713e069d9a8a961cb1 Mon Sep 17 00:00:00 2001
From: Bavisetti Narayan <72156168+NarayanBavisetti@users.noreply.github.com>
Date: Fri, 29 Sep 2023 16:12:54 +0530
Subject: [PATCH 06/38] dev: updated migrations for 0.13-dev (#2305)

* chore: epoch migration batch size changed

* chore: reoredered the migration files

* dev: updated migrations for 0.13-dev

* chore: added epoch field

* dev: merged the migration files
---
 ..._alter_analyticview_created_by_and_more.py |  5 +-
 .../db/migrations/0045_auto_20230915_0655.py  | 42 ----------
 ...ch_workspacemember_issue_props_and_more.py | 79 +++++++++++++++++++
 .../db/migrations/0046_auto_20230926_1015.py  | 26 ------
 .../db/migrations/0047_auto_20230926_1029.py  | 44 -----------
 ...er_workspacemember_issue_props_and_more.py | 24 ------
 6 files changed, 81 insertions(+), 139 deletions(-)
 delete mode 100644 apiserver/plane/db/migrations/0045_auto_20230915_0655.py
 create mode 100644 apiserver/plane/db/migrations/0045_issueactivity_epoch_workspacemember_issue_props_and_more.py
 delete mode 100644 apiserver/plane/db/migrations/0046_auto_20230926_1015.py
 delete mode 100644 apiserver/plane/db/migrations/0047_auto_20230926_1029.py
 delete mode 100644 apiserver/plane/db/migrations/0048_globalview_sort_order_workspacemember_issue_props_and_more.py

diff --git a/apiserver/plane/db/migrations/0043_alter_analyticview_created_by_and_more.py b/apiserver/plane/db/migrations/0043_alter_analyticview_created_by_and_more.py
index 950189c55..5a806c704 100644
--- a/apiserver/plane/db/migrations/0043_alter_analyticview_created_by_and_more.py
+++ b/apiserver/plane/db/migrations/0043_alter_analyticview_created_by_and_more.py
@@ -33,9 +33,8 @@ def create_issue_relation(apps, schema_editor):
 def update_issue_priority_choice(apps, schema_editor):
     IssueModel = apps.get_model("db", "Issue")
     updated_issues = []
-    for obj in IssueModel.objects.all():
-        if obj.priority is None:
-            obj.priority = "none"
+    for obj in IssueModel.objects.filter(priority=None):
+        obj.priority = "none"
         updated_issues.append(obj)
     IssueModel.objects.bulk_update(updated_issues, ["priority"], batch_size=100)
 
diff --git a/apiserver/plane/db/migrations/0045_auto_20230915_0655.py b/apiserver/plane/db/migrations/0045_auto_20230915_0655.py
deleted file mode 100644
index cd9aa6902..000000000
--- a/apiserver/plane/db/migrations/0045_auto_20230915_0655.py
+++ /dev/null
@@ -1,42 +0,0 @@
-# Generated by Django 4.2.3 on 2023-09-15 06:55
-
-from django.db import migrations, models
-from django.conf import settings
-import django.db.models.deletion
-import uuid
-
-
-class Migration(migrations.Migration):
-    dependencies = [
-        ("db", "0044_auto_20230913_0709"),
-    ]
-
-    operations = [
-        migrations.CreateModel(
-            name="GlobalView",
-            fields=[
-                ("created_at", models.DateTimeField(auto_now_add=True, verbose_name="Created At"),),
-                ("updated_at", models.DateTimeField(auto_now=True, verbose_name="Last Modified At"),),
-                ("id", models.UUIDField(db_index=True, default=uuid.uuid4, editable=False, primary_key=True, serialize=False, unique=True,),),
-                ("name", models.CharField(max_length=255, verbose_name="View Name")),
-                ("description", models.TextField(blank=True, verbose_name="View Description"),),
-                ("query", models.JSONField(verbose_name="View Query")),
-                ("access", models.PositiveSmallIntegerField(choices=[(0, "Private"), (1, "Public")], default=1),),
-                ("query_data", models.JSONField(default=dict)),
-                ("created_by", models.ForeignKey(null=True, on_delete=django.db.models.deletion.SET_NULL, related_name="%(class)s_created_by", to=settings.AUTH_USER_MODEL, verbose_name="Created By",),),
-                ("updated_by", models.ForeignKey(null=True, on_delete=django.db.models.deletion.SET_NULL, related_name="%(class)s_updated_by", to=settings.AUTH_USER_MODEL, verbose_name="Last Modified By",),),
-                ("workspace", models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name="global_views", to="db.workspace",),),
-            ],
-            options={
-                "verbose_name": "Global View",
-                "verbose_name_plural": "Global Views",
-                "db_table": "global_views",
-                "ordering": ("-created_at",),
-            },
-        ),
-        migrations.AddField(
-            model_name="issueactivity",
-            name="epoch",
-            field=models.FloatField(null=True),
-        ),    
-    ]
diff --git a/apiserver/plane/db/migrations/0045_issueactivity_epoch_workspacemember_issue_props_and_more.py b/apiserver/plane/db/migrations/0045_issueactivity_epoch_workspacemember_issue_props_and_more.py
new file mode 100644
index 000000000..4b9c1b1eb
--- /dev/null
+++ b/apiserver/plane/db/migrations/0045_issueactivity_epoch_workspacemember_issue_props_and_more.py
@@ -0,0 +1,79 @@
+# Generated by Django 4.2.5 on 2023-09-29 10:14
+
+from django.conf import settings
+from django.db import migrations, models
+import django.db.models.deletion
+import plane.db.models.workspace
+import uuid
+
+
+def update_issue_activity_priority(apps, schema_editor):
+    IssueActivity = apps.get_model("db", "IssueActivity")
+    updated_issue_activity = []
+    for obj in IssueActivity.objects.filter(field="priority"):
+        # Set the old and new value to none if it is empty for Priority
+        obj.new_value = obj.new_value or "none"
+        obj.old_value = obj.old_value or "none"
+        updated_issue_activity.append(obj)
+    IssueActivity.objects.bulk_update(
+        updated_issue_activity,
+        ["new_value", "old_value"],
+        batch_size=2000,
+    )
+
+def update_issue_activity_blocked(apps, schema_editor):
+    IssueActivity = apps.get_model("db", "IssueActivity")
+    updated_issue_activity = []
+    for obj in IssueActivity.objects.filter(field="blocks"):
+        # Set the field to blocked_by
+        obj.field = "blocked_by"
+        updated_issue_activity.append(obj)
+    IssueActivity.objects.bulk_update(
+        updated_issue_activity,
+        ["field"],
+        batch_size=1000,
+    )
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('db', '0044_auto_20230913_0709'),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='GlobalView',
+            fields=[
+                ('created_at', models.DateTimeField(auto_now_add=True, verbose_name='Created At')),
+                ('updated_at', models.DateTimeField(auto_now=True, verbose_name='Last Modified At')),
+                ('id', models.UUIDField(db_index=True, default=uuid.uuid4, editable=False, primary_key=True, serialize=False, unique=True)),
+                ('name', models.CharField(max_length=255, verbose_name='View Name')),
+                ('description', models.TextField(blank=True, verbose_name='View Description')),
+                ('query', models.JSONField(verbose_name='View Query')),
+                ('access', models.PositiveSmallIntegerField(choices=[(0, 'Private'), (1, 'Public')], default=1)),
+                ('query_data', models.JSONField(default=dict)),
+                ('sort_order', models.FloatField(default=65535)),
+                ('created_by', models.ForeignKey(null=True, on_delete=django.db.models.deletion.SET_NULL, related_name='%(class)s_created_by', to=settings.AUTH_USER_MODEL, verbose_name='Created By')),
+                ('updated_by', models.ForeignKey(null=True, on_delete=django.db.models.deletion.SET_NULL, related_name='%(class)s_updated_by', to=settings.AUTH_USER_MODEL, verbose_name='Last Modified By')),
+                ('workspace', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='global_views', to='db.workspace')),
+            ],
+            options={
+                'verbose_name': 'Global View',
+                'verbose_name_plural': 'Global Views',
+                'db_table': 'global_views',
+                'ordering': ('-created_at',),
+            },
+        ),
+        migrations.AddField(
+            model_name='workspacemember',
+            name='issue_props',
+            field=models.JSONField(default=plane.db.models.workspace.get_issue_props),
+        ),
+        migrations.AddField(
+            model_name='issueactivity',
+            name='epoch',
+            field=models.FloatField(null=True),
+        ),
+        migrations.RunPython(update_issue_activity_priority),
+        migrations.RunPython(update_issue_activity_blocked),
+    ]
diff --git a/apiserver/plane/db/migrations/0046_auto_20230926_1015.py b/apiserver/plane/db/migrations/0046_auto_20230926_1015.py
deleted file mode 100644
index 8bce37d95..000000000
--- a/apiserver/plane/db/migrations/0046_auto_20230926_1015.py
+++ /dev/null
@@ -1,26 +0,0 @@
-# Generated by Django 4.2.5 on 2023-09-26 10:15
-
-from django.db import migrations
-
-
-def update_issue_activity(apps, schema_editor):
-    IssueActivity = apps.get_model("db", "IssueActivity")
-    updated_issue_activity = []
-    for obj in IssueActivity.objects.all():
-        obj.epoch = int(obj.created_at.timestamp())
-        updated_issue_activity.append(obj)
-    IssueActivity.objects.bulk_update(
-        updated_issue_activity,
-        ["epoch"],
-        batch_size=5000,
-    )
-
-class Migration(migrations.Migration):
-
-    dependencies = [
-        ('db', '0045_auto_20230915_0655'),
-    ]
-
-    operations = [
-         migrations.RunPython(update_issue_activity),
-    ]
diff --git a/apiserver/plane/db/migrations/0047_auto_20230926_1029.py b/apiserver/plane/db/migrations/0047_auto_20230926_1029.py
deleted file mode 100644
index da64e11c8..000000000
--- a/apiserver/plane/db/migrations/0047_auto_20230926_1029.py
+++ /dev/null
@@ -1,44 +0,0 @@
-# Generated by Django 4.2.5 on 2023-09-26 10:29
-
-from django.db import migrations
-
-
-def update_issue_activity_priority(apps, schema_editor):
-    IssueActivity = apps.get_model("db", "IssueActivity")
-    updated_issue_activity = []
-    for obj in IssueActivity.objects.filter(field="priority"):
-        # Set the old and new value to none if it is empty for Priority
-        obj.new_value = obj.new_value or "none"
-        obj.old_value = obj.old_value or "none"
-        updated_issue_activity.append(obj)
-    IssueActivity.objects.bulk_update(
-        updated_issue_activity,
-        ["new_value", "old_value"],
-        batch_size=1000,
-    )
-
-def update_issue_activity_blocked(apps, schema_editor):
-    IssueActivity = apps.get_model("db", "IssueActivity")
-    updated_issue_activity = []
-    for obj in IssueActivity.objects.filter(field="blocks"):
-        # Set the field to blocked_by
-        obj.field = "blocked_by"
-        updated_issue_activity.append(obj)
-    IssueActivity.objects.bulk_update(
-        updated_issue_activity,
-        ["field"],
-        batch_size=1000,
-    )
-
-
-
-class Migration(migrations.Migration):
-
-    dependencies = [
-        ('db', '0046_auto_20230926_1015'),
-    ]
-
-    operations = [
-        migrations.RunPython(update_issue_activity_priority),
-        migrations.RunPython(update_issue_activity_blocked),
-    ]
diff --git a/apiserver/plane/db/migrations/0048_globalview_sort_order_workspacemember_issue_props_and_more.py b/apiserver/plane/db/migrations/0048_globalview_sort_order_workspacemember_issue_props_and_more.py
deleted file mode 100644
index 3084ef637..000000000
--- a/apiserver/plane/db/migrations/0048_globalview_sort_order_workspacemember_issue_props_and_more.py
+++ /dev/null
@@ -1,24 +0,0 @@
-# Generated by Django 4.2.5 on 2023-09-27 11:18
-
-from django.db import migrations, models
-import plane.db.models.workspace
-
-
-class Migration(migrations.Migration):
-
-    dependencies = [
-        ('db', '0047_auto_20230926_1029'),
-    ]
-
-    operations = [
-        migrations.AddField(
-            model_name='globalview',
-            name='sort_order',
-            field=models.FloatField(default=65535),
-        ),
-        migrations.AddField(
-            model_name='workspacemember',
-            name='issue_props',
-            field=models.JSONField(default=plane.db.models.workspace.get_issue_props),
-        ),
-    ]

From 4cab00ec79b393ace63d435a52621b5d5c9d65af Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Fri, 29 Sep 2023 16:40:02 +0530
Subject: [PATCH 07/38] fix: workspace view filters count fix (#2307)

---
 .../core/filters/workspace-filters-list.tsx   |   2 -
 web/components/views/single-view-item.tsx     |  64 +++++-----
 .../views/single-workspace-view-item.tsx      | 110 ++++++++++++++++++
 .../projects/[projectId]/views/index.tsx      |   1 -
 .../[workspaceSlug]/workspace-views/index.tsx |   5 +-
 5 files changed, 138 insertions(+), 44 deletions(-)
 create mode 100644 web/components/workspace/views/single-workspace-view-item.tsx

diff --git a/web/components/core/filters/workspace-filters-list.tsx b/web/components/core/filters/workspace-filters-list.tsx
index dafab6e9d..0b31ae7f5 100644
--- a/web/components/core/filters/workspace-filters-list.tsx
+++ b/web/components/core/filters/workspace-filters-list.tsx
@@ -299,8 +299,6 @@ export const WorkspaceFiltersList: React.FC<Props> = ({
                     : key === "project"
                     ? filters.project?.map((projectId) => {
                         const currentProject = project?.find((p) => p.id === projectId);
-                        console.log("currentProject", currentProject);
-                        console.log("currentProject", projectId);
                         return (
                           <p
                             key={currentProject?.id}
diff --git a/web/components/views/single-view-item.tsx b/web/components/views/single-view-item.tsx
index 6dba9c097..70f07a416 100644
--- a/web/components/views/single-view-item.tsx
+++ b/web/components/views/single-view-item.tsx
@@ -12,7 +12,6 @@ import { CustomMenu } from "components/ui";
 import viewsService from "services/views.service";
 // types
 import { IView } from "types";
-import { IWorkspaceView } from "types/workspace-views";
 // fetch keys
 import { VIEWS_LIST } from "constants/fetch-keys";
 // hooks
@@ -21,18 +20,12 @@ import useToast from "hooks/use-toast";
 import { truncateText } from "helpers/string.helper";
 
 type Props = {
-  view: IView | IWorkspaceView;
-  viewType: "project" | "workspace";
+  view: IView;
   handleEditView: () => void;
   handleDeleteView: () => void;
 };
 
-export const SingleViewItem: React.FC<Props> = ({
-  view,
-  viewType,
-  handleEditView,
-  handleDeleteView,
-}) => {
+export const SingleViewItem: React.FC<Props> = ({ view, handleEditView, handleDeleteView }) => {
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
 
@@ -88,10 +81,7 @@ export const SingleViewItem: React.FC<Props> = ({
       });
   };
 
-  const viewRedirectionUrl =
-    viewType === "project"
-      ? `/${workspaceSlug}/projects/${projectId}/views/${view.id}`
-      : `/${workspaceSlug}/workspace-views/issues?globalViewId=${view.id}`;
+  const viewRedirectionUrl = `/${workspaceSlug}/projects/${projectId}/views/${view.id}`;
 
   return (
     <div className="group hover:bg-custom-background-90 border-b border-custom-border-200">
@@ -126,31 +116,29 @@ export const SingleViewItem: React.FC<Props> = ({
                   filters
                 </p>
 
-                {viewType === "project" ? (
-                  view.is_favorite ? (
-                    <button
-                      type="button"
-                      onClick={(e) => {
-                        e.preventDefault();
-                        e.stopPropagation();
-                        handleRemoveFromFavorites();
-                      }}
-                    >
-                      <StarIcon className="h-4 w-4 text-orange-400" fill="#f6ad55" />
-                    </button>
-                  ) : (
-                    <button
-                      type="button"
-                      onClick={(e) => {
-                        e.preventDefault();
-                        e.stopPropagation();
-                        handleAddToFavorites();
-                      }}
-                    >
-                      <StarIcon className="h-4 w-4 " color="rgb(var(--color-text-200))" />
-                    </button>
-                  )
-                ) : null}
+                {view.is_favorite ? (
+                  <button
+                    type="button"
+                    onClick={(e) => {
+                      e.preventDefault();
+                      e.stopPropagation();
+                      handleRemoveFromFavorites();
+                    }}
+                  >
+                    <StarIcon className="h-4 w-4 text-orange-400" fill="#f6ad55" />
+                  </button>
+                ) : (
+                  <button
+                    type="button"
+                    onClick={(e) => {
+                      e.preventDefault();
+                      e.stopPropagation();
+                      handleAddToFavorites();
+                    }}
+                  >
+                    <StarIcon className="h-4 w-4 " color="rgb(var(--color-text-200))" />
+                  </button>
+                )}
                 <CustomMenu width="auto" ellipsis>
                   <CustomMenu.MenuItem
                     onClick={(e: any) => {
diff --git a/web/components/workspace/views/single-workspace-view-item.tsx b/web/components/workspace/views/single-workspace-view-item.tsx
new file mode 100644
index 000000000..fd153bdfc
--- /dev/null
+++ b/web/components/workspace/views/single-workspace-view-item.tsx
@@ -0,0 +1,110 @@
+import React from "react";
+
+import Link from "next/link";
+import { useRouter } from "next/router";
+
+// icons
+import { TrashIcon, PencilIcon } from "@heroicons/react/24/outline";
+import { PhotoFilterOutlined } from "@mui/icons-material";
+//components
+import { CustomMenu } from "components/ui";
+import { IWorkspaceView } from "types/workspace-views";
+// helpers
+import { truncateText } from "helpers/string.helper";
+
+type Props = {
+  view: IWorkspaceView;
+  handleEditView: () => void;
+  handleDeleteView: () => void;
+};
+
+export const SingleWorkspaceViewItem: React.FC<Props> = ({
+  view,
+  handleEditView,
+  handleDeleteView,
+}) => {
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  const viewRedirectionUrl = `/${workspaceSlug}/workspace-views/issues?globalViewId=${view.id}`;
+
+  return (
+    <div className="group hover:bg-custom-background-90 border-b border-custom-border-200">
+      <Link href={viewRedirectionUrl}>
+        <a className="flex items-center justify-between relative rounded px-5 py-4 w-full">
+          <div className="flex items-center justify-between w-full">
+            <div className="flex items-center gap-4">
+              <div
+                className={`flex items-center justify-center h-10 w-10 rounded bg-custom-background-90 group-hover:bg-custom-background-100`}
+              >
+                <PhotoFilterOutlined className="!text-base !leading-6" />
+              </div>
+              <div className="flex flex-col">
+                <p className="truncate text-sm leading-4 font-medium">
+                  {truncateText(view.name, 75)}
+                </p>
+                {view?.description && (
+                  <p className="text-xs text-custom-text-200">{view.description}</p>
+                )}
+              </div>
+            </div>
+            <div className="ml-2 flex flex-shrink-0">
+              <div className="flex items-center gap-4">
+                <p className="rounded bg-custom-background-80 py-1 px-2 text-xs text-custom-text-200 opacity-0 group-hover:opacity-100">
+                  {view.query_data.filters && Object.keys(view.query_data.filters).length > 0
+                    ? `${Object.keys(view.query_data.filters)
+                        .map((key: string) =>
+                          view.query_data.filters[key as keyof typeof view.query_data.filters] !==
+                          null
+                            ? isNaN(
+                                (
+                                  view.query_data.filters[
+                                    key as keyof typeof view.query_data.filters
+                                  ] as any
+                                ).length
+                              )
+                              ? 0
+                              : (
+                                  view.query_data.filters[
+                                    key as keyof typeof view.query_data.filters
+                                  ] as any
+                                ).length
+                            : 0
+                        )
+                        .reduce((curr, prev) => curr + prev, 0)} filters`
+                    : "0 filters"}
+                </p>
+                <CustomMenu width="auto" ellipsis>
+                  <CustomMenu.MenuItem
+                    onClick={(e: any) => {
+                      e.preventDefault();
+                      e.stopPropagation();
+                      handleEditView();
+                    }}
+                  >
+                    <span className="flex items-center justify-start gap-2">
+                      <PencilIcon className="h-3.5 w-3.5" />
+                      <span>Edit View</span>
+                    </span>
+                  </CustomMenu.MenuItem>
+                  <CustomMenu.MenuItem
+                    onClick={(e: any) => {
+                      e.preventDefault();
+                      e.stopPropagation();
+                      handleDeleteView();
+                    }}
+                  >
+                    <span className="flex items-center justify-start gap-2">
+                      <TrashIcon className="h-3.5 w-3.5" />
+                      <span>Delete View</span>
+                    </span>
+                  </CustomMenu.MenuItem>
+                </CustomMenu>
+              </div>
+            </div>
+          </div>
+        </a>
+      </Link>
+    </div>
+  );
+};
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/views/index.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/views/index.tsx
index c75cdd320..9a5511037 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/views/index.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/views/index.tsx
@@ -107,7 +107,6 @@ const ProjectViews: NextPage = () => {
                 <SingleViewItem
                   key={view.id}
                   view={view}
-                  viewType="project"
                   handleEditView={() => handleEditView(view)}
                   handleDeleteView={() => handleDeleteView(view)}
                 />
diff --git a/web/pages/[workspaceSlug]/workspace-views/index.tsx b/web/pages/[workspaceSlug]/workspace-views/index.tsx
index a03393e1d..5e1ef61a8 100644
--- a/web/pages/[workspaceSlug]/workspace-views/index.tsx
+++ b/web/pages/[workspaceSlug]/workspace-views/index.tsx
@@ -11,7 +11,7 @@ import workspaceService from "services/workspace.service";
 // layouts
 import { WorkspaceAuthorizationLayout } from "layouts/auth-layout";
 // components
-import { SingleViewItem } from "components/views";
+import { SingleWorkspaceViewItem } from "components/workspace/views/single-workspace-view-item";
 import { WorkspaceIssuesViewOptions } from "components/issues/workspace-views/workspace-issue-view-option";
 import { CreateUpdateWorkspaceViewModal } from "components/workspace/views/modal";
 import { DeleteWorkspaceViewModal } from "components/workspace/views/delete-workspace-view-modal";
@@ -169,10 +169,9 @@ const WorkspaceViews: NextPage = () => {
           filteredOptions.length > 0 ? (
             <div>
               {filteredOptions.map((view) => (
-                <SingleViewItem
+                <SingleWorkspaceViewItem
                   key={view.id}
                   view={view}
-                  viewType="workspace"
                   handleEditView={() => handleEditView(view)}
                   handleDeleteView={() => handleDeleteView(view)}
                 />

From 843ba5bb6382e31a28a7fbdb0566ddfc5529c18a Mon Sep 17 00:00:00 2001
From: sriram veeraghanta <veeraghanta.sriram@gmail.com>
Date: Fri, 29 Sep 2023 18:06:33 +0530
Subject: [PATCH 08/38] fix: unsplash api fix (#2310)

---
 web/pages/api/unsplash.ts | 28 ++++++++++++++++------------
 1 file changed, 16 insertions(+), 12 deletions(-)

diff --git a/web/pages/api/unsplash.ts b/web/pages/api/unsplash.ts
index 693fecc1c..11acb2096 100644
--- a/web/pages/api/unsplash.ts
+++ b/web/pages/api/unsplash.ts
@@ -4,19 +4,23 @@ import type { NextApiRequest, NextApiResponse } from "next";
 const unsplashKey = process.env.UNSPLASH_ACCESS_KEY;
 
 export default async function handler(req: NextApiRequest, res: NextApiResponse) {
-  const { query, page, per_page = 20 } = req.query;
+  try {
+    const { query, page, per_page = 20 } = req.query;
 
-  const url = query
-    ? `https://api.unsplash.com/search/photos/?client_id=${unsplashKey}&query=${query}&page=${page}&per_page=${per_page}`
-    : `https://api.unsplash.com/photos/?client_id=${unsplashKey}&page=${page}&per_page=${per_page}`;
+    const url = query
+      ? `https://api.unsplash.com/search/photos/?client_id=${unsplashKey}&query=${query}&page=${page}&per_page=${per_page}`
+      : `https://api.unsplash.com/photos/?client_id=${unsplashKey}&page=${page}&per_page=${per_page}`;
 
-  const response = await axios({
-    method: "GET",
-    url,
-    headers: {
-      "Content-Type": "application/json",
-    },
-  });
+    const response = await axios({
+      method: "GET",
+      url,
+      headers: {
+        "Content-Type": "application/json",
+      },
+    });
 
-  res.status(200).json(response);
+    res.status(200).json(response?.data);
+  } catch (error) {
+    res.status(500).json({ message: "Failed to fetch unsplash", error });
+  }
 }

From f73135c504acb0f661a4a01978fa9d1ec34d7909 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Fri, 29 Sep 2023 19:03:36 +0530
Subject: [PATCH 09/38] fix: workspace view redirection fix, style: spreadsheet
 view shadow scroll fix (#2314)

* fix: workspace view redirection fix

* style: spreadsheet view scroll shadow fix
---
 .../core/views/spreadsheet-view/spreadsheet-view.tsx       | 7 ++++---
 web/components/workspace/views/modal.tsx                   | 2 +-
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/web/components/core/views/spreadsheet-view/spreadsheet-view.tsx b/web/components/core/views/spreadsheet-view/spreadsheet-view.tsx
index 7852a5a9d..0d9214a36 100644
--- a/web/components/core/views/spreadsheet-view/spreadsheet-view.tsx
+++ b/web/components/core/views/spreadsheet-view/spreadsheet-view.tsx
@@ -500,9 +500,10 @@ export const SpreadsheetView: React.FC<Props> = ({
               <>
                 <div className="sticky left-0 w-[28rem] z-[2]">
                   <div
-                    className={`relative flex flex-col h-max w-full bg-custom-background-100 z-[2] ${
-                      isScrolled ? "shadow-r shadow-custom-shadow-xs" : ""
-                    }`}
+                    className="relative flex flex-col h-max w-full bg-custom-background-100 z-[2]"
+                    style={{
+                      boxShadow: isScrolled ? "8px -9px 12px rgba(0, 0, 0, 0.15)" : "",
+                    }}
                   >
                     <div className="flex items-center text-sm font-medium z-[2] h-11 w-full sticky top-0 bg-custom-background-90 border border-l-0 border-custom-border-100">
                       {currentViewProperties.key && (
diff --git a/web/components/workspace/views/modal.tsx b/web/components/workspace/views/modal.tsx
index 7d8f679b5..f0f027468 100644
--- a/web/components/workspace/views/modal.tsx
+++ b/web/components/workspace/views/modal.tsx
@@ -52,7 +52,7 @@ export const CreateUpdateWorkspaceViewModal: React.FC<Props> = ({
         mutate(WORKSPACE_VIEWS_LIST(workspaceSlug as string));
         handleClose();
 
-        router.replace(`/${workspaceSlug}/workspace-views/issues?viewId=${res.id}`);
+        router.replace(`/${workspaceSlug}/workspace-views/issues?globalViewId=${res.id}`);
 
         setToastAlert({
           type: "success",

From 6b5fe0fff176dcabd22ba4d720a9d0cbcb09838e Mon Sep 17 00:00:00 2001
From: Nikhil <118773738+pablohashescobar@users.noreply.github.com>
Date: Fri, 29 Sep 2023 19:14:07 +0530
Subject: [PATCH 10/38] fix: update build workflow for the deploy app (#2315)

---
 .github/workflows/Update_Docker_Images.yml | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/.github/workflows/Update_Docker_Images.yml b/.github/workflows/Update_Docker_Images.yml
index 30593b584..67ae97e75 100644
--- a/.github/workflows/Update_Docker_Images.yml
+++ b/.github/workflows/Update_Docker_Images.yml
@@ -39,10 +39,10 @@ jobs:
             type=ref,event=tag
 
       - name: Extract metadata (tags, labels) for Docker (Docker Hub) from Github Release
-        id: metaDeploy
+        id: metaSpace
         uses: docker/metadata-action@v4.3.0
         with:
-          images: ${{ secrets.DOCKERHUB_USERNAME }}/plane-deploy
+          images: ${{ secrets.DOCKERHUB_USERNAME }}/plane-space
           tags: |
             type=ref,event=tag
 
@@ -87,7 +87,7 @@ jobs:
           file: ./space/Dockerfile.space
           platforms: linux/amd64
           push: true
-          tags: ${{ steps.metaDeploy.outputs.tags }}
+          tags: ${{ steps.metaSpace.outputs.tags }}
         env:
           DOCKER_BUILDKIT: 1
           DOCKER_USERNAME: ${{ secrets.DOCKERHUB_USERNAME }}

From ebf79ee2aaa0a4be8e62770ba5830892577facae Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Fri, 29 Sep 2023 20:02:56 +0530
Subject: [PATCH 11/38] fix: workspace view add issue mutation fix (#2317)

---
 web/components/issues/modal.tsx | 49 ++++++++++++++++++++++++++++++++-
 1 file changed, 48 insertions(+), 1 deletion(-)

diff --git a/web/components/issues/modal.tsx b/web/components/issues/modal.tsx
index 608cf4fd1..cf6f811f6 100644
--- a/web/components/issues/modal.tsx
+++ b/web/components/issues/modal.tsx
@@ -20,6 +20,7 @@ import useSpreadsheetIssuesView from "hooks/use-spreadsheet-issues-view";
 import useProjects from "hooks/use-projects";
 import useMyIssues from "hooks/my-issues/use-my-issues";
 import useLocalStorage from "hooks/use-local-storage";
+import { useWorkspaceView } from "hooks/use-workspace-view";
 // components
 import { IssueForm, ConfirmIssueDiscard } from "components/issues";
 // types
@@ -37,6 +38,7 @@ import {
   VIEW_ISSUES,
   INBOX_ISSUES,
   PROJECT_DRAFT_ISSUES_LIST_WITH_PARAMS,
+  WORKSPACE_VIEW_ISSUES,
 } from "constants/fetch-keys";
 // constants
 import { INBOX_ISSUE_SOURCE } from "constants/inbox";
@@ -81,7 +83,8 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = ({
   const [prePopulateData, setPreloadedData] = useState<Partial<IIssue>>({});
 
   const router = useRouter();
-  const { workspaceSlug, projectId, cycleId, moduleId, viewId, inboxId } = router.query;
+  const { workspaceSlug, projectId, cycleId, moduleId, viewId, globalViewId, inboxId } =
+    router.query;
 
   const { displayFilters, params } = useIssuesView();
   const { params: calendarParams } = useCalendarIssuesView();
@@ -94,6 +97,8 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = ({
 
   const { groupedIssues, mutateMyIssues } = useMyIssues(workspaceSlug?.toString());
 
+  const { params: globalViewParams } = useWorkspaceView();
+
   const { setValue: setValueInLocalStorage, clearValue: clearLocalStorageValue } =
     useLocalStorage<any>("draftedIssue", {});
 
@@ -276,6 +281,40 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = ({
       });
   };
 
+  const workspaceIssuesPath = [
+    {
+      params: {
+        sub_issue: false,
+      },
+      path: "workspace-views/all-issues",
+    },
+    {
+      params: {
+        assignees: user?.id ?? undefined,
+        sub_issue: false,
+      },
+      path: "workspace-views/assigned",
+    },
+    {
+      params: {
+        created_by: user?.id ?? undefined,
+        sub_issue: false,
+      },
+      path: "workspace-views/created",
+    },
+    {
+      params: {
+        subscriber: user?.id ?? undefined,
+        sub_issue: false,
+      },
+      path: "workspace-views/subscribed",
+    },
+  ];
+
+  const currentWorkspaceIssuePath = workspaceIssuesPath.find((path) =>
+    router.pathname.includes(path.path)
+  );
+
   const calendarFetchKey = cycleId
     ? CYCLE_ISSUES_WITH_PARAMS(cycleId.toString(), calendarParams)
     : moduleId
@@ -332,6 +371,14 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = ({
             mutate(USER_ISSUE(workspaceSlug as string));
 
           if (payload.parent && payload.parent !== "") mutate(SUB_ISSUES(payload.parent));
+
+          if (globalViewId)
+            mutate(WORKSPACE_VIEW_ISSUES(globalViewId.toString(), globalViewParams));
+
+          if (currentWorkspaceIssuePath)
+            mutate(
+              WORKSPACE_VIEW_ISSUES(workspaceSlug.toString(), currentWorkspaceIssuePath?.params)
+            );
         })
         .catch(() => {
           setToastAlert({

From c56aacdd13502751337aebb27bc4b0aca9b1a6b8 Mon Sep 17 00:00:00 2001
From: Nikhil <118773738+pablohashescobar@users.noreply.github.com>
Date: Mon, 2 Oct 2023 13:28:43 +0530
Subject: [PATCH 12/38] dev: create action to sync PR changes to the repo
 (#2333)

---
 .github/workflows/create-sync-pr.yml | 54 ++++++++++++++++++++++++++++
 1 file changed, 54 insertions(+)
 create mode 100644 .github/workflows/create-sync-pr.yml

diff --git a/.github/workflows/create-sync-pr.yml b/.github/workflows/create-sync-pr.yml
new file mode 100644
index 000000000..45cae3aef
--- /dev/null
+++ b/.github/workflows/create-sync-pr.yml
@@ -0,0 +1,54 @@
+name: Create PR in Plane EE Repository to sync the changes
+
+on:
+  pull_request:
+    types:
+      - closed
+
+jobs:
+  create_pr:
+    # Only run the job when a PR is merged
+    if: github.event.pull_request.merged == true
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout Code
+        uses: actions/checkout@v2
+        with:
+          persist-credentials: false
+          fetch-depth: 0
+          
+      - name: Set up Branch Name
+        run: |
+          echo "BRANCH_NAME=${{ github.head_ref }}" >> $GITHUB_ENV
+          
+      - name: Setup GH CLI
+        run: |
+          type -p curl >/dev/null || (sudo apt update && sudo apt install curl -y)
+          curl -fsSL https://cli.github.com/packages/githubcli-archive-keyring.gpg | sudo dd of=/usr/share/keyrings/githubcli-archive-keyring.gpg
+          sudo chmod go+r /usr/share/keyrings/githubcli-archive-keyring.gpg
+          echo "deb [arch=$(dpkg --print-architecture) signed-by=/usr/share/keyrings/githubcli-archive-keyring.gpg] https://cli.github.com/packages stable main" | sudo tee /etc/apt/sources.list.d/github-cli.list > /dev/null
+          sudo apt update
+          sudo apt install gh -y
+
+      - name: Create Pull Request
+        env:
+            GH_TOKEN: ${{ secrets.TOKEN }}
+        run: |
+            TARGET_REPO="makeplane/${{ secrets.REPO_NAME }}"
+            TARGET_BRANCH="${{ secrets.REPO_TARGET_BRANCH }}"
+            SOURCE_BRANCH="${{ env.BRANCH_NAME }}"
+            
+            git checkout $SOURCE_BRANCH
+            git remote add target "https://$GH_TOKEN@github.com/$TARGET_REPO.git"
+            git push target $SOURCE_BRANCH:$SOURCE_BRANCH
+
+            PR_TITLE="${{ github.event.pull_request.title }}"
+            PR_BODY="${{ github.event.pull_request.body }}"
+            
+            gh pr create \
+              --base $TARGET_BRANCH \
+              --head $SOURCE_BRANCH \
+              --title "$PR_TITLE" \
+              --body "$PR_BODY" \
+              --repo $TARGET_REPO
+  

From 7eba4a503259cbe2c60ada6a94f22ddf093839d7 Mon Sep 17 00:00:00 2001
From: sriram veeraghanta <veeraghanta.sriram@gmail.com>
Date: Mon, 2 Oct 2023 13:40:28 +0530
Subject: [PATCH 13/38] fix: ui package readme added (#2334)

---
 packages/ui/README.md | 1 +
 1 file changed, 1 insertion(+)
 create mode 100644 packages/ui/README.md

diff --git a/packages/ui/README.md b/packages/ui/README.md
new file mode 100644
index 000000000..ce447bf1c
--- /dev/null
+++ b/packages/ui/README.md
@@ -0,0 +1 @@
+# UI Package

From c96960955ba7e3b31734a85b288613207e3d89a1 Mon Sep 17 00:00:00 2001
From: Nikhil <118773738+pablohashescobar@users.noreply.github.com>
Date: Mon, 2 Oct 2023 14:31:25 +0530
Subject: [PATCH 14/38] fix: variable name for token (#2336)

---
 .github/workflows/create-sync-pr.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/create-sync-pr.yml b/.github/workflows/create-sync-pr.yml
index 45cae3aef..987984d00 100644
--- a/.github/workflows/create-sync-pr.yml
+++ b/.github/workflows/create-sync-pr.yml
@@ -32,7 +32,7 @@ jobs:
 
       - name: Create Pull Request
         env:
-            GH_TOKEN: ${{ secrets.TOKEN }}
+            GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         run: |
             TARGET_REPO="makeplane/${{ secrets.REPO_NAME }}"
             TARGET_BRANCH="${{ secrets.REPO_TARGET_BRANCH }}"

From de33e6775f8fac8c14251ef9f7ca2f46cf8ff43c Mon Sep 17 00:00:00 2001
From: Nikhil <118773738+pablohashescobar@users.noreply.github.com>
Date: Mon, 2 Oct 2023 14:40:31 +0530
Subject: [PATCH 15/38] dev: update add permissions to the action (#2337)

---
 .github/workflows/create-sync-pr.yml | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/.github/workflows/create-sync-pr.yml b/.github/workflows/create-sync-pr.yml
index 987984d00..caa872d2f 100644
--- a/.github/workflows/create-sync-pr.yml
+++ b/.github/workflows/create-sync-pr.yml
@@ -10,6 +10,9 @@ jobs:
     # Only run the job when a PR is merged
     if: github.event.pull_request.merged == true
     runs-on: ubuntu-latest
+    permissions:
+        pull-requests: write
+        contents: read
     steps:
       - name: Checkout Code
         uses: actions/checkout@v2

From 6d463ded1c874cc4a2117191bf58717278183715 Mon Sep 17 00:00:00 2001
From: Nikhil <118773738+pablohashescobar@users.noreply.github.com>
Date: Mon, 2 Oct 2023 14:50:30 +0530
Subject: [PATCH 16/38] dev: rename token variables (#2338)

---
 .github/workflows/create-sync-pr.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/create-sync-pr.yml b/.github/workflows/create-sync-pr.yml
index caa872d2f..995996263 100644
--- a/.github/workflows/create-sync-pr.yml
+++ b/.github/workflows/create-sync-pr.yml
@@ -35,7 +35,7 @@ jobs:
 
       - name: Create Pull Request
         env:
-            GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+            GH_TOKEN: ${{ secrets.TOKEN }}
         run: |
             TARGET_REPO="makeplane/${{ secrets.REPO_NAME }}"
             TARGET_BRANCH="${{ secrets.REPO_TARGET_BRANCH }}"

From 0d0cf3052a4c2ed9fb63b7d53b864b9440acf763 Mon Sep 17 00:00:00 2001
From: sriram veeraghanta <veeraghanta.sriram@gmail.com>
Date: Mon, 2 Oct 2023 16:13:27 +0530
Subject: [PATCH 17/38] fix: updated readme fixes (#2339)

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 3cbeed8c4..f9d969d72 100644
--- a/README.md
+++ b/README.md
@@ -54,7 +54,7 @@ chmod +x setup.sh
 - Run setup.sh
 
 ```bash
-./setup.sh http://localhost
+./setup.sh
 ```
 
 > If running in a cloud env replace localhost with public facing IP address of the VM

From d9bd07886fc87aaff4f55278680ca5bcd9150af1 Mon Sep 17 00:00:00 2001
From: Nikhil <118773738+pablohashescobar@users.noreply.github.com>
Date: Tue, 3 Oct 2023 18:41:26 +0530
Subject: [PATCH 18/38] dev: update sync workflow to run only when the source
 repo is configured (#2346)

* dev: update sync workflow to run only when the source repo is configured

* fix: naming convention changes

---------

Co-authored-by: sriramveeraghanta <veeraghanta.sriram@gmail.com>
---
 ...equest.yml => build-test-pull-request.yml} |  0
 .github/workflows/create-sync-pr.yml          | 56 +++++++++++--------
 ...er_Images.yml => update-docker-images.yml} |  0
 3 files changed, 33 insertions(+), 23 deletions(-)
 rename .github/workflows/{Build_Test_Pull_Request.yml => build-test-pull-request.yml} (100%)
 rename .github/workflows/{Update_Docker_Images.yml => update-docker-images.yml} (100%)

diff --git a/.github/workflows/Build_Test_Pull_Request.yml b/.github/workflows/build-test-pull-request.yml
similarity index 100%
rename from .github/workflows/Build_Test_Pull_Request.yml
rename to .github/workflows/build-test-pull-request.yml
diff --git a/.github/workflows/create-sync-pr.yml b/.github/workflows/create-sync-pr.yml
index 995996263..6ca840197 100644
--- a/.github/workflows/create-sync-pr.yml
+++ b/.github/workflows/create-sync-pr.yml
@@ -11,20 +11,30 @@ jobs:
     if: github.event.pull_request.merged == true
     runs-on: ubuntu-latest
     permissions:
-        pull-requests: write
-        contents: read
+      pull-requests: write
+      contents: read
     steps:
+      - name: Check SOURCE_REPO
+        id: check_repo
+        env:
+          SOURCE_REPO: ${{ secrets.SOURCE_REPO_NAME }}
+        run: |
+          echo "::set-output name=is_correct_repo::$(if [[ "$SOURCE_REPO" == "makeplane/plane" ]]; then echo 'true'; else echo 'false'; fi)"
+
       - name: Checkout Code
+        if: steps.check_repo.outputs.is_correct_repo == 'true'
         uses: actions/checkout@v2
         with:
           persist-credentials: false
           fetch-depth: 0
-          
+
       - name: Set up Branch Name
+        if: steps.check_repo.outputs.is_correct_repo == 'true'
         run: |
-          echo "BRANCH_NAME=${{ github.head_ref }}" >> $GITHUB_ENV
-          
+          echo "SOURCE_BRANCH_NAME=${{ github.head_ref }}" >> $GITHUB_ENV
+
       - name: Setup GH CLI
+        if: steps.check_repo.outputs.is_correct_repo == 'true'
         run: |
           type -p curl >/dev/null || (sudo apt update && sudo apt install curl -y)
           curl -fsSL https://cli.github.com/packages/githubcli-archive-keyring.gpg | sudo dd of=/usr/share/keyrings/githubcli-archive-keyring.gpg
@@ -34,24 +44,24 @@ jobs:
           sudo apt install gh -y
 
       - name: Create Pull Request
+        if: steps.check_repo.outputs.is_correct_repo == 'true'
         env:
-            GH_TOKEN: ${{ secrets.TOKEN }}
+          GH_TOKEN: ${{ secrets.ACCESS_TOKEN }}
         run: |
-            TARGET_REPO="makeplane/${{ secrets.REPO_NAME }}"
-            TARGET_BRANCH="${{ secrets.REPO_TARGET_BRANCH }}"
-            SOURCE_BRANCH="${{ env.BRANCH_NAME }}"
-            
-            git checkout $SOURCE_BRANCH
-            git remote add target "https://$GH_TOKEN@github.com/$TARGET_REPO.git"
-            git push target $SOURCE_BRANCH:$SOURCE_BRANCH
+          TARGET_REPO="${{ secrets.TARGET_REPO_NAME }}"
+          TARGET_BRANCH="${{ secrets.TARGET_REPO_BRANCH }}"
+          SOURCE_BRANCH="${{ env.SOURCE_BRANCH_NAME }}"
 
-            PR_TITLE="${{ github.event.pull_request.title }}"
-            PR_BODY="${{ github.event.pull_request.body }}"
-            
-            gh pr create \
-              --base $TARGET_BRANCH \
-              --head $SOURCE_BRANCH \
-              --title "$PR_TITLE" \
-              --body "$PR_BODY" \
-              --repo $TARGET_REPO
-  
+          git checkout $SOURCE_BRANCH
+          git remote add target "https://$GH_TOKEN@github.com/$TARGET_REPO.git"
+          git push target $SOURCE_BRANCH:$SOURCE_BRANCH
+
+          PR_TITLE="${{ github.event.pull_request.title }}"
+          PR_BODY="${{ github.event.pull_request.body }}"
+
+          gh pr create \
+            --base $TARGET_BRANCH \
+            --head $SOURCE_BRANCH \
+            --title "$PR_TITLE" \
+            --body "$PR_BODY" \
+            --repo $TARGET_REPO
diff --git a/.github/workflows/Update_Docker_Images.yml b/.github/workflows/update-docker-images.yml
similarity index 100%
rename from .github/workflows/Update_Docker_Images.yml
rename to .github/workflows/update-docker-images.yml

From cecdf890de06ec04b23c0aaff1e3b18df59a729a Mon Sep 17 00:00:00 2001
From: Dakshesh Jain <65905942+dakshesh14@users.noreply.github.com>
Date: Wed, 4 Oct 2023 14:55:41 +0530
Subject: [PATCH 19/38] fix: issue relation mutation and draft issue (#2340)

* fix: issue relation mutation and draft issue

* fix: 'New Issue' in gantt view

fix: emoji select going under

* fix: profile page typo
---
 .../core/views/board-view/single-board.tsx    |  40 ++-
 .../core/views/list-view/single-list.tsx      | 297 +++++++++---------
 web/components/emoji-icon-picker/index.tsx    |  16 +-
 web/components/gantt-chart/chart/index.tsx    |   5 +-
 web/components/issues/draft-issue-form.tsx    |  34 +-
 web/components/issues/draft-issue-modal.tsx   |   1 +
 web/components/issues/form.tsx                |  25 +-
 .../issues/sidebar-select/blocked.tsx         |  12 +-
 .../issues/sidebar-select/blocker.tsx         |   2 +-
 .../issues/sidebar-select/duplicate.tsx       |   6 +-
 .../issues/sidebar-select/relates-to.tsx      |   6 +-
 web/components/issues/sidebar.tsx             |   6 +-
 .../[workspaceSlug]/me/profile/index.tsx      |   2 +-
 13 files changed, 268 insertions(+), 184 deletions(-)

diff --git a/web/components/core/views/board-view/single-board.tsx b/web/components/core/views/board-view/single-board.tsx
index bdbfc27c2..6d583e772 100644
--- a/web/components/core/views/board-view/single-board.tsx
+++ b/web/components/core/views/board-view/single-board.tsx
@@ -6,6 +6,7 @@ import { useRouter } from "next/router";
 import StrictModeDroppable from "components/dnd/StrictModeDroppable";
 import { Draggable } from "react-beautiful-dnd";
 // components
+import { CreateUpdateDraftIssueModal } from "components/issues";
 import { BoardHeader, SingleBoardIssue, BoardInlineCreateIssueForm } from "components/core";
 // ui
 import { CustomMenu } from "components/ui";
@@ -57,6 +58,7 @@ export const SingleBoard: React.FC<Props> = (props) => {
   const [isCollapsed, setIsCollapsed] = useState(true);
 
   const [isInlineCreateIssueFormOpen, setIsInlineCreateIssueFormOpen] = useState(false);
+  const [isCreateDraftIssueModalOpen, setIsCreateDraftIssueModalOpen] = useState(false);
 
   const { displayFilters, groupedIssues } = viewProps;
 
@@ -96,10 +98,27 @@ export const SingleBoard: React.FC<Props> = (props) => {
     scrollToBottom();
   };
 
+  const handleAddIssueToGroup = () => {
+    if (isDraftIssuesPage) setIsCreateDraftIssueModalOpen(true);
+    else if (isMyIssuesPage || isProfileIssuesPage) addIssueToGroup();
+    else onCreateClick();
+  };
+
   return (
     <div className={`flex-shrink-0 ${!isCollapsed ? "" : "flex h-full flex-col w-96"}`}>
+      <CreateUpdateDraftIssueModal
+        isOpen={isCreateDraftIssueModalOpen}
+        handleClose={() => setIsCreateDraftIssueModalOpen(false)}
+        prePopulateData={{
+          ...(cycleId && { cycle: cycleId.toString() }),
+          ...(moduleId && { module: moduleId.toString() }),
+          [displayFilters?.group_by! === "labels" ? "labels_list" : displayFilters?.group_by!]:
+            displayFilters?.group_by === "labels" ? [groupTitle] : groupTitle,
+        }}
+      />
+
       <BoardHeader
-        addIssueToGroup={addIssueToGroup}
+        addIssueToGroup={handleAddIssueToGroup}
         currentState={currentState}
         groupTitle={groupTitle}
         isCollapsed={isCollapsed}
@@ -218,21 +237,22 @@ export const SingleBoard: React.FC<Props> = (props) => {
               {displayFilters?.group_by !== "created_by" && (
                 <div>
                   {type === "issue"
-                    ? !disableAddIssueOption && (
+                    ? !disableAddIssueOption &&
+                      !isDraftIssuesPage && (
                         <button
                           type="button"
                           className="flex items-center gap-2 font-medium text-custom-primary outline-none p-1"
                           onClick={() => {
-                            if (isDraftIssuesPage || isMyIssuesPage || isProfileIssuesPage) {
-                              addIssueToGroup();
-                            } else onCreateClick();
+                            if (isMyIssuesPage || isProfileIssuesPage) addIssueToGroup();
+                            else onCreateClick();
                           }}
                         >
                           <PlusIcon className="h-4 w-4" />
                           Add Issue
                         </button>
                       )
-                    : !disableUserActions && (
+                    : !disableUserActions &&
+                      !isDraftIssuesPage && (
                         <CustomMenu
                           customButton={
                             <button
@@ -246,7 +266,13 @@ export const SingleBoard: React.FC<Props> = (props) => {
                           position="left"
                           noBorder
                         >
-                          <CustomMenu.MenuItem onClick={() => onCreateClick()}>
+                          <CustomMenu.MenuItem
+                            onClick={() => {
+                              if (isDraftIssuesPage) setIsCreateDraftIssueModalOpen(true);
+                              else if (isMyIssuesPage || isProfileIssuesPage) addIssueToGroup();
+                              else onCreateClick();
+                            }}
+                          >
                             Create new
                           </CustomMenu.MenuItem>
                           {openIssuesListModal && (
diff --git a/web/components/core/views/list-view/single-list.tsx b/web/components/core/views/list-view/single-list.tsx
index 9d3e9cb96..8cba67112 100644
--- a/web/components/core/views/list-view/single-list.tsx
+++ b/web/components/core/views/list-view/single-list.tsx
@@ -13,6 +13,7 @@ import projectService from "services/project.service";
 // hooks
 import useProjects from "hooks/use-projects";
 // components
+import { CreateUpdateDraftIssueModal } from "components/issues";
 import { SingleListIssue, ListInlineCreateIssueForm } from "components/core";
 // ui
 import { Avatar, CustomMenu } from "components/ui";
@@ -75,6 +76,7 @@ export const SingleList: React.FC<Props> = (props) => {
   const { workspaceSlug, projectId, cycleId, moduleId } = router.query;
 
   const [isCreateIssueFormOpen, setIsCreateIssueFormOpen] = useState(false);
+  const [isDraftIssuesModalOpen, setIsDraftIssuesModalOpen] = useState(false);
 
   const isMyIssuesPage = router.pathname.split("/")[3] === "my-issues";
   const isProfileIssuesPage = router.pathname.split("/")[2] === "profile";
@@ -208,154 +210,169 @@ export const SingleList: React.FC<Props> = (props) => {
   if (!groupedIssues) return null;
 
   return (
-    <Disclosure as="div" defaultOpen>
-      {({ open }) => (
-        <div>
-          <div className="flex items-center justify-between px-4 py-2.5 bg-custom-background-90">
-            <Disclosure.Button>
-              <div className="flex items-center gap-x-3">
-                {displayFilters?.group_by !== null && (
-                  <div className="flex items-center">{getGroupIcon()}</div>
-                )}
-                {displayFilters?.group_by !== null ? (
-                  <h2
-                    className={`text-sm font-semibold leading-6 text-custom-text-100 ${
-                      displayFilters?.group_by === "created_by" ? "" : "capitalize"
-                    }`}
-                  >
-                    {getGroupTitle()}
-                  </h2>
-                ) : (
-                  <h2 className="font-medium leading-5">All Issues</h2>
-                )}
-                <span className="text-custom-text-200 min-w-[2.5rem] rounded-full bg-custom-background-80 py-1 text-center text-xs">
-                  {groupedIssues[groupTitle as keyof IIssue].length}
-                </span>
-              </div>
-            </Disclosure.Button>
-            {isArchivedIssues ? (
-              ""
-            ) : type === "issue" ? (
-              !disableAddIssueOption && (
-                <button
-                  type="button"
-                  className="p-1 text-custom-text-200 hover:bg-custom-background-80"
-                  onClick={() => {
-                    if (isDraftIssuesPage || isMyIssuesPage || isProfileIssuesPage) {
-                      addIssueToGroup();
-                    } else setIsCreateIssueFormOpen(true);
-                  }}
-                >
-                  <PlusIcon className="h-4 w-4" />
-                </button>
-              )
-            ) : disableUserActions ? (
-              ""
-            ) : (
-              <CustomMenu
-                customButton={
-                  <div className="flex cursor-pointer items-center">
-                    <PlusIcon className="h-4 w-4" />
-                  </div>
-                }
-                position="right"
-                noBorder
-              >
-                <CustomMenu.MenuItem onClick={() => setIsCreateIssueFormOpen(true)}>
-                  Create new
-                </CustomMenu.MenuItem>
-                {openIssuesListModal && (
-                  <CustomMenu.MenuItem onClick={openIssuesListModal}>
-                    Add an existing issue
-                  </CustomMenu.MenuItem>
-                )}
-              </CustomMenu>
-            )}
-          </div>
-          <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>
-              {groupedIssues[groupTitle] ? (
-                groupedIssues[groupTitle].length > 0 ? (
-                  groupedIssues[groupTitle].map((issue, index) => (
-                    <SingleListIssue
-                      key={issue.id}
-                      type={type}
-                      issue={issue}
-                      projectId={issue.project_detail.id}
-                      groupTitle={groupTitle}
-                      index={index}
-                      editIssue={() => handleIssueAction(issue, "edit")}
-                      makeIssueCopy={() => handleIssueAction(issue, "copy")}
-                      handleDeleteIssue={() => handleIssueAction(issue, "delete")}
-                      handleDraftIssueSelect={
-                        handleDraftIssueAction
-                          ? () => handleDraftIssueAction(issue, "edit")
-                          : undefined
-                      }
-                      handleDraftIssueDelete={
-                        handleDraftIssueAction
-                          ? () => handleDraftIssueAction(issue, "delete")
-                          : undefined
-                      }
-                      handleMyIssueOpen={handleMyIssueOpen}
-                      removeIssue={() => {
-                        if (removeIssue !== null && issue.bridge_id)
-                          removeIssue(issue.bridge_id, issue.id);
-                      }}
-                      disableUserActions={disableUserActions}
-                      user={user}
-                      userAuth={userAuth}
-                      viewProps={viewProps}
-                    />
-                  ))
-                ) : (
-                  <p className="bg-custom-background-100 px-4 py-2.5 text-sm text-custom-text-200">
-                    No issues.
-                  </p>
-                )
-              ) : (
-                <div className="flex h-full w-full items-center justify-center">Loading...</div>
-              )}
+    <>
+      <CreateUpdateDraftIssueModal
+        isOpen={isDraftIssuesModalOpen}
+        handleClose={() => setIsDraftIssuesModalOpen(false)}
+        prePopulateData={{
+          ...(cycleId && { cycle: cycleId.toString() }),
+          ...(moduleId && { module: moduleId.toString() }),
+          [displayFilters?.group_by! === "labels" ? "labels_list" : displayFilters?.group_by!]:
+            displayFilters?.group_by === "labels" ? [groupTitle] : groupTitle,
+        }}
+      />
 
-              <ListInlineCreateIssueForm
-                isOpen={isCreateIssueFormOpen && !disableAddIssueOption}
-                handleClose={() => setIsCreateIssueFormOpen(false)}
-                prePopulatedData={{
-                  ...(cycleId && { cycle: cycleId.toString() }),
-                  ...(moduleId && { module: moduleId.toString() }),
-                  [displayFilters?.group_by!]: groupTitle,
-                }}
-              />
-
-              {!disableAddIssueOption && !isCreateIssueFormOpen && (
-                // TODO: add border here
-                <div className="w-full bg-custom-background-100 px-6 py-3 border-b border-custom-border-100">
+      <Disclosure as="div" defaultOpen>
+        {({ open }) => (
+          <div>
+            <div className="flex items-center justify-between px-4 py-2.5 bg-custom-background-90">
+              <Disclosure.Button>
+                <div className="flex items-center gap-x-3">
+                  {displayFilters?.group_by !== null && (
+                    <div className="flex items-center">{getGroupIcon()}</div>
+                  )}
+                  {displayFilters?.group_by !== null ? (
+                    <h2
+                      className={`text-sm font-semibold leading-6 text-custom-text-100 ${
+                        displayFilters?.group_by === "created_by" ? "" : "capitalize"
+                      }`}
+                    >
+                      {getGroupTitle()}
+                    </h2>
+                  ) : (
+                    <h2 className="font-medium leading-5">All Issues</h2>
+                  )}
+                  <span className="text-custom-text-200 min-w-[2.5rem] rounded-full bg-custom-background-80 py-1 text-center text-xs">
+                    {groupedIssues[groupTitle as keyof IIssue].length}
+                  </span>
+                </div>
+              </Disclosure.Button>
+              {isArchivedIssues ? (
+                ""
+              ) : type === "issue" ? (
+                !disableAddIssueOption && (
                   <button
                     type="button"
+                    className="p-1 text-custom-text-200 hover:bg-custom-background-80"
                     onClick={() => {
-                      if (isDraftIssuesPage || isMyIssuesPage || isProfileIssuesPage) {
-                        addIssueToGroup();
-                      } else setIsCreateIssueFormOpen(true);
+                      if (isDraftIssuesPage) setIsDraftIssuesModalOpen(true);
+                      else if (isMyIssuesPage || isProfileIssuesPage) addIssueToGroup();
+                      else setIsCreateIssueFormOpen(true);
                     }}
-                    className="flex items-center gap-x-[6px] text-custom-primary-100 px-2 py-1 rounded-md"
                   >
                     <PlusIcon className="h-4 w-4" />
-                    <span className="text-sm font-medium text-custom-primary-100">New Issue</span>
                   </button>
-                </div>
+                )
+              ) : disableUserActions ? (
+                ""
+              ) : (
+                <CustomMenu
+                  customButton={
+                    <div className="flex cursor-pointer items-center">
+                      <PlusIcon className="h-4 w-4" />
+                    </div>
+                  }
+                  position="right"
+                  noBorder
+                >
+                  <CustomMenu.MenuItem onClick={() => setIsCreateIssueFormOpen(true)}>
+                    Create new
+                  </CustomMenu.MenuItem>
+                  {openIssuesListModal && (
+                    <CustomMenu.MenuItem onClick={openIssuesListModal}>
+                      Add an existing issue
+                    </CustomMenu.MenuItem>
+                  )}
+                </CustomMenu>
               )}
-            </Disclosure.Panel>
-          </Transition>
-        </div>
-      )}
-    </Disclosure>
+            </div>
+            <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>
+                {groupedIssues[groupTitle] ? (
+                  groupedIssues[groupTitle].length > 0 ? (
+                    groupedIssues[groupTitle].map((issue, index) => (
+                      <SingleListIssue
+                        key={issue.id}
+                        type={type}
+                        issue={issue}
+                        projectId={issue.project_detail.id}
+                        groupTitle={groupTitle}
+                        index={index}
+                        editIssue={() => handleIssueAction(issue, "edit")}
+                        makeIssueCopy={() => handleIssueAction(issue, "copy")}
+                        handleDeleteIssue={() => handleIssueAction(issue, "delete")}
+                        handleDraftIssueSelect={
+                          handleDraftIssueAction
+                            ? () => handleDraftIssueAction(issue, "edit")
+                            : undefined
+                        }
+                        handleDraftIssueDelete={
+                          handleDraftIssueAction
+                            ? () => handleDraftIssueAction(issue, "delete")
+                            : undefined
+                        }
+                        handleMyIssueOpen={handleMyIssueOpen}
+                        removeIssue={() => {
+                          if (removeIssue !== null && issue.bridge_id)
+                            removeIssue(issue.bridge_id, issue.id);
+                        }}
+                        disableUserActions={disableUserActions}
+                        user={user}
+                        userAuth={userAuth}
+                        viewProps={viewProps}
+                      />
+                    ))
+                  ) : (
+                    <p className="bg-custom-background-100 px-4 py-2.5 text-sm text-custom-text-200">
+                      No issues.
+                    </p>
+                  )
+                ) : (
+                  <div className="flex h-full w-full items-center justify-center">Loading...</div>
+                )}
+
+                <ListInlineCreateIssueForm
+                  isOpen={isCreateIssueFormOpen && !disableAddIssueOption}
+                  handleClose={() => setIsCreateIssueFormOpen(false)}
+                  prePopulatedData={{
+                    ...(cycleId && { cycle: cycleId.toString() }),
+                    ...(moduleId && { module: moduleId.toString() }),
+                    [displayFilters?.group_by! === "labels"
+                      ? "labels_list"
+                      : displayFilters?.group_by!]:
+                      displayFilters?.group_by === "labels" ? [groupTitle] : groupTitle,
+                  }}
+                />
+
+                {!disableAddIssueOption && !isCreateIssueFormOpen && !isDraftIssuesPage && (
+                  <div className="w-full bg-custom-background-100 px-6 py-3 border-b border-custom-border-100">
+                    <button
+                      type="button"
+                      onClick={() => {
+                        if (isDraftIssuesPage) setIsDraftIssuesModalOpen(true);
+                        else if (isMyIssuesPage || isProfileIssuesPage) addIssueToGroup();
+                        else setIsCreateIssueFormOpen(true);
+                      }}
+                      className="flex items-center gap-x-[6px] text-custom-primary-100 px-2 py-1 rounded-md"
+                    >
+                      <PlusIcon className="h-4 w-4" />
+                      <span className="text-sm font-medium text-custom-primary-100">New Issue</span>
+                    </button>
+                  </div>
+                )}
+              </Disclosure.Panel>
+            </Transition>
+          </div>
+        )}
+      </Disclosure>
+    </>
   );
 };
diff --git a/web/components/emoji-icon-picker/index.tsx b/web/components/emoji-icon-picker/index.tsx
index ab4eb022e..cc42dbec8 100644
--- a/web/components/emoji-icon-picker/index.tsx
+++ b/web/components/emoji-icon-picker/index.tsx
@@ -4,6 +4,7 @@ import { Tab, Transition, Popover } from "@headlessui/react";
 // react colors
 import { TwitterPicker } from "react-color";
 // hooks
+import useDynamicDropdownPosition from "hooks/use-dynamic-dropdown";
 import useOutsideClickDetector from "hooks/use-outside-click-detector";
 // types
 import { Props } from "./types";
@@ -38,6 +39,7 @@ const EmojiIconPicker: React.FC<Props> = ({
 
   const [recentEmojis, setRecentEmojis] = useState<string[]>([]);
 
+  const buttonRef = useRef<HTMLButtonElement>(null);
   const emojiPickerRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
@@ -49,10 +51,12 @@ const EmojiIconPicker: React.FC<Props> = ({
   }, [value, onChange]);
 
   useOutsideClickDetector(emojiPickerRef, () => setIsOpen(false));
+  useDynamicDropdownPosition(isOpen, () => setIsOpen(false), buttonRef, emojiPickerRef);
 
   return (
     <Popover className="relative z-[1]">
       <Popover.Button
+        ref={buttonRef}
         onClick={() => setIsOpen((prev) => !prev)}
         className="outline-none"
         disabled={disabled}
@@ -61,6 +65,8 @@ const EmojiIconPicker: React.FC<Props> = ({
       </Popover.Button>
       <Transition
         show={isOpen}
+        static
+        as={React.Fragment}
         enter="transition ease-out duration-100"
         enterFrom="transform opacity-0 scale-95"
         enterTo="transform opacity-100 scale-100"
@@ -68,11 +74,11 @@ const EmojiIconPicker: React.FC<Props> = ({
         leaveFrom="transform opacity-100 scale-100"
         leaveTo="transform opacity-0 scale-95"
       >
-        <Popover.Panel className="absolute z-10 mt-2 w-[250px] rounded-[4px] border border-custom-border-200 bg-custom-background-80 shadow-lg">
-          <div
-            ref={emojiPickerRef}
-            className="h-[230px] w-[250px] overflow-auto rounded-[4px] border border-custom-border-200 bg-custom-background-80 p-2 shadow-xl"
-          >
+        <Popover.Panel
+          ref={emojiPickerRef}
+          className="fixed z-10 mt-2 w-[250px] rounded-[4px] border border-custom-border-200 bg-custom-background-80 shadow-lg"
+        >
+          <div className="h-[230px] w-[250px] overflow-auto rounded-[4px] border border-custom-border-200 bg-custom-background-80 p-2 shadow-xl">
             <Tab.Group as="div" className="flex h-full w-full flex-col">
               <Tab.List className="flex-0 -mx-2 flex justify-around gap-1 p-1">
                 {tabOptions.map((tab) => (
diff --git a/web/components/gantt-chart/chart/index.tsx b/web/components/gantt-chart/chart/index.tsx
index 61e3078d6..e21e803de 100644
--- a/web/components/gantt-chart/chart/index.tsx
+++ b/web/components/gantt-chart/chart/index.tsx
@@ -80,6 +80,9 @@ export const ChartViewRoot: FC<ChartViewRootProps> = ({
   const router = useRouter();
   const { cycleId, moduleId } = router.query;
 
+  const isCyclePage = router.pathname.split("/")[4] === "cycles" && !cycleId;
+  const isModulePage = router.pathname.split("/")[4] === "modules" && !moduleId;
+
   const renderBlockStructure = (view: any, blocks: IGanttBlock[] | null) =>
     blocks && blocks.length > 0
       ? blocks.map((block: any) => ({
@@ -317,7 +320,7 @@ export const ChartViewRoot: FC<ChartViewRootProps> = ({
             SidebarBlockRender={SidebarBlockRender}
             enableReorder={enableReorder}
           />
-          {chartBlocks && (
+          {chartBlocks && !(isCyclePage || isModulePage) && (
             <div className="pl-2.5 py-3">
               <GanttInlineCreateIssueForm
                 isOpen={isCreateIssueFormOpen}
diff --git a/web/components/issues/draft-issue-form.tsx b/web/components/issues/draft-issue-form.tsx
index 7433da82c..4a653dd86 100644
--- a/web/components/issues/draft-issue-form.tsx
+++ b/web/components/issues/draft-issue-form.tsx
@@ -8,6 +8,7 @@ import { Controller, useForm } from "react-hook-form";
 import aiService from "services/ai.service";
 // hooks
 import useToast from "hooks/use-toast";
+import useLocalStorage from "hooks/use-local-storage";
 // components
 import { GptAssistantModal } from "components/core";
 import { ParentIssuesListModal } from "components/issues";
@@ -60,6 +61,7 @@ interface IssueFormProps {
     action?: "createDraft" | "createNewIssue" | "updateDraft" | "convertToNewIssue"
   ) => Promise<void>;
   data?: Partial<IIssue> | null;
+  isOpen: boolean;
   prePopulatedData?: Partial<IIssue> | null;
   projectId: string;
   setActiveProject: React.Dispatch<React.SetStateAction<string | null>>;
@@ -89,6 +91,7 @@ export const DraftIssueForm: FC<IssueFormProps> = (props) => {
   const {
     handleFormSubmit,
     data,
+    isOpen,
     prePopulatedData,
     projectId,
     setActiveProject,
@@ -109,6 +112,8 @@ export const DraftIssueForm: FC<IssueFormProps> = (props) => {
   const [gptAssistantModal, setGptAssistantModal] = useState(false);
   const [iAmFeelingLucky, setIAmFeelingLucky] = useState(false);
 
+  const { setValue: setLocalStorageValue } = useLocalStorage("draftedIssue", {});
+
   const editorRef = useRef<any>(null);
 
   const router = useRouter();
@@ -133,6 +138,33 @@ export const DraftIssueForm: FC<IssueFormProps> = (props) => {
 
   const issueName = watch("name");
 
+  const payload: Partial<IIssue> = {
+    name: watch("name"),
+    description: watch("description"),
+    description_html: watch("description_html"),
+    state: watch("state"),
+    priority: watch("priority"),
+    assignees: watch("assignees"),
+    labels: watch("labels"),
+    start_date: watch("start_date"),
+    target_date: watch("target_date"),
+    project: watch("project"),
+    parent: watch("parent"),
+    cycle: watch("cycle"),
+    module: watch("module"),
+  };
+
+  useEffect(() => {
+    if (!isOpen || data) return;
+
+    setLocalStorageValue(
+      JSON.stringify({
+        ...payload,
+      })
+    );
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [JSON.stringify(payload), isOpen, data]);
+
   const onClose = () => {
     handleClose();
   };
@@ -273,7 +305,7 @@ export const DraftIssueForm: FC<IssueFormProps> = (props) => {
       )}
       <form
         onSubmit={handleSubmit((formData) =>
-          handleCreateUpdateIssue(formData, "convertToNewIssue")
+          handleCreateUpdateIssue(formData, data ? "convertToNewIssue" : "createDraft")
         )}
       >
         <div className="space-y-5">
diff --git a/web/components/issues/draft-issue-modal.tsx b/web/components/issues/draft-issue-modal.tsx
index b6479d067..ca37ae03f 100644
--- a/web/components/issues/draft-issue-modal.tsx
+++ b/web/components/issues/draft-issue-modal.tsx
@@ -385,6 +385,7 @@ export const CreateUpdateDraftIssueModal: React.FC<IssuesModalProps> = (props) =
               >
                 <Dialog.Panel className="relative transform rounded-lg border border-custom-border-200 bg-custom-background-100 p-5 text-left shadow-xl transition-all sm:w-full sm:max-w-2xl">
                   <DraftIssueForm
+                    isOpen={isOpen}
                     handleFormSubmit={handleFormSubmit}
                     prePopulatedData={prePopulateData}
                     data={data}
diff --git a/web/components/issues/form.tsx b/web/components/issues/form.tsx
index c92c3d332..4dcd03874 100644
--- a/web/components/issues/form.tsx
+++ b/web/components/issues/form.tsx
@@ -129,18 +129,19 @@ export const IssueForm: FC<IssueFormProps> = (props) => {
   const issueName = watch("name");
 
   const payload: Partial<IIssue> = {
-    name: getValues("name"),
-    description: getValues("description"),
-    state: getValues("state"),
-    priority: getValues("priority"),
-    assignees: getValues("assignees"),
-    labels: getValues("labels"),
-    start_date: getValues("start_date"),
-    target_date: getValues("target_date"),
-    project: getValues("project"),
-    parent: getValues("parent"),
-    cycle: getValues("cycle"),
-    module: getValues("module"),
+    name: watch("name"),
+    description: watch("description"),
+    description_html: watch("description_html"),
+    state: watch("state"),
+    priority: watch("priority"),
+    assignees: watch("assignees"),
+    labels: watch("labels"),
+    start_date: watch("start_date"),
+    target_date: watch("target_date"),
+    project: watch("project"),
+    parent: watch("parent"),
+    cycle: watch("cycle"),
+    module: watch("module"),
   };
 
   useEffect(() => {
diff --git a/web/components/issues/sidebar-select/blocked.tsx b/web/components/issues/sidebar-select/blocked.tsx
index d7e448377..a4ebe0108 100644
--- a/web/components/issues/sidebar-select/blocked.tsx
+++ b/web/components/issues/sidebar-select/blocked.tsx
@@ -14,7 +14,7 @@ import { ExistingIssuesListModal } from "components/core";
 import { XMarkIcon } from "@heroicons/react/24/outline";
 import { BlockedIcon } from "components/icons";
 // types
-import { BlockeIssueDetail, IIssue, ISearchIssueResponse, UserAuth } from "types";
+import { BlockeIssueDetail, IIssue, ISearchIssueResponse } from "types";
 
 type Props = {
   issueId?: string;
@@ -41,6 +41,9 @@ export const SidebarBlockedSelect: React.FC<Props> = ({
     setIsBlockedModalOpen(false);
   };
 
+  const blockedByIssue =
+    watch("related_issues")?.filter((i) => i.relation_type === "blocked_by") || [];
+
   const onSubmit = async (data: ISearchIssueResponse[]) => {
     if (data.length === 0) {
       setToastAlert({
@@ -80,18 +83,13 @@ export const SidebarBlockedSelect: React.FC<Props> = ({
       })
       .then((response) => {
         submitChanges({
-          related_issues: [
-            ...watch("related_issues")?.filter((i) => i.relation_type !== "blocked_by"),
-            ...response,
-          ],
+          related_issues: [...watch("related_issues"), ...response],
         });
       });
 
     handleClose();
   };
 
-  const blockedByIssue = watch("related_issues")?.filter((i) => i.relation_type === "blocked_by");
-
   return (
     <>
       <ExistingIssuesListModal
diff --git a/web/components/issues/sidebar-select/blocker.tsx b/web/components/issues/sidebar-select/blocker.tsx
index ae8fefa1b..8059e3760 100644
--- a/web/components/issues/sidebar-select/blocker.tsx
+++ b/web/components/issues/sidebar-select/blocker.tsx
@@ -15,7 +15,7 @@ import issuesService from "services/issues.service";
 import { XMarkIcon } from "@heroicons/react/24/outline";
 import { BlockerIcon } from "components/icons";
 // types
-import { BlockeIssueDetail, IIssue, ISearchIssueResponse, UserAuth } from "types";
+import { BlockeIssueDetail, IIssue, ISearchIssueResponse } from "types";
 
 type Props = {
   issueId?: string;
diff --git a/web/components/issues/sidebar-select/duplicate.tsx b/web/components/issues/sidebar-select/duplicate.tsx
index db4cae2cd..0294d9475 100644
--- a/web/components/issues/sidebar-select/duplicate.tsx
+++ b/web/components/issues/sidebar-select/duplicate.tsx
@@ -75,10 +75,8 @@ export const SidebarDuplicateSelect: React.FC<Props> = (props) => {
           })),
         ],
       })
-      .then((response) => {
-        submitChanges({
-          related_issues: [...watch("related_issues"), ...(response ?? [])],
-        });
+      .then(() => {
+        submitChanges();
       });
 
     handleClose();
diff --git a/web/components/issues/sidebar-select/relates-to.tsx b/web/components/issues/sidebar-select/relates-to.tsx
index deadf4d20..b9e56dbeb 100644
--- a/web/components/issues/sidebar-select/relates-to.tsx
+++ b/web/components/issues/sidebar-select/relates-to.tsx
@@ -75,10 +75,8 @@ export const SidebarRelatesSelect: React.FC<Props> = (props) => {
           })),
         ],
       })
-      .then((response) => {
-        submitChanges({
-          related_issues: [...watch("related_issues"), ...(response ?? [])],
-        });
+      .then(() => {
+        submitChanges();
       });
 
     handleClose();
diff --git a/web/components/issues/sidebar.tsx b/web/components/issues/sidebar.tsx
index 5455192fb..e0c370eaf 100644
--- a/web/components/issues/sidebar.tsx
+++ b/web/components/issues/sidebar.tsx
@@ -53,7 +53,7 @@ import { copyTextToClipboard } from "helpers/string.helper";
 // types
 import type { ICycle, IIssue, IIssueLink, linkDetails, IModule } from "types";
 // fetch-keys
-import { ISSUE_DETAILS } from "constants/fetch-keys";
+import { ISSUE_DETAILS, PROJECT_ISSUES_ACTIVITY } from "constants/fetch-keys";
 import { ContrastIcon } from "components/icons";
 
 type Props = {
@@ -480,6 +480,7 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
                         },
                         false
                       );
+                      mutate(PROJECT_ISSUES_ACTIVITY(issueId as string));
                     }}
                     watch={watchIssue}
                     disabled={memberRole.isGuest || memberRole.isViewer || uneditable}
@@ -500,6 +501,7 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
                         },
                         false
                       );
+                      mutate(PROJECT_ISSUES_ACTIVITY(issueId as string));
                     }}
                     watch={watchIssue}
                     disabled={memberRole.isGuest || memberRole.isViewer || uneditable}
@@ -517,6 +519,7 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
                           ...data,
                         };
                       });
+                      mutate(PROJECT_ISSUES_ACTIVITY(issueId as string));
                     }}
                     watch={watchIssue}
                     disabled={memberRole.isGuest || memberRole.isViewer || uneditable}
@@ -534,6 +537,7 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
                           ...data,
                         };
                       });
+                      mutate(PROJECT_ISSUES_ACTIVITY(issueId as string));
                     }}
                     watch={watchIssue}
                     disabled={memberRole.isGuest || memberRole.isViewer || uneditable}
diff --git a/web/pages/[workspaceSlug]/me/profile/index.tsx b/web/pages/[workspaceSlug]/me/profile/index.tsx
index 40ba8ecf3..8738ff46f 100644
--- a/web/pages/[workspaceSlug]/me/profile/index.tsx
+++ b/web/pages/[workspaceSlug]/me/profile/index.tsx
@@ -375,7 +375,7 @@ const Profile: NextPage = () => {
 
                 <div className="flex items-center justify-between py-2">
                   <PrimaryButton type="submit" loading={isSubmitting}>
-                    {isSubmitting ? "Updating Project..." : "Update Project"}
+                    {isSubmitting ? "Updating Profile..." : "Update Profile"}
                   </PrimaryButton>
                 </div>
               </div>

From db1bcdb54fe13908640954b303893b5bc2db3dd8 Mon Sep 17 00:00:00 2001
From: sriram veeraghanta <veeraghanta.sriram@gmail.com>
Date: Wed, 4 Oct 2023 15:07:01 +0530
Subject: [PATCH 20/38] fix: sync workflow fixes (#2365)

---
 .github/workflows/create-sync-pr.yml | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/.github/workflows/create-sync-pr.yml b/.github/workflows/create-sync-pr.yml
index 6ca840197..ee1ac7c70 100644
--- a/.github/workflows/create-sync-pr.yml
+++ b/.github/workflows/create-sync-pr.yml
@@ -62,6 +62,6 @@ jobs:
           gh pr create \
             --base $TARGET_BRANCH \
             --head $SOURCE_BRANCH \
-            --title "$PR_TITLE" \
-            --body "$PR_BODY" \
+            --title $PR_TITLE \
+            --body $PR_BODY \
             --repo $TARGET_REPO

From 4017f6bc557fd743debd4e700e03d9462cd135c4 Mon Sep 17 00:00:00 2001
From: sriram veeraghanta <veeraghanta.sriram@gmail.com>
Date: Wed, 4 Oct 2023 15:29:45 +0530
Subject: [PATCH 21/38] fix: sync job pr description escaped values fix (#2366)

---
 .github/workflows/create-sync-pr.yml | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/.github/workflows/create-sync-pr.yml b/.github/workflows/create-sync-pr.yml
index ee1ac7c70..98605af74 100644
--- a/.github/workflows/create-sync-pr.yml
+++ b/.github/workflows/create-sync-pr.yml
@@ -59,9 +59,19 @@ jobs:
           PR_TITLE="${{ github.event.pull_request.title }}"
           PR_BODY="${{ github.event.pull_request.body }}"
 
+          # Remove double quotes
+          PR_TITLE_CLEANED="${PR_TITLE//\"/}"
+          PR_BODY_CLEANED="${PR_BODY//\"/}"
+
+          # Construct PR_BODY_CONTENT using a here-document
+          PR_BODY_CONTENT=$(cat <<EOF
+          $PR_BODY_CLEANED
+          EOF
+          )
+
           gh pr create \
             --base $TARGET_BRANCH \
             --head $SOURCE_BRANCH \
-            --title $PR_TITLE \
-            --body $PR_BODY \
+            --title "$PR_TITLE_CLEANED" \
+            --body "$PR_BODY_CONTENT" \
             --repo $TARGET_REPO

From 981e2aafdd0dd535f49baddba99a012557db1443 Mon Sep 17 00:00:00 2001
From: Luis Cruz <55716036+luis-cruzt@users.noreply.github.com>
Date: Wed, 4 Oct 2023 06:07:01 -0600
Subject: [PATCH 22/38] Update index.tsx (#2343)

Fixes #2342

From eacf543439e082dcd3854807914c93dbeeebc4b1 Mon Sep 17 00:00:00 2001
From: Nikhil <118773738+pablohashescobar@users.noreply.github.com>
Date: Wed, 4 Oct 2023 17:39:12 +0530
Subject: [PATCH 23/38] dev: update apiserver configuration files (#2348)

* dev: update apiserver configuration files

* dev: add email and minio redirection urls
---
 apiserver/.env.example                 |   5 +-
 apiserver/plane/settings/production.py | 187 +++++++++++++++----------
 2 files changed, 116 insertions(+), 76 deletions(-)

diff --git a/apiserver/.env.example b/apiserver/.env.example
index 4969f1766..8772dfd53 100644
--- a/apiserver/.env.example
+++ b/apiserver/.env.example
@@ -1,7 +1,7 @@
 # Backend
 # Debug value for api server use it as 0 for production use
 DEBUG=0
-DJANGO_SETTINGS_MODULE="plane.settings.selfhosted"
+DJANGO_SETTINGS_MODULE="plane.settings.production"
 
 # Error logs
 SENTRY_DSN=""
@@ -59,3 +59,6 @@ DEFAULT_PASSWORD="password123"
 
 # SignUps
 ENABLE_SIGNUP="1"
+
+# Email redirections and minio domain settings
+WEB_URL="http://localhost"
diff --git a/apiserver/plane/settings/production.py b/apiserver/plane/settings/production.py
index e434f9742..170a2067c 100644
--- a/apiserver/plane/settings/production.py
+++ b/apiserver/plane/settings/production.py
@@ -7,6 +7,7 @@ import dj_database_url
 import sentry_sdk
 from sentry_sdk.integrations.django import DjangoIntegration
 from sentry_sdk.integrations.redis import RedisIntegration
+from urllib.parse import urlparse
 
 from .common import *  # noqa
 
@@ -89,90 +90,112 @@ if bool(os.environ.get("SENTRY_DSN", False)):
         profiles_sample_rate=1.0,
     )
 
-# The AWS region to connect to.
-AWS_REGION = os.environ.get("AWS_REGION", "")
+if DOCKERIZED and USE_MINIO:
+    INSTALLED_APPS += ("storages",)
+    STORAGES["default"] = {"BACKEND": "storages.backends.s3boto3.S3Boto3Storage"}
+    # The AWS access key to use.
+    AWS_ACCESS_KEY_ID = os.environ.get("AWS_ACCESS_KEY_ID", "access-key")
+    # The AWS secret access key to use.
+    AWS_SECRET_ACCESS_KEY = os.environ.get("AWS_SECRET_ACCESS_KEY", "secret-key")
+    # The name of the bucket to store files in.
+    AWS_STORAGE_BUCKET_NAME = os.environ.get("AWS_S3_BUCKET_NAME", "uploads")
+    # The full URL to the S3 endpoint. Leave blank to use the default region URL.
+    AWS_S3_ENDPOINT_URL = os.environ.get(
+        "AWS_S3_ENDPOINT_URL", "http://plane-minio:9000"
+    )
+    # Default permissions
+    AWS_DEFAULT_ACL = "public-read"
+    AWS_QUERYSTRING_AUTH = False
+    AWS_S3_FILE_OVERWRITE = False
 
-# The AWS access key to use.
-AWS_ACCESS_KEY_ID = os.environ.get("AWS_ACCESS_KEY_ID", "")
+    # Custom Domain settings
+    parsed_url = urlparse(os.environ.get("WEB_URL", "http://localhost"))
+    AWS_S3_CUSTOM_DOMAIN = f"{parsed_url.netloc}/{AWS_STORAGE_BUCKET_NAME}"
+    AWS_S3_URL_PROTOCOL = f"{parsed_url.scheme}:"
+else:
+    # The AWS region to connect to.
+    AWS_REGION = os.environ.get("AWS_REGION", "")
 
-# The AWS secret access key to use.
-AWS_SECRET_ACCESS_KEY = os.environ.get("AWS_SECRET_ACCESS_KEY", "")
+    # The AWS access key to use.
+    AWS_ACCESS_KEY_ID = os.environ.get("AWS_ACCESS_KEY_ID", "")
 
-# The optional AWS session token to use.
-# AWS_SESSION_TOKEN = ""
+    # The AWS secret access key to use.
+    AWS_SECRET_ACCESS_KEY = os.environ.get("AWS_SECRET_ACCESS_KEY", "")
 
-# The name of the bucket to store files in.
-AWS_S3_BUCKET_NAME = os.environ.get("AWS_S3_BUCKET_NAME")
+    # The optional AWS session token to use.
+    # AWS_SESSION_TOKEN = ""
 
-# How to construct S3 URLs ("auto", "path", "virtual").
-AWS_S3_ADDRESSING_STYLE = "auto"
+    # The name of the bucket to store files in.
+    AWS_S3_BUCKET_NAME = os.environ.get("AWS_S3_BUCKET_NAME")
 
-# The full URL to the S3 endpoint. Leave blank to use the default region URL.
-AWS_S3_ENDPOINT_URL = os.environ.get("AWS_S3_ENDPOINT_URL", "")
+    # How to construct S3 URLs ("auto", "path", "virtual").
+    AWS_S3_ADDRESSING_STYLE = "auto"
 
-# A prefix to be applied to every stored file. This will be joined to every filename using the "/" separator.
-AWS_S3_KEY_PREFIX = ""
+    # The full URL to the S3 endpoint. Leave blank to use the default region URL.
+    AWS_S3_ENDPOINT_URL = os.environ.get("AWS_S3_ENDPOINT_URL", "")
 
-# Whether to enable authentication for stored files. If True, then generated URLs will include an authentication
-# token valid for `AWS_S3_MAX_AGE_SECONDS`. If False, then generated URLs will not include an authentication token,
-# and their permissions will be set to "public-read".
-AWS_S3_BUCKET_AUTH = False
+    # A prefix to be applied to every stored file. This will be joined to every filename using the "/" separator.
+    AWS_S3_KEY_PREFIX = ""
 
-# How long generated URLs are valid for. This affects the expiry of authentication tokens if `AWS_S3_BUCKET_AUTH`
-# is True. It also affects the "Cache-Control" header of the files.
-# Important: Changing this setting will not affect existing files.
-AWS_S3_MAX_AGE_SECONDS = 60 * 60  # 1 hours.
+    # Whether to enable authentication for stored files. If True, then generated URLs will include an authentication
+    # token valid for `AWS_S3_MAX_AGE_SECONDS`. If False, then generated URLs will not include an authentication token,
+    # and their permissions will be set to "public-read".
+    AWS_S3_BUCKET_AUTH = False
 
-# A URL prefix to be used for generated URLs. This is useful if your bucket is served through a CDN. This setting
-# cannot be used with `AWS_S3_BUCKET_AUTH`.
-AWS_S3_PUBLIC_URL = ""
+    # How long generated URLs are valid for. This affects the expiry of authentication tokens if `AWS_S3_BUCKET_AUTH`
+    # is True. It also affects the "Cache-Control" header of the files.
+    # Important: Changing this setting will not affect existing files.
+    AWS_S3_MAX_AGE_SECONDS = 60 * 60  # 1 hours.
 
-# If True, then files will be stored with reduced redundancy. Check the S3 documentation and make sure you
-# understand the consequences before enabling.
-# Important: Changing this setting will not affect existing files.
-AWS_S3_REDUCED_REDUNDANCY = False
+    # A URL prefix to be used for generated URLs. This is useful if your bucket is served through a CDN. This setting
+    # cannot be used with `AWS_S3_BUCKET_AUTH`.
+    AWS_S3_PUBLIC_URL = ""
 
-# The Content-Disposition header used when the file is downloaded. This can be a string, or a function taking a
-# single `name` argument.
-# Important: Changing this setting will not affect existing files.
-AWS_S3_CONTENT_DISPOSITION = ""
+    # If True, then files will be stored with reduced redundancy. Check the S3 documentation and make sure you
+    # understand the consequences before enabling.
+    # Important: Changing this setting will not affect existing files.
+    AWS_S3_REDUCED_REDUNDANCY = False
 
-# The Content-Language header used when the file is downloaded. This can be a string, or a function taking a
-# single `name` argument.
-# Important: Changing this setting will not affect existing files.
-AWS_S3_CONTENT_LANGUAGE = ""
+    # The Content-Disposition header used when the file is downloaded. This can be a string, or a function taking a
+    # single `name` argument.
+    # Important: Changing this setting will not affect existing files.
+    AWS_S3_CONTENT_DISPOSITION = ""
 
-# A mapping of custom metadata for each file. Each value can be a string, or a function taking a
-# single `name` argument.
-# Important: Changing this setting will not affect existing files.
-AWS_S3_METADATA = {}
+    # The Content-Language header used when the file is downloaded. This can be a string, or a function taking a
+    # single `name` argument.
+    # Important: Changing this setting will not affect existing files.
+    AWS_S3_CONTENT_LANGUAGE = ""
 
-# If True, then files will be stored using AES256 server-side encryption.
-# If this is a string value (e.g., "aws:kms"), that encryption type will be used.
-# Otherwise, server-side encryption is not be enabled.
-# Important: Changing this setting will not affect existing files.
-AWS_S3_ENCRYPT_KEY = False
+    # A mapping of custom metadata for each file. Each value can be a string, or a function taking a
+    # single `name` argument.
+    # Important: Changing this setting will not affect existing files.
+    AWS_S3_METADATA = {}
 
-# The AWS S3 KMS encryption key ID (the `SSEKMSKeyId` parameter) is set from this string if present.
-# This is only relevant if AWS S3 KMS server-side encryption is enabled (above).
-# AWS_S3_KMS_ENCRYPTION_KEY_ID = ""
+    # If True, then files will be stored using AES256 server-side encryption.
+    # If this is a string value (e.g., "aws:kms"), that encryption type will be used.
+    # Otherwise, server-side encryption is not be enabled.
+    # Important: Changing this setting will not affect existing files.
+    AWS_S3_ENCRYPT_KEY = False
 
-# If True, then text files will be stored using gzip content encoding. Files will only be gzipped if their
-# compressed size is smaller than their uncompressed size.
-# Important: Changing this setting will not affect existing files.
-AWS_S3_GZIP = True
+    # The AWS S3 KMS encryption key ID (the `SSEKMSKeyId` parameter) is set from this string if present.
+    # This is only relevant if AWS S3 KMS server-side encryption is enabled (above).
+    # AWS_S3_KMS_ENCRYPTION_KEY_ID = ""
 
-# The signature version to use for S3 requests.
-AWS_S3_SIGNATURE_VERSION = None
+    # If True, then text files will be stored using gzip content encoding. Files will only be gzipped if their
+    # compressed size is smaller than their uncompressed size.
+    # Important: Changing this setting will not affect existing files.
+    AWS_S3_GZIP = True
 
-# If True, then files with the same name will overwrite each other. By default it's set to False to have
-# extra characters appended.
-AWS_S3_FILE_OVERWRITE = False
+    # The signature version to use for S3 requests.
+    AWS_S3_SIGNATURE_VERSION = None
 
-STORAGES["default"] = {
-    "BACKEND": "django_s3_storage.storage.S3Storage",
-}
+    # If True, then files with the same name will overwrite each other. By default it's set to False to have
+    # extra characters appended.
+    AWS_S3_FILE_OVERWRITE = False
 
+    STORAGES["default"] = {
+        "BACKEND": "django_s3_storage.storage.S3Storage",
+    }
 # AWS Settings End
 
 # Enable Connection Pooling (if desired)
@@ -193,16 +216,27 @@ CSRF_COOKIE_SECURE = True
 
 REDIS_URL = os.environ.get("REDIS_URL")
 
-CACHES = {
-    "default": {
-        "BACKEND": "django_redis.cache.RedisCache",
-        "LOCATION": REDIS_URL,
-        "OPTIONS": {
-            "CLIENT_CLASS": "django_redis.client.DefaultClient",
-            "CONNECTION_POOL_KWARGS": {"ssl_cert_reqs": False},
-        },
+if DOCKERIZED:
+    CACHES = {
+        "default": {
+            "BACKEND": "django_redis.cache.RedisCache",
+            "LOCATION": REDIS_URL,
+            "OPTIONS": {
+                "CLIENT_CLASS": "django_redis.client.DefaultClient",
+            },
+        }
+    }
+else:
+    CACHES = {
+        "default": {
+            "BACKEND": "django_redis.cache.RedisCache",
+            "LOCATION": REDIS_URL,
+            "OPTIONS": {
+                "CLIENT_CLASS": "django_redis.client.DefaultClient",
+                "CONNECTION_POOL_KWARGS": {"ssl_cert_reqs": False},
+            },
+        }
     }
-}
 
 
 WEB_URL = os.environ.get("WEB_URL", "https://app.plane.so")
@@ -225,8 +259,12 @@ broker_url = (
     f"{redis_url}?ssl_cert_reqs={ssl.CERT_NONE.name}&ssl_ca_certs={certifi.where()}"
 )
 
-CELERY_RESULT_BACKEND = broker_url
-CELERY_BROKER_URL = broker_url
+if DOCKERIZED:
+    CELERY_BROKER_URL = REDIS_URL
+    CELERY_RESULT_BACKEND = REDIS_URL
+else:
+    CELERY_BROKER_URL = broker_url
+    CELERY_RESULT_BACKEND = broker_url
 
 GITHUB_ACCESS_TOKEN = os.environ.get("GITHUB_ACCESS_TOKEN", False)
 
@@ -237,4 +275,3 @@ ENABLE_SIGNUP = os.environ.get("ENABLE_SIGNUP", "1") == "1"
 SCOUT_MONITOR = os.environ.get("SCOUT_MONITOR", False)
 SCOUT_KEY = os.environ.get("SCOUT_KEY", "")
 SCOUT_NAME = "Plane"
-

From 1e9149d8720a4bf59e8aeaddd4cb0329f377ba8a Mon Sep 17 00:00:00 2001
From: guru_sainath <gurusainath007@gmail.com>
Date: Wed, 4 Oct 2023 17:44:54 +0530
Subject: [PATCH 24/38] fix: themening  validation in store init. (#2350)

---
 web/lib/mobx/store-init.tsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/web/lib/mobx/store-init.tsx b/web/lib/mobx/store-init.tsx
index 5c2ee0558..771d8eaba 100644
--- a/web/lib/mobx/store-init.tsx
+++ b/web/lib/mobx/store-init.tsx
@@ -24,9 +24,12 @@ const MobxStoreInit = () => {
       );
 
     // theme
-    if (store.theme.theme === null && store?.user?.currentUserSettings) {
+    if (
+      (store.theme.theme === null || store.theme.theme === "undefined") &&
+      store?.user?.currentUserSettings
+    ) {
       let currentTheme = localStorage.getItem("theme");
-      currentTheme = currentTheme ? currentTheme : "system";
+      currentTheme = currentTheme && currentTheme != "undefined" ? currentTheme : "system";
 
       // validating the theme and applying for initial state
       if (currentTheme) {

From fb6f6454df1d2a32a1555f75177fed28317e4ac4 Mon Sep 17 00:00:00 2001
From: Bavisetti Narayan <72156168+NarayanBavisetti@users.noreply.github.com>
Date: Wed, 4 Oct 2023 17:47:01 +0530
Subject: [PATCH 25/38] chore: member can change role (#2371)

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

diff --git a/apiserver/plane/api/views/project.py b/apiserver/plane/api/views/project.py
index c72b8d423..7847e3a80 100644
--- a/apiserver/plane/api/views/project.py
+++ b/apiserver/plane/api/views/project.py
@@ -495,7 +495,7 @@ class ProjectMemberViewSet(BaseViewSet):
     serializer_class = ProjectMemberAdminSerializer
     model = ProjectMember
     permission_classes = [
-        ProjectBasePermission,
+        ProjectMemberPermission,
     ]
 
     search_fields = [

From c2f0ae1ec5921c7a2b404c5bfccf6dfacade94e9 Mon Sep 17 00:00:00 2001
From: Bavisetti Narayan <72156168+NarayanBavisetti@users.noreply.github.com>
Date: Wed, 4 Oct 2023 17:47:46 +0530
Subject: [PATCH 26/38] chore: removed the issue draft log from my profile
 (#2368)

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

diff --git a/apiserver/plane/api/views/workspace.py b/apiserver/plane/api/views/workspace.py
index 753fd861b..8d518b160 100644
--- a/apiserver/plane/api/views/workspace.py
+++ b/apiserver/plane/api/views/workspace.py
@@ -1197,7 +1197,7 @@ class WorkspaceUserActivityEndpoint(BaseAPIView):
             projects = request.query_params.getlist("project", [])
 
             queryset = IssueActivity.objects.filter(
-                ~Q(field__in=["comment", "vote", "reaction"]),
+                ~Q(field__in=["comment", "vote", "reaction", "draft"]),
                 workspace__slug=slug,
                 project__project_projectmember__member=request.user,
                 actor=user_id,

From 7a3b556ae0c08b2bde0c5247654ecdf60cf6bc62 Mon Sep 17 00:00:00 2001
From: sriram veeraghanta <veeraghanta.sriram@gmail.com>
Date: Wed, 4 Oct 2023 18:03:22 +0530
Subject: [PATCH 27/38] adding sync info in pr title (#2373)

---
 .github/workflows/create-sync-pr.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/create-sync-pr.yml b/.github/workflows/create-sync-pr.yml
index 98605af74..28e47a0d6 100644
--- a/.github/workflows/create-sync-pr.yml
+++ b/.github/workflows/create-sync-pr.yml
@@ -72,6 +72,6 @@ jobs:
           gh pr create \
             --base $TARGET_BRANCH \
             --head $SOURCE_BRANCH \
-            --title "$PR_TITLE_CLEANED" \
+            --title "[SYNC] $PR_TITLE_CLEANED" \
             --body "$PR_BODY_CONTENT" \
             --repo $TARGET_REPO

From 05920a72a59ad58f7e67883ea5b5abf106ca2c84 Mon Sep 17 00:00:00 2001
From: guru_sainath <gurusainath007@gmail.com>
Date: Wed, 4 Oct 2023 18:17:34 +0530
Subject: [PATCH 28/38] chore: layout access validation and switch in plane
 deploy issues route (#2351)

* chore: handled route validation and layout access validation in plane deploy issues

* chore: impoved validation condition
---
 space/components/issues/navbar/index.tsx | 46 ++++++++++++++++++------
 1 file changed, 35 insertions(+), 11 deletions(-)

diff --git a/space/components/issues/navbar/index.tsx b/space/components/issues/navbar/index.tsx
index 509d676b7..35ffbe289 100644
--- a/space/components/issues/navbar/index.tsx
+++ b/space/components/issues/navbar/index.tsx
@@ -44,19 +44,43 @@ const IssueNavbar = observer(() => {
   }, [projectStore, workspace_slug, project_slug]);
 
   useEffect(() => {
-    if (workspace_slug && project_slug) {
-      if (!board) {
-        router.push({
-          pathname: `/${workspace_slug}/${project_slug}`,
-          query: {
-            board: "list",
-          },
-        });
-        return projectStore.setActiveBoard("list");
+    if (workspace_slug && project_slug && projectStore?.deploySettings) {
+      const viewsAcceptable: string[] = [];
+      let currentBoard: string | null = null;
+
+      if (projectStore?.deploySettings?.views?.list) viewsAcceptable.push("list");
+      if (projectStore?.deploySettings?.views?.kanban) viewsAcceptable.push("kanban");
+      if (projectStore?.deploySettings?.views?.calendar) viewsAcceptable.push("calendar");
+      if (projectStore?.deploySettings?.views?.gantt) viewsAcceptable.push("gantt");
+      if (projectStore?.deploySettings?.views?.spreadsheet) viewsAcceptable.push("spreadsheet");
+
+      if (board) {
+        if (viewsAcceptable.includes(board.toString())) {
+          currentBoard = board.toString();
+        } else {
+          if (viewsAcceptable && viewsAcceptable.length > 0) {
+            currentBoard = viewsAcceptable[0];
+          }
+        }
+      } else {
+        if (viewsAcceptable && viewsAcceptable.length > 0) {
+          currentBoard = viewsAcceptable[0];
+        }
+      }
+
+      if (currentBoard) {
+        if (projectStore?.activeBoard === null || projectStore?.activeBoard !== currentBoard) {
+          projectStore.setActiveBoard(currentBoard);
+          router.push({
+            pathname: `/${workspace_slug}/${project_slug}`,
+            query: {
+              board: currentBoard,
+            },
+          });
+        }
       }
-      projectStore.setActiveBoard(board.toString());
     }
-  }, [board, workspace_slug, project_slug]);
+  }, [board, workspace_slug, project_slug, router, projectStore, projectStore?.deploySettings]);
 
   return (
     <div className="px-5 relative w-full flex items-center gap-4">

From 7bdca9c73afea5c0621c394ac25d20946901cf50 Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com>
Date: Wed, 4 Oct 2023 18:31:28 +0530
Subject: [PATCH 29/38] show current version in the help section dropdown
 (#2353)

---
 package.json                                 |  1 +
 packages/eslint-config-custom/package.json   |  2 +-
 packages/tailwind-config-custom/package.json |  2 +-
 packages/tsconfig/package.json               |  2 +-
 packages/ui/package.json                     |  2 +-
 space/package.json                           |  2 +-
 web/components/workspace/help-section.tsx    | 84 +++++++++++---------
 web/package.json                             |  2 +-
 8 files changed, 52 insertions(+), 45 deletions(-)

diff --git a/package.json b/package.json
index de09c6ee9..1f2f96414 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,6 @@
 {
   "repository": "https://github.com/makeplane/plane.git",
+  "version": "0.13.2",
   "license": "AGPL-3.0",
   "private": true,
   "workspaces": [
diff --git a/packages/eslint-config-custom/package.json b/packages/eslint-config-custom/package.json
index 16fed7a78..12a7ab8c8 100644
--- a/packages/eslint-config-custom/package.json
+++ b/packages/eslint-config-custom/package.json
@@ -1,6 +1,6 @@
 {
   "name": "eslint-config-custom",
-  "version": "0.0.0",
+  "version": "0.13.2",
   "main": "index.js",
   "license": "MIT",
   "dependencies": {
diff --git a/packages/tailwind-config-custom/package.json b/packages/tailwind-config-custom/package.json
index 1bd5a0e1c..6edaa0ec4 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.0.1",
+  "version": "0.13.2",
   "description": "common tailwind configuration across monorepo",
   "main": "index.js",
   "devDependencies": {
diff --git a/packages/tsconfig/package.json b/packages/tsconfig/package.json
index f4810fc3f..58bfb8451 100644
--- a/packages/tsconfig/package.json
+++ b/packages/tsconfig/package.json
@@ -1,6 +1,6 @@
 {
   "name": "tsconfig",
-  "version": "0.0.0",
+  "version": "0.13.2",
   "private": true,
   "files": [
     "base.json",
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 6a9132fca..d107e711c 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ui",
-  "version": "0.0.0",
+  "version": "0.13.2",
   "main": "./index.tsx",
   "types": "./index.tsx",
   "license": "MIT",
diff --git a/space/package.json b/space/package.json
index 6ce9ecefe..b539fbb65 100644
--- a/space/package.json
+++ b/space/package.json
@@ -1,6 +1,6 @@
 {
   "name": "space",
-  "version": "0.0.1",
+  "version": "0.13.2",
   "private": true,
   "scripts": {
     "dev": "next dev -p 4000",
diff --git a/web/components/workspace/help-section.tsx b/web/components/workspace/help-section.tsx
index 965a9e8a3..9f35f337c 100644
--- a/web/components/workspace/help-section.tsx
+++ b/web/components/workspace/help-section.tsx
@@ -1,24 +1,23 @@
 import React, { useRef, useState } from "react";
-
 import Link from "next/link";
-
-// headless ui
 import { Transition } from "@headlessui/react";
+
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
 // hooks
-import useTheme from "hooks/use-theme";
 import useOutsideClickDetector from "hooks/use-outside-click-detector";
 // icons
 import { Bolt, HelpOutlineOutlined, WestOutlined } from "@mui/icons-material";
-import { ChatBubbleOvalLeftEllipsisIcon } from "@heroicons/react/24/outline";
-import { DocumentIcon, DiscordIcon, GithubIcon } from "components/icons";
-// mobx store
-import { useMobxStore } from "lib/mobx/store-provider";
+import { DiscordIcon } from "components/icons";
+import { FileText, Github, MessagesSquare } from "lucide-react";
+// assets
+import packageJson from "package.json";
 
 const helpOptions = [
   {
     name: "Documentation",
     href: "https://docs.plane.so/",
-    Icon: DocumentIcon,
+    Icon: FileText,
   },
   {
     name: "Join our Discord",
@@ -28,13 +27,13 @@ const helpOptions = [
   {
     name: "Report a bug",
     href: "https://github.com/makeplane/plane/issues/new/choose",
-    Icon: GithubIcon,
+    Icon: Github,
   },
   {
     name: "Chat with us",
     href: null,
     onClick: () => (window as any).$crisp.push(["do", "chat:show"]),
-    Icon: ChatBubbleOvalLeftEllipsisIcon,
+    Icon: MessagesSquare,
   },
 ];
 
@@ -123,37 +122,44 @@ export const WorkspaceHelpSection: React.FC<WorkspaceHelpSectionProps> = ({ setS
             leaveTo="transform opacity-0 scale-95"
           >
             <div
-              className={`absolute bottom-2 ${
-                store?.theme?.sidebarCollapsed ? "left-full" : "left-[-75px]"
-              } space-y-2 rounded-sm bg-custom-background-80 p-1 shadow-md`}
+              className={`absolute bottom-2 min-w-[10rem] ${
+                store?.theme?.sidebarCollapsed ? "left-full" : "-left-[75px]"
+              } rounded bg-custom-background-100 p-1 shadow-custom-shadow-xs whitespace-nowrap divide-y divide-custom-border-200`}
               ref={helpOptionsRef}
             >
-              {helpOptions.map(({ name, Icon, href, onClick }) => {
-                if (href)
-                  return (
-                    <Link href={href} key={name}>
-                      <a
-                        target="_blank"
-                        className="flex items-center gap-x-2 whitespace-nowrap rounded-md px-2 py-1 text-xs hover:bg-custom-background-90"
+              <div className="space-y-1 pb-2">
+                {helpOptions.map(({ name, Icon, href, onClick }) => {
+                  if (href)
+                    return (
+                      <Link href={href} key={name}>
+                        <a
+                          target="_blank"
+                          className="flex items-center gap-x-2 rounded px-2 py-1 text-xs hover:bg-custom-background-80"
+                        >
+                          <div className="grid place-items-center flex-shrink-0">
+                            <Icon className="text-custom-text-200 h-3.5 w-3.5" size={14} />
+                          </div>
+                          <span className="text-xs">{name}</span>
+                        </a>
+                      </Link>
+                    );
+                  else
+                    return (
+                      <button
+                        key={name}
+                        type="button"
+                        onClick={onClick ?? undefined}
+                        className="flex w-full items-center gap-x-2 rounded px-2 py-1 text-xs hover:bg-custom-background-80"
                       >
-                        <Icon className="h-4 w-4 text-custom-text-200" />
-                        <span className="text-sm">{name}</span>
-                      </a>
-                    </Link>
-                  );
-                else
-                  return (
-                    <button
-                      key={name}
-                      type="button"
-                      onClick={onClick ? onClick : undefined}
-                      className="flex w-full items-center gap-x-2 whitespace-nowrap rounded-md  px-2 py-1 text-xs hover:bg-custom-background-90"
-                    >
-                      <Icon className="h-4 w-4 text-custom-sidebar-text-200" />
-                      <span className="text-sm">{name}</span>
-                    </button>
-                  );
-              })}
+                        <div className="grid place-items-center flex-shrink-0">
+                          <Icon className="text-custom-text-200 h-3.5 w-3.5" size={14} />
+                        </div>
+                        <span className="text-xs">{name}</span>
+                      </button>
+                    );
+                })}
+              </div>
+              <div className="px-2 pt-2 pb-1 text-[10px]">Version: v{packageJson.version}</div>
             </div>
           </Transition>
         </div>
diff --git a/web/package.json b/web/package.json
index 93fc9366e..e0cf4efed 100644
--- a/web/package.json
+++ b/web/package.json
@@ -1,6 +1,6 @@
 {
   "name": "web",
-  "version": "0.1.0",
+  "version": "0.13.2",
   "private": true,
   "scripts": {
     "dev": "next dev --port 3000",

From d0a51d75f6f9ce1d42f35f82075621fc629b2a49 Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com>
Date: Wed, 4 Oct 2023 18:36:14 +0530
Subject: [PATCH 30/38] fix: table menu positioning (#2354)

---
 web/components/tiptap/index.tsx            |  2 +-
 web/components/tiptap/table-menu/index.tsx | 20 +-------------------
 2 files changed, 2 insertions(+), 20 deletions(-)

diff --git a/web/components/tiptap/index.tsx b/web/components/tiptap/index.tsx
index 84f691c35..44076234e 100644
--- a/web/components/tiptap/index.tsx
+++ b/web/components/tiptap/index.tsx
@@ -89,7 +89,7 @@ const Tiptap = (props: ITipTapRichTextEditor) => {
       onClick={() => {
         editor?.chain().focus().run();
       }}
-      className={`tiptap-editor-container cursor-text ${editorClassNames}`}
+      className={`tiptap-editor-container relative cursor-text ${editorClassNames}`}
     >
       {editor && <EditorBubbleMenu editor={editor} />}
       <div className={`${editorContentCustomClassNames}`}>
diff --git a/web/components/tiptap/table-menu/index.tsx b/web/components/tiptap/table-menu/index.tsx
index 94f9c0f8d..daa8f6953 100644
--- a/web/components/tiptap/table-menu/index.tsx
+++ b/web/components/tiptap/table-menu/index.tsx
@@ -80,8 +80,6 @@ export const TableMenu = ({ editor }: { editor: any }) => {
         const range = selection.getRangeAt(0);
         const tableNode = findTableAncestor(range.startContainer);
 
-        let parent = tableNode?.parentElement;
-
         if (tableNode) {
           const tableRect = tableNode.getBoundingClientRect();
           const tableCenter = tableRect.left + tableRect.width / 2;
@@ -90,18 +88,6 @@ export const TableMenu = ({ editor }: { editor: any }) => {
           const tableBottom = tableRect.bottom;
 
           setTableLocation({ bottom: tableBottom, left: menuLeft });
-
-          while (parent) {
-            if (!parent.classList.contains("disable-scroll"))
-              parent.classList.add("disable-scroll");
-            parent = parent.parentElement;
-          }
-        } else {
-          const scrollDisabledContainers = document.querySelectorAll(".disable-scroll");
-
-          scrollDisabledContainers.forEach((container) => {
-            container.classList.remove("disable-scroll");
-          });
         }
       }
     };
@@ -115,13 +101,9 @@ export const TableMenu = ({ editor }: { editor: any }) => {
 
   return (
     <section
-      className={`fixed left-1/2 transform -translate-x-1/2 overflow-hidden rounded border border-custom-border-300 bg-custom-background-100 shadow-custom-shadow-sm p-1 ${
+      className={`absolute z-20 left-1/2 -translate-x-1/2 overflow-hidden rounded border border-custom-border-300 bg-custom-background-100 shadow-custom-shadow-sm p-1 ${
         isOpen ? "block" : "hidden"
       }`}
-      style={{
-        bottom: `calc(100vh - ${tableLocation.bottom + 45}px)`,
-        left: `${tableLocation.left}px`,
-      }}
     >
       {items.map((item, index) => (
         <Tooltip key={index} tooltipContent={item.name}>

From 48c65c9c95385ec14121fca08da1467b241aebe9 Mon Sep 17 00:00:00 2001
From: guru_sainath <gurusainath007@gmail.com>
Date: Wed, 4 Oct 2023 18:44:36 +0530
Subject: [PATCH 31/38] fix: handle cross project issues in the sub-issues.
 (#2357)

---
 web/components/issues/sub-issues/issue.tsx    | 25 +++++++++++++------
 .../issues/sub-issues/issues-list.tsx         |  3 ---
 web/components/issues/sub-issues/root.tsx     | 11 --------
 3 files changed, 18 insertions(+), 21 deletions(-)

diff --git a/web/components/issues/sub-issues/issue.tsx b/web/components/issues/sub-issues/issue.tsx
index d9c6fd303..a53d18bb9 100644
--- a/web/components/issues/sub-issues/issue.tsx
+++ b/web/components/issues/sub-issues/issue.tsx
@@ -1,7 +1,8 @@
 import React from "react";
 // next imports
-import Link from "next/link";
 import { useRouter } from "next/router";
+// swr
+import { mutate } from "swr";
 // lucide icons
 import {
   ChevronDown,
@@ -13,6 +14,7 @@ import {
   Loader,
 } from "lucide-react";
 // components
+import { IssuePeekOverview } from "components/issues/peek-overview";
 import { SubIssuesRootList } from "./issues-list";
 import { IssueProperty } from "./properties";
 // ui
@@ -20,6 +22,8 @@ import { Tooltip, CustomMenu } from "components/ui";
 // types
 import { ICurrentUserResponse, IIssue } from "types";
 import { ISubIssuesRootLoaders, ISubIssuesRootLoadersHandler } from "./root";
+// fetch keys
+import { SUB_ISSUES } from "constants/fetch-keys";
 
 export interface ISubIssues {
   workspaceSlug: string;
@@ -38,7 +42,6 @@ export interface ISubIssues {
     issueId: string,
     issue?: IIssue | null
   ) => void;
-  setPeekParentId: (id: string) => void;
 }
 
 export const SubIssues: React.FC<ISubIssues> = ({
@@ -54,14 +57,12 @@ export const SubIssues: React.FC<ISubIssues> = ({
   handleIssuesLoader,
   copyText,
   handleIssueCrudOperation,
-  setPeekParentId,
 }) => {
   const router = useRouter();
+  const { query } = router;
+  const { peekIssue } = query as { peekIssue: string };
 
   const openPeekOverview = (issue_id: string) => {
-    const { query } = router;
-
-    setPeekParentId(parentIssue?.id);
     router.push({
       pathname: router.pathname,
       query: { ...query, peekIssue: issue_id },
@@ -199,7 +200,17 @@ export const SubIssues: React.FC<ISubIssues> = ({
           handleIssuesLoader={handleIssuesLoader}
           copyText={copyText}
           handleIssueCrudOperation={handleIssueCrudOperation}
-          setPeekParentId={setPeekParentId}
+        />
+      )}
+
+      {peekIssue && peekIssue === issue?.id && (
+        <IssuePeekOverview
+          handleMutation={() =>
+            parentIssue && parentIssue?.id && mutate(SUB_ISSUES(parentIssue?.id))
+          }
+          projectId={issue?.project ?? ""}
+          workspaceSlug={workspaceSlug ?? ""}
+          readOnly={!editable}
         />
       )}
     </div>
diff --git a/web/components/issues/sub-issues/issues-list.tsx b/web/components/issues/sub-issues/issues-list.tsx
index a713d6fb8..9fc77992e 100644
--- a/web/components/issues/sub-issues/issues-list.tsx
+++ b/web/components/issues/sub-issues/issues-list.tsx
@@ -27,7 +27,6 @@ export interface ISubIssuesRootList {
     issueId: string,
     issue?: IIssue | null
   ) => void;
-  setPeekParentId: (id: string) => void;
 }
 
 export const SubIssuesRootList: React.FC<ISubIssuesRootList> = ({
@@ -42,7 +41,6 @@ export const SubIssuesRootList: React.FC<ISubIssuesRootList> = ({
   handleIssuesLoader,
   copyText,
   handleIssueCrudOperation,
-  setPeekParentId,
 }) => {
   const { data: issues, isLoading } = useSWR(
     workspaceSlug && projectId && parentIssue && parentIssue?.id
@@ -83,7 +81,6 @@ export const SubIssuesRootList: React.FC<ISubIssuesRootList> = ({
             handleIssuesLoader={handleIssuesLoader}
             copyText={copyText}
             handleIssueCrudOperation={handleIssueCrudOperation}
-            setPeekParentId={setPeekParentId}
           />
         ))}
 
diff --git a/web/components/issues/sub-issues/root.tsx b/web/components/issues/sub-issues/root.tsx
index 352546eab..4b29b97c9 100644
--- a/web/components/issues/sub-issues/root.tsx
+++ b/web/components/issues/sub-issues/root.tsx
@@ -10,7 +10,6 @@ import { ExistingIssuesListModal } from "components/core";
 import { CreateUpdateIssueModal, DeleteIssueModal } from "components/issues";
 import { SubIssuesRootList } from "./issues-list";
 import { ProgressBar } from "./progressbar";
-import { IssuePeekOverview } from "components/issues/peek-overview";
 // ui
 import { CustomMenu } from "components/ui";
 // hooks
@@ -60,8 +59,6 @@ export const SubIssuesRoot: React.FC<ISubIssuesRoot> = ({ parentIssue, user }) =
       : null
   );
 
-  const [peekParentId, setPeekParentId] = React.useState<string | null>("");
-
   const [issuesLoader, setIssuesLoader] = React.useState<ISubIssuesRootLoaders>({
     visibility: [parentIssue?.id],
     delete: [],
@@ -237,7 +234,6 @@ export const SubIssuesRoot: React.FC<ISubIssuesRoot> = ({ parentIssue, user }) =
                     handleIssuesLoader={handleIssuesLoader}
                     copyText={copyText}
                     handleIssueCrudOperation={handleIssueCrudOperation}
-                    setPeekParentId={setPeekParentId}
                   />
                 </div>
               )}
@@ -363,13 +359,6 @@ export const SubIssuesRoot: React.FC<ISubIssuesRoot> = ({ parentIssue, user }) =
             )}
         </>
       )}
-
-      <IssuePeekOverview
-        handleMutation={() => peekParentId && peekIssue && mutateSubIssues(peekParentId)}
-        projectId={projectId ?? ""}
-        workspaceSlug={workspaceSlug ?? ""}
-        readOnly={!isEditable}
-      />
     </div>
   );
 };

From ea2c1e2d060c597ceb0dcbcd4d2201a2a3c4c510 Mon Sep 17 00:00:00 2001
From: sriram veeraghanta <veeraghanta.sriram@gmail.com>
Date: Wed, 4 Oct 2023 18:55:29 +0530
Subject: [PATCH 32/38] fix: login process validation based on api config
 (#2361)

---
 .../account/email-password-form.tsx           | 163 +++++++-----------
 web/components/account/email-signup-form.tsx  | 114 ++++++++++++
 .../account/github-login-button.tsx           |  16 +-
 web/components/account/google-login.tsx       |  15 +-
 web/components/account/index.ts               |   1 +
 web/pages/index.tsx                           |  94 ++++++----
 web/pages/sign-up.tsx                         |  25 +--
 web/services/app-config.service.ts            |  30 ++++
 8 files changed, 283 insertions(+), 175 deletions(-)
 create mode 100644 web/components/account/email-signup-form.tsx
 create mode 100644 web/services/app-config.service.ts

diff --git a/web/components/account/email-password-form.tsx b/web/components/account/email-password-form.tsx
index bb341b371..7a95095ee 100644
--- a/web/components/account/email-password-form.tsx
+++ b/web/components/account/email-password-form.tsx
@@ -1,12 +1,5 @@
-import React, { useState } from "react";
-
-import { useRouter } from "next/router";
-import Link from "next/link";
-
-// react hook form
+import React from "react";
 import { useForm } from "react-hook-form";
-// components
-import { EmailResetPasswordForm } from "components/account";
 // ui
 import { Input, PrimaryButton } from "components/ui";
 // types
@@ -18,14 +11,12 @@ type EmailPasswordFormValues = {
 
 type Props = {
   onSubmit: (formData: EmailPasswordFormValues) => Promise<void>;
+  setIsResettingPassword: (value: boolean) => void;
 };
 
-export const EmailPasswordForm: React.FC<Props> = ({ onSubmit }) => {
-  const [isResettingPassword, setIsResettingPassword] = useState(false);
-
-  const router = useRouter();
-  const isSignUpPage = router.pathname === "/sign-up";
-
+export const EmailPasswordForm: React.FC<Props> = (props) => {
+  const { onSubmit, setIsResettingPassword } = props;
+  // form info
   const {
     register,
     handleSubmit,
@@ -42,94 +33,62 @@ export const EmailPasswordForm: React.FC<Props> = ({ onSubmit }) => {
 
   return (
     <>
-      <h1 className="text-center text-2xl sm:text-2.5xl font-semibold text-custom-text-100">
-        {isResettingPassword
-          ? "Reset your password"
-          : isSignUpPage
-          ? "Sign up on Plane"
-          : "Sign in to Plane"}
-      </h1>
-      {isResettingPassword ? (
-        <EmailResetPasswordForm setIsResettingPassword={setIsResettingPassword} />
-      ) : (
-        <form
-          className="space-y-4 mt-10 w-full sm:w-[360px] mx-auto"
-          onSubmit={handleSubmit(onSubmit)}
-        >
-          <div className="space-y-1">
-            <Input
-              id="email"
-              type="email"
-              name="email"
-              register={register}
-              validations={{
-                required: "Email address is required",
-                validate: (value) =>
-                  /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(
-                    value
-                  ) || "Email address is not valid",
-              }}
-              error={errors.email}
-              placeholder="Enter your email address..."
-              className="border-custom-border-300 h-[46px]"
-            />
-          </div>
-          <div className="space-y-1">
-            <Input
-              id="password"
-              type="password"
-              name="password"
-              register={register}
-              validations={{
-                required: "Password is required",
-              }}
-              error={errors.password}
-              placeholder="Enter your password..."
-              className="border-custom-border-300 h-[46px]"
-            />
-          </div>
-          <div className="text-right text-xs">
-            {isSignUpPage ? (
-              <Link href="/">
-                <a className="text-custom-text-200 hover:text-custom-primary-100">
-                  Already have an account? Sign in.
-                </a>
-              </Link>
-            ) : (
-              <button
-                type="button"
-                onClick={() => setIsResettingPassword(true)}
-                className="text-custom-text-200 hover:text-custom-primary-100"
-              >
-                Forgot your password?
-              </button>
-            )}
-          </div>
-          <div>
-            <PrimaryButton
-              type="submit"
-              className="w-full text-center h-[46px]"
-              disabled={!isValid && isDirty}
-              loading={isSubmitting}
-            >
-              {isSignUpPage
-                ? isSubmitting
-                  ? "Signing up..."
-                  : "Sign up"
-                : isSubmitting
-                ? "Signing in..."
-                : "Sign in"}
-            </PrimaryButton>
-            {!isSignUpPage && (
-              <Link href="/sign-up">
-                <a className="block text-custom-text-200 hover:text-custom-primary-100 text-xs mt-4">
-                  Don{"'"}t have an account? Sign up.
-                </a>
-              </Link>
-            )}
-          </div>
-        </form>
-      )}
+      <form
+        className="space-y-4 mt-10 w-full sm:w-[360px] mx-auto"
+        onSubmit={handleSubmit(onSubmit)}
+      >
+        <div className="space-y-1">
+          <Input
+            id="email"
+            type="email"
+            name="email"
+            register={register}
+            validations={{
+              required: "Email address is required",
+              validate: (value) =>
+                /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(
+                  value
+                ) || "Email address is not valid",
+            }}
+            error={errors.email}
+            placeholder="Enter your email address..."
+            className="border-custom-border-300 h-[46px]"
+          />
+        </div>
+        <div className="space-y-1">
+          <Input
+            id="password"
+            type="password"
+            name="password"
+            register={register}
+            validations={{
+              required: "Password is required",
+            }}
+            error={errors.password}
+            placeholder="Enter your password..."
+            className="border-custom-border-300 h-[46px]"
+          />
+        </div>
+        <div className="text-right text-xs">
+          <button
+            type="button"
+            onClick={() => setIsResettingPassword(true)}
+            className="text-custom-text-200 hover:text-custom-primary-100"
+          >
+            Forgot your password?
+          </button>
+        </div>
+        <div>
+          <PrimaryButton
+            type="submit"
+            className="w-full text-center h-[46px]"
+            disabled={!isValid && isDirty}
+            loading={isSubmitting}
+          >
+            {isSubmitting ? "Signing in..." : "Sign in"}
+          </PrimaryButton>
+        </div>
+      </form>
     </>
   );
 };
diff --git a/web/components/account/email-signup-form.tsx b/web/components/account/email-signup-form.tsx
new file mode 100644
index 000000000..0a219741f
--- /dev/null
+++ b/web/components/account/email-signup-form.tsx
@@ -0,0 +1,114 @@
+import React from "react";
+import Link from "next/link";
+import { useForm } from "react-hook-form";
+// ui
+import { Input, PrimaryButton } from "components/ui";
+// types
+type EmailPasswordFormValues = {
+  email: string;
+  password?: string;
+  confirm_password: string;
+  medium?: string;
+};
+
+type Props = {
+  onSubmit: (formData: EmailPasswordFormValues) => Promise<void>;
+};
+
+export const EmailSignUpForm: React.FC<Props> = (props) => {
+  const { onSubmit } = props;
+
+  const {
+    register,
+    handleSubmit,
+    watch,
+    formState: { errors, isSubmitting, isValid, isDirty },
+  } = useForm<EmailPasswordFormValues>({
+    defaultValues: {
+      email: "",
+      password: "",
+      confirm_password: "",
+      medium: "email",
+    },
+    mode: "onChange",
+    reValidateMode: "onChange",
+  });
+
+  return (
+    <>
+      <form
+        className="space-y-4 mt-10 w-full sm:w-[360px] mx-auto"
+        onSubmit={handleSubmit(onSubmit)}
+      >
+        <div className="space-y-1">
+          <Input
+            id="email"
+            type="email"
+            name="email"
+            register={register}
+            validations={{
+              required: "Email address is required",
+              validate: (value) =>
+                /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(
+                  value
+                ) || "Email address is not valid",
+            }}
+            error={errors.email}
+            placeholder="Enter your email address..."
+            className="border-custom-border-300 h-[46px]"
+          />
+        </div>
+        <div className="space-y-1">
+          <Input
+            id="password"
+            type="password"
+            name="password"
+            register={register}
+            validations={{
+              required: "Password is required",
+            }}
+            error={errors.password}
+            placeholder="Enter your password..."
+            className="border-custom-border-300 h-[46px]"
+          />
+        </div>
+        <div className="space-y-1">
+          <Input
+            id="confirm_password"
+            type="password"
+            name="confirm_password"
+            register={register}
+            validations={{
+              required: "Password is required",
+              validate: (val: string) => {
+                if (watch("password") != val) {
+                  return "Your passwords do no match";
+                }
+              },
+            }}
+            error={errors.confirm_password}
+            placeholder="Confirm your password..."
+            className="border-custom-border-300 h-[46px]"
+          />
+        </div>
+        <div className="text-right text-xs">
+          <Link href="/">
+            <a className="text-custom-text-200 hover:text-custom-primary-100">
+              Already have an account? Sign in.
+            </a>
+          </Link>
+        </div>
+        <div>
+          <PrimaryButton
+            type="submit"
+            className="w-full text-center h-[46px]"
+            disabled={!isValid && isDirty}
+            loading={isSubmitting}
+          >
+            {isSubmitting ? "Signing up..." : "Sign up"}
+          </PrimaryButton>
+        </div>
+      </form>
+    </>
+  );
+};
diff --git a/web/components/account/github-login-button.tsx b/web/components/account/github-login-button.tsx
index 2f4fcbc4d..9ea5b7df2 100644
--- a/web/components/account/github-login-button.tsx
+++ b/web/components/account/github-login-button.tsx
@@ -1,29 +1,27 @@
 import { useEffect, useState, FC } from "react";
-
 import Link from "next/link";
 import Image from "next/image";
 import { useRouter } from "next/router";
-
-// next-themes
 import { useTheme } from "next-themes";
 // images
 import githubBlackImage from "/public/logos/github-black.png";
 import githubWhiteImage from "/public/logos/github-white.png";
 
-const { NEXT_PUBLIC_GITHUB_ID } = process.env;
-
 export interface GithubLoginButtonProps {
   handleSignIn: React.Dispatch<string>;
+  clientId: string;
 }
 
-export const GithubLoginButton: FC<GithubLoginButtonProps> = ({ handleSignIn }) => {
+export const GithubLoginButton: FC<GithubLoginButtonProps> = (props) => {
+  const { handleSignIn, clientId } = props;
+  // states
   const [loginCallBackURL, setLoginCallBackURL] = useState(undefined);
   const [gitCode, setGitCode] = useState<null | string>(null);
-
+  // router
   const {
     query: { code },
   } = useRouter();
-
+  // theme
   const { theme } = useTheme();
 
   useEffect(() => {
@@ -42,7 +40,7 @@ export const GithubLoginButton: FC<GithubLoginButtonProps> = ({ handleSignIn })
   return (
     <div className="w-full flex justify-center items-center">
       <Link
-        href={`https://github.com/login/oauth/authorize?client_id=${NEXT_PUBLIC_GITHUB_ID}&redirect_uri=${loginCallBackURL}&scope=read:user,user:email`}
+        href={`https://github.com/login/oauth/authorize?client_id=${clientId}&redirect_uri=${loginCallBackURL}&scope=read:user,user:email`}
       >
         <button className="flex w-full items-center justify-center gap-2 rounded border border-custom-border-300 p-2 text-sm font-medium text-custom-text-100 duration-300 hover:bg-custom-background-80 h-[46px]">
           <Image
diff --git a/web/components/account/google-login.tsx b/web/components/account/google-login.tsx
index c814c658c..34e8cc886 100644
--- a/web/components/account/google-login.tsx
+++ b/web/components/account/google-login.tsx
@@ -1,22 +1,23 @@
-import { FC, CSSProperties, useEffect, useRef, useCallback, useState } from "react";
-
+import { FC, useEffect, useRef, useCallback, useState } from "react";
 import Script from "next/script";
 
 export interface IGoogleLoginButton {
-  text?: string;
   handleSignIn: React.Dispatch<any>;
-  styles?: CSSProperties;
+  clientId: string;
 }
 
-export const GoogleLoginButton: FC<IGoogleLoginButton> = ({ handleSignIn }) => {
+export const GoogleLoginButton: FC<IGoogleLoginButton> = (props) => {
+  const { handleSignIn, clientId } = props;
+  // refs
   const googleSignInButton = useRef<HTMLDivElement>(null);
+  // states
   const [gsiScriptLoaded, setGsiScriptLoaded] = useState(false);
 
   const loadScript = useCallback(() => {
     if (!googleSignInButton.current || gsiScriptLoaded) return;
 
     window?.google?.accounts.id.initialize({
-      client_id: process.env.NEXT_PUBLIC_GOOGLE_CLIENTID || "",
+      client_id: clientId,
       callback: handleSignIn,
     });
 
@@ -39,7 +40,7 @@ export const GoogleLoginButton: FC<IGoogleLoginButton> = ({ handleSignIn }) => {
     window?.google?.accounts.id.prompt(); // also display the One Tap dialog
 
     setGsiScriptLoaded(true);
-  }, [handleSignIn, gsiScriptLoaded]);
+  }, [handleSignIn, gsiScriptLoaded, clientId]);
 
   useEffect(() => {
     if (window?.google?.accounts?.id) {
diff --git a/web/components/account/index.ts b/web/components/account/index.ts
index dee3e3251..e3af244b6 100644
--- a/web/components/account/index.ts
+++ b/web/components/account/index.ts
@@ -3,3 +3,4 @@ export * from "./email-password-form";
 export * from "./email-reset-password-form";
 export * from "./github-login-button";
 export * from "./google-login";
+export * from "./email-signup-form";
diff --git a/web/pages/index.tsx b/web/pages/index.tsx
index dec63f9f4..ed98d29f6 100644
--- a/web/pages/index.tsx
+++ b/web/pages/index.tsx
@@ -1,13 +1,14 @@
-import React, { useEffect } from "react";
-
+import React, { useEffect, useState } from "react";
 import Image from "next/image";
-
 import type { NextPage } from "next";
-
+import { useTheme } from "next-themes";
+import useSWR from "swr";
+import { observer } from "mobx-react-lite";
 // layouts
 import DefaultLayout from "layouts/default-layout";
 // services
 import authenticationService from "services/authentication.service";
+import { AppConfigService } from "services/app-config.service";
 // hooks
 import useUserAuth from "hooks/use-user-auth";
 import useToast from "hooks/use-toast";
@@ -17,19 +18,19 @@ import {
   GithubLoginButton,
   EmailCodeForm,
   EmailPasswordForm,
+  EmailResetPasswordForm,
 } from "components/account";
 // ui
 import { Spinner } from "components/ui";
 // images
 import BluePlaneLogoWithoutText from "public/plane-logos/blue-without-text.png";
-// mobx react lite
-import { observer } from "mobx-react-lite";
 // mobx store
 import { useMobxStore } from "lib/mobx/store-provider";
-// next themes
-import { useTheme } from "next-themes";
+// types
 import { IUser } from "types";
 
+const appConfig = new AppConfigService();
+
 // types
 type EmailPasswordFormValues = {
   email: string;
@@ -39,11 +40,16 @@ type EmailPasswordFormValues = {
 
 const HomePage: NextPage = observer(() => {
   const store: any = useMobxStore();
+  // theme
   const { setTheme } = useTheme();
-
+  // user
   const { isLoading, mutateUser } = useUserAuth("sign-in");
-
+  // states
+  const [isResettingPassword, setIsResettingPassword] = useState(false);
+  // toast
   const { setToastAlert } = useToast();
+  // fetch app config
+  const { data } = useSWR("APP_CONFIG", () => appConfig.envConfig());
 
   const handleTheme = (user: IUser) => {
     const currentTheme = user.theme.theme ?? "system";
@@ -173,38 +179,54 @@ const HomePage: NextPage = observer(() => {
           </>
           <div className="grid place-items-center h-full overflow-y-auto py-5 px-7">
             <div>
-              {parseInt(process.env.NEXT_PUBLIC_ENABLE_OAUTH || "0") ? (
+              <h1 className="text-center text-2xl sm:text-2.5xl font-semibold text-custom-text-100">
+                {isResettingPassword ? "Reset your password" : "Sign in to Plane"}
+              </h1>
+              {isResettingPassword ? (
+                <EmailResetPasswordForm setIsResettingPassword={setIsResettingPassword} />
+              ) : (
                 <>
-                  <h1 className="text-center text-2xl sm:text-2.5xl font-semibold text-custom-text-100">
-                    Sign in to Plane
-                  </h1>
-                  <div className="flex flex-col divide-y divide-custom-border-200">
-                    <div className="pb-7">
-                      <EmailCodeForm handleSignIn={handleEmailCodeSignIn} />
-                    </div>
-                    <div className="flex flex-col items-center justify-center gap-4 pt-7 sm:w-[360px] mx-auto overflow-hidden">
-                      <GoogleLoginButton handleSignIn={handleGoogleSignIn} />
-                      <GithubLoginButton handleSignIn={handleGitHubSignIn} />
+                  {data?.email_password_login && (
+                    <EmailPasswordForm
+                      onSubmit={handlePasswordSignIn}
+                      setIsResettingPassword={setIsResettingPassword}
+                    />
+                  )}
+                  {data?.magic_login && (
+                    <div className="flex flex-col divide-y divide-custom-border-200">
+                      <div className="pb-7">
+                        <EmailCodeForm handleSignIn={handleEmailCodeSignIn} />
+                      </div>
                     </div>
+                  )}
+                  <div className="flex flex-col items-center justify-center gap-4 pt-7 sm:w-[360px] mx-auto overflow-hidden">
+                    {data?.google && (
+                      <GoogleLoginButton
+                        clientId={data?.google}
+                        handleSignIn={handleGoogleSignIn}
+                      />
+                    )}
+                    {data?.github && (
+                      <GithubLoginButton
+                        clientId={data?.github}
+                        handleSignIn={handleGitHubSignIn}
+                      />
+                    )}
                   </div>
                 </>
-              ) : (
-                <EmailPasswordForm onSubmit={handlePasswordSignIn} />
               )}
 
-              {parseInt(process.env.NEXT_PUBLIC_ENABLE_OAUTH || "0") ? (
-                <p className="pt-16 text-custom-text-200 text-sm text-center">
-                  By signing up, you agree to the{" "}
-                  <a
-                    href="https://plane.so/terms-and-conditions"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    className="font-medium underline"
-                  >
-                    Terms & Conditions
-                  </a>
-                </p>
-              ) : null}
+              <p className="pt-16 text-custom-text-200 text-sm text-center">
+                By signing up, you agree to the{" "}
+                <a
+                  href="https://plane.so/terms-and-conditions"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="font-medium underline"
+                >
+                  Terms & Conditions
+                </a>
+              </p>
             </div>
           </div>
         </>
diff --git a/web/pages/sign-up.tsx b/web/pages/sign-up.tsx
index 72a391ea4..d2d33032d 100644
--- a/web/pages/sign-up.tsx
+++ b/web/pages/sign-up.tsx
@@ -1,8 +1,6 @@
-import React, { useEffect, useState } from "react";
-
+import React, { useEffect } from "react";
 import Image from "next/image";
 import { useRouter } from "next/router";
-
 // next-themes
 import { useTheme } from "next-themes";
 // services
@@ -13,9 +11,7 @@ import useToast from "hooks/use-toast";
 // layouts
 import DefaultLayout from "layouts/default-layout";
 // components
-import { EmailPasswordForm } from "components/account";
-// ui
-import { Spinner } from "components/ui";
+import { EmailPasswordForm, EmailSignUpForm } from "components/account";
 // images
 import BluePlaneLogoWithoutText from "public/plane-logos/blue-without-text.png";
 // types
@@ -27,8 +23,6 @@ type EmailPasswordFormValues = {
 };
 
 const SignUp: NextPage = () => {
-  const [isLoading, setIsLoading] = useState(true);
-
   const router = useRouter();
 
   const { setToastAlert } = useToast();
@@ -70,18 +64,6 @@ const SignUp: NextPage = () => {
     setTheme("system");
   }, [setTheme]);
 
-  useEffect(() => {
-    if (parseInt(process.env.NEXT_PUBLIC_ENABLE_OAUTH || "0")) router.push("/");
-    else setIsLoading(false);
-  }, [router]);
-
-  if (isLoading)
-    return (
-      <div className="grid place-items-center h-screen w-full">
-        <Spinner />
-      </div>
-    );
-
   return (
     <DefaultLayout>
       <>
@@ -96,7 +78,8 @@ const SignUp: NextPage = () => {
       </>
       <div className="grid place-items-center h-full w-full overflow-y-auto py-5 px-7">
         <div>
-          <EmailPasswordForm onSubmit={handleSignUp} />
+          <h1 className="text-2xl text-center font-">SignUp on Plane</h1>
+          <EmailSignUpForm onSubmit={handleSignUp} />
         </div>
       </div>
     </DefaultLayout>
diff --git a/web/services/app-config.service.ts b/web/services/app-config.service.ts
new file mode 100644
index 000000000..713cda3da
--- /dev/null
+++ b/web/services/app-config.service.ts
@@ -0,0 +1,30 @@
+// services
+import APIService from "services/api.service";
+// helper
+import { API_BASE_URL } from "helpers/common.helper";
+
+export interface IEnvConfig {
+  github: string;
+  google: string;
+  github_app_name: string | null;
+  email_password_login: boolean;
+  magic_login: boolean;
+}
+
+export class AppConfigService extends APIService {
+  constructor() {
+    super(API_BASE_URL);
+  }
+
+  async envConfig(): Promise<IEnvConfig> {
+    return this.get("/api/configs/", {
+      headers: {
+        "Content-Type": "application/json",
+      },
+    })
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+}

From 18bcf55f784038d43b4609fc6c1936322c711058 Mon Sep 17 00:00:00 2001
From: Nikhil <118773738+pablohashescobar@users.noreply.github.com>
Date: Wed, 4 Oct 2023 19:06:38 +0530
Subject: [PATCH 33/38] dev: configuration endpoint for frontend client (#2355)

* dev: configuration endpoint for frontend clients

* dev: configuration enable magic and email/password signup

* dev: update unsplash keys

* dev: add unsplash API and add  env for magic login
---
 apiserver/.env.example                        |  8 ++++
 apiserver/plane/api/urls.py                   | 28 ++++++++----
 apiserver/plane/api/views/__init__.py         |  9 ++--
 apiserver/plane/api/views/config.py           | 40 +++++++++++++++++
 .../plane/api/views/{gpt.py => external.py}   | 45 ++++++++++++++++++-
 apiserver/plane/api/views/release.py          | 21 ---------
 apiserver/plane/settings/local.py             |  3 ++
 apiserver/plane/settings/production.py        |  4 ++
 apiserver/plane/settings/selfhosted.py        |  1 +
 apiserver/plane/settings/staging.py           |  4 ++
 10 files changed, 128 insertions(+), 35 deletions(-)
 create mode 100644 apiserver/plane/api/views/config.py
 rename apiserver/plane/api/views/{gpt.py => external.py} (62%)
 delete mode 100644 apiserver/plane/api/views/release.py

diff --git a/apiserver/.env.example b/apiserver/.env.example
index 8772dfd53..8193b5e77 100644
--- a/apiserver/.env.example
+++ b/apiserver/.env.example
@@ -60,5 +60,13 @@ DEFAULT_PASSWORD="password123"
 # SignUps
 ENABLE_SIGNUP="1"
 
+
+# Enable Email/Password Signup
+ENABLE_EMAIL_PASSWORD="1"
+
+# Enable Magic link Login
+ENABLE_MAGIC_LINK_LOGIN="0"
+
 # Email redirections and minio domain settings
 WEB_URL="http://localhost"
+
diff --git a/apiserver/plane/api/urls.py b/apiserver/plane/api/urls.py
index c10c4a745..7d6b8e83d 100644
--- a/apiserver/plane/api/urls.py
+++ b/apiserver/plane/api/urls.py
@@ -150,12 +150,11 @@ from plane.api.views import (
     GlobalSearchEndpoint,
     IssueSearchEndpoint,
     ## End Search
-    # Gpt
+    # External
     GPTIntegrationEndpoint,
-    ## End Gpt
-    # Release Notes
     ReleaseNotesEndpoint,
-    ## End Release Notes
+    UnsplashEndpoint,
+    ## End External
     # Inbox
     InboxViewSet,
     InboxIssueViewSet,
@@ -186,6 +185,9 @@ from plane.api.views import (
     ## Exporter
     ExportIssuesEndpoint,
     ## End Exporter
+    # Configuration
+    ConfigurationEndpoint,
+    ## End Configuration
 )
 
 
@@ -1446,20 +1448,23 @@ urlpatterns = [
         name="project-issue-search",
     ),
     ## End Search
-    # Gpt
+    # External
     path(
         "workspaces/<str:slug>/projects/<uuid:project_id>/ai-assistant/",
         GPTIntegrationEndpoint.as_view(),
         name="importer",
     ),
-    ## End Gpt
-    # Release Notes
     path(
         "release-notes/",
         ReleaseNotesEndpoint.as_view(),
         name="release-notes",
     ),
-    ## End Release Notes
+    path(
+        "unsplash/",
+        UnsplashEndpoint.as_view(),
+        name="release-notes",
+    ),
+    ## End External
     # Inbox
     path(
         "workspaces/<str:slug>/projects/<uuid:project_id>/inboxes/",
@@ -1728,4 +1733,11 @@ urlpatterns = [
         name="workspace-project-boards",
     ),
     ## End Public Boards
+    # Configuration
+    path(
+        "configs/",
+        ConfigurationEndpoint.as_view(),
+        name="configuration",
+    ),
+    ## End Configuration
 ]
diff --git a/apiserver/plane/api/views/__init__.py b/apiserver/plane/api/views/__init__.py
index c03d6d5b7..35863a7c0 100644
--- a/apiserver/plane/api/views/__init__.py
+++ b/apiserver/plane/api/views/__init__.py
@@ -147,16 +147,13 @@ from .page import (
 from .search import GlobalSearchEndpoint, IssueSearchEndpoint
 
 
-from .gpt import GPTIntegrationEndpoint
+from .external import GPTIntegrationEndpoint, ReleaseNotesEndpoint, UnsplashEndpoint
 
 from .estimate import (
     ProjectEstimatePointEndpoint,
     BulkEstimatePointEndpoint,
 )
 
-
-from .release import ReleaseNotesEndpoint
-
 from .inbox import InboxViewSet, InboxIssueViewSet, InboxIssuePublicViewSet
 
 from .analytic import (
@@ -169,4 +166,6 @@ from .analytic import (
 
 from .notification import NotificationViewSet, UnreadNotificationEndpoint, MarkAllReadNotificationViewSet
 
-from .exporter import ExportIssuesEndpoint
\ No newline at end of file
+from .exporter import ExportIssuesEndpoint
+
+from .config import ConfigurationEndpoint
\ No newline at end of file
diff --git a/apiserver/plane/api/views/config.py b/apiserver/plane/api/views/config.py
new file mode 100644
index 000000000..ea1b39d9c
--- /dev/null
+++ b/apiserver/plane/api/views/config.py
@@ -0,0 +1,40 @@
+# Python imports
+import os
+
+# Django imports
+from django.conf import settings
+
+# Third party imports
+from rest_framework.permissions import AllowAny
+from rest_framework import status
+from rest_framework.response import Response
+from sentry_sdk import capture_exception
+
+# Module imports
+from .base import BaseAPIView
+
+
+class ConfigurationEndpoint(BaseAPIView):
+    permission_classes = [
+        AllowAny,
+    ]
+
+    def get(self, request):
+        try:
+            data = {}
+            data["google"] = os.environ.get("GOOGLE_CLIENT_ID", None)
+            data["github"] = os.environ.get("GITHUB_CLIENT_ID", None)
+            data["github_app_name"] = os.environ.get("GITHUB_APP_NAME", None)
+            data["magic_login"] = (
+                bool(settings.EMAIL_HOST_USER) and bool(settings.EMAIL_HOST_PASSWORD)
+            ) and os.environ.get("ENABLE_MAGIC_LINK_LOGIN", "0") == "1"
+            data["email_password_login"] = (
+                os.environ.get("ENABLE_EMAIL_PASSWORD", "0") == "1"
+            )
+            return Response(data, status=status.HTTP_200_OK)
+        except Exception as e:
+            capture_exception(e)
+            return Response(
+                {"error": "Something went wrong please try again later"},
+                status=status.HTTP_400_BAD_REQUEST,
+            )
diff --git a/apiserver/plane/api/views/gpt.py b/apiserver/plane/api/views/external.py
similarity index 62%
rename from apiserver/plane/api/views/gpt.py
rename to apiserver/plane/api/views/external.py
index 63c3f4f18..00a0270e4 100644
--- a/apiserver/plane/api/views/gpt.py
+++ b/apiserver/plane/api/views/external.py
@@ -2,9 +2,10 @@
 import requests
 
 # Third party imports
+import openai
 from rest_framework.response import Response
 from rest_framework import status
-import openai
+from rest_framework.permissions import AllowAny
 from sentry_sdk import capture_exception
 
 # Django imports
@@ -15,6 +16,7 @@ from .base import BaseAPIView
 from plane.api.permissions import ProjectEntityPermission
 from plane.db.models import Workspace, Project
 from plane.api.serializers import ProjectLiteSerializer, WorkspaceLiteSerializer
+from plane.utils.integrations.github import get_release_notes
 
 
 class GPTIntegrationEndpoint(BaseAPIView):
@@ -73,3 +75,44 @@ class GPTIntegrationEndpoint(BaseAPIView):
                 {"error": "Something went wrong please try again later"},
                 status=status.HTTP_400_BAD_REQUEST,
             )
+
+
+class ReleaseNotesEndpoint(BaseAPIView):
+    def get(self, request):
+        try:
+            release_notes = get_release_notes()
+            return Response(release_notes, status=status.HTTP_200_OK)
+        except Exception as e:
+            capture_exception(e)
+            return Response(
+                {"error": "Something went wrong please try again later"},
+                status=status.HTTP_400_BAD_REQUEST,
+            )
+
+
+class UnsplashEndpoint(BaseAPIView):
+
+    def get(self, request):
+        try:
+            query = request.GET.get("query", False)
+            page = request.GET.get("page", 1)
+            per_page = request.GET.get("per_page", 20)
+
+            url = (
+                f"https://api.unsplash.com/search/photos/?client_id={settings.UNSPLASH_ACCESS_KEY}&query={query}&page=${page}&per_page={per_page}"
+                if query
+                else f"https://api.unsplash.com/photos/?client_id={settings.UNSPLASH_ACCESS_KEY}&page={page}&per_page={per_page}"
+            )
+
+            headers = {
+                "Content-Type": "application/json",
+            }
+
+            resp = requests.get(url=url, headers=headers)
+            return Response(resp.json(), status=status.HTTP_200_OK)
+        except Exception as e:
+            capture_exception(e)
+            return Response(
+                {"error": "Something went wrong please try again later"},
+                status=status.HTTP_400_BAD_REQUEST,
+            )
diff --git a/apiserver/plane/api/views/release.py b/apiserver/plane/api/views/release.py
deleted file mode 100644
index de827c896..000000000
--- a/apiserver/plane/api/views/release.py
+++ /dev/null
@@ -1,21 +0,0 @@
-# Third party imports
-from rest_framework.response import Response
-from rest_framework import status
-from sentry_sdk import capture_exception
-
-# Module imports
-from .base import BaseAPIView
-from plane.utils.integrations.github import get_release_notes
-
-
-class ReleaseNotesEndpoint(BaseAPIView):
-    def get(self, request):
-        try:
-            release_notes = get_release_notes()
-            return Response(release_notes, status=status.HTTP_200_OK)
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
diff --git a/apiserver/plane/settings/local.py b/apiserver/plane/settings/local.py
index 9d293c019..6f4833a6c 100644
--- a/apiserver/plane/settings/local.py
+++ b/apiserver/plane/settings/local.py
@@ -114,3 +114,6 @@ CELERY_BROKER_URL = os.environ.get("REDIS_URL")
 GITHUB_ACCESS_TOKEN = os.environ.get("GITHUB_ACCESS_TOKEN", False)
 
 ENABLE_SIGNUP = os.environ.get("ENABLE_SIGNUP", "1") == "1"
+
+# Unsplash Access key
+UNSPLASH_ACCESS_KEY = os.environ.get("UNSPLASH_ACCESS_KEY")
diff --git a/apiserver/plane/settings/production.py b/apiserver/plane/settings/production.py
index 170a2067c..9c6bd95a9 100644
--- a/apiserver/plane/settings/production.py
+++ b/apiserver/plane/settings/production.py
@@ -275,3 +275,7 @@ ENABLE_SIGNUP = os.environ.get("ENABLE_SIGNUP", "1") == "1"
 SCOUT_MONITOR = os.environ.get("SCOUT_MONITOR", False)
 SCOUT_KEY = os.environ.get("SCOUT_KEY", "")
 SCOUT_NAME = "Plane"
+
+# Unsplash Access key
+UNSPLASH_ACCESS_KEY = os.environ.get("UNSPLASH_ACCESS_KEY")
+
diff --git a/apiserver/plane/settings/selfhosted.py b/apiserver/plane/settings/selfhosted.py
index 948ba22da..ee529a7c3 100644
--- a/apiserver/plane/settings/selfhosted.py
+++ b/apiserver/plane/settings/selfhosted.py
@@ -126,3 +126,4 @@ ANALYTICS_BASE_API = False
 OPENAI_API_BASE = os.environ.get("OPENAI_API_BASE", "https://api.openai.com/v1")
 OPENAI_API_KEY = os.environ.get("OPENAI_API_KEY", False)
 GPT_ENGINE = os.environ.get("GPT_ENGINE", "gpt-3.5-turbo")
+
diff --git a/apiserver/plane/settings/staging.py b/apiserver/plane/settings/staging.py
index 5e274f8f3..f776afd91 100644
--- a/apiserver/plane/settings/staging.py
+++ b/apiserver/plane/settings/staging.py
@@ -218,3 +218,7 @@ CELERY_BROKER_URL = broker_url
 GITHUB_ACCESS_TOKEN = os.environ.get("GITHUB_ACCESS_TOKEN", False)
 
 ENABLE_SIGNUP = os.environ.get("ENABLE_SIGNUP", "1") == "1"
+
+
+# Unsplash Access key
+UNSPLASH_ACCESS_KEY = os.environ.get("UNSPLASH_ACCESS_KEY")

From 9482cc3a7312588c9f5439ccafb975ff99e0ee2b Mon Sep 17 00:00:00 2001
From: Dakshesh Jain <65905942+dakshesh14@users.noreply.github.com>
Date: Wed, 4 Oct 2023 19:21:04 +0530
Subject: [PATCH 34/38] fix: 404 when redirecting user clicks on Sign In button
 (#2349)

* fix: 404 when redirecting user to login page

* fix: next_path redirection not working

* fix: authentication workflow update in plane deploy

---------

Co-authored-by: gurusainath <gurusainath007@gmail.com>
---
 space/components/accounts/sign-in.tsx    | 17 +++++++++--------
 space/components/issues/navbar/index.tsx |  2 +-
 space/components/views/login.tsx         | 12 +++++++++---
 space/lib/mobx/store-init.tsx            |  9 ++++++++-
 space/pages/index.tsx                    | 19 +++++++++++++++++++
 space/pages/login/index.tsx              |  2 +-
 space/store/user.ts                      | 10 ++++++++++
 7 files changed, 57 insertions(+), 14 deletions(-)
 create mode 100644 space/pages/index.tsx

diff --git a/space/components/accounts/sign-in.tsx b/space/components/accounts/sign-in.tsx
index c6a151d44..8f6d1c5f1 100644
--- a/space/components/accounts/sign-in.tsx
+++ b/space/components/accounts/sign-in.tsx
@@ -19,6 +19,7 @@ export const SignInView = observer(() => {
   const { user: userStore } = useMobxStore();
 
   const router = useRouter();
+  const { next_path } = router.query as { next_path: string };
 
   const { setToastAlert } = useToast();
 
@@ -31,17 +32,17 @@ export const SignInView = observer(() => {
   };
 
   const onSignInSuccess = (response: any) => {
-    const isOnboarded = response?.user?.onboarding_step?.profile_complete || false;
-
-    const nextPath = router.asPath.includes("next_path") ? router.asPath.split("/?next_path=")[1] : "/login";
-
     userStore.setCurrentUser(response?.user);
 
-    if (!isOnboarded) {
-      router.push(`/onboarding?next_path=${nextPath}`);
-      return;
+    const isOnboard = response?.user?.onboarding_step?.profile_complete || false;
+
+    if (isOnboard) {
+      if (next_path) router.push(next_path);
+      else router.push("/login");
+    } else {
+      if (next_path) router.push(`/onboarding?next_path=${next_path}`);
+      else router.push("/onboarding");
     }
-    router.push((nextPath ?? "/login").toString());
   };
 
   const handleGoogleSignIn = async ({ clientId, credential }: any) => {
diff --git a/space/components/issues/navbar/index.tsx b/space/components/issues/navbar/index.tsx
index 35ffbe289..03f082f33 100644
--- a/space/components/issues/navbar/index.tsx
+++ b/space/components/issues/navbar/index.tsx
@@ -129,7 +129,7 @@ const IssueNavbar = observer(() => {
         </div>
       ) : (
         <div className="flex-shrink-0">
-          <Link href={`/?next_path=${router.asPath}`}>
+          <Link href={`/login/?next_path=${router.asPath}`}>
             <a>
               <PrimaryButton className="flex-shrink-0" outline>
                 Sign in
diff --git a/space/components/views/login.tsx b/space/components/views/login.tsx
index d01a22681..406d6be98 100644
--- a/space/components/views/login.tsx
+++ b/space/components/views/login.tsx
@@ -7,7 +7,13 @@ import { SignInView, UserLoggedIn } from "components/accounts";
 export const LoginView = observer(() => {
   const { user: userStore } = useMobxStore();
 
-  if (!userStore.currentUser) return <SignInView />;
-
-  return <UserLoggedIn />;
+  return (
+    <>
+      {userStore?.loader ? (
+        <div className="relative w-screen h-screen flex justify-center items-center">Loading</div>
+      ) : (
+        <>{userStore.currentUser ? <UserLoggedIn /> : <SignInView />}</>
+      )}
+    </>
+  );
 });
diff --git a/space/lib/mobx/store-init.tsx b/space/lib/mobx/store-init.tsx
index 6e38d9c6d..4fc761ad1 100644
--- a/space/lib/mobx/store-init.tsx
+++ b/space/lib/mobx/store-init.tsx
@@ -3,12 +3,14 @@
 import { useEffect } from "react";
 // next imports
 import { useRouter } from "next/router";
+// js cookie
+import Cookie from "js-cookie";
 // mobx store
 import { useMobxStore } from "lib/mobx/store-provider";
 import { RootStore } from "store/root";
 
 const MobxStoreInit = () => {
-  const store: RootStore = useMobxStore();
+  const { user: userStore }: RootStore = useMobxStore();
 
   const router = useRouter();
   const { states, labels, priorities } = router.query as { states: string[]; labels: string[]; priorities: string[] };
@@ -19,6 +21,11 @@ const MobxStoreInit = () => {
   //   store.issue.userSelectedStates = states || [];
   // }, [store.issue]);
 
+  useEffect(() => {
+    const authToken = Cookie.get("accessToken") || null;
+    if (authToken) userStore.fetchCurrentUser();
+  }, [userStore]);
+
   return <></>;
 };
 
diff --git a/space/pages/index.tsx b/space/pages/index.tsx
new file mode 100644
index 000000000..1ff239253
--- /dev/null
+++ b/space/pages/index.tsx
@@ -0,0 +1,19 @@
+import { useEffect } from "react";
+
+// next
+import { NextPage } from "next";
+import { useRouter } from "next/router";
+
+const Index: NextPage = () => {
+  const router = useRouter();
+  const { next_path } = router.query as { next_path: string };
+
+  useEffect(() => {
+    if (next_path) router.push(`/login?next_path=${next_path}`);
+    else router.push(`/login`);
+  }, [router, next_path]);
+
+  return null;
+};
+
+export default Index;
diff --git a/space/pages/login/index.tsx b/space/pages/login/index.tsx
index a80eff873..9f20f099f 100644
--- a/space/pages/login/index.tsx
+++ b/space/pages/login/index.tsx
@@ -5,4 +5,4 @@ import { LoginView } from "components/views";
 
 const LoginPage = () => <LoginView />;
 
-export default LoginPage;
\ No newline at end of file
+export default LoginPage;
diff --git a/space/store/user.ts b/space/store/user.ts
index 3a76c2111..cc7334e87 100644
--- a/space/store/user.ts
+++ b/space/store/user.ts
@@ -7,12 +7,17 @@ import { ActorDetail } from "types/issue";
 import { IUser } from "types/user";
 
 export interface IUserStore {
+  loader: boolean;
+  error: any | null;
   currentUser: any | null;
   fetchCurrentUser: () => void;
   currentActor: () => any;
 }
 
 class UserStore implements IUserStore {
+  loader: boolean = false;
+  error: any | null = null;
+
   currentUser: IUser | null = null;
   // root store
   rootStore;
@@ -73,14 +78,19 @@ class UserStore implements IUserStore {
 
   fetchCurrentUser = async () => {
     try {
+      this.loader = true;
+      this.error = null;
       const response = await this.userService.currentUser();
       if (response) {
         runInAction(() => {
+          this.loader = false;
           this.currentUser = response;
         });
       }
     } catch (error) {
       console.error("Failed to fetch current user", error);
+      this.loader = false;
+      this.error = error;
     }
   };
 }

From 4ec281138880f6332fe0b845d8540b0d66a711ce Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Wed, 4 Oct 2023 19:24:13 +0530
Subject: [PATCH 35/38] fix: project setting member role validation (#2369)

* fix: project setting member role validation

* chore: opacity removed from member setting page

* chore: member setting page validation
---
 .../automation/auto-archive-automation.tsx    |  9 ++++++-
 .../automation/auto-close-automation.tsx      |  9 ++++++-
 web/components/project/member-select.tsx      |  4 ++-
 web/components/ui/dropdowns/custom-menu.tsx   |  1 +
 web/components/ui/empty-state.tsx             |  8 +++++-
 web/components/ui/toggle-switch.tsx           |  4 +--
 .../[projectId]/settings/automations.tsx      | 27 +++++++++++++++----
 .../[projectId]/settings/features.tsx         | 14 ++++++++--
 .../[projectId]/settings/integrations.tsx     | 14 ++++++++--
 .../projects/[projectId]/settings/members.tsx | 16 +++++++++--
 10 files changed, 89 insertions(+), 17 deletions(-)

diff --git a/web/components/automation/auto-archive-automation.tsx b/web/components/automation/auto-archive-automation.tsx
index bb4e72e0c..d0c9a1be6 100644
--- a/web/components/automation/auto-archive-automation.tsx
+++ b/web/components/automation/auto-archive-automation.tsx
@@ -13,9 +13,14 @@ import { IProject } from "types";
 type Props = {
   projectDetails: IProject | undefined;
   handleChange: (formData: Partial<IProject>) => Promise<void>;
+  disabled?: boolean;
 };
 
-export const AutoArchiveAutomation: React.FC<Props> = ({ projectDetails, handleChange }) => {
+export const AutoArchiveAutomation: React.FC<Props> = ({
+  projectDetails,
+  handleChange,
+  disabled = false,
+}) => {
   const [monthModal, setmonthModal] = useState(false);
 
   const initialValues: Partial<IProject> = { archive_in: 1 };
@@ -49,6 +54,7 @@ export const AutoArchiveAutomation: React.FC<Props> = ({ projectDetails, handleC
                 : handleChange({ archive_in: 0 })
             }
             size="sm"
+            disabled={disabled}
           />
         </div>
 
@@ -70,6 +76,7 @@ export const AutoArchiveAutomation: React.FC<Props> = ({ projectDetails, handleC
                   input
                   verticalPosition="bottom"
                   width="w-full"
+                  disabled={disabled}
                 >
                   <>
                     {PROJECT_AUTOMATION_MONTHS.map((month) => (
diff --git a/web/components/automation/auto-close-automation.tsx b/web/components/automation/auto-close-automation.tsx
index 868d64557..063501036 100644
--- a/web/components/automation/auto-close-automation.tsx
+++ b/web/components/automation/auto-close-automation.tsx
@@ -24,9 +24,14 @@ import { getStatesList } from "helpers/state.helper";
 type Props = {
   projectDetails: IProject | undefined;
   handleChange: (formData: Partial<IProject>) => Promise<void>;
+  disabled?: boolean;
 };
 
-export const AutoCloseAutomation: React.FC<Props> = ({ projectDetails, handleChange }) => {
+export const AutoCloseAutomation: React.FC<Props> = ({
+  projectDetails,
+  handleChange,
+  disabled = false,
+}) => {
   const [monthModal, setmonthModal] = useState(false);
 
   const router = useRouter();
@@ -98,6 +103,7 @@ export const AutoCloseAutomation: React.FC<Props> = ({ projectDetails, handleCha
                 : handleChange({ close_in: 0, default_state: null })
             }
             size="sm"
+            disabled={disabled}
           />
         </div>
 
@@ -119,6 +125,7 @@ export const AutoCloseAutomation: React.FC<Props> = ({ projectDetails, handleCha
                     }}
                     input
                     width="w-full"
+                    disabled={disabled}
                   >
                     <>
                       {PROJECT_AUTOMATION_MONTHS.map((month) => (
diff --git a/web/components/project/member-select.tsx b/web/components/project/member-select.tsx
index 64baa945d..4fcb04268 100644
--- a/web/components/project/member-select.tsx
+++ b/web/components/project/member-select.tsx
@@ -16,9 +16,10 @@ import { PROJECT_MEMBERS } from "constants/fetch-keys";
 type Props = {
   value: any;
   onChange: (val: string) => void;
+  isDisabled?: boolean;
 };
 
-export const MemberSelect: React.FC<Props> = ({ value, onChange }) => {
+export const MemberSelect: React.FC<Props> = ({ value, onChange, isDisabled = false }) => {
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
 
@@ -79,6 +80,7 @@ export const MemberSelect: React.FC<Props> = ({ value, onChange }) => {
       position="right"
       width="w-full"
       onChange={onChange}
+      disabled={isDisabled}
     />
   );
 };
diff --git a/web/components/ui/dropdowns/custom-menu.tsx b/web/components/ui/dropdowns/custom-menu.tsx
index 41450b2b3..f456804f0 100644
--- a/web/components/ui/dropdowns/custom-menu.tsx
+++ b/web/components/ui/dropdowns/custom-menu.tsx
@@ -46,6 +46,7 @@ const CustomMenu = ({
             type="button"
             onClick={menuButtonOnClick}
             className={customButtonClassName}
+            disabled={disabled}
           >
             {customButton}
           </Menu.Button>
diff --git a/web/components/ui/empty-state.tsx b/web/components/ui/empty-state.tsx
index 098c3f152..e39b10801 100644
--- a/web/components/ui/empty-state.tsx
+++ b/web/components/ui/empty-state.tsx
@@ -16,6 +16,7 @@ type Props = {
   };
   secondaryButton?: React.ReactNode;
   isFullScreen?: boolean;
+  disabled?: boolean;
 };
 
 export const EmptyState: React.FC<Props> = ({
@@ -25,6 +26,7 @@ export const EmptyState: React.FC<Props> = ({
   primaryButton,
   secondaryButton,
   isFullScreen = true,
+  disabled = false,
 }) => (
   <div
     className={`h-full w-full mx-auto grid place-items-center p-8 ${
@@ -37,7 +39,11 @@ export const EmptyState: React.FC<Props> = ({
       {description && <p className="text-custom-text-300 mb-7 sm:mb-8">{description}</p>}
       <div className="flex items-center gap-4">
         {primaryButton && (
-          <PrimaryButton className="flex items-center gap-1.5" onClick={primaryButton.onClick}>
+          <PrimaryButton
+            className="flex items-center gap-1.5"
+            onClick={primaryButton.onClick}
+            disabled={disabled}
+          >
             {primaryButton.icon}
             {primaryButton.text}
           </PrimaryButton>
diff --git a/web/components/ui/toggle-switch.tsx b/web/components/ui/toggle-switch.tsx
index d6c512ad7..5ad9377de 100644
--- a/web/components/ui/toggle-switch.tsx
+++ b/web/components/ui/toggle-switch.tsx
@@ -21,7 +21,7 @@ export const ToggleSwitch: React.FC<Props> = (props) => {
         size === "sm" ? "h-4 w-6" : size === "md" ? "h-5 w-8" : "h-6 w-10"
       } flex-shrink-0 cursor-pointer rounded-full border border-custom-border-200 transition-colors duration-200 ease-in-out focus:outline-none ${
         value ? "bg-custom-primary-100" : "bg-gray-700"
-      } ${className || ""}`}
+      } ${className || ""} ${disabled ? "cursor-not-allowed" : ""}`}
     >
       <span className="sr-only">{label}</span>
       <span
@@ -36,7 +36,7 @@ export const ToggleSwitch: React.FC<Props> = (props) => {
                 ? "translate-x-4"
                 : "translate-x-5") + " bg-white"
             : "translate-x-0.5 bg-custom-background-90"
-        }`}
+        } ${disabled ? "cursor-not-allowed" : ""}`}
       />
     </Switch>
   );
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/settings/automations.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/settings/automations.tsx
index 5dcea0838..1f74a74c3 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/settings/automations.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/settings/automations.tsx
@@ -2,7 +2,7 @@ import React from "react";
 
 import { useRouter } from "next/router";
 
-import { mutate } from "swr";
+import useSWR, { mutate } from "swr";
 
 // services
 import projectService from "services/project.service";
@@ -21,7 +21,7 @@ import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 import type { NextPage } from "next";
 import { IProject } from "types";
 // constant
-import { PROJECTS_LIST, PROJECT_DETAILS } from "constants/fetch-keys";
+import { PROJECTS_LIST, PROJECT_DETAILS, USER_PROJECT_VIEW } from "constants/fetch-keys";
 // helper
 import { truncateText } from "helpers/string.helper";
 
@@ -34,6 +34,13 @@ const AutomationsSettings: NextPage = () => {
 
   const { projectDetails } = useProjectDetails();
 
+  const { data: memberDetails } = useSWR(
+    workspaceSlug && projectId ? USER_PROJECT_VIEW(projectId.toString()) : null,
+    workspaceSlug && projectId
+      ? () => projectService.projectMemberMe(workspaceSlug.toString(), projectId.toString())
+      : null
+  );
+
   const handleChange = async (formData: Partial<IProject>) => {
     if (!workspaceSlug || !projectId || !projectDetails) return;
 
@@ -62,6 +69,8 @@ const AutomationsSettings: NextPage = () => {
       });
   };
 
+  const isAdmin = memberDetails?.role === 20;
+
   return (
     <ProjectAuthorizationWrapper
       breadcrumbs={
@@ -79,12 +88,20 @@ const AutomationsSettings: NextPage = () => {
         <div className="w-80 pt-8 overflow-y-hidden flex-shrink-0">
           <SettingsSidebar />
         </div>
-        <section className="pr-9 py-8 w-full overflow-y-auto">
+        <section className={`pr-9 py-8 w-full overflow-y-auto ${isAdmin ? "" : "opacity-60"}`}>
           <div className="flex items-center py-3.5 border-b border-custom-border-200">
             <h3 className="text-xl font-medium">Automations</h3>
           </div>
-          <AutoArchiveAutomation projectDetails={projectDetails} handleChange={handleChange} />
-          <AutoCloseAutomation projectDetails={projectDetails} handleChange={handleChange} />
+          <AutoArchiveAutomation
+            projectDetails={projectDetails}
+            handleChange={handleChange}
+            disabled={!isAdmin}
+          />
+          <AutoCloseAutomation
+            projectDetails={projectDetails}
+            handleChange={handleChange}
+            disabled={!isAdmin}
+          />
         </section>
       </div>
     </ProjectAuthorizationWrapper>
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/settings/features.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/settings/features.tsx
index 499aaea86..ba74cf2a5 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/settings/features.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/settings/features.tsx
@@ -25,7 +25,7 @@ import { ContrastOutlined } from "@mui/icons-material";
 import { IProject } from "types";
 import type { NextPage } from "next";
 // fetch-keys
-import { PROJECTS_LIST, PROJECT_DETAILS } from "constants/fetch-keys";
+import { PROJECTS_LIST, PROJECT_DETAILS, USER_PROJECT_VIEW } from "constants/fetch-keys";
 // helper
 import { truncateText } from "helpers/string.helper";
 
@@ -102,6 +102,13 @@ const FeaturesSettings: NextPage = () => {
       : null
   );
 
+  const { data: memberDetails } = useSWR(
+    workspaceSlug && projectId ? USER_PROJECT_VIEW(projectId.toString()) : null,
+    workspaceSlug && projectId
+      ? () => projectService.projectMemberMe(workspaceSlug.toString(), projectId.toString())
+      : null
+  );
+
   const handleSubmit = async (formData: Partial<IProject>) => {
     if (!workspaceSlug || !projectId || !projectDetails) return;
 
@@ -140,6 +147,8 @@ const FeaturesSettings: NextPage = () => {
       );
   };
 
+  const isAdmin = memberDetails?.role === 20;
+
   return (
     <ProjectAuthorizationWrapper
       breadcrumbs={
@@ -157,7 +166,7 @@ const FeaturesSettings: NextPage = () => {
         <div className="w-80 pt-8 overflow-y-hidden flex-shrink-0">
           <SettingsSidebar />
         </div>
-        <section className="pr-9 py-8 w-full overflow-y-auto">
+        <section className={`pr-9 py-8 w-full overflow-y-auto ${isAdmin ? "" : "opacity-60"}`}>
           <div className="flex items-center py-3.5 border-b border-custom-border-200">
             <h3 className="text-xl font-medium">Features</h3>
           </div>
@@ -199,6 +208,7 @@ const FeaturesSettings: NextPage = () => {
                       [feature.property]: !projectDetails?.[feature.property as keyof IProject],
                     });
                   }}
+                  disabled={!isAdmin}
                   size="sm"
                 />
               </div>
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/settings/integrations.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/settings/integrations.tsx
index ca64b8e22..181c9f8ec 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/settings/integrations.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/settings/integrations.tsx
@@ -22,7 +22,7 @@ import emptyIntegration from "public/empty-state/integration.svg";
 import { IProject } from "types";
 import type { NextPage } from "next";
 // fetch-keys
-import { PROJECT_DETAILS, WORKSPACE_INTEGRATIONS } from "constants/fetch-keys";
+import { PROJECT_DETAILS, USER_PROJECT_VIEW, WORKSPACE_INTEGRATIONS } from "constants/fetch-keys";
 // helper
 import { truncateText } from "helpers/string.helper";
 
@@ -45,6 +45,15 @@ const ProjectIntegrations: NextPage = () => {
         : null
   );
 
+  const { data: memberDetails } = useSWR(
+    workspaceSlug && projectId ? USER_PROJECT_VIEW(projectId.toString()) : null,
+    workspaceSlug && projectId
+      ? () => projectService.projectMemberMe(workspaceSlug.toString(), projectId.toString())
+      : null
+  );
+
+  const isAdmin = memberDetails?.role === 20;
+
   return (
     <ProjectAuthorizationWrapper
       breadcrumbs={
@@ -62,7 +71,7 @@ const ProjectIntegrations: NextPage = () => {
         <div className="w-80 pt-8 overflow-y-hidden flex-shrink-0">
           <SettingsSidebar />
         </div>
-        <div className="pr-9 py-8 gap-10 w-full overflow-y-auto">
+        <div className={`pr-9 py-8 gap-10 w-full overflow-y-auto ${isAdmin ? "" : "opacity-60"}`}>
           <div className="flex items-center py-3.5 border-b border-custom-border-200">
             <h3 className="text-xl font-medium">Integrations</h3>
           </div>
@@ -85,6 +94,7 @@ const ProjectIntegrations: NextPage = () => {
                   text: "Configure now",
                   onClick: () => router.push(`/${workspaceSlug}/settings/integrations`),
                 }}
+                disabled={!isAdmin}
               />
             )
           ) : (
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/settings/members.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/settings/members.tsx
index 59e218ee4..51143d868 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/settings/members.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/settings/members.tsx
@@ -43,6 +43,7 @@ import {
   PROJECT_INVITATIONS_WITH_EMAIL,
   PROJECT_MEMBERS,
   PROJECT_MEMBERS_WITH_EMAIL,
+  USER_PROJECT_VIEW,
   WORKSPACE_DETAILS,
 } from "constants/fetch-keys";
 // constants
@@ -111,6 +112,13 @@ const MembersSettings: NextPage = () => {
       : null
   );
 
+  const { data: memberDetails } = useSWR(
+    workspaceSlug && projectId ? USER_PROJECT_VIEW(projectId.toString()) : null,
+    workspaceSlug && projectId
+      ? () => projectService.projectMemberMe(workspaceSlug.toString(), projectId.toString())
+      : null
+  );
+
   const members = [
     ...(projectMembers?.map((item) => ({
       id: item.id,
@@ -212,6 +220,8 @@ const MembersSettings: NextPage = () => {
       });
   };
 
+  const isAdmin = memberDetails?.role === 20;
+
   return (
     <ProjectAuthorizationWrapper
       breadcrumbs={
@@ -277,7 +287,7 @@ const MembersSettings: NextPage = () => {
         <div className="w-80 pt-8 overflow-y-hidden flex-shrink-0">
           <SettingsSidebar />
         </div>
-        <section className="pr-9 py-8 w-full overflow-y-auto">
+        <section className={`pr-9 py-8 w-full overflow-y-auto`}>
           <div className="flex items-center py-3.5 border-b border-custom-border-200">
             <h3 className="text-xl font-medium">Defaults</h3>
           </div>
@@ -296,6 +306,7 @@ const MembersSettings: NextPage = () => {
                           onChange={(val: string) => {
                             submitChanges({ project_lead: val });
                           }}
+                          isDisabled={!isAdmin}
                         />
                       )}
                     />
@@ -320,6 +331,7 @@ const MembersSettings: NextPage = () => {
                           onChange={(val: string) => {
                             submitChanges({ default_assignee: val });
                           }}
+                          isDisabled={!isAdmin}
                         />
                       )}
                     />
@@ -467,7 +479,7 @@ const MembersSettings: NextPage = () => {
                             );
                           })}
                         </CustomSelect>
-                        <CustomMenu ellipsis>
+                        <CustomMenu ellipsis disabled={!isAdmin}>
                           <CustomMenu.MenuItem
                             onClick={() => {
                               if (member.member) setSelectedRemoveMember(member.id);

From 64af5e2e758289c4daf979ee0c43de4d096db164 Mon Sep 17 00:00:00 2001
From: Nikhil <118773738+pablohashescobar@users.noreply.github.com>
Date: Wed, 4 Oct 2023 19:53:58 +0530
Subject: [PATCH 36/38] chore: project covers endpoint (#2370)

* chore: project covers endpoint

* dev: remove print logs

* dev: formatting

---------

Co-authored-by: sriramveeraghanta <veeraghanta.sriram@gmail.com>
---
 apiserver/plane/api/urls.py           |  6 +++++
 apiserver/plane/api/views/__init__.py |  1 +
 apiserver/plane/api/views/project.py  | 39 ++++++++++++++++++++++++++-
 3 files changed, 45 insertions(+), 1 deletion(-)

diff --git a/apiserver/plane/api/urls.py b/apiserver/plane/api/urls.py
index 7d6b8e83d..2213c0d9d 100644
--- a/apiserver/plane/api/urls.py
+++ b/apiserver/plane/api/urls.py
@@ -70,6 +70,7 @@ from plane.api.views import (
     ProjectIdentifierEndpoint,
     ProjectFavoritesViewSet,
     LeaveProjectEndpoint,
+    ProjectPublicCoverImagesEndpoint,
     ## End Projects
     # Issues
     IssueViewSet,
@@ -575,6 +576,11 @@ urlpatterns = [
         LeaveProjectEndpoint.as_view(),
         name="project",
     ),
+    path(
+        "project-covers/",
+        ProjectPublicCoverImagesEndpoint.as_view(),
+        name="project-covers",
+    ),
     # End Projects
     #  States
     path(
diff --git a/apiserver/plane/api/views/__init__.py b/apiserver/plane/api/views/__init__.py
index 35863a7c0..f7ad735c1 100644
--- a/apiserver/plane/api/views/__init__.py
+++ b/apiserver/plane/api/views/__init__.py
@@ -17,6 +17,7 @@ from .project import (
     ProjectMemberEndpoint,
     WorkspaceProjectDeployBoardEndpoint,
     LeaveProjectEndpoint,
+    ProjectPublicCoverImagesEndpoint,
 )
 from .user import (
     UserEndpoint,
diff --git a/apiserver/plane/api/views/project.py b/apiserver/plane/api/views/project.py
index 7847e3a80..1ba227177 100644
--- a/apiserver/plane/api/views/project.py
+++ b/apiserver/plane/api/views/project.py
@@ -1,5 +1,6 @@
 # Python imports
 import jwt
+import boto3
 from datetime import datetime
 
 # Django imports
@@ -617,7 +618,8 @@ class ProjectMemberViewSet(BaseViewSet):
             return Response(status=status.HTTP_204_NO_CONTENT)
         except ProjectMember.DoesNotExist:
             return Response(
-                {"error": "Project Member does not exist"}, status=status.HTTP_400_BAD_REQUEST
+                {"error": "Project Member does not exist"},
+                status=status.HTTP_400_BAD_REQUEST,
             )
         except Exception as e:
             capture_exception(e)
@@ -1209,3 +1211,38 @@ class LeaveProjectEndpoint(BaseAPIView):
                 {"error": "Something went wrong please try again later"},
                 status=status.HTTP_400_BAD_REQUEST,
             )
+
+
+class ProjectPublicCoverImagesEndpoint(BaseAPIView):
+    permission_classes = [
+        AllowAny,
+    ]
+
+    def get(self, request):
+        try:
+            files = []
+            s3 = boto3.client(
+                "s3",
+                aws_access_key_id=settings.AWS_ACCESS_KEY_ID,
+                aws_secret_access_key=settings.AWS_SECRET_ACCESS_KEY,
+            )
+            params = {
+                "Bucket": settings.AWS_S3_BUCKET_NAME,
+                "Prefix": "static/project-cover/",
+            }
+
+            response = s3.list_objects_v2(**params)
+            # Extracting file keys from the response
+            if "Contents" in response:
+                for content in response["Contents"]:
+                    if not content["Key"].endswith(
+                        "/"
+                    ):  # This line ensures we're only getting files, not "sub-folders"
+                        files.append(
+                            f"https://{settings.AWS_S3_BUCKET_NAME}.s3.{settings.AWS_REGION}.amazonaws.com/{content['Key']}"
+                        )
+
+            return Response(files, status=status.HTTP_200_OK)
+        except Exception as e:
+            capture_exception(e)
+            return Response([], status=status.HTTP_200_OK)

From 77c1b90e6bdc53268ea7305edc106dea2e8b1bd5 Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com>
Date: Wed, 4 Oct 2023 20:04:35 +0530
Subject: [PATCH 37/38] feat: default project cover images tab on the change
 cover popover (#2375)

* feat: default project cover images tab

* chore: remove unnecessary env vars from turbo.json
---
 space/services/file.service.ts                |  18 --
 turbo.json                                    |   2 -
 web/components/core/image-picker-popover.tsx  | 202 ++++++++++++------
 .../project/create-project-modal.tsx          |   2 +-
 web/next.config.js                            |   1 +
 web/services/file.service.ts                  |  24 ++-
 6 files changed, 148 insertions(+), 101 deletions(-)

diff --git a/space/services/file.service.ts b/space/services/file.service.ts
index d9783d29c..6df6423f4 100644
--- a/space/services/file.service.ts
+++ b/space/services/file.service.ts
@@ -74,24 +74,6 @@ class FileServices extends APIService {
         throw error?.response?.data;
       });
   }
-
-  async getUnsplashImages(page: number = 1, query?: string): Promise<UnSplashImage[]> {
-    const url = "/api/unsplash";
-
-    return this.request({
-      method: "get",
-      url,
-      params: {
-        page,
-        per_page: 20,
-        query,
-      },
-    })
-      .then((response) => response?.data?.results ?? response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
 }
 
 const fileServices = new FileServices();
diff --git a/turbo.json b/turbo.json
index 59bbe741f..b3c5e4d9f 100644
--- a/turbo.json
+++ b/turbo.json
@@ -12,8 +12,6 @@
     "NEXT_PUBLIC_GITHUB_APP_NAME",
     "NEXT_PUBLIC_ENABLE_SENTRY",
     "NEXT_PUBLIC_ENABLE_OAUTH",
-    "NEXT_PUBLIC_UNSPLASH_ACCESS",
-    "NEXT_PUBLIC_UNSPLASH_ENABLED",
     "NEXT_PUBLIC_TRACK_EVENTS",
     "NEXT_PUBLIC_PLAUSIBLE_DOMAIN",
     "NEXT_PUBLIC_CRISP_ID",
diff --git a/web/components/core/image-picker-popover.tsx b/web/components/core/image-picker-popover.tsx
index 957f1131c..cfe18cd97 100644
--- a/web/components/core/image-picker-popover.tsx
+++ b/web/components/core/image-picker-popover.tsx
@@ -1,32 +1,23 @@
 import React, { useEffect, useState, useRef, useCallback } from "react";
-
-// next
 import Image from "next/image";
 import { useRouter } from "next/router";
-
-// swr
 import useSWR from "swr";
-
-// react-dropdown
 import { useDropzone } from "react-dropzone";
-
-// headless ui
 import { Tab, Transition, Popover } from "@headlessui/react";
 
 // services
 import fileService from "services/file.service";
-
-// components
-import { Input, Spinner, PrimaryButton, SecondaryButton } from "components/ui";
 // hooks
 import useWorkspaceDetails from "hooks/use-workspace-details";
 import useOutsideClickDetector from "hooks/use-outside-click-detector";
-
-const unsplashEnabled =
-  process.env.NEXT_PUBLIC_UNSPLASH_ENABLED === "true" ||
-  process.env.NEXT_PUBLIC_UNSPLASH_ENABLED === "1";
+// components
+import { Input, PrimaryButton, SecondaryButton, Loader } from "components/ui";
 
 const tabOptions = [
+  {
+    key: "unsplash",
+    title: "Unsplash",
+  },
   {
     key: "images",
     title: "Images",
@@ -64,8 +55,22 @@ export const ImagePickerPopover: React.FC<Props> = ({
     search: "",
   });
 
-  const { data: images } = useSWR(`UNSPLASH_IMAGES_${searchParams}`, () =>
-    fileService.getUnsplashImages(1, searchParams)
+  const { data: unsplashImages, error: unsplashError } = useSWR(
+    `UNSPLASH_IMAGES_${searchParams}`,
+    () => fileService.getUnsplashImages(searchParams),
+    {
+      revalidateOnFocus: false,
+      revalidateOnReconnect: false,
+    }
+  );
+
+  const { data: projectCoverImages } = useSWR(
+    `PROJECT_COVER_IMAGES`,
+    () => fileService.getProjectCoverImages(),
+    {
+      revalidateOnFocus: false,
+      revalidateOnReconnect: false,
+    }
   );
 
   const imagePickerRef = useRef<HTMLDivElement>(null);
@@ -115,18 +120,17 @@ export const ImagePickerPopover: React.FC<Props> = ({
   };
 
   useEffect(() => {
-    if (!images || value !== null) return;
-    onChange(images[0].urls.regular);
-  }, [value, onChange, images]);
+    if (!unsplashImages || value !== null) return;
+
+    onChange(unsplashImages[0].urls.regular);
+  }, [value, onChange, unsplashImages]);
 
   useOutsideClickDetector(imagePickerRef, () => setIsOpen(false));
 
-  if (!unsplashEnabled) return null;
-
   return (
     <Popover className="relative z-[2]" ref={ref}>
       <Popover.Button
-        className="rounded-sm border border-custom-border-300 bg-custom-background-100 px-2 py-1 text-xs text-custom-text-200 hover:text-custom-text-100"
+        className="rounded border border-custom-border-300 bg-custom-background-100 px-2 py-1 text-xs text-custom-text-200 hover:text-custom-text-100"
         onClick={() => setIsOpen((prev) => !prev)}
         disabled={disabled}
       >
@@ -141,15 +145,19 @@ export const ImagePickerPopover: React.FC<Props> = ({
         leaveFrom="transform opacity-100 scale-100"
         leaveTo="transform opacity-0 scale-95"
       >
-        <Popover.Panel className="absolute right-0 z-10 mt-2 rounded-md border border-custom-border-200 bg-custom-background-80 shadow-lg">
+        <Popover.Panel className="absolute right-0 z-10 mt-2 rounded-md border border-custom-border-200 bg-custom-background-100 shadow-custom-shadow-sm">
           <div
             ref={imagePickerRef}
             className="h-96 md:h-[28rem] w-80 md:w-[36rem] flex flex-col overflow-auto rounded border border-custom-border-300 bg-custom-background-100 p-3 shadow-2xl"
           >
             <Tab.Group>
-              <div>
-                <Tab.List as="span" className="inline-block rounded bg-custom-background-80 p-1">
-                  {tabOptions.map((tab) => (
+              <Tab.List as="span" className="inline-block rounded bg-custom-background-80 p-1">
+                {tabOptions.map((tab) => {
+                  if (!unsplashImages && unsplashError && tab.key === "unsplash") return null;
+                  if (projectCoverImages && projectCoverImages.length === 0 && tab.key === "images")
+                    return null;
+
+                  return (
                     <Tab
                       key={tab.key}
                       className={({ selected }) =>
@@ -160,50 +168,106 @@ export const ImagePickerPopover: React.FC<Props> = ({
                     >
                       {tab.title}
                     </Tab>
-                  ))}
-                </Tab.List>
-              </div>
+                  );
+                })}
+              </Tab.List>
               <Tab.Panels className="h-full w-full flex-1 overflow-y-auto overflow-x-hidden">
-                <Tab.Panel className="h-full w-full space-y-4">
-                  <div className="flex gap-x-2 pt-7">
-                    <Input
-                      name="search"
-                      className="text-sm"
-                      id="search"
-                      value={formData.search}
-                      onChange={(e) => setFormData({ ...formData, search: e.target.value })}
-                      placeholder="Search for images"
-                    />
-                    <PrimaryButton onClick={() => setSearchParams(formData.search)} size="sm">
-                      Search
-                    </PrimaryButton>
-                  </div>
-                  {images ? (
-                    <div className="grid grid-cols-4 gap-4">
-                      {images.map((image) => (
-                        <div
-                          key={image.id}
-                          className="relative col-span-2 aspect-video md:col-span-1"
-                        >
-                          <img
-                            src={image.urls.small}
-                            alt={image.alt_description}
-                            className="cursor-pointer rounded absolute top-0 left-0 h-full w-full object-cover"
-                            onClick={() => {
-                              setIsOpen(false);
-                              onChange(image.urls.regular);
-                            }}
-                          />
+                {(unsplashImages || !unsplashError) && (
+                  <Tab.Panel className="h-full w-full space-y-4 mt-4">
+                    <div className="flex gap-x-2">
+                      <Input
+                        name="search"
+                        className="text-sm"
+                        id="search"
+                        value={formData.search}
+                        onChange={(e) => setFormData({ ...formData, search: e.target.value })}
+                        placeholder="Search for images"
+                      />
+                      <PrimaryButton onClick={() => setSearchParams(formData.search)} size="sm">
+                        Search
+                      </PrimaryButton>
+                    </div>
+                    {unsplashImages ? (
+                      unsplashImages.length > 0 ? (
+                        <div className="grid grid-cols-4 gap-4">
+                          {unsplashImages.map((image) => (
+                            <div
+                              key={image.id}
+                              className="relative col-span-2 aspect-video md:col-span-1"
+                              onClick={() => {
+                                setIsOpen(false);
+                                onChange(image.urls.regular);
+                              }}
+                            >
+                              <img
+                                src={image.urls.small}
+                                alt={image.alt_description}
+                                className="cursor-pointer rounded absolute top-0 left-0 h-full w-full object-cover"
+                              />
+                            </div>
+                          ))}
                         </div>
-                      ))}
-                    </div>
-                  ) : (
-                    <div className="flex justify-center pt-20">
-                      <Spinner />
-                    </div>
-                  )}
-                </Tab.Panel>
-                <Tab.Panel className="h-full w-full pt-5">
+                      ) : (
+                        <p className="text-center text-custom-text-300 text-xs pt-7">
+                          No images found.
+                        </p>
+                      )
+                    ) : (
+                      <Loader className="grid grid-cols-4 gap-4">
+                        <Loader.Item height="80px" width="100%" />
+                        <Loader.Item height="80px" width="100%" />
+                        <Loader.Item height="80px" width="100%" />
+                        <Loader.Item height="80px" width="100%" />
+                        <Loader.Item height="80px" width="100%" />
+                        <Loader.Item height="80px" width="100%" />
+                        <Loader.Item height="80px" width="100%" />
+                        <Loader.Item height="80px" width="100%" />
+                      </Loader>
+                    )}
+                  </Tab.Panel>
+                )}
+                {(!projectCoverImages || projectCoverImages.length !== 0) && (
+                  <Tab.Panel className="h-full w-full space-y-4 mt-4">
+                    {projectCoverImages ? (
+                      projectCoverImages.length > 0 ? (
+                        <div className="grid grid-cols-4 gap-4">
+                          {projectCoverImages.map((image, index) => (
+                            <div
+                              key={image}
+                              className="relative col-span-2 aspect-video md:col-span-1"
+                              onClick={() => {
+                                setIsOpen(false);
+                                onChange(image);
+                              }}
+                            >
+                              <img
+                                src={image}
+                                alt={`Default project cover image- ${index}`}
+                                className="cursor-pointer rounded absolute top-0 left-0 h-full w-full object-cover"
+                              />
+                            </div>
+                          ))}
+                        </div>
+                      ) : (
+                        <p className="text-center text-custom-text-300 text-xs pt-7">
+                          No images found.
+                        </p>
+                      )
+                    ) : (
+                      <Loader className="grid grid-cols-4 gap-4 pt-4">
+                        <Loader.Item height="80px" width="100%" />
+                        <Loader.Item height="80px" width="100%" />
+                        <Loader.Item height="80px" width="100%" />
+                        <Loader.Item height="80px" width="100%" />
+                        <Loader.Item height="80px" width="100%" />
+                        <Loader.Item height="80px" width="100%" />
+                        <Loader.Item height="80px" width="100%" />
+                        <Loader.Item height="80px" width="100%" />
+                      </Loader>
+                    )}
+                  </Tab.Panel>
+                )}
+                <Tab.Panel className="h-full w-full mt-4">
                   <div className="w-full h-full flex flex-col gap-y-2">
                     <div className="flex items-center gap-3 w-full flex-1">
                       <div
diff --git a/web/components/project/create-project-modal.tsx b/web/components/project/create-project-modal.tsx
index b6a2be8bb..5593d8c7c 100644
--- a/web/components/project/create-project-modal.tsx
+++ b/web/components/project/create-project-modal.tsx
@@ -393,7 +393,7 @@ export const CreateProjectModal: React.FC<Props> = ({
                                 value={value}
                                 onChange={onChange}
                                 options={options}
-                                buttonClassName="!px-2 shadow-md"
+                                buttonClassName="border-[0.5px] !px-2 shadow-md"
                                 label={
                                   <div className="flex items-center justify-center gap-2 py-[1px]">
                                     {value ? (
diff --git a/web/next.config.js b/web/next.config.js
index 1d466aaf5..058a68b7d 100644
--- a/web/next.config.js
+++ b/web/next.config.js
@@ -15,6 +15,7 @@ const nextConfig = {
       "vinci-web.s3.amazonaws.com",
       "planefs-staging.s3.ap-south-1.amazonaws.com",
       "planefs.s3.amazonaws.com",
+      "planefs-staging.s3.amazonaws.com",
       "images.unsplash.com",
       "avatars.githubusercontent.com",
       "localhost",
diff --git a/web/services/file.service.ts b/web/services/file.service.ts
index cbed73fc8..15cdc1786 100644
--- a/web/services/file.service.ts
+++ b/web/services/file.service.ts
@@ -76,21 +76,23 @@ class FileServices extends APIService {
       });
   }
 
-  async getUnsplashImages(page: number = 1, query?: string): Promise<UnSplashImage[]> {
-    const url = "/api/unsplash";
-
-    return this.request({
-      method: "get",
-      url,
+  async getUnsplashImages(query?: string): Promise<UnSplashImage[]> {
+    return this.get(`/api/unsplash/`, {
       params: {
-        page,
-        per_page: 20,
         query,
       },
     })
-      .then((response) => response?.data?.results ?? response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
+      .then((res) => res?.data?.results ?? res?.data)
+      .catch((err) => {
+        throw err?.response?.data;
+      });
+  }
+
+  async getProjectCoverImages(): Promise<string[]> {
+    return this.get(`/api/project-covers/`)
+      .then((res) => res?.data)
+      .catch((err) => {
+        throw err?.response?.data;
       });
   }
 }

From 1c43d313d1fc2a497a85f527f0b1686a6246fc8d Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com>
Date: Wed, 4 Oct 2023 20:43:05 +0530
Subject: [PATCH 38/38] chore: remove unnecessary OAuth envs (#2378)

* chore: remove unnecessary oauth envs

* merge conflicts resolved

* fix: adding new service

---------

Co-authored-by: sriramveeraghanta <veeraghanta.sriram@gmail.com>
---
 .../accounts/github-login-button.tsx          |  7 +-
 space/components/accounts/google-login.tsx    | 13 +--
 space/components/accounts/sign-in.tsx         | 87 +++++++------------
 space/services/app-config.service.ts          | 30 +++++++
 turbo.json                                    |  2 -
 web/pages/index.tsx                           |  4 +-
 6 files changed, 77 insertions(+), 66 deletions(-)
 create mode 100644 space/services/app-config.service.ts

diff --git a/space/components/accounts/github-login-button.tsx b/space/components/accounts/github-login-button.tsx
index e9b30ab73..b1bd586fe 100644
--- a/space/components/accounts/github-login-button.tsx
+++ b/space/components/accounts/github-login-button.tsx
@@ -10,9 +10,12 @@ import githubWhiteImage from "public/logos/github-white.svg";
 
 export interface GithubLoginButtonProps {
   handleSignIn: React.Dispatch<string>;
+  clientId: string;
 }
 
-export const GithubLoginButton: FC<GithubLoginButtonProps> = ({ handleSignIn }) => {
+export const GithubLoginButton: FC<GithubLoginButtonProps> = (props) => {
+  const { handleSignIn, clientId } = props;
+  // states
   const [loginCallBackURL, setLoginCallBackURL] = useState(undefined);
   const [gitCode, setGitCode] = useState<null | string>(null);
 
@@ -38,7 +41,7 @@ export const GithubLoginButton: FC<GithubLoginButtonProps> = ({ handleSignIn })
     <div className="w-full flex justify-center items-center">
       <Link
         className="w-full"
-        href={`https://github.com/login/oauth/authorize?client_id=${process.env.NEXT_PUBLIC_GITHUB_ID}&redirect_uri=${loginCallBackURL}&scope=read:user,user:email`}
+        href={`https://github.com/login/oauth/authorize?client_id=${clientId}&redirect_uri=${loginCallBackURL}&scope=read:user,user:email`}
       >
         <button className="flex w-full items-center justify-center gap-2 rounded border border-custom-border-300 p-2 text-sm font-medium text-custom-text-100 duration-300 hover:bg-custom-background-80 h-[46px]">
           <Image
diff --git a/space/components/accounts/google-login.tsx b/space/components/accounts/google-login.tsx
index 82916d7b5..4732ec8fd 100644
--- a/space/components/accounts/google-login.tsx
+++ b/space/components/accounts/google-login.tsx
@@ -1,22 +1,23 @@
-import { FC, CSSProperties, useEffect, useRef, useCallback, useState } from "react";
-
+import { FC, useEffect, useRef, useCallback, useState } from "react";
 import Script from "next/script";
 
 export interface IGoogleLoginButton {
-  text?: string;
+  clientId: string;
   handleSignIn: React.Dispatch<any>;
-  styles?: CSSProperties;
 }
 
-export const GoogleLoginButton: FC<IGoogleLoginButton> = ({ handleSignIn }) => {
+export const GoogleLoginButton: FC<IGoogleLoginButton> = (props) => {
+  const { handleSignIn, clientId } = props;
+  // refs
   const googleSignInButton = useRef<HTMLDivElement>(null);
+  // states
   const [gsiScriptLoaded, setGsiScriptLoaded] = useState(false);
 
   const loadScript = useCallback(() => {
     if (!googleSignInButton.current || gsiScriptLoaded) return;
 
     (window as any)?.google?.accounts.id.initialize({
-      client_id: process.env.NEXT_PUBLIC_GOOGLE_CLIENTID || "",
+      client_id: clientId,
       callback: handleSignIn,
     });
 
diff --git a/space/components/accounts/sign-in.tsx b/space/components/accounts/sign-in.tsx
index 8f6d1c5f1..0c6810198 100644
--- a/space/components/accounts/sign-in.tsx
+++ b/space/components/accounts/sign-in.tsx
@@ -1,27 +1,30 @@
-import React, { useEffect } from "react";
-
-import Image from "next/image";
+import React from "react";
+import useSWR from "swr";
 import { useRouter } from "next/router";
-
 // mobx
 import { observer } from "mobx-react-lite";
 import { useMobxStore } from "lib/mobx/store-provider";
 // services
 import authenticationService from "services/authentication.service";
+import { AppConfigService } from "services/app-config.service";
 // hooks
 import useToast from "hooks/use-toast";
 // components
-import { EmailPasswordForm, GithubLoginButton, GoogleLoginButton, EmailCodeForm } from "components/accounts";
+import { EmailPasswordForm, GoogleLoginButton, EmailCodeForm } from "components/accounts";
 // images
 const imagePrefix = Boolean(parseInt(process.env.NEXT_PUBLIC_DEPLOY_WITH_NGINX || "0")) ? "/spaces" : "";
 
+const appConfig = new AppConfigService();
+
 export const SignInView = observer(() => {
   const { user: userStore } = useMobxStore();
-
+  // router
   const router = useRouter();
   const { next_path } = router.query as { next_path: string };
-
+  // toast
   const { setToastAlert } = useToast();
+  // fetch app config
+  const { data } = useSWR("APP_CONFIG", () => appConfig.envConfig());
 
   const onSignInError = (error: any) => {
     setToastAlert({
@@ -64,24 +67,6 @@ export const SignInView = observer(() => {
     }
   };
 
-  const handleGitHubSignIn = async (credential: string) => {
-    try {
-      if (process.env.NEXT_PUBLIC_GITHUB_ID && credential) {
-        const socialAuthPayload = {
-          medium: "github",
-          credential,
-          clientId: process.env.NEXT_PUBLIC_GITHUB_ID,
-        };
-        const response = await authenticationService.socialAuth(socialAuthPayload);
-        onSignInSuccess(response);
-      } else {
-        throw Error("Cant find credentials");
-      }
-    } catch (err: any) {
-      onSignInError(err);
-    }
-  };
-
   const handlePasswordSignIn = async (formData: any) => {
     await authenticationService
       .emailLogin(formData)
@@ -119,38 +104,32 @@ export const SignInView = observer(() => {
       </div>
       <div className="grid place-items-center h-full overflow-y-auto py-5 px-7">
         <div>
-          {parseInt(process.env.NEXT_PUBLIC_ENABLE_OAUTH || "0") ? (
-            <>
-              <h1 className="text-center text-2xl sm:text-2.5xl font-semibold text-custom-text-100">
-                Sign in to Plane
-              </h1>
-              <div className="flex flex-col divide-y divide-custom-border-200">
-                <div className="pb-7">
-                  <EmailCodeForm handleSignIn={handleEmailCodeSignIn} />
-                </div>
-                <div className="flex flex-col items-center justify-center gap-4 pt-7 sm:w-[360px] mx-auto overflow-hidden">
-                  <GoogleLoginButton handleSignIn={handleGoogleSignIn} />
-                  {/* <GithubLoginButton handleSignIn={handleGitHubSignIn} /> */}
-                </div>
+          <h1 className="text-center text-2xl sm:text-2.5xl font-semibold text-custom-text-100">Sign in to Plane</h1>
+          {data?.email_password_login && <EmailPasswordForm onSubmit={handlePasswordSignIn} />}
+
+          {data?.magic_login && (
+            <div className="flex flex-col divide-y divide-custom-border-200">
+              <div className="pb-7">
+                <EmailCodeForm handleSignIn={handleEmailCodeSignIn} />
               </div>
-            </>
-          ) : (
-            <EmailPasswordForm onSubmit={handlePasswordSignIn} />
+            </div>
           )}
 
-          {parseInt(process.env.NEXT_PUBLIC_ENABLE_OAUTH || "0") ? (
-            <p className="pt-16 text-custom-text-200 text-sm text-center">
-              By signing up, you agree to the{" "}
-              <a
-                href="https://plane.so/terms-and-conditions"
-                target="_blank"
-                rel="noopener noreferrer"
-                className="font-medium underline"
-              >
-                Terms & Conditions
-              </a>
-            </p>
-          ) : null}
+          <div className="flex flex-col items-center justify-center gap-4 pt-7 sm:w-[360px] mx-auto overflow-hidden">
+            {data?.google && <GoogleLoginButton clientId={data.google} handleSignIn={handleGoogleSignIn} />}
+          </div>
+
+          <p className="pt-16 text-custom-text-200 text-sm text-center">
+            By signing up, you agree to the{" "}
+            <a
+              href="https://plane.so/terms-and-conditions"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="font-medium underline"
+            >
+              Terms & Conditions
+            </a>
+          </p>
         </div>
       </div>
     </div>
diff --git a/space/services/app-config.service.ts b/space/services/app-config.service.ts
new file mode 100644
index 000000000..713cda3da
--- /dev/null
+++ b/space/services/app-config.service.ts
@@ -0,0 +1,30 @@
+// services
+import APIService from "services/api.service";
+// helper
+import { API_BASE_URL } from "helpers/common.helper";
+
+export interface IEnvConfig {
+  github: string;
+  google: string;
+  github_app_name: string | null;
+  email_password_login: boolean;
+  magic_login: boolean;
+}
+
+export class AppConfigService extends APIService {
+  constructor() {
+    super(API_BASE_URL);
+  }
+
+  async envConfig(): Promise<IEnvConfig> {
+    return this.get("/api/configs/", {
+      headers: {
+        "Content-Type": "application/json",
+      },
+    })
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+}
diff --git a/turbo.json b/turbo.json
index b3c5e4d9f..e40a56ab7 100644
--- a/turbo.json
+++ b/turbo.json
@@ -1,8 +1,6 @@
 {
   "$schema": "https://turbo.build/schema.json",
   "globalEnv": [
-    "NEXT_PUBLIC_GITHUB_ID",
-    "NEXT_PUBLIC_GOOGLE_CLIENTID",
     "NEXT_PUBLIC_API_BASE_URL",
     "NEXT_PUBLIC_DEPLOY_URL",
     "API_BASE_URL",
diff --git a/web/pages/index.tsx b/web/pages/index.tsx
index ed98d29f6..1696f2fbc 100644
--- a/web/pages/index.tsx
+++ b/web/pages/index.tsx
@@ -85,11 +85,11 @@ const HomePage: NextPage = observer(() => {
 
   const handleGitHubSignIn = async (credential: string) => {
     try {
-      if (process.env.NEXT_PUBLIC_GITHUB_ID && credential) {
+      if (data && data.github && credential) {
         const socialAuthPayload = {
           medium: "github",
           credential,
-          clientId: process.env.NEXT_PUBLIC_GITHUB_ID,
+          clientId: data.github,
         };
         const response = await authenticationService.socialAuth(socialAuthPayload);
         if (response && response?.user) {