From cedc884d9259d4970c80bf2ce5b935980d71a04a Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <aaryankhandu123@gmail.com>
Date: Fri, 27 Jan 2023 12:55:20 +0530
Subject: [PATCH 01/15] feat: added user auth

---
 .../common/board-view/single-issue.tsx        | 212 ++++++++++--------
 .../common/list-view/single-issue.tsx         |  21 +-
 .../project/confirm-project-deletion.tsx      |  12 +-
 .../project/confirm-project-member-remove.tsx |   4 +-
 .../project/cycles/board-view/index.tsx       |  11 +-
 .../cycles/board-view/single-board.tsx        |  14 +-
 .../cycles/create-update-cycle-modal.tsx      |  12 +-
 .../project/cycles/list-view/index.tsx        |   5 +-
 .../project/issues/BoardView/index.tsx        |   8 +-
 .../project/issues/BoardView/single-board.tsx |   8 +-
 .../project/issues/list-view/index.tsx        |   7 +-
 .../project/modules/board-view/index.tsx      |  11 +-
 .../modules/board-view/single-board.tsx       |  24 +-
 .../project/modules/list-view/index.tsx       |   5 +-
 .../project/send-project-invitation-modal.tsx |  77 +++----
 .../app/components/ui/custom-select/index.tsx |  14 +-
 .../workspace/confirm-workspace-deletion.tsx  |  13 +-
 .../confirm-workspace-member-remove.tsx       |   4 +-
 .../send-workspace-invitation-modal.tsx       |   4 +-
 ...leInvitation.tsx => single-invitation.tsx} |   0
 .../projects/[projectId]/cycles/[cycleId].tsx |  51 +++--
 .../projects/[projectId]/issues/index.tsx     |  41 ++--
 .../[projectId]/modules/[moduleId].tsx        |  59 +++--
 .../projects/[projectId]/settings/control.tsx |  23 +-
 apps/app/pages/invitations/index.tsx          |   8 +-
 apps/app/types/users.d.ts                     |   7 +
 26 files changed, 356 insertions(+), 299 deletions(-)
 rename apps/app/components/workspace/{SingleInvitation.tsx => single-invitation.tsx} (100%)

diff --git a/apps/app/components/common/board-view/single-issue.tsx b/apps/app/components/common/board-view/single-issue.tsx
index dc774add5..445982035 100644
--- a/apps/app/components/common/board-view/single-issue.tsx
+++ b/apps/app/components/common/board-view/single-issue.tsx
@@ -4,7 +4,7 @@ import Link from "next/link";
 import Image from "next/image";
 import { useRouter } from "next/router";
 // swr
-import useSWR from "swr";
+import useSWR, { mutate } from "swr";
 // react-beautiful-dnd
 import { DraggableStateSnapshot } from "react-beautiful-dnd";
 // headless ui
@@ -17,48 +17,49 @@ import issuesService from "services/issues.service";
 import stateService from "services/state.service";
 import projectService from "services/project.service";
 // components
-import { AssigneesList } from "components/ui/avatar";
+import { CustomSelect, AssigneesList } from "components/ui";
 // helpers
 import { renderShortNumericDateFormat, findHowManyDaysLeft } from "helpers/date-time.helper";
 import { addSpaceIfCamelCase } from "helpers/string.helper";
 // types
-import { IIssue, IssueResponse, IUserLite, IWorkspaceMember, Properties } from "types";
+import { IIssue, IUserLite, IWorkspaceMember, Properties, UserAuth } from "types";
 // common
 import { PRIORITIES } from "constants/";
-import { PROJECT_ISSUES_LIST, STATE_LIST, PROJECT_DETAILS } from "constants/fetch-keys";
+import {
+  STATE_LIST,
+  PROJECT_DETAILS,
+  CYCLE_ISSUES,
+  MODULE_ISSUES,
+  PROJECT_ISSUES_LIST,
+} from "constants/fetch-keys";
 import { getPriorityIcon } from "constants/global";
 
 type Props = {
+  type?: string;
+  typeId?: string;
   issue: IIssue;
   properties: Properties;
   snapshot?: DraggableStateSnapshot;
   assignees: Partial<IUserLite>[] | (Partial<IUserLite> | undefined)[];
   people: IWorkspaceMember[] | undefined;
   handleDeleteIssue?: React.Dispatch<React.SetStateAction<string | undefined>>;
-  partialUpdateIssue: any;
+  userAuth: UserAuth;
 };
 
 const SingleBoardIssue: React.FC<Props> = ({
+  type,
+  typeId,
   issue,
   properties,
   snapshot,
   assignees,
   people,
   handleDeleteIssue,
-  partialUpdateIssue,
+  userAuth,
 }) => {
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
 
-  const { data: issues } = useSWR<IssueResponse>(
-    workspaceSlug && projectId
-      ? PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string)
-      : null,
-    workspaceSlug && projectId
-      ? () => issuesService.getIssues(workspaceSlug as string, projectId as string)
-      : null
-  );
-
   const { data: states } = useSWR(
     workspaceSlug && projectId ? STATE_LIST(projectId as string) : null,
     workspaceSlug && projectId
@@ -73,7 +74,25 @@ const SingleBoardIssue: React.FC<Props> = ({
       : null
   );
 
-  const totalChildren = issues?.results.filter((i) => i.parent === issue.id).length;
+  const partialUpdateIssue = (formData: Partial<IIssue>) => {
+    if (!workspaceSlug || !projectId) return;
+
+    issuesService
+      .patchIssue(workspaceSlug as string, projectId as string, issue.id, formData)
+      .then((res) => {
+        if (typeId) {
+          mutate(CYCLE_ISSUES(typeId ?? ""));
+          mutate(MODULE_ISSUES(typeId ?? ""));
+        }
+
+        mutate(PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string));
+      })
+      .catch((error) => {
+        console.log(error);
+      });
+  };
+
+  const isNotAllowed = userAuth.isGuest || userAuth.isViewer;
 
   return (
     <div
@@ -82,7 +101,7 @@ const SingleBoardIssue: React.FC<Props> = ({
       }`}
     >
       <div className="group/card relative select-none p-2">
-        {handleDeleteIssue && (
+        {handleDeleteIssue && !isNotAllowed && (
           <div className="absolute top-1.5 right-1.5 z-10 opacity-0 group-hover/card:opacity-100">
             <button
               type="button"
@@ -114,15 +133,18 @@ const SingleBoardIssue: React.FC<Props> = ({
               as="div"
               value={issue.priority}
               onChange={(data: string) => {
-                partialUpdateIssue({ priority: data }, issue.id);
+                partialUpdateIssue({ priority: data });
               }}
               className="group relative flex-shrink-0"
+              disabled={isNotAllowed}
             >
               {({ open }) => (
                 <>
                   <div>
                     <Listbox.Button
-                      className={`grid 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 ${
+                      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"
@@ -171,14 +193,19 @@ const SingleBoardIssue: React.FC<Props> = ({
               as="div"
               value={issue.state}
               onChange={(data: string) => {
-                partialUpdateIssue({ state: data }, issue.id);
+                partialUpdateIssue({ state: data });
               }}
               className="group relative flex-shrink-0"
+              disabled={isNotAllowed}
             >
               {({ open }) => (
                 <>
                   <div>
-                    <Listbox.Button className="flex 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">
+                    <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={{
@@ -218,10 +245,6 @@ const SingleBoardIssue: React.FC<Props> = ({
                       </Listbox.Options>
                     </Transition>
                   </div>
-                  {/* <div className="absolute bottom-full right-0 mb-2 z-10 hidden group-hover:block p-2 bg-white shadow-md rounded-md whitespace-nowrap">
-                    <h5 className="font-medium mb-1">State</h5>
-                    <div>{issue.state_detail.name}</div>
-                  </div> */}
                 </>
               )}
             </Listbox>
@@ -242,7 +265,7 @@ const SingleBoardIssue: React.FC<Props> = ({
           )}
           {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">
-              {totalChildren} {totalChildren === 1 ? "sub-issue" : "sub-issues"}
+              {issue.sub_issues_count} {issue.sub_issues_count === 1 ? "sub-issue" : "sub-issues"}
             </div>
           )}
           {properties.assignee && (
@@ -255,81 +278,82 @@ const SingleBoardIssue: React.FC<Props> = ({
                 if (newData.includes(data)) newData.splice(newData.indexOf(data), 1);
                 else newData.push(data);
 
-                partialUpdateIssue({ assignees_list: newData }, issue.id);
+                partialUpdateIssue({ assignees_list: newData });
               }}
               className="group relative flex-shrink-0"
+              disabled={isNotAllowed}
             >
               {({ open }) => (
-                <>
-                  <div>
-                    <Listbox.Button>
-                      <div className="flex 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"
+                <div>
+                  <Listbox.Button>
+                    <div
+                      className={`flex ${
+                        isNotAllowed ? "cursor-not-allowed" : "cursor-pointer"
+                      } items-center gap-1 text-xs`}
                     >
-                      <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.id}
-                            className={({ active }) =>
-                              `cursor-pointer select-none p-2 ${
-                                active ? "bg-indigo-50" : "bg-white"
-                              }`
-                            }
-                            value={person.member.id}
+                      <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.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"
+                            }`}
                           >
-                            <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.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
-                                  : person.member.email}
-                              </p>
-                            </div>
-                          </Listbox.Option>
-                        ))}
-                      </Listbox.Options>
-                    </Transition>
-                  </div>
-                </>
+                                  ? 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>
           )}
diff --git a/apps/app/components/common/list-view/single-issue.tsx b/apps/app/components/common/list-view/single-issue.tsx
index 907282edb..99b30d149 100644
--- a/apps/app/components/common/list-view/single-issue.tsx
+++ b/apps/app/components/common/list-view/single-issue.tsx
@@ -21,7 +21,7 @@ import { CalendarDaysIcon } from "@heroicons/react/24/outline";
 import { renderShortNumericDateFormat, findHowManyDaysLeft } from "helpers/date-time.helper";
 import { addSpaceIfCamelCase } from "helpers/string.helper";
 // types
-import { IIssue, IWorkspaceMember, Properties } from "types";
+import { IIssue, IWorkspaceMember, Properties, UserAuth } from "types";
 // fetch-keys
 import {
   CYCLE_ISSUES,
@@ -41,6 +41,7 @@ type Props = {
   properties: Properties;
   editIssue: () => void;
   removeIssue?: () => void;
+  userAuth: UserAuth;
 };
 
 const SingleListIssue: React.FC<Props> = ({
@@ -50,6 +51,7 @@ const SingleListIssue: React.FC<Props> = ({
   properties,
   editIssue,
   removeIssue,
+  userAuth,
 }) => {
   const [deleteIssue, setDeleteIssue] = useState<IIssue | undefined>();
 
@@ -86,6 +88,8 @@ const SingleListIssue: React.FC<Props> = ({
       });
   };
 
+  const isNotAllowed = userAuth.isGuest || userAuth.isViewer;
+
   return (
     <>
       <ConfirmIssueDeletion
@@ -121,12 +125,15 @@ const SingleListIssue: React.FC<Props> = ({
                 partialUpdateIssue({ priority: data });
               }}
               className="group relative flex-shrink-0"
+              disabled={isNotAllowed}
             >
               {({ open }) => (
                 <>
                   <div>
                     <Listbox.Button
-                      className={`flex 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 ${
+                      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"
@@ -210,6 +217,7 @@ const SingleListIssue: React.FC<Props> = ({
               }}
               maxHeight="md"
               noChevron
+              disabled={isNotAllowed}
             >
               {states?.map((state) => (
                 <CustomSelect.Option key={state.id} value={state.id}>
@@ -270,12 +278,17 @@ const SingleListIssue: React.FC<Props> = ({
                 partialUpdateIssue({ assignees_list: newData });
               }}
               className="group relative flex-shrink-0"
+              disabled={isNotAllowed}
             >
               {({ open }) => (
                 <>
                   <div>
                     <Listbox.Button>
-                      <div className="flex cursor-pointer items-center gap-1 text-xs">
+                      <div
+                        className={`flex ${
+                          isNotAllowed ? "cursor-not-allowed" : "cursor-pointer"
+                        } items-center gap-1 text-xs`}
+                      >
                         <AssigneesList userIds={issue.assignees ?? []} />
                       </div>
                     </Listbox.Button>
@@ -325,7 +338,7 @@ const SingleListIssue: React.FC<Props> = ({
               )}
             </Listbox>
           )}
-          {type && (
+          {type && !isNotAllowed && (
             <CustomMenu width="auto" ellipsis>
               <CustomMenu.MenuItem onClick={editIssue}>Edit</CustomMenu.MenuItem>
               {type !== "issue" && (
diff --git a/apps/app/components/project/confirm-project-deletion.tsx b/apps/app/components/project/confirm-project-deletion.tsx
index a55df3805..236f71bdf 100644
--- a/apps/app/components/project/confirm-project-deletion.tsx
+++ b/apps/app/components/project/confirm-project-deletion.tsx
@@ -2,19 +2,19 @@ import React, { useEffect, useRef, useState } from "react";
 
 import { mutate } from "swr";
 
+// headless ui
 import { Dialog, Transition } from "@headlessui/react";
-
 // services
-import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
-import type { IProject, IWorkspace } from "types";
 import projectService from "services/project.service";
 // hooks
 import useToast from "hooks/use-toast";
 // icons
+import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
 // ui
 import { Button, Input } from "components/ui";
 // types
-// constants
+import type { IProject, IWorkspace } from "types";
+// fetch-keys
 import { PROJECTS_LIST } from "constants/fetch-keys";
 
 type TConfirmProjectDeletionProps = {
@@ -86,7 +86,7 @@ const ConfirmProjectDeletion: React.FC<TConfirmProjectDeletionProps> = (props) =
     <Transition.Root show={isOpen} as={React.Fragment}>
       <Dialog
         as="div"
-        className="relative z-10"
+        className="relative z-20"
         initialFocus={cancelButtonRef}
         onClose={handleClose}
       >
@@ -102,7 +102,7 @@ const ConfirmProjectDeletion: React.FC<TConfirmProjectDeletionProps> = (props) =
           <div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
         </Transition.Child>
 
-        <div className="fixed inset-0 z-10 overflow-y-auto">
+        <div className="fixed inset-0 z-20 overflow-y-auto">
           <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
             <Transition.Child
               as={React.Fragment}
diff --git a/apps/app/components/project/confirm-project-member-remove.tsx b/apps/app/components/project/confirm-project-member-remove.tsx
index 776811a87..7f040b980 100644
--- a/apps/app/components/project/confirm-project-member-remove.tsx
+++ b/apps/app/components/project/confirm-project-member-remove.tsx
@@ -33,7 +33,7 @@ const ConfirmProjectMemberRemove: React.FC<Props> = ({ isOpen, onClose, data, ha
     <Transition.Root show={isOpen} as={React.Fragment}>
       <Dialog
         as="div"
-        className="relative z-10"
+        className="relative z-20"
         initialFocus={cancelButtonRef}
         onClose={handleClose}
       >
@@ -49,7 +49,7 @@ const ConfirmProjectMemberRemove: React.FC<Props> = ({ isOpen, onClose, data, ha
           <div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
         </Transition.Child>
 
-        <div className="fixed inset-0 z-10 overflow-y-auto">
+        <div className="fixed inset-0 z-20 overflow-y-auto">
           <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
             <Transition.Child
               as={React.Fragment}
diff --git a/apps/app/components/project/cycles/board-view/index.tsx b/apps/app/components/project/cycles/board-view/index.tsx
index 901fb03db..a87642f30 100644
--- a/apps/app/components/project/cycles/board-view/index.tsx
+++ b/apps/app/components/project/cycles/board-view/index.tsx
@@ -13,7 +13,7 @@ import SingleBoard from "components/project/cycles/board-view/single-board";
 // ui
 import { Spinner } from "components/ui";
 // types
-import { CycleIssueResponse, IIssue, IProjectMember } from "types";
+import { CycleIssueResponse, IIssue, IProjectMember, UserAuth } from "types";
 import issuesService from "services/issues.service";
 // constants
 import { STATE_LIST, CYCLE_ISSUES } from "constants/fetch-keys";
@@ -23,8 +23,6 @@ type Props = {
   members: IProjectMember[] | undefined;
   openCreateIssueModal: (issue?: IIssue, actionType?: "create" | "edit" | "delete") => void;
   openIssuesListModal: () => void;
-  removeIssueFromCycle: (bridgeId: string) => void;
-  partialUpdateIssue: (formData: Partial<IIssue>, issueId: string) => void;
   handleDeleteIssue: React.Dispatch<React.SetStateAction<string | undefined>>;
   setPreloadedData: React.Dispatch<
     React.SetStateAction<
@@ -34,6 +32,7 @@ type Props = {
       | null
     >
   >;
+  userAuth: UserAuth;
 };
 
 const CyclesBoardView: React.FC<Props> = ({
@@ -41,10 +40,9 @@ const CyclesBoardView: React.FC<Props> = ({
   members,
   openCreateIssueModal,
   openIssuesListModal,
-  removeIssueFromCycle,
-  partialUpdateIssue,
   handleDeleteIssue,
   setPreloadedData,
+  userAuth,
 }) => {
   const router = useRouter();
   const { workspaceSlug, projectId, cycleId } = router.query;
@@ -151,10 +149,8 @@ const CyclesBoardView: React.FC<Props> = ({
                           : "#000000"
                       }
                       properties={properties}
-                      removeIssueFromCycle={removeIssueFromCycle}
                       openIssuesListModal={openIssuesListModal}
                       openCreateIssueModal={openCreateIssueModal}
-                      partialUpdateIssue={partialUpdateIssue}
                       handleDeleteIssue={handleDeleteIssue}
                       setPreloadedData={setPreloadedData}
                       stateId={
@@ -162,6 +158,7 @@ const CyclesBoardView: React.FC<Props> = ({
                           ? states?.find((s) => s.name === singleGroup)?.id ?? null
                           : null
                       }
+                      userAuth={userAuth}
                     />
                   ))}
                 </div>
diff --git a/apps/app/components/project/cycles/board-view/single-board.tsx b/apps/app/components/project/cycles/board-view/single-board.tsx
index 581b85207..ab028c2cf 100644
--- a/apps/app/components/project/cycles/board-view/single-board.tsx
+++ b/apps/app/components/project/cycles/board-view/single-board.tsx
@@ -17,7 +17,7 @@ import { CustomMenu } from "components/ui";
 // icons
 import { PlusIcon } from "@heroicons/react/24/outline";
 // types
-import { IIssue, IWorkspaceMember, NestedKeyOf, Properties } from "types";
+import { IIssue, IWorkspaceMember, NestedKeyOf, Properties, UserAuth } from "types";
 // fetch-keys
 import { WORKSPACE_MEMBERS } from "constants/fetch-keys";
 
@@ -32,8 +32,6 @@ type Props = {
   bgColor?: string;
   openCreateIssueModal: (issue?: IIssue, actionType?: "create" | "edit" | "delete") => void;
   openIssuesListModal: () => void;
-  removeIssueFromCycle: (bridgeId: string) => void;
-  partialUpdateIssue: (formData: Partial<IIssue>, issueId: string) => void;
   handleDeleteIssue: React.Dispatch<React.SetStateAction<string | undefined>>;
   setPreloadedData: React.Dispatch<
     React.SetStateAction<
@@ -44,6 +42,7 @@ type Props = {
     >
   >;
   stateId: string | null;
+  userAuth: UserAuth;
 };
 
 const SingleModuleBoard: React.FC<Props> = ({
@@ -55,18 +54,17 @@ const SingleModuleBoard: React.FC<Props> = ({
   bgColor,
   openCreateIssueModal,
   openIssuesListModal,
-  removeIssueFromCycle,
-  partialUpdateIssue,
   handleDeleteIssue,
   setPreloadedData,
   stateId,
+  userAuth,
 }) => {
   // collapse/expand
   const [isCollapsed, setIsCollapsed] = useState(true);
 
   const router = useRouter();
 
-  const { workspaceSlug } = router.query;
+  const { workspaceSlug, cycleId } = router.query;
 
   if (selectedGroup === "priority")
     groupTitle === "high"
@@ -132,13 +130,15 @@ const SingleModuleBoard: React.FC<Props> = ({
                         {...provided.dragHandleProps}
                       >
                         <SingleIssue
+                          type="cycle"
+                          typeId={cycleId as string}
                           issue={childIssue}
                           properties={properties}
                           snapshot={snapshot}
                           assignees={assignees}
                           people={people}
-                          partialUpdateIssue={partialUpdateIssue}
                           handleDeleteIssue={handleDeleteIssue}
+                          userAuth={userAuth}
                         />
                       </div>
                     )}
diff --git a/apps/app/components/project/cycles/create-update-cycle-modal.tsx b/apps/app/components/project/cycles/create-update-cycle-modal.tsx
index 685f6a531..7d36bf6ca 100644
--- a/apps/app/components/project/cycles/create-update-cycle-modal.tsx
+++ b/apps/app/components/project/cycles/create-update-cycle-modal.tsx
@@ -7,14 +7,14 @@ import { mutate } from "swr";
 import { Controller, useForm } from "react-hook-form";
 // headless
 import { Dialog, Transition } from "@headlessui/react";
-// types
-import type { ICycle } from "types";
 // services
 import cycleService from "services/cycles.service";
-import { Button, Input, TextArea, CustomSelect } from "components/ui";
 // ui
+import { Button, Input, TextArea, CustomSelect } from "components/ui";
 // common
 import { renderDateFormat } from "helpers/date-time.helper";
+// types
+import type { ICycle } from "types";
 // fetch keys
 import { CYCLE_LIST } from "constants/fetch-keys";
 
@@ -86,11 +86,11 @@ const CreateUpdateCycleModal: React.FC<Props> = ({ isOpen, setIsOpen, data, proj
             CYCLE_LIST(projectId),
             (prevData) => {
               const newData = prevData?.map((item) => {
-                if (item.id === res.id) {
-                  return res;
-                }
+                if (item.id === res.id) return res;
+
                 return item;
               });
+
               return newData;
             },
             false
diff --git a/apps/app/components/project/cycles/list-view/index.tsx b/apps/app/components/project/cycles/list-view/index.tsx
index feb22fd46..e86ec8de4 100644
--- a/apps/app/components/project/cycles/list-view/index.tsx
+++ b/apps/app/components/project/cycles/list-view/index.tsx
@@ -21,7 +21,7 @@ import { CustomMenu, Spinner } from "components/ui";
 // helpers
 import { addSpaceIfCamelCase } from "helpers/string.helper";
 // types
-import { IIssue, IWorkspaceMember } from "types";
+import { IIssue, IWorkspaceMember, UserAuth } from "types";
 // fetch-keys
 import { WORKSPACE_MEMBERS, STATE_LIST } from "constants/fetch-keys";
 
@@ -38,6 +38,7 @@ type Props = {
       | null
     >
   >;
+  userAuth: UserAuth;
 };
 
 const CyclesListView: React.FC<Props> = ({
@@ -46,6 +47,7 @@ const CyclesListView: React.FC<Props> = ({
   openIssuesListModal,
   removeIssueFromCycle,
   setPreloadedData,
+  userAuth,
 }) => {
   const router = useRouter();
   const { workspaceSlug, projectId, cycleId } = router.query;
@@ -140,6 +142,7 @@ const CyclesListView: React.FC<Props> = ({
                                 properties={properties}
                                 editIssue={() => openCreateIssueModal(issue, "edit")}
                                 removeIssue={() => removeIssueFromCycle(issue.bridge ?? "")}
+                                userAuth={userAuth}
                               />
                             );
                           })
diff --git a/apps/app/components/project/issues/BoardView/index.tsx b/apps/app/components/project/issues/BoardView/index.tsx
index b1936192f..71d5b3f3d 100644
--- a/apps/app/components/project/issues/BoardView/index.tsx
+++ b/apps/app/components/project/issues/BoardView/index.tsx
@@ -21,17 +21,17 @@ import ConfirmIssueDeletion from "components/project/issues/confirm-issue-deleti
 // ui
 import { Spinner } from "components/ui";
 // types
-import type { IState, IIssue, IssueResponse } from "types";
+import type { IState, IIssue, IssueResponse, UserAuth } from "types";
 // fetch-keys
 import { STATE_LIST, PROJECT_ISSUES_LIST, PROJECT_MEMBERS } from "constants/fetch-keys";
 
 type Props = {
   issues: IIssue[];
   handleDeleteIssue: React.Dispatch<React.SetStateAction<string | undefined>>;
-  partialUpdateIssue: (formData: Partial<IIssue>, issueId: string) => void;
+  userAuth: UserAuth;
 };
 
-const BoardView: React.FC<Props> = ({ issues, handleDeleteIssue, partialUpdateIssue }) => {
+const BoardView: React.FC<Props> = ({ issues, handleDeleteIssue, userAuth }) => {
   const [createIssueModal, setCreateIssueModal] = useState(false);
   const [isIssueDeletionOpen, setIsIssueDeletionOpen] = useState(false);
   const [issueDeletionData, setIssueDeletionData] = useState<IIssue | undefined>();
@@ -238,7 +238,7 @@ const BoardView: React.FC<Props> = ({ issues, handleDeleteIssue, partialUpdateIs
                               : "#000000"
                           }
                           handleDeleteIssue={handleDeleteIssue}
-                          partialUpdateIssue={partialUpdateIssue}
+                          userAuth={userAuth}
                         />
                       ))}
                     </div>
diff --git a/apps/app/components/project/issues/BoardView/single-board.tsx b/apps/app/components/project/issues/BoardView/single-board.tsx
index 68c4e640a..8630f223c 100644
--- a/apps/app/components/project/issues/BoardView/single-board.tsx
+++ b/apps/app/components/project/issues/BoardView/single-board.tsx
@@ -15,7 +15,7 @@ import { PlusIcon } from "@heroicons/react/24/outline";
 // services
 import workspaceService from "services/workspace.service";
 // types
-import { IIssue, Properties, NestedKeyOf, IWorkspaceMember } from "types";
+import { IIssue, Properties, NestedKeyOf, IWorkspaceMember, UserAuth } from "types";
 // fetch-keys
 import { WORKSPACE_MEMBERS } from "constants/fetch-keys";
 
@@ -40,7 +40,7 @@ type Props = {
   stateId: string | null;
   createdBy: string | null;
   handleDeleteIssue: React.Dispatch<React.SetStateAction<string | undefined>>;
-  partialUpdateIssue: (formData: Partial<IIssue>, childIssueId: string) => void;
+  userAuth: UserAuth;
 };
 
 const SingleBoard: React.FC<Props> = ({
@@ -55,7 +55,7 @@ const SingleBoard: React.FC<Props> = ({
   stateId,
   createdBy,
   handleDeleteIssue,
-  partialUpdateIssue,
+  userAuth,
 }) => {
   // Collapse/Expand
   const [isCollapsed, setIsCollapsed] = useState(true);
@@ -145,7 +145,7 @@ const SingleBoard: React.FC<Props> = ({
                               people={people}
                               assignees={assignees}
                               handleDeleteIssue={handleDeleteIssue}
-                              partialUpdateIssue={partialUpdateIssue}
+                              userAuth={userAuth}
                             />
                           </div>
                         )}
diff --git a/apps/app/components/project/issues/list-view/index.tsx b/apps/app/components/project/issues/list-view/index.tsx
index 0db3a1110..102295f84 100644
--- a/apps/app/components/project/issues/list-view/index.tsx
+++ b/apps/app/components/project/issues/list-view/index.tsx
@@ -20,7 +20,7 @@ import SingleListIssue from "components/common/list-view/single-issue";
 // helpers
 import { addSpaceIfCamelCase } from "helpers/string.helper";
 // types
-import { IIssue, IWorkspaceMember } from "types";
+import { IIssue, IWorkspaceMember, UserAuth } from "types";
 // fetch-keys
 import { STATE_LIST, WORKSPACE_MEMBERS } from "constants/fetch-keys";
 
@@ -28,10 +28,10 @@ import { STATE_LIST, WORKSPACE_MEMBERS } from "constants/fetch-keys";
 type Props = {
   issues: IIssue[];
   handleEditIssue: (issue: IIssue) => void;
-  partialUpdateIssue: (formData: Partial<IIssue>, issueId: string) => void;
+  userAuth: UserAuth;
 };
 
-const ListView: React.FC<Props> = ({ issues, handleEditIssue }) => {
+const ListView: React.FC<Props> = ({ issues, handleEditIssue, userAuth }) => {
   const [isCreateIssuesModalOpen, setIsCreateIssuesModalOpen] = useState(false);
   const [preloadedData, setPreloadedData] = useState<
     (Partial<IIssue> & { actionType: "createIssue" | "edit" | "delete" }) | undefined
@@ -130,6 +130,7 @@ const ListView: React.FC<Props> = ({ issues, handleEditIssue }) => {
                                 issue={issue}
                                 properties={properties}
                                 editIssue={() => handleEditIssue(issue)}
+                                userAuth={userAuth}
                               />
                             );
                           })
diff --git a/apps/app/components/project/modules/board-view/index.tsx b/apps/app/components/project/modules/board-view/index.tsx
index 0fc8ae2ec..a8cc1644e 100644
--- a/apps/app/components/project/modules/board-view/index.tsx
+++ b/apps/app/components/project/modules/board-view/index.tsx
@@ -17,7 +17,7 @@ import SingleBoard from "components/project/modules/board-view/single-board";
 // ui
 import { Spinner } from "components/ui";
 // types
-import { IIssue, IProjectMember, ModuleIssueResponse } from "types";
+import { IIssue, IProjectMember, ModuleIssueResponse, UserAuth } from "types";
 // constants
 import { STATE_LIST, MODULE_ISSUES } from "constants/fetch-keys";
 
@@ -26,8 +26,6 @@ type Props = {
   members: IProjectMember[] | undefined;
   openCreateIssueModal: (issue?: IIssue, actionType?: "create" | "edit" | "delete") => void;
   openIssuesListModal: () => void;
-  removeIssueFromModule: (issueId: string) => void;
-  partialUpdateIssue: (formData: Partial<IIssue>, issueId: string) => void;
   handleDeleteIssue: React.Dispatch<React.SetStateAction<string | undefined>>;
   setPreloadedData: React.Dispatch<
     React.SetStateAction<
@@ -37,6 +35,7 @@ type Props = {
       | null
     >
   >;
+  userAuth: UserAuth;
 };
 
 const ModulesBoardView: React.FC<Props> = ({
@@ -44,10 +43,9 @@ const ModulesBoardView: React.FC<Props> = ({
   members,
   openCreateIssueModal,
   openIssuesListModal,
-  removeIssueFromModule,
-  partialUpdateIssue,
   handleDeleteIssue,
   setPreloadedData,
+  userAuth,
 }) => {
   const router = useRouter();
   const { workspaceSlug, projectId, moduleId } = router.query;
@@ -154,10 +152,8 @@ const ModulesBoardView: React.FC<Props> = ({
                           : "#000000"
                       }
                       properties={properties}
-                      removeIssueFromModule={removeIssueFromModule}
                       openIssuesListModal={openIssuesListModal}
                       openCreateIssueModal={openCreateIssueModal}
-                      partialUpdateIssue={partialUpdateIssue}
                       handleDeleteIssue={handleDeleteIssue}
                       setPreloadedData={setPreloadedData}
                       stateId={
@@ -165,6 +161,7 @@ const ModulesBoardView: React.FC<Props> = ({
                           ? states?.find((s) => s.name === singleGroup)?.id ?? null
                           : null
                       }
+                      userAuth={userAuth}
                     />
                   ))}
                 </div>
diff --git a/apps/app/components/project/modules/board-view/single-board.tsx b/apps/app/components/project/modules/board-view/single-board.tsx
index 0ddefee68..f6f1cebb8 100644
--- a/apps/app/components/project/modules/board-view/single-board.tsx
+++ b/apps/app/components/project/modules/board-view/single-board.tsx
@@ -17,7 +17,7 @@ import { CustomMenu } from "components/ui";
 // icons
 import { PlusIcon } from "@heroicons/react/24/outline";
 // types
-import { IIssue, IWorkspaceMember, NestedKeyOf, Properties } from "types";
+import { IIssue, IWorkspaceMember, NestedKeyOf, Properties, UserAuth } from "types";
 // fetch-keys
 import { WORKSPACE_MEMBERS } from "constants/fetch-keys";
 
@@ -32,8 +32,6 @@ type Props = {
   bgColor?: string;
   openCreateIssueModal: (issue?: IIssue, actionType?: "create" | "edit" | "delete") => void;
   openIssuesListModal: () => void;
-  removeIssueFromModule: (bridgeId: string) => void;
-  partialUpdateIssue: (formData: Partial<IIssue>, issueId: string) => void;
   handleDeleteIssue: React.Dispatch<React.SetStateAction<string | undefined>>;
   setPreloadedData: React.Dispatch<
     React.SetStateAction<
@@ -44,6 +42,7 @@ type Props = {
     >
   >;
   stateId: string | null;
+  userAuth: UserAuth;
 };
 
 const SingleModuleBoard: React.FC<Props> = ({
@@ -55,17 +54,16 @@ const SingleModuleBoard: React.FC<Props> = ({
   bgColor,
   openCreateIssueModal,
   openIssuesListModal,
-  removeIssueFromModule,
-  partialUpdateIssue,
   handleDeleteIssue,
   setPreloadedData,
   stateId,
+  userAuth,
 }) => {
   // Collapse/Expand
   const [isCollapsed, setIsCollapsed] = useState(true);
 
   const router = useRouter();
-  const { workspaceSlug } = router.query;
+  const { workspaceSlug, moduleId } = router.query;
 
   if (selectedGroup === "priority")
     groupTitle === "high"
@@ -112,10 +110,10 @@ const SingleModuleBoard: React.FC<Props> = ({
               {...provided.droppableProps}
               ref={provided.innerRef}
             >
-              {groupedByIssues[groupTitle].map((childIssue, index: number) => {
+              {groupedByIssues[groupTitle].map((issue, index: number) => {
                 const assignees = [
-                  ...(childIssue?.assignees_list ?? []),
-                  ...(childIssue?.assignees ?? []),
+                  ...(issue?.assignees_list ?? []),
+                  ...(issue?.assignees ?? []),
                 ]?.map((assignee) => {
                   const tempPerson = people?.find((p) => p.member.id === assignee)?.member;
 
@@ -123,7 +121,7 @@ const SingleModuleBoard: React.FC<Props> = ({
                 });
 
                 return (
-                  <Draggable key={childIssue.id} draggableId={childIssue.id} index={index}>
+                  <Draggable key={issue.id} draggableId={issue.id} index={index}>
                     {(provided, snapshot) => (
                       <div
                         ref={provided.innerRef}
@@ -131,13 +129,15 @@ const SingleModuleBoard: React.FC<Props> = ({
                         {...provided.dragHandleProps}
                       >
                         <SingleIssue
-                          issue={childIssue}
+                          type="module"
+                          typeId={moduleId as string}
+                          issue={issue}
                           properties={properties}
                           snapshot={snapshot}
                           assignees={assignees}
                           people={people}
-                          partialUpdateIssue={partialUpdateIssue}
                           handleDeleteIssue={handleDeleteIssue}
+                          userAuth={userAuth}
                         />
                       </div>
                     )}
diff --git a/apps/app/components/project/modules/list-view/index.tsx b/apps/app/components/project/modules/list-view/index.tsx
index 1148bb0ca..5abbcc31c 100644
--- a/apps/app/components/project/modules/list-view/index.tsx
+++ b/apps/app/components/project/modules/list-view/index.tsx
@@ -18,7 +18,7 @@ import { CustomMenu, Spinner } from "components/ui";
 // helpers
 import { addSpaceIfCamelCase } from "helpers/string.helper";
 // types
-import { IIssue, IWorkspaceMember } from "types";
+import { IIssue, IWorkspaceMember, UserAuth } from "types";
 // fetch-keys
 import { STATE_LIST, WORKSPACE_MEMBERS } from "constants/fetch-keys";
 
@@ -35,6 +35,7 @@ type Props = {
       | null
     >
   >;
+  userAuth: UserAuth;
 };
 
 const ModulesListView: React.FC<Props> = ({
@@ -43,6 +44,7 @@ const ModulesListView: React.FC<Props> = ({
   openIssuesListModal,
   removeIssueFromModule,
   setPreloadedData,
+  userAuth,
 }) => {
   const router = useRouter();
   const { workspaceSlug, projectId, moduleId } = router.query;
@@ -137,6 +139,7 @@ const ModulesListView: React.FC<Props> = ({
                                 properties={properties}
                                 editIssue={() => openCreateIssueModal(issue, "edit")}
                                 removeIssue={() => removeIssueFromModule(issue.bridge ?? "")}
+                                userAuth={userAuth}
                               />
                             );
                           })
diff --git a/apps/app/components/project/send-project-invitation-modal.tsx b/apps/app/components/project/send-project-invitation-modal.tsx
index 2d6e38355..a7908421a 100644
--- a/apps/app/components/project/send-project-invitation-modal.tsx
+++ b/apps/app/components/project/send-project-invitation-modal.tsx
@@ -9,7 +9,7 @@ import { useForm, Controller } from "react-hook-form";
 import { Dialog, Transition, Listbox } from "@headlessui/react";
 // ui
 import { ChevronDownIcon, CheckIcon } from "@heroicons/react/20/solid";
-import { Button, Select, TextArea } from "components/ui";
+import { Button, CustomSelect, Select, TextArea } from "components/ui";
 // hooks
 import useToast from "hooks/use-toast";
 // services
@@ -106,7 +106,7 @@ const SendProjectInvitationModal: React.FC<Props> = ({ isOpen, setIsOpen, member
 
   return (
     <Transition.Root show={isOpen} as={React.Fragment}>
-      <Dialog as="div" className="relative z-10" onClose={handleClose}>
+      <Dialog as="div" className="relative z-20" onClose={handleClose}>
         <Transition.Child
           as={React.Fragment}
           enter="ease-out duration-300"
@@ -119,7 +119,7 @@ const SendProjectInvitationModal: React.FC<Props> = ({ isOpen, setIsOpen, member
           <div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
         </Transition.Child>
 
-        <div className="fixed inset-0 z-10 overflow-y-auto">
+        <div className="fixed inset-0 z-20 overflow-y-auto">
           <div className="flex min-h-full items-center justify-center p-4 text-center sm:p-0">
             <Transition.Child
               as={React.Fragment}
@@ -196,40 +196,17 @@ const SendProjectInvitationModal: React.FC<Props> = ({ isOpen, setIsOpen, member
                                           uninvitedPeople?.map((person) => (
                                             <Listbox.Option
                                               key={person.member.id}
-                                              className={({ active }) =>
-                                                `${
-                                                  active ? "bg-theme text-white" : "text-gray-900"
-                                                } relative cursor-default select-none py-2 pl-3 pr-9 text-left`
+                                              className={({ active, selected }) =>
+                                                `${active ? "bg-indigo-50" : ""} ${
+                                                  selected ? "bg-indigo-50 font-medium" : ""
+                                                } text-gray-900 cursor-default select-none p-2`
                                               }
                                               value={{
                                                 id: person.member.id,
                                                 email: person.member.email,
                                               }}
                                             >
-                                              {({ selected, active }) => (
-                                                <>
-                                                  <span
-                                                    className={`${
-                                                      selected ? "font-semibold" : "font-normal"
-                                                    } block truncate`}
-                                                  >
-                                                    {person.member.email}
-                                                  </span>
-
-                                                  {selected ? (
-                                                    <span
-                                                      className={`absolute inset-y-0 right-0 flex items-center pr-4 ${
-                                                        active ? "text-white" : "text-theme"
-                                                      }`}
-                                                    >
-                                                      <CheckIcon
-                                                        className="h-5 w-5"
-                                                        aria-hidden="true"
-                                                      />
-                                                    </span>
-                                                  ) : null}
-                                                </>
-                                              )}
+                                              {person.member.email}
                                             </Listbox.Option>
                                           ))
                                         )}
@@ -246,22 +223,28 @@ const SendProjectInvitationModal: React.FC<Props> = ({ isOpen, setIsOpen, member
                         />
                       </div>
                       <div>
-                        <div>
-                          <Select
-                            id="role"
-                            label="Role"
-                            name="role"
-                            error={errors.role}
-                            register={register}
-                            validations={{
-                              required: "Role is required",
-                            }}
-                            options={Object.entries(ROLE).map(([key, value]) => ({
-                              value: key,
-                              label: value,
-                            }))}
-                          />
-                        </div>
+                        <h6 className="text-gray-500">Role</h6>
+                        <Controller
+                          name="role"
+                          control={control}
+                          render={({ field }) => (
+                            <CustomSelect
+                              {...field}
+                              label={
+                                <span className="capitalize">
+                                  {field.value ? ROLE[field.value] : "Select role"}
+                                </span>
+                              }
+                              input
+                            >
+                              {Object.entries(ROLE).map(([key, label]) => (
+                                <CustomSelect.Option key={key} value={key}>
+                                  {label}
+                                </CustomSelect.Option>
+                              ))}
+                            </CustomSelect>
+                          )}
+                        />
                       </div>
                       <div>
                         <TextArea
diff --git a/apps/app/components/ui/custom-select/index.tsx b/apps/app/components/ui/custom-select/index.tsx
index e12cd1718..da7644521 100644
--- a/apps/app/components/ui/custom-select/index.tsx
+++ b/apps/app/components/ui/custom-select/index.tsx
@@ -14,6 +14,7 @@ type CustomSelectProps = {
   width?: "auto" | string;
   input?: boolean;
   noChevron?: boolean;
+  disabled?: boolean;
 };
 
 const CustomSelect = ({
@@ -26,11 +27,20 @@ const CustomSelect = ({
   width = "auto",
   input = false,
   noChevron = false,
+  disabled = false,
 }: CustomSelectProps) => (
-  <Listbox as="div" value={value} onChange={onChange} className="relative flex-shrink-0 text-left">
+  <Listbox
+    as="div"
+    value={value}
+    onChange={onChange}
+    className="relative flex-shrink-0 text-left"
+    disabled={disabled}
+  >
     <div>
       <Listbox.Button
-        className={`flex w-full cursor-pointer items-center justify-between gap-1 rounded-md border shadow-sm duration-300 hover:bg-gray-100 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 ${
+        className={`flex w-full ${
+          disabled ? "cursor-not-allowed" : "cursor-pointer"
+        } items-center justify-between gap-1 rounded-md border shadow-sm duration-300 hover:bg-gray-100 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 ${
           input ? "border-gray-300 px-3 py-2 text-sm" : "px-2 py-1 text-xs"
         } ${
           textAlignment === "right"
diff --git a/apps/app/components/workspace/confirm-workspace-deletion.tsx b/apps/app/components/workspace/confirm-workspace-deletion.tsx
index fb0882074..f8a407615 100644
--- a/apps/app/components/workspace/confirm-workspace-deletion.tsx
+++ b/apps/app/components/workspace/confirm-workspace-deletion.tsx
@@ -4,19 +4,20 @@ import { useRouter } from "next/router";
 
 import { mutate } from "swr";
 
+// headless ui
 import { Dialog, Transition } from "@headlessui/react";
-// constants
-import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
-import type { IWorkspace } from "types";
-import { USER_WORKSPACES } from "constants/fetch-keys";
 // services
 import workspaceService from "services/workspace.service";
 // hooks
 import useToast from "hooks/use-toast";
 // icons
+import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
 // ui
 import { Button, Input } from "components/ui";
 // types
+import type { IWorkspace } from "types";
+// fetch-keys
+import { USER_WORKSPACES } from "constants/fetch-keys";
 
 type Props = {
   isOpen: boolean;
@@ -78,7 +79,7 @@ const ConfirmWorkspaceDeletion: React.FC<Props> = ({ isOpen, data, onClose }) =>
     <Transition.Root show={isOpen} as={React.Fragment}>
       <Dialog
         as="div"
-        className="relative z-10"
+        className="relative z-20"
         initialFocus={cancelButtonRef}
         onClose={handleClose}
       >
@@ -94,7 +95,7 @@ const ConfirmWorkspaceDeletion: React.FC<Props> = ({ isOpen, data, onClose }) =>
           <div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
         </Transition.Child>
 
-        <div className="fixed inset-0 z-10 overflow-y-auto">
+        <div className="fixed inset-0 z-20 overflow-y-auto">
           <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
             <Transition.Child
               as={React.Fragment}
diff --git a/apps/app/components/workspace/confirm-workspace-member-remove.tsx b/apps/app/components/workspace/confirm-workspace-member-remove.tsx
index a0ca8c3d3..725a52572 100644
--- a/apps/app/components/workspace/confirm-workspace-member-remove.tsx
+++ b/apps/app/components/workspace/confirm-workspace-member-remove.tsx
@@ -33,7 +33,7 @@ const ConfirmWorkspaceMemberRemove: React.FC<Props> = ({ isOpen, onClose, data,
     <Transition.Root show={isOpen} as={React.Fragment}>
       <Dialog
         as="div"
-        className="relative z-10"
+        className="relative z-20"
         initialFocus={cancelButtonRef}
         onClose={handleClose}
       >
@@ -49,7 +49,7 @@ const ConfirmWorkspaceMemberRemove: React.FC<Props> = ({ isOpen, onClose, data,
           <div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
         </Transition.Child>
 
-        <div className="fixed inset-0 z-10 overflow-y-auto">
+        <div className="fixed inset-0 z-20 overflow-y-auto">
           <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
             <Transition.Child
               as={React.Fragment}
diff --git a/apps/app/components/workspace/send-workspace-invitation-modal.tsx b/apps/app/components/workspace/send-workspace-invitation-modal.tsx
index c860af724..0e0240987 100644
--- a/apps/app/components/workspace/send-workspace-invitation-modal.tsx
+++ b/apps/app/components/workspace/send-workspace-invitation-modal.tsx
@@ -79,7 +79,7 @@ const SendWorkspaceInvitationModal: React.FC<Props> = ({
 
   return (
     <Transition.Root show={isOpen} as={React.Fragment}>
-      <Dialog as="div" className="relative z-10" onClose={handleClose}>
+      <Dialog as="div" className="relative z-20" onClose={handleClose}>
         <Transition.Child
           as={React.Fragment}
           enter="ease-out duration-300"
@@ -92,7 +92,7 @@ const SendWorkspaceInvitationModal: React.FC<Props> = ({
           <div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
         </Transition.Child>
 
-        <div className="fixed inset-0 z-10 overflow-y-auto">
+        <div className="fixed inset-0 z-20 overflow-y-auto">
           <div className="flex min-h-full items-center justify-center p-4 text-center sm:p-0">
             <Transition.Child
               as={React.Fragment}
diff --git a/apps/app/components/workspace/SingleInvitation.tsx b/apps/app/components/workspace/single-invitation.tsx
similarity index 100%
rename from apps/app/components/workspace/SingleInvitation.tsx
rename to apps/app/components/workspace/single-invitation.tsx
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx
index ff0ee5b02..6af66d85f 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx
@@ -4,6 +4,8 @@ import { useRouter } from "next/router";
 
 import useSWR, { mutate } from "swr";
 
+// lib
+import { requiredAdmin, requiredAuth } from "lib/auth";
 // layouts
 import AppLayout from "layouts/app-layout";
 // contexts
@@ -32,7 +34,8 @@ import { CustomMenu, EmptySpace, EmptySpaceItem, Spinner } from "components/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 // icons
 // types
-import { CycleIssueResponse, IIssue, SelectIssue } from "types";
+import { CycleIssueResponse, IIssue, SelectIssue, UserAuth } from "types";
+import { NextPageContext } from "next";
 // fetch-keys
 import {
   CYCLE_ISSUES,
@@ -42,7 +45,7 @@ import {
   PROJECT_DETAILS,
 } from "constants/fetch-keys";
 
-const SingleCycle: React.FC = () => {
+const SingleCycle: React.FC<UserAuth> = (props) => {
   const [isIssueModalOpen, setIsIssueModalOpen] = useState(false);
   const [selectedIssues, setSelectedIssues] = useState<SelectIssue>();
   const [cycleIssuesListModal, setCycleIssuesListModal] = useState(false);
@@ -109,18 +112,6 @@ const SingleCycle: React.FC = () => {
     }
   );
 
-  const partialUpdateIssue = (formData: Partial<IIssue>, issueId: string) => {
-    if (!workspaceSlug || !projectId) return;
-    issuesServices
-      .patchIssue(workspaceSlug as string, projectId as string, issueId, formData)
-      .then(() => {
-        mutate(CYCLE_ISSUES(cycleId as string));
-      })
-      .catch((error) => {
-        console.log(error);
-      });
-  };
-
   const openCreateIssueModal = (
     issue?: IIssue,
     actionType: "create" | "edit" | "delete" = "create"
@@ -256,16 +247,16 @@ const SingleCycle: React.FC = () => {
                 openIssuesListModal={openIssuesListModal}
                 removeIssueFromCycle={removeIssueFromCycle}
                 setPreloadedData={setPreloadedData}
+                userAuth={props}
               />
               <CyclesBoardView
                 issues={cycleIssuesArray ?? []}
-                removeIssueFromCycle={removeIssueFromCycle}
                 members={members}
                 openCreateIssueModal={openCreateIssueModal}
                 openIssuesListModal={openIssuesListModal}
                 handleDeleteIssue={setDeleteIssue}
-                partialUpdateIssue={partialUpdateIssue}
                 setPreloadedData={setPreloadedData}
+                userAuth={props}
               />
             </div>
           ) : (
@@ -309,4 +300,32 @@ const SingleCycle: React.FC = () => {
   );
 };
 
+export const getServerSideProps = async (ctx: NextPageContext) => {
+  const user = await requiredAuth(ctx.req?.headers.cookie);
+  const redirectAfterSignIn = ctx.req?.url;
+
+  if (!user) {
+    return {
+      redirect: {
+        destination: `/signin?next=${redirectAfterSignIn}`,
+        permanent: false,
+      },
+    };
+  }
+
+  const projectId = ctx.query.projectId as string;
+  const workspaceSlug = ctx.query.workspaceSlug as string;
+
+  const memberDetail = await requiredAdmin(workspaceSlug, projectId, ctx.req?.headers.cookie);
+
+  return {
+    props: {
+      isOwner: memberDetail?.role === 20,
+      isMember: memberDetail?.role === 15,
+      isViewer: memberDetail?.role === 10,
+      isGuest: memberDetail?.role === 5,
+    },
+  };
+};
+
 export default SingleCycle;
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/index.tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/index.tsx
index b34136ed1..4348ebb63 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/index.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/index.tsx
@@ -4,7 +4,7 @@ import useSWR, { mutate } from "swr";
 import { RectangleStackIcon } from "@heroicons/react/24/outline";
 import { PlusIcon } from "@heroicons/react/20/solid";
 // lib
-import { requiredAuth } from "lib/auth";
+import { requiredAdmin, requiredAuth } from "lib/auth";
 // services
 import issuesServices from "services/issues.service";
 import projectService from "services/project.service";
@@ -22,12 +22,12 @@ import View from "components/core/view";
 import { Spinner, EmptySpace, EmptySpaceItem, HeaderButton } from "components/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 // types
-import type { IIssue, IssueResponse } from "types";
+import type { IIssue, IssueResponse, UserAuth } from "types";
 import type { NextPage, NextPageContext } from "next";
 // fetch-keys
 import { PROJECT_DETAILS, PROJECT_ISSUES_LIST } from "constants/fetch-keys";
 
-const ProjectIssues: NextPage = () => {
+const ProjectIssues: NextPage<UserAuth> = (props) => {
   const [isOpen, setIsOpen] = useState(false);
   const [selectedIssue, setSelectedIssue] = useState<
     (IIssue & { actionType: "edit" | "delete" }) | undefined
@@ -63,26 +63,6 @@ const ProjectIssues: NextPage = () => {
     }
   }, [isOpen]);
 
-  const partialUpdateIssue = (formData: Partial<IIssue>, issueId: string) => {
-    if (!workspaceSlug || !projectId) return;
-    issuesServices
-      .patchIssue(workspaceSlug as string, projectId as string, issueId, formData)
-      .then((response) => {
-        mutate<IssueResponse>(
-          PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string),
-          (prevData) => ({
-            ...(prevData as IssueResponse),
-            results:
-              prevData?.results.map((issue) => (issue.id === response.id ? response : issue)) ?? [],
-          }),
-          false
-        );
-      })
-      .catch((error) => {
-        console.log(error);
-      });
-  };
-
   const handleEditIssue = (issue: IIssue) => {
     setIsOpen(true);
     setSelectedIssue({ ...issue, actionType: "edit" });
@@ -134,12 +114,12 @@ const ProjectIssues: NextPage = () => {
             <ListView
               issues={projectIssues?.results.filter((p) => p.parent === null) ?? []}
               handleEditIssue={handleEditIssue}
-              partialUpdateIssue={partialUpdateIssue}
+              userAuth={props}
             />
             <BoardView
               issues={projectIssues?.results.filter((p) => p.parent === null) ?? []}
               handleDeleteIssue={setDeleteIssue}
-              partialUpdateIssue={partialUpdateIssue}
+              userAuth={props}
             />
           </>
         ) : (
@@ -170,7 +150,6 @@ const ProjectIssues: NextPage = () => {
 
 export const getServerSideProps = async (ctx: NextPageContext) => {
   const user = await requiredAuth(ctx.req?.headers.cookie);
-
   const redirectAfterSignIn = ctx.req?.url;
 
   if (!user) {
@@ -182,9 +161,17 @@ export const getServerSideProps = async (ctx: NextPageContext) => {
     };
   }
 
+  const projectId = ctx.query.projectId as string;
+  const workspaceSlug = ctx.query.workspaceSlug as string;
+
+  const memberDetail = await requiredAdmin(workspaceSlug, projectId, ctx.req?.headers.cookie);
+
   return {
     props: {
-      user,
+      isOwner: memberDetail?.role === 20,
+      isMember: memberDetail?.role === 15,
+      isViewer: memberDetail?.role === 10,
+      isGuest: memberDetail?.role === 5,
     },
   };
 };
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/modules/[moduleId].tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/modules/[moduleId].tsx
index 3417f4d57..98cd911f4 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/modules/[moduleId].tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/modules/[moduleId].tsx
@@ -3,6 +3,9 @@ import React, { useState } from "react";
 import { useRouter } from "next/router";
 
 import useSWR, { mutate } from "swr";
+
+// lib
+import { requiredAdmin, requiredAuth } from "lib/auth";
 // services
 import modulesService from "services/modules.service";
 import projectService from "services/project.service";
@@ -32,7 +35,15 @@ import {
   RectangleStackIcon,
 } from "@heroicons/react/24/outline";
 // types
-import { IIssue, IModule, ModuleIssueResponse, SelectIssue, SelectModuleType } from "types";
+import {
+  IIssue,
+  IModule,
+  ModuleIssueResponse,
+  SelectIssue,
+  SelectModuleType,
+  UserAuth,
+} from "types";
+import { NextPageContext } from "next";
 // fetch-keys
 import {
   MODULE_DETAIL,
@@ -42,7 +53,7 @@ import {
   PROJECT_MEMBERS,
 } from "constants/fetch-keys";
 
-const SingleModule = () => {
+const SingleModule: React.FC<UserAuth> = (props) => {
   const [moduleSidebar, setModuleSidebar] = useState(true);
   const [moduleDeleteModal, setModuleDeleteModal] = useState(false);
   const [selectedIssues, setSelectedIssues] = useState<SelectIssue>(null);
@@ -128,18 +139,6 @@ const SingleModule = () => {
     }
   };
 
-  const partialUpdateIssue = (formData: Partial<IIssue>, issueId: string) => {
-    if (!workspaceSlug || !projectId) return;
-    issuesService
-      .patchIssue(workspaceSlug as string, projectId as string, issueId, formData)
-      .then(() => {
-        mutate(MODULE_ISSUES(moduleId as string));
-      })
-      .catch((error) => {
-        console.log(error);
-      });
-  };
-
   const openCreateIssueModal = (
     issue?: IIssue,
     actionType: "create" | "edit" | "delete" = "create"
@@ -279,16 +278,16 @@ const SingleModule = () => {
                 openIssuesListModal={openIssuesListModal}
                 removeIssueFromModule={removeIssueFromModule}
                 setPreloadedData={setPreloadedData}
+                userAuth={props}
               />
               <ModulesBoardView
                 issues={moduleIssuesArray ?? []}
-                removeIssueFromModule={removeIssueFromModule}
                 members={members}
                 openCreateIssueModal={openCreateIssueModal}
                 openIssuesListModal={openIssuesListModal}
                 handleDeleteIssue={setDeleteIssue}
-                partialUpdateIssue={partialUpdateIssue}
                 setPreloadedData={setPreloadedData}
+                userAuth={props}
               />
             </div>
           ) : (
@@ -333,4 +332,32 @@ const SingleModule = () => {
   );
 };
 
+export const getServerSideProps = async (ctx: NextPageContext) => {
+  const user = await requiredAuth(ctx.req?.headers.cookie);
+  const redirectAfterSignIn = ctx.req?.url;
+
+  if (!user) {
+    return {
+      redirect: {
+        destination: `/signin?next=${redirectAfterSignIn}`,
+        permanent: false,
+      },
+    };
+  }
+
+  const projectId = ctx.query.projectId as string;
+  const workspaceSlug = ctx.query.workspaceSlug as string;
+
+  const memberDetail = await requiredAdmin(workspaceSlug, projectId, ctx.req?.headers.cookie);
+
+  return {
+    props: {
+      isOwner: memberDetail?.role === 20,
+      isMember: memberDetail?.role === 15,
+      isViewer: memberDetail?.role === 10,
+      isGuest: memberDetail?.role === 5,
+    },
+  };
+};
+
 export default SingleModule;
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/control.tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/control.tsx
index 1f02b9daf..4caba98a6 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/control.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/control.tsx
@@ -6,7 +6,6 @@ import Image from "next/image";
 import useSWR, { mutate } from "swr";
 
 import { Controller, useForm } from "react-hook-form";
-import type { NextPageContext, NextPage } from "next";
 // lib
 import { requiredAdmin } from "lib/auth";
 // layouts
@@ -21,6 +20,7 @@ import { Button, CustomSelect, Loader } from "components/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 // types
 import { IProject, IWorkspace } from "types";
+import type { NextPageContext, NextPage } from "next";
 // fetch-keys
 import { PROJECTS_LIST, PROJECT_DETAILS, WORKSPACE_MEMBERS } from "constants/fetch-keys";
 
@@ -88,24 +88,9 @@ const ControlSettings: NextPage<TControlSettingsProps> = (props) => {
     await projectService
       .updateProject(workspaceSlug as string, projectId as string, payload)
       .then((res) => {
-        mutate<IProject>(
-          PROJECT_DETAILS(projectId as string),
-          (prevData) => ({ ...prevData, ...res }),
-          false
-        );
-        mutate<IProject[]>(
-          PROJECTS_LIST(workspaceSlug as string),
-          (prevData) => {
-            const newData = prevData?.map((item) => {
-              if (item.id === res.id) {
-                return res;
-              }
-              return item;
-            });
-            return newData;
-          },
-          false
-        );
+        mutate(PROJECT_DETAILS(projectId as string));
+        mutate(PROJECTS_LIST(workspaceSlug as string));
+
         setToastAlert({
           title: "Success",
           type: "success",
diff --git a/apps/app/pages/invitations/index.tsx b/apps/app/pages/invitations/index.tsx
index 10f5c61e5..42e52402c 100644
--- a/apps/app/pages/invitations/index.tsx
+++ b/apps/app/pages/invitations/index.tsx
@@ -5,9 +5,6 @@ import useSWR from "swr";
 
 // icons
 import { CubeIcon, PlusIcon } from "@heroicons/react/24/outline";
-// types
-import type { NextPage, NextPageContext } from "next";
-import type { IWorkspaceMemberInvitation } from "types";
 // services
 import workspaceService from "services/workspace.service";
 // hooks
@@ -16,9 +13,12 @@ import { requiredAuth } from "lib/auth";
 // layouts
 import DefaultLayout from "layouts/default-layout";
 // components
-import SingleInvitation from "components/workspace/SingleInvitation";
+import SingleInvitation from "components/workspace/single-invitation";
 // ui
 import { Button, Spinner, EmptySpace, EmptySpaceItem } from "components/ui";
+// types
+import type { NextPage, NextPageContext } from "next";
+import type { IWorkspaceMemberInvitation } from "types";
 
 const OnBoard: NextPage = () => {
   const [invitationsRespond, setInvitationsRespond] = useState<string[]>([]);
diff --git a/apps/app/types/users.d.ts b/apps/app/types/users.d.ts
index 346cb86a5..0d4a9ead4 100644
--- a/apps/app/types/users.d.ts
+++ b/apps/app/types/users.d.ts
@@ -34,3 +34,10 @@ export interface IUserLite {
   avatar: string;
   created_at: Date;
 }
+
+export type UserAuth = {
+  isMember: boolean;
+  isOwner: boolean;
+  isViewer: boolean;
+  isGuest: boolean;
+};

From 30c59545f06e4361b7962394bda444a1df1d3ea5 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <anmolsinghbhatia1001@gmail.com>
Date: Fri, 27 Jan 2023 18:21:51 +0530
Subject: [PATCH 02/15] feat: tooltip component added

---
 apps/app/components/ui/tooltip/index.tsx | 94 ++++++++++++++++--------
 1 file changed, 64 insertions(+), 30 deletions(-)

diff --git a/apps/app/components/ui/tooltip/index.tsx b/apps/app/components/ui/tooltip/index.tsx
index 065989b00..d49013a8b 100644
--- a/apps/app/components/ui/tooltip/index.tsx
+++ b/apps/app/components/ui/tooltip/index.tsx
@@ -1,39 +1,73 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 
-type Props = {
+export type Props = {
+  direction?: "top" | "right" | "bottom" | "left";
+  content: string | React.ReactNode;
+  margin?: string;
   children: React.ReactNode;
-  content: React.ReactNode;
-  position?: "top" | "bottom" | "left" | "right";
+  customStyle?: string;
 };
 
-const Tooltip: React.FC<Props> = ({ children, content, position = "top" }) => (
-    <div className="relative group">
-      <div
-        className={`fixed pointer-events-none transition-opacity opacity-0 group-hover:opacity-100 bg-black text-white px-3 py-1 rounded ${
-          position === "right"
-            ? "left-14"
-            : position === "left"
-            ? "right-14"
-            : position === "top"
-            ? "bottom-14"
-            : "top-14"
-        }`}
-      >
-        <p className="truncate text-xs">{content}</p>
-        <span
-          className={`absolute w-2 h-2 bg-black ${
-            position === "top"
-              ? "top-full left-1/2 transform -translate-y-1/2 -translate-x-1/2 rotate-45"
-              : position === "bottom"
-              ? "bottom-full left-1/2 transform translate-y-1/2 -translate-x-1/2 rotate-45"
-              : position === "left"
-              ? "left-full top-1/2 transform translate-x-1/2 -translate-y-1/2 rotate-45"
-              : "right-full top-1/2 transform translate-x-1/2 -translate-y-1/2 rotate-45"
-          }`}
-         />
-      </div>
+const Tooltip: React.FC<Props> = ({
+  content,
+  direction = "top",
+  children,
+  margin = "24px",
+  customStyle,
+}) => {
+  const [active, setActive] = useState(false);
+  const [styleConfig, setStyleConfig] = useState("top-[calc(-100%-24px)]");
+  let timeout: any;
+
+  const showToolTip = () => {
+    timeout = setTimeout(() => {
+      setActive(true);
+    }, 300);
+  };
+
+  const hideToolTip = () => {
+    clearInterval(timeout);
+    setActive(false);
+  };
+
+  const tooltipStyles = {
+    top: `
+    left-[50%] translate-x-[-50%] before:contents-[""] before:border-solid 
+    before:border-transparent before:h-0 before:w-0 before:absolute before:pointer-events-none 
+    before:border-[6px] before:left-[50%] before:ml-[calc(6px*-1)] before:top-full before:border-t-black`,
+
+    right: `
+    right-[-100%] top-[50%]
+    translate-x-0 translate-y-[-50%] `,
+
+    bottom: `
+    left-[50%] translate-x-[-50%] before:contents-[""] before:border-solid 
+    before:border-transparent before:h-0 before:w-0 before:absolute before:pointer-events-none 
+    before:border-[6px] before:left-[50%] before:ml-[calc(6px*-1)] before:bottom-full before:border-b-black`,
+
+    left: `
+    left-[-100%] top-[50%] 
+    translate-x-0 translate-y-[-50%] `,
+  };
+
+  useEffect(() => {
+    const styleConfig = direction + "-[calc(-100%-" + margin + ")]";
+    setStyleConfig(styleConfig);
+  }, [margin, direction]);
+
+  return (
+    <div className="inline-block relative" onMouseEnter={showToolTip} onMouseLeave={hideToolTip}>
       {children}
+      {active && (
+        <div
+          className={`absolute p-[6px] text-xs z-20 rounded leading-1 text-white bg-black text-center w-max max-w-[300px] 
+          ${tooltipStyles[direction]} ${customStyle ? customStyle : ""} ${styleConfig}`}
+        >
+          {content}
+        </div>
+      )}
     </div>
   );
+};
 
 export default Tooltip;

From 2cb708c63ba8668796c3c55d4da3f62893aeb1df Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com>
Date: Sun, 29 Jan 2023 12:25:20 +0530
Subject: [PATCH 03/15] fix: minor ui fixes (#203)

* feat: added user auth

* fix: minor ui fixes

* refactor: removed unnecessary functions

* fix: build errors
---
 .../common/board-view/single-issue.tsx        |   5 +
 .../common/existing-issues-list-modal.tsx     |   7 +
 .../common/list-view/single-issue.tsx         |   9 +-
 apps/app/components/issues/modal.tsx          |   2 +-
 .../project/cycles/confirm-cycle-deletion.tsx |  20 ++-
 .../cycles/create-update-cycle-modal.tsx      |  30 ++--
 .../BoardView/state/confirm-state-delete.tsx  |  20 ++-
 .../state/create-update-state-inline.tsx      |  40 +++--
 .../project/issues/confirm-issue-deletion.tsx |  11 +-
 .../issues/issue-detail/add-as-sub-issue.tsx  |  25 +--
 .../modules/confirm-module-deletion.tsx       |  22 ++-
 .../create-update-module-modal/index.tsx      |  25 ++-
 .../app/components/rich-text-editor/index.tsx |   2 +-
 apps/app/constants/fetch-keys.ts              |   2 +-
 apps/app/hooks/use-issue-properties.tsx       |   4 +-
 apps/app/hooks/use-local-storage.tsx          |  39 -----
 apps/app/hooks/use-my-issues-filter.tsx       |   2 +-
 .../[workspaceSlug]/me/workspace-invites.tsx  | 156 ------------------
 .../projects/[projectId]/issues/[issueId].tsx | 105 ++++++------
 .../projects/[projectId]/settings/states.tsx  |  28 ++--
 apps/app/services/workspace.service.ts        |  11 --
 apps/app/types/issues.d.ts                    |  62 +++----
 22 files changed, 255 insertions(+), 372 deletions(-)
 delete mode 100644 apps/app/hooks/use-local-storage.tsx
 delete mode 100644 apps/app/pages/[workspaceSlug]/me/workspace-invites.tsx

diff --git a/apps/app/components/common/board-view/single-issue.tsx b/apps/app/components/common/board-view/single-issue.tsx
index 445982035..7dd333e3f 100644
--- a/apps/app/components/common/board-view/single-issue.tsx
+++ b/apps/app/components/common/board-view/single-issue.tsx
@@ -249,6 +249,11 @@ const SingleBoardIssue: React.FC<Props> = ({
               )}
             </Listbox>
           )}
+          {/* {properties.cycle && !typeId && (
+            <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.issue_cycle ? issue.issue_cycle.cycle_detail.name : "None"}
+            </div>
+          )} */}
           {properties.due_date && (
             <div
               className={`group 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 ${
diff --git a/apps/app/components/common/existing-issues-list-modal.tsx b/apps/app/components/common/existing-issues-list-modal.tsx
index e4ffa9896..c87508e55 100644
--- a/apps/app/components/common/existing-issues-list-modal.tsx
+++ b/apps/app/components/common/existing-issues-list-modal.tsx
@@ -77,11 +77,18 @@ const ExistingIssuesListModal: React.FC<Props> = ({
         type: "error",
         message: "Please select atleast one issue",
       });
+
       return;
     }
 
     await handleOnSubmit(data);
     handleClose();
+
+    setToastAlert({
+      title: "Success",
+      type: "success",
+      message: `Issue${data.issues.length > 1 ? "s" : ""} added successfully`,
+    });
   };
 
   const filteredIssues: IIssue[] =
diff --git a/apps/app/components/common/list-view/single-issue.tsx b/apps/app/components/common/list-view/single-issue.tsx
index 99b30d149..3f144568a 100644
--- a/apps/app/components/common/list-view/single-issue.tsx
+++ b/apps/app/components/common/list-view/single-issue.tsx
@@ -234,9 +234,14 @@ const SingleListIssue: React.FC<Props> = ({
               ))}
             </CustomSelect>
           )}
+          {/* {properties.cycle && !typeId && (
+            <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.issue_cycle ? issue.issue_cycle.cycle_detail.name : "None"}
+            </div>
+          )} */}
           {properties.due_date && (
             <div
-              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 ${
+              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 ${
                 issue.target_date === null
                   ? ""
                   : issue.target_date < new Date().toISOString()
@@ -261,7 +266,7 @@ const SingleListIssue: React.FC<Props> = ({
             </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">
+            <div className="flex flex-shrink-0 items-center gap-1 rounded border px-2 py-1 text-xs shadow-sm">
               {issue.sub_issues_count} {issue.sub_issues_count === 1 ? "sub-issue" : "sub-issues"}
             </div>
           )}
diff --git a/apps/app/components/issues/modal.tsx b/apps/app/components/issues/modal.tsx
index 8a32f4cbb..3f7555435 100644
--- a/apps/app/components/issues/modal.tsx
+++ b/apps/app/components/issues/modal.tsx
@@ -144,7 +144,7 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = ({
         setToastAlert({
           title: "Success",
           type: "success",
-          message: `Issue ${data ? "updated" : "created"} successfully`,
+          message: "Issue created successfully",
         });
 
         if (payload.assignees_list?.some((assignee) => assignee === user?.id)) mutate(USER_ISSUE);
diff --git a/apps/app/components/project/cycles/confirm-cycle-deletion.tsx b/apps/app/components/project/cycles/confirm-cycle-deletion.tsx
index 977dc8ac0..ab35d343b 100644
--- a/apps/app/components/project/cycles/confirm-cycle-deletion.tsx
+++ b/apps/app/components/project/cycles/confirm-cycle-deletion.tsx
@@ -5,12 +5,14 @@ import { useRouter } from "next/router";
 import { mutate } from "swr";
 // headless ui
 import { Dialog, Transition } from "@headlessui/react";
-import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
 // services
 import cycleService from "services/cycles.service";
+// hooks
+import useToast from "hooks/use-toast";
 // ui
 import { Button } from "components/ui";
 // icons
+import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
 // types
 import type { ICycle } from "types";
 type TConfirmCycleDeletionProps = {
@@ -21,15 +23,19 @@ type TConfirmCycleDeletionProps = {
 // fetch-keys
 import { CYCLE_LIST } from "constants/fetch-keys";
 
-const ConfirmCycleDeletion: React.FC<TConfirmCycleDeletionProps> = (props) => {
-  const { isOpen, setIsOpen, data } = props;
-
+const ConfirmCycleDeletion: React.FC<TConfirmCycleDeletionProps> = ({
+  isOpen,
+  setIsOpen,
+  data,
+}) => {
   const cancelButtonRef = useRef(null);
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
 
   const router = useRouter();
   const { workspaceSlug } = router.query;
 
+  const { setToastAlert } = useToast();
+
   useEffect(() => {
     data && setIsOpen(true);
   }, [data, setIsOpen]);
@@ -51,6 +57,12 @@ const ConfirmCycleDeletion: React.FC<TConfirmCycleDeletionProps> = (props) => {
           false
         );
         handleClose();
+
+        setToastAlert({
+          title: "Success",
+          type: "success",
+          message: "Cycle deleted successfully",
+        });
       })
       .catch((error) => {
         console.log(error);
diff --git a/apps/app/components/project/cycles/create-update-cycle-modal.tsx b/apps/app/components/project/cycles/create-update-cycle-modal.tsx
index 7d36bf6ca..9695adea1 100644
--- a/apps/app/components/project/cycles/create-update-cycle-modal.tsx
+++ b/apps/app/components/project/cycles/create-update-cycle-modal.tsx
@@ -9,6 +9,8 @@ import { Controller, useForm } from "react-hook-form";
 import { Dialog, Transition } from "@headlessui/react";
 // services
 import cycleService from "services/cycles.service";
+// hooks
+import useToast from "hooks/use-toast";
 // ui
 import { Button, Input, TextArea, CustomSelect } from "components/ui";
 // common
@@ -37,6 +39,8 @@ const CreateUpdateCycleModal: React.FC<Props> = ({ isOpen, setIsOpen, data, proj
   const router = useRouter();
   const { workspaceSlug } = router.query;
 
+  const { setToastAlert } = useToast();
+
   const {
     register,
     formState: { errors, isSubmitting },
@@ -69,7 +73,13 @@ const CreateUpdateCycleModal: React.FC<Props> = ({ isOpen, setIsOpen, data, proj
         .createCycle(workspaceSlug as string, projectId, payload)
         .then((res) => {
           mutate<ICycle[]>(CYCLE_LIST(projectId), (prevData) => [res, ...(prevData ?? [])], false);
+
           handleClose();
+          setToastAlert({
+            title: "Success",
+            type: "success",
+            message: "Cycle created successfully",
+          });
         })
         .catch((err) => {
           Object.keys(err).map((key) => {
@@ -82,20 +92,14 @@ const CreateUpdateCycleModal: React.FC<Props> = ({ isOpen, setIsOpen, data, proj
       await cycleService
         .updateCycle(workspaceSlug as string, projectId, data.id, payload)
         .then((res) => {
-          mutate<ICycle[]>(
-            CYCLE_LIST(projectId),
-            (prevData) => {
-              const newData = prevData?.map((item) => {
-                if (item.id === res.id) return res;
-
-                return item;
-              });
-
-              return newData;
-            },
-            false
-          );
+          mutate(CYCLE_LIST(projectId));
           handleClose();
+
+          setToastAlert({
+            title: "Success",
+            type: "success",
+            message: "Cycle updated successfully",
+          });
         })
         .catch((err) => {
           Object.keys(err).map((key) => {
diff --git a/apps/app/components/project/issues/BoardView/state/confirm-state-delete.tsx b/apps/app/components/project/issues/BoardView/state/confirm-state-delete.tsx
index 3cf8e4075..ecf3e7874 100644
--- a/apps/app/components/project/issues/BoardView/state/confirm-state-delete.tsx
+++ b/apps/app/components/project/issues/BoardView/state/confirm-state-delete.tsx
@@ -8,16 +8,18 @@ import useSWR, { mutate } from "swr";
 import { Dialog, Transition } from "@headlessui/react";
 // icons
 import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
-// types
-import type { IState } from "types";
 // services
 import stateServices from "services/state.service";
 import issuesServices from "services/issues.service";
+// hooks
+import useToast from "hooks/use-toast";
 // ui
 import { Button } from "components/ui";
 // helpers
 import { groupBy } from "helpers/array.helper";
-// fetch api
+// types
+import type { IState } from "types";
+// fetch-keys
 import { STATE_LIST, PROJECT_ISSUES_LIST } from "constants/fetch-keys";
 
 type Props = {
@@ -33,6 +35,8 @@ const ConfirmStateDeletion: React.FC<Props> = ({ isOpen, onClose, data }) => {
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
 
+  const { setToastAlert } = useToast();
+
   const { data: issues } = useSWR(
     workspaceSlug && projectId
       ? PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string)
@@ -61,6 +65,12 @@ const ConfirmStateDeletion: React.FC<Props> = ({ isOpen, onClose, data }) => {
           false
         );
         handleClose();
+
+        setToastAlert({
+          title: "Success",
+          type: "success",
+          message: "State deleted successfully",
+        });
       })
       .catch((error) => {
         console.log(error);
@@ -78,7 +88,7 @@ const ConfirmStateDeletion: React.FC<Props> = ({ isOpen, onClose, data }) => {
     <Transition.Root show={isOpen} as={React.Fragment}>
       <Dialog
         as="div"
-        className="relative z-10"
+        className="relative z-20"
         initialFocus={cancelButtonRef}
         onClose={handleClose}
       >
@@ -94,7 +104,7 @@ const ConfirmStateDeletion: React.FC<Props> = ({ isOpen, onClose, data }) => {
           <div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
         </Transition.Child>
 
-        <div className="fixed inset-0 z-10 overflow-y-auto">
+        <div className="fixed inset-0 z-20 overflow-y-auto">
           <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
             <Transition.Child
               as={React.Fragment}
diff --git a/apps/app/components/project/issues/BoardView/state/create-update-state-inline.tsx b/apps/app/components/project/issues/BoardView/state/create-update-state-inline.tsx
index 57c0bb128..87ba04d8c 100644
--- a/apps/app/components/project/issues/BoardView/state/create-update-state-inline.tsx
+++ b/apps/app/components/project/issues/BoardView/state/create-update-state-inline.tsx
@@ -2,20 +2,24 @@ import React, { useEffect } from "react";
 
 import { mutate } from "swr";
 
+// react-hook-form
 import { useForm, Controller } from "react-hook-form";
-
+// react-color
 import { TwitterPicker } from "react-color";
-
+// headless ui
 import { Popover, Transition } from "@headlessui/react";
-// constants
-import type { IState } from "types";
-import { GROUP_CHOICES } from "constants/";
-import { STATE_LIST } from "constants/fetch-keys";
 // services
 import stateService from "services/state.service";
+// hooks
+import useToast from "hooks/use-toast";
 // ui
 import { Button, Input, Select } from "components/ui";
 // types
+import type { IState } from "types";
+// fetch-keys
+import { STATE_LIST } from "constants/fetch-keys";
+// constants
+import { GROUP_CHOICES } from "constants/";
 
 type Props = {
   workspaceSlug?: string;
@@ -40,6 +44,8 @@ export const CreateUpdateStateInline: React.FC<Props> = ({
   onClose,
   selectedGroup,
 }) => {
+  const { setToastAlert } = useToast();
+
   const {
     register,
     handleSubmit,
@@ -81,6 +87,12 @@ export const CreateUpdateStateInline: React.FC<Props> = ({
         .then((res) => {
           mutate<IState[]>(STATE_LIST(projectId), (prevData) => [...(prevData ?? []), res]);
           handleClose();
+
+          setToastAlert({
+            title: "Success",
+            type: "success",
+            message: "State created successfully",
+          });
         })
         .catch((err) => {
           Object.keys(err).map((key) => {
@@ -95,16 +107,14 @@ export const CreateUpdateStateInline: React.FC<Props> = ({
           ...payload,
         })
         .then((res) => {
-          mutate<IState[]>(STATE_LIST(projectId), (prevData) => {
-            const newData = prevData?.map((item) => {
-              if (item.id === res.id) {
-                return res;
-              }
-              return item;
-            });
-            return newData;
-          });
+          mutate(STATE_LIST(projectId));
           handleClose();
+
+          setToastAlert({
+            title: "Success",
+            type: "success",
+            message: "State updated successfully",
+          });
         })
         .catch((err) => {
           Object.keys(err).map((key) => {
diff --git a/apps/app/components/project/issues/confirm-issue-deletion.tsx b/apps/app/components/project/issues/confirm-issue-deletion.tsx
index a9f689543..38d2258ce 100644
--- a/apps/app/components/project/issues/confirm-issue-deletion.tsx
+++ b/apps/app/components/project/issues/confirm-issue-deletion.tsx
@@ -3,20 +3,21 @@ import React, { useEffect, useRef, useState } from "react";
 import { useRouter } from "next/router";
 
 import { mutate } from "swr";
+
 // headless ui
 import { Dialog, Transition } from "@headlessui/react";
-// fetching keys
-import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
-import type { CycleIssueResponse, IIssue, IssueResponse, ModuleIssueResponse } from "types";
-import { CYCLE_ISSUES, PROJECT_ISSUES_LIST, MODULE_ISSUES } from "constants/fetch-keys";
 // services
 import issueServices from "services/issues.service";
 // hooks
 import useToast from "hooks/use-toast";
 // icons
+import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
 // ui
 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";
 
 type Props = {
   isOpen: boolean;
@@ -79,12 +80,12 @@ const ConfirmIssueDeletion: React.FC<Props> = (props) => {
           );
         }
 
+        handleClose();
         setToastAlert({
           title: "Success",
           type: "success",
           message: "Issue deleted successfully",
         });
-        handleClose();
       })
       .catch((error) => {
         console.log(error);
diff --git a/apps/app/components/project/issues/issue-detail/add-as-sub-issue.tsx b/apps/app/components/project/issues/issue-detail/add-as-sub-issue.tsx
index 5958068b5..46dc55594 100644
--- a/apps/app/components/project/issues/issue-detail/add-as-sub-issue.tsx
+++ b/apps/app/components/project/issues/issue-detail/add-as-sub-issue.tsx
@@ -11,7 +11,7 @@ import { RectangleStackIcon, MagnifyingGlassIcon } from "@heroicons/react/24/out
 // services
 import issuesServices from "services/issues.service";
 // types
-import { IIssue, IssueResponse } from "types";
+import { IIssue } from "types";
 // constants
 import { PROJECT_ISSUES_LIST, SUB_ISSUES } from "constants/fetch-keys";
 
@@ -48,16 +48,16 @@ const AddAsSubIssue: React.FC<Props> = ({ isOpen, setIsOpen, parent }) => {
   };
 
   const addAsSubIssue = (issueId: string) => {
-    if (workspaceSlug && projectId) {
-      issuesServices
-        .patchIssue(workspaceSlug as string, projectId as string, issueId, { parent: parent?.id })
-        .then((res) => {
-          mutate(SUB_ISSUES(parent?.id ?? ""));
-        })
-        .catch((e) => {
-          console.log(e);
-        });
-    }
+    if (!workspaceSlug || !projectId) return;
+
+    issuesServices
+      .patchIssue(workspaceSlug as string, projectId as string, issueId, { parent: parent?.id })
+      .then((res) => {
+        mutate(SUB_ISSUES(parent?.id ?? ""));
+      })
+      .catch((e) => {
+        console.log(e);
+      });
   };
 
   return (
@@ -140,6 +140,9 @@ const AddAsSubIssue: React.FC<Props> = ({ isOpen, setIsOpen, parent }) => {
                                       backgroundColor: issue.state_detail.color,
                                     }}
                                   />
+                                  <span className="flex-shrink-0 text-xs text-gray-500">
+                                    {issue.project_detail.identifier}-{issue.sequence_id}
+                                  </span>
                                   {issue.name}
                                 </Combobox.Option>
                               );
diff --git a/apps/app/components/project/modules/confirm-module-deletion.tsx b/apps/app/components/project/modules/confirm-module-deletion.tsx
index 2a83633de..df3f32fea 100644
--- a/apps/app/components/project/modules/confirm-module-deletion.tsx
+++ b/apps/app/components/project/modules/confirm-module-deletion.tsx
@@ -1,19 +1,21 @@
-// react
 import React, { useEffect, useRef, useState } from "react";
-// next
+
 import { useRouter } from "next/router";
-// swr
+
 import { mutate } from "swr";
-// services
+
 // headless ui
 import { Dialog, Transition } from "@headlessui/react";
+// services
+import modulesService from "services/modules.service";
+// hooks
+import useToast from "hooks/use-toast";
 // ui
+import { Button } from "components/ui";
 // icons
 import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
 // types
 import type { IModule } from "types";
-import { Button } from "components/ui";
-import modulesService from "services/modules.service";
 // fetch-keys
 import { MODULE_LIST } from "constants/fetch-keys";
 
@@ -31,6 +33,8 @@ const ConfirmModuleDeletion: React.FC<Props> = ({ isOpen, setIsOpen, data }) =>
     query: { workspaceSlug },
   } = router;
 
+  const { setToastAlert } = useToast();
+
   const cancelButtonRef = useRef(null);
 
   const handleClose = () => {
@@ -48,6 +52,12 @@ const ConfirmModuleDeletion: React.FC<Props> = ({ isOpen, setIsOpen, data }) =>
         mutate(MODULE_LIST(data.project));
         router.push(`/${workspaceSlug}/projects/${data.project}/modules`);
         handleClose();
+
+        setToastAlert({
+          title: "Success",
+          type: "success",
+          message: "Module deleted successfully",
+        });
       })
       .catch((error) => {
         console.log(error);
diff --git a/apps/app/components/project/modules/create-update-module-modal/index.tsx b/apps/app/components/project/modules/create-update-module-modal/index.tsx
index e5e3668f1..bb9b78d9f 100644
--- a/apps/app/components/project/modules/create-update-module-modal/index.tsx
+++ b/apps/app/components/project/modules/create-update-module-modal/index.tsx
@@ -4,11 +4,10 @@ import { useRouter } from "next/router";
 
 import { mutate } from "swr";
 
+// react-hook-form
 import { useForm } from "react-hook-form";
-
+// headless ui
 import { Dialog, Transition } from "@headlessui/react";
-// types
-import type { IModule } from "types";
 // components
 import SelectLead from "components/project/modules/create-update-module-modal/select-lead";
 import SelectMembers from "components/project/modules/create-update-module-modal/select-members";
@@ -17,9 +16,13 @@ import SelectStatus from "components/project/modules/create-update-module-modal/
 import { Button, Input, TextArea } from "components/ui";
 // services
 import modulesService from "services/modules.service";
+// hooks
+import useToast from "hooks/use-toast";
 // helpers
 import { renderDateFormat } from "helpers/date-time.helper";
-// fetch keys
+// types
+import type { IModule } from "types";
+// fetch-keys
 import { MODULE_LIST } from "constants/fetch-keys";
 
 type Props = {
@@ -41,6 +44,8 @@ const CreateUpdateModuleModal: React.FC<Props> = ({ isOpen, setIsOpen, data, pro
   const router = useRouter();
   const { workspaceSlug } = router.query;
 
+  const { setToastAlert } = useToast();
+
   const {
     register,
     formState: { errors, isSubmitting },
@@ -65,6 +70,12 @@ const CreateUpdateModuleModal: React.FC<Props> = ({ isOpen, setIsOpen, data, pro
         .then(() => {
           mutate(MODULE_LIST(projectId));
           handleClose();
+
+          setToastAlert({
+            title: "Success",
+            type: "success",
+            message: "Module created successfully",
+          });
         })
         .catch((err) => {
           Object.keys(err).map((key) => {
@@ -91,6 +102,12 @@ const CreateUpdateModuleModal: React.FC<Props> = ({ isOpen, setIsOpen, data, pro
             false
           );
           handleClose();
+
+          setToastAlert({
+            title: "Success",
+            type: "success",
+            message: "Module updated successfully",
+          });
         })
         .catch((err) => {
           Object.keys(err).map((key) => {
diff --git a/apps/app/components/rich-text-editor/index.tsx b/apps/app/components/rich-text-editor/index.tsx
index daf9e8f05..cb3796c83 100644
--- a/apps/app/components/rich-text-editor/index.tsx
+++ b/apps/app/components/rich-text-editor/index.tsx
@@ -91,7 +91,7 @@ const RemirrorRichTextEditor: FC<IRemirrorRichTextEditor> = (props) => {
         () =>
           new Promise(async (resolve, reject) => {
             const imageUrl = await fileService
-              .uploadFile(workspaceSlug as string, formData) // TODO: verify why workspaceSlug is required for uploading a file
+              .uploadFile(workspaceSlug as string, formData)
               .then((response) => response.asset);
 
             resolve({
diff --git a/apps/app/constants/fetch-keys.ts b/apps/app/constants/fetch-keys.ts
index dcac1e08e..37466673e 100644
--- a/apps/app/constants/fetch-keys.ts
+++ b/apps/app/constants/fetch-keys.ts
@@ -23,7 +23,7 @@ export const PROJECT_ISSUES_DETAILS = (issueId: string) => `PROJECT_ISSUES_DETAI
 export const PROJECT_ISSUES_PROPERTIES = (projectId: string) =>
   `PROJECT_ISSUES_PROPERTIES_${projectId}`;
 export const PROJECT_ISSUES_COMMENTS = (issueId: string) => `PROJECT_ISSUES_COMMENTS_${issueId}`;
-export const PROJECT_ISSUES_ACTIVITY = "PROJECT_ISSUES_ACTIVITY";
+export const PROJECT_ISSUES_ACTIVITY = (issueId: string) => `PROJECT_ISSUES_ACTIVITY_${issueId}`;
 export const PROJECT_ISSUE_BY_STATE = (projectId: string) => `PROJECT_ISSUE_BY_STATE_${projectId}`;
 export const PROJECT_ISSUE_LABELS = (projectId: string) => `PROJECT_ISSUE_LABELS_${projectId}`;
 
diff --git a/apps/app/hooks/use-issue-properties.tsx b/apps/app/hooks/use-issue-properties.tsx
index 526fd554d..ea6c9f96b 100644
--- a/apps/app/hooks/use-issue-properties.tsx
+++ b/apps/app/hooks/use-issue-properties.tsx
@@ -13,7 +13,7 @@ const initialValues: Properties = {
   assignee: true,
   priority: false,
   due_date: false,
-  cycle: false,
+  // cycle: false,
   sub_issue_count: false,
 };
 
@@ -86,7 +86,7 @@ const useIssuesProperties = (workspaceSlug?: string, projectId?: string) => {
     assignee: properties.assignee,
     priority: properties.priority,
     due_date: properties.due_date,
-    cycle: properties.cycle,
+    // cycle: properties.cycle,
     sub_issue_count: properties.sub_issue_count,
   };
 
diff --git a/apps/app/hooks/use-local-storage.tsx b/apps/app/hooks/use-local-storage.tsx
deleted file mode 100644
index 1cdba2364..000000000
--- a/apps/app/hooks/use-local-storage.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import { useState, useEffect, useCallback } from "react";
-
-// TODO: No Use of this
-const useLocalStorage = <T,>(
-  key: string,
-  initialValue?: T extends Function ? never : T | (() => T)
-) => {
-  const [value, setValue] = useState<T | string>("");
-
-  useEffect(() => {
-    const data = window.localStorage.getItem(key);
-    if (data !== null && data !== "undefined") setValue(JSON.parse(data));
-    else setValue(typeof initialValue === "function" ? initialValue() : initialValue);
-  }, [key, initialValue]);
-
-  const updateState = useCallback(
-    (value: T) => {
-      if (!value) window.localStorage.removeItem(key);
-      else window.localStorage.setItem(key, JSON.stringify(value));
-      setValue(value);
-      window.dispatchEvent(new Event(`local-storage-change-${key}`));
-    },
-    [key]
-  );
-
-  const reHydrateState = useCallback(() => {
-    const data = window.localStorage.getItem(key);
-    if (data !== null) setValue(JSON.parse(data));
-  }, [key]);
-
-  useEffect(() => {
-    window.addEventListener(`local-storage-change-${key}`, reHydrateState);
-    return () => window.removeEventListener(`local-storage-change-${key}`, reHydrateState);
-  }, [reHydrateState, key]);
-
-  return [value, updateState];
-};
-
-export default useLocalStorage;
diff --git a/apps/app/hooks/use-my-issues-filter.tsx b/apps/app/hooks/use-my-issues-filter.tsx
index 1f9c3b28a..583f58ed2 100644
--- a/apps/app/hooks/use-my-issues-filter.tsx
+++ b/apps/app/hooks/use-my-issues-filter.tsx
@@ -21,7 +21,7 @@ const initialValues: Properties = {
   assignee: true,
   priority: false,
   due_date: false,
-  cycle: false,
+  // cycle: false,
   sub_issue_count: false,
 };
 
diff --git a/apps/app/pages/[workspaceSlug]/me/workspace-invites.tsx b/apps/app/pages/[workspaceSlug]/me/workspace-invites.tsx
deleted file mode 100644
index 2f68f62d0..000000000
--- a/apps/app/pages/[workspaceSlug]/me/workspace-invites.tsx
+++ /dev/null
@@ -1,156 +0,0 @@
-// FIXME: remove this page
-
-import React, { useState } from "react";
-// next
-import Link from "next/link";
-import { useRouter } from "next/router";
-import useSWR from "swr";
-import type { NextPage } from "next";
-// services
-import workspaceService from "services/workspace.service";
-// hoc
-// import withAuthWrapper from "lib/hoc/withAuthWrapper";
-// layouts
-import AppLayout from "layouts/app-layout";
-// ui
-import { Button } from "components/ui";
-// swr
-import { USER_WORKSPACES } from "constants/fetch-keys";
-
-const MyWorkspacesInvites: NextPage = () => {
-  const router = useRouter();
-
-  const [invitationsRespond, setInvitationsRespond] = useState<any>([]);
-
-  const { data: workspaces } = useSWR(USER_WORKSPACES, () => workspaceService.userWorkspaces(), {
-    shouldRetryOnError: false,
-  });
-
-  const { data: workspaceInvitations, mutate: mutateInvitations } = useSWR<any[]>(
-    "WORKSPACE_INVITATIONS",
-    () => workspaceService.userWorkspaceInvitations()
-  );
-
-  const handleInvitation = (workspace_invitation: any, action: string) => {
-    if (action === "accepted") {
-      setInvitationsRespond((prevData: any) => [...prevData, workspace_invitation.workspace.id]);
-    } else if (action === "withdraw") {
-      setInvitationsRespond((prevData: any) =>
-        prevData.filter((item: string) => item !== workspace_invitation.workspace.id)
-      );
-    }
-  };
-
-  const submitInvitations = () => {
-    workspaceService
-      .joinWorkspaces({ workspace_ids: invitationsRespond })
-      .then(async (res) => {
-        console.log(res);
-        await mutateInvitations();
-
-        router.push("/");
-      })
-      .catch((err: any) => console.log(err));
-  };
-
-  return (
-    <AppLayout
-      meta={{
-        title: "Plane - My Workspace Invites",
-      }}
-    >
-      <div className="flex h-full w-full flex-col items-center justify-center">
-        <div className="relative rounded bg-gray-50 px-4 pt-5 pb-4 text-left shadow sm:w-full sm:max-w-2xl sm:p-6">
-          {(workspaceInvitations as any)?.length > 0 ? (
-            <>
-              <div>
-                <div className="mt-3 sm:mt-5">
-                  <div className="mt-2">
-                    <h2 className="mb-4 text-lg">Workspace Invitations</h2>
-                    <div className="space-y-2">
-                      {workspaceInvitations?.map((item: any) => (
-                        <div className="relative flex items-start" key={item.id}>
-                          <div className="flex h-5 items-center">
-                            <input
-                              id={`${item.id}`}
-                              aria-describedby="workspaces"
-                              name={`${item.id}`}
-                              checked={
-                                item.workspace.accepted ||
-                                invitationsRespond.includes(item.workspace.id)
-                              }
-                              value={item.workspace.name}
-                              onChange={() =>
-                                handleInvitation(
-                                  item,
-                                  item.accepted
-                                    ? "withdraw"
-                                    : invitationsRespond.includes(item.workspace.id)
-                                    ? "withdraw"
-                                    : "accepted"
-                                )
-                              }
-                              type="checkbox"
-                              className="h-4 w-4 rounded border-gray-300 text-theme focus:ring-indigo-500"
-                            />
-                          </div>
-                          <div className="ml-3 flex w-full justify-between text-sm">
-                            <label htmlFor={`${item.id}`} className="font-medium text-gray-700">
-                              {item.workspace.name}
-                            </label>
-                            <div>
-                              {invitationsRespond.includes(item.workspace.id) ? (
-                                <div className="flex gap-x-2">
-                                  <p>Accepted</p>
-                                  <button
-                                    type="button"
-                                    onClick={() => handleInvitation(item, "withdraw")}
-                                  >
-                                    Withdraw
-                                  </button>
-                                </div>
-                              ) : (
-                                <button
-                                  type="button"
-                                  onClick={() => handleInvitation(item, "accepted")}
-                                >
-                                  Join
-                                </button>
-                              )}
-                            </div>
-                          </div>
-                        </div>
-                      ))}
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div className="mt-4 flex justify-between">
-                <Link href={workspaces?.length === 0 ? "/create-workspace" : "/"}>
-                  <button type="button" className="text-sm text-gray-700">
-                    Skip
-                  </button>
-                </Link>
-
-                <Button onClick={submitInvitations}>Submit</Button>
-              </div>
-            </>
-          ) : (
-            <div>
-              <span>No Invitaions Found</span>
-              <p>
-                <Link href="/">
-                  <a>Click Here </a>
-                </Link>
-
-                <span>to redirect home</span>
-              </p>
-            </div>
-          )}
-        </div>
-      </div>
-    </AppLayout>
-  );
-};
-
-export default MyWorkspacesInvites;
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx
index 67a71353d..1d9b890c6 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx
@@ -1,12 +1,14 @@
 import React, { useCallback, useEffect, useState } from "react";
+
 import Link from "next/link";
 import { useRouter } from "next/router";
+
 import useSWR, { mutate } from "swr";
+
+// react-hook-form
 import { useForm } from "react-hook-form";
-import { ChevronLeftIcon, ChevronRightIcon, PlusIcon } from "@heroicons/react/24/outline";
 // services
 import issuesService from "services/issues.service";
-import projectService from "services/project.service";
 // lib
 import { requiredAuth } from "lib/auth";
 // layouts
@@ -25,12 +27,13 @@ import {
 // ui
 import { Loader, HeaderButton, CustomMenu } from "components/ui";
 import { Breadcrumbs } from "components/breadcrumbs";
+// icons
+import { ChevronLeftIcon, ChevronRightIcon, PlusIcon } from "@heroicons/react/24/outline";
 // types
 import { IIssue } from "types";
 import type { NextPage, NextPageContext } from "next";
 // fetch-keys
 import {
-  PROJECT_DETAILS,
   PROJECT_ISSUES_LIST,
   PROJECT_ISSUES_ACTIVITY,
   ISSUE_DETAILS,
@@ -52,8 +55,6 @@ const defaultValues = {
 };
 
 const IssueDetailsPage: NextPage = () => {
-  const router = useRouter();
-  const { workspaceSlug, projectId, issueId } = router.query;
   // states
   const [isOpen, setIsOpen] = useState(false);
   const [isAddAsSubIssueOpen, setIsAddAsSubIssueOpen] = useState(false);
@@ -61,15 +62,14 @@ const IssueDetailsPage: NextPage = () => {
     (Partial<IIssue> & { actionType: "createIssue" | "edit" | "delete" }) | undefined
   >(undefined);
 
+  const router = useRouter();
+  const { workspaceSlug, projectId, issueId } = router.query;
+
   const { data: issueDetails, mutate: mutateIssueDetails } = useSWR<IIssue | undefined>(
-    issueId && workspaceSlug && projectId ? ISSUE_DETAILS(issueId as string) : null,
-    issueId && workspaceSlug && projectId
+    workspaceSlug && projectId && issueId ? ISSUE_DETAILS(issueId as string) : null,
+    workspaceSlug && projectId && issueId
       ? () =>
-          issuesService.retrieve(
-            workspaceSlug?.toString(),
-            projectId?.toString(),
-            issueId?.toString()
-          )
+          issuesService.retrieve(workspaceSlug as string, projectId as string, issueId as string)
       : null
   );
 
@@ -81,13 +81,6 @@ const IssueDetailsPage: NextPage = () => {
       : null
   );
 
-  const { data: activeProject } = useSWR(
-    workspaceSlug && projectId ? PROJECT_DETAILS(projectId as string) : null,
-    workspaceSlug && projectId
-      ? () => projectService.getProject(workspaceSlug as string, projectId as string)
-      : null
-  );
-
   const { data: issues } = useSWR(
     workspaceSlug && projectId
       ? PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string)
@@ -98,7 +91,7 @@ const IssueDetailsPage: NextPage = () => {
   );
 
   const { data: issueActivities, mutate: mutateIssueActivities } = useSWR(
-    workspaceSlug && projectId && issueId ? PROJECT_ISSUES_ACTIVITY : null,
+    workspaceSlug && projectId && issueId ? PROJECT_ISSUES_ACTIVITY(issueId as string) : null,
     workspaceSlug && projectId && issueId
       ? () =>
           issuesService.getIssueActivities(
@@ -141,7 +134,16 @@ const IssueDetailsPage: NextPage = () => {
 
   const submitChanges = useCallback(
     (formData: Partial<IIssue>) => {
-      if (!workspaceSlug || !activeProject || !issueId) return;
+      if (!workspaceSlug || !projectId || !issueId) return;
+
+      mutate(
+        ISSUE_DETAILS(issueId as string),
+        (prevData: IIssue) => ({
+          ...prevData,
+          ...formData,
+        }),
+        false
+      );
 
       const payload = { ...formData };
       issuesService
@@ -154,21 +156,21 @@ const IssueDetailsPage: NextPage = () => {
           console.error(e);
         });
     },
-    [activeProject, workspaceSlug, issueId, projectId, mutateIssueDetails, mutateIssueActivities]
+    [workspaceSlug, issueId, projectId, mutateIssueDetails, mutateIssueActivities]
   );
 
   const handleSubIssueRemove = (issueId: string) => {
-    if (workspaceSlug && activeProject) {
-      issuesService
-        .patchIssue(workspaceSlug as string, activeProject.id, issueId, { parent: null })
-        .then((res) => {
-          mutate(SUB_ISSUES(issueDetails?.id ?? ""));
-          mutateIssueActivities();
-        })
-        .catch((e) => {
-          console.error(e);
-        });
-    }
+    if (!workspaceSlug || !projectId) return;
+
+    issuesService
+      .patchIssue(workspaceSlug as string, projectId as string, issueId, { parent: null })
+      .then((res) => {
+        mutate(SUB_ISSUES(issueDetails?.id ?? ""));
+        mutateIssueActivities();
+      })
+      .catch((e) => {
+        console.error(e);
+      });
   };
 
   /**
@@ -177,14 +179,14 @@ const IssueDetailsPage: NextPage = () => {
    */
   const handleDescriptionFormSubmit = useCallback(
     (values: IssueDescriptionFormValues) => {
-      if (workspaceSlug && projectId && issueId) {
-        issuesService
-          .updateIssue(workspaceSlug?.toString(), projectId.toString(), issueId.toString(), values)
-          .then((res) => {
-            console.log(res);
-            mutateIssueActivities();
-          });
-      }
+      if (!workspaceSlug || !projectId || !issueId) return;
+
+      issuesService
+        .updateIssue(workspaceSlug as string, projectId as string, issueId as string, values)
+        .then((res) => {
+          console.log(res);
+          mutateIssueActivities();
+        });
     },
     [workspaceSlug, projectId, issueId, mutateIssueActivities]
   );
@@ -196,11 +198,11 @@ const IssueDetailsPage: NextPage = () => {
       breadcrumbs={
         <Breadcrumbs>
           <Breadcrumbs.BreadcrumbItem
-            title={`${activeProject?.name ?? "Project"} Issues`}
-            link={`/${workspaceSlug}/projects/${activeProject?.id}/issues`}
+            title={`${issueDetails?.project_detail.name ?? "Project"} Issues`}
+            link={`/${workspaceSlug}/projects/${projectId as string}/issues`}
           />
           <Breadcrumbs.BreadcrumbItem
-            title={`Issue ${activeProject?.identifier ?? "Project"}-${
+            title={`Issue ${issueDetails?.project_detail.identifier ?? "Project"}-${
               issueDetails?.sequence_id ?? "..."
             } Details`}
           />
@@ -249,14 +251,16 @@ const IssueDetailsPage: NextPage = () => {
           parent={issueDetails}
         />
       )}
-      {issueDetails && activeProject ? (
+      {issueDetails && projectId ? (
         <div className="flex h-full">
           <div className="basis-2/3 space-y-5 divide-y-2 p-5">
             <div className="rounded-lg">
               {issueDetails?.parent && issueDetails.parent !== "" ? (
                 <div className="mb-5 flex w-min items-center gap-2 whitespace-nowrap rounded bg-gray-100 p-2 text-xs">
                   <Link
-                    href={`/${workspaceSlug}/projects/${activeProject.id}/issues/${issueDetails.parent}`}
+                    href={`/${workspaceSlug}/projects/${projectId as string}/issues/${
+                      issueDetails.parent
+                    }`}
                   >
                     <a className="flex items-center gap-2">
                       <span
@@ -266,7 +270,7 @@ const IssueDetailsPage: NextPage = () => {
                         }}
                       />
                       <span className="flex-shrink-0 text-gray-600">
-                        {activeProject.identifier}-
+                        {issueDetails.project_detail.identifier}-
                         {issues?.results.find((i) => i.id === issueDetails.parent)?.sequence_id}
                       </span>
                       <span className="truncate font-medium">
@@ -282,10 +286,12 @@ const IssueDetailsPage: NextPage = () => {
                       siblingIssues.map((issue) => (
                         <CustomMenu.MenuItem key={issue.id}>
                           <Link
-                            href={`/${workspaceSlug}/projects/${activeProject.id}/issues/${issue.id}`}
+                            href={`/${workspaceSlug}/projects/${projectId as string}/issues/${
+                              issue.id
+                            }`}
                           >
                             <a>
-                              {activeProject.identifier}-{issue.sequence_id}
+                              {issueDetails.project_detail.identifier}-{issue.sequence_id}
                             </a>
                           </Link>
                         </CustomMenu.MenuItem>
@@ -358,7 +364,6 @@ const IssueDetailsPage: NextPage = () => {
             </div>
           </div>
           <div className="basis-1/3 space-y-5 border-l p-5">
-            {/* TODO add flex-grow, if needed */}
             <IssueDetailSidebar
               control={control}
               issueDetail={issueDetails}
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/states.tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/states.tsx
index e5ff57aab..1234b7063 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/states.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/states.tsx
@@ -4,8 +4,6 @@ import { useRouter } from "next/router";
 import useSWR from "swr";
 import { PencilSquareIcon, PlusIcon, TrashIcon } from "@heroicons/react/24/outline";
 
-// types
-import type { NextPage, NextPageContext } from "next";
 import { IState } from "types";
 // services
 import stateService from "services/state.service";
@@ -26,6 +24,8 @@ import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 // helpers
 import { addSpaceIfCamelCase } from "helpers/string.helper";
 import { groupBy } from "helpers/array.helper";
+// types
+import type { NextPage, NextPageContext } from "next";
 // fetch-keys
 import { PROJECT_DETAILS, STATE_LIST } from "constants/fetch-keys";
 
@@ -106,6 +106,18 @@ const StatesSettings: NextPage<TStateSettingsProps> = (props) => {
                     </button>
                   </div>
                   <div className="space-y-1 rounded-xl border p-1 md:w-2/3">
+                    {key === activeGroup && (
+                      <CreateUpdateStateInline
+                        projectId={activeProject.id}
+                        onClose={() => {
+                          setActiveGroup(null);
+                          setSelectedState(null);
+                        }}
+                        workspaceSlug={workspaceSlug as string}
+                        data={null}
+                        selectedGroup={key as keyof StateGroup}
+                      />
+                    )}
                     {groupedStates[key]?.map((state) =>
                       state.id !== selectedState ? (
                         <div
@@ -147,18 +159,6 @@ const StatesSettings: NextPage<TStateSettingsProps> = (props) => {
                         </div>
                       )
                     )}
-                    {key === activeGroup && (
-                      <CreateUpdateStateInline
-                        projectId={activeProject.id}
-                        onClose={() => {
-                          setActiveGroup(null);
-                          setSelectedState(null);
-                        }}
-                        workspaceSlug={workspaceSlug as string}
-                        data={null}
-                        selectedGroup={key as keyof StateGroup}
-                      />
-                    )}
                   </div>
                 </div>
               ))
diff --git a/apps/app/services/workspace.service.ts b/apps/app/services/workspace.service.ts
index d00f5324d..034104242 100644
--- a/apps/app/services/workspace.service.ts
+++ b/apps/app/services/workspace.service.ts
@@ -154,17 +154,6 @@ class WorkspaceService extends APIService {
       });
   }
 
-  async updateWorkspaceInvitation(
-    workspaceSlug: string,
-    invitationId: string
-  ): Promise<IWorkspaceMemberInvitation> {
-    return this.put(`/api/workspaces/${workspaceSlug}/invitations/${invitationId}/`)
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
   async deleteWorkspaceInvitations(workspaceSlug: string, invitationId: string): Promise<any> {
     return this.delete(`/api/workspaces/${workspaceSlug}/invitations/${invitationId}/`)
       .then((response) => response?.data)
diff --git a/apps/app/types/issues.d.ts b/apps/app/types/issues.d.ts
index 4523ac48d..c2703d566 100644
--- a/apps/app/types/issues.d.ts
+++ b/apps/app/types/issues.d.ts
@@ -51,48 +51,48 @@ export interface IIssueCycle {
 }
 
 export interface IIssue {
-  id: string;
-  state_detail: IState;
-  label_details: any[];
+  assignees: any[] | null;
   assignee_details: IUser[];
   assignees_list: string[];
+  attachments: any[];
   blocked_by_issue_details: any[];
+  blocked_issue_details: any[];
   blocked_issues: BlockeIssue[];
-  blocker_issues: BlockeIssue[];
-  blockers_list: string[];
   blocked_list: string[];
+  blocker_issues: BlockeIssue[];
+  blockers: any[];
+  blockers_list: string[];
   blocks_list: string[];
   bridge: string;
   created_at: Date;
-  updated_at: Date;
-  name: string;
-  issue_cycle: IIssueCycle | null;
-  issue_module: IIssueModule | null;
-  description: any;
-  description_html: any;
-  priority: string | null;
-  start_date: string | null;
-  target_date: string | null;
-  sequence_id: number;
-  attachments: any[];
   created_by: string;
-  updated_by: string;
-  project: string;
-  project_detail: IProject;
-  workspace: string;
-  parent: string | null;
-  parent_detail: IProject | null;
-  state: string;
-  assignees: any[] | null;
-  labels: any[];
-  labels_list: string[];
-  blockers: any[];
-  blocked_issue_details: any[];
-  sprints: string | null;
-  module: string | null;
   cycle: string | null;
   cycle_detail: ICycle | null;
+  description: any;
+  description_html: any;
+  id: string;
+  issue_cycle: IIssueCycle | null;
+  issue_module: IIssueModule | null;
+  label_details: any[];
+  module: string | null;
+  name: string;
+  parent: string | null;
+  parent_detail: IProject | null;
+  priority: string | null;
+  project: string;
+  project_detail: IProject;
+  sequence_id: number;
+  sprints: string | null;
+  start_date: string | null;
+  state: string;
+  state_detail: IState;
   sub_issues_count: number;
+  target_date: string | null;
+  updated_at: Date;
+  updated_by: string;
+  workspace: string;
+  labels: any[];
+  labels_list: string[];
 }
 
 export interface BlockeIssue {
@@ -151,7 +151,7 @@ export type Properties = {
   assignee: boolean;
   priority: boolean;
   due_date: boolean;
-  cycle: boolean;
+  // cycle: boolean;
   sub_issue_count: boolean;
 };
 

From 143ba756048994dd7de4979f89c37e487a53b3e1 Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com>
Date: Sun, 29 Jan 2023 12:26:36 +0530
Subject: [PATCH 04/15] fix: build errors in docs (#204)

---
 apps/app/tsconfig.json                        | 10 +---
 apps/docs/.eslintrc.js                        |  1 +
 apps/docs/src/components/Button.jsx           |  4 +-
 apps/docs/src/components/Code.jsx             | 60 ++++++++++---------
 apps/docs/src/components/Footer.jsx           | 19 +++---
 apps/docs/src/components/GridPattern.jsx      |  2 +-
 apps/docs/src/components/Header.jsx           | 26 ++++----
 apps/docs/src/components/Heading.jsx          |  8 +--
 apps/docs/src/components/Layout.jsx           |  7 +--
 apps/docs/src/components/Logo.jsx             |  7 ++-
 apps/docs/src/components/MobileNavigation.jsx |  6 +-
 apps/docs/src/components/ModeToggle.jsx       |  6 +-
 apps/docs/src/components/Navigation.jsx       | 30 +++++-----
 apps/docs/src/components/Resources.jsx        | 10 ++--
 apps/docs/src/components/Search.jsx           | 48 +++++++--------
 apps/docs/src/components/SectionProvider.jsx  | 48 +++++++--------
 apps/docs/src/lib/remToPx.js                  |  2 +-
 apps/docs/src/pages/_app.jsx                  |  4 +-
 18 files changed, 153 insertions(+), 145 deletions(-)
 create mode 100644 apps/docs/.eslintrc.js

diff --git a/apps/app/tsconfig.json b/apps/app/tsconfig.json
index 216c382bc..6aa9201ce 100644
--- a/apps/app/tsconfig.json
+++ b/apps/app/tsconfig.json
@@ -24,14 +24,8 @@
 // }
 {
   "extends": "tsconfig/nextjs.json",
-  "include": [
-    "next-env.d.ts",
-    "**/*.ts",
-    "**/*.tsx"
-  ],
-  "exclude": [
-    "node_modules"
-  ],
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"],
   "compilerOptions": {
     "baseUrl": ".",
     "jsx": "preserve"
diff --git a/apps/docs/.eslintrc.js b/apps/docs/.eslintrc.js
new file mode 100644
index 000000000..132c8c4e5
--- /dev/null
+++ b/apps/docs/.eslintrc.js
@@ -0,0 +1 @@
+module.exports = require('config/.eslintrc')
diff --git a/apps/docs/src/components/Button.jsx b/apps/docs/src/components/Button.jsx
index 46f14f34c..c311f91e8 100644
--- a/apps/docs/src/components/Button.jsx
+++ b/apps/docs/src/components/Button.jsx
@@ -33,7 +33,7 @@ export function Button({
   arrow,
   ...props
 }) {
-  let Component = props.href ? Link : 'button'
+  const Component = props.href ? Link : 'button'
 
   className = clsx(
     'inline-flex gap-0.5 justify-center overflow-hidden text-sm font-medium transition',
@@ -41,7 +41,7 @@ export function Button({
     className
   )
 
-  let arrowIcon = (
+  const arrowIcon = (
     <ArrowIcon
       className={clsx(
         'mt-0.5 h-5 w-5',
diff --git a/apps/docs/src/components/Code.jsx b/apps/docs/src/components/Code.jsx
index 82c3d38bd..ad2b1aa36 100644
--- a/apps/docs/src/components/Code.jsx
+++ b/apps/docs/src/components/Code.jsx
@@ -44,12 +44,12 @@ function ClipboardIcon(props) {
 }
 
 function CopyButton({ code }) {
-  let [copyCount, setCopyCount] = useState(0)
-  let copied = copyCount > 0
+  const [copyCount, setCopyCount] = useState(0)
+  const copied = copyCount > 0
 
   useEffect(() => {
     if (copyCount > 0) {
-      let timeout = setTimeout(() => setCopyCount(0), 1000)
+      const timeout = setTimeout(() => setCopyCount(0), 1000)
       return () => {
         clearTimeout(timeout)
       }
@@ -117,7 +117,7 @@ function CodePanelHeader({ tag, label }) {
 }
 
 function CodePanel({ tag, label, code, children }) {
-  let child = Children.only(children)
+  const child = Children.only(children)
 
   return (
     <div className="group dark:bg-white/2.5">
@@ -134,7 +134,7 @@ function CodePanel({ tag, label, code, children }) {
 }
 
 function CodeGroupHeader({ title, children, selectedIndex }) {
-  let hasTabs = Children.count(children) > 1
+  const hasTabs = Children.count(children) > 1
 
   if (!title && !hasTabs) {
     return null
@@ -168,7 +168,7 @@ function CodeGroupHeader({ title, children, selectedIndex }) {
 }
 
 function CodeGroupPanels({ children, ...props }) {
-  let hasTabs = Children.count(children) > 1
+  const hasTabs = Children.count(children) > 1
 
   if (hasTabs) {
     return (
@@ -186,24 +186,25 @@ function CodeGroupPanels({ children, ...props }) {
 }
 
 function usePreventLayoutShift() {
-  let positionRef = useRef()
-  let rafRef = useRef()
+  const positionRef = useRef()
+  const rafRef = useRef()
 
-  useEffect(() => {
-    return () => {
+  useEffect(
+    () => () => {
       window.cancelAnimationFrame(rafRef.current)
-    }
-  }, [])
+    },
+    []
+  )
 
   return {
     positionRef,
     preventLayoutShift(callback) {
-      let initialTop = positionRef.current.getBoundingClientRect().top
+      const initialTop = positionRef.current.getBoundingClientRect().top
 
       callback()
 
       rafRef.current = window.requestAnimationFrame(() => {
-        let newTop = positionRef.current.getBoundingClientRect().top
+        const newTop = positionRef.current.getBoundingClientRect().top
         window.scrollBy(0, newTop - initialTop)
       })
     },
@@ -224,18 +225,19 @@ const usePreferredLanguageStore = create((set) => ({
 }))
 
 function useTabGroupProps(availableLanguages) {
-  let { preferredLanguages, addPreferredLanguage } = usePreferredLanguageStore()
-  let [selectedIndex, setSelectedIndex] = useState(0)
-  let activeLanguage = [...availableLanguages].sort(
+  const { preferredLanguages, addPreferredLanguage } =
+    usePreferredLanguageStore()
+  const [selectedIndex, setSelectedIndex] = useState(0)
+  const activeLanguage = [...availableLanguages].sort(
     (a, z) => preferredLanguages.indexOf(z) - preferredLanguages.indexOf(a)
   )[0]
-  let languageIndex = availableLanguages.indexOf(activeLanguage)
-  let newSelectedIndex = languageIndex === -1 ? selectedIndex : languageIndex
+  const languageIndex = availableLanguages.indexOf(activeLanguage)
+  const newSelectedIndex = languageIndex === -1 ? selectedIndex : languageIndex
   if (newSelectedIndex !== selectedIndex) {
     setSelectedIndex(newSelectedIndex)
   }
 
-  let { positionRef, preventLayoutShift } = usePreventLayoutShift()
+  const { positionRef, preventLayoutShift } = usePreventLayoutShift()
 
   return {
     as: 'div',
@@ -252,12 +254,14 @@ function useTabGroupProps(availableLanguages) {
 const CodeGroupContext = createContext(false)
 
 export function CodeGroup({ children, title, ...props }) {
-  let languages = Children.map(children, (child) => getPanelTitle(child.props))
-  let tabGroupProps = useTabGroupProps(languages)
-  let hasTabs = Children.count(children) > 1
-  let Container = hasTabs ? Tab.Group : 'div'
-  let containerProps = hasTabs ? tabGroupProps : {}
-  let headerProps = hasTabs
+  const languages = Children.map(children, (child) =>
+    getPanelTitle(child.props)
+  )
+  const tabGroupProps = useTabGroupProps(languages)
+  const hasTabs = Children.count(children) > 1
+  const Container = hasTabs ? Tab.Group : 'div'
+  const containerProps = hasTabs ? tabGroupProps : {}
+  const headerProps = hasTabs
     ? { selectedIndex: tabGroupProps.selectedIndex }
     : {}
 
@@ -277,7 +281,7 @@ export function CodeGroup({ children, title, ...props }) {
 }
 
 export function Code({ children, ...props }) {
-  let isGrouped = useContext(CodeGroupContext)
+  const isGrouped = useContext(CodeGroupContext)
 
   if (isGrouped) {
     return <code {...props} dangerouslySetInnerHTML={{ __html: children }} />
@@ -287,7 +291,7 @@ export function Code({ children, ...props }) {
 }
 
 export function Pre({ children, ...props }) {
-  let isGrouped = useContext(CodeGroupContext)
+  const isGrouped = useContext(CodeGroupContext)
 
   if (isGrouped) {
     return children
diff --git a/apps/docs/src/components/Footer.jsx b/apps/docs/src/components/Footer.jsx
index b1486ef32..339150cf5 100644
--- a/apps/docs/src/components/Footer.jsx
+++ b/apps/docs/src/components/Footer.jsx
@@ -65,7 +65,7 @@ const FeedbackThanks = forwardRef(function FeedbackThanks(_props, ref) {
 })
 
 function Feedback() {
-  let [submitted, setSubmitted] = useState(false)
+  const [submitted, setSubmitted] = useState(false)
 
   function onSubmit(event) {
     event.preventDefault()
@@ -124,9 +124,9 @@ function PageLink({ label, page, previous = false }) {
 }
 
 function PageNavigation() {
-  let router = useRouter()
-  let allPages = navigation.flatMap((group) => group.links)
-  let currentPageIndex = allPages.findIndex(
+  const router = useRouter()
+  const allPages = navigation.flatMap((group) => group.links)
+  const currentPageIndex = allPages.findIndex(
     (page) => page.href === router.pathname
   )
 
@@ -134,8 +134,8 @@ function PageNavigation() {
     return null
   }
 
-  let previousPage = allPages[currentPageIndex - 1]
-  let nextPage = allPages[currentPageIndex + 1]
+  const previousPage = allPages[currentPageIndex - 1]
+  const nextPage = allPages[currentPageIndex + 1]
 
   if (!previousPage && !nextPage) {
     return null
@@ -207,7 +207,10 @@ function SmallPrint() {
         <SocialLink href="https://github.com/makeplane" icon={GitHubIcon}>
           Follow us on GitHub
         </SocialLink>
-        <SocialLink href="https://discord.com/invite/A92xrEGCge" icon={DiscordIcon}>
+        <SocialLink
+          href="https://discord.com/invite/A92xrEGCge"
+          icon={DiscordIcon}
+        >
           Join our Discord server
         </SocialLink>
       </div>
@@ -216,7 +219,7 @@ function SmallPrint() {
 }
 
 export function Footer() {
-  let router = useRouter()
+  const router = useRouter()
 
   return (
     <footer className="mx-auto max-w-2xl space-y-10 pb-16 lg:max-w-5xl">
diff --git a/apps/docs/src/components/GridPattern.jsx b/apps/docs/src/components/GridPattern.jsx
index d8337656f..daf63bc36 100644
--- a/apps/docs/src/components/GridPattern.jsx
+++ b/apps/docs/src/components/GridPattern.jsx
@@ -1,7 +1,7 @@
 import { useId } from 'react'
 
 export function GridPattern({ width, height, x, y, squares, ...props }) {
-  let patternId = useId()
+  const patternId = useId()
 
   return (
     <svg aria-hidden="true" {...props}>
diff --git a/apps/docs/src/components/Header.jsx b/apps/docs/src/components/Header.jsx
index 62433df4c..b0318b8e9 100644
--- a/apps/docs/src/components/Header.jsx
+++ b/apps/docs/src/components/Header.jsx
@@ -8,8 +8,8 @@ import { Logo } from '@/components/Logo'
 import {
   MobileNavigation,
   useIsInsideMobileNavigation,
+  useMobileNavigationStore,
 } from '@/components/MobileNavigation'
-import { useMobileNavigationStore } from '@/components/MobileNavigation'
 import { ModeToggle } from '@/components/ModeToggle'
 import { MobileSearch, Search } from '@/components/Search'
 
@@ -27,12 +27,12 @@ function TopLevelNavItem({ href, children }) {
 }
 
 export const Header = forwardRef(function Header({ className }, ref) {
-  let { isOpen: mobileNavIsOpen } = useMobileNavigationStore()
-  let isInsideMobileNavigation = useIsInsideMobileNavigation()
+  const { isOpen: mobileNavIsOpen } = useMobileNavigationStore()
+  const isInsideMobileNavigation = useIsInsideMobileNavigation()
 
-  let { scrollY } = useScroll()
-  let bgOpacityLight = useTransform(scrollY, [0, 72], [0.5, 0.9])
-  let bgOpacityDark = useTransform(scrollY, [0, 72], [0.2, 0.8])
+  const { scrollY } = useScroll()
+  const bgOpacityLight = useTransform(scrollY, [0, 72], [0.5, 0.9])
+  const bgOpacityDark = useTransform(scrollY, [0, 72], [0.2, 0.8])
 
   return (
     <motion.div
@@ -62,15 +62,21 @@ export const Header = forwardRef(function Header({ className }, ref) {
       <div className="flex items-center gap-5 lg:hidden">
         <MobileNavigation />
         <Link href="/" aria-label="Home">
-          <Logo  />
+          <Logo />
         </Link>
       </div>
       <div className="flex items-center gap-5">
         <nav className="hidden md:block">
           <ul role="list" className="flex items-center gap-8">
-            <TopLevelNavItem href="https://plane.so/">Plane Cloud</TopLevelNavItem>
-            <TopLevelNavItem href="https://github.com/makeplane/plane">GitHub</TopLevelNavItem>
-            <TopLevelNavItem href="https://discord.com/invite/A92xrEGCge">Discord | Support</TopLevelNavItem>
+            <TopLevelNavItem href="https://plane.so/">
+              Plane Cloud
+            </TopLevelNavItem>
+            <TopLevelNavItem href="https://github.com/makeplane/plane">
+              GitHub
+            </TopLevelNavItem>
+            <TopLevelNavItem href="https://discord.com/invite/A92xrEGCge">
+              Discord | Support
+            </TopLevelNavItem>
           </ul>
         </nav>
         <div className="hidden md:block md:h-5 md:w-px md:bg-zinc-900/10 md:dark:bg-white/15" />
diff --git a/apps/docs/src/components/Heading.jsx b/apps/docs/src/components/Heading.jsx
index bf7b7e2be..a358cd1cc 100644
--- a/apps/docs/src/components/Heading.jsx
+++ b/apps/docs/src/components/Heading.jsx
@@ -65,11 +65,11 @@ export function Heading({
   anchor = true,
   ...props
 }) {
-  let Component = `h${level}`
-  let ref = useRef()
-  let registerHeading = useSectionStore((s) => s.registerHeading)
+  const Component = `h${level}`
+  const ref = useRef()
+  const registerHeading = useSectionStore((s) => s.registerHeading)
 
-  let inView = useInView(ref, {
+  const inView = useInView(ref, {
     margin: `${remToPx(-3.5)}px 0px 0px 0px`,
     amount: 'all',
   })
diff --git a/apps/docs/src/components/Layout.jsx b/apps/docs/src/components/Layout.jsx
index 0c8e3aa64..6b8cc2b50 100644
--- a/apps/docs/src/components/Layout.jsx
+++ b/apps/docs/src/components/Layout.jsx
@@ -8,7 +8,6 @@ import { Navigation } from '@/components/Navigation'
 import { Prose } from '@/components/Prose'
 import { SectionProvider } from '@/components/SectionProvider'
 
-
 export function Layout({ children, sections = [] }) {
   return (
     <SectionProvider sections={sections}>
@@ -19,11 +18,7 @@ export function Layout({ children, sections = [] }) {
         >
           <div className="hidden lg:flex">
             <Link href="/" aria-label="Home">
-              <Logo  />
-
-              
-
-
+              <Logo />
             </Link>
           </div>
           <Header />
diff --git a/apps/docs/src/components/Logo.jsx b/apps/docs/src/components/Logo.jsx
index 8b90593b6..a3a72d6c2 100644
--- a/apps/docs/src/components/Logo.jsx
+++ b/apps/docs/src/components/Logo.jsx
@@ -1,5 +1,10 @@
 export function Logo() {
   return (
-    <img src="https://camo.githubusercontent.com/ef32512ae486a8cef8e000e74b2ff11c92c89c2cadb2d79674c6bd1599b99a56/68747470733a2f2f696b2e696d6167656b69742e696f2f77326f6b77627475322f706c616e652d6c6f676f5f306d383378756537522e706e673f696b2d73646b2d76657273696f6e3d6a6176617363726970742d312e342e33267570646174656441743d31363638383632373137303834" height={100} width={100} alt="Plane"/>
+    <img
+      src="https://camo.githubusercontent.com/ef32512ae486a8cef8e000e74b2ff11c92c89c2cadb2d79674c6bd1599b99a56/68747470733a2f2f696b2e696d6167656b69742e696f2f77326f6b77627475322f706c616e652d6c6f676f5f306d383378756537522e706e673f696b2d73646b2d76657273696f6e3d6a6176617363726970742d312e342e33267570646174656441743d31363638383632373137303834"
+      height={100}
+      width={100}
+      alt="Plane"
+    />
   )
 }
diff --git a/apps/docs/src/components/MobileNavigation.jsx b/apps/docs/src/components/MobileNavigation.jsx
index e2618d43c..a6d363077 100644
--- a/apps/docs/src/components/MobileNavigation.jsx
+++ b/apps/docs/src/components/MobileNavigation.jsx
@@ -48,9 +48,9 @@ export const useMobileNavigationStore = create((set) => ({
 }))
 
 export function MobileNavigation() {
-  let isInsideMobileNavigation = useIsInsideMobileNavigation()
-  let { isOpen, toggle, close } = useMobileNavigationStore()
-  let ToggleIcon = isOpen ? XIcon : MenuIcon
+  const isInsideMobileNavigation = useIsInsideMobileNavigation()
+  const { isOpen, toggle, close } = useMobileNavigationStore()
+  const ToggleIcon = isOpen ? XIcon : MenuIcon
 
   return (
     <IsInsideMobileNavigationContext.Provider value={true}>
diff --git a/apps/docs/src/components/ModeToggle.jsx b/apps/docs/src/components/ModeToggle.jsx
index f58c65759..de66f85e1 100644
--- a/apps/docs/src/components/ModeToggle.jsx
+++ b/apps/docs/src/components/ModeToggle.jsx
@@ -29,9 +29,9 @@ export function ModeToggle() {
   function toggleMode() {
     disableTransitionsTemporarily()
 
-    let darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
-    let isSystemDarkMode = darkModeMediaQuery.matches
-    let isDarkMode = document.documentElement.classList.toggle('dark')
+    const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
+    const isSystemDarkMode = darkModeMediaQuery.matches
+    const isDarkMode = document.documentElement.classList.toggle('dark')
 
     if (isDarkMode === isSystemDarkMode) {
       delete window.localStorage.isDarkMode
diff --git a/apps/docs/src/components/Navigation.jsx b/apps/docs/src/components/Navigation.jsx
index b426dcafe..ec3c6dcaa 100644
--- a/apps/docs/src/components/Navigation.jsx
+++ b/apps/docs/src/components/Navigation.jsx
@@ -11,7 +11,7 @@ import { Tag } from '@/components/Tag'
 import { remToPx } from '@/lib/remToPx'
 
 function useInitialValue(value, condition = true) {
-  let initialValue = useRef(value).current
+  const initialValue = useRef(value).current
   return condition ? initialValue : value
 }
 
@@ -52,7 +52,7 @@ function NavLink({ href, tag, active, isAnchorLink = false, children }) {
 }
 
 function VisibleSectionHighlight({ group, pathname }) {
-  let [sections, visibleSections] = useInitialValue(
+  const [sections, visibleSections] = useInitialValue(
     [
       useSectionStore((s) => s.sections),
       useSectionStore((s) => s.visibleSections),
@@ -60,18 +60,18 @@ function VisibleSectionHighlight({ group, pathname }) {
     useIsInsideMobileNavigation()
   )
 
-  let isPresent = useIsPresent()
-  let firstVisibleSectionIndex = Math.max(
+  const isPresent = useIsPresent()
+  const firstVisibleSectionIndex = Math.max(
     0,
     [{ id: '_top' }, ...sections].findIndex(
       (section) => section.id === visibleSections[0]
     )
   )
-  let itemHeight = remToPx(2)
-  let height = isPresent
+  const itemHeight = remToPx(2)
+  const height = isPresent
     ? Math.max(1, visibleSections.length) * itemHeight
     : itemHeight
-  let top =
+  const top =
     group.links.findIndex((link) => link.href === pathname) * itemHeight +
     firstVisibleSectionIndex * itemHeight
 
@@ -88,10 +88,12 @@ function VisibleSectionHighlight({ group, pathname }) {
 }
 
 function ActivePageMarker({ group, pathname }) {
-  let itemHeight = remToPx(2)
-  let offset = remToPx(0.25)
-  let activePageIndex = group.links.findIndex((link) => link.href === pathname)
-  let top = offset + activePageIndex * itemHeight
+  const itemHeight = remToPx(2)
+  const offset = remToPx(0.25)
+  const activePageIndex = group.links.findIndex(
+    (link) => link.href === pathname
+  )
+  const top = offset + activePageIndex * itemHeight
 
   return (
     <motion.div
@@ -109,13 +111,13 @@ function NavigationGroup({ group, className }) {
   // If this is the mobile navigation then we always render the initial
   // state, so that the state does not change during the close animation.
   // The state will still update when we re-open (re-render) the navigation.
-  let isInsideMobileNavigation = useIsInsideMobileNavigation()
-  let [router, sections] = useInitialValue(
+  const isInsideMobileNavigation = useIsInsideMobileNavigation()
+  const [router, sections] = useInitialValue(
     [useRouter(), useSectionStore((s) => s.sections)],
     isInsideMobileNavigation
   )
 
-  let isActiveGroup =
+  const isActiveGroup =
     group.links.findIndex((link) => link.href === router.pathname) !== -1
 
   return (
diff --git a/apps/docs/src/components/Resources.jsx b/apps/docs/src/components/Resources.jsx
index 187d6cb1a..2daffa825 100644
--- a/apps/docs/src/components/Resources.jsx
+++ b/apps/docs/src/components/Resources.jsx
@@ -71,8 +71,8 @@ function ResourceIcon({ icon: Icon }) {
 }
 
 function ResourcePattern({ mouseX, mouseY, ...gridProps }) {
-  let maskImage = useMotionTemplate`radial-gradient(180px at ${mouseX}px ${mouseY}px, white, transparent)`
-  let style = { maskImage, WebkitMaskImage: maskImage }
+  const maskImage = useMotionTemplate`radial-gradient(180px at ${mouseX}px ${mouseY}px, white, transparent)`
+  const style = { maskImage, WebkitMaskImage: maskImage }
 
   return (
     <div className="pointer-events-none">
@@ -106,11 +106,11 @@ function ResourcePattern({ mouseX, mouseY, ...gridProps }) {
 }
 
 function Resource({ resource }) {
-  let mouseX = useMotionValue(0)
-  let mouseY = useMotionValue(0)
+  const mouseX = useMotionValue(0)
+  const mouseY = useMotionValue(0)
 
   function onMouseMove({ currentTarget, clientX, clientY }) {
-    let { left, top } = currentTarget.getBoundingClientRect()
+    const { left, top } = currentTarget.getBoundingClientRect()
     mouseX.set(clientX - left)
     mouseY.set(clientY - top)
   }
diff --git a/apps/docs/src/components/Search.jsx b/apps/docs/src/components/Search.jsx
index 28e1f0f01..78b345d69 100644
--- a/apps/docs/src/components/Search.jsx
+++ b/apps/docs/src/components/Search.jsx
@@ -12,11 +12,11 @@ const searchClient = algoliasearch(
 )
 
 function useAutocomplete() {
-  let id = useId()
-  let router = useRouter()
-  let [autocompleteState, setAutocompleteState] = useState({})
+  const id = useId()
+  const router = useRouter()
+  const [autocompleteState, setAutocompleteState] = useState({})
 
-  let [autocomplete] = useState(() =>
+  const [autocomplete] = useState(() =>
     createAutocomplete({
       id,
       placeholder: 'Find something...',
@@ -74,13 +74,13 @@ function useAutocomplete() {
 }
 
 function resolveResult(result) {
-  let allLevels = Object.keys(result.hierarchy)
-  let hierarchy = Object.entries(result._highlightResult.hierarchy).filter(
+  const allLevels = Object.keys(result.hierarchy)
+  const hierarchy = Object.entries(result._highlightResult.hierarchy).filter(
     ([, { value }]) => Boolean(value)
   )
-  let levels = hierarchy.map(([level]) => level)
+  const levels = hierarchy.map(([level]) => level)
 
-  let level =
+  const level =
     result.type === 'content'
       ? levels.pop()
       : levels
@@ -123,7 +123,7 @@ function NoResultsIcon(props) {
 }
 
 function LoadingIcon(props) {
-  let id = useId()
+  const id = useId()
 
   return (
     <svg viewBox="0 0 20 20" fill="none" aria-hidden="true" {...props}>
@@ -152,8 +152,8 @@ function LoadingIcon(props) {
 }
 
 function SearchResult({ result, resultIndex, autocomplete, collection }) {
-  let id = useId()
-  let { titleHtml, hierarchyHtml } = resolveResult(result)
+  const id = useId()
+  const { titleHtml, hierarchyHtml } = resolveResult(result)
 
   return (
     <li
@@ -234,7 +234,7 @@ const SearchInput = forwardRef(function SearchInput(
   { autocomplete, autocompleteState, onClose },
   inputRef
 ) {
-  let inputProps = autocomplete.getInputProps({})
+  const inputProps = autocomplete.getInputProps({})
 
   return (
     <div className="group relative flex h-12">
@@ -291,7 +291,7 @@ function AlgoliaLogo(props) {
 }
 
 function SearchButton(props) {
-  let [modifierKey, setModifierKey] = useState()
+  const [modifierKey, setModifierKey] = useState()
 
   useEffect(() => {
     setModifierKey(
@@ -326,11 +326,11 @@ function SearchButton(props) {
 }
 
 function SearchDialog({ open, setOpen, className }) {
-  let router = useRouter()
-  let formRef = useRef()
-  let panelRef = useRef()
-  let inputRef = useRef()
-  let { autocomplete, autocompleteState } = useAutocomplete()
+  const router = useRouter()
+  const formRef = useRef()
+  const panelRef = useRef()
+  const inputRef = useRef()
+  const { autocomplete, autocompleteState } = useAutocomplete()
 
   useEffect(() => {
     if (!open) {
@@ -445,8 +445,8 @@ function SearchDialog({ open, setOpen, className }) {
 }
 
 function useSearchProps() {
-  let buttonRef = useRef()
-  let [open, setOpen] = useState(false)
+  const buttonRef = useRef()
+  const [open, setOpen] = useState(false)
 
   return {
     buttonProps: {
@@ -458,7 +458,7 @@ function useSearchProps() {
     dialogProps: {
       open,
       setOpen(open) {
-        let { width, height } = buttonRef.current.getBoundingClientRect()
+        const { width, height } = buttonRef.current.getBoundingClientRect()
         if (!open || (width !== 0 && height !== 0)) {
           setOpen(open)
         }
@@ -468,8 +468,8 @@ function useSearchProps() {
 }
 
 export function Search() {
-  let [modifierKey, setModifierKey] = useState()
-  let { buttonProps, dialogProps } = useSearchProps()
+  const [modifierKey, setModifierKey] = useState()
+  const { buttonProps, dialogProps } = useSearchProps()
 
   useEffect(() => {
     setModifierKey(
@@ -497,7 +497,7 @@ export function Search() {
 }
 
 export function MobileSearch() {
-  let { buttonProps, dialogProps } = useSearchProps()
+  const { buttonProps, dialogProps } = useSearchProps()
 
   return (
     <div className="contents lg:hidden">
diff --git a/apps/docs/src/components/SectionProvider.jsx b/apps/docs/src/components/SectionProvider.jsx
index 95f1496c5..3e5c3a872 100644
--- a/apps/docs/src/components/SectionProvider.jsx
+++ b/apps/docs/src/components/SectionProvider.jsx
@@ -20,47 +20,45 @@ function createSectionStore(sections) {
           : { visibleSections }
       ),
     registerHeading: ({ id, ref, offsetRem }) =>
-      set((state) => {
-        return {
-          sections: state.sections.map((section) => {
-            if (section.id === id) {
-              return {
-                ...section,
-                headingRef: ref,
-                offsetRem,
-              }
+      set((state) => ({
+        sections: state.sections.map((section) => {
+          if (section.id === id) {
+            return {
+              ...section,
+              headingRef: ref,
+              offsetRem,
             }
-            return section
-          }),
-        }
-      }),
+          }
+          return section
+        }),
+      })),
   }))
 }
 
 function useVisibleSections(sectionStore) {
-  let setVisibleSections = useStore(sectionStore, (s) => s.setVisibleSections)
-  let sections = useStore(sectionStore, (s) => s.sections)
+  const setVisibleSections = useStore(sectionStore, (s) => s.setVisibleSections)
+  const sections = useStore(sectionStore, (s) => s.sections)
 
   useEffect(() => {
     function checkVisibleSections() {
-      let { innerHeight, scrollY } = window
-      let newVisibleSections = []
+      const { innerHeight, scrollY } = window
+      const newVisibleSections = []
 
       for (
         let sectionIndex = 0;
         sectionIndex < sections.length;
         sectionIndex++
       ) {
-        let { id, headingRef, offsetRem } = sections[sectionIndex]
-        let offset = remToPx(offsetRem)
-        let top = headingRef.current.getBoundingClientRect().top + scrollY
+        const { id, headingRef, offsetRem } = sections[sectionIndex]
+        const offset = remToPx(offsetRem)
+        const top = headingRef.current.getBoundingClientRect().top + scrollY
 
         if (sectionIndex === 0 && top - offset > scrollY) {
           newVisibleSections.push('_top')
         }
 
-        let nextSection = sections[sectionIndex + 1]
-        let bottom =
+        const nextSection = sections[sectionIndex + 1]
+        const bottom =
           (nextSection?.headingRef.current.getBoundingClientRect().top ??
             Infinity) +
           scrollY -
@@ -78,7 +76,7 @@ function useVisibleSections(sectionStore) {
       setVisibleSections(newVisibleSections)
     }
 
-    let raf = window.requestAnimationFrame(() => checkVisibleSections())
+    const raf = window.requestAnimationFrame(() => checkVisibleSections())
     window.addEventListener('scroll', checkVisibleSections, { passive: true })
     window.addEventListener('resize', checkVisibleSections)
 
@@ -96,7 +94,7 @@ const useIsomorphicLayoutEffect =
   typeof window === 'undefined' ? useEffect : useLayoutEffect
 
 export function SectionProvider({ sections, children }) {
-  let [sectionStore] = useState(() => createSectionStore(sections))
+  const [sectionStore] = useState(() => createSectionStore(sections))
 
   useVisibleSections(sectionStore)
 
@@ -112,6 +110,6 @@ export function SectionProvider({ sections, children }) {
 }
 
 export function useSectionStore(selector) {
-  let store = useContext(SectionStoreContext)
+  const store = useContext(SectionStoreContext)
   return useStore(store, selector)
 }
diff --git a/apps/docs/src/lib/remToPx.js b/apps/docs/src/lib/remToPx.js
index 9ae9628d6..0e684ec9c 100644
--- a/apps/docs/src/lib/remToPx.js
+++ b/apps/docs/src/lib/remToPx.js
@@ -1,5 +1,5 @@
 export function remToPx(remValue) {
-  let rootFontSize =
+  const rootFontSize =
     typeof window === 'undefined'
       ? 16
       : parseFloat(window.getComputedStyle(document.documentElement).fontSize)
diff --git a/apps/docs/src/pages/_app.jsx b/apps/docs/src/pages/_app.jsx
index 365a35463..fe7265818 100644
--- a/apps/docs/src/pages/_app.jsx
+++ b/apps/docs/src/pages/_app.jsx
@@ -18,7 +18,7 @@ Router.events.on('routeChangeComplete', onRouteChange)
 Router.events.on('routeChangeError', onRouteChange)
 
 export default function App({ Component, pageProps }) {
-  let router = useRouter()
+  const router = useRouter()
 
   return (
     <>
@@ -39,7 +39,7 @@ export default function App({ Component, pageProps }) {
         defer
         data-domain="docs.plane.so"
         src="https://plausible.io/js/script.js"
-      ></script>
+      />
     </>
   )
 }

From f87a9e9d3a3e87d15108afbc4be8ae8c33975f34 Mon Sep 17 00:00:00 2001
From: pablohashescobar <118773738+pablohashescobar@users.noreply.github.com>
Date: Mon, 30 Jan 2023 00:58:38 +0530
Subject: [PATCH 05/15] feat: plane API gateway (#188)

* feat: create model for api token and endpoint for creating api tokens

* feat: add list and delete endpoints for tokens
---
 apiserver/plane/api/serializers/__init__.py  |  4 +-
 apiserver/plane/api/serializers/api_token.py |  8 +++
 apiserver/plane/api/urls.py                  |  7 +++
 apiserver/plane/api/views/__init__.py        |  2 +
 apiserver/plane/api/views/api_token.py       | 62 ++++++++++++++++++++
 apiserver/plane/db/models/__init__.py        |  2 +
 apiserver/plane/db/models/api_token.py       | 39 ++++++++++++
 apiserver/plane/db/models/user.py            |  3 +-
 8 files changed, 125 insertions(+), 2 deletions(-)
 create mode 100644 apiserver/plane/api/serializers/api_token.py
 create mode 100644 apiserver/plane/api/views/api_token.py
 create mode 100644 apiserver/plane/db/models/api_token.py

diff --git a/apiserver/plane/api/serializers/__init__.py b/apiserver/plane/api/serializers/__init__.py
index ba494ec9e..8d43d90ff 100644
--- a/apiserver/plane/api/serializers/__init__.py
+++ b/apiserver/plane/api/serializers/__init__.py
@@ -38,4 +38,6 @@ from .issue import (
     IssueStateSerializer,
 )
 
-from .module import ModuleWriteSerializer, ModuleSerializer, ModuleIssueSerializer
\ No newline at end of file
+from .module import ModuleWriteSerializer, ModuleSerializer, ModuleIssueSerializer
+
+from .api_token import APITokenSerializer
\ No newline at end of file
diff --git a/apiserver/plane/api/serializers/api_token.py b/apiserver/plane/api/serializers/api_token.py
new file mode 100644
index 000000000..247b3f0e7
--- /dev/null
+++ b/apiserver/plane/api/serializers/api_token.py
@@ -0,0 +1,8 @@
+from .base import BaseSerializer
+from plane.db.models import APIToken
+
+
+class APITokenSerializer(BaseSerializer):
+    class Meta:
+        model = APIToken
+        fields = "__all__"
diff --git a/apiserver/plane/api/urls.py b/apiserver/plane/api/urls.py
index 38d2b4013..98c2e87d2 100644
--- a/apiserver/plane/api/urls.py
+++ b/apiserver/plane/api/urls.py
@@ -84,6 +84,9 @@ from plane.api.views import (
     ModuleViewSet,
     ModuleIssueViewSet,
     ## End Modules
+    # Api Tokens
+    ApiTokenEndpoint,
+    ## End Api Tokens
 )
 
 
@@ -679,4 +682,8 @@ urlpatterns = [
         name="project-module-issues",
     ),
     ## End Modules
+    # API Tokens
+    path("api-tokens/", ApiTokenEndpoint.as_view(), name="api-token"),
+    path("api-tokens/<uuid:pk>/", ApiTokenEndpoint.as_view(), name="api-token"),
+    ## End API Tokens
 ]
diff --git a/apiserver/plane/api/views/__init__.py b/apiserver/plane/api/views/__init__.py
index 933315277..1212e0dca 100644
--- a/apiserver/plane/api/views/__init__.py
+++ b/apiserver/plane/api/views/__init__.py
@@ -72,3 +72,5 @@ from .authentication import (
 )
 
 from .module import ModuleViewSet, ModuleIssueViewSet
+
+from .api_token import ApiTokenEndpoint
\ No newline at end of file
diff --git a/apiserver/plane/api/views/api_token.py b/apiserver/plane/api/views/api_token.py
new file mode 100644
index 000000000..4ed3d9de0
--- /dev/null
+++ b/apiserver/plane/api/views/api_token.py
@@ -0,0 +1,62 @@
+# Python import
+from uuid import uuid4
+
+# Third party
+from rest_framework.response import Response
+from rest_framework import status
+from sentry_sdk import capture_exception
+
+# Module import
+from .base import BaseAPIView
+from plane.db.models import APIToken
+from plane.api.serializers import APITokenSerializer
+
+
+class ApiTokenEndpoint(BaseAPIView):
+    def post(self, request):
+        try:
+
+            label = request.data.get("label", str(uuid4().hex))
+
+            api_token = APIToken.objects.create(
+                label=label,
+                user=request.user,
+            )
+
+            serializer = APITokenSerializer(api_token)
+            return Response(serializer.data, status=status.HTTP_201_CREATED)
+
+        except Exception as e:
+            capture_exception(e)
+            return Response(
+                {"error": "Something went wrong please try again later"},
+                status=status.HTTP_400_BAD_REQUEST,
+            )
+
+    def get(self, request):
+        try:
+            api_tokens = APIToken.objects.filter(user=request.user)
+            serializer = APITokenSerializer(api_tokens, many=True)
+            return Response(serializer.data, status=status.HTTP_200_OK)
+        except Exception as e:
+            capture_exception(e)
+            return Response(
+                {"error": "Something went wrong please try again later"},
+                status=status.HTTP_400_BAD_REQUEST,
+            )
+
+    def delete(self, request, pk):
+        try:
+            api_token = APIToken.objects.get(pk=pk)
+            api_token.delete()
+            return Response(status=status.HTTP_204_NO_CONTENT)
+        except APIToken.DoesNotExist:
+            return Response(
+                {"error": "Token does not exists"}, status=status.HTTP_400_BAD_REQUEST
+            )
+        except Exception as e:
+            capture_exception(e)
+            return Response(
+                {"error": "Something went wrong please try again later"},
+                status=status.HTTP_400_BAD_REQUEST,
+            )
diff --git a/apiserver/plane/db/models/__init__.py b/apiserver/plane/db/models/__init__.py
index b6a19b67a..ef7ad5b8d 100644
--- a/apiserver/plane/db/models/__init__.py
+++ b/apiserver/plane/db/models/__init__.py
@@ -38,3 +38,5 @@ from .shortcut import Shortcut
 from .view import View
 
 from .module import Module, ModuleMember, ModuleIssue, ModuleLink 
+
+from .api_token import APIToken
\ No newline at end of file
diff --git a/apiserver/plane/db/models/api_token.py b/apiserver/plane/db/models/api_token.py
new file mode 100644
index 000000000..32ba013bc
--- /dev/null
+++ b/apiserver/plane/db/models/api_token.py
@@ -0,0 +1,39 @@
+# Python imports
+from uuid import uuid4
+
+# Django imports
+from django.db import models
+from django.conf import settings
+
+from .base import BaseModel
+
+
+def generate_label_token():
+    return uuid4().hex
+
+
+def generate_token():
+    return uuid4().hex + uuid4().hex
+
+
+class APIToken(BaseModel):
+
+    token = models.CharField(max_length=255, unique=True, default=generate_token)
+    label = models.CharField(max_length=255, default=generate_label_token)
+    user = models.ForeignKey(
+        settings.AUTH_USER_MODEL,
+        on_delete=models.CASCADE,
+        related_name="bot_tokens",
+    )
+    user_type = models.PositiveSmallIntegerField(
+        choices=((0, "Human"), (1, "Bot")), default=0
+    )
+
+    class Meta:
+        verbose_name = "API Token"
+        verbose_name_plural = "API Tokems"
+        db_table = "api_tokens"
+        ordering = ("-created_at",)
+
+    def __str__(self):
+        return str(self.user.name)
diff --git a/apiserver/plane/db/models/user.py b/apiserver/plane/db/models/user.py
index 1621b19ea..896681808 100644
--- a/apiserver/plane/db/models/user.py
+++ b/apiserver/plane/db/models/user.py
@@ -68,6 +68,7 @@ class User(AbstractBaseUser, PermissionsMixin):
     last_workspace_id = models.UUIDField(null=True)
     my_issues_prop = models.JSONField(null=True)
     role = models.CharField(max_length=300, null=True, blank=True)
+    is_bot = models.BooleanField(default=False)
 
     USERNAME_FIELD = "email"
 
@@ -101,7 +102,7 @@ class User(AbstractBaseUser, PermissionsMixin):
 @receiver(post_save, sender=User)
 def send_welcome_email(sender, instance, created, **kwargs):
     try:
-        if created:
+        if created and not instance.is_bot:
             first_name = instance.first_name.capitalize()
             to_email = instance.email
             from_email_string = f"Team Plane <team@mailer.plane.so>"

From 46973149bffb5b239cc9ac8b632b648b852a8915 Mon Sep 17 00:00:00 2001
From: vamsi <vamsi.kurama@gmail.com>
Date: Mon, 30 Jan 2023 01:20:05 +0530
Subject: [PATCH 06/15] dev: migrations for gateway proxy related models

---
 .../db/migrations/0018_auto_20230130_0119.py  | 57 +++++++++++++++++++
 1 file changed, 57 insertions(+)
 create mode 100644 apiserver/plane/db/migrations/0018_auto_20230130_0119.py

diff --git a/apiserver/plane/db/migrations/0018_auto_20230130_0119.py b/apiserver/plane/db/migrations/0018_auto_20230130_0119.py
new file mode 100644
index 000000000..500bc3b28
--- /dev/null
+++ b/apiserver/plane/db/migrations/0018_auto_20230130_0119.py
@@ -0,0 +1,57 @@
+# Generated by Django 3.2.16 on 2023-01-29 19:49
+
+from django.conf import settings
+from django.db import migrations, models
+import django.db.models.deletion
+import plane.db.models.api_token
+import uuid
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('db', '0017_alter_workspace_unique_together'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='user',
+            name='is_bot',
+            field=models.BooleanField(default=False),
+        ),
+        migrations.AlterField(
+            model_name='issue',
+            name='description',
+            field=models.JSONField(blank=True, null=True),
+        ),
+        migrations.AlterField(
+            model_name='issue',
+            name='description_html',
+            field=models.TextField(blank=True, null=True),
+        ),
+        migrations.AlterField(
+            model_name='issue',
+            name='description_stripped',
+            field=models.TextField(blank=True, null=True),
+        ),
+        migrations.CreateModel(
+            name='APIToken',
+            fields=[
+                ('created_at', models.DateTimeField(auto_now_add=True, verbose_name='Created At')),
+                ('updated_at', models.DateTimeField(auto_now=True, verbose_name='Last Modified At')),
+                ('id', models.UUIDField(db_index=True, default=uuid.uuid4, editable=False, primary_key=True, serialize=False, unique=True)),
+                ('token', models.CharField(default=plane.db.models.api_token.generate_token, max_length=255, unique=True)),
+                ('label', models.CharField(default=plane.db.models.api_token.generate_label_token, max_length=255)),
+                ('user_type', models.PositiveSmallIntegerField(choices=[(0, 'Human'), (1, 'Bot')], default=0)),
+                ('created_by', models.ForeignKey(null=True, on_delete=django.db.models.deletion.SET_NULL, related_name='apitoken_created_by', to=settings.AUTH_USER_MODEL, verbose_name='Created By')),
+                ('updated_by', models.ForeignKey(null=True, on_delete=django.db.models.deletion.SET_NULL, related_name='apitoken_updated_by', to=settings.AUTH_USER_MODEL, verbose_name='Last Modified By')),
+                ('user', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='bot_tokens', to=settings.AUTH_USER_MODEL)),
+            ],
+            options={
+                'verbose_name': 'API Token',
+                'verbose_name_plural': 'API Tokems',
+                'db_table': 'api_tokens',
+                'ordering': ('-created_at',),
+            },
+        ),
+    ]

From 7ca1aef2ad2d7a57df4a606a0ea7ded4eb6044a9 Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com>
Date: Mon, 30 Jan 2023 19:35:18 +0530
Subject: [PATCH 07/15] fix: fetch issue view context props error (#205)

* fix: build errors in docs

* fix: fetching issue view props error
---
 apps/app/contexts/issue-view.context.tsx | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/apps/app/contexts/issue-view.context.tsx b/apps/app/contexts/issue-view.context.tsx
index 8725a1bf6..149c1c31b 100644
--- a/apps/app/contexts/issue-view.context.tsx
+++ b/apps/app/contexts/issue-view.context.tsx
@@ -1,4 +1,4 @@
-import { createContext, useCallback, useReducer } from "react";
+import { createContext, useCallback, useEffect, useReducer } from "react";
 
 import { useRouter } from "next/router";
 
@@ -24,6 +24,7 @@ type IssueViewProps = {
 
 type ReducerActionType = {
   type:
+    | "REHYDRATE_THEME"
     | "SET_ISSUE_VIEW"
     | "SET_ORDER_BY_PROPERTY"
     | "SET_FILTER_ISSUES"
@@ -65,6 +66,12 @@ export const reducer: ReducerFunctionType = (state, action) => {
   const { type, payload } = action;
 
   switch (type) {
+    case "REHYDRATE_THEME": {
+      let collapsed: any = localStorage.getItem("collapsed");
+      collapsed = collapsed ? JSON.parse(collapsed) : false;
+      return { ...initialState, ...payload, collapsed };
+    }
+
     case "SET_ISSUE_VIEW": {
       const newState = {
         ...state,
@@ -260,6 +267,13 @@ export const IssueViewContextProvider: React.FC<{ children: React.ReactNode }> =
     saveDataToServer(workspaceSlug as string, projectId as string, myViewProps?.default_props);
   }, [projectId, workspaceSlug, myViewProps]);
 
+  useEffect(() => {
+    dispatch({
+      type: "REHYDRATE_THEME",
+      payload: myViewProps?.view_props,
+    });
+  }, [myViewProps]);
+
   return (
     <issueViewContext.Provider
       value={{

From 6b89ee2a559af087ff7e2cad586fb27110f699da Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Mon, 30 Jan 2023 19:37:25 +0530
Subject: [PATCH 08/15] fix: shortcut ui, Issue title resizing, comment
 resizing, kanban scroll fixes (#206)

* fix: help shortcut ui fix

* fix: issue title resizing ui fix

* fix: issue comment resizing ui fix

* feat: circular progress bar added

* feat: module card delete added

* fix: kanban view scroll fix

* chore: shortcut command updated

* fix: shortcut ui fix

---------

Co-authored-by: Anmol Singh Bhatia <anmolsinghbhatia1001@gmail.com>
---
 apps/app/components/command-palette/index.tsx |  58 ++---
 .../components/command-palette/shortcuts.tsx  |  16 +-
 .../common/bulk-delete-issues-modal.tsx       |   5 +-
 .../common/existing-issues-list-modal.tsx     |   5 +-
 .../components/issues/description-form.tsx    |  24 +-
 .../project/cycles/board-view/index.tsx       |   2 +-
 .../cycles/cycle-detail-sidebar/index.tsx     |  11 +-
 .../project/cycles/stats-view/index.tsx       |   2 +-
 .../project/issues/BoardView/index.tsx        |   2 +-
 .../issue-detail-sidebar/select-blocked.tsx   |   5 +-
 .../issue-detail-sidebar/select-blocker.tsx   |   5 +-
 .../project/issues/issues-list-modal.tsx      |   5 +-
 .../project/modules/board-view/index.tsx      |   2 +-
 .../modules/module-detail-sidebar/index.tsx   |  11 +-
 .../project/modules/single-module-card.tsx    | 209 ++++++++++--------
 .../app/components/rich-text-editor/index.tsx |   4 +-
 .../app/components/workspace/help-section.tsx |   2 +-
 apps/app/layouts/navbar/main-sidebar.tsx      |   2 +-
 apps/app/package.json                         |   1 +
 apps/app/pages/[workspaceSlug]/index.tsx      |   3 +-
 .../pages/[workspaceSlug]/me/my-issues.tsx    |   5 +-
 .../projects/[projectId]/cycles/index.tsx     |   4 +-
 .../projects/[projectId]/issues/index.tsx     |   4 +-
 .../projects/[projectId]/modules/index.tsx    |   4 +-
 .../pages/[workspaceSlug]/projects/index.tsx  |   5 +-
 apps/app/styles/editor.css                    |   4 -
 pnpm-lock.yaml                                |  10 +
 27 files changed, 232 insertions(+), 178 deletions(-)

diff --git a/apps/app/components/command-palette/index.tsx b/apps/app/components/command-palette/index.tsx
index c4deb7d5b..9e6dfc860 100644
--- a/apps/app/components/command-palette/index.tsx
+++ b/apps/app/components/command-palette/index.tsx
@@ -97,32 +97,38 @@ const CommandPalette: React.FC = () => {
 
   const handleKeyDown = useCallback(
     (e: KeyboardEvent) => {
-      if ((e.ctrlKey || e.metaKey) && e.key === "/") {
-        e.preventDefault();
-        setIsPaletteOpen(true);
-      } else if ((e.ctrlKey || e.metaKey) && e.key === "i") {
-        e.preventDefault();
-        setIsIssueModalOpen(true);
-      } else if ((e.ctrlKey || e.metaKey) && e.key === "p") {
-        e.preventDefault();
-        setIsProjectModalOpen(true);
-      } else if ((e.ctrlKey || e.metaKey) && e.key === "b") {
-        e.preventDefault();
-        toggleCollapsed();
-      } else if ((e.ctrlKey || e.metaKey) && e.key === "h") {
-        e.preventDefault();
-        setIsShortcutsModalOpen(true);
-      } else if ((e.ctrlKey || e.metaKey) && e.key === "q") {
-        e.preventDefault();
-        setIsCreateCycleModalOpen(true);
-      } else if ((e.ctrlKey || e.metaKey) && e.key === "m") {
-        e.preventDefault();
-        setIsCreateModuleModalOpen(true);
-      } else if ((e.ctrlKey || e.metaKey) && e.key === "d") {
-        e.preventDefault();
-        setIsBulkDeleteIssuesModalOpen(true);
-      } else if ((e.ctrlKey || e.metaKey) && e.altKey && e.key === "c") {
-        e.preventDefault();
+      if (
+        !(e.target instanceof HTMLTextAreaElement) &&
+        !(e.target instanceof HTMLInputElement) &&
+        !(e.target as Element).classList?.contains("remirror-editor")
+      ) {
+        if ((e.ctrlKey || e.metaKey) && e.key === "k") {
+          e.preventDefault();
+          setIsPaletteOpen(true);
+        } else if (e.key === "c") {
+          e.preventDefault();
+          setIsIssueModalOpen(true);
+        } else if (e.key === "p") {
+          e.preventDefault();
+          setIsProjectModalOpen(true);
+        } else if ((e.ctrlKey || e.metaKey) && e.key === "b") {
+          e.preventDefault();
+          toggleCollapsed();
+        } else if (e.key === "h") {
+          e.preventDefault();
+          setIsShortcutsModalOpen(true);
+        } else if (e.key === "q") {
+          e.preventDefault();
+          setIsCreateCycleModalOpen(true);
+        } else if (e.key === "m") {
+          e.preventDefault();
+          setIsCreateModuleModalOpen(true);
+        } else if (e.key === "Delete") {
+          e.preventDefault();
+          setIsBulkDeleteIssuesModalOpen(true);
+        } else if ((e.ctrlKey || e.metaKey) && e.altKey && e.key === "c") {
+          e.preventDefault();
+        }
 
         if (!router.query.issueId) return;
 
diff --git a/apps/app/components/command-palette/shortcuts.tsx b/apps/app/components/command-palette/shortcuts.tsx
index 39dc7bcff..d073b7076 100644
--- a/apps/app/components/command-palette/shortcuts.tsx
+++ b/apps/app/components/command-palette/shortcuts.tsx
@@ -15,7 +15,7 @@ const shortcuts = [
   {
     title: "Navigation",
     shortcuts: [
-      { keys: "ctrl,/", description: "To open navigator" },
+      { keys: "ctrl,cmd,k", description: "To open navigator" },
       { keys: "↑", description: "Move up" },
       { keys: "↓", description: "Move down" },
       { keys: "←", description: "Move left" },
@@ -27,14 +27,14 @@ const shortcuts = [
   {
     title: "Common",
     shortcuts: [
-      { keys: "ctrl,p", description: "To create project" },
-      { keys: "ctrl,i", description: "To create issue" },
-      { keys: "ctrl,q", description: "To create cycle" },
-      { keys: "ctrl,m", description: "To create module" },
-      { keys: "ctrl,d", description: "To bulk delete issues" },
-      { keys: "ctrl,h", description: "To open shortcuts guide" },
+      { keys: "p", description: "To create project" },
+      { keys: "c", description: "To create issue" },
+      { keys: "q", description: "To create cycle" },
+      { keys: "m", description: "To create module" },
+      { keys: "Delete", description: "To bulk delete issues" },
+      { keys: "h", description: "To open shortcuts guide" },
       {
-        keys: "ctrl,alt,c",
+        keys: "ctrl,cmd,alt,c",
         description: "To copy issue url when on issue detail page.",
       },
     ],
diff --git a/apps/app/components/common/bulk-delete-issues-modal.tsx b/apps/app/components/common/bulk-delete-issues-modal.tsx
index e46f7eea8..8b8125b48 100644
--- a/apps/app/components/common/bulk-delete-issues-modal.tsx
+++ b/apps/app/components/common/bulk-delete-issues-modal.tsx
@@ -214,10 +214,7 @@ const BulkDeleteIssuesModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
                         <LayerDiagonalIcon height="56" width="56" />
                         <h3 className="text-gray-500">
                           No issues found. Create a new issue with{" "}
-                          <pre className="inline rounded bg-gray-100 px-2 py-1">
-                            Ctrl/Command + I
-                          </pre>
-                          .
+                          <pre className="inline rounded bg-gray-100 px-2 py-1">C</pre>.
                         </h3>
                       </div>
                     )}
diff --git a/apps/app/components/common/existing-issues-list-modal.tsx b/apps/app/components/common/existing-issues-list-modal.tsx
index c87508e55..5179facd4 100644
--- a/apps/app/components/common/existing-issues-list-modal.tsx
+++ b/apps/app/components/common/existing-issues-list-modal.tsx
@@ -189,10 +189,7 @@ const ExistingIssuesListModal: React.FC<Props> = ({
                               <LayerDiagonalIcon height="56" width="56" />
                               <h3 className="text-gray-500">
                                 No issues found. Create a new issue with{" "}
-                                <pre className="inline rounded bg-gray-100 px-2 py-1">
-                                  Ctrl/Command + I
-                                </pre>
-                                .
+                                <pre className="inline rounded bg-gray-100 px-2 py-1">C</pre>.
                               </h3>
                             </div>
                           )}
diff --git a/apps/app/components/issues/description-form.tsx b/apps/app/components/issues/description-form.tsx
index 441efedc5..4a484d819 100644
--- a/apps/app/components/issues/description-form.tsx
+++ b/apps/app/components/issues/description-form.tsx
@@ -1,4 +1,4 @@
-import { FC, useEffect, useState } from "react";
+import { FC, useEffect, useRef, useState } from "react";
 import dynamic from "next/dynamic";
 // types
 import { IIssue } from "types";
@@ -33,10 +33,10 @@ export const IssueDescriptionForm: FC<IssueDetailsProps> = ({ issue, handleSubmi
   //   description: issue?.description,
   //   description_html: issue?.description_html,
   // });
-
   const [issueName, setIssueName] = useState(issue?.name);
   const [issueDescription, setIssueDescription] = useState(issue?.description);
   const [issueDescriptionHTML, setIssueDescriptionHTML] = useState(issue?.description_html);
+  const textareaRef = useRef<HTMLTextAreaElement | null>(null);
 
   // hooks
   const formValues = useDebounce(
@@ -50,24 +50,34 @@ export const IssueDescriptionForm: FC<IssueDetailsProps> = ({ issue, handleSubmi
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [handleSubmit, stringFromValues]);
 
+  useEffect(() => {
+    if (textareaRef && textareaRef.current) {
+      textareaRef.current.style.height = "0px";
+      const scrollHeight = textareaRef.current.scrollHeight;
+      textareaRef.current.style.height = scrollHeight + "px";
+    }
+  }, [issueName]);
+
   return (
     <div>
-      <Input
+      <textarea
         id="name"
         placeholder="Enter issue name"
         name="name"
-        autoComplete="off"
         value={issueName}
-        onChange={(e) => setIssueName(e.target.value)}
-        mode="transparent"
-        className="text-xl font-medium"
+        ref={textareaRef}
+        rows={1}
+        onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => setIssueName(e.target.value)}
         required={true}
+        className="no-scrollbar w-full px-3 py-2 outline-none rounded border-none bg-transparent ring-0 transition-all focus:ring-1 focus:ring-theme text-xl font-medium resize-none"
       />
+
       <RemirrorRichTextEditor
         value={issueDescription}
         placeholder="Enter Your Text..."
         onJSONChange={(json) => setIssueDescription(json)}
         onHTMLChange={(html) => setIssueDescriptionHTML(html)}
+        customClassName="min-h-[150px]"
       />
     </div>
   );
diff --git a/apps/app/components/project/cycles/board-view/index.tsx b/apps/app/components/project/cycles/board-view/index.tsx
index a87642f30..ee37b9c75 100644
--- a/apps/app/components/project/cycles/board-view/index.tsx
+++ b/apps/app/components/project/cycles/board-view/index.tsx
@@ -126,7 +126,7 @@ const CyclesBoardView: React.FC<Props> = ({
   return (
     <>
       {groupedByIssues ? (
-        <div className="h-screen w-full">
+        <div className="h-[calc(100vh-157px)] lg:h-[calc(100vh-115px)] w-full">
           <DragDropContext onDragEnd={handleOnDragEnd}>
             <div className="h-full w-full overflow-hidden">
               <div className="h-full w-full">
diff --git a/apps/app/components/project/cycles/cycle-detail-sidebar/index.tsx b/apps/app/components/project/cycles/cycle-detail-sidebar/index.tsx
index 08ef636dd..3fa73c913 100644
--- a/apps/app/components/project/cycles/cycle-detail-sidebar/index.tsx
+++ b/apps/app/components/project/cycles/cycle-detail-sidebar/index.tsx
@@ -14,6 +14,9 @@ import cyclesService from "services/cycles.service";
 import useToast from "hooks/use-toast";
 // ui
 import { Loader } from "components/ui";
+//progress-bar
+import { CircularProgressbar } from "react-circular-progressbar";
+import "react-circular-progressbar/dist/styles.css";
 // helpers
 import { copyTextToClipboard } from "helpers/string.helper";
 import { groupBy } from "helpers/array.helper";
@@ -135,7 +138,13 @@ const CycleDetailSidebar: React.FC<Props> = ({ cycle, isOpen, cycleIssues }) =>
                 </div>
                 <div className="flex items-center gap-2 sm:basis-1/2">
                   <div className="grid flex-shrink-0 place-items-center">
-                    <span className="h-4 w-4 rounded-full border-2 border-gray-300 border-r-blue-500" />
+                    <span className="h-4 w-4">
+                      <CircularProgressbar
+                        value={groupedIssues.completed.length}
+                        maxValue={cycleIssues?.length}
+                        strokeWidth={10}
+                      />
+                    </span>
                   </div>
                   {groupedIssues.completed.length}/{cycleIssues?.length}
                 </div>
diff --git a/apps/app/components/project/cycles/stats-view/index.tsx b/apps/app/components/project/cycles/stats-view/index.tsx
index 4c7ea59ba..58f316464 100644
--- a/apps/app/components/project/cycles/stats-view/index.tsx
+++ b/apps/app/components/project/cycles/stats-view/index.tsx
@@ -64,7 +64,7 @@ const CycleStatsView: React.FC<TCycleStatsViewProps> = ({
           )}
           <h3 className="text-gray-500">
             No {type} {type === "current" ? "cycle" : "cycles"} yet. Create with{" "}
-            <pre className="inline rounded bg-gray-100 px-2 py-1">Ctrl/Command + Q</pre>.
+            <pre className="inline rounded bg-gray-100 px-2 py-1">Q</pre>.
           </h3>
         </div>
       )}
diff --git a/apps/app/components/project/issues/BoardView/index.tsx b/apps/app/components/project/issues/BoardView/index.tsx
index 71d5b3f3d..a2f9c04d2 100644
--- a/apps/app/components/project/issues/BoardView/index.tsx
+++ b/apps/app/components/project/issues/BoardView/index.tsx
@@ -200,7 +200,7 @@ const BoardView: React.FC<Props> = ({ issues, handleDeleteIssue, userAuth }) =>
         }}
       />
       {groupedByIssues ? (
-        <div className="h-screen w-full">
+        <div className="h-[calc(100vh-157px)] lg:h-[calc(100vh-115px)] w-full">
           <DragDropContext onDragEnd={handleOnDragEnd}>
             <div className="h-full w-full overflow-hidden">
               <StrictModeDroppable droppableId="state" type="state" direction="horizontal">
diff --git a/apps/app/components/project/issues/issue-detail/issue-detail-sidebar/select-blocked.tsx b/apps/app/components/project/issues/issue-detail/issue-detail-sidebar/select-blocked.tsx
index 02a3fa299..1c5822e7e 100644
--- a/apps/app/components/project/issues/issue-detail/issue-detail-sidebar/select-blocked.tsx
+++ b/apps/app/components/project/issues/issue-detail/issue-detail-sidebar/select-blocked.tsx
@@ -259,10 +259,7 @@ const SelectBlocked: React.FC<Props> = ({ submitChanges, issuesList, watch }) =>
                             <LayerDiagonalIcon height="56" width="56" />
                             <h3 className="text-gray-500">
                               No issues found. Create a new issue with{" "}
-                              <pre className="inline rounded bg-gray-100 px-2 py-1">
-                                Ctrl/Command + I
-                              </pre>
-                              .
+                              <pre className="inline rounded bg-gray-100 px-2 py-1">C</pre>.
                             </h3>
                           </div>
                         )}
diff --git a/apps/app/components/project/issues/issue-detail/issue-detail-sidebar/select-blocker.tsx b/apps/app/components/project/issues/issue-detail/issue-detail-sidebar/select-blocker.tsx
index 9df9e8266..e2cb85e6f 100644
--- a/apps/app/components/project/issues/issue-detail/issue-detail-sidebar/select-blocker.tsx
+++ b/apps/app/components/project/issues/issue-detail/issue-detail-sidebar/select-blocker.tsx
@@ -258,10 +258,7 @@ const SelectBlocker: React.FC<Props> = ({ submitChanges, issuesList, watch }) =>
                           <LayerDiagonalIcon height="56" width="56" />
                           <h3 className="text-gray-500">
                             No issues found. Create a new issue with{" "}
-                            <pre className="inline rounded bg-gray-100 px-2 py-1">
-                              Ctrl/Command + I
-                            </pre>
-                            .
+                            <pre className="inline rounded bg-gray-100 px-2 py-1">C</pre>.
                           </h3>
                         </div>
                       )}
diff --git a/apps/app/components/project/issues/issues-list-modal.tsx b/apps/app/components/project/issues/issues-list-modal.tsx
index c453b1fea..9c56d6406 100644
--- a/apps/app/components/project/issues/issues-list-modal.tsx
+++ b/apps/app/components/project/issues/issues-list-modal.tsx
@@ -212,10 +212,7 @@ const IssuesListModal: React.FC<Props> = ({
                           <LayerDiagonalIcon height="56" width="56" />
                           <h3 className="text-gray-500">
                             No issues found. Create a new issue with{" "}
-                            <pre className="inline rounded bg-gray-100 px-2 py-1">
-                              Ctrl/Command + I
-                            </pre>
-                            .
+                            <pre className="inline rounded bg-gray-100 px-2 py-1">C</pre>.
                           </h3>
                         </div>
                       )}
diff --git a/apps/app/components/project/modules/board-view/index.tsx b/apps/app/components/project/modules/board-view/index.tsx
index a8cc1644e..4951f80af 100644
--- a/apps/app/components/project/modules/board-view/index.tsx
+++ b/apps/app/components/project/modules/board-view/index.tsx
@@ -129,7 +129,7 @@ const ModulesBoardView: React.FC<Props> = ({
   return (
     <>
       {groupedByIssues ? (
-        <div className="h-screen w-full">
+        <div className="h-[calc(100vh-157px)] lg:h-[calc(100vh-115px)] w-full">
           <DragDropContext onDragEnd={handleOnDragEnd}>
             <div className="h-full w-full overflow-hidden">
               <div className="h-full w-full">
diff --git a/apps/app/components/project/modules/module-detail-sidebar/index.tsx b/apps/app/components/project/modules/module-detail-sidebar/index.tsx
index 0c29f9936..a58816f6a 100644
--- a/apps/app/components/project/modules/module-detail-sidebar/index.tsx
+++ b/apps/app/components/project/modules/module-detail-sidebar/index.tsx
@@ -22,6 +22,9 @@ import SelectLead from "components/project/modules/module-detail-sidebar/select-
 import SelectMembers from "components/project/modules/module-detail-sidebar/select-members";
 import SelectStatus from "components/project/modules/module-detail-sidebar/select-status";
 import ModuleLinkModal from "components/project/modules/module-link-modal";
+//progress-bar
+import { CircularProgressbar } from "react-circular-progressbar";
+import "react-circular-progressbar/dist/styles.css";
 // ui
 import { Loader } from "components/ui";
 // icons
@@ -161,7 +164,13 @@ const ModuleDetailSidebar: React.FC<Props> = ({
                   </div>
                   <div className="flex items-center gap-2 sm:basis-1/2">
                     <div className="grid flex-shrink-0 place-items-center">
-                      <span className="h-4 w-4 rounded-full border-2 border-gray-300 border-r-blue-500" />
+                      <span className="h-4 w-4">
+                        <CircularProgressbar
+                          value={groupedIssues.completed.length}
+                          maxValue={moduleIssues?.length}
+                          strokeWidth={10}
+                        />
+                      </span>
                     </div>
                     {groupedIssues.completed.length}/{moduleIssues?.length}
                   </div>
diff --git a/apps/app/components/project/modules/single-module-card.tsx b/apps/app/components/project/modules/single-module-card.tsx
index ec151f242..7af928b6a 100644
--- a/apps/app/components/project/modules/single-module-card.tsx
+++ b/apps/app/components/project/modules/single-module-card.tsx
@@ -1,14 +1,15 @@
-import React from "react";
+import React, { useState } from "react";
 import Link from "next/link";
 import Image from "next/image";
 import { useRouter } from "next/router";
+import { CalendarDaysIcon, TrashIcon } from "@heroicons/react/24/outline";
+import ConfirmModuleDeletion from "./confirm-module-deletion";
 // icons
-import { CalendarDaysIcon } from "@heroicons/react/24/outline";
 import User from "public/user.png";
 // helpers
 import { renderShortNumericDateFormat } from "helpers/date-time.helper";
 // types
-import { IModule } from "types";
+import { IModule, SelectModuleType } from "types";
 // common
 import { MODULE_STATUS } from "constants/";
 
@@ -19,103 +20,131 @@ type Props = {
 const SingleModuleCard: React.FC<Props> = ({ module }) => {
   const router = useRouter();
   const { workspaceSlug } = router.query;
+  const [moduleDeleteModal, setModuleDeleteModal] = useState(false);
+  const [selectedModuleForDelete, setSelectedModuleForDelete] = useState<SelectModuleType>();
+  const handleDeleteModule = () => {
+    if (!module) return;
+
+    setSelectedModuleForDelete({ ...module, actionType: "delete" });
+    setModuleDeleteModal(true);
+  };
 
   return (
-    <Link href={`/${workspaceSlug}/projects/${module.project}/modules/${module.id}`}>
-      <a className="block cursor-pointer rounded-md border bg-white p-3">
-        {module.name}
-        <div className="mt-4 grid grid-cols-2 gap-2 text-xs md:grid-cols-4">
-          <div className="space-y-2">
-            <h6 className="text-gray-500">LEAD</h6>
-            <div>
-              {module.lead ? (
-                module.lead_detail?.avatar && module.lead_detail.avatar !== "" ? (
-                  <div className="h-5 w-5 rounded-full border-2 border-white">
+    <div className="group/card relative select-none p-2">
+      <div className="absolute top-4 right-4 z-50 bg-red-200 opacity-0 group-hover/card:opacity-100">
+        <button
+          type="button"
+          className="grid h-7 w-7 place-items-center  bg-white p-1 text-red-500 outline-none duration-300 hover:bg-red-50"
+          onClick={() => handleDeleteModule()}
+        >
+          <TrashIcon className="h-4 w-4" />
+        </button>
+      </div>
+      <ConfirmModuleDeletion
+        isOpen={
+          moduleDeleteModal &&
+          !!selectedModuleForDelete &&
+          selectedModuleForDelete.actionType === "delete"
+        }
+        setIsOpen={setModuleDeleteModal}
+        data={selectedModuleForDelete}
+      />
+      <Link href={`/${workspaceSlug}/projects/${module.project}/modules/${module.id}`}>
+        <a className="block cursor-pointer rounded-md border bg-white p-3">
+          {module.name}
+          <div className="mt-4 grid grid-cols-2 gap-2 text-xs md:grid-cols-4">
+            <div className="space-y-2">
+              <h6 className="text-gray-500">LEAD</h6>
+              <div>
+                {module.lead ? (
+                  module.lead_detail?.avatar && module.lead_detail.avatar !== "" ? (
+                    <div className="h-5 w-5 rounded-full border-2 border-white">
+                      <Image
+                        src={module.lead_detail.avatar}
+                        height="100%"
+                        width="100%"
+                        className="rounded-full"
+                        alt={module.lead_detail.first_name}
+                      />
+                    </div>
+                  ) : (
+                    <div className="grid h-5 w-5 place-items-center rounded-full border-2 border-white bg-gray-700 capitalize text-white">
+                      {module.lead_detail?.first_name && module.lead_detail.first_name !== ""
+                        ? module.lead_detail.first_name.charAt(0)
+                        : module.lead_detail?.email.charAt(0)}
+                    </div>
+                  )
+                ) : (
+                  "N/A"
+                )}
+              </div>
+            </div>
+            <div className="space-y-2">
+              <h6 className="text-gray-500">MEMBERS</h6>
+              <div className="flex items-center gap-1 text-xs">
+                {module.members && module.members.length > 0 ? (
+                  module?.members_detail?.map((member, index: number) => (
+                    <div
+                      key={index}
+                      className={`relative z-[1] h-5 w-5 rounded-full ${
+                        index !== 0 ? "-ml-2.5" : ""
+                      }`}
+                    >
+                      {member?.avatar && member.avatar !== "" ? (
+                        <div className="h-5 w-5 rounded-full border-2 border-white bg-white">
+                          <Image
+                            src={member.avatar}
+                            height="100%"
+                            width="100%"
+                            className="rounded-full"
+                            alt={member?.first_name}
+                          />
+                        </div>
+                      ) : (
+                        <div className="grid h-5 w-5 place-items-center rounded-full border-2 border-white bg-gray-700 capitalize text-white">
+                          {member?.first_name && member.first_name !== ""
+                            ? member.first_name.charAt(0)
+                            : member?.email?.charAt(0)}
+                        </div>
+                      )}
+                    </div>
+                  ))
+                ) : (
+                  <div className="h-5 w-5 rounded-full border-2 border-white bg-white">
                     <Image
-                      src={module.lead_detail.avatar}
+                      src={User}
                       height="100%"
                       width="100%"
                       className="rounded-full"
-                      alt={module.lead_detail.first_name}
+                      alt="No user"
                     />
                   </div>
-                ) : (
-                  <div className="grid h-5 w-5 place-items-center rounded-full border-2 border-white bg-gray-700 capitalize text-white">
-                    {module.lead_detail?.first_name && module.lead_detail.first_name !== ""
-                      ? module.lead_detail.first_name.charAt(0)
-                      : module.lead_detail?.email.charAt(0)}
-                  </div>
-                )
-              ) : (
-                "N/A"
-              )}
+                )}
+              </div>
+            </div>
+            <div className="space-y-2">
+              <h6 className="text-gray-500">END DATE</h6>
+              <div className="flex w-min cursor-pointer items-center gap-1 whitespace-nowrap rounded border px-1.5 py-0.5 text-xs shadow-sm">
+                <CalendarDaysIcon className="h-3 w-3" />
+                {renderShortNumericDateFormat(module.target_date ?? "")}
+              </div>
+            </div>
+            <div className="space-y-2">
+              <h6 className="text-gray-500">STATUS</h6>
+              <div className="flex items-center gap-2 capitalize">
+                <span
+                  className="h-2 w-2 flex-shrink-0 rounded-full"
+                  style={{
+                    backgroundColor: MODULE_STATUS.find((s) => s.value === module.status)?.color,
+                  }}
+                />
+                {module.status}
+              </div>
             </div>
           </div>
-          <div className="space-y-2">
-            <h6 className="text-gray-500">MEMBERS</h6>
-            <div className="flex items-center gap-1 text-xs">
-              {module.members && module.members.length > 0 ? (
-                module?.members_detail?.map((member, index: number) => (
-                  <div
-                    key={index}
-                    className={`relative z-[1] h-5 w-5 rounded-full ${
-                      index !== 0 ? "-ml-2.5" : ""
-                    }`}
-                  >
-                    {member?.avatar && member.avatar !== "" ? (
-                      <div className="h-5 w-5 rounded-full border-2 border-white bg-white">
-                        <Image
-                          src={member.avatar}
-                          height="100%"
-                          width="100%"
-                          className="rounded-full"
-                          alt={member?.first_name}
-                        />
-                      </div>
-                    ) : (
-                      <div className="grid h-5 w-5 place-items-center rounded-full border-2 border-white bg-gray-700 capitalize text-white">
-                        {member?.first_name && member.first_name !== ""
-                          ? member.first_name.charAt(0)
-                          : member?.email?.charAt(0)}
-                      </div>
-                    )}
-                  </div>
-                ))
-              ) : (
-                <div className="h-5 w-5 rounded-full border-2 border-white bg-white">
-                  <Image
-                    src={User}
-                    height="100%"
-                    width="100%"
-                    className="rounded-full"
-                    alt="No user"
-                  />
-                </div>
-              )}
-            </div>
-          </div>
-          <div className="space-y-2">
-            <h6 className="text-gray-500">END DATE</h6>
-            <div className="flex w-min cursor-pointer items-center gap-1 whitespace-nowrap rounded border px-1.5 py-0.5 text-xs shadow-sm">
-              <CalendarDaysIcon className="h-3 w-3" />
-              {renderShortNumericDateFormat(module.target_date ?? "")}
-            </div>
-          </div>
-          <div className="space-y-2">
-            <h6 className="text-gray-500">STATUS</h6>
-            <div className="flex items-center gap-2 capitalize">
-              <span
-                className="h-2 w-2 flex-shrink-0 rounded-full"
-                style={{
-                  backgroundColor: MODULE_STATUS.find((s) => s.value === module.status)?.color,
-                }}
-              />
-              {module.status}
-            </div>
-          </div>
-        </div>
-      </a>
-    </Link>
+        </a>
+      </Link>
+    </div>
   );
 };
 
diff --git a/apps/app/components/rich-text-editor/index.tsx b/apps/app/components/rich-text-editor/index.tsx
index cb3796c83..2bddfe5f6 100644
--- a/apps/app/components/rich-text-editor/index.tsx
+++ b/apps/app/components/rich-text-editor/index.tsx
@@ -47,6 +47,7 @@ export interface IRemirrorRichTextEditor {
   value?: any;
   showToolbar?: boolean;
   editable?: boolean;
+  customClassName?: string;
 }
 
 const RemirrorRichTextEditor: FC<IRemirrorRichTextEditor> = (props) => {
@@ -60,6 +61,7 @@ const RemirrorRichTextEditor: FC<IRemirrorRichTextEditor> = (props) => {
     value = "",
     showToolbar = true,
     editable = true,
+    customClassName,
   } = props;
 
   const [imageLoader, setImageLoader] = useState(false);
@@ -173,7 +175,7 @@ const RemirrorRichTextEditor: FC<IRemirrorRichTextEditor> = (props) => {
       <Remirror
         manager={manager}
         initialContent={state}
-        classNames={["p-4 focus:outline-none"]}
+        classNames={[`p-4 focus:outline-none ${customClassName}`]}
         editable={editable}
         onBlur={() => {
           onBlur(jsonValue, htmlValue);
diff --git a/apps/app/components/workspace/help-section.tsx b/apps/app/components/workspace/help-section.tsx
index dbb422998..2122b37e7 100644
--- a/apps/app/components/workspace/help-section.tsx
+++ b/apps/app/components/workspace/help-section.tsx
@@ -132,7 +132,7 @@ export const WorkspaceHelpSection: FC<WorkspaceHelpSectionProps> = (props) => {
           title="Help"
         >
           <QuestionMarkCircleIcon className="h-4 w-4 text-gray-500" />
-          {!sidebarCollapse && <span>Need help?</span>}
+          {!sidebarCollapse && <span>Help ?</span>}
         </button>
       </div>
     </div>
diff --git a/apps/app/layouts/navbar/main-sidebar.tsx b/apps/app/layouts/navbar/main-sidebar.tsx
index 834c3f58c..4afddbe90 100644
--- a/apps/app/layouts/navbar/main-sidebar.tsx
+++ b/apps/app/layouts/navbar/main-sidebar.tsx
@@ -173,7 +173,7 @@ const Sidebar: React.FC<Props> = ({ toggleSidebar, setToggleSidebar }) => {
                   title="Help"
                 >
                   <QuestionMarkCircleIcon className="h-4 w-4 text-gray-500" />
-                  {!sidebarCollapse && <span>Need help?</span>}
+                  {!sidebarCollapse && <span>Help ?</span>}
                 </button>
               </div>
             </div>
diff --git a/apps/app/package.json b/apps/app/package.json
index 5051a01e3..b93c298df 100644
--- a/apps/app/package.json
+++ b/apps/app/package.json
@@ -21,6 +21,7 @@
     "next-pwa": "^5.6.0",
     "react": "18.2.0",
     "react-beautiful-dnd": "^13.1.1",
+    "react-circular-progressbar": "^2.1.0",
     "react-color": "^2.19.3",
     "react-dom": "18.2.0",
     "react-dropzone": "^14.2.3",
diff --git a/apps/app/pages/[workspaceSlug]/index.tsx b/apps/app/pages/[workspaceSlug]/index.tsx
index 17abe8e77..4ce65369b 100644
--- a/apps/app/pages/[workspaceSlug]/index.tsx
+++ b/apps/app/pages/[workspaceSlug]/index.tsx
@@ -164,8 +164,7 @@ const WorkspacePage: NextPage = () => {
                       <LayerDiagonalIcon height="56" width="56" />
                       <h3 className="text-gray-500">
                         No issues found. Create a new issue with{" "}
-                        <pre className="inline rounded bg-gray-100 px-2 py-1">Ctrl/Command + I</pre>
-                        .
+                        <pre className="inline rounded bg-gray-100 px-2 py-1">C</pre>.
                       </h3>
                     </div>
                   )
diff --git a/apps/app/pages/[workspaceSlug]/me/my-issues.tsx b/apps/app/pages/[workspaceSlug]/me/my-issues.tsx
index a1638ed9b..4c47a47bd 100644
--- a/apps/app/pages/[workspaceSlug]/me/my-issues.tsx
+++ b/apps/app/pages/[workspaceSlug]/me/my-issues.tsx
@@ -163,9 +163,8 @@ const MyIssuesPage: NextPage = () => {
                     title="Create a new issue"
                     description={
                       <span>
-                        Use{" "}
-                        <pre className="inline rounded bg-gray-100 px-2 py-1">Ctrl/Command + I</pre>{" "}
-                        shortcut to create a new issue
+                        Use <pre className="inline rounded bg-gray-100 px-2 py-1">C</pre> shortcut
+                        to create a new issue
                       </span>
                     }
                     Icon={PlusIcon}
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/index.tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/index.tsx
index 269792f1b..029a1d785 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/index.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/index.tsx
@@ -178,8 +178,8 @@ const ProjectCycles: NextPage = () => {
                 title="Create a new cycle"
                 description={
                   <span>
-                    Use <pre className="inline rounded bg-gray-100 px-2 py-1">Ctrl/Command + Q</pre>{" "}
-                    shortcut to create a new cycle
+                    Use <pre className="inline rounded bg-gray-100 px-2 py-1">Q</pre> shortcut to
+                    create a new cycle
                   </span>
                 }
                 Icon={PlusIcon}
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/index.tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/index.tsx
index 4348ebb63..0bfc2e299 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/index.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/index.tsx
@@ -133,8 +133,8 @@ const ProjectIssues: NextPage<UserAuth> = (props) => {
                 title="Create a new issue"
                 description={
                   <span>
-                    Use <pre className="inline rounded bg-gray-100 px-2 py-1">Ctrl/Command + I</pre>{" "}
-                    shortcut to create a new issue
+                    Use <pre className="inline rounded bg-gray-100 px-2 py-1">C</pre> shortcut to
+                    create a new issue
                   </span>
                 }
                 Icon={PlusIcon}
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/modules/index.tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/modules/index.tsx
index 8aa1056c6..25b2bdddb 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/modules/index.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/modules/index.tsx
@@ -86,8 +86,8 @@ const ProjectModules: NextPage = () => {
                 title="Create a new module"
                 description={
                   <span>
-                    Use <pre className="inline rounded bg-gray-100 px-2 py-1">Ctrl/Command + M</pre>{" "}
-                    shortcut to create a new module
+                    Use <pre className="inline rounded bg-gray-100 px-2 py-1">M</pre> shortcut to
+                    create a new module
                   </span>
                 }
                 Icon={PlusIcon}
diff --git a/apps/app/pages/[workspaceSlug]/projects/index.tsx b/apps/app/pages/[workspaceSlug]/projects/index.tsx
index 700bffd5a..8164d4155 100644
--- a/apps/app/pages/[workspaceSlug]/projects/index.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/index.tsx
@@ -88,9 +88,8 @@ const ProjectsPage: NextPage = () => {
                   title="Create a new project"
                   description={
                     <span>
-                      Use{" "}
-                      <pre className="inline rounded bg-gray-100 px-2 py-1">Ctrl/Command + P</pre>{" "}
-                      shortcut to create a new project
+                      Use <pre className="inline rounded bg-gray-100 px-2 py-1">P</pre> shortcut to
+                      create a new project
                     </span>
                   }
                   Icon={PlusIcon}
diff --git a/apps/app/styles/editor.css b/apps/app/styles/editor.css
index 45deb0dc6..07fcec355 100644
--- a/apps/app/styles/editor.css
+++ b/apps/app/styles/editor.css
@@ -354,10 +354,6 @@ img.ProseMirror-separator {
   margin-bottom: 1em;
 }
 
-.remirror-editor-wrapper .remirror-editor {
-  min-height: 150px;
-}
-
 .issue-comments-section .remirror-editor-wrapper .remirror-editor {
   min-height: 50px;
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 3cee54a85..3095d80ba 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -40,6 +40,7 @@ importers:
       postcss: ^8.4.14
       react: 18.2.0
       react-beautiful-dnd: ^13.1.1
+      react-circular-progressbar: ^2.1.0
       react-color: ^2.19.3
       react-dom: 18.2.0
       react-dropzone: ^14.2.3
@@ -63,6 +64,7 @@ importers:
       next-pwa: 5.6.0_next@12.3.2
       react: 18.2.0
       react-beautiful-dnd: 13.1.1_biqbaboplfbrettd7655fr4n2y
+      react-circular-progressbar: 2.1.0_react@18.2.0
       react-color: 2.19.3_react@18.2.0
       react-dom: 18.2.0_react@18.2.0
       react-dropzone: 14.2.3_react@18.2.0
@@ -8326,6 +8328,14 @@ packages:
       - react-native
     dev: false
 
+  /react-circular-progressbar/2.1.0_react@18.2.0:
+    resolution: {integrity: sha512-xp4THTrod4aLpGy68FX/k1Q3nzrfHUjUe5v6FsdwXBl3YVMwgeXYQKDrku7n/D6qsJA9CuunarAboC2xCiKs1g==}
+    peerDependencies:
+      react: ^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0
+    dependencies:
+      react: 18.2.0
+    dev: false
+
   /react-color/2.19.3_react@18.2.0:
     resolution: {integrity: sha512-LEeGE/ZzNLIsFWa1TMe8y5VYqr7bibneWmvJwm1pCn/eNmrabWDh659JSPn9BuaMpEfU83WTOJfnCcjDZwNQTA==}
     peerDependencies:

From fcf23b985bdd24bb05231e5f307c7b96edbc161d Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com>
Date: Mon, 30 Jan 2023 19:47:30 +0530
Subject: [PATCH 09/15] fix: issue description debounce issue (#208)

* fix: issue description form

* fix: build errors
---
 .../components/issues/description-form.tsx    | 102 ++++++++++--------
 apps/app/components/issues/form.tsx           |   2 +-
 .../issue-detail-sidebar/index.tsx            |  21 ++++
 apps/app/package.json                         |   4 +
 .../projects/[projectId]/issues/[issueId].tsx |  24 +----
 pnpm-lock.yaml                                |  86 ++++++++++++++-
 6 files changed, 172 insertions(+), 67 deletions(-)

diff --git a/apps/app/components/issues/description-form.tsx b/apps/app/components/issues/description-form.tsx
index 4a484d819..d3f5433cc 100644
--- a/apps/app/components/issues/description-form.tsx
+++ b/apps/app/components/issues/description-form.tsx
@@ -1,7 +1,11 @@
-import { FC, useEffect, useRef, useState } from "react";
+import { FC, useCallback, useEffect, useMemo } from "react";
+
 import dynamic from "next/dynamic";
-// types
-import { IIssue } from "types";
+
+// react-hook-form
+import { useForm } from "react-hook-form";
+// lodash
+import debounce from "lodash.debounce";
 // components
 import { Loader, Input } from "components/ui";
 const RemirrorRichTextEditor = dynamic(() => import("components/rich-text-editor"), {
@@ -12,8 +16,8 @@ const RemirrorRichTextEditor = dynamic(() => import("components/rich-text-editor
     </Loader>
   ),
 });
-// hooks
-import useDebounce from "hooks/use-debounce";
+// types
+import { IIssue } from "types";
 
 export interface IssueDescriptionFormValues {
   name: string;
@@ -23,61 +27,73 @@ export interface IssueDescriptionFormValues {
 
 export interface IssueDetailsProps {
   issue: IIssue;
-  handleSubmit: (value: IssueDescriptionFormValues) => void;
+  handleFormSubmit: (value: IssueDescriptionFormValues) => void;
 }
 
-export const IssueDescriptionForm: FC<IssueDetailsProps> = ({ issue, handleSubmit }) => {
-  // states
-  // const [issueFormValues, setIssueFormValues] = useState({
-  //   name: issue.name,
-  //   description: issue?.description,
-  //   description_html: issue?.description_html,
-  // });
-  const [issueName, setIssueName] = useState(issue?.name);
-  const [issueDescription, setIssueDescription] = useState(issue?.description);
-  const [issueDescriptionHTML, setIssueDescriptionHTML] = useState(issue?.description_html);
-  const textareaRef = useRef<HTMLTextAreaElement | null>(null);
+export const IssueDescriptionForm: FC<IssueDetailsProps> = ({ issue, handleFormSubmit }) => {
+  const { handleSubmit, watch, setValue, reset } = useForm<IIssue>({
+    defaultValues: {
+      name: "",
+      description: "",
+      description_html: "",
+    },
+  });
 
-  // hooks
-  const formValues = useDebounce(
-    { name: issueName, description: issueDescription, description_html: issueDescriptionHTML },
-    2000
+  const handleDescriptionFormSubmit = useCallback(
+    (formData: Partial<IIssue>) => {
+      handleFormSubmit({
+        name: formData.name ?? "",
+        description: formData.description,
+        description_html: formData.description_html,
+      });
+    },
+    [handleFormSubmit]
   );
-  const stringFromValues = JSON.stringify(formValues);
 
-  useEffect(() => {
-    handleSubmit(formValues);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [handleSubmit, stringFromValues]);
+  const debounceHandler = useMemo(
+    () => debounce(handleSubmit(handleDescriptionFormSubmit), 2000),
+    [handleSubmit, handleDescriptionFormSubmit]
+  );
 
+  useEffect(
+    () => () => {
+      debounceHandler.cancel();
+    },
+    [debounceHandler]
+  );
+
+  // reset form values
   useEffect(() => {
-    if (textareaRef && textareaRef.current) {
-      textareaRef.current.style.height = "0px";
-      const scrollHeight = textareaRef.current.scrollHeight;
-      textareaRef.current.style.height = scrollHeight + "px";
-    }
-  }, [issueName]);
+    if (!issue) return;
+
+    reset(issue);
+  }, [issue, reset]);
 
   return (
     <div>
-      <textarea
+      <Input
         id="name"
         placeholder="Enter issue name"
         name="name"
-        value={issueName}
-        ref={textareaRef}
-        rows={1}
-        onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => setIssueName(e.target.value)}
+        value={watch("name")}
+        autoComplete="off"
+        onChange={(e) => {
+          setValue("name", e.target.value);
+          debounceHandler();
+        }}
+        mode="transparent"
+        className="text-xl font-medium"
         required={true}
-        className="no-scrollbar w-full px-3 py-2 outline-none rounded border-none bg-transparent ring-0 transition-all focus:ring-1 focus:ring-theme text-xl font-medium resize-none"
       />
 
       <RemirrorRichTextEditor
-        value={issueDescription}
-        placeholder="Enter Your Text..."
-        onJSONChange={(json) => setIssueDescription(json)}
-        onHTMLChange={(html) => setIssueDescriptionHTML(html)}
-        customClassName="min-h-[150px]"
+        value={watch("description")}
+        placeholder="Describe the issue..."
+        onJSONChange={(json) => {
+          setValue("description", json);
+          debounceHandler();
+        }}
+        onHTMLChange={(html) => setValue("description_html", html)}
       />
     </div>
   );
diff --git a/apps/app/components/issues/form.tsx b/apps/app/components/issues/form.tsx
index c85872ee1..3070eae2a 100644
--- a/apps/app/components/issues/form.tsx
+++ b/apps/app/components/issues/form.tsx
@@ -194,7 +194,7 @@ export const IssueForm: FC<IssueFormProps> = ({
                   error={errors.name}
                   register={register}
                   validations={{
-                    required: "Name is required",
+                    required: "Title is required",
                     maxLength: {
                       value: 255,
                       message: "Name should be less than 255 characters",
diff --git a/apps/app/components/project/issues/issue-detail/issue-detail-sidebar/index.tsx b/apps/app/components/project/issues/issue-detail/issue-detail-sidebar/index.tsx
index a59884df2..8a1af534a 100644
--- a/apps/app/components/project/issues/issue-detail/issue-detail-sidebar/index.tsx
+++ b/apps/app/components/project/issues/issue-detail/issue-detail-sidebar/index.tsx
@@ -34,6 +34,7 @@ import SelectBlocked from "components/project/issues/issue-detail/issue-detail-s
 // headless ui
 // ui
 import { Input, Button, Spinner } from "components/ui";
+import DatePicker from "react-datepicker";
 // icons
 // helpers
 import { copyTextToClipboard } from "helpers/string.helper";
@@ -42,6 +43,8 @@ import type { ICycle, IIssue, IIssueLabels } from "types";
 // fetch-keys
 import { PROJECT_ISSUE_LABELS, PROJECT_ISSUES_LIST, ISSUE_DETAILS } from "constants/fetch-keys";
 
+import "react-datepicker/dist/react-datepicker.css";
+
 type Props = {
   control: Control<IIssue, any>;
   submitChanges: (formData: Partial<IIssue>) => void;
@@ -216,6 +219,24 @@ const IssueDetailSidebar: React.FC<Props> = ({
                 <p>Due date</p>
               </div>
               <div className="sm:basis-1/2">
+                {/* <Controller
+                  control={control}
+                  name="target_date"
+                  render={({ field: { value, onChange } }) => (
+                    <DatePicker
+                      selected={value ? new Date(value) : new Date()}
+                      onChange={(val: Date) => {
+                        submitChanges({
+                          target_date: `${val.getFullYear()}-${
+                            val.getMonth() + 1
+                          }-${val.getDate()}`,
+                        });
+                        onChange(`${val.getFullYear()}-${val.getMonth() + 1}-${val.getDate()}`);
+                      }}
+                      dateFormat="dd-MM-yyyy"
+                    />
+                  )}
+                /> */}
                 <Controller
                   control={control}
                   name="target_date"
diff --git a/apps/app/package.json b/apps/app/package.json
index b93c298df..e81e581b7 100644
--- a/apps/app/package.json
+++ b/apps/app/package.json
@@ -15,14 +15,18 @@
     "@remirror/extension-react-tables": "^2.2.11",
     "@remirror/pm": "^2.0.3",
     "@remirror/react": "^2.0.24",
+    "@types/lodash.debounce": "^4.0.7",
+    "@types/react-datepicker": "^4.8.0",
     "axios": "^1.1.3",
     "js-cookie": "^3.0.1",
+    "lodash.debounce": "^4.0.8",
     "next": "12.3.2",
     "next-pwa": "^5.6.0",
     "react": "18.2.0",
     "react-beautiful-dnd": "^13.1.1",
     "react-circular-progressbar": "^2.1.0",
     "react-color": "^2.19.3",
+    "react-datepicker": "^4.8.0",
     "react-dom": "18.2.0",
     "react-dropzone": "^14.2.3",
     "react-hook-form": "^7.38.0",
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx
index 1d9b890c6..a97c94ca7 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx
@@ -149,6 +149,7 @@ const IssueDetailsPage: NextPage = () => {
       issuesService
         .patchIssue(workspaceSlug as string, projectId as string, issueId as string, payload)
         .then((res) => {
+          console.log(res);
           mutateIssueDetails();
           mutateIssueActivities();
         })
@@ -173,24 +174,6 @@ const IssueDetailsPage: NextPage = () => {
       });
   };
 
-  /**
-   * Handling the debounce submit by updating the issue with name, description and description_html
-   * @param values IssueDescriptionFormValues
-   */
-  const handleDescriptionFormSubmit = useCallback(
-    (values: IssueDescriptionFormValues) => {
-      if (!workspaceSlug || !projectId || !issueId) return;
-
-      issuesService
-        .updateIssue(workspaceSlug as string, projectId as string, issueId as string, values)
-        .then((res) => {
-          console.log(res);
-          mutateIssueActivities();
-        });
-    },
-    [workspaceSlug, projectId, issueId, mutateIssueActivities]
-  );
-
   return (
     <AppLayout
       noPadding={true}
@@ -304,10 +287,7 @@ const IssueDetailsPage: NextPage = () => {
                   </CustomMenu>
                 </div>
               ) : null}
-              <IssueDescriptionForm
-                issue={issueDetails}
-                handleSubmit={handleDescriptionFormSubmit}
-              />
+              <IssueDescriptionForm issue={issueDetails} handleFormSubmit={submitChanges} />
               <div className="mt-2">
                 {issueId && workspaceSlug && projectId && subIssues?.length > 0 ? (
                   <SubIssueList
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 3095d80ba..2a0f52745 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -21,10 +21,12 @@ importers:
       '@remirror/pm': ^2.0.3
       '@remirror/react': ^2.0.24
       '@types/js-cookie': ^3.0.2
+      '@types/lodash.debounce': ^4.0.7
       '@types/node': 18.0.6
       '@types/react': 18.0.15
       '@types/react-beautiful-dnd': ^13.1.2
       '@types/react-color': ^3.0.6
+      '@types/react-datepicker': ^4.8.0
       '@types/react-dom': 18.0.6
       '@types/uuid': ^8.3.4
       '@typescript-eslint/eslint-plugin': ^5.48.2
@@ -35,6 +37,7 @@ importers:
       eslint: ^8.31.0
       eslint-config-next: 12.2.2
       js-cookie: ^3.0.1
+      lodash.debounce: ^4.0.8
       next: 12.3.2
       next-pwa: ^5.6.0
       postcss: ^8.4.14
@@ -42,6 +45,7 @@ importers:
       react-beautiful-dnd: ^13.1.1
       react-circular-progressbar: ^2.1.0
       react-color: ^2.19.3
+      react-datepicker: ^4.8.0
       react-dom: 18.2.0
       react-dropzone: ^14.2.3
       react-hook-form: ^7.38.0
@@ -58,14 +62,18 @@ importers:
       '@remirror/extension-react-tables': 2.2.11_primzaudxtd4wvxl4iqmlhjvbm
       '@remirror/pm': 2.0.3
       '@remirror/react': 2.0.24_primzaudxtd4wvxl4iqmlhjvbm
+      '@types/lodash.debounce': 4.0.7
+      '@types/react-datepicker': 4.8.0_biqbaboplfbrettd7655fr4n2y
       axios: 1.2.0
       js-cookie: 3.0.1
+      lodash.debounce: 4.0.8
       next: 12.3.2_biqbaboplfbrettd7655fr4n2y
       next-pwa: 5.6.0_next@12.3.2
       react: 18.2.0
       react-beautiful-dnd: 13.1.1_biqbaboplfbrettd7655fr4n2y
       react-circular-progressbar: 2.1.0_react@18.2.0
       react-color: 2.19.3_react@18.2.0
+      react-datepicker: 4.8.0_biqbaboplfbrettd7655fr4n2y
       react-dom: 18.2.0_react@18.2.0
       react-dropzone: 14.2.3_react@18.2.0
       react-hook-form: 7.40.0_react@18.2.0
@@ -3940,6 +3948,16 @@ packages:
   /@types/json5/0.0.29:
     resolution: {integrity: sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==}
 
+  /@types/lodash.debounce/4.0.7:
+    resolution: {integrity: sha512-X1T4wMZ+gT000M2/91SYj0d/7JfeNZ9PeeOldSNoE/lunLeQXKvkmIumI29IaKMotU/ln/McOIvgzZcQ/3TrSA==}
+    dependencies:
+      '@types/lodash': 4.14.191
+    dev: false
+
+  /@types/lodash/4.14.191:
+    resolution: {integrity: sha512-BdZ5BCCvho3EIXw6wUCXHe7rS53AIDPLE+JzwgT+OsJk53oBfbSmZZ7CX4VaRoN78N+TJpFi9QPlfIVNmJYWxQ==}
+    dev: false
+
   /@types/marked/4.0.8:
     resolution: {integrity: sha512-HVNzMT5QlWCOdeuBsgXP8EZzKUf0+AXzN+sLmjvaB3ZlLqO+e4u0uXrdw9ub69wBKFs+c6/pA4r9sy6cCDvImw==}
     dev: false
@@ -4004,6 +4022,18 @@ packages:
       '@types/react': 18.0.15
       '@types/reactcss': 1.2.6
 
+  /@types/react-datepicker/4.8.0_biqbaboplfbrettd7655fr4n2y:
+    resolution: {integrity: sha512-20uzZsIf4moPAjjHDfPvH8UaOHZBxrkiQZoLS3wgKq8Xhp+95gdercLEdoA7/I8nR9R5Jz2qQkdMIM+Lq4AS1A==}
+    dependencies:
+      '@popperjs/core': 2.11.6
+      '@types/react': 18.0.26
+      date-fns: 2.29.3
+      react-popper: 2.3.0_r6q5zrenym2zg7je7hgi674bti
+    transitivePeerDependencies:
+      - react
+      - react-dom
+    dev: false
+
   /@types/react-dom/18.0.6:
     resolution: {integrity: sha512-/5OFZgfIPSwy+YuIBP/FgJnQnsxhZhjjrnxudMddeblOouIodEQ75X14Rr4wGSG/bknL+Omy9iWlLo1u/9GzAA==}
     dependencies:
@@ -4787,7 +4817,6 @@ packages:
 
   /classnames/2.3.2:
     resolution: {integrity: sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==}
-    dev: true
 
   /clean-webpack-plugin/4.0.0:
     resolution: {integrity: sha512-WuWE1nyTNAyW5T7oNyys2EN0cfP2fdRxhxnIQWiAp0bMabPdHhoGxM8A6YL2GhqwgrPnnaemVE7nv5XJ2Fhh2w==}
@@ -4960,6 +4989,11 @@ packages:
     resolution: {integrity: sha512-4FbVrHDwfOASx7uQVxeiCTo7ggSdYZbqs8lH+WU6ViypPlDbe9y6IP5VVUDQBv9DcnyaiPT5XT0UWHgJ64zLeQ==}
     dev: false
 
+  /date-fns/2.29.3:
+    resolution: {integrity: sha512-dDCnyH2WnnKusqvZZ6+jA1O51Ibt8ZMRNkDZdyAyK4YfbDwa/cEmuztzG5pk6hqlp9aSBPYcjOlktquahGwGeA==}
+    engines: {node: '>=0.11'}
+    dev: false
+
   /debug/2.6.9:
     resolution: {integrity: sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==}
     peerDependencies:
@@ -8351,6 +8385,22 @@ packages:
       tinycolor2: 1.4.2
     dev: false
 
+  /react-datepicker/4.8.0_biqbaboplfbrettd7655fr4n2y:
+    resolution: {integrity: sha512-u69zXGHMpxAa4LeYR83vucQoUCJQ6m/WBsSxmUMu/M8ahTSVMMyiyQzauHgZA2NUr9y0FUgOAix71hGYUb6tvg==}
+    peerDependencies:
+      react: ^16.9.0 || ^17 || ^18
+      react-dom: ^16.9.0 || ^17 || ^18
+    dependencies:
+      '@popperjs/core': 2.11.6
+      classnames: 2.3.2
+      date-fns: 2.29.3
+      prop-types: 15.8.1
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
+      react-onclickoutside: 6.12.2_biqbaboplfbrettd7655fr4n2y
+      react-popper: 2.3.0_r6q5zrenym2zg7je7hgi674bti
+    dev: false
+
   /react-dom/18.2.0_react@18.2.0:
     resolution: {integrity: sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==}
     peerDependencies:
@@ -8373,6 +8423,10 @@ packages:
       react: 18.2.0
     dev: false
 
+  /react-fast-compare/3.2.0:
+    resolution: {integrity: sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA==}
+    dev: false
+
   /react-hook-form/7.40.0_react@18.2.0:
     resolution: {integrity: sha512-0rokdxMPJs0k9bvFtY6dbcSydyNhnZNXCR49jgDr/aR03FDHFOK6gfh8ccqB3fl696Mk7lqh04xdm+agqWXKSw==}
     engines: {node: '>=12.22.0'}
@@ -8393,6 +8447,30 @@ packages:
     resolution: {integrity: sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==}
     dev: false
 
+  /react-onclickoutside/6.12.2_biqbaboplfbrettd7655fr4n2y:
+    resolution: {integrity: sha512-NMXGa223OnsrGVp5dJHkuKxQ4czdLmXSp5jSV9OqiCky9LOpPATn3vLldc+q5fK3gKbEHvr7J1u0yhBh/xYkpA==}
+    peerDependencies:
+      react: ^15.5.x || ^16.x || ^17.x || ^18.x
+      react-dom: ^15.5.x || ^16.x || ^17.x || ^18.x
+    dependencies:
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
+    dev: false
+
+  /react-popper/2.3.0_r6q5zrenym2zg7je7hgi674bti:
+    resolution: {integrity: sha512-e1hj8lL3uM+sgSR4Lxzn5h1GxBlpa4CQz0XLF8kx4MDrDRWY0Ena4c97PUeSX9i5W3UAfDP0z0FXCTQkoXUl3Q==}
+    peerDependencies:
+      '@popperjs/core': ^2.0.0
+      react: ^16.8.0 || ^17 || ^18
+      react-dom: ^16.8.0 || ^17 || ^18
+    dependencies:
+      '@popperjs/core': 2.11.6
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
+      react-fast-compare: 3.2.0
+      warning: 4.0.3
+    dev: false
+
   /react-redux/7.2.9_biqbaboplfbrettd7655fr4n2y:
     resolution: {integrity: sha512-Gx4L3uM182jEEayZfRbI/G11ZpYdNAnBs70lFVMNdHJI76XYtR+7m0MN+eAs7UHBPhWXcnFPaS+9owSCJQHNpQ==}
     peerDependencies:
@@ -9705,6 +9783,12 @@ packages:
     resolution: {integrity: sha512-f+fciywl1SJEniZHD6H+kUO8gOnwIr7f4ijKA6+ZvJFjeGi1r4PDLl53Ayud9O/rk64RqgoQine0feoeOU0kXg==}
     dev: false
 
+  /warning/4.0.3:
+    resolution: {integrity: sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==}
+    dependencies:
+      loose-envify: 1.4.0
+    dev: false
+
   /webidl-conversions/4.0.2:
     resolution: {integrity: sha512-YQ+BmxuTgd6UXZW3+ICGfyqRyHXVlD5GtQr5+qjiNW7bF0cqrzX500HVXPBOvgXb5YnzDd+h0zqyv61KUD7+Sg==}
     dev: false

From 0ff5f363eeae432e10f0769413a0bc4ae59d9c64 Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com>
Date: Mon, 30 Jan 2023 23:16:02 +0530
Subject: [PATCH 10/15] feat: react-datepicker added (#210)

* fix: issue description form

* fix: build errors

* feat: react-datepicker added
---
 .../common/board-view/single-issue.tsx        | 46 ++++++++--
 .../common/list-view/single-issue.tsx         | 40 +++++++-
 apps/app/components/issues/form.tsx           | 35 ++++---
 .../onboarding/break-into-modules.tsx         | 48 +++++-----
 .../project/create-project-modal.tsx          |  2 +-
 .../cycles/create-update-cycle-modal.tsx      | 91 +++++++++++++------
 .../cycles/cycle-detail-sidebar/index.tsx     | 58 +++++++-----
 .../project/issues/BoardView/index.tsx        | 26 +++---
 .../issues/issue-detail/activity/index.tsx    | 15 +--
 .../issue-detail-sidebar/index.tsx            | 44 ++++-----
 .../create-update-module-modal/index.tsx      | 82 +++++++++++------
 .../modules/module-detail-sidebar/index.tsx   | 59 ++++++------
 .../module-detail-sidebar/select-members.tsx  | 51 +----------
 apps/app/components/ui/datepicker.tsx         | 40 ++++++++
 apps/app/components/ui/index.ts               |  1 +
 .../projects/[projectId]/cycles/[cycleId].tsx |  2 +-
 apps/app/styles/globals.css                   | 20 ++++
 17 files changed, 409 insertions(+), 251 deletions(-)
 create mode 100644 apps/app/components/ui/datepicker.tsx

diff --git a/apps/app/components/common/board-view/single-issue.tsx b/apps/app/components/common/board-view/single-issue.tsx
index 7dd333e3f..a099c29b1 100644
--- a/apps/app/components/common/board-view/single-issue.tsx
+++ b/apps/app/components/common/board-view/single-issue.tsx
@@ -1,23 +1,26 @@
 import React from "react";
-// next
+
 import Link from "next/link";
 import Image from "next/image";
 import { useRouter } from "next/router";
-// swr
+
 import useSWR, { mutate } from "swr";
+
 // react-beautiful-dnd
 import { DraggableStateSnapshot } from "react-beautiful-dnd";
+// react-datepicker
+import DatePicker from "react-datepicker";
+import "react-datepicker/dist/react-datepicker.css";
 // headless ui
 import { Listbox, Transition } from "@headlessui/react";
 // constants
 import { TrashIcon } from "@heroicons/react/24/outline";
-import { CalendarDaysIcon } from "@heroicons/react/20/solid";
 // services
 import issuesService from "services/issues.service";
 import stateService from "services/state.service";
 import projectService from "services/project.service";
 // components
-import { CustomSelect, AssigneesList } from "components/ui";
+import { AssigneesList, CustomDatePicker } from "components/ui";
 // helpers
 import { renderShortNumericDateFormat, findHowManyDaysLeft } from "helpers/date-time.helper";
 import { addSpaceIfCamelCase } from "helpers/string.helper";
@@ -256,7 +259,7 @@ const SingleBoardIssue: React.FC<Props> = ({
           )} */}
           {properties.due_date && (
             <div
-              className={`group 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 ${
+              className={`group relative ${
                 issue.target_date === null
                   ? ""
                   : issue.target_date < new Date().toISOString()
@@ -264,8 +267,37 @@ const SingleBoardIssue: React.FC<Props> = ({
                   : findHowManyDaysLeft(issue.target_date) <= 3 && "text-orange-400"
               }`}
             >
-              <CalendarDaysIcon className="h-4 w-4" />
-              {issue.target_date ? renderShortNumericDateFormat(issue.target_date) : "N/A"}
+              <CustomDatePicker
+                placeholder="N/A"
+                value={issue?.target_date}
+                onChange={(val: Date) => {
+                  partialUpdateIssue({
+                    target_date: val
+                      ? `${val.getFullYear()}-${val.getMonth() + 1}-${val.getDate()}`
+                      : null,
+                  });
+                }}
+                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 && (
diff --git a/apps/app/components/common/list-view/single-issue.tsx b/apps/app/components/common/list-view/single-issue.tsx
index 3f144568a..8879b9fb7 100644
--- a/apps/app/components/common/list-view/single-issue.tsx
+++ b/apps/app/components/common/list-view/single-issue.tsx
@@ -5,6 +5,9 @@ import { useRouter } from "next/router";
 
 import useSWR, { mutate } from "swr";
 
+// react-datepicker
+import DatePicker from "react-datepicker";
+import "react-datepicker/dist/react-datepicker.css";
 // services
 import issuesService from "services/issues.service";
 import workspaceService from "services/workspace.service";
@@ -12,7 +15,7 @@ import stateService from "services/state.service";
 // headless ui
 import { Listbox, Transition } from "@headlessui/react";
 // ui
-import { CustomMenu, CustomSelect, AssigneesList, Avatar } from "components/ui";
+import { CustomMenu, CustomSelect, AssigneesList, Avatar, CustomDatePicker } from "components/ui";
 // components
 import ConfirmIssueDeletion from "components/project/issues/confirm-issue-deletion";
 // icons
@@ -241,7 +244,7 @@ const SingleListIssue: React.FC<Props> = ({
           )} */}
           {properties.due_date && (
             <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 ${
+              className={`group relative ${
                 issue.target_date === null
                   ? ""
                   : issue.target_date < new Date().toISOString()
@@ -249,8 +252,37 @@ const SingleListIssue: React.FC<Props> = ({
                   : findHowManyDaysLeft(issue.target_date) <= 3 && "text-orange-400"
               }`}
             >
-              <CalendarDaysIcon className="h-4 w-4" />
-              {issue.target_date ? renderShortNumericDateFormat(issue.target_date) : "N/A"}
+              <CustomDatePicker
+                placeholder="N/A"
+                value={issue?.target_date}
+                onChange={(val: Date) => {
+                  partialUpdateIssue({
+                    target_date: val
+                      ? `${val.getFullYear()}-${val.getMonth() + 1}-${val.getDate()}`
+                      : null,
+                  });
+                }}
+                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 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>
diff --git a/apps/app/components/issues/form.tsx b/apps/app/components/issues/form.tsx
index 3070eae2a..c61a62e03 100644
--- a/apps/app/components/issues/form.tsx
+++ b/apps/app/components/issues/form.tsx
@@ -19,7 +19,7 @@ import { CycleSelect as IssueCycleSelect } from "components/cycles/select";
 import CreateUpdateStateModal from "components/project/issues/BoardView/state/create-update-state-modal";
 import CreateUpdateCycleModal from "components/project/cycles/create-update-cycle-modal";
 // ui
-import { Button, CustomMenu, Input, Loader } from "components/ui";
+import { Button, CustomDatePicker, CustomMenu, Input, Loader } from "components/ui";
 // icons
 import { XMarkIcon } from "@heroicons/react/24/outline";
 // helpers
@@ -289,20 +289,25 @@ export const IssueForm: FC<IssueFormProps> = ({
                     <IssueLabelSelect value={value} onChange={onChange} projectId={projectId} />
                   )}
                 />
-                <Controller
-                  control={control}
-                  name="target_date"
-                  render={({ field: { value, onChange } }) => (
-                    <input
-                      type="date"
-                      value={value ?? ""}
-                      onChange={(e: any) => {
-                        onChange(e.target.value);
-                      }}
-                      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"
-                    />
-                  )}
-                />
+                <div>
+                  <Controller
+                    control={control}
+                    name="target_date"
+                    render={({ field: { value, onChange } }) => (
+                      <CustomDatePicker
+                        value={value}
+                        onChange={(val: Date) => {
+                          onChange(
+                            val
+                              ? `${val.getFullYear()}-${val.getMonth() + 1}-${val.getDate()}`
+                              : null
+                          );
+                        }}
+                        className="max-w-[7rem]"
+                      />
+                    )}
+                  />
+                </div>
                 <IssueParentSelect
                   control={control}
                   isOpen={parentIssueListModalOpen}
diff --git a/apps/app/components/onboarding/break-into-modules.tsx b/apps/app/components/onboarding/break-into-modules.tsx
index a87e2d0ce..e9f8c170b 100644
--- a/apps/app/components/onboarding/break-into-modules.tsx
+++ b/apps/app/components/onboarding/break-into-modules.tsx
@@ -4,30 +4,30 @@ import Image from "next/image";
 import Module from "public/onboarding/module.png";
 
 const BreakIntoModules: React.FC = () => (
-    <div className="h-full space-y-4">
-      <div className="relative h-1/2">
-        <div
-          className="absolute bottom-0 z-10 h-8 w-full bg-white"
-          style={{
-            background: "linear-gradient(0deg, #fff 84.2%, rgba(255, 255, 255, 0) 34.35%)",
-          }}
-         />
-        <Image
-          src={Module}
-          className="h-full"
-          objectFit="contain"
-          layout="fill"
-          alt="Plane- Modules"
-        />
-      </div>
-      <div className="mx-auto h-1/2 space-y-4 lg:w-1/2">
-        <h2 className="text-2xl font-medium">Break into Modules</h2>
-        <p className="text-sm text-gray-400">
-          Modules break your big think into Projects or Features, to help you organize better.
-        </p>
-        <p className="text-sm text-gray-400">4/5</p>
-      </div>
+  <div className="h-full space-y-4">
+    <div className="relative h-1/2">
+      <div
+        className="absolute bottom-0 z-10 h-8 w-full bg-white"
+        style={{
+          background: "linear-gradient(0deg, #fff 84.2%, rgba(255, 255, 255, 0) 34.35%)",
+        }}
+      />
+      <Image
+        src={Module}
+        className="h-full"
+        objectFit="contain"
+        layout="fill"
+        alt="Plane- Modules"
+      />
     </div>
-  );
+    <div className="mx-auto h-1/2 space-y-4 lg:w-1/2">
+      <h2 className="text-2xl font-medium">Break into Modules</h2>
+      <p className="text-sm text-gray-400">
+        Modules break your big thing into Projects or Features, to help you organize better.
+      </p>
+      <p className="text-sm text-gray-400">4/5</p>
+    </div>
+  </div>
+);
 
 export default BreakIntoModules;
diff --git a/apps/app/components/project/create-project-modal.tsx b/apps/app/components/project/create-project-modal.tsx
index f1c14bda6..37905ea50 100644
--- a/apps/app/components/project/create-project-modal.tsx
+++ b/apps/app/components/project/create-project-modal.tsx
@@ -185,7 +185,7 @@ export const CreateProjectModal: React.FC<Props> = (props) => {
                       </p>
                     </div>
                     <div className="space-y-3">
-                      <div className="flex items-center gap-3">
+                      <div className="flex gap-3">
                         <div className="flex-shrink-0">
                           <label htmlFor="icon" className="mb-2 text-gray-500">
                             Icon
diff --git a/apps/app/components/project/cycles/create-update-cycle-modal.tsx b/apps/app/components/project/cycles/create-update-cycle-modal.tsx
index 9695adea1..dc336f6c9 100644
--- a/apps/app/components/project/cycles/create-update-cycle-modal.tsx
+++ b/apps/app/components/project/cycles/create-update-cycle-modal.tsx
@@ -1,18 +1,19 @@
 import React, { useEffect } from "react";
-// next
+
 import { useRouter } from "next/router";
-// swr
+
 import { mutate } from "swr";
+
 // react hook form
 import { Controller, useForm } from "react-hook-form";
-// headless
+// headless ui
 import { Dialog, Transition } from "@headlessui/react";
 // services
 import cycleService from "services/cycles.service";
 // hooks
 import useToast from "hooks/use-toast";
 // ui
-import { Button, Input, TextArea, CustomSelect } from "components/ui";
+import { Button, Input, TextArea, CustomSelect, CustomDatePicker } from "components/ui";
 // common
 import { renderDateFormat } from "helpers/date-time.helper";
 // types
@@ -31,8 +32,8 @@ const defaultValues: Partial<ICycle> = {
   name: "",
   description: "",
   status: "draft",
-  start_date: new Date().toString(),
-  end_date: new Date().toString(),
+  start_date: null,
+  end_date: null,
 };
 
 const CreateUpdateCycleModal: React.FC<Props> = ({ isOpen, setIsOpen, data, projectId }) => {
@@ -202,32 +203,62 @@ const CreateUpdateCycleModal: React.FC<Props> = ({ isOpen, setIsOpen, data, proj
                       </div>
                       <div className="flex gap-x-2">
                         <div className="w-full">
-                          <Input
-                            id="start_date"
-                            label="Start Date"
-                            name="start_date"
-                            type="date"
-                            placeholder="Enter start date"
-                            error={errors.start_date}
-                            register={register}
-                            validations={{
-                              required: "Start date is required",
-                            }}
-                          />
+                          <h6 className="text-gray-500">Start Date</h6>
+                          <div className="w-full">
+                            <Controller
+                              control={control}
+                              name="start_date"
+                              rules={{ required: "Start date is required" }}
+                              render={({ field: { value, onChange } }) => (
+                                <CustomDatePicker
+                                  renderAs="input"
+                                  value={value}
+                                  onChange={(val: Date) => {
+                                    onChange(
+                                      val
+                                        ? `${val.getFullYear()}-${
+                                            val.getMonth() + 1
+                                          }-${val.getDate()}`
+                                        : null
+                                    );
+                                  }}
+                                  error={errors.start_date ? true : false}
+                                />
+                              )}
+                            />
+                            {errors.start_date && (
+                              <h6 className="text-sm text-red-500">{errors.start_date.message}</h6>
+                            )}
+                          </div>
                         </div>
                         <div className="w-full">
-                          <Input
-                            id="end_date"
-                            label="End Date"
-                            name="end_date"
-                            type="date"
-                            placeholder="Enter end date"
-                            error={errors.end_date}
-                            register={register}
-                            validations={{
-                              required: "End date is required",
-                            }}
-                          />
+                          <h6 className="text-gray-500">End Date</h6>
+                          <div className="w-full">
+                            <Controller
+                              control={control}
+                              name="end_date"
+                              rules={{ required: "End date is required" }}
+                              render={({ field: { value, onChange } }) => (
+                                <CustomDatePicker
+                                  renderAs="input"
+                                  value={value}
+                                  onChange={(val: Date) => {
+                                    onChange(
+                                      val
+                                        ? `${val.getFullYear()}-${
+                                            val.getMonth() + 1
+                                          }-${val.getDate()}`
+                                        : null
+                                    );
+                                  }}
+                                  error={errors.end_date ? true : false}
+                                />
+                              )}
+                            />
+                            {errors.end_date && (
+                              <h6 className="text-sm text-red-500">{errors.end_date.message}</h6>
+                            )}
+                          </div>
                         </div>
                       </div>
                     </div>
diff --git a/apps/app/components/project/cycles/cycle-detail-sidebar/index.tsx b/apps/app/components/project/cycles/cycle-detail-sidebar/index.tsx
index 3fa73c913..dd81f0692 100644
--- a/apps/app/components/project/cycles/cycle-detail-sidebar/index.tsx
+++ b/apps/app/components/project/cycles/cycle-detail-sidebar/index.tsx
@@ -13,7 +13,7 @@ import cyclesService from "services/cycles.service";
 // hooks
 import useToast from "hooks/use-toast";
 // ui
-import { Loader } from "components/ui";
+import { Loader, CustomDatePicker } from "components/ui";
 //progress-bar
 import { CircularProgressbar } from "react-circular-progressbar";
 import "react-circular-progressbar/dist/styles.css";
@@ -23,7 +23,7 @@ import { groupBy } from "helpers/array.helper";
 // types
 import { CycleIssueResponse, ICycle } from "types";
 // fetch-keys
-import { CYCLE_DETAIL } from "constants/fetch-keys";
+import { CYCLE_LIST } from "constants/fetch-keys";
 
 type Props = {
   cycle: ICycle | undefined;
@@ -38,9 +38,7 @@ const defaultValues: Partial<ICycle> = {
 
 const CycleDetailSidebar: React.FC<Props> = ({ cycle, isOpen, cycleIssues }) => {
   const router = useRouter();
-  const {
-    query: { workspaceSlug, projectId },
-  } = router;
+  const { workspaceSlug, projectId, cycleId } = router.query;
 
   const { setToastAlert } = useToast();
 
@@ -60,11 +58,21 @@ const CycleDetailSidebar: React.FC<Props> = ({ cycle, isOpen, cycleIssues }) =>
   const submitChanges = (data: Partial<ICycle>) => {
     if (!workspaceSlug || !projectId || !module) return;
 
+    mutate<ICycle[]>(
+      projectId && CYCLE_LIST(projectId as string),
+      (prevData) =>
+        (prevData ?? []).map((tempCycle) => {
+          if (tempCycle.id === cycleId) return { ...tempCycle, ...data };
+          return tempCycle;
+        }),
+      false
+    );
+
     cyclesService
       .patchCycle(workspaceSlug as string, projectId as string, cycle?.id ?? "", data)
       .then((res) => {
         console.log(res);
-        mutate(CYCLE_DETAIL);
+        mutate(CYCLE_LIST(projectId as string));
       })
       .catch((e) => {
         console.log(e);
@@ -160,16 +168,17 @@ const CycleDetailSidebar: React.FC<Props> = ({ cycle, isOpen, cycleIssues }) =>
                   <Controller
                     control={control}
                     name="start_date"
-                    render={({ field: { value, onChange } }) => (
-                      <input
-                        type="date"
-                        id="cycleStartDate"
-                        value={value ?? ""}
-                        onChange={(e: any) => {
-                          submitChanges({ start_date: e.target.value });
-                          onChange(e.target.value);
+                    render={({ field: { value } }) => (
+                      <CustomDatePicker
+                        value={value}
+                        onChange={(val: Date) => {
+                          submitChanges({
+                            start_date: val
+                              ? `${val.getFullYear()}-${val.getMonth() + 1}-${val.getDate()}`
+                              : null,
+                          });
                         }}
-                        className="w-full cursor-pointer rounded-md border bg-transparent 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"
+                        isClearable={false}
                       />
                     )}
                   />
@@ -184,16 +193,17 @@ const CycleDetailSidebar: React.FC<Props> = ({ cycle, isOpen, cycleIssues }) =>
                   <Controller
                     control={control}
                     name="end_date"
-                    render={({ field: { value, onChange } }) => (
-                      <input
-                        type="date"
-                        id="moduleEndDate"
-                        value={value ?? ""}
-                        onChange={(e: any) => {
-                          submitChanges({ end_date: e.target.value });
-                          onChange(e.target.value);
+                    render={({ field: { value } }) => (
+                      <CustomDatePicker
+                        value={value}
+                        onChange={(val: Date) => {
+                          submitChanges({
+                            end_date: val
+                              ? `${val.getFullYear()}-${val.getMonth() + 1}-${val.getDate()}`
+                              : null,
+                          });
                         }}
-                        className="w-full cursor-pointer rounded-md border bg-transparent 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"
+                        isClearable={false}
                       />
                     )}
                   />
diff --git a/apps/app/components/project/issues/BoardView/index.tsx b/apps/app/components/project/issues/BoardView/index.tsx
index a2f9c04d2..6243e88dd 100644
--- a/apps/app/components/project/issues/BoardView/index.tsx
+++ b/apps/app/components/project/issues/BoardView/index.tsx
@@ -68,7 +68,8 @@ const BoardView: React.FC<Props> = ({ issues, handleDeleteIssue, userAuth }) =>
 
   const handleOnDragEnd = useCallback(
     (result: DropResult) => {
-      if (!result.destination) return;
+      if (!result.destination || !workspaceSlug || !projectId) return;
+
       const { source, destination, type } = result;
 
       if (destination.droppableId === "trashBox") {
@@ -94,7 +95,7 @@ const BoardView: React.FC<Props> = ({ issues, handleDeleteIssue, userAuth }) =>
           newStates[destination.index].sequence = sequenceNumber;
 
           mutateState(newStates, false);
-          if (!workspaceSlug) return;
+
           stateServices
             .patchState(
               workspaceSlug as string,
@@ -140,18 +141,6 @@ const BoardView: React.FC<Props> = ({ issues, handleDeleteIssue, userAuth }) =>
               draggedItem.state = destinationStateId;
               draggedItem.state_detail = destinationState;
 
-              // patch request
-              issuesServices.patchIssue(
-                workspaceSlug as string,
-                projectId as string,
-                draggedItem.id,
-                {
-                  state: destinationStateId,
-                }
-              );
-
-              // mutate the issues
-              if (!workspaceSlug || !projectId) return;
               mutate<IssueResponse>(
                 PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string),
                 (prevData) => {
@@ -175,6 +164,15 @@ const BoardView: React.FC<Props> = ({ issues, handleDeleteIssue, userAuth }) =>
                 },
                 false
               );
+
+              // patch request
+              issuesServices
+                .patchIssue(workspaceSlug as string, projectId as string, draggedItem.id, {
+                  state: destinationStateId,
+                })
+                .then((res) => {
+                  mutate(PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string));
+                });
             }
           }
         }
diff --git a/apps/app/components/project/issues/issue-detail/activity/index.tsx b/apps/app/components/project/issues/issue-detail/activity/index.tsx
index 3b11436e3..3594bf7a8 100644
--- a/apps/app/components/project/issues/issue-detail/activity/index.tsx
+++ b/apps/app/components/project/issues/issue-detail/activity/index.tsx
@@ -76,11 +76,6 @@ const activityDetails: {
   },
 };
 
-const defaultValues: Partial<IIssueComment> = {
-  comment_html: "",
-  comment_json: "",
-};
-
 const IssueActivitySection: React.FC<{
   issueActivities: IIssueActivity[];
   mutate: KeyedMutator<IIssueActivity[]>;
@@ -99,7 +94,7 @@ const IssueActivitySection: React.FC<{
         comment.id,
         comment
       )
-      .then((response) => {
+      .then((res) => {
         mutate();
       });
   };
@@ -180,6 +175,10 @@ const IssueActivitySection: React.FC<{
                           ? activity.new_value !== ""
                             ? "marked this issue being blocked by"
                             : "removed blocker"
+                          : activity.field === "target_date"
+                          ? activity.new_value && activity.new_value !== ""
+                            ? "set the due date to"
+                            : "removed the due date"
                           : activityDetails[activity.field as keyof typeof activityDetails]
                               ?.message}{" "}
                       </span>
@@ -203,7 +202,9 @@ const IssueActivitySection: React.FC<{
                         ) : activity.field === "assignee" ? (
                           activity.old_value
                         ) : activity.field === "target_date" ? (
-                          renderShortNumericDateFormat(activity.new_value as string)
+                          activity.new_value ? (
+                            renderShortNumericDateFormat(activity.new_value as string)
+                          ) : null
                         ) : activity.field === "description" ? (
                           ""
                         ) : (
diff --git a/apps/app/components/project/issues/issue-detail/issue-detail-sidebar/index.tsx b/apps/app/components/project/issues/issue-detail/issue-detail-sidebar/index.tsx
index 8a1af534a..b46b4c3e1 100644
--- a/apps/app/components/project/issues/issue-detail/issue-detail-sidebar/index.tsx
+++ b/apps/app/components/project/issues/issue-detail/issue-detail-sidebar/index.tsx
@@ -4,20 +4,12 @@ import { useRouter } from "next/router";
 
 import useSWR, { mutate } from "swr";
 
+// react-hook-form
 import { useForm, Controller, UseFormWatch, Control } from "react-hook-form";
-
+// react-color
 import { TwitterPicker } from "react-color";
-// services
+// headless ui
 import { Popover, Listbox, Transition } from "@headlessui/react";
-import {
-  TagIcon,
-  ChevronDownIcon,
-  LinkIcon,
-  CalendarDaysIcon,
-  TrashIcon,
-  PlusIcon,
-  XMarkIcon,
-} from "@heroicons/react/24/outline";
 // hooks
 import useToast from "hooks/use-toast";
 // services
@@ -31,11 +23,19 @@ import SelectCycle from "components/project/issues/issue-detail/issue-detail-sid
 import SelectAssignee from "components/project/issues/issue-detail/issue-detail-sidebar/select-assignee";
 import SelectBlocker from "components/project/issues/issue-detail/issue-detail-sidebar/select-blocker";
 import SelectBlocked from "components/project/issues/issue-detail/issue-detail-sidebar/select-blocked";
-// headless ui
 // ui
-import { Input, Button, Spinner } from "components/ui";
+import { Input, Button, Spinner, CustomDatePicker } from "components/ui";
 import DatePicker from "react-datepicker";
 // icons
+import {
+  TagIcon,
+  ChevronDownIcon,
+  LinkIcon,
+  CalendarDaysIcon,
+  TrashIcon,
+  PlusIcon,
+  XMarkIcon,
+} from "@heroicons/react/24/outline";
 // helpers
 import { copyTextToClipboard } from "helpers/string.helper";
 // types
@@ -240,16 +240,16 @@ const IssueDetailSidebar: React.FC<Props> = ({
                 <Controller
                   control={control}
                   name="target_date"
-                  render={({ field: { value, onChange } }) => (
-                    <input
-                      type="date"
-                      id="issueDate"
-                      value={value ?? ""}
-                      onChange={(e: any) => {
-                        submitChanges({ target_date: e.target.value });
-                        onChange(e.target.value);
+                  render={({ field: { value } }) => (
+                    <CustomDatePicker
+                      value={value}
+                      onChange={(val: Date) => {
+                        submitChanges({
+                          target_date: val
+                            ? `${val.getFullYear()}-${val.getMonth() + 1}-${val.getDate()}`
+                            : null,
+                        });
                       }}
-                      className="w-full cursor-pointer rounded-md 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"
                     />
                   )}
                 />
diff --git a/apps/app/components/project/modules/create-update-module-modal/index.tsx b/apps/app/components/project/modules/create-update-module-modal/index.tsx
index bb9b78d9f..1ec1147e5 100644
--- a/apps/app/components/project/modules/create-update-module-modal/index.tsx
+++ b/apps/app/components/project/modules/create-update-module-modal/index.tsx
@@ -5,7 +5,7 @@ import { useRouter } from "next/router";
 import { mutate } from "swr";
 
 // react-hook-form
-import { useForm } from "react-hook-form";
+import { Controller, useForm } from "react-hook-form";
 // headless ui
 import { Dialog, Transition } from "@headlessui/react";
 // components
@@ -13,7 +13,7 @@ import SelectLead from "components/project/modules/create-update-module-modal/se
 import SelectMembers from "components/project/modules/create-update-module-modal/select-members";
 import SelectStatus from "components/project/modules/create-update-module-modal/select-status";
 // ui
-import { Button, Input, TextArea } from "components/ui";
+import { Button, CustomDatePicker, Input, TextArea } from "components/ui";
 // services
 import modulesService from "services/modules.service";
 // hooks
@@ -193,32 +193,62 @@ const CreateUpdateModuleModal: React.FC<Props> = ({ isOpen, setIsOpen, data, pro
                       </div>
                       <div className="flex gap-x-2">
                         <div className="w-full">
-                          <Input
-                            id="start_date"
-                            label="Start Date"
-                            name="start_date"
-                            type="date"
-                            placeholder="Enter start date"
-                            error={errors.start_date}
-                            register={register}
-                            validations={{
-                              required: "Start date is required",
-                            }}
-                          />
+                          <h6 className="text-gray-500">Start Date</h6>
+                          <div className="w-full">
+                            <Controller
+                              control={control}
+                              name="start_date"
+                              rules={{ required: "Start date is required" }}
+                              render={({ field: { value, onChange } }) => (
+                                <CustomDatePicker
+                                  renderAs="input"
+                                  value={value}
+                                  onChange={(val: Date) => {
+                                    onChange(
+                                      val
+                                        ? `${val.getFullYear()}-${
+                                            val.getMonth() + 1
+                                          }-${val.getDate()}`
+                                        : null
+                                    );
+                                  }}
+                                  error={errors.start_date ? true : false}
+                                />
+                              )}
+                            />
+                            {errors.start_date && (
+                              <h6 className="text-sm text-red-500">{errors.start_date.message}</h6>
+                            )}
+                          </div>
                         </div>
                         <div className="w-full">
-                          <Input
-                            id="target_date"
-                            label="Target Date"
-                            name="target_date"
-                            type="date"
-                            placeholder="Enter target date"
-                            error={errors.target_date}
-                            register={register}
-                            validations={{
-                              required: "Target date is required",
-                            }}
-                          />
+                          <h6 className="text-gray-500">Target Date</h6>
+                          <div className="w-full">
+                            <Controller
+                              control={control}
+                              name="target_date"
+                              rules={{ required: "Target date is required" }}
+                              render={({ field: { value, onChange } }) => (
+                                <CustomDatePicker
+                                  renderAs="input"
+                                  value={value}
+                                  onChange={(val: Date) => {
+                                    onChange(
+                                      val
+                                        ? `${val.getFullYear()}-${
+                                            val.getMonth() + 1
+                                          }-${val.getDate()}`
+                                        : null
+                                    );
+                                  }}
+                                  error={errors.target_date ? true : false}
+                                />
+                              )}
+                            />
+                            {errors.target_date && (
+                              <h6 className="text-sm text-red-500">{errors.target_date.message}</h6>
+                            )}
+                          </div>
                         </div>
                       </div>
                       <div className="flex flex-wrap items-center gap-2">
diff --git a/apps/app/components/project/modules/module-detail-sidebar/index.tsx b/apps/app/components/project/modules/module-detail-sidebar/index.tsx
index a58816f6a..dce925d1d 100644
--- a/apps/app/components/project/modules/module-detail-sidebar/index.tsx
+++ b/apps/app/components/project/modules/module-detail-sidebar/index.tsx
@@ -26,7 +26,7 @@ import ModuleLinkModal from "components/project/modules/module-link-modal";
 import { CircularProgressbar } from "react-circular-progressbar";
 import "react-circular-progressbar/dist/styles.css";
 // ui
-import { Loader } from "components/ui";
+import { CustomDatePicker, Loader } from "components/ui";
 // icons
 // helpers
 import { timeAgo } from "helpers/date-time.helper";
@@ -39,8 +39,8 @@ import { MODULE_LIST } from "constants/fetch-keys";
 
 const defaultValues: Partial<IModule> = {
   members_list: [],
-  start_date: new Date().toString(),
-  target_date: new Date().toString(),
+  start_date: null,
+  target_date: null,
   status: null,
 };
 
@@ -88,16 +88,21 @@ const ModuleDetailSidebar: React.FC<Props> = ({
   const submitChanges = (data: Partial<IModule>) => {
     if (!workspaceSlug || !projectId || !module) return;
 
+    mutate<IModule[]>(
+      projectId && MODULE_LIST(projectId as string),
+      (prevData) =>
+        (prevData ?? []).map((module) => {
+          if (module.id === moduleId) return { ...module, ...data };
+          return module;
+        }),
+      false
+    );
+
     modulesService
       .patchModule(workspaceSlug as string, projectId as string, module.id, data)
       .then((res) => {
         console.log(res);
-        mutate<IModule[]>(projectId && MODULE_LIST(projectId as string), (prevData) =>
-          (prevData ?? []).map((module) => {
-            if (module.id === moduleId) return { ...module, ...data };
-            return module;
-          })
-        );
+        mutate(MODULE_LIST(projectId as string));
       })
       .catch((e) => {
         console.log(e);
@@ -186,16 +191,16 @@ const ModuleDetailSidebar: React.FC<Props> = ({
                     <Controller
                       control={control}
                       name="start_date"
-                      render={({ field: { value, onChange } }) => (
-                        <input
-                          type="date"
-                          id="moduleStartDate"
-                          value={value ?? ""}
-                          onChange={(e: any) => {
-                            submitChanges({ start_date: e.target.value });
-                            onChange(e.target.value);
+                      render={({ field: { value } }) => (
+                        <CustomDatePicker
+                          value={value}
+                          onChange={(val: Date) => {
+                            submitChanges({
+                              start_date: val
+                                ? `${val.getFullYear()}-${val.getMonth() + 1}-${val.getDate()}`
+                                : null,
+                            });
                           }}
-                          className="w-full cursor-pointer rounded-md border bg-transparent 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"
                         />
                       )}
                     />
@@ -210,16 +215,16 @@ const ModuleDetailSidebar: React.FC<Props> = ({
                     <Controller
                       control={control}
                       name="target_date"
-                      render={({ field: { value, onChange } }) => (
-                        <input
-                          type="date"
-                          id="moduleTargetDate"
-                          value={value ?? ""}
-                          onChange={(e: any) => {
-                            submitChanges({ target_date: e.target.value });
-                            onChange(e.target.value);
+                      render={({ field: { value } }) => (
+                        <CustomDatePicker
+                          value={value}
+                          onChange={(val: Date) => {
+                            submitChanges({
+                              target_date: val
+                                ? `${val.getFullYear()}-${val.getMonth() + 1}-${val.getDate()}`
+                                : null,
+                            });
                           }}
-                          className="w-full cursor-pointer rounded-md border bg-transparent 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"
                         />
                       )}
                     />
diff --git a/apps/app/components/project/modules/module-detail-sidebar/select-members.tsx b/apps/app/components/project/modules/module-detail-sidebar/select-members.tsx
index 4a4896fc8..1e862c9de 100644
--- a/apps/app/components/project/modules/module-detail-sidebar/select-members.tsx
+++ b/apps/app/components/project/modules/module-detail-sidebar/select-members.tsx
@@ -12,9 +12,7 @@ import { UserGroupIcon } from "@heroicons/react/24/outline";
 import workspaceService from "services/workspace.service";
 // headless ui
 // ui
-import { Spinner } from "components/ui";
-// icons
-import User from "public/user.png";
+import { AssigneesList, Spinner } from "components/ui";
 // types
 import { IModule } from "types";
 // constants
@@ -64,52 +62,7 @@ const SelectMembers: React.FC<Props> = ({ control, submitChanges }) => {
                     >
                       <div className="flex cursor-pointer items-center gap-1 text-xs">
                         {value && Array.isArray(value) ? (
-                          <>
-                            {value.length > 0 ? (
-                              value.map((member, index: number) => {
-                                const person = people?.find((p) => p.member.id === member)?.member;
-
-                                return (
-                                  <div
-                                    key={index}
-                                    className={`relative z-[1] h-5 w-5 rounded-full ${
-                                      index !== 0 ? "-ml-2.5" : ""
-                                    }`}
-                                  >
-                                    {person && person.avatar && person.avatar !== "" ? (
-                                      <div className="h-5 w-5 rounded-full border-2 border-white bg-white">
-                                        <Image
-                                          src={person.avatar}
-                                          height="100%"
-                                          width="100%"
-                                          className="rounded-full"
-                                          alt={person.first_name}
-                                        />
-                                      </div>
-                                    ) : (
-                                      <div
-                                        className={`grid h-5 w-5 place-items-center rounded-full border-2 border-white bg-gray-700 capitalize text-white`}
-                                      >
-                                        {person?.first_name && person.first_name !== ""
-                                          ? person.first_name.charAt(0)
-                                          : person?.email.charAt(0)}
-                                      </div>
-                                    )}
-                                  </div>
-                                );
-                              })
-                            ) : (
-                              <div className="h-5 w-5 rounded-full border-2 border-white bg-white">
-                                <Image
-                                  src={User}
-                                  height="100%"
-                                  width="100%"
-                                  className="rounded-full"
-                                  alt="No user"
-                                />
-                              </div>
-                            )}
-                          </>
+                          <AssigneesList userIds={value} length={10} />
                         ) : null}
                       </div>
                     </span>
diff --git a/apps/app/components/ui/datepicker.tsx b/apps/app/components/ui/datepicker.tsx
new file mode 100644
index 000000000..028f9ddbc
--- /dev/null
+++ b/apps/app/components/ui/datepicker.tsx
@@ -0,0 +1,40 @@
+// react-datepicker
+import DatePicker from "react-datepicker";
+import "react-datepicker/dist/react-datepicker.css";
+
+type Props = {
+  renderAs?: "input" | "button";
+  value: Date | string | null | undefined;
+  onChange: (arg: Date) => void;
+  placeholder?: string;
+  displayShortForm?: boolean;
+  error?: boolean;
+  className?: string;
+  isClearable?: boolean;
+};
+
+export const CustomDatePicker: React.FC<Props> = ({
+  renderAs = "button",
+  value,
+  onChange,
+  placeholder = "Select date",
+  displayShortForm = false,
+  error = false,
+  className = "",
+  isClearable = true,
+}) => (
+  <DatePicker
+    placeholderText={placeholder}
+    selected={value ? new Date(value) : null}
+    onChange={onChange}
+    dateFormat="dd-MM-yyyy"
+    className={`${className} ${
+      renderAs === "input"
+        ? "block bg-transparent text-sm focus:outline-none rounded-md border border-gray-300 px-3 py-2 w-full cursor-pointer"
+        : renderAs === "button"
+        ? "w-full cursor-pointer rounded-md 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"
+        : ""
+    } ${error ? "border-red-500 bg-red-200" : ""} bg-transparent caret-transparent`}
+    isClearable={isClearable}
+  />
+);
diff --git a/apps/app/components/ui/index.ts b/apps/app/components/ui/index.ts
index 768af5a01..1a16e2072 100644
--- a/apps/app/components/ui/index.ts
+++ b/apps/app/components/ui/index.ts
@@ -13,3 +13,4 @@ export * from "./spinner";
 export * from "./text-area";
 export * from "./tooltip";
 export * from "./avatar";
+export * from "./datepicker";
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx
index 6af66d85f..f4512a985 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx
@@ -50,7 +50,7 @@ const SingleCycle: React.FC<UserAuth> = (props) => {
   const [selectedIssues, setSelectedIssues] = useState<SelectIssue>();
   const [cycleIssuesListModal, setCycleIssuesListModal] = useState(false);
   const [deleteIssue, setDeleteIssue] = useState<string | undefined>(undefined);
-  const [cycleSidebar, setCycleSidebar] = useState(false);
+  const [cycleSidebar, setCycleSidebar] = useState(true);
 
   const [preloadedData, setPreloadedData] = useState<
     (Partial<IIssue> & { actionType: "createIssue" | "edit" | "delete" }) | null
diff --git a/apps/app/styles/globals.css b/apps/app/styles/globals.css
index 97472944e..7ed87ba41 100644
--- a/apps/app/styles/globals.css
+++ b/apps/app/styles/globals.css
@@ -71,3 +71,23 @@
   border: none;
   outline: none;
 }
+
+/* react datepicker styling */
+.react-datepicker-wrapper input::placeholder {
+  color: #000;
+  opacity: 1;
+}
+
+.react-datepicker-wrapper input:-ms-input-placeholder {
+  color: #000;
+}
+
+.react-datepicker-wrapper .react-datepicker__close-icon::after {
+  background: transparent;
+  color: #000;
+}
+
+.react-datepicker-popper {
+  z-index: 30 !important;
+}
+/* end react datepicker styling */

From 45a52116a7fb264eba04bed358fd8a43c5b50581 Mon Sep 17 00:00:00 2001
From: pablohashescobar <118773738+pablohashescobar@users.noreply.github.com>
Date: Tue, 31 Jan 2023 00:46:59 +0530
Subject: [PATCH 11/15] refactor: move issue activity tracking from
 django-channels to rqworker (#207)

* refactor: move issue activity tracking from django channels to rqworker

* refactor: update old value and new value from character type to text type
---
 apiserver/Dockerfile.api                      |   2 +-
 apiserver/Procfile                            |   3 +-
 apiserver/bin/channel-worker                  |   6 -
 apiserver/plane/api/consumers/__init__.py     |   1 -
 .../plane/api/consumers/issue_consumer.py     | 547 -----------------
 apiserver/plane/api/views/issue.py            |  11 +-
 apiserver/plane/asgi.py                       |   8 +-
 .../plane/bgtasks/issue_activites_task.py     | 553 ++++++++++++++++++
 apiserver/plane/db/apps.py                    |  47 --
 apiserver/plane/db/models/issue.py            |   8 +-
 apiserver/plane/settings/common.py            |   2 -
 apiserver/plane/settings/local.py             |   8 -
 apiserver/plane/settings/production.py        |  63 +-
 apiserver/plane/settings/staging.py           |  50 --
 apiserver/requirements/base.txt               |   3 -
 docker-compose.yml                            |  15 -
 16 files changed, 566 insertions(+), 761 deletions(-)
 delete mode 100755 apiserver/bin/channel-worker
 delete mode 100644 apiserver/plane/api/consumers/__init__.py
 delete mode 100644 apiserver/plane/api/consumers/issue_consumer.py
 create mode 100644 apiserver/plane/bgtasks/issue_activites_task.py

diff --git a/apiserver/Dockerfile.api b/apiserver/Dockerfile.api
index e39f91f6f..6343c740e 100644
--- a/apiserver/Dockerfile.api
+++ b/apiserver/Dockerfile.api
@@ -49,7 +49,7 @@ USER root
 RUN apk --update --no-cache add "bash~=5.1"
 COPY ./bin ./bin/
 
-RUN chmod +x ./bin/channel-worker ./bin/takeoff ./bin/worker
+RUN chmod +x ./bin/takeoff ./bin/worker
 
 USER captain
 
diff --git a/apiserver/Procfile b/apiserver/Procfile
index 026a3f953..35f6e9aa8 100644
--- a/apiserver/Procfile
+++ b/apiserver/Procfile
@@ -1,3 +1,2 @@
 web: gunicorn -w 4 -k uvicorn.workers.UvicornWorker plane.asgi:application --bind 0.0.0.0:$PORT --config gunicorn.config.py --max-requests 10000 --max-requests-jitter 1000 --access-logfile -
-worker: python manage.py rqworker
-channel-worker: python manage.py runworker issue-activites
\ No newline at end of file
+worker: python manage.py rqworker
\ No newline at end of file
diff --git a/apiserver/bin/channel-worker b/apiserver/bin/channel-worker
deleted file mode 100755
index 90ba63d50..000000000
--- a/apiserver/bin/channel-worker
+++ /dev/null
@@ -1,6 +0,0 @@
-#!/bin/bash
-set -e
-
-python manage.py wait_for_db
-python manage.py migrate
-python manage.py runworker issue-activites
\ No newline at end of file
diff --git a/apiserver/plane/api/consumers/__init__.py b/apiserver/plane/api/consumers/__init__.py
deleted file mode 100644
index cbf41cdfa..000000000
--- a/apiserver/plane/api/consumers/__init__.py
+++ /dev/null
@@ -1 +0,0 @@
-from .issue_consumer import IssueConsumer
\ No newline at end of file
diff --git a/apiserver/plane/api/consumers/issue_consumer.py b/apiserver/plane/api/consumers/issue_consumer.py
deleted file mode 100644
index 38eb69967..000000000
--- a/apiserver/plane/api/consumers/issue_consumer.py
+++ /dev/null
@@ -1,547 +0,0 @@
-from channels.generic.websocket import SyncConsumer
-import json
-from plane.db.models import IssueActivity, Project, User, Issue, State, Label
-
-
-class IssueConsumer(SyncConsumer):
-
-    # Track Chnages in name
-    def track_name(
-        self,
-        requested_data,
-        current_instance,
-        issue_id,
-        project,
-        actor,
-        issue_activities,
-    ):
-        if current_instance.get("name") != requested_data.get("name"):
-            issue_activities.append(
-                IssueActivity(
-                    issue_id=issue_id,
-                    actor=actor,
-                    verb="updated",
-                    old_value=current_instance.get("name"),
-                    new_value=requested_data.get("name"),
-                    field="name",
-                    project=project,
-                    workspace=project.workspace,
-                    comment=f"{actor.email} updated the start date to {requested_data.get('name')}",
-                )
-            )
-
-    # Track changes in parent issue
-    def track_parent(
-        self,
-        requested_data,
-        current_instance,
-        issue_id,
-        project,
-        actor,
-        issue_activities,
-    ):
-        if current_instance.get("parent") != requested_data.get("parent"):
-
-            if requested_data.get("parent") == None:
-                old_parent = Issue.objects.get(pk=current_instance.get("parent"))
-                issue_activities.append(
-                    IssueActivity(
-                        issue_id=issue_id,
-                        actor=actor,
-                        verb="updated",
-                        old_value=f"{project.identifier}-{old_parent.sequence_id}",
-                        new_value=None,
-                        field="parent",
-                        project=project,
-                        workspace=project.workspace,
-                        comment=f"{actor.email} updated the parent issue to None",
-                        old_identifier=old_parent.id,
-                        new_identifier=None,
-                    )
-                )
-            else:
-                new_parent = Issue.objects.get(pk=requested_data.get("parent"))
-                old_parent = Issue.objects.filter(
-                    pk=current_instance.get("parent")
-                ).first()
-                issue_activities.append(
-                    IssueActivity(
-                        issue_id=issue_id,
-                        actor=actor,
-                        verb="updated",
-                        old_value=f"{project.identifier}-{old_parent.sequence_id}"
-                        if old_parent is not None
-                        else None,
-                        new_value=f"{project.identifier}-{new_parent.sequence_id}",
-                        field="parent",
-                        project=project,
-                        workspace=project.workspace,
-                        comment=f"{actor.email} updated the parent issue to {new_parent.name}",
-                        old_identifier=old_parent.id
-                        if old_parent is not None
-                        else None,
-                        new_identifier=new_parent.id,
-                    )
-                )
-
-    # Track changes in priority
-    def track_priority(
-        self,
-        requested_data,
-        current_instance,
-        issue_id,
-        project,
-        actor,
-        issue_activities,
-    ):
-        if current_instance.get("priority") != requested_data.get("priority"):
-            if requested_data.get("priority") == None:
-                issue_activities.append(
-                    IssueActivity(
-                        issue_id=issue_id,
-                        actor=actor,
-                        verb="updated",
-                        old_value=current_instance.get("parent"),
-                        new_value=requested_data.get("parent"),
-                        field="priority",
-                        project=project,
-                        workspace=project.workspace,
-                        comment=f"{actor.email} updated the priority to None",
-                    )
-                )
-            else:
-                issue_activities.append(
-                    IssueActivity(
-                        issue_id=issue_id,
-                        actor=actor,
-                        verb="updated",
-                        old_value=current_instance.get("priority"),
-                        new_value=requested_data.get("priority"),
-                        field="priority",
-                        project=project,
-                        workspace=project.workspace,
-                        comment=f"{actor.email} updated the priority to {requested_data.get('priority')}",
-                    )
-                )
-
-    # Track chnages in state of the issue
-    def track_state(
-        self,
-        requested_data,
-        current_instance,
-        issue_id,
-        project,
-        actor,
-        issue_activities,
-    ):
-        if current_instance.get("state") != requested_data.get("state"):
-
-            new_state = State.objects.get(pk=requested_data.get("state", None))
-            old_state = State.objects.get(pk=current_instance.get("state", None))
-
-            issue_activities.append(
-                IssueActivity(
-                    issue_id=issue_id,
-                    actor=actor,
-                    verb="updated",
-                    old_value=old_state.name,
-                    new_value=new_state.name,
-                    field="state",
-                    project=project,
-                    workspace=project.workspace,
-                    comment=f"{actor.email} updated the state to {new_state.name}",
-                    old_identifier=old_state.id,
-                    new_identifier=new_state.id,
-                )
-            )
-
-    # Track issue description
-    def track_description(
-        self,
-        requested_data,
-        current_instance,
-        issue_id,
-        project,
-        actor,
-        issue_activities,
-    ):
-        if current_instance.get("description_html") != requested_data.get("description_html"):
-
-            issue_activities.append(
-                IssueActivity(
-                    issue_id=issue_id,
-                    actor=actor,
-                    verb="updated",
-                    old_value=current_instance.get("description_html"),
-                    new_value=requested_data.get("description_html"),
-                    field="description",
-                    project=project,
-                    workspace=project.workspace,
-                    comment=f"{actor.email} updated the description to {requested_data.get('description_html')}",
-                )
-            )
-
-    # Track changes in issue target date
-    def track_target_date(
-        self,
-        requested_data,
-        current_instance,
-        issue_id,
-        project,
-        actor,
-        issue_activities,
-    ):
-        if current_instance.get("target_date") != requested_data.get("target_date"):
-            if requested_data.get("target_date") == None:
-                issue_activities.append(
-                    IssueActivity(
-                        issue_id=issue_id,
-                        actor=actor,
-                        verb="updated",
-                        old_value=current_instance.get("target_date"),
-                        new_value=requested_data.get("target_date"),
-                        field="target_date",
-                        project=project,
-                        workspace=project.workspace,
-                        comment=f"{actor.email} updated the target date to None",
-                    )
-                )
-            else:
-                issue_activities.append(
-                    IssueActivity(
-                        issue_id=issue_id,
-                        actor=actor,
-                        verb="updated",
-                        old_value=current_instance.get("target_date"),
-                        new_value=requested_data.get("target_date"),
-                        field="target_date",
-                        project=project,
-                        workspace=project.workspace,
-                        comment=f"{actor.email} updated the target date to {requested_data.get('target_date')}",
-                    )
-                )
-
-    # Track changes in issue start date
-    def track_start_date(
-        self,
-        requested_data,
-        current_instance,
-        issue_id,
-        project,
-        actor,
-        issue_activities,
-    ):
-        if current_instance.get("start_date") != requested_data.get("start_date"):
-            if requested_data.get("start_date") == None:
-                issue_activities.append(
-                    IssueActivity(
-                        issue_id=issue_id,
-                        actor=actor,
-                        verb="updated",
-                        old_value=current_instance.get("start_date"),
-                        new_value=requested_data.get("start_date"),
-                        field="start_date",
-                        project=project,
-                        workspace=project.workspace,
-                        comment=f"{actor.email} updated the start date to None",
-                    )
-                )
-            else:
-                issue_activities.append(
-                    IssueActivity(
-                        issue_id=issue_id,
-                        actor=actor,
-                        verb="updated",
-                        old_value=current_instance.get("start_date"),
-                        new_value=requested_data.get("start_date"),
-                        field="start_date",
-                        project=project,
-                        workspace=project.workspace,
-                        comment=f"{actor.email} updated the start date to {requested_data.get('start_date')}",
-                    )
-                )
-
-    # Track changes in issue labels
-    def track_labels(
-        self,
-        requested_data,
-        current_instance,
-        issue_id,
-        project,
-        actor,
-        issue_activities,
-    ):
-        # Label Addition
-        if len(requested_data.get("labels_list")) > len(current_instance.get("labels")):
-
-            for label in requested_data.get("labels_list"):
-                if label not in current_instance.get("labels"):
-                    label = Label.objects.get(pk=label)
-                    issue_activities.append(
-                        IssueActivity(
-                            issue_id=issue_id,
-                            actor=actor,
-                            verb="updated",
-                            old_value="",
-                            new_value=label.name,
-                            field="labels",
-                            project=project,
-                            workspace=project.workspace,
-                            comment=f"{actor.email} added label {label.name}",
-                            new_identifier=label.id,
-                            old_identifier=None,
-                        )
-                    )
-
-        # Label Removal
-        if len(requested_data.get("labels_list")) < len(current_instance.get("labels")):
-
-            for label in current_instance.get("labels"):
-                if label not in requested_data.get("labels_list"):
-                    label = Label.objects.get(pk=label)
-                    issue_activities.append(
-                        IssueActivity(
-                            issue_id=issue_id,
-                            actor=actor,
-                            verb="updated",
-                            old_value=label.name,
-                            new_value="",
-                            field="labels",
-                            project=project,
-                            workspace=project.workspace,
-                            comment=f"{actor.email} removed label {label.name}",
-                            old_identifier=label.id,
-                            new_identifier=None,
-                        )
-                    )
-
-    # Track changes in issue assignees
-    def track_assignees(
-        self,
-        requested_data,
-        current_instance,
-        issue_id,
-        project,
-        actor,
-        issue_activities,
-    ):
-
-        # Assignee Addition
-        if len(requested_data.get("assignees_list")) > len(
-            current_instance.get("assignees")
-        ):
-
-            for assignee in requested_data.get("assignees_list"):
-                if assignee not in current_instance.get("assignees"):
-                    assignee = User.objects.get(pk=assignee)
-                    issue_activities.append(
-                        IssueActivity(
-                            issue_id=issue_id,
-                            actor=actor,
-                            verb="updated",
-                            old_value="",
-                            new_value=assignee.email,
-                            field="assignees",
-                            project=project,
-                            workspace=project.workspace,
-                            comment=f"{actor.email} added assignee {assignee.email}",
-                            new_identifier=actor.id,
-                        )
-                    )
-
-        # Assignee Removal
-        if len(requested_data.get("assignees_list")) < len(
-            current_instance.get("assignees")
-        ):
-
-            for assignee in current_instance.get("assignees"):
-                if assignee not in requested_data.get("assignees_list"):
-                    assignee = User.objects.get(pk=assignee)
-                    issue_activities.append(
-                        IssueActivity(
-                            issue_id=issue_id,
-                            actor=actor,
-                            verb="updated",
-                            old_value=assignee.email,
-                            new_value="",
-                            field="assignee",
-                            project=project,
-                            workspace=project.workspace,
-                            comment=f"{actor.email} removed assignee {assignee.email}",
-                            old_identifier=actor.id,
-                        )
-                    )
-
-    # Track changes in blocking issues
-    def track_blocks(
-        self,
-        requested_data,
-        current_instance,
-        issue_id,
-        project,
-        actor,
-        issue_activities,
-    ):
-        if len(requested_data.get("blocks_list")) > len(
-            current_instance.get("blocked_issues")
-        ):
-
-            for block in requested_data.get("blocks_list"):
-                if (
-                    len(
-                        [
-                            blocked
-                            for blocked in current_instance.get("blocked_issues")
-                            if blocked.get("block") == block
-                        ]
-                    )
-                    == 0
-                ):
-                    issue = Issue.objects.get(pk=block)
-                    issue_activities.append(
-                        IssueActivity(
-                            issue_id=issue_id,
-                            actor=actor,
-                            verb="updated",
-                            old_value="",
-                            new_value=f"{project.identifier}-{issue.sequence_id}",
-                            field="blocks",
-                            project=project,
-                            workspace=project.workspace,
-                            comment=f"{actor.email} added blocking issue {project.identifier}-{issue.sequence_id}",
-                            new_identifier=issue.id,
-                        )
-                    )
-
-        # Blocked Issue Removal
-        if len(requested_data.get("blocks_list")) < len(
-            current_instance.get("blocked_issues")
-        ):
-
-            for blocked in current_instance.get("blocked_issues"):
-                if blocked.get("block") not in requested_data.get("blocks_list"):
-                    issue = Issue.objects.get(pk=blocked.get("block"))
-                    issue_activities.append(
-                        IssueActivity(
-                            issue_id=issue_id,
-                            actor=actor,
-                            verb="updated",
-                            old_value=f"{project.identifier}-{issue.sequence_id}",
-                            new_value="",
-                            field="blocks",
-                            project=project,
-                            workspace=project.workspace,
-                            comment=f"{actor.email} removed blocking issue {project.identifier}-{issue.sequence_id}",
-                            old_identifier=issue.id,
-                        )
-                    )
-
-    # Track changes in blocked_by issues
-    def track_blockings(
-        self,
-        requested_data,
-        current_instance,
-        issue_id,
-        project,
-        actor,
-        issue_activities,
-    ):
-        if len(requested_data.get("blockers_list")) > len(
-            current_instance.get("blocker_issues")
-        ):
-
-            for block in requested_data.get("blockers_list"):
-                if (
-                    len(
-                        [
-                            blocked
-                            for blocked in current_instance.get("blocker_issues")
-                            if blocked.get("blocked_by") == block
-                        ]
-                    )
-                    == 0
-                ):
-                    issue = Issue.objects.get(pk=block)
-                    issue_activities.append(
-                        IssueActivity(
-                            issue_id=issue_id,
-                            actor=actor,
-                            verb="updated",
-                            old_value="",
-                            new_value=f"{project.identifier}-{issue.sequence_id}",
-                            field="blocking",
-                            project=project,
-                            workspace=project.workspace,
-                            comment=f"{actor.email} added blocked by issue {project.identifier}-{issue.sequence_id}",
-                            new_identifier=issue.id,
-                        )
-                    )
-
-        # Blocked Issue Removal
-        if len(requested_data.get("blockers_list")) < len(
-            current_instance.get("blocker_issues")
-        ):
-
-            for blocked in current_instance.get("blocker_issues"):
-                if blocked.get("blocked_by") not in requested_data.get("blockers_list"):
-                    issue = Issue.objects.get(pk=blocked.get("blocked_by"))
-                    issue_activities.append(
-                        IssueActivity(
-                            issue_id=issue_id,
-                            actor=actor,
-                            verb="updated",
-                            old_value=f"{project.identifier}-{issue.sequence_id}",
-                            new_value="",
-                            field="blocking",
-                            project=project,
-                            workspace=project.workspace,
-                            comment=f"{actor.email} removed blocked by issue {project.identifier}-{issue.sequence_id}",
-                            old_identifier=issue.id,
-                        )
-                    )
-
-    # Receive message from room group
-    def issue_activity(self, event):
-
-        issue_activities = []
-        # Remove event type:
-        event.pop("type")
-
-        requested_data = json.loads(event.get("requested_data"))
-        current_instance = json.loads(event.get("current_instance"))
-        issue_id = event.get("issue_id")
-        actor_id = event.get("actor_id")
-        project_id = event.get("project_id")
-
-        actor = User.objects.get(pk=actor_id)
-
-        project = Project.objects.get(pk=project_id)
-
-        ISSUE_ACTIVITY_MAPPER = {
-            "name": self.track_name,
-            "parent": self.track_parent,
-            "priority": self.track_priority,
-            "state": self.track_state,
-            "description": self.track_description,
-            "target_date": self.track_target_date,
-            "start_date": self.track_start_date,
-            "labels_list": self.track_labels,
-            "assignees_list": self.track_assignees,
-            "blocks_list": self.track_blocks,
-            "blockers_list": self.track_blockings,
-        }
-
-        for key in requested_data:
-            func = ISSUE_ACTIVITY_MAPPER.get(key, None)
-            if func is not None:
-                func(
-                    requested_data,
-                    current_instance,
-                    issue_id,
-                    project,
-                    actor,
-                    issue_activities,
-                )
-        
-        # Save all the values to database
-        IssueActivity.objects.bulk_create(issue_activities)
diff --git a/apiserver/plane/api/views/issue.py b/apiserver/plane/api/views/issue.py
index f716c2b11..37082e0ec 100644
--- a/apiserver/plane/api/views/issue.py
+++ b/apiserver/plane/api/views/issue.py
@@ -10,8 +10,6 @@ from django.core.serializers.json import DjangoJSONEncoder
 from rest_framework.response import Response
 from rest_framework import status
 from sentry_sdk import capture_exception
-from channels.layers import get_channel_layer
-from asgiref.sync import async_to_sync
 
 # Module imports
 from . import BaseViewSet, BaseAPIView
@@ -42,6 +40,7 @@ from plane.db.models import (
     CycleIssue,
     ModuleIssue,
 )
+from plane.bgtasks.issue_activites_task import issue_activity
 
 
 class IssueViewSet(BaseViewSet):
@@ -72,12 +71,12 @@ class IssueViewSet(BaseViewSet):
 
     def perform_update(self, serializer):
         requested_data = json.dumps(self.request.data, cls=DjangoJSONEncoder)
-        current_instance = Issue.objects.filter(pk=self.kwargs.get("pk", None)).first()
+        current_instance = (
+            self.get_queryset().filter(pk=self.kwargs.get("pk", None)).first()
+        )
         if current_instance is not None:
 
-            channel_layer = get_channel_layer()
-            async_to_sync(channel_layer.send)(
-                "issue-activites",
+            issue_activity.delay(
                 {
                     "type": "issue.activity",
                     "requested_data": requested_data,
diff --git a/apiserver/plane/asgi.py b/apiserver/plane/asgi.py
index b5beb1df4..7333baae3 100644
--- a/apiserver/plane/asgi.py
+++ b/apiserver/plane/asgi.py
@@ -1,6 +1,6 @@
 import os
 
-from channels.routing import ProtocolTypeRouter, ChannelNameRouter
+from channels.routing import ProtocolTypeRouter
 from django.core.asgi import get_asgi_application
 
 django_asgi_app = get_asgi_application()
@@ -10,15 +10,9 @@ os.environ.setdefault("DJANGO_SETTINGS_MODULE", "plane.settings.production")
 # Initialize Django ASGI application early to ensure the AppRegistry
 # is populated before importing code that may import ORM models.
 
-from plane.api.consumers import IssueConsumer
 
 application = ProtocolTypeRouter(
     {
         "http": get_asgi_application(),
-        "channel": ChannelNameRouter(
-            {
-                "issue-activites": IssueConsumer.as_asgi(),
-            }
-        ),
     }
 )
diff --git a/apiserver/plane/bgtasks/issue_activites_task.py b/apiserver/plane/bgtasks/issue_activites_task.py
new file mode 100644
index 000000000..f6debc921
--- /dev/null
+++ b/apiserver/plane/bgtasks/issue_activites_task.py
@@ -0,0 +1,553 @@
+# Python imports
+import json
+
+# Third Party imports
+from django_rq import job
+from sentry_sdk import capture_exception
+
+# Module imports
+from plane.db.models import User, Issue, Project, Label, IssueActivity, State
+
+
+# Track Chnages in name
+def track_name(
+    requested_data,
+    current_instance,
+    issue_id,
+    project,
+    actor,
+    issue_activities,
+):
+    if current_instance.get("name") != requested_data.get("name"):
+        issue_activities.append(
+            IssueActivity(
+                issue_id=issue_id,
+                actor=actor,
+                verb="updated",
+                old_value=current_instance.get("name"),
+                new_value=requested_data.get("name"),
+                field="name",
+                project=project,
+                workspace=project.workspace,
+                comment=f"{actor.email} updated the start date to {requested_data.get('name')}",
+            )
+        )
+
+
+# Track changes in parent issue
+def track_parent(
+    requested_data,
+    current_instance,
+    issue_id,
+    project,
+    actor,
+    issue_activities,
+):
+    if current_instance.get("parent") != requested_data.get("parent"):
+
+        if requested_data.get("parent") == None:
+            old_parent = Issue.objects.get(pk=current_instance.get("parent"))
+            issue_activities.append(
+                IssueActivity(
+                    issue_id=issue_id,
+                    actor=actor,
+                    verb="updated",
+                    old_value=f"{project.identifier}-{old_parent.sequence_id}",
+                    new_value=None,
+                    field="parent",
+                    project=project,
+                    workspace=project.workspace,
+                    comment=f"{actor.email} updated the parent issue to None",
+                    old_identifier=old_parent.id,
+                    new_identifier=None,
+                )
+            )
+        else:
+            new_parent = Issue.objects.get(pk=requested_data.get("parent"))
+            old_parent = Issue.objects.filter(pk=current_instance.get("parent")).first()
+            issue_activities.append(
+                IssueActivity(
+                    issue_id=issue_id,
+                    actor=actor,
+                    verb="updated",
+                    old_value=f"{project.identifier}-{old_parent.sequence_id}"
+                    if old_parent is not None
+                    else None,
+                    new_value=f"{project.identifier}-{new_parent.sequence_id}",
+                    field="parent",
+                    project=project,
+                    workspace=project.workspace,
+                    comment=f"{actor.email} updated the parent issue to {new_parent.name}",
+                    old_identifier=old_parent.id if old_parent is not None else None,
+                    new_identifier=new_parent.id,
+                )
+            )
+
+
+# Track changes in priority
+def track_priority(
+    requested_data,
+    current_instance,
+    issue_id,
+    project,
+    actor,
+    issue_activities,
+):
+    if current_instance.get("priority") != requested_data.get("priority"):
+        if requested_data.get("priority") == None:
+            issue_activities.append(
+                IssueActivity(
+                    issue_id=issue_id,
+                    actor=actor,
+                    verb="updated",
+                    old_value=current_instance.get("priority"),
+                    new_value=None,
+                    field="priority",
+                    project=project,
+                    workspace=project.workspace,
+                    comment=f"{actor.email} updated the priority to None",
+                )
+            )
+        else:
+            issue_activities.append(
+                IssueActivity(
+                    issue_id=issue_id,
+                    actor=actor,
+                    verb="updated",
+                    old_value=current_instance.get("priority"),
+                    new_value=requested_data.get("priority"),
+                    field="priority",
+                    project=project,
+                    workspace=project.workspace,
+                    comment=f"{actor.email} updated the priority to {requested_data.get('priority')}",
+                )
+            )
+
+
+# Track chnages in state of the issue
+def track_state(
+    requested_data,
+    current_instance,
+    issue_id,
+    project,
+    actor,
+    issue_activities,
+):
+    if current_instance.get("state") != requested_data.get("state"):
+
+        new_state = State.objects.get(pk=requested_data.get("state", None))
+        old_state = State.objects.get(pk=current_instance.get("state", None))
+
+        issue_activities.append(
+            IssueActivity(
+                issue_id=issue_id,
+                actor=actor,
+                verb="updated",
+                old_value=old_state.name,
+                new_value=new_state.name,
+                field="state",
+                project=project,
+                workspace=project.workspace,
+                comment=f"{actor.email} updated the state to {new_state.name}",
+                old_identifier=old_state.id,
+                new_identifier=new_state.id,
+            )
+        )
+
+
+# Track issue description
+def track_description(
+    requested_data,
+    current_instance,
+    issue_id,
+    project,
+    actor,
+    issue_activities,
+):
+    if current_instance.get("description_html") != requested_data.get(
+        "description_html"
+    ):
+
+        issue_activities.append(
+            IssueActivity(
+                issue_id=issue_id,
+                actor=actor,
+                verb="updated",
+                old_value=current_instance.get("description_html"),
+                new_value=requested_data.get("description_html"),
+                field="description",
+                project=project,
+                workspace=project.workspace,
+                comment=f"{actor.email} updated the description to {requested_data.get('description_html')}",
+            )
+        )
+
+
+# Track changes in issue target date
+def track_target_date(
+    requested_data,
+    current_instance,
+    issue_id,
+    project,
+    actor,
+    issue_activities,
+):
+    if current_instance.get("target_date") != requested_data.get("target_date"):
+        if requested_data.get("target_date") == None:
+            issue_activities.append(
+                IssueActivity(
+                    issue_id=issue_id,
+                    actor=actor,
+                    verb="updated",
+                    old_value=current_instance.get("target_date"),
+                    new_value=requested_data.get("target_date"),
+                    field="target_date",
+                    project=project,
+                    workspace=project.workspace,
+                    comment=f"{actor.email} updated the target date to None",
+                )
+            )
+        else:
+            issue_activities.append(
+                IssueActivity(
+                    issue_id=issue_id,
+                    actor=actor,
+                    verb="updated",
+                    old_value=current_instance.get("target_date"),
+                    new_value=requested_data.get("target_date"),
+                    field="target_date",
+                    project=project,
+                    workspace=project.workspace,
+                    comment=f"{actor.email} updated the target date to {requested_data.get('target_date')}",
+                )
+            )
+
+
+# Track changes in issue start date
+def track_start_date(
+    requested_data,
+    current_instance,
+    issue_id,
+    project,
+    actor,
+    issue_activities,
+):
+    if current_instance.get("start_date") != requested_data.get("start_date"):
+        if requested_data.get("start_date") == None:
+            issue_activities.append(
+                IssueActivity(
+                    issue_id=issue_id,
+                    actor=actor,
+                    verb="updated",
+                    old_value=current_instance.get("start_date"),
+                    new_value=requested_data.get("start_date"),
+                    field="start_date",
+                    project=project,
+                    workspace=project.workspace,
+                    comment=f"{actor.email} updated the start date to None",
+                )
+            )
+        else:
+            issue_activities.append(
+                IssueActivity(
+                    issue_id=issue_id,
+                    actor=actor,
+                    verb="updated",
+                    old_value=current_instance.get("start_date"),
+                    new_value=requested_data.get("start_date"),
+                    field="start_date",
+                    project=project,
+                    workspace=project.workspace,
+                    comment=f"{actor.email} updated the start date to {requested_data.get('start_date')}",
+                )
+            )
+
+
+# Track changes in issue labels
+def track_labels(
+    requested_data,
+    current_instance,
+    issue_id,
+    project,
+    actor,
+    issue_activities,
+):
+    # Label Addition
+    if len(requested_data.get("labels_list")) > len(current_instance.get("labels")):
+
+        for label in requested_data.get("labels_list"):
+            if label not in current_instance.get("labels"):
+                label = Label.objects.get(pk=label)
+                issue_activities.append(
+                    IssueActivity(
+                        issue_id=issue_id,
+                        actor=actor,
+                        verb="updated",
+                        old_value="",
+                        new_value=label.name,
+                        field="labels",
+                        project=project,
+                        workspace=project.workspace,
+                        comment=f"{actor.email} added label {label.name}",
+                        new_identifier=label.id,
+                        old_identifier=None,
+                    )
+                )
+
+    # Label Removal
+    if len(requested_data.get("labels_list")) < len(current_instance.get("labels")):
+
+        for label in current_instance.get("labels"):
+            if label not in requested_data.get("labels_list"):
+                label = Label.objects.get(pk=label)
+                issue_activities.append(
+                    IssueActivity(
+                        issue_id=issue_id,
+                        actor=actor,
+                        verb="updated",
+                        old_value=label.name,
+                        new_value="",
+                        field="labels",
+                        project=project,
+                        workspace=project.workspace,
+                        comment=f"{actor.email} removed label {label.name}",
+                        old_identifier=label.id,
+                        new_identifier=None,
+                    )
+                )
+
+
+# Track changes in issue assignees
+def track_assignees(
+    requested_data,
+    current_instance,
+    issue_id,
+    project,
+    actor,
+    issue_activities,
+):
+
+    # Assignee Addition
+    if len(requested_data.get("assignees_list")) > len(
+        current_instance.get("assignees")
+    ):
+
+        for assignee in requested_data.get("assignees_list"):
+            if assignee not in current_instance.get("assignees"):
+                assignee = User.objects.get(pk=assignee)
+                issue_activities.append(
+                    IssueActivity(
+                        issue_id=issue_id,
+                        actor=actor,
+                        verb="updated",
+                        old_value="",
+                        new_value=assignee.email,
+                        field="assignees",
+                        project=project,
+                        workspace=project.workspace,
+                        comment=f"{actor.email} added assignee {assignee.email}",
+                        new_identifier=actor.id,
+                    )
+                )
+
+    # Assignee Removal
+    if len(requested_data.get("assignees_list")) < len(
+        current_instance.get("assignees")
+    ):
+
+        for assignee in current_instance.get("assignees"):
+            if assignee not in requested_data.get("assignees_list"):
+                assignee = User.objects.get(pk=assignee)
+                issue_activities.append(
+                    IssueActivity(
+                        issue_id=issue_id,
+                        actor=actor,
+                        verb="updated",
+                        old_value=assignee.email,
+                        new_value="",
+                        field="assignee",
+                        project=project,
+                        workspace=project.workspace,
+                        comment=f"{actor.email} removed assignee {assignee.email}",
+                        old_identifier=actor.id,
+                    )
+                )
+
+
+# Track changes in blocking issues
+def track_blocks(
+    requested_data,
+    current_instance,
+    issue_id,
+    project,
+    actor,
+    issue_activities,
+):
+    if len(requested_data.get("blocks_list")) > len(
+        current_instance.get("blocked_issues")
+    ):
+
+        for block in requested_data.get("blocks_list"):
+            if (
+                len(
+                    [
+                        blocked
+                        for blocked in current_instance.get("blocked_issues")
+                        if blocked.get("block") == block
+                    ]
+                )
+                == 0
+            ):
+                issue = Issue.objects.get(pk=block)
+                issue_activities.append(
+                    IssueActivity(
+                        issue_id=issue_id,
+                        actor=actor,
+                        verb="updated",
+                        old_value="",
+                        new_value=f"{project.identifier}-{issue.sequence_id}",
+                        field="blocks",
+                        project=project,
+                        workspace=project.workspace,
+                        comment=f"{actor.email} added blocking issue {project.identifier}-{issue.sequence_id}",
+                        new_identifier=issue.id,
+                    )
+                )
+
+    # Blocked Issue Removal
+    if len(requested_data.get("blocks_list")) < len(
+        current_instance.get("blocked_issues")
+    ):
+
+        for blocked in current_instance.get("blocked_issues"):
+            if blocked.get("block") not in requested_data.get("blocks_list"):
+                issue = Issue.objects.get(pk=blocked.get("block"))
+                issue_activities.append(
+                    IssueActivity(
+                        issue_id=issue_id,
+                        actor=actor,
+                        verb="updated",
+                        old_value=f"{project.identifier}-{issue.sequence_id}",
+                        new_value="",
+                        field="blocks",
+                        project=project,
+                        workspace=project.workspace,
+                        comment=f"{actor.email} removed blocking issue {project.identifier}-{issue.sequence_id}",
+                        old_identifier=issue.id,
+                    )
+                )
+
+
+# Track changes in blocked_by issues
+def track_blockings(
+    requested_data,
+    current_instance,
+    issue_id,
+    project,
+    actor,
+    issue_activities,
+):
+    if len(requested_data.get("blockers_list")) > len(
+        current_instance.get("blocker_issues")
+    ):
+
+        for block in requested_data.get("blockers_list"):
+            if (
+                len(
+                    [
+                        blocked
+                        for blocked in current_instance.get("blocker_issues")
+                        if blocked.get("blocked_by") == block
+                    ]
+                )
+                == 0
+            ):
+                issue = Issue.objects.get(pk=block)
+                issue_activities.append(
+                    IssueActivity(
+                        issue_id=issue_id,
+                        actor=actor,
+                        verb="updated",
+                        old_value="",
+                        new_value=f"{project.identifier}-{issue.sequence_id}",
+                        field="blocking",
+                        project=project,
+                        workspace=project.workspace,
+                        comment=f"{actor.email} added blocked by issue {project.identifier}-{issue.sequence_id}",
+                        new_identifier=issue.id,
+                    )
+                )
+
+    # Blocked Issue Removal
+    if len(requested_data.get("blockers_list")) < len(
+        current_instance.get("blocker_issues")
+    ):
+
+        for blocked in current_instance.get("blocker_issues"):
+            if blocked.get("blocked_by") not in requested_data.get("blockers_list"):
+                issue = Issue.objects.get(pk=blocked.get("blocked_by"))
+                issue_activities.append(
+                    IssueActivity(
+                        issue_id=issue_id,
+                        actor=actor,
+                        verb="updated",
+                        old_value=f"{project.identifier}-{issue.sequence_id}",
+                        new_value="",
+                        field="blocking",
+                        project=project,
+                        workspace=project.workspace,
+                        comment=f"{actor.email} removed blocked by issue {project.identifier}-{issue.sequence_id}",
+                        old_identifier=issue.id,
+                    )
+                )
+
+
+# Receive message from room group
+@job("default")
+def issue_activity(event):
+    try:
+        issue_activities = []
+
+        requested_data = json.loads(event.get("requested_data"))
+        current_instance = json.loads(event.get("current_instance"))
+        issue_id = event.get("issue_id")
+        actor_id = event.get("actor_id")
+        project_id = event.get("project_id")
+
+        actor = User.objects.get(pk=actor_id)
+
+        project = Project.objects.get(pk=project_id)
+
+        ISSUE_ACTIVITY_MAPPER = {
+            "name": track_name,
+            "parent": track_parent,
+            "priority": track_priority,
+            "state": track_state,
+            "description": track_description,
+            "target_date": track_target_date,
+            "start_date": track_start_date,
+            "labels_list": track_labels,
+            "assignees_list": track_assignees,
+            "blocks_list": track_blocks,
+            "blockers_list": track_blockings,
+        }
+
+        for key in requested_data:
+            func = ISSUE_ACTIVITY_MAPPER.get(key, None)
+            if func is not None:
+                func(
+                    requested_data,
+                    current_instance,
+                    issue_id,
+                    project,
+                    actor,
+                    issue_activities,
+                )
+
+        # Save all the values to database
+        _ = IssueActivity.objects.bulk_create(issue_activities)
+
+        return
+    except Exception as e:
+        capture_exception(e)
+        return
diff --git a/apiserver/plane/db/apps.py b/apiserver/plane/db/apps.py
index c2741bba3..7d4919d08 100644
--- a/apiserver/plane/db/apps.py
+++ b/apiserver/plane/db/apps.py
@@ -1,52 +1,5 @@
 from django.apps import AppConfig
-from fieldsignals import post_save_changed
 
 
 class DbConfig(AppConfig):
     name = "plane.db"
-
-    # def ready(self):
-
-    #     post_save_changed.connect(
-    #         self.model_activity,
-    #         sender=self.get_model("Issue"),
-    #     )
-
-    # def model_activity(self, sender, instance, changed_fields, **kwargs):
-
-    #     verb = "created" if instance._state.adding else "changed"
-
-    #     import inspect
-
-    #     for frame_record in inspect.stack():
-    #         if frame_record[3] == "get_response":
-    #             request = frame_record[0].f_locals["request"]
-    #             REQUEST_METHOD = request.method
-
-    #     if REQUEST_METHOD == "POST":
-
-    #         self.get_model("IssueActivity").objects.create(
-    #             issue=instance, project=instance.project, actor=instance.created_by
-    #         )
-
-    #     elif REQUEST_METHOD == "PATCH":
-
-    #         try:
-    #             del changed_fields["updated_at"]
-    #             del changed_fields["updated_by"]
-    #         except KeyError as e:
-    #             pass
-
-    #         for field_name, (old, new) in changed_fields.items():
-    #             field = field_name
-    #             old_value = old
-    #             new_value = new
-    #             self.get_model("IssueActivity").objects.create(
-    #                 issue=instance,
-    #                 verb=verb,
-    #                 field=field,
-    #                 old_value=old_value,
-    #                 new_value=new_value,
-    #                 project=instance.project,
-    #                 actor=instance.updated_by,
-    #             )
diff --git a/apiserver/plane/db/models/issue.py b/apiserver/plane/db/models/issue.py
index f69f11574..c3984b3d2 100644
--- a/apiserver/plane/db/models/issue.py
+++ b/apiserver/plane/db/models/issue.py
@@ -145,12 +145,8 @@ class IssueActivity(ProjectBaseModel):
     field = models.CharField(
         max_length=255, verbose_name="Field Name", blank=True, null=True
     )
-    old_value = models.CharField(
-        max_length=255, verbose_name="Old Value", blank=True, null=True
-    )
-    new_value = models.CharField(
-        max_length=255, verbose_name="New Value", blank=True, null=True
-    )
+    old_value = models.TextField(verbose_name="Old Value", blank=True, null=True)
+    new_value = models.TextField(verbose_name="New Value", blank=True, null=True)
 
     comment = models.TextField(verbose_name="Comment", blank=True)
     attachments = ArrayField(models.URLField(), size=10, blank=True, default=list)
diff --git a/apiserver/plane/settings/common.py b/apiserver/plane/settings/common.py
index d86598a84..e14c250b4 100644
--- a/apiserver/plane/settings/common.py
+++ b/apiserver/plane/settings/common.py
@@ -34,9 +34,7 @@ INSTALLED_APPS = [
     "rest_framework_simplejwt.token_blacklist",
     "corsheaders",
     "taggit",
-    "fieldsignals",
     "django_rq",
-    "channels",
 ]
 
 MIDDLEWARE = [
diff --git a/apiserver/plane/settings/local.py b/apiserver/plane/settings/local.py
index 68f897997..4d4af9b77 100644
--- a/apiserver/plane/settings/local.py
+++ b/apiserver/plane/settings/local.py
@@ -66,11 +66,3 @@ RQ_QUEUES = {
 
 WEB_URL = "http://localhost:3000"
 
-CHANNEL_LAYERS = {
-    "default": {
-        "BACKEND": "channels_redis.core.RedisChannelLayer",
-        "CONFIG": {
-            "hosts": [(REDIS_HOST, REDIS_PORT)],
-        },
-    },
-}
diff --git a/apiserver/plane/settings/production.py b/apiserver/plane/settings/production.py
index a61d8a909..c83901484 100644
--- a/apiserver/plane/settings/production.py
+++ b/apiserver/plane/settings/production.py
@@ -1,11 +1,8 @@
 """Production settings and globals."""
-import ssl
-from typing import Optional
 from urllib.parse import urlparse
 
 import dj_database_url
 from urllib.parse import urlparse
-from redis.asyncio.connection import Connection, RedisSSLContext
 
 import sentry_sdk
 from sentry_sdk.integrations.django import DjangoIntegration
@@ -186,64 +183,10 @@ RQ_QUEUES = {
 }
 
 
-class CustomSSLConnection(Connection):
-    def __init__(
-        self,
-        ssl_context: Optional[str] = None,
-        **kwargs,
-    ):
-        super().__init__(**kwargs)
-        self.ssl_context = RedisSSLContext(ssl_context)
-
-
-class RedisSSLContext:
-    __slots__ = ("context",)
-
-    def __init__(
-        self,
-        ssl_context,
-    ):
-        self.context = ssl_context
-
-    def get(self):
-        return self.context
-
-
 url = urlparse(os.environ.get("REDIS_URL"))
 
-DOCKERIZED = os.environ.get("DOCKERIZED", False) # Set the variable true if running in docker-compose environment
-
-if not DOCKERIZED:
-
-    ssl_context = ssl.SSLContext()
-    ssl_context.check_hostname = False
-
-    CHANNEL_LAYERS = {
-        "default": {
-            "BACKEND": "channels_redis.core.RedisChannelLayer",
-            "CONFIG": {
-                "hosts": [
-                    {
-                        "host": url.hostname,
-                        "port": url.port,
-                        "username": url.username,
-                        "password": url.password,
-                        "connection_class": CustomSSLConnection,
-                        "ssl_context": ssl_context,
-                    }
-                ],
-            },
-        },
-    }
-else:
-    CHANNEL_LAYERS = {
-        "default": {
-            "BACKEND": "channels_redis.core.RedisChannelLayer",
-            "CONFIG": {
-                "hosts": [(os.environ.get("REDIS_URL"))],
-            },
-        },
-    }
-
+DOCKERIZED = os.environ.get(
+    "DOCKERIZED", False
+)  # Set the variable true if running in docker-compose environment
 
 WEB_URL = os.environ.get("WEB_URL")
diff --git a/apiserver/plane/settings/staging.py b/apiserver/plane/settings/staging.py
index 429530d94..725f2cd85 100644
--- a/apiserver/plane/settings/staging.py
+++ b/apiserver/plane/settings/staging.py
@@ -1,11 +1,8 @@
 """Production settings and globals."""
-import ssl
-from typing import Optional
 from urllib.parse import urlparse
 
 import dj_database_url
 from urllib.parse import urlparse
-from redis.asyncio.connection import Connection, RedisSSLContext
 
 import sentry_sdk
 from sentry_sdk.integrations.django import DjangoIntegration
@@ -186,52 +183,5 @@ RQ_QUEUES = {
     }
 }
 
-class CustomSSLConnection(Connection):
-    def __init__(
-        self,
-        ssl_context: Optional[str] = None,
-        **kwargs,
-    ):
-        super().__init__(**kwargs)
-        self.ssl_context = RedisSSLContext(ssl_context)
-
-class RedisSSLContext:
-    __slots__ = (
-        "context",
-    )
-
-    def __init__(
-        self,
-        ssl_context,
-    ):
-        self.context = ssl_context
-
-    def get(self):
-        return self.context
-
-
-url = urlparse(os.environ.get("REDIS_URL"))
-
-ssl_context = ssl.SSLContext()
-ssl_context.check_hostname = False
-
-CHANNEL_LAYERS = {
-    'default': {
-        'BACKEND': 'channels_redis.core.RedisChannelLayer',
-        'CONFIG': {
-            'hosts': [
-                    {
-                        'host': url.hostname,
-                        'port': url.port,
-                        'username': url.username,
-                        'password': url.password,
-                        'connection_class': CustomSSLConnection,
-                        'ssl_context': ssl_context,
-                    }
-                ],
-        }
-    },
-}
-
 
 WEB_URL = os.environ.get("WEB_URL")
diff --git a/apiserver/requirements/base.txt b/apiserver/requirements/base.txt
index 7dff0a765..578235003 100644
--- a/apiserver/requirements/base.txt
+++ b/apiserver/requirements/base.txt
@@ -20,12 +20,9 @@ sentry-sdk==1.13.0
 django-s3-storage==0.13.6
 django-crum==0.7.9
 django-guardian==2.4.0
-django-fieldsignals==0.7.0
 dj_rest_auth==2.2.5
 google-auth==2.9.1
 google-api-python-client==2.55.0
 django-rq==2.5.1
 django-redis==5.2.0
-channels==4.0.0
-channels-redis==4.0.0
 uvicorn==0.20.0
\ No newline at end of file
diff --git a/docker-compose.yml b/docker-compose.yml
index 058fa474c..04c792066 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -68,21 +68,6 @@ services:
     env_file:
       - ./apiserver/.env
 
-  plane-channel-worker:
-    image: plane-api
-    container_name: plane-channel-worker
-    restart: always
-    depends_on:
-      - redis
-      - db
-      - plane-api
-    command: ./bin/channel-worker
-    links:
-      - redis:redis
-      - db:db
-    env_file:
-      - ./apiserver/.env
-
 volumes:
   pgdata:
   redisdata:

From df96efca3e010741056484393cd93aef387d5f06 Mon Sep 17 00:00:00 2001
From: pablohashescobar <118773738+pablohashescobar@users.noreply.github.com>
Date: Tue, 31 Jan 2023 00:47:23 +0530
Subject: [PATCH 12/15] fix: typo while updating members in a module (#209)

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

diff --git a/apiserver/plane/api/serializers/module.py b/apiserver/plane/api/serializers/module.py
index 9f165dd28..2aa5ec208 100644
--- a/apiserver/plane/api/serializers/module.py
+++ b/apiserver/plane/api/serializers/module.py
@@ -93,7 +93,7 @@ class ModuleWriteSerializer(BaseSerializer):
         links = validated_data.pop("links_list", None)
 
         if members is not None:
-            ModuleIssue.objects.filter(module=instance).delete()
+            ModuleMember.objects.filter(module=instance).delete()
             ModuleMember.objects.bulk_create(
                 [
                     ModuleMember(

From 28d4f4c87643598df912fb806f53a909406795ce Mon Sep 17 00:00:00 2001
From: vamsi <vamsi.kurama@gmail.com>
Date: Tue, 31 Jan 2023 00:49:58 +0530
Subject: [PATCH 13/15] dev: altering new_value and old_value to TextField

---
 .../db/migrations/0019_auto_20230131_0049.py  | 23 +++++++++++++++++++
 1 file changed, 23 insertions(+)
 create mode 100644 apiserver/plane/db/migrations/0019_auto_20230131_0049.py

diff --git a/apiserver/plane/db/migrations/0019_auto_20230131_0049.py b/apiserver/plane/db/migrations/0019_auto_20230131_0049.py
new file mode 100644
index 000000000..38412aa9e
--- /dev/null
+++ b/apiserver/plane/db/migrations/0019_auto_20230131_0049.py
@@ -0,0 +1,23 @@
+# Generated by Django 3.2.16 on 2023-01-30 19:19
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('db', '0018_auto_20230130_0119'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='issueactivity',
+            name='new_value',
+            field=models.TextField(blank=True, null=True, verbose_name='New Value'),
+        ),
+        migrations.AlterField(
+            model_name='issueactivity',
+            name='old_value',
+            field=models.TextField(blank=True, null=True, verbose_name='Old Value'),
+        ),
+    ]

From 27e3364a1ff16b1e14c58395dac67967682db138 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Tue, 31 Jan 2023 18:09:11 +0530
Subject: [PATCH 14/15] fix: ui improvement  (#214)

* fix: help option ui fix

* feat: auth toast added

* fix: copy shortcut command fix

* feat: card title ellipsis added

---------

Co-authored-by: Anmol Singh Bhatia <anmolsinghbhatia1001@gmail.com>
---
 .../components/account/email-code-form.tsx    |  7 ++++
 .../account/email-password-form.tsx           |  7 ++++
 apps/app/components/command-palette/index.tsx | 35 ++++++++++---------
 apps/app/components/project/card.tsx          |  8 +++--
 .../project/cycles/stats-view/single-stat.tsx |  4 ++-
 .../project/modules/single-module-card.tsx    |  6 ++--
 .../app/components/workspace/help-section.tsx |  6 ++--
 apps/app/layouts/navbar/main-sidebar.tsx      |  6 ++--
 apps/app/pages/signin.tsx                     |  5 +++
 9 files changed, 56 insertions(+), 28 deletions(-)

diff --git a/apps/app/components/account/email-code-form.tsx b/apps/app/components/account/email-code-form.tsx
index ff5f8632d..03f9ea822 100644
--- a/apps/app/components/account/email-code-form.tsx
+++ b/apps/app/components/account/email-code-form.tsx
@@ -5,6 +5,7 @@ import { CheckCircleIcon } from "@heroicons/react/20/solid";
 import { Button, Input } from "components/ui";
 // services
 import authenticationService from "services/authentication.service";
+import useToast from "hooks/use-toast";
 // icons
 
 // types
@@ -16,6 +17,7 @@ type EmailCodeFormValues = {
 
 export const EmailCodeForm = ({ onSuccess }: any) => {
   const [codeSent, setCodeSent] = useState(false);
+  const { setToastAlert } = useToast();
   const {
     register,
     handleSubmit,
@@ -53,6 +55,11 @@ export const EmailCodeForm = ({ onSuccess }: any) => {
       })
       .catch((error) => {
         console.log(error);
+        setToastAlert({
+          title: "Oops!",
+          type: "error",
+          message: "Enter the correct code to sign in",
+        });
         setError("token" as keyof EmailCodeFormValues, {
           type: "manual",
           message: error.error,
diff --git a/apps/app/components/account/email-password-form.tsx b/apps/app/components/account/email-password-form.tsx
index 029485b8b..613077ac3 100644
--- a/apps/app/components/account/email-password-form.tsx
+++ b/apps/app/components/account/email-password-form.tsx
@@ -6,6 +6,7 @@ import { useForm } from "react-hook-form";
 // ui
 import { Button, Input } from "components/ui";
 import authenticationService from "services/authentication.service";
+import useToast from "hooks/use-toast";
 
 // types
 type EmailPasswordFormValues = {
@@ -15,6 +16,7 @@ type EmailPasswordFormValues = {
 };
 
 export const EmailPasswordForm = ({ onSuccess }: any) => {
+  const { setToastAlert } = useToast();
   const {
     register,
     handleSubmit,
@@ -38,6 +40,11 @@ export const EmailPasswordForm = ({ onSuccess }: any) => {
       })
       .catch((error) => {
         console.log(error);
+        setToastAlert({
+          title: "Oops!",
+          type: "error",
+          message: "Enter the correct email address and password to sign in",
+        });
         if (!error?.response?.data) return;
         Object.keys(error.response.data).forEach((key) => {
           const err = error.response.data[key];
diff --git a/apps/app/components/command-palette/index.tsx b/apps/app/components/command-palette/index.tsx
index 9e6dfc860..865bca82d 100644
--- a/apps/app/components/command-palette/index.tsx
+++ b/apps/app/components/command-palette/index.tsx
@@ -105,6 +105,8 @@ const CommandPalette: React.FC = () => {
         if ((e.ctrlKey || e.metaKey) && e.key === "k") {
           e.preventDefault();
           setIsPaletteOpen(true);
+        } else if (e.ctrlKey && e.key === "c") {
+          console.log("Text copied");
         } else if (e.key === "c") {
           e.preventDefault();
           setIsIssueModalOpen(true);
@@ -128,24 +130,23 @@ const CommandPalette: React.FC = () => {
           setIsBulkDeleteIssuesModalOpen(true);
         } else if ((e.ctrlKey || e.metaKey) && e.altKey && e.key === "c") {
           e.preventDefault();
+          if (!router.query.issueId) return;
+
+          const url = new URL(window.location.href);
+          copyTextToClipboard(url.href)
+            .then(() => {
+              setToastAlert({
+                type: "success",
+                title: "Copied to clipboard",
+              });
+            })
+            .catch(() => {
+              setToastAlert({
+                type: "error",
+                title: "Some error occurred",
+              });
+            });
         }
-
-        if (!router.query.issueId) return;
-
-        const url = new URL(window.location.href);
-        copyTextToClipboard(url.href)
-          .then(() => {
-            setToastAlert({
-              type: "success",
-              title: "Copied to clipboard",
-            });
-          })
-          .catch(() => {
-            setToastAlert({
-              type: "error",
-              title: "Some error occurred",
-            });
-          });
       }
     },
     [toggleCollapsed, setToastAlert, router]
diff --git a/apps/app/components/project/card.tsx b/apps/app/components/project/card.tsx
index 4ef975128..dd6d96e32 100644
--- a/apps/app/components/project/card.tsx
+++ b/apps/app/components/project/card.tsx
@@ -46,14 +46,16 @@ export const ProjectCard: React.FC<ProjectCardProps> = (props) => {
     <>
       <div className="flex h-full w-full flex-col rounded-md border bg-white px-4 py-3">
         <div className="flex items-center justify-between">
-          <div className="flex gap-2 text-lg font-medium">
+          <div className="flex gap-2  text-lg font-medium">
             <Link href={`/${workspaceSlug}/projects/${project.id}/issues`}>
               <a className="flex items-center gap-x-3">
                 {project.icon && (
                   <span className="text-base">{String.fromCodePoint(parseInt(project.icon))}</span>
                 )}
-                <span>{project.name}</span>
-                <span className="text-xs text-gray-500">{project.identifier}</span>
+                <span className="w-3/4 max-w-[225px] md:max-w-[140px] xl:max-w-[225px] text-ellipsis overflow-hidden">
+                  {project.name}
+                </span>
+                <span className="text-xs text-gray-500 ">{project.identifier}</span>
               </a>
             </Link>
           </div>
diff --git a/apps/app/components/project/cycles/stats-view/single-stat.tsx b/apps/app/components/project/cycles/stats-view/single-stat.tsx
index 8dae743cf..886735d85 100644
--- a/apps/app/components/project/cycles/stats-view/single-stat.tsx
+++ b/apps/app/components/project/cycles/stats-view/single-stat.tsx
@@ -71,7 +71,9 @@ const SingleStat: React.FC<TSingleStatProps> = (props) => {
             <div className="flex items-center justify-between gap-2">
               <Link href={`/${workspaceSlug}/projects/${projectId as string}/cycles/${cycle.id}`}>
                 <a>
-                  <h2 className="font-medium">{cycle.name}</h2>
+                  <h2 className="font-medium w-full max-w-[175px] lg:max-w-[225px] xl:max-w-[300px]  text-ellipsis overflow-hidden">
+                    {cycle.name}
+                  </h2>
                 </a>
               </Link>
               <CustomMenu width="auto" ellipsis>
diff --git a/apps/app/components/project/modules/single-module-card.tsx b/apps/app/components/project/modules/single-module-card.tsx
index 7af928b6a..acd6d4d98 100644
--- a/apps/app/components/project/modules/single-module-card.tsx
+++ b/apps/app/components/project/modules/single-module-card.tsx
@@ -30,7 +30,7 @@ const SingleModuleCard: React.FC<Props> = ({ module }) => {
   };
 
   return (
-    <div className="group/card relative select-none p-2">
+    <div className="group/card h-full w-full relative select-none p-2">
       <div className="absolute top-4 right-4 z-50 bg-red-200 opacity-0 group-hover/card:opacity-100">
         <button
           type="button"
@@ -50,8 +50,8 @@ const SingleModuleCard: React.FC<Props> = ({ module }) => {
         data={selectedModuleForDelete}
       />
       <Link href={`/${workspaceSlug}/projects/${module.project}/modules/${module.id}`}>
-        <a className="block cursor-pointer rounded-md border bg-white p-3">
-          {module.name}
+        <a className="flex flex-col cursor-pointer rounded-md border bg-white p-3 ">
+          <span className="w-3/4 text-ellipsis overflow-hidden">{module.name}</span>
           <div className="mt-4 grid grid-cols-2 gap-2 text-xs md:grid-cols-4">
             <div className="space-y-2">
               <h6 className="text-gray-500">LEAD</h6>
diff --git a/apps/app/components/workspace/help-section.tsx b/apps/app/components/workspace/help-section.tsx
index 2122b37e7..d46bcb276 100644
--- a/apps/app/components/workspace/help-section.tsx
+++ b/apps/app/components/workspace/help-section.tsx
@@ -53,6 +53,8 @@ export const WorkspaceHelpSection: FC<WorkspaceHelpSectionProps> = (props) => {
   // hooks
   useOutsideClickDetector(helpOptionsRef, () => setIsNeedHelpOpen(false));
 
+  const helpOptionMode = sidebarCollapse ? "left-full" : "left-[-75px]";
+
   return (
     <div
       className={`flex w-full items-center self-baseline bg-primary px-2 py-2 ${
@@ -107,14 +109,14 @@ export const WorkspaceHelpSection: FC<WorkspaceHelpSectionProps> = (props) => {
           leaveTo="transform opacity-0 scale-95"
         >
           <div
-            className="absolute bottom-0 left-full space-y-2 rounded-sm bg-white py-3 shadow-md"
+            className={`absolute bottom-2 ${helpOptionMode}  space-y-2 rounded-sm bg-white py-3 shadow-md`}
             ref={helpOptionsRef}
           >
             {helpOptions.map(({ name, Icon, href }) => (
               <Link href={href} key={name}>
                 <a
                   target="_blank"
-                  className="mx-3 flex items-center gap-x-2 rounded-md px-2 py-2 text-xs hover:bg-gray-100"
+                  className="mx-3 flex items-center gap-x-2 rounded-md whitespace-nowrap  px-2 py-2 text-xs hover:bg-gray-100"
                 >
                   <Icon className="h-5 w-5 text-gray-500" />
                   <span className="text-sm">{name}</span>
diff --git a/apps/app/layouts/navbar/main-sidebar.tsx b/apps/app/layouts/navbar/main-sidebar.tsx
index 4afddbe90..0f8d77557 100644
--- a/apps/app/layouts/navbar/main-sidebar.tsx
+++ b/apps/app/layouts/navbar/main-sidebar.tsx
@@ -84,6 +84,8 @@ const Sidebar: React.FC<Props> = ({ toggleSidebar, setToggleSidebar }) => {
 
   const [isNeedHelpOpen, setIsNeedHelpOpen] = useState(false);
 
+  const helpOptionMode = sidebarCollapse ? "left-full" : "left-[-75px]";
+
   return (
     <nav className="relative z-20 h-screen">
       <div
@@ -148,14 +150,14 @@ const Sidebar: React.FC<Props> = ({ toggleSidebar, setToggleSidebar }) => {
                   leaveTo="transform opacity-0 scale-95"
                 >
                   <div
-                    className="absolute bottom-0 left-full space-y-2 rounded-sm bg-white py-3 shadow-md"
+                    className={`absolute bottom-2 ${helpOptionMode}  space-y-2 rounded-sm bg-white py-3 shadow-md`}
                     ref={helpOptionsRef}
                   >
                     {helpOptions.map(({ name, Icon, href }) => (
                       <Link href={href} key={name}>
                         <a
                           target="_blank"
-                          className="mx-3 flex items-center gap-x-2 rounded-md px-2 py-2 text-xs hover:bg-gray-100"
+                          className="mx-3 flex items-center gap-x-2 rounded-md whitespace-nowrap px-2 py-2 text-xs hover:bg-gray-100"
                         >
                           <Icon className="h-5 w-5 text-gray-500" />
                           <span className="text-sm">{name}</span>
diff --git a/apps/app/pages/signin.tsx b/apps/app/pages/signin.tsx
index 4c81beaff..5ae6ebab6 100644
--- a/apps/app/pages/signin.tsx
+++ b/apps/app/pages/signin.tsx
@@ -75,6 +75,11 @@ const SignInPage: NextPage = () => {
       })
       .catch((err) => {
         console.log(err);
+        setToastAlert({
+          title: "Error signing in!",
+          type: "error",
+          message: "Something went wrong. Please try again later or contact the support team.",
+        });
         setLoading(false);
       });
   };

From 60a35e6af1788b9ca18d408f2ad4ad6e6a0094e8 Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com>
Date: Tue, 31 Jan 2023 18:10:50 +0530
Subject: [PATCH 15/15] fix: form validations (#213)

---
 .../components/issues/description-form.tsx    | 35 ++++++++++++++++---
 apps/app/components/issues/form.tsx           |  2 +-
 .../project/create-project-modal.tsx          |  7 ++--
 .../cycles/create-update-cycle-modal.tsx      |  4 +++
 .../state/create-update-state-inline.tsx      | 35 ++++++++++++-------
 .../create-update-module-modal/index.tsx      |  4 +++
 apps/app/components/ui/datepicker.tsx         |  2 +-
 7 files changed, 68 insertions(+), 21 deletions(-)

diff --git a/apps/app/components/issues/description-form.tsx b/apps/app/components/issues/description-form.tsx
index d3f5433cc..9882eee36 100644
--- a/apps/app/components/issues/description-form.tsx
+++ b/apps/app/components/issues/description-form.tsx
@@ -18,6 +18,7 @@ const RemirrorRichTextEditor = dynamic(() => import("components/rich-text-editor
 });
 // types
 import { IIssue } from "types";
+import useToast from "hooks/use-toast";
 
 export interface IssueDescriptionFormValues {
   name: string;
@@ -31,7 +32,16 @@ export interface IssueDetailsProps {
 }
 
 export const IssueDescriptionForm: FC<IssueDetailsProps> = ({ issue, handleFormSubmit }) => {
-  const { handleSubmit, watch, setValue, reset } = useForm<IIssue>({
+  const { setToastAlert } = useToast();
+
+  const {
+    handleSubmit,
+    watch,
+    setValue,
+    reset,
+    formState: { errors },
+    setError,
+  } = useForm<IIssue>({
     defaultValues: {
       name: "",
       description: "",
@@ -41,13 +51,31 @@ export const IssueDescriptionForm: FC<IssueDetailsProps> = ({ issue, handleFormS
 
   const handleDescriptionFormSubmit = useCallback(
     (formData: Partial<IIssue>) => {
+      if (!formData.name || formData.name === "") {
+        setToastAlert({
+          type: "error",
+          title: "Error in saving!",
+          message: "Title is required.",
+        });
+        return;
+      }
+
+      if (formData.name.length > 255) {
+        setToastAlert({
+          type: "error",
+          title: "Error in saving!",
+          message: "Title cannot have more than 255 characters.",
+        });
+        return;
+      }
+
       handleFormSubmit({
         name: formData.name ?? "",
         description: formData.description,
         description_html: formData.description_html,
       });
     },
-    [handleFormSubmit]
+    [handleFormSubmit, setToastAlert]
   );
 
   const debounceHandler = useMemo(
@@ -83,9 +111,8 @@ export const IssueDescriptionForm: FC<IssueDetailsProps> = ({ issue, handleFormS
         }}
         mode="transparent"
         className="text-xl font-medium"
-        required={true}
       />
-
+      <span>{errors.name ? errors.name.message : null}</span>
       <RemirrorRichTextEditor
         value={watch("description")}
         placeholder="Describe the issue..."
diff --git a/apps/app/components/issues/form.tsx b/apps/app/components/issues/form.tsx
index c61a62e03..ae454afb3 100644
--- a/apps/app/components/issues/form.tsx
+++ b/apps/app/components/issues/form.tsx
@@ -197,7 +197,7 @@ export const IssueForm: FC<IssueFormProps> = ({
                     required: "Title is required",
                     maxLength: {
                       value: 255,
-                      message: "Name should be less than 255 characters",
+                      message: "Title should be less than 255 characters",
                     },
                   }}
                 />
diff --git a/apps/app/components/project/create-project-modal.tsx b/apps/app/components/project/create-project-modal.tsx
index 37905ea50..db91e43ef 100644
--- a/apps/app/components/project/create-project-modal.tsx
+++ b/apps/app/components/project/create-project-modal.tsx
@@ -93,9 +93,8 @@ export const CreateProjectModal: React.FC<Props> = (props) => {
   const projectIdentifier = watch("identifier") ?? "";
 
   useEffect(() => {
-    if (projectName && isChangeIdentifierRequired) {
+    if (projectName && isChangeIdentifierRequired)
       setValue("identifier", projectName.replace(/ /g, "").toUpperCase().substring(0, 3));
-    }
   }, [projectName, projectIdentifier, setValue, isChangeIdentifierRequired]);
 
   useEffect(() => () => setIsChangeIdentifierRequired(true), [isOpen]);
@@ -215,6 +214,10 @@ export const CreateProjectModal: React.FC<Props> = (props) => {
                             register={register}
                             validations={{
                               required: "Name is required",
+                              maxLength: {
+                                value: 255,
+                                message: "Name should be less than 255 characters",
+                              },
                             }}
                           />
                         </div>
diff --git a/apps/app/components/project/cycles/create-update-cycle-modal.tsx b/apps/app/components/project/cycles/create-update-cycle-modal.tsx
index dc336f6c9..ef0a75cf5 100644
--- a/apps/app/components/project/cycles/create-update-cycle-modal.tsx
+++ b/apps/app/components/project/cycles/create-update-cycle-modal.tsx
@@ -162,6 +162,10 @@ const CreateUpdateCycleModal: React.FC<Props> = ({ isOpen, setIsOpen, data, proj
                           register={register}
                           validations={{
                             required: "Name is required",
+                            maxLength: {
+                              value: 255,
+                              message: "Name should be less than 255 characters",
+                            },
                           }}
                         />
                       </div>
diff --git a/apps/app/components/project/issues/BoardView/state/create-update-state-inline.tsx b/apps/app/components/project/issues/BoardView/state/create-update-state-inline.tsx
index 87ba04d8c..dcc5a2fcf 100644
--- a/apps/app/components/project/issues/BoardView/state/create-update-state-inline.tsx
+++ b/apps/app/components/project/issues/BoardView/state/create-update-state-inline.tsx
@@ -13,7 +13,7 @@ import stateService from "services/state.service";
 // hooks
 import useToast from "hooks/use-toast";
 // ui
-import { Button, Input, Select } from "components/ui";
+import { Button, CustomSelect, Input, Select } from "components/ui";
 // types
 import type { IState } from "types";
 // fetch-keys
@@ -183,18 +183,27 @@ export const CreateUpdateStateInline: React.FC<Props> = ({
         autoComplete="off"
       />
       {data && (
-        <Select
-          id="group"
+        <Controller
           name="group"
-          error={errors.group}
-          register={register}
-          validations={{
-            required: true,
-          }}
-          options={Object.keys(GROUP_CHOICES).map((key) => ({
-            value: key,
-            label: GROUP_CHOICES[key as keyof typeof GROUP_CHOICES],
-          }))}
+          control={control}
+          render={({ field: { value, onChange } }) => (
+            <CustomSelect
+              value={value}
+              onChange={onChange}
+              label={
+                Object.keys(GROUP_CHOICES).find((k) => k === value.toString())
+                  ? GROUP_CHOICES[value.toString() as keyof typeof GROUP_CHOICES]
+                  : "Select group"
+              }
+              input
+            >
+              {Object.keys(GROUP_CHOICES).map((key) => (
+                <CustomSelect.Option key={key} value={key}>
+                  {GROUP_CHOICES[key as keyof typeof GROUP_CHOICES]}
+                </CustomSelect.Option>
+              ))}
+            </CustomSelect>
+          )}
         />
       )}
       <Input
@@ -209,7 +218,7 @@ export const CreateUpdateStateInline: React.FC<Props> = ({
         Cancel
       </Button>
       <Button theme="primary" disabled={isSubmitting} type="submit">
-        {isSubmitting ? "Loading..." : data ? "Update" : "Create"}
+        {isSubmitting ? (data ? "Updating..." : "Creating...") : data ? "Update" : "Create"}
       </Button>
     </form>
   );
diff --git a/apps/app/components/project/modules/create-update-module-modal/index.tsx b/apps/app/components/project/modules/create-update-module-modal/index.tsx
index 1ec1147e5..b0ed3d561 100644
--- a/apps/app/components/project/modules/create-update-module-modal/index.tsx
+++ b/apps/app/components/project/modules/create-update-module-modal/index.tsx
@@ -178,6 +178,10 @@ const CreateUpdateModuleModal: React.FC<Props> = ({ isOpen, setIsOpen, data, pro
                           register={register}
                           validations={{
                             required: "Name is required",
+                            maxLength: {
+                              value: 255,
+                              message: "Name should be less than 255 characters",
+                            },
                           }}
                         />
                       </div>
diff --git a/apps/app/components/ui/datepicker.tsx b/apps/app/components/ui/datepicker.tsx
index 028f9ddbc..03a10b023 100644
--- a/apps/app/components/ui/datepicker.tsx
+++ b/apps/app/components/ui/datepicker.tsx
@@ -32,7 +32,7 @@ export const CustomDatePicker: React.FC<Props> = ({
       renderAs === "input"
         ? "block bg-transparent text-sm focus:outline-none rounded-md border border-gray-300 px-3 py-2 w-full cursor-pointer"
         : renderAs === "button"
-        ? "w-full cursor-pointer rounded-md 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"
+        ? "w-full rounded-md border px-2 py-1 text-xs shadow-sm hover:bg-gray-100 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 duration-300 cursor-pointer"
         : ""
     } ${error ? "border-red-500 bg-red-200" : ""} bg-transparent caret-transparent`}
     isClearable={isClearable}