[WEB-447] feat: projects archive. (#4014)

* dev: project archive response

* feat: projects archive.

* dev: response changes for cycle and module

* chore: status message changed

* chore: update clear all applied display filters logic.

* style: archived project card UI update.

* chore: archive/ restore taost message update.

* fix: clear all applied display filter logic.

* chore: project empty state update to handle archived projects.

* chore: minor typo fix in cycles and modules archive.

* chore: close cycle/ module overview sidebar if it's already open when clicked on overview button.

* chore: optimize current workspace applied display filter logic.

* chore: update all `archived_at` type from `Date` to `string`.

---------

Co-authored-by: NarayanBavisetti <narayan3119@gmail.com>

web/pages/[workspaceSlug]/projects/[projectId]/settings/index.tsx

@@ -2,26 +2,29 @@ import { useState, ReactElement } from "react";
 import { observer } from "mobx-react-lite";
 import { useRouter } from "next/router";
 import useSWR from "swr";
-// hooks
+// components
 import { PageHead } from "@/components/core";
 import { ProjectSettingHeader } from "@/components/headers";
 import {
+  ArchiveRestoreProjectModal,
+  ArchiveProjectSelection,
   DeleteProjectModal,
   DeleteProjectSection,
   ProjectDetailsForm,
   ProjectDetailsFormLoader,
 } from "@/components/project";
+// hooks
 import { useProject } from "@/hooks/store";
 // layouts
 import { AppLayout } from "@/layouts/app-layout";
 import { ProjectSettingLayout } from "@/layouts/settings-layout";
-// components
 // types
 import { NextPageWithLayout } from "@/lib/types";
 
 const GeneralSettingsPage: NextPageWithLayout = observer(() => {
   // states
   const [selectProject, setSelectedProject] = useState<string | null>(null);
+  const [archiveProject, setArchiveProject] = useState<boolean>(false);
   // router
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
@@ -42,12 +45,21 @@ const GeneralSettingsPage: NextPageWithLayout = observer(() => {
   return (
     <>
       <PageHead title={pageTitle} />
-      {currentProjectDetails && (
-        <DeleteProjectModal
-          project={currentProjectDetails}
-          isOpen={Boolean(selectProject)}
-          onClose={() => setSelectedProject(null)}
-        />
+      {currentProjectDetails && workspaceSlug && projectId && (
+        <>
+          <ArchiveRestoreProjectModal
+            workspaceSlug={workspaceSlug.toString()}
+            projectId={projectId.toString()}
+            isOpen={archiveProject}
+            onClose={() => setArchiveProject(false)}
+            archive
+          />
+          <DeleteProjectModal
+            project={currentProjectDetails}
+            isOpen={Boolean(selectProject)}
+            onClose={() => setSelectedProject(null)}
+          />
+        </>
       )}
 
       <div className={`w-full overflow-y-auto py-8 pr-9 ${isAdmin ? "" : "opacity-60"}`}>
@@ -63,10 +75,16 @@ const GeneralSettingsPage: NextPageWithLayout = observer(() => {
         )}
 
         {isAdmin && (
-          <DeleteProjectSection
-            projectDetails={currentProjectDetails}
-            handleDelete={() => setSelectedProject(currentProjectDetails.id ?? null)}
-          />
+          <>
+            <ArchiveProjectSelection
+              projectDetails={currentProjectDetails}
+              handleArchive={() => setArchiveProject(true)}
+            />
+            <DeleteProjectSection
+              projectDetails={currentProjectDetails}
+              handleDelete={() => setSelectedProject(currentProjectDetails.id ?? null)}
+            />
+          </>
         )}
       </div>
     </>