[WEB-5199] chore: refactor all usages of useParams to params prop

2025-12-16 11:57:56 +01:00 · 2025-10-20 21:30:37 -07:00
parent f266cd8414
commit 916485e7de
70 changed files with 670 additions and 534 deletions
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/active-cycles/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/active-cycles/page.tsx
@@ -8,7 +8,7 @@ import { useWorkspace } from "@/hooks/store/use-workspace";
 // plane web components
 import { WorkspaceActiveCyclesRoot } from "@/plane-web/components/active-cycles";

-const WorkspaceActiveCyclesPage = observer(() => {
+function WorkspaceActiveCyclesPage() {
  const { currentWorkspace } = useWorkspace();
  // derived values
  const pageTitle = currentWorkspace?.name ? `${currentWorkspace?.name} - Active Cycles` : undefined;
@@ -19,6 +19,6 @@ const WorkspaceActiveCyclesPage = observer(() => {
      <WorkspaceActiveCyclesRoot />
    </>
  );
-});
+}

-export default WorkspaceActiveCyclesPage;
+export default observer(WorkspaceActiveCyclesPage);
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/analytics/[tabId]/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/analytics/[tabId]/page.tsx
@@ -22,16 +22,14 @@ import { useUserPermissions } from "@/hooks/store/user";
 import { useResolvedAssetPath } from "@/hooks/use-resolved-asset-path";
 import { getAnalyticsTabs } from "@/plane-web/components/analytics/tabs";

-type Props = {
+type AnalyticsPageProps = {
  params: {
    tabId: string;
    workspaceSlug: string;
  };
 };

-const AnalyticsPage = observer((props: Props) => {
-  // props
-  const { params } = props;
+function AnalyticsPage({ params }: AnalyticsPageProps) {
  const { tabId } = params;

  // hooks
@@ -118,6 +116,6 @@ const AnalyticsPage = observer((props: Props) => {
      )}
    </>
  );
-});
+}

-export default AnalyticsPage;
+export default observer(AnalyticsPage);
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/browse/[workItem]/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/browse/[workItem]/page.tsx
@@ -2,7 +2,6 @@

 import React, { useEffect } from "react";
 import { observer } from "mobx-react";
-import { useParams } from "next/navigation";
 import { useTheme } from "next-themes";
 import useSWR from "swr";
 // plane imports
@@ -24,10 +23,17 @@ import { ProjectAuthWrapper } from "@/plane-web/layouts/project-wrapper";
 import emptyIssueDark from "@/public/empty-state/search/issues-dark.webp";
 import emptyIssueLight from "@/public/empty-state/search/issues-light.webp";

-const IssueDetailsPage = observer(() => {
+type IssueDetailsPageProps = {
+  params: {
+    workspaceSlug: string;
+    workItem: string;
+  };
+};
+
+function IssueDetailsPage({ params }: IssueDetailsPageProps) {
+  const { workspaceSlug, workItem } = params;
  // router
  const router = useAppRouter();
-  const { workspaceSlug, workItem } = useParams();
  // hooks
  const { resolvedTheme } = useTheme();
  // store hooks
@@ -39,27 +45,23 @@ const IssueDetailsPage = observer(() => {
  const { getProjectById } = useProject();
  const { toggleIssueDetailSidebar, issueDetailSidebarCollapsed } = useAppTheme();

-  const projectIdentifier = workItem?.toString().split("-")[0];
-  const sequence_id = workItem?.toString().split("-")[1];
+  const [projectIdentifier, sequence_id] = workItem.split("-");

  // fetching issue details
-  const { data, isLoading, error } = useSWR(
-    workspaceSlug && workItem ? `ISSUE_DETAIL_${workspaceSlug}_${projectIdentifier}_${sequence_id}` : null,
-    workspaceSlug && workItem
-      ? () => fetchIssueWithIdentifier(workspaceSlug.toString(), projectIdentifier, sequence_id)
-      : null
+  const { data, isLoading, error } = useSWR(`ISSUE_DETAIL_${workspaceSlug}_${projectIdentifier}_${sequence_id}`, () =>
+    fetchIssueWithIdentifier(workspaceSlug, projectIdentifier, sequence_id)
  );
  const issueId = data?.id;
  const projectId = data?.project_id;
  // derived values
-  const issue = getIssueById(issueId?.toString() || "") || undefined;
+  const issue = getIssueById(issueId || "") || undefined;
  const project = (issue?.project_id && getProjectById(issue?.project_id)) || undefined;
  const issueLoader = !issue || isLoading;
  const pageTitle = project && issue ? `${project?.identifier}-${issue?.sequence_id} ${issue?.name}` : undefined;

  useWorkItemProperties(
    projectId,
-    workspaceSlug.toString(),
+    workspaceSlug,
    issueId,
    issue?.is_epic ? EIssueServiceType.EPICS : EIssueServiceType.ISSUES
  );
@@ -113,14 +115,13 @@ const IssueDetailsPage = observer(() => {
          </div>
        </Loader>
      ) : (
-        workspaceSlug &&
        projectId &&
        issueId && (
-          <ProjectAuthWrapper workspaceSlug={workspaceSlug?.toString()} projectId={projectId?.toString()}>
+          <ProjectAuthWrapper workspaceSlug={workspaceSlug} projectId={projectId}>
            <IssueDetailRoot
-              workspaceSlug={workspaceSlug.toString()}
-              projectId={projectId.toString()}
-              issueId={issueId.toString()}
+              workspaceSlug={workspaceSlug}
+              projectId={projectId}
+              issueId={issueId}
              is_archived={!!issue?.archived_at}
            />
          </ProjectAuthWrapper>
@@ -128,6 +129,6 @@ const IssueDetailsPage = observer(() => {
      )}
    </>
  );
-});
+}

-export default IssueDetailsPage;
+export default observer(IssueDetailsPage);
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/drafts/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/drafts/page.tsx
@@ -1,19 +1,19 @@
 "use client";

-import { useParams } from "next/navigation";
 // components
 import { PageHead } from "@/components/core/page-title";
 import { WorkspaceDraftIssuesRoot } from "@/components/issues/workspace-draft";

-const WorkspaceDraftPage = () => {
-  // router
-  const { workspaceSlug: routeWorkspaceSlug } = useParams();
+type WorkspaceDraftPageProps = {
+  params: {
+    workspaceSlug: string;
+  };
+};
+
+function WorkspaceDraftPage({ params }: WorkspaceDraftPageProps) {
+  const { workspaceSlug } = params;
  const pageTitle = "Workspace Draft";

-  // derived values
-  const workspaceSlug = (routeWorkspaceSlug as string) || undefined;
-
-  if (!workspaceSlug) return null;
  return (
    <>
      <PageHead title={pageTitle} />
@@ -22,6 +22,6 @@ const WorkspaceDraftPage = () => {
      </div>
    </>
  );
-};
+}

 export default WorkspaceDraftPage;
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/notifications/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/notifications/page.tsx
@@ -1,7 +1,6 @@
 "use client";

 import { observer } from "mobx-react";
-import { useParams } from "next/navigation";
 // plane imports
 import { useTranslation } from "@plane/i18n";
 // components
@@ -10,8 +9,14 @@ import { NotificationsRoot } from "@/components/workspace-notifications";
 // hooks
 import { useWorkspace } from "@/hooks/store/use-workspace";

-const WorkspaceDashboardPage = observer(() => {
-  const { workspaceSlug } = useParams();
+type WorkspaceDashboardPageProps = {
+  params: {
+    workspaceSlug: string;
+  };
+};
+
+function WorkspaceDashboardPage({ params }: WorkspaceDashboardPageProps) {
+  const { workspaceSlug } = params;
  // plane hooks
  const { t } = useTranslation();
  // hooks
@@ -24,9 +29,9 @@ const WorkspaceDashboardPage = observer(() => {
  return (
    <>
      <PageHead title={pageTitle} />
-      <NotificationsRoot workspaceSlug={workspaceSlug?.toString()} />
+      <NotificationsRoot workspaceSlug={workspaceSlug} />
    </>
  );
-});
+}

-export default WorkspaceDashboardPage;
+export default observer(WorkspaceDashboardPage);
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/page.tsx
@@ -12,7 +12,7 @@ import { useWorkspace } from "@/hooks/store/use-workspace";
 // local components
 import { WorkspaceDashboardHeader } from "./header";

-const WorkspaceDashboardPage = observer(() => {
+function WorkspaceDashboardPage() {
  const { currentWorkspace } = useWorkspace();
  const { t } = useTranslation();
  // derived values
@@ -27,6 +27,6 @@ const WorkspaceDashboardPage = observer(() => {
      </ContentWrapper>
    </>
  );
-});
+}

-export default WorkspaceDashboardPage;
+export default observer(WorkspaceDashboardPage);
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/profile/[userId]/[profileViewId]/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/profile/[userId]/[profileViewId]/page.tsx
@@ -1,7 +1,6 @@
 "use client";

 import React from "react";
-import { useParams } from "next/navigation";
 // components
 import { PageHead } from "@/components/core/page-title";
 import { ProfileIssuesPage } from "@/components/profile/profile-issues";
@@ -12,10 +11,22 @@ const ProfilePageHeader = {
  subscribed: "Profile - Subscribed",
 };

-const ProfileIssuesTypePage = () => {
-  const { profileViewId } = useParams() as { profileViewId: "assigned" | "subscribed" | "created" | undefined };
+function isValidProfileViewId(profileViewId: string): profileViewId is keyof typeof ProfilePageHeader {
+  return profileViewId in ProfilePageHeader;
+}

-  if (!profileViewId) return null;
+type ProfileIssuesTypePageProps = {
+  params: {
+    workspaceSlug: string;
+    userId: string;
+    profileViewId: string;
+  };
+};
+
+function ProfileIssuesTypePage({ params }: ProfileIssuesTypePageProps) {
+  const { profileViewId } = params;
+
+  if (!isValidProfileViewId(profileViewId)) return null;

  const header = ProfilePageHeader[profileViewId];

@@ -25,6 +36,6 @@ const ProfileIssuesTypePage = () => {
      <ProfileIssuesPage type={profileViewId} />
    </>
  );
-};
+}

 export default ProfileIssuesTypePage;
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/profile/[userId]/activity/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/profile/[userId]/activity/page.tsx
@@ -15,7 +15,7 @@ import { useUserPermissions } from "@/hooks/store/user";

 const PER_PAGE = 100;

-const ProfileActivityPage = observer(() => {
+function ProfileActivityPage() {
  // states
  const [pageCount, setPageCount] = useState(1);
  const [totalPages, setTotalPages] = useState(0);
@@ -69,6 +69,6 @@ const ProfileActivityPage = observer(() => {
      </div>
    </>
  );
-});
+}

-export default ProfileActivityPage;
+export default observer(ProfileActivityPage);
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/profile/[userId]/layout.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/profile/[userId]/layout.tsx
@@ -1,7 +1,7 @@
 "use client";

 import { observer } from "mobx-react";
-import { useParams, usePathname } from "next/navigation";
+import { usePathname } from "next/navigation";
 import useSWR from "swr";
 // components
 import { PROFILE_VIEWER_TAB, PROFILE_ADMINS_TAB, EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
@@ -22,14 +22,16 @@ import { ProfileNavbar } from "./navbar";

 const userService = new UserService();

-type Props = {
+type UseProfileLayoutProps = {
  children: React.ReactNode;
+  params: {
+    workspaceSlug: string;
+    userId: string;
+  };
 };

-const UseProfileLayout: React.FC<Props> = observer((props) => {
-  const { children } = props;
-  // router
-  const { workspaceSlug, userId } = useParams();
+function UseProfileLayout({ children, params }: UseProfileLayoutProps) {
+  const { workspaceSlug, userId } = params;
  const pathname = usePathname();
  // store hooks
  const { allowPermissions } = useUserPermissions();
@@ -43,11 +45,8 @@ const UseProfileLayout: React.FC<Props> = observer((props) => {
  const windowSize = useSize();
  const isSmallerScreen = windowSize[0] >= 768;

-  const { data: userProjectsData } = useSWR(
-    workspaceSlug && userId ? USER_PROFILE_PROJECT_SEGREGATION(workspaceSlug.toString(), userId.toString()) : null,
-    workspaceSlug && userId
-      ? () => userService.getUserProfileProjectsSegregation(workspaceSlug.toString(), userId.toString())
-      : null
+  const { data: userProjectsData } = useSWR(USER_PROFILE_PROJECT_SEGREGATION(workspaceSlug, userId), () =>
+    userService.getUserProfileProjectsSegregation(workspaceSlug, userId)
  );
  // derived values
  const isAuthorizedPath =
@@ -93,6 +92,6 @@ const UseProfileLayout: React.FC<Props> = observer((props) => {
      </div>
    </>
  );
-});
+}

-export default UseProfileLayout;
+export default observer(UseProfileLayout);
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/profile/[userId]/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/profile/[userId]/page.tsx
@@ -1,6 +1,5 @@
 "use client";

-import { useParams } from "next/navigation";
 import useSWR from "swr";
 // plane imports
 import { GROUP_CHOICES } from "@plane/constants";
@@ -20,13 +19,19 @@ import { USER_PROFILE_DATA } from "@/constants/fetch-keys";
 import { UserService } from "@/services/user.service";
 const userService = new UserService();

-export default function ProfileOverviewPage() {
-  const { workspaceSlug, userId } = useParams();
+type ProfileOverviewPageProps = {
+  params: {
+    workspaceSlug: string;
+    userId: string;
+  };
+};
+
+export default function ProfileOverviewPage({ params }: ProfileOverviewPageProps) {
+  const { workspaceSlug, userId } = params;

  const { t } = useTranslation();
-  const { data: userProfile } = useSWR(
-    workspaceSlug && userId ? USER_PROFILE_DATA(workspaceSlug.toString(), userId.toString()) : null,
-    workspaceSlug && userId ? () => userService.getUserProfileData(workspaceSlug.toString(), userId.toString()) : null
+  const { data: userProfile } = useSWR(USER_PROFILE_DATA(workspaceSlug, userId), () =>
+    userService.getUserProfileData(workspaceSlug, userId)
  );

  const stateDistribution: IUserStateDistribution[] = Object.keys(GROUP_CHOICES).map((key) => {
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/cycles/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/cycles/page.tsx
@@ -1,7 +1,6 @@
 "use client";

 import { observer } from "mobx-react";
-import { useParams } from "next/navigation";
 // components
 import { PageHead } from "@/components/core/page-title";
 import { ArchivedCycleLayoutRoot } from "@/components/cycles/archived-cycles";
@@ -9,13 +8,19 @@ import { ArchivedCyclesHeader } from "@/components/cycles/archived-cycles/header
 // hooks
 import { useProject } from "@/hooks/store/use-project";

-const ProjectArchivedCyclesPage = observer(() => {
-  // router
-  const { projectId } = useParams();
+type ProjectArchivedCyclesPageProps = {
+  params: {
+    workspaceSlug: string;
+    projectId: string;
+  };
+};
+
+function ProjectArchivedCyclesPage({ params }: ProjectArchivedCyclesPageProps) {
+  const { projectId } = params;
  // store hooks
  const { getProjectById } = useProject();
  // derived values
-  const project = projectId ? getProjectById(projectId.toString()) : undefined;
+  const project = getProjectById(projectId);
  const pageTitle = project?.name && `${project?.name} - Archived cycles`;

  return (
@@ -27,6 +32,6 @@ const ProjectArchivedCyclesPage = observer(() => {
      </div>
    </>
  );
-});
+}

-export default ProjectArchivedCyclesPage;
+export default observer(ProjectArchivedCyclesPage);
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/issues/(detail)/[archivedIssueId]/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/issues/(detail)/[archivedIssueId]/page.tsx
@@ -1,7 +1,6 @@
 "use client";

 import { observer } from "mobx-react";
-import { useParams } from "next/navigation";
 import useSWR from "swr";
 // ui
 import { Loader } from "@plane/ui";
@@ -13,10 +12,16 @@ import { IssueDetailRoot } from "@/components/issues/issue-detail";
 import { useIssueDetail } from "@/hooks/store/use-issue-detail";
 import { useProject } from "@/hooks/store/use-project";

-const ArchivedIssueDetailsPage = observer(() => {
-  // router
-  const { workspaceSlug, projectId, archivedIssueId } = useParams();
-  // states
+type ArchivedIssueDetailsPageProps = {
+  params: {
+    workspaceSlug: string;
+    projectId: string;
+    archivedIssueId: string;
+  };
+};
+
+function ArchivedIssueDetailsPage({ params }: ArchivedIssueDetailsPageProps) {
+  const { workspaceSlug, projectId, archivedIssueId } = params;
  // hooks
  const {
    fetchIssue,
@@ -25,18 +30,13 @@ const ArchivedIssueDetailsPage = observer(() => {

  const { getProjectById } = useProject();

-  const { isLoading } = useSWR(
-    workspaceSlug && projectId && archivedIssueId
-      ? `ARCHIVED_ISSUE_DETAIL_${workspaceSlug}_${projectId}_${archivedIssueId}`
-      : null,
-    workspaceSlug && projectId && archivedIssueId
-      ? () => fetchIssue(workspaceSlug.toString(), projectId.toString(), archivedIssueId.toString())
-      : null
+  const { isLoading } = useSWR(`ARCHIVED_ISSUE_DETAIL_${workspaceSlug}_${projectId}_${archivedIssueId}`, () =>
+    fetchIssue(workspaceSlug, projectId, archivedIssueId)
  );

  // derived values
-  const issue = archivedIssueId ? getIssueById(archivedIssueId.toString()) : undefined;
-  const project = issue ? getProjectById(issue?.project_id ?? "") : undefined;
+  const issue = getIssueById(archivedIssueId);
+  const project = issue ? getProjectById(issue.project_id ?? "") : undefined;
  const pageTitle = project && issue ? `${project?.identifier}-${issue?.sequence_id} ${issue?.name}` : undefined;

  if (!issue) return <></>;
@@ -64,19 +64,17 @@ const ArchivedIssueDetailsPage = observer(() => {
      ) : (
        <div className="flex h-full overflow-hidden">
          <div className="h-full w-full space-y-3 divide-y-2 divide-custom-border-200 overflow-y-auto">
-            {workspaceSlug && projectId && archivedIssueId && (
-              <IssueDetailRoot
-                workspaceSlug={workspaceSlug.toString()}
-                projectId={projectId.toString()}
-                issueId={archivedIssueId.toString()}
-                is_archived
-              />
-            )}
+            <IssueDetailRoot
+              workspaceSlug={workspaceSlug}
+              projectId={projectId}
+              issueId={archivedIssueId}
+              is_archived
+            />
          </div>
        </div>
      )}
    </>
  );
-});
+}

-export default ArchivedIssueDetailsPage;
+export default observer(ArchivedIssueDetailsPage);
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/issues/(list)/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/issues/(list)/page.tsx
@@ -1,7 +1,6 @@
 "use client";

 import { observer } from "mobx-react";
-import { useParams } from "next/navigation";
 // components
 import { PageHead } from "@/components/core/page-title";
 import { ArchivedIssuesHeader } from "@/components/issues/archived-issues-header";
@@ -9,13 +8,19 @@ import { ArchivedIssueLayoutRoot } from "@/components/issues/issue-layouts/roots
 // hooks
 import { useProject } from "@/hooks/store/use-project";

-const ProjectArchivedIssuesPage = observer(() => {
-  // router
-  const { projectId } = useParams();
+type ProjectArchivedIssuesPageProps = {
+  params: {
+    workspaceSlug: string;
+    projectId: string;
+  };
+};
+
+function ProjectArchivedIssuesPage({ params }: ProjectArchivedIssuesPageProps) {
+  const { projectId } = params;
  // store hooks
  const { getProjectById } = useProject();
  // derived values
-  const project = projectId ? getProjectById(projectId.toString()) : undefined;
+  const project = getProjectById(projectId);
  const pageTitle = project?.name && `${project?.name} - Archived work items`;

  return (
@@ -27,6 +32,6 @@ const ProjectArchivedIssuesPage = observer(() => {
      </div>
    </>
  );
-});
+}

-export default ProjectArchivedIssuesPage;
+export default observer(ProjectArchivedIssuesPage);
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/modules/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/modules/page.tsx
@@ -1,20 +1,25 @@
 "use client";

 import { observer } from "mobx-react";
-import { useParams } from "next/navigation";
 // components
 import { PageHead } from "@/components/core/page-title";
 import { ArchivedModuleLayoutRoot, ArchivedModulesHeader } from "@/components/modules";
 // hooks
 import { useProject } from "@/hooks/store/use-project";

-const ProjectArchivedModulesPage = observer(() => {
-  // router
-  const { projectId } = useParams();
+type ProjectArchivedModulesPageProps = {
+  params: {
+    workspaceSlug: string;
+    projectId: string;
+  };
+};
+
+function ProjectArchivedModulesPage({ params }: ProjectArchivedModulesPageProps) {
+  const { projectId } = params;
  // store hooks
  const { getProjectById } = useProject();
  // derived values
-  const project = projectId ? getProjectById(projectId.toString()) : undefined;
+  const project = getProjectById(projectId);
  const pageTitle = project?.name && `${project?.name} - Archived modules`;

  return (
@@ -26,6 +31,6 @@ const ProjectArchivedModulesPage = observer(() => {
      </div>
    </>
  );
-});
+}

-export default ProjectArchivedModulesPage;
+export default observer(ProjectArchivedModulesPage);
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/[cycleId]/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/[cycleId]/page.tsx
@@ -1,7 +1,6 @@
 "use client";

 import { observer } from "mobx-react";
-import { useParams } from "next/navigation";
 // plane imports
 import { cn } from "@plane/utils";
 // components
@@ -18,10 +17,18 @@ import useLocalStorage from "@/hooks/use-local-storage";
 // assets
 import emptyCycle from "@/public/empty-state/cycle.svg";

-const CycleDetailPage = observer(() => {
+type CycleDetailPageProps = {
+  params: {
+    workspaceSlug: string;
+    projectId: string;
+    cycleId: string;
+  };
+};
+
+function CycleDetailPage({ params }: CycleDetailPageProps) {
+  const { workspaceSlug, projectId, cycleId } = params;
  // router
  const router = useAppRouter();
-  const { workspaceSlug, projectId, cycleId } = useParams();
  // store hooks
  const { getCycleById, loader } = useCycle();
  const { getProjectById } = useProject();
@@ -30,14 +37,14 @@ const CycleDetailPage = observer(() => {
  const { setValue, storedValue } = useLocalStorage("cycle_sidebar_collapsed", false);

  useCyclesDetails({
-    workspaceSlug: workspaceSlug?.toString(),
-    projectId: projectId.toString(),
-    cycleId: cycleId.toString(),
+    workspaceSlug,
+    projectId,
+    cycleId,
  });
  // derived values
  const isSidebarCollapsed = storedValue ? (storedValue === true ? true : false) : false;
-  const cycle = cycleId ? getCycleById(cycleId.toString()) : undefined;
-  const project = projectId ? getProjectById(projectId.toString()) : undefined;
+  const cycle = getCycleById(cycleId);
+  const project = getProjectById(projectId);
  const pageTitle = project?.name && cycle?.name ? `${project?.name} - ${cycle?.name}` : undefined;

  /**
@@ -78,9 +85,9 @@ const CycleDetailPage = observer(() => {
              >
                <CycleDetailsSidebar
                  handleClose={toggleSidebar}
-                  cycleId={cycleId.toString()}
-                  projectId={projectId.toString()}
-                  workspaceSlug={workspaceSlug.toString()}
+                  cycleId={cycleId}
+                  projectId={projectId}
+                  workspaceSlug={workspaceSlug}
                />
              </div>
            )}
@@ -89,6 +96,6 @@ const CycleDetailPage = observer(() => {
      )}
    </>
  );
-});
+}

-export default CycleDetailPage;
+export default observer(CycleDetailPage);
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(list)/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(list)/page.tsx
@@ -2,7 +2,6 @@

 import { useState } from "react";
 import { observer } from "mobx-react";
-import { useParams } from "next/navigation";
 // plane imports
 import { EUserPermissionsLevel, CYCLE_TRACKER_ELEMENTS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
@@ -26,7 +25,15 @@ import { useUserPermissions } from "@/hooks/store/user";
 import { useAppRouter } from "@/hooks/use-app-router";
 import { useResolvedAssetPath } from "@/hooks/use-resolved-asset-path";

-const ProjectCyclesPage = observer(() => {
+type ProjectCyclesPageProps = {
+  params: {
+    workspaceSlug: string;
+    projectId: string;
+  };
+};
+
+function ProjectCyclesPage({ params }: ProjectCyclesPageProps) {
+  const { workspaceSlug, projectId } = params;
  // states
  const [createModal, setCreateModal] = useState(false);
  // store hooks
@@ -34,7 +41,6 @@ const ProjectCyclesPage = observer(() => {
  const { getProjectById, currentProjectDetails } = useProject();
  // router
  const router = useAppRouter();
-  const { workspaceSlug, projectId } = useParams();
  // plane hooks
  const { t } = useTranslation();
  // cycle filters hook
@@ -42,7 +48,7 @@ const ProjectCyclesPage = observer(() => {
  const { allowPermissions } = useUserPermissions();
  // derived values
  const totalCycles = currentProjectCycleIds?.length ?? 0;
-  const project = projectId ? getProjectById(projectId?.toString()) : undefined;
+  const project = getProjectById(projectId);
  const pageTitle = project?.name ? `${project?.name} - ${t("common.cycles", { count: 2 })}` : undefined;
  const hasAdminLevelPermission = allowPermissions([EUserProjectRoles.ADMIN], EUserPermissionsLevel.PROJECT);
  const hasMemberLevelPermission = allowPermissions(
@@ -52,17 +58,14 @@ const ProjectCyclesPage = observer(() => {
  const resolvedPath = useResolvedAssetPath({ basePath: "/empty-state/disabled-feature/cycles" });

  const handleRemoveFilter = (key: keyof TCycleFilters, value: string | null) => {
-    if (!projectId) return;
    let newValues = currentProjectFilters?.[key] ?? [];

    if (!value) newValues = [];
    else newValues = newValues.filter((val) => val !== value);

-    updateFilters(projectId.toString(), { [key]: newValues });
+    updateFilters(projectId, { [key]: newValues });
  };

-  if (!workspaceSlug || !projectId) return <></>;
-
  // No access to cycle
  if (currentProjectDetails?.cycle_view === false)
    return (
@@ -89,8 +92,8 @@ const ProjectCyclesPage = observer(() => {
      <PageHead title={pageTitle} />
      <div className="w-full h-full">
        <CycleCreateUpdateModal
-          workspaceSlug={workspaceSlug.toString()}
-          projectId={projectId.toString()}
+          workspaceSlug={workspaceSlug}
+          projectId={projectId}
          isOpen={createModal}
          handleClose={() => setCreateModal(false)}
        />
@@ -120,18 +123,18 @@ const ProjectCyclesPage = observer(() => {
              <Header variant={EHeaderVariant.TERNARY}>
                <CycleAppliedFiltersList
                  appliedFilters={currentProjectFilters ?? {}}
-                  handleClearAllFilters={() => clearAllFilters(projectId.toString())}
+                  handleClearAllFilters={() => clearAllFilters(projectId)}
                  handleRemoveFilter={handleRemoveFilter}
                />
              </Header>
            )}

-            <CyclesView workspaceSlug={workspaceSlug.toString()} projectId={projectId.toString()} />
+            <CyclesView workspaceSlug={workspaceSlug} projectId={projectId} />
          </>
        )}
      </div>
    </>
  );
-});
+}

-export default ProjectCyclesPage;
+export default observer(ProjectCyclesPage);
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/intake/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/intake/page.tsx
@@ -1,6 +1,6 @@
 "use client";
 import { observer } from "mobx-react";
-import { useParams, useSearchParams } from "next/navigation";
+import { useSearchParams } from "next/navigation";
 // plane imports
 import { EUserPermissionsLevel } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
@@ -15,10 +15,17 @@ import { useUserPermissions } from "@/hooks/store/user";
 import { useAppRouter } from "@/hooks/use-app-router";
 import { useResolvedAssetPath } from "@/hooks/use-resolved-asset-path";

-const ProjectInboxPage = observer(() => {
+type ProjectInboxPageProps = {
+  params: {
+    workspaceSlug: string;
+    projectId: string;
+  };
+};
+
+function ProjectInboxPage({ params }: ProjectInboxPageProps) {
+  const { workspaceSlug, projectId } = params;
  /// router
  const router = useAppRouter();
-  const { workspaceSlug, projectId } = useParams();
  const searchParams = useSearchParams();
  const navigationTab = searchParams.get("currentTab");
  const inboxIssueId = searchParams.get("inboxIssueId");
@@ -72,15 +79,15 @@ const ProjectInboxPage = observer(() => {
      <PageHead title={pageTitle} />
      <div className="w-full h-full overflow-hidden">
        <InboxIssueRoot
-          workspaceSlug={workspaceSlug.toString()}
-          projectId={projectId.toString()}
-          inboxIssueId={inboxIssueId?.toString() || undefined}
+          workspaceSlug={workspaceSlug}
+          projectId={projectId}
+          inboxIssueId={inboxIssueId || undefined}
          inboxAccessible={currentProjectDetails?.inbox_view || false}
          navigationTab={currentNavigationTab}
        />
      </div>
    </div>
  );
-});
+}

-export default ProjectInboxPage;
+export default observer(ProjectInboxPage);
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(detail)/[issueId]/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(detail)/[issueId]/page.tsx
@@ -2,7 +2,6 @@

 import { useEffect } from "react";
 import { observer } from "mobx-react";
-import { useParams } from "next/navigation";
 import { useTheme } from "next-themes";
 import useSWR from "swr";
 import { useTranslation } from "@plane/i18n";
@@ -19,17 +18,22 @@ import { IssueService } from "@/services/issue/issue.service";

 const issueService = new IssueService();

-const IssueDetailsPage = observer(() => {
+type IssueDetailsPageProps = {
+  params: {
+    workspaceSlug: string;
+    projectId: string;
+    issueId: string;
+  };
+};
+
+function IssueDetailsPage({ params }: IssueDetailsPageProps) {
+  const { workspaceSlug, projectId, issueId } = params;
  const router = useAppRouter();
  const { t } = useTranslation();
-  const { workspaceSlug, projectId, issueId } = useParams();
  const { resolvedTheme } = useTheme();

-  const { data, isLoading, error } = useSWR(
-    workspaceSlug && projectId && issueId ? `ISSUE_DETAIL_META_${workspaceSlug}_${projectId}_${issueId}` : null,
-    workspaceSlug && projectId && issueId
-      ? () => issueService.getIssueMetaFromURL(workspaceSlug.toString(), projectId.toString(), issueId.toString())
-      : null
+  const { data, isLoading, error } = useSWR(`ISSUE_DETAIL_META_${workspaceSlug}_${projectId}_${issueId}`, () =>
+    issueService.getIssueMetaFromURL(workspaceSlug, projectId, issueId)
  );

  useEffect(() => {
@@ -59,6 +63,6 @@ const IssueDetailsPage = observer(() => {
      )}
    </div>
  );
-});
+}

-export default IssueDetailsPage;
+export default observer(IssueDetailsPage);
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(list)/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(list)/page.tsx
@@ -2,7 +2,6 @@

 import { observer } from "mobx-react";
 import Head from "next/head";
-import { useParams } from "next/navigation";
 // i18n
 import { useTranslation } from "@plane/i18n";
 // components
@@ -11,19 +10,22 @@ import { ProjectLayoutRoot } from "@/components/issues/issue-layouts/roots/proje
 // hooks
 import { useProject } from "@/hooks/store/use-project";

-const ProjectIssuesPage = observer(() => {
-  const { projectId } = useParams();
+type ProjectIssuesPageProps = {
+  params: {
+    workspaceSlug: string;
+    projectId: string;
+  };
+};
+
+function ProjectIssuesPage({ params }: ProjectIssuesPageProps) {
+  const { projectId } = params;
  // i18n
  const { t } = useTranslation();
  // store
  const { getProjectById } = useProject();

-  if (!projectId) {
-    return <></>;
-  }
-
  // derived values
-  const project = getProjectById(projectId.toString());
+  const project = getProjectById(projectId);
  const pageTitle = project?.name ? `${project?.name} - ${t("issue.label", { count: 2 })}` : undefined; // Count is for pluralization

  return (
@@ -39,6 +41,6 @@ const ProjectIssuesPage = observer(() => {
      </div>
    </>
  );
-});
+}

-export default ProjectIssuesPage;
+export default observer(ProjectIssuesPage);
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/[moduleId]/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/[moduleId]/page.tsx
@@ -1,7 +1,6 @@
 "use client";

 import { observer } from "mobx-react";
-import { useParams } from "next/navigation";
 import useSWR from "swr";
 // components
 import { cn } from "@plane/utils";
@@ -18,10 +17,18 @@ import useLocalStorage from "@/hooks/use-local-storage";
 // assets
 import emptyModule from "@/public/empty-state/module.svg";

-const ModuleIssuesPage = observer(() => {
+type ModuleIssuesPageProps = {
+  params: {
+    workspaceSlug: string;
+    projectId: string;
+    moduleId: string;
+  };
+};
+
+function ModuleIssuesPage({ params }: ModuleIssuesPageProps) {
+  const { workspaceSlug, projectId, moduleId } = params;
  // router
  const router = useAppRouter();
-  const { workspaceSlug, projectId, moduleId } = useParams();
  // store hooks
  const { fetchModuleDetails, getModuleById } = useModule();
  const { getProjectById } = useProject();
@@ -30,22 +37,18 @@ const ModuleIssuesPage = observer(() => {
  const { setValue, storedValue } = useLocalStorage("module_sidebar_collapsed", "false");
  const isSidebarCollapsed = storedValue ? (storedValue === "true" ? true : false) : false;
  // fetching module details
-  const { error } = useSWR(
-    workspaceSlug && projectId && moduleId ? `CURRENT_MODULE_DETAILS_${moduleId.toString()}` : null,
-    workspaceSlug && projectId && moduleId
-      ? () => fetchModuleDetails(workspaceSlug.toString(), projectId.toString(), moduleId.toString())
-      : null
+  const { error } = useSWR(`CURRENT_MODULE_DETAILS_${moduleId}`, () =>
+    fetchModuleDetails(workspaceSlug, projectId, moduleId)
  );
  // derived values
-  const projectModule = moduleId ? getModuleById(moduleId.toString()) : undefined;
-  const project = projectId ? getProjectById(projectId.toString()) : undefined;
+  const projectModule = getModuleById(moduleId);
+  const project = getProjectById(projectId);
  const pageTitle = project?.name && projectModule?.name ? `${project?.name} - ${projectModule?.name}` : undefined;

  const toggleSidebar = () => {
    setValue(`${!isSidebarCollapsed}`);
  };

-  if (!workspaceSlug || !projectId || !moduleId) return <></>;

  // const activeLayout = issuesFilter?.issueFilters?.displayFilters?.layout;

@@ -77,13 +80,13 @@ const ModuleIssuesPage = observer(() => {
                  "0px 1px 4px 0px rgba(0, 0, 0, 0.06), 0px 2px 4px 0px rgba(16, 24, 40, 0.06), 0px 1px 8px -1px rgba(16, 24, 40, 0.06)",
              }}
            >
-              <ModuleAnalyticsSidebar moduleId={moduleId.toString()} handleClose={toggleSidebar} />
+              <ModuleAnalyticsSidebar moduleId={moduleId} handleClose={toggleSidebar} />
            </div>
          )}
        </div>
      )}
    </>
  );
-});
+}

-export default ModuleIssuesPage;
+export default observer(ModuleIssuesPage);
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(list)/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(list)/page.tsx
@@ -2,7 +2,6 @@

 import { useCallback } from "react";
 import { observer } from "mobx-react";
-import { useParams } from "next/navigation";
 // types
 import { EUserPermissionsLevel } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
@@ -21,10 +20,17 @@ import { useUserPermissions } from "@/hooks/store/user";
 import { useAppRouter } from "@/hooks/use-app-router";
 import { useResolvedAssetPath } from "@/hooks/use-resolved-asset-path";

-const ProjectModulesPage = observer(() => {
+type ProjectModulesPageProps = {
+  params: {
+    workspaceSlug: string;
+    projectId: string;
+  };
+};
+
+function ProjectModulesPage({ params }: ProjectModulesPageProps) {
+  const { workspaceSlug, projectId } = params;
  // router
  const router = useAppRouter();
-  const { workspaceSlug, projectId } = useParams();
  // plane hooks
  const { t } = useTranslation();
  // store
@@ -33,25 +39,23 @@ const ProjectModulesPage = observer(() => {
    useModuleFilter();
  const { allowPermissions } = useUserPermissions();
  // derived values
-  const project = projectId ? getProjectById(projectId.toString()) : undefined;
+  const project = getProjectById(projectId);
  const pageTitle = project?.name ? `${project?.name} - Modules` : undefined;
  const canPerformEmptyStateActions = allowPermissions([EUserProjectRoles.ADMIN], EUserPermissionsLevel.PROJECT);
  const resolvedPath = useResolvedAssetPath({ basePath: "/empty-state/disabled-feature/modules" });

  const handleRemoveFilter = useCallback(
    (key: keyof TModuleFilters, value: string | null) => {
-      if (!projectId) return;
      let newValues = currentProjectFilters?.[key] ?? [];

      if (!value) newValues = [];
      else newValues = newValues.filter((val) => val !== value);

-      updateFilters(projectId.toString(), { [key]: newValues });
+      updateFilters(projectId, { [key]: newValues });
    },
    [currentProjectFilters, projectId, updateFilters]
  );

-  if (!workspaceSlug || !projectId) return <></>;

  // No access to
  if (currentProjectDetails?.module_view === false)
@@ -80,11 +84,10 @@ const ProjectModulesPage = observer(() => {
          <ModuleAppliedFiltersList
            appliedFilters={currentProjectFilters ?? {}}
            isFavoriteFilterApplied={currentProjectDisplayFilters?.favorites ?? false}
-            handleClearAllFilters={() => clearAllFilters(`${projectId}`)}
+            handleClearAllFilters={() => clearAllFilters(projectId)}
            handleRemoveFilter={handleRemoveFilter}
            handleDisplayFiltersUpdate={(val) => {
-              if (!projectId) return;
-              updateDisplayFilters(projectId.toString(), val);
+              updateDisplayFilters(projectId, val);
            }}
            alwaysAllowEditing
          />
@@ -93,6 +96,6 @@ const ProjectModulesPage = observer(() => {
      </div>
    </>
  );
-});
+}

-export default ProjectModulesPage;
+export default observer(ProjectModulesPage);
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(detail)/[pageId]/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(detail)/[pageId]/page.tsx
@@ -3,7 +3,6 @@
 import { useCallback, useEffect, useMemo } from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";
-import { useParams } from "next/navigation";
 import useSWR from "swr";
 // plane types
 import { getButtonStyling } from "@plane/propel/button";
@@ -35,27 +34,35 @@ const projectPageVersionService = new ProjectPageVersionService();

 const storeType = EPageStoreType.PROJECT;

-const PageDetailsPage = observer(() => {
+type PageDetailsPageProps = {
+  params: {
+    workspaceSlug: string;
+    projectId: string;
+    pageId: string;
+  };
+};
+
+function PageDetailsPage({ params }: PageDetailsPageProps) {
+  const { workspaceSlug, projectId, pageId } = params;
  // router
  const router = useAppRouter();
-  const { workspaceSlug, projectId, pageId } = useParams();
  // store hooks
  const { createPage, fetchPageDetails } = usePageStore(storeType);
  const page = usePage({
-    pageId: pageId?.toString() ?? "",
+    pageId,
    storeType,
  });
  const { getWorkspaceBySlug } = useWorkspace();
  const { uploadEditorAsset } = useEditorAsset();
  // derived values
-  const workspaceId = workspaceSlug ? (getWorkspaceBySlug(workspaceSlug.toString())?.id ?? "") : "";
+  const workspaceId = getWorkspaceBySlug(workspaceSlug)?.id ?? "";
  const { canCurrentUserAccessPage, id, name, updateDescription } = page ?? {};
  // entity search handler
  const fetchEntityCallback = useCallback(
    async (payload: TSearchEntityRequestPayload) =>
-      await workspaceService.searchEntity(workspaceSlug?.toString() ?? "", {
+      await workspaceService.searchEntity(workspaceSlug, {
        ...payload,
-        project_id: projectId?.toString() ?? "",
+        project_id: projectId,
      }),
    [projectId, workspaceSlug]
  );
@@ -63,10 +70,8 @@ const PageDetailsPage = observer(() => {
  const { getEditorFileHandlers } = useEditorConfig();
  // fetch page details
  const { error: pageDetailsError } = useSWR(
-    workspaceSlug && projectId && pageId ? `PAGE_DETAILS_${pageId}` : null,
-    workspaceSlug && projectId && pageId
-      ? () => fetchPageDetails(workspaceSlug?.toString(), projectId?.toString(), pageId.toString())
-      : null,
+    `PAGE_DETAILS_${pageId}`,
+    () => fetchPageDetails(workspaceSlug, projectId, pageId),
    {
      revalidateIfStale: true,
      revalidateOnFocus: true,
@@ -78,31 +83,18 @@ const PageDetailsPage = observer(() => {
    () => ({
      create: createPage,
      fetchAllVersions: async (pageId) => {
-        if (!workspaceSlug || !projectId) return;
-        return await projectPageVersionService.fetchAllVersions(workspaceSlug.toString(), projectId.toString(), pageId);
+        return await projectPageVersionService.fetchAllVersions(workspaceSlug, projectId, pageId);
      },
      fetchDescriptionBinary: async () => {
-        if (!workspaceSlug || !projectId || !id) return;
-        return await projectPageService.fetchDescriptionBinary(workspaceSlug.toString(), projectId.toString(), id);
+        if (!id) return;
+        return await projectPageService.fetchDescriptionBinary(workspaceSlug, projectId, id);
      },
      fetchEntity: fetchEntityCallback,
      fetchVersionDetails: async (pageId, versionId) => {
-        if (!workspaceSlug || !projectId) return;
-        return await projectPageVersionService.fetchVersionById(
-          workspaceSlug.toString(),
-          projectId.toString(),
-          pageId,
-          versionId
-        );
+        return await projectPageVersionService.fetchVersionById(workspaceSlug, projectId, pageId, versionId);
      },
      restoreVersion: async (pageId, versionId) => {
-        if (!workspaceSlug || !projectId) return;
-        await projectPageVersionService.restoreVersion(
-          workspaceSlug.toString(),
-          projectId.toString(),
-          pageId,
-          versionId
-        );
+        await projectPageVersionService.restoreVersion(workspaceSlug, projectId, pageId, versionId);
      },
      getRedirectionLink: (pageId) => {
        if (pageId) {
@@ -119,7 +111,7 @@ const PageDetailsPage = observer(() => {
  const pageRootConfig: TPageRootConfig = useMemo(
    () => ({
      fileHandler: getEditorFileHandlers({
-        projectId: projectId?.toString() ?? "",
+        projectId,
        uploadFile: async (blockId, file) => {
          const { asset_id } = await uploadEditorAsset({
            blockId,
@@ -128,13 +120,13 @@ const PageDetailsPage = observer(() => {
              entity_type: EFileAssetType.PAGE_DESCRIPTION,
            },
            file,
-            projectId: projectId?.toString() ?? "",
-            workspaceSlug: workspaceSlug?.toString() ?? "",
+            projectId,
+            workspaceSlug,
          });
          return asset_id;
        },
        workspaceId,
-        workspaceSlug: workspaceSlug?.toString() ?? "",
+        workspaceSlug,
      }),
    }),
    [getEditorFileHandlers, id, uploadEditorAsset, projectId, workspaceId, workspaceSlug]
@@ -143,8 +135,8 @@ const PageDetailsPage = observer(() => {
  const webhookConnectionParams: TWebhookConnectionQueryParams = useMemo(
    () => ({
      documentType: "project_page",
-      projectId: projectId?.toString() ?? "",
-      workspaceSlug: workspaceSlug?.toString() ?? "",
+      projectId,
+      workspaceSlug,
    }),
    [projectId, workspaceSlug]
  );
@@ -178,7 +170,7 @@ const PageDetailsPage = observer(() => {
      </div>
    );

-  if (!page || !workspaceSlug || !projectId) return null;
+  if (!page) return null;

  return (
    <>
@@ -191,14 +183,14 @@ const PageDetailsPage = observer(() => {
            storeType={storeType}
            page={page}
            webhookConnectionParams={webhookConnectionParams}
-            workspaceSlug={workspaceSlug.toString()}
-            projectId={projectId?.toString()}
+            workspaceSlug={workspaceSlug}
+            projectId={projectId}
          />
          <IssuePeekOverview />
        </div>
      </div>
    </>
  );
-});
+}

-export default PageDetailsPage;
+export default observer(PageDetailsPage);
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(detail)/layout.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(detail)/layout.tsx
@@ -1,7 +1,6 @@
 "use client";

 // component
-import { useParams } from "next/navigation";
 import useSWR from "swr";
 import { AppHeader } from "@/components/core/app-header";
 import { ContentWrapper } from "@/components/core/content-wrapper";
@@ -10,14 +9,19 @@ import { EPageStoreType, usePageStore } from "@/plane-web/hooks/store";
 // local components
 import { PageDetailsHeader } from "./header";

-export default function ProjectPageDetailsLayout({ children }: { children: React.ReactNode }) {
-  const { workspaceSlug, projectId } = useParams();
+type ProjectPageDetailsLayoutProps = {
+  params: {
+    workspaceSlug: string;
+    projectId: string;
+  };
+  children: React.ReactNode;
+};
+
+export default function ProjectPageDetailsLayout({ params, children }: ProjectPageDetailsLayoutProps) {
+  const { workspaceSlug, projectId } = params;
  const { fetchPagesList } = usePageStore(EPageStoreType.PROJECT);
  // fetching pages list
-  useSWR(
-    workspaceSlug && projectId ? `PROJECT_PAGES_${projectId}` : null,
-    workspaceSlug && projectId ? () => fetchPagesList(workspaceSlug.toString(), projectId.toString()) : null
-  );
+  useSWR(`PROJECT_PAGES_${projectId}`, () => fetchPagesList(workspaceSlug, projectId));
  return (
    <>
      <AppHeader header={<PageDetailsHeader />} />
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(list)/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(list)/page.tsx
@@ -1,7 +1,7 @@
 "use client";

 import { observer } from "mobx-react";
-import { useParams, useSearchParams } from "next/navigation";
+import { useSearchParams } from "next/navigation";
 // plane imports
 import { EUserPermissionsLevel } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
@@ -20,31 +20,43 @@ import { useResolvedAssetPath } from "@/hooks/use-resolved-asset-path";
 // plane web hooks
 import { EPageStoreType } from "@/plane-web/hooks/store";

-const ProjectPagesPage = observer(() => {
+type ProjectPagesPageProps = {
+  params: {
+    workspaceSlug: string;
+    projectId: string;
+  };
+};
+
+function getPageType(type: string | null): TPageNavigationTabs {
+  switch (type) {
+    case "private":
+      return "private";
+    case "archived":
+      return "archived";
+    default:
+      return "public";
+  }
+};
+
+function ProjectPagesPage({ params }: ProjectPagesPageProps) {
+  const { workspaceSlug, projectId } = params;
  // router
  const router = useAppRouter();
  const searchParams = useSearchParams();
  const type = searchParams.get("type");
-  const { workspaceSlug, projectId } = useParams();
  // plane hooks
  const { t } = useTranslation();
  // store hooks
  const { getProjectById, currentProjectDetails } = useProject();
  const { allowPermissions } = useUserPermissions();
  // derived values
-  const project = projectId ? getProjectById(projectId.toString()) : undefined;
+  const project = getProjectById(projectId);
  const pageTitle = project?.name ? `${project?.name} - Pages` : undefined;
+  const pageType = getPageType(type);
  const canPerformEmptyStateActions = allowPermissions([EUserProjectRoles.ADMIN], EUserPermissionsLevel.PROJECT);
  const resolvedPath = useResolvedAssetPath({ basePath: "/empty-state/disabled-feature/pages" });

-  const currentPageType = (): TPageNavigationTabs => {
-    const pageType = type?.toString();
-    if (pageType === "private") return "private";
-    if (pageType === "archived") return "archived";
-    return "public";
-  };

-  if (!workspaceSlug || !projectId) return <></>;

  // No access to cycle
  if (currentProjectDetails?.page_view === false)
@@ -68,15 +80,15 @@ const ProjectPagesPage = observer(() => {
    <>
      <PageHead title={pageTitle} />
      <PagesListView
-        pageType={currentPageType()}
-        projectId={projectId.toString()}
+        pageType={pageType}
+        projectId={projectId}
        storeType={EPageStoreType.PROJECT}
-        workspaceSlug={workspaceSlug.toString()}
+        workspaceSlug={workspaceSlug}
      >
-        <PagesListRoot pageType={currentPageType()} storeType={EPageStoreType.PROJECT} />
+        <PagesListRoot pageType={pageType} storeType={EPageStoreType.PROJECT} />
      </PagesListView>
    </>
  );
-});
+}

-export default ProjectPagesPage;
+export default observer(ProjectPagesPage);
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(detail)/[viewId]/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(detail)/[viewId]/page.tsx
@@ -1,7 +1,6 @@
 "use client";

 import { observer } from "mobx-react";
-import { useParams } from "next/navigation";
 import useSWR from "swr";
 // components
 import { EmptyState } from "@/components/common/empty-state";
@@ -14,24 +13,27 @@ import { useProjectView } from "@/hooks/store/use-project-view";
 import { useAppRouter } from "@/hooks/use-app-router";
 import emptyView from "@/public/empty-state/view.svg";

-const ProjectViewIssuesPage = observer(() => {
+type ProjectViewIssuesPageProps = {
+  params: {
+    workspaceSlug: string;
+    projectId: string;
+    viewId: string;
+  };
+};
+
+function ProjectViewIssuesPage({ params }: ProjectViewIssuesPageProps) {
+  const { workspaceSlug, projectId, viewId } = params;
  // router
  const router = useAppRouter();
-  const { workspaceSlug, projectId, viewId } = useParams();
  // store hooks
  const { fetchViewDetails, getViewById } = useProjectView();
  const { getProjectById } = useProject();
  // derived values
-  const projectView = viewId ? getViewById(viewId.toString()) : undefined;
-  const project = projectId ? getProjectById(projectId.toString()) : undefined;
+  const projectView = getViewById(viewId);
+  const project = getProjectById(projectId);
  const pageTitle = project?.name && projectView?.name ? `${project?.name} - ${projectView?.name}` : undefined;

-  const { error } = useSWR(
-    workspaceSlug && projectId && viewId ? `VIEW_DETAILS_${viewId.toString()}` : null,
-    workspaceSlug && projectId && viewId
-      ? () => fetchViewDetails(workspaceSlug.toString(), projectId.toString(), viewId.toString())
-      : null
-  );
+  const { error } = useSWR(`VIEW_DETAILS_${viewId}`, () => fetchViewDetails(workspaceSlug, projectId, viewId));

  if (error) {
    return (
@@ -53,6 +55,6 @@ const ProjectViewIssuesPage = observer(() => {
      <ProjectViewLayoutRoot />
    </>
  );
-});
+}

-export default ProjectViewIssuesPage;
+export default observer(ProjectViewIssuesPage);
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(list)/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(list)/page.tsx
@@ -2,7 +2,6 @@

 import { useCallback } from "react";
 import { observer } from "mobx-react";
-import { useParams } from "next/navigation";
 // components
 import { EUserPermissionsLevel } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
@@ -23,10 +22,17 @@ import { useUserPermissions } from "@/hooks/store/user";
 import { useAppRouter } from "@/hooks/use-app-router";
 import { useResolvedAssetPath } from "@/hooks/use-resolved-asset-path";

-const ProjectViewsPage = observer(() => {
+type ProjectViewsPageProps = {
+  params: {
+    workspaceSlug: string;
+    projectId: string;
+  };
+};
+
+function ProjectViewsPage({ params }: ProjectViewsPageProps) {
+  const { workspaceSlug, projectId } = params;
  // router
  const router = useAppRouter();
-  const { workspaceSlug, projectId } = useParams();
  // plane hooks
  const { t } = useTranslation();
  // store
@@ -34,7 +40,7 @@ const ProjectViewsPage = observer(() => {
  const { filters, updateFilters, clearAllFilters } = useProjectView();
  const { allowPermissions } = useUserPermissions();
  // derived values
-  const project = projectId ? getProjectById(projectId.toString()) : undefined;
+  const project = getProjectById(projectId);
  const pageTitle = project?.name ? `${project?.name} - Views` : undefined;
  const canPerformEmptyStateActions = allowPermissions([EUserProjectRoles.ADMIN], EUserPermissionsLevel.PROJECT);
  const resolvedPath = useResolvedAssetPath({ basePath: "/empty-state/disabled-feature/views" });
@@ -58,8 +64,6 @@ const ProjectViewsPage = observer(() => {

  const isFiltersApplied = calculateTotalFilters(filters?.filters ?? {}) !== 0;

-  if (!workspaceSlug || !projectId) return <></>;
-
  // No access to
  if (currentProjectDetails?.issue_views_view === false)
    return (
@@ -95,6 +99,6 @@ const ProjectViewsPage = observer(() => {
      <ProjectViewsList />
    </>
  );
-});
+}

-export default ProjectViewsPage;
+export default observer(ProjectViewsPage);
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/archives/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/archives/page.tsx
@@ -1,4 +1,7 @@
 import { ProjectPageRoot } from "@/plane-web/components/projects/page";

-const ProjectsPage = () => <ProjectPageRoot />;
+function ProjectsPage() {
+  return <ProjectPageRoot />;
+}
+
 export default ProjectsPage;
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/layout.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/layout.tsx
@@ -1,18 +1,24 @@
 "use client";

 import type { ReactNode } from "react";
-import { useParams } from "next/navigation";
 // plane web layouts
 import { ProjectAuthWrapper } from "@/plane-web/layouts/project-wrapper";

-const ProjectDetailLayout = ({ children }: { children: ReactNode }) => {
-  // router
-  const { workspaceSlug, projectId } = useParams();
+type ProjectDetailLayoutProps = {
+  children: ReactNode;
+  params: {
+    workspaceSlug: string;
+    projectId: string;
+  };
+};
+
+function ProjectDetailLayout({ children, params }: ProjectDetailLayoutProps) {
+  const { workspaceSlug, projectId } = params;
  return (
-    <ProjectAuthWrapper workspaceSlug={workspaceSlug?.toString()} projectId={projectId?.toString()}>
+    <ProjectAuthWrapper workspaceSlug={workspaceSlug} projectId={projectId}>
      {children}
    </ProjectAuthWrapper>
  );
-};
+}

 export default ProjectDetailLayout;
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(list)/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(list)/page.tsx
@@ -1,4 +1,7 @@
 import { ProjectPageRoot } from "@/plane-web/components/projects/page";

-const ProjectsPage = () => <ProjectPageRoot />;
+function ProjectsPage() {
+  return <ProjectPageRoot />;
+}
+
 export default ProjectsPage;
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/workspace-views/[globalViewId]/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/workspace-views/[globalViewId]/page.tsx
@@ -2,7 +2,6 @@

 import { useState } from "react";
 import { observer } from "mobx-react";
-import { useParams } from "next/navigation";
 // plane imports
 import { DEFAULT_GLOBAL_VIEWS_LIST } from "@plane/constants";
 // components
@@ -11,9 +10,15 @@ import { AllIssueLayoutRoot } from "@/components/issues/issue-layouts/roots/all-
 // hooks
 import { useWorkspace } from "@/hooks/store/use-workspace";

-const GlobalViewIssuesPage = observer(() => {
-  // router
-  const { globalViewId } = useParams();
+type GlobalViewIssuesPageProps = {
+  params: {
+    workspaceSlug: string;
+    globalViewId: string;
+  };
+};
+
+function GlobalViewIssuesPage({ params }: GlobalViewIssuesPageProps) {
+  const { globalViewId } = params;
  // store hooks
  const { currentWorkspace } = useWorkspace();
  // states
@@ -31,6 +36,6 @@ const GlobalViewIssuesPage = observer(() => {
      <AllIssueLayoutRoot isDefaultView={!!defaultView} isLoading={isLoading} toggleLoading={toggleLoading} />
    </>
  );
-});
+}

-export default GlobalViewIssuesPage;
+export default observer(GlobalViewIssuesPage);
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/workspace-views/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/workspace-views/page.tsx
@@ -14,7 +14,7 @@ import { GlobalViewsList } from "@/components/workspace/views/views-list";
 // hooks
 import { useWorkspace } from "@/hooks/store/use-workspace";

-const WorkspaceViewsPage = observer(() => {
+function WorkspaceViewsPage() {
  const [query, setQuery] = useState("");
  // store
  const { currentWorkspace } = useWorkspace();
@@ -47,6 +47,6 @@ const WorkspaceViewsPage = observer(() => {
      </div>
    </>
  );
-});
+}

-export default WorkspaceViewsPage;
+export default observer(WorkspaceViewsPage);
--- a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/billing/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/billing/page.tsx
@@ -12,7 +12,7 @@ import { useUserPermissions } from "@/hooks/store/user";
 // plane web components
 import { BillingRoot } from "@/plane-web/components/workspace/billing";

-const BillingSettingsPage = observer(() => {
+function BillingSettingsPage() {
  // store hooks
  const { workspaceUserInfo, allowPermissions } = useUserPermissions();
  const { currentWorkspace } = useWorkspace();
@@ -30,6 +30,6 @@ const BillingSettingsPage = observer(() => {
      <BillingRoot />
    </SettingsContentWrapper>
  );
-});
+}

-export default BillingSettingsPage;
+export default observer(BillingSettingsPage);
--- a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/exports/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/exports/page.tsx
@@ -15,7 +15,7 @@ import SettingsHeading from "@/components/settings/heading";
 import { useWorkspace } from "@/hooks/store/use-workspace";
 import { useUserPermissions } from "@/hooks/store/user";

-const ExportsPage = observer(() => {
+function ExportsPage() {
  // store hooks
  const { workspaceUserInfo, allowPermissions } = useUserPermissions();
  const { currentWorkspace } = useWorkspace();
@@ -51,6 +51,6 @@ const ExportsPage = observer(() => {
      </div>
    </SettingsContentWrapper>
  );
-});
+}

-export default ExportsPage;
+export default observer(ExportsPage);
--- a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/imports/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/imports/page.tsx
@@ -12,7 +12,7 @@ import { SettingsHeading } from "@/components/settings/heading";
 import { useWorkspace } from "@/hooks/store/use-workspace";
 import { useUserPermissions } from "@/hooks/store/user";

-const ImportsPage = observer(() => {
+function ImportsPage() {
  // router
  // store hooks
  const { currentWorkspace } = useWorkspace();
@@ -32,6 +32,6 @@ const ImportsPage = observer(() => {
      </section>
    </SettingsContentWrapper>
  );
-});
+}

-export default ImportsPage;
+export default observer(ImportsPage);
--- a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/integrations/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/integrations/page.tsx
@@ -1,6 +1,5 @@
 "use client";
 import { observer } from "mobx-react";
-import { useParams } from "next/navigation";
 import useSWR from "swr";
 // components
 import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
@@ -20,9 +19,8 @@ import { IntegrationService } from "@/services/integrations";

 const integrationService = new IntegrationService();

-const WorkspaceIntegrationsPage = observer(() => {
-  // router
-  const { workspaceSlug } = useParams();
+
+function WorkspaceIntegrationsPage() {
  // store hooks
  const { currentWorkspace } = useWorkspace();
  const { allowPermissions } = useUserPermissions();
@@ -30,8 +28,8 @@ const WorkspaceIntegrationsPage = observer(() => {
  // derived values
  const isAdmin = allowPermissions([EUserPermissions.ADMIN], EUserPermissionsLevel.WORKSPACE);
  const pageTitle = currentWorkspace?.name ? `${currentWorkspace.name} - Integrations` : undefined;
-  const { data: appIntegrations } = useSWR(workspaceSlug && isAdmin ? APP_INTEGRATIONS : null, () =>
-    workspaceSlug && isAdmin ? integrationService.getAppIntegrationsList() : null
+  const { data: appIntegrations } = useSWR(isAdmin ? APP_INTEGRATIONS : null, () =>
+    isAdmin ? integrationService.getAppIntegrationsList() : null
  );

  if (!isAdmin) return <NotAuthorizedView section="settings" className="h-auto" />;
@@ -53,6 +51,6 @@ const WorkspaceIntegrationsPage = observer(() => {
      </section>
    </SettingsContentWrapper>
  );
-});
+}

-export default WorkspaceIntegrationsPage;
+export default observer(WorkspaceIntegrationsPage);
--- a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/layout.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/layout.tsx
@@ -1,6 +1,6 @@
 "use client";

-import type { FC, ReactNode } from "react";
+import type { ReactNode } from "react";
 import { observer } from "mobx-react";
 import { usePathname } from "next/navigation";
 // constants
@@ -15,11 +15,11 @@ import { useUserPermissions } from "@/hooks/store/user";
 // local components
 import { WorkspaceSettingsSidebar } from "./sidebar";

-export interface IWorkspaceSettingLayout {
+type WorkspaceSettingLayoutProps = {
  children: ReactNode;
-}
+};

-const WorkspaceSettingLayout: FC<IWorkspaceSettingLayout> = observer((props) => {
+function WorkspaceSettingLayout(props: WorkspaceSettingLayoutProps) {
  const { children } = props;
  // store hooks
  const { workspaceUserInfo, getWorkspaceRoleByWorkspaceSlug } = useUserPermissions();
@@ -27,10 +27,10 @@ const WorkspaceSettingLayout: FC<IWorkspaceSettingLayout> = observer((props) =>
  const pathname = usePathname();
  // derived values
  const { workspaceSlug, accessKey } = pathnameToAccessKey(pathname);
-  const userWorkspaceRole = getWorkspaceRoleByWorkspaceSlug(workspaceSlug.toString());
+  const userWorkspaceRole = getWorkspaceRoleByWorkspaceSlug(workspaceSlug);

  let isAuthorized: boolean | string = false;
-  if (pathname && workspaceSlug && userWorkspaceRole) {
+  if (pathname && userWorkspaceRole) {
    isAuthorized = WORKSPACE_SETTINGS_ACCESS[accessKey]?.includes(userWorkspaceRole as EUserWorkspaceRoles);
  }

@@ -52,6 +52,6 @@ const WorkspaceSettingLayout: FC<IWorkspaceSettingLayout> = observer((props) =>
      </div>
    </>
  );
-});
+}

-export default WorkspaceSettingLayout;
+export default observer(WorkspaceSettingLayout);
--- a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/members/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/members/page.tsx
@@ -2,7 +2,6 @@

 import { useState } from "react";
 import { observer } from "mobx-react";
-import { useParams } from "next/navigation";
 import { Search } from "lucide-react";
 // types
 import {
@@ -33,12 +32,17 @@ import { useUserPermissions } from "@/hooks/store/user";
 import { BillingActionsButton } from "@/plane-web/components/workspace/billing/billing-actions-button";
 import { SendWorkspaceInvitationModal } from "@/plane-web/components/workspace/members/invite-modal";

-const WorkspaceMembersSettingsPage = observer(() => {
+type WorkspaceMembersSettingsPageProps = {
+  params: {
+    workspaceSlug: string;
+  };
+};
+
+function WorkspaceMembersSettingsPage({ params }: WorkspaceMembersSettingsPageProps) {
+  const { workspaceSlug } = params;
  // states
  const [inviteModal, setInviteModal] = useState(false);
  const [searchQuery, setSearchQuery] = useState<string>("");
-  // router
-  const { workspaceSlug } = useParams();
  // store hooks
  const { workspaceUserInfo, allowPermissions } = useUserPermissions();
  const {
@@ -55,9 +59,8 @@ const WorkspaceMembersSettingsPage = observer(() => {
  );

  const handleWorkspaceInvite = (data: IWorkspaceBulkInviteFormData) => {
-    if (!workspaceSlug) return;

-    return inviteMembersToWorkspace(workspaceSlug.toString(), data)
+    return inviteMembersToWorkspace(workspaceSlug, data)
      .then(() => {
        setInviteModal(false);
        captureSuccess({
@@ -162,6 +165,6 @@ const WorkspaceMembersSettingsPage = observer(() => {
      </section>
    </SettingsContentWrapper>
  );
-});
+}

-export default WorkspaceMembersSettingsPage;
+export default observer(WorkspaceMembersSettingsPage);
--- a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/page.tsx
@@ -10,7 +10,7 @@ import { WorkspaceDetails } from "@/components/workspace/settings/workspace-deta
 // hooks
 import { useWorkspace } from "@/hooks/store/use-workspace";

-const WorkspaceSettingsPage = observer(() => {
+function WorkspaceSettingsPage() {
  // store hooks
  const { currentWorkspace } = useWorkspace();
  const { t } = useTranslation();
@@ -25,6 +25,6 @@ const WorkspaceSettingsPage = observer(() => {
      <WorkspaceDetails />
    </SettingsContentWrapper>
  );
-});
+}

-export default WorkspaceSettingsPage;
+export default observer(WorkspaceSettingsPage);
--- a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/webhooks/[webhookId]/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/webhooks/[webhookId]/page.tsx
@@ -2,7 +2,6 @@

 import { useState } from "react";
 import { observer } from "mobx-react";
-import { useParams } from "next/navigation";
 import useSWR from "swr";
 import { EUserPermissions, EUserPermissionsLevel, WORKSPACE_SETTINGS_TRACKER_EVENTS } from "@plane/constants";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
@@ -19,11 +18,17 @@ import { useWebhook } from "@/hooks/store/use-webhook";
 import { useWorkspace } from "@/hooks/store/use-workspace";
 import { useUserPermissions } from "@/hooks/store/user";

-const WebhookDetailsPage = observer(() => {
+type WebhookDetailsPageProps = {
+  params: {
+    workspaceSlug: string;
+    webhookId: string;
+  };
+};
+
+function WebhookDetailsPage({ params }: WebhookDetailsPageProps) {
+  const { workspaceSlug, webhookId } = params;
  // states
  const [deleteWebhookModal, setDeleteWebhookModal] = useState(false);
-  // router
-  const { workspaceSlug, webhookId } = useParams();
  // mobx store
  const { currentWebhook, fetchWebhookById, updateWebhook } = useWebhook();
  const { currentWorkspace } = useWorkspace();
@@ -39,10 +44,8 @@ const WebhookDetailsPage = observer(() => {
  const pageTitle = currentWorkspace?.name ? `${currentWorkspace.name} - Webhook` : undefined;

  useSWR(
-    workspaceSlug && webhookId && isAdmin ? `WEBHOOK_DETAILS_${workspaceSlug}_${webhookId}` : null,
-    workspaceSlug && webhookId && isAdmin
-      ? () => fetchWebhookById(workspaceSlug.toString(), webhookId.toString())
-      : null
+    isAdmin ? `WEBHOOK_DETAILS_${workspaceSlug}_${webhookId}` : null,
+    isAdmin ? () => fetchWebhookById(workspaceSlug, webhookId) : null
  );

  const handleUpdateWebhook = async (formData: IWebhook) => {
@@ -56,7 +59,7 @@ const WebhookDetailsPage = observer(() => {
      issue: formData?.issue,
      issue_comment: formData?.issue_comment,
    };
-    await updateWebhook(workspaceSlug.toString(), formData.id, payload)
+    await updateWebhook(workspaceSlug, formData.id, payload)
      .then(() => {
        captureSuccess({
          eventName: WORKSPACE_SETTINGS_TRACKER_EVENTS.webhook_updated,
@@ -115,6 +118,6 @@ const WebhookDetailsPage = observer(() => {
      </div>
    </SettingsContentWrapper>
  );
-});
+}

-export default WebhookDetailsPage;
+export default observer(WebhookDetailsPage);
--- a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/webhooks/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/webhooks/page.tsx
@@ -2,7 +2,6 @@

 import React, { useEffect, useState } from "react";
 import { observer } from "mobx-react";
-import { useParams } from "next/navigation";
 import useSWR from "swr";
 // plane imports
 import { EUserPermissions, EUserPermissionsLevel, WORKSPACE_SETTINGS_TRACKER_ELEMENTS } from "@plane/constants";
@@ -22,11 +21,16 @@ import { useWorkspace } from "@/hooks/store/use-workspace";
 import { useUserPermissions } from "@/hooks/store/user";
 import { useResolvedAssetPath } from "@/hooks/use-resolved-asset-path";

-const WebhooksListPage = observer(() => {
+type WebhooksListPageProps = {
+  params: {
+    workspaceSlug: string;
+  };
+};
+
+function WebhooksListPage({ params }: WebhooksListPageProps) {
+  const { workspaceSlug } = params;
  // states
  const [showCreateWebhookModal, setShowCreateWebhookModal] = useState(false);
-  // router
-  const { workspaceSlug } = useParams();
  // plane hooks
  const { t } = useTranslation();
  // mobx store
@@ -38,8 +42,8 @@ const WebhooksListPage = observer(() => {
  const resolvedPath = useResolvedAssetPath({ basePath: "/empty-state/workspace-settings/webhooks" });

  useSWR(
-    workspaceSlug && canPerformWorkspaceAdminActions ? `WEBHOOKS_LIST_${workspaceSlug}` : null,
-    workspaceSlug && canPerformWorkspaceAdminActions ? () => fetchWebhooks(workspaceSlug.toString()) : null
+    canPerformWorkspaceAdminActions ? `WEBHOOKS_LIST_${workspaceSlug}` : null,
+    canPerformWorkspaceAdminActions ? () => fetchWebhooks(workspaceSlug) : null
  );

  const pageTitle = currentWorkspace?.name
@@ -112,6 +116,6 @@ const WebhooksListPage = observer(() => {
      </div>
    </SettingsContentWrapper>
  );
-});
+}

-export default WebhooksListPage;
+export default observer(WebhooksListPage);
--- a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/account/activity/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/account/activity/page.tsx
@@ -15,7 +15,7 @@ import { useResolvedAssetPath } from "@/hooks/use-resolved-asset-path";

 const PER_PAGE = 100;

-const ProfileActivityPage = observer(() => {
+function ProfileActivityPage() {
  // states
  const [pageCount, setPageCount] = useState(1);
  const [totalPages, setTotalPages] = useState(0);
@@ -84,6 +84,6 @@ const ProfileActivityPage = observer(() => {
      )}
    </>
  );
-});
+}

-export default ProfileActivityPage;
+export default observer(ProfileActivityPage);
--- a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/account/api-tokens/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/account/api-tokens/page.tsx
@@ -22,7 +22,7 @@ import { useResolvedAssetPath } from "@/hooks/use-resolved-asset-path";

 const apiTokenService = new APITokenService();

-const ApiTokensPage = observer(() => {
+function ApiTokensPage() {
  // states
  const [isCreateTokenModalOpen, setIsCreateTokenModalOpen] = useState(false);
  // router
@@ -107,6 +107,6 @@ const ApiTokensPage = observer(() => {
      </section>
    </div>
  );
-});
+}

-export default ApiTokensPage;
+export default observer(ApiTokensPage);
--- a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/account/layout.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/account/layout.tsx
@@ -10,11 +10,11 @@ import { SettingsMobileNav } from "@/components/settings/mobile";
 // local imports
 import { ProfileSidebar } from "./sidebar";

-type Props = {
+type ProfileSettingsLayoutProps = {
  children: ReactNode;
 };

-const ProfileSettingsLayout = observer((props: Props) => {
+function ProfileSettingsLayout(props: ProfileSettingsLayoutProps) {
  const { children } = props;
  // router
  const pathname = usePathname();
@@ -32,6 +32,6 @@ const ProfileSettingsLayout = observer((props: Props) => {
      </div>
    </>
  );
-});
+}

-export default ProfileSettingsLayout;
+export default observer(ProfileSettingsLayout);
--- a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/account/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/account/page.tsx
@@ -9,7 +9,7 @@ import { ProfileForm } from "@/components/profile/form";
 // hooks
 import { useUser } from "@/hooks/store/user";

-const ProfileSettingsPage = observer(() => {
+function ProfileSettingsPage() {
  const { t } = useTranslation();
  // store hooks
  const { data: currentUser, userProfile } = useUser();
@@ -27,6 +27,6 @@ const ProfileSettingsPage = observer(() => {
      <ProfileForm user={currentUser} profile={userProfile.data} />
    </>
  );
-});
+}

-export default ProfileSettingsPage;
+export default observer(ProfileSettingsPage);
--- a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/account/preferences/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/account/preferences/page.tsx
@@ -13,7 +13,7 @@ import { SettingsHeading } from "@/components/settings/heading";
 // hooks
 import { useUserProfile } from "@/hooks/store/user";

-const ProfileAppearancePage = observer(() => {
+function ProfileAppearancePage() {
  const { t } = useTranslation();
  // hooks
  const { data: userProfile } = useUserProfile();
@@ -44,6 +44,6 @@ const ProfileAppearancePage = observer(() => {
      )}
    </>
  );
-});
+}

-export default ProfileAppearancePage;
+export default observer(ProfileAppearancePage);
--- a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/account/security/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/account/security/page.tsx
@@ -42,7 +42,7 @@ const defaultShowPassword = {
  confirmPassword: false,
 };

-const SecurityPage = observer(() => {
+function SecurityPage() {
  // store
  const { data: currentUser, changePassword } = useUser();
  // states
@@ -255,6 +255,6 @@ const SecurityPage = observer(() => {
      </form>
    </>
  );
-});
+}

-export default SecurityPage;
+export default observer(SecurityPage);
--- a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/automations/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/automations/page.tsx
@@ -2,7 +2,6 @@

 import React from "react";
 import { observer } from "mobx-react";
-import { useParams } from "next/navigation";
 import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
@@ -20,11 +19,15 @@ import { useUserPermissions } from "@/hooks/store/user";
 // plane web imports
 import { CustomAutomationsRoot } from "@/plane-web/components/automations/root";

-const AutomationSettingsPage = observer(() => {
-  // router
-  const { workspaceSlug: workspaceSlugParam, projectId: projectIdParam } = useParams();
-  const workspaceSlug = workspaceSlugParam?.toString();
-  const projectId = projectIdParam?.toString();
+type AutomationSettingsPageProps = {
+  params: {
+    workspaceSlug: string;
+    projectId: string;
+  };
+};
+
+function AutomationSettingsPage({ params }: AutomationSettingsPageProps) {
+  const { workspaceSlug, projectId } = params;
  // store hooks
  const { workspaceUserInfo, allowPermissions } = useUserPermissions();
  const { currentProjectDetails: projectDetails, updateProject } = useProject();
@@ -37,7 +40,7 @@ const AutomationSettingsPage = observer(() => {
  const handleChange = async (formData: Partial<IProject>) => {
    if (!workspaceSlug || !projectId || !projectDetails) return;

-    await updateProject(workspaceSlug.toString(), projectId.toString(), formData).catch(() => {
+    await updateProject(workspaceSlug, projectId, formData).catch(() => {
      setToast({
        type: TOAST_TYPE.ERROR,
        title: "Error!",
@@ -67,6 +70,6 @@ const AutomationSettingsPage = observer(() => {
      <CustomAutomationsRoot projectId={projectId} workspaceSlug={workspaceSlug} />
    </SettingsContentWrapper>
  );
-});
+}

-export default AutomationSettingsPage;
+export default observer(AutomationSettingsPage);
--- a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/estimates/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/estimates/page.tsx
@@ -1,7 +1,6 @@
 "use client";

 import { observer } from "mobx-react";
-import { useParams } from "next/navigation";
 // components
 import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 import { NotAuthorizedView } from "@/components/auth-screens/not-authorized-view";
@@ -12,8 +11,15 @@ import { SettingsContentWrapper } from "@/components/settings/content-wrapper";
 import { useProject } from "@/hooks/store/use-project";
 import { useUserPermissions } from "@/hooks/store/user";

-const EstimatesSettingsPage = observer(() => {
-  const { workspaceSlug, projectId } = useParams();
+type EstimatesSettingsPageProps = {
+  params: {
+    workspaceSlug: string;
+    projectId: string;
+  };
+};
+
+function EstimatesSettingsPage({ params }: EstimatesSettingsPageProps) {
+  const { workspaceSlug, projectId } = params;
  // store
  const { currentProjectDetails } = useProject();
  const { workspaceUserInfo, allowPermissions } = useUserPermissions();
@@ -22,8 +28,6 @@ const EstimatesSettingsPage = observer(() => {
  const pageTitle = currentProjectDetails?.name ? `${currentProjectDetails?.name} - Estimates` : undefined;
  const canPerformProjectAdminActions = allowPermissions([EUserPermissions.ADMIN], EUserPermissionsLevel.PROJECT);

-  if (!workspaceSlug || !projectId) return <></>;
-
  if (workspaceUserInfo && !canPerformProjectAdminActions) {
    return <NotAuthorizedView section="settings" isProjectView className="h-auto" />;
  }
@@ -32,14 +36,10 @@ const EstimatesSettingsPage = observer(() => {
    <SettingsContentWrapper>
      <PageHead title={pageTitle} />
      <div className={`w-full ${canPerformProjectAdminActions ? "" : "pointer-events-none opacity-60"}`}>
-        <EstimateRoot
-          workspaceSlug={workspaceSlug?.toString()}
-          projectId={projectId?.toString()}
-          isAdmin={canPerformProjectAdminActions}
-        />
+        <EstimateRoot workspaceSlug={workspaceSlug} projectId={projectId} isAdmin={canPerformProjectAdminActions} />
      </div>
    </SettingsContentWrapper>
  );
-});
+}

-export default EstimatesSettingsPage;
+export default observer(EstimatesSettingsPage);
--- a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/features/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/features/page.tsx
@@ -1,7 +1,6 @@
 "use client";

 import { observer } from "mobx-react";
-import { useParams } from "next/navigation";
 // components
 import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 import { NotAuthorizedView } from "@/components/auth-screens/not-authorized-view";
@@ -12,8 +11,15 @@ import { SettingsContentWrapper } from "@/components/settings/content-wrapper";
 import { useProject } from "@/hooks/store/use-project";
 import { useUserPermissions } from "@/hooks/store/user";

-const FeaturesSettingsPage = observer(() => {
-  const { workspaceSlug, projectId } = useParams();
+type FeaturesSettingsPageProps = {
+  params: {
+    workspaceSlug: string;
+    projectId: string;
+  };
+};
+
+function FeaturesSettingsPage({ params }: FeaturesSettingsPageProps) {
+  const { workspaceSlug, projectId } = params;
  // store
  const { workspaceUserInfo, allowPermissions } = useUserPermissions();

@@ -22,8 +28,6 @@ const FeaturesSettingsPage = observer(() => {
  const pageTitle = currentProjectDetails?.name ? `${currentProjectDetails?.name} - Features` : undefined;
  const canPerformProjectAdminActions = allowPermissions([EUserPermissions.ADMIN], EUserPermissionsLevel.PROJECT);

-  if (!workspaceSlug || !projectId) return null;
-
  if (workspaceUserInfo && !canPerformProjectAdminActions) {
    return <NotAuthorizedView section="settings" isProjectView className="h-auto" />;
  }
@@ -33,13 +37,13 @@ const FeaturesSettingsPage = observer(() => {
      <PageHead title={pageTitle} />
      <section className={`w-full ${canPerformProjectAdminActions ? "" : "opacity-60"}`}>
        <ProjectFeaturesList
-          workspaceSlug={workspaceSlug.toString()}
-          projectId={projectId.toString()}
+          workspaceSlug={workspaceSlug}
+          projectId={projectId}
          isAdmin={canPerformProjectAdminActions}
        />
      </section>
    </SettingsContentWrapper>
  );
-});
+}

-export default FeaturesSettingsPage;
+export default observer(FeaturesSettingsPage);
--- a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/labels/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/labels/page.tsx
@@ -14,7 +14,7 @@ import { SettingsContentWrapper } from "@/components/settings/content-wrapper";
 import { useProject } from "@/hooks/store/use-project";
 import { useUserPermissions } from "@/hooks/store/user";

-const LabelsSettingsPage = observer(() => {
+function LabelsSettingsPage() {
  // store hooks
  const { currentProjectDetails } = useProject();
  const { workspaceUserInfo, allowPermissions } = useUserPermissions();
@@ -54,6 +54,6 @@ const LabelsSettingsPage = observer(() => {
      </div>
    </SettingsContentWrapper>
  );
-});
+}

-export default LabelsSettingsPage;
+export default observer(LabelsSettingsPage);
--- a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/members/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/members/page.tsx
@@ -1,7 +1,6 @@
 "use client";

 import { observer } from "mobx-react";
-import { useParams } from "next/navigation";
 // plane imports
 import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
@@ -19,17 +18,20 @@ import { useUserPermissions } from "@/hooks/store/user";
 import { ProjectTeamspaceList } from "@/plane-web/components/projects/teamspaces/teamspace-list";
 import { getProjectSettingsPageLabelI18nKey } from "@/plane-web/helpers/project-settings";

-const MembersSettingsPage = observer(() => {
-  // router
-  const { workspaceSlug: routerWorkspaceSlug, projectId: routerProjectId } = useParams();
+type MembersSettingsPageProps = {
+  params: {
+    workspaceSlug: string;
+    projectId: string;
+  };
+};
+
+function MembersSettingsPage({ params }: MembersSettingsPageProps) {
+  const { workspaceSlug, projectId } = params;
  // plane hooks
  const { t } = useTranslation();
  // store hooks
  const { currentProjectDetails } = useProject();
  const { workspaceUserInfo, allowPermissions } = useUserPermissions();
-  // derived values
-  const projectId = routerProjectId?.toString();
-  const workspaceSlug = routerWorkspaceSlug?.toString();
  const pageTitle = currentProjectDetails?.name ? `${currentProjectDetails?.name} - Members` : undefined;
  const isProjectMemberOrAdmin = allowPermissions(
    [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
@@ -51,6 +53,6 @@ const MembersSettingsPage = observer(() => {
      <ProjectMemberList projectId={projectId} workspaceSlug={workspaceSlug} />
    </SettingsContentWrapper>
  );
-});
+}

-export default MembersSettingsPage;
+export default observer(MembersSettingsPage);
--- a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/page.tsx
@@ -2,7 +2,6 @@

 import { useState } from "react";
 import { observer } from "mobx-react";
-import { useParams } from "next/navigation";
 import useSWR from "swr";
 // plane imports
 import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
@@ -19,40 +18,38 @@ import { SettingsContentWrapper } from "@/components/settings/content-wrapper";
 import { useProject } from "@/hooks/store/use-project";
 import { useUserPermissions } from "@/hooks/store/user";

-const ProjectSettingsPage = observer(() => {
+type ProjectSettingsPageProps = {
+  params: {
+    workspaceSlug: string;
+    projectId: string;
+  };
+};
+
+function ProjectSettingsPage({ params }: ProjectSettingsPageProps) {
+  const { workspaceSlug, projectId } = params;
  // states
  const [selectProject, setSelectedProject] = useState<string | null>(null);
  const [archiveProject, setArchiveProject] = useState<boolean>(false);
-  // router
-  const { workspaceSlug, projectId } = useParams();
  // store hooks
  const { currentProjectDetails, fetchProjectDetails } = useProject();
  const { allowPermissions } = useUserPermissions();

  // api call to fetch project details
  // TODO: removed this API if not necessary
-  const { isLoading } = useSWR(
-    workspaceSlug && projectId ? `PROJECT_DETAILS_${projectId}` : null,
-    workspaceSlug && projectId ? () => fetchProjectDetails(workspaceSlug.toString(), projectId.toString()) : null
-  );
+  const { isLoading } = useSWR(`PROJECT_DETAILS_${projectId}`, () => fetchProjectDetails(workspaceSlug, projectId));
  // derived values
-  const isAdmin = allowPermissions(
-    [EUserPermissions.ADMIN],
-    EUserPermissionsLevel.PROJECT,
-    workspaceSlug.toString(),
-    projectId.toString()
-  );
+  const isAdmin = allowPermissions([EUserPermissions.ADMIN], EUserPermissionsLevel.PROJECT, workspaceSlug, projectId);

  const pageTitle = currentProjectDetails?.name ? `${currentProjectDetails?.name} - General Settings` : undefined;

  return (
    <SettingsContentWrapper>
      <PageHead title={pageTitle} />
-      {currentProjectDetails && workspaceSlug && projectId && (
+      {currentProjectDetails && (
        <>
          <ArchiveRestoreProjectModal
-            workspaceSlug={workspaceSlug.toString()}
-            projectId={projectId.toString()}
+            workspaceSlug={workspaceSlug}
+            projectId={projectId}
            isOpen={archiveProject}
            onClose={() => setArchiveProject(false)}
            archive
@@ -66,11 +63,11 @@ const ProjectSettingsPage = observer(() => {
      )}

      <div className={`w-full ${isAdmin ? "" : "opacity-60"}`}>
-        {currentProjectDetails && workspaceSlug && projectId && !isLoading ? (
+        {currentProjectDetails && !isLoading ? (
          <ProjectDetailsForm
            project={currentProjectDetails}
-            workspaceSlug={workspaceSlug.toString()}
-            projectId={projectId.toString()}
+            workspaceSlug={workspaceSlug}
+            projectId={projectId}
            isAdmin={isAdmin}
          />
        ) : (
@@ -92,6 +89,6 @@ const ProjectSettingsPage = observer(() => {
      </div>
    </SettingsContentWrapper>
  );
-});
+}

-export default ProjectSettingsPage;
+export default observer(ProjectSettingsPage);
--- a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/states/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/states/page.tsx
@@ -1,7 +1,6 @@
 "use client";

 import { observer } from "mobx-react";
-import { useParams } from "next/navigation";
 import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 // components
@@ -14,8 +13,15 @@ import { SettingsHeading } from "@/components/settings/heading";
 import { useProject } from "@/hooks/store/use-project";
 import { useUserPermissions } from "@/hooks/store/user";

-const StatesSettingsPage = observer(() => {
-  const { workspaceSlug, projectId } = useParams();
+type StatesSettingsPageProps = {
+  params: {
+    workspaceSlug: string;
+    projectId: string;
+  };
+};
+
+function StatesSettingsPage({ params }: StatesSettingsPageProps) {
+  const { workspaceSlug, projectId } = params;
  // store
  const { currentProjectDetails } = useProject();
  const { workspaceUserInfo, allowPermissions } = useUserPermissions();
@@ -42,12 +48,10 @@ const StatesSettingsPage = observer(() => {
          title={t("project_settings.states.heading")}
          description={t("project_settings.states.description")}
        />
-        {workspaceSlug && projectId && (
-          <ProjectStateRoot workspaceSlug={workspaceSlug.toString()} projectId={projectId.toString()} />
-        )}
+        <ProjectStateRoot workspaceSlug={workspaceSlug} projectId={projectId} />
      </div>
    </SettingsContentWrapper>
  );
-});
+}

-export default StatesSettingsPage;
+export default observer(StatesSettingsPage);
--- a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/layout.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/layout.tsx
@@ -3,7 +3,7 @@
 import type { ReactNode } from "react";
 import { useEffect } from "react";
 import { observer } from "mobx-react";
-import { useParams, usePathname } from "next/navigation";
+import { usePathname } from "next/navigation";
 // components
 import { getProjectActivePath } from "@/components/settings/helper";
 import { SettingsMobileNav } from "@/components/settings/mobile";
@@ -12,16 +12,19 @@ import { useProject } from "@/hooks/store/use-project";
 import { useAppRouter } from "@/hooks/use-app-router";
 import { ProjectAuthWrapper } from "@/plane-web/layouts/project-wrapper";

-type Props = {
+type ProjectSettingsLayoutProps = {
  children: ReactNode;
+  params: {
+    workspaceSlug: string;
+    projectId?: string;
+  };
 };

-const ProjectSettingsLayout = observer((props: Props) => {
-  const { children } = props;
+function ProjectSettingsLayout({ children, params }: ProjectSettingsLayoutProps) {
+  const { workspaceSlug, projectId } = params;
  // router
  const router = useAppRouter();
  const pathname = usePathname();
-  const { workspaceSlug, projectId } = useParams();
  const { joinedProjectIds } = useProject();

  useEffect(() => {
@@ -34,14 +37,22 @@ const ProjectSettingsLayout = observer((props: Props) => {
  return (
    <>
      <SettingsMobileNav hamburgerContent={ProjectSettingsSidebar} activePath={getProjectActivePath(pathname) || ""} />
-      <ProjectAuthWrapper workspaceSlug={workspaceSlug?.toString()} projectId={projectId?.toString()}>
+      {projectId ? (
+        <ProjectAuthWrapper workspaceSlug={workspaceSlug} projectId={projectId}>
+          <div className="relative flex h-full w-full">
+            <div className="hidden md:block">
+              <ProjectSettingsSidebar />
+            </div>
+            <div className="w-full h-full overflow-y-scroll md:pt-page-y">{children}</div>
+          </div>
+        </ProjectAuthWrapper>
+      ) : (
        <div className="relative flex h-full w-full">
-          <div className="hidden md:block">{projectId && <ProjectSettingsSidebar />}</div>
          <div className="w-full h-full overflow-y-scroll md:pt-page-y">{children}</div>
        </div>
-      </ProjectAuthWrapper>
+      )}
    </>
  );
-});
+}

-export default ProjectSettingsLayout;
+export default observer(ProjectSettingsLayout);
--- a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/page.tsx
@@ -7,7 +7,7 @@ import { Button, getButtonStyling } from "@plane/propel/button";
 import { cn } from "@plane/utils";
 import { useCommandPalette } from "@/hooks/store/use-command-palette";

-const ProjectSettingsPage = () => {
+function ProjectSettingsPage() {
  // store hooks
  const { resolvedTheme } = useTheme();
  const { toggleCreateProjectModal } = useCommandPalette();
@@ -38,6 +38,6 @@ const ProjectSettingsPage = () => {
      </div>
    </div>
  );
-};
+}

 export default ProjectSettingsPage;
--- a/apps/web/app/(all)/accounts/forgot-password/page.tsx
+++ b/apps/web/app/(all)/accounts/forgot-password/page.tsx
@@ -10,15 +10,17 @@ import { EAuthModes, EPageTypes } from "@/helpers/authentication.helper";
 import DefaultLayout from "@/layouts/default-layout";
 import { AuthenticationWrapper } from "@/lib/wrappers/authentication-wrapper";

-const ForgotPasswordPage = observer(() => (
-  <DefaultLayout>
-    <AuthenticationWrapper pageType={EPageTypes.NON_AUTHENTICATED}>
-      <div className="relative z-10 flex flex-col items-center w-screen h-screen overflow-hidden overflow-y-auto pt-6 pb-10 px-8">
-        <AuthHeader type={EAuthModes.SIGN_IN} />
-        <ForgotPasswordForm />
-      </div>
-    </AuthenticationWrapper>
-  </DefaultLayout>
-));
+function ForgotPasswordPage() {
+  return (
+    <DefaultLayout>
+      <AuthenticationWrapper pageType={EPageTypes.NON_AUTHENTICATED}>
+        <div className="relative z-10 flex flex-col items-center w-screen h-screen overflow-hidden overflow-y-auto pt-6 pb-10 px-8">
+          <AuthHeader type={EAuthModes.SIGN_IN} />
+          <ForgotPasswordForm />
+        </div>
+      </AuthenticationWrapper>
+    </DefaultLayout>
+  );
+}

-export default ForgotPasswordPage;
+export default observer(ForgotPasswordPage);
--- a/apps/web/app/(all)/accounts/reset-password/page.tsx
+++ b/apps/web/app/(all)/accounts/reset-password/page.tsx
@@ -11,15 +11,17 @@ import { EPageTypes } from "@/helpers/authentication.helper";
 import DefaultLayout from "@/layouts/default-layout";
 import { AuthenticationWrapper } from "@/lib/wrappers/authentication-wrapper";

-const ResetPasswordPage = () => (
-  <DefaultLayout>
-    <AuthenticationWrapper pageType={EPageTypes.NON_AUTHENTICATED}>
-      <div className="relative z-10 flex flex-col items-center w-screen h-screen overflow-hidden overflow-y-auto pt-6 pb-10 px-8">
-        <AuthHeader type={EAuthModes.SIGN_IN} />
-        <ResetPasswordForm />
-      </div>
-    </AuthenticationWrapper>
-  </DefaultLayout>
-);
+function ResetPasswordPage() {
+  return (
+    <DefaultLayout>
+      <AuthenticationWrapper pageType={EPageTypes.NON_AUTHENTICATED}>
+        <div className="relative z-10 flex flex-col items-center w-screen h-screen overflow-hidden overflow-y-auto pt-6 pb-10 px-8">
+          <AuthHeader type={EAuthModes.SIGN_IN} />
+          <ResetPasswordForm />
+        </div>
+      </AuthenticationWrapper>
+    </DefaultLayout>
+  );
+}

 export default ResetPasswordPage;
--- a/apps/web/app/(all)/accounts/set-password/page.tsx
+++ b/apps/web/app/(all)/accounts/set-password/page.tsx
@@ -11,15 +11,17 @@ import { EPageTypes } from "@/helpers/authentication.helper";
 import DefaultLayout from "@/layouts/default-layout";
 import { AuthenticationWrapper } from "@/lib/wrappers/authentication-wrapper";

-const SetPasswordPage = () => (
-  <DefaultLayout>
-    <AuthenticationWrapper pageType={EPageTypes.SET_PASSWORD}>
-      <div className="relative z-10 flex flex-col items-center w-screen h-screen overflow-hidden overflow-y-auto pt-6 pb-10 px-8">
-        <AuthHeader type={EAuthModes.SIGN_IN} />
-        <ResetPasswordForm />
-      </div>
-    </AuthenticationWrapper>
-  </DefaultLayout>
-);
+function SetPasswordPage() {
+  return (
+    <DefaultLayout>
+      <AuthenticationWrapper pageType={EPageTypes.SET_PASSWORD}>
+        <div className="relative z-10 flex flex-col items-center w-screen h-screen overflow-hidden overflow-y-auto pt-6 pb-10 px-8">
+          <AuthHeader type={EAuthModes.SIGN_IN} />
+          <ResetPasswordForm />
+        </div>
+      </AuthenticationWrapper>
+    </DefaultLayout>
+  );
+}

 export default SetPasswordPage;
--- a/apps/web/app/(all)/create-workspace/page.tsx
+++ b/apps/web/app/(all)/create-workspace/page.tsx
@@ -21,7 +21,7 @@ import { getIsWorkspaceCreationDisabled } from "@/plane-web/helpers/instance.hel
 // images
 import WorkspaceCreationDisabled from "@/public/workspace/workspace-creation-disabled.png";

-const CreateWorkspacePage = observer(() => {
+function CreateWorkspacePage() {
  const { t } = useTranslation();
  // router
  const router = useAppRouter();
@@ -103,6 +103,6 @@ const CreateWorkspacePage = observer(() => {
      </div>
    </AuthenticationWrapper>
  );
-});
+}

-export default CreateWorkspacePage;
+export default observer(CreateWorkspacePage);
--- a/apps/web/app/(all)/installations/[provider]/page.tsx
+++ b/apps/web/app/(all)/installations/[provider]/page.tsx
@@ -1,7 +1,7 @@
 "use client";

 import React, { useEffect } from "react";
-import { useParams, useSearchParams } from "next/navigation";
+import { useSearchParams } from "next/navigation";
 // ui
 import { LogoSpinner } from "@/components/common/logo-spinner";
 // services
@@ -10,9 +10,14 @@ import { AppInstallationService } from "@/services/app_installation.service";
 // services
 const appInstallationService = new AppInstallationService();

-export default function AppPostInstallation() {
-  // params
-  const { provider } = useParams();
+type AppPostInstallationProps = {
+  params: {
+    provider: string;
+  };
+};
+
+export default function AppPostInstallation({ params }: AppPostInstallationProps) {
+  const { provider } = params;
  // query params
  const searchParams = useSearchParams();
  const installation_id = searchParams.get("installation_id");
--- a/apps/web/app/(all)/invitations/page.tsx
+++ b/apps/web/app/(all)/invitations/page.tsx
@@ -34,7 +34,7 @@ import emptyInvitation from "@/public/empty-state/invitation.svg";

 const workspaceService = new WorkspaceService();

-const UserInvitationsPage = observer(() => {
+function UserInvitationsPage() {
  // states
  const [invitationsRespond, setInvitationsRespond] = useState<string[]>([]);
  const [isJoiningWorkspaces, setIsJoiningWorkspaces] = useState(false);
@@ -220,6 +220,6 @@ const UserInvitationsPage = observer(() => {
      </div>
    </AuthenticationWrapper>
  );
-});
+}

-export default UserInvitationsPage;
+export default observer(UserInvitationsPage);
--- a/apps/web/app/(all)/onboarding/page.tsx
+++ b/apps/web/app/(all)/onboarding/page.tsx
@@ -20,7 +20,7 @@ import { WorkspaceService } from "@/plane-web/services";

 const workspaceService = new WorkspaceService();

-const OnboardingPage = observer(() => {
+function OnboardingPage() {
  // store hooks
  const { data: user } = useUser();
  const { fetchWorkspaces } = useWorkspace();
@@ -57,6 +57,6 @@ const OnboardingPage = observer(() => {
      </div>
    </AuthenticationWrapper>
  );
-});
+}

-export default OnboardingPage;
+export default observer(OnboardingPage);
--- a/apps/web/app/(all)/profile/activity/page.tsx
+++ b/apps/web/app/(all)/profile/activity/page.tsx
@@ -16,7 +16,7 @@ import { useResolvedAssetPath } from "@/hooks/use-resolved-asset-path";

 const PER_PAGE = 100;

-const ProfileActivityPage = observer(() => {
+function ProfileActivityPage() {
  // states
  const [pageCount, setPageCount] = useState(1);
  const [totalPages, setTotalPages] = useState(0);
@@ -76,6 +76,6 @@ const ProfileActivityPage = observer(() => {
      </ProfileSettingContentWrapper>
    </>
  );
-});
+}

-export default ProfileActivityPage;
+export default observer(ProfileActivityPage);
--- a/apps/web/app/(all)/profile/appearance/page.tsx
+++ b/apps/web/app/(all)/profile/appearance/page.tsx
@@ -20,7 +20,7 @@ import { ProfileSettingContentWrapper } from "@/components/profile/profile-setti
 // hooks
 import { useUserProfile } from "@/hooks/store/user";

-const ProfileAppearancePage = observer(() => {
+function ProfileAppearancePage() {
  const { t } = useTranslation();
  const { setTheme } = useTheme();
  // states
@@ -86,6 +86,6 @@ const ProfileAppearancePage = observer(() => {
      )}
    </>
  );
-});
+}

-export default ProfileAppearancePage;
+export default observer(ProfileAppearancePage);
--- a/apps/web/app/(all)/profile/layout.tsx
+++ b/apps/web/app/(all)/profile/layout.tsx
@@ -8,11 +8,11 @@ import { AuthenticationWrapper } from "@/lib/wrappers/authentication-wrapper";
 // layout
 import { ProfileLayoutSidebar } from "./sidebar";

-type Props = {
+type ProfileSettingsLayoutProps = {
  children: ReactNode;
 };

-export default function ProfileSettingsLayout(props: Props) {
+export default function ProfileSettingsLayout(props: ProfileSettingsLayoutProps) {
  const { children } = props;

  return (
--- a/apps/web/app/(all)/profile/page.tsx
+++ b/apps/web/app/(all)/profile/page.tsx
@@ -11,7 +11,7 @@ import { ProfileSettingContentWrapper } from "@/components/profile/profile-setti
 // hooks
 import { useUser } from "@/hooks/store/user";

-const ProfileSettingsPage = observer(() => {
+function ProfileSettingsPage() {
  const { t } = useTranslation();
  // store hooks
  const { data: currentUser, userProfile } = useUser();
@@ -31,6 +31,6 @@ const ProfileSettingsPage = observer(() => {
      </ProfileSettingContentWrapper>
    </>
  );
-});
+}

-export default ProfileSettingsPage;
+export default observer(ProfileSettingsPage);
--- a/apps/web/app/(all)/profile/security/page.tsx
+++ b/apps/web/app/(all)/profile/security/page.tsx
@@ -43,7 +43,7 @@ const defaultShowPassword = {
  confirmPassword: false,
 };

-const SecurityPage = observer(() => {
+function SecurityPage() {
  // store
  const { data: currentUser, changePassword } = useUser();
  // states
@@ -254,6 +254,6 @@ const SecurityPage = observer(() => {
      </ProfileSettingContentWrapper>
    </>
  );
-});
+}

-export default SecurityPage;
+export default observer(SecurityPage);
--- a/apps/web/app/(all)/sign-up/page.tsx
+++ b/apps/web/app/(all)/sign-up/page.tsx
@@ -8,12 +8,14 @@ import { EAuthModes, EPageTypes } from "@/helpers/authentication.helper";
 import DefaultLayout from "@/layouts/default-layout";
 import { AuthenticationWrapper } from "@/lib/wrappers/authentication-wrapper";

-const SignUpPage = () => (
-  <DefaultLayout>
-    <AuthenticationWrapper pageType={EPageTypes.NON_AUTHENTICATED}>
-      <AuthBase authType={EAuthModes.SIGN_UP} />
-    </AuthenticationWrapper>
-  </DefaultLayout>
-);
+function SignUpPage() {
+  return (
+    <DefaultLayout>
+      <AuthenticationWrapper pageType={EPageTypes.NON_AUTHENTICATED}>
+        <AuthBase authType={EAuthModes.SIGN_UP} />
+      </AuthenticationWrapper>
+    </DefaultLayout>
+  );
+}

 export default SignUpPage;
--- a/apps/web/app/(all)/workspace-invitations/page.tsx
+++ b/apps/web/app/(all)/workspace-invitations/page.tsx
@@ -23,7 +23,7 @@ import { WorkspaceService } from "@/plane-web/services";
 // service initialization
 const workspaceService = new WorkspaceService();

-const WorkspaceInvitationPage = observer(() => {
+function WorkspaceInvitationPage() {
  // router
  const router = useAppRouter();
  // query params
@@ -123,6 +123,6 @@ const WorkspaceInvitationPage = observer(() => {
      </div>
    </AuthenticationWrapper>
  );
-});
+}

-export default WorkspaceInvitationPage;
+export default observer(WorkspaceInvitationPage);
--- a/apps/web/app/(home)/page.tsx
+++ b/apps/web/app/(home)/page.tsx
@@ -9,12 +9,14 @@ import DefaultLayout from "@/layouts/default-layout";
 // wrappers
 import { AuthenticationWrapper } from "@/lib/wrappers/authentication-wrapper";

-const HomePage = () => (
-  <DefaultLayout>
-    <AuthenticationWrapper pageType={EPageTypes.NON_AUTHENTICATED}>
-      <AuthBase authType={EAuthModes.SIGN_IN} />
-    </AuthenticationWrapper>
-  </DefaultLayout>
-);
+function HomePage() {
+  return (
+    <DefaultLayout>
+      <AuthenticationWrapper pageType={EPageTypes.NON_AUTHENTICATED}>
+        <AuthBase authType={EAuthModes.SIGN_IN} />
+      </AuthenticationWrapper>
+    </DefaultLayout>
+  );
+}

 export default HomePage;