Merge branch 'master' of github.com:makeplane/plane into build/merge_frontend_backend

apps/app/.env.example

@@ -0,0 +1,4 @@
+NEXT_PUBLIC_API_BASE_URL = "<-- endpoint goes here -->"
+NEXT_PUBLIC_GOOGLE_CLIENTID = "<-- google client id goes here -->"
+NEXT_PUBLIC_GITHUB_ID = "<-- github id goes here -->"
+NEXT_PUBLIC_APP_ENVIRONMENT=development

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

@@ -7,7 +7,7 @@ import { useForm } from "react-hook-form";
 // headless ui
 import { Combobox, Dialog, Transition } from "@headlessui/react";
 // services
-import issuesServices from "lib/services/issues.services";
+import issuesServices from "lib/services/issues.service";
 // hooks
 import useUser from "lib/hooks/useUser";
 // icons

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

@@ -8,7 +8,7 @@ import { SubmitHandler, useForm } from "react-hook-form";
 // headless ui
 import { Combobox, Dialog, Transition } from "@headlessui/react";
 // services
-import issuesServices from "lib/services/issues.services";
+import issuesServices from "lib/services/issues.service";
 // hooks
 import useUser from "lib/hooks/useUser";
 import useTheme from "lib/hooks/useTheme";
@@ -22,7 +22,7 @@ import {
 } from "@heroicons/react/24/outline";
 // components
 import ShortcutsModal from "components/command-palette/shortcuts";
-import CreateProjectModal from "components/project/CreateProjectModal";
+import CreateProjectModal from "components/project/create-project-modal";
 import CreateUpdateIssuesModal from "components/project/issues/CreateUpdateIssueModal";
 import CreateUpdateCycleModal from "components/project/cycles/CreateUpdateCyclesModal";
 // ui
@@ -278,15 +278,15 @@ const CommandPalette: React.FC = () => {
                                           value={issue.id}
                                         />
                                         <span
-                                          className={`h-1.5 w-1.5 block rounded-full`}
+                                          className="flex-shrink-0 h-1.5 w-1.5 block rounded-full"
                                           style={{
                                             backgroundColor: issue.state_detail.color,
                                           }}
                                         />
-                                        <span className="text-xs text-gray-500">
+                                        <span className="flex-shrink-0 text-xs text-gray-500">
                                           {activeProject?.identifier}-{issue.sequence_id}
                                         </span>
-                                        {issue.name}
+                                        <span>{issue.name}</span>
                                       </div>
                                       {active && (
                                         <button
@@ -297,10 +297,9 @@ const CommandPalette: React.FC = () => {
                                             );
                                             handleCommandPaletteClose();
                                           }}
+                                          className="flex-shrink-0 text-gray-500"
                                         >
-                                          <span className="justify-self-end flex-none text-gray-500">
-                                            Jump to...
-                                          </span>
+                                          Jump to...
                                         </button>
                                       )}
                                     </>

apps/app/components/project/SendProjectInvitationModal.tsx

@@ -20,7 +20,7 @@ import { Button, Select, TextArea } from "ui";
 import { ChevronDownIcon, CheckIcon } from "@heroicons/react/20/solid";
 
 // types
-import { ProjectMember, WorkspaceMember } from "types";
+import { IProjectMemberInvitation } from "types";
 
 type Props = {
   isOpen: boolean;
@@ -28,6 +28,11 @@ type Props = {
   members: any[];
 };
 
+type ProjectMember = IProjectMemberInvitation & {
+  member_id: string;
+  user_id: string;
+};
+
 const defaultValues: Partial<ProjectMember> = {
   email: "",
   message: "",
@@ -49,9 +54,15 @@ const SendProjectInvitationModal: React.FC<Props> = ({ isOpen, setIsOpen, member
 
   const { setToastAlert } = useToast();
 
-  const { data: people } = useSWR<WorkspaceMember[]>(
-    activeWorkspace ? WORKSPACE_MEMBERS : null,
-    activeWorkspace ? () => workspaceService.workspaceMembers(activeWorkspace.slug) : null
+  const { data: people } = useSWR(
+    activeWorkspace ? WORKSPACE_MEMBERS(activeWorkspace.slug) : null,
+    activeWorkspace ? () => workspaceService.workspaceMembers(activeWorkspace.slug) : null,
+    {
+      onErrorRetry(err, _, __, revalidate, revalidateOpts) {
+        if (err?.status === 403) return;
+        setTimeout(() => revalidate(revalidateOpts), 5000);
+      },
+    }
   );
 
   const {

apps/app/components/project/confirm-project-deletion.tsx

@@ -9,19 +9,26 @@ import useToast from "lib/hooks/useToast";
 // icons
 import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
 // ui
-import { Button } from "ui";
+import { Button, Input } from "ui";
 // types
 import type { IProject } from "types";
 
 type Props = {
   isOpen: boolean;
-  setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
-  data?: IProject;
+  onClose: () => void;
+  data: IProject | null;
 };
 
-const ConfirmProjectDeletion: React.FC<Props> = ({ isOpen, setIsOpen, data }) => {
+const ConfirmProjectDeletion: React.FC<Props> = ({ isOpen, data, onClose }) => {
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
 
+  const [selectedProject, setSelectedProject] = useState<IProject | null>(null);
+
+  const [confirmProjectName, setConfirmProjectName] = useState("");
+  const [confirmDeleteMyProject, setConfirmDeleteMyProject] = useState(false);
+
+  const canDelete = confirmProjectName === data?.name && confirmDeleteMyProject;
+
   const { activeWorkspace, mutateProjects } = useUser();
 
   const { setToastAlert } = useToast();
@@ -29,13 +36,18 @@ const ConfirmProjectDeletion: React.FC<Props> = ({ isOpen, setIsOpen, data }) =>
   const cancelButtonRef = useRef(null);
 
   const handleClose = () => {
-    setIsOpen(false);
     setIsDeleteLoading(false);
+    const timer = setTimeout(() => {
+      setConfirmProjectName("");
+      setConfirmDeleteMyProject(false);
+      clearTimeout(timer);
+    }, 350);
+    onClose();
   };
 
   const handleDeletion = async () => {
     setIsDeleteLoading(true);
-    if (!data || !activeWorkspace) return;
+    if (!data || !activeWorkspace || !canDelete) return;
     await projectService
       .deleteProject(activeWorkspace.slug, data.id)
       .then(() => {
@@ -54,8 +66,14 @@ const ConfirmProjectDeletion: React.FC<Props> = ({ isOpen, setIsOpen, data }) =>
   };
 
   useEffect(() => {
-    data && setIsOpen(true);
-  }, [data, setIsOpen]);
+    if (data) setSelectedProject(data);
+    else {
+      const timer = setTimeout(() => {
+        setSelectedProject(null);
+        clearTimeout(timer);
+      }, 300);
+    }
+  }, [data]);
 
   return (
     <Transition.Root show={isOpen} as={React.Fragment}>
@@ -104,11 +122,48 @@ const ConfirmProjectDeletion: React.FC<Props> = ({ isOpen, setIsOpen, data }) =>
                       <div className="mt-2">
                         <p className="text-sm text-gray-500">
                           Are you sure you want to delete project - {`"`}
-                          <span className="italic">{data?.name}</span>
+                          <span className="italic">{selectedProject?.name}</span>
                           {`"`} ? All of the data related to the project will be permanently
                           removed. This action cannot be undone.
                         </p>
                       </div>
+                      <div className="h-0.5 bg-gray-200 my-3" />
+                      <div className="mt-3">
+                        <p className="text-sm">
+                          Enter the project name{" "}
+                          <span className="font-semibold">{selectedProject?.name}</span> to
+                          continue:
+                        </p>
+                        <Input
+                          type="text"
+                          placeholder="Project name"
+                          className="mt-2"
+                          value={confirmProjectName}
+                          onChange={(e) => {
+                            setConfirmProjectName(e.target.value);
+                          }}
+                          name="projectName"
+                        />
+                      </div>
+                      <div className="mt-3">
+                        <p className="text-sm">
+                          To confirm, type <span className="font-semibold">delete my project</span>{" "}
+                          below:
+                        </p>
+                        <Input
+                          type="text"
+                          placeholder="Enter 'delete my project'"
+                          className="mt-2"
+                          onChange={(e) => {
+                            if (e.target.value === "delete my project") {
+                              setConfirmDeleteMyProject(true);
+                            } else {
+                              setConfirmDeleteMyProject(false);
+                            }
+                          }}
+                          name="typeDelete"
+                        />
+                      </div>
                     </div>
                   </div>
                 </div>
@@ -117,7 +172,7 @@ const ConfirmProjectDeletion: React.FC<Props> = ({ isOpen, setIsOpen, data }) =>
                     type="button"
                     onClick={handleDeletion}
                     theme="danger"
-                    disabled={isDeleteLoading}
+                    disabled={isDeleteLoading || !canDelete}
                     className="inline-flex sm:ml-3"
                   >
                     {isDeleteLoading ? "Deleting..." : "Delete"}

apps/app/components/project/create-project-modal.tsx

@@ -1,21 +1,24 @@
-import React, { useState, useEffect, useCallback } from "react";
+import React, { useState, useEffect } from "react";
 // swr
-import { mutate } from "swr";
+import useSWR, { mutate } from "swr";
 // react hook form
 import { useForm } from "react-hook-form";
 // headless
 import { Dialog, Transition } from "@headlessui/react";
 // services
 import projectServices from "lib/services/project.service";
+import workspaceService from "lib/services/workspace.service";
+// common
+import { createSimilarString } from "constants/common";
+// constants
+import { NETWORK_CHOICES } from "constants/";
 // fetch keys
-import { PROJECTS_LIST } from "constants/fetch-keys";
+import { PROJECTS_LIST, WORKSPACE_MEMBERS } from "constants/fetch-keys";
 // hooks
 import useUser from "lib/hooks/useUser";
 import useToast from "lib/hooks/useToast";
 // ui
 import { Button, Input, TextArea, Select } from "ui";
-// common
-import { debounce } from "constants/common";
 // types
 import { IProject } from "types";
 
@@ -24,11 +27,28 @@ type Props = {
   setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
 };
 
-const NETWORK_CHOICES = { "0": "Secret", "2": "Public" };
-
 const defaultValues: Partial<IProject> = {
   name: "",
+  identifier: "",
   description: "",
+  network: 0,
+};
+
+const IsGuestCondition: React.FC<{
+  setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
+}> = ({ setIsOpen }) => {
+  const { setToastAlert } = useToast();
+
+  useEffect(() => {
+    setIsOpen(false);
+    setToastAlert({
+      title: "Error",
+      type: "error",
+      message: "You don't have permission to create project.",
+    });
+  }, [setIsOpen, setToastAlert]);
+
+  return null;
 };
 
 const CreateProjectModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
@@ -40,7 +60,17 @@ const CreateProjectModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
     }, 500);
   };
 
-  const { activeWorkspace } = useUser();
+  const { activeWorkspace, user } = useUser();
+
+  const { data: workspaceMembers } = useSWR(
+    activeWorkspace ? WORKSPACE_MEMBERS(activeWorkspace.slug) : null,
+    activeWorkspace ? () => workspaceService.workspaceMembers(activeWorkspace.slug) : null,
+    {
+      shouldRetryOnError: false,
+    }
+  );
+
+  const [recommendedIdentifier, setRecommendedIdentifier] = useState<string[]>([]);
 
   const { setToastAlert } = useToast();
 
@@ -52,6 +82,7 @@ const CreateProjectModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
     handleSubmit,
     reset,
     setError,
+    clearErrors,
     watch,
     setValue,
   } = useForm<IProject>({
@@ -77,6 +108,16 @@ const CreateProjectModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
         handleClose();
       })
       .catch((err) => {
+        if (err.status === 403) {
+          setToastAlert({
+            title: "Error",
+            type: "error",
+            message: "You don't have permission to create project.",
+          });
+          handleClose();
+          return;
+        }
+        err = err.data;
         Object.keys(err).map((key) => {
           const errorMessages = err[key];
           setError(key as keyof IProject, {
@@ -89,22 +130,39 @@ const CreateProjectModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
   const projectName = watch("name") ?? "";
   const projectIdentifier = watch("identifier") ?? "";
 
-  const checkIdentifier = (slug: string, value: string) => {
-    projectServices.checkProjectIdentifierAvailability(slug, value).then((response) => {
-      console.log(response);
-      if (response.exists) setError("identifier", { message: "Identifier already exists" });
-    });
-  };
+  if (workspaceMembers) {
+    const isMember = workspaceMembers.find((member) => member.member.id === user?.id);
+    const isGuest = workspaceMembers.find(
+      (member) => member.member.id === user?.id && member.role === 5
+    );
 
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  const checkIdentifierAvailability = useCallback(debounce(checkIdentifier, 1500), []);
+    if ((!isMember || isGuest) && isOpen) return <IsGuestCondition setIsOpen={setIsOpen} />;
+  }
 
   useEffect(() => {
     if (projectName && isChangeIdentifierRequired) {
-      setValue("identifier", projectName.replace(/ /g, "-").toUpperCase().substring(0, 3));
+      setValue("identifier", projectName.replace(/ /g, "").toUpperCase().substring(0, 3));
     }
   }, [projectName, projectIdentifier, setValue, isChangeIdentifierRequired]);
 
+  useEffect(() => {
+    if (!projectName) return;
+    const suggestedIdentifier = createSimilarString(
+      projectName.replace(/ /g, "").toUpperCase().substring(0, 3)
+    );
+
+    setRecommendedIdentifier([
+      suggestedIdentifier + Math.floor(Math.random() * 101),
+      suggestedIdentifier + Math.floor(Math.random() * 101),
+      projectIdentifier.toUpperCase().substring(0, 3) + Math.floor(Math.random() * 101),
+      projectIdentifier.toUpperCase().substring(0, 3) + Math.floor(Math.random() * 101),
+    ]);
+  }, [errors.identifier]);
+
+  useEffect(() => {
+    return () => setIsChangeIdentifierRequired(true);
+  }, [isOpen]);
+
   return (
     <Transition.Root show={isOpen} as={React.Fragment}>
       <Dialog as="div" className="relative z-10" onClose={handleClose}>
@@ -191,11 +249,7 @@ const CreateProjectModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
                           placeholder="Enter Project Identifier"
                           error={errors.identifier}
                           register={register}
-                          onChange={(e: any) => {
-                            setIsChangeIdentifierRequired(false);
-                            if (!activeWorkspace || !e.target.value) return;
-                            checkIdentifierAvailability(activeWorkspace.slug, e.target.value);
-                          }}
+                          onChange={() => setIsChangeIdentifierRequired(false)}
                           validations={{
                             required: "Identifier is required",
                             minLength: {
@@ -203,11 +257,32 @@ const CreateProjectModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
                               message: "Identifier must at least be of 1 character",
                             },
                             maxLength: {
-                              value: 9,
-                              message: "Identifier must at most be of 9 characters",
+                              value: 5,
+                              message: "Identifier must at most be of 5 characters",
                             },
                           }}
                         />
+                        {errors.identifier && (
+                          <div className="mt-2">
+                            <p>Ops! Identifier is already taken. Try one of the following:</p>
+                            <div className="flex gap-x-2">
+                              {recommendedIdentifier.map((identifier) => (
+                                <button
+                                  key={identifier}
+                                  type="button"
+                                  className="text-sm text-gray-500 hover:text-gray-700 border p-2 py-0.5 rounded"
+                                  onClick={() => {
+                                    clearErrors("identifier");
+                                    setValue("identifier", identifier);
+                                    setIsChangeIdentifierRequired(false);
+                                  }}
+                                >
+                                  {identifier}
+                                </button>
+                              ))}
+                            </div>
+                          </div>
+                        )}
                       </div>
                     </div>
                   </div>

apps/app/components/project/cycles/ConfirmCycleDeletion.tsx

@@ -4,7 +4,7 @@ import { mutate } from "swr";
 // headless ui
 import { Dialog, Transition } from "@headlessui/react";
 // services
-import cycleService from "lib/services/cycles.services";
+import cycleService from "lib/services/cycles.service";
 // fetch api
 import { CYCLE_LIST } from "constants/fetch-keys";
 // hooks

apps/app/components/project/cycles/CreateUpdateCyclesModal.tsx

@@ -6,7 +6,7 @@ import { useForm } from "react-hook-form";
 // headless
 import { Dialog, Transition } from "@headlessui/react";
 // services
-import cycleService from "lib/services/cycles.services";
+import cycleService from "lib/services/cycles.service";
 // fetch keys
 import { CYCLE_LIST } from "constants/fetch-keys";
 // hooks

apps/app/components/project/cycles/CycleIssuesListModal.tsx

@@ -7,7 +7,7 @@ import { Combobox, Dialog, Transition } from "@headlessui/react";
 // ui
 import { Button } from "ui";
 // services
-import issuesServices from "lib/services/issues.services";
+import issuesServices from "lib/services/issues.service";
 // hooks
 import useUser from "lib/hooks/useUser";
 import useToast from "lib/hooks/useToast";

apps/app/components/project/cycles/CycleView.tsx

@@ -7,7 +7,7 @@ import useSWR, { mutate } from "swr";
 // headless ui
 import { Disclosure, Transition, Menu } from "@headlessui/react";
 // services
-import cycleServices from "lib/services/cycles.services";
+import cycleServices from "lib/services/cycles.service";
 // hooks
 import useUser from "lib/hooks/useUser";
 // components
@@ -22,7 +22,7 @@ import type { CycleViewProps as Props, CycleIssueResponse, IssueResponse } from
 import { CYCLE_ISSUES } from "constants/fetch-keys";
 // constants
 import { renderShortNumericDateFormat } from "constants/common";
-import issuesServices from "lib/services/issues.services";
+import issuesServices from "lib/services/issues.service";
 import StrictModeDroppable from "components/dnd/StrictModeDroppable";
 import { Draggable } from "react-beautiful-dnd";
 

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

@@ -18,11 +18,10 @@ import {
   ArrowsPointingOutIcon,
   CalendarDaysIcon,
   EllipsisHorizontalIcon,
-  PencilIcon,
   PlusIcon,
 } from "@heroicons/react/24/outline";
 import Image from "next/image";
-import { divide } from "lodash";
+import { getPriorityIcon } from "constants/global";
 
 type Props = {
   selectedGroup: NestedKeyOf<IIssue> | null;
@@ -42,8 +41,8 @@ type Props = {
     >
   >;
   bgColor?: string;
-  stateId?: string;
-  createdBy?: string;
+  stateId: string | null;
+  createdBy: string | null;
 };
 
 const SingleBoard: React.FC<Props> = ({
@@ -109,7 +108,7 @@ const SingleBoard: React.FC<Props> = ({
                   <span
                     className={`w-3 h-3 block rounded-full ${!show ? "" : "mr-1"}`}
                     style={{
-                      backgroundColor: bgColor,
+                      backgroundColor: Boolean(bgColor) ? bgColor : undefined,
                     }}
                   />
                   <h2
@@ -151,7 +150,7 @@ const SingleBoard: React.FC<Props> = ({
                     setIsIssueOpen(true);
                     if (selectedGroup !== null)
                       setPreloadedData({
-                        state: stateId,
+                        state: stateId !== null ? stateId : undefined,
                         [selectedGroup]: groupTitle,
                         actionType: "createIssue",
                       });
@@ -159,17 +158,6 @@ const SingleBoard: React.FC<Props> = ({
                 >
                   <PlusIcon className="h-4 w-4" />
                 </button>
-                <button
-                  type="button"
-                  className="h-7 w-7 p-1 grid place-items-center rounded hover:bg-gray-200 duration-300 outline-none"
-                  onClick={() =>
-                    setPreloadedData({
-                      actionType: "edit",
-                    })
-                  }
-                >
-                  <PencilIcon className="h-4 w-4" />
-                </button>
               </div>
             </div>
             <StrictModeDroppable key={groupTitle} droppableId={groupTitle}>
@@ -192,131 +180,116 @@ const SingleBoard: React.FC<Props> = ({
                             ref={provided.innerRef}
                             {...provided.draggableProps}
                           >
-                            <div
-                              className="px-2 py-3 space-y-1.5 select-none"
-                              {...provided.dragHandleProps}
-                            >
-                              <span className="group-hover:text-theme text-sm break-all">
+                            <div className="p-2 select-none" {...provided.dragHandleProps}>
+                              {properties.key && (
+                                <div className="text-xs font-medium text-gray-500 mb-2">
+                                  {childIssue.project_detail?.identifier}-{childIssue.sequence_id}
+                                </div>
+                              )}
+                              <h5 className="group-hover:text-theme text-sm break-all mb-3">
                                 {childIssue.name}
-                              </span>
-                              {Object.keys(properties).map(
-                                (key) =>
-                                  properties[key as keyof Properties] &&
-                                  !Array.isArray(childIssue[key as keyof IIssue]) && (
-                                    <div
-                                      key={key}
-                                      className={`${
-                                        key === "name"
-                                          ? "text-sm mb-2"
-                                          : key === "description"
-                                          ? "text-xs text-black"
-                                          : key === "priority"
-                                          ? `text-xs bg-gray-200 px-2 py-1 mt-2 flex items-center gap-x-1 rounded w-min whitespace-nowrap capitalize font-medium ${
-                                              childIssue.priority === "high"
-                                                ? "bg-red-100 text-red-600"
-                                                : childIssue.priority === "medium"
-                                                ? "bg-orange-100 text-orange-500"
-                                                : childIssue.priority === "low"
-                                                ? "bg-green-100 text-green-500"
-                                                : "hidden"
-                                            }`
-                                          : key === "target_date"
-                                          ? "text-xs bg-indigo-50 px-2 py-1 mt-2 flex items-center gap-x-1 rounded w-min whitespace-nowrap"
-                                          : "text-sm text-gray-500"
-                                      } gap-1 relative
-                                    `}
-                                    >
-                                      {key === "start_date" && childIssue.start_date !== null && (
-                                        <span className="text-sm">
-                                          <CalendarDaysIcon className="h-4 w-4" />
-                                          {renderShortNumericDateFormat(childIssue.start_date)} -
-                                          {childIssue.target_date
-                                            ? renderShortNumericDateFormat(childIssue.target_date)
-                                            : "None"}
-                                        </span>
-                                      )}
-                                      {key === "target_date" && (
-                                        <>
-                                          <span
-                                            className={`flex items-center gap-x-1 group ${
-                                              childIssue.target_date === null
-                                                ? ""
-                                                : childIssue.target_date < new Date().toISOString()
-                                                ? "text-red-600"
-                                                : findHowManyDaysLeft(childIssue.target_date) <=
-                                                    3 && "text-orange-400"
+                              </h5>
+                              <div className="flex items-center gap-x-1 gap-y-2 text-xs flex-wrap">
+                                {properties.priority && (
+                                  <div
+                                    className={`rounded shadow-sm px-2 py-1 cursor-pointer focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 capitalize ${
+                                      childIssue.priority === "high"
+                                        ? "bg-red-100 text-red-600"
+                                        : childIssue.priority === "medium"
+                                        ? "bg-orange-100 text-orange-500"
+                                        : childIssue.priority === "low"
+                                        ? "bg-green-100 text-green-500"
+                                        : "hidden"
+                                    }`}
+                                  >
+                                    {/* {getPriorityIcon(childIssue.priority ?? "")} */}
+                                    {childIssue.priority}
+                                  </div>
+                                )}
+                                {properties.state && (
+                                  <div className="flex-shrink-0 flex items-center gap-1 hover:bg-gray-100 border rounded shadow-sm px-2 py-1 cursor-pointer focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 text-xs duration-300">
+                                    <span
+                                      className="flex-shrink-0 h-1.5 w-1.5 rounded-full"
+                                      style={{ backgroundColor: childIssue.state_detail.color }}
+                                    ></span>
+                                    {addSpaceIfCamelCase(childIssue.state_detail.name)}
+                                  </div>
+                                )}
+                                {properties.start_date && (
+                                  <div className="flex-shrink-0 flex items-center gap-1 hover:bg-gray-100 border rounded shadow-sm px-2 py-1 cursor-pointer focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 text-xs duration-300">
+                                    <CalendarDaysIcon className="h-4 w-4" />
+                                    {childIssue.start_date
+                                      ? renderShortNumericDateFormat(childIssue.start_date)
+                                      : "N/A"}
+                                  </div>
+                                )}
+                                {properties.target_date && (
+                                  <div
+                                    className={`flex-shrink-0 group flex items-center gap-1 hover:bg-gray-100 border rounded shadow-sm px-2 py-1 cursor-pointer focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 text-xs duration-300 ${
+                                      childIssue.target_date === null
+                                        ? ""
+                                        : childIssue.target_date < new Date().toISOString()
+                                        ? "text-red-600"
+                                        : findHowManyDaysLeft(childIssue.target_date) <= 3 &&
+                                          "text-orange-400"
+                                    }`}
+                                  >
+                                    <CalendarDaysIcon className="h-4 w-4" />
+                                    {childIssue.target_date
+                                      ? renderShortNumericDateFormat(childIssue.target_date)
+                                      : "N/A"}
+                                    {childIssue.target_date && (
+                                      <span className="absolute -top-full mb-2 left-4 border transition-opacity opacity-0 group-hover:opacity-100 bg-white rounded px-2 py-1">
+                                        {childIssue.target_date < new Date().toISOString()
+                                          ? `Target date has passed by ${findHowManyDaysLeft(
+                                              childIssue.target_date
+                                            )} days`
+                                          : findHowManyDaysLeft(childIssue.target_date) <= 3
+                                          ? `Target date is in ${findHowManyDaysLeft(
+                                              childIssue.target_date
+                                            )} days`
+                                          : "Target date"}
+                                      </span>
+                                    )}
+                                  </div>
+                                )}
+                                {properties.assignee && (
+                                  <div className="justify-end w-full flex items-center gap-1 text-xs">
+                                    {childIssue?.assignee_details?.length > 0 ? (
+                                      childIssue?.assignee_details?.map(
+                                        (assignee, index: number) => (
+                                          <div
+                                            key={index}
+                                            className={`relative z-[1] h-5 w-5 rounded-full ${
+                                              index !== 0 ? "-ml-2.5" : ""
                                             }`}
                                           >
-                                            <CalendarDaysIcon className="h-4 w-4" />
-                                            {childIssue.target_date
-                                              ? renderShortNumericDateFormat(childIssue.target_date)
-                                              : "N/A"}
-                                            {childIssue.target_date && (
-                                              <span className="absolute -top-full mb-2 left-4 border transition-opacity opacity-0 group-hover:opacity-100 bg-white rounded px-2 py-1">
-                                                {childIssue.target_date < new Date().toISOString()
-                                                  ? `Target date has passed by ${findHowManyDaysLeft(
-                                                      childIssue.target_date
-                                                    )} days`
-                                                  : findHowManyDaysLeft(childIssue.target_date) <= 3
-                                                  ? `Target date is in ${findHowManyDaysLeft(
-                                                      childIssue.target_date
-                                                    )} days`
-                                                  : "Target date"}
-                                              </span>
+                                            {assignee.avatar && assignee.avatar !== "" ? (
+                                              <div className="h-5 w-5 border-2 bg-white border-white rounded-full">
+                                                <Image
+                                                  src={assignee.avatar}
+                                                  height="100%"
+                                                  width="100%"
+                                                  className="rounded-full"
+                                                  alt={assignee.name}
+                                                />
+                                              </div>
+                                            ) : (
+                                              <div
+                                                className={`h-5 w-5 bg-gray-700 text-white border-2 border-white grid place-items-center rounded-full`}
+                                              >
+                                                {assignee.first_name.charAt(0)}
+                                              </div>
                                             )}
-                                          </span>
-                                        </>
-                                      )}
-                                      {key === "key" && (
-                                        <span className="text-xs">
-                                          {childIssue.project_detail?.identifier}-
-                                          {childIssue.sequence_id}
-                                        </span>
-                                      )}
-                                      {key === "state" && (
-                                        <>{addSpaceIfCamelCase(childIssue["state_detail"].name)}</>
-                                      )}
-                                      {key === "priority" && <>{childIssue.priority}</>}
-                                      {/* {key === "description" && <>{childIssue.description}</>} */}
-                                      {key === "assignee" ? (
-                                        <div className="flex items-center gap-1 text-xs">
-                                          {childIssue?.assignee_details?.length > 0 ? (
-                                            childIssue?.assignee_details?.map(
-                                              (assignee, index: number) => (
-                                                <div
-                                                  key={index}
-                                                  className={`relative z-[1] h-5 w-5 rounded-full ${
-                                                    index !== 0 ? "-ml-2.5" : ""
-                                                  }`}
-                                                >
-                                                  {assignee.avatar && assignee.avatar !== "" ? (
-                                                    <div className="h-5 w-5 border-2 bg-white border-white rounded-full">
-                                                      <Image
-                                                        src={assignee.avatar}
-                                                        height="100%"
-                                                        width="100%"
-                                                        className="rounded-full"
-                                                        alt={assignee.name}
-                                                      />
-                                                    </div>
-                                                  ) : (
-                                                    <div
-                                                      className={`h-5 w-5 bg-gray-700 text-white border-2 border-white grid place-items-center rounded-full`}
-                                                    >
-                                                      {assignee.first_name.charAt(0)}
-                                                    </div>
-                                                  )}
-                                                </div>
-                                              )
-                                            )
-                                          ) : (
-                                            <span>No assignee.</span>
-                                          )}
-                                        </div>
-                                      ) : null}
-                                    </div>
-                                  )
-                              )}
+                                          </div>
+                                        )
+                                      )
+                                    ) : (
+                                      <span>No assignee.</span>
+                                    )}
+                                  </div>
+                                )}
+                              </div>
                             </div>
                           </a>
                         </Link>
@@ -331,7 +304,7 @@ const SingleBoard: React.FC<Props> = ({
                       setIsIssueOpen(true);
                       if (selectedGroup !== null) {
                         setPreloadedData({
-                          state: stateId,
+                          state: stateId !== null ? stateId : undefined,
                           [selectedGroup]: groupTitle,
                           actionType: "createIssue",
                         });

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

@@ -7,8 +7,8 @@ import useSWR from "swr";
 import type { DropResult } from "react-beautiful-dnd";
 import { DragDropContext } from "react-beautiful-dnd";
 // services
-import stateServices from "lib/services/state.services";
-import issuesServices from "lib/services/issues.services";
+import stateServices from "lib/services/state.service";
+import issuesServices from "lib/services/issues.service";
 // hooks
 import useUser from "lib/hooks/useUser";
 // fetching keys
@@ -20,7 +20,7 @@ import CreateUpdateIssuesModal from "components/project/issues/CreateUpdateIssue
 // ui
 import { Spinner } from "ui";
 // types
-import type { IState, IIssue, Properties, NestedKeyOf, ProjectMember } from "types";
+import type { IState, IIssue, Properties, NestedKeyOf, IProjectMember } from "types";
 import ConfirmIssueDeletion from "../ConfirmIssueDeletion";
 import { TrashIcon } from "@heroicons/react/24/outline";
 
@@ -30,7 +30,7 @@ type Props = {
   groupedByIssues: {
     [key: string]: IIssue[];
   };
-  members: ProjectMember[] | undefined;
+  members: IProjectMember[] | undefined;
 };
 
 const BoardView: React.FC<Props> = ({ properties, selectedGroup, groupedByIssues, members }) => {
@@ -197,9 +197,10 @@ const BoardView: React.FC<Props> = ({ properties, selectedGroup, groupedByIssues
                           selectedGroup={selectedGroup}
                           groupTitle={singleGroup}
                           createdBy={
-                            members
-                              ? members?.find((m) => m.member.id === singleGroup)?.member.first_name
-                              : undefined
+                            selectedGroup === "created_by"
+                              ? members?.find((m) => m.member.id === singleGroup)?.member
+                                  .first_name ?? "loading..."
+                              : null
                           }
                           groupedByIssues={groupedByIssues}
                           index={index}
@@ -208,8 +209,8 @@ const BoardView: React.FC<Props> = ({ properties, selectedGroup, groupedByIssues
                           setPreloadedData={setPreloadedData}
                           stateId={
                             selectedGroup === "state_detail.name"
-                              ? states?.find((s) => s.name === singleGroup)?.id
-                              : undefined
+                              ? states?.find((s) => s.name === singleGroup)?.id ?? null
+                              : null
                           }
                           bgColor={
                             selectedGroup === "state_detail.name"

apps/app/components/project/issues/BoardView/state/ConfirmStateDeletion.tsx

@@ -4,7 +4,7 @@ import { mutate } from "swr";
 // headless ui
 import { Dialog, Transition } from "@headlessui/react";
 // services
-import stateServices from "lib/services/state.services";
+import stateServices from "lib/services/state.service";
 // fetch api
 import { STATE_LIST } from "constants/fetch-keys";
 // hooks
@@ -43,7 +43,7 @@ const ConfirmStateDeletion: React.FC<Props> = ({ isOpen, setIsOpen, data }) => {
         mutate<IState[]>(
           STATE_LIST(data.project),
           (prevData) => prevData?.filter((state) => state.id !== data?.id),
-          false,
+          false
         );
         handleClose();
       })
@@ -98,18 +98,15 @@ const ConfirmStateDeletion: React.FC<Props> = ({ isOpen, setIsOpen, data }) => {
                       />
                     </div>
                     <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
-                      <Dialog.Title
-                        as="h3"
-                        className="text-lg font-medium leading-6 text-gray-900"
-                      >
+                      <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-gray-900">
                         Delete State
                       </Dialog.Title>
                       <div className="mt-2">
                         <p className="text-sm text-gray-500">
                           Are you sure you want to delete state - {`"`}
                           <span className="italic">{data?.name}</span>
-                          {`"`} ? All of the data related to the state will be
-                          permanently removed. This action cannot be undone.
+                          {`"`} ? All of the data related to the state will be permanently removed.
+                          This action cannot be undone.
                         </p>
                       </div>
                     </div>

apps/app/components/project/issues/BoardView/state/CreateUpdateStateModal.tsx

@@ -8,7 +8,7 @@ import { TwitterPicker } from "react-color";
 // headless
 import { Dialog, Popover, Transition } from "@headlessui/react";
 // services
-import stateService from "lib/services/state.services";
+import stateService from "lib/services/state.service";
 // fetch keys
 import { STATE_LIST } from "constants/fetch-keys";
 // hooks

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

@@ -6,7 +6,7 @@ import { Dialog, Transition } from "@headlessui/react";
 // fetching keys
 import { PROJECT_ISSUES_LIST } from "constants/fetch-keys";
 // services
-import issueServices from "lib/services/issues.services";
+import issueServices from "lib/services/issues.service";
 // hooks
 import useUser from "lib/hooks/useUser";
 import useToast from "lib/hooks/useToast";

apps/app/components/project/issues/CreateUpdateIssueModal/SelectAssignee.tsx

@@ -11,7 +11,7 @@ import useUser from "lib/hooks/useUser";
 import { PROJECT_MEMBERS } from "constants/fetch-keys";
 // types
 import type { Control } from "react-hook-form";
-import type { IIssue, WorkspaceMember } from "types";
+import type { IIssue } from "types";
 import { UserIcon } from "@heroicons/react/24/outline";
 
 import { SearchListbox } from "ui";
@@ -23,7 +23,7 @@ type Props = {
 const SelectAssignee: React.FC<Props> = ({ control }) => {
   const { activeWorkspace, activeProject } = useUser();
 
-  const { data: people } = useSWR<WorkspaceMember[]>(
+  const { data: people } = useSWR(
     activeWorkspace && activeProject ? PROJECT_MEMBERS(activeProject.id) : null,
     activeWorkspace && activeProject
       ? () => projectServices.projectMembers(activeWorkspace.slug, activeProject.id)

apps/app/components/project/issues/CreateUpdateIssueModal/SelectLabels.tsx

@@ -6,7 +6,7 @@ import { useForm, Controller } from "react-hook-form";
 // headless ui
 import { Listbox, Transition } from "@headlessui/react";
 // services
-import issuesServices from "lib/services/issues.services";
+import issuesServices from "lib/services/issues.service";
 // hooks
 import useUser from "lib/hooks/useUser";
 // fetching keys

apps/app/components/project/issues/CreateUpdateIssueModal/SelectParentIssue.tsx

@@ -14,7 +14,7 @@ type Props = {
   control: Control<IIssue, any>;
   isOpen: boolean;
   setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
-  issues: IssueResponse | undefined;
+  issues: IIssue[];
 };
 
 const SelectParent: React.FC<Props> = ({ control, isOpen, setIsOpen, issues }) => {

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

@@ -16,7 +16,7 @@ import {
 // headless
 import { Dialog, Menu, Transition } from "@headlessui/react";
 // services
-import issuesServices from "lib/services/issues.services";
+import issuesServices from "lib/services/issues.service";
 // hooks
 import useUser from "lib/hooks/useUser";
 import useToast from "lib/hooks/useToast";
@@ -392,16 +392,16 @@ const CreateUpdateIssuesModal: React.FC<Props> = ({
                             /> */}
                           </div>
                           <div>
-                            <Input
+                            {/* <Input
                               id="target_date"
-                              label="Due Date"
+                              label="Target Date"
                               name="target_date"
                               type="date"
                               placeholder="Enter name"
                               autoComplete="off"
                               error={errors.target_date}
                               register={register}
-                            />
+                            /> */}
                           </div>
                           <div className="flex items-center flex-wrap gap-2">
                             <SelectState control={control} setIsOpen={setIsStateModalOpen} />
@@ -409,11 +409,25 @@ const CreateUpdateIssuesModal: React.FC<Props> = ({
                             <SelectPriority control={control} />
                             <SelectAssignee control={control} />
                             <SelectLabels control={control} />
+                            <Controller
+                              control={control}
+                              name="target_date"
+                              render={({ field: { value, onChange } }) => (
+                                <input
+                                  type="date"
+                                  value={value ?? ""}
+                                  onChange={(e: any) => {
+                                    onChange(e.target.value);
+                                  }}
+                                  className="hover:bg-gray-100 border rounded-md shadow-sm px-2 py-1 cursor-pointer focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 text-xs duration-300"
+                                />
+                              )}
+                            />
                             <SelectParent
                               control={control}
                               isOpen={parentIssueListModalOpen}
                               setIsOpen={setParentIssueListModalOpen}
-                              issues={issues}
+                              issues={issues?.results ?? []}
                             />
                             <Menu as="div" className="relative inline-block">
                               <Menu.Button className="grid place-items-center p-1 hover:bg-gray-100 border rounded-md shadow-sm cursor-pointer focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm duration-300">

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

@@ -2,35 +2,49 @@
 import React, { useState } from "react";
 // headless ui
 import { Combobox, Dialog, Transition } from "@headlessui/react";
+// ui
+import { Button } from "ui";
 // icons
 import { MagnifyingGlassIcon, RectangleStackIcon } from "@heroicons/react/24/outline";
 // types
-import { IIssue, IssueResponse } from "types";
+import { IIssue } from "types";
 import { classNames } from "constants/common";
 import useUser from "lib/hooks/useUser";
 
 type Props = {
   isOpen: boolean;
   handleClose: () => void;
+  value?: any;
   onChange: (...event: any[]) => void;
-  issues: IssueResponse | undefined;
+  issues: IIssue[];
+  title?: string;
+  multiple?: boolean;
 };
 
-const IssuesListModal: React.FC<Props> = ({ isOpen, handleClose: onClose, onChange, issues }) => {
+const IssuesListModal: React.FC<Props> = ({
+  isOpen,
+  handleClose: onClose,
+  value,
+  onChange,
+  issues,
+  title = "Issues",
+  multiple = false,
+}) => {
   const [query, setQuery] = useState("");
+  const [values, setValues] = useState<string[]>([]);
 
   const { activeProject } = useUser();
 
   const handleClose = () => {
     onClose();
     setQuery("");
+    setValues([]);
   };
 
   const filteredIssues: IIssue[] =
     query === ""
-      ? issues?.results ?? []
-      : issues?.results.filter((issue) => issue.name.toLowerCase().includes(query.toLowerCase())) ??
-        [];
+      ? issues ?? []
+      : issues?.filter((issue) => issue.name.toLowerCase().includes(query.toLowerCase())) ?? [];
 
   return (
     <>
@@ -59,7 +73,14 @@ const IssuesListModal: React.FC<Props> = ({ isOpen, handleClose: onClose, onChan
               leaveTo="opacity-0 scale-95"
             >
               <Dialog.Panel className="relative mx-auto max-w-2xl transform divide-y divide-gray-500 divide-opacity-10 rounded-xl bg-white bg-opacity-80 shadow-2xl ring-1 ring-black ring-opacity-5 backdrop-blur backdrop-filter transition-all">
-                <Combobox onChange={onChange}>
+                <Combobox
+                  value={value}
+                  onChange={(val) => {
+                    if (multiple) setValues(val);
+                    else onChange(val);
+                  }}
+                  // multiple={multiple}
+                >
                   <div className="relative m-1">
                     <MagnifyingGlassIcon
                       className="pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-gray-900 text-opacity-40"
@@ -80,7 +101,7 @@ const IssuesListModal: React.FC<Props> = ({ isOpen, handleClose: onClose, onChan
                       <li className="p-2">
                         {query === "" && (
                           <h2 className="mt-4 mb-2 px-3 text-xs font-semibold text-gray-900">
-                            Issues
+                            {title}
                           </h2>
                         )}
                         <ul className="text-sm text-gray-700">
@@ -95,20 +116,26 @@ const IssuesListModal: React.FC<Props> = ({ isOpen, handleClose: onClose, onChan
                                 )
                               }
                               onClick={() => {
-                                // setIssueIdFromList(issue.id);
-                                handleClose();
+                                if (!multiple) handleClose();
                               }}
                             >
-                              <span
-                                className={`h-1.5 w-1.5 block rounded-full`}
-                                style={{
-                                  backgroundColor: issue.state_detail.color,
-                                }}
-                              />
-                              <span className="text-xs text-gray-500">
-                                {activeProject?.identifier}-{issue.sequence_id}
-                              </span>{" "}
-                              {issue.name}
+                              {({ selected }) => (
+                                <>
+                                  {multiple ? (
+                                    <input type="checkbox" checked={selected} readOnly />
+                                  ) : null}
+                                  <span
+                                    className="flex-shrink-0 h-1.5 w-1.5 block rounded-full"
+                                    style={{
+                                      backgroundColor: issue.state_detail.color,
+                                    }}
+                                  />
+                                  <span className="flex-shrink-0 text-xs text-gray-500">
+                                    {activeProject?.identifier}-{issue.sequence_id}
+                                  </span>{" "}
+                                  {issue.name}
+                                </>
+                              )}
                             </Combobox.Option>
                           ))}
                         </ul>
@@ -128,6 +155,16 @@ const IssuesListModal: React.FC<Props> = ({ isOpen, handleClose: onClose, onChan
                     </div>
                   )}
                 </Combobox>
+                {multiple ? (
+                  <div className="flex justify-end items-center gap-2 p-3">
+                    <Button type="button" theme="danger" size="sm" onClick={handleClose}>
+                      Cancel
+                    </Button>
+                    <Button type="button" size="sm" onClick={() => onChange(values)}>
+                      Add to Cycle
+                    </Button>
+                  </div>
+                ) : null}
               </Dialog.Panel>
             </Transition.Child>
           </div>

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

@@ -1,5 +1,5 @@
 // react
-import React, { useEffect, useState } from "react";
+import React, { useState } from "react";
 // next
 import Link from "next/link";
 import Image from "next/image";
@@ -10,23 +10,17 @@ import { Listbox, Transition } from "@headlessui/react";
 // icons
 import { PencilIcon, TrashIcon } from "@heroicons/react/24/outline";
 // types
-import { IIssue, IssueResponse, IState, NestedKeyOf, Properties, WorkspaceMember } from "types";
+import { IIssue, IssueResponse, NestedKeyOf, Properties } from "types";
 // hooks
 import useUser from "lib/hooks/useUser";
 // fetch keys
 import { PRIORITIES } from "constants/";
 import { PROJECT_ISSUES_LIST, WORKSPACE_MEMBERS } from "constants/fetch-keys";
 // services
-import issuesServices from "lib/services/issues.services";
+import issuesServices from "lib/services/issues.service";
 import workspaceService from "lib/services/workspace.service";
 // constants
-import {
-  addSpaceIfCamelCase,
-  classNames,
-  renderShortNumericDateFormat,
-  replaceUnderscoreIfSnakeCase,
-} from "constants/common";
-import IssuePreviewModal from "../PreviewModal";
+import { addSpaceIfCamelCase, classNames, renderShortNumericDateFormat } from "constants/common";
 
 // types
 type Props = {
@@ -44,9 +38,6 @@ const ListView: React.FC<Props> = ({
   setSelectedIssue,
   handleDeleteIssue,
 }) => {
-  const [issuePreviewModal, setIssuePreviewModal] = useState(false);
-  const [previewModalIssueId, setPreviewModalIssueId] = useState<string | null>(null);
-
   const { activeWorkspace, activeProject, states } = useUser();
 
   const partialUpdateIssue = (formData: Partial<IIssue>, issueId: string) => {
@@ -69,375 +60,355 @@ const ListView: React.FC<Props> = ({
       });
   };
 
-  const { data: people } = useSWR<WorkspaceMember[]>(
+  const { data: people } = useSWR(
     activeWorkspace ? WORKSPACE_MEMBERS : null,
     activeWorkspace ? () => workspaceService.workspaceMembers(activeWorkspace.slug) : null
   );
 
-  const handleHover = (issueId: string) => {
-    document.addEventListener("keydown", (e) => {
-      // if (e.code === "Space") {
-      //   e.preventDefault();
-      //   setPreviewModalIssueId(issueId);
-      //   setIssuePreviewModal(true);
-      // }
-    });
-  };
-
   return (
-    <div className="mt-4 flex flex-col">
-      <IssuePreviewModal
-        isOpen={issuePreviewModal}
-        setIsOpen={setIssuePreviewModal}
-        issueId={previewModalIssueId}
-      />
-      <div className="overflow-x-auto">
-        <div className="inline-block min-w-full p-0.5 align-middle">
-          <div className="overflow-hidden shadow ring-1 ring-black ring-opacity-5 md:rounded-lg">
-            <table className="min-w-full">
-              <thead className="bg-gray-100">
-                <tr>
-                  <th
-                    scope="col"
-                    className="px-3 py-3.5 text-left uppercase text-sm font-semibold text-gray-900"
-                  >
-                    NAME
-                  </th>
-                  {Object.keys(properties).map(
-                    (key) =>
-                      properties[key as keyof Properties] && (
-                        <th
-                          key={key}
-                          scope="col"
-                          className="px-3 py-3.5 text-left uppercase text-sm font-semibold text-gray-900"
-                        >
-                          {replaceUnderscoreIfSnakeCase(key)}
-                        </th>
-                      )
-                  )}
-                  <th
-                    scope="col"
-                    className="px-3 py-3.5 text-right text-sm font-semibold text-gray-900"
-                  >
-                    ACTIONS
-                  </th>
-                </tr>
-              </thead>
-              <tbody className="bg-white">
-                {Object.keys(groupedByIssues).map((singleGroup) => (
-                  <React.Fragment key={singleGroup}>
-                    {selectedGroup !== null ? (
-                      <tr className="border-t border-gray-200">
-                        <th
-                          colSpan={14}
-                          scope="colgroup"
-                          className="bg-gray-50 px-4 py-2 text-left font-medium text-gray-900 capitalize"
-                        >
+    <div className="mt-4 flex flex-col space-y-5">
+      {Object.keys(groupedByIssues).map((singleGroup) => (
+        <div key={singleGroup} className="overflow-x-auto">
+          <div className="inline-block min-w-full p-0.5 align-middle">
+            <div className="overflow-hidden shadow ring-1 ring-black ring-opacity-5 md:rounded-lg">
+              <table className="min-w-full">
+                {selectedGroup !== null ? (
+                  <thead className="bg-gray-100">
+                    <tr>
+                      <th
+                        colSpan={14}
+                        scope="col"
+                        className="px-3 py-3.5 text-left uppercase text-sm font-semibold text-gray-900"
+                      >
+                        <div className="flex items-center gap-2">
+                          {selectedGroup === "state_detail.name" ? (
+                            <span
+                              className="flex-shrink-0 h-1.5 w-1.5 block rounded-full"
+                              style={{
+                                backgroundColor: states?.find((s) => s.name === singleGroup)?.color,
+                              }}
+                            ></span>
+                          ) : null}
                           {singleGroup === null || singleGroup === "null"
                             ? selectedGroup === "priority" && "No priority"
                             : addSpaceIfCamelCase(singleGroup)}
                           <span className="ml-2 text-gray-500 font-normal text-sm">
                             {groupedByIssues[singleGroup as keyof IIssue].length}
                           </span>
-                        </th>
-                      </tr>
-                    ) : null}
-                    {groupedByIssues[singleGroup].length > 0
-                      ? groupedByIssues[singleGroup].map((issue: IIssue, index: number) => {
-                          const assignees = [
-                            ...(issue?.assignees_list ?? []),
-                            ...(issue?.assignees ?? []),
-                          ]?.map(
-                            (assignee) =>
-                              people?.find((p) => p.member.id === assignee)?.member.email
-                          );
+                        </div>
+                      </th>
+                    </tr>
+                  </thead>
+                ) : (
+                  <thead className="bg-gray-100">
+                    <tr>
+                      <th
+                        colSpan={14}
+                        scope="col"
+                        className="px-3 py-3.5 text-left uppercase text-sm font-semibold text-gray-900"
+                      >
+                        ALL ISSUES
+                        <span className="ml-2 text-gray-500 font-normal text-sm">
+                          {groupedByIssues[singleGroup as keyof IIssue].length}
+                        </span>
+                      </th>
+                    </tr>
+                  </thead>
+                )}
+                <tbody className="bg-white">
+                  {groupedByIssues[singleGroup].length > 0
+                    ? groupedByIssues[singleGroup].map((issue: IIssue, index: number) => {
+                        const assignees = [
+                          ...(issue?.assignees_list ?? []),
+                          ...(issue?.assignees ?? []),
+                        ]?.map(
+                          (assignee) => people?.find((p) => p.member.id === assignee)?.member.email
+                        );
 
-                          return (
-                            <tr
-                              key={issue.id}
-                              className={classNames(
-                                index === 0 ? "border-gray-300" : "border-gray-200",
-                                "border-t"
-                              )}
-                              onMouseEnter={() => handleHover(issue.id)}
-                            >
-                              <td className="px-3 py-4 text-sm font-medium text-gray-900 w-[15rem]">
-                                <Link href={`/projects/${issue.project}/issues/${issue.id}`}>
-                                  <a className="hover:text-theme duration-300">{issue.name}</a>
-                                </Link>
-                              </td>
-                              {Object.keys(properties).map(
-                                (key) =>
-                                  properties[key as keyof Properties] && (
-                                    <React.Fragment key={key}>
-                                      {(key as keyof Properties) === "key" ? (
-                                        <td className="px-3 py-4 font-medium text-gray-900 text-xs whitespace-nowrap">
-                                          {activeProject?.identifier}-{issue.sequence_id}
-                                        </td>
-                                      ) : (key as keyof Properties) === "priority" ? (
-                                        <td className="px-3 py-4 text-sm font-medium text-gray-900 relative">
-                                          <Listbox
-                                            as="div"
-                                            value={issue.priority}
-                                            onChange={(data: string) => {
-                                              partialUpdateIssue({ priority: data }, issue.id);
-                                            }}
-                                            className="flex-shrink-0"
-                                          >
-                                            {({ open }) => (
-                                              <>
-                                                <div className="">
-                                                  <Listbox.Button className="inline-flex items-center whitespace-nowrap rounded-full bg-gray-50 py-1 px-0.5 text-xs font-medium text-gray-500 hover:bg-gray-100 border">
-                                                    <span
-                                                      className={classNames(
-                                                        issue.priority ? "" : "text-gray-900",
-                                                        "hidden truncate capitalize sm:block w-16"
-                                                      )}
-                                                    >
-                                                      {issue.priority ?? "None"}
-                                                    </span>
-                                                  </Listbox.Button>
-
-                                                  <Transition
-                                                    show={open}
-                                                    as={React.Fragment}
-                                                    leave="transition ease-in duration-100"
-                                                    leaveFrom="opacity-100"
-                                                    leaveTo="opacity-0"
+                        return (
+                          <tr
+                            key={issue.id}
+                            className={classNames(
+                              index === 0 ? "border-gray-300" : "border-gray-200",
+                              "border-t"
+                            )}
+                          >
+                            <td className="px-3 py-4 text-sm font-medium text-gray-900 w-[15rem]">
+                              <Link href={`/projects/${issue.project}/issues/${issue.id}`}>
+                                <a className="hover:text-theme duration-300">{issue.name}</a>
+                              </Link>
+                            </td>
+                            {Object.keys(properties).map(
+                              (key) =>
+                                properties[key as keyof Properties] && (
+                                  <React.Fragment key={key}>
+                                    {(key as keyof Properties) === "key" ? (
+                                      <td className="px-3 py-4 font-medium text-gray-900 text-xs whitespace-nowrap">
+                                        {activeProject?.identifier}-{issue.sequence_id}
+                                      </td>
+                                    ) : (key as keyof Properties) === "priority" ? (
+                                      <td className="px-3 py-4 text-sm font-medium text-gray-900 relative">
+                                        <Listbox
+                                          as="div"
+                                          value={issue.priority}
+                                          onChange={(data: string) => {
+                                            partialUpdateIssue({ priority: data }, issue.id);
+                                          }}
+                                          className="flex-shrink-0"
+                                        >
+                                          {({ open }) => (
+                                            <>
+                                              <div className="">
+                                                <Listbox.Button className="inline-flex items-center whitespace-nowrap rounded-full bg-gray-50 py-1 px-0.5 text-xs font-medium text-gray-500 hover:bg-gray-100 border">
+                                                  <span
+                                                    className={classNames(
+                                                      issue.priority ? "" : "text-gray-900",
+                                                      "hidden truncate capitalize sm:block w-16"
+                                                    )}
                                                   >
-                                                    <Listbox.Options className="absolute z-10 mt-1 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">
-                                                      {PRIORITIES?.map((priority) => (
-                                                        <Listbox.Option
-                                                          key={priority}
-                                                          className={({ active }) =>
-                                                            classNames(
-                                                              active ? "bg-indigo-50" : "bg-white",
-                                                              "cursor-pointer capitalize select-none px-3 py-2"
+                                                    {issue.priority ?? "None"}
+                                                  </span>
+                                                </Listbox.Button>
+
+                                                <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 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">
+                                                    {PRIORITIES?.map((priority) => (
+                                                      <Listbox.Option
+                                                        key={priority}
+                                                        className={({ active }) =>
+                                                          classNames(
+                                                            active ? "bg-indigo-50" : "bg-white",
+                                                            "cursor-pointer capitalize select-none px-3 py-2"
+                                                          )
+                                                        }
+                                                        value={priority}
+                                                      >
+                                                        {priority}
+                                                      </Listbox.Option>
+                                                    ))}
+                                                  </Listbox.Options>
+                                                </Transition>
+                                              </div>
+                                            </>
+                                          )}
+                                        </Listbox>
+                                      </td>
+                                    ) : (key as keyof Properties) === "assignee" ? (
+                                      <td className="px-3 py-4 text-sm font-medium text-gray-900 relative">
+                                        <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 },
+                                              issue.id
+                                            );
+                                          }}
+                                          className="flex-shrink-0"
+                                        >
+                                          {({ open }) => (
+                                            <>
+                                              <div>
+                                                <Listbox.Button className="rounded-full bg-gray-50 px-5 py-1 text-xs text-gray-500 hover:bg-gray-100 border">
+                                                  {() => {
+                                                    if (assignees.length > 0)
+                                                      return (
+                                                        <>
+                                                          {assignees.map((assignee, index) => (
+                                                            <div
+                                                              key={index}
+                                                              className={
+                                                                "hidden truncate sm:block text-left"
+                                                              }
+                                                            >
+                                                              {assignee}
+                                                            </div>
+                                                          ))}
+                                                        </>
+                                                      );
+                                                    else return <span>None</span>;
+                                                  }}
+                                                </Listbox.Button>
+
+                                                <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 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">
+                                                    {people?.map((person) => (
+                                                      <Listbox.Option
+                                                        key={person.id}
+                                                        className={({ active }) =>
+                                                          classNames(
+                                                            active ? "bg-indigo-50" : "bg-white",
+                                                            "cursor-pointer select-none px-3 py-2"
+                                                          )
+                                                        }
+                                                        value={person.member.id}
+                                                      >
+                                                        <div
+                                                          className={`flex items-center gap-x-1 ${
+                                                            assignees.includes(
+                                                              person.member.first_name
                                                             )
-                                                          }
-                                                          value={priority}
+                                                              ? "font-medium"
+                                                              : "font-normal"
+                                                          }`}
                                                         >
-                                                          {priority}
-                                                        </Listbox.Option>
-                                                      ))}
-                                                    </Listbox.Options>
-                                                  </Transition>
-                                                </div>
-                                              </>
-                                            )}
-                                          </Listbox>
-                                        </td>
-                                      ) : (key as keyof Properties) === "assignee" ? (
-                                        <td className="px-3 py-4 text-sm font-medium text-gray-900 relative">
-                                          <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 },
-                                                issue.id
-                                              );
-                                            }}
-                                            className="flex-shrink-0"
-                                          >
-                                            {({ open }) => (
-                                              <>
-                                                <div>
-                                                  <Listbox.Button className="rounded-full bg-gray-50 px-5 py-1 text-xs text-gray-500 hover:bg-gray-100 border">
-                                                    {() => {
-                                                      if (assignees.length > 0)
-                                                        return (
-                                                          <>
-                                                            {assignees.map((assignee, index) => (
-                                                              <div
-                                                                key={index}
-                                                                className={
-                                                                  "hidden truncate sm:block text-left"
-                                                                }
-                                                              >
-                                                                {assignee}
-                                                              </div>
-                                                            ))}
-                                                          </>
-                                                        );
-                                                      else return <span>None</span>;
-                                                    }}
-                                                  </Listbox.Button>
+                                                          {person.member.avatar &&
+                                                          person.member.avatar !== "" ? (
+                                                            <div className="relative w-4 h-4">
+                                                              <Image
+                                                                src={person.member.avatar}
+                                                                alt="avatar"
+                                                                className="rounded-full"
+                                                                layout="fill"
+                                                                objectFit="cover"
+                                                              />
+                                                            </div>
+                                                          ) : (
+                                                            <p>
+                                                              {person.member.first_name.charAt(0)}
+                                                            </p>
+                                                          )}
+                                                          <p>{person.member.first_name}</p>
+                                                        </div>
+                                                      </Listbox.Option>
+                                                    ))}
+                                                  </Listbox.Options>
+                                                </Transition>
+                                              </div>
+                                            </>
+                                          )}
+                                        </Listbox>
+                                      </td>
+                                    ) : (key as keyof Properties) === "state" ? (
+                                      <td className="px-3 py-4 text-sm font-medium text-gray-900 relative">
+                                        <Listbox
+                                          as="div"
+                                          value={issue.state}
+                                          onChange={(data: string) => {
+                                            partialUpdateIssue({ state: data }, issue.id);
+                                          }}
+                                          className="flex-shrink-0"
+                                        >
+                                          {({ open }) => (
+                                            <>
+                                              <div>
+                                                <Listbox.Button
+                                                  className="inline-flex items-center whitespace-nowrap rounded-full px-2 py-1 text-xs font-medium text-gray-500 hover:bg-gray-100 border"
+                                                  style={{
+                                                    border: `2px solid ${issue.state_detail.color}`,
+                                                    backgroundColor: `${issue.state_detail.color}20`,
+                                                  }}
+                                                >
+                                                  <span
+                                                    className={classNames(
+                                                      issue.state ? "" : "text-gray-900",
+                                                      "hidden capitalize sm:block w-16"
+                                                    )}
+                                                  >
+                                                    {addSpaceIfCamelCase(issue.state_detail.name)}
+                                                  </span>
+                                                </Listbox.Button>
 
-                                                  <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 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">
-                                                      {people?.map((person) => (
-                                                        <Listbox.Option
-                                                          key={person.id}
-                                                          className={({ active }) =>
-                                                            classNames(
-                                                              active ? "bg-indigo-50" : "bg-white",
-                                                              "cursor-pointer select-none px-3 py-2"
-                                                            )
-                                                          }
-                                                          value={person.member.id}
-                                                        >
-                                                          <div
-                                                            className={`flex items-center gap-x-1 ${
-                                                              assignees.includes(
-                                                                person.member.first_name
-                                                              )
-                                                                ? "font-medium"
-                                                                : "font-normal"
-                                                            }`}
-                                                          >
-                                                            {person.member.avatar &&
-                                                            person.member.avatar !== "" ? (
-                                                              <div className="relative w-4 h-4">
-                                                                <Image
-                                                                  src={person.member.avatar}
-                                                                  alt="avatar"
-                                                                  className="rounded-full"
-                                                                  layout="fill"
-                                                                  objectFit="cover"
-                                                                />
-                                                              </div>
-                                                            ) : (
-                                                              <p>
-                                                                {person.member.first_name.charAt(0)}
-                                                              </p>
-                                                            )}
-                                                            <p>{person.member.first_name}</p>
-                                                          </div>
-                                                        </Listbox.Option>
-                                                      ))}
-                                                    </Listbox.Options>
-                                                  </Transition>
-                                                </div>
-                                              </>
-                                            )}
-                                          </Listbox>
-                                        </td>
-                                      ) : (key as keyof Properties) === "state" ? (
-                                        <td className="px-3 py-4 text-sm font-medium text-gray-900 relative">
-                                          <Listbox
-                                            as="div"
-                                            value={issue.state}
-                                            onChange={(data: string) => {
-                                              partialUpdateIssue({ state: data }, issue.id);
-                                            }}
-                                            className="flex-shrink-0"
-                                          >
-                                            {({ open }) => (
-                                              <>
-                                                <div>
-                                                  <Listbox.Button
-                                                    className="inline-flex items-center whitespace-nowrap rounded-full px-2 py-1 text-xs font-medium text-gray-500 hover:bg-gray-100 border"
-                                                    style={{
-                                                      border: `2px solid ${issue.state_detail.color}`,
-                                                      backgroundColor: `${issue.state_detail.color}20`,
-                                                    }}
-                                                  >
-                                                    <span
-                                                      className={classNames(
-                                                        issue.state ? "" : "text-gray-900",
-                                                        "hidden capitalize sm:block w-16"
-                                                      )}
-                                                    >
-                                                      {addSpaceIfCamelCase(issue.state_detail.name)}
-                                                    </span>
-                                                  </Listbox.Button>
-
-                                                  <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 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">
-                                                      {states?.map((state) => (
-                                                        <Listbox.Option
-                                                          key={state.id}
-                                                          className={({ active }) =>
-                                                            classNames(
-                                                              active ? "bg-indigo-50" : "bg-white",
-                                                              "cursor-pointer select-none px-3 py-2"
-                                                            )
-                                                          }
-                                                          value={state.id}
-                                                        >
-                                                          {addSpaceIfCamelCase(state.name)}
-                                                        </Listbox.Option>
-                                                      ))}
-                                                    </Listbox.Options>
-                                                  </Transition>
-                                                </div>
-                                              </>
-                                            )}
-                                          </Listbox>
-                                        </td>
-                                      ) : (key as keyof Properties) === "target_date" ? (
-                                        <td className="px-3 py-4 text-sm font-medium text-gray-900 whitespace-nowrap">
-                                          {issue.target_date
-                                            ? renderShortNumericDateFormat(issue.target_date)
-                                            : "-"}
-                                        </td>
-                                      ) : (
-                                        <td className="px-3 py-4 text-sm font-medium text-gray-900 relative capitalize">
-                                          {issue[key as keyof IIssue] ??
-                                            (issue[key as keyof IIssue] as any)?.name ??
-                                            "None"}
-                                        </td>
-                                      )}
-                                    </React.Fragment>
-                                  )
-                              )}
-                              <td className="px-3">
-                                <div className="flex justify-end items-center gap-2">
-                                  <button
-                                    type="button"
-                                    className="flex items-center bg-blue-100 text-blue-600 hover:bg-blue-200 duration-300 font-medium px-2 py-1 rounded-md text-sm outline-none"
-                                    onClick={() => {
-                                      setSelectedIssue({
-                                        ...issue,
-                                        actionType: "edit",
-                                      });
-                                    }}
-                                  >
-                                    <PencilIcon className="h-3 w-3" />
-                                  </button>
-                                  <button
-                                    type="button"
-                                    className="flex items-center bg-red-100 text-red-600 hover:bg-red-200 duration-300 font-medium px-2 py-1 rounded-md text-sm outline-none"
-                                    onClick={() => {
-                                      handleDeleteIssue(issue.id);
-                                    }}
-                                  >
-                                    <TrashIcon className="h-3 w-3" />
-                                  </button>
-                                </div>
-                              </td>
-                            </tr>
-                          );
-                        })
-                      : null}
-                  </React.Fragment>
-                ))}
-              </tbody>
-            </table>
+                                                <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 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">
+                                                    {states?.map((state) => (
+                                                      <Listbox.Option
+                                                        key={state.id}
+                                                        className={({ active }) =>
+                                                          classNames(
+                                                            active ? "bg-indigo-50" : "bg-white",
+                                                            "cursor-pointer select-none px-3 py-2"
+                                                          )
+                                                        }
+                                                        value={state.id}
+                                                      >
+                                                        {addSpaceIfCamelCase(state.name)}
+                                                      </Listbox.Option>
+                                                    ))}
+                                                  </Listbox.Options>
+                                                </Transition>
+                                              </div>
+                                            </>
+                                          )}
+                                        </Listbox>
+                                      </td>
+                                    ) : (key as keyof Properties) === "target_date" ? (
+                                      <td className="px-3 py-4 text-sm font-medium text-gray-900 whitespace-nowrap">
+                                        {issue.target_date
+                                          ? renderShortNumericDateFormat(issue.target_date)
+                                          : "-"}
+                                      </td>
+                                    ) : (
+                                      <td className="px-3 py-4 text-sm font-medium text-gray-900 relative capitalize">
+                                        {issue[key as keyof IIssue] ??
+                                          (issue[key as keyof IIssue] as any)?.name ??
+                                          "None"}
+                                      </td>
+                                    )}
+                                  </React.Fragment>
+                                )
+                            )}
+                            <td className="px-3">
+                              <div className="flex justify-end items-center gap-2">
+                                <button
+                                  type="button"
+                                  className="flex items-center bg-blue-100 text-blue-600 hover:bg-blue-200 duration-300 font-medium px-2 py-1 rounded-md text-sm outline-none"
+                                  onClick={() => {
+                                    setSelectedIssue({
+                                      ...issue,
+                                      actionType: "edit",
+                                    });
+                                  }}
+                                >
+                                  <PencilIcon className="h-3 w-3" />
+                                </button>
+                                <button
+                                  type="button"
+                                  className="flex items-center bg-red-100 text-red-600 hover:bg-red-200 duration-300 font-medium px-2 py-1 rounded-md text-sm outline-none"
+                                  onClick={() => {
+                                    handleDeleteIssue(issue.id);
+                                  }}
+                                >
+                                  <TrashIcon className="h-3 w-3" />
+                                </button>
+                              </div>
+                            </td>
+                          </tr>
+                        );
+                      })
+                    : null}
+                </tbody>
+              </table>
+            </div>
           </div>
         </div>
-      </div>
+      ))}
     </div>
   );
 };
 
-export default ListView;
+export default ListView;

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

@@ -1,138 +0,0 @@
-// next
-import { useRouter } from "next/router";
-// react
-import { Fragment } from "react";
-// headless ui
-import { Dialog, Transition } from "@headlessui/react";
-// hooks
-import useUser from "lib/hooks/useUser";
-// services
-import issuesServices from "lib/services/issues.services";
-import projectService from "lib/services/project.service";
-// swr
-import useSWR from "swr";
-// types
-import { IIssue, ProjectMember } from "types";
-// constants
-import { PROJECT_ISSUES_DETAILS, PROJECT_MEMBERS } from "constants/fetch-keys";
-import { Button } from "ui";
-import { ChartBarIcon, Squares2X2Icon, TagIcon, UserIcon } from "@heroicons/react/24/outline";
-
-type Props = {
-  isOpen: boolean;
-  setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
-  issueId: string | null;
-};
-
-const IssuePreviewModal = ({ isOpen, setIsOpen, issueId }: Props) => {
-  const closeModal = () => {
-    setIsOpen(false);
-  };
-
-  const { activeWorkspace, activeProject } = useUser();
-
-  const router = useRouter();
-
-  const { data: issueDetails } = useSWR<IIssue | null>(
-    activeWorkspace && activeProject && issueId ? PROJECT_ISSUES_DETAILS(issueId) : null,
-    activeWorkspace && activeProject && issueId
-      ? () => issuesServices.getIssue(activeWorkspace.slug, activeProject.id, issueId)
-      : null
-  );
-
-  const { data: users } = useSWR<ProjectMember[] | null>(
-    activeWorkspace && activeProject ? PROJECT_MEMBERS(activeProject.id) : null,
-    activeWorkspace && activeProject
-      ? () => projectService.projectMembers(activeWorkspace.slug, activeProject.id)
-      : null
-  );
-
-  return (
-    <>
-      <Transition.Root appear show={isOpen} as={Fragment}>
-        <Dialog as="div" className="relative z-10" onClose={closeModal}>
-          <Transition.Child
-            as={Fragment}
-            enter="ease-out duration-300"
-            enterFrom="opacity-0"
-            enterTo="opacity-100"
-            leave="ease-in duration-200"
-            leaveFrom="opacity-100"
-            leaveTo="opacity-0"
-          >
-            <div className="fixed inset-0 bg-black bg-opacity-25" />
-          </Transition.Child>
-
-          <div className="fixed inset-0 overflow-y-auto">
-            <div className="flex min-h-full items-center justify-center p-4 text-center">
-              <Transition.Child
-                as={Fragment}
-                enter="ease-out duration-300"
-                enterFrom="opacity-0 scale-95"
-                enterTo="opacity-100 scale-100"
-                leave="ease-in duration-200"
-                leaveFrom="opacity-100 scale-100"
-                leaveTo="opacity-0 scale-95"
-              >
-                <Dialog.Panel className="w-full max-w-3xl transform overflow-hidden rounded-2xl bg-white p-6 text-left align-middle shadow-xl transition-all">
-                  <Dialog.Title
-                    as="h3"
-                    className="text-xl flex flex-col gap-1 font-medium leading-6 text-gray-900"
-                  >
-                    {issueDetails?.project_detail.identifier}-{issueDetails?.sequence_id}{" "}
-                    {issueDetails?.name}
-                    <span className="text-sm text-gray-500 font-normal">
-                      Created by{" "}
-                      {users?.find((u) => u.id === issueDetails?.created_by)?.member.first_name}
-                    </span>
-                  </Dialog.Title>
-                  <div className="mt-4">
-                    <p className="text-sm text-gray-500">{issueDetails?.description}</p>
-                  </div>
-                  <div className="mt-4 flex flex-wrap gap-2">
-                    <span className="flex items-center gap-1 hover:bg-gray-100 border rounded-md shadow-sm px-2 py-1 sm:text-sm">
-                      <Squares2X2Icon className="h-3 w-3" />
-                      {issueDetails?.state_detail.name}
-                    </span>
-                    <span className="flex items-center gap-1 hover:bg-gray-100 border rounded-md shadow-sm px-2 py-1 capitalize sm:text-sm">
-                      <ChartBarIcon className="h-3 w-3" />
-                      {issueDetails?.priority}
-                    </span>
-                    <span className="flex items-center gap-1 hover:bg-gray-100 border rounded-md shadow-sm px-2 py-1 capitalize sm:text-sm">
-                      <TagIcon className="h-3 w-3" />
-                      {issueDetails?.label_details && issueDetails.label_details.length > 0
-                        ? issueDetails.label_details.map((label) => (
-                            <span key={label.id}>{label.name}</span>
-                          ))
-                        : "None"}
-                    </span>
-                    <span className="flex items-center gap-1 hover:bg-gray-100 border rounded-md shadow-sm px-2 py-1 capitalize sm:text-sm">
-                      <UserIcon className="h-3 w-3" />
-                      {issueDetails?.assignee_details && issueDetails.assignee_details.length > 0
-                        ? issueDetails.assignee_details.map((assignee) => (
-                            <span key={assignee.id}>{assignee.first_name}</span>
-                          ))
-                        : "None"}
-                    </span>
-                  </div>
-                  <div className="mt-4 flex gap-3 justify-end">
-                    <Button
-                      onClick={() =>
-                        router.push(`/projects/${activeProject?.id}/issues/${issueId}`)
-                      }
-                    >
-                      View in Detail
-                    </Button>
-                    <Button onClick={closeModal}>Close</Button>
-                  </div>
-                </Dialog.Panel>
-              </Transition.Child>
-            </div>
-          </div>
-        </Dialog>
-      </Transition.Root>
-    </>
-  );
-};
-
-export default IssuePreviewModal;

apps/app/components/project/issues/issue-detail/IssueDetailSidebar.tsx

@@ -4,13 +4,14 @@ import useSWR from "swr";
 // headless ui
 import { Listbox, Transition } from "@headlessui/react";
 // react hook form
-import { useForm, Controller } from "react-hook-form";
+import { useForm, Controller, UseFormWatch } from "react-hook-form";
 // services
-import stateServices from "lib/services/state.services";
-import issuesServices from "lib/services/issues.services";
+import stateServices from "lib/services/state.service";
+import issuesServices from "lib/services/issues.service";
 import workspaceService from "lib/services/workspace.service";
 // hooks
 import useUser from "lib/hooks/useUser";
+import useToast from "lib/hooks/useToast";
 // fetching keys
 import {
   PROJECT_ISSUES_LIST,
@@ -20,6 +21,7 @@ import {
 } from "constants/fetch-keys";
 // commons
 import { classNames, copyTextToClipboard } from "constants/common";
+import { PRIORITIES } from "constants/";
 // ui
 import { Input, Button, Spinner } from "ui";
 import { Popover } from "@headlessui/react";
@@ -38,25 +40,33 @@ import {
 } from "@heroicons/react/24/outline";
 // types
 import type { Control } from "react-hook-form";
-import type { IIssue, IIssueLabels, IssueResponse, IState, WorkspaceMember } from "types";
+import type { IIssue, IIssueLabels, IssueResponse, IState, NestedKeyOf } from "types";
 import { TwitterPicker } from "react-color";
-import useToast from "lib/hooks/useToast";
+import IssuesListModal from "components/project/issues/IssuesListModal";
 
 type Props = {
   control: Control<IIssue, any>;
   submitChanges: (formData: Partial<IIssue>) => void;
   issueDetail: IIssue | undefined;
+  watch: UseFormWatch<IIssue>;
 };
 
-const PRIORITIES = ["high", "medium", "low"];
-
 const defaultValues: Partial<IIssueLabels> = {
   name: "",
   colour: "#ff0000",
 };
 
-const IssueDetailSidebar: React.FC<Props> = ({ control, submitChanges, issueDetail }) => {
-  const { activeWorkspace, activeProject, cycles } = useUser();
+const IssueDetailSidebar: React.FC<Props> = ({
+  control,
+  watch: watchIssue,
+  submitChanges,
+  issueDetail,
+}) => {
+  const [isBlockerModalOpen, setIsBlockerModalOpen] = useState(false);
+  const [isBlockedModalOpen, setIsBlockedModalOpen] = useState(false);
+  const [isParentModalOpen, setIsParentModalOpen] = useState(false);
+
+  const { activeWorkspace, activeProject, cycles, issues } = useUser();
 
   const { setToastAlert } = useToast();
 
@@ -67,20 +77,11 @@ const IssueDetailSidebar: React.FC<Props> = ({ control, submitChanges, issueDeta
       : null
   );
 
-  const { data: people } = useSWR<WorkspaceMember[]>(
-    activeWorkspace ? WORKSPACE_MEMBERS : null,
+  const { data: people } = useSWR(
+    activeWorkspace ? WORKSPACE_MEMBERS(activeWorkspace.slug) : null,
     activeWorkspace ? () => workspaceService.workspaceMembers(activeWorkspace.slug) : null
   );
 
-  const { data: projectIssues } = useSWR<IssueResponse>(
-    activeProject && activeWorkspace
-      ? PROJECT_ISSUES_LIST(activeWorkspace.slug, activeProject.id)
-      : null,
-    activeProject && activeWorkspace
-      ? () => issuesServices.getIssues(activeWorkspace.slug, activeProject.id)
-      : null
-  );
-
   const { data: issueLabels, mutate: issueLabelMutate } = useSWR<IIssueLabels[]>(
     activeProject && activeWorkspace ? PROJECT_ISSUE_LABELS(activeProject.id) : null,
     activeProject && activeWorkspace
@@ -110,7 +111,19 @@ const IssueDetailSidebar: React.FC<Props> = ({ control, submitChanges, issueDeta
       });
   };
 
-  const sidebarSections = [
+  const sidebarSections: Array<
+    Array<{
+      label: string;
+      name: NestedKeyOf<IIssue>;
+      canSelectMultipleOptions: boolean;
+      icon: (props: any) => JSX.Element;
+      options?: Array<{ label: string; value: any }>;
+      modal: boolean;
+      issuesList?: Array<IIssue>;
+      isOpen?: boolean;
+      setIsOpen?: (arg: boolean) => void;
+    }>
+  > = [
     [
       {
         label: "Status",
@@ -121,6 +134,7 @@ const IssueDetailSidebar: React.FC<Props> = ({ control, submitChanges, issueDeta
           label: state.name,
           value: state.id,
         })),
+        modal: false,
       },
       {
         label: "Assignees",
@@ -131,6 +145,7 @@ const IssueDetailSidebar: React.FC<Props> = ({ control, submitChanges, issueDeta
           label: person.member.first_name,
           value: person.member.id,
         })),
+        modal: false,
       },
       {
         label: "Priority",
@@ -141,34 +156,52 @@ const IssueDetailSidebar: React.FC<Props> = ({ control, submitChanges, issueDeta
           label: property,
           value: property,
         })),
+        modal: false,
       },
     ],
     [
       {
-        label: "Blocker",
-        name: "blockers_list",
-        canSelectMultipleOptions: true,
+        label: "Parent",
+        name: "parent",
+        canSelectMultipleOptions: false,
         icon: UserIcon,
-        options: projectIssues?.results?.map((issue) => ({
-          label: issue.name,
-          value: issue.id,
-        })),
+        issuesList:
+          issues?.results.filter(
+            (i) =>
+              i.id !== issueDetail?.id &&
+              i.id !== issueDetail?.parent &&
+              i.parent !== issueDetail?.id
+          ) ?? [],
+        modal: true,
+        isOpen: isParentModalOpen,
+        setIsOpen: setIsParentModalOpen,
       },
+      // {
+      //   label: "Blocker",
+      //   name: "blockers_list",
+      //   canSelectMultipleOptions: true,
+      //   icon: UserIcon,
+      //   issuesList: issues?.results.filter((i) => i.id !== issueDetail?.id) ?? [],
+      //   modal: true,
+      //   isOpen: isBlockerModalOpen,
+      //   setIsOpen: setIsBlockerModalOpen,
+      // },
+      // {
+      //   label: "Blocked",
+      //   name: "blocked_list",
+      //   canSelectMultipleOptions: true,
+      //   icon: UserIcon,
+      //   issuesList: issues?.results.filter((i) => i.id !== issueDetail?.id) ?? [],
+      //   modal: true,
+      //   isOpen: isBlockedModalOpen,
+      //   setIsOpen: setIsBlockedModalOpen,
+      // },
       {
-        label: "Blocked",
-        name: "blocked_list",
-        canSelectMultipleOptions: true,
-        icon: UserIcon,
-        options: projectIssues?.results?.map((issue) => ({
-          label: issue.name,
-          value: issue.id,
-        })),
-      },
-      {
-        label: "Due Date",
+        label: "Target Date",
         name: "target_date",
         canSelectMultipleOptions: true,
         icon: CalendarDaysIcon,
+        modal: false,
       },
     ],
     [
@@ -181,6 +214,7 @@ const IssueDetailSidebar: React.FC<Props> = ({ control, submitChanges, issueDeta
           label: cycle.name,
           value: cycle.id,
         })),
+        modal: false,
       },
     ],
   ];
@@ -249,12 +283,12 @@ const IssueDetailSidebar: React.FC<Props> = ({ control, submitChanges, issueDeta
         {sidebarSections.map((section, index) => (
           <div key={index} className="py-1">
             {section.map((item) => (
-              <div key={item.label} className="flex justify-between items-center gap-x-2 py-2">
-                <div className="flex items-center gap-x-2 text-sm">
-                  <item.icon className="h-4 w-4" />
+              <div key={item.label} className="flex items-center py-2 flex-wrap">
+                <div className="flex items-center gap-x-2 text-sm sm:basis-1/2">
+                  <item.icon className="flex-shrink-0 h-4 w-4" />
                   <p>{item.label}</p>
                 </div>
-                <div>
+                <div className="sm:basis-1/2">
                   {item.name === "target_date" ? (
                     <Controller
                       control={control}
@@ -262,15 +296,52 @@ const IssueDetailSidebar: React.FC<Props> = ({ control, submitChanges, issueDeta
                       render={({ field: { value, onChange } }) => (
                         <input
                           type="date"
-                          value={""}
+                          value={value ?? ""}
                           onChange={(e: any) => {
                             submitChanges({ target_date: e.target.value });
                             onChange(e.target.value);
                           }}
-                          className="hover:bg-gray-100 border rounded-md shadow-sm px-2 py-1 cursor-pointer focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 text-xs duration-300"
+                          className="hover:bg-gray-100 border rounded-md shadow-sm px-2 py-1 cursor-pointer focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 text-xs duration-300 w-full"
                         />
                       )}
                     />
+                  ) : item.modal ? (
+                    <Controller
+                      control={control}
+                      name={item.name as keyof IIssue}
+                      render={({ field: { value, onChange } }) => (
+                        <>
+                          <IssuesListModal
+                            isOpen={Boolean(item?.isOpen)}
+                            handleClose={() => item.setIsOpen && item.setIsOpen(false)}
+                            onChange={(val) => {
+                              console.log(val);
+                              // submitChanges({ [item.name]: val });
+                              onChange(val);
+                            }}
+                            issues={item?.issuesList ?? []}
+                            title={`Select ${item.label}`}
+                            multiple={item.canSelectMultipleOptions}
+                            value={value}
+                          />
+                          <button
+                            type="button"
+                            className="flex justify-between items-center gap-1 hover:bg-gray-100 border rounded-md shadow-sm px-2 py-1 cursor-pointer focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 text-xs duration-300 w-full"
+                            onClick={() => item.setIsOpen && item.setIsOpen(true)}
+                          >
+                            {watchIssue(`${item.name as keyof IIssue}`) &&
+                            watchIssue(`${item.name as keyof IIssue}`) !== ""
+                              ? `${activeProject?.identifier}-
+                                ${
+                                  issues?.results.find(
+                                    (i) => i.id === watchIssue(`${item.name as keyof IIssue}`)
+                                  )?.sequence_id
+                                }`
+                              : `Select ${item.label}`}
+                          </button>
+                        </>
+                      )}
+                    />
                   ) : (
                     <Controller
                       control={control}
@@ -288,11 +359,11 @@ const IssueDetailSidebar: React.FC<Props> = ({ control, submitChanges, issueDeta
                         >
                           {({ open }) => (
                             <div className="relative">
-                              <Listbox.Button className="relative flex justify-between items-center gap-1 hover:bg-gray-100 border rounded-md shadow-sm px-2 py-1 cursor-pointer focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 text-sm duration-300">
+                              <Listbox.Button className="flex justify-between items-center gap-1 hover:bg-gray-100 border rounded-md shadow-sm px-2 w-full py-1 cursor-pointer focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 text-xs duration-300">
                                 <span
                                   className={classNames(
                                     value ? "" : "text-gray-900",
-                                    "hidden truncate sm:block w-16 text-left",
+                                    "hidden truncate sm:block text-left",
                                     item.label === "Priority" ? "capitalize" : ""
                                   )}
                                 >
@@ -419,12 +490,12 @@ const IssueDetailSidebar: React.FC<Props> = ({ control, submitChanges, issueDeta
             +
           </Button>
         </form>
-        <div className="flex justify-between items-center gap-x-2">
-          <div className="flex items-center gap-x-2 text-sm">
+        <div className="flex justify-between items-center">
+          <div className="flex items-center gap-x-2 text-sm basis-1/2">
             <TagIcon className="w-4 h-4" />
             <p>Label</p>
           </div>
-          <div>
+          <div className="basis-1/2">
             <Controller
               control={control}
               name="labels_list"
@@ -440,11 +511,11 @@ const IssueDetailSidebar: React.FC<Props> = ({ control, submitChanges, issueDeta
                     <>
                       <Listbox.Label className="sr-only">Label</Listbox.Label>
                       <div className="relative">
-                        <Listbox.Button className="relative flex justify-between items-center gap-1 hover:bg-gray-100 border rounded-md shadow-sm px-2 py-1 cursor-pointer focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 text-sm duration-300">
+                        <Listbox.Button className="flex justify-between items-center gap-1 hover:bg-gray-100 border rounded-md shadow-sm px-2 w-full py-1 cursor-pointer focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 text-xs duration-300">
                           <span
                             className={classNames(
                               value ? "" : "text-gray-900",
-                              "hidden truncate capitalize sm:block w-16 text-left"
+                              "hidden truncate capitalize sm:block text-left"
                             )}
                           >
                             {value && value.length > 0

apps/app/components/project/issues/issue-detail/comment/IssueCommentCard.tsx

@@ -64,14 +64,14 @@ const CommentCard: React.FC<Props> = ({ comment, onSubmit, handleCommentDeletion
     <div key={comment.id}>
       <div className="w-full h-full flex justify-between">
         <div className="flex gap-x-2 w-full">
-          <div className="flex-shrink-0 -ml-1.5">
+          <div className="flex-shrink-0">
             {comment.actor_detail.avatar && comment.actor_detail.avatar !== "" ? (
               <Image
                 src={comment.actor_detail.avatar}
                 alt={comment.actor_detail.name}
                 height={30}
                 width={30}
-                className="rounded-full"
+                className="rounded"
               />
             ) : (
               <div
@@ -82,11 +82,7 @@ const CommentCard: React.FC<Props> = ({ comment, onSubmit, handleCommentDeletion
             )}
           </div>
           <div className="w-full">
-            <p>
-              {comment.actor_detail.first_name} {comment.actor_detail.last_name}
-            </p>
-            <p className="text-xs text-gray-500">{timeAgo(comment.created_at)}</p>
-            <div className="w-full mt-2">
+            <div>
               {isEditing ? (
                 <form className="flex flex-col gap-2" onSubmit={handleSubmit(onEnter)}>
                   <TextArea
@@ -120,13 +116,19 @@ const CommentCard: React.FC<Props> = ({ comment, onSubmit, handleCommentDeletion
               ) : (
                 <>
                   {comment.comment.split("\n").map((item, index) => (
-                    <p key={index} className="text-sm text-gray-600">
+                    <p key={index} className="text-sm">
                       {item}
                     </p>
                   ))}
                 </>
               )}
             </div>
+            <p className="text-xs text-gray-500 flex items-center gap-2 mt-1">
+              <span>
+                {comment.actor_detail.first_name} {comment.actor_detail.last_name}
+              </span>
+              <span>{timeAgo(comment.created_at)}</span>
+            </p>
           </div>
         </div>
         {user?.id === comment.actor && (

apps/app/components/project/issues/issue-detail/comment/IssueCommentSection.tsx

@@ -4,7 +4,7 @@ import { mutate } from "swr";
 // react hook form
 import { useForm } from "react-hook-form";
 // services
-import issuesServices from "lib/services/issues.services";
+import issuesServices from "lib/services/issues.service";
 // fetch keys
 import { PROJECT_ISSUES_COMMENTS } from "constants/fetch-keys";
 // components
@@ -72,7 +72,7 @@ const IssueCommentSection: React.FC<Props> = ({ comments, issueId, projectId, wo
   return (
     <div className="space-y-5">
       <form onSubmit={handleSubmit(onSubmit)}>
-        <div className="p-2 bg-indigo-50 rounded-md">
+        <div className="bg-gray-100 rounded-md">
           <div className="w-full">
             <TextArea
               id="comment"

apps/app/components/project/issues/my-issues/ChangeStateDropdown.tsx

@@ -8,7 +8,7 @@ import useUser from "lib/hooks/useUser";
 import { addSpaceIfCamelCase, classNames } from "constants/common";
 import { STATE_LIST } from "constants/fetch-keys";
 // services
-import stateServices from "lib/services/state.services";
+import stateServices from "lib/services/state.service";
 // ui
 import { Listbox, Transition } from "@headlessui/react";
 // types

apps/app/components/project/memberInvitations.tsx

@@ -3,10 +3,14 @@ import React, { useState } from "react";
 // next
 import Link from "next/link";
 import useSWR from "swr";
-import _ from "lodash";
+// hooks
 import useUser from "lib/hooks/useUser";
 // Services
 import projectService from "lib/services/project.service";
+// fetch keys
+import { PROJECT_MEMBERS } from "constants/fetch-keys";
+// commons
+import { renderShortNumericDateFormat } from "constants/common";
 // icons
 import {
   CalendarDaysIcon,
@@ -17,25 +21,41 @@ import {
   PlusIcon,
   TrashIcon,
 } from "@heroicons/react/24/outline";
-import { renderShortNumericDateFormat } from "constants/common";
+// types
+import type { IProject } from "types";
+type Props = {
+  project: IProject;
+  slug: string;
+  invitationsRespond: string[];
+  handleInvitation: (project_invitation: any, action: "accepted" | "withdraw") => void;
+  setDeleteProject: (id: string | null) => void;
+};
 
-const ProjectMemberInvitations = ({
+const ProjectMemberInvitations: React.FC<Props> = ({
   project,
   slug,
   invitationsRespond,
   handleInvitation,
   setDeleteProject,
-}: any) => {
+}) => {
   const { user } = useUser();
-  const { data: members } = useSWR("PROJECT_MEMBERS", () =>
+
+  const { data: members } = useSWR<any[]>(PROJECT_MEMBERS(project.id), () =>
     projectService.projectMembers(slug, project.id)
   );
 
-  const isMember =
-    _.filter(members, (item: any) => item.member.id === (user as any).id).length === 1;
+  const isMember = members?.some((item: any) => item.member.id === (user as any)?.id);
 
   const [selected, setSelected] = useState<any>(false);
 
+  if (!members) {
+    return (
+      <div className="w-full h-36 flex flex-col px-4 py-3 rounded-md bg-white">
+        <div className="w-full h-full bg-gray-50 animate-pulse" />
+      </div>
+    );
+  }
+
   return (
     <>
       <div
@@ -80,7 +100,7 @@ const ProjectMemberInvitations = ({
               <button
                 type="button"
                 className="h-7 w-7 p-1 grid place-items-center rounded hover:bg-gray-200 duration-300 outline-none"
-                onClick={() => setDeleteProject(project)}
+                onClick={() => setDeleteProject(project.id)}
               >
                 <TrashIcon className="h-4 w-4 text-red-500" />
               </button>

apps/app/components/project/settings/ControlSettings.tsx

@@ -15,7 +15,7 @@ import { Button } from "ui";
 // icons
 import { CheckIcon, ChevronDownIcon } from "@heroicons/react/24/outline";
 // types
-import { IProject, WorkspaceMember } from "types";
+import { IProject } from "types";
 // fetch-keys
 import { WORKSPACE_MEMBERS } from "constants/fetch-keys";
 
@@ -27,7 +27,7 @@ type Props = {
 const ControlSettings: React.FC<Props> = ({ control, isSubmitting }) => {
   const { activeWorkspace } = useUser();
 
-  const { data: people } = useSWR<WorkspaceMember[]>(
+  const { data: people } = useSWR(
     activeWorkspace ? WORKSPACE_MEMBERS : null,
     activeWorkspace ? () => workspaceService.workspaceMembers(activeWorkspace.slug) : null
   );

apps/app/components/project/settings/GeneralSettings.tsx

@@ -7,7 +7,7 @@ import projectServices from "lib/services/project.service";
 // hooks
 import useUser from "lib/hooks/useUser";
 // ui
-import { Input, Select, TextArea } from "ui";
+import { Button, Input, Select, TextArea } from "ui";
 // types
 import { IProject } from "types";
 // constants
@@ -17,11 +17,12 @@ type Props = {
   register: UseFormRegister<IProject>;
   errors: any;
   setError: UseFormSetError<IProject>;
+  isSubmitting: boolean;
 };
 
 const NETWORK_CHOICES = { "0": "Secret", "2": "Public" };
 
-const GeneralSettings: React.FC<Props> = ({ register, errors, setError }) => {
+const GeneralSettings: React.FC<Props> = ({ register, errors, setError, isSubmitting }) => {
   const { activeWorkspace } = useUser();
 
   const checkIdentifier = (slug: string, value: string) => {
@@ -111,6 +112,11 @@ const GeneralSettings: React.FC<Props> = ({ register, errors, setError }) => {
             }}
           />
         </div>
+        <div className="flex justify-end">
+          <Button type="submit" disabled={isSubmitting}>
+            {isSubmitting ? "Updating Project..." : "Update Project"}
+          </Button>
+        </div>
       </section>
     </>
   );

apps/app/components/project/settings/LabelsSettings.tsx

@@ -7,7 +7,7 @@ import { Controller, SubmitHandler, useForm } from "react-hook-form";
 // react-color
 import { TwitterPicker } from "react-color";
 // services
-import issuesServices from "lib/services/issues.services";
+import issuesServices from "lib/services/issues.service";
 // hooks
 import useUser from "lib/hooks/useUser";
 // headless ui
@@ -47,6 +47,7 @@ const LabelsSettings: React.FC = () => {
     setValue,
     formState: { errors, isSubmitting },
     watch,
+    setError,
   } = useForm<IIssueLabels>({ defaultValues });
 
   const { data: issueLabels, mutate } = useSWR<IIssueLabels[]>(
@@ -163,23 +164,33 @@ const LabelsSettings: React.FC = () => {
                 )}
               </Popover>
             </div>
-            <Input
-              type="text"
-              id="labelName"
-              name="name"
-              register={register}
-              placeholder="Lable title"
-            />
+            <div className="w-full flex flex-col justify-center">
+              <Input
+                type="text"
+                id="labelName"
+                name="name"
+                register={register}
+                placeholder="Lable title"
+                validations={{
+                  required: "Label title is required",
+                }}
+                error={errors.name}
+              />
+            </div>
             <Button type="button" theme="secondary" onClick={() => setNewLabelForm(false)}>
               Cancel
             </Button>
             {isUpdating ? (
-              <Button type="button" onClick={handleSubmit(handleLabelUpdate)}>
-                Update
+              <Button
+                type="button"
+                onClick={handleSubmit(handleLabelUpdate)}
+                disabled={isSubmitting}
+              >
+                {isSubmitting ? "Updating" : "Update"}
               </Button>
             ) : (
-              <Button type="button" onClick={handleSubmit(handleNewLabel)}>
-                Add
+              <Button type="button" onClick={handleSubmit(handleNewLabel)} disabled={isSubmitting}>
+                {isSubmitting ? "Adding" : "Add"}
               </Button>
             )}
           </form>
@@ -193,7 +204,7 @@ const LabelsSettings: React.FC = () => {
                     <div className="bg-white p-2 flex items-center justify-between text-gray-900 rounded-md">
                       <div className="flex items-center gap-2">
                         <span
-                          className={`h-1.5 w-1.5 rounded-full`}
+                          className="flex-shrink-0 h-1.5 w-1.5 rounded-full"
                           style={{
                             backgroundColor: label.colour,
                           }}

apps/app/components/workspace/SendWorkspaceInvitationModal.tsx

@@ -14,7 +14,7 @@ import { Button, Input, TextArea, Select } from "ui";
 // hooks
 import useToast from "lib/hooks/useToast";
 // types
-import { WorkspaceMember } from "types";
+import { IWorkspaceMemberInvitation } from "types";
 
 type Props = {
   isOpen: boolean;
@@ -30,7 +30,7 @@ const ROLE = {
   20: "Admin",
 };
 
-const defaultValues: Partial<WorkspaceMember> = {
+const defaultValues: Partial<IWorkspaceMemberInvitation> = {
   email: "",
   role: 5,
   message: "",
@@ -57,7 +57,7 @@ const SendWorkspaceInvitationModal: React.FC<Props> = ({
     formState: { errors, isSubmitting },
     handleSubmit,
     reset,
-  } = useForm<WorkspaceMember>({
+  } = useForm<IWorkspaceMemberInvitation>({
     defaultValues,
     reValidateMode: "onChange",
     mode: "all",

apps/app/components/workspace/SingleInvitation.tsx

@@ -3,10 +3,10 @@ import Image from "next/image";
 // react
 import { useState } from "react";
 // types
-import { IWorkspaceInvitation } from "types";
+import { IWorkspaceMemberInvitation } from "types";
 
 type Props = {
-  invitation: IWorkspaceInvitation;
+  invitation: IWorkspaceMemberInvitation;
   invitationsRespond: string[];
   handleInvitation: any;
 };

apps/app/components/workspace/confirm-workspace-deletion.tsx

@@ -1,4 +1,4 @@
-import React, { useRef, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 // next
 import { useRouter } from "next/router";
 // headless ui
@@ -11,43 +11,54 @@ import useToast from "lib/hooks/useToast";
 // icons
 import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
 // ui
-import { Button } from "ui";
+import { Button, Input } from "ui";
 // types
 import type { IWorkspace } from "types";
 
 type Props = {
   isOpen: boolean;
-  setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  data: IWorkspace | null;
+  onClose: () => void;
 };
 
-const ConfirmWorkspaceDeletion: React.FC<Props> = ({ isOpen, setIsOpen }) => {
+const ConfirmWorkspaceDeletion: React.FC<Props> = ({ isOpen, data, onClose }) => {
   const router = useRouter();
 
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
 
-  const { activeWorkspace, mutateWorkspaces } = useUser();
+  const [selectedWorkspace, setSelectedWorkspace] = useState<IWorkspace | null>(null);
+
+  const [confirmProjectName, setConfirmProjectName] = useState("");
+  const [confirmDeleteMyProject, setConfirmDeleteMyProject] = useState(false);
+
+  const canDelete = confirmProjectName === data?.name && confirmDeleteMyProject;
+
+  const { mutateWorkspaces } = useUser();
 
   const { setToastAlert } = useToast();
 
   const cancelButtonRef = useRef(null);
 
   const handleClose = () => {
-    setIsOpen(false);
+    onClose();
     setIsDeleteLoading(false);
   };
 
   const handleDeletion = async () => {
     setIsDeleteLoading(true);
-    if (!activeWorkspace) return;
+    if (!data || !canDelete) return;
     await workspaceService
-      .deleteWorkspace(activeWorkspace.slug)
+      .deleteWorkspace(data.slug)
       .then(() => {
         handleClose();
         mutateWorkspaces((prevData) => {
-          return (prevData ?? []).filter(
-            (workspace: IWorkspace) => workspace.slug !== activeWorkspace.slug
-          );
+          return (prevData ?? []).filter((workspace: IWorkspace) => workspace.slug !== data.slug);
         }, false);
+        setToastAlert({
+          type: "success",
+          message: "Workspace deleted successfully",
+          title: "Success",
+        });
         router.push("/");
       })
       .catch((error) => {
@@ -56,6 +67,16 @@ const ConfirmWorkspaceDeletion: React.FC<Props> = ({ isOpen, setIsOpen }) => {
       });
   };
 
+  useEffect(() => {
+    if (data) setSelectedWorkspace(data);
+    else {
+      const timer = setTimeout(() => {
+        setSelectedWorkspace(null);
+        clearTimeout(timer);
+      }, 350);
+    }
+  }, [data]);
+
   return (
     <Transition.Root show={isOpen} as={React.Fragment}>
       <Dialog
@@ -103,11 +124,47 @@ const ConfirmWorkspaceDeletion: React.FC<Props> = ({ isOpen, setIsOpen }) => {
                       <div className="mt-2">
                         <p className="text-sm text-gray-500">
                           Are you sure you want to delete workspace - {`"`}
-                          <span className="italic">{activeWorkspace?.name}</span>
+                          <span className="italic">{data?.name}</span>
                           {`"`} ? All of the data related to the workspace will be permanently
                           removed. This action cannot be undone.
                         </p>
                       </div>
+                      <div className="mt-3">
+                        <p className="text-sm">
+                          Enter the workspace name{" "}
+                          <span className="font-semibold">{selectedWorkspace?.name}</span> to
+                          continue:
+                        </p>
+                        <Input
+                          type="text"
+                          placeholder="Project name"
+                          className="mt-2"
+                          value={confirmProjectName}
+                          onChange={(e) => {
+                            setConfirmProjectName(e.target.value);
+                          }}
+                          name="workspaceName"
+                        />
+                      </div>
+                      <div className="mt-3">
+                        <p className="text-sm">
+                          To confirm, type{" "}
+                          <span className="font-semibold">delete my workspace</span> below:
+                        </p>
+                        <Input
+                          type="text"
+                          placeholder="Enter 'delete my workspace'"
+                          className="mt-2"
+                          onChange={(e) => {
+                            if (e.target.value === "delete my workspace") {
+                              setConfirmDeleteMyProject(true);
+                            } else {
+                              setConfirmDeleteMyProject(false);
+                            }
+                          }}
+                          name="typeDelete"
+                        />
+                      </div>
                     </div>
                   </div>
                 </div>
@@ -116,7 +173,7 @@ const ConfirmWorkspaceDeletion: React.FC<Props> = ({ isOpen, setIsOpen }) => {
                     type="button"
                     onClick={handleDeletion}
                     theme="danger"
-                    disabled={isDeleteLoading}
+                    disabled={isDeleteLoading || !canDelete}
                     className="inline-flex sm:ml-3"
                   >
                     {isDeleteLoading ? "Deleting..." : "Delete"}

apps/app/constants/api-routes.ts

@@ -15,7 +15,8 @@ export const MAGIC_LINK_SIGNIN = "/api/magic-sign-in/";
 export const USER_ENDPOINT = "/api/users/me/";
 export const CHANGE_PASSWORD = "/api/users/me/change-password/";
 export const USER_ONBOARD_ENDPOINT = "/api/users/me/onboard/";
-export const USER_ISSUES_ENDPOINT = "/api/users/me/issues/";
+export const USER_ISSUES_ENDPOINT = (workspaceSlug: string) =>
+  `/api/workspaces/${workspaceSlug}/my-issues/`;
 export const USER_WORKSPACES = "/api/users/me/workspaces";
 
 // s3 file url
@@ -24,7 +25,7 @@ export const S3_URL = `/api/file-assets/`;
 // LIST USER INVITATIONS ---- RESPOND INVITATIONS IN BULK
 export const USER_WORKSPACE_INVITATIONS = "/api/users/me/invitations/workspaces/";
 export const USER_PROJECT_INVITATIONS = "/api/users/me/invitations/projects/";
-
+export const LAST_ACTIVE_WORKSPACE_AND_PROJECTS = "/api/users/last-visited-workspace/";
 export const USER_WORKSPACE_INVITATION = (invitationId: string) =>
   `/api/users/me/invitations/${invitationId}/`;
 
@@ -33,8 +34,6 @@ export const JOIN_WORKSPACE = (workspaceSlug: string, invitationId: string) =>
 export const JOIN_PROJECT = (workspaceSlug: string) =>
   `/api/workspaces/${workspaceSlug}/projects/join/`;
 
-export const USER_ISSUES = "/api/users/me/issues/";
-
 // workspaces
 export const WORKSPACES_ENDPOINT = "/api/workspaces/";
 export const WORKSPACE_DETAIL = (workspaceSlug: string) => `/api/workspaces/${workspaceSlug}/`;
@@ -65,6 +64,8 @@ export const PROJECT_MEMBERS = (workspaceSlug: string, projectId: string) =>
   `/api/workspaces/${workspaceSlug}/projects/${projectId}/members/`;
 export const PROJECT_MEMBER_DETAIL = (workspaceSlug: string, projectId: string, memberId: string) =>
   `/api/workspaces/${workspaceSlug}/projects/${projectId}/members/${memberId}/`;
+export const PROJECT_VIEW_ENDPOINT = (workspaceSlug: string, projectId: string) =>
+  `/api/workspaces/${workspaceSlug}/projects/${projectId}/project-views/`;
 
 export const PROJECT_INVITATIONS = (workspaceSlug: string, projectId: string) =>
   `/api/workspaces/${workspaceSlug}/projects/${projectId}/invitations/`;

apps/app/constants/common.ts

@@ -207,3 +207,12 @@ export const cosineSimilarity = (a: string, b: string) => {
 
   return dotProduct / Math.sqrt(magnitudeA * magnitudeB);
 };
+
+export const createSimilarString = (str: string) => {
+  const shuffled = str
+    .split("")
+    .sort(() => Math.random() - 0.5)
+    .join("");
+
+  return shuffled;
+};

apps/app/constants/fetch-keys.ts

@@ -2,12 +2,12 @@ export const CURRENT_USER = "CURRENT_USER";
 export const USER_WORKSPACE_INVITATIONS = "USER_WORKSPACE_INVITATIONS";
 export const USER_WORKSPACES = "USER_WORKSPACES";
 
-export const WORKSPACE_MEMBERS = "WORKSPACE_MEMBERS";
+export const WORKSPACE_MEMBERS = (workspaceSlug: string) => `WORKSPACE_MEMBERS_${workspaceSlug}`;
 export const WORKSPACE_INVITATIONS = "WORKSPACE_INVITATIONS";
 export const WORKSPACE_INVITATION = "WORKSPACE_INVITATION";
 
 export const PROJECTS_LIST = (workspaceSlug: string) => `PROJECTS_LIST_${workspaceSlug}`;
-export const PROJECT_DETAILS = "PROJECT_DETAILS";
+export const PROJECT_DETAILS = (projectId: string) => `PROJECT_DETAILS_${projectId}`;
 
 export const PROJECT_MEMBERS = (projectId: string) => `PROJECT_MEMBERS_${projectId}`;
 export const PROJECT_INVITATIONS = "PROJECT_INVITATIONS";
@@ -29,4 +29,4 @@ export const CYCLE_DETAIL = "CYCLE_DETAIL";
 export const STATE_LIST = (projectId: string) => `STATE_LIST_${projectId}`;
 export const STATE_DETAIL = "STATE_DETAIL";
 
-export const USER_ISSUE = "USER_ISSUE";
+export const USER_ISSUE = (workspaceSlug: string) => `USER_ISSUE_${workspaceSlug}`;

apps/app/constants/global.tsx

@@ -0,0 +1,12 @@
+export const getPriorityIcon = (priority: string) => {
+  switch (priority) {
+    case "urgent":
+      return <span className="material-symbols-rounded">signal_cellular_alt</span>;
+    case "high":
+      return <span className="material-symbols-rounded">signal_cellular_alt_2_bar</span>;
+    case "medium":
+      return <span className="material-symbols-rounded">signal_cellular_alt_1_bar</span>;
+    default:
+      return <span>N/A</span>;
+  }
+};

apps/app/constants/index.ts

@@ -6,3 +6,5 @@ export const ROLE = {
   15: "Member",
   20: "Admin",
 };
+
+export const NETWORK_CHOICES = { "0": "Secret", "2": "Public" };

apps/app/constants/theme.context.constants.ts

@@ -2,3 +2,5 @@ export const TOGGLE_SIDEBAR = "TOGGLE_SIDEBAR";
 export const REHYDRATE_THEME = "REHYDRATE_THEME";
 export const SET_ISSUE_VIEW = "SET_ISSUE_VIEW";
 export const SET_GROUP_BY_PROPERTY = "SET_GROUP_BY_PROPERTY";
+export const SET_ORDER_BY_PROPERTY = "SET_ORDER_BY_PROPERTY";
+export const SET_FILTER_ISSUES = "SET_FILTER_ISSUES";

apps/app/contexts/theme.context.tsx

@@ -5,6 +5,8 @@ import {
   REHYDRATE_THEME,
   SET_ISSUE_VIEW,
   SET_GROUP_BY_PROPERTY,
+  SET_ORDER_BY_PROPERTY,
+  SET_FILTER_ISSUES,
 } from "constants/theme.context.constants";
 // components
 import ToastAlert from "components/toast-alert";
@@ -12,30 +14,30 @@ import ToastAlert from "components/toast-alert";
 export const themeContext = createContext<ContextType>({} as ContextType);
 
 // types
-import type { IIssue, NestedKeyOf } from "types";
-
-type Theme = {
-  collapsed: boolean;
-  issueView: "list" | "kanban" | null;
-  groupByProperty: NestedKeyOf<IIssue> | null;
-};
+import type { IIssue, NestedKeyOf, ProjectViewTheme as Theme } from "types";
 
 type ReducerActionType = {
   type:
     | typeof TOGGLE_SIDEBAR
     | typeof REHYDRATE_THEME
     | typeof SET_ISSUE_VIEW
+    | typeof SET_ORDER_BY_PROPERTY
+    | typeof SET_FILTER_ISSUES
     | typeof SET_GROUP_BY_PROPERTY;
   payload?: Partial<Theme>;
 };
 
 type ContextType = {
   collapsed: boolean;
+  orderBy: NestedKeyOf<IIssue> | null;
   issueView: "list" | "kanban" | null;
   groupByProperty: NestedKeyOf<IIssue> | null;
+  filterIssue: "activeIssue" | "backlogIssue" | null;
   toggleCollapsed: () => void;
   setIssueView: (display: "list" | "kanban") => void;
   setGroupByProperty: (property: NestedKeyOf<IIssue> | null) => void;
+  setOrderBy: (property: NestedKeyOf<IIssue> | null) => void;
+  setFilterIssue: (property: "activeIssue" | "backlogIssue" | null) => void;
 };
 
 type StateType = Theme;
@@ -45,6 +47,8 @@ export const initialState: StateType = {
   collapsed: false,
   issueView: "list",
   groupByProperty: null,
+  orderBy: null,
+  filterIssue: null,
 };
 
 export const reducer: ReducerFunctionType = (state, action) => {
@@ -87,6 +91,28 @@ export const reducer: ReducerFunctionType = (state, action) => {
         ...newState,
       };
     }
+    case SET_ORDER_BY_PROPERTY: {
+      const newState = {
+        ...state,
+        orderBy: payload?.orderBy || null,
+      };
+      localStorage.setItem("theme", JSON.stringify(newState));
+      return {
+        ...state,
+        ...newState,
+      };
+    }
+    case SET_FILTER_ISSUES: {
+      const newState = {
+        ...state,
+        filterIssue: payload?.filterIssue || null,
+      };
+      localStorage.setItem("theme", JSON.stringify(newState));
+      return {
+        ...state,
+        ...newState,
+      };
+    }
     default: {
       return state;
     }
@@ -120,6 +146,24 @@ export const ThemeContextProvider: React.FC<{ children: React.ReactNode }> = ({
     });
   }, []);
 
+  const setOrderBy = useCallback((property: NestedKeyOf<IIssue> | null) => {
+    dispatch({
+      type: SET_ORDER_BY_PROPERTY,
+      payload: {
+        orderBy: property,
+      },
+    });
+  }, []);
+
+  const setFilterIssue = useCallback((property: "activeIssue" | "backlogIssue" | null) => {
+    dispatch({
+      type: SET_FILTER_ISSUES,
+      payload: {
+        filterIssue: property,
+      },
+    });
+  }, []);
+
   useEffect(() => {
     dispatch({
       type: REHYDRATE_THEME,
@@ -135,6 +179,10 @@ export const ThemeContextProvider: React.FC<{ children: React.ReactNode }> = ({
         setIssueView,
         groupByProperty: state.groupByProperty,
         setGroupByProperty,
+        orderBy: state.orderBy,
+        setOrderBy,
+        filterIssue: state.filterIssue,
+        setFilterIssue,
       }}
     >
       <ToastAlert />

apps/app/contexts/user.context.tsx

@@ -6,9 +6,9 @@ import { useRouter } from "next/router";
 import useSWR from "swr";
 // services
 import userService from "lib/services/user.service";
-import issuesServices from "lib/services/issues.services";
-import stateServices from "lib/services/state.services";
-import sprintsServices from "lib/services/cycles.services";
+import issuesServices from "lib/services/issues.service";
+import stateServices from "lib/services/state.service";
+import sprintsServices from "lib/services/cycles.service";
 import projectServices from "lib/services/project.service";
 import workspaceService from "lib/services/workspace.service";
 // constants

apps/app/layouts/AppLayout.tsx

@@ -8,11 +8,11 @@ import useUser from "lib/hooks/useUser";
 import Container from "layouts/Container";
 import Sidebar from "layouts/Navbar/Sidebar";
 // components
-import CreateProjectModal from "components/project/CreateProjectModal";
+import CreateProjectModal from "components/project/create-project-modal";
 // types
 import type { Props } from "./types";
 
-const AdminLayout: React.FC<Props> = ({ meta, children }) => {
+const AppLayout: React.FC<Props> = ({ meta, children, noPadding = false, bg = "primary" }) => {
   const [isOpen, setIsOpen] = useState(false);
 
   const router = useRouter();
@@ -28,10 +28,16 @@ const AdminLayout: React.FC<Props> = ({ meta, children }) => {
       <CreateProjectModal isOpen={isOpen} setIsOpen={setIsOpen} />
       <div className="h-screen w-full flex overflow-x-hidden">
         <Sidebar />
-        <main className="h-full w-full min-w-0 p-5 bg-primary overflow-y-auto">{children}</main>
+        <main
+          className={`h-full w-full min-w-0 overflow-y-auto ${noPadding ? "" : "p-5"} ${
+            bg === "primary" ? "bg-primary" : bg === "secondary" ? "bg-secondary" : "bg-primary"
+          }`}
+        >
+          {children}
+        </main>
       </div>
     </Container>
   );
 };
 
-export default AdminLayout;
+export default AppLayout;

apps/app/layouts/Navbar/Sidebar.tsx

@@ -9,8 +9,7 @@ import authenticationService from "lib/services/authentication.service";
 // hooks
 import useUser from "lib/hooks/useUser";
 import useTheme from "lib/hooks/useTheme";
-// components
-import CreateProjectModal from "components/project/CreateProjectModal";
+import useToast from "lib/hooks/useToast";
 // headless ui
 import { Dialog, Disclosure, Menu, Transition } from "@headlessui/react";
 // icons
@@ -107,7 +106,6 @@ const userLinks = [
 
 const Sidebar: React.FC = () => {
   const [sidebarOpen, setSidebarOpen] = useState(false);
-  const [isCreateProjectModal, setCreateProjectModal] = useState(false);
 
   const router = useRouter();
 
@@ -119,9 +117,10 @@ const Sidebar: React.FC = () => {
 
   const { collapsed: sidebarCollapse, toggleCollapsed } = useTheme();
 
+  const { setToastAlert } = useToast();
+
   return (
     <nav className="h-full">
-      <CreateProjectModal isOpen={isCreateProjectModal} setIsOpen={setCreateProjectModal} />
       <Transition.Root show={sidebarOpen} as={React.Fragment}>
         <Dialog as="div" className="relative z-40 md:hidden" onClose={setSidebarOpen}>
           <Transition.Child
@@ -282,9 +281,11 @@ const Sidebar: React.FC = () => {
                                             last_workspace_id: workspace?.id,
                                           })
                                           .then((res) => {
-                                            router.push("/workspace");
+                                            const isInProject =
+                                              router.pathname.includes("/[projectId]/");
+                                            if (isInProject) router.push("/workspace");
                                           })
-                                          .catch((err) => console.log);
+                                          .catch((err) => console.error(err));
                                       }}
                                       className={`${
                                         active ? "bg-theme text-white" : "text-gray-900"
@@ -478,7 +479,13 @@ const Sidebar: React.FC = () => {
                                               onClick={() =>
                                                 copyTextToClipboard(
                                                   `https://app.plane.so/projects/${project?.id}/issues/`
-                                                )
+                                                ).then(() => {
+                                                  setToastAlert({
+                                                    title: "Link Copied",
+                                                    message: "Link copied to clipboard",
+                                                    type: "success",
+                                                  });
+                                                })
                                               }
                                             >
                                               <ClipboardDocumentIcon className="h-3 w-3" />
@@ -546,7 +553,13 @@ const Sidebar: React.FC = () => {
                       <button
                         type="button"
                         className="group flex justify-center items-center gap-2 w-full rounded-md p-2 text-sm bg-theme text-white"
-                        onClick={() => setCreateProjectModal(true)}
+                        onClick={() => {
+                          const e = new KeyboardEvent("keydown", {
+                            ctrlKey: true,
+                            key: "p",
+                          });
+                          document.dispatchEvent(e);
+                        }}
                       >
                         <PlusIcon className="h-5 w-5" />
                         {!sidebarCollapse && "Create Project"}

apps/app/layouts/types.d.ts

@@ -8,4 +8,6 @@ export type Meta = {
 export type Props = {
   meta?: Meta;
   children: React.ReactNode;
+  noPadding?: boolean;
+  bg?: "primary" | "secondary";
 };

apps/app/lib/hoc/withAuthWrapper.tsx

@@ -4,7 +4,7 @@ import type { NextPage } from "next";
 // redirect
 import redirect from "lib/redirect";
 
-const withAuth = (WrappedComponent: NextPage) => {
+const withAuth = (WrappedComponent: NextPage, getBackToSameRoute: boolean = true) => {
   const Wrapper: NextPage<any> = (props) => {
     return <WrappedComponent {...props} />;
   };
@@ -17,7 +17,8 @@ const withAuth = (WrappedComponent: NextPage) => {
     const token = cookies?.split("accessToken=")?.[1]?.split(";")?.[0];
 
     if (!token) {
-      redirect(ctx, "/signin");
+      if (getBackToSameRoute) redirect(ctx, "/signin?next=" + ctx?.asPath);
+      else redirect(ctx, "/signin");
     }
 
     const pageProps =

apps/app/lib/hooks/useIssuesFilter.tsx

@@ -1,4 +1,3 @@
-import { useState } from "react";
 // hooks
 import useTheme from "./useTheme";
 import useUser from "./useUser";
@@ -7,14 +6,19 @@ import { groupBy, orderArrayBy } from "constants/common";
 // constants
 import { PRIORITIES } from "constants/";
 // types
-import type { IssueResponse, IIssue, NestedKeyOf } from "types";
+import type { IssueResponse, IIssue } from "types";
 
 const useIssuesFilter = (projectIssues?: IssueResponse) => {
-  const { issueView, setIssueView, groupByProperty, setGroupByProperty } = useTheme();
-
-  const [orderBy, setOrderBy] = useState<NestedKeyOf<IIssue> | null>(null);
-
-  const [filterIssue, setFilterIssue] = useState<"activeIssue" | "backlogIssue" | null>(null);
+  const {
+    issueView,
+    setIssueView,
+    groupByProperty,
+    setGroupByProperty,
+    orderBy,
+    setOrderBy,
+    filterIssue,
+    setFilterIssue,
+  } = useTheme();
 
   const { states } = useUser();
 
@@ -52,32 +56,36 @@ const useIssuesFilter = (projectIssues?: IssueResponse) => {
 
   if (filterIssue !== null) {
     if (filterIssue === "activeIssue") {
-      groupedByIssues = Object.keys(groupedByIssues).reduce((acc, key) => {
-        const value = groupedByIssues[key];
-        const filteredValue = value.filter(
-          (issue) =>
-            issue.state_detail.group === "started" || issue.state_detail.group === "unstarted"
-        );
-        if (filteredValue.length > 0) {
-          acc[key] = filteredValue;
-        }
-        return acc;
-      }, {} as typeof groupedByIssues);
+      const filteredStates = states?.filter(
+        (state) => state.group === "started" || state.group === "unstarted"
+      );
+      groupedByIssues = Object.fromEntries(
+        filteredStates
+          ?.sort((a, b) => a.sequence - b.sequence)
+          ?.map((state) => [
+            state.name,
+            projectIssues?.results.filter((issue) => issue.state === state.id) ?? [],
+          ]) ?? []
+      );
     } else if (filterIssue === "backlogIssue") {
-      groupedByIssues = Object.keys(groupedByIssues).reduce((acc, key) => {
-        const value = groupedByIssues[key];
-        const filteredValue = value.filter(
-          (issue) =>
-            issue.state_detail.group === "backlog" || issue.state_detail.group === "cancelled"
-        );
-        if (filteredValue.length > 0) {
-          acc[key] = filteredValue;
-        }
-        return acc;
-      }, {} as typeof groupedByIssues);
+      const filteredStates = states?.filter(
+        (state) => state.group === "backlog" || state.group === "cancelled"
+      );
+      groupedByIssues = Object.fromEntries(
+        filteredStates
+          ?.sort((a, b) => a.sequence - b.sequence)
+          ?.map((state) => [
+            state.name,
+            projectIssues?.results.filter((issue) => issue.state === state.id) ?? [],
+          ]) ?? []
+      );
     }
   }
 
+  if (groupByProperty === "priority" && orderBy === "priority") {
+    setOrderBy(null);
+  }
+
   return {
     groupedByIssues,
     issueView,

apps/app/lib/hooks/useIssuesProperties.tsx

@@ -4,7 +4,7 @@ import useSWR from "swr";
 // api routes
 import { ISSUE_PROPERTIES_ENDPOINT } from "constants/api-routes";
 // services
-import issueServices from "lib/services/issues.services";
+import issueServices from "lib/services/issues.service";
 // hooks
 import useUser from "./useUser";
 // types

apps/app/lib/services/project.service.ts

@@ -10,9 +10,12 @@ import {
   PROJECT_MEMBERS,
   PROJECT_MEMBER_DETAIL,
   USER_PROJECT_INVITATIONS,
+  PROJECT_VIEW_ENDPOINT,
 } from "constants/api-routes";
 // services
 import APIService from "lib/services/api.service";
+// types
+import type { IProject, IProjectMember, IProjectMemberInvitation, ProjectViewTheme } from "types";
 
 const { NEXT_PUBLIC_API_BASE_URL } = process.env;
 
@@ -21,13 +24,13 @@ class ProjectServices extends APIService {
     super(NEXT_PUBLIC_API_BASE_URL || "http://localhost:8000");
   }
 
-  async createProject(workspace_slug: string, data: any): Promise<any> {
-    return this.post(PROJECTS_ENDPOINT(workspace_slug), data)
+  async createProject(workspacSlug: string, data: Partial<IProject>): Promise<IProject> {
+    return this.post(PROJECTS_ENDPOINT(workspacSlug), data)
       .then((response) => {
         return response?.data;
       })
       .catch((error) => {
-        throw error?.response?.data;
+        throw error?.response;
       });
   }
 
@@ -45,8 +48,8 @@ class ProjectServices extends APIService {
       });
   }
 
-  async getProjects(workspace_slug: string): Promise<any> {
-    return this.get(PROJECTS_ENDPOINT(workspace_slug))
+  async getProjects(workspacSlug: string): Promise<IProject[]> {
+    return this.get(PROJECTS_ENDPOINT(workspacSlug))
       .then((response) => {
         return response?.data;
       })
@@ -55,8 +58,8 @@ class ProjectServices extends APIService {
       });
   }
 
-  async getProject(workspace_slug: string, project_id: string): Promise<any> {
-    return this.get(PROJECT_DETAIL(workspace_slug, project_id))
+  async getProject(workspacSlug: string, projectId: string): Promise<IProject> {
+    return this.get(PROJECT_DETAIL(workspacSlug, projectId))
       .then((response) => {
         return response?.data;
       })
@@ -65,8 +68,12 @@ class ProjectServices extends APIService {
       });
   }
 
-  async updateProject(workspace_slug: string, project_id: string, data: any): Promise<any> {
-    return this.patch(PROJECT_DETAIL(workspace_slug, project_id), data)
+  async updateProject(
+    workspacSlug: string,
+    projectId: string,
+    data: Partial<IProject>
+  ): Promise<IProject> {
+    return this.patch(PROJECT_DETAIL(workspacSlug, projectId), data)
       .then((response) => {
         return response?.data;
       })
@@ -75,8 +82,8 @@ class ProjectServices extends APIService {
       });
   }
 
-  async deleteProject(workspace_slug: string, project_id: string): Promise<any> {
-    return this.delete(PROJECT_DETAIL(workspace_slug, project_id))
+  async deleteProject(workspacSlug: string, projectId: string): Promise<any> {
+    return this.delete(PROJECT_DETAIL(workspacSlug, projectId))
       .then((response) => {
         return response?.data;
       })
@@ -85,8 +92,8 @@ class ProjectServices extends APIService {
       });
   }
 
-  async inviteProject(workspace_slug: string, project_id: string, data: any): Promise<any> {
-    return this.post(INVITE_PROJECT(workspace_slug, project_id), data)
+  async inviteProject(workspacSlug: string, projectId: string, data: any): Promise<any> {
+    return this.post(INVITE_PROJECT(workspacSlug, projectId), data)
       .then((response) => {
         return response?.data;
       })
@@ -95,8 +102,8 @@ class ProjectServices extends APIService {
       });
   }
 
-  async joinProject(workspace_slug: string, data: any): Promise<any> {
-    return this.post(JOIN_PROJECT(workspace_slug), data)
+  async joinProject(workspacSlug: string, data: any): Promise<any> {
+    return this.post(JOIN_PROJECT(workspacSlug), data)
       .then((response) => {
         return response?.data;
       })
@@ -115,8 +122,8 @@ class ProjectServices extends APIService {
       });
   }
 
-  async projectMembers(workspace_slug: string, project_id: string): Promise<any> {
-    return this.get(PROJECT_MEMBERS(workspace_slug, project_id))
+  async projectMembers(workspacSlug: string, projectId: string): Promise<IProjectMember[]> {
+    return this.get(PROJECT_MEMBERS(workspacSlug, projectId))
       .then((response) => {
         return response?.data;
       })
@@ -126,12 +133,12 @@ class ProjectServices extends APIService {
   }
 
   async updateProjectMember(
-    workspace_slug: string,
-    project_id: string,
+    workspacSlug: string,
+    projectId: string,
     memberId: string,
-    data: any
-  ): Promise<any> {
-    return this.put(PROJECT_MEMBER_DETAIL(workspace_slug, project_id, memberId), data)
+    data: Partial<IProjectMember>
+  ): Promise<IProjectMember> {
+    return this.put(PROJECT_MEMBER_DETAIL(workspacSlug, projectId, memberId), data)
       .then((response) => {
         return response?.data;
       })
@@ -141,11 +148,11 @@ class ProjectServices extends APIService {
   }
 
   async deleteProjectMember(
-    workspace_slug: string,
-    project_id: string,
+    workspacSlug: string,
+    projectId: string,
     memberId: string
   ): Promise<any> {
-    return this.delete(PROJECT_MEMBER_DETAIL(workspace_slug, project_id, memberId))
+    return this.delete(PROJECT_MEMBER_DETAIL(workspacSlug, projectId, memberId))
       .then((response) => {
         return response?.data;
       })
@@ -154,8 +161,11 @@ class ProjectServices extends APIService {
       });
   }
 
-  async projectInvitations(workspace_slug: string, project_id: string): Promise<any> {
-    return this.get(PROJECT_INVITATIONS(workspace_slug, project_id))
+  async projectInvitations(
+    workspacSlug: string,
+    projectId: string
+  ): Promise<IProjectMemberInvitation[]> {
+    return this.get(PROJECT_INVITATIONS(workspacSlug, projectId))
       .then((response) => {
         return response?.data;
       })
@@ -165,11 +175,11 @@ class ProjectServices extends APIService {
   }
 
   async updateProjectInvitation(
-    workspace_slug: string,
-    project_id: string,
-    invitation_id: string
+    workspacSlug: string,
+    projectId: string,
+    invitationId: string
   ): Promise<any> {
-    return this.put(PROJECT_INVITATION_DETAIL(workspace_slug, project_id, invitation_id))
+    return this.put(PROJECT_INVITATION_DETAIL(workspacSlug, projectId, invitationId))
       .then((response) => {
         return response?.data;
       })
@@ -177,12 +187,27 @@ class ProjectServices extends APIService {
         throw error?.response?.data;
       });
   }
+
   async deleteProjectInvitation(
-    workspace_slug: string,
-    project_id: string,
-    invitation_id: string
+    workspacSlug: string,
+    projectId: string,
+    invitationId: string
   ): Promise<any> {
-    return this.delete(PROJECT_INVITATION_DETAIL(workspace_slug, project_id, invitation_id))
+    return this.delete(PROJECT_INVITATION_DETAIL(workspacSlug, projectId, invitationId))
+      .then((response) => {
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async setProjectView(
+    workspacSlug: string,
+    projectId: string,
+    data: ProjectViewTheme
+  ): Promise<any> {
+    await this.patch(PROJECT_VIEW_ENDPOINT(workspacSlug, projectId), data)
       .then((response) => {
         return response?.data;
       })

apps/app/lib/services/user.service.ts

@@ -16,8 +16,8 @@ class UserService extends APIService {
     };
   }
 
-  async userIssues(): Promise<any> {
-    return this.get(USER_ISSUES_ENDPOINT)
+  async userIssues(workspaceSlug: string): Promise<any> {
+    return this.get(USER_ISSUES_ENDPOINT(workspaceSlug))
       .then((response) => {
         return response?.data;
       })

apps/app/lib/services/workspace.service.ts

@@ -11,18 +11,27 @@ import {
   WORKSPACE_INVITATION_DETAIL,
   USER_WORKSPACE_INVITATION,
   USER_WORKSPACE_INVITATIONS,
+  LAST_ACTIVE_WORKSPACE_AND_PROJECTS,
 } from "constants/api-routes";
 // services
 import APIService from "lib/services/api.service";
 
 const { NEXT_PUBLIC_API_BASE_URL } = process.env;
 
+// types
+import {
+  ILastActiveWorkspaceDetails,
+  IWorkspace,
+  IWorkspaceMember,
+  IWorkspaceMemberInvitation,
+} from "types";
+
 class WorkspaceService extends APIService {
   constructor() {
     super(NEXT_PUBLIC_API_BASE_URL || "http://localhost:8000");
   }
 
-  async userWorkspaces(): Promise<any> {
+  async userWorkspaces(): Promise<IWorkspace[]> {
     return this.get(USER_WORKSPACES)
       .then((response) => {
         return response?.data;
@@ -32,7 +41,7 @@ class WorkspaceService extends APIService {
       });
   }
 
-  async createWorkspace(data: any): Promise<any> {
+  async createWorkspace(data: Partial<IWorkspace>): Promise<IWorkspace> {
     return this.post(WORKSPACES_ENDPOINT, data)
       .then((response) => {
         return response?.data;
@@ -42,17 +51,8 @@ class WorkspaceService extends APIService {
       });
   }
 
-  async updateWorkspace(workspace_slug: string, data: any): Promise<any> {
-    return this.patch(WORKSPACE_DETAIL(workspace_slug), data)
-      .then((response) => {
-        return response?.data;
-      })
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-  async deleteWorkspace(workspace_slug: string): Promise<any> {
-    return this.delete(WORKSPACE_DETAIL(workspace_slug))
+  async updateWorkspace(workspaceSlug: string, data: Partial<IWorkspace>): Promise<IWorkspace> {
+    return this.patch(WORKSPACE_DETAIL(workspaceSlug), data)
       .then((response) => {
         return response?.data;
       })
@@ -61,8 +61,8 @@ class WorkspaceService extends APIService {
       });
   }
 
-  async inviteWorkspace(workspace_slug: string, data: any): Promise<any> {
-    return this.post(INVITE_WORKSPACE(workspace_slug), data)
+  async deleteWorkspace(workspaceSlug: string): Promise<any> {
+    return this.delete(WORKSPACE_DETAIL(workspaceSlug))
       .then((response) => {
         return response?.data;
       })
@@ -70,8 +70,19 @@ class WorkspaceService extends APIService {
         throw error?.response?.data;
       });
   }
-  async joinWorkspace(workspace_slug: string, InvitationId: string, data: any): Promise<any> {
-    return this.post(JOIN_WORKSPACE(workspace_slug, InvitationId), data, {
+
+  async inviteWorkspace(workspaceSlug: string, data: any): Promise<any> {
+    return this.post(INVITE_WORKSPACE(workspaceSlug), data)
+      .then((response) => {
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async joinWorkspace(workspaceSlug: string, InvitationId: string, data: any): Promise<any> {
+    return this.post(JOIN_WORKSPACE(workspaceSlug, InvitationId), data, {
       headers: {},
     })
       .then((response) => {
@@ -92,7 +103,17 @@ class WorkspaceService extends APIService {
       });
   }
 
-  async userWorkspaceInvitations(): Promise<any> {
+  async getLastActiveWorkspaceAndProjects(): Promise<ILastActiveWorkspaceDetails> {
+    return this.get(LAST_ACTIVE_WORKSPACE_AND_PROJECTS)
+      .then((response) => {
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async userWorkspaceInvitations(): Promise<IWorkspaceMemberInvitation[]> {
     return this.get(USER_WORKSPACE_INVITATIONS)
       .then((response) => {
         return response?.data;
@@ -102,8 +123,8 @@ class WorkspaceService extends APIService {
       });
   }
 
-  async workspaceMembers(workspace_slug: string): Promise<any> {
-    return this.get(WORKSPACE_MEMBERS(workspace_slug))
+  async workspaceMembers(workspaceSlug: string): Promise<IWorkspaceMember[]> {
+    return this.get(WORKSPACE_MEMBERS(workspaceSlug))
       .then((response) => {
         return response?.data;
       })
@@ -112,8 +133,12 @@ class WorkspaceService extends APIService {
       });
   }
 
-  async updateWorkspaceMember(workspace_slug: string, memberId: string, data: any): Promise<any> {
-    return this.put(WORKSPACE_MEMBER_DETAIL(workspace_slug, memberId), data)
+  async updateWorkspaceMember(
+    workspaceSlug: string,
+    memberId: string,
+    data: Partial<IWorkspaceMember>
+  ): Promise<IWorkspaceMember> {
+    return this.put(WORKSPACE_MEMBER_DETAIL(workspaceSlug, memberId), data)
       .then((response) => {
         return response?.data;
       })
@@ -122,8 +147,8 @@ class WorkspaceService extends APIService {
       });
   }
 
-  async deleteWorkspaceMember(workspace_slug: string, memberId: string): Promise<any> {
-    return this.delete(WORKSPACE_MEMBER_DETAIL(workspace_slug, memberId))
+  async deleteWorkspaceMember(workspaceSlug: string, memberId: string): Promise<any> {
+    return this.delete(WORKSPACE_MEMBER_DETAIL(workspaceSlug, memberId))
       .then((response) => {
         return response?.data;
       })
@@ -132,8 +157,8 @@ class WorkspaceService extends APIService {
       });
   }
 
-  async workspaceInvitations(workspace_slug: string): Promise<any> {
-    return this.get(WORKSPACE_INVITATIONS(workspace_slug))
+  async workspaceInvitations(workspaceSlug: string): Promise<IWorkspaceMemberInvitation[]> {
+    return this.get(WORKSPACE_INVITATIONS(workspaceSlug))
       .then((response) => {
         return response?.data;
       })
@@ -142,8 +167,8 @@ class WorkspaceService extends APIService {
       });
   }
 
-  async getWorkspaceInvitation(invitation_id: string): Promise<any> {
-    return this.get(USER_WORKSPACE_INVITATION(invitation_id), { headers: {} })
+  async getWorkspaceInvitation(invitationId: string): Promise<IWorkspaceMemberInvitation> {
+    return this.get(USER_WORKSPACE_INVITATION(invitationId), { headers: {} })
       .then((response) => {
         return response?.data;
       })
@@ -152,8 +177,11 @@ class WorkspaceService extends APIService {
       });
   }
 
-  async updateWorkspaceInvitation(workspace_slug: string, invitation_id: string): Promise<any> {
-    return this.put(WORKSPACE_INVITATION_DETAIL(workspace_slug, invitation_id))
+  async updateWorkspaceInvitation(
+    workspaceSlug: string,
+    invitationId: string
+  ): Promise<IWorkspaceMemberInvitation> {
+    return this.put(WORKSPACE_INVITATION_DETAIL(workspaceSlug, invitationId))
       .then((response) => {
         return response?.data;
       })
@@ -161,8 +189,9 @@ class WorkspaceService extends APIService {
         throw error?.response?.data;
       });
   }
-  async deleteWorkspaceInvitations(workspace_slug: string, invitation_id: string): Promise<any> {
-    return this.delete(WORKSPACE_INVITATION_DETAIL(workspace_slug, invitation_id))
+
+  async deleteWorkspaceInvitations(workspaceSlug: string, invitationId: string): Promise<any> {
+    return this.delete(WORKSPACE_INVITATION_DETAIL(workspaceSlug, invitationId))
       .then((response) => {
         return response?.data;
       })

apps/app/pages/create-workspace.tsx

@@ -8,6 +8,8 @@ import { useForm } from "react-hook-form";
 import workspaceService from "lib/services/workspace.service";
 // hooks
 import useUser from "lib/hooks/useUser";
+// hoc
+import withAuth from "lib/hoc/withAuthWrapper";
 // layouts
 import DefaultLayout from "layouts/DefaultLayout";
 // ui
@@ -144,4 +146,4 @@ const CreateWorkspace: NextPage = () => {
   );
 };
 
-export default CreateWorkspace;
+export default withAuth(CreateWorkspace);

apps/app/pages/invitations.tsx

@@ -11,6 +11,8 @@ import userService from "lib/services/user.service";
 import useUser from "lib/hooks/useUser";
 // constants
 import { USER_WORKSPACE_INVITATIONS } from "constants/api-routes";
+// hoc
+import withAuth from "lib/hoc/withAuthWrapper";
 // layouts
 import DefaultLayout from "layouts/DefaultLayout";
 // components
@@ -20,7 +22,7 @@ import { Button, Spinner, EmptySpace, EmptySpaceItem } from "ui";
 // icons
 import { CubeIcon, PlusIcon } from "@heroicons/react/24/outline";
 // types
-import type { IWorkspaceInvitation } from "types";
+import type { IWorkspaceMemberInvitation } from "types";
 import Link from "next/link";
 
 const OnBoard: NextPage = () => {
@@ -30,13 +32,12 @@ const OnBoard: NextPage = () => {
 
   const [invitationsRespond, setInvitationsRespond] = useState<string[]>([]);
 
-  const { data: invitations, mutate } = useSWR<IWorkspaceInvitation[]>(
-    USER_WORKSPACE_INVITATIONS,
-    () => workspaceService.userWorkspaceInvitations()
+  const { data: invitations, mutate } = useSWR(USER_WORKSPACE_INVITATIONS, () =>
+    workspaceService.userWorkspaceInvitations()
   );
 
   const handleInvitation = (
-    workspace_invitation: IWorkspaceInvitation,
+    workspace_invitation: IWorkspaceMemberInvitation,
     action: "accepted" | "withdraw"
   ) => {
     if (action === "accepted") {
@@ -204,4 +205,4 @@ const OnBoard: NextPage = () => {
   );
 };
 
-export default OnBoard;
+export default withAuth(OnBoard);

apps/app/pages/me/my-issues.tsx

@@ -5,7 +5,7 @@ import type { NextPage } from "next";
 // swr
 import useSWR from "swr";
 // layouts
-import AdminLayout from "layouts/AdminLayout";
+import AppLayout from "layouts/AppLayout";
 // hooks
 import useUser from "lib/hooks/useUser";
 // ui
@@ -18,7 +18,9 @@ import { USER_ISSUE } from "constants/fetch-keys";
 import { classNames } from "constants/common";
 // services
 import userService from "lib/services/user.service";
-import issuesServices from "lib/services/issues.services";
+import issuesServices from "lib/services/issues.service";
+// hoc
+import withAuth from "lib/hoc/withAuthWrapper";
 // components
 import ChangeStateDropdown from "components/project/issues/my-issues/ChangeStateDropdown";
 // icons
@@ -31,11 +33,11 @@ import { Menu, Transition } from "@headlessui/react";
 const MyIssues: NextPage = () => {
   const [selectedWorkspace, setSelectedWorkspace] = useState<string | null>(null);
 
-  const { user, workspaces } = useUser();
+  const { user, workspaces, activeWorkspace } = useUser();
 
   const { data: myIssues, mutate: mutateMyIssues } = useSWR<IIssue[]>(
-    user ? USER_ISSUE : null,
-    user ? () => userService.userIssues() : null
+    user && activeWorkspace ? USER_ISSUE(activeWorkspace.slug) : null,
+    user && activeWorkspace ? () => userService.userIssues(activeWorkspace.slug) : null
   );
 
   const updateMyIssues = (
@@ -74,7 +76,7 @@ const MyIssues: NextPage = () => {
   };
 
   return (
-    <AdminLayout>
+    <AppLayout>
       <div className="w-full h-full flex flex-col space-y-5">
         {myIssues ? (
           <>
@@ -274,8 +276,8 @@ const MyIssues: NextPage = () => {
           </div>
         )}
       </div>
-    </AdminLayout>
+    </AppLayout>
   );
 };
 
-export default MyIssues;
+export default withAuth(MyIssues);

apps/app/pages/me/profile.tsx

@@ -1,22 +1,30 @@
 import React, { useEffect, useState } from "react";
 // next
+import Link from "next/link";
 import Image from "next/image";
 import type { NextPage } from "next";
+// swr
+import useSWR from "swr";
 // react hook form
 import { useForm } from "react-hook-form";
 // react dropzone
-import Dropzone, { useDropzone } from "react-dropzone";
+import Dropzone from "react-dropzone";
 // hooks
 import useUser from "lib/hooks/useUser";
+import useToast from "lib/hooks/useToast";
+// hoc
+import withAuth from "lib/hoc/withAuthWrapper";
 // layouts
-import AdminLayout from "layouts/AdminLayout";
+import AppLayout from "layouts/AppLayout";
+// constants
+import { USER_ISSUE, USER_WORKSPACE_INVITATIONS } from "constants/fetch-keys";
 // services
 import userService from "lib/services/user.service";
-import fileServices from "lib/services/file.services";
+import fileServices from "lib/services/file.service";
+import workspaceService from "lib/services/workspace.service";
 // ui
 import { BreadcrumbItem, Breadcrumbs, Button, Input, Spinner } from "ui";
-// types
-import type { IIssue, IUser, IWorkspaceInvitation } from "types";
+// icons
 import {
   ChevronRightIcon,
   ClipboardDocumentListIcon,
@@ -26,11 +34,8 @@ import {
   UserPlusIcon,
   XMarkIcon,
 } from "@heroicons/react/24/outline";
-import useSWR from "swr";
-import { USER_ISSUE, USER_WORKSPACE_INVITATIONS } from "constants/fetch-keys";
-import useToast from "lib/hooks/useToast";
-import Link from "next/link";
-import workspaceService from "lib/services/workspace.service";
+// types
+import type { IIssue, IUser } from "types";
 
 const defaultValues: Partial<IUser> = {
   avatar: "",
@@ -44,13 +49,19 @@ const Profile: NextPage = () => {
   const [isImageUploading, setIsImageUploading] = useState(false);
   const [isEditing, setIsEditing] = useState(false);
 
-  const { user: myProfile, mutateUser, projects } = useUser();
+  const { user: myProfile, mutateUser, projects, activeWorkspace } = useUser();
 
   const { setToastAlert } = useToast();
 
   const onSubmit = (formData: IUser) => {
+    const payload: Partial<IUser> = {
+      id: formData.id,
+      first_name: formData.first_name,
+      last_name: formData.last_name,
+      avatar: formData.avatar,
+    };
     userService
-      .updateUser(formData)
+      .updateUser(payload)
       .then((response) => {
         mutateUser(response, false);
         setIsEditing(false);
@@ -75,11 +86,11 @@ const Profile: NextPage = () => {
   } = useForm<IUser>({ defaultValues });
 
   const { data: myIssues } = useSWR<IIssue[]>(
-    myProfile ? USER_ISSUE : null,
-    myProfile ? () => userService.userIssues() : null
+    myProfile && activeWorkspace ? USER_ISSUE(activeWorkspace.slug) : null,
+    myProfile && activeWorkspace ? () => userService.userIssues(activeWorkspace.slug) : null
   );
 
-  const { data: invitations } = useSWR<IWorkspaceInvitation[]>(USER_WORKSPACE_INVITATIONS, () =>
+  const { data: invitations } = useSWR(USER_WORKSPACE_INVITATIONS, () =>
     workspaceService.userWorkspaceInvitations()
   );
 
@@ -92,7 +103,7 @@ const Profile: NextPage = () => {
       icon: RectangleStackIcon,
       title: "My Issues",
       number: myIssues?.length ?? 0,
-      description: "View the list of issues assigned to you across the workspace.",
+      description: "View the list of issues assigned to you for this workspace.",
       href: "/me/my-issues",
     },
     {
@@ -112,7 +123,7 @@ const Profile: NextPage = () => {
   ];
 
   return (
-    <AdminLayout
+    <AppLayout
       meta={{
         title: "Plane - My Profile",
       }}
@@ -125,7 +136,8 @@ const Profile: NextPage = () => {
           <>
             <div className="space-y-5">
               <section className="relative p-5 rounded-xl flex gap-10 bg-secondary">
-                <div
+                <button
+                  type="button"
                   className="absolute top-4 right-4 bg-indigo-100 hover:bg-theme hover:text-white rounded p-1 cursor-pointer duration-300"
                   onClick={() => setIsEditing((prevData) => !prevData)}
                 >
@@ -134,7 +146,7 @@ const Profile: NextPage = () => {
                   ) : (
                     <PencilIcon className="h-4 w-4" />
                   )}
-                </div>
+                </button>
                 <div className="flex-shrink-0">
                   <Dropzone
                     multiple={false}
@@ -241,21 +253,7 @@ const Profile: NextPage = () => {
                     </div>
                     <div>
                       <h4 className="text-sm text-gray-500">Email ID</h4>
-                      {isEditing ? (
-                        <Input
-                          id="email"
-                          type="email"
-                          register={register}
-                          error={errors.email}
-                          name="email"
-                          validations={{
-                            required: "Email is required",
-                          }}
-                          placeholder="Enter email"
-                        />
-                      ) : (
-                        <h2>{myProfile.email}</h2>
-                      )}
+                      <h2>{myProfile.email}</h2>
                     </div>
                   </div>
                   {isEditing && (
@@ -303,8 +301,8 @@ const Profile: NextPage = () => {
           </div>
         )}
       </div>
-    </AdminLayout>
+    </AppLayout>
   );
 };
 
-export default Profile;
+export default withAuth(Profile);

apps/app/pages/me/workspace-invites.tsx

@@ -10,7 +10,7 @@ import useUser from "lib/hooks/useUser";
 // hoc
 import withAuthWrapper from "lib/hoc/withAuthWrapper";
 // layouts
-import AdminLayout from "layouts/AdminLayout";
+import AppLayout from "layouts/AppLayout";
 // ui
 import { Button } from "ui";
 // swr
@@ -52,7 +52,7 @@ const MyWorkspacesInvites: NextPage = () => {
   };
 
   return (
-    <AdminLayout
+    <AppLayout
       meta={{
         title: "Plane - My Workspace Invites",
       }}
@@ -147,7 +147,7 @@ const MyWorkspacesInvites: NextPage = () => {
           )}
         </div>
       </div>
-    </AdminLayout>
+    </AppLayout>
   );
 };
 

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

@@ -5,14 +5,16 @@ import type { NextPage } from "next";
 // swr
 import useSWR, { mutate } from "swr";
 // services
-import issuesServices from "lib/services/issues.services";
-import sprintService from "lib/services/cycles.services";
+import issuesServices from "lib/services/issues.service";
+import sprintService from "lib/services/cycles.service";
 // hooks
 import useUser from "lib/hooks/useUser";
 // fetching keys
 import { CYCLE_ISSUES, CYCLE_LIST } from "constants/fetch-keys";
+// hoc
+import withAuth from "lib/hoc/withAuthWrapper";
 // layouts
-import AdminLayout from "layouts/AdminLayout";
+import AppLayout from "layouts/AppLayout";
 // components
 import CycleView from "components/project/cycles/CycleView";
 import ConfirmIssueDeletion from "components/project/issues/ConfirmIssueDeletion";
@@ -165,7 +167,7 @@ const ProjectSprints: NextPage = () => {
   }, [selectedIssues]);
 
   return (
-    <AdminLayout
+    <AppLayout
       meta={{
         title: "Plane - Cycles",
       }}
@@ -254,8 +256,8 @@ const ProjectSprints: NextPage = () => {
           <Spinner />
         </div>
       )}
-    </AdminLayout>
+    </AppLayout>
   );
 };
 
-export default ProjectSprints;
+export default withAuth(ProjectSprints);

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

@@ -11,8 +11,7 @@ import { Controller, useForm } from "react-hook-form";
 // headless ui
 import { Disclosure, Menu, Tab, Transition } from "@headlessui/react";
 // services
-import issuesServices from "lib/services/issues.services";
-import stateServices from "lib/services/state.services";
+import issuesServices from "lib/services/issues.service";
 // fetch keys
 import {
   PROJECT_ISSUES_ACTIVITY,
@@ -22,8 +21,10 @@ import {
 } from "constants/fetch-keys";
 // hooks
 import useUser from "lib/hooks/useUser";
+// hoc
+import withAuth from "lib/hoc/withAuthWrapper";
 // layouts
-import AdminLayout from "layouts/AdminLayout";
+import AppLayout from "layouts/AppLayout";
 // components
 import CreateUpdateIssuesModal from "components/project/issues/CreateUpdateIssueModal";
 import IssueCommentSection from "components/project/issues/issue-detail/comment/IssueCommentSection";
@@ -38,7 +39,7 @@ import { Spinner, TextArea } from "ui";
 import HeaderButton from "ui/HeaderButton";
 import { BreadcrumbItem, Breadcrumbs } from "ui/Breadcrumbs";
 // types
-import { IIssue, IIssueComment, IssueResponse, IState } from "types";
+import { IIssue, IIssueComment, IssueResponse } from "types";
 // icons
 import {
   ChevronLeftIcon,
@@ -208,7 +209,7 @@ const IssueDetail: NextPage = () => {
   };
 
   return (
-    <AdminLayout>
+    <AppLayout noPadding={true} bg="secondary">
       <CreateUpdateIssuesModal
         isOpen={isOpen}
         setIsOpen={setIsOpen}
@@ -222,46 +223,23 @@ const IssueDetail: NextPage = () => {
         setIsOpen={setIsAddAsSubIssueOpen}
         parent={issueDetail}
       />
-
-      <div className="flex items-center justify-between w-full mb-5">
-        <Breadcrumbs>
-          <BreadcrumbItem
-            title={`${activeProject?.name ?? "Project"} Issues`}
-            link={`/projects/${activeProject?.id}/issues`}
-          />
-          <BreadcrumbItem
-            title={`Issue ${activeProject?.identifier ?? "Project"}-${
-              issueDetail?.sequence_id ?? "..."
-            } Details`}
-          />
-        </Breadcrumbs>
-        <div className="flex items-center gap-x-3">
-          <HeaderButton
-            Icon={ChevronLeftIcon}
-            label="Previous"
-            className={`${!prevIssue ? "cursor-not-allowed opacity-70" : ""}`}
-            onClick={() => {
-              if (!prevIssue) return;
-              router.push(`/projects/${prevIssue.project}/issues/${prevIssue.id}`);
-            }}
-          />
-          <HeaderButton
-            Icon={ChevronRightIcon}
-            disabled={!nextIssue}
-            label="Next"
-            className={`${!nextIssue ? "cursor-not-allowed opacity-70" : ""}`}
-            onClick={() => {
-              if (!nextIssue) return;
-              router.push(`/projects/${nextIssue.project}/issues/${nextIssue?.id}`);
-            }}
-            position="reverse"
-          />
-        </div>
-      </div>
       {issueDetail && activeProject ? (
-        <div className="grid grid-cols-4 gap-5">
-          <div className="col-span-3 space-y-5">
-            <div className="bg-secondary rounded-lg p-4">
+        <div className="flex gap-5">
+          <div className="basis-3/4 space-y-5 p-5">
+            <div className="mb-5">
+              <Breadcrumbs>
+                <BreadcrumbItem
+                  title={`${activeProject?.name ?? "Project"} Issues`}
+                  link={`/projects/${activeProject?.id}/issues`}
+                />
+                <BreadcrumbItem
+                  title={`Issue ${activeProject?.identifier ?? "Project"}-${
+                    issueDetail?.sequence_id ?? "..."
+                  } Details`}
+                />
+              </Breadcrumbs>
+            </div>
+            <div className="rounded-lg">
               {issueDetail.parent !== null && issueDetail.parent !== "" ? (
                 <div className="bg-gray-100 flex items-center gap-2 p-2 text-xs rounded mb-5 w-min whitespace-nowrap">
                   <Link href={`/projects/${activeProject.id}/issues/${issueDetail.parent}`}>
@@ -273,7 +251,8 @@ const IssueDetail: NextPage = () => {
                         }}
                       />
                       <span className="flex-shrink-0 text-gray-600">
-                        {activeProject.identifier}-{issueDetail.sequence_id}
+                        {activeProject.identifier}-
+                        {issues?.results.find((i) => i.id === issueDetail.parent)?.sequence_id}
                       </span>
                       <span className="font-medium truncate">
                         {issues?.results
@@ -365,7 +344,7 @@ const IssueDetail: NextPage = () => {
               </div>
               <div className="mt-2">
                 {subIssues && subIssues.length > 0 ? (
-                  <Disclosure>
+                  <Disclosure defaultOpen={true}>
                     {({ open }) => (
                       <>
                         <div className="flex justify-between items-center">
@@ -437,7 +416,7 @@ const IssueDetail: NextPage = () => {
                             {subIssues.map((subIssue) => (
                               <div
                                 key={subIssue.id}
-                                className="flex justify-between items-center gap-2 p-2 hover:bg-gray-100"
+                                className="group flex justify-between items-center gap-2 rounded p-2 hover:bg-gray-100"
                               >
                                 <Link href={`/projects/${activeProject.id}/issues/${subIssue.id}`}>
                                   <a className="flex items-center gap-2 rounded text-xs">
@@ -455,9 +434,9 @@ const IssueDetail: NextPage = () => {
                                     </span>
                                   </a>
                                 </Link>
-                                <div>
+                                <div className="opacity-0 group-hover:opacity-100">
                                   <Menu as="div" className="relative inline-block">
-                                    <Menu.Button className="grid relative place-items-center focus:outline-none">
+                                    <Menu.Button className="grid relative place-items-center hover:bg-gray-200 p-1 focus:outline-none">
                                       <EllipsisHorizontalIcon className="h-4 w-4" />
                                     </Menu.Button>
 
@@ -553,7 +532,7 @@ const IssueDetail: NextPage = () => {
                 )}
               </div>
             </div>
-            <div className="bg-secondary rounded-lg p-4 space-y-5">
+            <div className="bg-secondary rounded-lg space-y-5">
               <Tab.Group>
                 <Tab.List className="flex gap-x-3">
                   {["Comments", "Activity"].map((item) => (
@@ -589,11 +568,34 @@ const IssueDetail: NextPage = () => {
               </Tab.Group>
             </div>
           </div>
-          <div className="sticky top-0 h-min bg-secondary p-4 rounded-lg">
+          <div className="basis-1/4 rounded-lg space-y-5 p-5 border-l">
+            <div className="flex justify-end items-center gap-x-3 mb-5">
+              <HeaderButton
+                Icon={ChevronLeftIcon}
+                label="Previous"
+                className={`${!prevIssue ? "cursor-not-allowed opacity-70" : ""}`}
+                onClick={() => {
+                  if (!prevIssue) return;
+                  router.push(`/projects/${prevIssue.project}/issues/${prevIssue.id}`);
+                }}
+              />
+              <HeaderButton
+                Icon={ChevronRightIcon}
+                disabled={!nextIssue}
+                label="Next"
+                className={`${!nextIssue ? "cursor-not-allowed opacity-70" : ""}`}
+                onClick={() => {
+                  if (!nextIssue) return;
+                  router.push(`/projects/${nextIssue.project}/issues/${nextIssue?.id}`);
+                }}
+                position="reverse"
+              />
+            </div>
             <IssueDetailSidebar
               control={control}
               issueDetail={issueDetail}
               submitChanges={submitChanges}
+              watch={watch}
             />
           </div>
         </div>
@@ -602,8 +604,8 @@ const IssueDetail: NextPage = () => {
           <Spinner />
         </div>
       )}
-    </AdminLayout>
+    </AppLayout>
   );
 };
 
-export default IssueDetail;
+export default withAuth(IssueDetail);

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

@@ -18,7 +18,7 @@ import projectService from "lib/services/project.service";
 // commons
 import { classNames, replaceUnderscoreIfSnakeCase } from "constants/common";
 // layouts
-import AdminLayout from "layouts/AdminLayout";
+import AppLayout from "layouts/AppLayout";
 // hooks
 import useIssuesFilter from "lib/hooks/useIssuesFilter";
 // components
@@ -34,7 +34,7 @@ import HeaderButton from "ui/HeaderButton";
 import { ChevronDownIcon, ListBulletIcon, RectangleStackIcon } from "@heroicons/react/24/outline";
 import { PlusIcon, Squares2X2Icon } from "@heroicons/react/20/solid";
 // types
-import type { IIssue, Properties, NestedKeyOf, ProjectMember } from "types";
+import type { IIssue, Properties, NestedKeyOf } from "types";
 
 const groupByOptions: Array<{ name: string; key: NestedKeyOf<IIssue> | null }> = [
   { name: "State", key: "state_detail.name" },
@@ -44,8 +44,8 @@ const groupByOptions: Array<{ name: string; key: NestedKeyOf<IIssue> | null }> =
 ];
 
 const orderByOptions: Array<{ name: string; key: NestedKeyOf<IIssue> }> = [
-  { name: "Created", key: "created_at" },
-  { name: "Update", key: "updated_at" },
+  { name: "Last created", key: "created_at" },
+  { name: "Last updated", key: "updated_at" },
   { name: "Priority", key: "priority" },
 ];
 
@@ -86,11 +86,19 @@ const ProjectIssues: NextPage = () => {
     projectId as string
   );
 
-  const { data: members } = useSWR<ProjectMember[]>(
-    activeWorkspace && activeProject ? PROJECT_MEMBERS : null,
+  const { data: members } = useSWR(
+    activeWorkspace && activeProject
+      ? PROJECT_MEMBERS(activeWorkspace.slug, activeProject.id)
+      : null,
     activeWorkspace && activeProject
       ? () => projectService.projectMembers(activeWorkspace.slug, activeProject.id)
-      : null
+      : null,
+    {
+      onErrorRetry(err, _, __, revalidate, revalidateOpts) {
+        if (err?.status === 403) return;
+        setTimeout(() => revalidate(revalidateOpts), 5000);
+      },
+    }
   );
 
   const {
@@ -115,7 +123,7 @@ const ProjectIssues: NextPage = () => {
   }, [isOpen]);
 
   return (
-    <AdminLayout>
+    <AppLayout>
       <CreateUpdateIssuesModal
         isOpen={isOpen && selectedIssue?.actionType !== "delete"}
         setIsOpen={setIsOpen}
@@ -173,7 +181,7 @@ const ProjectIssues: NextPage = () => {
                       <Popover.Button
                         className={classNames(
                           open ? "text-gray-900" : "text-gray-500",
-                          "group inline-flex items-center rounded-md bg-transparent text-base font-medium hover:text-gray-900 focus:outline-none border border-gray-300 px-3 py-1"
+                          "group inline-flex items-center rounded-md bg-transparent text-xs font-medium hover:text-gray-900 focus:outline-none border border-gray-300 px-2 py-2"
                         )}
                       >
                         <span>View</span>
@@ -195,85 +203,83 @@ const ProjectIssues: NextPage = () => {
                         leaveFrom="opacity-100 translate-y-0"
                         leaveTo="opacity-0 translate-y-1"
                       >
-                        <Popover.Panel className="absolute mr-5 right-1/2 z-10 mt-3 w-screen max-w-xs translate-x-1/2 transform px-2 sm:px-0 bg-gray-0 backdrop-filter backdrop-blur-xl bg-opacity-100 rounded-lg shadow-lg overflow-hidden">
-                          <div className="overflow-hidden py-8 px-4">
-                            <div className="relative flex flex-col gap-1 gap-y-4">
-                              <div className="flex justify-between">
-                                <h4 className="text-base text-gray-600">Group by</h4>
-                                <CustomMenu
-                                  label={
-                                    groupByOptions.find((option) => option.key === groupByProperty)
-                                      ?.name ?? "Select"
-                                  }
-                                >
-                                  {groupByOptions.map((option) => (
+                        <Popover.Panel className="absolute mr-5 right-1/2 z-10 mt-1 w-screen max-w-xs translate-x-1/2 transform p-4 bg-white rounded-lg shadow-lg overflow-hidden">
+                          <div className="relative flex flex-col gap-1 gap-y-4">
+                            <div className="flex justify-between">
+                              <h4 className="text-base text-gray-600">Group by</h4>
+                              <CustomMenu
+                                label={
+                                  groupByOptions.find((option) => option.key === groupByProperty)
+                                    ?.name ?? "Select"
+                                }
+                              >
+                                {groupByOptions.map((option) => (
+                                  <CustomMenu.MenuItem
+                                    key={option.key}
+                                    onClick={() => setGroupByProperty(option.key)}
+                                  >
+                                    {option.name}
+                                  </CustomMenu.MenuItem>
+                                ))}
+                              </CustomMenu>
+                            </div>
+                            <div className="flex justify-between">
+                              <h4 className="text-base text-gray-600">Order by</h4>
+                              <CustomMenu
+                                label={
+                                  orderByOptions.find((option) => option.key === orderBy)?.name ??
+                                  "Select"
+                                }
+                              >
+                                {orderByOptions.map((option) =>
+                                  groupByProperty === "priority" &&
+                                  option.key === "priority" ? null : (
                                     <CustomMenu.MenuItem
                                       key={option.key}
-                                      onClick={() => setGroupByProperty(option.key)}
+                                      onClick={() => setOrderBy(option.key)}
                                     >
                                       {option.name}
                                     </CustomMenu.MenuItem>
-                                  ))}
-                                </CustomMenu>
-                              </div>
-                              <div className="flex justify-between">
-                                <h4 className="text-base text-gray-600">Order by</h4>
-                                <CustomMenu
-                                  label={
-                                    orderByOptions.find((option) => option.key === orderBy)?.name ??
-                                    "Select"
-                                  }
-                                >
-                                  {orderByOptions.map((option) =>
-                                    groupByProperty === "priority" &&
-                                    option.key === "priority" ? null : (
-                                      <CustomMenu.MenuItem
-                                        key={option.key}
-                                        onClick={() => setOrderBy(option.key)}
-                                      >
-                                        {option.name}
-                                      </CustomMenu.MenuItem>
-                                    )
-                                  )}
-                                </CustomMenu>
-                              </div>
-                              <div className="flex justify-between">
-                                <h4 className="text-base text-gray-600">Issue type</h4>
-                                <CustomMenu
-                                  label={
-                                    filterIssueOptions.find((option) => option.key === filterIssue)
-                                      ?.name ?? "Select"
-                                  }
-                                >
-                                  {filterIssueOptions.map((option) => (
-                                    <CustomMenu.MenuItem
-                                      key={option.key}
-                                      onClick={() => setFilterIssue(option.key)}
-                                    >
-                                      {option.name}
-                                    </CustomMenu.MenuItem>
-                                  ))}
-                                </CustomMenu>
-                              </div>
-                              <div className="border-b-2"></div>
-                              <div className="relative flex flex-col gap-1">
-                                <h4 className="text-base text-gray-600">Properties</h4>
-                                <div>
-                                  {Object.keys(properties).map((key) => (
-                                    <button
-                                      key={key}
-                                      type="button"
-                                      className={`px-2 py-1 inline capitalize rounded border border-indigo-600 text-sm m-1 ${
-                                        properties[key as keyof Properties]
-                                          ? "border-indigo-600 bg-indigo-600 text-white"
-                                          : ""
-                                      }`}
-                                      onClick={() => setProperties(key as keyof Properties)}
-                                    >
-                                      {replaceUnderscoreIfSnakeCase(key)}
-                                    </button>
-                                  ))}
-                                </div>
+                                  )
+                                )}
+                              </CustomMenu>
+                            </div>
+                            <div className="flex justify-between">
+                              <h4 className="text-base text-gray-600">Issue type</h4>
+                              <CustomMenu
+                                label={
+                                  filterIssueOptions.find((option) => option.key === filterIssue)
+                                    ?.name ?? "Select"
+                                }
+                              >
+                                {filterIssueOptions.map((option) => (
+                                  <CustomMenu.MenuItem
+                                    key={option.key}
+                                    onClick={() => setFilterIssue(option.key)}
+                                  >
+                                    {option.name}
+                                  </CustomMenu.MenuItem>
+                                ))}
+                              </CustomMenu>
+                            </div>
+                            <div className="border-b-2"></div>
+                            <div className="relative flex flex-col gap-1">
+                              <h4 className="text-base text-gray-600">Properties</h4>
+                              <div>
+                                {Object.keys(properties).map((key) => (
+                                  <button
+                                    key={key}
+                                    type="button"
+                                    className={`px-2 py-1 inline capitalize rounded border border-indigo-600 text-sm m-1 ${
+                                      properties[key as keyof Properties]
+                                        ? "border-indigo-600 bg-indigo-600 text-white"
+                                        : ""
+                                    }`}
+                                    onClick={() => setProperties(key as keyof Properties)}
+                                  >
+                                    {replaceUnderscoreIfSnakeCase(key)}
+                                  </button>
+                                ))}
                               </div>
                             </div>
                           </div>
@@ -336,7 +342,7 @@ const ProjectIssues: NextPage = () => {
           </EmptySpace>
         </div>
       )}
-    </AdminLayout>
+    </AppLayout>
   );
 };
 

apps/app/pages/projects/[projectId]/members.tsx

@@ -14,8 +14,10 @@ import useUser from "lib/hooks/useUser";
 import useToast from "lib/hooks/useToast";
 // fetching keys
 import { PROJECT_MEMBERS, PROJECT_INVITATIONS } from "constants/fetch-keys";
+// hoc
+import withAuth from "lib/hoc/withAuthWrapper";
 // layouts
-import AdminLayout from "layouts/AdminLayout";
+import AppLayout from "layouts/AppLayout";
 // components
 import SendProjectInvitationModal from "components/project/SendProjectInvitationModal";
 import ConfirmProjectMemberRemove from "components/project/ConfirmProjectMemberRemove";
@@ -53,7 +55,13 @@ const ProjectMembers: NextPage = () => {
     activeWorkspace && projectId ? PROJECT_MEMBERS(projectId as string) : null,
     activeWorkspace && projectId
       ? () => projectService.projectMembers(activeWorkspace.slug, projectId as any)
-      : null
+      : null,
+    {
+      onErrorRetry(err, _, __, revalidate, revalidateOpts) {
+        if (err?.status === 403) return;
+        setTimeout(() => revalidate(revalidateOpts), 5000);
+      },
+    }
   );
   const { data: projectInvitations, mutate: mutateInvitations } = useSWR(
     activeWorkspace && projectId ? PROJECT_INVITATIONS : null,
@@ -84,7 +92,7 @@ const ProjectMembers: NextPage = () => {
   ];
 
   return (
-    <AdminLayout>
+    <AppLayout>
       <ConfirmProjectMemberRemove
         isOpen={Boolean(selectedRemoveMember) || Boolean(selectedInviteRemoveMember)}
         onClose={() => {
@@ -103,8 +111,7 @@ const ProjectMembers: NextPage = () => {
               selectedRemoveMember
             );
             mutateMembers(
-              (prevData: any[]) =>
-                prevData?.filter((item: any) => item.id !== selectedRemoveMember),
+              (prevData) => prevData?.filter((item: any) => item.id !== selectedRemoveMember),
               false
             );
           }
@@ -115,8 +122,7 @@ const ProjectMembers: NextPage = () => {
               selectedInviteRemoveMember
             );
             mutateInvitations(
-              (prevData: any[]) =>
-                prevData?.filter((item: any) => item.id !== selectedInviteRemoveMember),
+              (prevData) => prevData?.filter((item: any) => item.id !== selectedInviteRemoveMember),
               false
             );
           }
@@ -235,7 +241,7 @@ const ProjectMembers: NextPage = () => {
                       )}
                     </td>
                     <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500 sm:pl-6">
-                      {member.status ? (
+                      {member.member ? (
                         <span className="p-0.5 px-2 text-sm bg-green-700 text-white rounded-full">
                           Active
                         </span>
@@ -261,7 +267,7 @@ const ProjectMembers: NextPage = () => {
                                 className="w-full text-left py-2 pl-2"
                                 type="button"
                                 onClick={() => {
-                                  if (!member.status) {
+                                  if (!member.member) {
                                     setToastAlert({
                                       type: "error",
                                       message: "You can't edit a pending invitation.",
@@ -282,7 +288,7 @@ const ProjectMembers: NextPage = () => {
                                 className="w-full text-left py-2 pl-2"
                                 type="button"
                                 onClick={() => {
-                                  if (member.status) {
+                                  if (member.member) {
                                     setSelectedRemoveMember(member.id);
                                   } else {
                                     setSelectedInviteRemoveMember(member.id);
@@ -303,8 +309,8 @@ const ProjectMembers: NextPage = () => {
           )}
         </div>
       )}
-    </AdminLayout>
+    </AppLayout>
   );
 };
 
-export default ProjectMembers;
+export default withAuth(ProjectMembers);

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

@@ -1,52 +1,60 @@
-import React, { useEffect, useCallback, useState } from "react";
+import React, { useEffect, useState } from "react";
 // next
 import type { NextPage } from "next";
 import { useRouter } from "next/router";
+import dynamic from "next/dynamic";
 // swr
-import { mutate } from "swr";
-// swr
-import useSWR from "swr";
+import useSWR, { mutate } from "swr";
 // react hook form
-import { useForm, Controller } from "react-hook-form";
+import { useForm } from "react-hook-form";
 // headless ui
-import { Listbox, Tab, Transition } from "@headlessui/react";
+import { Tab } from "@headlessui/react";
+// hoc
+import withAuth from "lib/hoc/withAuthWrapper";
 // layouts
-import AdminLayout from "layouts/AdminLayout";
+import AppLayout from "layouts/AppLayout";
 // service
 import projectServices from "lib/services/project.service";
-import workspaceService from "lib/services/workspace.service";
 // hooks
 import useUser from "lib/hooks/useUser";
 import useToast from "lib/hooks/useToast";
 // fetch keys
-import { PROJECT_DETAILS, PROJECTS_LIST, WORKSPACE_MEMBERS } from "constants/fetch-keys";
-// commons
-import { addSpaceIfCamelCase, debounce } from "constants/common";
-// components
-import CreateUpdateStateModal from "components/project/issues/BoardView/state/CreateUpdateStateModal";
+import { PROJECT_DETAILS, PROJECTS_LIST } from "constants/fetch-keys";
 // ui
-import { Spinner, Button, Input, TextArea, Select } from "ui";
+import { Spinner } from "ui";
 import { Breadcrumbs, BreadcrumbItem } from "ui/Breadcrumbs";
-// icons
-import {
-  ChevronDownIcon,
-  CheckIcon,
-  PlusIcon,
-  PencilSquareIcon,
-  RectangleGroupIcon,
-  PencilIcon,
-} from "@heroicons/react/24/outline";
 // types
-import type { IProject, IWorkspace, WorkspaceMember } from "types";
+import type { IProject, IWorkspace } from "types";
 
 const defaultValues: Partial<IProject> = {
   name: "",
   description: "",
+  identifier: "",
+  network: 0,
 };
 
-const NETWORK_CHOICES = { "0": "Secret", "2": "Public" };
-
 const ProjectSettings: NextPage = () => {
+  // FIXME: instead of using dynamic import inside component use it outside
+  const GeneralSettings = dynamic(() => import("components/project/settings/GeneralSettings"), {
+    loading: () => <p>Loading...</p>,
+    ssr: false,
+  });
+
+  const ControlSettings = dynamic(() => import("components/project/settings/ControlSettings"), {
+    loading: () => <p>Loading...</p>,
+    ssr: false,
+  });
+
+  const StatesSettings = dynamic(() => import("components/project/settings/StatesSettings"), {
+    loading: () => <p>Loading...</p>,
+    ssr: false,
+  });
+
+  const LabelsSettings = dynamic(() => import("components/project/settings/LabelsSettings"), {
+    loading: () => <p>Loading...</p>,
+    ssr: false,
+  });
+
   const {
     register,
     handleSubmit,
@@ -58,30 +66,21 @@ const ProjectSettings: NextPage = () => {
     defaultValues,
   });
 
-  const [isCreateStateModalOpen, setIsCreateStateModalOpen] = useState(false);
-  const [selectedState, setSelectedState] = useState<string | undefined>();
-  const [newGroupForm, setNewGroupForm] = useState(false);
-
   const router = useRouter();
 
   const { projectId } = router.query;
 
-  const { activeWorkspace, activeProject, states } = useUser();
+  const { activeWorkspace, activeProject } = useUser();
 
   const { setToastAlert } = useToast();
 
   const { data: projectDetails } = useSWR<IProject>(
-    activeWorkspace && projectId ? PROJECT_DETAILS : null,
+    activeWorkspace && projectId ? PROJECT_DETAILS(projectId as string) : null,
     activeWorkspace
       ? () => projectServices.getProject(activeWorkspace.slug, projectId as string)
       : null
   );
 
-  const { data: people } = useSWR<WorkspaceMember[]>(
-    activeWorkspace ? WORKSPACE_MEMBERS : null,
-    activeWorkspace ? () => workspaceService.workspaceMembers(activeWorkspace.slug) : null
-  );
-
   useEffect(() => {
     projectDetails &&
       reset({
@@ -93,7 +92,7 @@ const ProjectSettings: NextPage = () => {
   }, [projectDetails, reset]);
 
   const onSubmit = async (formData: IProject) => {
-    if (!activeWorkspace) return;
+    if (!activeWorkspace || !projectId) return;
     const payload: Partial<IProject> = {
       name: formData.name,
       network: formData.network,
@@ -105,7 +104,11 @@ const ProjectSettings: NextPage = () => {
     await projectServices
       .updateProject(activeWorkspace.slug, projectId as string, payload)
       .then((res) => {
-        mutate<IProject>(PROJECT_DETAILS, (prevData) => ({ ...prevData, ...res }), false);
+        mutate<IProject>(
+          PROJECT_DETAILS(projectId as string),
+          (prevData) => ({ ...prevData, ...res }),
+          false
+        );
         mutate<IProject[]>(
           PROJECTS_LIST(activeWorkspace.slug),
           (prevData) => {
@@ -130,28 +133,9 @@ const ProjectSettings: NextPage = () => {
       });
   };
 
-  const checkIdentifier = (slug: string, value: string) => {
-    projectServices.checkProjectIdentifierAvailability(slug, value).then((response) => {
-      console.log(response);
-      if (response.exists) setError("identifier", { message: "Identifier already exists" });
-    });
-  };
-
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  const checkIdentifierAvailability = useCallback(debounce(checkIdentifier, 1500), []);
-
   return (
-    <AdminLayout>
+    <AppLayout>
       <div className="space-y-5 mb-5">
-        <CreateUpdateStateModal
-          isOpen={isCreateStateModalOpen || Boolean(selectedState)}
-          handleClose={() => {
-            setSelectedState(undefined);
-            setIsCreateStateModalOpen(false);
-          }}
-          projectId={projectId as string}
-          data={selectedState ? states?.find((state) => state.id === selectedState) : undefined}
-        />
         <Breadcrumbs>
           <BreadcrumbItem title="Projects" link="/projects" />
           <BreadcrumbItem title={`${activeProject?.name ?? "Project"} Settings`} />
@@ -159,386 +143,51 @@ const ProjectSettings: NextPage = () => {
       </div>
       {projectDetails ? (
         <div className="space-y-3">
-          <form onSubmit={handleSubmit(onSubmit)} className="mt-3">
-            <Tab.Group>
-              <Tab.List className="flex items-center gap-x-4 gap-y-2 flex-wrap">
-                {["General", "Control", "States", "Labels"].map((tab, index) => (
-                  <Tab
-                    key={index}
-                    className={({ selected }) =>
-                      `px-6 py-2 border-2 border-theme hover:bg-theme hover:text-white text-xs font-medium rounded-md duration-300 ${
-                        selected ? "bg-theme text-white" : ""
-                      }`
-                    }
-                  >
-                    {tab}
-                  </Tab>
-                ))}
-              </Tab.List>
-              <Tab.Panels className="mt-8">
+          <Tab.Group>
+            <Tab.List className="flex items-center gap-x-4 gap-y-2 flex-wrap mb-8">
+              {["General", "Control", "States", "Labels"].map((tab, index) => (
+                <Tab
+                  key={index}
+                  className={({ selected }) =>
+                    `px-6 py-2 border-2 border-theme hover:bg-theme hover:text-white text-xs font-medium rounded-md outline-none duration-300 ${
+                      selected ? "bg-theme text-white" : ""
+                    }`
+                  }
+                >
+                  {tab}
+                </Tab>
+              ))}
+            </Tab.List>
+            <Tab.Panels>
+              <form onSubmit={handleSubmit(onSubmit)}>
                 <Tab.Panel>
-                  <section className="space-y-5">
-                    <div>
-                      <h3 className="text-lg font-medium leading-6 text-gray-900">General</h3>
-                      <p className="mt-1 text-sm text-gray-500">
-                        This information will be displayed to every member of the project.
-                      </p>
-                    </div>
-                    <div className="grid grid-cols-4 gap-3">
-                      <div className="col-span-2">
-                        <Input
-                          id="name"
-                          name="name"
-                          error={errors.name}
-                          register={register}
-                          placeholder="Project Name"
-                          label="Name"
-                          validations={{
-                            required: "Name is required",
-                          }}
-                        />
-                      </div>
-                      <div>
-                        <Select
-                          name="network"
-                          id="network"
-                          options={Object.keys(NETWORK_CHOICES).map((key) => ({
-                            value: key,
-                            label: NETWORK_CHOICES[key as keyof typeof NETWORK_CHOICES],
-                          }))}
-                          label="Network"
-                          register={register}
-                          validations={{
-                            required: "Network is required",
-                          }}
-                        />
-                      </div>
-                      <div>
-                        <Input
-                          id="identifier"
-                          name="identifier"
-                          error={errors.identifier}
-                          register={register}
-                          placeholder="Enter identifier"
-                          label="Identifier"
-                          onChange={(e: any) => {
-                            if (!activeWorkspace || !e.target.value) return;
-                            checkIdentifierAvailability(activeWorkspace.slug, e.target.value);
-                          }}
-                          validations={{
-                            required: "Identifier is required",
-                            minLength: {
-                              value: 1,
-                              message: "Identifier must at least be of 1 character",
-                            },
-                            maxLength: {
-                              value: 9,
-                              message: "Identifier must at most be of 9 characters",
-                            },
-                          }}
-                        />
-                      </div>
-                    </div>
-                    <div>
-                      <TextArea
-                        id="description"
-                        name="description"
-                        error={errors.description}
-                        register={register}
-                        label="Description"
-                        placeholder="Enter project description"
-                        validations={{
-                          required: "Description is required",
-                        }}
-                      />
-                    </div>
-                    <div className="flex justify-end">
-                      <Button type="submit" disabled={isSubmitting}>
-                        {isSubmitting ? "Updating Project..." : "Update Project"}
-                      </Button>
-                    </div>
-                  </section>
+                  <GeneralSettings
+                    register={register}
+                    errors={errors}
+                    setError={setError}
+                    isSubmitting={isSubmitting}
+                  />
                 </Tab.Panel>
                 <Tab.Panel>
-                  <section className="space-y-5">
-                    <div>
-                      <h3 className="text-lg font-medium leading-6 text-gray-900">Control</h3>
-                      <p className="mt-1 text-sm text-gray-500">Set the control for the project.</p>
-                    </div>
-                    <div className="flex justify-between gap-3">
-                      <div className="w-full md:w-1/2">
-                        <Controller
-                          control={control}
-                          name="project_lead"
-                          render={({ field: { onChange, value } }) => (
-                            <Listbox value={value} onChange={onChange}>
-                              {({ open }) => (
-                                <>
-                                  <Listbox.Label>
-                                    <div className="text-gray-500 mb-2">Project Lead</div>
-                                  </Listbox.Label>
-                                  <div className="relative">
-                                    <Listbox.Button className="bg-white relative w-full border border-gray-300 rounded-md shadow-sm pl-3 pr-10 py-2 text-left cursor-default focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
-                                      <span className="block truncate">
-                                        {people?.find((person) => person.member.id === value)
-                                          ?.member.first_name ?? "Select Lead"}
-                                      </span>
-                                      <span className="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
-                                        <ChevronDownIcon
-                                          className="h-5 w-5 text-gray-400"
-                                          aria-hidden="true"
-                                        />
-                                      </span>
-                                    </Listbox.Button>
-
-                                    <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 w-full bg-white shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm">
-                                        {people?.map((person) => (
-                                          <Listbox.Option
-                                            key={person.id}
-                                            className={({ active }) =>
-                                              `${
-                                                active ? "text-white bg-theme" : "text-gray-900"
-                                              } cursor-default select-none relative py-2 pl-3 pr-9`
-                                            }
-                                            value={person.member.id}
-                                          >
-                                            {({ selected, active }) => (
-                                              <>
-                                                <span
-                                                  className={`${
-                                                    selected ? "font-semibold" : "font-normal"
-                                                  } block truncate`}
-                                                >
-                                                  {person.member.first_name}
-                                                </span>
-
-                                                {selected ? (
-                                                  <span
-                                                    className={`absolute inset-y-0 right-0 flex items-center pr-4 ${
-                                                      active ? "text-white" : "text-indigo-600"
-                                                    }`}
-                                                  >
-                                                    <CheckIcon
-                                                      className="h-5 w-5"
-                                                      aria-hidden="true"
-                                                    />
-                                                  </span>
-                                                ) : null}
-                                              </>
-                                            )}
-                                          </Listbox.Option>
-                                        ))}
-                                      </Listbox.Options>
-                                    </Transition>
-                                  </div>
-                                </>
-                              )}
-                            </Listbox>
-                          )}
-                        />
-                      </div>
-                      <div className="w-full md:w-1/2">
-                        <Controller
-                          control={control}
-                          name="default_assignee"
-                          render={({ field: { value, onChange } }) => (
-                            <Listbox value={value} onChange={onChange}>
-                              {({ open }) => (
-                                <>
-                                  <Listbox.Label>
-                                    <div className="text-gray-500 mb-2">Default Assignee</div>
-                                  </Listbox.Label>
-                                  <div className="relative">
-                                    <Listbox.Button className="bg-white relative w-full border border-gray-300 rounded-md shadow-sm pl-3 pr-10 py-2 text-left cursor-default focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
-                                      <span className="block truncate">
-                                        {people?.find((p) => p.member.id === value)?.member
-                                          .first_name ?? "Select Default Assignee"}
-                                      </span>
-                                      <span className="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
-                                        <ChevronDownIcon
-                                          className="h-5 w-5 text-gray-400"
-                                          aria-hidden="true"
-                                        />
-                                      </span>
-                                    </Listbox.Button>
-
-                                    <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 w-full bg-white shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm">
-                                        {people?.map((person) => (
-                                          <Listbox.Option
-                                            key={person.id}
-                                            className={({ active }) =>
-                                              `${
-                                                active ? "text-white bg-theme" : "text-gray-900"
-                                              } cursor-default select-none relative py-2 pl-3 pr-9`
-                                            }
-                                            value={person.member.id}
-                                          >
-                                            {({ selected, active }) => (
-                                              <>
-                                                <span
-                                                  className={`${
-                                                    selected ? "font-semibold" : "font-normal"
-                                                  } block truncate`}
-                                                >
-                                                  {person.member.first_name}
-                                                </span>
-
-                                                {selected ? (
-                                                  <span
-                                                    className={`absolute inset-y-0 right-0 flex items-center pr-4 ${
-                                                      active ? "text-white" : "text-indigo-600"
-                                                    }`}
-                                                  >
-                                                    <CheckIcon
-                                                      className="h-5 w-5"
-                                                      aria-hidden="true"
-                                                    />
-                                                  </span>
-                                                ) : null}
-                                              </>
-                                            )}
-                                          </Listbox.Option>
-                                        ))}
-                                      </Listbox.Options>
-                                    </Transition>
-                                  </div>
-                                </>
-                              )}
-                            </Listbox>
-                          )}
-                        />
-                      </div>
-                    </div>
-                    <div className="flex justify-end">
-                      <Button type="submit" disabled={isSubmitting}>
-                        {isSubmitting ? "Updating Project..." : "Update Project"}
-                      </Button>
-                    </div>
-                  </section>
+                  <ControlSettings control={control} isSubmitting={isSubmitting} />
                 </Tab.Panel>
-                <Tab.Panel>
-                  <section className="space-y-5">
-                    <div>
-                      <h3 className="text-lg font-medium leading-6 text-gray-900">State</h3>
-                      <p className="mt-1 text-sm text-gray-500">
-                        Manage the state of this project.
-                      </p>
-                    </div>
-                    <div className="flex justify-between gap-3">
-                      <div className="w-full space-y-5">
-                        {states?.map((state) => (
-                          <div
-                            key={state.id}
-                            className="bg-white px-4 py-2 rounded flex justify-between items-center"
-                          >
-                            <div className="flex items-center gap-x-2">
-                              <div
-                                className="w-3 h-3 rounded-full"
-                                style={{
-                                  backgroundColor: state.color,
-                                }}
-                              ></div>
-                              <h4>{addSpaceIfCamelCase(state.name)}</h4>
-                            </div>
-                            <div>
-                              <button type="button" onClick={() => setSelectedState(state.id)}>
-                                <PencilSquareIcon className="h-5 w-5 text-gray-400" />
-                              </button>
-                            </div>
-                          </div>
-                        ))}
-                        <Button
-                          type="button"
-                          className="flex items-center gap-x-1"
-                          onClick={() => setIsCreateStateModalOpen(true)}
-                        >
-                          <PlusIcon className="h-4 w-4" />
-                          <span>Add State</span>
-                        </Button>
-                      </div>
-                    </div>
-                  </section>
-                </Tab.Panel>
-                <Tab.Panel>
-                  <section className="space-y-5">
-                    <div className="flex items-center justify-between">
-                      <div>
-                        <h3 className="text-lg font-medium leading-6 text-gray-900">Labels</h3>
-                        <p className="mt-1 text-sm text-gray-500">
-                          Manage the labels of this project.
-                        </p>
-                      </div>
-                      <Button
-                        className="flex items-center gap-x-1"
-                        onClick={() => setNewGroupForm(true)}
-                      >
-                        <PlusIcon className="h-4 w-4" />
-                        New group
-                      </Button>
-                    </div>
-                    <div className="space-y-5">
-                      <div
-                        className={`bg-white px-4 py-2 flex items-center gap-2 ${
-                          newGroupForm ? "" : "hidden"
-                        }`}
-                      >
-                        <Input type="text" name="groupName" />
-                        <Button
-                          type="button"
-                          theme="secondary"
-                          onClick={() => setNewGroupForm(false)}
-                        >
-                          Cancel
-                        </Button>
-                        <Button type="button">Save</Button>
-                      </div>
-                      {["", ""].map((group, index) => (
-                        <div key={index} className="bg-white p-4 text-gray-900 rounded-md">
-                          <h3 className="font-medium leading-5 flex items-center gap-2">
-                            <RectangleGroupIcon className="h-5 w-5" />
-                            This is the label group title
-                          </h3>
-                          <div className="pl-5 mt-4">
-                            <div className="group text-sm flex justify-between items-center p-2 hover:bg-gray-100 rounded">
-                              <h5 className="flex items-center gap-2">
-                                <div className="w-2 h-2 bg-red-600 rounded-full"></div>
-                                This is the label title
-                              </h5>
-                              <div className="hidden group-hover:block">
-                                <PencilIcon className="h-3 w-3" />
-                              </div>
-                            </div>
-                          </div>
-                        </div>
-                      ))}
-                    </div>
-                  </section>
-                </Tab.Panel>
-              </Tab.Panels>
-            </Tab.Group>
-          </form>
+              </form>
+              <Tab.Panel>
+                <StatesSettings projectId={projectId} />
+              </Tab.Panel>
+              <Tab.Panel>
+                <LabelsSettings />
+              </Tab.Panel>
+            </Tab.Panels>
+          </Tab.Group>
         </div>
       ) : (
         <div className="h-full w-full flex justify-center items-center">
           <Spinner />
         </div>
       )}
-    </AdminLayout>
+    </AppLayout>
   );
 };
 
-export default ProjectSettings;
+export default withAuth(ProjectSettings);

apps/app/pages/projects/index.tsx

@@ -1,28 +1,32 @@
-import React, { useEffect, useState } from "react";
+import React, { useState } from "react";
 // next
 import type { NextPage } from "next";
 // hooks
 import useUser from "lib/hooks/useUser";
+// hoc
+import withAuth from "lib/hoc/withAuthWrapper";
 // layouts
-import AdminLayout from "layouts/AdminLayout";
+import AppLayout from "layouts/AppLayout";
 // components
-import CreateProjectModal from "components/project/CreateProjectModal";
-import ConfirmProjectDeletion from "components/project/ConfirmProjectDeletion";
+import ProjectMemberInvitations from "components/project/memberInvitations";
+import ConfirmProjectDeletion from "components/project/confirm-project-deletion";
 // ui
-import { Button, Spinner } from "ui";
-// types
-import { IProject } from "types";
+import {
+  Button,
+  Spinner,
+  HeaderButton,
+  Breadcrumbs,
+  BreadcrumbItem,
+  EmptySpace,
+  EmptySpaceItem,
+} from "ui";
 // services
 import projectService from "lib/services/project.service";
-import ProjectMemberInvitations from "components/project/memberInvitations";
+// icons
 import { ClipboardDocumentListIcon, PlusIcon } from "@heroicons/react/24/outline";
-import { BreadcrumbItem, Breadcrumbs } from "ui/Breadcrumbs";
-import { EmptySpace, EmptySpaceItem } from "ui/EmptySpace";
-import HeaderButton from "ui/HeaderButton";
 
 const Projects: NextPage = () => {
-  const [isOpen, setIsOpen] = useState(false);
-  const [deleteProject, setDeleteProject] = useState<IProject | undefined>();
+  const [deleteProject, setDeleteProject] = useState<string | null>(null);
   const [invitationsRespond, setInvitationsRespond] = useState<string[]>([]);
 
   const { projects, activeWorkspace, mutateProjects } = useUser();
@@ -52,21 +56,12 @@ const Projects: NextPage = () => {
       });
   };
 
-  useEffect(() => {
-    if (isOpen) return;
-    const timer = setTimeout(() => {
-      setDeleteProject(undefined);
-      clearTimeout(timer);
-    }, 300);
-  }, [isOpen]);
-
   return (
-    <AdminLayout>
-      <CreateProjectModal isOpen={isOpen && !deleteProject} setIsOpen={setIsOpen} />
+    <AppLayout>
       <ConfirmProjectDeletion
-        isOpen={isOpen && !!deleteProject}
-        setIsOpen={setIsOpen}
-        data={deleteProject}
+        isOpen={!!deleteProject}
+        onClose={() => setDeleteProject(null)}
+        data={projects?.find((item) => item.id === deleteProject) ?? null}
       />
       {projects ? (
         <>
@@ -87,7 +82,10 @@ const Projects: NextPage = () => {
                     </span>
                   }
                   Icon={PlusIcon}
-                  action={() => setIsOpen(true)}
+                  action={() => {
+                    const e = new KeyboardEvent("keydown", { key: "p", ctrlKey: true });
+                    document.dispatchEvent(e);
+                  }}
                 />
               </EmptySpace>
             </div>
@@ -98,7 +96,14 @@ const Projects: NextPage = () => {
               </Breadcrumbs>
               <div className="flex items-center justify-between cursor-pointer w-full">
                 <h2 className="text-2xl font-medium">Projects</h2>
-                <HeaderButton Icon={PlusIcon} label="Add Project" onClick={() => setIsOpen(true)} />
+                <HeaderButton
+                  Icon={PlusIcon}
+                  label="Add Project"
+                  onClick={() => {
+                    const e = new KeyboardEvent("keydown", { key: "p", ctrlKey: true });
+                    document.dispatchEvent(e);
+                  }}
+                />
               </div>
               <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                 {projects.map((item) => (
@@ -125,8 +130,8 @@ const Projects: NextPage = () => {
           <Spinner />
         </div>
       )}
-    </AdminLayout>
+    </AppLayout>
   );
 };
 
-export default Projects;
+export default withAuth(Projects);

apps/app/pages/signin.tsx

@@ -43,8 +43,14 @@ const SignIn: NextPage = () => {
     async (res: any) => {
       await mutateUser();
       await mutateWorkspaces();
-      if (res.user.is_onboarded) router.push("/");
-      else router.push("/invitations");
+      const nextLocation = router.asPath.split("?next=")[1];
+
+      if (nextLocation) {
+        router.push(nextLocation as string);
+      } else {
+        if (res.user.is_onboarded) router.push("/");
+        else router.push("/invitations");
+      }
     },
     [mutateUser, mutateWorkspaces, router]
   );

apps/app/pages/workspace-member-invitation/[invitationId].tsx

@@ -35,12 +35,12 @@ const WorkspaceInvitation: NextPage = () => {
 
   const { user } = useUser();
 
-  const { data: invitationDetail, error } = useSWR(
-    invitationId && WORKSPACE_INVITATION,
-    () => invitationId && workspaceService.getWorkspaceInvitation(invitationId as string)
+  const { data: invitationDetail, error } = useSWR(invitationId && WORKSPACE_INVITATION, () =>
+    invitationId ? workspaceService.getWorkspaceInvitation(invitationId as string) : null
   );
 
   const handleAccept = () => {
+    if (!invitationDetail) return;
     workspaceService
       .joinWorkspace(invitationDetail.workspace.slug, invitationDetail.id, {
         accepted: true,

apps/app/pages/workspace/index.tsx

@@ -4,7 +4,7 @@ import Link from "next/link";
 // react
 import React from "react";
 // layouts
-import AdminLayout from "layouts/AdminLayout";
+import AppLayout from "layouts/AppLayout";
 // swr
 import useSWR from "swr";
 // hooks
@@ -26,8 +26,8 @@ const Workspace: NextPage = () => {
   const { user, activeWorkspace, projects } = useUser();
 
   const { data: myIssues } = useSWR<IIssue[]>(
-    user ? USER_ISSUE : null,
-    user ? () => userService.userIssues() : null
+    user && activeWorkspace ? USER_ISSUE(activeWorkspace.slug) : null,
+    user && activeWorkspace ? () => userService.userIssues(activeWorkspace.slug) : null
   );
 
   const cards = [
@@ -46,7 +46,7 @@ const Workspace: NextPage = () => {
   const hours = new Date().getHours();
 
   return (
-    <AdminLayout>
+    <AppLayout>
       <div className="h-full w-full space-y-5">
         {user ? (
           <div className="font-medium text-2xl">
@@ -167,7 +167,7 @@ const Workspace: NextPage = () => {
           </div>
         </div>
       </div>
-    </AdminLayout>
+    </AppLayout>
   );
 };
 

apps/app/pages/workspace/members.tsx

@@ -17,7 +17,7 @@ import { WORKSPACE_INVITATIONS, WORKSPACE_MEMBERS } from "constants/fetch-keys";
 // hoc
 import withAuthWrapper from "lib/hoc/withAuthWrapper";
 // layouts
-import AdminLayout from "layouts/AdminLayout";
+import AppLayout from "layouts/AppLayout";
 // components
 import SendWorkspaceInvitationModal from "components/workspace/SendWorkspaceInvitationModal";
 import ConfirmWorkspaceMemberRemove from "components/workspace/ConfirmWorkspaceMemberRemove";
@@ -41,7 +41,7 @@ const WorkspaceInvite: NextPage = () => {
   const { setToastAlert } = useToast();
 
   const { data: workspaceMembers, mutate: mutateMembers } = useSWR<any[]>(
-    activeWorkspace ? WORKSPACE_MEMBERS : null,
+    activeWorkspace ? WORKSPACE_MEMBERS(activeWorkspace.slug) : null,
     activeWorkspace ? () => workspaceService.workspaceMembers(activeWorkspace.slug) : null
   );
   const { data: workspaceInvitations, mutate: mutateInvitations } = useSWR<any[]>(
@@ -71,7 +71,7 @@ const WorkspaceInvite: NextPage = () => {
   ];
 
   return (
-    <AdminLayout
+    <AppLayout
       meta={{
         title: "Plane - Workspace Invite",
       }}
@@ -229,7 +229,7 @@ const WorkspaceInvite: NextPage = () => {
                         )}
                       </td>
                       <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500 sm:pl-6">
-                        {member.status ? (
+                        {member.member ? (
                           <span className="p-0.5 px-2 text-sm bg-green-700 text-white rounded-full">
                             Active
                           </span>
@@ -277,7 +277,7 @@ const WorkspaceInvite: NextPage = () => {
                                   className="w-full text-left py-2 pl-2"
                                   type="button"
                                   onClick={() => {
-                                    if (member.status) {
+                                    if (member.member) {
                                       setSelectedRemoveMember(member.id);
                                     } else {
                                       setSelectedInviteRemoveMember(member.id);
@@ -299,8 +299,8 @@ const WorkspaceInvite: NextPage = () => {
           )}
         </div>
       )}
-    </AdminLayout>
+    </AppLayout>
   );
 };
 
-export default withAuthWrapper(WorkspaceInvite);
+export default withAuthWrapper(WorkspaceInvite);

apps/app/pages/workspace/settings.tsx

@@ -3,25 +3,28 @@ import React, { useEffect, useState } from "react";
 import Image from "next/image";
 // react hook form
 import { useForm } from "react-hook-form";
+// headless ui
+import { Tab } from "@headlessui/react";
 // react dropzone
 import Dropzone from "react-dropzone";
 // services
 import workspaceService from "lib/services/workspace.service";
-import fileServices from "lib/services/file.services";
+import fileServices from "lib/services/file.service";
+// hoc
+import withAuth from "lib/hoc/withAuthWrapper";
 // layouts
-import AdminLayout from "layouts/AdminLayout";
+import AppLayout from "layouts/AppLayout";
 
 // hooks
 import useUser from "lib/hooks/useUser";
 import useToast from "lib/hooks/useToast";
 // components
-import ConfirmWorkspaceDeletion from "components/workspace/ConfirmWorkspaceDeletion";
+import ConfirmWorkspaceDeletion from "components/workspace/confirm-workspace-deletion";
 // ui
 import { Spinner, Button, Input, Select } from "ui";
 import { BreadcrumbItem, Breadcrumbs } from "ui/Breadcrumbs";
 // types
 import type { IWorkspace } from "types";
-import { Tab } from "@headlessui/react";
 
 const defaultValues: Partial<IWorkspace> = {
   name: "",
@@ -83,12 +86,18 @@ const WorkspaceSettings = () => {
   };
 
   return (
-    <AdminLayout
+    <AppLayout
       meta={{
         title: "Plane - Workspace Settings",
       }}
     >
-      <ConfirmWorkspaceDeletion isOpen={isOpen} setIsOpen={setIsOpen} />
+      <ConfirmWorkspaceDeletion
+        isOpen={isOpen}
+        onClose={() => {
+          setIsOpen(false);
+        }}
+        data={activeWorkspace ?? null}
+      />
       <div className="space-y-5">
         <Breadcrumbs>
           <BreadcrumbItem title={`${activeWorkspace?.name ?? "Workspace"} Settings`} />
@@ -228,8 +237,8 @@ const WorkspaceSettings = () => {
           </div>
         )}
       </div>
-    </AdminLayout>
+    </AppLayout>
   );
 };
 
-export default WorkspaceSettings;
+export default withAuth(WorkspaceSettings);

apps/app/styles/globals.css

@@ -1,5 +1,5 @@
 @import url("https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700;800&display=swap");
-
+@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@48,400,0,0");
 @tailwind base;
 @tailwind components;
 @tailwind utilities;

apps/app/types/invitation.d.ts

@@ -1,16 +0,0 @@
-import { IWorkspace } from "./";
-
-export interface IWorkspaceInvitation {
-  id: string;
-  workspace: IWorkspace;
-  created_at: Date;
-  updated_at: Date;
-  email: string;
-  accepted: boolean;
-  token: string;
-  message: string;
-  responded_at: Date;
-  role: number;
-  created_by: null;
-  updated_by: null;
-}

apps/app/types/issues.d.ts

@@ -27,7 +27,7 @@ export interface IIssue {
   name: string;
   description: string;
   priority: string | null;
-  start_date: null;
+  start_date: string | null;
   target_date: string | null;
   sequence_id: number;
   attachments: any[];

apps/app/types/projects.d.ts

@@ -1,4 +1,4 @@
-import type { IWorkspace } from "./";
+import type { IUserLite, IWorkspace } from "./";
 
 export interface IProject {
   id: string;
@@ -15,3 +15,44 @@ export interface IProject {
   created_by: string;
   updated_by: string;
 }
+
+type ProjectViewTheme = {
+  collapsed: boolean;
+  issueView: "list" | "kanban" | null;
+  groupByProperty: NestedKeyOf<IIssue> | null;
+  filterIssue: "activeIssue" | "backlogIssue" | null;
+  orderBy: NestedKeyOf<IIssue> | null;
+};
+
+export interface IProjectMember {
+  member: IUserLite;
+  project: IProject;
+  workspace: IWorkspace;
+  comment: string;
+  role: 5 | 10 | 15 | 20;
+  view_props: ProjectViewTheme;
+
+  created_at: Date;
+  updated_at: Date;
+  created_by: string;
+  updated_by: string;
+}
+
+export interface IProjectMemberInvitation {
+  id: string;
+
+  project: IProject;
+  workspace: IWorkspace;
+
+  email: string;
+  accepted: boolean;
+  token: string;
+  message: string;
+  responded_at: Date;
+  role: 5 | 10 | 15 | 20;
+
+  created_at: Date;
+  updated_at: Date;
+  created_by: string;
+  updated_by: string;
+}

apps/app/types/users.d.ts

@@ -16,3 +16,11 @@ export interface IUser {
   token: string;
   [...rest: string]: any;
 }
+
+export interface IUserLite {
+  readonly id: string;
+  first_name: string;
+  last_name: string;
+  email: string;
+  avatar: string;
+}

apps/app/types/workspace.d.ts

@@ -1,4 +1,4 @@
-import type { IUser } from "./";
+import type { IUser, IUserLite } from "./";
 
 export interface IWorkspace {
   readonly id: string;
@@ -13,26 +13,31 @@ export interface IWorkspace {
   company_size: number;
 }
 
-export interface WorkspaceMember {
+export interface IWorkspaceMemberInvitation {
   readonly id: string;
   email: string;
+  accepted: boolean;
+  token: string;
   message: string;
+  responded_at: Date;
   role: 5 | 10 | 15 | 20;
-  member: IUser;
-  workspace: IWorkspace | string;
+  workspace: IWorkspace;
+}
+
+export interface IWorkspaceMember {
+  readonly id: string;
+  user: IUserLite;
+  workspace: IWorkspace;
+  member: IUserLite;
+  role: 5 | 10 | 15 | 20;
+  company_role: string | null;
   created_at: Date;
   updated_at: Date;
   created_by: string;
   updated_by: string;
 }
 
-export interface ProjectMember {
-  readonly id: string;
-  readonly project: string;
-  email: string;
-  message: string;
-  role: 5 | 10 | 15 | 20;
-  member: any;
-  member_id: string;
-  user_id: string;
+export interface ILastActiveWorkspaceDetails {
+  workspace_details: IWorkspace;
+  project_details: IProject[];
 }

apps/app/ui/EmptySpace/index.tsx

@@ -9,12 +9,7 @@ type EmptySpaceProps = {
   title: string;
   description: string;
   children: any;
-  Icon?: (
-    props: React.SVGProps<SVGSVGElement> & {
-      title?: string | undefined;
-      titleId?: string | undefined;
-    }
-  ) => JSX.Element;
+  Icon?: (props: any) => JSX.Element;
   link?: { text: string; href: string };
 };