From 4f4f3ebbdec9908f4798354d905c25254a2731ad Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <aaryankhandu123@gmail.com>
Date: Sun, 5 Mar 2023 23:24:50 +0530
Subject: [PATCH] chore: updated sidebar selects

---
 .../core/board-view/single-issue.tsx          |   2 +-
 .../core/list-view/single-issue.tsx           |   2 +-
 .../components/issues/my-issues-list-item.tsx |   4 +-
 .../issues/sidebar-select/assignee.tsx        | 157 +++++----------
 .../issues/sidebar-select/cycle.tsx           |  27 +--
 .../issues/sidebar-select/module.tsx          |  27 +--
 .../issues/sidebar-select/priority.tsx        |  65 +++---
 .../issues/sidebar-select/state.tsx           |  98 ++++-----
 apps/app/components/issues/sidebar.tsx        |  36 +++-
 .../issues/view-select/assignee.tsx           |  78 +------
 .../components/issues/view-select/state.tsx   |  66 +++---
 .../modules/sidebar-select/select-lead.tsx    | 190 ++++++------------
 .../modules/sidebar-select/select-members.tsx | 153 +++++---------
 apps/app/components/modules/sidebar.tsx       |  42 ++--
 .../project/send-project-invitation-modal.tsx | 105 +++-------
 apps/app/components/ui/avatar.tsx             |   2 +-
 apps/app/components/ui/context-menu.tsx       |  14 +-
 .../components/ui/custom-search-select.tsx    |  30 +--
 apps/app/components/ui/datepicker.tsx         |   8 +-
 19 files changed, 389 insertions(+), 717 deletions(-)

diff --git a/apps/app/components/core/board-view/single-issue.tsx b/apps/app/components/core/board-view/single-issue.tsx
index 2d2c34626..1239da0d4 100644
--- a/apps/app/components/core/board-view/single-issue.tsx
+++ b/apps/app/components/core/board-view/single-issue.tsx
@@ -294,7 +294,7 @@ export const SingleBoardIssue: React.FC<Props> = ({
               />
             )}
             {properties.sub_issue_count && (
-              <div className="flex flex-shrink-0 items-center gap-1 rounded border px-2 py-1 text-xs shadow-sm duration-300 hover:bg-gray-100 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500">
+              <div className="flex flex-shrink-0 items-center gap-1 rounded-md border px-3 py-1.5 text-xs shadow-sm">
                 {issue.sub_issues_count} {issue.sub_issues_count === 1 ? "sub-issue" : "sub-issues"}
               </div>
             )}
diff --git a/apps/app/components/core/list-view/single-issue.tsx b/apps/app/components/core/list-view/single-issue.tsx
index 134fffa1c..8e76237e9 100644
--- a/apps/app/components/core/list-view/single-issue.tsx
+++ b/apps/app/components/core/list-view/single-issue.tsx
@@ -236,7 +236,7 @@ export const SingleListIssue: React.FC<Props> = ({
             />
           )}
           {properties.sub_issue_count && (
-            <div className="flex flex-shrink-0 items-center gap-1 rounded border px-2 py-1 text-xs shadow-sm">
+            <div className="flex flex-shrink-0 items-center gap-1 rounded-md border px-3 py-1.5 text-xs shadow-sm">
               {issue.sub_issues_count} {issue.sub_issues_count === 1 ? "sub-issue" : "sub-issues"}
             </div>
           )}
diff --git a/apps/app/components/issues/my-issues-list-item.tsx b/apps/app/components/issues/my-issues-list-item.tsx
index 63a8ad5e8..740da34ba 100644
--- a/apps/app/components/issues/my-issues-list-item.tsx
+++ b/apps/app/components/issues/my-issues-list-item.tsx
@@ -105,7 +105,7 @@ export const MyIssuesListItem: React.FC<Props> = ({
               </Tooltip>
             )}
             <Tooltip tooltipHeading="Title" tooltipContent={issue.name}>
-              <span className="w-auto max-w-lg text-ellipsis overflow-hidden whitespace-nowrap">
+              <span className="w-auto max-w-lg overflow-hidden text-ellipsis whitespace-nowrap">
                 {issue.name}
               </span>
             </Tooltip>
@@ -135,7 +135,7 @@ export const MyIssuesListItem: React.FC<Props> = ({
           />
         )}
         {properties.sub_issue_count && (
-          <div className="flex flex-shrink-0 items-center gap-1 rounded border px-2 py-1 text-xs shadow-sm duration-300 hover:bg-gray-100 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500">
+          <div className="flex flex-shrink-0 items-center gap-1 rounded-md border px-3 py-1.5 text-xs shadow-sm">
             {issue?.sub_issues_count} {issue?.sub_issues_count === 1 ? "sub-issue" : "sub-issues"}
           </div>
         )}
diff --git a/apps/app/components/issues/sidebar-select/assignee.tsx b/apps/app/components/issues/sidebar-select/assignee.tsx
index 2d8088059..0d45143a3 100644
--- a/apps/app/components/issues/sidebar-select/assignee.tsx
+++ b/apps/app/components/issues/sidebar-select/assignee.tsx
@@ -1,41 +1,57 @@
 import React from "react";
 
-import Image from "next/image";
 import { useRouter } from "next/router";
 
 import useSWR from "swr";
 
-// react-hook-form
-import { Control, Controller } from "react-hook-form";
-// headless ui
-import { Listbox, Transition } from "@headlessui/react";
 // services
-import { UserGroupIcon } from "@heroicons/react/24/outline";
-import workspaceService from "services/workspace.service";
-// hooks
+import projectService from "services/project.service";
 // ui
-import { AssigneesList } from "components/ui/avatar";
-import { Spinner } from "components/ui";
+import { CustomSearchSelect } from "components/ui";
+import { AssigneesList, Avatar } from "components/ui/avatar";
+// icons
+import { UserGroupIcon } from "@heroicons/react/24/outline";
 // types
-import { IIssue, UserAuth } from "types";
-// constants
-import { WORKSPACE_MEMBERS } from "constants/fetch-keys";
+import { UserAuth } from "types";
+// fetch-keys
+import { PROJECT_MEMBERS } from "constants/fetch-keys";
 
 type Props = {
-  control: Control<IIssue, any>;
-  submitChanges: (formData: Partial<IIssue>) => void;
+  value: string[];
+  onChange: (val: string[]) => void;
   userAuth: UserAuth;
 };
 
-export const SidebarAssigneeSelect: React.FC<Props> = ({ control, submitChanges, userAuth }) => {
+export const SidebarAssigneeSelect: React.FC<Props> = ({ value, onChange, userAuth }) => {
   const router = useRouter();
-  const { workspaceSlug } = router.query;
+  const { workspaceSlug, projectId } = router.query;
 
-  const { data: people } = useSWR(
-    workspaceSlug ? WORKSPACE_MEMBERS(workspaceSlug as string) : null,
-    workspaceSlug ? () => workspaceService.workspaceMembers(workspaceSlug as string) : null
+  const { data: members } = useSWR(
+    workspaceSlug && projectId ? PROJECT_MEMBERS(projectId as string) : null,
+    workspaceSlug && projectId
+      ? () => projectService.projectMembers(workspaceSlug as string, projectId as string)
+      : null
   );
 
+  const options =
+    members?.map((member) => ({
+      value: member.member.id,
+      query:
+        (member.member.first_name && member.member.first_name !== ""
+          ? member.member.first_name
+          : member.member.email) +
+          " " +
+          member.member.last_name ?? "",
+      content: (
+        <div className="flex items-center gap-2">
+          <Avatar user={member.member} />
+          {member.member.first_name && member.member.first_name !== ""
+            ? member.member.first_name
+            : member.member.email}
+        </div>
+      ),
+    })) ?? [];
+
   const isNotAllowed = userAuth.isGuest || userAuth.isViewer;
 
   return (
@@ -45,93 +61,24 @@ export const SidebarAssigneeSelect: React.FC<Props> = ({ control, submitChanges,
         <p>Assignees</p>
       </div>
       <div className="sm:basis-1/2">
-        <Controller
-          control={control}
-          name="assignees_list"
-          render={({ field: { value } }) => (
-            <Listbox
-              as="div"
-              value={value}
-              multiple={true}
-              onChange={(value: any) => {
-                submitChanges({ assignees_list: value });
-              }}
-              className="flex-shrink-0"
-              disabled={isNotAllowed}
-            >
-              {({ open }) => (
-                <div className="relative">
-                  <Listbox.Button
-                    className={`flex w-full ${
-                      isNotAllowed ? "cursor-not-allowed" : "cursor-pointer"
-                    } items-center gap-1 text-xs`}
-                  >
-                    <div className="flex items-center gap-1 text-xs">
-                      {value && Array.isArray(value) ? (
-                        <AssigneesList userIds={value} length={10} />
-                      ) : null}
-                    </div>
-                  </Listbox.Button>
-
-                  <Transition
-                    show={open}
-                    as={React.Fragment}
-                    enter="transition ease-out duration-100"
-                    enterFrom="transform opacity-0 scale-95"
-                    enterTo="transform opacity-100 scale-100"
-                    leave="transition ease-in duration-75"
-                    leaveFrom="transform opacity-100 scale-100"
-                    leaveTo="transform opacity-0 scale-95"
-                  >
-                    <Listbox.Options className="absolute left-0 z-10 mt-1 max-h-48 w-full 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">
-                        {people ? (
-                          people.length > 0 ? (
-                            people.map((option) => (
-                              <Listbox.Option
-                                key={option.member.id}
-                                className={({ active, selected }) =>
-                                  `${active || selected ? "bg-indigo-50" : ""} ${
-                                    selected ? "font-medium" : ""
-                                  } flex cursor-pointer select-none items-center gap-2 truncate p-2 text-gray-900`
-                                }
-                                value={option.member.id}
-                              >
-                                {option.member.avatar && option.member.avatar !== "" ? (
-                                  <div className="relative h-4 w-4">
-                                    <Image
-                                      src={option.member.avatar}
-                                      alt="avatar"
-                                      className="rounded-full"
-                                      layout="fill"
-                                      objectFit="cover"
-                                    />
-                                  </div>
-                                ) : (
-                                  <div className="grid h-4 w-4 flex-shrink-0 place-items-center rounded-full bg-gray-700 capitalize text-white">
-                                    {option.member.first_name && option.member.first_name !== ""
-                                      ? option.member.first_name.charAt(0)
-                                      : option.member.email.charAt(0)}
-                                  </div>
-                                )}
-                                {option.member.first_name && option.member.first_name !== ""
-                                  ? option.member.first_name
-                                  : option.member.email}
-                              </Listbox.Option>
-                            ))
-                          ) : (
-                            <div className="text-center">No assignees found</div>
-                          )
-                        ) : (
-                          <Spinner />
-                        )}
-                      </div>
-                    </Listbox.Options>
-                  </Transition>
+        <CustomSearchSelect
+          value={value}
+          label={
+            <div className="flex items-center gap-2 text-gray-500">
+              {value && value.length > 0 && Array.isArray(value) ? (
+                <div className="flex items-center justify-center gap-2">
+                  <AssigneesList userIds={value} length={3} showLength={false} />
+                  <span className="text-gray-500">{value.length} Assignees</span>
                 </div>
+              ) : (
+                "No assignees"
               )}
-            </Listbox>
-          )}
+            </div>
+          }
+          options={options}
+          onChange={onChange}
+          multiple
+          disabled={isNotAllowed}
         />
       </div>
     </div>
diff --git a/apps/app/components/issues/sidebar-select/cycle.tsx b/apps/app/components/issues/sidebar-select/cycle.tsx
index 127c78eba..2d1251454 100644
--- a/apps/app/components/issues/sidebar-select/cycle.tsx
+++ b/apps/app/components/issues/sidebar-select/cycle.tsx
@@ -65,26 +65,21 @@ export const SidebarCycleSelect: React.FC<Props> = ({
       <div className="space-y-1 sm:basis-1/2">
         <CustomSelect
           label={
-            <Tooltip
-              position="top-right"
-              tooltipHeading="Cycle"
-              tooltipContent={issueCycle ? issueCycle.cycle_detail.name : "None"}
+            <span
+              className={`w-full max-w-[125px] truncate text-left sm:block ${
+                issueCycle ? "" : "text-gray-900"
+              }`}
             >
-              <span
-                className={` w-full max-w-[125px] truncate text-left sm:block ${
-                  issueCycle ? "" : "text-gray-900"
-                }`}
-              >
-                {issueCycle ? issueCycle.cycle_detail.name : "None"}
-              </span>
-            </Tooltip>
+              {issueCycle ? issueCycle.cycle_detail.name : "None"}
+            </span>
           }
           value={issueCycle?.cycle_detail.id}
           onChange={(value: any) => {
-            value === null
+            !value
               ? removeIssueFromCycle(issueCycle?.id ?? "", issueCycle?.cycle ?? "")
               : handleCycleChange(cycles?.find((c) => c.id === value) as ICycle);
           }}
+          width="w-full"
           disabled={isNotAllowed}
         >
           {cycles ? (
@@ -97,11 +92,7 @@ export const SidebarCycleSelect: React.FC<Props> = ({
                     </Tooltip>
                   </CustomSelect.Option>
                 ))}
-                <CustomSelect.Option value={null} className="capitalize">
-                  <Tooltip position="left-bottom" tooltipContent="None">
-                    <span className="w-full max-w-[125px] truncate">None</span>
-                  </Tooltip>
-                </CustomSelect.Option>
+                <CustomSelect.Option value={null}>None</CustomSelect.Option>
               </>
             ) : (
               <div className="text-center">No cycles found</div>
diff --git a/apps/app/components/issues/sidebar-select/module.tsx b/apps/app/components/issues/sidebar-select/module.tsx
index 90661a0df..977ae7649 100644
--- a/apps/app/components/issues/sidebar-select/module.tsx
+++ b/apps/app/components/issues/sidebar-select/module.tsx
@@ -64,26 +64,21 @@ export const SidebarModuleSelect: React.FC<Props> = ({
       <div className="space-y-1 sm:basis-1/2">
         <CustomSelect
           label={
-            <Tooltip
-              position="top-right"
-              tooltipHeading="Module"
-              tooltipContent={modules?.find((m) => m.id === issueModule?.module)?.name ?? "None"}
+            <span
+              className={`w-full max-w-[125px] truncate text-left sm:block ${
+                issueModule ? "" : "text-gray-900"
+              }`}
             >
-              <span
-                className={`w-full max-w-[125px] truncate text-left sm:block ${
-                  issueModule ? "" : "text-gray-900"
-                }`}
-              >
-                {modules?.find((m) => m.id === issueModule?.module)?.name ?? "None"}
-              </span>
-            </Tooltip>
+              {modules?.find((m) => m.id === issueModule?.module)?.name ?? "None"}
+            </span>
           }
           value={issueModule?.module_detail?.id}
           onChange={(value: any) => {
-            value === null
+            !value
               ? removeIssueFromModule(issueModule?.id ?? "", issueModule?.module ?? "")
               : handleModuleChange(modules?.find((m) => m.id === value) as IModule);
           }}
+          width="w-full"
           disabled={isNotAllowed}
         >
           {modules ? (
@@ -96,11 +91,7 @@ export const SidebarModuleSelect: React.FC<Props> = ({
                     </Tooltip>
                   </CustomSelect.Option>
                 ))}
-                <CustomSelect.Option value={null} className="capitalize">
-                  <Tooltip position="left-bottom" tooltipContent="None">
-                    <span className="w-full max-w-[125px] truncate"> None </span>
-                  </Tooltip>
-                </CustomSelect.Option>
+                <CustomSelect.Option value={null}>None</CustomSelect.Option>
               </>
             ) : (
               <div className="text-center">No modules found</div>
diff --git a/apps/app/components/issues/sidebar-select/priority.tsx b/apps/app/components/issues/sidebar-select/priority.tsx
index 7583f16f4..b3464a106 100644
--- a/apps/app/components/issues/sidebar-select/priority.tsx
+++ b/apps/app/components/issues/sidebar-select/priority.tsx
@@ -1,24 +1,22 @@
 import React from "react";
 
-// react-hook-form
-import { Control, Controller } from "react-hook-form";
 // ui
 import { CustomSelect } from "components/ui";
 // icons
 import { ChartBarIcon } from "@heroicons/react/24/outline";
 import { getPriorityIcon } from "components/icons/priority-icon";
 // types
-import { IIssue, UserAuth } from "types";
+import { UserAuth } from "types";
 // constants
 import { PRIORITIES } from "constants/project";
 
 type Props = {
-  control: Control<IIssue, any>;
-  submitChanges: (formData: Partial<IIssue>) => void;
+  value: string | null;
+  onChange: (val: string) => void;
   userAuth: UserAuth;
 };
 
-export const SidebarPrioritySelect: React.FC<Props> = ({ control, submitChanges, userAuth }) => {
+export const SidebarPrioritySelect: React.FC<Props> = ({ value, onChange, userAuth }) => {
   const isNotAllowed = userAuth.isGuest || userAuth.isViewer;
 
   return (
@@ -28,38 +26,31 @@ export const SidebarPrioritySelect: React.FC<Props> = ({ control, submitChanges,
         <p>Priority</p>
       </div>
       <div className="sm:basis-1/2">
-        <Controller
-          control={control}
-          name="priority"
-          render={({ field: { value } }) => (
-            <CustomSelect
-              label={
-                <span
-                  className={`flex items-center gap-2 text-left capitalize ${
-                    value ? "" : "text-gray-900"
-                  }`}
-                >
-                  {getPriorityIcon(value && value !== "" ? value ?? "" : "None", "text-sm")}
-                  {value && value !== "" ? value : "None"}
-                </span>
-              }
-              value={value}
-              onChange={(value: any) => {
-                submitChanges({ priority: value });
-              }}
-              disabled={isNotAllowed}
+        <CustomSelect
+          label={
+            <span
+              className={`flex items-center gap-2 text-left capitalize ${
+                value ? "" : "text-gray-900"
+              }`}
             >
-              {PRIORITIES.map((option) => (
-                <CustomSelect.Option key={option} value={option} className="capitalize">
-                  <>
-                    {getPriorityIcon(option, "text-sm")}
-                    {option ?? "None"}
-                  </>
-                </CustomSelect.Option>
-              ))}
-            </CustomSelect>
-          )}
-        />
+              {getPriorityIcon(value && value !== "" ? value ?? "" : "None", "text-sm")}
+              {value && value !== "" ? value : "None"}
+            </span>
+          }
+          value={value}
+          onChange={onChange}
+          width="w-full"
+          disabled={isNotAllowed}
+        >
+          {PRIORITIES.map((option) => (
+            <CustomSelect.Option key={option} value={option} className="capitalize">
+              <>
+                {getPriorityIcon(option, "text-sm")}
+                {option ?? "None"}
+              </>
+            </CustomSelect.Option>
+          ))}
+        </CustomSelect>
       </div>
     </div>
   );
diff --git a/apps/app/components/issues/sidebar-select/state.tsx b/apps/app/components/issues/sidebar-select/state.tsx
index 0ed3a04bb..13ecd3c62 100644
--- a/apps/app/components/issues/sidebar-select/state.tsx
+++ b/apps/app/components/issues/sidebar-select/state.tsx
@@ -4,28 +4,28 @@ import { useRouter } from "next/router";
 
 import useSWR from "swr";
 
-// react-hook-form
-import { Control, Controller } from "react-hook-form";
 // services
 import stateService from "services/state.service";
 // ui
 import { Spinner, CustomSelect } from "components/ui";
 // icons
 import { Squares2X2Icon } from "@heroicons/react/24/outline";
+import { getStateGroupIcon } from "components/icons";
 // helpers
 import { getStatesList } from "helpers/state.helper";
+import { addSpaceIfCamelCase } from "helpers/string.helper";
 // types
-import { IIssue, UserAuth } from "types";
+import { UserAuth } from "types";
 // constants
 import { STATE_LIST } from "constants/fetch-keys";
 
 type Props = {
-  control: Control<IIssue, any>;
-  submitChanges: (formData: Partial<IIssue>) => void;
+  value: string;
+  onChange: (val: string) => void;
   userAuth: UserAuth;
 };
 
-export const SidebarStateSelect: React.FC<Props> = ({ control, submitChanges, userAuth }) => {
+export const SidebarStateSelect: React.FC<Props> = ({ value, onChange, userAuth }) => {
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
 
@@ -37,6 +37,8 @@ export const SidebarStateSelect: React.FC<Props> = ({ control, submitChanges, us
   );
   const states = getStatesList(stateGroups ?? {});
 
+  const selectedState = states?.find((s) => s.id === value);
+
   const isNotAllowed = userAuth.isGuest || userAuth.isViewer;
 
   return (
@@ -46,60 +48,40 @@ export const SidebarStateSelect: React.FC<Props> = ({ control, submitChanges, us
         <p>State</p>
       </div>
       <div className="sm:basis-1/2">
-        <Controller
-          control={control}
-          name="state"
-          render={({ field: { value } }) => (
-            <CustomSelect
-              label={
-                <span
-                  className={`flex items-center gap-2 text-left ${value ? "" : "text-gray-900"}`}
-                >
-                  {value ? (
-                    <>
-                      <span
-                        className="h-2 w-2 flex-shrink-0 rounded-full"
-                        style={{
-                          backgroundColor: states?.find((option) => option.id === value)?.color,
-                        }}
-                      />
-                      {states?.find((option) => option.id === value)?.name}
-                    </>
-                  ) : (
-                    "None"
-                  )}
-                </span>
-              }
-              value={value}
-              onChange={(value: any) => {
-                submitChanges({ state: value });
-              }}
-              disabled={isNotAllowed}
-            >
-              {states ? (
-                states.length > 0 ? (
-                  states.map((option) => (
-                    <CustomSelect.Option key={option.id} value={option.id}>
-                      <>
-                        {option.color && (
-                          <span
-                            className="h-2 w-2 flex-shrink-0 rounded-full"
-                            style={{ backgroundColor: option.color }}
-                          />
-                        )}
-                        {option.name}
-                      </>
-                    </CustomSelect.Option>
-                  ))
-                ) : (
-                  <div className="text-center">No states found</div>
-                )
-              ) : (
-                <Spinner />
+        <CustomSelect
+          label={
+            <div className={`flex items-center gap-2 text-left ${value ? "" : "text-gray-900"}`}>
+              {getStateGroupIcon(
+                selectedState?.group ?? "backlog",
+                "16",
+                "16",
+                selectedState?.color ?? ""
               )}
-            </CustomSelect>
+              {addSpaceIfCamelCase(selectedState?.name ?? "")}
+            </div>
+          }
+          value={value}
+          onChange={onChange}
+          width="w-full"
+          disabled={isNotAllowed}
+        >
+          {states ? (
+            states.length > 0 ? (
+              states.map((state) => (
+                <CustomSelect.Option key={state.id} value={state.id}>
+                  <>
+                    {getStateGroupIcon(state.group, "16", "16", state.color)}
+                    {state.name}
+                  </>
+                </CustomSelect.Option>
+              ))
+            ) : (
+              <div className="text-center">No states found</div>
+            )
+          ) : (
+            <Spinner />
           )}
-        />
+        </CustomSelect>
       </div>
     </div>
   );
diff --git a/apps/app/components/issues/sidebar.tsx b/apps/app/components/issues/sidebar.tsx
index 9158b7738..5632dc015 100644
--- a/apps/app/components/issues/sidebar.tsx
+++ b/apps/app/components/issues/sidebar.tsx
@@ -243,20 +243,38 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
         </div>
         <div className="divide-y-2 divide-gray-100">
           <div className="py-1">
-            <SidebarStateSelect
+            <Controller
               control={control}
-              submitChanges={submitChanges}
-              userAuth={userAuth}
+              name="state"
+              render={({ field: { value } }) => (
+                <SidebarStateSelect
+                  value={value}
+                  onChange={(val: string) => submitChanges({ state: val })}
+                  userAuth={userAuth}
+                />
+              )}
             />
-            <SidebarAssigneeSelect
+            <Controller
               control={control}
-              submitChanges={submitChanges}
-              userAuth={userAuth}
+              name="assignees_list"
+              render={({ field: { value } }) => (
+                <SidebarAssigneeSelect
+                  value={value}
+                  onChange={(val: string[]) => submitChanges({ assignees_list: val })}
+                  userAuth={userAuth}
+                />
+              )}
             />
-            <SidebarPrioritySelect
+            <Controller
               control={control}
-              submitChanges={submitChanges}
-              userAuth={userAuth}
+              name="priority"
+              render={({ field: { value } }) => (
+                <SidebarPrioritySelect
+                  value={value}
+                  onChange={(val: string) => submitChanges({ priority: val })}
+                  userAuth={userAuth}
+                />
+              )}
             />
           </div>
           <div className="py-1">
diff --git a/apps/app/components/issues/view-select/assignee.tsx b/apps/app/components/issues/view-select/assignee.tsx
index 2ab96ab08..6e9c900fd 100644
--- a/apps/app/components/issues/view-select/assignee.tsx
+++ b/apps/app/components/issues/view-select/assignee.tsx
@@ -4,17 +4,16 @@ import { useRouter } from "next/router";
 
 import useSWR from "swr";
 
-// headless ui
-import { Listbox, Transition } from "@headlessui/react";
 // services
 import projectService from "services/project.service";
 // ui
 import { AssigneesList, Avatar, CustomSearchSelect, Tooltip } from "components/ui";
+// icons
+import { UserGroupIcon } from "@heroicons/react/24/outline";
 // types
 import { IIssue } from "types";
 // fetch-keys
 import { PROJECT_MEMBERS } from "constants/fetch-keys";
-import { UserGroupIcon } from "@heroicons/react/24/outline";
 
 type Props = {
   issue: IIssue;
@@ -112,78 +111,5 @@ export const ViewAssigneeSelect: React.FC<Props> = ({
       position={position}
       disabled={isNotAllowed}
     />
-    // <Listbox
-    //   as="div"
-    //   value={issue.assignees}
-    //   onChange={(data: any) => {
-    //     const newData = issue.assignees ?? [];
-
-    //     if (newData.includes(data)) newData.splice(newData.indexOf(data), 1);
-    //     else newData.push(data);
-
-    //     partialUpdateIssue({ assignees_list: newData });
-    //   }}
-    //   className={`group ${!selfPositioned ? "relative" : ""} flex-shrink-0`}
-    //   disabled={isNotAllowed}
-    // >
-    //   {({ open }) => (
-    //     <div>
-    //       <Listbox.Button>
-    //         <Tooltip
-    //           position={`top-${tooltipPosition}`}
-    //           tooltipHeading="Assignees"
-    //           tooltipContent={
-    //             issue.assignee_details.length > 0
-    //               ? issue.assignee_details
-    //                   .map((assignee) =>
-    //                     assignee?.first_name !== "" ? assignee?.first_name : assignee?.email
-    //                   )
-    //                   .join(", ")
-    //               : "No Assignee"
-    //           }
-    //         >
-    //           <div
-    //             className={`flex ${
-    //               isNotAllowed ? "cursor-not-allowed" : "cursor-pointer"
-    //             } items-center gap-1 text-xs`}
-    //           >
-    //             <AssigneesList userIds={issue.assignees ?? []} />
-    //           </div>
-    //         </Tooltip>
-    //       </Listbox.Button>
-
-    //       <Transition
-    //         show={open}
-    //         as={React.Fragment}
-    //         leave="transition ease-in duration-100"
-    //         leaveFrom="opacity-100"
-    //         leaveTo="opacity-0"
-    //       >
-    //         <Listbox.Options className="absolute right-0 z-10 mt-1 max-h-48 min-w-full overflow-auto rounded-md bg-white py-1 text-xs shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
-    //           {members?.map((member) => (
-    //             <Listbox.Option
-    //               key={member.member.id}
-    //               className={({ active, selected }) =>
-    //                 `flex cursor-pointer select-none items-center gap-x-1 whitespace-nowrap p-2 ${
-    //                   active ? "bg-indigo-50" : ""
-    //                 } ${
-    //                   selected || issue.assignees?.includes(member.member.id)
-    //                     ? "bg-indigo-50 font-medium"
-    //                     : "font-normal"
-    //                 }`
-    //               }
-    //               value={member.member.id}
-    //             >
-    //               <Avatar user={member.member} />
-    //               {member.member.first_name && member.member.first_name !== ""
-    //                 ? member.member.first_name
-    //                 : member.member.email}
-    //             </Listbox.Option>
-    //           ))}
-    //         </Listbox.Options>
-    //       </Transition>
-    //     </div>
-    //   )}
-    // </Listbox>
   );
 };
diff --git a/apps/app/components/issues/view-select/state.tsx b/apps/app/components/issues/view-select/state.tsx
index b7e10847c..b76a3c237 100644
--- a/apps/app/components/issues/view-select/state.tsx
+++ b/apps/app/components/issues/view-select/state.tsx
@@ -5,7 +5,9 @@ import useSWR from "swr";
 // services
 import stateService from "services/state.service";
 // ui
-import { CustomSelect, Tooltip } from "components/ui";
+import { CustomSearchSelect, Tooltip } from "components/ui";
+// icons
+import { getStateGroupIcon } from "components/icons";
 // helpers
 import { addSpaceIfCamelCase } from "helpers/string.helper";
 import { getStatesList } from "helpers/state.helper";
@@ -13,7 +15,6 @@ import { getStatesList } from "helpers/state.helper";
 import { IIssue } from "types";
 // fetch-keys
 import { STATE_LIST } from "constants/fetch-keys";
-import { getStateGroupIcon } from "components/icons";
 
 type Props = {
   issue: IIssue;
@@ -41,42 +42,39 @@ export const ViewStateSelect: React.FC<Props> = ({
   );
   const states = getStatesList(stateGroups ?? {});
 
-  const currentState = states?.find((s) => s.id === issue.state);
+  const options = states?.map((state) => ({
+    value: state.id,
+    query: state.name,
+    content: (
+      <div className="flex items-center gap-2">
+        {getStateGroupIcon(state.group, "16", "16", state.color)}
+        {state.name}
+      </div>
+    ),
+  }));
+
+  const selectedOption = states?.find((s) => s.id === issue.state);
 
   return (
-    <CustomSelect
-      label={
-        <>
-          {getStateGroupIcon(
-            currentState?.group ?? "backlog",
-            "16",
-            "16",
-            currentState?.color ?? ""
-          )}
-          <Tooltip
-            tooltipHeading="State"
-            tooltipContent={addSpaceIfCamelCase(currentState?.name ?? "")}
-          >
-            <span>{addSpaceIfCamelCase(currentState?.name ?? "")}</span>
-          </Tooltip>
-        </>
-      }
+    <CustomSearchSelect
       value={issue.state}
       onChange={(data: string) => partialUpdateIssue({ state: data })}
-      maxHeight="md"
-      noChevron
-      disabled={isNotAllowed}
+      options={options}
+      label={
+        <Tooltip
+          tooltipHeading="State"
+          tooltipContent={addSpaceIfCamelCase(selectedOption?.name ?? "")}
+        >
+          <div className="flex items-center gap-2 text-gray-500">
+            {selectedOption &&
+              getStateGroupIcon(selectedOption.group, "16", "16", selectedOption.color)}
+            {selectedOption?.name ?? "State"}
+          </div>
+        </Tooltip>
+      }
       position={position}
-      selfPositioned={selfPositioned}
-    >
-      {states?.map((state) => (
-        <CustomSelect.Option key={state.id} value={state.id}>
-          <>
-            {getStateGroupIcon(state.group, "16", "16", state.color)}
-            {addSpaceIfCamelCase(state.name)}
-          </>
-        </CustomSelect.Option>
-      ))}
-    </CustomSelect>
+      disabled={isNotAllowed}
+      noChevron
+    />
   );
 };
diff --git a/apps/app/components/modules/sidebar-select/select-lead.tsx b/apps/app/components/modules/sidebar-select/select-lead.tsx
index 84f230692..a04354442 100644
--- a/apps/app/components/modules/sidebar-select/select-lead.tsx
+++ b/apps/app/components/modules/sidebar-select/select-lead.tsx
@@ -5,35 +5,53 @@ import { useRouter } from "next/router";
 
 import useSWR from "swr";
 
-// react-hook-form
-import { Control, Controller } from "react-hook-form";
-// headless ui
-import { Listbox, Transition } from "@headlessui/react";
 // services
-import workspaceService from "services/workspace.service";
+import projectService from "services/project.service";
+// ui
+import { Avatar, CustomSearchSelect } from "components/ui";
 // icons
 import { UserIcon } from "@heroicons/react/24/outline";
 import User from "public/user.png";
-// types
-import { IModule, IUserLite } from "types";
 // fetch-keys
-import { WORKSPACE_MEMBERS } from "constants/fetch-keys";
+import { PROJECT_MEMBERS } from "constants/fetch-keys";
 
 type Props = {
-  control: Control<Partial<IModule>, any>;
-  submitChanges: (formData: Partial<IModule>) => void;
-  lead: IUserLite | null;
+  value: string | null | undefined;
+  onChange: (val: string) => void;
 };
 
-export const SidebarLeadSelect: React.FC<Props> = ({ control, submitChanges, lead }) => {
+export const SidebarLeadSelect: React.FC<Props> = ({ value, onChange }) => {
   const router = useRouter();
-  const { workspaceSlug } = router.query;
+  const { workspaceSlug, projectId } = router.query;
 
-  const { data: people } = useSWR(
-    workspaceSlug ? WORKSPACE_MEMBERS(workspaceSlug as string) : null,
-    workspaceSlug ? () => workspaceService.workspaceMembers(workspaceSlug as string) : null
+  const { data: members } = useSWR(
+    workspaceSlug && projectId ? PROJECT_MEMBERS(projectId as string) : null,
+    workspaceSlug && projectId
+      ? () => projectService.projectMembers(workspaceSlug as string, projectId as string)
+      : null
   );
 
+  const options =
+    members?.map((member) => ({
+      value: member.member.id,
+      query:
+        (member.member.first_name && member.member.first_name !== ""
+          ? member.member.first_name
+          : member.member.email) +
+          " " +
+          member.member.last_name ?? "",
+      content: (
+        <div className="flex items-center gap-2">
+          <Avatar user={member.member} />
+          {member.member.first_name && member.member.first_name !== ""
+            ? member.member.first_name
+            : member.member.email}
+        </div>
+      ),
+    })) ?? [];
+
+  const selectedOption = members?.find((m) => m.member.id === value)?.member;
+
   return (
     <div className="flex flex-wrap items-center py-2">
       <div className="flex items-center gap-x-2 text-sm sm:basis-1/2">
@@ -41,124 +59,32 @@ export const SidebarLeadSelect: React.FC<Props> = ({ control, submitChanges, lea
         <p>Lead</p>
       </div>
       <div className="sm:basis-1/2">
-        <Controller
-          control={control}
-          name="lead"
-          render={({ field: { value } }) => (
-            <Listbox
-              as="div"
-              value={value}
-              onChange={(value: any) => {
-                submitChanges({ lead: value });
-              }}
-              className="flex-shrink-0"
-            >
-              {({ open }) => (
-                <div className="relative">
-                  <Listbox.Button className="flex w-full cursor-pointer items-center gap-1 text-xs">
-                    <span
-                      className={`hidden truncate text-left sm:block ${
-                        value ? "" : "text-gray-900"
-                      }`}
-                    >
-                      <div className="flex items-center gap-1 text-xs">
-                        {lead ? (
-                          lead.avatar && lead.avatar !== "" ? (
-                            <div className="h-5 w-5 rounded-full border-2 border-transparent">
-                              <Image
-                                src={lead.avatar}
-                                height="100%"
-                                width="100%"
-                                className="rounded-full"
-                                alt={lead?.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">
-                              {lead?.first_name && lead.first_name !== ""
-                                ? lead.first_name.charAt(0)
-                                : lead?.email.charAt(0)}
-                            </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>
-                        )}
-                        {lead
-                          ? lead?.first_name && lead.first_name !== ""
-                            ? lead?.first_name
-                            : lead?.email
-                          : "N/A"}
-                      </div>
-                    </span>
-                  </Listbox.Button>
-
-                  <Transition
-                    show={open}
-                    as={React.Fragment}
-                    enter="transition ease-out duration-100"
-                    enterFrom="transform opacity-0 scale-95"
-                    enterTo="transform opacity-100 scale-100"
-                    leave="transition ease-in duration-75"
-                    leaveFrom="transform opacity-100 scale-100"
-                    leaveTo="transform opacity-0 scale-95"
-                  >
-                    <Listbox.Options className="absolute right-0 z-10 mt-1 max-h-48 w-full 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">
-                        {people ? (
-                          people.length > 0 ? (
-                            people.map((option) => (
-                              <Listbox.Option
-                                key={option.member.id}
-                                className={({ active, selected }) =>
-                                  `${
-                                    active || selected ? "bg-indigo-50" : ""
-                                  } flex cursor-pointer select-none items-center gap-2 truncate p-2 text-gray-900`
-                                }
-                                value={option.member.id}
-                              >
-                                {option.member.avatar && option.member.avatar !== "" ? (
-                                  <div className="relative h-4 w-4">
-                                    <Image
-                                      src={option.member.avatar}
-                                      alt="avatar"
-                                      className="rounded-full"
-                                      layout="fill"
-                                      objectFit="cover"
-                                    />
-                                  </div>
-                                ) : (
-                                  <div className="grid h-4 w-4 flex-shrink-0 place-items-center rounded-full bg-gray-700 capitalize text-white">
-                                    {option.member.first_name && option.member.first_name !== ""
-                                      ? option.member.first_name.charAt(0)
-                                      : option.member.email.charAt(0)}
-                                  </div>
-                                )}
-                                {option.member.first_name && option.member.first_name !== ""
-                                  ? option.member.first_name
-                                  : option.member.email}
-                              </Listbox.Option>
-                            ))
-                          ) : (
-                            <div className="text-center">No members found</div>
-                          )
-                        ) : (
-                          <p className="text-xs text-gray-500 px-2">Loading...</p>
-                        )}
-                      </div>
-                    </Listbox.Options>
-                  </Transition>
+        <CustomSearchSelect
+          value={value}
+          label={
+            <div className="flex items-center gap-2 text-gray-500">
+              {selectedOption ? (
+                <Avatar user={selectedOption} />
+              ) : (
+                <div className="h-5 w-5 rounded-full border-2 border-transparent bg-white">
+                  <Image
+                    src={User}
+                    height="100%"
+                    width="100%"
+                    className="rounded-full"
+                    alt="No user"
+                  />
                 </div>
               )}
-            </Listbox>
-          )}
+              {selectedOption
+                ? selectedOption?.first_name && selectedOption.first_name !== ""
+                  ? selectedOption?.first_name
+                  : selectedOption?.email
+                : "N/A"}
+            </div>
+          }
+          options={options}
+          onChange={onChange}
         />
       </div>
     </div>
diff --git a/apps/app/components/modules/sidebar-select/select-members.tsx b/apps/app/components/modules/sidebar-select/select-members.tsx
index d99dee135..22efffa68 100644
--- a/apps/app/components/modules/sidebar-select/select-members.tsx
+++ b/apps/app/components/modules/sidebar-select/select-members.tsx
@@ -1,37 +1,53 @@
 import React from "react";
 
-import Image from "next/image";
 import { useRouter } from "next/router";
 
 import useSWR from "swr";
 
-import { Control, Controller } from "react-hook-form";
 // services
-import { Listbox, Transition } from "@headlessui/react";
-import { UserGroupIcon } from "@heroicons/react/24/outline";
-import workspaceService from "services/workspace.service";
-// headless ui
+import projectService from "services/project.service";
 // ui
-import { AssigneesList } from "components/ui";
-// types
-import { IModule } from "types";
-// constants
-import { WORKSPACE_MEMBERS } from "constants/fetch-keys";
+import { AssigneesList, Avatar, CustomSearchSelect } from "components/ui";
+// icons
+import { UserGroupIcon } from "@heroicons/react/24/outline";
+// fetch-keys
+import { PROJECT_MEMBERS } from "constants/fetch-keys";
 
 type Props = {
-  control: Control<Partial<IModule>, any>;
-  submitChanges: (formData: Partial<IModule>) => void;
+  value: string[] | undefined;
+  onChange: (val: string[]) => void;
 };
 
-export const SidebarMembersSelect: React.FC<Props> = ({ control, submitChanges }) => {
+export const SidebarMembersSelect: React.FC<Props> = ({ value, onChange }) => {
   const router = useRouter();
-  const { workspaceSlug } = router.query;
+  const { workspaceSlug, projectId } = router.query;
 
-  const { data: people } = useSWR(
-    workspaceSlug ? WORKSPACE_MEMBERS(workspaceSlug as string) : null,
-    workspaceSlug ? () => workspaceService.workspaceMembers(workspaceSlug as string) : null
+  const { data: members } = useSWR(
+    workspaceSlug && projectId ? PROJECT_MEMBERS(projectId as string) : null,
+    workspaceSlug && projectId
+      ? () => projectService.projectMembers(workspaceSlug as string, projectId as string)
+      : null
   );
 
+  const options =
+    members?.map((member) => ({
+      value: member.member.id,
+      query:
+        (member.member.first_name && member.member.first_name !== ""
+          ? member.member.first_name
+          : member.member.email) +
+          " " +
+          member.member.last_name ?? "",
+      content: (
+        <div className="flex items-center gap-2">
+          <Avatar user={member.member} />
+          {member.member.first_name && member.member.first_name !== ""
+            ? member.member.first_name
+            : member.member.email}
+        </div>
+      ),
+    })) ?? [];
+
   return (
     <div className="flex flex-wrap items-center py-2">
       <div className="flex items-center gap-x-2 text-sm sm:basis-1/2">
@@ -39,94 +55,23 @@ export const SidebarMembersSelect: React.FC<Props> = ({ control, submitChanges }
         <p>Members</p>
       </div>
       <div className="sm:basis-1/2">
-        <Controller
-          control={control}
-          name="members_list"
-          render={({ field: { value } }) => (
-            <Listbox
-              as="div"
-              value={value}
-              multiple={true}
-              onChange={(value: any) => {
-                submitChanges({ members_list: value });
-              }}
-              className="flex-shrink-0"
-            >
-              {({ open }) => (
-                <div className="relative">
-                  <Listbox.Button className="flex w-full cursor-pointer items-center gap-1 text-xs">
-                    <span
-                      className={`hidden truncate text-left sm:block ${
-                        value ? "" : "text-gray-900"
-                      }`}
-                    >
-                      <div className="flex cursor-pointer items-center gap-1 text-xs">
-                        {value && Array.isArray(value) ? (
-                          <AssigneesList userIds={value} length={10} />
-                        ) : null}
-                      </div>
-                    </span>
-                  </Listbox.Button>
-
-                  <Transition
-                    show={open}
-                    as={React.Fragment}
-                    enter="transition ease-out duration-100"
-                    enterFrom="transform opacity-0 scale-95"
-                    enterTo="transform opacity-100 scale-100"
-                    leave="transition ease-in duration-75"
-                    leaveFrom="transform opacity-100 scale-100"
-                    leaveTo="transform opacity-0 scale-95"
-                  >
-                    <Listbox.Options className="absolute left-0 z-10 mt-1 max-h-48 overflow-auto rounded-md bg-white py-1 text-xs shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none w-full">
-                      <div className="py-1">
-                        {people ? (
-                          people.length > 0 ? (
-                            people.map((option) => (
-                              <Listbox.Option
-                                key={option.member.id}
-                                className={({ active, selected }) =>
-                                  `${
-                                    active || selected ? "bg-indigo-50" : ""
-                                  } flex cursor-pointer select-none items-center gap-2 truncate p-2 text-gray-900`
-                                }
-                                value={option.member.id}
-                              >
-                                {option.member.avatar && option.member.avatar !== "" ? (
-                                  <div className="relative h-4 w-4">
-                                    <Image
-                                      src={option.member.avatar}
-                                      alt="avatar"
-                                      className="rounded-full"
-                                      layout="fill"
-                                      objectFit="cover"
-                                    />
-                                  </div>
-                                ) : (
-                                  <div className="grid h-4 w-4 flex-shrink-0 place-items-center rounded-full bg-gray-700 capitalize text-white">
-                                    {option.member.first_name && option.member.first_name !== ""
-                                      ? option.member.first_name.charAt(0)
-                                      : option.member.email.charAt(0)}
-                                  </div>
-                                )}
-                                {option.member.first_name && option.member.first_name !== ""
-                                  ? option.member.first_name
-                                  : option.member.email}
-                              </Listbox.Option>
-                            ))
-                          ) : (
-                            <div className="text-center">No members found</div>
-                          )
-                        ) : (
-                          <p className="text-xs text-gray-500 px-2">Loading...</p>
-                        )}
-                      </div>
-                    </Listbox.Options>
-                  </Transition>
+        <CustomSearchSelect
+          value={value}
+          label={
+            <div className="flex items-center gap-2 text-gray-500">
+              {value && value.length > 0 && Array.isArray(value) ? (
+                <div className="flex items-center justify-center gap-2">
+                  <AssigneesList userIds={value} length={3} showLength={false} />
+                  <span className="text-gray-500">{value.length} Assignees</span>
                 </div>
+              ) : (
+                "No members"
               )}
-            </Listbox>
-          )}
+            </div>
+          }
+          options={options}
+          onChange={onChange}
+          multiple
         />
       </div>
     </div>
diff --git a/apps/app/components/modules/sidebar.tsx b/apps/app/components/modules/sidebar.tsx
index 151526a50..edf211827 100644
--- a/apps/app/components/modules/sidebar.tsx
+++ b/apps/app/components/modules/sidebar.tsx
@@ -1,6 +1,5 @@
 import React, { useEffect, useState } from "react";
 
-import Link from "next/link";
 import { useRouter } from "next/router";
 
 import { mutate } from "swr";
@@ -19,7 +18,6 @@ import {
 
 import { Popover, Transition } from "@headlessui/react";
 import DatePicker from "react-datepicker";
-
 // services
 import modulesService from "services/modules.service";
 // hooks
@@ -184,7 +182,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({
       >
         {module ? (
           <>
-            <div className="flex gap-1 text-sm my-2">
+            <div className="my-2 flex gap-1 text-sm">
               <div className="flex items-center ">
                 <Controller
                   control={control}
@@ -193,7 +191,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({
                     <CustomSelect
                       label={
                         <span
-                          className={`flex items-center gap-1 text-left capitalize p-1 text-xs h-full w-full  text-gray-900`}
+                          className={`flex h-full w-full items-center gap-1 p-1 text-left text-xs capitalize  text-gray-900`}
                         >
                           <Squares2X2Icon className="h-4 w-4 flex-shrink-0" />
                           {watch("status")}
@@ -213,14 +211,14 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({
                   )}
                 />
               </div>
-              <div className="flex justify-center items-center gap-2 rounded-md border bg-transparent h-full  p-2 px-4  text-xs font-medium text-gray-900 hover:bg-gray-100 hover:text-gray-900 focus:outline-none">
-                <Popover className="flex justify-center items-center relative rounded-lg">
+              <div className="flex h-full items-center justify-center gap-2 rounded-md border bg-transparent  p-2 px-4  text-xs font-medium text-gray-900 hover:bg-gray-100 hover:text-gray-900 focus:outline-none">
+                <Popover className="relative flex items-center justify-center rounded-lg">
                   {({ open }) => (
                     <>
                       <Popover.Button
                         className={`group flex items-center  ${open ? "bg-gray-100" : ""}`}
                       >
-                        <CalendarDaysIcon className="h-4 w-4 flex-shrink-0 mr-2" />
+                        <CalendarDaysIcon className="mr-2 h-4 w-4 flex-shrink-0" />
                         <span>
                           {renderShortNumericDateFormat(`${module?.start_date}`)
                             ? renderShortNumericDateFormat(`${module?.start_date}`)
@@ -256,7 +254,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({
                     </>
                   )}
                 </Popover>
-                <Popover className="flex justify-center items-center relative  rounded-lg">
+                <Popover className="relative flex items-center justify-center  rounded-lg">
                   {({ open }) => (
                     <>
                       <Popover.Button
@@ -338,12 +336,30 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({
             </div>
             <div className="divide-y-2 divide-gray-100 text-xs">
               <div className="py-1">
-                <SidebarLeadSelect
+                <Controller
                   control={control}
-                  submitChanges={submitChanges}
-                  lead={module.lead_detail}
+                  name="lead"
+                  render={({ field: { value } }) => (
+                    <SidebarLeadSelect
+                      value={value}
+                      onChange={(val: string) => {
+                        submitChanges({ lead: val });
+                      }}
+                    />
+                  )}
+                />
+                <Controller
+                  control={control}
+                  name="members_list"
+                  render={({ field: { value } }) => (
+                    <SidebarMembersSelect
+                      value={value}
+                      onChange={(val: string[]) => {
+                        submitChanges({ members_list: val });
+                      }}
+                    />
+                  )}
                 />
-                <SidebarMembersSelect control={control} submitChanges={submitChanges} />
                 <div className="flex flex-wrap items-center py-2">
                   <div className="flex items-center gap-x-2 text-sm sm:basis-1/2">
                     <ChartPieIcon className="h-4 w-4 flex-shrink-0" />
@@ -363,7 +379,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({
                 </div>
               </div>
             </div>
-            <div className="flex flex-col items-center justify-center w-full gap-2">
+            <div className="flex w-full flex-col items-center justify-center gap-2">
               {isStartValid && isEndValid ? (
                 <ProgressChart
                   issues={issues}
diff --git a/apps/app/components/project/send-project-invitation-modal.tsx b/apps/app/components/project/send-project-invitation-modal.tsx
index f397324b0..e88fe1388 100644
--- a/apps/app/components/project/send-project-invitation-modal.tsx
+++ b/apps/app/components/project/send-project-invitation-modal.tsx
@@ -6,9 +6,8 @@ import useSWR, { mutate } from "swr";
 
 import { useForm, Controller } from "react-hook-form";
 
-import { Dialog, Transition, Listbox } from "@headlessui/react";
+import { Dialog, Transition } from "@headlessui/react";
 // ui
-import { ChevronDownIcon } from "@heroicons/react/20/solid";
 import { Button, CustomSelect, TextArea } from "components/ui";
 // hooks
 import useToast from "hooks/use-toast";
@@ -17,7 +16,7 @@ import projectService from "services/project.service";
 import workspaceService from "services/workspace.service";
 // types
 import { IProjectMemberInvitation } from "types";
-// fetch - keys
+// fetch-keys
 import { PROJECT_INVITATIONS, WORKSPACE_MEMBERS } from "constants/fetch-keys";
 // constants
 import { ROLE } from "constants/workspace";
@@ -130,7 +129,7 @@ const SendProjectInvitationModal: React.FC<Props> = ({ isOpen, setIsOpen, member
               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-5 py-8 text-left shadow-xl transition-all sm:w-full sm:max-w-2xl">
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-white p-5 text-left shadow-xl transition-all sm:w-full sm:max-w-2xl">
                 <form onSubmit={handleSubmit(onSubmit)}>
                   <div className="space-y-5">
                     <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-gray-900">
@@ -148,77 +147,36 @@ const SendProjectInvitationModal: React.FC<Props> = ({ isOpen, setIsOpen, member
                           name="user_id"
                           rules={{ required: "Please select a member" }}
                           render={({ field: { value, onChange } }) => (
-                            <Listbox
+                            <CustomSelect
                               value={value}
-                              onChange={(data: any) => {
-                                onChange(data.id);
-                                setValue("member_id", data.id);
-                                setValue("email", data.email);
-                              }}
-                            >
-                              {({ open }) => (
-                                <>
-                                  <Listbox.Label className="mb-2 text-gray-500">
-                                    Email
-                                  </Listbox.Label>
-                                  <div className="relative">
-                                    <Listbox.Button
-                                      className={`relative w-full cursor-default rounded-md border bg-white py-2 pl-3 pr-10 text-left shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 sm:text-sm ${
-                                        errors.user_id ? "border-red-500 bg-red-50" : ""
-                                      }`}
-                                    >
-                                      <span className="block truncate">
-                                        {value && value !== ""
-                                          ? people?.find((p) => p.member.id === value)?.member.email
-                                          : "Select email"}
-                                      </span>
-                                      <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
-                                        <ChevronDownIcon
-                                          className="h-5 w-5 text-gray-400"
-                                          aria-hidden="true"
-                                        />
-                                      </span>
-                                    </Listbox.Button>
+                              label={
+                                <div
+                                  className={`${errors.user_id ? "border-red-500 bg-red-50" : ""}`}
+                                >
+                                  {value && value !== ""
+                                    ? people?.find((p) => p.member.id === value)?.member.email
+                                    : "Select email"}
+                                </div>
+                              }
+                              onChange={(val: string) => {
+                                onChange(val);
+                                const person = uninvitedPeople?.find((p) => p.member.id === val);
 
-                                    <Transition
-                                      show={open}
-                                      as={React.Fragment}
-                                      leave="transition ease-in duration-100"
-                                      leaveFrom="opacity-100"
-                                      leaveTo="opacity-0"
-                                    >
-                                      <Listbox.Options className="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
-                                        {uninvitedPeople?.length === 0 ? (
-                                          <div className="relative cursor-default select-none py-2 pl-3 pr-9 text-left text-gray-600">
-                                            Invite to workspace to add members
-                                          </div>
-                                        ) : (
-                                          uninvitedPeople?.map((person) => (
-                                            <Listbox.Option
-                                              key={person.member.id}
-                                              className={({ active, selected }) =>
-                                                `${active ? "bg-indigo-50" : ""} ${
-                                                  selected ? "bg-indigo-50 font-medium" : ""
-                                                } cursor-default select-none p-2 text-gray-900`
-                                              }
-                                              value={{
-                                                id: person.member.id,
-                                                email: person.member.email,
-                                              }}
-                                            >
-                                              {person.member.email}
-                                            </Listbox.Option>
-                                          ))
-                                        )}
-                                      </Listbox.Options>
-                                    </Transition>
-                                  </div>
-                                  <p className="text-sm text-red-400">
-                                    {errors.user_id && errors.user_id.message}
-                                  </p>
-                                </>
-                              )}
-                            </Listbox>
+                                setValue("member_id", val);
+                                setValue("email", person?.member.email ?? "");
+                              }}
+                              input
+                              width="w-full"
+                            >
+                              {uninvitedPeople?.map((person) => (
+                                <CustomSelect.Option
+                                  key={person.member.id}
+                                  value={person.member.id}
+                                >
+                                  {person.member.email}
+                                </CustomSelect.Option>
+                              ))}
+                            </CustomSelect>
                           )}
                         />
                       </div>
@@ -236,6 +194,7 @@ const SendProjectInvitationModal: React.FC<Props> = ({ isOpen, setIsOpen, member
                                 </span>
                               }
                               input
+                              width="w-full"
                             >
                               {Object.entries(ROLE).map(([key, label]) => (
                                 <CustomSelect.Option key={key} value={key}>
diff --git a/apps/app/components/ui/avatar.tsx b/apps/app/components/ui/avatar.tsx
index 2b1c7b2cc..93ef49252 100644
--- a/apps/app/components/ui/avatar.tsx
+++ b/apps/app/components/ui/avatar.tsx
@@ -34,7 +34,7 @@ export const Avatar: React.FC<AvatarProps> = ({ user, index }) => (
         />
       </div>
     ) : (
-      <div className="grid h-5 w-5 place-items-center rounded-full border-2 border-white bg-gray-700 text-white capitalize">
+      <div className="grid h-5 w-5 place-items-center rounded-full border-2 border-white bg-gray-700 text-xs capitalize text-white">
         {user?.first_name && user.first_name !== ""
           ? user.first_name.charAt(0)
           : user?.email?.charAt(0)}
diff --git a/apps/app/components/ui/context-menu.tsx b/apps/app/components/ui/context-menu.tsx
index 70d1e1265..acef49779 100644
--- a/apps/app/components/ui/context-menu.tsx
+++ b/apps/app/components/ui/context-menu.tsx
@@ -20,20 +20,12 @@ const ContextMenu = ({ position, children, title, isOpen, setIsOpen }: Props) =>
     };
 
     window.addEventListener("click", hideContextMenu);
+    window.addEventListener("keydown", (e: KeyboardEvent) => {
+      if (e.key === "Escape") hideContextMenu();
+    });
 
     return () => {
       window.removeEventListener("click", hideContextMenu);
-    };
-  }, [isOpen, setIsOpen]);
-
-  useEffect(() => {
-    const hideContextMenu = (e: KeyboardEvent) => {
-      if (e.key === "Escape" && isOpen) setIsOpen(false);
-    };
-
-    window.addEventListener("keydown", hideContextMenu);
-
-    return () => {
       window.removeEventListener("keydown", hideContextMenu);
     };
   }, [isOpen, setIsOpen]);
diff --git a/apps/app/components/ui/custom-search-select.tsx b/apps/app/components/ui/custom-search-select.tsx
index 7356aa50d..a90ca973a 100644
--- a/apps/app/components/ui/custom-search-select.tsx
+++ b/apps/app/components/ui/custom-search-select.tsx
@@ -16,7 +16,6 @@ type CustomSearchSelectProps = {
   label?: string | JSX.Element;
   textAlignment?: "left" | "center" | "right";
   position?: "right" | "left";
-  input?: boolean;
   noChevron?: boolean;
   customButton?: JSX.Element;
   optionsClassName?: string;
@@ -33,7 +32,6 @@ export const CustomSearchSelect = ({
   onChange,
   options,
   position = "left",
-  input = false,
   noChevron = false,
   customButton,
   optionsClassName = "",
@@ -69,9 +67,7 @@ export const CustomSearchSelect = ({
                 <Combobox.Button
                   className={`flex w-full ${
                     disabled ? "cursor-not-allowed" : "cursor-pointer hover:bg-gray-100"
-                  } items-center justify-between gap-1 rounded-md border shadow-sm duration-300 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 ${
-                    input ? "border-gray-300 px-3 py-2 text-sm" : "px-3 py-1.5 text-xs"
-                  } ${
+                  } items-center justify-between gap-1 rounded-md border px-3 py-1.5 text-xs shadow-sm duration-300 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 ${
                     textAlignment === "right"
                       ? "text-right"
                       : textAlignment === "center"
@@ -99,9 +95,7 @@ export const CustomSearchSelect = ({
                 <Combobox.Options
                   className={`${optionsClassName} absolute min-w-[10rem] p-2 ${
                     position === "right" ? "right-0" : "left-0"
-                  } z-10 mt-1 origin-top-right overflow-y-auto rounded-md bg-white text-xs shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none  ${
-                    input ? "max-h-48" : ""
-                  }`}
+                  } z-10 mt-1 origin-top-right overflow-y-auto rounded-md bg-white text-xs shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none`}
                 >
                   <div className="flex w-full items-center justify-start rounded-sm border-[0.6px] bg-gray-100 px-2">
                     <MagnifyingGlassIcon className="h-3 w-3 text-gray-500" />
@@ -142,10 +136,10 @@ export const CustomSearchSelect = ({
                           </Combobox.Option>
                         ))
                       ) : (
-                        <p className="text-xs text-gray-500">No matching results</p>
+                        <p className="text-center text-gray-500">No matching results</p>
                       )
                     ) : (
-                      <p className="text-xs text-gray-500">Loading...</p>
+                      <p className="text-center text-gray-500">Loading...</p>
                     )}
                   </div>
                   {footerOption}
@@ -170,9 +164,7 @@ export const CustomSearchSelect = ({
                 <Combobox.Button
                   className={`flex w-full ${
                     disabled ? "cursor-not-allowed" : "cursor-pointer hover:bg-gray-100"
-                  } items-center justify-between gap-1 rounded-md border shadow-sm duration-300 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 ${
-                    input ? "border-gray-300 px-3 py-2 text-sm" : "px-3 py-1.5 text-xs"
-                  } ${
+                  } items-center justify-between gap-1 rounded-md border px-3 py-1.5 text-xs shadow-sm duration-300 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 ${
                     textAlignment === "right"
                       ? "text-right"
                       : textAlignment === "center"
@@ -200,20 +192,18 @@ export const CustomSearchSelect = ({
                 <Combobox.Options
                   className={`${optionsClassName} absolute min-w-[10rem] p-2 ${
                     position === "right" ? "right-0" : "left-0"
-                  } z-10 mt-1 origin-top-right overflow-y-auto rounded-md bg-white text-xs shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none  ${
-                    input ? "max-h-48" : ""
-                  }`}
+                  } z-10 mt-1 origin-top-right overflow-y-auto rounded-md bg-white text-xs shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none`}
                 >
                   <div className="flex w-full items-center justify-start rounded-sm border bg-gray-100 px-2 text-gray-500">
                     <MagnifyingGlassIcon className="h-3 w-3" />
                     <Combobox.Input
-                      className="w-full  bg-transparent py-1 px-2  text-xs focus:outline-none"
+                      className="w-full  bg-transparent py-1 px-2 text-xs focus:outline-none"
                       onChange={(e) => setQuery(e.target.value)}
                       placeholder="Type to search..."
                       displayValue={(assigned: any) => assigned?.name}
                     />
                   </div>
-                  <div className="mt-2">
+                  <div className="mt-2 space-y-1">
                     {filteredOptions ? (
                       filteredOptions.length > 0 ? (
                         filteredOptions.map((option) => (
@@ -235,10 +225,10 @@ export const CustomSearchSelect = ({
                           </Combobox.Option>
                         ))
                       ) : (
-                        <p className="text-gray-500">No matching results</p>
+                        <p className="text-center text-gray-500">No matching results</p>
                       )
                     ) : (
-                      <p className="text-gray-500">Loading...</p>
+                      <p className="text-center text-gray-500">Loading...</p>
                     )}
                   </div>
                   {footerOption}
diff --git a/apps/app/components/ui/datepicker.tsx b/apps/app/components/ui/datepicker.tsx
index 069543189..1e30ad97f 100644
--- a/apps/app/components/ui/datepicker.tsx
+++ b/apps/app/components/ui/datepicker.tsx
@@ -36,15 +36,15 @@ export const CustomDatePicker: React.FC<Props> = ({
     }}
     className={`${className} ${
       renderAs === "input"
-        ? "block bg-transparent text-sm focus:outline-none border-gray-300 px-3 py-2"
+        ? "block border-gray-300 bg-transparent px-3 py-2 text-sm focus:outline-none"
         : renderAs === "button"
-        ? `px-2 py-1 text-xs shadow-sm ${
+        ? `px-3 py-1.5 text-xs shadow-sm ${
             disabled ? "" : "hover:bg-gray-100"
-          } focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 duration-300`
+          } duration-300 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500`
         : ""
     } ${error ? "border-red-500 bg-red-100" : ""} ${
       disabled ? "cursor-not-allowed" : "cursor-pointer"
-    } w-full rounded-md bg-transparent border caret-transparent`}
+    } w-full rounded-md border bg-transparent caret-transparent`}
     dateFormat="dd-MM-yyyy"
     isClearable={isClearable}
     disabled={disabled}