[WEB-1634] dev: update application router to support n-progress. (#4846)

* [WEB-1634] dev: update application router to support n-progress.

* chore: update app router initilization logic.

* fix: lint errors

web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/header.tsx

@@ -2,7 +2,7 @@
 
 import { FC } from "react";
 import { observer } from "mobx-react-lite";
-import { useParams, usePathname, useRouter } from "next/navigation";
+import { useParams, usePathname } from "next/navigation";
 // ui
 import { ArchiveIcon, Breadcrumbs, Tooltip } from "@plane/ui";
 // components
@@ -12,11 +12,12 @@ import { PROJECT_ARCHIVES_BREADCRUMB_LIST } from "@/constants/archives";
 import { EIssuesStoreType } from "@/constants/issue";
 // hooks
 import { useIssues, useProject } from "@/hooks/store";
+import { useAppRouter } from "@/hooks/use-app-router";
 import { usePlatformOS } from "@/hooks/use-platform-os";
 
 export const ProjectArchivesHeader: FC = observer(() => {
   // router
-  const router = useRouter();
+  const router = useAppRouter();
   const { workspaceSlug, projectId } = useParams();
   const pathname = usePathname();
   const activeTab = pathname.split("/").pop();

web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/[cycleId]/page.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { observer } from "mobx-react";
-import { useParams, useRouter } from "next/navigation";
+import { useParams } from "next/navigation";
 import useSWR from "swr";
 // components
 import { EmptyState } from "@/components/common";
@@ -14,13 +14,14 @@ import { CycleLayoutRoot } from "@/components/issues/issue-layouts";
 import { cn } from "@/helpers/common.helper";
 // hooks
 import { useCycle, useProject } from "@/hooks/store";
+import { useAppRouter } from "@/hooks/use-app-router";
 import useLocalStorage from "@/hooks/use-local-storage";
 // assets
 import emptyCycle from "@/public/empty-state/cycle.svg";
 
 const CycleDetailPage = observer(() => {
   // router
-  const router = useRouter();
+  const router = useAppRouter();
   const { workspaceSlug, projectId, cycleId } = useParams();
   // store hooks
   const { fetchCycleDetails, getCycleById } = useCycle();

web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/header.tsx

@@ -3,7 +3,7 @@
 import { useCallback, useState } from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";
-import { useParams, useRouter } from "next/navigation";
+import { useParams } from "next/navigation";
 // icons
 import { ArrowRight, PanelRight } from "lucide-react";
 // types
@@ -33,6 +33,7 @@ import {
   useIssues,
   useCommandPalette,
 } from "@/hooks/store";
+import { useAppRouter } from "@/hooks/use-app-router";
 import useLocalStorage from "@/hooks/use-local-storage";
 import { usePlatformOS } from "@/hooks/use-platform-os";
 
@@ -61,7 +62,7 @@ export const CycleIssuesHeader: React.FC = observer(() => {
   // states
   const [analyticsModal, setAnalyticsModal] = useState(false);
   // router
-  const router = useRouter();
+  const router = useAppRouter();
   const { workspaceSlug, projectId, cycleId } = useParams() as {
     workspaceSlug: string;
     projectId: string;

web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(list)/header.tsx

@@ -2,7 +2,7 @@
 
 import { FC } from "react";
 import { observer } from "mobx-react-lite";
-import { useParams, useRouter } from "next/navigation";
+import { useParams } from "next/navigation";
 // ui
 import { Breadcrumbs, Button, ContrastIcon } from "@plane/ui";
 // components
@@ -12,10 +12,11 @@ import { CyclesViewHeader } from "@/components/cycles";
 import { EUserProjectRoles } from "@/constants/project";
 // hooks
 import { useCommandPalette, useEventTracker, useProject, useUser } from "@/hooks/store";
+import { useAppRouter } from "@/hooks/use-app-router";
 
 export const CyclesListHeader: FC = observer(() => {
   // router
-  const router = useRouter();
+  const router = useAppRouter();
   const { workspaceSlug } = useParams();
   // store hooks
   const { toggleCreateCycleModal } = useCommandPalette();

web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/draft-issues/page.tsx

@@ -1,16 +1,17 @@
 "use client";
 
 import { observer } from "mobx-react";
-import { useParams, useRouter } from "next/navigation";
+import { useParams } from "next/navigation";
 import { X, PenSquare } from "lucide-react";
 // components
 import { PageHead } from "@/components/core";
 import { DraftIssueLayoutRoot } from "@/components/issues/issue-layouts/roots/draft-issue-layout-root";
 // hooks
 import { useProject } from "@/hooks/store";
+import { useAppRouter } from "@/hooks/use-app-router";
 
 const ProjectDraftIssuesPage = observer(() => {
-  const router = useRouter();
+  const router = useAppRouter();
   const { workspaceSlug, projectId } = useParams();
   // store
   const { getProjectById } = useProject();

web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(detail)/[issueId]/page.tsx

@@ -2,7 +2,7 @@
 
 import React, { useEffect } from "react";
 import { observer } from "mobx-react";
-import { useParams, useRouter } from "next/navigation";
+import { useParams } from "next/navigation";
 import { useTheme } from "next-themes";
 import useSWR from "swr";
 // ui
@@ -14,12 +14,13 @@ import { IssueDetailRoot } from "@/components/issues";
 // hooks
 import { useAppTheme, useIssueDetail, useProject } from "@/hooks/store";
 // assets
+import { useAppRouter } from "@/hooks/use-app-router";
 import emptyIssueDark from "@/public/empty-state/search/issues-dark.webp";
 import emptyIssueLight from "@/public/empty-state/search/issues-light.webp";
 
 const IssueDetailsPage = observer(() => {
   // router
-  const router = useRouter();
+  const router = useAppRouter();
   const { workspaceSlug, projectId, issueId } = useParams();
   // hooks
   const { resolvedTheme } = useTheme();

web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(detail)/header.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { observer } from "mobx-react";
-import { useParams, useRouter } from "next/navigation";
+import { useParams } from "next/navigation";
 import { PanelRight } from "lucide-react";
 // ui
 import { Breadcrumbs, LayersIcon } from "@plane/ui";
@@ -12,10 +12,11 @@ import { IssueDetailQuickActions } from "@/components/issues";
 import { cn } from "@/helpers/common.helper";
 // hooks
 import { useAppTheme, useIssueDetail, useProject } from "@/hooks/store";
+import { useAppRouter } from "@/hooks/use-app-router";
 
 export const ProjectIssueDetailsHeader = observer(() => {
   // router
-  const router = useRouter();
+  const router = useAppRouter();
   const { workspaceSlug, projectId, issueId } = useParams();
   // store hooks
   const { currentProjectDetails } = useProject();

web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(list)/header.tsx

@@ -2,7 +2,7 @@
 
 import { useCallback, useState } from "react";
 import { observer } from "mobx-react";
-import { useParams, useRouter } from "next/navigation";
+import { useParams } from "next/navigation";
 // icons
 import { Briefcase, Circle, ExternalLink } from "lucide-react";
 // types
@@ -30,13 +30,14 @@ import {
   useCommandPalette,
 } from "@/hooks/store";
 import { useIssues } from "@/hooks/store/use-issues";
+import { useAppRouter } from "@/hooks/use-app-router";
 import { usePlatformOS } from "@/hooks/use-platform-os";
 
 export const ProjectIssuesHeader = observer(() => {
   // states
   const [analyticsModal, setAnalyticsModal] = useState(false);
   // router
-  const router = useRouter();
+  const router = useAppRouter();
   const { workspaceSlug, projectId } = useParams() as { workspaceSlug: string; projectId: string };
   // store hooks
   const {

web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/[moduleId]/page.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { observer } from "mobx-react";
-import { useParams, useRouter } from "next/navigation";
+import { useParams } from "next/navigation";
 import useSWR from "swr";
 // components
 import { EmptyState } from "@/components/common";
@@ -12,13 +12,14 @@ import { ModuleAnalyticsSidebar } from "@/components/modules";
 import { cn } from "@/helpers/common.helper";
 // hooks
 import { useModule, useProject } from "@/hooks/store";
+import { useAppRouter } from "@/hooks/use-app-router";
 import useLocalStorage from "@/hooks/use-local-storage";
 // assets
 import emptyModule from "@/public/empty-state/module.svg";
 
 const ModuleIssuesPage = observer(() => {
   // router
-  const router = useRouter();
+  const router = useAppRouter();
   const { workspaceSlug, projectId, moduleId } = useParams();
   // store hooks
   const { fetchModuleDetails, getModuleById } = useModule();

web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/header.tsx

@@ -3,7 +3,7 @@
 import { useCallback, useState } from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";
-import { useParams, useRouter } from "next/navigation";
+import { useParams } from "next/navigation";
 // icons
 import { ArrowRight, PanelRight } from "lucide-react";
 // types
@@ -33,6 +33,7 @@ import {
   useIssues,
   useCommandPalette,
 } from "@/hooks/store";
+import { useAppRouter } from "@/hooks/use-app-router";
 import { useIssuesActions } from "@/hooks/use-issues-actions";
 import useLocalStorage from "@/hooks/use-local-storage";
 import { usePlatformOS } from "@/hooks/use-platform-os";
@@ -64,7 +65,7 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
   // states
   const [analyticsModal, setAnalyticsModal] = useState(false);
   // router
-  const router = useRouter();
+  const router = useAppRouter();
   const { workspaceSlug, projectId, moduleId } = useParams();
   // hooks
   const { isMobile } = usePlatformOS();

web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(list)/header.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { observer } from "mobx-react-lite";
-import { useParams, useRouter } from "next/navigation";
+import { useParams } from "next/navigation";
 // ui
 import { Breadcrumbs, Button, DiceIcon } from "@plane/ui";
 // components
@@ -11,10 +11,11 @@ import { ModuleViewHeader } from "@/components/modules";
 import { EUserProjectRoles } from "@/constants/project";
 // hooks
 import { useCommandPalette, useEventTracker, useProject, useUser } from "@/hooks/store";
+import { useAppRouter } from "@/hooks/use-app-router";
 
 export const ModulesListHeader: React.FC = observer(() => {
   // router
-  const router = useRouter();
+  const router = useAppRouter();
   const { workspaceSlug } = useParams();
   // store hooks
   const { toggleCreateModuleModal } = useCommandPalette();

web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(detail)/[pageId]/page.tsx

@@ -3,7 +3,7 @@
 import { useRef, useState } from "react";
 import { observer } from "mobx-react-lite";
 import Link from "next/link";
-import { useParams, useRouter } from "next/navigation";
+import { useParams } from "next/navigation";
 import useSWR from "swr";
 // document-editor
 import { EditorRefApi, useEditorMarkings } from "@plane/document-editor";
@@ -20,6 +20,7 @@ import { PageEditorBody, PageEditorHeaderRoot } from "@/components/pages";
 import { cn } from "@/helpers/common.helper";
 // hooks
 import { usePage, useProjectPages } from "@/hooks/store";
+import { useAppRouter } from "@/hooks/use-app-router";
 
 const PageDetailsPage = observer(() => {
   // states
@@ -30,7 +31,7 @@ const PageDetailsPage = observer(() => {
   const editorRef = useRef<EditorRefApi>(null);
   const readOnlyEditorRef = useRef<EditorRefApi>(null);
   // router
-  const router = useRouter();
+  const router = useAppRouter();
   const { workspaceSlug, projectId, pageId } = useParams();
   // store hooks
   const { createPage, getPageById } = useProjectPages();

web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(list)/page.tsx

@@ -1,21 +1,21 @@
 "use client";
 
 import { observer } from "mobx-react";
-import { useSearchParams } from "next/navigation";
+import { useParams, useSearchParams } from "next/navigation";
 // types
 import { TPageNavigationTabs } from "@plane/types";
 // components
 import { PageHead } from "@/components/core";
 import { PagesListRoot, PagesListView } from "@/components/pages";
 // hooks
-import { useAppRouter, useProject } from "@/hooks/store";
+import { useProject } from "@/hooks/store";
 
 const ProjectPagesPage = observer(() => {
   // router
   const searchParams = useSearchParams();
   const type = searchParams.get("type");
+  const { workspaceSlug, projectId } = useParams();
   // store hooks
-  const { workspaceSlug, projectId } = useAppRouter();
   const { getProjectById } = useProject();
   // derived values
   const project = projectId ? getProjectById(projectId.toString()) : undefined;

web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/settings/header.tsx

@@ -2,7 +2,7 @@
 
 import { FC } from "react";
 import { observer } from "mobx-react";
-import { useParams, useRouter } from "next/navigation";
+import { useParams } from "next/navigation";
 // ui
 import { Settings } from "lucide-react";
 import { Breadcrumbs, CustomMenu } from "@plane/ui";
@@ -12,10 +12,11 @@ import { BreadcrumbLink, Logo } from "@/components/common";
 import { EUserProjectRoles, PROJECT_SETTINGS_LINKS } from "@/constants/project";
 // hooks
 import { useProject, useUser } from "@/hooks/store";
+import { useAppRouter } from "@/hooks/use-app-router";
 
 export const ProjectSettingHeader: FC = observer(() => {
   // router
-  const router = useRouter();
+  const router = useAppRouter();
   const { workspaceSlug, projectId } = useParams();
   // store hooks
   const {

web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(detail)/[viewId]/page.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { observer } from "mobx-react";
-import { useParams, useRouter } from "next/navigation";
+import { useParams } from "next/navigation";
 import useSWR from "swr";
 // components
 import { EmptyState } from "@/components/common";
@@ -10,11 +10,12 @@ import { ProjectViewLayoutRoot } from "@/components/issues";
 // hooks
 import { useProject, useProjectView } from "@/hooks/store";
 // assets
+import { useAppRouter } from "@/hooks/use-app-router";
 import emptyView from "@/public/empty-state/view.svg";
 
 const ProjectViewIssuesPage = observer(() => {
   // router
-  const router = useRouter();
+  const router = useAppRouter();
   const { workspaceSlug, projectId, viewId } = useParams();
   // store hooks
   const { fetchViewDetails, getViewById } = useProjectView();

web/app/[workspaceSlug]/(projects)/projects/(list)/header.tsx

@@ -2,6 +2,7 @@
 
 import { useCallback, useRef, useState } from "react";
 import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
 import { Search, Briefcase, X, ListFilter } from "lucide-react";
 // types
 import { TProjectFilters } from "@plane/types";
@@ -17,17 +18,18 @@ import { EUserWorkspaceRoles } from "@/constants/workspace";
 import { cn } from "@/helpers/common.helper";
 import { calculateTotalFilters } from "@/helpers/filter.helper";
 // hooks
-import { useAppRouter, useCommandPalette, useEventTracker, useMember, useProjectFilter, useUser } from "@/hooks/store";
+import { useCommandPalette, useEventTracker, useMember, useProjectFilter, useUser } from "@/hooks/store";
 import useOutsideClickDetector from "@/hooks/use-outside-click-detector";
 
 export const ProjectsListHeader = observer(() => {
+  // router
+  const { workspaceSlug } = useParams();
   // states
   const [isSearchOpen, setIsSearchOpen] = useState(false);
   // refs
   const inputRef = useRef<HTMLInputElement>(null);
   // store hooks
   const { toggleCreateProjectModal } = useCommandPalette();
-  const { workspaceSlug } = useAppRouter();
   const { setTrackElement } = useEventTracker();
   const {
     membership: { currentWorkspaceRole },
@@ -68,7 +70,7 @@ export const ProjectsListHeader = observer(() => {
         }
       }
 
-      updateFilters(workspaceSlug, { [key]: newValues });
+      updateFilters(workspaceSlug.toString(), { [key]: newValues });
     },
     [filters, updateFilters, workspaceSlug]
   );
@@ -144,7 +146,7 @@ export const ProjectsListHeader = observer(() => {
             value={displayFilters?.order_by}
             onChange={(val) => {
               if (!workspaceSlug || val === displayFilters?.order_by) return;
-              updateDisplayFilters(workspaceSlug, {
+              updateDisplayFilters(workspaceSlug.toString(), {
                 order_by: val,
               });
             }}
@@ -161,7 +163,7 @@ export const ProjectsListHeader = observer(() => {
               handleFiltersUpdate={handleFilters}
               handleDisplayFiltersUpdate={(val) => {
                 if (!workspaceSlug) return;
-                updateDisplayFilters(workspaceSlug, val);
+                updateDisplayFilters(workspaceSlug.toString(), val);
               }}
               memberIds={workspaceMemberIds ?? undefined}
             />

web/app/[workspaceSlug]/(projects)/projects/(list)/mobile-header.tsx

@@ -1,5 +1,6 @@
 import { useCallback } from "react";
 import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
 // icons
 import { ChevronDown, ListFilter } from "lucide-react";
 // types
@@ -10,9 +11,11 @@ import { ProjectFiltersSelection, ProjectOrderByDropdown } from "@/components/pr
 // helpers
 import { calculateTotalFilters } from "@/helpers/filter.helper";
 // hooks
-import { useAppRouter, useMember, useProjectFilter } from "@/hooks/store";
+import { useMember, useProjectFilter } from "@/hooks/store";
 
 export const ProjectsListMobileHeader = observer(() => {
+  // router
+  const { workspaceSlug } = useParams();
   const {
     currentWorkspaceDisplayFilters: displayFilters,
     currentWorkspaceFilters: filters,
@@ -20,7 +23,6 @@ export const ProjectsListMobileHeader = observer(() => {
     updateFilters,
   } = useProjectFilter();
 
-  const { workspaceSlug } = useAppRouter();
 
   const {
     workspace: { workspaceMemberIds },
@@ -39,7 +41,7 @@ export const ProjectsListMobileHeader = observer(() => {
         if (filters?.[key]?.includes(value)) newValues.splice(newValues.indexOf(value), 1);
         else newValues.push(value);
       }
-      updateFilters(workspaceSlug, { [key]: newValues });
+      updateFilters(workspaceSlug.toString(), { [key]: newValues });
     },
     [filters, updateFilters, workspaceSlug]
   );
@@ -52,7 +54,7 @@ export const ProjectsListMobileHeader = observer(() => {
         value={displayFilters?.order_by}
         onChange={(val) => {
           if (!workspaceSlug || val === displayFilters?.order_by) return;
-          updateDisplayFilters(workspaceSlug, {
+          updateDisplayFilters(workspaceSlug.toString(), {
             order_by: val,
           });
         }}
@@ -78,7 +80,7 @@ export const ProjectsListMobileHeader = observer(() => {
             handleFiltersUpdate={handleFilters}
             handleDisplayFiltersUpdate={(val) => {
               if (!workspaceSlug) return;
-              updateDisplayFilters(workspaceSlug, val);
+              updateDisplayFilters(workspaceSlug.toString(), val);
             }}
             memberIds={workspaceMemberIds ?? undefined}
           />

web/app/[workspaceSlug]/(projects)/projects/(list)/page.tsx

@@ -2,6 +2,7 @@
 
 import { useCallback } from "react";
 import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
 // types
 import { TProjectAppliedDisplayFilterKeys, TProjectFilters } from "@plane/types";
 // components
@@ -10,11 +11,11 @@ import { ProjectAppliedFiltersList, ProjectCardList } from "@/components/project
 // helpers
 import { calculateTotalFilters } from "@/helpers/filter.helper";
 // hooks
-import { useAppRouter, useProject, useProjectFilter, useWorkspace } from "@/hooks/store";
+import { useProject, useProjectFilter, useWorkspace } from "@/hooks/store";
 
 const ProjectsPage = observer(() => {
   // store
-  const { workspaceSlug } = useAppRouter();
+  const { workspaceSlug } = useParams();
   const { currentWorkspace } = useWorkspace();
   const { totalProjectIds, filteredProjectIds } = useProject();
   const {

web/app/[workspaceSlug]/(projects)/settings/mobile-header-tabs.tsx

@@ -1,8 +1,11 @@
-import { useParams, usePathname, useRouter } from "next/navigation";
+import { useParams, usePathname } from "next/navigation";
+// constants
 import { WORKSPACE_SETTINGS_LINKS } from "@/constants/workspace";
+// hooks
+import { useAppRouter } from "@/hooks/use-app-router";
 
 export const MobileWorkspaceSettingsTabs = () => {
-  const router = useRouter();
+  const router = useAppRouter();
   const { workspaceSlug } = useParams();
   const pathname = usePathname();
   return (

web/app/accounts/set-password/page.tsx

@@ -4,7 +4,7 @@ import { FormEvent, useEffect, useMemo, useState } from "react";
 import { observer } from "mobx-react-lite";
 import Image from "next/image";
 import Link from "next/link";
-import { useRouter, useSearchParams } from "next/navigation";
+import { useSearchParams } from "next/navigation";
 // icons
 import { useTheme } from "next-themes";
 import { Eye, EyeOff } from "lucide-react";
@@ -17,6 +17,7 @@ import { EPageTypes } from "@/helpers/authentication.helper";
 import { getPasswordStrength } from "@/helpers/password.helper";
 // hooks
 import { useUser } from "@/hooks/store";
+import { useAppRouter } from "@/hooks/use-app-router";
 // wrappers
 import { AuthenticationWrapper } from "@/lib/wrappers";
 // services
@@ -43,7 +44,7 @@ const authService = new AuthService();
 
 const SetPasswordPage = observer(() => {
   // router
-  const router = useRouter();
+  const router = useAppRouter();
   // search params
   const searchParams = useSearchParams();
   const email = searchParams.get("email");

web/app/create-workspace/page.tsx

@@ -4,13 +4,13 @@ import { useState } from "react";
 import { observer } from "mobx-react";
 import Image from "next/image";
 import Link from "next/link";
-import { useRouter } from "next/navigation";
 import { useTheme } from "next-themes";
 import { IWorkspace } from "@plane/types";
 // components
 import { CreateWorkspaceForm } from "@/components/workspace";
 // hooks
 import { useUser, useUserProfile } from "@/hooks/store";
+import { useAppRouter } from "@/hooks/use-app-router";
 // wrappers
 import { AuthenticationWrapper } from "@/lib/wrappers";
 // images
@@ -19,7 +19,7 @@ import WhiteHorizontalLogo from "@/public/plane-logos/white-horizontal-with-blue
 
 const CreateWorkspacePage = observer(() => {
   // router
-  const router = useRouter();
+  const router = useAppRouter();
   // store hooks
   const { data: currentUser } = useUser();
   const { updateUserProfile } = useUserProfile();

web/app/error.tsx

@@ -2,7 +2,6 @@
 
 // import { useEffect } from "react";
 // import * as Sentry from "@sentry/nextjs";
-// import { useRouter } from "next/navigation";
 // services
 import { Button } from "@plane/ui";
 // helpers
@@ -24,7 +23,7 @@ import DefaultLayout from "@/layouts/default-layout";
 // TODO: adding error sentry logging.
 // const CustomErrorComponent = ({ error }: props) => {
 const CustomErrorComponent = () => {
-  // const router = useRouter();
+  // const router = useAppRouter();
 
   // useEffect(() => {
   //   Sentry.captureException(error);

web/app/invitations/page.tsx

@@ -4,7 +4,7 @@ import React, { useState } from "react";
 import { observer } from "mobx-react-lite";
 import Image from "next/image";
 import Link from "next/link";
-import { useRouter } from "next/navigation";
+
 import { useTheme } from "next-themes";
 import useSWR, { mutate } from "swr";
 // icons
@@ -22,7 +22,9 @@ import { ROLE } from "@/constants/workspace";
 // helpers
 import { truncateText } from "@/helpers/string.helper";
 import { getUserRole } from "@/helpers/user.helper";
+// hooks
 import { useEventTracker, useUser, useUserProfile, useWorkspace } from "@/hooks/store";
+import { useAppRouter } from "@/hooks/use-app-router";
 // services
 import { AuthenticationWrapper } from "@/lib/wrappers";
 // images
@@ -38,7 +40,7 @@ const UserInvitationsPage = observer(() => {
   const [invitationsRespond, setInvitationsRespond] = useState<string[]>([]);
   const [isJoiningWorkspaces, setIsJoiningWorkspaces] = useState(false);
   // router
-  const router = useRouter();
+  const router = useAppRouter();
   // store hooks
   const { captureEvent, joinWorkspaceMetricGroup } = useEventTracker();
   const { data: currentUser } = useUser();

web/app/onboarding/page.tsx

@@ -2,7 +2,6 @@
 
 import { useEffect, useState } from "react";
 import { observer } from "mobx-react";
-import { useRouter } from "next/navigation";
 import useSWR from "swr";
 // types
 import { TOnboardingSteps, TUserProfile } from "@plane/types";
@@ -16,6 +15,7 @@ import { USER_WORKSPACES_LIST } from "@/constants/fetch-keys";
 import { EPageTypes } from "@/helpers/authentication.helper";
 // hooks
 import { useUser, useWorkspace, useUserProfile, useEventTracker } from "@/hooks/store";
+import { useAppRouter } from "@/hooks/use-app-router";
 // wrappers
 import { AuthenticationWrapper } from "@/lib/wrappers";
 // services
@@ -34,7 +34,7 @@ const OnboardingPage = observer(() => {
   const [step, setStep] = useState<EOnboardingSteps | null>(null);
   const [totalSteps, setTotalSteps] = useState<number | null>(null);
   // router
-  const router = useRouter();
+  const router = useAppRouter();
   // store hooks
   const { captureEvent } = useEventTracker();
   const { isLoading: userLoader, data: user, updateCurrentUser } = useUser();

web/app/profile/security/page.tsx

@@ -2,7 +2,6 @@
 
 import { useEffect, useState } from "react";
 import { observer } from "mobx-react";
-import { useRouter } from "next/navigation";
 import { Controller, useForm } from "react-hook-form";
 import { Eye, EyeOff } from "lucide-react";
 // ui
@@ -17,6 +16,7 @@ import { authErrorHandler } from "@/helpers/authentication.helper";
 import { getPasswordStrength } from "@/helpers/password.helper";
 // hooks
 import { useUser } from "@/hooks/store";
+import { useAppRouter } from "@/hooks/use-app-router";
 // services
 import { AuthService } from "@/services/auth.service";
 import { UserService } from "@/services/user.service";
@@ -49,7 +49,7 @@ const SecurityPage = observer(() => {
   const [isPasswordInputFocused, setIsPasswordInputFocused] = useState(false);
   const [isRetryPasswordInputFocused, setIsRetryPasswordInputFocused] = useState(false);
   // router
-  const router = useRouter();
+  const router = useAppRouter();
   const { data: currentUser } = useUser();
   // use form
   const {

web/app/workspace-invitations/page.tsx

@@ -2,7 +2,7 @@
 
 import React from "react";
 import { observer } from "mobx-react";
-import { useRouter, useSearchParams } from "next/navigation";
+import { useSearchParams } from "next/navigation";
 import useSWR from "swr";
 import { Boxes, Check, Share2, Star, User2, X } from "lucide-react";
 // components
@@ -14,6 +14,7 @@ import { WORKSPACE_INVITATION } from "@/constants/fetch-keys";
 import { EPageTypes } from "@/helpers/authentication.helper";
 // hooks
 import { useUser } from "@/hooks/store";
+import { useAppRouter } from "@/hooks/use-app-router";
 // wrappers
 import { AuthenticationWrapper } from "@/lib/wrappers";
 // services
@@ -24,7 +25,7 @@ const workspaceService = new WorkspaceService();
 
 const WorkspaceInvitationPage = observer(() => {
   // router
-  const router = useRouter();
+  const router = useAppRouter();
   // query params
   const searchParams = useSearchParams();
   const invitation_id = searchParams.get("invitation_id");

web/core/components/account/auth-forms/auth-root.tsx

@@ -1,6 +1,6 @@
 import React, { FC, useEffect, useState } from "react";
 import { observer } from "mobx-react";
-import { useRouter, useSearchParams } from "next/navigation";
+import { useSearchParams } from "next/navigation";
 import { IEmailCheckData } from "@plane/types";
 // components
 import {
@@ -23,6 +23,7 @@ import {
 } from "@/helpers/authentication.helper";
 // hooks
 import { useInstance } from "@/hooks/store";
+import { useAppRouter } from "@/hooks/use-app-router";
 // services
 import { AuthService } from "@/services/auth.service";
 
@@ -34,7 +35,7 @@ type TAuthRoot = {
 
 export const AuthRoot: FC<TAuthRoot> = observer((props) => {
   //router
-  const router = useRouter();
+  const router = useAppRouter();
   const searchParams = useSearchParams();
   // query params
   const emailParam = searchParams.get("email");

web/core/components/account/deactivate-account-modal.tsx

@@ -1,13 +1,13 @@
 "use client";
 
 import React, { useState } from "react";
-import { useRouter } from "next/navigation";
 import { Trash2 } from "lucide-react";
 import { Dialog, Transition } from "@headlessui/react";
-// hooks
 // ui
 import { Button, TOAST_TYPE, setToast } from "@plane/ui";
+// hooks
 import { useUser } from "@/hooks/store";
+import { useAppRouter } from "@/hooks/use-app-router";
 
 type Props = {
   isOpen: boolean;
@@ -15,7 +15,7 @@ type Props = {
 };
 
 export const DeactivateAccountModal: React.FC<Props> = (props) => {
-  const router = useRouter();
+  const router = useAppRouter();
   const { isOpen, onClose } = props;
   // hooks
   const { deactivateAccount, signOut } = useUser();

web/core/components/account/oauth/gitlab-button.tsx

@@ -1,6 +1,6 @@
 import { FC } from "react";
-import { useRouter } from "next/router";
 import Image from "next/image";
+import { useSearchParams } from "next/navigation";
 import { useTheme } from "next-themes";
 // helpers
 import { API_BASE_URL } from "@/helpers/common.helper";
@@ -12,14 +12,14 @@ export type GitlabOAuthButtonProps = {
 };
 
 export const GitlabOAuthButton: FC<GitlabOAuthButtonProps> = (props) => {
-  const { query } = useRouter();
+  const searchParams = useSearchParams();
-  const { next_path } = query;
+  const nextPath = searchParams.get("next_path") || undefined;
   const { text } = props;
   // hooks
   const { resolvedTheme } = useTheme();
 
   const handleSignIn = () => {
-    window.location.assign(`${API_BASE_URL}/auth/gitlab/${next_path ? `?next_path=${next_path}` : ``}`);
+    window.location.assign(`${API_BASE_URL}/auth/gitlab/${nextPath ? `?next_path=${nextPath}` : ``}`);
   };
 
   return (

web/core/components/analytics/custom-analytics/select/y-axis.tsx

@@ -1,12 +1,13 @@
 "use client";
 
 import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
 import { TYAxisValues } from "@plane/types";
 import { CustomSelect } from "@plane/ui";
 // constants
 import { ANALYTICS_Y_AXIS_VALUES } from "@/constants/analytics";
 // hooks
-import { useAppRouter, useProjectEstimates } from "@/hooks/store";
+import { useProjectEstimates } from "@/hooks/store";
 // plane web constants
 import { EEstimateSystem } from "@/plane-web/constants/estimates";
 
@@ -17,7 +18,7 @@ type Props = {
 
 export const SelectYAxis: React.FC<Props> = observer(({ value, onChange }) => {
   // hooks
-  const { projectId } = useAppRouter();
+  const { projectId } = useParams();
   const { areEstimateEnabledByProjectId, currentActiveEstimateId, estimateById } = useProjectEstimates();
 
   const isEstimateEnabled = (analyticsOption: string) => {
@@ -25,7 +26,7 @@ export const SelectYAxis: React.FC<Props> = observer(({ value, onChange }) => {
       if (
         projectId &&
         currentActiveEstimateId &&
-        areEstimateEnabledByProjectId(projectId) &&
+        areEstimateEnabledByProjectId(projectId.toString()) &&
         estimateById(currentActiveEstimateId)?.type === EEstimateSystem.POINTS
       ) {
         return true;

web/core/components/command-palette/actions/search-results.tsx

@@ -1,11 +1,12 @@
 "use client";
 
 import { Command } from "cmdk";
-import { useRouter } from "next/navigation";
+// types
 import { IWorkspaceSearchResults } from "@plane/types";
 // helpers
 import { commandGroups } from "@/components/command-palette";
-// types
+// hooks
+import { useAppRouter } from "@/hooks/use-app-router";
 
 type Props = {
   closePalette: () => void;
@@ -15,7 +16,7 @@ type Props = {
 export const CommandPaletteSearchResults: React.FC<Props> = (props) => {
   const { closePalette, results } = props;
 
-  const router = useRouter();
+  const router = useAppRouter();
 
   return (
     <>

web/core/components/command-palette/actions/workspace-settings-actions.tsx

@@ -3,10 +3,12 @@
 import { Command } from "cmdk";
 // hooks
 import Link from "next/link";
-import { useParams, useRouter } from "next/navigation";
+import { useParams } from "next/navigation";
 // constants
 import { EUserWorkspaceRoles, WORKSPACE_SETTINGS_LINKS } from "@/constants/workspace";
+// hooks
 import { useUser } from "@/hooks/store";
+import { useAppRouter } from "@/hooks/use-app-router";
 
 type Props = {
   closePalette: () => void;
@@ -15,7 +17,7 @@ type Props = {
 export const CommandPaletteWorkspaceSettingsActions: React.FC<Props> = (props) => {
   const { closePalette } = props;
   // router
-  const router = useRouter();
+  const router = useAppRouter();
   // router params
   const { workspaceSlug } = useParams();
   // mobx store

web/core/components/command-palette/command-modal.tsx

@@ -3,7 +3,7 @@
 import React, { useEffect, useState } from "react";
 import { Command } from "cmdk";
 import { observer } from "mobx-react";
-import { useParams, useRouter } from "next/navigation";
+import { useParams } from "next/navigation";
 import useSWR from "swr";
 import { FolderPlus, Search, Settings } from "lucide-react";
 import { Dialog, Transition } from "@headlessui/react";
@@ -26,6 +26,7 @@ import { EmptyState } from "@/components/empty-state";
 import { EmptyStateType } from "@/constants/empty-state";
 import { ISSUE_DETAILS } from "@/constants/fetch-keys";
 import { useCommandPalette, useEventTracker, useProject } from "@/hooks/store";
+import { useAppRouter } from "@/hooks/use-app-router";
 import useDebounce from "@/hooks/use-debounce";
 import { usePlatformOS } from "@/hooks/use-platform-os";
 // services
@@ -68,7 +69,7 @@ export const CommandModal: React.FC = observer(() => {
   const { setTrackElement } = useEventTracker();
 
   // router
-  const router = useRouter();
+  const router = useAppRouter();
   // router params
   const { workspaceSlug, projectId, issueId } = useParams();
 

web/core/components/command-palette/command-palette.tsx

@@ -2,7 +2,7 @@
 
 import React, { useCallback, useEffect, FC, useMemo } from "react";
 import { observer } from "mobx-react";
-import { useParams, usePathname, useRouter } from "next/navigation";
+import { useParams, usePathname } from "next/navigation";
 import useSWR from "swr";
 // ui
 import { TOAST_TYPE, setToast } from "@plane/ui";
@@ -24,6 +24,7 @@ import { EUserWorkspaceRoles } from "@/constants/workspace";
 import { copyTextToClipboard } from "@/helpers/string.helper";
 // hooks
 import { useEventTracker, useIssues, useUser, useAppTheme, useCommandPalette } from "@/hooks/store";
+import { useAppRouter } from "@/hooks/use-app-router";
 import { usePlatformOS } from "@/hooks/use-platform-os";
 // services
 import { IssueService } from "@/services/issue";
@@ -33,7 +34,7 @@ const issueService = new IssueService();
 
 export const CommandPalette: FC = observer(() => {
   // router
-  const router = useRouter();
+  const router = useAppRouter();
   // router params
   const { workspaceSlug, projectId, issueId, cycleId, moduleId } = useParams();
   // pathname

web/core/components/core/list/list-item.tsx

@@ -1,10 +1,11 @@
 "use client";
 import React, { FC } from "react";
-import { useRouter } from "next/navigation";
 // ui
 import { ControlLink, Tooltip } from "@plane/ui";
 // helpers
 import { cn } from "@/helpers/common.helper";
+// hooks
+import { useAppRouter } from "@/hooks/use-app-router";
 
 interface IListItemProps {
   title: string;
@@ -34,7 +35,7 @@ export const ListItem: FC<IListItemProps> = (props) => {
   } = props;
 
   // router
-  const router = useRouter();
+  const router = useAppRouter();
 
   // handlers
   const handleControlLinkClick = (e: React.MouseEvent<HTMLAnchorElement>) => {

web/core/components/cycles/analytics-sidebar/root.tsx

@@ -3,7 +3,7 @@
 import React, { useEffect, useState } from "react";
 import isEmpty from "lodash/isEmpty";
 import { observer } from "mobx-react";
-import { useParams, useRouter } from "next/navigation";
+import { useParams } from "next/navigation";
 import { Controller, useForm } from "react-hook-form";
 // icons
 import { ArchiveRestoreIcon, LinkIcon, Trash2, ChevronRight, CalendarClock, SquareUser } from "lucide-react";
@@ -23,6 +23,7 @@ import { findHowManyDaysLeft, getDate, renderFormattedPayloadDate } from "@/help
 import { copyUrlToClipboard } from "@/helpers/string.helper";
 // hooks
 import { useEventTracker, useCycle, useUser, useMember, useProjectEstimates } from "@/hooks/store";
+import { useAppRouter } from "@/hooks/use-app-router";
 // plane web constants
 import { EEstimateSystem } from "@/plane-web/constants/estimates";
 // services
@@ -49,7 +50,7 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
   const [archiveCycleModal, setArchiveCycleModal] = useState(false);
   const [cycleDeleteModal, setCycleDeleteModal] = useState(false);
   // router
-  const router = useRouter();
+  const router = useAppRouter();
   const { workspaceSlug, projectId } = useParams();
   // store hooks
   const { setTrackElement, captureCycleEvent } = useEventTracker();

web/core/components/cycles/archived-cycles/modal.tsx

@@ -1,12 +1,12 @@
 "use client";
 
 import { useState, Fragment } from "react";
-import { useRouter } from "next/navigation";
 import { Dialog, Transition } from "@headlessui/react";
 // ui
 import { Button, TOAST_TYPE, setToast } from "@plane/ui";
 // hooks
 import { useCycle } from "@/hooks/store";
+import { useAppRouter } from "@/hooks/use-app-router";
 
 type Props = {
   workspaceSlug: string;
@@ -20,7 +20,7 @@ type Props = {
 export const ArchiveCycleModal: React.FC<Props> = (props) => {
   const { workspaceSlug, projectId, cycleId, isOpen, handleClose } = props;
   // router
-  const router = useRouter();
+  const router = useAppRouter();
   // states
   const [isArchiving, setIsArchiving] = useState(false);
   // store hooks

web/core/components/cycles/board/cycles-board-card.tsx

@@ -3,7 +3,7 @@
 import { FC, MouseEvent, useRef } from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";
-import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import { usePathname, useSearchParams } from "next/navigation";
 import { CalendarCheck2, CalendarClock, Info, MoveRight } from "lucide-react";
 // types
 import type { TCycleGroups } from "@plane/types";
@@ -21,6 +21,7 @@ import { findHowManyDaysLeft, getDate, renderFormattedDate } from "@/helpers/dat
 import { generateQueryParams } from "@/helpers/router.helper";
 // hooks
 import { useEventTracker, useCycle, useUser, useMember } from "@/hooks/store";
+import { useAppRouter } from "@/hooks/use-app-router";
 import { usePlatformOS } from "@/hooks/use-platform-os";
 
 export interface ICyclesBoardCard {
@@ -34,7 +35,7 @@ export const CyclesBoardCard: FC<ICyclesBoardCard> = observer((props) => {
   // refs
   const parentRef = useRef(null);
   // router
-  const router = useRouter();
+  const router = useAppRouter();
   const searchParams = useSearchParams();
   const pathname = usePathname();
   // store

web/core/components/cycles/cycle-peek-overview.tsx

@@ -1,9 +1,10 @@
 import React, { useEffect } from "react";
 import { observer } from "mobx-react";
-import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import { usePathname, useSearchParams } from "next/navigation";
 // hooks
 import { generateQueryParams } from "@/helpers/router.helper";
 import { useCycle } from "@/hooks/store";
+import { useAppRouter } from "@/hooks/use-app-router";
 // components
 import { CycleDetailsSidebar } from "./";
 
@@ -15,7 +16,7 @@ type Props = {
 
 export const CyclePeekOverview: React.FC<Props> = observer(({ projectId, workspaceSlug, isArchived = false }) => {
   // router
-  const router = useRouter();
+  const router = useAppRouter();
   const pathname = usePathname();
   const searchParams = useSearchParams();
   const peekCycle = searchParams.get("peekCycle");

web/core/components/cycles/delete-modal.tsx

@@ -2,7 +2,7 @@
 
 import { useState } from "react";
 import { observer } from "mobx-react";
-import { useParams, useRouter, useSearchParams } from "next/navigation";
+import { useParams, useSearchParams } from "next/navigation";
 // types
 import { ICycle } from "@plane/types";
 // ui
@@ -11,6 +11,7 @@ import { AlertModalCore, TOAST_TYPE, setToast } from "@plane/ui";
 import { CYCLE_DELETED } from "@/constants/event-tracker";
 // hooks
 import { useEventTracker, useCycle } from "@/hooks/store";
+import { useAppRouter } from "@/hooks/use-app-router";
 
 interface ICycleDelete {
   cycle: ICycle;
@@ -28,7 +29,7 @@ export const CycleDeleteModal: React.FC<ICycleDelete> = observer((props) => {
   const { captureCycleEvent } = useEventTracker();
   const { deleteCycle } = useCycle();
   // router
-  const router = useRouter();
+  const router = useAppRouter();
   const { cycleId } = useParams();
   const searchParams = useSearchParams();
   const peekCycle = searchParams.get("peekCycle");

web/core/components/cycles/gantt-chart/blocks.tsx

@@ -2,13 +2,14 @@
 
 import { observer } from "mobx-react";
 import Link from "next/link";
-import { useRouter } from "next/navigation";
+import { useParams } from "next/navigation";
-// hooks
 // ui
 import { Tooltip, ContrastIcon } from "@plane/ui";
 // helpers
 import { renderFormattedDate } from "@/helpers/date-time.helper";
-import { useAppRouter, useCycle } from "@/hooks/store";
+// hooks
+import { useCycle } from "@/hooks/store";
+import { useAppRouter } from "@/hooks/use-app-router";
 import { usePlatformOS } from "@/hooks/use-platform-os";
 
 type Props = {
@@ -18,9 +19,9 @@ type Props = {
 export const CycleGanttBlock: React.FC<Props> = observer((props) => {
   const { cycleId } = props;
   // router
-  const router = useRouter();
+  const router = useAppRouter();
   // store hooks
-  const { workspaceSlug } = useAppRouter();
+  const { workspaceSlug } = useParams();
   const { getCycleById } = useCycle();
   // derived values
   const cycleDetails = getCycleById(cycleId);
@@ -35,14 +36,16 @@ export const CycleGanttBlock: React.FC<Props> = observer((props) => {
           cycleStatus === "current"
             ? "#09a953"
             : cycleStatus === "upcoming"
-            ? "#f7ae59"
+              ? "#f7ae59"
-            : cycleStatus === "completed"
+              : cycleStatus === "completed"
-            ? "#3f76ff"
+                ? "#3f76ff"
-            : cycleStatus === "draft"
+                : cycleStatus === "draft"
-            ? "rgb(var(--color-text-200))"
+                  ? "rgb(var(--color-text-200))"
-            : "",
+                  : "",
       }}
-      onClick={() => router.push(`/${workspaceSlug}/projects/${cycleDetails?.project_id}/cycles/${cycleDetails?.id}`)}
+      onClick={() =>
+        router.push(`/${workspaceSlug.toString()}/projects/${cycleDetails?.project_id}/cycles/${cycleDetails?.id}`)
+      }
     >
       <div className="absolute left-0 top-0 h-full w-full bg-custom-background-100/50" />
       <Tooltip
@@ -67,7 +70,7 @@ export const CycleGanttBlock: React.FC<Props> = observer((props) => {
 export const CycleGanttSidebarBlock: React.FC<Props> = observer((props) => {
   const { cycleId } = props;
   // store hooks
-  const { workspaceSlug } = useAppRouter();
+  const { workspaceSlug } = useParams();
   const { getCycleById } = useCycle();
   // derived values
   const cycleDetails = getCycleById(cycleId);
@@ -77,7 +80,7 @@ export const CycleGanttSidebarBlock: React.FC<Props> = observer((props) => {
   return (
     <Link
       className="relative flex h-full w-full items-center gap-2"
-      href={`/${workspaceSlug}/projects/${cycleDetails?.project_id}/cycles/${cycleDetails?.id}`}
+      href={`/${workspaceSlug.toString()}/projects/${cycleDetails?.project_id}/cycles/${cycleDetails?.id}`}
       draggable={false}
     >
       <ContrastIcon

web/core/components/cycles/list/cycles-list-item.tsx

@@ -2,7 +2,7 @@
 
 import { FC, MouseEvent, useRef } from "react";
 import { observer } from "mobx-react";
-import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import { usePathname, useSearchParams } from "next/navigation";
 // icons
 import { Check, Info } from "lucide-react";
 // types
@@ -16,6 +16,7 @@ import { CycleListItemAction } from "@/components/cycles/list";
 import { generateQueryParams } from "@/helpers/router.helper";
 // hooks
 import { useCycle } from "@/hooks/store";
+import { useAppRouter } from "@/hooks/use-app-router";
 import { usePlatformOS } from "@/hooks/use-platform-os";
 
 type TCyclesListItem = {
@@ -34,7 +35,7 @@ export const CyclesListItem: FC<TCyclesListItem> = observer((props) => {
   // refs
   const parentRef = useRef(null);
   // router
-  const router = useRouter();
+  const router = useAppRouter();
   const searchParams = useSearchParams();
   const pathname = usePathname();
   // hooks

web/core/components/cycles/quick-actions.tsx

@@ -2,7 +2,7 @@
 
 import { useState } from "react";
 import { observer } from "mobx-react";
-import { useRouter } from "next/navigation";
+
 // icons
 import { ArchiveRestoreIcon, ExternalLink, LinkIcon, Pencil, Trash2 } from "lucide-react";
 // ui
@@ -16,6 +16,7 @@ import { cn } from "@/helpers/common.helper";
 import { copyUrlToClipboard } from "@/helpers/string.helper";
 // hooks
 import { useCycle, useEventTracker, useUser } from "@/hooks/store";
+import { useAppRouter } from "@/hooks/use-app-router";
 
 type Props = {
   parentRef: React.RefObject<HTMLElement>;
@@ -27,7 +28,7 @@ type Props = {
 export const CycleQuickActions: React.FC<Props> = observer((props) => {
   const { parentRef, cycleId, projectId, workspaceSlug } = props;
   // router
-  const router = useRouter();
+  const router = useAppRouter();
   // states
   const [updateModal, setUpdateModal] = useState(false);
   const [archiveCycleModal, setArchiveCycleModal] = useState(false);

web/core/components/dashboard/home-dashboard-widgets.tsx

@@ -1,4 +1,5 @@
 import { observer } from "mobx-react-lite";
+import { useParams } from "next/navigation";
 // types
 import { TWidgetKeys } from "@plane/types";
 // components
@@ -14,7 +15,7 @@ import {
   WidgetProps,
 } from "@/components/dashboard";
 // hooks
-import { useAppRouter, useDashboard } from "@/hooks/store";
+import { useDashboard } from "@/hooks/store";
 
 const WIDGETS_LIST: {
   [key in TWidgetKeys]: { component: React.FC<WidgetProps>; fullWidth: boolean };
@@ -30,8 +31,9 @@ const WIDGETS_LIST: {
 };
 
 export const DashboardWidgets = observer(() => {
+  // router
+  const { workspaceSlug } = useParams();
   // store hooks
-  const { workspaceSlug } = useAppRouter();
   const { homeDashboardId, homeDashboardWidgets } = useDashboard();
 
   const doesWidgetExist = (widgetKey: TWidgetKeys) =>
@@ -49,10 +51,11 @@ export const DashboardWidgets = observer(() => {
         if (widget.fullWidth)
           return (
             <div key={key} className="lg:col-span-2">
-              <WidgetComponent dashboardId={homeDashboardId} workspaceSlug={workspaceSlug} />
+              <WidgetComponent dashboardId={homeDashboardId} workspaceSlug={workspaceSlug.toString()} />
             </div>
           );
-        else return <WidgetComponent key={key} dashboardId={homeDashboardId} workspaceSlug={workspaceSlug} />;
+        else
+          return <WidgetComponent key={key} dashboardId={homeDashboardId} workspaceSlug={workspaceSlug.toString()} />;
       })}
     </div>
   );

web/core/components/dashboard/widgets/issues-by-priority.tsx

@@ -1,9 +1,8 @@
 import { useEffect } from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";
-import { useRouter } from "next/navigation";
+// types
 import { TIssuesByPriorityWidgetFilters, TIssuesByPriorityWidgetResponse } from "@plane/types";
-// hooks
 // components
 import {
   DurationFilterDropdown,
@@ -11,20 +10,21 @@ import {
   WidgetLoader,
   WidgetProps,
 } from "@/components/dashboard/widgets";
-// helpers
-// types
-// constants
 import { IssuesByPriorityGraph } from "@/components/graphs";
+// constants
 import { EDurationFilters } from "@/constants/dashboard";
+// helpers
 import { getCustomDates } from "@/helpers/dashboard.helper";
+// hooks
 import { useDashboard } from "@/hooks/store";
+import { useAppRouter } from "@/hooks/use-app-router";
 
 const WIDGET_KEY = "issues_by_priority";
 
 export const IssuesByPriorityWidget: React.FC<WidgetProps> = observer((props) => {
   const { dashboardId, workspaceSlug } = props;
   // router
-  const router = useRouter();
+  const router = useAppRouter();
   // store hooks
   const { fetchWidgetStats, getWidgetDetails, getWidgetStats, updateDashboardWidgetFilters } = useDashboard();
   // derived values

web/core/components/dashboard/widgets/issues-by-state-group.tsx

@@ -1,9 +1,9 @@
 import { useEffect, useState } from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";
-import { useRouter } from "next/navigation";
+// types
 import { TIssuesByStateGroupsWidgetFilters, TIssuesByStateGroupsWidgetResponse, TStateGroups } from "@plane/types";
-// hooks
+// components
 import {
   DurationFilterDropdown,
   IssuesByStateGroupEmptyState,
@@ -11,14 +11,14 @@ import {
   WidgetProps,
 } from "@/components/dashboard/widgets";
 import { PieGraph } from "@/components/ui";
+// constants
 import { EDurationFilters, STATE_GROUP_GRAPH_COLORS, STATE_GROUP_GRAPH_GRADIENTS } from "@/constants/dashboard";
 import { STATE_GROUPS } from "@/constants/state";
-import { getCustomDates } from "@/helpers/dashboard.helper";
-import { useDashboard } from "@/hooks/store";
-// components
 // helpers
-// types
+import { getCustomDates } from "@/helpers/dashboard.helper";
-// constants
+// hooks
+import { useDashboard } from "@/hooks/store";
+import { useAppRouter } from "@/hooks/use-app-router";
 
 const WIDGET_KEY = "issues_by_state_groups";
 
@@ -28,7 +28,7 @@ export const IssuesByStateGroupWidget: React.FC<WidgetProps> = observer((props)
   const [defaultStateGroup, setDefaultStateGroup] = useState<TStateGroups | null>(null);
   const [activeStateGroup, setActiveStateGroup] = useState<TStateGroups | null>(null);
   // router
-  const router = useRouter();
+  const router = useAppRouter();
   // store hooks
   const { fetchWidgetStats, getWidgetDetails, getWidgetStats, updateDashboardWidgetFilters } = useDashboard();
   // derived values

web/core/components/dropdowns/cycle/cycle-options.tsx

@@ -3,6 +3,7 @@
 import { FC, useEffect, useRef, useState } from "react";
 import { Placement } from "@popperjs/core";
 import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
 import { usePopper } from "react-popper";
 // components
 import { Check, Search } from "lucide-react";
@@ -12,7 +13,7 @@ import { TCycleGroups } from "@plane/types";
 // ui
 import { ContrastIcon, CycleGroupIcon } from "@plane/ui";
 // store hooks
-import { useAppRouter, useCycle } from "@/hooks/store";
+import { useCycle } from "@/hooks/store";
 // types
 
 type DropdownOptions =
@@ -37,7 +38,7 @@ export const CycleOptions: FC<CycleOptionsProps> = observer((props) => {
   const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
   const inputRef = useRef<HTMLInputElement | null>(null);
   // store hooks
-  const { workspaceSlug } = useAppRouter();
+  const { workspaceSlug } = useParams();
   const { getProjectCycleIds, fetchAllCycles, getCycleById } = useCycle();
 
   useEffect(() => {
@@ -66,7 +67,7 @@ export const CycleOptions: FC<CycleOptionsProps> = observer((props) => {
   });
 
   const onOpen = () => {
-    if (workspaceSlug && !cycleIds) fetchAllCycles(workspaceSlug, projectId);
+    if (workspaceSlug && !cycleIds) fetchAllCycles(workspaceSlug.toString(), projectId);
   };
 
   const searchInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {

web/core/components/dropdowns/estimate.tsx

@@ -1,5 +1,6 @@
 import { Fragment, ReactNode, useRef, useState } from "react";
 import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
 import { usePopper } from "react-popper";
 import { Check, ChevronDown, Search, Triangle } from "lucide-react";
 import { Combobox } from "@headlessui/react";
@@ -7,7 +8,6 @@ import { Combobox } from "@headlessui/react";
 import { cn } from "@/helpers/common.helper";
 // hooks
 import {
-  useAppRouter,
   useEstimate,
   useProjectEstimates,
   //  useEstimate
@@ -78,9 +78,9 @@ export const EstimateDropdown: React.FC<Props> = observer((props) => {
       },
     ],
   });
+  // router
+  const { workspaceSlug } = useParams();
   // store hooks
-  const { workspaceSlug } = useAppRouter();
-
   const { currentActiveEstimateId, getProjectEstimates } = useProjectEstimates();
   const { estimatePointIds, estimatePointById } = useEstimate(
     currentActiveEstimateId ? currentActiveEstimateId : undefined
@@ -120,7 +120,7 @@ export const EstimateDropdown: React.FC<Props> = observer((props) => {
   const selectedEstimate = value && estimatePointById ? estimatePointById(value) : undefined;
 
   const onOpen = async () => {
-    if (!currentActiveEstimateId && workspaceSlug && projectId) await getProjectEstimates(workspaceSlug, projectId);
+    if (!currentActiveEstimateId && workspaceSlug && projectId) await getProjectEstimates(workspaceSlug.toString(), projectId);
   };
 
   const { handleClose, handleKeyDown, handleOnClick, searchInputKeyDown } = useDropdown({

web/core/components/dropdowns/member/member-options.tsx

@@ -3,13 +3,14 @@
 import { useEffect, useRef, useState } from "react";
 import { Placement } from "@popperjs/core";
 import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
 import { usePopper } from "react-popper";
 import { Check, Search } from "lucide-react";
 import { Combobox } from "@headlessui/react";
 //components
 import { Avatar } from "@plane/ui";
 //store
-import { useUser, useMember, useAppRouter } from "@/hooks/store";
+import { useUser, useMember } from "@/hooks/store";
 
 interface Props {
   projectId?: string;
@@ -26,7 +27,7 @@ export const MemberOptions = observer((props: Props) => {
   // refs
   const inputRef = useRef<HTMLInputElement | null>(null);
   // store hooks
-  const { workspaceSlug } = useAppRouter();
+  const { workspaceSlug } = useParams();
   const {
     getUserDetails,
     project: { getProjectMemberIds, fetchProjectMembers },
@@ -55,7 +56,7 @@ export const MemberOptions = observer((props: Props) => {
 
   const memberIds = projectId ? getProjectMemberIds(projectId) : workspaceMemberIds;
   const onOpen = () => {
-    if (!memberIds && workspaceSlug && projectId) fetchProjectMembers(workspaceSlug, projectId);
+    if (!memberIds && workspaceSlug && projectId) fetchProjectMembers(workspaceSlug.toString(), projectId);
   };
 
   const searchInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {

web/core/components/dropdowns/module/module-options.tsx

@@ -3,6 +3,7 @@
 import { useEffect, useRef, useState } from "react";
 import { Placement } from "@popperjs/core";
 import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
 import { usePopper } from "react-popper";
 import { Check, Search } from "lucide-react";
 import { Combobox } from "@headlessui/react";
@@ -10,7 +11,7 @@ import { Combobox } from "@headlessui/react";
 import { DiceIcon } from "@plane/ui";
 //store
 import { cn } from "@/helpers/common.helper";
-import { useAppRouter, useModule } from "@/hooks/store";
+import { useModule } from "@/hooks/store";
 //hooks
 //icon
 //types
@@ -39,7 +40,7 @@ export const ModuleOptions = observer((props: Props) => {
   // refs
   const inputRef = useRef<HTMLInputElement | null>(null);
   // store hooks
-  const { workspaceSlug } = useAppRouter();
+  const { workspaceSlug } = useParams();
   const { getProjectModuleIds, fetchModules, getModuleById } = useModule();
 
   useEffect(() => {
@@ -66,7 +67,7 @@ export const ModuleOptions = observer((props: Props) => {
   const moduleIds = getProjectModuleIds(projectId);
 
   const onOpen = () => {
-    if (workspaceSlug && !moduleIds) fetchModules(workspaceSlug, projectId);
+    if (workspaceSlug && !moduleIds) fetchModules(workspaceSlug.toString(), projectId);
   };
 
   const searchInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {

web/core/components/dropdowns/state.tsx

@@ -2,6 +2,7 @@
 
 import { Fragment, ReactNode, useEffect, useRef, useState } from "react";
 import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
 import { usePopper } from "react-popper";
 import { Check, ChevronDown, Search } from "lucide-react";
 import { Combobox } from "@headlessui/react";
@@ -10,7 +11,7 @@ import { Spinner, StateGroupIcon } from "@plane/ui";
 // helpers
 import { cn } from "@/helpers/common.helper";
 // hooks
-import { useAppRouter, useProjectState } from "@/hooks/store";
+import { useProjectState } from "@/hooks/store";
 import { useDropdown } from "@/hooks/use-dropdown";
 // components
 import { DropdownButton } from "./buttons";
@@ -73,7 +74,7 @@ export const StateDropdown: React.FC<Props> = observer((props) => {
     ],
   });
   // store hooks
-  const { workspaceSlug } = useAppRouter();
+  const { workspaceSlug } = useParams();
   const { fetchProjectStates, getProjectStates, getStateById } = useProjectState();
   const statesList = getProjectStates(projectId);
   const defaultState = statesList?.find((state) => state.default);
@@ -98,7 +99,7 @@ export const StateDropdown: React.FC<Props> = observer((props) => {
   const onOpen = async () => {
     if (!statesList && workspaceSlug && projectId) {
       setStateLoader(true);
-      await fetchProjectStates(workspaceSlug, projectId);
+      await fetchProjectStates(workspaceSlug.toString(), projectId);
       setStateLoader(false);
     }
   };

web/core/components/exporter/export-modal.tsx

@@ -2,17 +2,17 @@
 
 import React, { useState } from "react";
 import { observer } from "mobx-react";
-import { useParams, useRouter } from "next/navigation";
+import { useParams } from "next/navigation";
 import { Dialog, Transition } from "@headlessui/react";
+// types
 import { IUser, IImporterService } from "@plane/types";
-// hooks
+// ui
 import { Button, CustomSearchSelect, TOAST_TYPE, setToast } from "@plane/ui";
-
+// hooks
 import { useProject } from "@/hooks/store";
+import { useAppRouter } from "@/hooks/use-app-router";
 // services
 import { ProjectExportService } from "@/services/project";
-// ui
-// types
 
 type Props = {
   isOpen: boolean;
@@ -31,7 +31,7 @@ export const Exporter: React.FC<Props> = observer((props) => {
   const [exportLoading, setExportLoading] = useState(false);
   const [isSelectOpen, setIsSelectOpen] = useState(false);
   // router
-  const router = useRouter();
+  const router = useAppRouter();
   const { workspaceSlug } = useParams();
   // store hooks
   const { workspaceProjectIds, getProjectById } = useProject();

web/core/components/exporter/guide.tsx

@@ -4,7 +4,7 @@ import { useState } from "react";
 import { observer } from "mobx-react";
 import Image from "next/image";
 import Link from "next/link";
-import { useRouter, useParams, useSearchParams } from "next/navigation";
+import { useParams, useSearchParams } from "next/navigation";
 import useSWR, { mutate } from "swr";
 // icons
 import { MoveLeft, MoveRight, RefreshCw } from "lucide-react";
@@ -20,6 +20,7 @@ import { EXPORT_SERVICES_LIST } from "@/constants/fetch-keys";
 import { EXPORTERS_LIST } from "@/constants/workspace";
 // hooks
 import { useUser } from "@/hooks/store";
+import { useAppRouter } from "@/hooks/use-app-router";
 // services
 import { IntegrationService } from "@/services/integrations";
 
@@ -31,7 +32,7 @@ const IntegrationGuide = observer(() => {
   const per_page = 10;
   const [cursor, setCursor] = useState<string | undefined>(`10:0:0`);
   // router
-  const router = useRouter();
+  const router = useAppRouter();
   const { workspaceSlug } = useParams();
   const searchParams = useSearchParams();
   const provider = searchParams.get("provider");

web/core/components/inbox/content/inbox-issue-header.tsx

@@ -2,7 +2,6 @@
 
 import { FC, useCallback, useEffect, useState } from "react";
 import { observer } from "mobx-react";
-import { useRouter } from "next/navigation";
 import {
   CircleCheck,
   CircleX,
@@ -33,6 +32,7 @@ import { EInboxIssueStatus } from "@/helpers/inbox.helper";
 import { copyUrlToClipboard } from "@/helpers/string.helper";
 // hooks
 import { useUser, useProjectInbox, useProject } from "@/hooks/store";
+import { useAppRouter } from "@/hooks/use-app-router";
 // store types
 import type { IInboxIssueStore } from "@/store/inbox/inbox-issue.store";
 
@@ -60,7 +60,7 @@ export const InboxIssueActionsHeader: FC<TInboxIssueActionsHeader> = observer((p
     membership: { currentProjectRole },
   } = useUser();
 
-  const router = useRouter();
+  const router = useAppRouter();
   const { getProjectById } = useProject();
 
   const issue = inboxIssue?.issue;

web/core/components/inbox/content/inbox-issue-mobile-header.tsx

@@ -2,7 +2,6 @@
 
 import React from "react";
 import { observer } from "mobx-react";
-import { useRouter } from "next/navigation";
 import {
   CircleCheck,
   CircleX,
@@ -21,6 +20,8 @@ import { InboxIssueStatus } from "@/components/inbox";
 import { IssueUpdateStatus } from "@/components/issues";
 // helpers
 import { cn } from "@/helpers/common.helper";
+// hooks
+import { useAppRouter } from "@/hooks/use-app-router";
 // store types
 import type { IInboxIssueStore } from "@/store/inbox/inbox-issue.store";
 
@@ -64,7 +65,7 @@ export const InboxIssueActionsMobileHeader: React.FC<Props> = observer((props) =
     isMobileSidebar,
     setIsMobileSidebar,
   } = props;
-  const router = useRouter();
+  const router = useAppRouter();
   const issue = inboxIssue?.issue;
   const currentInboxIssueId = issue?.id;
 

web/core/components/inbox/content/issue-properties.tsx

@@ -2,7 +2,6 @@
 
 import React from "react";
 import { observer } from "mobx-react";
-import { useRouter } from "next/navigation";
 import { CalendarCheck2, CopyPlus, Signal, Tag, Users } from "lucide-react";
 import { TInboxDuplicateIssueDetails, TIssue } from "@plane/types";
 import { ControlLink, DoubleCircleIcon, Tooltip } from "@plane/ui";
@@ -13,6 +12,7 @@ import { IssueLabel, TIssueOperations } from "@/components/issues";
 import { getDate, renderFormattedPayloadDate } from "@/helpers/date-time.helper";
 // hooks
 import { useProject } from "@/hooks/store";
+import { useAppRouter } from "@/hooks/use-app-router";
 
 type Props = {
   workspaceSlug: string;
@@ -26,7 +26,7 @@ type Props = {
 export const InboxIssueContentProperties: React.FC<Props> = observer((props) => {
   const { workspaceSlug, projectId, issue, issueOperations, isEditable, duplicateIssueDetails } = props;
 
-  const router = useRouter();
+  const router = useAppRouter();
   // store hooks
   const { currentProjectDetails } = useProject();
 

web/core/components/inbox/content/root.tsx

@@ -1,10 +1,13 @@
 import { FC, useEffect, useState } from "react";
 import { observer } from "mobx-react";
-import { useRouter } from "next/navigation";
 import useSWR from "swr";
+// components
 import { InboxIssueActionsHeader, InboxIssueMainContent } from "@/components/inbox";
+// constants
 import { EUserProjectRoles } from "@/constants/project";
+// hooks
 import { useProjectInbox, useUser } from "@/hooks/store";
+import { useAppRouter } from "@/hooks/use-app-router";
 
 type TInboxContentRoot = {
   workspaceSlug: string;
@@ -17,7 +20,7 @@ type TInboxContentRoot = {
 export const InboxContentRoot: FC<TInboxContentRoot> = observer((props) => {
   const { workspaceSlug, projectId, inboxIssueId, isMobileSidebar, setIsMobileSidebar } = props;
   /// router
-  const router = useRouter();
+  const router = useAppRouter();
   // states
   const [isSubmitting, setIsSubmitting] = useState<"submitting" | "submitted" | "saved">("saved");
   // hooks

web/core/components/inbox/modals/create-edit-modal/create-root.tsx

@@ -2,7 +2,7 @@
 
 import { FC, FormEvent, useCallback, useRef, useState } from "react";
 import { observer } from "mobx-react";
-import { usePathname, useRouter } from "next/navigation";
+import { usePathname } from "next/navigation";
 // editor
 import { EditorRefApi } from "@plane/rich-text-editor";
 // types
@@ -20,6 +20,7 @@ import { ISSUE_CREATED } from "@/constants/event-tracker";
 import { renderFormattedPayloadDate } from "@/helpers/date-time.helper";
 // hooks
 import { useEventTracker, useProjectInbox, useWorkspace } from "@/hooks/store";
+import { useAppRouter } from "@/hooks/use-app-router";
 import useKeypress from "@/hooks/use-keypress";
 
 type TInboxIssueCreateRoot = {
@@ -42,7 +43,7 @@ export const defaultIssueData: Partial<TIssue> = {
 
 export const InboxIssueCreateRoot: FC<TInboxIssueCreateRoot> = observer((props) => {
   const { workspaceSlug, projectId, handleModalClose } = props;
-  const router = useRouter();
+  const router = useAppRouter();
   const pathname = usePathname();
   // refs
   const descriptionEditorRef = useRef<EditorRefApi>(null);

web/core/components/inbox/sidebar/root.tsx

@@ -2,7 +2,6 @@
 
 import { FC, useCallback, useRef, useState } from "react";
 import { observer } from "mobx-react";
-import { useRouter } from "next/navigation";
 import { TInboxIssueCurrentTab } from "@plane/types";
 import { Loader } from "@plane/ui";
 // components
@@ -16,6 +15,7 @@ import { cn } from "@/helpers/common.helper";
 import { EInboxIssueCurrentTab } from "@/helpers/inbox.helper";
 // hooks
 import { useProject, useProjectInbox } from "@/hooks/store";
+import { useAppRouter } from "@/hooks/use-app-router";
 import { useIntersectionObserver } from "@/hooks/use-intersection-observer";
 import { useIssuesStore } from "@/hooks/use-issue-layout-store";
 
@@ -56,7 +56,7 @@ export const InboxSidebar: FC<IInboxSidebarProps> = observer((props) => {
     issues: { getIssueLoader },
   } = useIssuesStore();
 
-  const router = useRouter();
+  const router = useAppRouter();
 
   const fetchNextPages = useCallback(() => {
     if (!workspaceSlug || !projectId) return;

web/core/components/integration/github/root.tsx

@@ -1,20 +1,17 @@
 "use client";
 
 import React, { useState } from "react";
-
 import Image from "next/image";
 import Link from "next/link";
-import { useParams, useRouter, useSearchParams } from "next/navigation";
+import { useParams, useSearchParams } from "next/navigation";
-
 import { useForm } from "react-hook-form";
 import useSWR, { mutate } from "swr";
-
-// react-hook-form
-// services
-// components
 import { ArrowLeft, Check, List, Settings, UploadCloud, Users } from "lucide-react";
+// types
 import { IGithubRepoCollaborator, IGithubServiceImportFormData } from "@plane/types";
+// ui
 import { TOAST_TYPE, setToast } from "@plane/ui";
+// components
 import {
   GithubImportConfigure,
   GithubImportData,
@@ -22,17 +19,14 @@ import {
   GithubImportUsers,
   GithubImportConfirm,
 } from "@/components/integration";
-// icons
+// fetch keys
-// images
 import { APP_INTEGRATIONS, IMPORTER_SERVICES_LIST, WORKSPACE_INTEGRATIONS } from "@/constants/fetch-keys";
-import GithubLogo from "@/public/services/github.png";
-import { IntegrationService, GithubIntegrationService } from "@/services/integrations";
 // hooks
-// components
+import { useAppRouter } from "@/hooks/use-app-router";
-// icons
 // images
-// types
+import GithubLogo from "@/public/services/github.png";
-// fetch-keys
+// services
+import { IntegrationService, GithubIntegrationService } from "@/services/integrations";
 
 export type TIntegrationSteps = "import-configure" | "import-data" | "repo-details" | "import-users" | "import-confirm";
 export interface IIntegrationData {
@@ -93,7 +87,7 @@ export const GithubImporterRoot: React.FC = () => {
   });
   const [users, setUsers] = useState<IUserDetails[]>([]);
 
-  const router = useRouter();
+  const router = useAppRouter();
   const { workspaceSlug } = useParams();
   const searchParams = useSearchParams();
   const provider = searchParams.get("provider");

web/core/components/integration/jira/root.tsx

@@ -3,21 +3,24 @@
 import React, { useState } from "react";
 import Image from "next/image";
 import Link from "next/link";
-import { useParams, useRouter } from "next/navigation";
+import { useParams } from "next/navigation";
 import { FormProvider, useForm } from "react-hook-form";
 import { mutate } from "swr";
 // icons
 import { ArrowLeft, Check, List, Settings, Users } from "lucide-react";
+// types
 import { IJiraImporterForm } from "@plane/types";
-// services
+// ui
-// fetch keys
-// components
 import { Button } from "@plane/ui";
+// fetch keys
 import { IMPORTER_SERVICES_LIST } from "@/constants/fetch-keys";
+// hooks
+import { useAppRouter } from "@/hooks/use-app-router";
 // assets
 import JiraLogo from "@/public/services/jira.svg";
+// services
 import { JiraImporterService } from "@/services/integrations";
-// types
+// components
 import {
   JiraGetImportDetail,
   JiraProjectDetail,
@@ -64,7 +67,7 @@ export const JiraImporterRoot: React.FC = () => {
   });
   const [disableTopBarAfter, setDisableTopBarAfter] = useState<TJiraIntegrationSteps | null>(null);
 
-  const router = useRouter();
+  const router = useAppRouter();
   const { workspaceSlug } = useParams();
 
   const methods = useForm<IJiraImporterForm>({

web/core/components/issues/issue-detail/issue-detail-quick-actions.tsx

@@ -2,7 +2,7 @@
 
 import React, { FC, useState } from "react";
 import { observer } from "mobx-react";
-import { usePathname, useRouter } from "next/navigation";
+import { usePathname } from "next/navigation";
 import { ArchiveIcon, ArchiveRestoreIcon, LinkIcon, Trash2 } from "lucide-react";
 import { TOAST_TYPE, Tooltip, setToast } from "@plane/ui";
 // components
@@ -17,6 +17,7 @@ import { cn } from "@/helpers/common.helper";
 import { copyTextToClipboard } from "@/helpers/string.helper";
 // hooks
 import { useEventTracker, useIssueDetail, useIssues, useProjectState, useUser } from "@/hooks/store";
+import { useAppRouter } from "@/hooks/use-app-router";
 import { usePlatformOS } from "@/hooks/use-platform-os";
 
 type Props = {
@@ -34,7 +35,7 @@ export const IssueDetailQuickActions: FC<Props> = observer((props) => {
   const [isRestoring, setIsRestoring] = useState(false);
 
   // router
-  const router = useRouter();
+  const router = useAppRouter();
 
   // hooks
   const {

web/core/components/issues/issue-detail/root.tsx

@@ -2,7 +2,7 @@
 
 import { FC, useMemo } from "react";
 import { observer } from "mobx-react";
-import { usePathname, useRouter } from "next/navigation";
+import { usePathname } from "next/navigation";
 // types
 import { TIssue } from "@plane/types";
 // ui
@@ -16,6 +16,7 @@ import { EIssuesStoreType } from "@/constants/issue";
 import { EUserProjectRoles } from "@/constants/project";
 // hooks
 import { useAppTheme, useEventTracker, useIssueDetail, useIssues, useUser } from "@/hooks/store";
+import { useAppRouter } from "@/hooks/use-app-router";
 // images
 import emptyIssue from "@/public/empty-state/issue.svg";
 // local components
@@ -57,7 +58,7 @@ export type TIssueDetailRoot = {
 export const IssueDetailRoot: FC<TIssueDetailRoot> = observer((props) => {
   const { workspaceSlug, projectId, issueId, swrIssueDetails, is_archived = false } = props;
   // router
-  const router = useRouter();
+  const router = useAppRouter();
   const pathname = usePathname();
   // hooks
   const {

web/core/components/issues/issue-layouts/calendar/issue-block.tsx

@@ -3,13 +3,14 @@
 /* eslint-disable react/display-name */
 import { useState, useRef, forwardRef } from "react";
 import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
 import { MoreHorizontal } from "lucide-react";
 import { TIssue } from "@plane/types";
 // components
 import { Tooltip, ControlLink } from "@plane/ui";
 // hooks
 import { cn } from "@/helpers/common.helper";
-import { useAppRouter, useIssueDetail, useProject, useProjectState } from "@/hooks/store";
+import { useIssueDetail, useProject, useProjectState } from "@/hooks/store";
 import useOutsideClickDetector from "@/hooks/use-outside-click-detector";
 // helpers
 // types
@@ -31,7 +32,7 @@ export const CalendarIssueBlock = observer(
     const blockRef = useRef(null);
     const menuActionRef = useRef<HTMLDivElement | null>(null);
     // hooks
-    const { workspaceSlug, projectId } = useAppRouter();
+    const { workspaceSlug, projectId } = useParams();
     const { getProjectIdentifierById } = useProject();
     const { getProjectStates } = useProjectState();
     const { getIsIssuePeeked, setPeekIssue } = useIssueDetail();
@@ -45,7 +46,7 @@ export const CalendarIssueBlock = observer(
       issue.project_id &&
       issue.id &&
       !getIsIssuePeeked(issue.id) &&
-      setPeekIssue({ workspaceSlug, projectId: issue.project_id, issueId: issue.id });
+      setPeekIssue({ workspaceSlug: workspaceSlug.toString(), projectId: issue.project_id, issueId: issue.id });
 
     useOutsideClickDetector(menuActionRef, () => setIsMenuActive(false));
 
@@ -69,7 +70,7 @@ export const CalendarIssueBlock = observer(
     return (
       <ControlLink
         id={`issue-${issue.id}`}
-        href={`/${workspaceSlug}/projects/${projectId}/issues/${issue.id}`}
+        href={`/${workspaceSlug.toString()}/projects/${projectId.toString()}/issues/${issue.id}`}
         target="_blank"
         onClick={() => handleIssuePeekOverview(issue)}
         className="block w-full text-sm text-custom-text-100 rounded border-b md:border-[1px] border-custom-border-200 hover:border-custom-border-400"

web/core/components/issues/issue-layouts/empty-states/profile-view.tsx

@@ -1,20 +1,19 @@
 import { observer } from "mobx-react-lite";
+import { useParams } from "next/navigation";
 // components
 import { EmptyState } from "@/components/empty-state";
 // constants
 import { EMPTY_STATE_DETAILS } from "@/constants/empty-state";
-// hooks
-import { useAppRouter } from "@/hooks/store";
 
 // assets
 
 export const ProfileViewEmptyState: React.FC = observer(() => {
   // store hooks
-  const { profileViewId } = useAppRouter();
+  const { profileViewId } = useParams();
 
   if (!profileViewId) return null;
 
-  const emptyStateType = `profile-${profileViewId}`;
+  const emptyStateType = `profile-${profileViewId.toString()}`;
 
   return <EmptyState type={emptyStateType as keyof typeof EMPTY_STATE_DETAILS} size="sm" />;
 });

web/core/components/issues/issue-layouts/filters/header/filters/cycle.tsx

@@ -3,11 +3,12 @@
 import React, { useMemo, useState } from "react";
 import sortBy from "lodash/sortBy";
 import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
 import { TCycleGroups } from "@plane/types";
 // components
 import { Loader, CycleGroupIcon } from "@plane/ui";
 import { FilterHeader, FilterOption } from "@/components/issues";
-import { useAppRouter, useCycle } from "@/hooks/store";
+import { useCycle } from "@/hooks/store";
 // ui
 // types
 
@@ -21,14 +22,14 @@ export const FilterCycle: React.FC<Props> = observer((props) => {
   const { appliedFilters, handleUpdate, searchQuery } = props;
 
   // hooks
-  const { projectId } = useAppRouter();
+  const { projectId } = useParams();
   const { getCycleById, getProjectCycleIds } = useCycle();
 
   // states
   const [itemsToRender, setItemsToRender] = useState(5);
   const [previewEnabled, setPreviewEnabled] = useState(true);
 
-  const cycleIds = projectId ? getProjectCycleIds(projectId) : undefined;
+  const cycleIds = projectId ? getProjectCycleIds(projectId.toString()) : undefined;
   const cycles = cycleIds?.map((projectId) => getCycleById(projectId)!) ?? null;
   const appliedFiltersCount = appliedFilters?.length ?? 0;
 

web/core/components/issues/issue-layouts/filters/header/filters/filters-selection.tsx

@@ -1,5 +1,6 @@
 import { useState } from "react";
 import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
 import { Search, X } from "lucide-react";
 import { IIssueDisplayFilterOptions, IIssueFilterOptions, IIssueLabel, IState } from "@plane/types";
 // hooks
@@ -19,7 +20,6 @@ import {
   FilterIssueType,
 } from "@/components/issues";
 import { ILayoutDisplayFiltersOptions } from "@/constants/issue";
-import { useAppRouter } from "@/hooks/store";
 // components
 // types
 // constants
@@ -51,7 +51,7 @@ export const FilterSelection: React.FC<Props> = observer((props) => {
     moduleViewDisabled = false,
   } = props;
   // hooks
-  const { moduleId, cycleId } = useAppRouter();
+  const { moduleId, cycleId } = useParams();
   // states
   const [filtersSearchQuery, setFiltersSearchQuery] = useState("");
 

web/core/components/issues/issue-layouts/filters/header/filters/module.tsx

@@ -3,10 +3,11 @@
 import React, { useMemo, useState } from "react";
 import sortBy from "lodash/sortBy";
 import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
 // components
 import { Loader, DiceIcon } from "@plane/ui";
 import { FilterHeader, FilterOption } from "@/components/issues";
-import { useAppRouter, useModule } from "@/hooks/store";
+import { useModule } from "@/hooks/store";
 // ui
 
 type Props = {
@@ -18,14 +19,14 @@ type Props = {
 export const FilterModule: React.FC<Props> = observer((props) => {
   const { appliedFilters, handleUpdate, searchQuery } = props;
   // hooks
-  const { projectId } = useAppRouter();
+  const { projectId } = useParams();
   const { getModuleById, getProjectModuleIds } = useModule();
   // states
   const [itemsToRender, setItemsToRender] = useState(5);
   const [previewEnabled, setPreviewEnabled] = useState(true);
 
-  const moduleIds = projectId ? getProjectModuleIds(projectId) : undefined;
+  const moduleIds = projectId ? getProjectModuleIds(projectId.toString()) : undefined;
-  const modules = moduleIds?.map((projectId) => getModuleById(projectId)!) ?? null;
+  const modules = moduleIds?.map((moduleId) => getModuleById(moduleId)!) ?? null;
   const appliedFiltersCount = appliedFilters?.length ?? 0;
 
   const sortedOptions = useMemo(() => {

web/core/components/issues/issue-layouts/gantt/blocks.tsx

@@ -1,12 +1,13 @@
 "use client";
 
 import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
 // hooks
 // ui
 import { Tooltip, StateGroupIcon, ControlLink } from "@plane/ui";
 // helpers
 import { renderFormattedDate } from "@/helpers/date-time.helper";
-import { useAppRouter, useIssueDetail, useProject, useProjectState } from "@/hooks/store";
+import { useIssueDetail, useProject, useProjectState } from "@/hooks/store";
 import { usePlatformOS } from "@/hooks/use-platform-os";
 
 type Props = {
@@ -15,8 +16,10 @@ type Props = {
 
 export const IssueGanttBlock: React.FC<Props> = observer((props) => {
   const { issueId } = props;
+  // router
+  const { workspaceSlug: routerWorkspaceSlug } = useParams();
+  const workspaceSlug = routerWorkspaceSlug?.toString();
   // store hooks
-  const { workspaceSlug } = useAppRouter();
   const { getProjectStates } = useProjectState();
   const {
     issue: { getIssueById },
@@ -71,10 +74,12 @@ export const IssueGanttBlock: React.FC<Props> = observer((props) => {
 // rendering issues on gantt sidebar
 export const IssueGanttSidebarBlock: React.FC<Props> = observer((props) => {
   const { issueId } = props;
+  // router
+  const { workspaceSlug: routerWorkspaceSlug } = useParams();
+  const workspaceSlug = routerWorkspaceSlug?.toString();
   // store hooks
   const { getStateById } = useProjectState();
   const { getProjectIdentifierById } = useProject();
-  const { workspaceSlug } = useAppRouter();
   const {
     issue: { getIssueById },
     setPeekIssue,

web/core/components/issues/issue-layouts/kanban/block.tsx

@@ -4,6 +4,7 @@ import { MutableRefObject, useEffect, useRef, useState } from "react";
 import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
 import { draggable, dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
 import { observer } from "mobx-react-lite";
+import { useParams } from "next/navigation";
 import { TIssue, IIssueDisplayProperties, IIssueMap } from "@plane/types";
 // hooks
 import { ControlLink, DropIndicator, TOAST_TYPE, Tooltip, setToast } from "@plane/ui";
@@ -11,7 +12,7 @@ import RenderIfVisible from "@/components/core/render-if-visible-HOC";
 import { HIGHLIGHT_CLASS } from "@/components/issues/issue-layouts/utils";
 import { cn } from "@/helpers/common.helper";
 // hooks
-import { useAppRouter, useIssueDetail, useProject, useKanbanView } from "@/hooks/store";
+import { useIssueDetail, useProject, useKanbanView } from "@/hooks/store";
 import useOutsideClickDetector from "@/hooks/use-outside-click-detector";
 import { usePlatformOS } from "@/hooks/use-platform-os";
 // components
@@ -117,8 +118,10 @@ export const KanbanIssueBlock: React.FC<IssueBlockProps> = observer((props) => {
   } = props;
 
   const cardRef = useRef<HTMLAnchorElement | null>(null);
+  // router
+  const { workspaceSlug: routerWorkspaceSlug } = useParams();
+  const workspaceSlug = routerWorkspaceSlug?.toString();
   // hooks
-  const { workspaceSlug } = useAppRouter();
   const { getIsIssuePeeked, setPeekIssue } = useIssueDetail();
   const { isMobile } = usePlatformOS();
 

web/core/components/issues/issue-layouts/kanban/roots/profile-issues-root.tsx

@@ -1,18 +1,20 @@
 import { observer } from "mobx-react";
 // hooks
+import { useParams } from "next/navigation";
 import { ProjectIssueQuickActions } from "@/components/issues";
 import { EUserProjectRoles } from "@/constants/project";
-import { useAppRouter, useUser } from "@/hooks/store";
+import { useUser } from "@/hooks/store";
 // components
 // types
 // constants
 import { BaseKanBanRoot } from "../base-kanban-root";
 
 export const ProfileIssuesKanBanLayout: React.FC = observer(() => {
+  // router
+  const { profileViewId } = useParams();
   const {
     membership: { currentWorkspaceAllProjectsRole },
   } = useUser();
-  const { profileViewId } = useAppRouter();
 
   const canEditPropertiesBasedOnProject = (projectId: string) => {
     const currentProjectRole = currentWorkspaceAllProjectsRole && currentWorkspaceAllProjectsRole[projectId];
@@ -24,7 +26,7 @@ export const ProfileIssuesKanBanLayout: React.FC = observer(() => {
     <BaseKanBanRoot
       QuickActions={ProjectIssueQuickActions}
       canEditPropertiesBasedOnProject={canEditPropertiesBasedOnProject}
-      viewId={profileViewId}
+      viewId={profileViewId.toString()}
     />
   );
 });

web/core/components/issues/issue-layouts/list/block.tsx

@@ -4,6 +4,7 @@ import { Dispatch, MouseEvent, SetStateAction, useEffect, useRef } from "react";
 import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
 import { draggable } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
 import { observer } from "mobx-react-lite";
+import { useParams } from "next/navigation";
 import { ChevronRight } from "lucide-react";
 // types
 import { TIssue, IIssueDisplayProperties, TIssueMap } from "@plane/types";
@@ -15,7 +16,7 @@ import { IssueProperties } from "@/components/issues/issue-layouts/properties";
 // helpers
 import { cn } from "@/helpers/common.helper";
 // hooks
-import { useAppRouter, useIssueDetail, useProject } from "@/hooks/store";
+import { useIssueDetail, useProject } from "@/hooks/store";
 import { TSelectionHelper } from "@/hooks/use-multiple-select";
 import { usePlatformOS } from "@/hooks/use-platform-os";
 // types
@@ -59,8 +60,11 @@ export const IssueBlock = observer((props: IssueBlockProps) => {
   } = props;
   // ref
   const issueRef = useRef<HTMLDivElement | null>(null);
+  // router
+  const { workspaceSlug: routerWorkspaceSlug, projectId: routerProjectId } = useParams();
+  const workspaceSlug = routerWorkspaceSlug?.toString();
+  const projectId = routerProjectId?.toString();
   // hooks
-  const { workspaceSlug, projectId } = useAppRouter();
   const { getProjectIdentifierById } = useProject();
   const { getIsIssuePeeked, peekIssue, setPeekIssue, subIssues: subIssuesStore } = useIssueDetail();
 

web/core/components/issues/issue-layouts/list/roots/profile-issues-root.tsx

@@ -1,21 +1,23 @@
 import { FC } from "react";
 import { observer } from "mobx-react";
 // hooks
+import { useParams } from "next/navigation";
 import { ProjectIssueQuickActions } from "@/components/issues";
 import { EUserProjectRoles } from "@/constants/project";
-import { useAppRouter, useUser } from "@/hooks/store";
+import { useUser } from "@/hooks/store";
 // components
 // types
 // constants
 import { BaseListRoot } from "../base-list-root";
 
 export const ProfileIssuesListLayout: FC = observer(() => {
+  // router
+  const { profileViewId } = useParams();
+  // store
   const {
     membership: { currentWorkspaceAllProjectsRole },
   } = useUser();
 
-  const { profileViewId } = useAppRouter();
-
   const canEditPropertiesBasedOnProject = (projectId: string) => {
     const currentProjectRole = currentWorkspaceAllProjectsRole && currentWorkspaceAllProjectsRole[projectId];
 
@@ -26,7 +28,7 @@ export const ProfileIssuesListLayout: FC = observer(() => {
     <BaseListRoot
       QuickActions={ProjectIssueQuickActions}
       canEditPropertiesBasedOnProject={canEditPropertiesBasedOnProject}
-      viewId={profileViewId}
+      viewId={profileViewId.toString()}
     />
   );
 });

web/core/components/issues/issue-layouts/properties/all-properties.tsx

@@ -3,7 +3,7 @@
 import { useCallback, useMemo } from "react";
 import xor from "lodash/xor";
 import { observer } from "mobx-react";
-import { useParams, usePathname, useRouter } from "next/navigation";
+import { useParams, usePathname } from "next/navigation";
 // icons
 import { CalendarCheck2, CalendarClock, Layers, Link, Paperclip } from "lucide-react";
 // types
@@ -28,6 +28,7 @@ import { getDate, renderFormattedPayloadDate } from "@/helpers/date-time.helper"
 import { shouldHighlightIssueDueDate } from "@/helpers/issue.helper";
 // hooks
 import { useEventTracker, useLabel, useIssues, useProjectState, useProject, useProjectEstimates } from "@/hooks/store";
+import { useAppRouter } from "@/hooks/use-app-router";
 import { useIssueStoreType } from "@/hooks/use-issue-layout-store";
 import { usePlatformOS } from "@/hooks/use-platform-os";
 // local components
@@ -64,7 +65,7 @@ export const IssueProperties: React.FC<IIssueProperties> = observer((props) => {
   const projectDetails = getProjectById(issue.project_id);
 
   // router
-  const router = useRouter();
+  const router = useAppRouter();
   const { workspaceSlug, projectId } = useParams();
   const pathname = usePathname();
 

web/core/components/issues/issue-layouts/properties/labels.tsx

@@ -3,6 +3,7 @@
 import { Fragment, useEffect, useRef, useState } from "react";
 import { Placement } from "@popperjs/core";
 import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
 import { usePopper } from "react-popper";
 import { Check, ChevronDown, Search, Tags } from "lucide-react";
 import { Combobox } from "@headlessui/react";
@@ -11,7 +12,7 @@ import { IIssueLabel } from "@plane/types";
 // ui
 import { Tooltip } from "@plane/ui";
 // hooks
-import { useAppRouter, useLabel } from "@/hooks/store";
+import { useLabel } from "@/hooks/store";
 import { useDropdownKeyDown } from "@/hooks/use-dropdown-key-down";
 import useOutsideClickDetector from "@/hooks/use-outside-click-detector";
 import { usePlatformOS } from "@/hooks/use-platform-os";
@@ -50,6 +51,9 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
     noLabelBorder = false,
     placeholderText,
   } = props;
+  // router
+  const { workspaceSlug: routerWorkspaceSlug } = useParams();
+  const workspaceSlug = routerWorkspaceSlug?.toString();
   // states
   const [query, setQuery] = useState("");
   const [isOpen, setIsOpen] = useState(false);
@@ -61,7 +65,6 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
   const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
   const [isLoading, setIsLoading] = useState<boolean>(false);
   // store hooks
-  const { workspaceSlug } = useAppRouter();
   const { fetchProjectLabels, getProjectLabels } = useLabel();
   const { isMobile } = usePlatformOS();
   const storeLabels = getProjectLabels(projectId);

web/core/components/issues/issue-layouts/spreadsheet/columns/sub-issue-column.tsx

@@ -1,12 +1,12 @@
 import React from "react";
 import { observer } from "mobx-react";
-import { useRouter } from "next/navigation";
+import { useParams } from "next/navigation";
 // types
 import { TIssue } from "@plane/types";
 // helpers
 import { cn } from "@/helpers/common.helper";
 // hooks
-import { useAppRouter } from "@/hooks/store";
+import { useAppRouter } from "@/hooks/use-app-router";
 
 type Props = {
   issue: TIssue;
@@ -15,14 +15,14 @@ type Props = {
 export const SpreadsheetSubIssueColumn: React.FC<Props> = observer((props: Props) => {
   const { issue } = props;
   // router
-  const router = useRouter();
+  const router = useAppRouter();
   // hooks
-  const { workspaceSlug } = useAppRouter();
+  const { workspaceSlug } = useParams();
   // derived values
   const subIssueCount = issue?.sub_issues_count ?? 0;
 
   const redirectToIssueDetail = () => {
-    router.push(`/${workspaceSlug}/projects/${issue.project_id}/${issue.archived_at ? "archives/" : ""}issues/${issue.id}#sub-issues`);
+    router.push(`/${workspaceSlug.toString()}/projects/${issue.project_id}/${issue.archived_at ? "archives/" : ""}issues/${issue.id}#sub-issues`);
   };
 
   return (

web/core/components/issues/issue-modal/form.tsx

@@ -30,14 +30,7 @@ import { renderFormattedPayloadDate, getDate } from "@/helpers/date-time.helper"
 import { getChangedIssuefields, getDescriptionPlaceholder } from "@/helpers/issue.helper";
 import { shouldRenderProject } from "@/helpers/project.helper";
 // hooks
-import {
+import { useProjectEstimates, useInstance, useIssueDetail, useProject, useWorkspace } from "@/hooks/store";
-  useAppRouter,
-  useProjectEstimates,
-  useInstance,
-  useIssueDetail,
-  useProject,
-  useWorkspace,
-} from "@/hooks/store";
 import useKeypress from "@/hooks/use-keypress";
 import { useProjectIssueProperties } from "@/hooks/use-project-issue-properties";
 // services
@@ -121,11 +114,10 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
   const editorRef = useRef<EditorRefApi>(null);
   const submitBtnRef = useRef<HTMLButtonElement | null>(null);
   // router
-  const { workspaceSlug } = useParams();
+  const { workspaceSlug, projectId: routeProjectId } = useParams();
   // store hooks
   const workspaceStore = useWorkspace();
   const workspaceId = workspaceStore.getWorkspaceBySlug(workspaceSlug as string)?.id as string;
-  const { projectId: routeProjectId } = useAppRouter();
   const { config } = useInstance();
   const { getProjectById } = useProject();
   const { areEstimateEnabledByProjectId } = useProjectEstimates();

web/core/components/issues/issue-modal/modal.tsx

@@ -2,7 +2,7 @@
 
 import React, { useEffect, useRef, useState } from "react";
 import { observer } from "mobx-react-lite";
-import { usePathname } from "next/navigation";
+import { useParams, usePathname } from "next/navigation";
 // types
 import type { TIssue } from "@plane/types";
 // ui
@@ -11,15 +11,7 @@ import { EModalPosition, EModalWidth, ModalCore, TOAST_TYPE, setToast } from "@p
 import { ISSUE_CREATED, ISSUE_UPDATED } from "@/constants/event-tracker";
 import { EIssuesStoreType } from "@/constants/issue";
 // hooks
-import {
+import { useEventTracker, useCycle, useIssues, useModule, useProject, useIssueDetail } from "@/hooks/store";
-  useEventTracker,
-  useCycle,
-  useIssues,
-  useModule,
-  useProject,
-  useIssueDetail,
-  useAppRouter,
-} from "@/hooks/store";
 import { useIssuesActions } from "@/hooks/use-issues-actions";
 import useLocalStorage from "@/hooks/use-local-storage";
 // components
@@ -55,7 +47,7 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = observer((prop
   const [description, setDescription] = useState<string | undefined>(undefined);
   // store hooks
   const { captureIssueEvent } = useEventTracker();
-  const { workspaceSlug, projectId, cycleId, moduleId } = useAppRouter();
+  const { workspaceSlug, projectId, cycleId, moduleId } = useParams();
   const { workspaceProjectIds } = useProject();
   const { fetchCycleDetails } = useCycle();
   const { fetchModuleDetails } = useModule();
@@ -79,7 +71,7 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = observer((prop
       setDescription(data?.description_html || "<p></p>");
       return;
     }
-    const response = await fetchIssue(workspaceSlug, projectId, issueId, isDraft ? "DRAFT" : "DEFAULT");
+    const response = await fetchIssue(workspaceSlug.toString(), projectId.toString(), issueId, isDraft ? "DRAFT" : "DEFAULT");
     if (response) setDescription(response?.description_html || "<p></p>");
   };
 
@@ -104,7 +96,7 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = observer((prop
     // if data is not present, set active project to the project
     // in the url. This has the least priority.
     if (workspaceProjectIds && workspaceProjectIds.length > 0 && !activeProjectId)
-      setActiveProjectId(projectId ?? workspaceProjectIds?.[0]);
+      setActiveProjectId(projectId.toString() ?? workspaceProjectIds?.[0]);
 
     // clearing up the description state when we leave the component
     return () => setDescription(undefined);
@@ -113,15 +105,15 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = observer((prop
   const addIssueToCycle = async (issue: TIssue, cycleId: string) => {
     if (!workspaceSlug || !issue.project_id) return;
 
-    await issues.addIssueToCycle(workspaceSlug, issue.project_id, cycleId, [issue.id]);
+    await issues.addIssueToCycle(workspaceSlug.toString(), issue.project_id, cycleId, [issue.id]);
-    fetchCycleDetails(workspaceSlug, issue.project_id, cycleId);
+    fetchCycleDetails(workspaceSlug.toString(), issue.project_id, cycleId);
   };
 
   const addIssueToModule = async (issue: TIssue, moduleIds: string[]) => {
     if (!workspaceSlug || !activeProjectId) return;
 
-    await issues.changeModulesInIssue(workspaceSlug, activeProjectId, issue.id, moduleIds, []);
+    await issues.changeModulesInIssue(workspaceSlug.toString(), activeProjectId, issue.id, moduleIds, []);
-    moduleIds.forEach((moduleId) => fetchModuleDetails(workspaceSlug, activeProjectId, moduleId));
+    moduleIds.forEach((moduleId) => fetchModuleDetails(workspaceSlug.toString(), activeProjectId, moduleId));
   };
 
   const handleCreateMoreToggleChange = (value: boolean) => {
@@ -133,7 +125,7 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = observer((prop
       // updating the current edited issue data in the local storage
       let draftIssues = localStorageDraftIssues ? localStorageDraftIssues : {};
       if (workspaceSlug) {
-        draftIssues = { ...draftIssues, [workspaceSlug]: changesMade };
+        draftIssues = { ...draftIssues, [workspaceSlug.toString()]: changesMade };
         setLocalStorageDraftIssue(draftIssues);
       }
     }
@@ -151,7 +143,7 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = observer((prop
 
     try {
       const response = is_draft_issue
-        ? await draftIssues.createIssue(workspaceSlug, payload.project_id, payload)
+        ? await draftIssues.createIssue(workspaceSlug.toString(), payload.project_id, payload)
         : createIssue && (await createIssue(payload.project_id, payload));
       if (!response) throw new Error();
 
@@ -193,7 +185,7 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = observer((prop
 
     try {
       isDraft
-        ? await draftIssues.updateIssue(workspaceSlug, payload.project_id, data.id, payload)
+        ? await draftIssues.updateIssue(workspaceSlug.toString(), payload.project_id, data.id, payload)
         : updateIssue && (await updateIssue(payload.project_id, data.id, payload));
 
       setToast({
@@ -249,8 +241,8 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = observer((prop
           data={{
             ...data,
             description_html: description,
-            cycle_id: data?.cycle_id ? data?.cycle_id : cycleId ? cycleId : null,
+            cycle_id: data?.cycle_id ? data?.cycle_id : cycleId ? cycleId.toString() : null,
-            module_ids: data?.module_ids ? data?.module_ids : moduleId ? [moduleId] : null,
+            module_ids: data?.module_ids ? data?.module_ids : moduleId ? [moduleId.toString()] : null,
           }}
           issueTitleRef={issueTitleRef}
           onChange={handleFormChange}
@@ -267,8 +259,8 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = observer((prop
           data={{
             ...data,
             description_html: description,
-            cycle_id: data?.cycle_id ? data?.cycle_id : cycleId ? cycleId : null,
+            cycle_id: data?.cycle_id ? data?.cycle_id : cycleId ? cycleId.toString() : null,
-            module_ids: data?.module_ids ? data?.module_ids : moduleId ? [moduleId] : null,
+            module_ids: data?.module_ids ? data?.module_ids : moduleId ? [moduleId.toString()] : null,
           }}
           onClose={() => handleClose(false)}
           isCreateMoreToggleEnabled={createMore}

web/core/components/modules/analytics-sidebar/root.tsx

@@ -2,7 +2,7 @@
 
 import React, { useEffect, useState } from "react";
 import { observer } from "mobx-react-lite";
-import { useParams, useRouter } from "next/navigation";
+import { useParams } from "next/navigation";
 import { Controller, useForm } from "react-hook-form";
 import {
   ArchiveRestoreIcon,
@@ -47,6 +47,7 @@ import { getDate, renderFormattedPayloadDate } from "@/helpers/date-time.helper"
 import { copyUrlToClipboard } from "@/helpers/string.helper";
 // hooks
 import { useModule, useUser, useEventTracker, useProjectEstimates } from "@/hooks/store";
+import { useAppRouter } from "@/hooks/use-app-router";
 // plane web constants
 import { EEstimateSystem } from "@/plane-web/constants/estimates";
 
@@ -73,7 +74,7 @@ export const ModuleAnalyticsSidebar: React.FC<Props> = observer((props) => {
   const [moduleLinkModal, setModuleLinkModal] = useState(false);
   const [selectedLinkToUpdate, setSelectedLinkToUpdate] = useState<ILinkDetails | null>(null);
   // router
-  const router = useRouter();
+  const router = useAppRouter();
   const { workspaceSlug, projectId } = useParams();
 
   // store hooks

web/core/components/modules/archived-modules/modal.tsx

@@ -1,12 +1,12 @@
 "use client";
 
 import { useState, Fragment } from "react";
-import { useRouter } from "next/navigation";
 import { Dialog, Transition } from "@headlessui/react";
 // ui
 import { Button, TOAST_TYPE, setToast } from "@plane/ui";
 // hooks
 import { useModule } from "@/hooks/store";
+import { useAppRouter } from "@/hooks/use-app-router";
 
 type Props = {
   workspaceSlug: string;
@@ -20,7 +20,7 @@ type Props = {
 export const ArchiveModuleModal: React.FC<Props> = (props) => {
   const { workspaceSlug, projectId, moduleId, isOpen, handleClose } = props;
   // router
-  const router = useRouter();
+  const router = useAppRouter();
   // states
   const [isArchiving, setIsArchiving] = useState(false);
   // store hooks

web/core/components/modules/delete-module-modal.tsx

@@ -2,7 +2,7 @@
 
 import React, { useState } from "react";
 import { observer } from "mobx-react";
-import { useParams, useRouter } from "next/navigation";
+import { useParams } from "next/navigation";
 // types
 import type { IModule } from "@plane/types";
 // ui
@@ -11,6 +11,7 @@ import { AlertModalCore, TOAST_TYPE, setToast } from "@plane/ui";
 import { MODULE_DELETED } from "@/constants/event-tracker";
 // hooks
 import { useEventTracker, useModule } from "@/hooks/store";
+import { useAppRouter } from "@/hooks/use-app-router";
 
 type Props = {
   data: IModule;
@@ -23,7 +24,7 @@ export const DeleteModuleModal: React.FC<Props> = observer((props) => {
   // states
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
   // router
-  const router = useRouter();
+  const router = useAppRouter();
   const { workspaceSlug, projectId, moduleId, peekModule } = useParams();
   // store hooks
   const { captureModuleEvent } = useEventTracker();

web/core/components/modules/gantt-chart/blocks.tsx

@@ -2,7 +2,7 @@
 
 import { observer } from "mobx-react";
 import Link from "next/link";
-import { useRouter } from "next/navigation";
+import { useParams } from "next/navigation";
 // hooks
 // ui
 import { Tooltip, ModuleStatusIcon } from "@plane/ui";
@@ -10,7 +10,8 @@ import { Tooltip, ModuleStatusIcon } from "@plane/ui";
 import { MODULE_STATUS } from "@/constants/module";
 import { renderFormattedDate } from "@/helpers/date-time.helper";
 // constants
-import { useAppRouter, useModule } from "@/hooks/store";
+import { useModule } from "@/hooks/store";
+import { useAppRouter } from "@/hooks/use-app-router";
 import { usePlatformOS } from "@/hooks/use-platform-os";
 
 type Props = {
@@ -20,9 +21,9 @@ type Props = {
 export const ModuleGanttBlock: React.FC<Props> = observer((props) => {
   const { moduleId } = props;
   // router
-  const router = useRouter();
+  const router = useAppRouter();
+  const { workspaceSlug } = useParams();
   // store hooks
-  const { workspaceSlug } = useAppRouter();
   const { getModuleById } = useModule();
   // derived values
   const moduleDetails = getModuleById(moduleId);
@@ -34,7 +35,7 @@ export const ModuleGanttBlock: React.FC<Props> = observer((props) => {
       className="relative flex h-full w-full items-center rounded"
       style={{ backgroundColor: MODULE_STATUS.find((s) => s.value === moduleDetails?.status)?.color }}
       onClick={() =>
-        router.push(`/${workspaceSlug}/projects/${moduleDetails?.project_id}/modules/${moduleDetails?.id}`)
+        router.push(`/${workspaceSlug?.toString()}/projects/${moduleDetails?.project_id}/modules/${moduleDetails?.id}`)
       }
     >
       <div className="absolute left-0 top-0 h-full w-full bg-custom-background-100/50" />
@@ -59,8 +60,8 @@ export const ModuleGanttBlock: React.FC<Props> = observer((props) => {
 
 export const ModuleGanttSidebarBlock: React.FC<Props> = observer((props) => {
   const { moduleId } = props;
+  const { workspaceSlug } = useParams();
   // store hooks
-  const { workspaceSlug } = useAppRouter();
   const { getModuleById } = useModule();
   // derived values
   const moduleDetails = getModuleById(moduleId);
@@ -68,7 +69,7 @@ export const ModuleGanttSidebarBlock: React.FC<Props> = observer((props) => {
   return (
     <Link
       className="relative flex h-full w-full items-center gap-2"
-      href={`/${workspaceSlug}/projects/${moduleDetails?.project_id}/modules/${moduleDetails?.id}`}
+      href={`/${workspaceSlug?.toString()}/projects/${moduleDetails?.project_id}/modules/${moduleDetails?.id}`}
       draggable={false}
     >
       <ModuleStatusIcon status={moduleDetails?.status ?? "backlog"} height="16px" width="16px" />

web/core/components/modules/module-card-item.tsx

@@ -3,7 +3,7 @@
 import React, { useRef } from "react";
 import { observer } from "mobx-react-lite";
 import Link from "next/link";
-import { useParams, usePathname, useRouter, useSearchParams } from "next/navigation";
+import { useParams, usePathname, useSearchParams } from "next/navigation";
 import { CalendarCheck2, CalendarClock, Info, MoveRight, SquareUser } from "lucide-react";
 // ui
 import { LayersIcon, Tooltip, setPromiseToast } from "@plane/ui";
@@ -20,6 +20,7 @@ import { getDate, renderFormattedDate } from "@/helpers/date-time.helper";
 import { generateQueryParams } from "@/helpers/router.helper";
 // hooks
 import { useEventTracker, useMember, useModule, useProjectEstimates, useUser } from "@/hooks/store";
+import { useAppRouter } from "@/hooks/use-app-router";
 import { usePlatformOS } from "@/hooks/use-platform-os";
 // plane web constants
 import { EEstimateSystem } from "@/plane-web/constants/estimates";
@@ -33,7 +34,7 @@ export const ModuleCardItem: React.FC<Props> = observer((props) => {
   // refs
   const parentRef = useRef(null);
   // router
-  const router = useRouter();
+  const router = useAppRouter();
   const { workspaceSlug, projectId } = useParams();
   const searchParams = useSearchParams();
   const pathname = usePathname();

web/core/components/modules/module-list-item.tsx

@@ -2,7 +2,7 @@
 
 import React, { useRef } from "react";
 import { observer } from "mobx-react-lite";
-import { useParams, usePathname, useRouter, useSearchParams } from "next/navigation";
+import { useParams, usePathname, useSearchParams } from "next/navigation";
 // icons
 import { Check, Info } from "lucide-react";
 // ui
@@ -13,7 +13,8 @@ import { ModuleListItemAction } from "@/components/modules";
 // helpers
 import { generateQueryParams } from "@/helpers/router.helper";
 // hooks
-import { useAppRouter, useModule, useProjectEstimates } from "@/hooks/store";
+import { useModule, useProjectEstimates } from "@/hooks/store";
+import { useAppRouter } from "@/hooks/use-app-router";
 import { usePlatformOS } from "@/hooks/use-platform-os";
 // plane web constants
 import { EEstimateSystem } from "@/plane-web/constants/estimates";
@@ -27,14 +28,13 @@ export const ModuleListItem: React.FC<Props> = observer((props) => {
   // refs
   const parentRef = useRef(null);
   // router
-  const router = useRouter();
+  const router = useAppRouter();
-  const { workspaceSlug } = useParams();
+  const { workspaceSlug, projectId } = useParams();
   const searchParams = useSearchParams();
   const pathname = usePathname();
   // store hooks
   const { getModuleById } = useModule();
   const { isMobile } = usePlatformOS();
-  const { projectId } = useAppRouter();
   const { currentActiveEstimateId, areEstimateEnabledByProjectId, estimateById } = useProjectEstimates();
 
   // derived values
@@ -50,7 +50,7 @@ export const ModuleListItem: React.FC<Props> = observer((props) => {
   const isEstimateEnabled =
     projectId &&
     currentActiveEstimateId &&
-    areEstimateEnabledByProjectId(projectId) &&
+    areEstimateEnabledByProjectId(projectId?.toString()) &&
     estimateById(currentActiveEstimateId)?.type === EEstimateSystem.POINTS;
 
   const completionPercentage = isEstimateEnabled

web/core/components/modules/module-peek-overview.tsx

@@ -1,9 +1,10 @@
 import React, { useEffect } from "react";
 import { observer } from "mobx-react";
-import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import { usePathname, useSearchParams } from "next/navigation";
 // hooks
 import { generateQueryParams } from "@/helpers/router.helper";
 import { useModule } from "@/hooks/store";
+import { useAppRouter } from "@/hooks/use-app-router";
 // components
 import { ModuleAnalyticsSidebar } from "./";
 
@@ -15,7 +16,7 @@ type Props = {
 
 export const ModulePeekOverview: React.FC<Props> = observer(({ projectId, workspaceSlug, isArchived = false }) => {
   // router
-  const router = useRouter();
+  const router = useAppRouter();
   const pathname = usePathname();
   const searchParams = useSearchParams();
   const peekModule = searchParams.get("peekModule");

web/core/components/modules/quick-actions.tsx

@@ -2,7 +2,7 @@
 
 import { useState } from "react";
 import { observer } from "mobx-react";
-import { useRouter } from "next/navigation";
+
 // icons
 import { ArchiveRestoreIcon, ExternalLink, LinkIcon, Pencil, Trash2 } from "lucide-react";
 // ui
@@ -16,6 +16,7 @@ import { cn } from "@/helpers/common.helper";
 import { copyUrlToClipboard } from "@/helpers/string.helper";
 // hooks
 import { useModule, useEventTracker, useUser } from "@/hooks/store";
+import { useAppRouter } from "@/hooks/use-app-router";
 
 type Props = {
   parentRef: React.RefObject<HTMLDivElement>;
@@ -27,7 +28,7 @@ type Props = {
 export const ModuleQuickActions: React.FC<Props> = observer((props) => {
   const { parentRef, moduleId, projectId, workspaceSlug } = props;
   // router
-  const router = useRouter();
+  const router = useAppRouter();
   // states
   const [editModal, setEditModal] = useState(false);
   const [archiveModuleModal, setArchiveModuleModal] = useState(false);

web/core/components/onboarding/switch-account-modal.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import React, { useState } from "react";
-import { useRouter } from "next/navigation";
+
 import { useTheme } from "next-themes";
 import { ArrowRightLeft } from "lucide-react";
 import { Dialog, Transition } from "@headlessui/react";
@@ -9,6 +9,7 @@ import { Dialog, Transition } from "@headlessui/react";
 import { Button, TOAST_TYPE, setToast } from "@plane/ui";
 // hooks
 import { useUser } from "@/hooks/store";
+import { useAppRouter } from "@/hooks/use-app-router";
 
 type Props = {
   isOpen: boolean;
@@ -20,7 +21,7 @@ export const SwitchAccountModal: React.FC<Props> = (props) => {
   // states
   const [switchingAccount, setSwitchingAccount] = useState(false);
   // router
-  const router = useRouter();
+  const router = useAppRouter();
   // store hooks
   const { data: userData, signOut } = useUser();
 

web/core/components/page-views/workspace-dashboard.tsx

@@ -1,5 +1,6 @@
 import { useEffect } from "react";
 import { observer } from "mobx-react-lite";
+import { useParams } from "next/navigation";
 // components
 import { DashboardWidgets } from "@/components/dashboard";
 import { EmptyState } from "@/components/empty-state";
@@ -12,15 +13,7 @@ import { PRODUCT_TOUR_COMPLETED } from "@/constants/event-tracker";
 // helpers
 import { cn } from "@/helpers/common.helper";
 // hooks
-import {
+import { useCommandPalette, useUserProfile, useEventTracker, useDashboard, useProject, useUser } from "@/hooks/store";
-  useCommandPalette,
-  useAppRouter,
-  useUserProfile,
-  useEventTracker,
-  useDashboard,
-  useProject,
-  useUser,
-} from "@/hooks/store";
 import useSize from "@/hooks/use-window-size";
 
 export const WorkspaceDashboardView = observer(() => {
@@ -30,7 +23,7 @@ export const WorkspaceDashboardView = observer(() => {
     setTrackElement,
   } = useEventTracker();
   const { toggleCreateProjectModal } = useCommandPalette();
-  const { workspaceSlug } = useAppRouter();
+  const { workspaceSlug } = useParams();
   const { data: currentUser } = useUser();
   const { data: currentUserProfile, updateTourCompleted } = useUserProfile();
   const { captureEvent } = useEventTracker();
@@ -56,7 +49,7 @@ export const WorkspaceDashboardView = observer(() => {
   useEffect(() => {
     if (!workspaceSlug) return;
 
-    fetchHomeDashboardWidgets(workspaceSlug);
+    fetchHomeDashboardWidgets(workspaceSlug?.toString());
   }, [fetchHomeDashboardWidgets, workspaceSlug]);
 
   // TODO: refactor loader implementation

web/core/components/pages/editor/header/options-dropdown.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
 import { ArchiveRestoreIcon, Clipboard, Copy, Link, Lock, LockOpen } from "lucide-react";
 // document editor
 import { EditorReadOnlyRefApi, EditorRefApi } from "@plane/document-editor";
@@ -9,7 +10,6 @@ import { ArchiveIcon, CustomMenu, TOAST_TYPE, ToggleSwitch, setToast } from "@pl
 // helpers
 import { copyTextToClipboard, copyUrlToClipboard } from "@/helpers/string.helper";
 // hooks
-import { useAppRouter } from "@/hooks/store";
 import { usePageFilters } from "@/hooks/use-page-filters";
 // store
 import { IPage } from "@/store/pages/page";
@@ -36,7 +36,7 @@ export const PageOptionsDropdown: React.FC<Props> = observer((props) => {
     restore,
   } = page;
   // store hooks
-  const { workspaceSlug, projectId } = useAppRouter();
+  const { workspaceSlug, projectId } = useParams();
   // page filters
   const { isFullWidth, handleFullWidth } = usePageFilters();
   const handleArchivePage = async () =>
@@ -102,7 +102,7 @@ export const PageOptionsDropdown: React.FC<Props> = observer((props) => {
     {
       key: "copy-page-link",
       action: () => {
-        copyUrlToClipboard(`${workspaceSlug}/projects/${projectId}/pages/${id}`).then(() =>
+        copyUrlToClipboard(`${workspaceSlug?.toString()}/projects/${projectId?.toString()}/pages/${id}`).then(() =>
           setToast({
             type: TOAST_TYPE.SUCCESS,
             title: "Success!",

web/core/components/pages/modals/create-page-modal.tsx

@@ -1,5 +1,5 @@
 import { FC, useEffect, useState } from "react";
-import { useRouter } from "next/navigation";
+
 // types
 import { TPage } from "@plane/types";
 // ui
@@ -11,6 +11,7 @@ import { PAGE_CREATED } from "@/constants/event-tracker";
 import { EPageAccess } from "@/constants/page";
 // hooks
 import { useProjectPages, useEventTracker } from "@/hooks/store";
+import { useAppRouter } from "@/hooks/use-app-router";
 
 type Props = {
   workspaceSlug: string;
@@ -30,7 +31,7 @@ export const CreatePageModal: FC<Props> = (props) => {
     logo_props: undefined,
   });
   // router
-  const router = useRouter();
+  const router = useAppRouter();
   // store hooks
   const { createPage } = useProjectPages();
   const { capturePageEvent } = useEventTracker();

web/core/components/project/card.tsx

@@ -3,7 +3,7 @@
 import React, { useRef, useState } from "react";
 import { observer } from "mobx-react-lite";
 import Link from "next/link";
-import { useParams, useRouter } from "next/navigation";
+import { useParams } from "next/navigation";
 import { ArchiveRestoreIcon, Check, ExternalLink, LinkIcon, Lock, Settings, Trash2, UserPlus } from "lucide-react";
 // types
 import type { IProject } from "@plane/types";
@@ -31,6 +31,7 @@ import { renderFormattedDate } from "@/helpers/date-time.helper";
 import { copyUrlToClipboard } from "@/helpers/string.helper";
 // hooks
 import { useProject } from "@/hooks/store";
+import { useAppRouter } from "@/hooks/use-app-router";
 import { usePlatformOS } from "@/hooks/use-platform-os";
 
 type Props = {
@@ -46,7 +47,7 @@ export const ProjectCard: React.FC<Props> = observer((props) => {
   // refs
   const projectCardRef = useRef(null);
   // router
-  const router = useRouter();
+  const router = useAppRouter();
   const { workspaceSlug } = useParams();
   // store hooks
   const { addProjectToFavorites, removeProjectFromFavorites } = useProject();

web/core/components/project/delete-project-modal.tsx

@@ -1,18 +1,19 @@
 "use client";
 
 import React from "react";
-import { useParams, useRouter } from "next/navigation";
+import { useParams } from "next/navigation";
 import { Controller, useForm } from "react-hook-form";
 import { AlertTriangle } from "lucide-react";
 import { Dialog, Transition } from "@headlessui/react";
-import type { IProject } from "@plane/types";
-// hooks
-import { Button, Input, TOAST_TYPE, setToast } from "@plane/ui";
-import { PROJECT_DELETED } from "@/constants/event-tracker";
-import { useEventTracker, useProject } from "@/hooks/store";
-// ui
 // types
+import type { IProject } from "@plane/types";
+// ui
+import { Button, Input, TOAST_TYPE, setToast } from "@plane/ui";
 // constants
+import { PROJECT_DELETED } from "@/constants/event-tracker";
+// hooks
+import { useEventTracker, useProject } from "@/hooks/store";
+import { useAppRouter } from "@/hooks/use-app-router";
 
 type DeleteProjectModal = {
   isOpen: boolean;
@@ -31,7 +32,7 @@ export const DeleteProjectModal: React.FC<DeleteProjectModal> = (props) => {
   const { captureProjectEvent } = useEventTracker();
   const { deleteProject } = useProject();
   // router
-  const router = useRouter();
+  const router = useAppRouter();
   const { workspaceSlug, projectId } = useParams();
   // form info
   const {

web/core/components/project/join-project-modal.tsx

@@ -1,14 +1,15 @@
 "use client";
 
 import { useState, Fragment } from "react";
-import { useRouter } from "next/navigation";
+
 import { Transition, Dialog } from "@headlessui/react";
-import type { IProject } from "@plane/types";
-// hooks
-import { Button } from "@plane/ui";
-import { useProject, useUser } from "@/hooks/store";
-// ui
 // types
+import type { IProject } from "@plane/types";
+// ui
+import { Button } from "@plane/ui";
+// hooks
+import { useProject, useUser } from "@/hooks/store";
+import { useAppRouter } from "@/hooks/use-app-router";
 
 // type
 type TJoinProjectModalProps = {
@@ -28,7 +29,7 @@ export const JoinProjectModal: React.FC<TJoinProjectModalProps> = (props) => {
   } = useUser();
   const { fetchProjects } = useProject();
   // router
-  const router = useRouter();
+  const router = useAppRouter();
 
   const handleJoin = () => {
     setIsJoiningLoading(true);

web/core/components/project/leave-project-modal.tsx

@@ -2,12 +2,12 @@
 
 import { FC, Fragment } from "react";
 import { observer } from "mobx-react";
-import { useParams, useRouter } from "next/navigation";
+import { useParams } from "next/navigation";
 import { Controller, useForm } from "react-hook-form";
 // headless ui
 import { AlertTriangleIcon } from "lucide-react";
 import { Dialog, Transition } from "@headlessui/react";
-// icons
+// types
 import { IProject } from "@plane/types";
 // ui
 import { Button, Input, TOAST_TYPE, setToast } from "@plane/ui";
@@ -15,7 +15,7 @@ import { Button, Input, TOAST_TYPE, setToast } from "@plane/ui";
 import { PROJECT_MEMBER_LEAVE } from "@/constants/event-tracker";
 // hooks
 import { useEventTracker, useUser } from "@/hooks/store";
-// types
+import { useAppRouter } from "@/hooks/use-app-router";
 
 type FormData = {
   projectName: string;
@@ -36,7 +36,7 @@ export interface ILeaveProjectModal {
 export const LeaveProjectModal: FC<ILeaveProjectModal> = observer((props) => {
   const { project, isOpen, onClose } = props;
   // router
-  const router = useRouter();
+  const router = useAppRouter();
   const { workspaceSlug } = useParams();
   // store hooks
   const { captureEvent } = useEventTracker();

web/core/components/project/member-list-item.tsx

@@ -3,7 +3,7 @@
 import { useState } from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";
-import { useParams, useRouter } from "next/navigation";
+import { useParams } from "next/navigation";
 // icons
 import { ChevronDown, Dot, XCircle } from "lucide-react";
 // ui
@@ -16,6 +16,7 @@ import { EUserProjectRoles } from "@/constants/project";
 import { ROLE } from "@/constants/workspace";
 // hooks
 import { useEventTracker, useMember, useProject, useUser } from "@/hooks/store";
+import { useAppRouter } from "@/hooks/use-app-router";
 import { usePlatformOS } from "@/hooks/use-platform-os";
 
 type Props = {
@@ -27,7 +28,7 @@ export const ProjectMemberListItem: React.FC<Props> = observer((props) => {
   // states
   const [removeMemberModal, setRemoveMemberModal] = useState(false);
   // router
-  const router = useRouter();
+  const router = useAppRouter();
   const { workspaceSlug, projectId } = useParams();
   // store hooks
   const {

web/core/components/project/settings/archive-project/archive-restore-modal.tsx

@@ -1,12 +1,12 @@
 "use client";
 
 import { useState, Fragment } from "react";
-import { useRouter } from "next/navigation";
 import { Dialog, Transition } from "@headlessui/react";
 // ui
 import { Button, TOAST_TYPE, setToast } from "@plane/ui";
 // hooks
 import { useProject } from "@/hooks/store";
+import { useAppRouter } from "@/hooks/use-app-router";
 
 type Props = {
   workspaceSlug: string;
@@ -20,7 +20,7 @@ type Props = {
 export const ArchiveRestoreProjectModal: React.FC<Props> = (props) => {
   const { workspaceSlug, projectId, isOpen, onClose, archive } = props;
   // router
-  const router = useRouter();
+  const router = useAppRouter();
   // states
   const [isLoading, setIsLoading] = useState(false);
   // store hooks

web/core/components/web-hooks/delete-webhook-modal.tsx

@@ -1,11 +1,12 @@
 "use client";
 
 import React, { FC, useState } from "react";
-import { useParams, useRouter } from "next/navigation";
+import { useParams } from "next/navigation";
 // ui
 import { AlertModalCore, TOAST_TYPE, setToast } from "@plane/ui";
 // hooks
 import { useWebhook } from "@/hooks/store";
+import { useAppRouter } from "@/hooks/use-app-router";
 
 interface IDeleteWebhook {
   isOpen: boolean;
@@ -17,7 +18,7 @@ export const DeleteWebhookModal: FC<IDeleteWebhook> = (props) => {
   // states
   const [isDeleting, setIsDeleting] = useState(false);
   // router
-  const router = useRouter();
+  const router = useAppRouter();
   // store hooks
   const { removeWebhook } = useWebhook();
 

web/core/components/workspace/create-workspace-form.tsx

@@ -2,8 +2,8 @@
 
 import { Dispatch, SetStateAction, useEffect, useState, FC } from "react";
 import { observer } from "mobx-react";
-import { useRouter } from "next/navigation";
 import { Controller, useForm } from "react-hook-form";
+// types
 import { IWorkspace } from "@plane/types";
 // ui
 import { Button, CustomSelect, Input, TOAST_TYPE, setToast } from "@plane/ui";
@@ -12,8 +12,8 @@ import { WORKSPACE_CREATED } from "@/constants/event-tracker";
 import { ORGANIZATION_SIZE, RESTRICTED_URLS } from "@/constants/workspace";
 // hooks
 import { useEventTracker, useWorkspace } from "@/hooks/store";
-// ui
+import { useAppRouter } from "@/hooks/use-app-router";
-// types
+// services
 import { WorkspaceService } from "@/services/workspace.service";
 
 type Props = {
@@ -48,7 +48,7 @@ export const CreateWorkspaceForm: FC<Props> = observer((props) => {
   const [slugError, setSlugError] = useState(false);
   const [invalidSlug, setInvalidSlug] = useState(false);
   // router
-  const router = useRouter();
+  const router = useAppRouter();
   // store hooks
   const { captureWorkspaceEvent } = useEventTracker();
   const { createWorkspace } = useWorkspace();

web/core/components/workspace/delete-workspace-modal.tsx

@@ -2,10 +2,10 @@
 
 import React from "react";
 import { observer } from "mobx-react";
-import { useRouter } from "next/navigation";
 import { Controller, useForm } from "react-hook-form";
 import { AlertTriangle } from "lucide-react";
 import { Dialog, Transition } from "@headlessui/react";
+// types
 import type { IWorkspace } from "@plane/types";
 // ui
 import { Button, Input, TOAST_TYPE, setToast } from "@plane/ui";
@@ -13,7 +13,7 @@ import { Button, Input, TOAST_TYPE, setToast } from "@plane/ui";
 import { WORKSPACE_DELETED } from "@/constants/event-tracker";
 // hooks
 import { useEventTracker, useWorkspace } from "@/hooks/store";
-// types
+import { useAppRouter } from "@/hooks/use-app-router";
 
 type Props = {
   isOpen: boolean;
@@ -29,7 +29,7 @@ const defaultValues = {
 export const DeleteWorkspaceModal: React.FC<Props> = observer((props) => {
   const { isOpen, data, onClose } = props;
   // router
-  const router = useRouter();
+  const router = useAppRouter();
   // store hooks
   const { captureWorkspaceEvent } = useEventTracker();
   const { deleteWorkspace } = useWorkspace();

web/core/components/workspace/settings/members-list-item.tsx

@@ -3,7 +3,7 @@
 import { FC, useState } from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";
-import { useParams, useRouter } from "next/navigation";
+import { useParams } from "next/navigation";
 // lucide icons
 import { ChevronDown, Dot, XCircle } from "lucide-react";
 // ui
@@ -15,6 +15,7 @@ import { WORKSPACE_MEMBER_LEAVE } from "@/constants/event-tracker";
 import { EUserWorkspaceRoles, ROLE } from "@/constants/workspace";
 // hooks
 import { useEventTracker, useMember, useUser } from "@/hooks/store";
+import { useAppRouter } from "@/hooks/use-app-router";
 import { usePlatformOS } from "@/hooks/use-platform-os";
 
 type Props = {
@@ -26,7 +27,7 @@ export const WorkspaceMembersListItem: FC<Props> = observer((props) => {
   // states
   const [removeMemberModal, setRemoveMemberModal] = useState(false);
   // router
-  const router = useRouter();
+  const router = useAppRouter();
   const { workspaceSlug } = useParams();
   // store hooks
   const {