chore: workspace issues filter added

web/components/core/filters/filters-list.tsx

@@ -10,7 +10,14 @@ import { replaceUnderscoreIfSnakeCase } from "helpers/string.helper";
 // helpers
 import { renderShortDateWithYearFormat } from "helpers/date-time.helper";
 // types
-import { IIssueFilterOptions, IIssueLabels, IState, IUserLite, TStateGroups } from "types";
+import {
+  IIssueFilterOptions,
+  IIssueLabels,
+  IProject,
+  IState,
+  IUserLite,
+  TStateGroups,
+} from "types";
 // constants
 import { STATE_GROUP_COLORS } from "constants/state";
 
@@ -20,8 +27,9 @@ type Props = {
   clearAllFilters: (...args: any) => void;
   labels: IIssueLabels[] | undefined;
   members: IUserLite[] | undefined;
-  states: IState[] | undefined;
+  states?: IState[] | undefined;
   stateGroup?: string[] | undefined;
+  project?: IProject[] | undefined;
 };
 
 export const FiltersList: React.FC<Props> = ({
@@ -31,6 +39,7 @@ export const FiltersList: React.FC<Props> = ({
   labels,
   members,
   states,
+  project,
 }) => {
   if (!filters) return <></>;
 
@@ -156,6 +165,29 @@ export const FiltersList: React.FC<Props> = ({
                     : key === "assignees"
                     ? filters.assignees?.map((memberId: string) => {
                         const member = members?.find((m) => m.id === memberId);
+                        return (
+                          <div
+                            key={memberId}
+                            className="inline-flex items-center gap-x-1 rounded-full bg-custom-background-90 px-1"
+                          >
+                            <Avatar user={member} />
+                            <span>{member?.display_name}</span>
+                            <span
+                              className="cursor-pointer"
+                              onClick={() =>
+                                setFilters({
+                                  assignees: filters.assignees?.filter((p: any) => p !== memberId),
+                                })
+                              }
+                            >
+                              <XMarkIcon className="h-3 w-3" />
+                            </span>
+                          </div>
+                        );
+                      })
+                    : key === "subscriber"
+                    ? filters.subscriber?.map((memberId: string) => {
+                        const member = members?.find((m) => m.id === memberId);
 
                         return (
                           <div
@@ -299,6 +331,30 @@ export const FiltersList: React.FC<Props> = ({
                           </div>
                         );
                       })
+                    : key === "project"
+                    ? filters.project?.map((projectId) => {
+                        const currentProject = project?.find((p) => p.id === projectId);
+                        console.log("currentProject", currentProject);
+                        console.log("currentProject", projectId);
+                        return (
+                          <p
+                            key={currentProject?.id}
+                            className="inline-flex items-center gap-x-1 rounded-full px-2 py-0.5 capitalize"
+                          >
+                            <span>{currentProject?.name}</span>
+                            <span
+                              className="cursor-pointer"
+                              onClick={() =>
+                                setFilters({
+                                  project: filters.project?.filter((p) => p !== projectId),
+                                })
+                              }
+                            >
+                              <XMarkIcon className="h-3 w-3" />
+                            </span>
+                          </p>
+                        );
+                      })
                     : (filters[key] as any)?.join(", ")}
                   <button
                     type="button"

web/components/issues/my-issues/my-issues-select-filters.tsx

@@ -4,18 +4,21 @@ 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 { MultiLevelDropdown } from "components/ui";
+import { Avatar, MultiLevelDropdown } from "components/ui";
 // icons
 import { PriorityIcon, StateGroupIcon } from "components/icons";
 // helpers
 import { checkIfArraysHaveSameElements } from "helpers/array.helper";
 // types
-import { IIssueFilterOptions, IQuery, TStateGroups } from "types";
+import { IIssueFilterOptions, TStateGroups } from "types";
 // fetch-keys
 import { WORKSPACE_LABELS } from "constants/fetch-keys";
 // constants
@@ -55,6 +58,11 @@ export const MyIssuesSelectFilters: React.FC<Props> = ({
       : null
   );
 
+  const { projects: allProjects } = useProjects();
+  const joinedProjects = allProjects?.filter((p) => p.is_member);
+
+  const { workspaceMembers } = useWorkspaceMembers(workspaceSlug?.toString() ?? "");
+
   return (
     <>
       {isDateFilterModalOpen && (
@@ -74,25 +82,19 @@ export const MyIssuesSelectFilters: React.FC<Props> = ({
         height={height}
         options={[
           {
-            id: "priority",
+            id: "project",
-            label: "Priority",
+            label: "Project",
-            value: PRIORITIES,
+            value: joinedProjects,
             hasChildren: true,
-            children: [
+            children: joinedProjects?.map((project) => ({
-              ...PRIORITIES.map((priority) => ({
+              id: project.id,
-                id: priority === null ? "null" : priority,
+              label: <div className="flex items-center gap-2">{project.name}</div>,
-                label: (
+              value: {
-                  <div className="flex items-center gap-2 capitalize">
+                key: "project",
-                    <PriorityIcon priority={priority} /> {priority ?? "None"}
+                value: project.id,
-                  </div>
+              },
-                ),
+              selected: filters?.project?.includes(project.id),
-                value: {
+            })),
-                  key: "priority",
-                  value: priority === null ? "null" : priority,
-                },
-                selected: filters?.priority?.includes(priority === null ? "null" : priority),
-              })),
-            ],
           },
           {
             id: "state_group",
@@ -142,6 +144,87 @@ export const MyIssuesSelectFilters: React.FC<Props> = ({
               selected: filters?.labels?.includes(label.id),
             })),
           },
+          {
+            id: "priority",
+            label: "Priority",
+            value: PRIORITIES,
+            hasChildren: true,
+            children: [
+              ...PRIORITIES.map((priority) => ({
+                id: priority === null ? "null" : priority,
+                label: (
+                  <div className="flex items-center gap-2 capitalize">
+                    <PriorityIcon priority={priority} /> {priority ?? "None"}
+                  </div>
+                ),
+                value: {
+                  key: "priority",
+                  value: priority === null ? "null" : priority,
+                },
+                selected: filters?.priority?.includes(priority === null ? "null" : priority),
+              })),
+            ],
+          },
+          {
+            id: "created_by",
+            label: "Created by",
+            value: workspaceMembers,
+            hasChildren: true,
+            children: workspaceMembers?.map((member) => ({
+              id: member.member.id,
+              label: (
+                <div className="flex items-center gap-2">
+                  <Avatar user={member.member} />
+                  {member.member.display_name}
+                </div>
+              ),
+              value: {
+                key: "created_by",
+                value: member.member.id,
+              },
+              selected: filters?.created_by?.includes(member.member.id),
+            })),
+          },
+          {
+            id: "assignees",
+            label: "Assignees",
+            value: workspaceMembers,
+            hasChildren: true,
+            children: workspaceMembers?.map((member) => ({
+              id: member.member.id,
+              label: (
+                <div className="flex items-center gap-2">
+                  <Avatar user={member.member} />
+                  {member.member.display_name}
+                </div>
+              ),
+              value: {
+                key: "assignees",
+                value: member.member.id,
+              },
+              selected: filters?.assignees?.includes(member.member.id),
+            })),
+          },
+          {
+            id: "subscriber",
+            label: "Subscriber",
+            value: workspaceMembers,
+            hasChildren: true,
+            children: workspaceMembers?.map((member) => ({
+              id: member.member.id,
+              label: (
+                <div className="flex items-center gap-2">
+                  <Avatar user={member.member} />
+                  {member.member.display_name}
+                </div>
+              ),
+              value: {
+                key: "subscriber",
+                value: member.member.id,
+              },
+              selected: filters?.subscriber?.includes(member.member.id),
+            })),
+          },
           {
             id: "start_date",
             label: "Start date",

web/components/issues/my-issues/my-issues-view-options.tsx

@@ -2,25 +2,20 @@ import React from "react";
 
 import { useRouter } from "next/router";
 
-// headless ui
-import { Popover, Transition } from "@headlessui/react";
 // hooks
 import useMyIssuesFilters from "hooks/my-issues/use-my-issues-filter";
-import useEstimateOption from "hooks/use-estimate-option";
 // components
 import { MyIssuesSelectFilters } from "components/issues";
 // ui
-import { CustomMenu, ToggleSwitch, Tooltip } from "components/ui";
+import { Tooltip } from "components/ui";
 // icons
-import { ChevronDownIcon } from "@heroicons/react/24/outline";
+import { FormatListBulletedOutlined } from "@mui/icons-material";
-import { FormatListBulletedOutlined, GridViewOutlined } from "@mui/icons-material";
+import { CreditCard } from "lucide-react";
 // helpers
 import { replaceUnderscoreIfSnakeCase } from "helpers/string.helper";
 import { checkIfArraysHaveSameElements } from "helpers/array.helper";
 // types
-import { Properties, TIssueViewOptions } from "types";
+import { TIssueViewOptions } from "types";
-// constants
-import { GROUP_BY_OPTIONS, ORDER_BY_OPTIONS, FILTER_ISSUE_OPTIONS } from "constants/issue";
 
 const issueViewOptions: { type: TIssueViewOptions; Icon: any }[] = [
   {
@@ -28,19 +23,26 @@ const issueViewOptions: { type: TIssueViewOptions; Icon: any }[] = [
     Icon: FormatListBulletedOutlined,
   },
   {
-    type: "kanban",
+    type: "spreadsheet",
-    Icon: GridViewOutlined,
+    Icon: CreditCard,
   },
 ];
 
 export const MyIssuesViewOptions: React.FC = () => {
   const router = useRouter();
-  const { workspaceSlug } = router.query;
+  const { workspaceSlug, workspaceViewId } = router.query;
 
-  const { displayFilters, setDisplayFilters, properties, setProperty, filters, setFilters } =
+  const { displayFilters, setDisplayFilters, filters, setFilters } = useMyIssuesFilters(
-    useMyIssuesFilters(workspaceSlug?.toString());
+    workspaceSlug?.toString()
+  );
 
-  const { isEstimateActive } = useEstimateOption();
+  const workspaceViewPathName = ["workspace-views/all-issues"];
+
+  const isWorkspaceViewPath = workspaceViewPathName.some((pathname) =>
+    router.pathname.includes(pathname)
+  );
+
+  const showFilters = isWorkspaceViewPath || workspaceViewId;
 
   return (
     <div className="flex items-center gap-2">
@@ -55,244 +57,59 @@ export const MyIssuesViewOptions: React.FC = () => {
           >
             <button
               type="button"
-              className={`grid h-7 w-7 place-items-center rounded p-1 outline-none hover:bg-custom-sidebar-background-80 duration-300 ${
+              className={`grid h-7 w-7 place-items-center rounded p-1 outline-none hover:bg-custom-sidebar-background-100 duration-300 ${
                 displayFilters?.layout === option.type
-                  ? "bg-custom-sidebar-background-80"
+                  ? "bg-custom-sidebar-background-100 shadow-sm"
                   : "text-custom-sidebar-text-200"
               }`}
-              onClick={() => setDisplayFilters({ layout: option.type })}
+              onClick={() => {
+                setDisplayFilters({ layout: option.type });
+                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 === "gantt_chart" ? "rotate-90" : ""}
+                className={option.type === "spreadsheet" ? "h-4 w-4" : ""}
               />
             </button>
           </Tooltip>
         ))}
       </div>
-      <MyIssuesSelectFilters
+      {showFilters && (
-        filters={filters}
+        <MyIssuesSelectFilters
-        onSelect={(option) => {
+          filters={filters}
-          const key = option.key as keyof typeof filters;
+          onSelect={(option) => {
+            const key = option.key as keyof typeof filters;
 
-          if (key === "start_date" || key === "target_date") {
+            if (key === "start_date" || key === "target_date") {
-            const valueExists = checkIfArraysHaveSameElements(filters?.[key] ?? [], option.value);
+              const valueExists = checkIfArraysHaveSameElements(filters?.[key] ?? [], option.value);
 
-            setFilters({
-              [key]: valueExists ? null : option.value,
-            });
-          } else {
-            const valueExists = filters[key]?.includes(option.value);
-
-            if (valueExists)
               setFilters({
-                [option.key]: ((filters[key] ?? []) as any[])?.filter(
+                [key]: valueExists ? null : option.value,
-                  (val) => val !== option.value
-                ),
               });
-            else
+            } else {
-              setFilters({
+              const valueExists = filters[key]?.includes(option.value);
-                [option.key]: [...((filters[key] ?? []) as any[]), option.value],
-              });
-          }
-        }}
-        direction="left"
-        height="rg"
-      />
-      <Popover className="relative">
-        {({ open }) => (
-          <>
-            <Popover.Button
-              className={`group flex items-center gap-2 rounded-md border border-custom-border-200 bg-transparent px-3 py-1.5 text-xs hover:bg-custom-sidebar-background-90 hover:text-custom-sidebar-text-100 focus:outline-none duration-300 ${
-                open
-                  ? "bg-custom-sidebar-background-90 text-custom-sidebar-text-100"
-                  : "text-custom-sidebar-text-200"
-              }`}
-            >
-              Display
-              <ChevronDownIcon className="h-3 w-3" aria-hidden="true" />
-            </Popover.Button>
 
-            <Transition
+              if (valueExists)
-              as={React.Fragment}
+                setFilters({
-              enter="transition ease-out duration-200"
+                  [option.key]: ((filters[key] ?? []) as any[])?.filter(
-              enterFrom="opacity-0 translate-y-1"
+                    (val) => val !== option.value
-              enterTo="opacity-100 translate-y-0"
+                  ),
-              leave="transition ease-in duration-150"
+                });
-              leaveFrom="opacity-100 translate-y-0"
+              else
-              leaveTo="opacity-0 translate-y-1"
+                setFilters({
-            >
+                  [option.key]: [...((filters[key] ?? []) as any[]), option.value],
-              <Popover.Panel className="absolute right-0 z-30 mt-1 w-screen max-w-xs transform rounded-lg border border-custom-border-200 bg-custom-background-90 p-3 shadow-lg">
+                });
-                <div className="relative divide-y-2 divide-custom-border-200">
+            }
-                  <div className="space-y-4 pb-3 text-xs">
+          }}
-                    {displayFilters?.layout !== "calendar" &&
+          direction="left"
-                      displayFilters?.layout !== "spreadsheet" && (
+          height="rg"
-                        <>
+        />
-                          <div className="flex items-center justify-between">
+      )}
-                            <h4 className="text-custom-text-200">Group by</h4>
-                            <div className="w-28">
-                              <CustomMenu
-                                label={
-                                  displayFilters?.group_by === "project"
-                                    ? "Project"
-                                    : GROUP_BY_OPTIONS.find(
-                                        (option) => option.key === displayFilters?.group_by
-                                      )?.name ?? "Select"
-                                }
-                                className="!w-full"
-                                buttonClassName="w-full"
-                              >
-                                {GROUP_BY_OPTIONS.map((option) => {
-                                  if (displayFilters?.layout === "kanban" && option.key === null)
-                                    return null;
-                                  if (
-                                    option.key === "state" ||
-                                    option.key === "created_by" ||
-                                    option.key === "assignees"
-                                  )
-                                    return null;
-
-                                  return (
-                                    <CustomMenu.MenuItem
-                                      key={option.key}
-                                      onClick={() => setDisplayFilters({ group_by: option.key })}
-                                    >
-                                      {option.name}
-                                    </CustomMenu.MenuItem>
-                                  );
-                                })}
-                              </CustomMenu>
-                            </div>
-                          </div>
-                          <div className="flex items-center justify-between">
-                            <h4 className="text-custom-text-200">Order by</h4>
-                            <div className="w-28">
-                              <CustomMenu
-                                label={
-                                  ORDER_BY_OPTIONS.find(
-                                    (option) => option.key === displayFilters?.order_by
-                                  )?.name ?? "Select"
-                                }
-                                className="!w-full"
-                                buttonClassName="w-full"
-                              >
-                                {ORDER_BY_OPTIONS.map((option) => {
-                                  if (
-                                    displayFilters?.group_by === "priority" &&
-                                    option.key === "priority"
-                                  )
-                                    return null;
-                                  if (option.key === "sort_order") return null;
-
-                                  return (
-                                    <CustomMenu.MenuItem
-                                      key={option.key}
-                                      onClick={() => {
-                                        setDisplayFilters({ order_by: option.key });
-                                      }}
-                                    >
-                                      {option.name}
-                                    </CustomMenu.MenuItem>
-                                  );
-                                })}
-                              </CustomMenu>
-                            </div>
-                          </div>
-                        </>
-                      )}
-                    <div className="flex items-center justify-between">
-                      <h4 className="text-custom-text-200">Issue type</h4>
-                      <div className="w-28">
-                        <CustomMenu
-                          label={
-                            FILTER_ISSUE_OPTIONS.find(
-                              (option) => option.key === displayFilters?.type
-                            )?.name ?? "Select"
-                          }
-                          className="!w-full"
-                          buttonClassName="w-full"
-                        >
-                          {FILTER_ISSUE_OPTIONS.map((option) => (
-                            <CustomMenu.MenuItem
-                              key={option.key}
-                              onClick={() =>
-                                setDisplayFilters({
-                                  type: option.key,
-                                })
-                              }
-                            >
-                              {option.name}
-                            </CustomMenu.MenuItem>
-                          ))}
-                        </CustomMenu>
-                      </div>
-                    </div>
-
-                    {displayFilters?.layout !== "calendar" &&
-                      displayFilters?.layout !== "spreadsheet" && (
-                        <>
-                          <div className="flex items-center justify-between">
-                            <h4 className="text-custom-text-200">Show empty states</h4>
-                            <div className="w-28">
-                              <ToggleSwitch
-                                value={displayFilters?.show_empty_groups ?? true}
-                                onChange={() =>
-                                  setDisplayFilters({
-                                    show_empty_groups: !displayFilters?.show_empty_groups,
-                                  })
-                                }
-                              />
-                            </div>
-                          </div>
-                        </>
-                      )}
-                  </div>
-
-                  <div className="space-y-2 py-3">
-                    <h4 className="text-sm text-custom-text-200">Display Properties</h4>
-                    <div className="flex flex-wrap items-center gap-2 text-custom-text-200">
-                      {Object.keys(properties).map((key) => {
-                        if (key === "estimate" && !isEstimateActive) return null;
-
-                        if (
-                          displayFilters?.layout === "spreadsheet" &&
-                          (key === "attachment_count" ||
-                            key === "link" ||
-                            key === "sub_issue_count")
-                        )
-                          return null;
-
-                        if (
-                          displayFilters?.layout !== "spreadsheet" &&
-                          (key === "created_on" || key === "updated_on")
-                        )
-                          return null;
-
-                        return (
-                          <button
-                            key={key}
-                            type="button"
-                            className={`rounded border px-2 py-1 text-xs capitalize ${
-                              properties[key as keyof Properties]
-                                ? "border-custom-primary bg-custom-primary text-white"
-                                : "border-custom-border-200"
-                            }`}
-                            onClick={() => setProperty(key as keyof Properties)}
-                          >
-                            {key === "key" ? "ID" : replaceUnderscoreIfSnakeCase(key)}
-                          </button>
-                        );
-                      })}
-                    </div>
-                  </div>
-                </div>
-              </Popover.Panel>
-            </Transition>
-          </>
-        )}
-      </Popover>
     </div>
   );
 };

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

@@ -2,26 +2,21 @@ import React from "react";
 
 import { useRouter } from "next/router";
 
-// headless ui
-import { Popover, Transition } from "@headlessui/react";
 // hooks
 import useMyIssuesFilters from "hooks/my-issues/use-my-issues-filter";
-import useEstimateOption from "hooks/use-estimate-option";
+import useWorkspaceIssuesFilters from "hooks/use-worskpace-issue-filter";
 // components
 import { MyIssuesSelectFilters } from "components/issues";
 // ui
-import { CustomMenu, ToggleSwitch, Tooltip } from "components/ui";
+import { Tooltip } from "components/ui";
 // icons
-import { ChevronDownIcon } from "@heroicons/react/24/outline";
 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 { Properties, TIssueViewOptions } from "types";
+import { TIssueViewOptions } from "types";
-// constants
-import { GROUP_BY_OPTIONS, ORDER_BY_OPTIONS, FILTER_ISSUE_OPTIONS } from "constants/issue";
 
 const issueViewOptions: { type: TIssueViewOptions; Icon: any }[] = [
   {
@@ -38,22 +33,15 @@ export const WorkspaceIssuesViewOptions: React.FC = () => {
   const router = useRouter();
   const { workspaceSlug, workspaceViewId } = router.query;
 
-  const { displayFilters, setDisplayFilters, properties, setProperty, filters, setFilters } =
+  const { displayFilters, setDisplayFilters } = useMyIssuesFilters(workspaceSlug?.toString());
-    useMyIssuesFilters(workspaceSlug?.toString());
 
-  const { isEstimateActive } = useEstimateOption();
+  const { filters, setFilters } = useWorkspaceIssuesFilters(
-
+    workspaceSlug?.toString(),
-  const workspaceViewPathName = [
+    workspaceViewId?.toString()
-    "workspace-views/all-issues",
-    "workspace-views/assigned",
-    "workspace-views/created",
-    "workspace-views/subscribed",
-  ];
-
-  const isWorkspaceViewPath = workspaceViewPathName.some((pathname) =>
-    router.pathname.includes(pathname)
   );
 
+  const isWorkspaceViewPath = router.pathname.includes("workspace-views/all-issues");
+
   const showFilters = isWorkspaceViewPath || workspaceViewId;
 
   return (
@@ -126,203 +114,6 @@ export const WorkspaceIssuesViewOptions: React.FC = () => {
             direction="left"
             height="rg"
           />
-          <Popover className="relative">
-            {({ open }) => (
-              <>
-                <Popover.Button
-                  className={`group flex items-center gap-2 rounded-md border border-custom-border-200 bg-transparent px-3 py-1.5 text-xs hover:bg-custom-sidebar-background-90 hover:text-custom-sidebar-text-100 focus:outline-none duration-300 ${
-                    open
-                      ? "bg-custom-sidebar-background-90 text-custom-sidebar-text-100"
-                      : "text-custom-sidebar-text-200"
-                  }`}
-                >
-                  Display
-                  <ChevronDownIcon className="h-3 w-3" aria-hidden="true" />
-                </Popover.Button>
-
-                <Transition
-                  as={React.Fragment}
-                  enter="transition ease-out duration-200"
-                  enterFrom="opacity-0 translate-y-1"
-                  enterTo="opacity-100 translate-y-0"
-                  leave="transition ease-in duration-150"
-                  leaveFrom="opacity-100 translate-y-0"
-                  leaveTo="opacity-0 translate-y-1"
-                >
-                  <Popover.Panel className="absolute right-0 z-30 mt-1 w-screen max-w-xs transform rounded-lg border border-custom-border-200 bg-custom-background-90 p-3 shadow-lg">
-                    <div className="relative divide-y-2 divide-custom-border-200">
-                      <div className="space-y-4 pb-3 text-xs">
-                        {displayFilters?.layout !== "calendar" &&
-                          displayFilters?.layout !== "spreadsheet" && (
-                            <>
-                              <div className="flex items-center justify-between">
-                                <h4 className="text-custom-text-200">Group by</h4>
-                                <div className="w-28">
-                                  <CustomMenu
-                                    label={
-                                      displayFilters?.group_by === "project"
-                                        ? "Project"
-                                        : GROUP_BY_OPTIONS.find(
-                                            (option) => option.key === displayFilters?.group_by
-                                          )?.name ?? "Select"
-                                    }
-                                    className="!w-full"
-                                    buttonClassName="w-full"
-                                  >
-                                    {GROUP_BY_OPTIONS.map((option) => {
-                                      if (
-                                        displayFilters?.layout === "spreadsheet" &&
-                                        option.key === null
-                                      )
-                                        return null;
-                                      if (
-                                        option.key === "state" ||
-                                        option.key === "created_by" ||
-                                        option.key === "assignees"
-                                      )
-                                        return null;
-
-                                      return (
-                                        <CustomMenu.MenuItem
-                                          key={option.key}
-                                          onClick={() =>
-                                            setDisplayFilters({ group_by: option.key })
-                                          }
-                                        >
-                                          {option.name}
-                                        </CustomMenu.MenuItem>
-                                      );
-                                    })}
-                                  </CustomMenu>
-                                </div>
-                              </div>
-                              <div className="flex items-center justify-between">
-                                <h4 className="text-custom-text-200">Order by</h4>
-                                <div className="w-28">
-                                  <CustomMenu
-                                    label={
-                                      ORDER_BY_OPTIONS.find(
-                                        (option) => option.key === displayFilters?.order_by
-                                      )?.name ?? "Select"
-                                    }
-                                    className="!w-full"
-                                    buttonClassName="w-full"
-                                  >
-                                    {ORDER_BY_OPTIONS.map((option) => {
-                                      if (
-                                        displayFilters?.group_by === "priority" &&
-                                        option.key === "priority"
-                                      )
-                                        return null;
-                                      if (option.key === "sort_order") return null;
-
-                                      return (
-                                        <CustomMenu.MenuItem
-                                          key={option.key}
-                                          onClick={() => {
-                                            setDisplayFilters({ order_by: option.key });
-                                          }}
-                                        >
-                                          {option.name}
-                                        </CustomMenu.MenuItem>
-                                      );
-                                    })}
-                                  </CustomMenu>
-                                </div>
-                              </div>
-                            </>
-                          )}
-                        <div className="flex items-center justify-between">
-                          <h4 className="text-custom-text-200">Issue type</h4>
-                          <div className="w-28">
-                            <CustomMenu
-                              label={
-                                FILTER_ISSUE_OPTIONS.find(
-                                  (option) => option.key === displayFilters?.type
-                                )?.name ?? "Select"
-                              }
-                              className="!w-full"
-                              buttonClassName="w-full"
-                            >
-                              {FILTER_ISSUE_OPTIONS.map((option) => (
-                                <CustomMenu.MenuItem
-                                  key={option.key}
-                                  onClick={() =>
-                                    setDisplayFilters({
-                                      type: option.key,
-                                    })
-                                  }
-                                >
-                                  {option.name}
-                                </CustomMenu.MenuItem>
-                              ))}
-                            </CustomMenu>
-                          </div>
-                        </div>
-
-                        {displayFilters?.layout !== "calendar" &&
-                          displayFilters?.layout !== "spreadsheet" && (
-                            <>
-                              <div className="flex items-center justify-between">
-                                <h4 className="text-custom-text-200">Show empty states</h4>
-                                <div className="w-28">
-                                  <ToggleSwitch
-                                    value={displayFilters?.show_empty_groups ?? true}
-                                    onChange={() =>
-                                      setDisplayFilters({
-                                        show_empty_groups: !displayFilters?.show_empty_groups,
-                                      })
-                                    }
-                                  />
-                                </div>
-                              </div>
-                            </>
-                          )}
-                      </div>
-
-                      <div className="space-y-2 py-3">
-                        <h4 className="text-sm text-custom-text-200">Display Properties</h4>
-                        <div className="flex flex-wrap items-center gap-2 text-custom-text-200">
-                          {Object.keys(properties).map((key) => {
-                            if (key === "estimate" && !isEstimateActive) return null;
-
-                            if (
-                              displayFilters?.layout === "spreadsheet" &&
-                              (key === "attachment_count" ||
-                                key === "link" ||
-                                key === "sub_issue_count")
-                            )
-                              return null;
-
-                            if (
-                              displayFilters?.layout !== "spreadsheet" &&
-                              (key === "created_on" || key === "updated_on")
-                            )
-                              return null;
-
-                            return (
-                              <button
-                                key={key}
-                                type="button"
-                                className={`rounded border px-2 py-1 text-xs capitalize ${
-                                  properties[key as keyof Properties]
-                                    ? "border-custom-primary bg-custom-primary text-white"
-                                    : "border-custom-border-200"
-                                }`}
-                                onClick={() => setProperty(key as keyof Properties)}
-                              >
-                                {key === "key" ? "ID" : replaceUnderscoreIfSnakeCase(key)}
-                              </button>
-                            );
-                          })}
-                        </div>
-                      </div>
-                    </div>
-                  </Popover.Panel>
-                </Transition>
-              </>
-            )}
-          </Popover>
         </>
       )}
     </div>

web/components/views/form.tsx

@@ -10,6 +10,8 @@ import { useForm } from "react-hook-form";
 import stateService from "services/state.service";
 // hooks
 import useProjectMembers from "hooks/use-project-members";
+import useProjects from "hooks/use-projects";
+import useWorkspaceMembers from "hooks/use-workspace-members";
 // components
 import { FiltersList } from "components/core";
 import { SelectFilters } from "components/views";
@@ -21,15 +23,15 @@ import { getStatesList } from "helpers/state.helper";
 // types
 import { IQuery, IView } from "types";
 import issuesService from "services/issues.service";
-import { IWorkspaceView } from "types/workspace-view";
 // fetch-keys
-import { PROJECT_ISSUE_LABELS, STATES_LIST } from "constants/fetch-keys";
+import { PROJECT_ISSUE_LABELS, STATES_LIST, WORKSPACE_LABELS } from "constants/fetch-keys";
 
 type Props = {
   handleFormSubmit: (values: IView) => Promise<void>;
   handleClose: () => void;
   status: boolean;
-  data?: IView | IWorkspaceView | null;
+  data?: IView | null;
+  viewType?: "workspace" | "project";
   preLoadedData?: Partial<IView> | null;
 };
 
@@ -43,6 +45,7 @@ export const ViewForm: React.FC<Props> = ({
   handleClose,
   status,
   data,
+  viewType,
   preLoadedData,
 }) => {
   const router = useRouter();
@@ -78,8 +81,26 @@ export const ViewForm: React.FC<Props> = ({
       ? () => issuesService.getIssueLabels(workspaceSlug.toString(), projectId.toString())
       : null
   );
+
+  const { data: workspaceLabels } = useSWR(
+    workspaceSlug ? WORKSPACE_LABELS(workspaceSlug.toString()) : null,
+    workspaceSlug ? () => issuesService.getWorkspaceLabels(workspaceSlug.toString()) : null
+  );
+
+  const labelOptions = viewType === "workspace" ? workspaceLabels : labels;
+
   const { members } = useProjectMembers(workspaceSlug?.toString(), projectId?.toString());
 
+  const { workspaceMembers } = useWorkspaceMembers(workspaceSlug?.toString() ?? "");
+
+  const memberOptions =
+    viewType === "workspace"
+      ? workspaceMembers?.map((m) => m.member)
+      : members?.map((m) => m.member);
+
+  const { projects: allProjects } = useProjects();
+  const joinedProjects = allProjects?.filter((p) => p.is_member);
+
   const handleCreateUpdateView = async (formData: IView) => {
     await handleFormSubmit(formData);
 
@@ -92,11 +113,14 @@ export const ViewForm: React.FC<Props> = ({
     setValue("query", {
       assignees: null,
       created_by: null,
+      subscriber: null,
       labels: null,
       priority: null,
       state: null,
+      state_group: null,
       start_date: null,
       target_date: null,
+      project: null,
     });
   };
 
@@ -185,9 +209,10 @@ export const ViewForm: React.FC<Props> = ({
           <div>
             <FiltersList
               filters={filters}
-              labels={labels}
+              labels={labelOptions}
-              members={members?.map((m) => m.member)}
+              members={memberOptions}
               states={states}
+              project={joinedProjects}
               clearAllFilters={clearAllFilters}
               setFilters={(query: any) => {
                 setValue("query", {

web/components/views/modal.tsx

@@ -15,7 +15,6 @@ import useToast from "hooks/use-toast";
 import { ViewForm } from "components/views";
 // types
 import { ICurrentUserResponse, IView } from "types";
-import { IWorkspaceView } from "types/workspace-view";
 // fetch-keys
 import { VIEWS_LIST, WORKSPACE_VIEWS_LIST } from "constants/fetch-keys";
 
@@ -23,7 +22,7 @@ type Props = {
   isOpen: boolean;
   viewType: "project" | "workspace";
   handleClose: () => void;
-  data?: IView | IWorkspaceView | null;
+  data?: IView | null;
   preLoadedData?: Partial<IView> | null;
   user: ICurrentUserResponse | undefined;
 };
@@ -206,6 +205,7 @@ export const CreateUpdateViewModal: React.FC<Props> = ({
                   handleClose={handleClose}
                   status={data ? true : false}
                   data={data}
+                  viewType={viewType}
                   preLoadedData={preLoadedData}
                 />
               </Dialog.Panel>

web/components/views/select-filters.tsx

@@ -4,6 +4,9 @@ import { useRouter } from "next/router";
 
 import useSWR from "swr";
 
+// hook
+import useProjects from "hooks/use-projects";
+import useWorkspaceMembers from "hooks/use-workspace-members";
 // services
 import stateService from "services/state.service";
 import projectService from "services/project.service";
@@ -18,15 +21,20 @@ import { PriorityIcon, StateGroupIcon } from "components/icons";
 import { getStatesList } from "helpers/state.helper";
 import { checkIfArraysHaveSameElements } from "helpers/array.helper";
 // types
-import { IIssueFilterOptions, IQuery } from "types";
+import { IIssueFilterOptions, TStateGroups } from "types";
 // fetch-keys
-import { PROJECT_ISSUE_LABELS, PROJECT_MEMBERS, STATES_LIST } from "constants/fetch-keys";
+import {
+  PROJECT_ISSUE_LABELS,
+  PROJECT_MEMBERS,
+  STATES_LIST,
+  WORKSPACE_LABELS,
+} from "constants/fetch-keys";
 // constants
-import { PRIORITIES } from "constants/project";
+import { GROUP_CHOICES, PRIORITIES } from "constants/project";
 import { DATE_FILTER_OPTIONS } from "constants/filters";
 
 type Props = {
-  filters: Partial<IIssueFilterOptions> | IQuery;
+  filters: Partial<IIssueFilterOptions>;
   onSelect: (option: any) => void;
   direction?: "left" | "right";
   height?: "sm" | "md" | "rg" | "lg";
@@ -48,7 +56,7 @@ export const SelectFilters: React.FC<Props> = ({
   });
 
   const router = useRouter();
-  const { workspaceSlug, projectId } = router.query;
+  const { workspaceSlug, projectId, workspaceViewId } = router.query;
 
   const { data: states } = useSWR(
     workspaceSlug && projectId ? STATES_LIST(projectId as string) : null,
@@ -58,6 +66,20 @@ export const SelectFilters: React.FC<Props> = ({
   );
   const statesList = getStatesList(states);
 
+  const workspaceViewPathName = [
+    "workspace-views",
+    "workspace-views/all-issues",
+    "workspace-views/assigned",
+    "workspace-views/created",
+    "workspace-views/subscribed",
+  ];
+
+  const isWorkspaceViewPath = workspaceViewPathName.some((pathname) =>
+    router.pathname.includes(pathname)
+  );
+
+  const isWorkspaceView = isWorkspaceViewPath || workspaceViewId;
+
   const { data: members } = useSWR(
     projectId ? PROJECT_MEMBERS(projectId as string) : null,
     workspaceSlug && projectId
@@ -65,6 +87,8 @@ export const SelectFilters: React.FC<Props> = ({
       : null
   );
 
+  const { workspaceMembers } = useWorkspaceMembers(workspaceSlug?.toString() ?? "");
+
   const { data: issueLabels } = useSWR(
     projectId ? PROJECT_ISSUE_LABELS(projectId.toString()) : null,
     workspaceSlug && projectId
@@ -72,6 +96,413 @@ export const SelectFilters: React.FC<Props> = ({
       : null
   );
 
+  const { data: workspaceLabels } = useSWR(
+    workspaceSlug ? WORKSPACE_LABELS(workspaceSlug.toString()) : null,
+    workspaceSlug ? () => issuesService.getWorkspaceLabels(workspaceSlug.toString()) : null
+  );
+
+  const { projects: allProjects } = useProjects();
+  const joinedProjects = allProjects?.filter((p) => p.is_member);
+
+  const projectFilterOption = [
+    {
+      id: "priority",
+      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: "state",
+      label: "State",
+      value: statesList,
+      hasChildren: true,
+      children: statesList?.map((state) => ({
+        id: state.id,
+        label: (
+          <div className="flex items-center gap-2">
+            <StateGroupIcon stateGroup={state.group} color={state.color} />
+            {state.name}
+          </div>
+        ),
+        value: {
+          key: "state",
+          value: state.id,
+        },
+        selected: filters?.state?.includes(state.id),
+      })),
+    },
+    {
+      id: "assignees",
+      label: "Assignees",
+      value: members,
+      hasChildren: true,
+      children: members?.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: "created_by",
+      label: "Created by",
+      value: members,
+      hasChildren: true,
+      children: members?.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: "labels",
+      label: "Labels",
+      value: issueLabels,
+      hasChildren: true,
+      children: issueLabels?.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: "start_date",
+      label: "Start date",
+      value: DATE_FILTER_OPTIONS,
+      hasChildren: true,
+      children: [
+        ...DATE_FILTER_OPTIONS.map((option) => ({
+          id: option.name,
+          label: option.name,
+          value: {
+            key: "start_date",
+            value: option.value,
+          },
+          selected: checkIfArraysHaveSameElements(filters?.start_date ?? [], option.value),
+        })),
+        {
+          id: "custom",
+          label: "Custom",
+          value: "custom",
+          element: (
+            <button
+              onClick={() => {
+                setIsDateFilterModalOpen(true);
+                setDateFilterType({
+                  title: "Start date",
+                  type: "start_date",
+                });
+              }}
+              className="w-full rounded px-1 py-1.5 text-left text-custom-text-200 hover:bg-custom-background-80"
+            >
+              Custom
+            </button>
+          ),
+        },
+      ],
+    },
+    {
+      id: "target_date",
+      label: "Due date",
+      value: DATE_FILTER_OPTIONS,
+      hasChildren: true,
+      children: [
+        ...DATE_FILTER_OPTIONS.map((option) => ({
+          id: option.name,
+          label: option.name,
+          value: {
+            key: "target_date",
+            value: option.value,
+          },
+          selected: checkIfArraysHaveSameElements(filters?.target_date ?? [], option.value),
+        })),
+        {
+          id: "custom",
+          label: "Custom",
+          value: "custom",
+          element: (
+            <button
+              onClick={() => {
+                setIsDateFilterModalOpen(true);
+                setDateFilterType({
+                  title: "Due date",
+                  type: "target_date",
+                });
+              }}
+              className="w-full rounded px-1 py-1.5 text-left text-custom-text-200 hover:bg-custom-background-80"
+            >
+              Custom
+            </button>
+          ),
+        },
+      ],
+    },
+  ];
+
+  const workspaceFilterOption = [
+    {
+      id: "project",
+      label: "Project",
+      value: joinedProjects,
+      hasChildren: true,
+      children: joinedProjects?.map((project) => ({
+        id: project.id,
+        label: <div className="flex items-center gap-2">{project.name}</div>,
+        value: {
+          key: "project",
+          value: project.id,
+        },
+        selected: filters?.project?.includes(project.id),
+      })),
+    },
+    {
+      id: "state_group",
+      label: "State groups",
+      value: GROUP_CHOICES,
+      hasChildren: true,
+      children: [
+        ...Object.keys(GROUP_CHOICES).map((key) => ({
+          id: key,
+          label: (
+            <div className="flex items-center gap-2">
+              <StateGroupIcon stateGroup={key as TStateGroups} />
+              {GROUP_CHOICES[key as keyof typeof GROUP_CHOICES]}
+            </div>
+          ),
+          value: {
+            key: "state_group",
+            value: key,
+          },
+          selected: filters?.state?.includes(key),
+        })),
+      ],
+    },
+    {
+      id: "labels",
+      label: "Labels",
+      value: workspaceLabels,
+      hasChildren: true,
+      children: workspaceLabels?.map((label) => ({
+        id: label.id,
+        label: (
+          <div className="flex items-center gap-2">
+            <div
+              className="h-2 w-2 rounded-full"
+              style={{
+                backgroundColor: label.color && label.color !== "" ? label.color : "#000000",
+              }}
+            />
+            {label.name}
+          </div>
+        ),
+        value: {
+          key: "labels",
+          value: label.id,
+        },
+        selected: filters?.labels?.includes(label.id),
+      })),
+    },
+    {
+      id: "priority",
+      label: "Priority",
+      value: PRIORITIES,
+      hasChildren: true,
+      children: PRIORITIES.map((priority) => ({
+        id: priority === null ? "null" : priority,
+        label: (
+          <div className="flex items-center gap-2 capitalize">
+            <PriorityIcon priority={priority} />
+            {priority ?? "None"}
+          </div>
+        ),
+        value: {
+          key: "priority",
+          value: priority === null ? "null" : priority,
+        },
+        selected: filters?.priority?.includes(priority === null ? "null" : priority),
+      })),
+    },
+    {
+      id: "created_by",
+      label: "Created by",
+      value: workspaceMembers,
+      hasChildren: true,
+      children: workspaceMembers?.map((member) => ({
+        id: member.member.id,
+        label: (
+          <div className="flex items-center gap-2">
+            <Avatar user={member.member} />
+            {member.member.display_name}
+          </div>
+        ),
+        value: {
+          key: "created_by",
+          value: member.member.id,
+        },
+        selected: filters?.created_by?.includes(member.member.id),
+      })),
+    },
+    {
+      id: "assignees",
+      label: "Assignees",
+      value: workspaceMembers,
+      hasChildren: true,
+      children: workspaceMembers?.map((member) => ({
+        id: member.member.id,
+        label: (
+          <div className="flex items-center gap-2">
+            <Avatar user={member.member} />
+            {member.member.display_name}
+          </div>
+        ),
+        value: {
+          key: "assignees",
+          value: member.member.id,
+        },
+        selected: filters?.assignees?.includes(member.member.id),
+      })),
+    },
+    {
+      id: "subscriber",
+      label: "Subscriber",
+      value: workspaceMembers,
+      hasChildren: true,
+      children: workspaceMembers?.map((member) => ({
+        id: member.member.id,
+        label: (
+          <div className="flex items-center gap-2">
+            <Avatar user={member.member} />
+            {member.member.display_name}
+          </div>
+        ),
+        value: {
+          key: "subscriber",
+          value: member.member.id,
+        },
+        selected: filters?.subscriber?.includes(member.member.id),
+      })),
+    },
+    {
+      id: "start_date",
+      label: "Start date",
+      value: DATE_FILTER_OPTIONS,
+      hasChildren: true,
+      children: [
+        ...DATE_FILTER_OPTIONS.map((option) => ({
+          id: option.name,
+          label: option.name,
+          value: {
+            key: "start_date",
+            value: option.value,
+          },
+          selected: checkIfArraysHaveSameElements(filters?.start_date ?? [], option.value),
+        })),
+        {
+          id: "custom",
+          label: "Custom",
+          value: "custom",
+          element: (
+            <button
+              onClick={() => {
+                setIsDateFilterModalOpen(true);
+                setDateFilterType({
+                  title: "Start date",
+                  type: "start_date",
+                });
+              }}
+              className="w-full rounded px-1 py-1.5 text-left text-custom-text-200 hover:bg-custom-background-80"
+            >
+              Custom
+            </button>
+          ),
+        },
+      ],
+    },
+    {
+      id: "target_date",
+      label: "Due date",
+      value: DATE_FILTER_OPTIONS,
+      hasChildren: true,
+      children: [
+        ...DATE_FILTER_OPTIONS.map((option) => ({
+          id: option.name,
+          label: option.name,
+          value: {
+            key: "target_date",
+            value: option.value,
+          },
+          selected: checkIfArraysHaveSameElements(filters?.target_date ?? [], option.value),
+        })),
+        {
+          id: "custom",
+          label: "Custom",
+          value: "custom",
+          element: (
+            <button
+              onClick={() => {
+                setIsDateFilterModalOpen(true);
+                setDateFilterType({
+                  title: "Due date",
+                  type: "target_date",
+                });
+              }}
+              className="w-full rounded px-1 py-1.5 text-left text-custom-text-200 hover:bg-custom-background-80"
+            >
+              Custom
+            </button>
+          ),
+        },
+      ],
+    },
+  ];
+
+  const filterOption = isWorkspaceView ? workspaceFilterOption : projectFilterOption;
+
   return (
     <>
       {isDateFilterModalOpen && (
@@ -89,185 +520,7 @@ export const SelectFilters: React.FC<Props> = ({
         onSelect={onSelect}
         direction={direction}
         height={height}
-        options={[
+        options={filterOption}
-          {
-            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: "state",
-            label: "State",
-            value: statesList,
-            hasChildren: true,
-            children: statesList?.map((state) => ({
-              id: state.id,
-              label: (
-                <div className="flex items-center gap-2">
-                  <StateGroupIcon stateGroup={state.group} color={state.color} />
-                  {state.name}
-                </div>
-              ),
-              value: {
-                key: "state",
-                value: state.id,
-              },
-              selected: filters?.state?.includes(state.id),
-            })),
-          },
-          {
-            id: "assignees",
-            label: "Assignees",
-            value: members,
-            hasChildren: true,
-            children: members?.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: "created_by",
-            label: "Created by",
-            value: members,
-            hasChildren: true,
-            children: members?.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: "labels",
-            label: "Labels",
-            value: issueLabels,
-            hasChildren: true,
-            children: issueLabels?.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: "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>
-                ),
-              },
-            ],
-          },
-        ]}
       />
     </>
   );

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

@@ -1,39 +1,24 @@
-import React, { useState } from "react";
+import React from "react";
 
 import { useRouter } from "next/router";
 
 import useSWR from "swr";
 
-// hooks
-import useMyIssuesFilters from "hooks/my-issues/use-my-issues-filter";
-import useToast from "hooks/use-toast";
-// components
-import { FiltersList } from "components/core";
-import { PrimaryButton } from "components/ui";
-import { CreateUpdateViewModal } from "components/views";
 // icon
 import { PlusIcon } from "lucide-react";
 // constant
 import { WORKSPACE_VIEWS_LIST } from "constants/fetch-keys";
 // service
 import workspaceService from "services/workspace.service";
-// type
-import { ICurrentUserResponse, IIssueFilterOptions } from "types";
 
 type Props = {
-  user: ICurrentUserResponse | undefined;
+  handleAddView: () => void;
 };
 
-export const WorkspaceViewsNavigation: React.FC<Props> = ({ user }) => {
+export const WorkspaceViewsNavigation: React.FC<Props> = ({ handleAddView }) => {
-  const [createViewModal, setCreateViewModal] = useState<any>(null);
-
   const router = useRouter();
   const { workspaceSlug, workspaceViewId } = router.query;
 
-  const { setToastAlert } = useToast();
-
-  const { filters, setFilters } = useMyIssuesFilters(workspaceSlug?.toString());
-
   const { data: workspaceViews } = useSWR(
     workspaceSlug ? WORKSPACE_VIEWS_LIST(workspaceSlug.toString()) : null,
     workspaceSlug ? () => workspaceService.getAllViews(workspaceSlug.toString()) : null
@@ -68,100 +53,40 @@ export const WorkspaceViewsNavigation: React.FC<Props> = ({ user }) => {
     },
   ];
 
-  const nullFilters = Object.keys(filters).filter(
-    (key) => filters[key as keyof IIssueFilterOptions] === null
-  );
-
-  const areFiltersApplied =
-    Object.keys(filters).length > 0 && nullFilters.length !== Object.keys(filters).length;
-
   return (
-    <>
+    <div className="group flex items-center overflow-x-scroll">
-      <CreateUpdateViewModal
+      {tabsList.map((tab) => (
-        isOpen={createViewModal !== null}
+        <button
-        handleClose={() => setCreateViewModal(null)}
+          key={tab.key}
-        viewType="workspace"
+          type="button"
-        preLoadedData={createViewModal}
+          onClick={tab.onClick}
-        user={user}
+          className={`border-b-2 min-w-[96px] p-4 text-sm font-medium outline-none whitespace-nowrap ${
-      />
+            tab.selected
-      <div className="group flex items-center overflow-x-scroll">
+              ? "border-custom-primary-100 text-custom-primary-100"
-        {tabsList.map((tab) => (
+              : "border-transparent hover:border-custom-primary-100 hover:text-custom-primary-100"
+          }`}
+        >
+          {tab.label}
+        </button>
+      ))}
+      {workspaceViews &&
+        workspaceViews.length > 0 &&
+        workspaceViews?.map((view) => (
           <button
-            key={tab.key}
-            type="button"
-            onClick={tab.onClick}
             className={`border-b-2 min-w-[96px] p-4 text-sm font-medium outline-none whitespace-nowrap ${
-              tab.selected
+              view.id === workspaceViewId
                 ? "border-custom-primary-100 text-custom-primary-100"
                 : "border-transparent hover:border-custom-primary-100 hover:text-custom-primary-100"
             }`}
+            onClick={() => router.push(`/${workspaceSlug}/workspace-views/${view.id}`)}
           >
-            {tab.label}
+            {view.name}
           </button>
         ))}
-        {workspaceViews &&
-          workspaceViews.length > 0 &&
-          workspaceViews?.map((view) => (
-            <button
-              className={`border-b-2 min-w-[96px] p-4 text-sm font-medium outline-none whitespace-nowrap ${
-                view.id === workspaceViewId
-                  ? "border-custom-primary-100 text-custom-primary-100"
-                  : "border-transparent hover:border-custom-primary-100 hover:text-custom-primary-100"
-              }`}
-              onClick={() => router.push(`/${workspaceSlug}/workspace-views/${view.id}`)}
-            >
-              {view.name}
-            </button>
-          ))}
 
-        <button type="button" className="min-w-[96px] " onClick={() => setCreateViewModal(true)}>
+      <button type="button" className="min-w-[96px] " onClick={handleAddView}>
-          <PlusIcon className="h-4 w-4 text-custom-primary-200 hover:text-current" />
+        <PlusIcon className="h-4 w-4 text-custom-primary-200 hover:text-current" />
-        </button>
+      </button>
-      </div>
+    </div>
-      {areFiltersApplied && (
-        <>
-          <div className="flex items-center justify-between gap-2 px-5 pt-3 pb-0">
-            <FiltersList
-              filters={filters}
-              setFilters={(updatedFilter) => setFilters(updatedFilter)}
-              labels={[]}
-              members={[]}
-              states={[]}
-              clearAllFilters={() =>
-                setFilters({
-                  assignees: null,
-                  created_by: null,
-                  labels: null,
-                  priority: null,
-                  state: null,
-                  start_date: null,
-                  target_date: null,
-                })
-              }
-            />
-            <PrimaryButton
-              onClick={() => {
-                if (workspaceViewId) {
-                  setFilters({});
-                  setToastAlert({
-                    title: "View updated",
-                    message: "Your view has been updated",
-                    type: "success",
-                  });
-                } else
-                  setCreateViewModal({
-                    query: filters,
-                  });
-              }}
-              className="flex items-center gap-2 text-sm"
-            >
-              {!workspaceViewId && <PlusIcon className="h-4 w-4" />}
-              {workspaceViewId ? "Update" : "Save"} view
-            </PrimaryButton>
-          </div>
-          {<div className="mt-3 border-t border-custom-border-200" />}
-        </>
-      )}
-    </>
   );
 };

web/hooks/use-worskpace-issue-filter.tsx

@@ -0,0 +1,114 @@
+import { useEffect, useCallback } from "react";
+
+import useSWR, { mutate } from "swr";
+
+// services
+import workspaceService from "services/workspace.service";
+// types
+import { IIssueFilterOptions, IView } from "types";
+// fetch-keys
+import { WORKSPACE_VIEW_DETAILS } from "constants/fetch-keys";
+
+const initialValues: IIssueFilterOptions = {
+  assignees: null,
+  created_by: null,
+  labels: null,
+  priority: null,
+  state: null,
+  state_group: null,
+  subscriber: null,
+  start_date: null,
+  target_date: null,
+  estimate_point: null,
+  project: null,
+};
+
+const useWorkspaceIssuesFilters = (
+  workspaceSlug: string | undefined,
+  workspaceViewId: string | undefined
+) => {
+  const { data: workspaceViewDetails } = useSWR(
+    workspaceSlug && workspaceViewId ? WORKSPACE_VIEW_DETAILS(workspaceViewId) : null,
+    workspaceSlug && workspaceViewId
+      ? () => workspaceService.getViewDetails(workspaceSlug, workspaceViewId)
+      : null
+  );
+
+  const saveData = useCallback(
+    (data: Partial<IIssueFilterOptions>) => {
+      if (!workspaceSlug || !workspaceViewId || !workspaceViewDetails) return;
+
+      const oldData = { ...workspaceViewDetails };
+
+      mutate<IView>(
+        WORKSPACE_VIEW_DETAILS(workspaceViewId),
+        (prevData) => {
+          if (!prevData) return;
+          return {
+            ...prevData,
+            query_data: {
+              ...prevData?.query_data,
+              ...data,
+            },
+          };
+        },
+        false
+      );
+
+      workspaceService.updateView(workspaceSlug, workspaceViewId, {
+        query_data: {
+          ...oldData.query_data,
+          ...data,
+        },
+      });
+    },
+    [workspaceViewDetails, workspaceSlug, workspaceViewId]
+  );
+
+  const filters = workspaceViewDetails?.query_data ?? initialValues;
+
+  const setFilters = useCallback(
+    (updatedFilter: Partial<IIssueFilterOptions>) => {
+      if (!workspaceViewDetails) return;
+
+      saveData({
+        ...workspaceViewDetails?.query_data,
+        ...updatedFilter,
+      });
+    },
+    [workspaceViewDetails, saveData]
+  );
+
+  useEffect(() => {
+    if (!workspaceViewDetails || !workspaceSlug || !workspaceViewId) return;
+
+    if (!workspaceViewDetails.query_data) {
+      workspaceService.updateView(workspaceSlug, workspaceViewId, {
+        query_data: { ...initialValues },
+      });
+    }
+  }, [workspaceViewDetails, workspaceViewId, workspaceSlug]);
+
+  const params: any = {
+    assignees: filters?.assignees ? filters?.assignees.join(",") : undefined,
+    subscriber: filters?.subscriber ? filters?.subscriber.join(",") : undefined,
+    state: filters?.state ? filters?.state.join(",") : undefined,
+    state_group: filters?.state_group ? filters?.state_group.join(",") : undefined,
+    priority: filters?.priority ? filters?.priority.join(",") : undefined,
+    labels: filters?.labels ? filters?.labels.join(",") : undefined,
+    created_by: filters?.created_by ? filters?.created_by.join(",") : undefined,
+    start_date: filters?.start_date ? filters?.start_date.join(",") : undefined,
+    target_date: filters?.target_date ? filters?.target_date.join(",") : undefined,
+    project: filters?.project ? filters?.project.join(",") : undefined,
+    sub_issue: false,
+    type: undefined,
+  };
+
+  return {
+    params,
+    filters,
+    setFilters,
+  };
+};
+
+export default useWorkspaceIssuesFilters;