dev: implement global views using MobX (#2404)

* fix: selfhosted fixes (#2154)

* fix: selfhosted fixes

* fix: updated env example

* chore: dynamic position dropdown (#2138)

* chore: dynamic position state dropdown for issue view

* style: state select dropdown styling

* fix: state icon attribute names

* chore: state select dynamic dropdown

* chore: member select dynamic dropdown

* chore: label select dynamic dropdown

* chore: priority select dynamic dropdown

* chore: label select dropdown improvement

* refactor: state dropdown location

* chore: dropdown improvement and code refactor

* chore: dynamic dropdown hook type added

---------

Co-authored-by: Aaryan Khandelwal <aaryankhandu123@gmail.com>

* fix: fields not getting selected in the create issue form (#2212)

* fix: hydration error and draft issue workflow

* fix: build error

* fix: properties getting de-selected after create, module & cycle not getting auto-select on the form

* fix: display layout, props being updated directly

* chore: sub issues count in individual issue (#2221)

* Implemented nested issues in the sub issues section in issue detail page (#2233)

* feat: subissues infinte level

* feat: updated UI for sub issues

* feat: subissues new ui and nested sub issues in issue detail

* chore: removed repeated code

* refactor: product updates modal layout (#2225)

* fix: handle no issues in custom analytics (#2226)

* fix: activity label color (#2227)

* fix: profile issues layout switch (#2228)

* fix: issues resolved in sub issues (#2238)

* fix: aws region name (#2234)

* chore: updated docker naming conventions (#2239)

* naming convention changes

* dev: update docker-compose-hub in consistent with docker-compose

* dev: updated docker container name

---------

Co-authored-by: sriram veeraghanta <veeraghanta.sriram@gmail.com>

* chore: added state and priority order in workspace user profile (#2241)

* fix: changed priority from None to none (#2229)

* fix: cycle and module stats when issues are archived (#2185)

* fix: cycle and module stats when issues are archived

* fix: added draft filter

---------

Co-authored-by: NarayanBavisetti <narayan3119@gmail.com>

* feat: quick add  (#2240)

* feat: quick add

* style: made text color muted

* chore: added epoch in draft (#2244)

* chore: added epoch in draft

* chore: removed extra spaces

* fix: resolved pending issue graph in analytics, user wishes in dashboard, and typo in projects list (#2247)

* style: settings page improvement (#2211)

* style: settings page improvement

* style: toggle switch styling

---------

Co-authored-by: Anmol Singh Bhatia <asb@Anmols-MacBook-Pro.local>

* chore: changed priority props in workspace and project (#2253)

* fix: bug fix related to fetching dropdown options for the profile issue (#2246)

* fix: sub issue state and member select build error (#2254)

* rename view to layout (#2255)

Co-authored-by: Your Name <you@example.com>

* fix: bug fixes and ui improvement (#2250)

* dev: remove auto filter endpoint

* feat: quick-add placement in spreadsheet and gantt  (#2259)

* feat: sticking quick-add at the bottom of the screen

fix: opening create issue modal instead of quick-add in draft-issues, my-issue and profile page

* fix: build error due to dynamic import

* fix: draft issue delete not working (#2249)

* fix: draft issue not deleting, project can't be changed in draft issue modal

* fix: removed mutation for view where draft issues are not shown

* fix: inline create issue for draft issue

* fix: clearing data from localstorage on discard click

* feat: Add peek overview in sub issues and updated UI for empty states. (#2263)

* chore: add tooltip to show full time on activity logs (#2235)

* fix: issue automation iterable error (#2208)

* fix: n+1 queries for cycle list and project member endpoints (#2257)

* [fix] nginx continuously rewriting and reloading on index page of spaces app  (#2236)

* chore: shifted index page to /home route

* chore: added rewrite logic, to rewrite index to /home

* chore: routed home to login route as login page

* chore: updated nginx config to route to login

* chore: updated path for home

* dev: migration for 0.13 (#2266)

* dev: updated migrations

* dev: migration for 0.13

* dev: re-split migrations into two different files (#2268)

* dev: split issue activity migration separate files

* dev: resplit migrations into two different files

* dev: changed the batch size

* chore: udpate date filters to support dynamic options

* fix: bugs in quick-add and draft issues (#2269)

* fix: 'Last Drafted Issue' making sidebar look weird on collapsed

* feat: scroll to the bottom when issue is created

* fix: 'Add Issue' button overlapping issue card in spreadsheet view

* fix: wrong placement of quick-add in calender layout

* fix: spacing for issue card in spreadsheet view

* chore: add instructions to contributing guide (#2270)

* chore: add instructions to contributing guide

* dev: update contributing.md to use the new configuration

---------

Co-authored-by: Nikhil <118773738+pablohashescobar@users.noreply.github.com>

* fix: user dashboard greeting timezone (#2267)

* chore: user greeting timezone

* fix: group by labels not working on workspace level

* feat: workspace global view, style: spreadsheet view revamp (#2273)

* chore: workspace view types, services and hooks added

* style: spreadsheet view revamp and code refactor

* feat: workspace view

* fix: build fix

* chore: sidebar workspace issues redirection updated

* style: gantt layout quick-add padding (#2272)

* fix: 'Last Drafted Issue' making sidebar look weird on collapsed

* feat: scroll to the bottom when issue is created

* fix: 'Add Issue' button overlapping issue card in spreadsheet view

* fix: wrong placement of quick-add in calender layout

* fix: spacing for issue card in spreadsheet view

* style: gantt layout quick-add padding

style: removed 'State group' from draft issue

* style: decrese shadow, quick-add position on calender layout, and 'add issue' sticky

* style: button color

* fix: block click happening while moving (#2275)

* dev: refactor date filters to a single function

* chore: handle calendar date range in frontend (#2277)

* chore: gantt chart empty state (#2279)

* chore: gantt empty state

* chore: Add heading to the gantt sidebar

* style: calender quick-add same width as single date (#2280)

* style: calender quick-add same width as single date

* style: margin bottom in quick-add in spreadsheet view

* fix: quick add opening in list-layout

* style: reduced margin left

* chore: updated created at in draft issue (#2278)

* chore: make target dates inclusive when filtering (#2276)

* chore: sort order and issue props for global views (#2283)

* chore: removed project filter (#2284)

* fix: inbox issue deletes (#2290)

* chore: views (#2288)

* chore: global views order by

* chore: update permissions for global views

---------

Co-authored-by: NarayanBavisetti <narayan3119@gmail.com>

* chore: fetch issues from previous and next month in the calendar view (#2282)

* fix: issue activity estimate value bug fix (#2281)

* fix: issue activity estimate value bug fix

* fix: activity typo fix

* fix: ui and bugs (#2289)

* fix: 24 character limit on first & last name in onboarding page

* fix: no option: 'Add Issue' in archive issue page

* fix: in archive issue directly sending to issue detail page

* fix: issue type showing in archive issue

* fix: custom menu overflowing

* fix: changing subscriber in filters has no effect

* style: border in quick-add

* fix: on onboarding member role overflowing

* fix: inconsistent icons in issue detail

* style: spacing, borders and shadows in quick-add

* fix: custom menu truncate

* fix: notifications for created by me and assigned to me (#2292)

* 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>

* chore: label create error (#2299)

* chore: global issues ui improvement and bug fixes (#2300)

* 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

* chore: workspace view order by removed (#2303)

* 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

* fix: workspace view filters count fix (#2307)

* fix: unsplash api fix (#2310)

* fix: workspace view redirection fix, style: spreadsheet view shadow scroll fix (#2314)

* fix: workspace view redirection fix

* style: spreadsheet view scroll shadow fix

* fix: update build workflow for the deploy app (#2315)

* fix: workspace view add issue mutation fix (#2317)

* dev: create action to sync PR changes to the repo (#2333)

* fix: ui package readme added (#2334)

* fix: variable name for token (#2336)

* dev: update add permissions to the action (#2337)

* dev: rename token variables (#2338)

* fix: updated readme fixes (#2339)

* 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>

* 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

* fix: sync workflow fixes (#2365)

* fix: sync job pr description escaped values fix (#2366)

* Update index.tsx (#2343)

Fixes #2342

* dev: update apiserver configuration files (#2348)

* dev: update apiserver configuration files

* dev: add email and minio redirection urls

* fix: themening  validation in store init. (#2350)

* chore: member can change role (#2371)

* chore: removed the issue draft log from my profile (#2368)

* adding sync info in pr title (#2373)

* 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

* show current version in the help section dropdown (#2353)

* fix: table menu positioning (#2354)

* fix: handle cross project issues in the sub-issues. (#2357)

* fix: login process validation based on api config (#2361)

* 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

* 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>

* 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

* chore: project covers endpoint (#2370)

* chore: project covers endpoint

* dev: remove print logs

* dev: formatting

---------

Co-authored-by: sriramveeraghanta <veeraghanta.sriram@gmail.com>

* 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

* 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>

* fix: added user store variables in mobx store observable (#2380)

* fix: state group icons (#2381)

* fix: removed default theme setting in the index page (#2382)

* fix: removed default theme setting in the index page

* fix: empty space

* dev: global views and workspace filters store implemented

* sync CE Master to EE Develop

* refactor: create update view modal

* chore: static issue global views

* refactor: remove old code

* refactor: filters select dropdown

* chore: fix calendar layout

* chore: mobx store for new applied filters

* chore: dded search functionality

---------

Co-authored-by: Vamsi Kurama <vamsi.kurama@gmail.com>
Co-authored-by: Nikhil <118773738+pablohashescobar@users.noreply.github.com>
Co-authored-by: sriram veeraghanta <veeraghanta.sriram@gmail.com>
Co-authored-by: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Co-authored-by: Dakshesh Jain <65905942+dakshesh14@users.noreply.github.com>
Co-authored-by: Bavisetti Narayan <72156168+NarayanBavisetti@users.noreply.github.com>
Co-authored-by: guru_sainath <gurusainath007@gmail.com>
Co-authored-by: NarayanBavisetti <narayan3119@gmail.com>
Co-authored-by: Anmol Singh Bhatia <asb@Anmols-MacBook-Pro.local>
Co-authored-by: Rhea Jain <65884341+rhea0110@users.noreply.github.com>
Co-authored-by: Your Name <you@example.com>
Co-authored-by: pablohashescobar <nikhilschacko@gmail.com>
Co-authored-by: Henit Chobisa <chobisa.henit@gmail.com>
Co-authored-by: Thomas <git@thomasync.dev>
Co-authored-by: Luis Cruz <55716036+luis-cruzt@users.noreply.github.com>
Co-authored-by: Manish Gupta <manish@mgupta.me>

web/components/core/views/spreadsheet-view/assignee-column/assignee-column.tsx

@@ -12,20 +12,13 @@ import { ICurrentUserResponse, IIssue, Properties } from "types";
 type Props = {
   issue: IIssue;
   projectId: string;
-  partialUpdateIssue: (formData: Partial<IIssue>, issue: IIssue) => void;
+  onChange: (formData: Partial<IIssue>) => void;
   properties: Properties;
   user: ICurrentUserResponse | undefined;
   isNotAllowed: boolean;
 };
 
-export const AssigneeColumn: React.FC<Props> = ({
+export const AssigneeColumn: React.FC<Props> = ({ issue, projectId, onChange, properties, user, isNotAllowed }) => {
-  issue,
-  projectId,
-  partialUpdateIssue,
-  properties,
-  user,
-  isNotAllowed,
-}) => {
   const router = useRouter();
 
   const { workspaceSlug } = router.query;
@@ -36,7 +29,7 @@ export const AssigneeColumn: React.FC<Props> = ({
     if (newData.includes(data)) newData.splice(newData.indexOf(data), 1);
     else newData.push(data);
 
-    partialUpdateIssue({ assignees_list: data }, issue);
+    onChange({ assignees_list: data });
 
     trackEventServices.trackIssuePartialPropertyUpdateEvent(
       {

web/components/core/views/spreadsheet-view/assignee-column/spreadsheet-assignee-column.tsx

@@ -10,7 +10,7 @@ import { ICurrentUserResponse, IIssue, Properties } from "types";
 type Props = {
   issue: IIssue;
   projectId: string;
-  partialUpdateIssue: (formData: Partial<IIssue>, issue: IIssue) => void;
+  handleUpdateIssue: (issueId: string, data: Partial<IIssue>) => void;
   expandedIssues: string[];
   properties: Properties;
   user: ICurrentUserResponse | undefined;
@@ -20,7 +20,7 @@ type Props = {
 export const SpreadsheetAssigneeColumn: React.FC<Props> = ({
   issue,
   projectId,
-  partialUpdateIssue,
+  handleUpdateIssue,
   expandedIssues,
   properties,
   user,
@@ -36,7 +36,7 @@ export const SpreadsheetAssigneeColumn: React.FC<Props> = ({
         issue={issue}
         projectId={projectId}
         properties={properties}
-        partialUpdateIssue={partialUpdateIssue}
+        onChange={(data) => handleUpdateIssue(issue.id, data)}
         user={user}
         isNotAllowed={isNotAllowed}
       />
@@ -50,7 +50,7 @@ export const SpreadsheetAssigneeColumn: React.FC<Props> = ({
             key={subIssue.id}
             issue={subIssue}
             projectId={subIssue.project_detail.id}
-            partialUpdateIssue={partialUpdateIssue}
+            handleUpdateIssue={handleUpdateIssue}
             expandedIssues={expandedIssues}
             properties={properties}
             user={user}

web/components/core/views/spreadsheet-view/created-on-column/created-on-column.tsx

@@ -1,27 +1,16 @@
 import React from "react";
 
 // types
-import { ICurrentUserResponse, IIssue, Properties } from "types";
+import { IIssue, Properties } from "types";
 // helper
 import { renderLongDetailDateFormat } from "helpers/date-time.helper";
 
 type Props = {
   issue: IIssue;
-  projectId: string;
-  partialUpdateIssue: (formData: Partial<IIssue>, issue: IIssue) => void;
   properties: Properties;
-  user: ICurrentUserResponse | undefined;
-  isNotAllowed: boolean;
 };
 
-export const CreatedOnColumn: React.FC<Props> = ({
+export const CreatedOnColumn: React.FC<Props> = ({ issue, properties }) => (
-  issue,
-  projectId,
-  partialUpdateIssue,
-  properties,
-  user,
-  isNotAllowed,
-}) => (
   <div className="flex items-center text-sm h-11 w-full bg-custom-background-100">
     <span className="flex items-center px-4 py-2.5 h-full w-full flex-shrink-0 border-r border-b border-custom-border-100">
       {properties.created_on && (

web/components/core/views/spreadsheet-view/created-on-column/spreadsheet-created-on-column.tsx

@@ -9,8 +9,7 @@ import { ICurrentUserResponse, IIssue, Properties } from "types";
 
 type Props = {
   issue: IIssue;
-  projectId: string;
+  handleUpdateIssue: (formData: Partial<IIssue>) => void;
-  partialUpdateIssue: (formData: Partial<IIssue>, issue: IIssue) => void;
   expandedIssues: string[];
   properties: Properties;
   user: ICurrentUserResponse | undefined;
@@ -19,8 +18,7 @@ type Props = {
 
 export const SpreadsheetCreatedOnColumn: React.FC<Props> = ({
   issue,
-  projectId,
+  handleUpdateIssue,
-  partialUpdateIssue,
   expandedIssues,
   properties,
   user,
@@ -32,14 +30,7 @@ export const SpreadsheetCreatedOnColumn: React.FC<Props> = ({
 
   return (
     <div>
-      <CreatedOnColumn
+      <CreatedOnColumn issue={issue} properties={properties} />
-        issue={issue}
-        projectId={projectId}
-        properties={properties}
-        partialUpdateIssue={partialUpdateIssue}
-        user={user}
-        isNotAllowed={isNotAllowed}
-      />
 
       {isExpanded &&
         !isLoading &&
@@ -49,8 +40,7 @@ export const SpreadsheetCreatedOnColumn: React.FC<Props> = ({
           <SpreadsheetCreatedOnColumn
             key={subIssue.id}
             issue={subIssue}
-            projectId={subIssue.project_detail.id}
+            handleUpdateIssue={handleUpdateIssue}
-            partialUpdateIssue={partialUpdateIssue}
             expandedIssues={expandedIssues}
             properties={properties}
             user={user}

web/components/core/views/spreadsheet-view/issue-column/issue-column.tsx

@@ -6,16 +6,11 @@ import { useRouter } from "next/router";
 import { Popover2 } from "@blueprintjs/popover2";
 // icons
 import { Icon } from "components/ui";
-import {
+import { EllipsisHorizontalIcon, LinkIcon, PencilIcon, TrashIcon } from "@heroicons/react/24/outline";
-  EllipsisHorizontalIcon,
-  LinkIcon,
-  PencilIcon,
-  TrashIcon,
-} from "@heroicons/react/24/outline";
 // hooks
 import useToast from "hooks/use-toast";
 // types
-import { IIssue, Properties, UserAuth } from "types";
+import { IIssue, Properties } from "types";
 // helper
 import { copyTextToClipboard } from "helpers/string.helper";
 
@@ -29,7 +24,6 @@ type Props = {
   handleDeleteIssue: (issue: IIssue) => void;
   setCurrentProjectId: React.Dispatch<React.SetStateAction<string | null>>;
   disableUserActions: boolean;
-  userAuth: UserAuth;
   nestingLevel: number;
 };
 
@@ -43,7 +37,6 @@ export const IssueColumn: React.FC<Props> = ({
   handleDeleteIssue,
   setCurrentProjectId,
   disableUserActions,
-  userAuth,
   nestingLevel,
 }) => {
   const [isOpen, setIsOpen] = useState(false);
@@ -64,11 +57,8 @@ export const IssueColumn: React.FC<Props> = ({
   };
 
   const handleCopyText = () => {
-    const originURL =
+    const originURL = typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
-      typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
+    copyTextToClipboard(`${originURL}/${workspaceSlug}/projects/${projectId}/issues/${issue.id}`).then(() => {
-    copyTextToClipboard(
-      `${originURL}/${workspaceSlug}/projects/${projectId}/issues/${issue.id}`
-    ).then(() => {
       setToastAlert({
         type: "success",
         title: "Link Copied!",
@@ -79,8 +69,6 @@ export const IssueColumn: React.FC<Props> = ({
 
   const paddingLeft = `${nestingLevel * 54}px`;
 
-  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">
       {properties.key && (
@@ -93,7 +81,7 @@ export const IssueColumn: React.FC<Props> = ({
               {issue.project_detail?.identifier}-{issue.sequence_id}
             </span>
 
-            {!isNotAllowed && !disableUserActions && (
+            {!disableUserActions && (
               <div className="absolute top-0 left-2.5 opacity-0 group-hover:opacity-100">
                 <Popover2
                   isOpen={isOpen}

web/components/core/views/spreadsheet-view/issue-column/spreadsheet-issue-column.tsx

@@ -5,7 +5,7 @@ import { IssueColumn } from "components/core";
 // hooks
 import useSubIssue from "hooks/use-sub-issue";
 // types
-import { IIssue, Properties, UserAuth } from "types";
+import { IIssue, Properties } from "types";
 
 type Props = {
   issue: IIssue;
@@ -16,7 +16,6 @@ type Props = {
   handleIssueAction: (issue: IIssue, action: "copy" | "delete" | "edit") => void;
   setCurrentProjectId: React.Dispatch<React.SetStateAction<string | null>>;
   disableUserActions: boolean;
-  userAuth: UserAuth;
   nestingLevel?: number;
 };
 
@@ -29,7 +28,6 @@ export const SpreadsheetIssuesColumn: React.FC<Props> = ({
   handleIssueAction,
   setCurrentProjectId,
   disableUserActions,
-  userAuth,
   nestingLevel = 0,
 }) => {
   const handleToggleExpand = (issueId: string) => {
@@ -61,7 +59,6 @@ export const SpreadsheetIssuesColumn: React.FC<Props> = ({
         handleDeleteIssue={() => handleIssueAction(issue, "delete")}
         setCurrentProjectId={setCurrentProjectId}
         disableUserActions={disableUserActions}
-        userAuth={userAuth}
         nestingLevel={nestingLevel}
       />
 
@@ -80,7 +77,6 @@ export const SpreadsheetIssuesColumn: React.FC<Props> = ({
             handleIssueAction={handleIssueAction}
             setCurrentProjectId={setCurrentProjectId}
             disableUserActions={disableUserActions}
-            userAuth={userAuth}
             nestingLevel={nestingLevel + 1}
           />
         ))}

web/components/core/views/spreadsheet-view/spreadsheet-view.tsx

@@ -1,10 +1,9 @@
-import React, { useCallback, useEffect, useRef, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
-
-// next
 import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
 
-import { KeyedMutator, mutate } from "swr";
+// hooks
-
+import useLocalStorage from "hooks/use-local-storage";
 // components
 import {
   ListInlineCreateIssueForm,
@@ -21,50 +20,34 @@ import {
 } from "components/core";
 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, TIssueOrderByOptions, UserAuth } from "types";
+import { IIssue, IIssueDisplayFilterOptions, IIssueDisplayProperties, TIssueOrderByOptions } from "types";
-import {
-  CYCLE_DETAILS,
-  CYCLE_ISSUES_WITH_PARAMS,
-  MODULE_DETAILS,
-  MODULE_ISSUES_WITH_PARAMS,
-  PROJECT_ISSUES_LIST_WITH_PARAMS,
-  SUB_ISSUES,
-  VIEW_ISSUES,
-  WORKSPACE_VIEW_ISSUES,
-} from "constants/fetch-keys";
-import issueService from "services/issue.service";
 // icon
 import { CheckIcon, ChevronDownIcon, PlusIcon } from "lucide-react";
 
 type Props = {
-  spreadsheetIssues: IIssue[];
+  displayProperties: IIssueDisplayProperties;
-  mutateIssues: KeyedMutator<
+  displayFilters: IIssueDisplayFilterOptions;
-    | IIssue[]
+  handleDisplayFilterUpdate: (data: Partial<IIssueDisplayFilterOptions>) => void;
-    | {
+  issues: IIssue[] | undefined;
-        [key: string]: IIssue[];
-      }
-  >;
   handleIssueAction: (issue: IIssue, action: "copy" | "delete" | "edit") => void;
+  handleUpdateIssue: (issueId: string, data: Partial<IIssue>) => void;
   openIssuesListModal?: (() => void) | null;
   disableUserActions: boolean;
-  user: ICurrentUserResponse | undefined;
-  userAuth: UserAuth;
 };
 
-export const SpreadsheetView: React.FC<Props> = ({
+export const SpreadsheetView: React.FC<Props> = observer((props) => {
-  spreadsheetIssues,
+  const {
-  mutateIssues,
+    displayProperties,
+    displayFilters,
+    handleDisplayFilterUpdate,
+    issues,
     handleIssueAction,
+    handleUpdateIssue,
     openIssuesListModal,
     disableUserActions,
-  user,
+  } = props;
-  userAuth,
+
-}) => {
   const [expandedIssues, setExpandedIssues] = useState<string[]>([]);
   const [currentProjectId, setCurrentProjectId] = useState<string | null>(null);
 
@@ -75,12 +58,10 @@ export const SpreadsheetView: React.FC<Props> = ({
   const containerRef = useRef<HTMLDivElement | null>(null);
 
   const router = useRouter();
-  const { workspaceSlug, projectId, cycleId, moduleId, viewId, globalViewId } = router.query;
+  const { workspaceSlug, cycleId, moduleId } = router.query;
 
   const type = cycleId ? "cycle" : moduleId ? "module" : "issue";
 
-  const [properties] = useIssuesProperties(workspaceSlug as string, projectId as string);
-
   const { storedValue: selectedMenuItem, setValue: setSelectedMenuItem } = useLocalStorage(
     "spreadsheetViewSorting",
     ""
@@ -90,135 +71,9 @@ export const SpreadsheetView: React.FC<Props> = ({
     ""
   );
 
-  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 { params: workspaceViewParams, filters: workspaceViewFilters, handleFilters } = useWorkspaceView();
-
-  const workspaceViewProperties = workspaceViewFilters.display_properties;
-
-  const isWorkspaceView = globalViewId || currentWorkspaceIssuePath;
-
-  const currentViewProperties = isWorkspaceView ? workspaceViewProperties : properties;
-
-  const params = {};
-
-  const partialUpdateIssue = useCallback(
-    (formData: Partial<IIssue>, issue: IIssue) => {
-      if (!workspaceSlug || !issue) return;
-
-      const fetchKey = cycleId
-        ? CYCLE_ISSUES_WITH_PARAMS(cycleId.toString(), params)
-        : moduleId
-        ? MODULE_ISSUES_WITH_PARAMS(moduleId.toString(), params)
-        : viewId
-        ? VIEW_ISSUES(viewId.toString(), params)
-        : 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);
-
-      if (issue.parent)
-        mutate<ISubIssueResponse>(
-          SUB_ISSUES(issue.parent.toString()),
-          (prevData) => {
-            if (!prevData) return prevData;
-
-            return {
-              ...prevData,
-              sub_issues: (prevData.sub_issues ?? []).map((i) => {
-                if (i.id === issue.id) {
-                  return {
-                    ...i,
-                    ...formData,
-                  };
-                }
-                return i;
-              }),
-            };
-          },
-          false
-        );
-      else
-        mutate<IIssue[]>(
-          fetchKey,
-          (prevData) =>
-            (prevData ?? []).map((p) => {
-              if (p.id === issue.id) {
-                return {
-                  ...p,
-                  ...formData,
-                };
-              }
-              return p;
-            }),
-          false
-        );
-
-      issueService
-        .patchIssue(workspaceSlug as string, issue.project_detail.id, issue.id as string, formData, user)
-        .then(() => {
-          if (issue.parent) {
-            mutate(SUB_ISSUES(issue.parent as string));
-          } else {
-            mutate(fetchKey);
-
-            if (cycleId) mutate(CYCLE_DETAILS(cycleId as string));
-            if (moduleId) mutate(MODULE_DETAILS(moduleId as string));
-          }
-        })
-        .catch((error) => {
-          console.log(error);
-        });
-    },
-    [
-      workspaceSlug,
-      cycleId,
-      moduleId,
-      viewId,
-      globalViewId,
-      workspaceViewParams,
-      currentWorkspaceIssuePath,
-      params,
-      user,
-    ]
-  );
-
-  const isNotAllowed = userAuth.isGuest || userAuth.isViewer;
-
   const handleOrderBy = (order: TIssueOrderByOptions, itemKey: string) => {
-    if (globalViewId) handleFilters("display_filters", { order_by: order });
+    handleDisplayFilterUpdate({ order_by: order });
-    else setDisplayFilters({ order_by: order });
+
     setSelectedMenuItem(`${order}_${itemKey}`);
     setActiveSortingProperty(order === "-created_at" ? "" : itemKey);
   };
@@ -232,9 +87,6 @@ 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">
-        {currentWorkspaceIssuePath ? (
-          <span>{header}</span>
-        ) : (
         <CustomMenu
           customButtonClassName="!w-full"
           className="!w-full"
@@ -395,19 +247,17 @@ export const SpreadsheetView: React.FC<Props> = ({
               </CustomMenu.MenuItem>
             )}
         </CustomMenu>
-        )}
       </div>
       <div className="h-full min-w-[9rem] w-full">
-        {spreadsheetIssues.map((issue: IIssue, index) => (
+        {issues?.map((issue) => (
           <Component
-            key={`${issue.id}_${index}`}
+            key={issue.id}
             issue={issue}
             projectId={issue.project_detail.id}
-            partialUpdateIssue={partialUpdateIssue}
+            handleUpdateIssue={handleUpdateIssue}
             expandedIssues={expandedIssues}
-            properties={currentViewProperties}
+            properties={displayProperties}
-            user={user}
+            isNotAllowed={disableUserActions}
-            isNotAllowed={isNotAllowed}
           />
         ))}
       </div>
@@ -438,7 +288,6 @@ export const SpreadsheetView: React.FC<Props> = ({
   return (
     <>
       <IssuePeekOverview
-        handleMutation={() => mutateIssues()}
         projectId={currentProjectId ?? ""}
         workspaceSlug={workspaceSlug?.toString() ?? ""}
         readOnly={disableUserActions}
@@ -446,7 +295,7 @@ export const SpreadsheetView: React.FC<Props> = ({
       <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 ref={containerRef} className="flex max-h-full h-full overflow-y-auto">
-            {spreadsheetIssues ? (
+            {issues ? (
               <>
                 <div className="sticky left-0 w-[28rem] z-[2]">
                   <div
@@ -456,13 +305,13 @@ 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">
-                      {currentViewProperties.key && (
+                      {displayProperties.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>
                     </div>
 
-                    {spreadsheetIssues.map((issue: IIssue, index) => (
+                    {issues.map((issue: IIssue, index) => (
                       <SpreadsheetIssuesColumn
                         key={`${issue.id}_${index}`}
                         issue={issue}
@@ -470,20 +319,19 @@ export const SpreadsheetView: React.FC<Props> = ({
                         expandedIssues={expandedIssues}
                         setExpandedIssues={setExpandedIssues}
                         setCurrentProjectId={setCurrentProjectId}
-                        properties={currentViewProperties}
+                        properties={displayProperties}
                         handleIssueAction={handleIssueAction}
                         disableUserActions={disableUserActions}
-                        userAuth={userAuth}
                       />
                     ))}
                   </div>
                 </div>
-                {currentViewProperties.state &&
+                {displayProperties.state &&
                   renderColumn("State", "state", SpreadsheetStateColumn, "state__name", "-state__name")}
 
-                {currentViewProperties.priority &&
+                {displayProperties.priority &&
                   renderColumn("Priority", "priority", SpreadsheetPriorityColumn, "priority", "-priority")}
-                {currentViewProperties.assignee &&
+                {displayProperties.assignee &&
                   renderColumn(
                     "Assignees",
                     "assignee",
@@ -491,17 +339,17 @@ export const SpreadsheetView: React.FC<Props> = ({
                     "assignees__first_name",
                     "-assignees__first_name"
                   )}
-                {currentViewProperties.labels &&
+                {displayProperties.labels &&
                   renderColumn("Label", "labels", SpreadsheetLabelColumn, "labels__name", "-labels__name")}
-                {currentViewProperties.start_date &&
+                {displayProperties.start_date &&
                   renderColumn("Start Date", "start_date", SpreadsheetStartDateColumn, "-start_date", "start_date")}
-                {currentViewProperties.due_date &&
+                {displayProperties.due_date &&
                   renderColumn("Due Date", "due_date", SpreadsheetDueDateColumn, "-target_date", "target_date")}
-                {currentViewProperties.estimate &&
+                {displayProperties.estimate &&
                   renderColumn("Estimate", "estimate", SpreadsheetEstimateColumn, "estimate_point", "-estimate_point")}
-                {currentViewProperties.created_on &&
+                {displayProperties.created_on &&
                   renderColumn("Created On", "created_on", SpreadsheetCreatedOnColumn, "-created_at", "created_at")}
-                {currentViewProperties.updated_on &&
+                {displayProperties.updated_on &&
                   renderColumn("Updated On", "updated_on", SpreadsheetUpdatedOnColumn, "-updated_at", "updated_at")}
               </>
             ) : (
@@ -565,4 +413,4 @@ export const SpreadsheetView: React.FC<Props> = ({
       </div>
     </>
   );
-};
+});

web/components/core/views/spreadsheet-view/state-column/spreadsheet-state-column.tsx

@@ -10,7 +10,7 @@ import { ICurrentUserResponse, IIssue, Properties } from "types";
 type Props = {
   issue: IIssue;
   projectId: string;
-  partialUpdateIssue: (formData: Partial<IIssue>, issue: IIssue) => void;
+  handleUpdateIssue: (issueId: string, data: Partial<IIssue>) => void;
   expandedIssues: string[];
   properties: Properties;
   user: ICurrentUserResponse | undefined;
@@ -20,7 +20,7 @@ type Props = {
 export const SpreadsheetStateColumn: React.FC<Props> = ({
   issue,
   projectId,
-  partialUpdateIssue,
+  handleUpdateIssue,
   expandedIssues,
   properties,
   user,
@@ -36,7 +36,7 @@ export const SpreadsheetStateColumn: React.FC<Props> = ({
         issue={issue}
         projectId={projectId}
         properties={properties}
-        partialUpdateIssue={partialUpdateIssue}
+        onChange={(data) => handleUpdateIssue(issue.id, data)}
         user={user}
         isNotAllowed={isNotAllowed}
       />
@@ -45,12 +45,12 @@ export const SpreadsheetStateColumn: React.FC<Props> = ({
         !isLoading &&
         subIssues &&
         subIssues.length > 0 &&
-        subIssues.map((subIssue: IIssue) => (
+        subIssues.map((subIssue) => (
           <SpreadsheetStateColumn
             key={subIssue.id}
             issue={subIssue}
             projectId={subIssue.project_detail.id}
-            partialUpdateIssue={partialUpdateIssue}
+            handleUpdateIssue={handleUpdateIssue}
             expandedIssues={expandedIssues}
             properties={properties}
             user={user}

web/components/core/views/spreadsheet-view/state-column/state-column.tsx

@@ -12,20 +12,13 @@ import { ICurrentUserResponse, IIssue, IState, Properties } from "types";
 type Props = {
   issue: IIssue;
   projectId: string;
-  partialUpdateIssue: (formData: Partial<IIssue>, issue: IIssue) => void;
+  onChange: (formData: Partial<IIssue>) => void;
   properties: Properties;
   user: ICurrentUserResponse | undefined;
   isNotAllowed: boolean;
 };
 
-export const StateColumn: React.FC<Props> = ({
+export const StateColumn: React.FC<Props> = ({ issue, projectId, onChange, properties, user, isNotAllowed }) => {
-  issue,
-  projectId,
-  partialUpdateIssue,
-  properties,
-  user,
-  isNotAllowed,
-}) => {
   const router = useRouter();
 
   const { workspaceSlug } = router.query;
@@ -34,13 +27,10 @@ export const StateColumn: React.FC<Props> = ({
     const oldState = states?.find((s) => s.id === issue.state);
     const newState = states?.find((s) => s.id === data);
 
-    partialUpdateIssue(
+    onChange({
-      {
       state: data,
       state_detail: newState,
-      },
+    });
-      issue
-    );
     trackEventServices.trackIssuePartialPropertyUpdateEvent(
       {
         workspaceSlug,

web/components/headers/global-issues.tsx

@@ -0,0 +1,158 @@
+import { useCallback, useState } from "react";
+import Link from "next/link";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+import useSWR from "swr";
+
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// components
+import { DisplayFiltersSelection, FiltersDropdown, FilterSelection } from "components/issues";
+import { CreateUpdateWorkspaceViewModal } from "components/workspace";
+// ui
+import { PrimaryButton, Tooltip } from "components/ui";
+// icons
+import { List, PlusIcon, Sheet } from "lucide-react";
+// types
+import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOptions, TStaticViewTypes } from "types";
+// constants
+import { ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "constants/issue";
+
+const GLOBAL_VIEW_LAYOUTS = [
+  { key: "list", title: "List", link: "/workspace-views", icon: List },
+  { key: "spreadsheet", title: "Spreadsheet", link: "/workspace-views/all-issues", icon: Sheet },
+];
+
+type Props = {
+  activeLayout: "list" | "spreadsheet";
+};
+
+const STATIC_VIEW_TYPES: TStaticViewTypes[] = ["all-issues", "assigned", "created", "subscribed"];
+
+export const GlobalIssuesHeader: React.FC<Props> = observer((props) => {
+  const { activeLayout } = props;
+
+  const [createViewModal, setCreateViewModal] = useState(false);
+
+  const router = useRouter();
+  const { workspaceSlug, globalViewId } = router.query;
+
+  const {
+    globalViews: globalViewsStore,
+    globalViewFilters: globalViewFiltersStore,
+    workspaceFilter: workspaceFilterStore,
+    workspace: workspaceStore,
+    project: projectStore,
+  } = useMobxStore();
+
+  const queryData = globalViewId ? globalViewsStore.globalViewDetails[globalViewId.toString()]?.query_data : undefined;
+
+  const storedFilters = globalViewId ? globalViewFiltersStore.storedFilters[globalViewId.toString()] : undefined;
+
+  const handleFiltersUpdate = useCallback(
+    (key: keyof IIssueFilterOptions, value: string | string[]) => {
+      if (!workspaceSlug || !globalViewId) return;
+
+      const newValues = queryData?.filters?.[key] ?? [];
+
+      if (Array.isArray(value)) {
+        value.forEach((val) => {
+          if (!newValues.includes(val)) newValues.push(val);
+        });
+      } else {
+        if (queryData?.filters?.[key]?.includes(value)) newValues.splice(newValues.indexOf(value), 1);
+        else newValues.push(value);
+      }
+
+      globalViewFiltersStore.updateStoredFilters(globalViewId.toString(), {
+        [key]: newValues,
+      });
+    },
+    [globalViewId, globalViewFiltersStore, queryData, workspaceSlug]
+  );
+
+  const handleDisplayFiltersUpdate = useCallback(
+    (updatedDisplayFilter: Partial<IIssueDisplayFilterOptions>) => {
+      if (!workspaceSlug) return;
+
+      workspaceFilterStore.updateWorkspaceFilters(workspaceSlug.toString(), {
+        display_filters: updatedDisplayFilter,
+      });
+    },
+    [workspaceFilterStore, workspaceSlug]
+  );
+
+  const handleDisplayPropertiesUpdate = useCallback(
+    (property: Partial<IIssueDisplayProperties>) => {
+      if (!workspaceSlug) return;
+
+      workspaceFilterStore.updateWorkspaceFilters(workspaceSlug.toString(), {
+        display_properties: property,
+      });
+    },
+    [workspaceFilterStore, workspaceSlug]
+  );
+
+  useSWR(
+    workspaceSlug ? "USER_WORKSPACE_DISPLAY_FILTERS" : null,
+    workspaceSlug ? () => workspaceFilterStore.fetchUserWorkspaceFilters(workspaceSlug.toString()) : null
+  );
+
+  return (
+    <>
+      <CreateUpdateWorkspaceViewModal isOpen={createViewModal} onClose={() => setCreateViewModal(false)} />
+      <div className="flex items-center gap-2">
+        <div className="flex items-center gap-1 p-1 rounded bg-custom-background-80">
+          {GLOBAL_VIEW_LAYOUTS.map((layout) => (
+            <Link key={layout.key} href={`/${workspaceSlug}/${layout.link}`}>
+              <a>
+                <Tooltip tooltipContent={layout.title}>
+                  <div
+                    className={`w-7 h-[22px] rounded grid place-items-center transition-all hover:bg-custom-background-100 overflow-hidden group ${
+                      activeLayout === layout.key ? "bg-custom-background-100 shadow-custom-shadow-2xs" : ""
+                    }`}
+                  >
+                    <layout.icon
+                      size={14}
+                      strokeWidth={2}
+                      className={`${activeLayout === layout.key ? "text-custom-text-100" : "text-custom-text-200"}`}
+                    />
+                  </div>
+                </Tooltip>
+              </a>
+            </Link>
+          ))}
+        </div>
+        {activeLayout === "spreadsheet" && (
+          <>
+            {!STATIC_VIEW_TYPES.some((word) => router.pathname.includes(word)) && (
+              <FiltersDropdown title="Filters">
+                <FilterSelection
+                  filters={storedFilters ?? {}}
+                  handleFiltersUpdate={handleFiltersUpdate}
+                  layoutDisplayFiltersOptions={ISSUE_DISPLAY_FILTERS_BY_LAYOUT.my_issues.spreadsheet}
+                  labels={workspaceStore.workspaceLabels ?? undefined}
+                  projects={workspaceSlug ? projectStore.projects[workspaceSlug.toString()] : undefined}
+                />
+              </FiltersDropdown>
+            )}
+
+            <FiltersDropdown title="View">
+              <DisplayFiltersSelection
+                displayFilters={workspaceFilterStore.workspaceDisplayFilters}
+                displayProperties={workspaceFilterStore.workspaceDisplayProperties}
+                handleDisplayFiltersUpdate={handleDisplayFiltersUpdate}
+                handleDisplayPropertiesUpdate={handleDisplayPropertiesUpdate}
+                layoutDisplayFiltersOptions={ISSUE_DISPLAY_FILTERS_BY_LAYOUT.my_issues.spreadsheet}
+              />
+            </FiltersDropdown>
+          </>
+        )}
+        <PrimaryButton className="flex items-center gap-2" onClick={() => setCreateViewModal(true)}>
+          <PlusIcon className="h-4 w-4" />
+          New View
+        </PrimaryButton>
+      </div>
+    </>
+  );
+});

web/components/headers/index.ts

@@ -1,2 +1,3 @@
+export * from "./global-issues";
 export * from "./module-issues";
 export * from "./project-issues";

web/components/headers/module-issues.tsx

@@ -7,7 +7,7 @@ import { useMobxStore } from "lib/mobx/store-provider";
 // components
 import { DisplayFiltersSelection, FiltersDropdown, FilterSelection, LayoutSelection } from "components/issues";
 // types
-import { IIssueDisplayFilterOptions, IIssueFilterOptions, TIssueLayouts } from "types";
+import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOptions, TIssueLayouts } from "types";
 // constants
 import { ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "constants/issue";
 
@@ -15,7 +15,7 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
   const router = useRouter();
   const { workspaceSlug, projectId, moduleId } = router.query;
 
-  const { issueFilter: issueFilterStore, moduleFilter: moduleFilterStore } = useMobxStore();
+  const { issueFilter: issueFilterStore, moduleFilter: moduleFilterStore, project: projectStore } = useMobxStore();
 
   const activeLayout = issueFilterStore.userDisplayFilters.layout;
 
@@ -67,6 +67,15 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
     [issueFilterStore, projectId, workspaceSlug]
   );
 
+  const handleDisplayPropertiesUpdate = useCallback(
+    (property: Partial<IIssueDisplayProperties>) => {
+      if (!workspaceSlug || !projectId) return;
+
+      issueFilterStore.updateDisplayProperties(workspaceSlug.toString(), projectId.toString(), property);
+    },
+    [issueFilterStore, projectId, workspaceSlug]
+  );
+
   return (
     <div className="flex items-center gap-2">
       <LayoutSelection
@@ -79,13 +88,17 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
           filters={moduleFilterStore.moduleFilters}
           handleFiltersUpdate={handleFiltersUpdate}
           layoutDisplayFiltersOptions={activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[activeLayout] : undefined}
-          projectId={projectId?.toString() ?? ""}
+          labels={projectStore.labels?.[projectId?.toString() ?? ""] ?? undefined}
+          members={projectStore.members?.[projectId?.toString() ?? ""]?.map((m) => m.member)}
+          states={projectStore.states?.[projectId?.toString() ?? ""] ?? undefined}
         />
       </FiltersDropdown>
       <FiltersDropdown title="View">
         <DisplayFiltersSelection
           displayFilters={issueFilterStore.userDisplayFilters}
+          displayProperties={issueFilterStore.userDisplayProperties}
           handleDisplayFiltersUpdate={handleDisplayFiltersUpdate}
+          handleDisplayPropertiesUpdate={handleDisplayPropertiesUpdate}
           layoutDisplayFiltersOptions={activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[activeLayout] : undefined}
         />
       </FiltersDropdown>

web/components/headers/project-issues.tsx

@@ -7,7 +7,7 @@ import { useMobxStore } from "lib/mobx/store-provider";
 // components
 import { DisplayFiltersSelection, FiltersDropdown, FilterSelection, LayoutSelection } from "components/issues";
 // types
-import { IIssueDisplayFilterOptions, IIssueFilterOptions, TIssueLayouts } from "types";
+import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOptions, TIssueLayouts } from "types";
 // constants
 import { ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "constants/issue";
 
@@ -15,7 +15,7 @@ export const ProjectIssuesHeader: React.FC = observer(() => {
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
 
-  const { issueFilter: issueFilterStore } = useMobxStore();
+  const { issueFilter: issueFilterStore, project: projectStore } = useMobxStore();
 
   const activeLayout = issueFilterStore.userDisplayFilters.layout;
 
@@ -69,6 +69,15 @@ export const ProjectIssuesHeader: React.FC = observer(() => {
     [issueFilterStore, projectId, workspaceSlug]
   );
 
+  const handleDisplayPropertiesUpdate = useCallback(
+    (property: Partial<IIssueDisplayProperties>) => {
+      if (!workspaceSlug || !projectId) return;
+
+      issueFilterStore.updateDisplayProperties(workspaceSlug.toString(), projectId.toString(), property);
+    },
+    [issueFilterStore, projectId, workspaceSlug]
+  );
+
   return (
     <div className="flex items-center gap-2">
       <LayoutSelection
@@ -81,13 +90,17 @@ export const ProjectIssuesHeader: React.FC = observer(() => {
           filters={issueFilterStore.userFilters}
           handleFiltersUpdate={handleFiltersUpdate}
           layoutDisplayFiltersOptions={activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[activeLayout] : undefined}
-          projectId={projectId?.toString() ?? ""}
+          labels={projectStore.labels?.[projectId?.toString() ?? ""] ?? undefined}
+          members={projectStore.members?.[projectId?.toString() ?? ""]?.map((m) => m.member)}
+          states={projectStore.states?.[projectId?.toString() ?? ""] ?? undefined}
         />
       </FiltersDropdown>
       <FiltersDropdown title="View">
         <DisplayFiltersSelection
           displayFilters={issueFilterStore.userDisplayFilters}
+          displayProperties={issueFilterStore.userDisplayProperties}
           handleDisplayFiltersUpdate={handleDisplayFiltersUpdate}
+          handleDisplayPropertiesUpdate={handleDisplayPropertiesUpdate}
           layoutDisplayFiltersOptions={activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[activeLayout] : undefined}
         />
       </FiltersDropdown>

web/components/issues/issue-layouts/calendar/calendar.tsx

@@ -12,14 +12,14 @@ import { IIssueGroupedStructure } from "store/issue";
 
 type Props = {
   issues: IIssueGroupedStructure | null;
+  layout: "month" | "week" | undefined;
 };
 
 export const CalendarChart: React.FC<Props> = observer((props) => {
-  const { issues } = props;
+  const { issues, layout } = props;
 
-  const { calendar: calendarStore, issueFilter: issueFilterStore } = useMobxStore();
+  const { calendar: calendarStore } = useMobxStore();
 
-  const calendarLayout = issueFilterStore.userDisplayFilters.calendar?.layout ?? "month";
   const calendarPayload = calendarStore.calendarPayload;
 
   const allWeeksOfActiveMonth = calendarStore.allWeeksOfActiveMonth;
@@ -37,7 +37,7 @@ export const CalendarChart: React.FC<Props> = observer((props) => {
         <CalendarHeader />
         <CalendarWeekHeader />
         <div className="h-full w-full overflow-y-auto">
-          {calendarLayout === "month" ? (
+          {layout === "month" ? (
             <div className="h-full w-full grid grid-cols-1 divide-y-[0.5px] divide-custom-border-200">
               {allWeeksOfActiveMonth &&
                 Object.values(allWeeksOfActiveMonth).map((week: ICalendarWeek, weekIndex) => (

web/components/issues/issue-layouts/calendar/module-root.tsx

@@ -9,7 +9,7 @@ import { CalendarChart } from "components/issues";
 import { IIssueGroupedStructure } from "store/issue";
 
 export const ModuleCalendarLayout: React.FC = observer(() => {
-  const { module: moduleStore } = useMobxStore();
+  const { module: moduleStore, issueFilter: issueFilterStore } = useMobxStore();
 
   // TODO: add drag and drop functionality
   const onDragEnd = (result: DropResult) => {
@@ -29,7 +29,10 @@ export const ModuleCalendarLayout: React.FC = observer(() => {
   return (
     <div className="h-full w-full pt-4 bg-custom-background-100 overflow-hidden">
       <DragDropContext onDragEnd={onDragEnd}>
-        <CalendarChart issues={issues as IIssueGroupedStructure | null} />
+        <CalendarChart
+          issues={issues as IIssueGroupedStructure | null}
+          layout={issueFilterStore.userDisplayFilters.calendar?.layout}
+        />
       </DragDropContext>
     </div>
   );

web/components/issues/issue-layouts/calendar/root.tsx

@@ -9,7 +9,7 @@ import { CalendarChart } from "components/issues";
 import { IIssueGroupedStructure } from "store/issue";
 
 export const CalendarLayout: React.FC = observer(() => {
-  const { issue: issueStore } = useMobxStore();
+  const { issue: issueStore, issueFilter: issueFilterStore } = useMobxStore();
 
   // TODO: add drag and drop functionality
   const onDragEnd = (result: DropResult) => {
@@ -29,7 +29,10 @@ export const CalendarLayout: React.FC = observer(() => {
   return (
     <div className="h-full w-full pt-4 bg-custom-background-100 overflow-hidden">
       <DragDropContext onDragEnd={onDragEnd}>
-        <CalendarChart issues={issues as IIssueGroupedStructure | null} />
+        <CalendarChart
+          issues={issues as IIssueGroupedStructure | null}
+          layout={issueFilterStore.userDisplayFilters.calendar?.layout}
+        />
       </DragDropContext>
     </div>
   );

web/components/issues/issue-layouts/filters/applied-filters/filters-list.tsx

@@ -6,6 +6,7 @@ import {
   AppliedLabelsFilters,
   AppliedMembersFilters,
   AppliedPriorityFilters,
+  AppliedProjectFilters,
   AppliedStateFilters,
   AppliedStateGroupFilters,
 } from "components/issues";
@@ -14,39 +15,49 @@ import { X } from "lucide-react";
 // helpers
 import { replaceUnderscoreIfSnakeCase } from "helpers/string.helper";
 // types
-import { IIssueFilterOptions, IIssueLabels, IStateResponse, IUserLite } from "types";
+import { IIssueFilterOptions, IIssueLabels, IProject, IStateResponse, IUserLite } from "types";
 
 type Props = {
   appliedFilters: IIssueFilterOptions;
   handleClearAllFilters: () => void;
   handleRemoveFilter: (key: keyof IIssueFilterOptions, value: string | null) => void;
-  labels: IIssueLabels[] | undefined;
+  labels?: IIssueLabels[] | undefined;
-  members: IUserLite[] | undefined;
+  members?: IUserLite[] | undefined;
-  states: IStateResponse | undefined;
+  projects?: IProject[] | undefined;
+  states?: IStateResponse | undefined;
 };
 
+const membersFilters = ["assignees", "created_by", "subscriber"];
+const dateFilters = ["start_date", "target_date"];
+
 export const AppliedFiltersList: React.FC<Props> = observer((props) => {
-  const { appliedFilters, handleClearAllFilters, handleRemoveFilter, labels, members, states } = props;
+  const { appliedFilters, handleClearAllFilters, handleRemoveFilter, labels, members, projects, states } = props;
+
+  if (!appliedFilters) return null;
+
+  if (Object.keys(appliedFilters).length === 0) return null;
 
   return (
-    <div className="flex items-stretch gap-2 flex-wrap bg-custom-background-100 p-4">
+    <div className="flex items-stretch gap-2 flex-wrap bg-custom-background-100">
       {Object.entries(appliedFilters).map(([key, value]) => {
         const filterKey = key as keyof IIssueFilterOptions;
 
+        if (!value) return;
+
         return (
           <div
             key={filterKey}
             className="capitalize py-1 px-2 border border-custom-border-200 rounded-md flex items-center gap-2 flex-wrap"
           >
             <span className="text-xs text-custom-text-300">{replaceUnderscoreIfSnakeCase(filterKey)}</span>
-            {(filterKey === "assignees" || filterKey === "created_by" || filterKey === "subscriber") && (
+            {membersFilters.includes(filterKey) && (
               <AppliedMembersFilters
                 handleRemove={(val) => handleRemoveFilter(filterKey, val)}
                 members={members}
                 values={value}
               />
             )}
-            {(filterKey === "start_date" || filterKey === "target_date") && (
+            {dateFilters.includes(filterKey) && (
               <AppliedDateFilters handleRemove={(val) => handleRemoveFilter(filterKey, val)} values={value} />
             )}
             {filterKey === "labels" && (
@@ -69,6 +80,13 @@ export const AppliedFiltersList: React.FC<Props> = observer((props) => {
             {filterKey === "state_group" && (
               <AppliedStateGroupFilters handleRemove={(val) => handleRemoveFilter("state_group", val)} values={value} />
             )}
+            {filterKey === "project" && (
+              <AppliedProjectFilters
+                handleRemove={(val) => handleRemoveFilter("project", val)}
+                projects={projects}
+                values={value}
+              />
+            )}
             <button
               type="button"
               className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"

web/components/issues/issue-layouts/filters/applied-filters/global-views-root.tsx

@@ -0,0 +1,102 @@
+import { useEffect } from "react";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// components
+import { AppliedFiltersList } from "components/issues";
+// ui
+import { PrimaryButton } from "components/ui";
+// helpers
+import { areFiltersDifferent } from "helpers/filter.helper";
+// types
+import { IIssueFilterOptions } from "types";
+
+export const GlobalViewsAppliedFiltersRoot = observer(() => {
+  const router = useRouter();
+  const { workspaceSlug, globalViewId } = router.query;
+
+  const {
+    globalViews: globalViewsStore,
+    globalViewFilters: globalViewFiltersStore,
+    project: projectStore,
+    workspace: workspaceStore,
+  } = useMobxStore();
+
+  const viewDetails = globalViewId ? globalViewsStore.globalViewDetails[globalViewId.toString()] : undefined;
+
+  const handleRemoveFilter = (key: keyof IIssueFilterOptions, value: string | null) => {
+    if (!globalViewId) return;
+
+    // remove all values of the key if value is null
+    if (!value) {
+      globalViewFiltersStore.updateStoredFilters(globalViewId.toString(), {
+        [key]: null,
+      });
+      return;
+    }
+
+    // remove the passed value from the key
+    let newValues = globalViewFiltersStore.storedFilters?.[globalViewId.toString()]?.[key] ?? [];
+    newValues = newValues.filter((val) => val !== value);
+
+    globalViewFiltersStore.updateStoredFilters(globalViewId.toString(), {
+      [key]: newValues,
+    });
+  };
+
+  const handleClearAllFilters = () => {
+    if (!globalViewId || !storedFilters) return;
+
+    const newFilters: IIssueFilterOptions = {};
+    Object.keys(storedFilters).forEach((key) => {
+      newFilters[key as keyof IIssueFilterOptions] = null;
+    });
+
+    globalViewFiltersStore.updateStoredFilters(globalViewId.toString(), {
+      ...newFilters,
+    });
+  };
+
+  const handleUpdateView = () => {
+    if (!workspaceSlug || !globalViewId || !viewDetails) return;
+
+    globalViewsStore.updateGlobalView(workspaceSlug.toString(), globalViewId.toString(), {
+      query_data: {
+        ...viewDetails.query_data,
+        filters: {
+          ...(storedFilters ?? {}),
+        },
+      },
+    });
+  };
+
+  const storedFilters = globalViewId ? globalViewFiltersStore.storedFilters[globalViewId.toString()] : undefined;
+
+  // update stored filters when view details are fetched
+  useEffect(() => {
+    if (!globalViewId || !viewDetails) return;
+
+    if (!globalViewFiltersStore.storedFilters[globalViewId.toString()])
+      globalViewFiltersStore.updateStoredFilters(globalViewId.toString(), viewDetails?.query_data?.filters ?? {});
+  }, [globalViewId, globalViewFiltersStore, storedFilters, viewDetails]);
+
+  return (
+    <div className="flex items-start justify-between gap-4 p-4">
+      <AppliedFiltersList
+        appliedFilters={storedFilters ?? {}}
+        handleClearAllFilters={handleClearAllFilters}
+        handleRemoveFilter={handleRemoveFilter}
+        labels={workspaceStore.workspaceLabels ?? undefined}
+        members={workspaceStore.workspaceMembers?.map((m) => m.member)}
+        projects={workspaceSlug ? projectStore.projects[workspaceSlug.toString()] : undefined}
+      />
+      {storedFilters && viewDetails && areFiltersDifferent(storedFilters, viewDetails.query_data.filters ?? {}) && (
+        <PrimaryButton className="whitespace-nowrap" onClick={handleUpdateView}>
+          Update view
+        </PrimaryButton>
+      )}
+    </div>
+  );
+});

web/components/issues/issue-layouts/filters/applied-filters/index.ts

@@ -1,9 +1,11 @@
 export * from "./date";
 export * from "./filters-list";
+export * from "./global-views-root";
 export * from "./label";
 export * from "./members";
 export * from "./module-root";
 export * from "./priority";
+export * from "./project";
 export * from "./root";
 export * from "./state";
 export * from "./state-group";

web/components/issues/issue-layouts/filters/applied-filters/project.tsx

@@ -0,0 +1,49 @@
+import { observer } from "mobx-react-lite";
+
+// icons
+import { X } from "lucide-react";
+// types
+import { IProject } from "types";
+import { renderEmoji } from "helpers/emoji.helper";
+
+type Props = {
+  handleRemove: (val: string) => void;
+  projects: IProject[] | undefined;
+  values: string[];
+};
+
+export const AppliedProjectFilters: React.FC<Props> = observer((props) => {
+  const { handleRemove, projects, values } = props;
+
+  return (
+    <div className="flex items-center gap-1 flex-wrap">
+      {values.map((projectId) => {
+        const projectDetails = projects?.find((p) => p.id === projectId);
+
+        if (!projectDetails) return null;
+
+        return (
+          <div key={projectId} className="text-xs flex items-center gap-1 bg-custom-background-80 p-1 rounded">
+            {projectDetails.emoji ? (
+              <span className="grid flex-shrink-0 place-items-center">{renderEmoji(projectDetails.emoji)}</span>
+            ) : projectDetails.icon_prop ? (
+              <div className="grid place-items-center flex-shrink-0 -my-1">{renderEmoji(projectDetails.icon_prop)}</div>
+            ) : (
+              <span className="grid mr-1 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
+                {projectDetails?.name.charAt(0)}
+              </span>
+            )}
+            <span className="normal-case">{projectDetails.name}</span>
+            <button
+              type="button"
+              className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
+              onClick={() => handleRemove(projectId)}
+            >
+              <X size={10} strokeWidth={2} />
+            </button>
+          </div>
+        );
+      })}
+    </div>
+  );
+});

web/components/issues/issue-layouts/filters/applied-filters/root.tsx

@@ -12,7 +12,7 @@ export const AppliedFiltersRoot: React.FC = observer(() => {
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
 
-  const { issueFilter: issueFilterStore, project: projectStore, moduleFilter: moduleFilterStore } = useMobxStore();
+  const { issueFilter: issueFilterStore, project: projectStore } = useMobxStore();
 
   const userFilters = issueFilterStore.userFilters;
 

web/components/issues/issue-layouts/filters/header/display-filters/display-filters-selection.tsx

@@ -11,17 +11,25 @@ import {
   FilterSubGroupBy,
 } from "components/issues";
 // types
-import { IIssueDisplayFilterOptions } from "types";
+import { IIssueDisplayFilterOptions, IIssueDisplayProperties } from "types";
 import { ILayoutDisplayFiltersOptions } from "constants/issue";
 
 type Props = {
   displayFilters: IIssueDisplayFilterOptions;
+  displayProperties: IIssueDisplayProperties;
   handleDisplayFiltersUpdate: (updatedDisplayFilter: Partial<IIssueDisplayFilterOptions>) => void;
+  handleDisplayPropertiesUpdate: (updatedDisplayProperties: Partial<IIssueDisplayProperties>) => void;
   layoutDisplayFiltersOptions: ILayoutDisplayFiltersOptions | undefined;
 };
 
 export const DisplayFiltersSelection: React.FC<Props> = observer((props) => {
-  const { displayFilters, handleDisplayFiltersUpdate, layoutDisplayFiltersOptions } = props;
+  const {
+    displayFilters,
+    displayProperties,
+    handleDisplayFiltersUpdate,
+    handleDisplayPropertiesUpdate,
+    layoutDisplayFiltersOptions,
+  } = props;
 
   const isDisplayFilterEnabled = (displayFilter: keyof IIssueDisplayFilterOptions) =>
     Object.keys(layoutDisplayFiltersOptions?.display_filters ?? {}).includes(displayFilter);
@@ -31,7 +39,7 @@ export const DisplayFiltersSelection: React.FC<Props> = observer((props) => {
       {/* display properties */}
       {layoutDisplayFiltersOptions?.display_properties && (
         <div className="py-2">
-          <FilterDisplayProperties />
+          <FilterDisplayProperties displayProperties={displayProperties} handleUpdate={handleDisplayPropertiesUpdate} />
         </div>
       )}
 
@@ -52,7 +60,9 @@ export const DisplayFiltersSelection: React.FC<Props> = observer((props) => {
       )}
 
       {/* sub-group by */}
-      {isDisplayFilterEnabled("sub_group_by") && displayFilters.group_by !== null && (
+      {isDisplayFilterEnabled("sub_group_by") &&
+        displayFilters.group_by !== null &&
+        displayFilters.layout === "kanban" && (
           <div className="py-2">
             <FilterSubGroupBy
               selectedGroupBy={displayFilters.group_by}

web/components/issues/issue-layouts/filters/header/display-filters/display-properties.tsx

@@ -1,10 +1,6 @@
 import React from "react";
-
-import { useRouter } from "next/router";
-
-// mobx
 import { observer } from "mobx-react-lite";
-import { useMobxStore } from "lib/mobx/store-provider";
+
 // components
 import { FilterHeader } from "../helpers/filter-header";
 // types
@@ -12,21 +8,16 @@ import { IIssueDisplayProperties } from "types";
 // constants
 import { ISSUE_DISPLAY_PROPERTIES } from "constants/issue";
 
-export const FilterDisplayProperties = observer(() => {
+type Props = {
-  const router = useRouter();
+  displayProperties: IIssueDisplayProperties;
-  const { workspaceSlug, projectId } = router.query;
+  handleUpdate: (updatedDisplayProperties: Partial<IIssueDisplayProperties>) => void;
+};
 
-  const store = useMobxStore();
+export const FilterDisplayProperties: React.FC<Props> = observer((props) => {
-  const { issueFilter: issueFilterStore } = store;
+  const { displayProperties, handleUpdate } = props;
 
   const [previewEnabled, setPreviewEnabled] = React.useState(true);
 
-  const handleDisplayProperties = (property: Partial<IIssueDisplayProperties>) => {
-    if (!workspaceSlug || !projectId) return;
-
-    issueFilterStore.updateDisplayProperties(workspaceSlug.toString(), projectId.toString(), property);
-  };
-
   return (
     <>
       <FilterHeader
@@ -41,13 +32,13 @@ export const FilterDisplayProperties = observer(() => {
               key={displayProperty.key}
               type="button"
               className={`rounded transition-all text-xs border px-2 py-0.5 ${
-                issueFilterStore?.userDisplayProperties?.[displayProperty.key]
+                displayProperties?.[displayProperty.key]
                   ? "bg-custom-primary-100 border-custom-primary-100 text-white"
                   : "border-custom-border-200 hover:bg-custom-background-80"
               }`}
               onClick={() =>
-                handleDisplayProperties({
+                handleUpdate({
-                  [displayProperty.key]: !issueFilterStore?.userDisplayProperties?.[displayProperty.key],
+                  [displayProperty.key]: !displayProperties?.[displayProperty.key],
                 })
               }
             >

web/components/issues/issue-layouts/filters/header/filters/filters-selection.tsx

@@ -1,14 +1,13 @@
 import React, { useState } from "react";
 import { observer } from "mobx-react-lite";
 
-// mobx store
-import { useMobxStore } from "lib/mobx/store-provider";
 // components
 import {
   FilterAssignees,
   FilterCreatedBy,
   FilterLabels,
   FilterPriority,
+  FilterProjects,
   FilterStartDate,
   FilterState,
   FilterStateGroup,
@@ -19,7 +18,7 @@ import { Search, X } from "lucide-react";
 // helpers
 import { getStatesList } from "helpers/state.helper";
 // types
-import { IIssueFilterOptions } from "types";
+import { IIssueFilterOptions, IIssueLabels, IProject, IStateResponse, IUserLite } from "types";
 // constants
 import { ILayoutDisplayFiltersOptions, ISSUE_PRIORITIES, ISSUE_STATE_GROUPS } from "constants/issue";
 import { DATE_FILTER_OPTIONS } from "constants/filters";
@@ -28,7 +27,10 @@ type Props = {
   filters: IIssueFilterOptions;
   handleFiltersUpdate: (key: keyof IIssueFilterOptions, value: string | string[]) => void;
   layoutDisplayFiltersOptions: ILayoutDisplayFiltersOptions | undefined;
-  projectId: string;
+  labels?: IIssueLabels[] | undefined;
+  members?: IUserLite[] | undefined;
+  projects?: IProject[] | undefined;
+  states?: IStateResponse | undefined;
 };
 
 type ViewButtonProps = {
@@ -55,13 +57,11 @@ const ViewButtons = ({ handleLess, handleMore, isViewLessVisible, isViewMoreVisi
 );
 
 export const FilterSelection: React.FC<Props> = observer((props) => {
-  const { filters, handleFiltersUpdate, layoutDisplayFiltersOptions, projectId } = props;
+  const { filters, handleFiltersUpdate, layoutDisplayFiltersOptions, labels, members, projects, states } = props;
 
   const [filtersSearchQuery, setFiltersSearchQuery] = useState("");
 
-  const { project: projectStore } = useMobxStore();
+  const statesList = getStatesList(states);
-
-  const statesList = getStatesList(projectStore.states?.[projectId?.toString() ?? ""]);
 
   const [filtersToRender, setFiltersToRender] = useState<{
     [key in keyof IIssueFilterOptions]: {
@@ -71,20 +71,24 @@ export const FilterSelection: React.FC<Props> = observer((props) => {
   }>({
     assignees: {
       currentLength: 5,
-      totalLength: projectStore.members?.[projectId]?.length ?? 0,
+      totalLength: members?.length ?? 0,
     },
     created_by: {
       currentLength: 5,
-      totalLength: projectStore.members?.[projectId]?.length ?? 0,
+      totalLength: members?.length ?? 0,
     },
     labels: {
       currentLength: 5,
-      totalLength: projectStore.labels?.[projectId]?.length ?? 0,
+      totalLength: labels?.length ?? 0,
     },
     priority: {
       currentLength: 5,
       totalLength: ISSUE_PRIORITIES.length,
     },
+    project: {
+      currentLength: 5,
+      totalLength: projects?.length ?? 0,
+    },
     state_group: {
       currentLength: 5,
       totalLength: ISSUE_STATE_GROUPS.length,
@@ -219,7 +223,7 @@ export const FilterSelection: React.FC<Props> = observer((props) => {
               handleUpdate={(val) => handleFiltersUpdate("state", val)}
               itemsToRender={filtersToRender.state?.currentLength ?? 0}
               searchQuery={filtersSearchQuery}
-              states={projectStore.states?.[projectId]}
+              states={states}
               viewButtons={
                 <ViewButtons
                   isViewLessVisible={isViewLessVisible("state")}
@@ -239,7 +243,7 @@ export const FilterSelection: React.FC<Props> = observer((props) => {
               appliedFilters={filters.assignees ?? null}
               handleUpdate={(val) => handleFiltersUpdate("assignees", val)}
               itemsToRender={filtersToRender.assignees?.currentLength ?? 0}
-              members={projectStore.members?.[projectId]?.map((m) => m.member) ?? undefined}
+              members={members}
               searchQuery={filtersSearchQuery}
               viewButtons={
                 <ViewButtons
@@ -260,7 +264,7 @@ export const FilterSelection: React.FC<Props> = observer((props) => {
               appliedFilters={filters.created_by ?? null}
               handleUpdate={(val) => handleFiltersUpdate("created_by", val)}
               itemsToRender={filtersToRender.created_by?.currentLength ?? 0}
-              members={projectStore.members?.[projectId]?.map((m) => m.member) ?? undefined}
+              members={members}
               searchQuery={filtersSearchQuery}
               viewButtons={
                 <ViewButtons
@@ -281,7 +285,7 @@ export const FilterSelection: React.FC<Props> = observer((props) => {
               appliedFilters={filters.labels ?? null}
               handleUpdate={(val) => handleFiltersUpdate("labels", val)}
               itemsToRender={filtersToRender.labels?.currentLength ?? 0}
-              labels={projectStore.labels?.[projectId] ?? undefined}
+              labels={labels}
               searchQuery={filtersSearchQuery}
               viewButtons={
                 <ViewButtons
@@ -295,6 +299,27 @@ export const FilterSelection: React.FC<Props> = observer((props) => {
           </div>
         )}
 
+        {/* project */}
+        {isFilterEnabled("project") && (
+          <div className="py-2">
+            <FilterProjects
+              appliedFilters={filters.project ?? null}
+              projects={projects}
+              handleUpdate={(val) => handleFiltersUpdate("project", val)}
+              itemsToRender={filtersToRender.project?.currentLength ?? 0}
+              searchQuery={filtersSearchQuery}
+              viewButtons={
+                <ViewButtons
+                  isViewLessVisible={isViewLessVisible("project")}
+                  isViewMoreVisible={isViewMoreVisible("project")}
+                  handleLess={() => handleViewLess("project")}
+                  handleMore={() => handleViewMore("project")}
+                />
+              }
+            />
+          </div>
+        )}
+
         {/* start_date */}
         {isFilterEnabled("start_date") && (
           <div className="py-2">

web/components/issues/issue-layouts/filters/header/filters/index.ts

@@ -3,6 +3,7 @@ export * from "./created-by";
 export * from "./filters-selection";
 export * from "./labels";
 export * from "./priority";
+export * from "./project";
 export * from "./start-date";
 export * from "./state-group";
 export * from "./state";

web/components/issues/issue-layouts/filters/header/filters/project.tsx

@@ -0,0 +1,81 @@
+import React, { useState } from "react";
+
+// components
+import { FilterHeader, FilterOption } from "components/issues";
+// ui
+import { Loader } from "components/ui";
+// helpers
+import { renderEmoji } from "helpers/emoji.helper";
+// types
+import { IProject } from "types";
+
+type Props = {
+  appliedFilters: string[] | null;
+  handleUpdate: (val: string) => void;
+  itemsToRender: number;
+  projects: IProject[] | undefined;
+  searchQuery: string;
+  viewButtons: React.ReactNode;
+};
+
+export const FilterProjects: React.FC<Props> = (props) => {
+  const { appliedFilters, handleUpdate, itemsToRender, projects, searchQuery, viewButtons } = props;
+
+  const [previewEnabled, setPreviewEnabled] = useState(true);
+
+  const appliedFiltersCount = appliedFilters?.length ?? 0;
+
+  const filteredOptions = projects?.filter((project) => project.name.toLowerCase().includes(searchQuery.toLowerCase()));
+
+  return (
+    <>
+      <FilterHeader
+        title={`Project${appliedFiltersCount > 0 ? ` (${appliedFiltersCount})` : ""}`}
+        isPreviewEnabled={previewEnabled}
+        handleIsPreviewEnabled={() => setPreviewEnabled(!previewEnabled)}
+      />
+      {previewEnabled && (
+        <div>
+          {filteredOptions ? (
+            filteredOptions.length > 0 ? (
+              <>
+                {filteredOptions.slice(0, itemsToRender).map((project) => (
+                  <FilterOption
+                    key={`project-${project.id}`}
+                    isChecked={appliedFilters?.includes(project.id) ? true : false}
+                    onClick={() => handleUpdate(project.id)}
+                    icon={
+                      project.emoji ? (
+                        <span className="grid flex-shrink-0 place-items-center text-sm">
+                          {renderEmoji(project.emoji)}
+                        </span>
+                      ) : project.icon_prop ? (
+                        <div className="grid place-items-center flex-shrink-0 -my-1">
+                          {renderEmoji(project.icon_prop)}
+                        </div>
+                      ) : (
+                        <span className="grid mr-1 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
+                          {project?.name.charAt(0)}
+                        </span>
+                      )
+                    }
+                    title={project.name}
+                  />
+                ))}
+                {viewButtons}
+              </>
+            ) : (
+              <p className="text-xs text-custom-text-400 italic">No matches found</p>
+            )
+          ) : (
+            <Loader className="space-y-2">
+              <Loader.Item height="20px" />
+              <Loader.Item height="20px" />
+              <Loader.Item height="20px" />
+            </Loader>
+          )}
+        </div>
+      )}
+    </>
+  );
+};

web/components/issues/issue-layouts/filters/header/helpers/dropdown.tsx

@@ -1,7 +1,7 @@
-import React, { Fragment } from "react";
+import React, { Fragment, useState } from "react";
-
+import { usePopper } from "react-popper";
-// headless ui
 import { Popover, Transition } from "@headlessui/react";
+
 // icons
 import { ChevronUp } from "lucide-react";
 
@@ -13,17 +13,27 @@ type Props = {
 export const FiltersDropdown: React.FC<Props> = (props) => {
   const { children, title = "Dropdown" } = props;
 
+  const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
+  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
+
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    placement: "auto",
+  });
+
   return (
-    <Popover className="relative">
+    <Popover>
       {({ open }) => {
         if (open) {
         }
         return (
           <>
-            <Popover.Button
+            <Popover.Button as={React.Fragment}>
+              <button
+                type="button"
                 className={`outline-none border border-custom-border-200 text-xs rounded flex items-center gap-2 px-2 py-1.5 hover:bg-custom-background-80 ${
                   open ? "text-custom-text-100" : "text-custom-text-200"
                 }`}
+                ref={setReferenceElement}
               >
                 <div className="font-medium">{title}</div>
                 <div
@@ -31,6 +41,7 @@ export const FiltersDropdown: React.FC<Props> = (props) => {
                 >
                   <ChevronUp width={14} strokeWidth={2} />
                 </div>
+              </button>
             </Popover.Button>
             <Transition
               as={Fragment}
@@ -41,8 +52,15 @@ export const FiltersDropdown: React.FC<Props> = (props) => {
               leaveFrom="opacity-100 translate-y-0"
               leaveTo="opacity-0 translate-y-1"
             >
-              <Popover.Panel className="absolute right-0 z-10 mt-1 bg-custom-background-100 border border-custom-border-200 shadow-custom-shadow-rg rounded overflow-hidden">
+              <Popover.Panel>
+                <div
+                  className="z-10 bg-custom-background-100 border border-custom-border-200 shadow-custom-shadow-rg rounded overflow-hidden"
+                  ref={setPopperElement}
+                  style={styles.popper}
+                  {...attributes.popper}
+                >
                   <div className="w-[18.75rem] max-h-[37.5rem] flex flex-col overflow-hidden">{children}</div>
+                </div>
               </Popover.Panel>
             </Transition>
           </>

web/components/issues/issue-layouts/filters/header/helpers/filter-option.tsx

@@ -27,7 +27,7 @@ export const FilterOption: React.FC<Props> = (props) => {
         {isChecked && <Check size={10} strokeWidth={3} />}
       </div>
       <div className="flex items-center gap-2 truncate">
-        <div className="flex-shrink-0 grid place-items-center">{icon}</div>
+        {icon && <div className="flex-shrink-0 grid place-items-center w-5">{icon}</div>}
         <div className="flex-grow truncate text-custom-text-200 text-xs">{title}</div>
       </div>
     </button>

web/components/issues/issue-layouts/global-views-all-layouts.tsx

@@ -0,0 +1,88 @@
+import React, { useCallback } from "react";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+import useSWR from "swr";
+
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// components
+import { SpreadsheetView } from "components/core";
+import { GlobalViewsAppliedFiltersRoot } from "components/issues";
+// types
+import { IIssueDisplayFilterOptions, TStaticViewTypes } from "types";
+// fetch-keys
+import { GLOBAL_VIEW_ISSUES } from "constants/fetch-keys";
+
+type Props = {
+  type?: TStaticViewTypes;
+};
+
+export const GlobalViewsAllLayouts: React.FC<Props> = observer((props) => {
+  const { type } = props;
+
+  const router = useRouter();
+  const { workspaceSlug, globalViewId } = router.query;
+
+  const {
+    globalViews: globalViewsStore,
+    globalViewIssues: globalViewIssuesStore,
+    globalViewFilters: globalViewFiltersStore,
+    workspaceFilter: workspaceFilterStore,
+  } = useMobxStore();
+
+  const viewDetails = globalViewId ? globalViewsStore.globalViewDetails[globalViewId.toString()] : undefined;
+
+  const storedFilters = globalViewId ? globalViewFiltersStore.storedFilters[globalViewId.toString()] : undefined;
+
+  useSWR(
+    workspaceSlug && globalViewId && viewDetails ? GLOBAL_VIEW_ISSUES(globalViewId.toString()) : null,
+    workspaceSlug && globalViewId && viewDetails
+      ? () => {
+          globalViewIssuesStore.fetchViewIssues(workspaceSlug.toString(), globalViewId.toString(), storedFilters ?? {});
+        }
+      : null
+  );
+
+  useSWR(
+    workspaceSlug && type ? GLOBAL_VIEW_ISSUES(type) : null,
+    workspaceSlug && type
+      ? () => {
+          globalViewIssuesStore.fetchStaticIssues(workspaceSlug.toString(), type);
+        }
+      : null
+  );
+
+  const handleDisplayFiltersUpdate = useCallback(
+    (updatedDisplayFilter: Partial<IIssueDisplayFilterOptions>) => {
+      if (!workspaceSlug) return;
+
+      workspaceFilterStore.updateWorkspaceFilters(workspaceSlug.toString(), {
+        display_filters: updatedDisplayFilter,
+      });
+    },
+    [workspaceFilterStore, workspaceSlug]
+  );
+
+  const issues = type
+    ? globalViewIssuesStore.viewIssues?.[type]
+    : globalViewId
+    ? globalViewIssuesStore.viewIssues?.[globalViewId.toString()]
+    : undefined;
+
+  return (
+    <div className="relative w-full h-full flex flex-col overflow-auto">
+      <GlobalViewsAppliedFiltersRoot />
+      <div className="h-full w-full">
+        <SpreadsheetView
+          displayProperties={workspaceFilterStore.workspaceDisplayProperties}
+          displayFilters={workspaceFilterStore.workspaceDisplayFilters}
+          handleDisplayFilterUpdate={handleDisplayFiltersUpdate}
+          issues={issues}
+          handleIssueAction={() => {}}
+          handleUpdateIssue={() => {}}
+          disableUserActions={false}
+        />
+      </div>
+    </div>
+  );
+});

web/components/issues/issue-layouts/index.ts

@@ -7,6 +7,7 @@ export * from "./calendar";
 export * from "./gantt";
 export * from "./kanban";
 export * from "./spreadsheet";
+export * from "./global-views-all-layouts";
 
 // cycle root layout
 export * from "./cycle-layout-root";

web/components/issues/modal.tsx

@@ -18,7 +18,6 @@ import useInboxView from "hooks/use-inbox-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
@@ -36,7 +35,7 @@ import {
   VIEW_ISSUES,
   INBOX_ISSUES,
   PROJECT_DRAFT_ISSUES_LIST_WITH_PARAMS,
-  WORKSPACE_VIEW_ISSUES,
+  GLOBAL_VIEW_ISSUES,
 } from "constants/fetch-keys";
 // constants
 import { INBOX_ISSUE_SOURCE } from "constants/inbox";
@@ -92,7 +91,7 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = ({
 
   const { groupedIssues, mutateMyIssues } = useMyIssues(workspaceSlug?.toString());
 
-  const { params: globalViewParams } = useWorkspaceView();
+  const globalViewParams = {};
 
   const { setValue: setValueInLocalStorage, clearValue: clearLocalStorageValue } = useLocalStorage<any>(
     "draftedIssue",
@@ -342,10 +341,10 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = ({
 
           if (payload.parent && payload.parent !== "") mutate(SUB_ISSUES(payload.parent));
 
-          if (globalViewId) mutate(WORKSPACE_VIEW_ISSUES(globalViewId.toString(), globalViewParams));
+          if (globalViewId) mutate(GLOBAL_VIEW_ISSUES(globalViewId.toString(), globalViewParams));
 
           if (currentWorkspaceIssuePath)
-            mutate(WORKSPACE_VIEW_ISSUES(workspaceSlug.toString(), currentWorkspaceIssuePath?.params));
+            mutate(GLOBAL_VIEW_ISSUES(workspaceSlug.toString(), currentWorkspaceIssuePath?.params));
         })
         .catch(() => {
           setToastAlert({

web/components/issues/workspace-views/workpace-view-issues.tsx

@@ -1,232 +0,0 @@
-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";
-import useToast from "hooks/use-toast";
-// 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, globalViewId } = router.query;
-
-  const { setToastAlert } = useToast();
-
-  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 ||
-        (filters.filters[key as keyof IWorkspaceIssueFilterOptions]?.length ?? 0) <= 0
-    );
-
-  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 (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"
-                    >
-                      {!globalViewId && <PlusIcon className="h-4 w-4" />}
-                      {globalViewId ? "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>
-    </>
-  );
-};

web/components/issues/workspace-views/workspace-all-issue.tsx

@@ -1,236 +0,0 @@
-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, globalViewId } = 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 ||
-        (filters.filters[key as keyof IWorkspaceIssueFilterOptions]?.length ?? 0) <= 0
-    );
-
-  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 (globalViewId) handleFilters("filters", filters.filters, true);
-                      else
-                        setCreateViewModal({
-                          query: filters.filters,
-                        });
-                    }}
-                    className="flex items-center gap-2 text-sm"
-                  >
-                    {!globalViewId && <PlusIcon className="h-4 w-4" />}
-                    {globalViewId ? "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>
-    </>
-  );
-};

web/components/issues/workspace-views/workspace-assigned-issue.tsx

@@ -1,148 +0,0 @@
-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: 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>
-    </>
-  );
-};

web/components/issues/workspace-views/workspace-created-issues.tsx

@@ -1,147 +0,0 @@
-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>
-    </>
-  );
-};

web/components/issues/workspace-views/workspace-issue-view-option.tsx

@@ -1,116 +0,0 @@
-import React from "react";
-
-import { useRouter } from "next/router";
-
-// hooks
-import { useWorkspaceView } from "hooks/use-workspace-view";
-// components
-import { GlobalSelectFilters } from "components/workspace/views/global-select-filters";
-// ui
-import { Tooltip } from "components/ui";
-// icons
-import { FormatListBulletedOutlined } from "@mui/icons-material";
-import { CreditCard } from "lucide-react";
-// helpers
-import { replaceUnderscoreIfSnakeCase } from "helpers/string.helper";
-import { checkIfArraysHaveSameElements } from "helpers/array.helper";
-// types
-import { TIssueViewOptions } from "types";
-
-const issueViewOptions: { type: TIssueViewOptions; Icon: any }[] = [
-  {
-    type: "list",
-    Icon: FormatListBulletedOutlined,
-  },
-  {
-    type: "spreadsheet",
-    Icon: CreditCard,
-  },
-];
-
-export const WorkspaceIssuesViewOptions: React.FC = () => {
-  const router = useRouter();
-  const { workspaceSlug, globalViewId } = router.query;
-
-  const { filters, handleFilters } = useWorkspaceView();
-
-  const isWorkspaceViewPath = router.pathname.includes("workspace-views/all-issues");
-
-  const showFilters = isWorkspaceViewPath || globalViewId;
-
-  return (
-    <div className="flex items-center gap-2">
-      <div className="flex items-center gap-x- px-1 py-0.5 rounded bg-custom-sidebar-background-90 ">
-        {issueViewOptions.map((option) => (
-          <Tooltip
-            key={option.type}
-            tooltipContent={
-              <span className="capitalize">{replaceUnderscoreIfSnakeCase(option.type)} View</span>
-            }
-            position="bottom"
-          >
-            <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 ${
-                filters.display_filters?.layout === option.type
-                  ? "bg-custom-sidebar-background-100 shadow-sm"
-                  : "text-custom-sidebar-text-200"
-              }`}
-              onClick={() => {
-                handleFilters("display_filters", { layout: option.type }, true);
-                if (option.type === "spreadsheet")
-                  router.push(`/${workspaceSlug}/workspace-views/all-issues`);
-                else router.push(`/${workspaceSlug}/workspace-views`);
-              }}
-            >
-              <option.Icon
-                sx={{
-                  fontSize: 16,
-                }}
-                className={option.type === "spreadsheet" ? "h-4 w-4" : ""}
-              />
-            </button>
-          </Tooltip>
-        ))}
-      </div>
-
-      {showFilters && (
-        <>
-          <GlobalSelectFilters
-            filters={filters.filters}
-            onSelect={(option) => {
-              const key = option.key as keyof typeof filters.filters;
-
-              if (key === "start_date" || key === "target_date") {
-                const valueExists = checkIfArraysHaveSameElements(
-                  filters.filters?.[key] ?? [],
-                  option.value
-                );
-
-                handleFilters("filters", {
-                  ...filters,
-                  [key]: valueExists ? null : option.value,
-                });
-              } else {
-                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
-                    ),
-                  });
-                }
-              }
-            }}
-            direction="left"
-          />
-        </>
-      )}
-    </div>
-  );
-};

web/components/issues/workspace-views/workspace-subscribed-issue.tsx

@@ -1,148 +0,0 @@
-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>
-    </>
-  );
-};

web/components/workspace/index.ts

@@ -1,3 +1,4 @@
+export * from "./views";
 export * from "./activity-graph";
 export * from "./completed-issues-graph";
 export * from "./create-workspace-form";

web/components/workspace/views/default-view-list-item.tsx

@@ -0,0 +1,36 @@
+import { useRouter } from "next/router";
+import Link from "next/link";
+import { observer } from "mobx-react-lite";
+
+// icons
+import { Sparkles } from "lucide-react";
+// helpers
+import { truncateText } from "helpers/string.helper";
+
+type Props = { view: { key: string; label: string } };
+
+export const GlobalDefaultViewListItem: React.FC<Props> = observer((props) => {
+  const { view } = props;
+
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  return (
+    <div className="group hover:bg-custom-background-90 border-b border-custom-border-200">
+      <Link href={`/${workspaceSlug}/workspace-views/${view.key}`}>
+        <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="grid place-items-center h-10 w-10 rounded bg-custom-background-90 group-hover:bg-custom-background-100">
+                <Sparkles size={14} strokeWidth={2} />
+              </div>
+              <div className="flex flex-col">
+                <p className="truncate text-sm leading-4 font-medium">{truncateText(view.label, 75)}</p>
+              </div>
+            </div>
+          </div>
+        </a>
+      </Link>
+    </div>
+  );
+});

web/components/workspace/views/delete-view-modal.tsx

@@ -1,13 +1,10 @@
 import React, { useState } from "react";
-
 import { useRouter } from "next/router";
-
-import { mutate } from "swr";
-
-// headless ui
 import { Dialog, Transition } from "@headlessui/react";
-// services
+import { observer } from "mobx-react-lite";
-import workspaceService from "services/workspace.service";
+
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
 // hooks
 import useToast from "hooks/use-toast";
 // ui
@@ -16,58 +13,50 @@ import { DangerButton, SecondaryButton } from "components/ui";
 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 = {
+  data: IWorkspaceView;
   isOpen: boolean;
-  setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  onClose: () => void;
-  data: IWorkspaceView | null;
 };
 
-export const DeleteWorkspaceViewModal: React.FC<Props> = ({ isOpen, data, setIsOpen }) => {
+export const DeleteGlobalViewModal: React.FC<Props> = observer((props) => {
+  const { data, isOpen, onClose } = props;
+
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
 
   const router = useRouter();
   const { workspaceSlug } = router.query;
 
+  const { globalViews: globalViewsStore } = useMobxStore();
+
   const { setToastAlert } = useToast();
 
   const handleClose = () => {
-    setIsOpen(false);
+    onClose();
-    setIsDeleteLoading(false);
   };
 
   const handleDeletion = async () => {
+    if (!workspaceSlug) return;
+
     setIsDeleteLoading(true);
 
-    if (!workspaceSlug || !data) return;
+    await globalViewsStore
-
+      .deleteGlobalView(workspaceSlug.toString(), data.id)
-    await workspaceService
+      .catch(() =>
-      .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.",
+          message: "Something went wrong while deleting the view. Please try again.",
-        });
         })
+      )
       .finally(() => {
         setIsDeleteLoading(false);
+        handleClose();
       });
+
+    // remove filters from local storage
+    localStorage.removeItem(`global_view_filters/${data.id}`);
   };
 
   return (
@@ -100,26 +89,17 @@ export const DeleteWorkspaceViewModal: React.FC<Props> = ({ isOpen, data, setIsO
                 <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
+                      <ExclamationTriangleIcon className="h-6 w-6 text-red-600" aria-hidden="true" />
-                        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
+                      <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-custom-text-100">
-                        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">
+                          <span className="break-words font-medium text-custom-text-100">{data?.name}</span>? All of the
-                            {data?.name}
+                          data related to the view will be permanently removed. This action cannot be undone.
-                          </span>
-                          ? All of the data related to the view will be permanently removed. This
-                          action cannot be undone.
                         </p>
                       </div>
                     </div>
@@ -138,4 +118,4 @@ export const DeleteWorkspaceViewModal: React.FC<Props> = ({ isOpen, data, setIsO
       </Dialog>
     </Transition.Root>
   );
-};
+});

web/components/workspace/views/form.tsx

@@ -1,38 +1,26 @@
 import { useEffect } from "react";
-
 import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+import { Controller, useForm } from "react-hook-form";
 
-import useSWR from "swr";
+// mobx store
-
+import { useMobxStore } from "lib/mobx/store-provider";
-// 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 { AppliedFiltersList, FilterSelection, FiltersDropdown } from "components/issues";
-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";
-import { IWorkspaceView } from "types/workspace-views";
+// constants
-// fetch-keys
+import { ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "constants/issue";
-import { WORKSPACE_LABELS } from "constants/fetch-keys";
-import { STATE_GROUP } from "constants/project";
 
 type Props = {
-  handleFormSubmit: (values: IWorkspaceView) => Promise<void>;
+  handleFormSubmit: (values: Partial<IWorkspaceView>) => Promise<void>;
   handleClose: () => void;
-  status: boolean;
+  data?: IWorkspaceView;
-  data?: IWorkspaceView | null;
+  preLoadedData?: Partial<IWorkspaceView>;
-  preLoadedData?: Partial<IWorkspaceView> | null;
 };
 
 const defaultValues: Partial<IWorkspaceView> = {
@@ -40,41 +28,31 @@ const defaultValues: Partial<IWorkspaceView> = {
   description: "",
 };
 
-export const WorkspaceViewForm: React.FC<Props> = ({
+export const WorkspaceViewForm: React.FC<Props> = observer((props) => {
-  handleFormSubmit,
+  const { handleFormSubmit, handleClose, data, preLoadedData } = props;
-  handleClose,
+
-  status,
-  data,
-  preLoadedData,
-}) => {
   const router = useRouter();
   const { workspaceSlug } = router.query;
 
+  const { workspace: workspaceStore, project: projectStore } = useMobxStore();
+
   const {
-    register,
+    control,
     formState: { errors, isSubmitting },
     handleSubmit,
+    register,
     reset,
-    watch,
     setValue,
-  } = useForm<any>({
+    watch,
+  } = useForm({
     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 handleCreateUpdateView = async (formData: Partial<IWorkspaceView>) => {
-  const joinedProjects = allProjects?.filter((p) => p.is_member);
-
-  const handleCreateUpdateView = async (formData: IWorkspaceView) => {
     await handleFormSubmit(formData);
 
     reset({
@@ -82,20 +60,6 @@ export const WorkspaceViewForm: React.FC<Props> = ({
     });
   };
 
-  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,
@@ -104,18 +68,24 @@ export const WorkspaceViewForm: React.FC<Props> = ({
     });
   }, [data, preLoadedData, reset]);
 
+  const selectedFilters = watch("query_data")?.filters;
+
+  const clearAllFilters = () => {
+    if (!selectedFilters) return;
+
+    setValue("query_data.filters", {});
+  };
+
   useEffect(() => {
-    if (status && data) {
+    if (!data) return;
-      setValue("query", data.query_data);
+
-    }
+    reset({ ...data });
-  }, [data, status, setValue]);
+  }, [data, reset]);
 
   return (
     <form onSubmit={handleSubmit(handleCreateUpdateView)}>
       <div className="space-y-5">
-        <h3 className="text-lg font-medium leading-6 text-custom-text-100">
+        <h3 className="text-lg font-medium leading-6 text-custom-text-100">{data ? "Update" : "Create"} View</h3>
-          {status ? "Update" : "Create"} View
-        </h3>
         <div className="space-y-3">
           <div>
             <Input
@@ -147,59 +117,56 @@ export const WorkspaceViewForm: React.FC<Props> = ({
             />
           </div>
           <div>
-            <GlobalSelectFilters
+            <Controller
-              filters={filters}
+              control={control}
-              onSelect={(option) => {
+              name="query_data.filters"
-                const key = option.key as keyof typeof filters;
+              render={({ field: { onChange, value: filters } }) => (
+                <FiltersDropdown title="Filters">
+                  <FilterSelection
+                    filters={filters ?? {}}
+                    handleFiltersUpdate={(key, value) => {
+                      const newValues = filters?.[key] ?? [];
 
-                if (key === "start_date" || key === "target_date") {
+                      if (Array.isArray(value)) {
-                  const valueExists = checkIfArraysHaveSameElements(
+                        value.forEach((val) => {
-                    filters?.[key] ?? [],
+                          if (!newValues.includes(val)) newValues.push(val);
-                    option.value
+                        });
-                  );
-
-                  setValue("query", {
-                    ...filters,
-                    [key]: valueExists ? null : option.value,
-                  } as IQuery);
                       } else {
-                  if (!filters?.[key]?.includes(option.value))
+                        if (filters?.[key]?.includes(value)) newValues.splice(newValues.indexOf(value), 1);
-                    setValue("query", {
+                        else newValues.push(value);
-                      ...filters,
-                      [key]: [...((filters?.[key] as any[]) ?? []), option.value],
-                    });
-                  else {
-                    setValue("query", {
-                      ...filters,
-                      [key]: (filters?.[key] as any[])?.filter((item) => item !== option.value),
-                    });
-                  }
                       }
+
+                      onChange({
+                        ...filters,
+                        [key]: newValues,
+                      });
                     }}
+                    layoutDisplayFiltersOptions={ISSUE_DISPLAY_FILTERS_BY_LAYOUT.my_issues.spreadsheet}
+                    labels={workspaceStore.workspaceLabels ?? undefined}
+                    projects={workspaceSlug ? projectStore.projects[workspaceSlug.toString()] : undefined}
+                  />
+                </FiltersDropdown>
+              )}
             />
           </div>
+          {selectedFilters && Object.keys(selectedFilters).length > 0 && (
             <div>
-            <WorkspaceFiltersList
+              <AppliedFiltersList
-              filters={filters}
+                appliedFilters={selectedFilters}
-              labels={labelOptions}
+                handleClearAllFilters={clearAllFilters}
+                handleRemoveFilter={() => {}}
+                labels={workspaceStore.workspaceLabels ?? undefined}
                 members={memberOptions}
-              project={joinedProjects}
+                states={undefined}
-              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
+          {data
             ? isSubmitting
               ? "Updating View..."
               : "Update View"
@@ -210,4 +177,4 @@ export const WorkspaceViewForm: React.FC<Props> = ({
       </div>
     </form>
   );
-};
+});

web/components/workspace/views/global-select-filters.tsx

@@ -1,301 +0,0 @@
-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}
-      />
-    </>
-  );
-};

web/components/workspace/views/header.tsx

@@ -0,0 +1,67 @@
+import React, { useState } from "react";
+import { useRouter } from "next/router";
+import Link from "next/link";
+import { observer } from "mobx-react-lite";
+
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// components
+import { CreateUpdateWorkspaceViewModal } from "components/workspace";
+// icon
+import { PlusIcon } from "lucide-react";
+// constants
+import { DEFAULT_GLOBAL_VIEWS_LIST } from "constants/workspace";
+
+export const GlobalViewsHeader: React.FC = observer(() => {
+  const [createViewModal, setCreateViewModal] = useState(false);
+
+  const router = useRouter();
+  const { workspaceSlug, globalViewId } = router.query;
+
+  const { globalViews: globalViewsStore } = useMobxStore();
+
+  const isTabSelected = (tabKey: string) => router.pathname.includes(tabKey);
+
+  return (
+    <>
+      <CreateUpdateWorkspaceViewModal isOpen={createViewModal} onClose={() => setCreateViewModal(false)} />
+      <div className="group flex items-center px-4 overflow-x-scroll relative border-b border-custom-border-200">
+        {DEFAULT_GLOBAL_VIEWS_LIST.map((tab) => (
+          <Link key={tab.key} href={`/${workspaceSlug}/workspace-views/${tab.key}`}>
+            <a
+              className={`border-b-2 min-w-min p-3 text-sm font-medium outline-none whitespace-nowrap flex-shrink-0 ${
+                isTabSelected(tab.key)
+                  ? "border-custom-primary-100 text-custom-primary-100"
+                  : "border-transparent hover:border-custom-border-200 hover:text-custom-text-400"
+              }`}
+            >
+              {tab.label}
+            </a>
+          </Link>
+        ))}
+
+        {globalViewsStore.globalViewsList?.map((view) => (
+          <Link key={view.id} href={`/${workspaceSlug}/workspace-views/${view.id}`}>
+            <a
+              className={`border-b-2 p-3 text-sm font-medium outline-none whitespace-nowrap flex-shrink-0 ${
+                view.id === globalViewId
+                  ? "border-custom-primary-100 text-custom-primary-100"
+                  : "border-transparent hover:border-custom-border-200 hover:text-custom-text-400"
+              }`}
+            >
+              {view.name}
+            </a>
+          </Link>
+        ))}
+
+        <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={() => setCreateViewModal(true)}
+        >
+          <PlusIcon className="h-4 w-4 text-custom-primary-200" />
+        </button>
+      </div>
+    </>
+  );
+});

web/components/workspace/views/index.ts

@@ -0,0 +1,7 @@
+export * from "./default-view-list-item";
+export * from "./delete-view-modal";
+export * from "./form";
+export * from "./header";
+export * from "./modal";
+export * from "./view-list-item";
+export * from "./views-list";

web/components/workspace/views/modal.tsx

@@ -1,116 +1,103 @@
 import React from "react";
-
 import { useRouter } from "next/router";
-
+import { observer } from "mobx-react-lite";
-import { mutate } from "swr";
-
-// headless ui
 import { Dialog, Transition } from "@headlessui/react";
-// services
+
-import workspaceService from "services/workspace.service";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
 // hooks
 import useToast from "hooks/use-toast";
 // components
-import { WorkspaceViewForm } from "components/workspace/views/form";
+import { WorkspaceViewForm } from "components/workspace";
 // types
 import { IWorkspaceView } from "types/workspace-views";
-// fetch-keys
-import { WORKSPACE_VIEWS_LIST } from "constants/fetch-keys";
 
 type Props = {
+  data?: IWorkspaceView;
   isOpen: boolean;
-  handleClose: () => void;
+  onClose: () => void;
-  data?: IWorkspaceView | null;
+  preLoadedData?: Partial<IWorkspaceView>;
-  preLoadedData?: Partial<IWorkspaceView> | null;
 };
 
-export const CreateUpdateWorkspaceViewModal: React.FC<Props> = ({
+export const CreateUpdateWorkspaceViewModal: React.FC<Props> = observer((props) => {
-  isOpen,
+  const { isOpen, onClose, data, preLoadedData } = props;
-  handleClose,
+
-  data,
-  preLoadedData,
-}) => {
   const router = useRouter();
   const { workspaceSlug } = router.query;
 
+  const { globalViews: globalViewsStore } = useMobxStore();
+
   const { setToastAlert } = useToast();
 
-  const onClose = () => {
+  const handleClose = () => {
-    handleClose();
+    onClose();
   };
 
-  const createView = async (payload: any) => {
+  const createView = async (payload: Partial<IWorkspaceView>) => {
-    const payloadData = {
+    if (!workspaceSlug) return;
+
+    const payloadData: Partial<IWorkspaceView> = {
       ...payload,
-      query_data: {
+      query: {
-        filters: payload.query,
+        ...payload.query_data?.filters,
       },
     };
-    await workspaceService
+
-      .createView(workspaceSlug as string, payloadData)
+    await globalViewsStore
+      .createGlobalView(workspaceSlug.toString(), payloadData)
       .then((res) => {
-        mutate(WORKSPACE_VIEWS_LIST(workspaceSlug as string));
-        handleClose();
-
-        router.replace(`/${workspaceSlug}/workspace-views/issues?globalViewId=${res.id}`);
-
         setToastAlert({
           type: "success",
           title: "Success!",
           message: "View created successfully.",
         });
+
+        router.push(`/${workspaceSlug}/workspace-views/${res.id}`);
       })
-      .catch(() => {
+      .catch(() =>
         setToastAlert({
           type: "error",
           title: "Error!",
           message: "View could not be created. Please try again.",
-        });
+        })
-      });
+      );
   };
 
-  const updateView = async (payload: any) => {
+  const updateView = async (payload: Partial<IWorkspaceView>) => {
-    const payloadData = {
+    if (!workspaceSlug || !data) return;
+
+    const payloadData: Partial<IWorkspaceView> = {
       ...payload,
-      query_data: {
+      query: {
-        filters: payload.query,
+        ...payload.query_data?.filters,
       },
     };
-    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();
 
+    await globalViewsStore
+      .updateGlobalView(workspaceSlug.toString(), data.id, payloadData)
+      .then(() =>
         setToastAlert({
           type: "success",
           title: "Success!",
           message: "View updated successfully.",
-        });
         })
-      .catch(() => {
+      )
+      .catch(() =>
         setToastAlert({
           type: "error",
           title: "Error!",
           message: "View could not be updated. Please try again.",
-        });
+        })
-      });
+      );
   };
 
-  const handleFormSubmit = async (formData: any) => {
+  const handleFormSubmit = async (formData: Partial<IWorkspaceView>) => {
     if (!workspaceSlug) return;
 
     if (!data) await createView(formData);
     else await updateView(formData);
+
+    handleClose();
   };
 
   return (
@@ -143,7 +130,6 @@ export const CreateUpdateWorkspaceViewModal: React.FC<Props> = ({
                 <WorkspaceViewForm
                   handleFormSubmit={handleFormSubmit}
                   handleClose={handleClose}
-                  status={data ? true : false}
                   data={data}
                   preLoadedData={preLoadedData}
                 />
@@ -154,4 +140,4 @@ export const CreateUpdateWorkspaceViewModal: React.FC<Props> = ({
       </Dialog>
     </Transition.Root>
   );
-};
+});

web/components/workspace/views/single-workspace-view-item.tsx

@@ -1,110 +0,0 @@
-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>
-  );
-};

web/components/workspace/views/view-list-item.tsx

@@ -0,0 +1,97 @@
+import { useRouter } from "next/router";
+import Link from "next/link";
+import { observer } from "mobx-react-lite";
+import { useState } from "react";
+
+// components
+import { CreateUpdateWorkspaceViewModal, DeleteGlobalViewModal } from "components/workspace";
+// ui
+import { CustomMenu } from "components/ui";
+// icons
+import { PencilIcon, Sparkles, TrashIcon } from "lucide-react";
+// helpers
+import { truncateText } from "helpers/string.helper";
+// types
+import { IWorkspaceView } from "types/workspace-views";
+
+type Props = { view: IWorkspaceView };
+
+export const GlobalViewListItem: React.FC<Props> = observer((props) => {
+  const { view } = props;
+
+  const [updateViewModal, setUpdateViewModal] = useState(false);
+  const [deleteViewModal, setDeleteViewModal] = useState(false);
+
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  const totalFilters =
+    view?.query_data?.filters && Object.keys(view.query_data.filters).length > 0
+      ? Object.keys(view.query_data.filters)
+          .map((key) =>
+            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)
+      : 0;
+
+  return (
+    <>
+      <CreateUpdateWorkspaceViewModal data={view} isOpen={updateViewModal} onClose={() => setUpdateViewModal(false)} />
+      <DeleteGlobalViewModal data={view} isOpen={deleteViewModal} onClose={() => setDeleteViewModal(false)} />
+      <div className="group hover:bg-custom-background-90 border-b border-custom-border-200">
+        <Link href={`/${workspaceSlug}/workspace-views/${view.id}`}>
+          <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="grid place-items-center h-10 w-10 rounded bg-custom-background-90 group-hover:bg-custom-background-100">
+                  <Sparkles size={14} strokeWidth={2} />
+                </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 hidden group-hover:block">
+                    {totalFilters} {totalFilters === 1 ? "filter" : "filters"}
+                  </p>
+                  <CustomMenu width="auto" ellipsis>
+                    <CustomMenu.MenuItem
+                      onClick={(e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        setUpdateViewModal(true);
+                      }}
+                    >
+                      <span className="flex items-center justify-start gap-2">
+                        <PencilIcon size={14} strokeWidth={2} />
+                        <span>Edit View</span>
+                      </span>
+                    </CustomMenu.MenuItem>
+                    <CustomMenu.MenuItem
+                      onClick={(e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        setDeleteViewModal(true);
+                      }}
+                    >
+                      <span className="flex items-center justify-start gap-2">
+                        <TrashIcon size={14} strokeWidth={2} />
+                        <span>Delete View</span>
+                      </span>
+                    </CustomMenu.MenuItem>
+                  </CustomMenu>
+                </div>
+              </div>
+            </div>
+          </a>
+        </Link>
+      </div>
+    </>
+  );
+});

web/components/workspace/views/views-list.tsx

@@ -0,0 +1,41 @@
+import { observer } from "mobx-react-lite";
+
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// components
+import { GlobalViewListItem } from "components/workspace";
+// ui
+import { Loader } from "components/ui";
+
+type Props = {
+  searchQuery: string;
+};
+
+export const GlobalViewsList: React.FC<Props> = observer((props) => {
+  const { searchQuery } = props;
+
+  const { globalViews: globalViewsStore } = useMobxStore();
+
+  const viewsList = globalViewsStore.globalViewsList;
+
+  if (!viewsList)
+    return (
+      <Loader className="space-y-1.5">
+        <Loader.Item height="72px" />
+        <Loader.Item height="72px" />
+        <Loader.Item height="72px" />
+        <Loader.Item height="72px" />
+        <Loader.Item height="72px" />
+      </Loader>
+    );
+
+  const filteredViewsList = viewsList.filter((v) => v.name.toLowerCase().includes(searchQuery.toLowerCase()));
+
+  return (
+    <>
+      {filteredViewsList.map((view) => (
+        <GlobalViewListItem key={view.id} view={view} />
+      ))}
+    </>
+  );
+});

web/components/workspace/views/workpace-view-navigation.tsx

@@ -1,105 +0,0 @@
-import React from "react";
-
-import { useRouter } from "next/router";
-
-import useSWR from "swr";
-
-// icon
-import { PlusIcon } from "lucide-react";
-// constant
-import { WORKSPACE_VIEWS_LIST } from "constants/fetch-keys";
-// service
-import workspaceService from "services/workspace.service";
-
-type Props = {
-  handleAddView: () => void;
-};
-
-export const WorkspaceViewsNavigation: React.FC<Props> = ({ handleAddView }) => {
-  const router = useRouter();
-  const { workspaceSlug, globalViewId } = router.query;
-
-  const { data: workspaceViews } = useSWR(
-    workspaceSlug ? WORKSPACE_VIEWS_LIST(workspaceSlug.toString()) : null,
-    workspaceSlug ? () => workspaceService.getAllViews(workspaceSlug.toString()) : null
-  );
-
-  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" });
-  }, [globalViewId, workspaceViews]);
-
-  const tabsList = [
-    {
-      key: "all",
-      label: "All Issues",
-      selected: isSelected("workspace-views/all-issues"),
-      onClick: () => router.replace(`/${workspaceSlug}/workspace-views/all-issues`),
-    },
-    {
-      key: "assigned",
-      label: "Assigned",
-      selected: isSelected("workspace-views/assigned"),
-      onClick: () => router.replace(`/${workspaceSlug}/workspace-views/assigned`),
-    },
-    {
-      key: "created",
-      label: "Created",
-      selected: isSelected("workspace-views/created"),
-      onClick: () => router.replace(`/${workspaceSlug}/workspace-views/created`),
-    },
-    {
-      key: "subscribed",
-      label: "Subscribed",
-      selected: isSelected("workspace-views/subscribed"),
-      onClick: () => router.replace(`/${workspaceSlug}/workspace-views/subscribed`),
-    },
-  ];
-
-  return (
-    <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-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-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-min p-3 text-sm font-medium outline-none whitespace-nowrap flex-shrink-0 ${
-              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 === globalViewId ? `active-tab-global-view` : ``}
-            onClick={() =>
-              router.replace(`/${workspaceSlug}/workspace-views/issues?globalViewId=${view.id}`)
-            }
-          >
-            {view.name}
-          </button>
-        ))}
-
-      <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>
-  );
-};

web/constants/fetch-keys.ts

@@ -146,12 +146,9 @@ export const PROJECT_DRAFT_ISSUES_LIST_WITH_PARAMS = (projectId: string, params?
   return `PROJECT_DRAFT_ISSUES_LIST_WITH_PARAMS${projectId.toUpperCase()}_${paramsKey}`;
 };
 
-export const WORKSPACE_VIEWS_LIST = (workspaceSlug: string) => `WORKSPACE_VIEWS_LIST_${workspaceSlug.toUpperCase()}`;
+export const GLOBAL_VIEWS_LIST = (workspaceSlug: string) => `GLOBAL_VIEWS_LIST_${workspaceSlug.toUpperCase()}`;
-export const WORKSPACE_VIEW_DETAILS = (globalViewId: string) => `WORKSPACE_VIEW_DETAILS_${globalViewId.toUpperCase()}`;
+export const GLOBAL_VIEW_DETAILS = (globalViewId: string) => `GLOBAL_VIEW_DETAILS_${globalViewId.toUpperCase()}`;
-export const WORKSPACE_VIEW_ISSUES = (globalViewId: string, params: any) => {
+export const GLOBAL_VIEW_ISSUES = (globalViewId: string) => `GLOBAL_VIEW_ISSUES_${globalViewId.toUpperCase()}`;
-  if (!params) return `WORKSPACE_VIEW_ISSUES_${globalViewId.toUpperCase()}`;
-  return `WORKSPACE_VIEW_ISSUES_${globalViewId.toUpperCase()}_${paramsToKey(params).toUpperCase()}`;
-};
 
 export const PROJECT_ISSUES_DETAILS = (issueId: string) => `PROJECT_ISSUES_DETAILS_${issueId.toUpperCase()}`;
 export const PROJECT_ISSUES_PROPERTIES = (projectId: string) => `PROJECT_ISSUES_PROPERTIES_${projectId.toUpperCase()}`;

web/constants/issue.ts

@@ -220,25 +220,10 @@ export const ISSUE_DISPLAY_FILTERS_BY_LAYOUT: {
   [pageType: string]: { [layoutType: string]: ILayoutDisplayFiltersOptions };
 } = {
   my_issues: {
-    list: {
+    spreadsheet: {
-      filters: ["priority", "state_group", "labels", "start_date", "target_date"],
+      filters: ["priority", "state_group", "labels", "assignees", "created_by", "project", "start_date", "target_date"],
       display_properties: true,
       display_filters: {
-        group_by: ["state_detail.group", "project", "priority", "labels", null],
-        order_by: ["sort_order", "-created_at", "-updated_at", "start_date", "priority"],
-        type: [null, "active", "backlog"],
-      },
-      extra_options: {
-        access: true,
-        values: ["show_empty_groups", "sub_issue"],
-      },
-    },
-    kanban: {
-      filters: ["priority", "state_group", "labels", "start_date", "target_date"],
-      display_properties: true,
-      display_filters: {
-        group_by: ["state_detail.group", "project", "priority", "labels"],
-        sub_group_by: ["state_detail.group", "project", "priority", "labels", null],
         order_by: ["sort_order", "-created_at", "-updated_at", "start_date", "priority"],
         type: [null, "active", "backlog"],
       },

web/constants/workspace.ts

@@ -4,6 +4,7 @@ import JiraLogo from "public/services/jira.png";
 import CSVLogo from "public/services/csv.svg";
 import ExcelLogo from "public/services/excel.svg";
 import JSONLogo from "public/services/json.svg";
+import { TStaticViewTypes } from "types";
 
 export const ROLE = {
   5: "Guest",
@@ -67,3 +68,25 @@ export const EXPORTERS_LIST = [
     logo: JSONLogo,
   },
 ];
+
+export const DEFAULT_GLOBAL_VIEWS_LIST: {
+  key: TStaticViewTypes;
+  label: string;
+}[] = [
+  {
+    key: "all-issues",
+    label: "All issues",
+  },
+  {
+    key: "assigned",
+    label: "Assigned",
+  },
+  {
+    key: "created",
+    label: "Created",
+  },
+  {
+    key: "subscribed",
+    label: "Subscribed",
+  },
+];

web/contexts/workspace-member.context.tsx

@@ -46,8 +46,7 @@ export const WorkspaceMemberProvider: React.FC<Props> = (props) => {
 export const useWorkspaceMyMembership = () => {
   const context = useContext(WorkspaceMemberContext);
 
-  if (context === undefined)
+  if (context === undefined) throw new Error(`useWorkspaceMember must be used within a WorkspaceMemberProvider.`);
-    throw new Error(`useWorkspaceMember must be used within a WorkspaceMemberProvider.`);
 
   return {
     ...context,

web/helpers/emoji.helper.tsx

@@ -30,7 +30,7 @@ export const renderEmoji = (
 
   if (typeof emoji === "object")
     return (
-      <span style={{ color: emoji.color }} className="material-symbols-rounded text-lg">
+      <span style={{ color: emoji.color }} className="material-symbols-rounded !text-sm">
         {emoji.name}
       </span>
     );
@@ -41,16 +41,13 @@ export const groupReactions: (reactions: any[], key: string) => { [key: string]:
   reactions: any,
   key: string
 ) => {
-  const groupedReactions = reactions.reduce(
+  const groupedReactions = reactions.reduce((acc: any, reaction: any) => {
-    (acc: any, reaction: any) => {
     if (!acc[reaction[key]]) {
       acc[reaction[key]] = [];
     }
     acc[reaction[key]].push(reaction);
     return acc;
-    },
+  }, {} as { [key: string]: any[] });
-    {} as { [key: string]: any[] }
-  );
 
   return groupedReactions;
 };

web/helpers/filter.helper.ts

@@ -0,0 +1,19 @@
+// types
+import { IIssueFilterOptions } from "types";
+
+// check if there is any difference between the saved filters and the current filters
+export const areFiltersDifferent = (filtersSet1: IIssueFilterOptions, filtersSet2: IIssueFilterOptions) => {
+  for (const [key, value] of Object.entries(filtersSet1) as [keyof IIssueFilterOptions, string[] | null][]) {
+    if (value) {
+      if (Array.isArray(value) && Array.isArray(filtersSet2[key])) {
+        if (value.length !== filtersSet2[key]?.length) return true;
+
+        for (let i = 0; i < value.length; i++) {
+          if (!filtersSet2[key]?.includes(value[i])) return true;
+        }
+      } else if (value !== filtersSet2[key]) return true;
+    }
+  }
+
+  return false;
+};

web/lib/mobx/store-init.tsx

@@ -12,12 +12,13 @@ const MobxStoreInit = () => {
     workspace: workspaceStore,
     project: projectStore,
     module: moduleStore,
+    globalViews: globalViewsStore,
   } = useMobxStore();
   // theme
   const { setTheme } = useTheme();
   // router
   const router = useRouter();
-  const { workspaceSlug, projectId, moduleId } = router.query;
+  const { workspaceSlug, projectId, moduleId, globalViewId } = router.query;
 
   useEffect(() => {
     // sidebar collapsed toggle
@@ -47,7 +48,8 @@ const MobxStoreInit = () => {
     if (workspaceSlug) workspaceStore.setWorkspaceSlug(workspaceSlug.toString());
     if (projectId) projectStore.setProjectId(projectId.toString());
     if (moduleId) moduleStore.setModuleId(moduleId.toString());
-  }, [workspaceSlug, projectId, moduleId, workspaceStore, projectStore, moduleStore]);
+    if (globalViewId) globalViewsStore.setGlobalViewId(globalViewId.toString());
+  }, [workspaceSlug, projectId, moduleId, globalViewId, workspaceStore, projectStore, moduleStore, globalViewsStore]);
 
   return <></>;
 };

web/package.json

@@ -27,6 +27,7 @@
     "@nivo/pie": "0.80.0",
     "@nivo/scatterplot": "0.80.0",
     "@plane/ui": "*",
+    "@popperjs/core": "^2.11.8",
     "@sentry/nextjs": "^7.36.0",
     "@tiptap/extension-code-block-lowlight": "^2.0.4",
     "@tiptap/extension-color": "^2.0.4",
@@ -74,6 +75,7 @@
     "react-hook-form": "^7.38.0",
     "react-markdown": "^8.0.7",
     "react-moveable": "^0.54.1",
+    "react-popper": "^2.3.0",
     "sharp": "^0.32.1",
     "sonner": "^0.6.2",
     "swr": "^2.1.3",
@@ -84,6 +86,7 @@
     "uuid": "^9.0.0"
   },
   "devDependencies": {
+    "@plane/ui": "*",
     "@types/js-cookie": "^3.0.2",
     "@types/node": "18.0.6",
     "@types/nprogress": "^0.2.0",
@@ -100,7 +103,6 @@
     "prettier": "^2.8.7",
     "tailwind-config-custom": "*",
     "tsconfig": "*",
-    "@plane/ui": "*",
     "typescript": "4.7.4"
   },
   "resolutions": {

web/pages/[workspaceSlug]/workspace-views/[globalViewId].tsx

@@ -0,0 +1,57 @@
+import { useRouter } from "next/router";
+import useSWR from "swr";
+
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// layouts
+import { WorkspaceAuthorizationLayout } from "layouts/auth-layout-legacy";
+// components
+import { GlobalViewsHeader } from "components/workspace";
+import { GlobalViewsAllLayouts } from "components/issues";
+import { GlobalIssuesHeader } from "components/headers";
+// icons
+import { CheckCircle } from "lucide-react";
+// types
+import { NextPage } from "next";
+// fetch-keys
+import { GLOBAL_VIEWS_LIST, GLOBAL_VIEW_DETAILS } from "constants/fetch-keys";
+
+const GlobalViewIssues: NextPage = () => {
+  const router = useRouter();
+  const { workspaceSlug, globalViewId } = router.query;
+
+  const { globalViews: globalViewsStore } = useMobxStore();
+
+  useSWR(
+    workspaceSlug ? GLOBAL_VIEWS_LIST(workspaceSlug.toString()) : null,
+    workspaceSlug ? () => globalViewsStore.fetchAllGlobalViews(workspaceSlug.toString()) : null
+  );
+
+  useSWR(
+    workspaceSlug && globalViewId ? GLOBAL_VIEW_DETAILS(globalViewId.toString()) : null,
+    workspaceSlug && globalViewId
+      ? () => globalViewsStore.fetchGlobalViewDetails(workspaceSlug.toString(), globalViewId.toString())
+      : null
+  );
+
+  return (
+    <WorkspaceAuthorizationLayout
+      breadcrumbs={
+        <div className="flex gap-2 items-center">
+          <CheckCircle size={18} strokeWidth={1.5} />
+          <span className="text-sm font-medium">Workspace issues</span>
+        </div>
+      }
+      right={<GlobalIssuesHeader activeLayout="spreadsheet" />}
+    >
+      <div className="h-full overflow-hidden bg-custom-background-100">
+        <div className="h-full w-full flex flex-col border-b border-custom-border-300">
+          <GlobalViewsHeader />
+          <GlobalViewsAllLayouts />
+        </div>
+      </div>
+    </WorkspaceAuthorizationLayout>
+  );
+};
+
+export default GlobalViewIssues;

web/pages/[workspaceSlug]/workspace-views/all-issues.tsx

@@ -1,40 +1,50 @@
-// layouts
+import { useRouter } from "next/router";
-import { WorkspaceAuthorizationLayout } from "layouts/auth-layout";
+import useSWR from "swr";
-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";
 
-const WorkspaceViewAllIssue = () => (
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// components
+import { GlobalViewsHeader } from "components/workspace";
+import { GlobalIssuesHeader } from "components/headers";
+import { GlobalViewsAllLayouts } from "components/issues";
+// layouts
+import { WorkspaceAuthorizationLayout } from "layouts/auth-layout-legacy";
+// icons
+import { CheckCircle } from "lucide-react";
+// types
+import { NextPage } from "next";
+// fetch-keys
+import { GLOBAL_VIEWS_LIST } from "constants/fetch-keys";
+
+const GlobalViewAllIssues: NextPage = () => {
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  const { globalViews: globalViewsStore } = useMobxStore();
+
+  useSWR(
+    workspaceSlug ? GLOBAL_VIEWS_LIST(workspaceSlug.toString()) : null,
+    workspaceSlug ? () => globalViewsStore.fetchAllGlobalViews(workspaceSlug.toString()) : null
+  );
+
+  return (
     <WorkspaceAuthorizationLayout
       breadcrumbs={
         <div className="flex gap-2 items-center">
-        <CheckCircle className="h-[18px] w-[18px] stroke-[1.5]" />
+          <CheckCircle size={18} strokeWidth={1.5} />
           <span className="text-sm font-medium">Workspace issues</span>
         </div>
       }
-    right={
+      right={<GlobalIssuesHeader activeLayout="spreadsheet" />}
-      <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" />
+      <div className="h-full overflow-hidden bg-custom-background-100">
-          Add Issue
+        <div className="h-full w-full flex flex-col border-b border-custom-border-300">
-        </PrimaryButton>
+          <GlobalViewsHeader />
+          <GlobalViewsAllLayouts type="all-issues" />
+        </div>
       </div>
-    }
-  >
-    <WorkspaceAllIssue />
     </WorkspaceAuthorizationLayout>
   );
+};
 
-export default WorkspaceViewAllIssue;
+export default GlobalViewAllIssues;

web/pages/[workspaceSlug]/workspace-views/assigned.tsx

@@ -1,40 +1,50 @@
-// layouts
+import { useRouter } from "next/router";
-import { WorkspaceAuthorizationLayout } from "layouts/auth-layout";
+import useSWR from "swr";
-// components
-import { WorkspaceIssuesViewOptions } from "components/issues/workspace-views/workspace-issue-view-option";
-import { WorkspaceAssignedIssue } from "components/issues/workspace-views/workspace-assigned-issue";
-// ui
-import { PrimaryButton } from "components/ui";
-// icons
-import { PlusIcon } from "@heroicons/react/24/outline";
-import { CheckCircle } from "lucide-react";
 
-const WorkspaceViewAssignedIssue: React.FC = () => (
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// components
+import { GlobalViewsHeader } from "components/workspace";
+import { GlobalIssuesHeader } from "components/headers";
+import { GlobalViewsAllLayouts } from "components/issues";
+// layouts
+import { WorkspaceAuthorizationLayout } from "layouts/auth-layout-legacy";
+// icons
+import { CheckCircle } from "lucide-react";
+// types
+import { NextPage } from "next";
+// fetch-keys
+import { GLOBAL_VIEWS_LIST } from "constants/fetch-keys";
+
+const GlobalViewAssignedIssues: NextPage = () => {
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  const { globalViews: globalViewsStore } = useMobxStore();
+
+  useSWR(
+    workspaceSlug ? GLOBAL_VIEWS_LIST(workspaceSlug.toString()) : null,
+    workspaceSlug ? () => globalViewsStore.fetchAllGlobalViews(workspaceSlug.toString()) : null
+  );
+
+  return (
     <WorkspaceAuthorizationLayout
       breadcrumbs={
         <div className="flex gap-2 items-center">
-        <CheckCircle className="h-[18px] w-[18px] stroke-[1.5]" />
+          <CheckCircle size={18} strokeWidth={1.5} />
-        <span className="text-sm font-medium">Workspace Issues</span>
+          <span className="text-sm font-medium">Workspace issues</span>
         </div>
       }
-    right={
+      right={<GlobalIssuesHeader activeLayout="spreadsheet" />}
-      <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" />
+      <div className="h-full overflow-hidden bg-custom-background-100">
-          Add Issue
+        <div className="h-full w-full flex flex-col border-b border-custom-border-300">
-        </PrimaryButton>
+          <GlobalViewsHeader />
+          <GlobalViewsAllLayouts type="assigned" />
+        </div>
       </div>
-    }
-  >
-    <WorkspaceAssignedIssue />
     </WorkspaceAuthorizationLayout>
   );
+};
 
-export default WorkspaceViewAssignedIssue;
+export default GlobalViewAssignedIssues;

web/pages/[workspaceSlug]/workspace-views/created.tsx

@@ -1,40 +1,50 @@
-// layouts
+import { useRouter } from "next/router";
-import { WorkspaceAuthorizationLayout } from "layouts/auth-layout";
+import useSWR from "swr";
-// components
-import { WorkspaceIssuesViewOptions } from "components/issues/workspace-views/workspace-issue-view-option";
-import { WorkspaceCreatedIssues } from "components/issues/workspace-views/workspace-created-issues";
-// ui
-import { PrimaryButton } from "components/ui";
-// icons
-import { PlusIcon } from "@heroicons/react/24/outline";
-import { CheckCircle } from "lucide-react";
 
-const WorkspaceViewCreatedIssue: React.FC = () => (
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// components
+import { GlobalViewsHeader } from "components/workspace";
+import { GlobalIssuesHeader } from "components/headers";
+import { GlobalViewsAllLayouts } from "components/issues";
+// layouts
+import { WorkspaceAuthorizationLayout } from "layouts/auth-layout-legacy";
+// icons
+import { CheckCircle } from "lucide-react";
+// types
+import { NextPage } from "next";
+// fetch-keys
+import { GLOBAL_VIEWS_LIST } from "constants/fetch-keys";
+
+const GlobalViewCreatedIssues: NextPage = () => {
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  const { globalViews: globalViewsStore } = useMobxStore();
+
+  useSWR(
+    workspaceSlug ? GLOBAL_VIEWS_LIST(workspaceSlug.toString()) : null,
+    workspaceSlug ? () => globalViewsStore.fetchAllGlobalViews(workspaceSlug.toString()) : null
+  );
+
+  return (
     <WorkspaceAuthorizationLayout
       breadcrumbs={
         <div className="flex gap-2 items-center">
-        <CheckCircle className="h-[18px] w-[18px] stroke-[1.5]" />
+          <CheckCircle size={18} strokeWidth={1.5} />
-        <span className="text-sm font-medium">Workspace Issues</span>
+          <span className="text-sm font-medium">Workspace issues</span>
         </div>
       }
-    right={
+      right={<GlobalIssuesHeader activeLayout="spreadsheet" />}
-      <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" />
+      <div className="h-full overflow-hidden bg-custom-background-100">
-          Add Issue
+        <div className="h-full w-full flex flex-col border-b border-custom-border-300">
-        </PrimaryButton>
+          <GlobalViewsHeader />
+          <GlobalViewsAllLayouts type="created" />
+        </div>
       </div>
-    }
-  >
-    <WorkspaceCreatedIssues />
     </WorkspaceAuthorizationLayout>
   );
+};
 
-export default WorkspaceViewCreatedIssue;
+export default GlobalViewCreatedIssues;

web/pages/[workspaceSlug]/workspace-views/index.tsx

@@ -1,98 +1,38 @@
 import React, { useState } from "react";
-
-import Link from "next/link";
-
 import { useRouter } from "next/router";
-
 import useSWR from "swr";
 
-// services
+// mobx store
-import workspaceService from "services/workspace.service";
+import { useMobxStore } from "lib/mobx/store-provider";
 // layouts
-import { WorkspaceAuthorizationLayout } from "layouts/auth-layout";
+import { WorkspaceAuthorizationLayout } from "layouts/auth-layout-legacy";
 // components
-import { SingleWorkspaceViewItem } from "components/workspace/views/single-workspace-view-item";
+import { GlobalDefaultViewListItem, GlobalViewsList } from "components/workspace";
-import { WorkspaceIssuesViewOptions } from "components/issues/workspace-views/workspace-issue-view-option";
+import { GlobalIssuesHeader } from "components/headers";
-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";
+import { Input } from "components/ui";
 // icons
 import { MagnifyingGlassIcon } from "@heroicons/react/24/outline";
-import { PlusIcon } from "lucide-react";
-import { PhotoFilterOutlined } from "@mui/icons-material";
-// image
-import emptyView from "public/empty-state/view.svg";
 // types
 import type { NextPage } from "next";
-import { IWorkspaceView } from "types/workspace-views";
 // constants
-import { WORKSPACE_VIEWS_LIST } from "constants/fetch-keys";
+import { DEFAULT_GLOBAL_VIEWS_LIST } from "constants/workspace";
-// helper
+// fetch-keys
-import { truncateText } from "helpers/string.helper";
+import { GLOBAL_VIEWS_LIST } from "constants/fetch-keys";
 
 const WorkspaceViews: NextPage = () => {
   const [query, setQuery] = useState("");
 
-  const [createUpdateViewModal, setCreateUpdateViewModal] = useState(false);
-  const [selectedViewToUpdate, setSelectedViewToUpdate] = useState<IWorkspaceView | null>(null);
-
-  const [deleteViewModal, setDeleteViewModal] = useState(false);
-  const [selectedViewToDelete, setSelectedViewToDelete] = useState<IWorkspaceView | null>(null);
-
   const router = useRouter();
   const { workspaceSlug } = router.query;
 
-  const { data: workspaceViews } = useSWR(
+  const { globalViews: globalViewsStore } = useMobxStore();
-    workspaceSlug ? WORKSPACE_VIEWS_LIST(workspaceSlug as string) : null,
+
-    workspaceSlug ? () => workspaceService.getAllViews(workspaceSlug as string) : null
+  useSWR(
+    workspaceSlug ? GLOBAL_VIEWS_LIST(workspaceSlug.toString()) : null,
+    workspaceSlug ? () => globalViewsStore.fetchAllGlobalViews(workspaceSlug.toString()) : null
   );
 
-  const defaultWorkspaceViewsList = [
-    {
-      key: "all",
-      label: "All Issues",
-      href: `/${workspaceSlug}/workspace-views/all-issues`,
-    },
-    {
-      key: "assigned",
-      label: "Assigned",
-      href: `/${workspaceSlug}/workspace-views/assigned`,
-    },
-    {
-      key: "created",
-      label: "Created",
-      href: `/${workspaceSlug}/workspace-views/created`,
-    },
-    {
-      key: "subscribed",
-      label: "Subscribed",
-      href: `/${workspaceSlug}/workspace-views/subscribed`,
-    },
-  ];
-
-  const filteredDefaultOptions =
-    query === ""
-      ? defaultWorkspaceViewsList
-      : defaultWorkspaceViewsList?.filter((option) =>
-          option.label.toLowerCase().includes(query.toLowerCase())
-        );
-
-  const filteredOptions =
-    query === ""
-      ? workspaceViews
-      : workspaceViews?.filter((option) => option.name.toLowerCase().includes(query.toLowerCase()));
-
-  const handleEditView = (view: IWorkspaceView) => {
-    setSelectedViewToUpdate(view);
-    setCreateUpdateViewModal(true);
-  };
-
-  const handleDeleteView = (view: IWorkspaceView) => {
-    setSelectedViewToDelete(view);
-    setDeleteViewModal(true);
-  };
-
   return (
     <WorkspaceAuthorizationLayout
       breadcrumbs={
@@ -100,33 +40,8 @@ const WorkspaceViews: NextPage = () => {
           <span className="text-sm font-medium">Workspace Views</span>
         </div>
       }
-      right={
+      right={<GlobalIssuesHeader activeLayout="list" />}
-        <div className="flex items-center gap-2">
-          <WorkspaceIssuesViewOptions />
-
-          <PrimaryButton
-            className="flex items-center gap-2"
-            onClick={() => setCreateUpdateViewModal(true)}
     >
-            <PlusIcon className="h-4 w-4" />
-            New View
-          </PrimaryButton>
-        </div>
-      }
-    >
-      <CreateUpdateWorkspaceViewModal
-        isOpen={createUpdateViewModal}
-        handleClose={() => {
-          setCreateUpdateViewModal(false);
-          setSelectedViewToUpdate(null);
-        }}
-        data={selectedViewToUpdate}
-      />
-      <DeleteWorkspaceViewModal
-        isOpen={deleteViewModal}
-        data={selectedViewToDelete}
-        setIsOpen={setDeleteViewModal}
-      />
       <div className="flex flex-col">
         <div className="h-full w-full flex flex-col overflow-hidden">
           <div className="flex items-center gap-2.5 w-full px-5 py-3 border-b border-custom-border-200">
@@ -140,64 +55,10 @@ const WorkspaceViews: NextPage = () => {
             />
           </div>
         </div>
-        {filteredDefaultOptions &&
+        {DEFAULT_GLOBAL_VIEWS_LIST.filter((v) => v.label.toLowerCase().includes(query.toLowerCase())).map((option) => (
-          filteredDefaultOptions.length > 0 &&
+          <GlobalDefaultViewListItem key={option.key} view={option} />
-          filteredDefaultOptions.map((option) => (
-            <div className="group hover:bg-custom-background-90 border-b border-custom-border-200">
-              <Link href={option.href}>
-                <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(option.label, 75)}
-                        </p>
-                      </div>
-                    </div>
-                  </div>
-                </a>
-              </Link>
-            </div>
         ))}
-
+        <GlobalViewsList searchQuery={query} />
-        {filteredOptions ? (
-          filteredOptions.length > 0 ? (
-            <div>
-              {filteredOptions.map((view) => (
-                <SingleWorkspaceViewItem
-                  key={view.id}
-                  view={view}
-                  handleEditView={() => handleEditView(view)}
-                  handleDeleteView={() => handleDeleteView(view)}
-                />
-              ))}
-            </div>
-          ) : (
-            <EmptyState
-              title="Get focused with views"
-              description="Views aid in saving your issues by applying various filters and grouping options."
-              image={emptyView}
-              primaryButton={{
-                icon: <PlusIcon className="h-4 w-4" />,
-                text: "New View",
-                onClick: () => setCreateUpdateViewModal(true),
-              }}
-            />
-          )
-        ) : (
-          <Loader className="space-y-1.5">
-            <Loader.Item height="72px" />
-            <Loader.Item height="72px" />
-            <Loader.Item height="72px" />
-            <Loader.Item height="72px" />
-            <Loader.Item height="72px" />
-          </Loader>
-        )}
       </div>
     </WorkspaceAuthorizationLayout>
   );

web/pages/[workspaceSlug]/workspace-views/issues.tsx

@@ -1,40 +0,0 @@
-// layouts
-import { WorkspaceAuthorizationLayout } from "layouts/auth-layout";
-// components
-import { WorkspaceIssuesViewOptions } from "components/issues/workspace-views/workspace-issue-view-option";
-import { WorkspaceViewIssues } from "components/issues/workspace-views/workpace-view-issues";
-// ui
-import { PrimaryButton } from "components/ui";
-// icons
-import { PlusIcon } from "@heroicons/react/24/outline";
-import { CheckCircle } from "lucide-react";
-
-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>
-    }
-    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;

web/pages/[workspaceSlug]/workspace-views/subscribed.tsx

@@ -1,40 +1,50 @@
-// layouts
+import { useRouter } from "next/router";
-import { WorkspaceAuthorizationLayout } from "layouts/auth-layout";
+import useSWR from "swr";
-// components
-import { WorkspaceIssuesViewOptions } from "components/issues/workspace-views/workspace-issue-view-option";
-import { WorkspaceSubscribedIssues } from "components/issues/workspace-views/workspace-subscribed-issue";
-// ui
-import { PrimaryButton } from "components/ui";
-// icons
-import { PlusIcon } from "@heroicons/react/24/outline";
-import { CheckCircle } from "lucide-react";
 
-const WorkspaceViewSubscribedIssue: React.FC = () => (
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// components
+import { GlobalViewsHeader } from "components/workspace";
+import { GlobalIssuesHeader } from "components/headers";
+import { GlobalViewsAllLayouts } from "components/issues";
+// layouts
+import { WorkspaceAuthorizationLayout } from "layouts/auth-layout-legacy";
+// icons
+import { CheckCircle } from "lucide-react";
+// types
+import { NextPage } from "next";
+// fetch-keys
+import { GLOBAL_VIEWS_LIST } from "constants/fetch-keys";
+
+const GlobalViewSubscribedIssues: NextPage = () => {
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  const { globalViews: globalViewsStore } = useMobxStore();
+
+  useSWR(
+    workspaceSlug ? GLOBAL_VIEWS_LIST(workspaceSlug.toString()) : null,
+    workspaceSlug ? () => globalViewsStore.fetchAllGlobalViews(workspaceSlug.toString()) : null
+  );
+
+  return (
     <WorkspaceAuthorizationLayout
       breadcrumbs={
         <div className="flex gap-2 items-center">
-        <CheckCircle className="h-[18px] w-[18px] stroke-[1.5]" />
+          <CheckCircle size={18} strokeWidth={1.5} />
-        <span className="text-sm font-medium">Workspace Issue</span>
+          <span className="text-sm font-medium">Workspace issues</span>
         </div>
       }
-    right={
+      right={<GlobalIssuesHeader activeLayout="spreadsheet" />}
-      <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" />
+      <div className="h-full overflow-hidden bg-custom-background-100">
-          Add Issue
+        <div className="h-full w-full flex flex-col border-b border-custom-border-300">
-        </PrimaryButton>
+          <GlobalViewsHeader />
+          <GlobalViewsAllLayouts type="subscribed" />
+        </div>
       </div>
-    }
-  >
-    <WorkspaceSubscribedIssues />
     </WorkspaceAuthorizationLayout>
   );
+};
 
-export default WorkspaceViewSubscribedIssue;
+export default GlobalViewSubscribedIssues;

web/services/workspace.service.ts

@@ -14,9 +14,9 @@ import {
   ICurrentUserResponse,
   IWorkspaceBulkInviteFormData,
   IWorkspaceViewProps,
-  IWorkspaceViewIssuesParams,
 } from "types";
 import { IWorkspaceView } from "types/workspace-views";
+import { IIssueGroupWithSubGroupsStructure, IIssueGroupedStructure, IIssueUnGroupedStructure } from "store/issue";
 
 export class WorkspaceService extends APIService {
   constructor() {
@@ -249,7 +249,7 @@ export class WorkspaceService extends APIService {
       });
   }
 
-  async createView(workspaceSlug: string, data: IWorkspaceView): Promise<any> {
+  async createView(workspaceSlug: string, data: Partial<IWorkspaceView>): Promise<IWorkspaceView> {
     return this.post(`/api/workspaces/${workspaceSlug}/views/`, data)
       .then((response) => response?.data)
       .catch((error) => {
@@ -257,11 +257,7 @@ export class WorkspaceService extends APIService {
       });
   }
 
-  async updateView(
+  async updateView(workspaceSlug: string, viewId: string, data: Partial<IWorkspaceView>): Promise<IWorkspaceView> {
-    workspaceSlug: string,
-    viewId: string,
-    data: Partial<IWorkspaceView>
-  ): Promise<any> {
     return this.patch(`/api/workspaces/${workspaceSlug}/views/${viewId}/`, data)
       .then((response) => response?.data)
       .catch((error) => {
@@ -293,7 +289,10 @@ export class WorkspaceService extends APIService {
       });
   }
 
-  async getViewIssues(workspaceSlug: string, params: IWorkspaceViewIssuesParams): Promise<any> {
+  async getViewIssues(
+    workspaceSlug: string,
+    params: any
+  ): Promise<IIssueGroupedStructure | IIssueGroupWithSubGroupsStructure | IIssueUnGroupedStructure> {
     return this.get(`/api/workspaces/${workspaceSlug}/issues/`, {
       params,
     })

web/store/global_view_filters.ts

@@ -0,0 +1,70 @@
+import { observable, action, makeObservable, runInAction } from "mobx";
+// types
+import { RootStore } from "./root";
+import { IIssueFilterOptions } from "types";
+
+export interface IGlobalViewFiltersStore {
+  // states
+  loader: boolean;
+  error: any | null;
+
+  // observables
+  storedFilters: {
+    [viewId: string]: IIssueFilterOptions;
+  };
+
+  // actions
+  updateStoredFilters: (viewId: string, filters: Partial<IIssueFilterOptions>) => void;
+  deleteStoredFilters: (viewId: string) => void;
+}
+
+class GlobalViewFiltersStore implements IGlobalViewFiltersStore {
+  // states
+  loader: boolean = false;
+  error: any | null = null;
+
+  // observables
+  storedFilters: {
+    [viewId: string]: IIssueFilterOptions;
+  } = {};
+
+  // root store
+  rootStore;
+
+  constructor(_rootStore: RootStore) {
+    makeObservable(this, {
+      // states
+      loader: observable.ref,
+      error: observable.ref,
+
+      // observables
+      storedFilters: observable.ref,
+
+      // actions
+      updateStoredFilters: action,
+      deleteStoredFilters: action,
+    });
+
+    this.rootStore = _rootStore;
+  }
+
+  updateStoredFilters = (viewId: string, filters: Partial<IIssueFilterOptions>) => {
+    runInAction(() => {
+      this.storedFilters = {
+        ...this.storedFilters,
+        [viewId]: { ...this.storedFilters[viewId], ...filters },
+      };
+    });
+  };
+
+  deleteStoredFilters = (viewId: string) => {
+    const updatedStoredFilters = { ...this.storedFilters };
+    delete updatedStoredFilters[viewId];
+
+    runInAction(() => {
+      this.storedFilters = updatedStoredFilters;
+    });
+  };
+}
+
+export default GlobalViewFiltersStore;

web/store/global_view_issues.ts

@@ -0,0 +1,167 @@
+import { observable, action, makeObservable, runInAction } from "mobx";
+// services
+import { ProjectService } from "services/project.service";
+import { WorkspaceService } from "services/workspace.service";
+// helpers
+import { handleIssueQueryParamsByLayout } from "helpers/issue.helper";
+// types
+import { RootStore } from "./root";
+import { IIssue, IIssueFilterOptions, TStaticViewTypes } from "types";
+
+export interface IGlobalViewIssuesStore {
+  // states
+  loader: boolean;
+  error: any | null;
+
+  // observables
+  viewIssues: {
+    [viewId: string]: IIssue[];
+  };
+
+  // actions
+  fetchViewIssues: (workspaceSlug: string, viewId: string, filters: IIssueFilterOptions) => Promise<any>;
+  fetchStaticIssues: (workspaceSlug: string, type: TStaticViewTypes) => Promise<any>;
+}
+
+class GlobalViewIssuesStore implements IGlobalViewIssuesStore {
+  // states
+  loader: boolean = false;
+  error: any | null = null;
+
+  // observables
+  viewIssues: {
+    [viewId: string]: IIssue[];
+  } = {};
+
+  // root store
+  rootStore;
+
+  // services
+  projectService;
+  workspaceService;
+
+  constructor(_rootStore: RootStore) {
+    makeObservable(this, {
+      // states
+      loader: observable.ref,
+      error: observable.ref,
+
+      // observables
+      viewIssues: observable.ref,
+
+      // actions
+      fetchViewIssues: action,
+      fetchStaticIssues: action,
+    });
+
+    this.rootStore = _rootStore;
+
+    this.projectService = new ProjectService();
+    this.workspaceService = new WorkspaceService();
+  }
+
+  computedFilter = (filters: any, filteredParams: any) => {
+    const computedFilters: any = {};
+    Object.keys(filters).map((key) => {
+      if (filters[key] != undefined && filteredParams.includes(key))
+        computedFilters[key] =
+          typeof filters[key] === "string" || typeof filters[key] === "boolean" ? filters[key] : filters[key].join(",");
+    });
+
+    return computedFilters;
+  };
+
+  fetchViewIssues = async (workspaceSlug: string, viewId: string, filters: IIssueFilterOptions) => {
+    try {
+      runInAction(() => {
+        this.loader = true;
+      });
+
+      const displayFilters = this.rootStore.workspaceFilter.workspaceDisplayFilters;
+
+      let filteredRouteParams: any = {
+        priority: filters?.priority || undefined,
+        project: filters?.project || undefined,
+        state_group: filters?.state_group || undefined,
+        state: filters?.state || undefined,
+        assignees: filters?.assignees || undefined,
+        created_by: filters?.created_by || undefined,
+        labels: filters?.labels || undefined,
+        start_date: filters?.start_date || undefined,
+        target_date: filters?.target_date || undefined,
+        order_by: displayFilters?.order_by || "-created_at",
+        type: displayFilters?.type || undefined,
+        sub_issue: false,
+      };
+
+      const filteredParams = handleIssueQueryParamsByLayout("spreadsheet", "my_issues");
+      if (filteredParams) filteredRouteParams = this.computedFilter(filteredRouteParams, filteredParams);
+
+      const response = await this.workspaceService.getViewIssues(workspaceSlug, filteredRouteParams);
+
+      runInAction(() => {
+        this.loader = false;
+        this.viewIssues = {
+          ...this.viewIssues,
+          [viewId]: response as IIssue[],
+        };
+      });
+
+      return response;
+    } catch (error) {
+      runInAction(() => {
+        this.loader = false;
+        this.error = error;
+      });
+
+      throw error;
+    }
+  };
+
+  fetchStaticIssues = async (workspaceSlug: string, type: TStaticViewTypes) => {
+    try {
+      runInAction(() => {
+        this.loader = true;
+      });
+
+      const workspaceMemberResponse = await this.rootStore.workspaceFilter.fetchUserWorkspaceFilters(workspaceSlug);
+      const displayFilters = workspaceMemberResponse.view_props.display_filters;
+
+      let filteredRouteParams: any = {
+        order_by: displayFilters?.order_by || "-created_at",
+        type: displayFilters?.type || undefined,
+        sub_issue: false,
+      };
+
+      const filteredParams = handleIssueQueryParamsByLayout("spreadsheet", "my_issues");
+      if (filteredParams) filteredRouteParams = this.computedFilter(filteredRouteParams, filteredParams);
+
+      const currentUser = this.rootStore.user.currentUser;
+
+      if (type === "assigned" && currentUser) filteredRouteParams.assignees = currentUser.id;
+      if (type === "created" && currentUser) filteredRouteParams.created_by = currentUser.id;
+      if (type === "subscribed" && currentUser) filteredRouteParams.subscriber = currentUser.id;
+
+      const response = await this.workspaceService.getViewIssues(workspaceSlug, filteredRouteParams);
+
+      runInAction(() => {
+        this.loader = false;
+        this.viewIssues = {
+          ...this.viewIssues,
+          [type]: response as IIssue[],
+        };
+      });
+
+      return response;
+    } catch (error) {
+      runInAction(() => {
+        this.loader = false;
+        this.error = error;
+      });
+
+      throw error;
+    }
+  };
+}
+
+export default GlobalViewIssuesStore;

web/store/global_views.ts

@@ -0,0 +1,207 @@
+import { observable, action, makeObservable, runInAction } from "mobx";
+// services
+import { ProjectService } from "services/project.service";
+import { WorkspaceService } from "services/workspace.service";
+// types
+import { RootStore } from "./root";
+import { IWorkspaceView } from "types/workspace-views";
+
+export interface IGlobalViewsStore {
+  // states
+  loader: boolean;
+  error: any | null;
+
+  // observables
+  globalViewId: string | null;
+  globalViewsList: IWorkspaceView[] | null;
+  globalViewDetails: {
+    [viewId: string]: IWorkspaceView;
+  };
+
+  // actions
+  setGlobalViewId: (viewId: string) => void;
+
+  fetchAllGlobalViews: (workspaceSlug: string) => Promise<IWorkspaceView[]>;
+  fetchGlobalViewDetails: (workspaceSlug: string, viewId: string) => Promise<IWorkspaceView>;
+  createGlobalView: (workspaceSlug: string, data: Partial<IWorkspaceView>) => Promise<IWorkspaceView>;
+  updateGlobalView: (workspaceSlug: string, viewId: string, data: Partial<IWorkspaceView>) => Promise<IWorkspaceView>;
+  deleteGlobalView: (workspaceSlug: string, viewId: string) => Promise<any>;
+}
+
+class GlobalViewsStore implements IGlobalViewsStore {
+  // states
+  loader: boolean = false;
+  error: any | null = null;
+
+  // observables
+  globalViewId: string | null = null;
+  globalViewsList: IWorkspaceView[] | null = null;
+  globalViewDetails: { [viewId: string]: IWorkspaceView } = {};
+
+  // root store
+  rootStore;
+
+  // services
+  projectService;
+  workspaceService;
+
+  constructor(_rootStore: RootStore) {
+    makeObservable(this, {
+      // states
+      loader: observable.ref,
+      error: observable.ref,
+
+      // observables
+      globalViewId: observable.ref,
+      globalViewsList: observable.ref,
+      globalViewDetails: observable.ref,
+
+      // actions
+      setGlobalViewId: action,
+
+      fetchAllGlobalViews: action,
+      fetchGlobalViewDetails: action,
+      createGlobalView: action,
+      updateGlobalView: action,
+      deleteGlobalView: action,
+    });
+
+    this.rootStore = _rootStore;
+
+    this.projectService = new ProjectService();
+    this.workspaceService = new WorkspaceService();
+  }
+
+  setGlobalViewId = (viewId: string) => {
+    this.globalViewId = viewId;
+  };
+
+  fetchAllGlobalViews = async (workspaceSlug: string): Promise<IWorkspaceView[]> => {
+    try {
+      runInAction(() => {
+        this.loader = true;
+      });
+
+      const response = await this.workspaceService.getAllViews(workspaceSlug);
+
+      runInAction(() => {
+        this.loader = false;
+        this.globalViewsList = response;
+      });
+
+      return response;
+    } catch (error) {
+      runInAction(() => {
+        this.loader = false;
+        this.error = error;
+      });
+
+      throw error;
+    }
+  };
+
+  fetchGlobalViewDetails = async (workspaceSlug: string, viewId: string): Promise<IWorkspaceView> => {
+    try {
+      runInAction(() => {
+        this.loader = true;
+      });
+
+      const response = await this.workspaceService.getViewDetails(workspaceSlug, viewId);
+
+      runInAction(() => {
+        this.loader = false;
+        this.globalViewDetails = {
+          ...this.globalViewDetails,
+          [response.id]: response,
+        };
+      });
+
+      return response;
+    } catch (error) {
+      runInAction(() => {
+        this.loader = false;
+        this.error = error;
+      });
+
+      throw error;
+    }
+  };
+
+  createGlobalView = async (workspaceSlug: string, data: Partial<IWorkspaceView>): Promise<IWorkspaceView> => {
+    try {
+      const response = await this.workspaceService.createView(workspaceSlug, data);
+
+      runInAction(() => {
+        this.globalViewsList = [response, ...(this.globalViewsList ?? [])];
+        this.globalViewDetails = {
+          ...this.globalViewDetails,
+          [response.id]: response,
+        };
+      });
+
+      return response;
+    } catch (error) {
+      runInAction(() => {
+        this.error = error;
+      });
+
+      throw error;
+    }
+  };
+
+  updateGlobalView = async (
+    workspaceSlug: string,
+    viewId: string,
+    data: Partial<IWorkspaceView>
+  ): Promise<IWorkspaceView> => {
+    const viewToUpdate = { ...this.globalViewDetails[viewId], ...data };
+
+    try {
+      runInAction(() => {
+        this.globalViewsList = (this.globalViewsList ?? []).map((view) => {
+          if (view.id === viewId) return viewToUpdate;
+
+          return view;
+        });
+        this.globalViewDetails = {
+          ...this.globalViewDetails,
+          [viewId]: viewToUpdate,
+        };
+      });
+
+      const response = await this.workspaceService.updateView(workspaceSlug, viewId, data);
+
+      return response;
+    } catch (error) {
+      this.fetchGlobalViewDetails(workspaceSlug, viewId);
+
+      runInAction(() => {
+        this.error = error;
+      });
+
+      throw error;
+    }
+  };
+
+  deleteGlobalView = async (workspaceSlug: string, viewId: string): Promise<any> => {
+    const newViewsList = (this.globalViewsList ?? []).filter((view) => view.id !== viewId);
+
+    try {
+      runInAction(() => {
+        this.globalViewsList = newViewsList;
+      });
+
+      await this.workspaceService.deleteView(workspaceSlug, viewId);
+    } catch (error) {
+      this.fetchAllGlobalViews(workspaceSlug);
+
+      runInAction(() => {
+        this.error = error;
+      });
+
+      throw error;
+    }
+  };
+}
+
+export default GlobalViewsStore;

web/store/project.ts

@@ -7,10 +7,6 @@ import { ProjectService } from "services/project.service";
 import { IssueService } from "services/issue.service";
 import { ProjectStateServices } from "services/project_state.service";
 import { ProjectEstimateServices } from "services/project_estimates.service";
-import { CycleService } from "services/cycles.service";
-import { ModuleService } from "services/modules.service";
-import { ViewService } from "services/views.service";
-import { PageService } from "services/page.service";
 
 export interface IProjectStore {
   loader: boolean;
@@ -18,7 +14,7 @@ export interface IProjectStore {
 
   searchQuery: string;
   projectId: string | null;
-  projects: { [key: string]: IProject[] };
+  projects: { [workspaceSlug: string]: IProject[] };
   project_details: {
     [projectId: string]: IProject; // projectId: project Info
   };

web/store/root.ts

@@ -21,15 +21,21 @@ import IssueFilterStore, { IIssueFilterStore } from "./issue_filters";
 import IssueViewDetailStore from "./issue_detail";
 import IssueKanBanViewStore from "./kanban_view";
 import CalendarStore, { ICalendarStore } from "./calendar";
+import GlobalViewsStore, { IGlobalViewsStore } from "./global_views";
+import GlobalViewIssuesStore, { IGlobalViewIssuesStore } from "./global_view_issues";
+import WorkspaceFilterStore, { IWorkspaceFilterStore } from "./workspace_filters";
+import GlobalViewFiltersStore, { IGlobalViewFiltersStore } from "./global_view_filters";
 
 enableStaticRendering(typeof window === "undefined");
 
 export class RootStore {
   user;
   theme;
-  projectPublish: IProjectPublishStore;
+
-  draftIssuesStore: DraftIssuesStore;
   workspace: IWorkspaceStore;
+  workspaceFilter: IWorkspaceFilterStore;
+
+  projectPublish: IProjectPublishStore;
   project: IProjectStore;
   issue: IIssueStore;
 
@@ -47,12 +53,21 @@ export class RootStore {
   issueFilter: IIssueFilterStore;
   issueDetail: IssueViewDetailStore;
   issueKanBanView: IssueKanBanViewStore;
+  draftIssuesStore: DraftIssuesStore;
+
   calendar: ICalendarStore;
 
+  globalViews: IGlobalViewsStore;
+  globalViewIssues: IGlobalViewIssuesStore;
+  globalViewFilters: IGlobalViewFiltersStore;
+
   constructor() {
     this.user = new UserStore(this);
     this.theme = new ThemeStore(this);
+
     this.workspace = new WorkspaceStore(this);
+    this.workspaceFilter = new WorkspaceFilterStore(this);
+
     this.project = new ProjectStore(this);
     this.projectPublish = new ProjectPublishStore(this);
 
@@ -72,6 +87,11 @@ export class RootStore {
     this.issueDetail = new IssueViewDetailStore(this);
     this.issueKanBanView = new IssueKanBanViewStore(this);
     this.draftIssuesStore = new DraftIssuesStore(this);
+
     this.calendar = new CalendarStore(this);
+
+    this.globalViews = new GlobalViewsStore(this);
+    this.globalViewIssues = new GlobalViewIssuesStore(this);
+    this.globalViewFilters = new GlobalViewFiltersStore(this);
   }
 }

web/store/workspace.ts

@@ -1,62 +1,81 @@
 import { action, computed, observable, makeObservable, runInAction } from "mobx";
 import { RootStore } from "./root";
 // types
-import { IIssueLabels, IProject, IWorkspace } from "types";
+import { IIssueLabels, IProject, IWorkspace, IWorkspaceMember } from "types";
 // services
 import { WorkspaceService } from "services/workspace.service";
 import { ProjectService } from "services/project.service";
 import { IssueService } from "services/issue.service";
 
 export interface IWorkspaceStore {
+  // states
   loader: boolean;
   error: any | null;
+
   // observables
-  workspaces: IWorkspace[];
-  labels: { [key: string]: IIssueLabels[] } | {}; // workspace_id: labels[]
   workspaceSlug: string | null;
-  // computed
+  workspaces: IWorkspace[];
-  currentWorkspace: IWorkspace | null;
+  labels: { [workspaceSlug: string]: IIssueLabels[] } | {}; // workspaceSlug: labels[]
-  workspaceLabels: IIssueLabels[];
+  members: { [workspaceSlug: string]: IWorkspaceMember[] } | {}; // workspaceSlug: members[]
+
   // actions
   setWorkspaceSlug: (workspaceSlug: string) => void;
   getWorkspaceBySlug: (workspaceSlug: string) => IWorkspace | null;
   getWorkspaceLabelById: (workspaceSlug: string, labelId: string) => IIssueLabels | null;
   fetchWorkspaces: () => Promise<void>;
   fetchWorkspaceLabels: (workspaceSlug: string) => Promise<void>;
+  fetchWorkspaceMembers: (workspaceSlug: string) => Promise<void>;
+
+  // computed
+  currentWorkspace: IWorkspace | null;
+  workspaceLabels: IIssueLabels[] | null;
+  workspaceMembers: IWorkspaceMember[] | null;
 }
 
 class WorkspaceStore implements IWorkspaceStore {
+  // states
   loader: boolean = false;
   error: any | null = null;
+
   // observables
   workspaceSlug: string | null = null;
   workspaces: IWorkspace[] = [];
   projects: { [workspaceSlug: string]: IProject[] } = {}; // workspace_id: project[]
   labels: { [workspaceSlug: string]: IIssueLabels[] } = {};
-  // root store
+  members: { [workspaceSlug: string]: IWorkspaceMember[] } = {};
-  rootStore;
+
   // services
   workspaceService;
   projectService;
   issueService;
 
+  // root store
+  rootStore;
+
   constructor(_rootStore: RootStore) {
     makeObservable(this, {
+      // states
       loader: observable.ref,
       error: observable.ref,
-      // objects
+
+      // observables
+      workspaceSlug: observable.ref,
       workspaces: observable.ref,
       labels: observable.ref,
-      workspaceSlug: observable.ref,
+      members: observable.ref,
-      // computed
+
-      currentWorkspace: computed,
-      workspaceLabels: computed,
       // actions
       setWorkspaceSlug: action,
       getWorkspaceBySlug: action,
       getWorkspaceLabelById: action,
       fetchWorkspaces: action,
       fetchWorkspaceLabels: action,
+      fetchWorkspaceMembers: action,
+
+      // computed
+      currentWorkspace: computed,
+      workspaceLabels: computed,
+      workspaceMembers: computed,
     });
 
     this.rootStore = _rootStore;
@@ -70,11 +89,12 @@ class WorkspaceStore implements IWorkspaceStore {
    */
   get currentWorkspace() {
     if (!this.workspaceSlug) return null;
+
     return this.workspaces?.find((workspace) => workspace.slug === this.workspaceSlug) || null;
   }
 
   /**
-   * computed value of workspace labels using the workspace id from the store
+   * computed value of workspace labels using the workspace slug from the store
    */
   get workspaceLabels() {
     if (!this.workspaceSlug) return [];
@@ -82,6 +102,15 @@ class WorkspaceStore implements IWorkspaceStore {
     return _labels && Object.keys(_labels).length > 0 ? _labels : [];
   }
 
+  /**
+   * computed value of workspace members using the workspace slug from the store
+   */
+  get workspaceMembers() {
+    if (!this.workspaceSlug) return [];
+    const _members = this.members?.[this.workspaceSlug];
+    return _members && Object.keys(_members).length > 0 ? _members : [];
+  }
+
   /**
    * set workspace slug in the store
    * @param workspaceSlug
@@ -132,8 +161,10 @@ class WorkspaceStore implements IWorkspaceStore {
    */
   fetchWorkspaceLabels = async (workspaceSlug: string) => {
     try {
+      runInAction(() => {
         this.loader = true;
         this.error = null;
+      });
 
       const labelsResponse = await this.issueService.getWorkspaceLabels(workspaceSlug);
 
@@ -146,9 +177,40 @@ class WorkspaceStore implements IWorkspaceStore {
         this.error = null;
       });
     } catch (error) {
-      console.log(error);
+      runInAction(() => {
         this.loader = false;
         this.error = error;
+      });
+    }
+  };
+
+  /**
+   * fetch workspace members using workspace slug
+   * @param workspaceSlug
+   */
+
+  fetchWorkspaceMembers = async (workspaceSlug: string) => {
+    try {
+      runInAction(() => {
+        this.loader = true;
+        this.error = null;
+      });
+
+      const membersResponse = await this.workspaceService.workspaceMembers(workspaceSlug);
+
+      runInAction(() => {
+        this.members = {
+          ...this.members,
+          [workspaceSlug]: membersResponse,
+        };
+        this.loader = false;
+        this.error = null;
+      });
+    } catch (error) {
+      runInAction(() => {
+        this.loader = false;
+        this.error = error;
+      });
     }
   };
 }

web/store/workspace_filters.ts

@@ -0,0 +1,195 @@
+import { observable, action, computed, makeObservable, runInAction } from "mobx";
+// services
+import { WorkspaceService } from "services/workspace.service";
+// helpers
+import { handleIssueQueryParamsByLayout } from "helpers/issue.helper";
+// types
+import { RootStore } from "./root";
+import {
+  IIssueDisplayFilterOptions,
+  IIssueDisplayProperties,
+  IIssueFilterOptions,
+  IWorkspaceMember,
+  IWorkspaceViewProps,
+  TIssueParams,
+} from "types";
+
+export interface IWorkspaceFilterStore {
+  // states
+  loader: boolean;
+  error: any | null;
+
+  // observables
+  workspaceFilters: IIssueFilterOptions;
+  workspaceDisplayFilters: IIssueDisplayFilterOptions;
+  workspaceDisplayProperties: IIssueDisplayProperties;
+
+  // actions
+  fetchUserWorkspaceFilters: (workspaceSlug: string) => Promise<IWorkspaceMember>;
+  updateWorkspaceFilters: (workspaceSlug: string, filterToUpdate: Partial<IWorkspaceViewProps>) => Promise<void>;
+
+  // computed
+  appliedFilters: TIssueParams[] | null;
+}
+
+class WorkspaceFilterStore implements IWorkspaceFilterStore {
+  // states
+  loader: boolean = false;
+  error: any | null = null;
+
+  // observables
+  workspaceFilters: IIssueFilterOptions = {};
+  workspaceDisplayFilters: IIssueDisplayFilterOptions = {};
+  workspaceDisplayProperties: IIssueDisplayProperties = {
+    assignee: true,
+    start_date: true,
+    due_date: true,
+    labels: true,
+    key: true,
+    priority: true,
+    state: true,
+    sub_issue_count: true,
+    link: true,
+    attachment_count: true,
+    estimate: true,
+    created_on: true,
+    updated_on: true,
+  };
+
+  // root store
+  rootStore;
+
+  // services
+  workspaceService;
+
+  constructor(_rootStore: RootStore) {
+    makeObservable(this, {
+      // states
+      loader: observable.ref,
+      error: observable.ref,
+
+      // observables
+      workspaceFilters: observable.ref,
+      workspaceDisplayFilters: observable.ref,
+      workspaceDisplayProperties: observable.ref,
+
+      // actions
+      fetchUserWorkspaceFilters: action,
+      updateWorkspaceFilters: action,
+
+      // computed
+      appliedFilters: computed,
+    });
+
+    this.rootStore = _rootStore;
+
+    this.workspaceService = new WorkspaceService();
+  }
+
+  computedFilter = (filters: any, filteredParams: any) => {
+    const computedFilters: any = {};
+    Object.keys(filters).map((key) => {
+      if (filters[key] != undefined && filteredParams.includes(key))
+        computedFilters[key] =
+          typeof filters[key] === "string" || typeof filters[key] === "boolean" ? filters[key] : filters[key].join(",");
+    });
+
+    return computedFilters;
+  };
+
+  get appliedFilters(): TIssueParams[] | null {
+    if (!this.workspaceFilters || !this.workspaceDisplayFilters) return null;
+
+    let filteredRouteParams: any = {
+      priority: this.workspaceFilters?.priority || undefined,
+      state_group: this.workspaceFilters?.state_group || undefined,
+      state: this.workspaceFilters?.state || undefined,
+      assignees: this.workspaceFilters?.assignees || undefined,
+      created_by: this.workspaceFilters?.created_by || undefined,
+      labels: this.workspaceFilters?.labels || undefined,
+      start_date: this.workspaceFilters?.start_date || undefined,
+      target_date: this.workspaceFilters?.target_date || undefined,
+      group_by: this.workspaceDisplayFilters?.group_by || "state",
+      order_by: this.workspaceDisplayFilters?.order_by || "-created_at",
+      sub_group_by: this.workspaceDisplayFilters?.sub_group_by || undefined,
+      type: this.workspaceDisplayFilters?.type || undefined,
+      sub_issue: this.workspaceDisplayFilters?.sub_issue || true,
+      show_empty_groups: this.workspaceDisplayFilters?.show_empty_groups || true,
+      start_target_date: this.workspaceDisplayFilters?.start_target_date || true,
+    };
+
+    const filteredParams = handleIssueQueryParamsByLayout(this.workspaceDisplayFilters.layout, "issues");
+    if (filteredParams) filteredRouteParams = this.computedFilter(filteredRouteParams, filteredParams);
+
+    if (this.workspaceDisplayFilters.layout === "calendar") filteredRouteParams.group_by = "target_date";
+    if (this.workspaceDisplayFilters.layout === "gantt_chart") filteredRouteParams.start_target_date = true;
+
+    return filteredRouteParams;
+  }
+
+  fetchUserWorkspaceFilters = async (workspaceSlug: string) => {
+    try {
+      const memberResponse = await this.workspaceService.workspaceMemberMe(workspaceSlug);
+
+      runInAction(() => {
+        this.workspaceFilters = memberResponse?.view_props?.filters;
+        this.workspaceDisplayFilters = memberResponse?.view_props?.display_filters ?? {};
+        this.workspaceDisplayProperties = memberResponse?.view_props?.display_properties;
+      });
+
+      return memberResponse;
+    } catch (error) {
+      runInAction(() => {
+        this.error = error;
+      });
+
+      throw error;
+    }
+  };
+
+  updateWorkspaceFilters = async (workspaceSlug: string, filterToUpdate: Partial<IWorkspaceViewProps>) => {
+    const newViewProps = {
+      display_filters: {
+        ...this.workspaceDisplayFilters,
+        ...filterToUpdate.display_filters,
+      },
+      display_properties: {
+        ...this.workspaceDisplayProperties,
+        ...filterToUpdate.display_properties,
+      },
+      filters: {
+        ...this.workspaceFilters,
+        ...filterToUpdate.filters,
+      },
+    };
+
+    // set sub_group_by to null if group_by is set to null
+    if (newViewProps.display_filters.group_by === null) newViewProps.display_filters.sub_group_by = null;
+
+    // set group_by to state if layout is switched to kanban and group_by is null
+    if (newViewProps.display_filters.layout === "kanban" && newViewProps.display_filters.group_by === null)
+      newViewProps.display_filters.group_by = "state";
+
+    try {
+      runInAction(() => {
+        this.workspaceDisplayFilters = newViewProps.display_filters;
+        this.workspaceDisplayProperties = newViewProps.display_properties;
+        this.workspaceFilters = newViewProps.filters;
+      });
+
+      this.workspaceService.updateWorkspaceView(workspaceSlug, {
+        view_props: newViewProps,
+      });
+    } catch (error) {
+      this.fetchUserWorkspaceFilters(workspaceSlug);
+
+      runInAction(() => {
+        this.error = error;
+      });
+
+      console.log("Failed to update user filters in issue filter store", error);
+    }
+  };
+}
+
+export default WorkspaceFilterStore;

web/types/index.d.ts

@@ -19,6 +19,7 @@ export * from "./notifications";
 export * from "./waitlist";
 export * from "./reaction";
 export * from "./view-props";
+export * from "./workspace-views";
 
 export type NestedKeyOf<ObjectType extends object> = {
   [Key in keyof ObjectType & (string | number)]: ObjectType[Key] extends object

web/types/view-props.d.ts

@@ -45,6 +45,7 @@ export type TIssueParams =
   | "labels"
   | "start_date"
   | "target_date"
+  | "project"
   | "group_by"
   | "sub_group_by"
   | "order_by"
@@ -60,9 +61,10 @@ export interface IIssueFilterOptions {
   created_by?: string[] | null;
   labels?: string[] | null;
   priority?: string[] | null;
-  start_date?: TStateGroups[] | null;
+  project?: string[] | null;
+  start_date?: string[] | null;
   state?: string[] | null;
-  state_group?: TStateGroups[] | null;
+  state_group?: string[] | null;
   subscriber?: string[] | null;
   target_date?: string[] | null;
 }
@@ -97,41 +99,6 @@ export interface IIssueDisplayProperties {
   updated_on: boolean;
 }
 
-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;
@@ -142,8 +109,3 @@ export interface IWorkspaceViewProps {
   display_filters: IIssueDisplayFilterOptions | undefined;
   display_properties: Properties;
 }
-export interface IWorkspaceGlobalViewProps {
-  filters: IWorkspaceIssueFilterOptions;
-  display_filters: IWorkspaceIssueDisplayFilterOptions | undefined;
-  display_properties: Properties;
-}

web/types/workspace-views.d.ts

@@ -1,4 +1,4 @@
-import { IWorkspaceGlobalViewProps } from "./view-props";
+import { IWorkspaceViewProps } from "./view-props";
 
 export interface IWorkspaceView {
   id: string;
@@ -10,8 +10,8 @@ export interface IWorkspaceView {
   updated_by: string;
   name: string;
   description: string;
-  query: IWorkspaceGlobalViewProps;
+  query: any;
-  query_data: IWorkspaceGlobalViewProps;
+  query_data: IWorkspaceViewProps;
   project: string;
   workspace: string;
   workspace_detail?: {
@@ -20,3 +20,5 @@ export interface IWorkspaceView {
     slug: string;
   };
 }
+
+export type TStaticViewTypes = "all-issues" | "assigned" | "created" | "subscribed";