fix: designing bugs fixed

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

@@ -23,7 +23,7 @@ import {
 // components
 import ShortcutsModal from "components/command-palette/shortcuts";
 import CreateProjectModal from "components/project/create-project-modal";
-import CreateUpdateIssuesModal from "components/project/issues/CreateUpdateIssueModal";
+import CreateUpdateIssuesModal from "components/project/issues/create-update-issue-modal";
 import CreateUpdateCycleModal from "components/project/cycles/create-update-cycle-modal";
 // ui
 import { Button } from "ui";
@@ -260,7 +260,7 @@ const CommandPalette: React.FC = () => {
                           <li className="p-2">
                             {query === "" && (
                               <h2 className="mt-4 mb-2 px-3 text-xs font-semibold text-gray-900">
-                                Issues
+                                Select issues
                               </h2>
                             )}
                             <ul className="text-sm text-gray-700">
@@ -376,9 +376,9 @@ const CommandPalette: React.FC = () => {
                     )}
                   </Combobox>
 
-                  <div className="flex justify-between items-center gap-2 p-3">
+                  <div className="flex justify-end items-center gap-2 p-3">
                     <Button onClick={handleSubmit(handleDelete)} theme="danger" size="sm">
-                      Delete selected
+                      Delete selected issues
                     </Button>
                     <div>
                       <Button type="button" size="sm" onClick={handleCommandPaletteClose}>

apps/app/components/project/cycles/board-view/single-board.tsx

@@ -5,40 +5,25 @@ import Link from "next/link";
 import Image from "next/image";
 // swr
 import useSWR from "swr";
-// services
-import cycleServices from "lib/services/cycles.service";
 // hooks
 import useUser from "lib/hooks/useUser";
 // ui
-import { Spinner } from "ui";
+import { CustomMenu } from "ui";
 // icons
-import {
+import { CalendarDaysIcon, PlusIcon } from "@heroicons/react/24/outline";
-  ArrowsPointingInIcon,
-  ArrowsPointingOutIcon,
-  CalendarDaysIcon,
-  PlusIcon,
-  EllipsisHorizontalIcon,
-  TrashIcon,
-} from "@heroicons/react/24/outline";
 import User from "public/user.png";
 // types
-import {
+import { IIssue, IWorkspaceMember, NestedKeyOf, Properties } from "types";
-  CycleIssueResponse,
-  ICycle,
-  IIssue,
-  IWorkspaceMember,
-  NestedKeyOf,
-  Properties,
-} from "types";
 // constants
-import { CYCLE_ISSUES, WORKSPACE_MEMBERS } from "constants/fetch-keys";
+import { WORKSPACE_MEMBERS } from "constants/fetch-keys";
 import {
   addSpaceIfCamelCase,
+  classNames,
   findHowManyDaysLeft,
   renderShortNumericDateFormat,
 } from "constants/common";
-import { Menu, Transition } from "@headlessui/react";
 import workspaceService from "lib/services/workspace.service";
+import { Menu, Transition } from "@headlessui/react";
 
 type Props = {
   properties: Properties;
@@ -123,48 +108,14 @@ const SingleCycleBoard: React.FC<Props> = ({
               </span>
             </div>
 
-            <Menu as="div" className="relative inline-block">
+            <CustomMenu width="auto" ellipsis>
-              <Menu.Button className="h-7 w-7 p-1 grid place-items-center rounded hover:bg-gray-200 duration-300 outline-none">
+              <CustomMenu.MenuItem onClick={() => openCreateIssueModal()}>
-                <EllipsisHorizontalIcon className="h-4 w-4" />
-              </Menu.Button>
-
-              <Transition
-                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"
-              >
-                <Menu.Items className="absolute right-0 mt-2 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none z-10 text-xs">
-                  <div className="py-1">
-                    <Menu.Item as="div">
-                      {(active) => (
-                        <button
-                          type="button"
-                          className="w-full text-left p-2 text-gray-900 hover:bg-indigo-50 whitespace-nowrap"
-                          onClick={() => openCreateIssueModal()}
-                        >
                 Create new
-                        </button>
+              </CustomMenu.MenuItem>
-                      )}
+              <CustomMenu.MenuItem onClick={() => openIssuesListModal()}>
-                    </Menu.Item>
-                    <Menu.Item as="div">
-                      {(active) => (
-                        <button
-                          type="button"
-                          className="w-full text-left p-2 text-gray-900 hover:bg-indigo-50 whitespace-nowrap"
-                          onClick={() => openIssuesListModal()}
-                        >
                 Add an existing issue
-                        </button>
+              </CustomMenu.MenuItem>
-                      )}
+            </CustomMenu>
-                    </Menu.Item>
-                  </div>
-                </Menu.Items>
-              </Transition>
-            </Menu>
           </div>
         </div>
         <div
@@ -355,13 +306,56 @@ const SingleCycleBoard: React.FC<Props> = ({
               </div>
             );
           })}
+
+          <Menu as="div" className="relative text-left">
+            <Menu.Button className="flex items-center gap-1 px-2 py-1 rounded hover:bg-gray-100 text-xs font-medium">
+              <PlusIcon className="h-3 w-3" />
+              Add issue
+            </Menu.Button>
+
+            <Transition
+              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"
+            >
+              <Menu.Items className="absolute left-0 z-10 mt-1 rounded-md bg-white text-xs shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none whitespace-nowrap">
+                <div className="py-1">
+                  <Menu.Item>
+                    {({ active }) => (
                       <button
                         type="button"
-            className="flex items-center text-xs font-medium hover:bg-gray-100 p-2 rounded duration-300 outline-none"
+                        className={classNames(
+                          active ? "bg-indigo-50 text-gray-900" : "text-gray-700",
+                          "block w-full p-2 text-left"
+                        )}
+                        onClick={() => openCreateIssueModal()}
                       >
-            <PlusIcon className="h-3 w-3 mr-1" />
+                        Create new
-            Create
                       </button>
+                    )}
+                  </Menu.Item>
+                  <Menu.Item>
+                    {({ active }) => (
+                      <button
+                        type="button"
+                        className={classNames(
+                          active ? "bg-indigo-50 text-gray-900" : "text-gray-700",
+                          "block w-full p-2 text-left"
+                        )}
+                        onClick={() => openIssuesListModal()}
+                      >
+                        Add an existing issue
+                      </button>
+                    )}
+                  </Menu.Item>
+                </div>
+              </Menu.Items>
+            </Transition>
+          </Menu>
         </div>
       </div>
     </div>

apps/app/components/project/cycles/create-update-cycle-modal.tsx

@@ -195,6 +195,9 @@ const CreateUpdateCycleModal: React.FC<Props> = ({ isOpen, setIsOpen, data, proj
                             placeholder="Enter start date"
                             error={errors.start_date}
                             register={register}
+                            validations={{
+                              required: "Start date is required",
+                            }}
                           />
                         </div>
                         <div className="w-full">
@@ -206,6 +209,9 @@ const CreateUpdateCycleModal: React.FC<Props> = ({ isOpen, setIsOpen, data, proj
                             placeholder="Enter end date"
                             error={errors.end_date}
                             register={register}
+                            validations={{
+                              required: "End date is required",
+                            }}
                           />
                         </div>
                       </div>

apps/app/components/project/cycles/cycle-issues-list-modal.tsx

@@ -17,6 +17,8 @@ import { MagnifyingGlassIcon, RectangleStackIcon } from "@heroicons/react/24/out
 import { IIssue, IssueResponse } from "types";
 // constants
 import { classNames } from "constants/common";
+import { mutate } from "swr";
+import { CYCLE_ISSUES } from "constants/fetch-keys";
 
 type Props = {
   isOpen: boolean;
@@ -73,6 +75,7 @@ const CycleIssuesListModal: React.FC<Props> = ({
         .bulkAddIssuesToCycle(activeWorkspace.slug, activeProject.id, cycleId, data)
         .then((res) => {
           console.log(res);
+          mutate(CYCLE_ISSUES(cycleId));
           handleClose();
         })
         .catch((e) => {

apps/app/components/project/cycles/list-view/index.tsx

@@ -6,22 +6,21 @@ import Link from "next/link";
 import useSWR from "swr";
 // headless ui
 import { Disclosure, Transition, Menu } from "@headlessui/react";
-// services
-import cycleServices from "lib/services/cycles.service";
 // hooks
 import useUser from "lib/hooks/useUser";
 // ui
 import { CustomMenu, Spinner } from "ui";
 // icons
-import { PlusIcon, EllipsisHorizontalIcon, ChevronDownIcon } from "@heroicons/react/20/solid";
+import { PlusIcon, ChevronDownIcon } from "@heroicons/react/20/solid";
 import { CalendarDaysIcon } from "@heroicons/react/24/outline";
 // types
-import { IIssue, IWorkspaceMember, NestedKeyOf, Properties, SelectSprintType } from "types";
+import { IIssue, IWorkspaceMember, NestedKeyOf, Properties } from "types";
 // fetch keys
-import { CYCLE_ISSUES, WORKSPACE_MEMBERS } from "constants/fetch-keys";
+import { WORKSPACE_MEMBERS } from "constants/fetch-keys";
 // constants
 import {
   addSpaceIfCamelCase,
+  classNames,
   findHowManyDaysLeft,
   renderShortNumericDateFormat,
 } from "constants/common";
@@ -34,7 +33,7 @@ type Props = {
   properties: Properties;
   selectedGroup: NestedKeyOf<IIssue> | null;
   openCreateIssueModal: (issue?: IIssue, actionType?: "create" | "edit" | "delete") => void;
-  openIssuesListModal: (cycleId: string) => void;
+  openIssuesListModal: () => void;
   removeIssueFromCycle: (bridgeId: string) => void;
 };
 
@@ -269,51 +268,60 @@ const CyclesListView: React.FC<Props> = ({
                   </div>
                 </Disclosure.Panel>
               </Transition>
-              <div className="p-3">
+              <Menu as="div" className="relative text-left p-3">
-                <button
+                <Menu.Button className="flex items-center gap-1 px-2 py-1 rounded hover:bg-gray-100 text-xs font-medium">
-                  type="button"
-                  className="flex items-center gap-1 px-2 py-1 rounded hover:bg-gray-100 text-xs font-medium"
-                  // onClick={() => {
-                  //   setIsCreateIssuesModalOpen(true);
-                  //   if (selectedGroup !== null) {
-                  //     const stateId =
-                  //       selectedGroup === "state_detail.name"
-                  //         ? states?.find((s) => s.name === singleGroup)?.id ?? null
-                  //         : null;
-                  //     setPreloadedData({
-                  //       state: stateId !== null ? stateId : undefined,
-                  //       [selectedGroup]: singleGroup,
-                  //       actionType: "createIssue",
-                  //     });
-                  //   }
-                  // }}
-                >
                   <PlusIcon className="h-3 w-3" />
                   Add issue
+                </Menu.Button>
+
+                <Transition
+                  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"
+                >
+                  <Menu.Items className="absolute left-0 z-10 mt-1 rounded-md bg-white text-xs shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none whitespace-nowrap">
+                    <div className="py-1">
+                      <Menu.Item>
+                        {({ active }) => (
+                          <button
+                            type="button"
+                            className={classNames(
+                              active ? "bg-indigo-50 text-gray-900" : "text-gray-700",
+                              "block w-full p-2 text-left"
+                            )}
+                            onClick={() => openCreateIssueModal()}
+                          >
+                            Create new
                           </button>
+                        )}
+                      </Menu.Item>
+                      <Menu.Item>
+                        {({ active }) => (
+                          <button
+                            type="button"
+                            className={classNames(
+                              active ? "bg-indigo-50 text-gray-900" : "text-gray-700",
+                              "block w-full p-2 text-left"
+                            )}
+                            onClick={() => openIssuesListModal()}
+                          >
+                            Add an existing issue
+                          </button>
+                        )}
+                      </Menu.Item>
                     </div>
+                  </Menu.Items>
+                </Transition>
+              </Menu>
             </div>
           )}
         </Disclosure>
       ))}
     </div>
-    // <button
-    //                     type="button"
-    //                     className="text-left p-2 text-gray-900 hover:bg-theme hover:text-white rounded-md text-xs whitespace-nowrap w-full"
-    //                     onClick={() => selectSprint({ ...cycle, actionType: "edit" })}
-    //                   >
-    //                     Edit
-    //                   </button>
-    //                 </Menu.Item>
-    //                 <Menu.Item>
-    //                   <button
-    //                     type="button"
-    //                     className="text-left p-2 text-gray-900 hover:bg-theme hover:text-white rounded-md text-xs whitespace-nowrap w-full"
-    //                     onClick={() => selectSprint({ ...cycle, actionType: "delete" })}
-    //                   >
-    //                     Delete
-    //                   </button>
-    //                 </Menu.Item
   );
 };
 

apps/app/components/project/cycles/stats-view/single-stat.tsx

@@ -66,17 +66,18 @@ const SingleStat: React.FC<Props> = ({ cycle, handleEditCycle, handleDeleteCycle
       <div className="bg-white p-3">
         <div className="grid grid-cols-8 gap-2 divide-x">
           <div className="col-span-3 space-y-3">
+            <div className="flex justify-between items-center gap-2">
               <Link href={`/projects/${activeProject?.id}/cycles/${cycle.id}`}>
-              <a className="flex justify-between items-center">
+                <a>
                   <h2 className="font-medium">{cycle.name}</h2>
+                </a>
+              </Link>
+              <div className="flex items-center gap-2">
                 <div className="flex items-center gap-2">
                   <span className="text-xs bg-gray-100 px-2 py-1 rounded-xl">
-                    {today.getDate() < startDate.getDate()
+                    {today < startDate ? "Not started" : today > endDate ? "Over" : "Active"}
-                      ? "Not started"
-                      : today.getDate() > endDate.getDate()
-                      ? "Over"
-                      : "Active"}
                   </span>
+                </div>
                 <CustomMenu width="auto" ellipsis>
                   <CustomMenu.MenuItem onClick={handleEditCycle}>Edit cycle</CustomMenu.MenuItem>
                   <CustomMenu.MenuItem onClick={handleDeleteCycle}>
@@ -84,8 +85,7 @@ const SingleStat: React.FC<Props> = ({ cycle, handleEditCycle, handleDeleteCycle
                   </CustomMenu.MenuItem>
                 </CustomMenu>
               </div>
-              </a>
+            </div>
-            </Link>
 
             <div className="grid grid-cols-2 gap-x-2 gap-y-3 text-xs">
               <div className="flex items-center gap-2 text-gray-500">
@@ -157,7 +157,9 @@ const SingleStat: React.FC<Props> = ({ cycle, handleEditCycle, handleDeleteCycle
                         <span className="text-gray-500">
                           -{" "}
                           {cycleIssues && cycleIssues.length > 0
-                            ? `${(groupedIssues[group].length / cycleIssues.length) * 100}%`
+                            ? `${Math.round(
+                                (groupedIssues[group].length / cycleIssues.length) * 100
+                              )}%`
                             : "0%"}
                         </span>
                       </span>

apps/app/components/project/issues/BoardView/index.tsx

@@ -16,7 +16,7 @@ import { STATE_LIST } from "constants/fetch-keys";
 // components
 import SingleBoard from "components/project/issues/BoardView/single-board";
 import StrictModeDroppable from "components/dnd/StrictModeDroppable";
-import CreateUpdateIssuesModal from "components/project/issues/CreateUpdateIssueModal";
+import CreateUpdateIssuesModal from "components/project/issues/create-update-issue-modal";
 // ui
 import { Spinner } from "ui";
 // types

apps/app/components/project/issues/BoardView/single-board.tsx

@@ -235,7 +235,7 @@ const SingleBoard: React.FC<Props> = ({
                                     </div>
                                   )}
                                   <h5
-                                    className="group-hover:text-theme text-sm break-all mb-3"
+                                    className="group-hover:text-theme text-sm mb-3"
                                     style={{ lineClamp: 3, WebkitLineClamp: 3 }}
                                   >
                                     {childIssue.name}

apps/app/components/project/issues/create-update-issue-modal/index.tsx

@@ -6,13 +6,6 @@ import dynamic from "next/dynamic";
 import { mutate } from "swr";
 // react hook form
 import { Controller, useForm } from "react-hook-form";
-// fetching keys
-import {
-  PROJECT_ISSUES_DETAILS,
-  PROJECT_ISSUES_LIST,
-  CYCLE_ISSUES,
-  USER_ISSUE,
-} from "constants/fetch-keys";
 // headless
 import { Dialog, Menu, Transition } from "@headlessui/react";
 // services
@@ -21,22 +14,30 @@ import issuesServices from "lib/services/issues.service";
 import useUser from "lib/hooks/useUser";
 import useToast from "lib/hooks/useToast";
 // ui
-import { Button, Input, TextArea } from "ui";
+import { Button, TextArea } from "ui";
-// commons
+// icons
-import { renderDateFormat, cosineSimilarity } from "constants/common";
+import { EllipsisHorizontalIcon } from "@heroicons/react/24/outline";
 // components
-import SelectState from "./SelectState";
+import SelectState from "components/project/issues/create-update-issue-modal/select-state";
-import SelectCycles from "./SelectCycles";
+import SelectCycles from "components/project/issues/create-update-issue-modal/select-cycle";
-import SelectLabels from "./SelectLabels";
+import SelectLabels from "components/project/issues/create-update-issue-modal/select-labels";
-import SelectProject from "./SelectProject";
+import SelectProject from "components/project/issues/create-update-issue-modal/select-project";
-import SelectPriority from "./SelectPriority";
+import SelectPriority from "components/project/issues/create-update-issue-modal/select-priority";
-import SelectAssignee from "./SelectAssignee";
+import SelectAssignee from "components/project/issues/create-update-issue-modal/select-assignee";
-import SelectParent from "./SelectParentIssue";
+import SelectParent from "components/project/issues/create-update-issue-modal/select-parent-issue";
 import CreateUpdateStateModal from "components/project/issues/BoardView/state/CreateUpdateStateModal";
 import CreateUpdateCycleModal from "components/project/cycles/create-update-cycle-modal";
 // types
-import type { IIssue, IssueResponse, CycleIssueResponse } from "types";
+import type { IIssue, IssueResponse } from "types";
-import { EllipsisHorizontalIcon } from "@heroicons/react/24/outline";
+// fetching keys
+import {
+  PROJECT_ISSUES_DETAILS,
+  PROJECT_ISSUES_LIST,
+  CYCLE_ISSUES,
+  USER_ISSUE,
+} from "constants/fetch-keys";
+// common
+import { renderDateFormat, cosineSimilarity } from "constants/common";
 
 const RichTextEditor = dynamic(() => import("components/lexical/editor"), {
   ssr: false,
@@ -113,36 +114,18 @@ const CreateUpdateIssuesModal: React.FC<Props> = ({
     }, 500);
   };
 
-  const addIssueToSprint = async (issueId: string, sprintId: string, issueDetail: IIssue) => {
+  const addIssueToCycle = async (issueId: string, cycleId: string, issueDetail: IIssue) => {
     if (!activeWorkspace || !activeProject) return;
     await issuesServices
-      .addIssueToCycle(activeWorkspace.slug, activeProject.id, sprintId, {
+      .addIssueToCycle(activeWorkspace.slug, activeProject.id, cycleId, {
         issue: issueId,
       })
       .then((res) => {
-        mutate<CycleIssueResponse[]>(
+        mutate(CYCLE_ISSUES(cycleId));
-          CYCLE_ISSUES(sprintId),
-          (prevData) => {
-            const targetResponse = prevData?.find((t) => t.cycle === sprintId);
-            if (targetResponse) {
-              targetResponse.issue_details = issueDetail;
-              return prevData;
-            } else {
-              return [
-                ...(prevData ?? []),
-                {
-                  cycle: sprintId,
-                  issue_details: issueDetail,
-                } as CycleIssueResponse,
-              ];
-            }
-          },
-          false
-        );
         if (isUpdatingSingleIssue) {
           mutate<IIssue>(
             PROJECT_ISSUES_DETAILS,
-            (prevData) => ({ ...(prevData as IIssue), sprints: sprintId }),
+            (prevData) => ({ ...(prevData as IIssue), sprints: cycleId }),
             false
           );
         } else
@@ -152,7 +135,7 @@ const CreateUpdateIssuesModal: React.FC<Props> = ({
               return {
                 ...(prevData as IssueResponse),
                 results: (prevData?.results ?? []).map((issue) => {
-                  if (issue.id === res.id) return { ...issue, sprints: sprintId };
+                  if (issue.id === res.id) return { ...issue, sprints: cycleId };
                   return issue;
                 }),
               };
@@ -185,7 +168,7 @@ const CreateUpdateIssuesModal: React.FC<Props> = ({
           mutate<IssueResponse>(PROJECT_ISSUES_LIST(activeWorkspace.slug, activeProject.id));
 
           if (formData.sprints && formData.sprints !== null) {
-            await addIssueToSprint(res.id, formData.sprints, formData);
+            await addIssueToCycle(res.id, formData.sprints, formData);
           }
           handleClose();
           resetForm();
@@ -225,7 +208,7 @@ const CreateUpdateIssuesModal: React.FC<Props> = ({
               false
             );
           if (formData.sprints && formData.sprints !== null) {
-            await addIssueToSprint(res.id, formData.sprints, formData);
+            await addIssueToCycle(res.id, formData.sprints, formData);
           }
           handleClose();
           resetForm();

apps/app/components/project/issues/create-update-issue-modal/select-assignee.tsx

@@ -39,7 +39,13 @@ const SelectAssignee: React.FC<Props> = ({ control }) => {
           title="Assignees"
           optionsFontsize="sm"
           options={people?.map((person) => {
-            return { value: person.member.id, display: person.member.first_name };
+            return {
+              value: person.member.id,
+              display:
+                person.member.first_name && person.member.first_name !== ""
+                  ? person.member.first_name
+                  : person.member.email,
+            };
           })}
           multiple={true}
           value={value}

apps/app/components/project/issues/issue-detail/issue-detail-sidebar/select-assignee.tsx

@@ -125,7 +125,7 @@ const SelectAssignee: React.FC<Props> = ({ control, submitChanges }) => {
                     leaveFrom="opacity-100"
                     leaveTo="opacity-0"
                   >
-                    <Listbox.Options className="absolute z-10 right-0 mt-1 w-40 bg-white shadow-lg max-h-28 rounded-md py-1 text-xs ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none">
+                    <Listbox.Options className="absolute z-10 right-0 mt-1 w-auto bg-white shadow-lg max-h-28 rounded-md py-1 text-xs ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none">
                       <div className="py-1">
                         {people ? (
                           people.length > 0 ? (
@@ -135,7 +135,7 @@ const SelectAssignee: React.FC<Props> = ({ control, submitChanges }) => {
                                 className={({ active, selected }) =>
                                   `${
                                     active || selected ? "bg-indigo-50" : ""
-                                  } flex items-center gap-2 text-gray-900 cursor-pointer select-none relative p-2 rounded-md truncate`
+                                  } flex items-center gap-2 text-gray-900 cursor-pointer select-none p-2 truncate`
                                 }
                                 value={option.member.id}
                               >
@@ -150,13 +150,15 @@ const SelectAssignee: React.FC<Props> = ({ control, submitChanges }) => {
                                     />
                                   </div>
                                 ) : (
-                                  <div className="h-4 w-4 bg-gray-700 text-white grid place-items-center capitalize rounded-full">
+                                  <div className="flex-shrink-0 h-4 w-4 bg-gray-700 text-white grid place-items-center capitalize rounded-full">
                                     {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.first_name
+                                  : option.member.email}
                               </Listbox.Option>
                             ))
                           ) : (

apps/app/components/project/issues/list-view/index.tsx

@@ -18,7 +18,7 @@ import {
 } from "@heroicons/react/24/outline";
 import User from "public/user.png";
 // components
-import CreateUpdateIssuesModal from "components/project/issues/CreateUpdateIssueModal";
+import CreateUpdateIssuesModal from "components/project/issues/create-update-issue-modal";
 // types
 import { IIssue, IWorkspaceMember, NestedKeyOf, Properties } from "types";
 // services

apps/app/components/sidebar/projects-list.tsx

@@ -58,7 +58,7 @@ const ProjectsList: React.FC<Props> = ({ navigation, sidebarCollapse }) => {
                     <>
                       <div className="flex items-center">
                         <Disclosure.Button
-                          className={`w-full flex items-center gap-2 font-medium rounded-md p-2 text-sm ${
+                          className={`w-full flex items-center text-left gap-2 font-medium rounded-md p-2 text-sm ${
                             sidebarCollapse ? "justify-center" : ""
                           }`}
                         >

apps/app/pages/projects/[projectId]/cycles/[cycleId].tsx

@@ -40,7 +40,7 @@ import {
 import { CYCLE_ISSUES, PROJECT_MEMBERS } from "constants/fetch-keys";
 // constants
 import { classNames, replaceUnderscoreIfSnakeCase } from "constants/common";
-import CreateUpdateIssuesModal from "components/project/issues/CreateUpdateIssueModal";
+import CreateUpdateIssuesModal from "components/project/issues/create-update-issue-modal";
 import CycleIssuesListModal from "components/project/cycles/cycle-issues-list-modal";
 import ConfirmCycleDeletion from "components/project/cycles/confirm-cycle-deletion";
 
@@ -149,22 +149,6 @@ const SingleCycle: React.FC<Props> = () => {
     setCycleIssuesListModal(true);
   };
 
-  const addIssueToCycle = (cycleId: string, issueId: string) => {
-    if (!activeWorkspace || !activeProject?.id) return;
-
-    issuesServices
-      .addIssueToCycle(activeWorkspace.slug, activeProject.id, cycleId, {
-        issue: issueId,
-      })
-      .then((response) => {
-        console.log(response);
-        mutate(CYCLE_ISSUES(cycleId));
-      })
-      .catch((error) => {
-        console.log(error);
-      });
-  };
-
   const handleDragEnd = (result: DropResult) => {
     if (!result.destination) return;
     const { source, destination } = result;
@@ -264,6 +248,7 @@ const SingleCycle: React.FC<Props> = () => {
               </>
             }
             className="ml-1.5"
+            width="auto"
           >
             {cycles?.map((cycle) => (
               <CustomMenu.MenuItem

apps/app/pages/projects/[projectId]/issues/[issueId].tsx

@@ -9,16 +9,8 @@ import React, { useCallback, useEffect, useState } from "react";
 import useSWR, { mutate } from "swr";
 // react hook form
 import { useForm } from "react-hook-form";
-// headless ui
-import { Disclosure, Menu, Tab, Transition } from "@headlessui/react";
 // services
 import issuesServices from "lib/services/issues.service";
-// fetch keys
-import {
-  PROJECT_ISSUES_ACTIVITY,
-  PROJECT_ISSUES_COMMENTS,
-  PROJECT_ISSUES_LIST,
-} from "constants/fetch-keys";
 // hooks
 import useUser from "lib/hooks/useUser";
 // hoc
@@ -26,22 +18,18 @@ import withAuth from "lib/hoc/withAuthWrapper";
 // layouts
 import AppLayout from "layouts/app-layout";
 // components
-import CreateUpdateIssuesModal from "components/project/issues/CreateUpdateIssueModal";
+import CreateUpdateIssuesModal from "components/project/issues/create-update-issue-modal";
 import IssueCommentSection from "components/project/issues/issue-detail/comment/IssueCommentSection";
 import AddAsSubIssue from "components/project/issues/issue-detail/add-as-sub-issue";
 import ConfirmIssueDeletion from "components/project/issues/confirm-issue-deletion";
-// common
-import { debounce } from "constants/common";
-// components
 import IssueDetailSidebar from "components/project/issues/issue-detail/issue-detail-sidebar";
-// activites
 import IssueActivitySection from "components/project/issues/issue-detail/activity";
+// headless ui
+import { Disclosure, Menu, Tab, Transition } from "@headlessui/react";
 // ui
 import { Spinner, TextArea } from "ui";
 import HeaderButton from "ui/HeaderButton";
 import { BreadcrumbItem, Breadcrumbs } from "ui/Breadcrumbs";
-// types
-import { IIssue, IIssueComment, IssueResponse } from "types";
 // icons
 import {
   ChevronLeftIcon,
@@ -49,6 +37,16 @@ import {
   EllipsisHorizontalIcon,
   PlusIcon,
 } from "@heroicons/react/24/outline";
+// types
+import { IIssue, IIssueComment, IssueResponse } from "types";
+// fetch keys
+import {
+  PROJECT_ISSUES_ACTIVITY,
+  PROJECT_ISSUES_COMMENTS,
+  PROJECT_ISSUES_LIST,
+} from "constants/fetch-keys";
+// common
+import { debounce } from "constants/common";
 
 const RichTextEditor = dynamic(() => import("components/lexical/editor"), {
   ssr: false,
@@ -276,8 +274,8 @@ const IssueDetail: NextPage = () => {
         parent={issueDetail}
       />
       {issueDetail && activeProject ? (
-        <div className="flex gap-5">
+        <div className="h-full flex gap-5">
-          <div className="basis-3/4 space-y-5 p-5">
+          <div className="basis-2/3 space-y-5 p-5">
             <div className="mb-5"></div>
             <div className="rounded-lg">
               {issueDetail.parent !== null && issueDetail.parent !== "" ? (
@@ -614,7 +612,8 @@ const IssueDetail: NextPage = () => {
               </Tab.Group>
             </div>
           </div>
-          <div className="h-full basis-1/4 space-y-5 p-5 border-l">
+          <div className="h-full basis-1/3 space-y-5 p-5 border-l">
+            {/* TODO add flex-grow, if needed */}
             <IssueDetailSidebar
               control={control}
               issueDetail={issueDetail}

apps/app/pages/projects/[projectId]/issues/index.tsx

@@ -24,10 +24,10 @@ import AppLayout from "layouts/app-layout";
 // hooks
 import useIssuesFilter from "lib/hooks/useIssuesFilter";
 // components
-import ListView from "components/project/issues/ListView";
+import ListView from "components/project/issues/list-view";
 import BoardView from "components/project/issues/BoardView";
 import ConfirmIssueDeletion from "components/project/issues/confirm-issue-deletion";
-import CreateUpdateIssuesModal from "components/project/issues/CreateUpdateIssueModal";
+import CreateUpdateIssuesModal from "components/project/issues/create-update-issue-modal";
 // ui
 import {
   Spinner,

apps/app/ui/custom-menu/index.tsx

@@ -51,7 +51,7 @@ const CustomMenu = ({
         leaveTo="transform opacity-0 scale-95"
       >
         <Menu.Items
-          className={`absolute right-0 z-10 mt-2 origin-top-right rounded-md bg-white text-xs shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none ${
+          className={`absolute right-0 z-10 mt-1 origin-top-right rounded-md bg-white text-xs shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none ${
             width === "auto" ? "min-w-full whitespace-nowrap" : "w-56"
           }`}
         >

apps/app/ui/custom-select/index.tsx

@@ -10,9 +10,17 @@ type CustomSelectProps = {
   children: React.ReactNode;
   label: string | JSX.Element;
   textAlignment?: "left" | "center" | "right";
+  width?: "auto" | string;
 };
 
-const CustomSelect = ({ children, label, textAlignment, value, onChange }: CustomSelectProps) => {
+const CustomSelect = ({
+  children,
+  label,
+  textAlignment,
+  value,
+  onChange,
+  width = "auto",
+}: CustomSelectProps) => {
   return (
     <Listbox
       as="div"
@@ -44,7 +52,11 @@ const CustomSelect = ({ children, label, textAlignment, value, onChange }: Custo
         leaveFrom="transform opacity-100 scale-100"
         leaveTo="transform opacity-0 scale-95"
       >
-        <Listbox.Options className="absolute right-0 z-10 mt-1 w-56 origin-top-right rounded-md bg-white text-xs shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
+        <Listbox.Options
+          className={`absolute right-0 z-10 mt-1 origin-top-right rounded-md bg-white text-xs shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none ${
+            width === "auto" ? "min-w-full whitespace-nowrap" : "w-56"
+          }`}
+        >
           <div className="py-1">{children}</div>
         </Listbox.Options>
       </Transition>

apps/app/ui/index.ts

@@ -2,11 +2,11 @@ export { default as Button } from "./Button";
 export { default as Input } from "./Input";
 export { default as Select } from "./Select";
 export { default as TextArea } from "./TextArea";
-export { default as CustomListbox } from "./CustomListbox";
+export { default as CustomListbox } from "./custom-listbox";
-export { default as CustomMenu } from "./CustomMenu";
+export { default as CustomMenu } from "./custom-menu";
 export { default as Spinner } from "./Spinner";
 export { default as Tooltip } from "./Tooltip";
-export { default as SearchListbox } from "./SearchListbox";
+export { default as SearchListbox } from "./search-listbox";
 export { default as HeaderButton } from "./HeaderButton";
 export * from "./Breadcrumbs";
 export * from "./EmptySpace";

apps/app/ui/search-listbox/index.tsx

@@ -100,12 +100,12 @@ const SearchListbox: React.FC<Props> = ({
               } ${optionsClassName || ""}`}
             >
               <Combobox.Input
-                className="w-full bg-transparent border-b p-2 mb-1 focus:outline-none sm:text-sm"
+                className="w-full bg-transparent border-b p-2 focus:outline-none text-xs"
                 onChange={(event) => setQuery(event.target.value)}
                 placeholder="Search"
                 displayValue={(assigned: any) => assigned?.name}
               />
-              <div className="p-1">
+              <div className="py-1">
                 {filteredOptions ? (
                   filteredOptions.length > 0 ? (
                     filteredOptions.map((option) => (
@@ -113,8 +113,8 @@ const SearchListbox: React.FC<Props> = ({
                         key={option.value}
                         className={({ active }) =>
                           `${
-                            active ? "text-white bg-theme" : "text-gray-900"
+                            active ? "bg-indigo-50" : ""
-                          } cursor-pointer select-none truncate font-medium relative p-2 rounded-md`
+                          } cursor-pointer select-none truncate text-gray-900 p-2`
                         }
                         value={option.value}
                       >