Merge branch 'develop' of github.com:makeplane/plane into feat/multiple_sub_issues

apiserver/templates/admin/base_site.html

@@ -17,7 +17,7 @@
     color: #FFFFFF;
 }
 </style>
-<h1 id="site-name">{% trans 'plane Admin'  %} </h1>
+<h1 id="site-name">{% trans 'Plane Django Admin'  %} </h1>
 
 
 {% endblock %}{% block nav-global %}{% endblock %}

apps/app/components/account/email-code-form.tsx

@@ -114,15 +114,15 @@ export const EmailCodeForm = ({ onSuccess }: any) => {
               error={errors.token}
               placeholder="Enter code"
             />
-            {/* <span
+            {/* <button
-              className="text-xs outline-none hover:text-theme"
+              type="button"
+              className="text-xs outline-none hover:text-theme cursor-pointer"
               onClick={() => {
-                console.log("Triggered");
                 handleSubmit(onSubmit);
               }}
             >
               Resend code
-            </span> */}
+            </button> */}
           </div>
         )}
         <div>

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

@@ -105,7 +105,7 @@ export const CommandPalette: React.FC = () => {
         if ((e.ctrlKey || e.metaKey) && (e.key === "k" || e.key === "K")) {
           e.preventDefault();
           setIsPaletteOpen(true);
-        } else if (e.ctrlKey && (e.key === "c" || e.key === "C")) {
+        } else if ((e.ctrlKey || e.metaKey) && (e.key === "c" || e.key === "C")) {
           if (e.altKey) {
             e.preventDefault();
             if (!router.query.issueId) return;

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

@@ -11,9 +11,11 @@ type Props = {
   states: IState[] | undefined;
   members: IProjectMember[] | undefined;
   addIssueToState: (groupTitle: string, stateId: string | null) => void;
+  handleEditIssue: (issue: IIssue) => void;
   openIssuesListModal?: (() => void) | null;
   handleDeleteIssue: (issue: IIssue) => void;
   handleTrashBox: (isDragging: boolean) => void;
+  removeIssue: ((bridgeId: string) => void) | null;
   userAuth: UserAuth;
 };
 
@@ -23,9 +25,11 @@ export const AllBoards: React.FC<Props> = ({
   states,
   members,
   addIssueToState,
+  handleEditIssue,
   openIssuesListModal,
   handleDeleteIssue,
   handleTrashBox,
+  removeIssue,
   userAuth,
 }) => {
   const { groupedByIssues, groupByProperty: selectedGroup, orderBy } = useIssueView(issues);
@@ -57,11 +61,13 @@ export const AllBoards: React.FC<Props> = ({
                       groupedByIssues={groupedByIssues}
                       selectedGroup={selectedGroup}
                       members={members}
+                      handleEditIssue={handleEditIssue}
                       addIssueToState={() => addIssueToState(singleGroup, stateId)}
                       handleDeleteIssue={handleDeleteIssue}
                       openIssuesListModal={openIssuesListModal ?? null}
                       orderBy={orderBy}
                       handleTrashBox={handleTrashBox}
+                      removeIssue={removeIssue}
                       userAuth={userAuth}
                     />
                   );

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

@@ -12,80 +12,97 @@ import {
 // helpers
 import { addSpaceIfCamelCase } from "helpers/string.helper";
 // types
-import { IIssue } from "types";
+import { IIssue, IProjectMember, NestedKeyOf } from "types";
 type Props = {
-  isCollapsed: boolean;
-  setIsCollapsed: React.Dispatch<React.SetStateAction<boolean>>;
   groupedByIssues: {
     [key: string]: IIssue[];
   };
+  selectedGroup: NestedKeyOf<IIssue> | null;
   groupTitle: string;
-  createdBy: string | null;
   bgColor?: string;
   addIssueToState: () => void;
+  members: IProjectMember[] | undefined;
+  isCollapsed: boolean;
+  setIsCollapsed: React.Dispatch<React.SetStateAction<boolean>>;
 };
 
 export const BoardHeader: React.FC<Props> = ({
-  isCollapsed,
-  setIsCollapsed,
   groupedByIssues,
+  selectedGroup,
   groupTitle,
-  createdBy,
   bgColor,
   addIssueToState,
-}) => (
+  isCollapsed,
-  <div
+  setIsCollapsed,
-    className={`flex justify-between p-3 pb-0 ${
+  members,
-      !isCollapsed ? "flex-col rounded-md border bg-gray-50" : ""
+}) => {
-    }`}
+  const createdBy =
-  >
+    selectedGroup === "created_by"
-    <div className={`flex items-center ${!isCollapsed ? "flex-col gap-2" : "gap-1"}`}>
+      ? members?.find((m) => m.member.id === groupTitle)?.member.first_name ?? "loading..."
-      <div
+      : null;
-        className={`flex cursor-pointer items-center gap-x-1 rounded-md bg-slate-900 px-2 ${
+
-          !isCollapsed ? "mb-2 flex-col gap-y-2 py-2" : ""
+  let assignees: any;
-        }`}
+  if (selectedGroup === "assignees") {
-        style={{
+    assignees = groupTitle.split(",");
-          border: `2px solid ${bgColor}`,
+    assignees = assignees
-          backgroundColor: `${bgColor}20`,
+      .map((a: string) => members?.find((m) => m.member.id === a)?.member.first_name)
-        }}
+      .join(", ");
-      >
+  }
-        <h2
+
-          className={`text-[0.9rem] font-medium capitalize`}
+  return (
+    <div
+      className={`flex justify-between p-3 pb-0 ${
+        !isCollapsed ? "flex-col rounded-md border bg-gray-50" : ""
+      }`}
+    >
+      <div className={`flex items-center ${!isCollapsed ? "flex-col gap-2" : "gap-1"}`}>
+        <div
+          className={`flex cursor-pointer items-center gap-x-1 rounded-md bg-slate-900 px-2 ${
+            !isCollapsed ? "mb-2 flex-col gap-y-2 py-2" : ""
+          }`}
           style={{
-            writingMode: !isCollapsed ? "vertical-rl" : "horizontal-tb",
+            border: `2px solid ${bgColor}`,
+            backgroundColor: `${bgColor}20`,
           }}
         >
-          {groupTitle === null || groupTitle === "null"
+          <h2
-            ? "None"
+            className={`text-[0.9rem] font-medium capitalize`}
-            : createdBy
+            style={{
-            ? createdBy
+              writingMode: !isCollapsed ? "vertical-rl" : "horizontal-tb",
-            : addSpaceIfCamelCase(groupTitle)}
+            }}
-        </h2>
+          >
-        <span className="ml-0.5 text-sm text-gray-500">{groupedByIssues[groupTitle].length}</span>
+            {selectedGroup === "created_by"
+              ? createdBy
+              : selectedGroup === "assignees"
+              ? assignees
+              : addSpaceIfCamelCase(groupTitle)}
+          </h2>
+          <span className="ml-0.5 text-sm text-gray-500">{groupedByIssues[groupTitle].length}</span>
+        </div>
+      </div>
+
+      <div className={`flex items-center ${!isCollapsed ? "flex-col pb-2" : ""}`}>
+        <button
+          type="button"
+          className="grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-gray-200"
+          onClick={() => {
+            setIsCollapsed((prevData) => !prevData);
+          }}
+        >
+          {isCollapsed ? (
+            <ArrowsPointingInIcon className="h-4 w-4" />
+          ) : (
+            <ArrowsPointingOutIcon className="h-4 w-4" />
+          )}
+        </button>
+        <button
+          type="button"
+          className="grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-gray-200"
+          onClick={addIssueToState}
+        >
+          <PlusIcon className="h-4 w-4" />
+        </button>
       </div>
     </div>
-
+  );
-    <div className={`flex items-center ${!isCollapsed ? "flex-col pb-2" : ""}`}>
+};
-      <button
-        type="button"
-        className="grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-gray-200"
-        onClick={() => {
-          setIsCollapsed((prevData) => !prevData);
-        }}
-      >
-        {isCollapsed ? (
-          <ArrowsPointingInIcon className="h-4 w-4" />
-        ) : (
-          <ArrowsPointingOutIcon className="h-4 w-4" />
-        )}
-      </button>
-      <button
-        type="button"
-        className="grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-gray-200"
-        onClick={addIssueToState}
-      >
-        <PlusIcon className="h-4 w-4" />
-      </button>
-    </div>
-  </div>
-);

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

@@ -25,11 +25,13 @@ type Props = {
   };
   selectedGroup: NestedKeyOf<IIssue> | null;
   members: IProjectMember[] | undefined;
+  handleEditIssue: (issue: IIssue) => void;
   addIssueToState: () => void;
   handleDeleteIssue: (issue: IIssue) => void;
   openIssuesListModal?: (() => void) | null;
   orderBy: NestedKeyOf<IIssue> | "manual" | null;
   handleTrashBox: (isDragging: boolean) => void;
+  removeIssue: ((bridgeId: string) => void) | null;
   userAuth: UserAuth;
 };
 
@@ -40,11 +42,13 @@ export const SingleBoard: React.FC<Props> = ({
   groupedByIssues,
   selectedGroup,
   members,
+  handleEditIssue,
   addIssueToState,
   handleDeleteIssue,
   openIssuesListModal,
   orderBy,
   handleTrashBox,
+  removeIssue,
   userAuth,
 }) => {
   // collapse/expand
@@ -55,11 +59,6 @@ export const SingleBoard: React.FC<Props> = ({
 
   const [properties] = useIssuesProperties(workspaceSlug as string, projectId as string);
 
-  const createdBy =
-    selectedGroup === "created_by"
-      ? members?.find((m) => m.member.id === groupTitle)?.member.first_name ?? "loading..."
-      : null;
-
   if (selectedGroup === "priority")
     groupTitle === "high"
       ? (bgColor = "#dc2626")
@@ -77,11 +76,12 @@ export const SingleBoard: React.FC<Props> = ({
         <BoardHeader
           addIssueToState={addIssueToState}
           bgColor={bgColor}
-          createdBy={createdBy}
+          selectedGroup={selectedGroup}
           groupTitle={groupTitle}
           groupedByIssues={groupedByIssues}
           isCollapsed={isCollapsed}
           setIsCollapsed={setIsCollapsed}
+          members={members}
         />
         <StrictModeDroppable key={groupTitle} droppableId={groupTitle}>
           {(provided, snapshot) => (
@@ -97,7 +97,9 @@ export const SingleBoard: React.FC<Props> = ({
                   key={issue.id}
                   draggableId={issue.id}
                   index={index}
-                  isDragDisabled={isNotAllowed || selectedGroup === "created_by"}
+                  isDragDisabled={
+                    isNotAllowed || selectedGroup === "created_by" || selectedGroup === "assignees"
+                  }
                 >
                   {(provided, snapshot) => (
                     <SingleBoardIssue
@@ -106,10 +108,15 @@ export const SingleBoard: React.FC<Props> = ({
                       snapshot={snapshot}
                       type={type}
                       issue={issue}
+                      selectedGroup={selectedGroup}
                       properties={properties}
+                      editIssue={() => handleEditIssue(issue)}
                       handleDeleteIssue={handleDeleteIssue}
                       orderBy={orderBy}
                       handleTrashBox={handleTrashBox}
+                      removeIssue={() => {
+                        removeIssue && removeIssue(issue.bridge);
+                      }}
                       userAuth={userAuth}
                     />
                   )}

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

@@ -23,6 +23,8 @@ import {
   ViewPrioritySelect,
   ViewStateSelect,
 } from "components/issues/view-select";
+// ui
+import { CustomMenu } from "components/ui";
 // types
 import {
   CycleIssueResponse,
@@ -41,7 +43,10 @@ type Props = {
   provided: DraggableProvided;
   snapshot: DraggableStateSnapshot;
   issue: IIssue;
+  selectedGroup: NestedKeyOf<IIssue> | null;
   properties: Properties;
+  editIssue: () => void;
+  removeIssue?: (() => void) | null;
   handleDeleteIssue: (issue: IIssue) => void;
   orderBy: NestedKeyOf<IIssue> | "manual" | null;
   handleTrashBox: (isDragging: boolean) => void;
@@ -53,7 +58,10 @@ export const SingleBoardIssue: React.FC<Props> = ({
   provided,
   snapshot,
   issue,
+  selectedGroup,
   properties,
+  editIssue,
+  removeIssue,
   handleDeleteIssue,
   orderBy,
   handleTrashBox,
@@ -170,13 +178,26 @@ export const SingleBoardIssue: React.FC<Props> = ({
       <div className="group/card relative select-none p-2">
         {!isNotAllowed && (
           <div className="absolute top-1.5 right-1.5 z-10 opacity-0 group-hover/card:opacity-100">
-            <button
+            {/* <button
               type="button"
               className="grid h-7 w-7 place-items-center rounded bg-white p-1 text-red-500 outline-none duration-300 hover:bg-red-50"
               onClick={() => handleDeleteIssue(issue)}
             >
               <TrashIcon className="h-4 w-4" />
-            </button>
+            </button> */}
+            {type && !isNotAllowed && (
+              <CustomMenu width="auto" ellipsis>
+                <CustomMenu.MenuItem onClick={editIssue}>Edit</CustomMenu.MenuItem>
+                {type !== "issue" && removeIssue && (
+                  <CustomMenu.MenuItem onClick={removeIssue}>
+                    <>Remove from {type}</>
+                  </CustomMenu.MenuItem>
+                )}
+                <CustomMenu.MenuItem onClick={() => handleDeleteIssue(issue)}>
+                  Delete permanently
+                </CustomMenu.MenuItem>
+              </CustomMenu>
+            )}
           </div>
         )}
         <Link href={`/${workspaceSlug}/projects/${issue.project}/issues/${issue.id}`}>
@@ -195,7 +216,7 @@ export const SingleBoardIssue: React.FC<Props> = ({
           </a>
         </Link>
         <div className="flex flex-wrap items-center gap-x-1 gap-y-2 text-xs">
-          {properties.priority && (
+          {properties.priority && selectedGroup !== "priority" && (
             <ViewPrioritySelect
               issue={issue}
               partialUpdateIssue={partialUpdateIssue}
@@ -203,7 +224,7 @@ export const SingleBoardIssue: React.FC<Props> = ({
               position="left"
             />
           )}
-          {properties.state && (
+          {properties.state && selectedGroup !== "state_detail.name" && (
             <ViewStateSelect
               issue={issue}
               partialUpdateIssue={partialUpdateIssue}

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

@@ -178,20 +178,29 @@ export const IssuesFilterView: React.FC<Props> = ({ issues }) => {
                       <div className="space-y-2 py-3">
                         <h4 className="text-sm text-gray-600">Display Properties</h4>
                         <div className="flex flex-wrap items-center gap-2">
-                          {Object.keys(properties).map((key) => (
+                          {Object.keys(properties).map((key) => {
-                            <button
+                            if (
-                              key={key}
+                              issueView === "kanban" &&
-                              type="button"
+                              ((groupByProperty === "state_detail.name" && key === "state") ||
-                              className={`rounded border px-2 py-1 text-xs capitalize ${
+                                (groupByProperty === "priority" && key === "priority"))
-                                properties[key as keyof Properties]
+                            )
-                                  ? "border-theme bg-theme text-white"
+                              return;
-                                  : "border-gray-300"
+
-                              }`}
+                            return (
-                              onClick={() => setProperties(key as keyof Properties)}
+                              <button
-                            >
+                                key={key}
-                              {replaceUnderscoreIfSnakeCase(key)}
+                                type="button"
-                            </button>
+                                className={`rounded border px-2 py-1 text-xs capitalize ${
-                          ))}
+                                  properties[key as keyof Properties]
+                                    ? "border-theme bg-theme text-white"
+                                    : "border-gray-300"
+                                }`}
+                                onClick={() => setProperties(key as keyof Properties)}
+                              >
+                                {replaceUnderscoreIfSnakeCase(key)}
+                              </button>
+                            );
+                          })}
                         </div>
                       </div>
                     </div>

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

@@ -452,9 +452,17 @@ export const IssuesView: React.FC<Props> = ({
               states={states}
               members={members}
               addIssueToState={addIssueToState}
+              handleEditIssue={handleEditIssue}
               openIssuesListModal={type !== "issue" ? openIssuesListModal : null}
               handleDeleteIssue={handleDeleteIssue}
               handleTrashBox={handleTrashBox}
+              removeIssue={
+                type === "cycle"
+                  ? removeIssueFromCycle
+                  : type === "module"
+                  ? removeIssueFromModule
+                  : null
+              }
               userAuth={userAuth}
             />
           )}

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

@@ -50,9 +50,17 @@ export const SingleList: React.FC<Props> = ({
 
   const createdBy =
     selectedGroup === "created_by"
-      ? members?.find((m) => m.member.id === groupTitle)?.member.first_name ?? "loading..."
+      ? members?.find((m) => m.member.id === groupTitle)?.member.first_name ?? "Loading..."
       : null;
 
+  let assignees: any;
+  if (selectedGroup === "assignees") {
+    assignees = groupTitle.split(",");
+    assignees = assignees
+      .map((a: string) => members?.find((m) => m.member.id === a)?.member.first_name)
+      .join(", ");
+  }
+
   return (
     <Disclosure key={groupTitle} as="div" defaultOpen>
       {({ open }) => (
@@ -67,10 +75,10 @@ export const SingleList: React.FC<Props> = ({
                 </span>
                 {selectedGroup !== null ? (
                   <h2 className="font-medium capitalize leading-5">
-                    {groupTitle === null || groupTitle === "null"
+                    {selectedGroup === "created_by"
-                      ? "None"
-                      : createdBy
                       ? createdBy
+                      : selectedGroup === "assignees"
+                      ? assignees
                       : addSpaceIfCamelCase(groupTitle)}
                   </h2>
                 ) : (

apps/app/components/core/sidebar/sidebar-progress-stats.tsx

@@ -10,6 +10,8 @@ import { Tab } from "@headlessui/react";
 // services
 import issuesServices from "services/issues.service";
 import projectService from "services/project.service";
+// hooks
+import useLocalStorage from "hooks/use-local-storage";
 // components
 import { SingleProgressStats } from "components/core";
 // ui
@@ -20,7 +22,6 @@ import User from "public/user.png";
 import { IIssue, IIssueLabels } from "types";
 // fetch-keys
 import { PROJECT_ISSUE_LABELS, PROJECT_MEMBERS } from "constants/fetch-keys";
-import useLocalStorage from "hooks/use-local-storage";
 // types
 type Props = {
   groupedIssues: any;
@@ -39,8 +40,10 @@ const stateGroupColours: {
 
 export const SidebarProgressStats: React.FC<Props> = ({ groupedIssues, issues }) => {
   const router = useRouter();
-  const [tab, setTab] = useLocalStorage("tab", "Assignees");
   const { workspaceSlug, projectId } = router.query;
+
+  const [tab, setTab] = useLocalStorage("tab", "Assignees");
+
   const { data: issueLabels } = useSWR<IIssueLabels[]>(
     workspaceSlug && projectId ? PROJECT_ISSUE_LABELS(projectId as string) : null,
     workspaceSlug && projectId

apps/app/components/issues/form.tsx

@@ -16,8 +16,9 @@ import {
   IssueStateSelect,
 } from "components/issues/select";
 import { CycleSelect as IssueCycleSelect } from "components/cycles/select";
-import { CreateUpdateStateModal } from "components/states";
+import { CreateStateModal } from "components/states";
 import CreateUpdateCycleModal from "components/project/cycles/create-update-cycle-modal";
+import { CreateLabelModal } from "components/labels";
 // ui
 import { Button, CustomDatePicker, CustomMenu, Input, Loader } from "components/ui";
 // icons
@@ -74,6 +75,7 @@ export const IssueForm: FC<IssueFormProps> = ({
   const [mostSimilarIssue, setMostSimilarIssue] = useState<IIssue | undefined>();
   const [cycleModal, setCycleModal] = useState(false);
   const [stateModal, setStateModal] = useState(false);
+  const [labelModal, setLabelModal] = useState(false);
   const [parentIssueListModalOpen, setParentIssueListModalOpen] = useState(false);
 
   const router = useRouter();
@@ -121,7 +123,7 @@ export const IssueForm: FC<IssueFormProps> = ({
     <>
       {projectId && (
         <>
-          <CreateUpdateStateModal
+          <CreateStateModal
             isOpen={stateModal}
             handleClose={() => setStateModal(false)}
             projectId={projectId}
@@ -131,6 +133,11 @@ export const IssueForm: FC<IssueFormProps> = ({
             setIsOpen={setCycleModal}
             projectId={projectId}
           />
+          <CreateLabelModal
+            isOpen={labelModal}
+            handleClose={() => setLabelModal(false)}
+            projectId={projectId}
+          />
         </>
       )}
       <form onSubmit={handleSubmit(handleCreateUpdateIssue)}>
@@ -281,7 +288,12 @@ export const IssueForm: FC<IssueFormProps> = ({
                   control={control}
                   name="labels_list"
                   render={({ field: { value, onChange } }) => (
-                    <IssueLabelSelect value={value} onChange={onChange} projectId={projectId} />
+                    <IssueLabelSelect
+                      setIsOpen={setLabelModal}
+                      value={value}
+                      onChange={onChange}
+                      projectId={projectId}
+                    />
                   )}
                 />
                 <div>

apps/app/components/issues/select/label.tsx

@@ -1,15 +1,13 @@
-import React, { useEffect, useState } from "react";
+import React, { useState } from "react";
 
 import { useRouter } from "next/router";
 
 import useSWR from "swr";
 
-// react-hook-form
-import { useForm } from "react-hook-form";
 // headless ui
 import { Combobox, Transition } from "@headlessui/react";
 // icons
-import { RectangleGroupIcon, TagIcon } from "@heroicons/react/24/outline";
+import { PlusIcon, RectangleGroupIcon, TagIcon } from "@heroicons/react/24/outline";
 // services
 import issuesServices from "services/issues.service";
 // types
@@ -18,55 +16,26 @@ import type { IIssueLabels } from "types";
 import { PROJECT_ISSUE_LABELS } from "constants/fetch-keys";
 
 type Props = {
+  setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
   value: string[];
   onChange: (value: string[]) => void;
   projectId: string;
 };
 
-const defaultValues: Partial<IIssueLabels> = {
+export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange, projectId }) => {
-  name: "",
-};
-
-export const IssueLabelSelect: React.FC<Props> = ({ value, onChange, projectId }) => {
   // states
   const [query, setQuery] = useState("");
 
   const router = useRouter();
   const { workspaceSlug } = router.query;
 
-  const [isOpen, setIsOpen] = useState(false);
+  const { data: issueLabels } = useSWR<IIssueLabels[]>(
-
-  const { data: issueLabels, mutate: issueLabelsMutate } = useSWR<IIssueLabels[]>(
     projectId ? PROJECT_ISSUE_LABELS(projectId) : null,
     workspaceSlug && projectId
       ? () => issuesServices.getIssueLabels(workspaceSlug as string, projectId)
       : null
   );
 
-  const onSubmit = async (data: IIssueLabels) => {
-    if (!projectId || !workspaceSlug || isSubmitting) return;
-    await issuesServices
-      .createIssueLabel(workspaceSlug as string, projectId as string, data)
-      .then((response) => {
-        issueLabelsMutate((prevData) => [...(prevData ?? []), response], false);
-        setIsOpen(false);
-        reset(defaultValues);
-      })
-      .catch((error) => {
-        console.log(error);
-      });
-  };
-
-  const {
-    formState: { isSubmitting },
-    setFocus,
-    reset,
-  } = useForm<IIssueLabels>({ defaultValues });
-
-  useEffect(() => {
-    isOpen && setFocus("name");
-  }, [isOpen, setFocus]);
-
   const filteredOptions =
     query === ""
       ? issueLabels
@@ -175,48 +144,14 @@ export const IssueLabelSelect: React.FC<Props> = ({ value, onChange, projectId }
                   ) : (
                     <p className="text-xs text-gray-500 px-2">Loading...</p>
                   )}
-                  {/* <div className="cursor-default select-none p-2 hover:bg-indigo-50 hover:text-gray-900">
+                  <button
-                    {isOpen ? (
+                    type="button"
-                      <div className="flex items-center gap-x-1">
+                    className="flex select-none w-full items-center gap-2 p-2 text-gray-400 outline-none hover:bg-indigo-50 hover:text-gray-900"
-                        <Input
+                    onClick={() => setIsOpen(true)}
-                          id="name"
+                  >
-                          name="name"
+                    <PlusIcon className="h-3 w-3 text-gray-400" aria-hidden="true" />
-                          type="text"
+                    <span className="text-xs whitespace-nowrap">Create label</span>
-                          placeholder="Title"
+                  </button>
-                          className="w-full"
-                          autoComplete="off"
-                          register={register}
-                          validations={{
-                            required: true,
-                          }}
-                        />
-                        <button
-                          type="button"
-                          className="grid place-items-center text-green-600"
-                          disabled={isSubmitting}
-                          onClick={handleSubmit(onSubmit)}
-                        >
-                          <PlusIcon className="h-4 w-4" />
-                        </button>
-                        <button
-                          type="button"
-                          className="grid place-items-center text-red-600"
-                          onClick={() => setIsOpen(false)}
-                        >
-                          <XMarkIcon className="h-4 w-4" aria-hidden="true" />
-                        </button>
-                      </div>
-                    ) : (
-                      <button
-                        type="button"
-                        className="flex items-center gap-2 w-full"
-                        onClick={() => setIsOpen(true)}
-                      >
-                        <PlusIcon className="h-4 w-4 text-gray-400" aria-hidden="true" />
-                        <span className="text-xs whitespace-nowrap">Create label</span>
-                      </button>
-                    )}
-                  </div> */}
                 </div>
               </Combobox.Options>
             </Transition>

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

@@ -82,14 +82,14 @@ export const SidebarCycleSelect: React.FC<Props> = ({
           {cycles ? (
             cycles.length > 0 ? (
               <>
-                <CustomSelect.Option value={null} className="capitalize">
-                  None
-                </CustomSelect.Option>
                 {cycles.map((option) => (
                   <CustomSelect.Option key={option.id} value={option.id}>
                     {option.name}
                   </CustomSelect.Option>
                 ))}
+                <CustomSelect.Option value={null} className="capitalize">
+                  None
+                </CustomSelect.Option>
               </>
             ) : (
               <div className="text-center">No cycles found</div>

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

@@ -81,14 +81,14 @@ export const SidebarModuleSelect: React.FC<Props> = ({
           {modules ? (
             modules.length > 0 ? (
               <>
-                <CustomSelect.Option value={null} className="capitalize">
-                  None
-                </CustomSelect.Option>
                 {modules.map((option) => (
                   <CustomSelect.Option key={option.id} value={option.id}>
                     {option.name}
                   </CustomSelect.Option>
                 ))}
+                <CustomSelect.Option value={null} className="capitalize">
+                  None
+                </CustomSelect.Option>
               </>
             ) : (
               <div className="text-center">No modules found</div>

apps/app/components/issues/sidebar.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from "react";
+import React, { useCallback, useEffect, useState } from "react";
 
 import { useRouter } from "next/router";
 
@@ -144,6 +144,12 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
     [workspaceSlug, projectId, issueId, issueDetail]
   );
 
+  useEffect(() => {
+    if (!createLabelForm) return;
+
+    reset();
+  }, [createLabelForm, reset]);
+
   const isNotAllowed = userAuth.isGuest || userAuth.isViewer;
 
   return (
@@ -431,24 +437,25 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
                     </Listbox>
                   )}
                 />
-                <button
+                {!isNotAllowed && (
-                  type="button"
+                  <button
-                  className={`flex ${
+                    type="button"
-                    isNotAllowed ? "cursor-not-allowed" : "cursor-pointer hover:bg-gray-100"
+                    className={`flex ${
-                  } items-center gap-1 rounded-2xl border px-2 py-0.5 text-xs`}
+                      isNotAllowed ? "cursor-not-allowed" : "cursor-pointer hover:bg-gray-100"
-                  onClick={() => setCreateLabelForm((prevData) => !prevData)}
+                    } items-center gap-1 rounded-2xl border px-2 py-0.5 text-xs`}
-                  disabled={isNotAllowed}
+                    onClick={() => setCreateLabelForm((prevData) => !prevData)}
-                >
+                  >
-                  {createLabelForm ? (
+                    {createLabelForm ? (
-                    <>
+                      <>
-                      <XMarkIcon className="h-3 w-3" /> Cancel
+                        <XMarkIcon className="h-3 w-3" /> Cancel
-                    </>
+                      </>
-                  ) : (
+                    ) : (
-                    <>
+                      <>
-                      <PlusIcon className="h-3 w-3" /> New
+                        <PlusIcon className="h-3 w-3" /> New
-                    </>
+                      </>
-                  )}
+                    )}
-                </button>
+                  </button>
+                )}
               </div>
             </div>
           </div>

apps/app/components/labels/create-label-modal.tsx

@@ -0,0 +1,189 @@
+import React, { useEffect } from "react";
+
+import { useRouter } from "next/router";
+
+import { mutate } from "swr";
+
+// react-hook-form
+import { Controller, useForm } from "react-hook-form";
+// react-color
+import { TwitterPicker } from "react-color";
+// headless ui
+import { Dialog, Popover, Transition } from "@headlessui/react";
+// services
+import issuesService from "services/issues.service";
+// ui
+import { Button, Input } from "components/ui";
+// icons
+import { ChevronDownIcon } from "@heroicons/react/24/outline";
+// types
+import type { IIssueLabels, IState } from "types";
+// constants
+import { PROJECT_ISSUE_LABELS } from "constants/fetch-keys";
+
+// types
+type Props = {
+  isOpen: boolean;
+  projectId: string;
+  handleClose: () => void;
+};
+
+const defaultValues: Partial<IState> = {
+  name: "",
+  color: "#000000",
+};
+
+export const CreateLabelModal: React.FC<Props> = ({ isOpen, projectId, handleClose }) => {
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  const {
+    register,
+    formState: { errors, isSubmitting },
+    handleSubmit,
+    watch,
+    control,
+    reset,
+    setError,
+  } = useForm<IIssueLabels>({
+    defaultValues,
+  });
+
+  const onClose = () => {
+    handleClose();
+    reset(defaultValues);
+  };
+
+  const onSubmit = async (formData: IIssueLabels) => {
+    if (!workspaceSlug) return;
+
+    await issuesService
+      .createIssueLabel(workspaceSlug as string, projectId as string, formData)
+      .then((res) => {
+        mutate<IIssueLabels[]>(
+          PROJECT_ISSUE_LABELS(projectId),
+          (prevData) => [res, ...(prevData ?? [])],
+          false
+        );
+        onClose();
+      })
+      .catch((error) => {
+        console.log(error);
+      });
+  };
+
+  return (
+    <Transition.Root show={isOpen} as={React.Fragment}>
+      <Dialog as="div" className="relative z-30" onClose={onClose}>
+        <Transition.Child
+          as={React.Fragment}
+          enter="ease-out duration-300"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          leave="ease-in duration-200"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <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="flex min-h-full items-center justify-center p-4 text-center sm:p-0">
+            <Transition.Child
+              as={React.Fragment}
+              enter="ease-out duration-300"
+              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+              enterTo="opacity-100 translate-y-0 sm:scale-100"
+              leave="ease-in duration-200"
+              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
+              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+            >
+              <Dialog.Panel className="relative transform rounded-lg bg-white px-4 pt-5 pb-4 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
+                <form onSubmit={handleSubmit(onSubmit)}>
+                  <div>
+                    <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-gray-900">
+                      Create Label
+                    </Dialog.Title>
+                    <div className="mt-8 flex items-center gap-2">
+                      <Popover className="relative">
+                        {({ open }) => (
+                          <>
+                            <Popover.Button
+                              className={`group inline-flex items-center rounded-sm bg-white text-base font-medium hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 ${
+                                open ? "text-gray-900" : "text-gray-500"
+                              }`}
+                            >
+                              <span>Color</span>
+                              {watch("color") && watch("color") !== "" && (
+                                <span
+                                  className="ml-2 h-4 w-4 rounded"
+                                  style={{
+                                    backgroundColor: watch("color") ?? "green",
+                                  }}
+                                />
+                              )}
+                              <ChevronDownIcon
+                                className={`ml-2 h-5 w-5 group-hover:text-gray-500 ${
+                                  open ? "text-gray-600" : "text-gray-400"
+                                }`}
+                                aria-hidden="true"
+                              />
+                            </Popover.Button>
+
+                            <Transition
+                              as={React.Fragment}
+                              enter="transition ease-out duration-200"
+                              enterFrom="opacity-0 translate-y-1"
+                              enterTo="opacity-100 translate-y-0"
+                              leave="transition ease-in duration-150"
+                              leaveFrom="opacity-100 translate-y-0"
+                              leaveTo="opacity-0 translate-y-1"
+                            >
+                              <Popover.Panel className="fixed left-5 z-50 mt-3 w-screen max-w-xs transform px-2 sm:px-0">
+                                <Controller
+                                  name="color"
+                                  control={control}
+                                  render={({ field: { value, onChange } }) => (
+                                    <TwitterPicker
+                                      color={value}
+                                      onChange={(value) => onChange(value.hex)}
+                                    />
+                                  )}
+                                />
+                              </Popover.Panel>
+                            </Transition>
+                          </>
+                        )}
+                      </Popover>
+                      <Input
+                        type="text"
+                        id="name"
+                        name="name"
+                        placeholder="Enter name"
+                        autoComplete="off"
+                        error={errors.name}
+                        register={register}
+                        width="full"
+                        validations={{
+                          required: "Name is required",
+                        }}
+                      />
+                    </div>
+                  </div>
+                  <div className="mt-5 flex justify-end gap-2">
+                    <Button theme="secondary" onClick={onClose}>
+                      Cancel
+                    </Button>
+                    <Button type="submit" disabled={isSubmitting}>
+                      {isSubmitting ? "Creating Label..." : "Create Label"}
+                    </Button>
+                  </div>
+                </form>
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
+};

apps/app/components/labels/index.ts

@@ -1,3 +1,4 @@
+export * from "./create-label-modal";
 export * from "./create-update-label-inline";
 export * from "./labels-list-modal";
 export * from "./single-label-group";

apps/app/components/modules/delete-module-modal.tsx

@@ -65,10 +65,6 @@ export const DeleteModuleModal: React.FC<Props> = ({ isOpen, setIsOpen, data })
       });
   };
 
-  useEffect(() => {
-    data && setIsOpen(true);
-  }, [data, setIsOpen]);
-
   return (
     <Transition.Root show={isOpen} as={React.Fragment}>
       <Dialog

apps/app/components/modules/sidebar.tsx

@@ -23,6 +23,7 @@ import modulesService from "services/modules.service";
 import useToast from "hooks/use-toast";
 // components
 import {
+  DeleteModuleModal,
   ModuleLinkModal,
   SidebarLeadSelect,
   SidebarMembersSelect,
@@ -57,16 +58,10 @@ type Props = {
   module?: IModule;
   isOpen: boolean;
   moduleIssues: ModuleIssueResponse[] | undefined;
-  handleDeleteModule: () => void;
 };
 
-export const ModuleDetailsSidebar: React.FC<Props> = ({
+export const ModuleDetailsSidebar: React.FC<Props> = ({ issues, module, isOpen, moduleIssues }) => {
-  issues,
+  const [moduleDeleteModal, setModuleDeleteModal] = useState(false);
-  module,
-  isOpen,
-  moduleIssues,
-  handleDeleteModule,
-}) => {
   const [moduleLinkModal, setModuleLinkModal] = useState(false);
 
   const router = useRouter();
@@ -127,6 +122,11 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({
         handleClose={() => setModuleLinkModal(false)}
         module={module}
       />
+      <DeleteModuleModal
+        isOpen={moduleDeleteModal}
+        setIsOpen={setModuleDeleteModal}
+        data={module}
+      />
       <div
         className={`fixed top-0 ${
           isOpen ? "right-0" : "-right-[24rem]"
@@ -163,7 +163,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({
                 <button
                   type="button"
                   className="rounded-md border border-red-500 p-2 text-red-500 shadow-sm duration-300 hover:bg-red-50 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500"
-                  onClick={() => handleDeleteModule()}
+                  onClick={() => setModuleDeleteModal(true)}
                 >
                   <TrashIcon className="h-3.5 w-3.5" />
                 </button>

apps/app/components/modules/single-module-card.tsx

@@ -1,18 +1,18 @@
 import React, { useState } from "react";
 
 import Link from "next/link";
-import Image from "next/image";
 import { useRouter } from "next/router";
 
 // components
 import { DeleteModuleModal } from "components/modules";
+// ui
+import { AssigneesList, Avatar } from "components/ui";
 // icons
 import { CalendarDaysIcon, TrashIcon } from "@heroicons/react/24/outline";
-import User from "public/user.png";
 // helpers
 import { renderShortNumericDateFormat } from "helpers/date-time.helper";
 // types
-import { IModule, SelectModuleType } from "types";
+import { IModule } from "types";
 // common
 import { MODULE_STATUS } from "constants/module";
 
@@ -21,132 +21,73 @@ type Props = {
 };
 
 export const SingleModuleCard: React.FC<Props> = ({ module }) => {
+  const [moduleDeleteModal, setModuleDeleteModal] = useState(false);
+
   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 (
-    <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"
-          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>
       <DeleteModuleModal
-        isOpen={
+        isOpen={moduleDeleteModal}
-          moduleDeleteModal &&
-          !!selectedModuleForDelete &&
-          selectedModuleForDelete.actionType === "delete"
-        }
         setIsOpen={setModuleDeleteModal}
-        data={selectedModuleForDelete}
+        data={module}
       />
-      <Link href={`/${workspaceSlug}/projects/${module.project}/modules/${module.id}`}>
+      <div className="group/card h-full w-full relative select-none p-2">
-        <a className="flex flex-col cursor-pointer rounded-md border bg-white p-3 ">
+        <div className="absolute top-4 right-4 z-10 bg-red-200 opacity-0 group-hover/card:opacity-100">
-          <span className="w-3/4 text-ellipsis overflow-hidden">{module.name}</span>
+          <button
-          <div className="mt-4 grid grid-cols-2 gap-2 text-xs md:grid-cols-4">
+            type="button"
-            <div className="space-y-2">
+            className="grid h-7 w-7 place-items-center  bg-white p-1 text-red-500 outline-none duration-300 hover:bg-red-50"
-              <h6 className="text-gray-500">LEAD</h6>
+            onClick={() => handleDeleteModule()}
-              <div>
+          >
-                {module.lead ? (
+            <TrashIcon className="h-4 w-4" />
-                  module.lead_detail?.avatar && module.lead_detail.avatar !== "" ? (
+          </button>
-                    <div className="h-5 w-5 rounded-full border-2 border-white">
+        </div>
-                      <Image
+        <Link href={`/${workspaceSlug}/projects/${module.project}/modules/${module.id}`}>
-                        src={module.lead_detail.avatar}
+          <a className="flex flex-col cursor-pointer rounded-md border bg-white p-3 ">
-                        height="100%"
+            <span className="w-3/4 text-ellipsis overflow-hidden">{module.name}</span>
-                        width="100%"
+            <div className="mt-4 grid grid-cols-2 gap-2 text-xs md:grid-cols-4">
-                        className="rounded-full"
+              <div className="space-y-2">
-                        alt={module.lead_detail.first_name}
+                <h6 className="text-gray-500">LEAD</h6>
-                      />
+                <div>
-                    </div>
+                  <Avatar user={module.lead_detail} />
-                  ) : (
+                </div>
-                    <div className="grid h-5 w-5 place-items-center rounded-full border-2 border-white bg-gray-700 capitalize text-white">
+              </div>
-                      {module.lead_detail?.first_name && module.lead_detail.first_name !== ""
+              <div className="space-y-2">
-                        ? module.lead_detail.first_name.charAt(0)
+                <h6 className="text-gray-500">MEMBERS</h6>
-                        : module.lead_detail?.email.charAt(0)}
+                <div className="flex items-center gap-1 text-xs">
-                    </div>
+                  <AssigneesList users={module.members_detail} />
-                  )
+                </div>
-                ) : (
+              </div>
-                  "N/A"
+              <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">
+          </a>
-              <h6 className="text-gray-500">MEMBERS</h6>
+        </Link>
-              <div className="flex items-center gap-1 text-xs">
+      </div>
-                {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>
-    </div>
   );
 };

apps/app/components/states/create-state-modal.tsx

@@ -0,0 +1,227 @@
+import React, { useEffect } from "react";
+
+import { useRouter } from "next/router";
+
+import { mutate } from "swr";
+
+// react-hook-form
+import { Controller, useForm } from "react-hook-form";
+// react-color
+import { TwitterPicker } from "react-color";
+// headless ui
+import { Dialog, Popover, Transition } from "@headlessui/react";
+// services
+import stateService from "services/state.service";
+// ui
+import { Button, Input, Select, TextArea } from "components/ui";
+// icons
+import { ChevronDownIcon } from "@heroicons/react/24/outline";
+// types
+import type { IState } from "types";
+// fetch keys
+import { STATE_LIST } from "constants/fetch-keys";
+// constants
+import { GROUP_CHOICES } from "constants/project";
+
+// types
+type Props = {
+  isOpen: boolean;
+  projectId: string;
+  handleClose: () => void;
+};
+
+const defaultValues: Partial<IState> = {
+  name: "",
+  description: "",
+  color: "#000000",
+  group: "backlog",
+};
+
+export const CreateStateModal: React.FC<Props> = ({ isOpen, projectId, handleClose }) => {
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  const {
+    register,
+    formState: { errors, isSubmitting },
+    handleSubmit,
+    watch,
+    control,
+    reset,
+    setError,
+  } = useForm<IState>({
+    defaultValues,
+  });
+
+  const onClose = () => {
+    handleClose();
+    reset(defaultValues);
+  };
+
+  const onSubmit = async (formData: IState) => {
+    if (!workspaceSlug) return;
+
+    const payload: IState = {
+      ...formData,
+    };
+
+    await stateService
+      .createState(workspaceSlug as string, projectId, payload)
+      .then((res) => {
+        mutate(STATE_LIST(projectId));
+        onClose();
+      })
+      .catch((err) => {
+        Object.keys(err).map((key) => {
+          setError(key as keyof IState, {
+            message: err[key].join(", "),
+          });
+        });
+      });
+  };
+
+  return (
+    <Transition.Root show={isOpen} as={React.Fragment}>
+      <Dialog as="div" className="relative z-30" onClose={onClose}>
+        <Transition.Child
+          as={React.Fragment}
+          enter="ease-out duration-300"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          leave="ease-in duration-200"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <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="flex min-h-full items-center justify-center p-4 text-center sm:p-0">
+            <Transition.Child
+              as={React.Fragment}
+              enter="ease-out duration-300"
+              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+              enterTo="opacity-100 translate-y-0 sm:scale-100"
+              leave="ease-in duration-200"
+              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
+              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+            >
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-white px-4 pt-5 pb-4 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
+                <form onSubmit={handleSubmit(onSubmit)}>
+                  <div>
+                    <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-gray-900">
+                      Create State
+                    </Dialog.Title>
+                    <div className="mt-2 space-y-3">
+                      <div>
+                        <Input
+                          id="name"
+                          label="Name"
+                          name="name"
+                          type="name"
+                          placeholder="Enter name"
+                          autoComplete="off"
+                          error={errors.name}
+                          register={register}
+                          validations={{
+                            required: "Name is required",
+                          }}
+                        />
+                      </div>
+                      <div>
+                        <Select
+                          id="group"
+                          label="Group"
+                          name="group"
+                          error={errors.group}
+                          register={register}
+                          validations={{
+                            required: "Group is required",
+                          }}
+                          options={Object.keys(GROUP_CHOICES).map((key) => ({
+                            value: key,
+                            label: GROUP_CHOICES[key as keyof typeof GROUP_CHOICES],
+                          }))}
+                        />
+                      </div>
+                      <div>
+                        <Popover className="relative">
+                          {({ open }) => (
+                            <>
+                              <Popover.Button
+                                className={`group inline-flex items-center rounded-md bg-white text-base font-medium hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 ${
+                                  open ? "text-gray-900" : "text-gray-500"
+                                }`}
+                              >
+                                <span>Color</span>
+                                {watch("color") && watch("color") !== "" && (
+                                  <span
+                                    className="ml-2 h-4 w-4 rounded"
+                                    style={{
+                                      backgroundColor: watch("color") ?? "green",
+                                    }}
+                                  />
+                                )}
+                                <ChevronDownIcon
+                                  className={`ml-2 h-5 w-5 group-hover:text-gray-500 ${
+                                    open ? "text-gray-600" : "text-gray-400"
+                                  }`}
+                                  aria-hidden="true"
+                                />
+                              </Popover.Button>
+
+                              <Transition
+                                as={React.Fragment}
+                                enter="transition ease-out duration-200"
+                                enterFrom="opacity-0 translate-y-1"
+                                enterTo="opacity-100 translate-y-0"
+                                leave="transition ease-in duration-150"
+                                leaveFrom="opacity-100 translate-y-0"
+                                leaveTo="opacity-0 translate-y-1"
+                              >
+                                <Popover.Panel className="fixed left-5 z-50 mt-3 w-screen max-w-xs transform px-2 sm:px-0">
+                                  <Controller
+                                    name="color"
+                                    control={control}
+                                    render={({ field: { value, onChange } }) => (
+                                      <TwitterPicker
+                                        color={value}
+                                        onChange={(value) => onChange(value.hex)}
+                                      />
+                                    )}
+                                  />
+                                </Popover.Panel>
+                              </Transition>
+                            </>
+                          )}
+                        </Popover>
+                      </div>
+                      <div>
+                        <TextArea
+                          id="description"
+                          name="description"
+                          label="Description"
+                          placeholder="Enter description"
+                          error={errors.description}
+                          register={register}
+                        />
+                      </div>
+                    </div>
+                  </div>
+                  <div className="mt-5 flex justify-end gap-2">
+                    <Button theme="secondary" onClick={onClose}>
+                      Cancel
+                    </Button>
+                    <Button type="submit" disabled={isSubmitting}>
+                      {isSubmitting ? "Creating State..." : "Create State"}
+                    </Button>
+                  </div>
+                </form>
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
+};

apps/app/components/states/create-update-state-modal.tsx

@@ -1,263 +0,0 @@
-import React, { useEffect } from "react";
-
-import { useRouter } from "next/router";
-
-import { mutate } from "swr";
-
-// react-hook-form
-import { Controller, useForm } from "react-hook-form";
-// react-color
-import { TwitterPicker } from "react-color";
-// headless ui
-import { Dialog, Popover, Transition } from "@headlessui/react";
-// services
-import stateService from "services/state.service";
-// ui
-import { Button, Input, Select, TextArea } from "components/ui";
-// icons
-import { ChevronDownIcon } from "@heroicons/react/24/outline";
-// types
-import type { IState } from "types";
-// fetch keys
-import { STATE_LIST } from "constants/fetch-keys";
-// constants
-import { GROUP_CHOICES } from "constants/project";
-
-// types
-type Props = {
-  isOpen: boolean;
-  projectId: string;
-  data?: IState;
-  handleClose: () => void;
-};
-
-const defaultValues: Partial<IState> = {
-  name: "",
-  description: "",
-  color: "#000000",
-  group: "backlog",
-};
-
-export const CreateUpdateStateModal: React.FC<Props> = ({
-  isOpen,
-  data,
-  projectId,
-  handleClose,
-}) => {
-  const router = useRouter();
-  const { workspaceSlug } = router.query;
-
-  const {
-    register,
-    formState: { errors, isSubmitting },
-    handleSubmit,
-    watch,
-    control,
-    reset,
-    setError,
-  } = useForm<IState>({
-    defaultValues,
-  });
-
-  useEffect(() => {
-    if (data) {
-      reset(data);
-    } else {
-      reset(defaultValues);
-    }
-  }, [data, reset]);
-
-  const onClose = () => {
-    handleClose();
-    reset(defaultValues);
-  };
-
-  const onSubmit = async (formData: IState) => {
-    if (!workspaceSlug) return;
-    const payload: IState = {
-      ...formData,
-    };
-    if (!data) {
-      await stateService
-        .createState(workspaceSlug as string, projectId, payload)
-        .then((res) => {
-          mutate(STATE_LIST(projectId));
-          onClose();
-        })
-        .catch((err) => {
-          Object.keys(err).map((key) => {
-            setError(key as keyof IState, {
-              message: err[key].join(", "),
-            });
-          });
-        });
-    } else {
-      await stateService
-        .updateState(workspaceSlug as string, projectId, data.id, payload)
-        .then((res) => {
-          mutate(STATE_LIST(projectId));
-          onClose();
-        })
-        .catch((err) => {
-          Object.keys(err).map((key) => {
-            setError(key as keyof IState, {
-              message: err[key].join(", "),
-            });
-          });
-        });
-    }
-  };
-
-  return (
-    <Transition.Root show={isOpen} as={React.Fragment}>
-      <Dialog as="div" className="relative z-30" onClose={onClose}>
-        <Transition.Child
-          as={React.Fragment}
-          enter="ease-out duration-300"
-          enterFrom="opacity-0"
-          enterTo="opacity-100"
-          leave="ease-in duration-200"
-          leaveFrom="opacity-100"
-          leaveTo="opacity-0"
-        >
-          <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="flex min-h-full items-center justify-center p-4 text-center sm:p-0">
-            <Transition.Child
-              as={React.Fragment}
-              enter="ease-out duration-300"
-              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-              enterTo="opacity-100 translate-y-0 sm:scale-100"
-              leave="ease-in duration-200"
-              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
-              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-            >
-              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-white px-4 pt-5 pb-4 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
-                <form onSubmit={handleSubmit(onSubmit)}>
-                  <div>
-                    <div className="mt-3 sm:mt-5">
-                      <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-gray-900">
-                        {data ? "Update" : "Create"} State
-                      </Dialog.Title>
-                      <div className="mt-2 space-y-3">
-                        <div>
-                          <Input
-                            id="name"
-                            label="Name"
-                            name="name"
-                            type="name"
-                            placeholder="Enter name"
-                            autoComplete="off"
-                            error={errors.name}
-                            register={register}
-                            validations={{
-                              required: "Name is required",
-                            }}
-                          />
-                        </div>
-                        <div>
-                          <Select
-                            id="group"
-                            label="Group"
-                            name="group"
-                            error={errors.group}
-                            register={register}
-                            validations={{
-                              required: "Group is required",
-                            }}
-                            options={Object.keys(GROUP_CHOICES).map((key) => ({
-                              value: key,
-                              label: GROUP_CHOICES[key as keyof typeof GROUP_CHOICES],
-                            }))}
-                          />
-                        </div>
-                        <div>
-                          <Popover className="relative">
-                            {({ open }) => (
-                              <>
-                                <Popover.Button
-                                  className={`group inline-flex items-center rounded-md bg-white text-base font-medium hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 ${
-                                    open ? "text-gray-900" : "text-gray-500"
-                                  }`}
-                                >
-                                  <span>Color</span>
-                                  {watch("color") && watch("color") !== "" && (
-                                    <span
-                                      className="ml-2 h-4 w-4 rounded"
-                                      style={{
-                                        backgroundColor: watch("color") ?? "green",
-                                      }}
-                                    />
-                                  )}
-                                  <ChevronDownIcon
-                                    className={`ml-2 h-5 w-5 group-hover:text-gray-500 ${
-                                      open ? "text-gray-600" : "text-gray-400"
-                                    }`}
-                                    aria-hidden="true"
-                                  />
-                                </Popover.Button>
-
-                                <Transition
-                                  as={React.Fragment}
-                                  enter="transition ease-out duration-200"
-                                  enterFrom="opacity-0 translate-y-1"
-                                  enterTo="opacity-100 translate-y-0"
-                                  leave="transition ease-in duration-150"
-                                  leaveFrom="opacity-100 translate-y-0"
-                                  leaveTo="opacity-0 translate-y-1"
-                                >
-                                  <Popover.Panel className="fixed left-5 z-50 mt-3 w-screen max-w-xs transform px-2 sm:px-0">
-                                    <Controller
-                                      name="color"
-                                      control={control}
-                                      render={({ field: { value, onChange } }) => (
-                                        <TwitterPicker
-                                          color={value}
-                                          onChange={(value) => onChange(value.hex)}
-                                        />
-                                      )}
-                                    />
-                                  </Popover.Panel>
-                                </Transition>
-                              </>
-                            )}
-                          </Popover>
-                        </div>
-                        <div>
-                          <TextArea
-                            id="description"
-                            name="description"
-                            label="Description"
-                            placeholder="Enter description"
-                            error={errors.description}
-                            register={register}
-                          />
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                  <div className="mt-5 sm:mt-6 sm:grid sm:grid-flow-row-dense sm:grid-cols-2 sm:gap-3">
-                    <Button theme="secondary" onClick={onClose}>
-                      Cancel
-                    </Button>
-                    <Button type="submit" disabled={isSubmitting}>
-                      {data
-                        ? isSubmitting
-                          ? "Updating State..."
-                          : "Update State"
-                        : isSubmitting
-                        ? "Creating State..."
-                        : "Create State"}
-                    </Button>
-                  </div>
-                </form>
-              </Dialog.Panel>
-            </Transition.Child>
-          </div>
-        </div>
-      </Dialog>
-    </Transition.Root>
-  );
-};

apps/app/components/states/index.ts

@@ -1,4 +1,4 @@
 export * from "./create-update-state-inline";
-export * from "./create-update-state-modal";
+export * from "./create-state-modal";
 export * from "./delete-state-modal";
 export * from "./single-state";

apps/app/components/states/single-state.tsx

@@ -142,13 +142,16 @@ export const SingleState: React.FC<Props> = ({
       }`}
     >
       <div className="flex items-center gap-2">
-        <div
+        <span
           className="h-3 w-3 flex-shrink-0 rounded-full"
           style={{
             backgroundColor: state.color,
           }}
         />
-        <h6 className="text-sm">{addSpaceIfCamelCase(state.name)}</h6>
+        <div>
+          <h6 className="text-sm">{addSpaceIfCamelCase(state.name)}</h6>
+          <p className="text-xs text-gray-400">{state.description}</p>
+        </div>
       </div>
       <div className="flex items-center gap-2">
         {index !== 0 && (

apps/app/components/ui/avatar.tsx

@@ -13,7 +13,7 @@ import { IUser, IUserLite } from "types";
 import { WORKSPACE_MEMBERS } from "constants/fetch-keys";
 
 type AvatarProps = {
-  user: Partial<IUser> | Partial<IUserLite> | undefined;
+  user?: Partial<IUser> | Partial<IUserLite> | IUser | IUserLite | undefined | null;
   index?: number;
 };
 

apps/app/components/ui/avatar/index.ts

@@ -1 +0,0 @@
-export * from "./avatar";

apps/app/components/ui/index.ts

@@ -1,4 +1,3 @@
-// components
 export * from "./button";
 export * from "./custom-listbox";
 export * from "./custom-menu";
@@ -11,6 +10,6 @@ export * from "./outline-button";
 export * from "./select";
 export * from "./spinner";
 export * from "./text-area";
-export * from "./tooltip";
 export * from "./avatar";
 export * from "./datepicker";
+export * from "./tooltip";

apps/app/constants/issue.ts

@@ -5,6 +5,7 @@ export const GROUP_BY_OPTIONS: Array<{ name: string; key: NestedKeyOf<IIssue> |
   { name: "State", key: "state_detail.name" },
   { name: "Priority", key: "priority" },
   { name: "Created By", key: "created_by" },
+  { name: "Assignee", key: "assignees" },
   { name: "None", key: null },
 ];
 

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

@@ -58,7 +58,7 @@ type ReducerFunctionType = (state: StateType, action: ReducerActionType) => Stat
 export const initialState: StateType = {
   issueView: "list",
   groupByProperty: null,
-  orderBy: null,
+  orderBy: "created_at",
   filterIssue: null,
 };
 
@@ -122,6 +122,7 @@ export const reducer: ReducerFunctionType = (state, action) => {
         ...payload,
       };
     }
+
     default: {
       return state;
     }

apps/app/pages/[workspaceSlug]/projects/[projectId]/modules/[moduleId].tsx

@@ -23,20 +23,12 @@ import AppLayout from "layouts/app-layout";
 import { IssueViewContextProvider } from "contexts/issue-view.context";
 // components
 import { ExistingIssuesListModal, IssuesFilterView, IssuesView } from "components/core";
-import { CreateUpdateIssueModal } from "components/issues";
+import { ModuleDetailsSidebar } from "components/modules";
-import { DeleteModuleModal, ModuleDetailsSidebar } from "components/modules";
 // ui
 import { CustomMenu, EmptySpace, EmptySpaceItem, Spinner } from "components/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 // types
-import {
+import { IModule, ModuleIssueResponse, UserAuth } from "types";
-  IIssue,
-  IModule,
-  ModuleIssueResponse,
-  SelectIssue,
-  SelectModuleType,
-  UserAuth,
-} from "types";
 
 // fetch-keys
 import {
@@ -47,15 +39,8 @@ import {
 } from "constants/fetch-keys";
 
 const SingleModule: React.FC<UserAuth> = (props) => {
-  const [moduleSidebar, setModuleSidebar] = useState(true);
-  const [moduleDeleteModal, setModuleDeleteModal] = useState(false);
-  const [selectedIssues, setSelectedIssues] = useState<SelectIssue>(null);
   const [moduleIssuesListModal, setModuleIssuesListModal] = useState(false);
-  const [createUpdateIssueModal, setCreateUpdateIssueModal] = useState(false);
+  const [moduleSidebar, setModuleSidebar] = useState(true);
-  const [selectedModuleForDelete, setSelectedModuleForDelete] = useState<SelectModuleType>();
-  const [preloadedData, setPreloadedData] = useState<
-    (Partial<IIssue> & { actionType: "createIssue" | "edit" | "delete" }) | null
-  >(null);
 
   const router = useRouter();
   const { workspaceSlug, projectId, moduleId } = router.query;
@@ -119,43 +104,12 @@ const SingleModule: React.FC<UserAuth> = (props) => {
       .catch((e) => console.log(e));
   };
 
-  const openCreateIssueModal = (
-    issue?: IIssue,
-    actionType: "create" | "edit" | "delete" = "create"
-  ) => {
-    if (issue) {
-      setPreloadedData(null);
-      setSelectedIssues({ ...issue, actionType });
-    } else setSelectedIssues(null);
-
-    setCreateUpdateIssueModal(true);
-  };
-
   const openIssuesListModal = () => {
     setModuleIssuesListModal(true);
   };
 
-  const handleDeleteModule = () => {
-    if (!moduleDetails) return;
-
-    setSelectedModuleForDelete({ ...moduleDetails, actionType: "delete" });
-    setModuleDeleteModal(true);
-  };
-
   return (
     <IssueViewContextProvider>
-      {moduleId && (
-        <CreateUpdateIssueModal
-          isOpen={createUpdateIssueModal && selectedIssues?.actionType !== "delete"}
-          data={selectedIssues}
-          prePopulateData={
-            preloadedData
-              ? { module: moduleId as string, ...preloadedData }
-              : { module: moduleId as string, ...selectedIssues }
-          }
-          handleClose={() => setCreateUpdateIssueModal(false)}
-        />
-      )}
       <ExistingIssuesListModal
         isOpen={moduleIssuesListModal}
         handleClose={() => setModuleIssuesListModal(false)}
@@ -163,15 +117,6 @@ const SingleModule: React.FC<UserAuth> = (props) => {
         issues={issues?.results.filter((i) => !i.issue_module) ?? []}
         handleOnSubmit={handleAddIssuesToModule}
       />
-      <DeleteModuleModal
-        isOpen={
-          moduleDeleteModal &&
-          !!selectedModuleForDelete &&
-          selectedModuleForDelete.actionType === "delete"
-        }
-        setIsOpen={setModuleDeleteModal}
-        data={selectedModuleForDelete}
-      />
       <AppLayout
         breadcrumbs={
           <Breadcrumbs>
@@ -271,7 +216,6 @@ const SingleModule: React.FC<UserAuth> = (props) => {
           module={moduleDetails}
           isOpen={moduleSidebar}
           moduleIssues={moduleIssues}
-          handleDeleteModule={handleDeleteModule}
         />
       </AppLayout>
     </IssueViewContextProvider>

apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/states.tsx

@@ -80,7 +80,7 @@ const StatesSettings: NextPage<UserAuth> = (props) => {
         <div className="space-y-8">
           <div>
             <h3 className="text-3xl font-bold leading-6 text-gray-900">States</h3>
-            <p className="mt-4 text-sm text-gray-500">Manage the state of this project.</p>
+            <p className="mt-4 text-sm text-gray-500">Manage the states of this project.</p>
           </div>
           <div className="flex flex-col justify-between gap-4">
             {states && projectDetails ? (

apps/app/pages/invitations.tsx

@@ -3,19 +3,21 @@ import Link from "next/link";
 import { useRouter } from "next/router";
 import useSWR from "swr";
 
-// icons
+// lib
-import { CubeIcon, PlusIcon } from "@heroicons/react/24/outline";
+import { requiredAuth } from "lib/auth";
 // services
 import workspaceService from "services/workspace.service";
 // hooks
 import useUser from "hooks/use-user";
-import { requiredAuth } from "lib/auth";
+import useToast from "hooks/use-toast";
 // layouts
 import DefaultLayout from "layouts/default-layout";
 // components
 import SingleInvitation from "components/workspace/single-invitation";
 // ui
 import { Button, Spinner, EmptySpace, EmptySpaceItem } from "components/ui";
+// icons
+import { CubeIcon, PlusIcon } from "@heroicons/react/24/outline";
 // types
 import type { NextPage, NextPageContext } from "next";
 import type { IWorkspaceMemberInvitation } from "types";
@@ -27,6 +29,8 @@ const OnBoard: NextPage = () => {
 
   const router = useRouter();
 
+  const { setToastAlert } = useToast();
+
   const { data: invitations, mutate: mutateInvitations } = useSWR(
     "USER_WORKSPACE_INVITATIONS",
     () => workspaceService.userWorkspaceInvitations()
@@ -52,6 +56,15 @@ const OnBoard: NextPage = () => {
   const submitInvitations = () => {
     // userService.updateUserOnBoard();
 
+    if (invitationsRespond.length === 0) {
+      setToastAlert({
+        type: "error",
+        title: "Error!",
+        message: "Please select atleast one invitation.",
+      });
+      return;
+    }
+
     workspaceService
       .joinWorkspaces({ invitations: invitationsRespond })
       .then(() => {
@@ -100,9 +113,13 @@ const OnBoard: NextPage = () => {
                   ))}
                 </ul>
                 <div className="mt-6 flex items-center gap-2">
-                  <Button className="w-full" theme="secondary" onClick={() => router.push("/")}>
+                  <Link href="/">
-                    Skip
+                    <a className="w-full">
-                  </Button>
+                      <Button className="w-full" theme="secondary">
+                        Go to Home
+                      </Button>
+                    </a>
+                  </Link>
                   <Button className="w-full" onClick={submitInvitations}>
                     Accept and Continue
                   </Button>
@@ -112,26 +129,20 @@ const OnBoard: NextPage = () => {
               <div className="mt-3 flex flex-col gap-y-3">
                 <h2 className="mb-4 text-2xl font-medium">Your workspaces</h2>
                 {workspaces.map((workspace) => (
-                  <div
+                  <Link key={workspace.id} href={workspace.slug}>
-                    className="mb-2 flex items-center justify-between rounded border px-4 py-2"
+                    <a>
-                    key={workspace.id}
+                      <div className="mb-2 flex items-center justify-between rounded border px-4 py-2">
-                  >
+                        <div className="flex items-center gap-x-2">
-                    <div className="flex items-center gap-x-2">
+                          <CubeIcon className="h-5 w-5 text-gray-400" />
-                      <CubeIcon className="h-5 w-5 text-gray-400" />
+                          {workspace.name}
-                      <Link href={workspace.slug}>
+                        </div>
-                        <a>{workspace.name}</a>
+                        <div className="flex items-center gap-x-2">
-                      </Link>
+                          <p className="text-sm">{workspace.owner.first_name}</p>
-                    </div>
+                        </div>
-                    <div className="flex items-center gap-x-2">
+                      </div>
-                      <p className="text-sm">{workspace.owner.first_name}</p>
+                    </a>
-                    </div>
+                  </Link>
-                  </div>
                 ))}
-                <Link href="/">
-                  <a>
-                    <Button type="button">Go to workspaces</Button>
-                  </a>
-                </Link>
               </div>
             ) : (
               invitations.length === 0 &&