feat: my issues view layouts and filters, refactor: issue views (#1681)

* refactor: issue views and my issues

* chore: update view dropdown options

* refactor: render emoji function

* refactor: api calss

* fix: build errors

* fix: fetch states only when dropdown is opened

* chore: my issues dnd

* fix: build errors

* refactor: folder structure

apps/app/components/issues/delete-issue-modal.tsx

@@ -63,7 +63,7 @@ export const DeleteIssueModal: React.FC<Props> = ({ isOpen, handleClose, data, u
     if (!workspaceSlug || !projectId || !data) return;
 
     await issueServices
-      .deleteIssue(workspaceSlug as string, projectId as string, data.id, user)
+      .deleteIssue(workspaceSlug as string, data.project, data.id, user)
       .then(() => {
         if (issueView === "calendar") {
           const calendarFetchKey = cycleId
@@ -72,7 +72,7 @@ export const DeleteIssueModal: React.FC<Props> = ({ isOpen, handleClose, data, u
             ? MODULE_ISSUES_WITH_PARAMS(moduleId.toString(), calendarParams)
             : viewId
             ? VIEW_ISSUES(viewId.toString(), calendarParams)
-            : PROJECT_ISSUES_LIST_WITH_PARAMS(projectId.toString(), calendarParams);
+            : PROJECT_ISSUES_LIST_WITH_PARAMS(data.project, calendarParams);
 
           mutate<IIssue[]>(
             calendarFetchKey,
@@ -86,7 +86,7 @@ export const DeleteIssueModal: React.FC<Props> = ({ isOpen, handleClose, data, u
             ? MODULE_ISSUES_WITH_PARAMS(moduleId.toString(), spreadsheetParams)
             : viewId
             ? VIEW_ISSUES(viewId.toString(), spreadsheetParams)
-            : PROJECT_ISSUES_LIST_WITH_PARAMS(projectId?.toString() ?? "", spreadsheetParams);
+            : PROJECT_ISSUES_LIST_WITH_PARAMS(data.project, spreadsheetParams);
           if (data.parent) {
             mutate<ISubIssueResponse>(
               SUB_ISSUES(data.parent.toString()),

apps/app/components/issues/index.ts

@@ -1,5 +1,6 @@
 export * from "./attachment";
 export * from "./comment";
+export * from "./my-issues";
 export * from "./sidebar-select";
 export * from "./view-select";
 export * from "./activity";
@@ -9,7 +10,6 @@ export * from "./form";
 export * from "./gantt-chart";
 export * from "./main-content";
 export * from "./modal";
-export * from "./my-issues-list-item";
 export * from "./parent-issues-list-modal";
 export * from "./sidebar";
 export * from "./sub-issues-list";

apps/app/components/issues/my-issues-list-item.tsx

@@ -1,218 +0,0 @@
-import React, { useCallback } from "react";
-
-import Link from "next/link";
-import { useRouter } from "next/router";
-
-import { mutate } from "swr";
-
-// hooks
-import useToast from "hooks/use-toast";
-import useUserAuth from "hooks/use-user-auth";
-// services
-import issuesService from "services/issues.service";
-// components
-import {
-  ViewDueDateSelect,
-  ViewPrioritySelect,
-  ViewStateSelect,
-} from "components/issues/view-select";
-// icon
-import { LinkIcon, PaperClipIcon } from "@heroicons/react/24/outline";
-import { LayerDiagonalIcon } from "components/icons";
-// ui
-import { AssigneesList } from "components/ui/avatar";
-import { CustomMenu, Tooltip } from "components/ui";
-// types
-import { IIssue, Properties } from "types";
-// helper
-import { copyTextToClipboard, truncateText } from "helpers/string.helper";
-// fetch-keys
-import { USER_ISSUE } from "constants/fetch-keys";
-
-type Props = {
-  issue: IIssue;
-  properties: Properties;
-  projectId: string;
-};
-
-export const MyIssuesListItem: React.FC<Props> = ({ issue, properties, projectId }) => {
-  const router = useRouter();
-  const { workspaceSlug } = router.query;
-
-  const { user } = useUserAuth();
-
-  const { setToastAlert } = useToast();
-
-  const partialUpdateIssue = useCallback(
-    (formData: Partial<IIssue>, issue: IIssue) => {
-      if (!workspaceSlug) return;
-
-      mutate<IIssue[]>(
-        USER_ISSUE(workspaceSlug as string),
-        (prevData) =>
-          prevData?.map((p) => {
-            if (p.id === issue.id) return { ...p, ...formData };
-
-            return p;
-          }),
-        false
-      );
-
-      issuesService
-        .patchIssue(workspaceSlug as string, projectId as string, issue.id, formData, user)
-        .then((res) => {
-          mutate(USER_ISSUE(workspaceSlug as string));
-        })
-        .catch((error) => {
-          console.log(error);
-        });
-    },
-    [workspaceSlug, projectId, user]
-  );
-
-  const handleCopyText = () => {
-    const originURL =
-      typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
-    copyTextToClipboard(
-      `${originURL}/${workspaceSlug}/projects/${projectId}/issues/${issue.id}`
-    ).then(() => {
-      setToastAlert({
-        type: "success",
-        title: "Link Copied!",
-        message: "Issue link copied to clipboard.",
-      });
-    });
-  };
-
-  const isNotAllowed = false;
-
-  return (
-    <div className="border-b border-custom-border-200 bg-custom-background-100 px-4 py-2.5 last:border-b-0">
-      <div key={issue.id} className="flex items-center justify-between gap-2">
-        <Link href={`/${workspaceSlug}/projects/${issue?.project_detail?.id}/issues/${issue.id}`}>
-          <a className="group relative flex items-center gap-2">
-            {properties?.key && (
-              <Tooltip
-                tooltipHeading="Issue ID"
-                tooltipContent={`${issue.project_detail?.identifier}-${issue.sequence_id}`}
-              >
-                <span className="flex-shrink-0 text-xs text-custom-text-200">
-                  {issue.project_detail?.identifier}-{issue.sequence_id}
-                </span>
-              </Tooltip>
-            )}
-            <Tooltip position="top-left" tooltipHeading="Title" tooltipContent={issue.name}>
-              <span className="text-[0.825rem] text-custom-text-100">
-                {truncateText(issue.name, 50)}
-              </span>
-            </Tooltip>
-          </a>
-        </Link>
-
-        <div className="flex flex-wrap items-center gap-2 text-xs">
-          {properties.priority && (
-            <ViewPrioritySelect
-              issue={issue}
-              partialUpdateIssue={partialUpdateIssue}
-              user={user}
-              isNotAllowed={isNotAllowed}
-            />
-          )}
-          {properties.state && (
-            <ViewStateSelect
-              issue={issue}
-              partialUpdateIssue={partialUpdateIssue}
-              user={user}
-              isNotAllowed={isNotAllowed}
-            />
-          )}
-          {properties.due_date && issue.target_date && (
-            <ViewDueDateSelect
-              issue={issue}
-              partialUpdateIssue={partialUpdateIssue}
-              user={user}
-              isNotAllowed={isNotAllowed}
-            />
-          )}
-          {properties.labels && issue.labels.length > 0 && (
-            <div className="flex flex-wrap gap-1">
-              {issue.label_details.map((label) => (
-                <span
-                  key={label.id}
-                  className="group flex items-center gap-1 rounded-2xl border border-custom-border-200 px-2 py-0.5 text-xs text-custom-text-200"
-                >
-                  <span
-                    className="h-1.5 w-1.5 rounded-full"
-                    style={{
-                      backgroundColor: label?.color && label.color !== "" ? label.color : "#000",
-                    }}
-                  />
-                  {label.name}
-                </span>
-              ))}
-            </div>
-          )}
-          {properties.assignee && (
-            <div className="flex cursor-default items-center rounded-md border border-custom-border-200 px-2 py-1 text-xs shadow-sm">
-              <Tooltip
-                position="top-right"
-                tooltipHeading="Assignees"
-                tooltipContent={
-                  issue.assignee_details.length > 0
-                    ? issue.assignee_details
-                        .map((assignee) =>
-                          assignee?.first_name !== "" ? assignee?.first_name : assignee?.email
-                        )
-                        .join(", ")
-                    : "No Assignee"
-                }
-              >
-                <div className="flex h-4 items-center gap-1">
-                  <AssigneesList userIds={issue.assignees ?? []} />
-                </div>
-              </Tooltip>
-            </div>
-          )}
-          {properties.sub_issue_count && issue.sub_issues_count > 0 && (
-            <div className="flex cursor-default items-center rounded-md border border-custom-border-200 px-2.5 py-1 text-xs shadow-sm">
-              <Tooltip tooltipHeading="Sub-issue" tooltipContent={`${issue.sub_issues_count}`}>
-                <div className="flex items-center gap-1 text-custom-text-200">
-                  <LayerDiagonalIcon className="h-3.5 w-3.5" />
-                  {issue.sub_issues_count}
-                </div>
-              </Tooltip>
-            </div>
-          )}
-          {properties.link && issue.link_count > 0 && (
-            <div className="flex cursor-default items-center rounded-md border border-custom-border-200 px-2 py-1 text-xs shadow-sm">
-              <Tooltip tooltipHeading="Link" tooltipContent={`${issue.link_count}`}>
-                <div className="flex items-center gap-1 text-custom-text-200">
-                  <LinkIcon className="h-3.5 w-3.5 text-custom-text-200" />
-                  {issue.link_count}
-                </div>
-              </Tooltip>
-            </div>
-          )}
-          {properties.attachment_count && issue.attachment_count > 0 && (
-            <div className="flex cursor-default items-center rounded-md border border-custom-border-200 px-2 py-1 text-xs shadow-sm">
-              <Tooltip tooltipHeading="Attachment" tooltipContent={`${issue.attachment_count}`}>
-                <div className="flex items-center gap-1 text-custom-text-200">
-                  <PaperClipIcon className="h-3.5 w-3.5 -rotate-45 text-custom-text-200" />
-                  {issue.attachment_count}
-                </div>
-              </Tooltip>
-            </div>
-          )}
-          <CustomMenu width="auto" ellipsis>
-            <CustomMenu.MenuItem onClick={handleCopyText}>
-              <span className="flex items-center justify-start gap-2">
-                <LinkIcon className="h-4 w-4" />
-                <span>Copy issue link</span>
-              </span>
-            </CustomMenu.MenuItem>
-          </CustomMenu>
-        </div>
-      </div>
-    </div>
-  );
-};

apps/app/components/issues/my-issues/index.ts

@@ -0,0 +1,3 @@
+export * from "./my-issues-select-filters";
+export * from "./my-issues-view-options";
+export * from "./my-issues-view";

apps/app/components/issues/my-issues/my-issues-select-filters.tsx

@@ -0,0 +1,168 @@
+import { useState } from "react";
+
+import { useRouter } from "next/router";
+
+import useSWR from "swr";
+
+// services
+import issuesService from "services/issues.service";
+// components
+import { DueDateFilterModal } from "components/core";
+// ui
+import { MultiLevelDropdown } from "components/ui";
+// icons
+import { getPriorityIcon, getStateGroupIcon } from "components/icons";
+// helpers
+import { checkIfArraysHaveSameElements } from "helpers/array.helper";
+// types
+import { IIssueFilterOptions, IQuery } from "types";
+// fetch-keys
+import { WORKSPACE_LABELS } from "constants/fetch-keys";
+// constants
+import { GROUP_CHOICES, PRIORITIES } from "constants/project";
+import { DUE_DATES } from "constants/due-dates";
+
+type Props = {
+  filters: Partial<IIssueFilterOptions> | IQuery;
+  onSelect: (option: any) => void;
+  direction?: "left" | "right";
+  height?: "sm" | "md" | "rg" | "lg";
+};
+
+export const MyIssuesSelectFilters: React.FC<Props> = ({
+  filters,
+  onSelect,
+  direction = "right",
+  height = "md",
+}) => {
+  const [isDueDateFilterModalOpen, setIsDueDateFilterModalOpen] = useState(false);
+  const [fetchLabels, setFetchLabels] = useState(false);
+
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  const { data: labels } = useSWR(
+    workspaceSlug && fetchLabels ? WORKSPACE_LABELS(workspaceSlug.toString()) : null,
+    workspaceSlug && fetchLabels
+      ? () => issuesService.getWorkspaceLabels(workspaceSlug.toString())
+      : null
+  );
+
+  return (
+    <>
+      {isDueDateFilterModalOpen && (
+        <DueDateFilterModal
+          isOpen={isDueDateFilterModalOpen}
+          handleClose={() => setIsDueDateFilterModalOpen(false)}
+        />
+      )}
+      <MultiLevelDropdown
+        label="Filters"
+        onSelect={onSelect}
+        direction={direction}
+        height={height}
+        options={[
+          {
+            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">
+                    {getPriorityIcon(priority)} {priority ?? "None"}
+                  </div>
+                ),
+                value: {
+                  key: "priority",
+                  value: priority === null ? "null" : priority,
+                },
+                selected: filters?.priority?.includes(priority === null ? "null" : priority),
+              })),
+            ],
+          },
+          {
+            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">
+                    {getStateGroupIcon(key as any, "16", "16")}{" "}
+                    {GROUP_CHOICES[key as keyof typeof GROUP_CHOICES]}
+                  </div>
+                ),
+                value: {
+                  key: "state_group",
+                  value: key,
+                },
+                selected: filters?.state?.includes(key),
+              })),
+            ],
+          },
+          {
+            id: "labels",
+            label: "Labels",
+            onClick: () => setFetchLabels(true),
+            value: labels,
+            hasChildren: true,
+            children: labels?.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: "target_date",
+            label: "Due date",
+            value: DUE_DATES,
+            hasChildren: true,
+            children: [
+              ...(DUE_DATES?.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={() => setIsDueDateFilterModalOpen(true)}
+                    className="w-full rounded px-1 py-1.5 text-left text-custom-text-200 hover:bg-custom-background-80"
+                  >
+                    Custom
+                  </button>
+                ),
+              },
+            ],
+          },
+        ]}
+      />
+    </>
+  );
+};

apps/app/components/issues/my-issues/my-issues-view-options.tsx

@@ -0,0 +1,290 @@
+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";
+// icons
+import { ChevronDownIcon } from "@heroicons/react/24/outline";
+import { FormatListBulletedOutlined, GridViewOutlined } from "@mui/icons-material";
+// helpers
+import { replaceUnderscoreIfSnakeCase } from "helpers/string.helper";
+import { checkIfArraysHaveSameElements } from "helpers/array.helper";
+// types
+import { Properties, TIssueViewOptions } from "types";
+// constants
+import { GROUP_BY_OPTIONS, ORDER_BY_OPTIONS, FILTER_ISSUE_OPTIONS } from "constants/issue";
+
+const issueViewOptions: { type: TIssueViewOptions; Icon: any }[] = [
+  {
+    type: "list",
+    Icon: FormatListBulletedOutlined,
+  },
+  {
+    type: "kanban",
+    Icon: GridViewOutlined,
+  },
+];
+
+export const MyIssuesViewOptions: React.FC = () => {
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  const {
+    issueView,
+    setIssueView,
+    groupBy,
+    setGroupBy,
+    orderBy,
+    setOrderBy,
+    showEmptyGroups,
+    setShowEmptyGroups,
+    properties,
+    setProperty,
+    filters,
+    setFilters,
+  } = useMyIssuesFilters(workspaceSlug?.toString());
+
+  const { isEstimateActive } = useEstimateOption();
+
+  return (
+    <div className="flex items-center gap-2">
+      <div className="flex items-center gap-x-1">
+        {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-80 duration-300 ${
+                issueView === option.type
+                  ? "bg-custom-sidebar-background-80"
+                  : "text-custom-sidebar-text-200"
+              }`}
+              onClick={() => setIssueView(option.type)}
+            >
+              <option.Icon
+                sx={{
+                  fontSize: 16,
+                }}
+                className={option.type === "gantt_chart" ? "rotate-90" : ""}
+              />
+            </button>
+          </Tooltip>
+        ))}
+      </div>
+      <MyIssuesSelectFilters
+        filters={filters}
+        onSelect={(option) => {
+          const key = option.key as keyof typeof filters;
+
+          if (key === "target_date") {
+            const valueExists = checkIfArraysHaveSameElements(
+              filters?.target_date ?? [],
+              option.value
+            );
+
+            setFilters({
+              target_date: valueExists ? null : option.value,
+            });
+          } else {
+            const valueExists = filters[key]?.includes(option.value);
+
+            if (valueExists)
+              setFilters({
+                [option.key]: ((filters[key] ?? []) as any[])?.filter(
+                  (val) => val !== option.value
+                ),
+              });
+            else
+              setFilters({
+                [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-sidebar-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"
+              }`}
+            >
+              View
+              <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">
+                    {issueView !== "calendar" && issueView !== "spreadsheet" && (
+                      <>
+                        <div className="flex items-center justify-between">
+                          <h4 className="text-custom-text-200">Group by</h4>
+                          <CustomMenu
+                            label={
+                              groupBy === "project"
+                                ? "Project"
+                                : GROUP_BY_OPTIONS.find((option) => option.key === groupBy)?.name ??
+                                  "Select"
+                            }
+                          >
+                            {GROUP_BY_OPTIONS.map((option) => {
+                              if (issueView === "kanban" && option.key === null) return null;
+                              if (option.key === "state" || option.key === "created_by")
+                                return null;
+
+                              return (
+                                <CustomMenu.MenuItem
+                                  key={option.key}
+                                  onClick={() => setGroupBy(option.key)}
+                                >
+                                  {option.name}
+                                </CustomMenu.MenuItem>
+                              );
+                            })}
+                          </CustomMenu>
+                        </div>
+                        <div className="flex items-center justify-between">
+                          <h4 className="text-custom-text-200">Order by</h4>
+                          <CustomMenu
+                            label={
+                              ORDER_BY_OPTIONS.find((option) => option.key === orderBy)?.name ??
+                              "Select"
+                            }
+                          >
+                            {ORDER_BY_OPTIONS.map((option) => {
+                              if (groupBy === "priority" && option.key === "priority") return null;
+                              if (option.key === "sort_order") return null;
+
+                              return (
+                                <CustomMenu.MenuItem
+                                  key={option.key}
+                                  onClick={() => {
+                                    setOrderBy(option.key);
+                                  }}
+                                >
+                                  {option.name}
+                                </CustomMenu.MenuItem>
+                              );
+                            })}
+                          </CustomMenu>
+                        </div>
+                      </>
+                    )}
+                    <div className="flex items-center justify-between">
+                      <h4 className="text-custom-text-200">Issue type</h4>
+                      <CustomMenu
+                        label={
+                          FILTER_ISSUE_OPTIONS.find((option) => option.key === filters?.type)
+                            ?.name ?? "Select"
+                        }
+                      >
+                        {FILTER_ISSUE_OPTIONS.map((option) => (
+                          <CustomMenu.MenuItem
+                            key={option.key}
+                            onClick={() =>
+                              setFilters({
+                                type: option.key,
+                              })
+                            }
+                          >
+                            {option.name}
+                          </CustomMenu.MenuItem>
+                        ))}
+                      </CustomMenu>
+                    </div>
+
+                    {issueView !== "calendar" && issueView !== "spreadsheet" && (
+                      <>
+                        <div className="flex items-center justify-between">
+                          <h4 className="text-custom-text-200">Show empty states</h4>
+                          <ToggleSwitch value={showEmptyGroups} onChange={setShowEmptyGroups} />
+                        </div>
+                        {/* <div className="relative flex justify-end gap-x-3">
+                          <button type="button" onClick={() => resetFilterToDefault()}>
+                            Reset to default
+                          </button>
+                          <button
+                            type="button"
+                            className="font-medium text-custom-primary"
+                            onClick={() => setNewFilterDefaultView()}
+                          >
+                            Set as default
+                          </button>
+                        </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">
+                      {Object.keys(properties).map((key) => {
+                        if (key === "estimate" && !isEstimateActive) return null;
+
+                        if (
+                          issueView === "spreadsheet" &&
+                          (key === "attachment_count" ||
+                            key === "link" ||
+                            key === "sub_issue_count")
+                        )
+                          return null;
+
+                        if (
+                          issueView !== "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>
+  );
+};

apps/app/components/issues/my-issues/my-issues-view.tsx

@@ -0,0 +1,288 @@
+import { useCallback, useState } from "react";
+
+import { useRouter } from "next/router";
+
+import useSWR, { mutate } from "swr";
+
+// react-beautiful-dnd
+import { DropResult } from "react-beautiful-dnd";
+// services
+import issuesService from "services/issues.service";
+// hooks
+import useMyIssues from "hooks/my-issues/use-my-issues";
+import useMyIssuesFilters from "hooks/my-issues/use-my-issues-filter";
+import useUserAuth from "hooks/use-user-auth";
+// components
+import { AllViews, FiltersList } from "components/core";
+import { CreateUpdateIssueModal, DeleteIssueModal } from "components/issues";
+import { CreateUpdateViewModal } from "components/views";
+// types
+import { IIssue, IIssueFilterOptions } from "types";
+// fetch-keys
+import { USER_ISSUES, WORKSPACE_LABELS } from "constants/fetch-keys";
+import { orderArrayBy } from "helpers/array.helper";
+
+type Props = {
+  openIssuesListModal?: () => void;
+  disableUserActions?: false;
+};
+
+export const MyIssuesView: React.FC<Props> = ({
+  openIssuesListModal,
+  disableUserActions = false,
+}) => {
+  // create issue modal
+  const [createIssueModal, setCreateIssueModal] = useState(false);
+  const [createViewModal, setCreateViewModal] = useState<any>(null);
+  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);
+
+  // trash box
+  const [trashBox, setTrashBox] = useState(false);
+
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  const { user } = useUserAuth();
+
+  const { groupedIssues, isEmpty, params } = useMyIssues(workspaceSlug?.toString());
+  const { filters, setFilters, issueView, groupBy, orderBy, properties, showEmptyGroups } =
+    useMyIssuesFilters(workspaceSlug?.toString());
+
+  const { data: labels } = useSWR(
+    workspaceSlug && (filters.labels ?? []).length > 0
+      ? WORKSPACE_LABELS(workspaceSlug.toString())
+      : null,
+    workspaceSlug && (filters.labels ?? []).length > 0
+      ? () => issuesService.getWorkspaceLabels(workspaceSlug.toString())
+      : null
+  );
+
+  const handleDeleteIssue = useCallback(
+    (issue: IIssue) => {
+      setDeleteIssueModal(true);
+      setIssueToDelete(issue);
+    },
+    [setDeleteIssueModal, setIssueToDelete]
+  );
+
+  const handleOnDragEnd = useCallback(
+    async (result: DropResult) => {
+      setTrashBox(false);
+      console.log(result);
+
+      if (!result.destination || !workspaceSlug || !groupedIssues || groupBy !== "priority") return;
+
+      const { source, destination } = result;
+
+      if (source.droppableId === destination.droppableId) return;
+
+      const draggedItem = groupedIssues[source.droppableId][source.index];
+
+      if (!draggedItem) return;
+
+      if (destination.droppableId === "trashBox") handleDeleteIssue(draggedItem);
+      else {
+        const sourceGroup = source.droppableId;
+        const destinationGroup = destination.droppableId;
+
+        draggedItem[groupBy] = destinationGroup;
+
+        mutate<{
+          [key: string]: IIssue[];
+        }>(
+          USER_ISSUES(workspaceSlug.toString(), params),
+          (prevData) => {
+            if (!prevData) return prevData;
+
+            const sourceGroupArray = [...groupedIssues[sourceGroup]];
+            const destinationGroupArray = [...groupedIssues[destinationGroup]];
+
+            sourceGroupArray.splice(source.index, 1);
+            destinationGroupArray.splice(destination.index, 0, draggedItem);
+
+            return {
+              ...prevData,
+              [sourceGroup]: orderArrayBy(sourceGroupArray, orderBy),
+              [destinationGroup]: orderArrayBy(destinationGroupArray, orderBy),
+            };
+          },
+          false
+        );
+
+        // patch request
+        issuesService
+          .patchIssue(
+            workspaceSlug as string,
+            draggedItem.project,
+            draggedItem.id,
+            {
+              priority: draggedItem.priority,
+            },
+            user
+          )
+          .catch(() => mutate(USER_ISSUES(workspaceSlug.toString(), params)));
+      }
+    },
+    [groupBy, groupedIssues, handleDeleteIssue, orderBy, params, user, workspaceSlug]
+  );
+
+  const addIssueToGroup = useCallback(
+    (groupTitle: string) => {
+      setCreateIssueModal(true);
+
+      let preloadedValue: string | string[] = groupTitle;
+
+      if (groupBy === "labels") {
+        if (groupTitle === "None") preloadedValue = [];
+        else preloadedValue = [groupTitle];
+      }
+
+      if (groupBy)
+        setPreloadedData({
+          [groupBy]: preloadedValue,
+          actionType: "createIssue",
+        });
+      else setPreloadedData({ actionType: "createIssue" });
+    },
+    [setCreateIssueModal, setPreloadedData, groupBy]
+  );
+
+  const addIssueToDate = useCallback(
+    (date: string) => {
+      setCreateIssueModal(true);
+      setPreloadedData({
+        target_date: date,
+        actionType: "createIssue",
+      });
+    },
+    [setCreateIssueModal, setPreloadedData]
+  );
+
+  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 handleIssueAction = useCallback(
+    (issue: IIssue, action: "copy" | "edit" | "delete") => {
+      if (action === "copy") makeIssueCopy(issue);
+      else if (action === "edit") handleEditIssue(issue);
+      else if (action === "delete") handleDeleteIssue(issue);
+    },
+    [makeIssueCopy, handleEditIssue, handleDeleteIssue]
+  );
+  const filtersToShow = { ...filters };
+  delete filtersToShow?.assignees;
+  delete filtersToShow?.created_by;
+
+  const nullFilters = Object.keys(filtersToShow).filter(
+    (key) => filtersToShow[key as keyof IIssueFilterOptions] === null
+  );
+
+  const areFiltersApplied =
+    Object.keys(filtersToShow).length > 0 &&
+    nullFilters.length !== Object.keys(filtersToShow).length;
+
+  return (
+    <>
+      <CreateUpdateViewModal
+        isOpen={createViewModal !== null}
+        handleClose={() => setCreateViewModal(null)}
+        preLoadedData={createViewModal}
+        user={user}
+      />
+      <CreateUpdateIssueModal
+        isOpen={createIssueModal && preloadedData?.actionType === "createIssue"}
+        handleClose={() => setCreateIssueModal(false)}
+        prePopulateData={{
+          ...preloadedData,
+        }}
+      />
+      <CreateUpdateIssueModal
+        isOpen={editIssueModal && issueToEdit?.actionType !== "delete"}
+        handleClose={() => setEditIssueModal(false)}
+        data={issueToEdit}
+      />
+      <DeleteIssueModal
+        handleClose={() => setDeleteIssueModal(false)}
+        isOpen={deleteIssueModal}
+        data={issueToDelete}
+        user={user}
+      />
+      {areFiltersApplied && (
+        <>
+          <div className="flex items-center justify-between gap-2 px-5 pt-3 pb-0">
+            <FiltersList
+              filters={filtersToShow}
+              setFilters={setFilters}
+              labels={labels}
+              members={undefined}
+              states={undefined}
+              clearAllFilters={() =>
+                setFilters({
+                  labels: null,
+                  priority: null,
+                  state_group: null,
+                  target_date: null,
+                  type: null,
+                })
+              }
+            />
+          </div>
+          {<div className="mt-3 border-t border-custom-border-200" />}
+        </>
+      )}
+      <AllViews
+        addIssueToDate={addIssueToDate}
+        addIssueToGroup={addIssueToGroup}
+        disableUserActions={disableUserActions}
+        dragDisabled={groupBy !== "priority"}
+        handleOnDragEnd={handleOnDragEnd}
+        handleIssueAction={handleIssueAction}
+        openIssuesListModal={openIssuesListModal ? openIssuesListModal : null}
+        removeIssue={null}
+        trashBox={trashBox}
+        setTrashBox={setTrashBox}
+        viewProps={{
+          groupByProperty: groupBy,
+          groupedIssues,
+          isEmpty,
+          issueView,
+          orderBy,
+          params,
+          properties,
+          showEmptyGroups,
+        }}
+      />
+    </>
+  );
+};

apps/app/components/issues/view-select/state.tsx

@@ -1,3 +1,5 @@
+import { useState } from "react";
+
 import { useRouter } from "next/router";
 
 import useSWR from "swr";
@@ -39,12 +41,14 @@ export const ViewStateSelect: React.FC<Props> = ({
   user,
   isNotAllowed,
 }) => {
+  const [fetchStates, setFetchStates] = useState(false);
+
   const router = useRouter();
   const { workspaceSlug } = router.query;
 
   const { data: stateGroups } = useSWR(
-    workspaceSlug && issue ? STATES_LIST(issue.project) : null,
-    workspaceSlug && issue
+    workspaceSlug && issue && fetchStates ? STATES_LIST(issue.project) : null,
+    workspaceSlug && issue && fetchStates
       ? () => stateService.getStates(workspaceSlug as string, issue.project)
       : null
   );
@@ -61,7 +65,7 @@ export const ViewStateSelect: React.FC<Props> = ({
     ),
   }));
 
-  const selectedOption = states?.find((s) => s.id === issue.state);
+  const selectedOption = issue.state_detail;
 
   const stateLabel = (
     <Tooltip
@@ -126,6 +130,7 @@ export const ViewStateSelect: React.FC<Props> = ({
       {...(customButton ? { customButton: stateLabel } : { label: stateLabel })}
       position={position}
       disabled={isNotAllowed}
+      onOpen={() => setFetchStates(true)}
       noChevron
     />
   );