chore: add non existing states for project entities

apps/app/components/ui/empty-state.tsx

@@ -7,7 +7,7 @@ import { PrimaryButton } from "components/ui";
 
 type Props = {
   title: string;
-  description: React.ReactNode | string;
+  description?: React.ReactNode;
   image: any;
   primaryButton?: {
     icon?: any;
@@ -34,7 +34,7 @@ export const EmptyState: React.FC<Props> = ({
     <div className="text-center flex flex-col items-center w-full">
       <Image src={image} className="w-52 sm:w-60" alt={primaryButton?.text} />
       <h6 className="text-xl font-semibold mt-6 sm:mt-8 mb-3">{title}</h6>
-      <p className="text-custom-text-300 mb-7 sm:mb-8">{description}</p>
+      {description && <p className="text-custom-text-300 mb-7 sm:mb-8">{description}</p>}
       <div className="flex items-center gap-4">
         {primaryButton && (
           <PrimaryButton className="flex items-center gap-1.5" onClick={primaryButton.onClick}>

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

@@ -22,8 +22,10 @@ import useUserAuth from "hooks/use-user-auth";
 // components
 import { AnalyticsProjectModal } from "components/analytics";
 // ui
-import { CustomMenu, SecondaryButton } from "components/ui";
+import { CustomMenu, EmptyState, SecondaryButton } from "components/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
+// images
+import emptyCycle from "public/empty-state/cycle.svg";
 // helpers
 import { truncateText } from "helpers/string.helper";
 import { getDateRangeStatus } from "helpers/date-time.helper";
@@ -52,14 +54,14 @@ const SingleCycle: React.FC = () => {
       : null
   );
 
-  const { data: cycleDetails } = useSWR(
-    cycleId ? CYCLE_DETAILS(cycleId as string) : null,
+  const { data: cycleDetails, error } = useSWR(
+    workspaceSlug && projectId && cycleId ? CYCLE_DETAILS(cycleId.toString()) : null,
     workspaceSlug && projectId && cycleId
       ? () =>
           cycleServices.getCycleDetails(
-            workspaceSlug as string,
-            projectId as string,
-            cycleId as string
+            workspaceSlug.toString(),
+            projectId.toString(),
+            cycleId.toString()
           )
       : null
   );
@@ -159,31 +161,48 @@ const SingleCycle: React.FC = () => {
           </div>
         }
       >
-        <TransferIssuesModal
-          handleClose={() => setTransferIssuesModal(false)}
-          isOpen={transferIssuesModal}
-        />
-        <AnalyticsProjectModal isOpen={analyticsModal} onClose={() => setAnalyticsModal(false)} />
-        <div
-          className={`h-full flex flex-col ${cycleSidebar ? "mr-[24rem]" : ""} ${
-            analyticsModal ? "mr-[50%]" : ""
-          } duration-300`}
-        >
-          {cycleStatus === "completed" && (
-            <TransferIssues handleClick={() => setTransferIssuesModal(true)} />
-          )}
-          <IssuesView
-            openIssuesListModal={openIssuesListModal}
-            disableUserActions={cycleStatus === "completed" ?? false}
+        {error ? (
+          <EmptyState
+            image={emptyCycle}
+            title="Cycle does not exist"
+            description="The cycle you are looking for does not exist or has been deleted."
+            primaryButton={{
+              text: "View other cycles",
+              onClick: () => router.push(`/${workspaceSlug}/projects/${projectId}/cycles`),
+            }}
           />
-        </div>
-        <CycleDetailsSidebar
-          cycleStatus={cycleStatus}
-          cycle={cycleDetails}
-          isOpen={cycleSidebar}
-          isCompleted={cycleStatus === "completed" ?? false}
-          user={user}
-        />
+        ) : (
+          <>
+            <TransferIssuesModal
+              handleClose={() => setTransferIssuesModal(false)}
+              isOpen={transferIssuesModal}
+            />
+            <AnalyticsProjectModal
+              isOpen={analyticsModal}
+              onClose={() => setAnalyticsModal(false)}
+            />
+            <div
+              className={`h-full flex flex-col ${cycleSidebar ? "mr-[24rem]" : ""} ${
+                analyticsModal ? "mr-[50%]" : ""
+              } duration-300`}
+            >
+              {cycleStatus === "completed" && (
+                <TransferIssues handleClick={() => setTransferIssuesModal(true)} />
+              )}
+              <IssuesView
+                openIssuesListModal={openIssuesListModal}
+                disableUserActions={cycleStatus === "completed" ?? false}
+              />
+            </div>
+            <CycleDetailsSidebar
+              cycleStatus={cycleStatus}
+              cycle={cycleDetails}
+              isOpen={cycleSidebar}
+              isCompleted={cycleStatus === "completed" ?? false}
+              user={user}
+            />
+          </>
+        )}
       </ProjectAuthorizationWrapper>
     </IssueViewContextProvider>
   );

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

@@ -15,8 +15,10 @@ import { ProjectAuthorizationWrapper } from "layouts/auth-layout";
 // components
 import { IssueDetailsSidebar, IssueMainContent } from "components/issues";
 // ui
-import { Loader } from "components/ui";
+import { EmptyState, Loader } from "components/ui";
 import { Breadcrumbs } from "components/breadcrumbs";
+// images
+import emptyIssue from "public/empty-state/issue.svg";
 // types
 import { IIssue } from "types";
 import type { NextPage } from "next";
@@ -45,7 +47,11 @@ const IssueDetailsPage: NextPage = () => {
 
   const { user } = useUserAuth();
 
-  const { data: issueDetails, mutate: mutateIssueDetails } = useSWR<IIssue | undefined>(
+  const {
+    data: issueDetails,
+    mutate: mutateIssueDetails,
+    error,
+  } = useSWR(
     workspaceSlug && projectId && issueId ? ISSUE_DETAILS(issueId as string) : null,
     workspaceSlug && projectId && issueId
       ? () =>
@@ -125,7 +131,17 @@ const IssueDetailsPage: NextPage = () => {
         </Breadcrumbs>
       }
     >
-      {issueDetails && projectId ? (
+      {error ? (
+        <EmptyState
+          image={emptyIssue}
+          title="Issue does not exist"
+          description="The issue you are looking for does not exist, has been archived, or has been deleted."
+          primaryButton={{
+            text: "View other issues",
+            onClick: () => router.push(`/${workspaceSlug}/projects/${projectId}/issues`),
+          }}
+        />
+      ) : issueDetails && projectId ? (
         <div className="flex h-full overflow-hidden">
           <div className="w-2/3 h-full overflow-y-auto space-y-5 divide-y-2 divide-custom-border-300 p-5">
             <IssueMainContent issueDetails={issueDetails} submitChanges={submitChanges} />

apps/app/pages/[workspaceSlug]/projects/[projectId]/modules/[moduleId].tsx

@@ -20,8 +20,10 @@ import { ExistingIssuesListModal, IssuesFilterView, IssuesView } from "component
 import { ModuleDetailsSidebar } from "components/modules";
 import { AnalyticsProjectModal } from "components/analytics";
 // ui
-import { CustomMenu, SecondaryButton } from "components/ui";
+import { CustomMenu, EmptyState, SecondaryButton } from "components/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
+// images
+import emptyModule from "public/empty-state/module.svg";
 // helpers
 import { truncateText } from "helpers/string.helper";
 // types
@@ -60,7 +62,7 @@ const SingleModule: React.FC = () => {
       : null
   );
 
-  const { data: moduleDetails } = useSWR(
+  const { data: moduleDetails, error } = useSWR(
     moduleId ? MODULE_DETAILS(moduleId as string) : null,
     workspaceSlug && projectId
       ? () =>
@@ -162,22 +164,37 @@ const SingleModule: React.FC = () => {
           </div>
         }
       >
-        <AnalyticsProjectModal isOpen={analyticsModal} onClose={() => setAnalyticsModal(false)} />
-
-        <div
-          className={`h-full flex flex-col ${moduleSidebar ? "mr-[24rem]" : ""} ${
-            analyticsModal ? "mr-[50%]" : ""
-          } duration-300`}
-        >
-          <IssuesView openIssuesListModal={openIssuesListModal} />
-        </div>
-
-        <ModuleDetailsSidebar
-          module={moduleDetails}
-          isOpen={moduleSidebar}
-          moduleIssues={moduleIssues}
-          user={user}
-        />
+        {error ? (
+          <EmptyState
+            image={emptyModule}
+            title="Module does not exist"
+            description="The module you are looking for does not exist or has been deleted."
+            primaryButton={{
+              text: "View other modules",
+              onClick: () => router.push(`/${workspaceSlug}/projects/${projectId}/modules`),
+            }}
+          />
+        ) : (
+          <>
+            <AnalyticsProjectModal
+              isOpen={analyticsModal}
+              onClose={() => setAnalyticsModal(false)}
+            />
+            <div
+              className={`h-full flex flex-col ${moduleSidebar ? "mr-[24rem]" : ""} ${
+                analyticsModal ? "mr-[50%]" : ""
+              } duration-300`}
+            >
+              <IssuesView openIssuesListModal={openIssuesListModal} />
+            </div>
+            <ModuleDetailsSidebar
+              module={moduleDetails}
+              isOpen={moduleSidebar}
+              moduleIssues={moduleIssues}
+              user={user}
+            />
+          </>
+        )}
       </ProjectAuthorizationWrapper>
     </IssueViewContextProvider>
   );

apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useRef, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 
 import { useRouter } from "next/router";
 
@@ -28,7 +28,16 @@ import { CreateLabelModal } from "components/labels";
 import { CreateBlock } from "components/pages/create-block";
 // ui
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
-import { CustomSearchSelect, Loader, TextArea, ToggleSwitch, Tooltip } from "components/ui";
+import {
+  CustomSearchSelect,
+  EmptyState,
+  Loader,
+  TextArea,
+  ToggleSwitch,
+  Tooltip,
+} from "components/ui";
+// images
+import emptyPage from "public/empty-state/page.svg";
 // icons
 import {
   ArrowLeftIcon,
@@ -40,7 +49,7 @@ import {
   XMarkIcon,
   ChevronDownIcon,
 } from "@heroicons/react/24/outline";
-import { ColorPalletteIcon, ClipboardIcon } from "components/icons";
+import { ColorPalletteIcon } from "components/icons";
 // helpers
 import { render24HourFormatTime, renderShortDate } from "helpers/date-time.helper";
 import { copyTextToClipboard, truncateText } from "helpers/string.helper";
@@ -82,7 +91,7 @@ const SinglePage: NextPage = () => {
       : null
   );
 
-  const { data: pageDetails } = useSWR(
+  const { data: pageDetails, error } = useSWR(
     workspaceSlug && projectId && pageId ? PAGE_DETAILS(pageId as string) : null,
     workspaceSlug && projectId
       ? () =>
@@ -267,13 +276,6 @@ const SinglePage: NextPage = () => {
     );
   };
 
-  const handleNewBlock = useCallback(() => {
-    setCreateBlockForm(true);
-    scrollToRef.current?.scrollIntoView({
-      behavior: "smooth",
-    });
-  }, [setCreateBlockForm, scrollToRef]);
-
   const handleShowBlockToggle = async () => {
     if (!workspaceSlug || !projectId) return;
 
@@ -311,22 +313,21 @@ const SinglePage: NextPage = () => {
       });
   };
 
-  const options =
-    labels?.map((label) => ({
-      value: label.id,
-      query: label.name,
-      content: (
-        <div className="flex items-center gap-2">
-          <span
-            className="h-2 w-2 flex-shrink-0 rounded-full"
-            style={{
-              backgroundColor: label.color && label.color !== "" ? label.color : "#000000",
-            }}
-          />
-          {label.name}
-        </div>
-      ),
-    })) ?? [];
+  const options = labels?.map((label) => ({
+    value: label.id,
+    query: label.name,
+    content: (
+      <div className="flex items-center gap-2">
+        <span
+          className="h-2 w-2 flex-shrink-0 rounded-full"
+          style={{
+            backgroundColor: label.color && label.color !== "" ? label.color : "#000000",
+          }}
+        />
+        {label.name}
+      </div>
+    ),
+  }));
 
   useEffect(() => {
     if (!pageDetails) return;
@@ -346,11 +347,21 @@ const SinglePage: NextPage = () => {
       breadcrumbs={
         <Breadcrumbs>
           <BreadcrumbItem title="Projects" link={`/${workspaceSlug}/projects`} />
-          <BreadcrumbItem title={`${truncateText(projectDetails?.name ?? "Project",32)} Pages`} />
+          <BreadcrumbItem title={`${truncateText(projectDetails?.name ?? "Project", 32)} Pages`} />
         </Breadcrumbs>
       }
     >
-      {pageDetails ? (
+      {error ? (
+        <EmptyState
+          image={emptyPage}
+          title="Page does not exist"
+          description="The page you are looking for does not exist or has been deleted."
+          primaryButton={{
+            text: "View other pages",
+            onClick: () => router.push(`/${workspaceSlug}/projects/${projectId}/pages`),
+          }}
+        />
+      ) : pageDetails ? (
         <div className="flex h-full flex-col justify-between space-y-4 overflow-hidden p-4">
           <div className="h-full w-full overflow-y-auto">
             <div className="flex items-start justify-between gap-2">