refactor: global select component for issue view

apps/app/components/command-palette/index.tsx

@@ -75,7 +75,7 @@ const CommandPalette: React.FC = () => {
       name: "Add new issue...",
       icon: RectangleStackIcon,
       hide: !projectId,
-      shortcut: "I",
+      shortcut: "C",
       onClick: () => {
         setIsIssueModalOpen(true);
       },
@@ -329,7 +329,6 @@ const CommandPalette: React.FC = () => {
                                       />
                                       <span className="ml-3 flex-auto truncate">{action.name}</span>
                                       <span className="ml-3 flex-none text-xs font-semibold text-gray-500">
-                                        <kbd className="font-sans">⌘</kbd>
                                         <kbd className="font-sans">{action.shortcut}</kbd>
                                       </span>
                                     </>

apps/app/components/core/board-view/all-boards.tsx

@@ -1,5 +1,5 @@
 // react-beautiful-dnd
-import { DragDropContext, Draggable, DropResult } from "react-beautiful-dnd";
+import { DragDropContext, DropResult } from "react-beautiful-dnd";
 // hooks
 import useIssueView from "hooks/use-issue-view";
 // components
@@ -31,7 +31,7 @@ export const AllBoards: React.FC<Props> = ({
   handleOnDragEnd,
   userAuth,
 }) => {
-  const { groupedByIssues, groupByProperty: selectedGroup } = useIssueView(issues);
+  const { groupedByIssues, groupByProperty: selectedGroup, orderBy } = useIssueView(issues);
 
   return (
     <>
@@ -59,24 +59,21 @@ export const AllBoards: React.FC<Props> = ({
                             : "#000000";
 
                         return (
-                          <Draggable key={singleGroup} draggableId={singleGroup} index={index}>
+                          <SingleBoard
-                            {(provided, snapshot) => (
+                            key={index}
-                              <SingleBoard
+                            index={index}
-                                type={type}
+                            type={type}
-                                provided={provided}
+                            bgColor={bgColor}
-                                snapshot={snapshot}
+                            groupTitle={singleGroup}
-                                bgColor={bgColor}
+                            groupedByIssues={groupedByIssues}
-                                groupTitle={singleGroup}
+                            selectedGroup={selectedGroup}
-                                groupedByIssues={groupedByIssues}
+                            members={members}
-                                selectedGroup={selectedGroup}
+                            addIssueToState={() => addIssueToState(singleGroup, stateId)}
-                                members={members}
+                            handleDeleteIssue={handleDeleteIssue}
-                                addIssueToState={() => addIssueToState(singleGroup, stateId)}
+                            openIssuesListModal={openIssuesListModal ?? null}
-                                handleDeleteIssue={handleDeleteIssue}
+                            orderBy={orderBy}
-                                openIssuesListModal={openIssuesListModal ?? null}
+                            userAuth={userAuth}
-                                userAuth={userAuth}
+                          />
-                              />
-                            )}
-                          </Draggable>
                         );
                       })}
                     </div>

apps/app/components/core/board-view/single-board.tsx

@@ -4,7 +4,7 @@ import { useRouter } from "next/router";
 
 // react-beautiful-dnd
 import StrictModeDroppable from "components/dnd/StrictModeDroppable";
-import { Draggable, DraggableProvided, DraggableStateSnapshot } from "react-beautiful-dnd";
+import { Draggable } from "react-beautiful-dnd";
 // hooks
 import useIssuesProperties from "hooks/use-issue-properties";
 // components
@@ -17,9 +17,8 @@ import { PlusIcon } from "@heroicons/react/24/outline";
 import { IIssue, IProjectMember, NestedKeyOf, UserAuth } from "types";
 
 type Props = {
+  index: number;
   type?: "issue" | "cycle" | "module";
-  provided: DraggableProvided;
-  snapshot: DraggableStateSnapshot;
   bgColor?: string;
   groupTitle: string;
   groupedByIssues: {
@@ -30,13 +29,13 @@ type Props = {
   addIssueToState: () => void;
   handleDeleteIssue: (issue: IIssue) => void;
   openIssuesListModal?: (() => void) | null;
+  orderBy: NestedKeyOf<IIssue> | "manual" | null;
   userAuth: UserAuth;
 };
 
 export const SingleBoard: React.FC<Props> = ({
+  index,
   type,
-  provided,
-  snapshot,
   bgColor,
   groupTitle,
   groupedByIssues,
@@ -45,6 +44,7 @@ export const SingleBoard: React.FC<Props> = ({
   addIssueToState,
   handleDeleteIssue,
   openIssuesListModal,
+  orderBy,
   userAuth,
 }) => {
   // collapse/expand
@@ -70,101 +70,95 @@ export const SingleBoard: React.FC<Props> = ({
       : (bgColor = "#ff0000");
 
   return (
-    <div
+    <Draggable draggableId={groupTitle} index={index}>
-      className={`h-full flex-shrink-0 rounded ${
+      {(provided, snapshot) => (
-        snapshot && snapshot.isDragging ? "border-theme shadow-lg" : ""
+        <div
-      } ${!isCollapsed ? "" : "w-80 border bg-gray-50"}`}
+          className={`h-full flex-shrink-0 rounded ${
-      ref={provided?.innerRef}
+            snapshot && snapshot.isDragging ? "border-theme shadow-lg" : ""
-      {...provided?.draggableProps}
+          } ${!isCollapsed ? "" : "w-80 border bg-gray-50"}`}
-    >
+          ref={provided?.innerRef}
-      <div className={`${!isCollapsed ? "" : "flex h-full flex-col space-y-3 overflow-y-auto"}`}>
+          {...provided?.draggableProps}
-        <BoardHeader
+        >
-          provided={provided}
+          <div
-          addIssueToState={addIssueToState}
+            className={`${!isCollapsed ? "" : "flex h-full flex-col space-y-3 overflow-y-auto"}`}
-          bgColor={bgColor}
+          >
-          createdBy={createdBy}
+            <BoardHeader
-          groupTitle={groupTitle}
+              provided={provided}
-          groupedByIssues={groupedByIssues}
+              addIssueToState={addIssueToState}
-          isCollapsed={isCollapsed}
+              bgColor={bgColor}
-          setIsCollapsed={setIsCollapsed}
+              createdBy={createdBy}
-          selectedGroup={selectedGroup}
+              groupTitle={groupTitle}
-        />
+              groupedByIssues={groupedByIssues}
-        <StrictModeDroppable key={groupTitle} droppableId={groupTitle}>
+              isCollapsed={isCollapsed}
-          {(provided, snapshot) => (
+              setIsCollapsed={setIsCollapsed}
-            <div
+              selectedGroup={selectedGroup}
-              className={`mt-3 h-full space-y-3 overflow-y-auto px-3 pb-3 ${
+            />
-                snapshot.isDraggingOver ? "bg-indigo-50 bg-opacity-50" : ""
+            <StrictModeDroppable key={groupTitle} droppableId={groupTitle}>
-              } ${!isCollapsed ? "hidden" : "block"}`}
+              {(provided, snapshot) => (
-              ref={provided.innerRef}
+                <div
-              {...provided.droppableProps}
+                  className={`relative mt-3 h-full space-y-3 overflow-y-auto px-3 pb-3 ${
-            >
+                    snapshot.isDraggingOver ? "bg-indigo-50 bg-opacity-50" : ""
-              {groupedByIssues[groupTitle].map((childIssue, index: number) => {
+                  } ${!isCollapsed ? "hidden" : "block"}`}
-                const assignees = [
+                  ref={provided.innerRef}
-                  ...(childIssue?.assignees_list ?? []),
+                  {...provided.droppableProps}
-                  ...(childIssue?.assignees ?? []),
-                ]?.map((assignee) => {
-                  const tempPerson = members?.find((p) => p.member.id === assignee)?.member;
-
-                  return tempPerson;
-                });
-
-                return (
-                  <Draggable key={childIssue.id} draggableId={childIssue.id} index={index}>
-                    {(provided, snapshot) => (
-                      <div
-                        ref={provided.innerRef}
-                        {...provided.draggableProps}
-                        {...provided.dragHandleProps}
-                      >
-                        <SingleBoardIssue
-                          type={type}
-                          issue={childIssue}
-                          properties={properties}
-                          snapshot={snapshot}
-                          people={members}
-                          assignees={assignees}
-                          handleDeleteIssue={handleDeleteIssue}
-                          userAuth={userAuth}
-                        />
-                      </div>
-                    )}
-                  </Draggable>
-                );
-              })}
-              {provided.placeholder}
-              {type === "issue" ? (
-                <button
-                  type="button"
-                  className="flex items-center rounded p-2 text-xs font-medium outline-none duration-300 hover:bg-gray-100"
-                  onClick={addIssueToState}
                 >
-                  <PlusIcon className="mr-1 h-3 w-3" />
+                  {groupedByIssues[groupTitle].map((issue, index: number) => (
-                  Create
+                    <SingleBoardIssue
-                </button>
+                      key={index}
-              ) : (
+                      index={index}
-                <CustomMenu
+                      type={type}
-                  label={
+                      issue={issue}
-                    <span className="flex items-center gap-1">
+                      properties={properties}
-                      <PlusIcon className="h-3 w-3" />
+                      members={members}
-                      Add issue
+                      handleDeleteIssue={handleDeleteIssue}
-                    </span>
+                      orderBy={orderBy}
-                  }
+                      userAuth={userAuth}
-                  className="mt-1"
+                    />
-                  optionsPosition="left"
+                  ))}
-                  noBorder
+                  <span
-                >
+                    style={{
-                  <CustomMenu.MenuItem onClick={addIssueToState}>Create new</CustomMenu.MenuItem>
+                      display: orderBy === "manual" ? "inline" : "none",
-                  {openIssuesListModal && (
+                    }}
-                    <CustomMenu.MenuItem onClick={openIssuesListModal}>
+                  >
-                      Add an existing issue
+                    {provided.placeholder}
-                    </CustomMenu.MenuItem>
+                  </span>
+                  {type === "issue" ? (
+                    <button
+                      type="button"
+                      className="flex items-center rounded p-2 text-xs font-medium outline-none duration-300 hover:bg-gray-100"
+                      onClick={addIssueToState}
+                    >
+                      <PlusIcon className="mr-1 h-3 w-3" />
+                      Create
+                    </button>
+                  ) : (
+                    <CustomMenu
+                      label={
+                        <span className="flex items-center gap-1">
+                          <PlusIcon className="h-3 w-3" />
+                          Add issue
+                        </span>
+                      }
+                      className="mt-1"
+                      optionsPosition="left"
+                      noBorder
+                    >
+                      <CustomMenu.MenuItem onClick={addIssueToState}>
+                        Create new
+                      </CustomMenu.MenuItem>
+                      {openIssuesListModal && (
+                        <CustomMenu.MenuItem onClick={openIssuesListModal}>
+                          Add an existing issue
+                        </CustomMenu.MenuItem>
+                      )}
+                    </CustomMenu>
                   )}
-                </CustomMenu>
+                </div>
               )}
-            </div>
+            </StrictModeDroppable>
-          )}
+          </div>
-        </StrictModeDroppable>
+        </div>
-      </div>
+      )}
-    </div>
+    </Draggable>
   );
 };

apps/app/components/core/board-view/single-issue.tsx

@@ -1,60 +1,57 @@
-import React from "react";
+import React, { useCallback } from "react";
 
 import Link from "next/link";
-import Image from "next/image";
 import { useRouter } from "next/router";
 
 import useSWR, { mutate } from "swr";
 
 // react-beautiful-dnd
-import { DraggableStateSnapshot } from "react-beautiful-dnd";
+import {
-// headless ui
+  Draggable,
-import { Listbox, Transition } from "@headlessui/react";
+  DraggableStateSnapshot,
+  DraggingStyle,
+  NotDraggingStyle,
+} from "react-beautiful-dnd";
 // constants
 import { TrashIcon } from "@heroicons/react/24/outline";
 // services
 import issuesService from "services/issues.service";
 import stateService from "services/state.service";
 // components
-import { AssigneesList, CustomDatePicker } from "components/ui";
+import { AssigneeSelect, DueDateSelect, PrioritySelect, StateSelect } from "components/core/select";
-// helpers
-import { findHowManyDaysLeft } from "helpers/date-time.helper";
-import { addSpaceIfCamelCase } from "helpers/string.helper";
 // types
 import {
   CycleIssueResponse,
   IIssue,
   IProjectMember,
   IssueResponse,
-  IUserLite,
   ModuleIssueResponse,
+  NestedKeyOf,
   Properties,
   UserAuth,
 } from "types";
-// common
+// fetch-keys
-import { PRIORITIES } from "constants/";
 import { STATE_LIST, CYCLE_ISSUES, MODULE_ISSUES, PROJECT_ISSUES_LIST } from "constants/fetch-keys";
-import { getPriorityIcon } from "constants/global";
 
 type Props = {
+  index: number;
   type?: string;
   issue: IIssue;
   properties: Properties;
-  snapshot: DraggableStateSnapshot;
+  members: IProjectMember[] | undefined;
-  assignees: Partial<IUserLite>[] | (Partial<IUserLite> | undefined)[];
-  people: IProjectMember[] | undefined;
   handleDeleteIssue: (issue: IIssue) => void;
+  orderBy: NestedKeyOf<IIssue> | "manual" | null;
   userAuth: UserAuth;
 };
 
 export const SingleBoardIssue: React.FC<Props> = ({
+  index,
   type,
   issue,
   properties,
-  snapshot,
+  members,
-  assignees,
-  people,
   handleDeleteIssue,
+  orderBy,
   userAuth,
 }) => {
   const router = useRouter();
@@ -67,376 +64,185 @@ export const SingleBoardIssue: React.FC<Props> = ({
       : null
   );
 
-  const partialUpdateIssue = (formData: Partial<IIssue>) => {
+  const partialUpdateIssue = useCallback(
-    if (!workspaceSlug || !projectId) return;
+    (formData: Partial<IIssue>) => {
+      if (!workspaceSlug || !projectId) return;
 
-    if (cycleId)
+      if (cycleId)
-      mutate<CycleIssueResponse[]>(
+        mutate<CycleIssueResponse[]>(
-        CYCLE_ISSUES(cycleId as string),
+          CYCLE_ISSUES(cycleId as string),
-        (prevData) => {
+          (prevData) => {
-          const updatedIssues = (prevData ?? []).map((p) => {
+            const updatedIssues = (prevData ?? []).map((p) => {
-            if (p.issue_detail.id === issue.id) {
+              if (p.issue_detail.id === issue.id) {
-              return {
+                return {
-                ...p,
+                  ...p,
-                issue_detail: {
+                  issue_detail: {
-                  ...p.issue_detail,
+                    ...p.issue_detail,
-                  ...formData,
+                    ...formData,
-                },
+                  },
-              };
+                };
-            }
+              }
+              return p;
+            });
+            return [...updatedIssues];
+          },
+          false
+        );
+
+      if (moduleId)
+        mutate<ModuleIssueResponse[]>(
+          MODULE_ISSUES(moduleId as string),
+          (prevData) => {
+            const updatedIssues = (prevData ?? []).map((p) => {
+              if (p.issue_detail.id === issue.id) {
+                return {
+                  ...p,
+                  issue_detail: {
+                    ...p.issue_detail,
+                    ...formData,
+                  },
+                };
+              }
+              return p;
+            });
+            return [...updatedIssues];
+          },
+          false
+        );
+
+      mutate<IssueResponse>(
+        PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string),
+        (prevData) => ({
+          ...(prevData as IssueResponse),
+          results: (prevData?.results ?? []).map((p) => {
+            if (p.id === issue.id) return { ...p, ...formData };
             return p;
-          });
+          }),
-          return [...updatedIssues];
-        },
-        false
-      );
-
-    if (moduleId)
-      mutate<ModuleIssueResponse[]>(
-        MODULE_ISSUES(moduleId as string),
-        (prevData) => {
-          const updatedIssues = (prevData ?? []).map((p) => {
-            if (p.issue_detail.id === issue.id) {
-              return {
-                ...p,
-                issue_detail: {
-                  ...p.issue_detail,
-                  ...formData,
-                },
-              };
-            }
-            return p;
-          });
-          return [...updatedIssues];
-        },
-        false
-      );
-
-    mutate<IssueResponse>(
-      PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string),
-      (prevData) => ({
-        ...(prevData as IssueResponse),
-        results: (prevData?.results ?? []).map((p) => {
-          if (p.id === issue.id) return { ...p, ...formData };
-          return p;
         }),
-      }),
+        false
-      false
+      );
-    );
 
-    issuesService
+      issuesService
-      .patchIssue(workspaceSlug as string, projectId as string, issue.id, formData)
+        .patchIssue(workspaceSlug as string, projectId as string, issue.id, formData)
-      .then((res) => {
+        .then((res) => {
-        mutate(
+          mutate(
-          cycleId ? CYCLE_ISSUES(cycleId as string) : CYCLE_ISSUES(issue?.issue_cycle?.cycle ?? "")
+            cycleId
-        );
+              ? CYCLE_ISSUES(cycleId as string)
-        mutate(
+              : CYCLE_ISSUES(issue?.issue_cycle?.cycle ?? "")
-          moduleId
+          );
-            ? MODULE_ISSUES(moduleId as string)
+          mutate(
-            : MODULE_ISSUES(issue?.issue_module?.module ?? "")
+            moduleId
-        );
+              ? MODULE_ISSUES(moduleId as string)
+              : MODULE_ISSUES(issue?.issue_module?.module ?? "")
+          );
 
-        mutate(PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string));
+          mutate(PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string));
-      })
+        })
-      .catch((error) => {
+        .catch((error) => {
-        console.log(error);
+          console.log(error);
-      });
+        });
-  };
+    },
+    [workspaceSlug, projectId, cycleId, moduleId, issue]
+  );
+
+  function getStyle(
+    style: DraggingStyle | NotDraggingStyle | undefined,
+    snapshot: DraggableStateSnapshot
+  ) {
+    if (orderBy === "manual") return style;
+    if (!snapshot.isDragging) return {};
+    if (!snapshot.isDropAnimating) {
+      return style;
+    }
+
+    return {
+      ...style,
+      transitionDuration: `0.001s`,
+    };
+  }
 
   const isNotAllowed = userAuth.isGuest || userAuth.isViewer;
 
   return (
-    <div
+    <Draggable key={issue.id} draggableId={issue.id} index={index}>
-      className={`rounded border bg-white shadow-sm ${
+      {(provided, snapshot) => (
-        snapshot.isDragging ? "border-theme bg-indigo-50 shadow-lg" : ""
+        <div
-      }`}
+          className={`rounded border bg-white shadow-sm ${
-    >
+            snapshot.isDragging ? "border-theme bg-indigo-50 shadow-lg" : ""
-      <div className="group/card relative select-none p-2">
+          }`}
-        {!isNotAllowed && (
+          ref={provided.innerRef}
-          <div className="absolute top-1.5 right-1.5 z-10 opacity-0 group-hover/card:opacity-100">
+          {...provided.draggableProps}
-            <button
+          {...provided.dragHandleProps}
-              type="button"
+          style={getStyle(provided.draggableProps.style, snapshot)}
-              className="grid h-7 w-7 place-items-center rounded bg-white p-1 text-red-500 outline-none duration-300 hover:bg-red-50"
+        >
-              onClick={() => handleDeleteIssue(issue)}
+          <div className="group/card relative select-none p-2">
-            >
+            {!isNotAllowed && (
-              <TrashIcon className="h-4 w-4" />
+              <div className="absolute top-1.5 right-1.5 z-10 opacity-0 group-hover/card:opacity-100">
-            </button>
+                <button
-          </div>
+                  type="button"
-        )}
+                  className="grid h-7 w-7 place-items-center rounded bg-white p-1 text-red-500 outline-none duration-300 hover:bg-red-50"
-        <Link href={`/${workspaceSlug}/projects/${issue.project}/issues/${issue.id}`}>
+                  onClick={() => handleDeleteIssue(issue)}
-          <a>
+                >
-            {properties.key && (
+                  <TrashIcon className="h-4 w-4" />
-              <div className="mb-2 text-xs font-medium text-gray-500">
+                </button>
-                {issue.project_detail.identifier}-{issue.sequence_id}
               </div>
             )}
-            <h5
+            <Link href={`/${workspaceSlug}/projects/${issue.project}/issues/${issue.id}`}>
-              className="mb-3 text-sm group-hover:text-theme"
+              <a>
-              style={{ lineClamp: 3, WebkitLineClamp: 3 }}
+                {properties.key && (
-            >
+                  <div className="mb-2 text-xs font-medium text-gray-500">
-              {issue.name}
+                    {issue.project_detail.identifier}-{issue.sequence_id}
-            </h5>
-          </a>
-        </Link>
-        <div className="flex flex-wrap items-center gap-x-1 gap-y-2 text-xs">
-          {properties.priority && (
-            <Listbox
-              as="div"
-              value={issue.priority}
-              onChange={(data: string) => {
-                partialUpdateIssue({ priority: data });
-              }}
-              className="group relative flex-shrink-0"
-              disabled={isNotAllowed}
-            >
-              {({ open }) => (
-                <>
-                  <div>
-                    <Listbox.Button
-                      className={`grid ${
-                        isNotAllowed ? "cursor-not-allowed" : "cursor-pointer"
-                      } place-items-center rounded px-2 py-1 capitalize shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 ${
-                        issue.priority === "urgent"
-                          ? "bg-red-100 text-red-600"
-                          : issue.priority === "high"
-                          ? "bg-orange-100 text-orange-500"
-                          : issue.priority === "medium"
-                          ? "bg-yellow-100 text-yellow-500"
-                          : issue.priority === "low"
-                          ? "bg-green-100 text-green-500"
-                          : "bg-gray-100"
-                      }`}
-                    >
-                      {getPriorityIcon(issue?.priority ?? "None")}
-                    </Listbox.Button>
-
-                    <Transition
-                      show={open}
-                      as={React.Fragment}
-                      leave="transition ease-in duration-100"
-                      leaveFrom="opacity-100"
-                      leaveTo="opacity-0"
-                    >
-                      <Listbox.Options className="absolute z-20 mt-1 max-h-28 overflow-auto rounded-md bg-white py-1 text-xs shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
-                        {PRIORITIES?.map((priority) => (
-                          <Listbox.Option
-                            key={priority}
-                            className={({ active }) =>
-                              `flex cursor-pointer select-none items-center gap-2 px-3 py-2 capitalize ${
-                                active ? "bg-indigo-50" : "bg-white"
-                              }`
-                            }
-                            value={priority}
-                          >
-                            {getPriorityIcon(priority)}
-                            {priority}
-                          </Listbox.Option>
-                        ))}
-                      </Listbox.Options>
-                    </Transition>
                   </div>
-                </>
+                )}
+                <h5
+                  className="mb-3 text-sm group-hover:text-theme"
+                  style={{ lineClamp: 3, WebkitLineClamp: 3 }}
+                >
+                  {issue.name}
+                </h5>
+              </a>
+            </Link>
+            <div className="flex flex-wrap items-center gap-x-1 gap-y-2 text-xs">
+              {properties.priority && (
+                <PrioritySelect
+                  issue={issue}
+                  partialUpdateIssue={partialUpdateIssue}
+                  isNotAllowed={isNotAllowed}
+                />
               )}
-            </Listbox>
+              {properties.state && (
-          )}
+                <StateSelect
-          {properties.state && (
+                  issue={issue}
-            <Listbox
+                  states={states}
-              as="div"
+                  partialUpdateIssue={partialUpdateIssue}
-              value={issue.state}
+                  isNotAllowed={isNotAllowed}
-              onChange={(data: string) => {
+                />
-                partialUpdateIssue({ state: data });
-              }}
-              className="group relative flex-shrink-0"
-              disabled={isNotAllowed}
-            >
-              {({ open }) => (
-                <>
-                  <div>
-                    <Listbox.Button
-                      className={`flex ${
-                        isNotAllowed ? "cursor-not-allowed" : "cursor-pointer"
-                      } items-center gap-1 rounded border px-2 py-1 text-xs shadow-sm duration-300 hover:bg-gray-100 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500`}
-                    >
-                      <span
-                        className="h-1.5 w-1.5 flex-shrink-0 rounded-full"
-                        style={{
-                          backgroundColor: issue.state_detail.color,
-                        }}
-                      />
-                      {addSpaceIfCamelCase(issue.state_detail.name)}
-                    </Listbox.Button>
-
-                    <Transition
-                      show={open}
-                      as={React.Fragment}
-                      leave="transition ease-in duration-100"
-                      leaveFrom="opacity-100"
-                      leaveTo="opacity-0"
-                    >
-                      <Listbox.Options className="absolute z-20 mt-1 max-h-28 overflow-auto rounded-md bg-white py-1 text-xs shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
-                        {states?.map((state) => (
-                          <Listbox.Option
-                            key={state.id}
-                            className={({ active }) =>
-                              `flex cursor-pointer select-none items-center gap-2 px-3 py-2 ${
-                                active ? "bg-indigo-50" : "bg-white"
-                              }`
-                            }
-                            value={state.id}
-                          >
-                            <span
-                              className="h-1.5 w-1.5 flex-shrink-0 rounded-full"
-                              style={{
-                                backgroundColor: state.color,
-                              }}
-                            />
-                            {addSpaceIfCamelCase(state.name)}
-                          </Listbox.Option>
-                        ))}
-                      </Listbox.Options>
-                    </Transition>
-                  </div>
-                </>
               )}
-            </Listbox>
+              {properties.due_date && (
-          )}
+                <DueDateSelect
-          {properties.due_date && (
+                  issue={issue}
-            <div
+                  partialUpdateIssue={partialUpdateIssue}
-              className={`group relative ${
+                  isNotAllowed={isNotAllowed}
-                issue.target_date === null
+                />
-                  ? ""
+              )}
-                  : issue.target_date < new Date().toISOString()
+              {properties.sub_issue_count && (
-                  ? "text-red-600"
+                <div className="flex flex-shrink-0 items-center gap-1 rounded border px-2 py-1 text-xs shadow-sm duration-300 hover:bg-gray-100 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500">
-                  : findHowManyDaysLeft(issue.target_date) <= 3 && "text-orange-400"
+                  {issue.sub_issues_count}{" "}
-              }`}
+                  {issue.sub_issues_count === 1 ? "sub-issue" : "sub-issues"}
-            >
-              <CustomDatePicker
-                placeholder="N/A"
-                value={issue?.target_date}
-                onChange={(val) =>
-                  partialUpdateIssue({
-                    target_date: val,
-                  })
-                }
-                className={issue?.target_date ? "w-[6.5rem]" : "w-[3rem] text-center"}
-              />
-              {/* <DatePicker
-                placeholderText="N/A"
-                value={
-                  issue?.target_date ? `${renderShortNumericDateFormat(issue.target_date)}` : "N/A"
-                }
-                selected={issue?.target_date ? new Date(issue.target_date) : null}
-                onChange={(val: Date) => {
-                  partialUpdateIssue({
-                    target_date: val
-                      ? `${val.getFullYear()}-${val.getMonth() + 1}-${val.getDate()}`
-                      : null,
-                  });
-                }}
-                dateFormat="dd-MM-yyyy"
-                className={`cursor-pointer rounded-md border px-2 py-[3px] text-xs shadow-sm duration-300 hover:bg-gray-100 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 ${
-                  issue?.target_date ? "w-[4.5rem]" : "w-[3rem] text-center"
-                }`}
-                isClearable
-              /> */}
-            </div>
-          )}
-          {properties.sub_issue_count && (
-            <div className="flex flex-shrink-0 items-center gap-1 rounded border px-2 py-1 text-xs shadow-sm duration-300 hover:bg-gray-100 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500">
-              {issue.sub_issues_count} {issue.sub_issues_count === 1 ? "sub-issue" : "sub-issues"}
-            </div>
-          )}
-          {properties.assignee && (
-            <Listbox
-              as="div"
-              value={issue.assignees}
-              onChange={(data: any) => {
-                const newData = issue.assignees ?? [];
-
-                if (newData.includes(data)) newData.splice(newData.indexOf(data), 1);
-                else newData.push(data);
-
-                partialUpdateIssue({ assignees_list: newData });
-              }}
-              className="group relative flex-shrink-0"
-              disabled={isNotAllowed}
-            >
-              {({ open }) => (
-                <div>
-                  <Listbox.Button>
-                    <div
-                      className={`flex ${
-                        isNotAllowed ? "cursor-not-allowed" : "cursor-pointer"
-                      } items-center gap-1 text-xs`}
-                    >
-                      <AssigneesList users={assignees} length={3} />
-                    </div>
-                  </Listbox.Button>
-
-                  <Transition
-                    show={open}
-                    as={React.Fragment}
-                    leave="transition ease-in duration-100"
-                    leaveFrom="opacity-100"
-                    leaveTo="opacity-0"
-                  >
-                    <Listbox.Options className="absolute left-0 z-20 mt-1 max-h-28 overflow-auto rounded-md bg-white py-1 text-xs shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
-                      {people?.map((person) => (
-                        <Listbox.Option
-                          key={person.member.id}
-                          className={({ active }) =>
-                            `cursor-pointer select-none p-2 ${active ? "bg-indigo-50" : "bg-white"}`
-                          }
-                          value={person.member.id}
-                        >
-                          <div
-                            className={`flex items-center gap-x-1 ${
-                              assignees.includes({
-                                id: person.member.last_name,
-                                first_name: person.member.first_name,
-                                last_name: person.member.last_name,
-                                email: person.member.email,
-                                avatar: person.member.avatar,
-                              })
-                                ? "font-medium"
-                                : "font-normal"
-                            }`}
-                          >
-                            {person.member.avatar && person.member.avatar !== "" ? (
-                              <div className="relative h-4 w-4">
-                                <Image
-                                  src={person.member.avatar}
-                                  alt="avatar"
-                                  className="rounded-full"
-                                  layout="fill"
-                                  objectFit="cover"
-                                  priority={false}
-                                  loading="lazy"
-                                />
-                              </div>
-                            ) : (
-                              <div className="grid h-4 w-4 place-items-center rounded-full bg-gray-700 capitalize text-white">
-                                {person.member.first_name && person.member.first_name !== ""
-                                  ? person.member.first_name.charAt(0)
-                                  : person.member.email.charAt(0)}
-                              </div>
-                            )}
-                            <p>
-                              {person.member.first_name && person.member.first_name !== ""
-                                ? person.member.first_name
-                                : person.member.email}
-                            </p>
-                          </div>
-                        </Listbox.Option>
-                      ))}
-                    </Listbox.Options>
-                  </Transition>
                 </div>
               )}
-            </Listbox>
+              {properties.assignee && (
-          )}
+                <AssigneeSelect
+                  issue={issue}
+                  members={members}
+                  partialUpdateIssue={partialUpdateIssue}
+                  isNotAllowed={isNotAllowed}
+                />
+              )}
+            </div>
+          </div>
         </div>
-      </div>
+      )}
-    </div>
+    </Draggable>
   );
 };

apps/app/components/core/issues-view-filter.tsx

@@ -104,14 +104,16 @@ export const IssuesFilterView: React.FC<Props> = ({ issues }) => {
                               }
                               width="lg"
                             >
-                              {groupByOptions.map((option) => (
+                              {groupByOptions.map((option) =>
-                                <CustomMenu.MenuItem
+                                issueView === "kanban" && option.key === null ? null : (
-                                  key={option.key}
+                                  <CustomMenu.MenuItem
-                                  onClick={() => setGroupByProperty(option.key)}
+                                    key={option.key}
-                                >
+                                    onClick={() => setGroupByProperty(option.key)}
-                                  {option.name}
+                                  >
-                                </CustomMenu.MenuItem>
+                                    {option.name}
-                              ))}
+                                  </CustomMenu.MenuItem>
+                                )
+                              )}
                             </CustomMenu>
                           </div>
                           <div className="flex items-center justify-between">

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

@@ -125,7 +125,6 @@ export const IssuesView: React.FC<Props> = ({
           });
       } else {
         const draggedItem = groupedByIssues[source.droppableId][source.index];
-        console.log(draggedItem);
         if (source.droppableId !== destination.droppableId) {
           const sourceGroup = source.droppableId; // source group id
           const destinationGroup = destination.droppableId; // destination group id

apps/app/components/core/list-view/single-issue.tsx

@@ -1,47 +1,35 @@
-import React from "react";
+import React, { useCallback } from "react";
 
 import Link from "next/link";
 import { useRouter } from "next/router";
 
 import useSWR, { mutate } from "swr";
 
-// headless ui
-import { Listbox, Transition } from "@headlessui/react";
 // services
 import issuesService from "services/issues.service";
-import workspaceService from "services/workspace.service";
 import stateService from "services/state.service";
+// components
+import { AssigneeSelect, DueDateSelect, PrioritySelect, StateSelect } from "components/core/select";
 // ui
-import { CustomMenu, CustomSelect, AssigneesList, Avatar, CustomDatePicker } from "components/ui";
+import { CustomMenu } from "components/ui";
-// helpers
-import { renderShortNumericDateFormat, findHowManyDaysLeft } from "helpers/date-time.helper";
-import { addSpaceIfCamelCase } from "helpers/string.helper";
 // types
 import {
   CycleIssueResponse,
   IIssue,
+  IProjectMember,
   IssueResponse,
-  IWorkspaceMember,
   ModuleIssueResponse,
   Properties,
   UserAuth,
 } from "types";
 // fetch-keys
-import {
+import { CYCLE_ISSUES, MODULE_ISSUES, PROJECT_ISSUES_LIST, STATE_LIST } from "constants/fetch-keys";
-  CYCLE_ISSUES,
-  MODULE_ISSUES,
-  PROJECT_ISSUES_LIST,
-  STATE_LIST,
-  WORKSPACE_MEMBERS,
-} from "constants/fetch-keys";
-// constants
-import { getPriorityIcon } from "constants/global";
-import { PRIORITIES } from "constants/";
 
 type Props = {
   type?: string;
   issue: IIssue;
   properties: Properties;
+  members: IProjectMember[] | undefined;
   editIssue: () => void;
   removeIssue?: (() => void) | null;
   handleDeleteIssue: (issue: IIssue) => void;
@@ -52,6 +40,7 @@ export const SingleListIssue: React.FC<Props> = ({
   type,
   issue,
   properties,
+  members,
   editIssue,
   removeIssue,
   handleDeleteIssue,
@@ -67,86 +56,86 @@ export const SingleListIssue: React.FC<Props> = ({
       : null
   );
 
-  const { data: people } = useSWR<IWorkspaceMember[]>(
+  const partialUpdateIssue = useCallback(
-    workspaceSlug ? WORKSPACE_MEMBERS : null,
+    (formData: Partial<IIssue>) => {
-    workspaceSlug ? () => workspaceService.workspaceMembers(workspaceSlug as string) : null
+      if (!workspaceSlug || !projectId) return;
-  );
 
-  const partialUpdateIssue = (formData: Partial<IIssue>) => {
+      if (cycleId)
-    if (!workspaceSlug || !projectId) return;
+        mutate<CycleIssueResponse[]>(
+          CYCLE_ISSUES(cycleId as string),
+          (prevData) => {
+            const updatedIssues = (prevData ?? []).map((p) => {
+              if (p.issue_detail.id === issue.id) {
+                return {
+                  ...p,
+                  issue_detail: {
+                    ...p.issue_detail,
+                    ...formData,
+                  },
+                };
+              }
+              return p;
+            });
+            return [...updatedIssues];
+          },
+          false
+        );
 
-    if (cycleId)
+      if (moduleId)
-      mutate<CycleIssueResponse[]>(
+        mutate<ModuleIssueResponse[]>(
-        CYCLE_ISSUES(cycleId as string),
+          MODULE_ISSUES(moduleId as string),
-        (prevData) => {
+          (prevData) => {
-          const updatedIssues = (prevData ?? []).map((p) => {
+            const updatedIssues = (prevData ?? []).map((p) => {
-            if (p.issue_detail.id === issue.id) {
+              if (p.issue_detail.id === issue.id) {
-              return {
+                return {
-                ...p,
+                  ...p,
-                issue_detail: {
+                  issue_detail: {
-                  ...p.issue_detail,
+                    ...p.issue_detail,
-                  ...formData,
+                    ...formData,
-                },
+                  },
-              };
+                };
-            }
+              }
+              return p;
+            });
+            return [...updatedIssues];
+          },
+          false
+        );
+
+      mutate<IssueResponse>(
+        PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string),
+        (prevData) => ({
+          ...(prevData as IssueResponse),
+          results: (prevData?.results ?? []).map((p) => {
+            if (p.id === issue.id) return { ...p, ...formData };
             return p;
-          });
+          }),
-          return [...updatedIssues];
-        },
-        false
-      );
-
-    if (moduleId)
-      mutate<ModuleIssueResponse[]>(
-        MODULE_ISSUES(moduleId as string),
-        (prevData) => {
-          const updatedIssues = (prevData ?? []).map((p) => {
-            if (p.issue_detail.id === issue.id) {
-              return {
-                ...p,
-                issue_detail: {
-                  ...p.issue_detail,
-                  ...formData,
-                },
-              };
-            }
-            return p;
-          });
-          return [...updatedIssues];
-        },
-        false
-      );
-
-    mutate<IssueResponse>(
-      PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string),
-      (prevData) => ({
-        ...(prevData as IssueResponse),
-        results: (prevData?.results ?? []).map((p) => {
-          if (p.id === issue.id) return { ...p, ...formData };
-          return p;
         }),
-      }),
+        false
-      false
+      );
-    );
 
-    issuesService
+      issuesService
-      .patchIssue(workspaceSlug as string, projectId as string, issue.id, formData)
+        .patchIssue(workspaceSlug as string, projectId as string, issue.id, formData)
-      .then((res) => {
+        .then((res) => {
-        mutate(
+          mutate(
-          cycleId ? CYCLE_ISSUES(cycleId as string) : CYCLE_ISSUES(issue?.issue_cycle?.cycle ?? "")
+            cycleId
-        );
+              ? CYCLE_ISSUES(cycleId as string)
-        mutate(
+              : CYCLE_ISSUES(issue?.issue_cycle?.cycle ?? "")
-          moduleId
+          );
-            ? MODULE_ISSUES(moduleId as string)
+          mutate(
-            : MODULE_ISSUES(issue?.issue_module?.module ?? "")
+            moduleId
-        );
+              ? MODULE_ISSUES(moduleId as string)
+              : MODULE_ISSUES(issue?.issue_module?.module ?? "")
+          );
 
-        mutate(PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string));
+          mutate(PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string));
-      })
+        })
-      .catch((error) => {
+        .catch((error) => {
-        console.log(error);
+          console.log(error);
-      });
+        });
-  };
+    },
+    [workspaceSlug, projectId, cycleId, moduleId, issue]
+  );
 
   const isNotAllowed = userAuth.isGuest || userAuth.isViewer;
 
@@ -172,156 +161,26 @@ export const SingleListIssue: React.FC<Props> = ({
       </div>
       <div className="flex flex-shrink-0 flex-wrap items-center gap-x-1 gap-y-2 text-xs">
         {properties.priority && (
-          <Listbox
+          <PrioritySelect
-            as="div"
+            issue={issue}
-            value={issue.priority}
+            partialUpdateIssue={partialUpdateIssue}
-            onChange={(data: string) => {
+            isNotAllowed={isNotAllowed}
-              partialUpdateIssue({ priority: data });
+          />
-            }}
-            className="group relative flex-shrink-0"
-            disabled={isNotAllowed}
-          >
-            {({ open }) => (
-              <>
-                <div>
-                  <Listbox.Button
-                    className={`flex ${
-                      isNotAllowed ? "cursor-not-allowed" : "cursor-pointer"
-                    } items-center gap-x-2 rounded px-2 py-0.5 capitalize shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 ${
-                      issue.priority === "urgent"
-                        ? "bg-red-100 text-red-600"
-                        : issue.priority === "high"
-                        ? "bg-orange-100 text-orange-500"
-                        : issue.priority === "medium"
-                        ? "bg-yellow-100 text-yellow-500"
-                        : issue.priority === "low"
-                        ? "bg-green-100 text-green-500"
-                        : "bg-gray-100"
-                    }`}
-                  >
-                    {getPriorityIcon(
-                      issue.priority && issue.priority !== "" ? issue.priority ?? "" : "None",
-                      "text-sm"
-                    )}
-                  </Listbox.Button>
-
-                  <Transition
-                    show={open}
-                    as={React.Fragment}
-                    leave="transition ease-in duration-100"
-                    leaveFrom="opacity-100"
-                    leaveTo="opacity-0"
-                  >
-                    <Listbox.Options className="absolute right-0 z-10 mt-1 max-h-48 w-36 overflow-auto rounded-md bg-white py-1 text-xs shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
-                      {PRIORITIES?.map((priority) => (
-                        <Listbox.Option
-                          key={priority}
-                          className={({ active }) =>
-                            `flex cursor-pointer select-none items-center gap-x-2 px-3 py-2 capitalize ${
-                              active ? "bg-indigo-50" : "bg-white"
-                            }`
-                          }
-                          value={priority}
-                        >
-                          {getPriorityIcon(priority, "text-sm")}
-                          {priority ?? "None"}
-                        </Listbox.Option>
-                      ))}
-                    </Listbox.Options>
-                  </Transition>
-                </div>
-                <div className="absolute bottom-full right-0 z-10 mb-2 hidden whitespace-nowrap rounded-md bg-white p-2 shadow-md group-hover:block">
-                  <h5 className="mb-1 font-medium text-gray-900">Priority</h5>
-                  <div
-                    className={`capitalize ${
-                      issue.priority === "urgent"
-                        ? "text-red-600"
-                        : issue.priority === "high"
-                        ? "text-orange-500"
-                        : issue.priority === "medium"
-                        ? "text-yellow-500"
-                        : issue.priority === "low"
-                        ? "text-green-500"
-                        : ""
-                    }`}
-                  >
-                    {issue.priority ?? "None"}
-                  </div>
-                </div>
-              </>
-            )}
-          </Listbox>
         )}
         {properties.state && (
-          <CustomSelect
+          <StateSelect
-            label={
+            issue={issue}
-              <>
+            states={states}
-                <span
+            partialUpdateIssue={partialUpdateIssue}
-                  className="h-1.5 w-1.5 flex-shrink-0 rounded-full"
+            isNotAllowed={isNotAllowed}
-                  style={{
+          />
-                    backgroundColor: issue.state_detail.color,
-                  }}
-                />
-                {addSpaceIfCamelCase(issue.state_detail.name)}
-              </>
-            }
-            value={issue.state}
-            onChange={(data: string) => {
-              partialUpdateIssue({ state: data });
-            }}
-            maxHeight="md"
-            noChevron
-            disabled={isNotAllowed}
-          >
-            {states?.map((state) => (
-              <CustomSelect.Option key={state.id} value={state.id}>
-                <>
-                  <span
-                    className="h-1.5 w-1.5 flex-shrink-0 rounded-full"
-                    style={{
-                      backgroundColor: state.color,
-                    }}
-                  />
-                  {addSpaceIfCamelCase(state.name)}
-                </>
-              </CustomSelect.Option>
-            ))}
-          </CustomSelect>
         )}
         {properties.due_date && (
-          <div
+          <DueDateSelect
-            className={`group relative ${
+            issue={issue}
-              issue.target_date === null
+            partialUpdateIssue={partialUpdateIssue}
-                ? ""
+            isNotAllowed={isNotAllowed}
-                : issue.target_date < new Date().toISOString()
+          />
-                ? "text-red-600"
-                : findHowManyDaysLeft(issue.target_date) <= 3 && "text-orange-400"
-            }`}
-          >
-            <CustomDatePicker
-              placeholder="N/A"
-              value={issue?.target_date}
-              onChange={(val) =>
-                partialUpdateIssue({
-                  target_date: val,
-                })
-              }
-              className={issue?.target_date ? "w-[6.5rem]" : "w-[3rem] text-center"}
-            />
-            <div className="absolute bottom-full right-0 z-10 mb-2 hidden whitespace-nowrap rounded-md bg-white p-2 shadow-md group-hover:block">
-              <h5 className="mb-1 font-medium text-gray-900">Due date</h5>
-              <div>{renderShortNumericDateFormat(issue.target_date ?? "")}</div>
-              <div>
-                {issue.target_date
-                  ? issue.target_date < new Date().toISOString()
-                    ? `Due date has passed by ${findHowManyDaysLeft(issue.target_date)} days`
-                    : findHowManyDaysLeft(issue.target_date) <= 3
-                    ? `Due date is in ${findHowManyDaysLeft(issue.target_date)} days`
-                    : "Due date"
-                  : "N/A"}
-              </div>
-            </div>
-          </div>
         )}
         {properties.sub_issue_count && (
           <div className="flex flex-shrink-0 items-center gap-1 rounded border px-2 py-1 text-xs shadow-sm">
@@ -329,77 +188,12 @@ export const SingleListIssue: React.FC<Props> = ({
           </div>
         )}
         {properties.assignee && (
-          <Listbox
+          <AssigneeSelect
-            as="div"
+            issue={issue}
-            value={issue.assignees}
+            members={members}
-            onChange={(data: any) => {
+            partialUpdateIssue={partialUpdateIssue}
-              const newData = issue.assignees ?? [];
+            isNotAllowed={isNotAllowed}
-
+          />
-              if (newData.includes(data)) newData.splice(newData.indexOf(data), 1);
-              else newData.push(data);
-
-              partialUpdateIssue({ assignees_list: newData });
-            }}
-            className="group relative flex-shrink-0"
-            disabled={isNotAllowed}
-          >
-            {({ open }) => (
-              <>
-                <div>
-                  <Listbox.Button>
-                    <div
-                      className={`flex ${
-                        isNotAllowed ? "cursor-not-allowed" : "cursor-pointer"
-                      } items-center gap-1 text-xs`}
-                    >
-                      <AssigneesList userIds={issue.assignees ?? []} />
-                    </div>
-                  </Listbox.Button>
-
-                  <Transition
-                    show={open}
-                    as={React.Fragment}
-                    leave="transition ease-in duration-100"
-                    leaveFrom="opacity-100"
-                    leaveTo="opacity-0"
-                  >
-                    <Listbox.Options className="absolute right-0 z-10 mt-1 max-h-48 overflow-auto rounded-md bg-white py-1 text-xs shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
-                      {people?.map((person) => (
-                        <Listbox.Option
-                          key={person.id}
-                          className={({ active, selected }) =>
-                            `flex items-center gap-x-1 cursor-pointer select-none p-2 ${
-                              active ? "bg-indigo-50" : ""
-                            } ${
-                              selected || issue.assignees?.includes(person.member.id)
-                                ? "bg-indigo-50 font-medium"
-                                : "font-normal"
-                            }`
-                          }
-                          value={person.member.id}
-                        >
-                          <Avatar user={person.member} />
-                          <p>
-                            {person.member.first_name && person.member.first_name !== ""
-                              ? person.member.first_name
-                              : person.member.email}
-                          </p>
-                        </Listbox.Option>
-                      ))}
-                    </Listbox.Options>
-                  </Transition>
-                </div>
-                <div className="absolute bottom-full right-0 z-10 mb-2 hidden whitespace-nowrap rounded-md bg-white p-2 shadow-md group-hover:block">
-                  <h5 className="mb-1 font-medium">Assigned to</h5>
-                  <div>
-                    {issue.assignee_details?.length > 0
-                      ? issue.assignee_details.map((assignee) => assignee.first_name).join(", ")
-                      : "No one"}
-                  </div>
-                </div>
-              </>
-            )}
-          </Listbox>
         )}
         {type && !isNotAllowed && (
           <CustomMenu width="auto" ellipsis>

apps/app/components/core/list-view/single-list.tsx

@@ -95,31 +95,21 @@ export const SingleList: React.FC<Props> = ({
               <div className="divide-y-2">
                 {groupedByIssues[groupTitle] ? (
                   groupedByIssues[groupTitle].length > 0 ? (
-                    groupedByIssues[groupTitle].map((issue: IIssue) => {
+                    groupedByIssues[groupTitle].map((issue: IIssue) => (
-                      const assignees = [
+                      <SingleListIssue
-                        ...(issue?.assignees_list ?? []),
+                        key={issue.id}
-                        ...(issue?.assignees ?? []),
+                        type={type}
-                      ]?.map((assignee) => {
+                        issue={issue}
-                        const tempPerson = members?.find((p) => p.member.id === assignee)?.member;
+                        properties={properties}
-
+                        members={members}
-                        return tempPerson;
+                        editIssue={() => handleEditIssue(issue)}
-                      });
+                        handleDeleteIssue={handleDeleteIssue}
-
+                        removeIssue={() => {
-                      return (
+                          removeIssue && removeIssue(issue.bridge);
-                        <SingleListIssue
+                        }}
-                          key={issue.id}
+                        userAuth={userAuth}
-                          type={type}
+                      />
-                          issue={issue}
+                    ))
-                          properties={properties}
-                          editIssue={() => handleEditIssue(issue)}
-                          handleDeleteIssue={handleDeleteIssue}
-                          removeIssue={() => {
-                            removeIssue && removeIssue(issue.bridge);
-                          }}
-                          userAuth={userAuth}
-                        />
-                      );
-                    })
                   ) : (
                     <p className="px-4 py-3 text-sm text-gray-500">No issues.</p>
                   )

apps/app/components/core/select/assignee.tsx

@@ -0,0 +1,94 @@
+import React from "react";
+
+// headless ui
+import { Listbox, Transition } from "@headlessui/react";
+// ui
+import { AssigneesList, Avatar } from "components/ui";
+// types
+import { IIssue, IProjectMember } from "types";
+
+type Props = {
+  issue: IIssue;
+  members: IProjectMember[] | undefined;
+  partialUpdateIssue: (formData: Partial<IIssue>) => void;
+  isNotAllowed: boolean;
+};
+
+export const AssigneeSelect: React.FC<Props> = ({
+  issue,
+  members,
+  partialUpdateIssue,
+  isNotAllowed,
+}) => (
+  <Listbox
+    as="div"
+    value={issue.assignees}
+    onChange={(data: any) => {
+      const newData = issue.assignees ?? [];
+
+      if (newData.includes(data)) newData.splice(newData.indexOf(data), 1);
+      else newData.push(data);
+
+      partialUpdateIssue({ assignees_list: newData });
+    }}
+    className="group relative flex-shrink-0"
+    disabled={isNotAllowed}
+  >
+    {({ open }) => (
+      <>
+        <div>
+          <Listbox.Button>
+            <div
+              className={`flex ${
+                isNotAllowed ? "cursor-not-allowed" : "cursor-pointer"
+              } items-center gap-1 text-xs`}
+            >
+              <AssigneesList userIds={issue.assignees ?? []} />
+            </div>
+          </Listbox.Button>
+
+          <Transition
+            show={open}
+            as={React.Fragment}
+            leave="transition ease-in duration-100"
+            leaveFrom="opacity-100"
+            leaveTo="opacity-0"
+          >
+            <Listbox.Options className="absolute right-0 z-10 mt-1 max-h-48 overflow-auto rounded-md bg-white py-1 text-xs shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
+              {members?.map((member) => (
+                <Listbox.Option
+                  key={member.member.id}
+                  className={({ active, selected }) =>
+                    `flex items-center gap-x-1 cursor-pointer select-none p-2 ${
+                      active ? "bg-indigo-50" : ""
+                    } ${
+                      selected || issue.assignees?.includes(member.member.id)
+                        ? "bg-indigo-50 font-medium"
+                        : "font-normal"
+                    }`
+                  }
+                  value={member.member.id}
+                >
+                  <Avatar user={member.member} />
+                  <p>
+                    {member.member.first_name && member.member.first_name !== ""
+                      ? member.member.first_name
+                      : member.member.email}
+                  </p>
+                </Listbox.Option>
+              ))}
+            </Listbox.Options>
+          </Transition>
+        </div>
+        <div className="absolute bottom-full right-0 z-10 mb-2 hidden whitespace-nowrap rounded-md bg-white p-2 shadow-md group-hover:block">
+          <h5 className="mb-1 font-medium">Assigned to</h5>
+          <div>
+            {issue.assignee_details?.length > 0
+              ? issue.assignee_details.map((assignee) => assignee.first_name).join(", ")
+              : "No one"}
+          </div>
+        </div>
+      </>
+    )}
+  </Listbox>
+);

apps/app/components/core/select/due-date.tsx

@@ -0,0 +1,48 @@
+// ui
+import { CustomDatePicker } from "components/ui";
+// helpers
+import { findHowManyDaysLeft, renderShortNumericDateFormat } from "helpers/date-time.helper";
+// types
+import { IIssue } from "types";
+
+type Props = {
+  issue: IIssue;
+  partialUpdateIssue: (formData: Partial<IIssue>) => void;
+  isNotAllowed: boolean;
+};
+
+export const DueDateSelect: React.FC<Props> = ({ issue, partialUpdateIssue, isNotAllowed }) => (
+  <div
+    className={`group relative ${
+      issue.target_date === null
+        ? ""
+        : issue.target_date < new Date().toISOString()
+        ? "text-red-600"
+        : findHowManyDaysLeft(issue.target_date) <= 3 && "text-orange-400"
+    }`}
+  >
+    <CustomDatePicker
+      placeholder="N/A"
+      value={issue?.target_date}
+      onChange={(val) =>
+        partialUpdateIssue({
+          target_date: val,
+        })
+      }
+      className={issue?.target_date ? "w-[6.5rem]" : "w-[3rem] text-center"}
+    />
+    <div className="absolute bottom-full right-0 z-10 mb-2 hidden whitespace-nowrap rounded-md bg-white p-2 shadow-md group-hover:block">
+      <h5 className="mb-1 font-medium text-gray-900">Due date</h5>
+      <div>{renderShortNumericDateFormat(issue.target_date ?? "")}</div>
+      <div>
+        {issue.target_date
+          ? issue.target_date < new Date().toISOString()
+            ? `Due date has passed by ${findHowManyDaysLeft(issue.target_date)} days`
+            : findHowManyDaysLeft(issue.target_date) <= 3
+            ? `Due date is in ${findHowManyDaysLeft(issue.target_date)} days`
+            : "Due date"
+          : "N/A"}
+      </div>
+    </div>
+  </div>
+);

apps/app/components/core/select/index.ts

@@ -0,0 +1,4 @@
+export * from "./assignee";
+export * from "./due-date";
+export * from "./priority";
+export * from "./state";

apps/app/components/core/select/priority.tsx

@@ -0,0 +1,97 @@
+import React from "react";
+
+// ui
+import { Listbox, Transition } from "@headlessui/react";
+// types
+import { IIssue, IState } from "types";
+// constants
+import { getPriorityIcon } from "constants/global";
+import { PRIORITIES } from "constants/";
+
+type Props = {
+  issue: IIssue;
+  partialUpdateIssue: (formData: Partial<IIssue>) => void;
+  isNotAllowed: boolean;
+};
+
+export const PrioritySelect: React.FC<Props> = ({ issue, partialUpdateIssue, isNotAllowed }) => (
+  <Listbox
+    as="div"
+    value={issue.priority}
+    onChange={(data: string) => {
+      partialUpdateIssue({ priority: data });
+    }}
+    className="group relative flex-shrink-0"
+    disabled={isNotAllowed}
+  >
+    {({ open }) => (
+      <>
+        <div>
+          <Listbox.Button
+            className={`flex ${
+              isNotAllowed ? "cursor-not-allowed" : "cursor-pointer"
+            } items-center gap-x-2 rounded px-2 py-0.5 capitalize shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 ${
+              issue.priority === "urgent"
+                ? "bg-red-100 text-red-600"
+                : issue.priority === "high"
+                ? "bg-orange-100 text-orange-500"
+                : issue.priority === "medium"
+                ? "bg-yellow-100 text-yellow-500"
+                : issue.priority === "low"
+                ? "bg-green-100 text-green-500"
+                : "bg-gray-100"
+            }`}
+          >
+            {getPriorityIcon(
+              issue.priority && issue.priority !== "" ? issue.priority ?? "" : "None",
+              "text-sm"
+            )}
+          </Listbox.Button>
+
+          <Transition
+            show={open}
+            as={React.Fragment}
+            leave="transition ease-in duration-100"
+            leaveFrom="opacity-100"
+            leaveTo="opacity-0"
+          >
+            <Listbox.Options className="absolute right-0 z-10 mt-1 max-h-48 w-36 overflow-auto rounded-md bg-white py-1 text-xs shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
+              {PRIORITIES?.map((priority) => (
+                <Listbox.Option
+                  key={priority}
+                  className={({ active }) =>
+                    `flex cursor-pointer select-none items-center gap-x-2 px-3 py-2 capitalize ${
+                      active ? "bg-indigo-50" : "bg-white"
+                    }`
+                  }
+                  value={priority}
+                >
+                  {getPriorityIcon(priority, "text-sm")}
+                  {priority ?? "None"}
+                </Listbox.Option>
+              ))}
+            </Listbox.Options>
+          </Transition>
+        </div>
+        <div className="absolute bottom-full right-0 z-10 mb-2 hidden whitespace-nowrap rounded-md bg-white p-2 shadow-md group-hover:block">
+          <h5 className="mb-1 font-medium text-gray-900">Priority</h5>
+          <div
+            className={`capitalize ${
+              issue.priority === "urgent"
+                ? "text-red-600"
+                : issue.priority === "high"
+                ? "text-orange-500"
+                : issue.priority === "medium"
+                ? "text-yellow-500"
+                : issue.priority === "low"
+                ? "text-green-500"
+                : ""
+            }`}
+          >
+            {issue.priority ?? "None"}
+          </div>
+        </div>
+      </>
+    )}
+  </Listbox>
+);

apps/app/components/core/select/state.tsx

@@ -0,0 +1,55 @@
+// ui
+import { CustomSelect } from "components/ui";
+// helpers
+import { addSpaceIfCamelCase } from "helpers/string.helper";
+// types
+import { IIssue, IState } from "types";
+
+type Props = {
+  issue: IIssue;
+  states: IState[] | undefined;
+  partialUpdateIssue: (formData: Partial<IIssue>) => void;
+  isNotAllowed: boolean;
+};
+
+export const StateSelect: React.FC<Props> = ({
+  issue,
+  states,
+  partialUpdateIssue,
+  isNotAllowed,
+}) => (
+  <CustomSelect
+    label={
+      <>
+        <span
+          className="h-1.5 w-1.5 flex-shrink-0 rounded-full"
+          style={{
+            backgroundColor: states?.find((s) => s.id === issue.state)?.color,
+          }}
+        />
+        {addSpaceIfCamelCase(states?.find((s) => s.id === issue.state)?.name ?? "")}
+      </>
+    }
+    value={issue.state}
+    onChange={(data: string) => {
+      partialUpdateIssue({ state: data });
+    }}
+    maxHeight="md"
+    noChevron
+    disabled={isNotAllowed}
+  >
+    {states?.map((state) => (
+      <CustomSelect.Option key={state.id} value={state.id}>
+        <>
+          <span
+            className="h-1.5 w-1.5 flex-shrink-0 rounded-full"
+            style={{
+              backgroundColor: state.color,
+            }}
+          />
+          {addSpaceIfCamelCase(state.name)}
+        </>
+      </CustomSelect.Option>
+    ))}
+  </CustomSelect>
+);

apps/app/components/dnd/StrictModeDroppable.tsx

@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from "react";
+
 // react beautiful dnd
 import { Droppable, DroppableProps } from "react-beautiful-dnd";
 
@@ -14,9 +15,7 @@ const StrictModeDroppable = ({ children, ...props }: DroppableProps) => {
     };
   }, []);
 
-  if (!enabled) {
+  if (!enabled) return null;
-    return null;
-  }
 
   return <Droppable {...props}>{children}</Droppable>;
 };

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

@@ -17,7 +17,7 @@ import { Button } from "components/ui";
 // types
 import type { CycleIssueResponse, IIssue, IssueResponse, ModuleIssueResponse } from "types";
 // fetch-keys
-import { CYCLE_ISSUES, PROJECT_ISSUES_LIST, MODULE_ISSUES } from "constants/fetch-keys";
+import { CYCLE_ISSUES, PROJECT_ISSUES_LIST, MODULE_ISSUES, USER_ISSUE } from "constants/fetch-keys";
 
 type Props = {
   isOpen: boolean;
@@ -30,7 +30,7 @@ export const DeleteIssueModal: React.FC<Props> = ({ isOpen, handleClose, data })
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
 
   const router = useRouter();
-  const { workspaceSlug } = router.query;
+  const { workspaceSlug, projectId: queryProjectId } = router.query;
 
   const { setToastAlert } = useToast();
 
@@ -46,10 +46,37 @@ export const DeleteIssueModal: React.FC<Props> = ({ isOpen, handleClose, data })
   const handleDeletion = async () => {
     setIsDeleteLoading(true);
     if (!data || !workspaceSlug) return;
+
     const projectId = data.project;
     await issueServices
       .deleteIssue(workspaceSlug as string, projectId, data.id)
       .then(() => {
+        const cycleId = data?.cycle;
+        const moduleId = data?.module;
+
+        if (cycleId) {
+          mutate<CycleIssueResponse[]>(
+            CYCLE_ISSUES(cycleId),
+            (prevData) => prevData?.filter((i) => i.issue !== data.id),
+            false
+          );
+        }
+
+        if (moduleId) {
+          mutate<ModuleIssueResponse[]>(
+            MODULE_ISSUES(moduleId),
+            (prevData) => prevData?.filter((i) => i.issue !== data.id),
+            false
+          );
+        }
+
+        if (!queryProjectId)
+          mutate<IIssue[]>(
+            USER_ISSUE(workspaceSlug as string),
+            (prevData) => prevData?.filter((i) => i.id !== data.id),
+            false
+          );
+
         mutate<IssueResponse>(
           PROJECT_ISSUES_LIST(workspaceSlug as string, projectId),
           (prevData) => ({
@@ -60,24 +87,6 @@ export const DeleteIssueModal: React.FC<Props> = ({ isOpen, handleClose, data })
           false
         );
 
-        const moduleId = data?.module;
-        const cycleId = data?.cycle;
-
-        if (moduleId) {
-          mutate<ModuleIssueResponse[]>(
-            MODULE_ISSUES(moduleId),
-            (prevData) => prevData?.filter((i) => i.issue !== data.id),
-            false
-          );
-        }
-        if (cycleId) {
-          mutate<CycleIssueResponse[]>(
-            CYCLE_ISSUES(cycleId),
-            (prevData) => prevData?.filter((i) => i.issue !== data.id),
-            false
-          );
-        }
-
         handleClose();
         setToastAlert({
           title: "Success",

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

@@ -1,33 +1,75 @@
-import React from "react";
+import React, { useCallback } from "react";
 
 import Link from "next/link";
 import { useRouter } from "next/router";
 
+import useSWR, { mutate } from "swr";
+
+// services
+import stateService from "services/state.service";
+import issuesService from "services/issues.service";
 // components
+import { DueDateSelect, PrioritySelect, StateSelect } from "components/core/select";
+// ui
 import { AssigneesList } from "components/ui/avatar";
-// icons
+import { CustomMenu } from "components/ui";
-import { CalendarDaysIcon } from "@heroicons/react/24/outline";
-// helpers
-import { renderShortNumericDateFormat, findHowManyDaysLeft } from "helpers/date-time.helper";
-import { addSpaceIfCamelCase } from "helpers/string.helper";
 // types
 import { IIssue, Properties } from "types";
-// constants
+// fetch-keys
-import { getPriorityIcon } from "constants/global";
+import { STATE_LIST, USER_ISSUE } from "constants/fetch-keys";
 
 type Props = {
-  type?: string;
   issue: IIssue;
   properties: Properties;
-  editIssue?: () => void;
+  projectId: string;
-  handleDeleteIssue?: () => void;
+  handleDeleteIssue: () => void;
-  removeIssue?: () => void;
 };
 
-export const MyIssuesListItem: React.FC<Props> = ({ issue, properties }) => {
+export const MyIssuesListItem: React.FC<Props> = ({
+  issue,
+  properties,
+  projectId,
+  handleDeleteIssue,
+}) => {
   const router = useRouter();
   const { workspaceSlug } = router.query;
 
+  const { data: states } = useSWR(
+    workspaceSlug && projectId ? STATE_LIST(projectId) : null,
+    workspaceSlug && projectId
+      ? () => stateService.getStates(workspaceSlug as string, projectId)
+      : null
+  );
+
+  const partialUpdateIssue = useCallback(
+    (formData: Partial<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)
+        .then((res) => {
+          mutate(USER_ISSUE(workspaceSlug as string));
+        })
+        .catch((error) => {
+          console.log(error);
+        });
+    },
+    [workspaceSlug, projectId, issue]
+  );
+
+  const isNotAllowed = false;
+
   return (
     <div key={issue.id} className="flex items-center justify-between gap-2 px-4 py-3 text-sm">
       <div className="flex items-center gap-2">
@@ -50,80 +92,26 @@ export const MyIssuesListItem: React.FC<Props> = ({ issue, properties }) => {
       </div>
       <div className="flex flex-shrink-0 flex-wrap items-center gap-x-1 gap-y-2 text-xs">
         {properties.priority && (
-          <div
+          <PrioritySelect
-            className={`group relative flex flex-shrink-0 cursor-pointer items-center gap-1 rounded px-2 py-1 text-xs capitalize shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 ${
+            issue={issue}
-              issue.priority === "urgent"
+            partialUpdateIssue={partialUpdateIssue}
-                ? "bg-red-100 text-red-600"
+            isNotAllowed={isNotAllowed}
-                : issue.priority === "high"
+          />
-                ? "bg-orange-100 text-orange-500"
-                : issue.priority === "medium"
-                ? "bg-yellow-100 text-yellow-500"
-                : issue.priority === "low"
-                ? "bg-green-100 text-green-500"
-                : "bg-gray-100"
-            }`}
-          >
-            {getPriorityIcon(issue.priority)}
-            <div className="absolute bottom-full right-0 z-10 mb-2 hidden whitespace-nowrap rounded-md bg-white p-2 shadow-md group-hover:block">
-              <h5 className="mb-1 font-medium text-gray-900">Priority</h5>
-              <div
-                className={`capitalize ${
-                  issue.priority === "urgent"
-                    ? "text-red-600"
-                    : issue.priority === "high"
-                    ? "text-orange-500"
-                    : issue.priority === "medium"
-                    ? "text-yellow-500"
-                    : issue.priority === "low"
-                    ? "text-green-500"
-                    : ""
-                }`}
-              >
-                {issue.priority ?? "None"}
-              </div>
-            </div>
-          </div>
         )}
         {properties.state && (
-          <div className="group relative flex flex-shrink-0 cursor-pointer items-center gap-1 rounded border px-2 py-1 text-xs shadow-sm duration-300 hover:bg-gray-100 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500">
+          <StateSelect
-            <span
+            issue={issue}
-              className="h-1.5 w-1.5 flex-shrink-0 rounded-full"
+            states={states}
-              style={{
+            partialUpdateIssue={partialUpdateIssue}
-                backgroundColor: issue?.state_detail?.color,
+            isNotAllowed={isNotAllowed}
-              }}
+          />
-            />
-            {addSpaceIfCamelCase(issue?.state_detail.name)}
-            <div className="absolute bottom-full right-0 z-10 mb-2 hidden whitespace-nowrap rounded-md bg-white p-2 shadow-md group-hover:block">
-              <h5 className="mb-1 font-medium">State</h5>
-              <div>{issue?.state_detail.name}</div>
-            </div>
-          </div>
         )}
         {properties.due_date && (
-          <div
+          <DueDateSelect
-            className={`group group relative flex flex-shrink-0 cursor-pointer items-center gap-1 rounded border px-2 py-1 text-xs shadow-sm duration-300 hover:bg-gray-100 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 ${
+            issue={issue}
-              issue.target_date === null
+            partialUpdateIssue={partialUpdateIssue}
-                ? ""
+            isNotAllowed={isNotAllowed}
-                : issue.target_date < new Date().toISOString()
+          />
-                ? "text-red-600"
-                : findHowManyDaysLeft(issue.target_date) <= 3 && "text-orange-400"
-            }`}
-          >
-            <CalendarDaysIcon className="h-4 w-4" />
-            {issue.target_date ? renderShortNumericDateFormat(issue.target_date) : "N/A"}
-            <div className="absolute bottom-full right-0 z-10 mb-2 hidden whitespace-nowrap rounded-md bg-white p-2 shadow-md group-hover:block">
-              <h5 className="mb-1 font-medium text-gray-900">Due date</h5>
-              <div>{renderShortNumericDateFormat(issue.target_date ?? "")}</div>
-              <div>
-                {issue.target_date &&
-                  (issue.target_date < new Date().toISOString()
-                    ? `Due date has passed by ${findHowManyDaysLeft(issue.target_date)} days`
-                    : findHowManyDaysLeft(issue.target_date) <= 3
-                    ? `Due date is in ${findHowManyDaysLeft(issue.target_date)} days`
-                    : "Due date")}
-              </div>
-            </div>
-          </div>
         )}
         {properties.sub_issue_count && (
           <div className="flex flex-shrink-0 items-center gap-1 rounded border px-2 py-1 text-xs shadow-sm duration-300 hover:bg-gray-100 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500">
@@ -135,6 +123,9 @@ export const MyIssuesListItem: React.FC<Props> = ({ issue, properties }) => {
             <AssigneesList userIds={issue.assignees ?? []} />
           </div>
         )}
+        <CustomMenu width="auto" ellipsis>
+          <CustomMenu.MenuItem onClick={handleDeleteIssue}>Delete permanently</CustomMenu.MenuItem>
+        </CustomMenu>
       </div>
     </div>
   );

apps/app/components/issues/sidebar-select/cycle.tsx

@@ -75,7 +75,7 @@ export const SidebarCycleSelect: React.FC<Props> = ({
           onChange={(value: any) => {
             value === null
               ? removeIssueFromCycle(issueCycle?.id ?? "", issueCycle?.cycle ?? "")
-              : handleCycleChange(cycles?.find((c) => c.id === value) as any);
+              : handleCycleChange(cycles?.find((c) => c.id === value) as ICycle);
           }}
           disabled={isNotAllowed}
         >

apps/app/components/issues/sidebar-select/module.tsx

@@ -2,28 +2,32 @@ import React from "react";
 
 import { useRouter } from "next/router";
 
-import useSWR from "swr";
+import useSWR, { mutate } from "swr";
 
-import { Control, Controller } from "react-hook-form";
-// constants
-import { RectangleGroupIcon } from "@heroicons/react/24/outline";
 // services
 import modulesService from "services/modules.service";
 // ui
 import { Spinner, CustomSelect } from "components/ui";
 // icons
+import { RectangleGroupIcon } from "@heroicons/react/24/outline";
 // types
-import { IIssue, IModule } from "types";
+import { IIssue, IModule, UserAuth } from "types";
-import { MODULE_LIST } from "constants/fetch-keys";
+// fetch-keys
+import { ISSUE_DETAILS, MODULE_ISSUES, MODULE_LIST } from "constants/fetch-keys";
 
 type Props = {
-  control: Control<IIssue, any>;
+  issueDetail: IIssue | undefined;
   handleModuleChange: (module: IModule) => void;
+  userAuth: UserAuth;
 };
 
-export const SidebarModuleSelect: React.FC<Props> = ({ control, handleModuleChange }) => {
+export const SidebarModuleSelect: React.FC<Props> = ({
+  issueDetail,
+  handleModuleChange,
+  userAuth,
+}) => {
   const router = useRouter();
-  const { workspaceSlug, projectId } = router.query;
+  const { workspaceSlug, projectId, issueId } = router.query;
 
   const { data: modules } = useSWR(
     workspaceSlug && projectId ? MODULE_LIST(projectId as string) : null,
@@ -32,46 +36,67 @@ export const SidebarModuleSelect: React.FC<Props> = ({ control, handleModuleChan
       : null
   );
 
+  const removeIssueFromModule = (bridgeId: string, moduleId: string) => {
+    if (!workspaceSlug || !projectId) return;
+
+    modulesService
+      .removeIssueFromModule(workspaceSlug as string, projectId as string, moduleId, bridgeId)
+      .then((res) => {
+        mutate(ISSUE_DETAILS(issueId as string));
+
+        mutate(MODULE_ISSUES(moduleId));
+      })
+      .catch((e) => {
+        console.log(e);
+      });
+  };
+
+  const issueModule = issueDetail?.issue_module;
+
+  const isNotAllowed = userAuth.isGuest || userAuth.isViewer;
+
   return (
     <div className="flex flex-wrap items-center py-2">
       <div className="flex items-center gap-x-2 text-sm sm:basis-1/2">
         <RectangleGroupIcon className="h-4 w-4 flex-shrink-0" />
         <p>Module</p>
       </div>
-      <div className="sm:basis-1/2">
+      <div className="space-y-1 sm:basis-1/2">
-        <Controller
+        <CustomSelect
-          control={control}
+          label={
-          name="issue_module"
+            <span
-          render={({ field: { value } }) => (
+              className={`hidden truncate text-left sm:block ${issueModule ? "" : "text-gray-900"}`}
-            <CustomSelect
-              label={
-                <span
-                  className={`hidden truncate text-left sm:block ${value ? "" : "text-gray-900"}`}
-                >
-                  {value ? modules?.find((m) => m.id === value?.module_detail.id)?.name : "None"}
-                </span>
-              }
-              value={value}
-              onChange={(value: any) => {
-                handleModuleChange(modules?.find((m) => m.id === value) as any);
-              }}
             >
-              {modules ? (
+              {modules?.find((m) => m.id === issueModule?.module)?.name ?? "None"}
-                modules.length > 0 ? (
+            </span>
-                  modules.map((option) => (
+          }
-                    <CustomSelect.Option key={option.id} value={option.id}>
+          value={issueModule?.module_detail?.id}
-                      {option.name}
+          onChange={(value: any) => {
-                    </CustomSelect.Option>
+            value === null
-                  ))
+              ? removeIssueFromModule(issueModule?.id ?? "", issueModule?.module ?? "")
-                ) : (
+              : handleModuleChange(modules?.find((m) => m.id === value) as IModule);
-                  <div className="text-center">No cycles found</div>
+          }}
-                )
+          disabled={isNotAllowed}
-              ) : (
+        >
-                <Spinner />
+          {modules ? (
-              )}
+            modules.length > 0 ? (
-            </CustomSelect>
+              <>
+                <CustomSelect.Option value={null} className="capitalize">
+                  None
+                </CustomSelect.Option>
+                {modules.map((option) => (
+                  <CustomSelect.Option key={option.id} value={option.id}>
+                    {option.name}
+                  </CustomSelect.Option>
+                ))}
+              </>
+            ) : (
+              <div className="text-center">No modules found</div>
+            )
+          ) : (
+            <Spinner />
           )}
-        />
+        </CustomSelect>
       </div>
     </div>
   );

apps/app/components/issues/sidebar.tsx

@@ -14,6 +14,7 @@ import { Popover, Listbox, Transition } from "@headlessui/react";
 import useToast from "hooks/use-toast";
 // services
 import issuesServices from "services/issues.service";
+import modulesService from "services/modules.service";
 // components
 import {
   DeleteIssueModal,
@@ -21,6 +22,7 @@ import {
   SidebarBlockedSelect,
   SidebarBlockerSelect,
   SidebarCycleSelect,
+  SidebarModuleSelect,
   SidebarParentSelect,
   SidebarPrioritySelect,
   SidebarStateSelect,
@@ -40,7 +42,7 @@ import {
 // helpers
 import { copyTextToClipboard } from "helpers/string.helper";
 // types
-import type { ICycle, IIssue, IIssueLabels, UserAuth } from "types";
+import type { ICycle, IIssue, IIssueLabels, IModule, UserAuth } from "types";
 // fetch-keys
 import { PROJECT_ISSUE_LABELS, PROJECT_ISSUES_LIST, ISSUE_DETAILS } from "constants/fetch-keys";
 
@@ -123,6 +125,18 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
       });
   };
 
+  const handleModuleChange = (moduleDetail: IModule) => {
+    if (!workspaceSlug || !projectId || !issueDetail) return;
+
+    modulesService
+      .addIssuesToModule(workspaceSlug as string, projectId as string, moduleDetail.id, {
+        issues: [issueDetail.id],
+      })
+      .then((res) => {
+        mutate(ISSUE_DETAILS(issueId as string));
+      });
+  };
+
   const isNotAllowed = userAuth.isGuest || userAuth.isViewer;
 
   return (
@@ -263,6 +277,11 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
               handleCycleChange={handleCycleChange}
               userAuth={userAuth}
             />
+            <SidebarModuleSelect
+              issueDetail={issueDetail}
+              handleModuleChange={handleModuleChange}
+              userAuth={userAuth}
+            />
           </div>
         </div>
         <div className="space-y-3 pt-3">

apps/app/constants/index.ts

@@ -35,7 +35,8 @@ export const groupByOptions: Array<{ name: string; key: NestedKeyOf<IIssue> | nu
   { name: "None", key: null },
 ];
 
-export const orderByOptions: Array<{ name: string; key: NestedKeyOf<IIssue> | null }> = [
+export const orderByOptions: Array<{ name: string; key: NestedKeyOf<IIssue> | "manual" | null }> = [
+  // { name: "Manual", key: "manual" },
   { name: "Last created", key: "created_at" },
   { name: "Last updated", key: "updated_at" },
   { name: "Priority", key: "priority" },

apps/app/contexts/issue-view.context.tsx

@@ -19,7 +19,7 @@ type IssueViewProps = {
   issueView: "list" | "kanban" | null;
   groupByProperty: NestedKeyOf<IIssue> | null;
   filterIssue: "activeIssue" | "backlogIssue" | null;
-  orderBy: NestedKeyOf<IIssue> | null;
+  orderBy: NestedKeyOf<IIssue> | "manual" | null;
 };
 
 type ReducerActionType = {
@@ -34,12 +34,12 @@ type ReducerActionType = {
 };
 
 type ContextType = {
-  orderBy: NestedKeyOf<IIssue> | null;
+  orderBy: NestedKeyOf<IIssue> | "manual" | null;
   issueView: "list" | "kanban" | null;
   groupByProperty: NestedKeyOf<IIssue> | null;
   filterIssue: "activeIssue" | "backlogIssue" | null;
   setGroupByProperty: (property: NestedKeyOf<IIssue> | null) => void;
-  setOrderBy: (property: NestedKeyOf<IIssue> | null) => void;
+  setOrderBy: (property: NestedKeyOf<IIssue> | "manual" | null) => void;
   setFilterIssue: (property: "activeIssue" | "backlogIssue" | null) => void;
   resetFilterToDefault: () => void;
   setNewFilterDefaultView: () => void;
@@ -51,7 +51,7 @@ type StateType = {
   issueView: "list" | "kanban" | null;
   groupByProperty: NestedKeyOf<IIssue> | null;
   filterIssue: "activeIssue" | "backlogIssue" | null;
-  orderBy: NestedKeyOf<IIssue> | null;
+  orderBy: NestedKeyOf<IIssue> | "manual" | null;
 };
 type ReducerFunctionType = (state: StateType, action: ReducerActionType) => StateType;
 
@@ -219,7 +219,7 @@ export const IssueViewContextProvider: React.FC<{ children: React.ReactNode }> =
   );
 
   const setOrderBy = useCallback(
-    (property: NestedKeyOf<IIssue> | null) => {
+    (property: NestedKeyOf<IIssue> | "manual" | null) => {
       dispatch({
         type: "SET_ORDER_BY_PROPERTY",
         payload: {

apps/app/pages/[workspaceSlug]/me/my-issues.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import { useRouter } from "next/router";
 
 // headless ui
@@ -17,178 +17,194 @@ import useIssuesProperties from "hooks/use-issue-properties";
 // types
 import { IIssue, Properties } from "types";
 // components
-import { MyIssuesListItem } from "components/issues";
+import { DeleteIssueModal, MyIssuesListItem } from "components/issues";
 // helpers
 import { replaceUnderscoreIfSnakeCase } from "helpers/string.helper";
 // types
 import type { NextPage } from "next";
 
 const MyIssuesPage: NextPage = () => {
+  const [deleteIssueModal, setDeleteIssueModal] = useState(false);
+  const [issueToDelete, setIssueToDelete] = useState<IIssue | null>(null);
+
   const router = useRouter();
   const { workspaceSlug } = router.query;
 
   // fetching user issues
-  const { myIssues } = useIssues(workspaceSlug?.toString());
+  const { myIssues } = useIssues(workspaceSlug as string);
 
-  // FIXME: remove this hard-coded value
   const [properties, setProperties] = useIssuesProperties(
     workspaceSlug ? (workspaceSlug as string) : undefined,
     undefined
   );
 
+  const handleDeleteIssue = (issue: IIssue) => {
+    setDeleteIssueModal(true);
+    setIssueToDelete(issue);
+  };
+
   return (
-    <AppLayout
+    <>
-      breadcrumbs={
+      <DeleteIssueModal
-        <Breadcrumbs>
+        handleClose={() => setDeleteIssueModal(false)}
-          <BreadcrumbItem title="My Issues" />
+        isOpen={deleteIssueModal}
-        </Breadcrumbs>
+        data={issueToDelete}
-      }
+      />
-      right={
+      <AppLayout
-        <div className="flex items-center gap-2">
+        breadcrumbs={
-          <Popover className="relative">
+          <Breadcrumbs>
-            {({ open }) => (
+            <BreadcrumbItem title="My Issues" />
-              <>
+          </Breadcrumbs>
-                <Popover.Button
+        }
-                  className={`group flex items-center gap-2 rounded-md border bg-transparent p-2 text-xs font-medium hover:bg-gray-100 hover:text-gray-900 focus:outline-none ${
+        right={
-                    open ? "bg-gray-100 text-gray-900" : "text-gray-500"
+          <div className="flex items-center gap-2">
-                  }`}
+            <Popover className="relative">
-                >
+              {({ open }) => (
-                  <span>View</span>
+                <>
-                  <ChevronDownIcon className="h-4 w-4" aria-hidden="true" />
+                  <Popover.Button
-                </Popover.Button>
+                    className={`group flex items-center gap-2 rounded-md border bg-transparent p-2 text-xs font-medium hover:bg-gray-100 hover:text-gray-900 focus:outline-none ${
+                      open ? "bg-gray-100 text-gray-900" : "text-gray-500"
+                    }`}
+                  >
+                    <span>View</span>
+                    <ChevronDownIcon className="h-4 w-4" aria-hidden="true" />
+                  </Popover.Button>
 
-                <Transition
+                  <Transition
-                  as={React.Fragment}
+                    as={React.Fragment}
-                  enter="transition ease-out duration-200"
+                    enter="transition ease-out duration-200"
-                  enterFrom="opacity-0 translate-y-1"
+                    enterFrom="opacity-0 translate-y-1"
-                  enterTo="opacity-100 translate-y-0"
+                    enterTo="opacity-100 translate-y-0"
-                  leave="transition ease-in duration-150"
+                    leave="transition ease-in duration-150"
-                  leaveFrom="opacity-100 translate-y-0"
+                    leaveFrom="opacity-100 translate-y-0"
-                  leaveTo="opacity-0 translate-y-1"
+                    leaveTo="opacity-0 translate-y-1"
-                >
+                  >
-                  <Popover.Panel className="absolute right-1/2 z-10 mr-5 mt-1 w-screen max-w-xs translate-x-1/2 transform overflow-hidden rounded-lg bg-white p-3 shadow-lg">
+                    <Popover.Panel className="absolute right-1/2 z-10 mr-5 mt-1 w-screen max-w-xs translate-x-1/2 transform overflow-hidden rounded-lg bg-white p-3 shadow-lg">
-                    <div className="relative flex flex-col gap-1 gap-y-4">
+                      <div className="relative flex flex-col gap-1 gap-y-4">
-                      <div className="relative flex flex-col gap-1">
+                        <div className="relative flex flex-col gap-1">
-                        <h4 className="text-base text-gray-600">Properties</h4>
+                          <h4 className="text-base text-gray-600">Properties</h4>
-                        <div className="flex flex-wrap items-center gap-2">
+                          <div className="flex flex-wrap items-center gap-2">
-                          {Object.keys(properties).map((key) => (
+                            {Object.keys(properties).map((key) => (
-                            <button
+                              <button
-                              key={key}
+                                key={key}
-                              type="button"
+                                type="button"
-                              className={`rounded border border-theme px-2 py-1 text-xs capitalize ${
+                                className={`rounded border border-theme px-2 py-1 text-xs capitalize ${
-                                properties[key as keyof Properties]
+                                  properties[key as keyof Properties]
-                                  ? "border-theme bg-theme text-white"
+                                    ? "border-theme bg-theme text-white"
-                                  : ""
+                                    : ""
-                              }`}
-                              onClick={() => setProperties(key as keyof Properties)}
-                            >
-                              {replaceUnderscoreIfSnakeCase(key)}
-                            </button>
-                          ))}
-                        </div>
-                      </div>
-                    </div>
-                  </Popover.Panel>
-                </Transition>
-              </>
-            )}
-          </Popover>
-          <HeaderButton
-            Icon={PlusIcon}
-            label="Add Issue"
-            onClick={() => {
-              const e = new KeyboardEvent("keydown", {
-                key: "c",
-              });
-
-              document.dispatchEvent(e);
-            }}
-          />
-        </div>
-      }
-    >
-      <div className="flex h-full w-full flex-col space-y-5">
-        {myIssues ? (
-          <>
-            {myIssues.length > 0 ? (
-              <div className="flex flex-col space-y-5">
-                <Disclosure as="div" defaultOpen>
-                  {({ open }) => (
-                    <div className="rounded-lg bg-white">
-                      <div className="rounded-t-lg bg-gray-100 px-4 py-3">
-                        <Disclosure.Button>
-                          <div className="flex items-center gap-x-2">
-                            <span>
-                              <ChevronDownIcon
-                                className={`h-4 w-4 text-gray-500 ${
-                                  !open ? "-rotate-90 transform" : ""
                                 }`}
-                              />
+                                onClick={() => setProperties(key as keyof Properties)}
-                            </span>
+                              >
-                            <h2 className="font-medium leading-5">My Issues</h2>
+                                {replaceUnderscoreIfSnakeCase(key)}
-                            <p className="text-sm text-gray-500">{myIssues.length}</p>
+                              </button>
-                          </div>
-                        </Disclosure.Button>
-                      </div>
-                      <Transition
-                        show={open}
-                        enter="transition duration-100 ease-out"
-                        enterFrom="transform opacity-0"
-                        enterTo="transform opacity-100"
-                        leave="transition duration-75 ease-out"
-                        leaveFrom="transform opacity-100"
-                        leaveTo="transform opacity-0"
-                      >
-                        <Disclosure.Panel>
-                          <div className="divide-y-2">
-                            {myIssues.map((issue: IIssue) => (
-                              <MyIssuesListItem
-                                key={issue.id}
-                                issue={issue}
-                                properties={properties}
-                              />
                             ))}
                           </div>
-                        </Disclosure.Panel>
+                        </div>
-                      </Transition>
+                      </div>
-                    </div>
+                    </Popover.Panel>
-                  )}
+                  </Transition>
-                </Disclosure>
+                </>
-              </div>
+              )}
-            ) : (
+            </Popover>
-              <div className="flex h-full w-full flex-col items-center justify-center px-4">
+            <HeaderButton
-                <EmptySpace
+              Icon={PlusIcon}
-                  title="You don't have any issue assigned to you yet."
+              label="Add Issue"
-                  description="Issues help you track individual pieces of work. With Issues, keep track of what's going on, who is working on it, and what's done."
+              onClick={() => {
-                  Icon={RectangleStackIcon}
+                const e = new KeyboardEvent("keydown", {
-                >
+                  key: "c",
-                  <EmptySpaceItem
+                });
-                    title="Create a new issue"
+
-                    description={
+                document.dispatchEvent(e);
-                      <span>
+              }}
-                        Use <pre className="inline rounded bg-gray-100 px-2 py-1">C</pre> shortcut
+            />
-                        to create a new issue
-                      </span>
-                    }
-                    Icon={PlusIcon}
-                    action={() => {
-                      const e = new KeyboardEvent("keydown", {
-                        key: "c",
-                      });
-                      document.dispatchEvent(e);
-                    }}
-                  />
-                </EmptySpace>
-              </div>
-            )}
-          </>
-        ) : (
-          <div className="flex h-full w-full items-center justify-center">
-            <Spinner />
           </div>
-        )}
+        }
-      </div>
+      >
-    </AppLayout>
+        <div className="flex h-full w-full flex-col space-y-5">
+          {myIssues ? (
+            <>
+              {myIssues.length > 0 ? (
+                <div className="flex flex-col space-y-5">
+                  <Disclosure as="div" defaultOpen>
+                    {({ open }) => (
+                      <div className="rounded-lg bg-white">
+                        <div className="rounded-t-lg bg-gray-100 px-4 py-3">
+                          <Disclosure.Button>
+                            <div className="flex items-center gap-x-2">
+                              <span>
+                                <ChevronDownIcon
+                                  className={`h-4 w-4 text-gray-500 ${
+                                    !open ? "-rotate-90 transform" : ""
+                                  }`}
+                                />
+                              </span>
+                              <h2 className="font-medium leading-5">My Issues</h2>
+                              <p className="text-sm text-gray-500">{myIssues.length}</p>
+                            </div>
+                          </Disclosure.Button>
+                        </div>
+                        <Transition
+                          show={open}
+                          enter="transition duration-100 ease-out"
+                          enterFrom="transform opacity-0"
+                          enterTo="transform opacity-100"
+                          leave="transition duration-75 ease-out"
+                          leaveFrom="transform opacity-100"
+                          leaveTo="transform opacity-0"
+                        >
+                          <Disclosure.Panel>
+                            <div className="divide-y-2">
+                              {myIssues.map((issue: IIssue) => (
+                                <MyIssuesListItem
+                                  key={issue.id}
+                                  issue={issue}
+                                  properties={properties}
+                                  projectId={issue.project}
+                                  handleDeleteIssue={() => handleDeleteIssue(issue)}
+                                />
+                              ))}
+                            </div>
+                          </Disclosure.Panel>
+                        </Transition>
+                      </div>
+                    )}
+                  </Disclosure>
+                </div>
+              ) : (
+                <div className="flex h-full w-full flex-col items-center justify-center px-4">
+                  <EmptySpace
+                    title="You don't have any issue assigned to you yet."
+                    description="Issues help you track individual pieces of work. With Issues, keep track of what's going on, who is working on it, and what's done."
+                    Icon={RectangleStackIcon}
+                  >
+                    <EmptySpaceItem
+                      title="Create a new issue"
+                      description={
+                        <span>
+                          Use <pre className="inline rounded bg-gray-100 px-2 py-1">C</pre> shortcut
+                          to create a new issue
+                        </span>
+                      }
+                      Icon={PlusIcon}
+                      action={() => {
+                        const e = new KeyboardEvent("keydown", {
+                          key: "c",
+                        });
+                        document.dispatchEvent(e);
+                      }}
+                    />
+                  </EmptySpace>
+                </div>
+              )}
+            </>
+          ) : (
+            <div className="flex h-full w-full items-center justify-center">
+              <Spinner />
+            </div>
+          )}
+        </div>
+      </AppLayout>
+    </>
   );
 };
 

apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx

@@ -50,6 +50,7 @@ const defaultValues = {
   blocked_list: [],
   target_date: new Date().toString(),
   issue_cycle: null,
+  issue_module: null,
   labels_list: [],
 };
 

apps/app/pages/_app.tsx

@@ -10,15 +10,13 @@ import type { AppProps } from "next/app";
 
 function MyApp({ Component, pageProps }: AppProps) {
   return (
-    <>
+    <UserProvider>
-      <UserProvider>
+      <ToastContextProvider>
-        <ToastContextProvider>
+        <ThemeContextProvider>
-          <ThemeContextProvider>
+          <Component {...pageProps} />
-            <Component {...pageProps} />
+        </ThemeContextProvider>
-          </ThemeContextProvider>
+      </ToastContextProvider>
-        </ToastContextProvider>
+    </UserProvider>
-      </UserProvider>
-    </>
   );
 }