From 44bffd912767cdb0c9e65657f78cd231dba0ab21 Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <aaryankhandu123@gmail.com>
Date: Tue, 14 Feb 2023 19:55:03 +0530
Subject: [PATCH] feat: create label option in create issue modal

---
 .../components/account/email-code-form.tsx    |   8 +-
 .../components/core/board-view/all-boards.tsx |   6 +
 .../core/board-view/single-board.tsx          |   9 +
 .../core/board-view/single-issue.tsx          |  29 +-
 .../components/core/issues-view-filter.tsx    |  37 ++-
 apps/app/components/core/issues-view.tsx      |   8 +
 .../core/sidebar/sidebar-progress-stats.tsx   |   7 +-
 apps/app/components/issues/form.tsx           |  18 +-
 apps/app/components/issues/select/label.tsx   |  91 +-----
 .../components/labels/create-label-modal.tsx  | 189 +++++++++++++
 apps/app/components/labels/index.ts           |   1 +
 .../modules/delete-module-modal.tsx           |   4 -
 apps/app/components/modules/sidebar.tsx       |  18 +-
 .../components/modules/single-module-card.tsx | 209 +++++++-------
 .../components/states/create-state-modal.tsx  | 227 +++++++++++++++
 .../states/create-update-state-modal.tsx      | 263 ------------------
 apps/app/components/states/index.ts           |   2 +-
 apps/app/contexts/issue-view.context.tsx      |   3 +-
 .../[projectId]/modules/[moduleId].tsx        |  62 +----
 .../index.tsx => invitations.tsx}             |  61 ++--
 20 files changed, 680 insertions(+), 572 deletions(-)
 create mode 100644 apps/app/components/labels/create-label-modal.tsx
 create mode 100644 apps/app/components/states/create-state-modal.tsx
 delete mode 100644 apps/app/components/states/create-update-state-modal.tsx
 rename apps/app/pages/{invitations/index.tsx => invitations.tsx} (81%)

diff --git a/apps/app/components/account/email-code-form.tsx b/apps/app/components/account/email-code-form.tsx
index 98ab10cb7b8..003d515f4f3 100644
--- a/apps/app/components/account/email-code-form.tsx
+++ b/apps/app/components/account/email-code-form.tsx
@@ -114,15 +114,15 @@ export const EmailCodeForm = ({ onSuccess }: any) => {
               error={errors.token}
               placeholder="Enter code"
             />
-            {/* <span
-              className="text-xs outline-none hover:text-theme"
+            {/* <button
+              type="button"
+              className="text-xs outline-none hover:text-theme cursor-pointer"
               onClick={() => {
-                console.log("Triggered");
                 handleSubmit(onSubmit);
               }}
             >
               Resend code
-            </span> */}
+            </button> */}
           </div>
         )}
         <div>
diff --git a/apps/app/components/core/board-view/all-boards.tsx b/apps/app/components/core/board-view/all-boards.tsx
index d4e995403c3..f5b03267ccf 100644
--- a/apps/app/components/core/board-view/all-boards.tsx
+++ b/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}
                     />
                   );
diff --git a/apps/app/components/core/board-view/single-board.tsx b/apps/app/components/core/board-view/single-board.tsx
index e7cb49798ab..dfd012fac9a 100644
--- a/apps/app/components/core/board-view/single-board.tsx
+++ b/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
@@ -106,10 +110,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}
                     />
                   )}
diff --git a/apps/app/components/core/board-view/single-issue.tsx b/apps/app/components/core/board-view/single-issue.tsx
index 945592788fb..a19c683e2be 100644
--- a/apps/app/components/core/board-view/single-issue.tsx
+++ b/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}
diff --git a/apps/app/components/core/issues-view-filter.tsx b/apps/app/components/core/issues-view-filter.tsx
index 7225f514843..dc29d714ba3 100644
--- a/apps/app/components/core/issues-view-filter.tsx
+++ b/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) => (
-                            <button
-                              key={key}
-                              type="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>
-                          ))}
+                          {Object.keys(properties).map((key) => {
+                            if (
+                              issueView === "kanban" &&
+                              ((groupByProperty === "state_detail.name" && key === "state") ||
+                                (groupByProperty === "priority" && key === "priority"))
+                            )
+                              return;
+
+                            return (
+                              <button
+                                key={key}
+                                type="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>
diff --git a/apps/app/components/core/issues-view.tsx b/apps/app/components/core/issues-view.tsx
index 2edb7f8043b..b3278ec3ef7 100644
--- a/apps/app/components/core/issues-view.tsx
+++ b/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}
             />
           )}
diff --git a/apps/app/components/core/sidebar/sidebar-progress-stats.tsx b/apps/app/components/core/sidebar/sidebar-progress-stats.tsx
index ea8e1e401c1..8fb073f54d2 100644
--- a/apps/app/components/core/sidebar/sidebar-progress-stats.tsx
+++ b/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
diff --git a/apps/app/components/issues/form.tsx b/apps/app/components/issues/form.tsx
index 5e034822aaa..3194481b6ec 100644
--- a/apps/app/components/issues/form.tsx
+++ b/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>
diff --git a/apps/app/components/issues/select/label.tsx b/apps/app/components/issues/select/label.tsx
index 2d4e5a179c3..f0a1d2d6438 100644
--- a/apps/app/components/issues/select/label.tsx
+++ b/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> = {
-  name: "",
-};
-
-export const IssueLabelSelect: React.FC<Props> = ({ value, onChange, projectId }) => {
+export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange, projectId }) => {
   // states
   const [query, setQuery] = useState("");
 
   const router = useRouter();
   const { workspaceSlug } = router.query;
 
-  const [isOpen, setIsOpen] = useState(false);
-
-  const { data: issueLabels, mutate: issueLabelsMutate } = useSWR<IIssueLabels[]>(
+  const { data: issueLabels } = 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">
-                    {isOpen ? (
-                      <div className="flex items-center gap-x-1">
-                        <Input
-                          id="name"
-                          name="name"
-                          type="text"
-                          placeholder="Title"
-                          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> */}
+                  <button
+                    type="button"
+                    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"
+                    onClick={() => setIsOpen(true)}
+                  >
+                    <PlusIcon className="h-3 w-3 text-gray-400" aria-hidden="true" />
+                    <span className="text-xs whitespace-nowrap">Create label</span>
+                  </button>
                 </div>
               </Combobox.Options>
             </Transition>
diff --git a/apps/app/components/labels/create-label-modal.tsx b/apps/app/components/labels/create-label-modal.tsx
new file mode 100644
index 00000000000..89c2860122d
--- /dev/null
+++ b/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>
+  );
+};
diff --git a/apps/app/components/labels/index.ts b/apps/app/components/labels/index.ts
index d407cd0741e..db02d29f02b 100644
--- a/apps/app/components/labels/index.ts
+++ b/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";
diff --git a/apps/app/components/modules/delete-module-modal.tsx b/apps/app/components/modules/delete-module-modal.tsx
index 317f49a6863..05ed6708943 100644
--- a/apps/app/components/modules/delete-module-modal.tsx
+++ b/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
diff --git a/apps/app/components/modules/sidebar.tsx b/apps/app/components/modules/sidebar.tsx
index eb563fe7448..11555e007f7 100644
--- a/apps/app/components/modules/sidebar.tsx
+++ b/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> = ({
-  issues,
-  module,
-  isOpen,
-  moduleIssues,
-  handleDeleteModule,
-}) => {
+export const ModuleDetailsSidebar: React.FC<Props> = ({ issues, module, isOpen, moduleIssues }) => {
+  const [moduleDeleteModal, setModuleDeleteModal] = useState(false);
   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>
diff --git a/apps/app/components/modules/single-module-card.tsx b/apps/app/components/modules/single-module-card.tsx
index 6bd59d14fe1..c8cca72e9b7 100644
--- a/apps/app/components/modules/single-module-card.tsx
+++ b/apps/app/components/modules/single-module-card.tsx
@@ -21,132 +21,131 @@ type Props = {
 };
 
 export const SingleModuleCard: React.FC<Props> = ({ module }) => {
+  const [selectedModuleForDelete, setSelectedModuleForDelete] = useState<SelectModuleType>();
+  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={
-          moduleDeleteModal &&
-          !!selectedModuleForDelete &&
-          selectedModuleForDelete.actionType === "delete"
-        }
+        isOpen={moduleDeleteModal}
         setIsOpen={setModuleDeleteModal}
-        data={selectedModuleForDelete}
+        data={module}
       />
-      <Link href={`/${workspaceSlug}/projects/${module.project}/modules/${module.id}`}>
-        <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>
-              <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 h-full w-full relative select-none p-2">
+        <div className="absolute top-4 right-4 z-10 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>
+        <Link href={`/${workspaceSlug}/projects/${module.project}/modules/${module.id}`}>
+          <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>
+                <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>
-            <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 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>
-            <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 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>
-        </a>
-      </Link>
-    </div>
+          </a>
+        </Link>
+      </div>
+    </>
   );
 };
diff --git a/apps/app/components/states/create-state-modal.tsx b/apps/app/components/states/create-state-modal.tsx
new file mode 100644
index 00000000000..5986b4e5338
--- /dev/null
+++ b/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>
+  );
+};
diff --git a/apps/app/components/states/create-update-state-modal.tsx b/apps/app/components/states/create-update-state-modal.tsx
deleted file mode 100644
index 806d05e7d4a..00000000000
--- a/apps/app/components/states/create-update-state-modal.tsx
+++ /dev/null
@@ -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>
-  );
-};
diff --git a/apps/app/components/states/index.ts b/apps/app/components/states/index.ts
index 167e12d8b13..39285a77f5d 100644
--- a/apps/app/components/states/index.ts
+++ b/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";
diff --git a/apps/app/contexts/issue-view.context.tsx b/apps/app/contexts/issue-view.context.tsx
index c2c655470e4..9a2e31a8138 100644
--- a/apps/app/contexts/issue-view.context.tsx
+++ b/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;
     }
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/modules/[moduleId].tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/modules/[moduleId].tsx
index 87922e89406..bf97a69881b 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/modules/[moduleId].tsx
+++ b/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 { DeleteModuleModal, ModuleDetailsSidebar } from "components/modules";
+import { ModuleDetailsSidebar } from "components/modules";
 // ui
 import { CustomMenu, EmptySpace, EmptySpaceItem, Spinner } from "components/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 // types
-import {
-  IIssue,
-  IModule,
-  ModuleIssueResponse,
-  SelectIssue,
-  SelectModuleType,
-  UserAuth,
-} from "types";
+import { IModule, ModuleIssueResponse, 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 [selectedModuleForDelete, setSelectedModuleForDelete] = useState<SelectModuleType>();
-  const [preloadedData, setPreloadedData] = useState<
-    (Partial<IIssue> & { actionType: "createIssue" | "edit" | "delete" }) | null
-  >(null);
+  const [moduleSidebar, setModuleSidebar] = useState(true);
 
   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>
diff --git a/apps/app/pages/invitations/index.tsx b/apps/app/pages/invitations.tsx
similarity index 81%
rename from apps/app/pages/invitations/index.tsx
rename to apps/app/pages/invitations.tsx
index 42e52402c97..6c658495b06 100644
--- a/apps/app/pages/invitations/index.tsx
+++ b/apps/app/pages/invitations.tsx
@@ -3,19 +3,21 @@ import Link from "next/link";
 import { useRouter } from "next/router";
 import useSWR from "swr";
 
-// icons
-import { CubeIcon, PlusIcon } from "@heroicons/react/24/outline";
+// lib
+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("/")}>
-                    Skip
-                  </Button>
+                  <Link href="/">
+                    <a className="w-full">
+                      <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
-                    className="mb-2 flex items-center justify-between rounded border px-4 py-2"
-                    key={workspace.id}
-                  >
-                    <div className="flex items-center gap-x-2">
-                      <CubeIcon className="h-5 w-5 text-gray-400" />
-                      <Link href={workspace.slug}>
-                        <a>{workspace.name}</a>
-                      </Link>
-                    </div>
-                    <div className="flex items-center gap-x-2">
-                      <p className="text-sm">{workspace.owner.first_name}</p>
-                    </div>
-                  </div>
+                  <Link key={workspace.id} href={workspace.slug}>
+                    <a>
+                      <div className="mb-2 flex items-center justify-between rounded border px-4 py-2">
+                        <div className="flex items-center gap-x-2">
+                          <CubeIcon className="h-5 w-5 text-gray-400" />
+                          {workspace.name}
+                        </div>
+                        <div className="flex items-center gap-x-2">
+                          <p className="text-sm">{workspace.owner.first_name}</p>
+                        </div>
+                      </div>
+                    </a>
+                  </Link>
                 ))}
-                <Link href="/">
-                  <a>
-                    <Button type="button">Go to workspaces</Button>
-                  </a>
-                </Link>
               </div>
             ) : (
               invitations.length === 0 &&