Refactoring Phase 1 (#199)

* style: added cta at the bottom of sidebar, added missing icons as well, showing dynamic workspace member count on workspace dropdown

* refractor: running parallel request,

made create/edit label function to async function

* fix: sidebar dropdown content going below kanban items

outside click detection in need help dropdown

* refractor: making parallel api calls

fix: create state input comes at bottom, create state input gets on focus automatically, form is getting submitted on enter click

* refactoring file structure and signin page

* style: changed text and added spinner for signing in loading

* refractor: removed unused type

* fix: my issue cta in profile page sending to 404 page

* fix: added new s3 bucket url in next.config.js file

increased image modal height

* packaging UI components

* eslint config

* eslint fixes

* refactoring changes

* build fixes

* minor fixes

* adding todo comments for reference

* refactor: cleared unused imports and re ordered imports

* refactor: removed unused imports

* fix: added workspace argument to useissues hook

* refactor: removed api-routes file, unnecessary constants

* refactor: created helpers folder, removed unnecessary constants

* refactor: new context for issue view

* refactoring issues page

* build fixes

* refactoring

* refactor: create issue modal

* refactor: module ui

* fix: sub-issues mutation

* fix: create more option in create issue modal

* description form debounce issue

* refactor: global component for assignees list

* fix: link module interface

* fix: priority icons and sub-issues count added

* fix: cycle mutation in issue details page

* fix: remove issue from cycle mutation

* fix: create issue modal in home page

* fix: removed unnecessary props

* fix: updated create issue form status

* fix: settings auth breaking

* refactor: issue details page

Co-authored-by: Dakshesh Jain <dakshesh.jain14@gmail.com>
Co-authored-by: Dakshesh Jain <65905942+dakshesh14@users.noreply.github.com>
Co-authored-by: venkatesh-soulpage <venkatesh.marreboyina@soulpageit.com>
Co-authored-by: Aaryan Khandelwal <aaryankhandu123@gmail.com>
Co-authored-by: Anmol Singh Bhatia <anmolsinghbhatia1001@gmail.com>

apps/app/components/issues/description-form.tsx

@@ -0,0 +1,74 @@
+import { FC, useEffect, useState } from "react";
+import dynamic from "next/dynamic";
+// types
+import { IIssue } from "types";
+// components
+import { Loader, Input } from "components/ui";
+const RemirrorRichTextEditor = dynamic(() => import("components/rich-text-editor"), {
+  ssr: false,
+  loading: () => (
+    <Loader>
+      <Loader.Item height="12rem" width="100%" />
+    </Loader>
+  ),
+});
+// hooks
+import useDebounce from "hooks/use-debounce";
+
+export interface IssueDescriptionFormValues {
+  name: string;
+  description: any;
+  description_html: string;
+}
+
+export interface IssueDetailsProps {
+  issue: IIssue;
+  handleSubmit: (value: IssueDescriptionFormValues) => void;
+}
+
+export const IssueDescriptionForm: FC<IssueDetailsProps> = ({ issue, handleSubmit }) => {
+  // states
+  // const [issueFormValues, setIssueFormValues] = useState({
+  //   name: issue.name,
+  //   description: issue?.description,
+  //   description_html: issue?.description_html,
+  // });
+
+  const [issueName, setIssueName] = useState(issue?.name);
+  const [issueDescription, setIssueDescription] = useState(issue?.description);
+  const [issueDescriptionHTML, setIssueDescriptionHTML] = useState(issue?.description_html);
+
+  // hooks
+  const formValues = useDebounce(
+    { name: issueName, description: issueDescription, description_html: issueDescriptionHTML },
+    2000
+  );
+  const stringFromValues = JSON.stringify(formValues);
+
+  useEffect(() => {
+    handleSubmit(formValues);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [handleSubmit, stringFromValues]);
+
+  return (
+    <div>
+      <Input
+        id="name"
+        placeholder="Enter issue name"
+        name="name"
+        autoComplete="off"
+        value={issueName}
+        onChange={(e) => setIssueName(e.target.value)}
+        mode="transparent"
+        className="text-xl font-medium"
+        required={true}
+      />
+      <RemirrorRichTextEditor
+        value={issueDescription}
+        placeholder="Enter Your Text..."
+        onJSONChange={(json) => setIssueDescription(json)}
+        onHTMLChange={(html) => setIssueDescriptionHTML(html)}
+      />
+    </div>
+  );
+};

apps/app/components/issues/form.tsx

@@ -0,0 +1,382 @@
+import { ChangeEvent, FC, useState, useEffect } from "react";
+
+import Link from "next/link";
+import dynamic from "next/dynamic";
+import { useRouter } from "next/router";
+
+// react-hook-form
+import { Controller, useForm } from "react-hook-form";
+// components
+import {
+  IssueAssigneeSelect,
+  IssueLabelSelect,
+  IssueParentSelect,
+  IssuePrioritySelect,
+  IssueProjectSelect,
+  IssueStateSelect,
+} from "components/issues/select";
+import { CycleSelect as IssueCycleSelect } from "components/cycles/select";
+import CreateUpdateStateModal from "components/project/issues/BoardView/state/create-update-state-modal";
+import CreateUpdateCycleModal from "components/project/cycles/create-update-cycle-modal";
+// ui
+import { Button, CustomMenu, Input, Loader } from "components/ui";
+// icons
+import { XMarkIcon } from "@heroicons/react/24/outline";
+// helpers
+import { cosineSimilarity } from "helpers/string.helper";
+// types
+import type { IIssue } from "types";
+// rich-text-editor
+const RemirrorRichTextEditor = dynamic(() => import("components/rich-text-editor"), {
+  ssr: false,
+  loading: () => (
+    <Loader>
+      <Loader.Item height="12rem" width="100%" />
+    </Loader>
+  ),
+});
+
+const defaultValues: Partial<IIssue> = {
+  project: "",
+  name: "",
+  description: "",
+  description_html: "<p></p>",
+  state: "",
+  cycle: null,
+  priority: null,
+  labels_list: [],
+};
+
+export interface IssueFormProps {
+  handleFormSubmit: (values: Partial<IIssue>) => void;
+  initialData?: Partial<IIssue>;
+  issues: IIssue[];
+  projectId: string;
+  setActiveProject: React.Dispatch<React.SetStateAction<string | null>>;
+  createMore: boolean;
+  setCreateMore: React.Dispatch<React.SetStateAction<boolean>>;
+  handleClose: () => void;
+  status: boolean;
+}
+
+export const IssueForm: FC<IssueFormProps> = ({
+  handleFormSubmit,
+  initialData,
+  issues = [],
+  projectId,
+  setActiveProject,
+  createMore,
+  setCreateMore,
+  handleClose,
+  status,
+}) => {
+  // states
+  const [mostSimilarIssue, setMostSimilarIssue] = useState<IIssue | undefined>();
+  const [cycleModal, setCycleModal] = useState(false);
+  const [stateModal, setStateModal] = useState(false);
+  const [parentIssueListModalOpen, setParentIssueListModalOpen] = useState(false);
+
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  const {
+    register,
+    formState: { errors, isSubmitting },
+    handleSubmit,
+    reset,
+    watch,
+    control,
+    setValue,
+  } = useForm<IIssue>({
+    defaultValues,
+    mode: "all",
+    reValidateMode: "onChange",
+  });
+
+  const handleTitleChange = (e: ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value;
+    const similarIssue = issues?.find((i: IIssue) => cosineSimilarity(i.name, value) > 0.7);
+    setMostSimilarIssue(similarIssue);
+  };
+
+  const handleDiscard = () => {
+    reset({ ...defaultValues, project: projectId });
+    handleClose();
+  };
+
+  const handleCreateUpdateIssue = async (formData: Partial<IIssue>) => {
+    await handleFormSubmit(formData);
+
+    reset({
+      ...defaultValues,
+      project: projectId,
+    });
+  };
+
+  useEffect(() => {
+    reset({
+      ...defaultValues,
+      ...watch(),
+      project: projectId,
+      ...initialData,
+    });
+  }, [initialData, reset, watch, projectId]);
+
+  return (
+    <>
+      {projectId && (
+        <>
+          <CreateUpdateStateModal
+            isOpen={stateModal}
+            handleClose={() => setStateModal(false)}
+            projectId={projectId}
+          />
+          <CreateUpdateCycleModal
+            isOpen={cycleModal}
+            setIsOpen={setCycleModal}
+            projectId={projectId}
+          />
+        </>
+      )}
+      <form onSubmit={handleSubmit(handleCreateUpdateIssue)}>
+        <div className="space-y-5">
+          <div className="flex items-center gap-x-2">
+            <Controller
+              control={control}
+              name="project"
+              render={({ field: { value, onChange } }) => (
+                <IssueProjectSelect
+                  value={value}
+                  onChange={onChange}
+                  setActiveProject={setActiveProject}
+                />
+              )}
+            />
+            <h3 className="text-lg font-medium leading-6 text-gray-900">
+              {status ? "Update" : "Create"} Issue
+            </h3>
+          </div>
+          {watch("parent") && watch("parent") !== "" ? (
+            <div className="flex w-min items-center gap-2 whitespace-nowrap rounded bg-gray-100 p-2 text-xs">
+              <div className="flex items-center gap-2">
+                <span
+                  className="block h-1.5 w-1.5 rounded-full"
+                  style={{
+                    backgroundColor: issues.find((i) => i.id === watch("parent"))?.state_detail
+                      .color,
+                  }}
+                />
+                <span className="flex-shrink-0 text-gray-600">
+                  {/* {projects?.find((p) => p.id === projectId)?.identifier}- */}
+                  {issues.find((i) => i.id === watch("parent"))?.sequence_id}
+                </span>
+                <span className="truncate font-medium">
+                  {issues.find((i) => i.id === watch("parent"))?.name.substring(0, 50)}
+                </span>
+                <XMarkIcon
+                  className="h-3 w-3 cursor-pointer"
+                  onClick={() => setValue("parent", null)}
+                />
+              </div>
+            </div>
+          ) : null}
+          <div className="space-y-3">
+            <div className="mt-2 space-y-3">
+              <div>
+                <Input
+                  id="name"
+                  label="Title"
+                  name="name"
+                  onChange={handleTitleChange}
+                  className="resize-none"
+                  placeholder="Enter title"
+                  autoComplete="off"
+                  error={errors.name}
+                  register={register}
+                  validations={{
+                    required: "Name is required",
+                    maxLength: {
+                      value: 255,
+                      message: "Name should be less than 255 characters",
+                    },
+                  }}
+                />
+                {mostSimilarIssue && (
+                  <div className="flex items-center gap-x-2">
+                    <p className="text-sm text-gray-500">
+                      <Link
+                        href={`/${workspaceSlug}/projects/${projectId}/issues/${mostSimilarIssue}`}
+                      >
+                        <a target="_blank" type="button" className="inline text-left">
+                          <span>Did you mean </span>
+                          <span className="italic">
+                            {mostSimilarIssue?.project_detail.identifier}-
+                            {mostSimilarIssue?.sequence_id}: {mostSimilarIssue?.name}{" "}
+                          </span>
+                          ?
+                        </a>
+                      </Link>{" "}
+                    </p>
+                    <button
+                      type="button"
+                      className="text-sm text-blue-500"
+                      onClick={() => {
+                        setMostSimilarIssue(undefined);
+                      }}
+                    >
+                      No
+                    </button>
+                  </div>
+                )}
+              </div>
+              <div>
+                <label htmlFor={"description"} className="mb-2 text-gray-500">
+                  Description
+                </label>
+                <Controller
+                  name="description"
+                  control={control}
+                  render={({ field: { value, onChange } }) => (
+                    <RemirrorRichTextEditor
+                      value={value}
+                      onBlur={(jsonValue, htmlValue) => {
+                        setValue("description", jsonValue);
+                        setValue("description_html", htmlValue);
+                      }}
+                      placeholder="Enter Your Text..."
+                    />
+                  )}
+                />
+              </div>
+              <div className="flex flex-wrap items-center gap-2">
+                <Controller
+                  control={control}
+                  name="state"
+                  render={({ field: { value, onChange } }) => (
+                    <IssueStateSelect
+                      setIsOpen={setStateModal}
+                      value={value}
+                      onChange={onChange}
+                      projectId={projectId}
+                    />
+                  )}
+                />
+                <Controller
+                  control={control}
+                  name="cycle"
+                  render={({ field: { value, onChange } }) => (
+                    <IssueCycleSelect projectId={projectId} value={value} onChange={onChange} />
+                  )}
+                />
+                <Controller
+                  control={control}
+                  name="priority"
+                  render={({ field: { value, onChange } }) => (
+                    <IssuePrioritySelect value={value} onChange={onChange} />
+                  )}
+                />
+                <Controller
+                  control={control}
+                  name="assignees_list"
+                  render={({ field: { value, onChange } }) => (
+                    <IssueAssigneeSelect projectId={projectId} value={value} onChange={onChange} />
+                  )}
+                />
+                <Controller
+                  control={control}
+                  name="labels_list"
+                  render={({ field: { value, onChange } }) => (
+                    <IssueLabelSelect value={value} onChange={onChange} projectId={projectId} />
+                  )}
+                />
+                <Controller
+                  control={control}
+                  name="target_date"
+                  render={({ field: { value, onChange } }) => (
+                    <input
+                      type="date"
+                      value={value ?? ""}
+                      onChange={(e: any) => {
+                        onChange(e.target.value);
+                      }}
+                      className="cursor-pointer rounded-md border px-2 py-[3px] text-xs shadow-sm duration-300 hover:bg-gray-100 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500"
+                    />
+                  )}
+                />
+                <IssueParentSelect
+                  control={control}
+                  isOpen={parentIssueListModalOpen}
+                  setIsOpen={setParentIssueListModalOpen}
+                  issues={issues ?? []}
+                />
+                <CustomMenu ellipsis>
+                  {watch("parent") && watch("parent") !== "" ? (
+                    <>
+                      <CustomMenu.MenuItem
+                        renderAs="button"
+                        onClick={() => setParentIssueListModalOpen(true)}
+                      >
+                        Change parent issue
+                      </CustomMenu.MenuItem>
+                      <CustomMenu.MenuItem
+                        renderAs="button"
+                        onClick={() => setValue("parent", null)}
+                      >
+                        Remove parent issue
+                      </CustomMenu.MenuItem>
+                    </>
+                  ) : (
+                    <CustomMenu.MenuItem
+                      renderAs="button"
+                      onClick={() => setParentIssueListModalOpen(true)}
+                    >
+                      Select Parent Issue
+                    </CustomMenu.MenuItem>
+                  )}
+                </CustomMenu>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className="mt-5 flex items-center justify-between gap-2">
+          <div
+            className="flex cursor-pointer items-center gap-1"
+            onClick={() => setCreateMore((prevData) => !prevData)}
+          >
+            <span className="text-xs">Create more</span>
+            <button
+              type="button"
+              className={`pointer-events-none relative inline-flex h-4 w-7 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent ${
+                createMore ? "bg-theme" : "bg-gray-300"
+              } transition-colors duration-300 ease-in-out focus:outline-none`}
+              role="switch"
+              aria-checked="false"
+            >
+              <span className="sr-only">Create more</span>
+              <span
+                aria-hidden="true"
+                className={`pointer-events-none inline-block h-3 w-3 ${
+                  createMore ? "translate-x-3" : "translate-x-0"
+                } transform rounded-full bg-white shadow ring-0 transition duration-300 ease-in-out`}
+              />
+            </button>
+          </div>
+          <div className="flex items-center gap-2">
+            <Button theme="secondary" onClick={handleDiscard}>
+              Discard
+            </Button>
+            <Button type="submit" disabled={isSubmitting}>
+              {status
+                ? isSubmitting
+                  ? "Updating Issue..."
+                  : "Update Issue"
+                : isSubmitting
+                ? "Creating Issue..."
+                : "Create Issue"}
+            </Button>
+          </div>
+        </div>
+      </form>
+    </>
+  );
+};

apps/app/components/issues/index.ts

@@ -0,0 +1,5 @@
+export * from "./list-item";
+export * from "./description-form";
+export * from "./sub-issue-list";
+export * from "./form";
+export * from "./modal";

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

@@ -0,0 +1,144 @@
+import React from "react";
+
+import Link from "next/link";
+import { useRouter } from "next/router";
+
+// components
+import { AssigneesList } from "components/ui/avatar";
+// icons
+import { CalendarDaysIcon } from "@heroicons/react/24/outline";
+// helpers
+import { renderShortNumericDateFormat, findHowManyDaysLeft } from "helpers/date-time.helper";
+import { addSpaceIfCamelCase } from "helpers/string.helper";
+// types
+import { IIssue, Properties } from "types";
+// constants
+import { getPriorityIcon } from "constants/global";
+
+type Props = {
+  type?: string;
+  issue: IIssue;
+  properties: Properties;
+  editIssue?: () => void;
+  handleDeleteIssue?: () => void;
+  removeIssue?: () => void;
+};
+
+export const IssueListItem: React.FC<Props> = (props) => {
+  // const { type, issue, properties, editIssue, handleDeleteIssue, removeIssue } = props;
+  const { issue, properties } = props;
+  // router
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  return (
+    <div key={issue.id} className="flex items-center justify-between gap-2 px-4 py-3 text-sm">
+      <div className="flex items-center gap-2">
+        <span
+          className={`block h-1.5 w-1.5 flex-shrink-0 rounded-full`}
+          style={{
+            backgroundColor: issue.state_detail.color,
+          }}
+        />
+        <Link href={`/${workspaceSlug}/projects/${issue?.project_detail?.id}/issues/${issue.id}`}>
+          <a className="group relative flex items-center gap-2">
+            {properties?.key && (
+              <span className="flex-shrink-0 text-xs text-gray-500">
+                {issue.project_detail?.identifier}-{issue.sequence_id}
+              </span>
+            )}
+            <span>{issue.name}</span>
+          </a>
+        </Link>
+      </div>
+      <div className="flex flex-shrink-0 flex-wrap items-center gap-x-1 gap-y-2 text-xs">
+        {properties.priority && (
+          <div
+            className={`group relative flex flex-shrink-0 cursor-pointer items-center gap-1 rounded px-2 py-1 text-xs capitalize shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 ${
+              issue.priority === "urgent"
+                ? "bg-red-100 text-red-600"
+                : issue.priority === "high"
+                ? "bg-orange-100 text-orange-500"
+                : issue.priority === "medium"
+                ? "bg-yellow-100 text-yellow-500"
+                : issue.priority === "low"
+                ? "bg-green-100 text-green-500"
+                : "bg-gray-100"
+            }`}
+          >
+            {getPriorityIcon(issue.priority)}
+            <div className="absolute bottom-full right-0 z-10 mb-2 hidden whitespace-nowrap rounded-md bg-white p-2 shadow-md group-hover:block">
+              <h5 className="mb-1 font-medium text-gray-900">Priority</h5>
+              <div
+                className={`capitalize ${
+                  issue.priority === "urgent"
+                    ? "text-red-600"
+                    : issue.priority === "high"
+                    ? "text-orange-500"
+                    : issue.priority === "medium"
+                    ? "text-yellow-500"
+                    : issue.priority === "low"
+                    ? "text-green-500"
+                    : ""
+                }`}
+              >
+                {issue.priority ?? "None"}
+              </div>
+            </div>
+          </div>
+        )}
+        {properties.state && (
+          <div className="group relative flex flex-shrink-0 cursor-pointer items-center gap-1 rounded border px-2 py-1 text-xs shadow-sm duration-300 hover:bg-gray-100 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500">
+            <span
+              className="h-1.5 w-1.5 flex-shrink-0 rounded-full"
+              style={{
+                backgroundColor: issue?.state_detail?.color,
+              }}
+            />
+            {addSpaceIfCamelCase(issue?.state_detail.name)}
+            <div className="absolute bottom-full right-0 z-10 mb-2 hidden whitespace-nowrap rounded-md bg-white p-2 shadow-md group-hover:block">
+              <h5 className="mb-1 font-medium">State</h5>
+              <div>{issue?.state_detail.name}</div>
+            </div>
+          </div>
+        )}
+        {properties.due_date && (
+          <div
+            className={`group group relative flex flex-shrink-0 cursor-pointer items-center gap-1 rounded border px-2 py-1 text-xs shadow-sm duration-300 hover:bg-gray-100 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 ${
+              issue.target_date === null
+                ? ""
+                : issue.target_date < new Date().toISOString()
+                ? "text-red-600"
+                : findHowManyDaysLeft(issue.target_date) <= 3 && "text-orange-400"
+            }`}
+          >
+            <CalendarDaysIcon className="h-4 w-4" />
+            {issue.target_date ? renderShortNumericDateFormat(issue.target_date) : "N/A"}
+            <div className="absolute bottom-full right-0 z-10 mb-2 hidden whitespace-nowrap rounded-md bg-white p-2 shadow-md group-hover:block">
+              <h5 className="mb-1 font-medium text-gray-900">Due date</h5>
+              <div>{renderShortNumericDateFormat(issue.target_date ?? "")}</div>
+              <div>
+                {issue.target_date &&
+                  (issue.target_date < new Date().toISOString()
+                    ? `Due date has passed by ${findHowManyDaysLeft(issue.target_date)} days`
+                    : findHowManyDaysLeft(issue.target_date) <= 3
+                    ? `Due date is in ${findHowManyDaysLeft(issue.target_date)} days`
+                    : "Due date")}
+              </div>
+            </div>
+          </div>
+        )}
+        {properties.sub_issue_count && (
+          <div className="flex flex-shrink-0 items-center gap-1 rounded border px-2 py-1 text-xs shadow-sm duration-300 hover:bg-gray-100 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500">
+            {issue?.sub_issues_count} {issue?.sub_issues_count === 1 ? "sub-issue" : "sub-issues"}
+          </div>
+        )}
+        {properties.assignee && (
+          <div className="flex items-center gap-1">
+            <AssigneesList userIds={issue.assignees ?? []} />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};

apps/app/components/issues/modal.tsx

@@ -0,0 +1,265 @@
+import React, { useEffect, useState } from "react";
+
+import { useRouter } from "next/router";
+
+import useSWR, { mutate } from "swr";
+
+// react-hook-form
+import { useForm } from "react-hook-form";
+// headless ui
+import { Dialog, Transition } from "@headlessui/react";
+// services
+import projectService from "services/project.service";
+import modulesService from "services/modules.service";
+import issuesService from "services/issues.service";
+// hooks
+import useUser from "hooks/use-user";
+import useToast from "hooks/use-toast";
+// components
+import CreateUpdateStateModal from "components/project/issues/BoardView/state/create-update-state-modal";
+import CreateUpdateCycleModal from "components/project/cycles/create-update-cycle-modal";
+import { IssueForm } from "components/issues";
+// common
+import { renderDateFormat } from "helpers/date-time.helper";
+// types
+import type { IIssue, IssueResponse } from "types";
+// fetch keys
+import {
+  PROJECT_ISSUES_DETAILS,
+  PROJECT_ISSUES_LIST,
+  CYCLE_ISSUES,
+  USER_ISSUE,
+  PROJECTS_LIST,
+  MODULE_ISSUES,
+  SUB_ISSUES,
+} from "constants/fetch-keys";
+
+export interface IssuesModalProps {
+  isOpen: boolean;
+  handleClose: () => void;
+  data?: IIssue | null;
+  prePopulateData?: Partial<IIssue>;
+  isUpdatingSingleIssue?: boolean;
+}
+
+export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = ({
+  isOpen,
+  handleClose,
+  data,
+  prePopulateData,
+  isUpdatingSingleIssue = false,
+}) => {
+  // states
+  const [createMore, setCreateMore] = useState(false);
+  const [activeProject, setActiveProject] = useState<string | null>(null);
+
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const { user } = useUser();
+  const { setToastAlert } = useToast();
+
+  const { data: issues } = useSWR(
+    workspaceSlug && activeProject
+      ? PROJECT_ISSUES_LIST(workspaceSlug as string, activeProject ?? "")
+      : null,
+    workspaceSlug && activeProject
+      ? () => issuesService.getIssues(workspaceSlug as string, activeProject ?? "")
+      : null
+  );
+
+  const { data: projects } = useSWR(
+    workspaceSlug ? PROJECTS_LIST(workspaceSlug as string) : null,
+    workspaceSlug ? () => projectService.getProjects(workspaceSlug as string) : null
+  );
+
+  const { setError } = useForm<IIssue>({
+    mode: "all",
+    reValidateMode: "onChange",
+  });
+
+  useEffect(() => {
+    if (projects && projects.length > 0)
+      setActiveProject(projects?.find((p) => p.id === projectId)?.id ?? projects?.[0].id ?? null);
+  }, [projectId, projects]);
+
+  const addIssueToCycle = async (issueId: string, cycleId: string) => {
+    if (!workspaceSlug || !projectId) return;
+
+    await issuesService
+      .addIssueToCycle(workspaceSlug as string, activeProject ?? "", cycleId, {
+        issues: [issueId],
+      })
+      .then((res) => {
+        mutate(CYCLE_ISSUES(cycleId));
+        if (isUpdatingSingleIssue) {
+          mutate<IIssue>(
+            PROJECT_ISSUES_DETAILS,
+            (prevData) => ({ ...(prevData as IIssue), sprints: cycleId }),
+            false
+          );
+        } else
+          mutate<IssueResponse>(
+            PROJECT_ISSUES_LIST(workspaceSlug as string, activeProject ?? ""),
+            (prevData) => ({
+              ...(prevData as IssueResponse),
+              results: (prevData?.results ?? []).map((issue) => {
+                if (issue.id === res.id) return { ...issue, sprints: cycleId };
+                return issue;
+              }),
+            }),
+            false
+          );
+      })
+      .catch((err) => {
+        console.log(err);
+      });
+  };
+
+  const addIssueToModule = async (issueId: string, moduleId: string) => {
+    if (!workspaceSlug || !projectId) return;
+
+    await modulesService
+      .addIssuesToModule(workspaceSlug as string, activeProject ?? "", moduleId as string, {
+        issues: [issueId],
+      })
+      .then((res) => {
+        console.log(res);
+        mutate(MODULE_ISSUES(moduleId as string));
+      })
+      .catch((e) => console.log(e));
+  };
+
+  const createIssue = async (payload: Partial<IIssue>) => {
+    await issuesService
+      .createIssues(workspaceSlug as string, activeProject ?? "", payload)
+      .then((res) => {
+        mutate<IssueResponse>(PROJECT_ISSUES_LIST(workspaceSlug as string, activeProject ?? ""));
+
+        if (payload.cycle && payload.cycle !== "") addIssueToCycle(res.id, payload.cycle);
+        if (payload.module && payload.module !== "") addIssueToModule(res.id, payload.module);
+
+        if (!createMore) handleClose();
+
+        setToastAlert({
+          title: "Success",
+          type: "success",
+          message: `Issue ${data ? "updated" : "created"} successfully`,
+        });
+
+        if (payload.assignees_list?.some((assignee) => assignee === user?.id)) mutate(USER_ISSUE);
+
+        if (payload.parent && payload.parent !== "") mutate(SUB_ISSUES(payload.parent));
+      })
+      .catch((err) => {
+        if (err.detail) {
+          setToastAlert({
+            title: "Join the project.",
+            type: "error",
+            message: "Click select to join from projects page to start making changes",
+          });
+        }
+        Object.keys(err).map((key) => {
+          const message = err[key];
+          if (!message) return;
+
+          setError(key as keyof IIssue, {
+            message: Array.isArray(message) ? message.join(", ") : message,
+          });
+        });
+      });
+  };
+
+  const updateIssue = async (payload: Partial<IIssue>) => {
+    await issuesService
+      .updateIssue(workspaceSlug as string, activeProject ?? "", data?.id ?? "", payload)
+      .then((res) => {
+        if (isUpdatingSingleIssue) {
+          mutate<IIssue>(PROJECT_ISSUES_DETAILS, (prevData) => ({ ...prevData, ...res }), false);
+        } else
+          mutate<IssueResponse>(
+            PROJECT_ISSUES_LIST(workspaceSlug as string, activeProject ?? ""),
+            (prevData) => ({
+              ...(prevData as IssueResponse),
+              results: (prevData?.results ?? []).map((issue) => {
+                if (issue.id === res.id) return { ...issue, ...res };
+                return issue;
+              }),
+            })
+          );
+
+        if (payload.cycle && payload.cycle !== "") addIssueToCycle(res.id, payload.cycle);
+
+        if (!createMore) handleClose();
+
+        setToastAlert({
+          title: "Success",
+          type: "success",
+          message: "Issue updated successfully",
+        });
+      })
+      .catch((err) => {
+        Object.keys(err).map((key) => {
+          setError(key as keyof IIssue, { message: err[key].join(", ") });
+        });
+      });
+  };
+
+  const handleFormSubmit = async (formData: Partial<IIssue>) => {
+    if (workspaceSlug && activeProject) {
+      const payload: Partial<IIssue> = {
+        ...formData,
+        target_date: formData.target_date ? renderDateFormat(formData.target_date ?? "") : null,
+      };
+
+      if (!data) await createIssue(payload);
+      else await updateIssue(payload);
+    }
+  };
+
+  return (
+    <Transition.Root show={isOpen} as={React.Fragment}>
+      <Dialog as="div" className="relative z-20" onClose={handleClose}>
+        <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 p-5 text-left shadow-xl transition-all sm:w-full sm:max-w-2xl">
+                <IssueForm
+                  issues={issues?.results ?? []}
+                  handleFormSubmit={handleFormSubmit}
+                  initialData={prePopulateData}
+                  createMore={createMore}
+                  setCreateMore={setCreateMore}
+                  handleClose={handleClose}
+                  projectId={activeProject ?? ""}
+                  setActiveProject={setActiveProject}
+                  status={data ? true : false}
+                />
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
+};

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

@@ -0,0 +1,166 @@
+import { useState, FC, Fragment } from "react";
+
+import Image from "next/image";
+import { useRouter } from "next/router";
+
+import useSWR from "swr";
+
+// headless ui
+import { Transition, Combobox } from "@headlessui/react";
+// icons
+import { UserIcon } from "@heroicons/react/24/outline";
+// service
+import projectServices from "services/project.service";
+// types
+import type { IProjectMember } from "types";
+// fetch keys
+import { PROJECT_MEMBERS } from "constants/fetch-keys";
+
+export type IssueAssigneeSelectProps = {
+  projectId: string;
+  value: string[];
+  onChange: (value: string[]) => void;
+};
+
+type AssigneeAvatarProps = {
+  user: IProjectMember | undefined;
+};
+
+export const AssigneeAvatar: FC<AssigneeAvatarProps> = ({ user }) => {
+  if (!user) return <></>;
+
+  if (user.member.avatar && user.member.avatar !== "") {
+    return (
+      <div className="relative h-4 w-4">
+        <Image
+          src={user.member.avatar}
+          alt="avatar"
+          className="rounded-full"
+          layout="fill"
+          objectFit="cover"
+        />
+      </div>
+    );
+  } else
+    return (
+      <div className="grid h-4 w-4 flex-shrink-0 place-items-center rounded-full bg-gray-700 capitalize text-white">
+        {user.member.first_name && user.member.first_name !== ""
+          ? user.member.first_name.charAt(0)
+          : user.member.email.charAt(0)}
+      </div>
+    );
+};
+
+export const IssueAssigneeSelect: FC<IssueAssigneeSelectProps> = ({
+  projectId,
+  value = [],
+  onChange,
+}) => {
+  // states
+  const [query, setQuery] = useState("");
+
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  // fetching project members
+  const { data: people } = useSWR(
+    workspaceSlug && projectId ? PROJECT_MEMBERS(projectId as string) : null,
+    workspaceSlug && projectId
+      ? () => projectServices.projectMembers(workspaceSlug as string, projectId as string)
+      : null
+  );
+
+  const options = people?.map((person) => ({
+    value: person.member.id,
+    display:
+      person.member.first_name && person.member.first_name !== ""
+        ? person.member.first_name
+        : person.member.email,
+  }));
+
+  const filteredOptions =
+    query === ""
+      ? options
+      : options?.filter((option) => option.display.toLowerCase().includes(query.toLowerCase()));
+
+  return (
+    <Combobox
+      as="div"
+      value={value}
+      onChange={(val) => onChange(val)}
+      className="relative flex-shrink-0"
+      multiple
+    >
+      {({ open }: any) => (
+        <>
+          <Combobox.Label className="sr-only">Assignees</Combobox.Label>
+          <Combobox.Button
+            className={`flex cursor-pointer items-center gap-1 rounded-md border px-2 py-1 text-xs shadow-sm duration-300 hover:bg-gray-100 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500`}
+          >
+            <UserIcon className="h-3 w-3 text-gray-500" />
+            <span
+              className={`hidden truncate sm:block ${
+                value === null || value === undefined ? "" : "text-gray-900"
+              }`}
+            >
+              {Array.isArray(value)
+                ? value
+                    .map((v) => options?.find((option) => option.value === v)?.display)
+                    .join(", ") || "Assignees"
+                : options?.find((option) => option.value === value)?.display || "Assignees"}
+            </span>
+          </Combobox.Button>
+
+          <Transition
+            show={open}
+            as={Fragment}
+            leave="transition ease-in duration-100"
+            leaveFrom="opacity-100"
+            leaveTo="opacity-0"
+          >
+            <Combobox.Options
+              className={`absolute z-10 mt-1 max-h-32 min-w-[8rem] overflow-auto rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none text-xs`}
+            >
+              <Combobox.Input
+                className="w-full border-b bg-transparent p-2 text-xs focus:outline-none"
+                onChange={(event) => setQuery(event.target.value)}
+                placeholder="Search"
+                displayValue={(assigned: any) => assigned?.name}
+              />
+              <div className="py-1">
+                {filteredOptions ? (
+                  filteredOptions.length > 0 ? (
+                    filteredOptions.map((option) => (
+                      <Combobox.Option
+                        key={option.value}
+                        className={({ active, selected }) =>
+                          `${active ? "bg-indigo-50" : ""} ${
+                            selected ? "bg-indigo-50 font-medium" : ""
+                          } flex cursor-pointer select-none items-center gap-2 truncate p-2 text-gray-900`
+                        }
+                        value={option.value}
+                      >
+                        {people && (
+                          <>
+                            <AssigneeAvatar
+                              user={people?.find((p) => p.member.id === option.value)}
+                            />
+                            {option.display}
+                          </>
+                        )}
+                      </Combobox.Option>
+                    ))
+                  ) : (
+                    <p className="text-xs text-gray-500 px-2">No assignees found</p>
+                  )
+                ) : (
+                  <p className="text-xs text-gray-500 px-2">Loading...</p>
+                )}
+              </div>
+            </Combobox.Options>
+          </Transition>
+        </>
+      )}
+    </Combobox>
+  );
+};

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

@@ -0,0 +1,6 @@
+export * from "./assignee";
+export * from "./label";
+export * from "./parent-issue";
+export * from "./priority";
+export * from "./project";
+export * from "./state";

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

@@ -0,0 +1,206 @@
+import React, { useEffect, 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 { TagIcon } from "@heroicons/react/24/outline";
+// services
+import issuesServices from "services/issues.service";
+// types
+import type { IIssueLabels } from "types";
+// fetch-keys
+import { PROJECT_ISSUE_LABELS } from "constants/fetch-keys";
+
+type Props = {
+  value: string[];
+  onChange: (value: string[]) => void;
+  projectId: string;
+};
+
+const defaultValues: Partial<IIssueLabels> = {
+  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, 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 {
+    register,
+    handleSubmit,
+    formState: { isSubmitting },
+    setFocus,
+    reset,
+  } = useForm<IIssueLabels>({ defaultValues });
+
+  useEffect(() => {
+    isOpen && setFocus("name");
+  }, [isOpen, setFocus]);
+
+  const options = issueLabels?.map((label) => ({
+    value: label.id,
+    display: label.name,
+    color: label.colour,
+  }));
+
+  const filteredOptions =
+    query === ""
+      ? options
+      : options?.filter((option) => option.display.toLowerCase().includes(query.toLowerCase()));
+
+  return (
+    <>
+      <Combobox
+        as="div"
+        value={value}
+        onChange={(val) => onChange(val)}
+        className="relative flex-shrink-0"
+        multiple
+      >
+        {({ open }: any) => (
+          <>
+            <Combobox.Label className="sr-only">Labels</Combobox.Label>
+            <Combobox.Button
+              className={`flex cursor-pointer items-center gap-1 rounded-md border px-2 py-1 text-xs shadow-sm duration-300 hover:bg-gray-100 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500`}
+            >
+              <TagIcon className="h-3 w-3 text-gray-500" />
+              <span className={`flex items-center gap-2 ${!value ? "" : "text-gray-900"}`}>
+                {Array.isArray(value)
+                  ? value
+                      .map((v) => options?.find((option) => option.value === v)?.display)
+                      .join(", ") || "Labels"
+                  : options?.find((option) => option.value === value)?.display || "Labels"}
+              </span>
+            </Combobox.Button>
+
+            <Transition
+              show={open}
+              as={React.Fragment}
+              leave="transition ease-in duration-100"
+              leaveFrom="opacity-100"
+              leaveTo="opacity-0"
+            >
+              <Combobox.Options
+                className={`absolute z-10 mt-1 max-h-32 min-w-[8rem] overflow-auto rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none text-xs`}
+              >
+                <Combobox.Input
+                  className="w-full border-b bg-transparent p-2 text-xs focus:outline-none"
+                  onChange={(event) => setQuery(event.target.value)}
+                  placeholder="Search"
+                  displayValue={(assigned: any) => assigned?.name}
+                />
+                <div className="py-1">
+                  {filteredOptions ? (
+                    filteredOptions.length > 0 ? (
+                      filteredOptions.map((option) => (
+                        <Combobox.Option
+                          key={option.value}
+                          className={({ active, selected }) =>
+                            `${active ? "bg-indigo-50" : ""} ${
+                              selected ? "bg-indigo-50 font-medium" : ""
+                            } flex cursor-pointer select-none items-center gap-2 truncate p-2 text-gray-900`
+                          }
+                          value={option.value}
+                        >
+                          {issueLabels && (
+                            <>
+                              <span
+                                className="h-1.5 w-1.5 flex-shrink-0 rounded-full"
+                                style={{
+                                  backgroundColor: option.color,
+                                }}
+                              />
+                              {option.display}
+                            </>
+                          )}
+                        </Combobox.Option>
+                      ))
+                    ) : (
+                      <p className="text-xs text-gray-500 px-2">No labels found</p>
+                    )
+                  ) : (
+                    <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> */}
+                </div>
+              </Combobox.Options>
+            </Transition>
+          </>
+        )}
+      </Combobox>
+    </>
+  );
+};

apps/app/components/issues/select/parent-issue.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import { Controller, Control } from "react-hook-form";
+// components
+import IssuesListModal from "components/project/issues/issues-list-modal";
+// types
+import type { IIssue } from "types";
+
+type Props = {
+  control: Control<IIssue, any>;
+  isOpen: boolean;
+  setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  issues: IIssue[];
+};
+
+export const IssueParentSelect: React.FC<Props> = ({ control, isOpen, setIsOpen, issues }) => (
+  <Controller
+    control={control}
+    name="parent"
+    render={({ field: { onChange } }) => (
+      <IssuesListModal
+        isOpen={isOpen}
+        handleClose={() => setIsOpen(false)}
+        onChange={onChange}
+        issues={issues}
+      />
+    )}
+  />
+);

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

@@ -0,0 +1,54 @@
+import React from "react";
+
+// headless ui
+import { Listbox, Transition } from "@headlessui/react";
+// constants
+import { getPriorityIcon } from "constants/global";
+import { PRIORITIES } from "constants/";
+
+type Props = {
+  value: string | null;
+  onChange: (value: string) => void;
+};
+
+export const IssuePrioritySelect: React.FC<Props> = ({ value, onChange }) => (
+  <Listbox as="div" className="relative" value={value} onChange={onChange}>
+    {({ open }) => (
+      <>
+        <Listbox.Button className="flex cursor-pointer items-center gap-1 rounded-md border px-2 py-1 text-xs shadow-sm duration-300 hover:bg-gray-100 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500">
+          <span className="text-gray-500 grid place-items-center">{getPriorityIcon(value)}</span>
+          <div className="flex items-center gap-2 capitalize">{value ?? "Priority"}</div>
+        </Listbox.Button>
+
+        <Transition
+          show={open}
+          as={React.Fragment}
+          leave="transition ease-in duration-100"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <Listbox.Options className="absolute mt-1 max-h-32 min-w-[8rem] overflow-y-auto whitespace-nowrap bg-white shadow-lg text-xs z-10 rounded-md py-1 ring-1 ring-black ring-opacity-5 focus:outline-none">
+            <div className="py-1">
+              {PRIORITIES.map((priority) => (
+                <Listbox.Option
+                  key={priority}
+                  className={({ selected, active }) =>
+                    `${selected ? "bg-indigo-50 font-medium" : ""} ${
+                      active ? "bg-indigo-50" : ""
+                    } relative cursor-pointer select-none p-2 text-gray-900`
+                  }
+                  value={priority}
+                >
+                  <span className="flex items-center gap-2 capitalize">
+                    {getPriorityIcon(priority)}
+                    {priority ?? "None"}
+                  </span>
+                </Listbox.Option>
+              ))}
+            </div>
+          </Listbox.Options>
+        </Transition>
+      </>
+    )}
+  </Listbox>
+);

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

@@ -0,0 +1,104 @@
+import { FC, Fragment } from "react";
+
+import { useRouter } from "next/router";
+
+import useSWR from "swr";
+
+// headless ui
+import { Listbox, Transition } from "@headlessui/react";
+// icons
+import { ClipboardDocumentListIcon } from "@heroicons/react/24/outline";
+// services
+import projectService from "services/project.service";
+// fetch-keys
+import { PROJECTS_LIST } from "constants/fetch-keys";
+
+export interface IssueProjectSelectProps {
+  value: string;
+  onChange: (value: string) => void;
+  setActiveProject: React.Dispatch<React.SetStateAction<string | null>>;
+}
+
+export const IssueProjectSelect: FC<IssueProjectSelectProps> = ({
+  value,
+  onChange,
+  setActiveProject,
+}) => {
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  // Fetching Projects List
+  const { data: projects } = useSWR(
+    workspaceSlug ? PROJECTS_LIST(workspaceSlug as string) : null,
+    () => (workspaceSlug ? projectService.getProjects(workspaceSlug as string) : null)
+  );
+
+  return (
+    <>
+      <Listbox
+        value={value}
+        onChange={(val) => {
+          onChange(val);
+          setActiveProject(val);
+        }}
+      >
+        {({ open }) => (
+          <>
+            <div className="relative">
+              <Listbox.Button className="relative flex cursor-pointer items-center gap-1 rounded-md border bg-white px-2 py-1 shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 sm:text-sm">
+                <ClipboardDocumentListIcon className="h-3 w-3" />
+                <span className="block truncate">
+                  {projects?.find((i) => i.id === value)?.identifier ?? "Project"}
+                </span>
+              </Listbox.Button>
+
+              <Transition
+                show={open}
+                as={Fragment}
+                leave="transition ease-in duration-100"
+                leaveFrom="opacity-100"
+                leaveTo="opacity-0"
+              >
+                <Listbox.Options className="absolute z-10 mt-1 max-h-28 overflow-auto rounded-md bg-white py-1 text-xs shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
+                  <div className="py-1">
+                    {projects ? (
+                      projects.length > 0 ? (
+                        projects.map((project) => (
+                          <Listbox.Option
+                            key={project.id}
+                            className={({ active, selected }) =>
+                              `${active ? "bg-indigo-50" : ""} ${
+                                selected ? "bg-indigo-50 font-medium" : ""
+                              } cursor-pointer select-none p-2 text-gray-900`
+                            }
+                            value={project.id}
+                          >
+                            {({ selected }) => (
+                              <>
+                                <span
+                                  className={`${
+                                    selected ? "font-medium" : "font-normal"
+                                  } block truncate`}
+                                >
+                                  {project.name}
+                                </span>
+                              </>
+                            )}
+                          </Listbox.Option>
+                        ))
+                      ) : (
+                        <p className="text-gray-400">No projects found!</p>
+                      )
+                    ) : (
+                      <div className="text-sm text-gray-500 px-2">Loading...</div>
+                    )}
+                  </div>
+                </Listbox.Options>
+              </Transition>
+            </div>
+          </>
+        )}
+      </Listbox>
+    </>
+  );
+};

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

@@ -0,0 +1,138 @@
+import React, { useState } from "react";
+
+import { useRouter } from "next/router";
+
+import useSWR from "swr";
+
+// services
+import stateService from "services/state.service";
+// headless ui
+import { Squares2X2Icon, PlusIcon } from "@heroicons/react/24/outline";
+// icons
+import { Combobox, Transition } from "@headlessui/react";
+// fetch keys
+import { STATE_LIST } from "constants/fetch-keys";
+
+type Props = {
+  setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  value: string;
+  onChange: (value: string) => void;
+  projectId: string;
+};
+
+export const IssueStateSelect: React.FC<Props> = ({ setIsOpen, value, onChange, projectId }) => {
+  // states
+  const [query, setQuery] = useState("");
+
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  const { data: states } = useSWR(
+    workspaceSlug && projectId ? STATE_LIST(projectId) : null,
+    workspaceSlug && projectId
+      ? () => stateService.getStates(workspaceSlug as string, projectId)
+      : null
+  );
+
+  const options = states?.map((state) => ({
+    value: state.id,
+    display: state.name,
+    color: state.color,
+  }));
+
+  const filteredOptions =
+    query === ""
+      ? options
+      : options?.filter((option) => option.display.toLowerCase().includes(query.toLowerCase()));
+
+  return (
+    <Combobox
+      as="div"
+      value={value}
+      onChange={(val: any) => onChange(val)}
+      className="relative flex-shrink-0"
+    >
+      {({ open }: any) => (
+        <>
+          <Combobox.Label className="sr-only">State</Combobox.Label>
+          <Combobox.Button
+            className={`flex cursor-pointer items-center gap-1 rounded-md border px-2 py-1 text-xs shadow-sm duration-300 hover:bg-gray-100 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500`}
+          >
+            <Squares2X2Icon className="h-3 w-3 text-gray-500" />
+            <span className={`flex items-center gap-2 ${!value ? "" : "text-gray-900"}`}>
+              {value && value !== "" ? (
+                <span
+                  className="h-1.5 w-1.5 flex-shrink-0 rounded-full"
+                  style={{
+                    backgroundColor: options?.find((option) => option.value === value)?.color,
+                  }}
+                />
+              ) : null}
+              {options?.find((option) => option.value === value)?.display || "State"}
+            </span>
+          </Combobox.Button>
+
+          <Transition
+            show={open}
+            as={React.Fragment}
+            leave="transition ease-in duration-100"
+            leaveFrom="opacity-100"
+            leaveTo="opacity-0"
+          >
+            <Combobox.Options
+              className={`absolute z-10 mt-1 max-h-32 min-w-[8rem] overflow-auto rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none text-xs`}
+            >
+              <Combobox.Input
+                className="w-full border-b bg-transparent p-2 text-xs focus:outline-none"
+                onChange={(event) => setQuery(event.target.value)}
+                placeholder="Search"
+                displayValue={(assigned: any) => assigned?.name}
+              />
+              <div className="py-1">
+                {filteredOptions ? (
+                  filteredOptions.length > 0 ? (
+                    filteredOptions.map((option) => (
+                      <Combobox.Option
+                        key={option.value}
+                        className={({ active, selected }) =>
+                          `${active ? "bg-indigo-50" : ""} ${
+                            selected ? "bg-indigo-50 font-medium" : ""
+                          } flex cursor-pointer select-none items-center gap-2 truncate p-2 text-gray-900`
+                        }
+                        value={option.value}
+                      >
+                        {states && (
+                          <>
+                            <span
+                              className="h-1.5 w-1.5 flex-shrink-0 rounded-full"
+                              style={{
+                                backgroundColor: option.color,
+                              }}
+                            />
+                            {option.display}
+                          </>
+                        )}
+                      </Combobox.Option>
+                    ))
+                  ) : (
+                    <p className="text-xs text-gray-500 px-2">No states found</p>
+                  )
+                ) : (
+                  <p className="text-xs text-gray-500 px-2">Loading...</p>
+                )}
+                <button
+                  type="button"
+                  className="flex select-none w-full items-center gap-2 p-2 text-gray-400 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 state</span>
+                </button>
+              </div>
+            </Combobox.Options>
+          </Transition>
+        </>
+      )}
+    </Combobox>
+  );
+};

apps/app/components/issues/sub-issue-list.tsx

@@ -0,0 +1,168 @@
+import { FC, useState } from "react";
+import Link from "next/link";
+import { Disclosure, Transition } from "@headlessui/react";
+import { ChevronRightIcon, PlusIcon } from "@heroicons/react/24/outline";
+// components
+import { CustomMenu } from "components/ui";
+import { CreateUpdateIssueModal } from "components/issues";
+import AddAsSubIssue from "components/project/issues/issue-detail/add-as-sub-issue";
+// types
+import { IIssue } from "types";
+
+export interface SubIssueListProps {
+  issues: IIssue[];
+  projectId: string;
+  workspaceSlug: string;
+  parentIssue: IIssue;
+  handleSubIssueRemove: (subIssueId: string) => void;
+}
+
+export const SubIssueList: FC<SubIssueListProps> = ({
+  issues = [],
+  handleSubIssueRemove,
+  parentIssue,
+  workspaceSlug,
+  projectId,
+}) => {
+  // states
+  const [isIssueModalActive, setIssueModalActive] = useState(false);
+  const [isSubIssueModalActive, setSubIssueModalActive] = useState(false);
+  const [preloadedData, setPreloadedData] = useState<Partial<IIssue> | null>(null);
+
+  const openIssueModal = () => {
+    setIssueModalActive(true);
+  };
+
+  const closeIssueModal = () => {
+    setIssueModalActive(false);
+  };
+
+  const openSubIssueModal = () => {
+    setSubIssueModalActive(true);
+  };
+
+  const closeSubIssueModal = () => {
+    setSubIssueModalActive(false);
+  };
+
+  return (
+    <>
+      <CreateUpdateIssueModal
+        isOpen={isIssueModalActive}
+        prePopulateData={{ ...preloadedData }}
+        handleClose={closeIssueModal}
+      />
+      <AddAsSubIssue
+        isOpen={isSubIssueModalActive}
+        setIsOpen={setSubIssueModalActive}
+        parent={parentIssue}
+      />
+      {parentIssue?.id && workspaceSlug && projectId && issues?.length > 0 ? (
+        <Disclosure defaultOpen={true}>
+          {({ open }) => (
+            <>
+              <div className="flex items-center justify-between">
+                <Disclosure.Button className="flex items-center gap-1 rounded px-2 py-1 text-xs font-medium hover:bg-gray-100">
+                  <ChevronRightIcon className={`h-3 w-3 ${open ? "rotate-90" : ""}`} />
+                  Sub-issues <span className="ml-1 text-gray-600">{issues.length}</span>
+                </Disclosure.Button>
+                {open ? (
+                  <div className="flex items-center">
+                    <button
+                      type="button"
+                      className="flex items-center gap-1 rounded px-2 py-1 text-xs font-medium hover:bg-gray-100"
+                      onClick={() => {
+                        openIssueModal();
+                        setPreloadedData({
+                          parent: parentIssue.id,
+                        });
+                      }}
+                    >
+                      <PlusIcon className="h-3 w-3" />
+                      Create new
+                    </button>
+
+                    <CustomMenu ellipsis>
+                      <CustomMenu.MenuItem
+                        onClick={() => {
+                          setSubIssueModalActive(true);
+                        }}
+                      >
+                        Add an existing issue
+                      </CustomMenu.MenuItem>
+                    </CustomMenu>
+                  </div>
+                ) : null}
+              </div>
+              <Transition
+                enter="transition duration-100 ease-out"
+                enterFrom="transform scale-95 opacity-0"
+                enterTo="transform scale-100 opacity-100"
+                leave="transition duration-75 ease-out"
+                leaveFrom="transform scale-100 opacity-100"
+                leaveTo="transform scale-95 opacity-0"
+              >
+                <Disclosure.Panel className="mt-3 flex flex-col gap-y-1">
+                  {issues.map((issue) => (
+                    <div
+                      key={issue.id}
+                      className="group flex items-center justify-between gap-2 rounded p-2 hover:bg-gray-100"
+                    >
+                      <Link href={`/${workspaceSlug}/projects/${projectId}/issues/${issue.id}`}>
+                        <a className="flex items-center gap-2 rounded text-xs">
+                          <span
+                            className={`block h-1.5 w-1.5 rounded-full`}
+                            style={{
+                              backgroundColor: issue.state_detail.color,
+                            }}
+                          />
+                          <span className="flex-shrink-0 text-gray-600">
+                            {issue.project_detail.identifier}-{issue.sequence_id}
+                          </span>
+                          <span className="max-w-sm break-all font-medium">{issue.name}</span>
+                        </a>
+                      </Link>
+                      <div className="opacity-0 group-hover:opacity-100">
+                        <CustomMenu ellipsis>
+                          <CustomMenu.MenuItem onClick={() => handleSubIssueRemove(issue.id)}>
+                            Remove as sub-issue
+                          </CustomMenu.MenuItem>
+                        </CustomMenu>
+                      </div>
+                    </div>
+                  ))}
+                </Disclosure.Panel>
+              </Transition>
+            </>
+          )}
+        </Disclosure>
+      ) : (
+        <CustomMenu
+          label={
+            <>
+              <PlusIcon className="h-3 w-3" />
+              Add sub-issue
+            </>
+          }
+          optionsPosition="left"
+          noBorder
+        >
+          <CustomMenu.MenuItem
+            onClick={() => {
+              openIssueModal();
+            }}
+          >
+            Create new
+          </CustomMenu.MenuItem>
+          <CustomMenu.MenuItem
+            onClick={() => {
+              openSubIssueModal();
+            }}
+          >
+            Add an existing issue
+          </CustomMenu.MenuItem>
+        </CustomMenu>
+      )}
+    </>
+  );
+};