feat: init

2025-11-11 01:56:44 +08:00
commit bba4bb40c8
4638 changed files with 447437 additions and 0 deletions
--- a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/billing/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/billing/page.tsx
@@ -0,0 +1,35 @@
+"use client";
+
+import { observer } from "mobx-react";
+// component
+import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
+import { NotAuthorizedView } from "@/components/auth-screens/not-authorized-view";
+import { PageHead } from "@/components/core/page-title";
+// hooks
+import { SettingsContentWrapper } from "@/components/settings/content-wrapper";
+import { useWorkspace } from "@/hooks/store/use-workspace";
+import { useUserPermissions } from "@/hooks/store/user";
+// plane web components
+import { BillingRoot } from "@/plane-web/components/workspace/billing";
+
+const BillingSettingsPage = observer(() => {
+  // store hooks
+  const { workspaceUserInfo, allowPermissions } = useUserPermissions();
+  const { currentWorkspace } = useWorkspace();
+  // derived values
+  const canPerformWorkspaceAdminActions = allowPermissions([EUserPermissions.ADMIN], EUserPermissionsLevel.WORKSPACE);
+  const pageTitle = currentWorkspace?.name ? `${currentWorkspace.name} - Billing & Plans` : undefined;
+
+  if (workspaceUserInfo && !canPerformWorkspaceAdminActions) {
+    return <NotAuthorizedView section="settings" className="h-auto" />;
+  }
+
+  return (
+    <SettingsContentWrapper size="lg">
+      <PageHead title={pageTitle} />
+      <BillingRoot />
+    </SettingsContentWrapper>
+  );
+});
+
+export default 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
@@ -0,0 +1,56 @@
+"use client";
+
+import { observer } from "mobx-react";
+// components
+import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { cn } from "@plane/utils";
+import { NotAuthorizedView } from "@/components/auth-screens/not-authorized-view";
+import { PageHead } from "@/components/core/page-title";
+import ExportGuide from "@/components/exporter/guide";
+// helpers
+// hooks
+import { SettingsContentWrapper } from "@/components/settings/content-wrapper";
+import SettingsHeading from "@/components/settings/heading";
+import { useWorkspace } from "@/hooks/store/use-workspace";
+import { useUserPermissions } from "@/hooks/store/user";
+
+const ExportsPage = observer(() => {
+  // store hooks
+  const { workspaceUserInfo, allowPermissions } = useUserPermissions();
+  const { currentWorkspace } = useWorkspace();
+  const { t } = useTranslation();
+
+  // derived values
+  const canPerformWorkspaceMemberActions = allowPermissions(
+    [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
+    EUserPermissionsLevel.WORKSPACE
+  );
+  const pageTitle = currentWorkspace?.name
+    ? `${currentWorkspace.name} - ${t("workspace_settings.settings.exports.title")}`
+    : undefined;
+
+  // if user is not authorized to view this page
+  if (workspaceUserInfo && !canPerformWorkspaceMemberActions) {
+    return <NotAuthorizedView section="settings" className="h-auto" />;
+  }
+
+  return (
+    <SettingsContentWrapper size="lg">
+      <PageHead title={pageTitle} />
+      <div
+        className={cn("w-full", {
+          "opacity-60": !canPerformWorkspaceMemberActions,
+        })}
+      >
+        <SettingsHeading
+          title={t("workspace_settings.settings.exports.heading")}
+          description={t("workspace_settings.settings.exports.description")}
+        />
+        <ExportGuide />
+      </div>
+    </SettingsContentWrapper>
+  );
+});
+
+export default 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
@@ -0,0 +1,37 @@
+"use client";
+
+import { observer } from "mobx-react";
+// components
+import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
+import { NotAuthorizedView } from "@/components/auth-screens/not-authorized-view";
+import { PageHead } from "@/components/core/page-title";
+import IntegrationGuide from "@/components/integration/guide";
+// hooks
+import { SettingsContentWrapper } from "@/components/settings/content-wrapper";
+import { SettingsHeading } from "@/components/settings/heading";
+import { useWorkspace } from "@/hooks/store/use-workspace";
+import { useUserPermissions } from "@/hooks/store/user";
+
+const ImportsPage = observer(() => {
+  // router
+  // store hooks
+  const { currentWorkspace } = useWorkspace();
+  const { allowPermissions } = useUserPermissions();
+  // derived values
+  const isAdmin = allowPermissions([EUserPermissions.ADMIN], EUserPermissionsLevel.WORKSPACE);
+  const pageTitle = currentWorkspace?.name ? `${currentWorkspace.name} - Imports` : undefined;
+
+  if (!isAdmin) return <NotAuthorizedView section="settings" className="h-auto" />;
+
+  return (
+    <SettingsContentWrapper size="lg">
+      <PageHead title={pageTitle} />
+      <section className="w-full">
+        <SettingsHeading title="Imports" />
+        <IntegrationGuide />
+      </section>
+    </SettingsContentWrapper>
+  );
+});
+
+export default 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
@@ -0,0 +1,58 @@
+"use client";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+import useSWR from "swr";
+// components
+import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
+import { NotAuthorizedView } from "@/components/auth-screens/not-authorized-view";
+import { PageHead } from "@/components/core/page-title";
+import { SingleIntegrationCard } from "@/components/integration";
+import { SettingsContentWrapper } from "@/components/settings/content-wrapper";
+import { IntegrationAndImportExportBanner } from "@/components/ui/integration-and-import-export-banner";
+import { IntegrationsSettingsLoader } from "@/components/ui/loader/settings/integration";
+// constants
+import { APP_INTEGRATIONS } from "@/constants/fetch-keys";
+// hooks
+import { useWorkspace } from "@/hooks/store/use-workspace";
+import { useUserPermissions } from "@/hooks/store/user";
+// services
+import { IntegrationService } from "@/services/integrations";
+
+const integrationService = new IntegrationService();
+
+const WorkspaceIntegrationsPage = observer(() => {
+  // router
+  const { workspaceSlug } = useParams();
+  // store hooks
+  const { currentWorkspace } = useWorkspace();
+  const { allowPermissions } = useUserPermissions();
+
+  // 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
+  );
+
+  if (!isAdmin) return <NotAuthorizedView section="settings" className="h-auto" />;
+
+  return (
+    <SettingsContentWrapper size="lg">
+      <PageHead title={pageTitle} />
+      <section className="w-full overflow-y-auto">
+        <IntegrationAndImportExportBanner bannerName="Integrations" />
+        <div>
+          {appIntegrations ? (
+            appIntegrations.map((integration) => (
+              <SingleIntegrationCard key={integration.id} integration={integration} />
+            ))
+          ) : (
+            <IntegrationsSettingsLoader />
+          )}
+        </div>
+      </section>
+    </SettingsContentWrapper>
+  );
+});
+
+export default WorkspaceIntegrationsPage;
--- a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/layout.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/layout.tsx
@@ -0,0 +1,57 @@
+"use client";
+
+import type { FC, ReactNode } from "react";
+import { observer } from "mobx-react";
+import { usePathname } from "next/navigation";
+// constants
+import { WORKSPACE_SETTINGS_ACCESS } from "@plane/constants";
+import type { EUserWorkspaceRoles } from "@plane/types";
+// components
+import { NotAuthorizedView } from "@/components/auth-screens/not-authorized-view";
+import { getWorkspaceActivePath, pathnameToAccessKey } from "@/components/settings/helper";
+import { SettingsMobileNav } from "@/components/settings/mobile";
+// hooks
+import { useUserPermissions } from "@/hooks/store/user";
+// local components
+import { WorkspaceSettingsSidebar } from "./sidebar";
+
+export interface IWorkspaceSettingLayout {
+  children: ReactNode;
+}
+
+const WorkspaceSettingLayout: FC<IWorkspaceSettingLayout> = observer((props) => {
+  const { children } = props;
+  // store hooks
+  const { workspaceUserInfo, getWorkspaceRoleByWorkspaceSlug } = useUserPermissions();
+  // next hooks
+  const pathname = usePathname();
+  // derived values
+  const { workspaceSlug, accessKey } = pathnameToAccessKey(pathname);
+  const userWorkspaceRole = getWorkspaceRoleByWorkspaceSlug(workspaceSlug.toString());
+
+  let isAuthorized: boolean | string = false;
+  if (pathname && workspaceSlug && userWorkspaceRole) {
+    isAuthorized = WORKSPACE_SETTINGS_ACCESS[accessKey]?.includes(userWorkspaceRole as EUserWorkspaceRoles);
+  }
+
+  return (
+    <>
+      <SettingsMobileNav
+        hamburgerContent={WorkspaceSettingsSidebar}
+        activePath={getWorkspaceActivePath(pathname) || ""}
+      />
+      <div className="inset-y-0 flex flex-row w-full h-full">
+        {workspaceUserInfo && !isAuthorized ? (
+          <NotAuthorizedView section="settings" className="h-auto" />
+        ) : (
+          <div className="relative flex h-full w-full">
+            <div className="hidden md:block">{<WorkspaceSettingsSidebar />}</div>
+            <div className="w-full h-full overflow-y-scroll md:pt-page-y">{children}</div>
+          </div>
+        )}
+      </div>
+    </>
+  );
+});
+
+export default 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
@@ -0,0 +1,167 @@
+"use client";
+
+import { useState } from "react";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+import { Search } from "lucide-react";
+// types
+import {
+  EUserPermissions,
+  EUserPermissionsLevel,
+  MEMBER_TRACKER_ELEMENTS,
+  MEMBER_TRACKER_EVENTS,
+} from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { Button } from "@plane/propel/button";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import type { IWorkspaceBulkInviteFormData } from "@plane/types";
+import { cn } from "@plane/utils";
+// components
+import { NotAuthorizedView } from "@/components/auth-screens/not-authorized-view";
+import { CountChip } from "@/components/common/count-chip";
+import { PageHead } from "@/components/core/page-title";
+import { MemberListFiltersDropdown } from "@/components/project/dropdowns/filters/member-list";
+import { SettingsContentWrapper } from "@/components/settings/content-wrapper";
+import { WorkspaceMembersList } from "@/components/workspace/settings/members-list";
+// helpers
+import { captureError, captureSuccess } from "@/helpers/event-tracker.helper";
+// hooks
+import { useMember } from "@/hooks/store/use-member";
+import { useWorkspace } from "@/hooks/store/use-workspace";
+import { useUserPermissions } from "@/hooks/store/user";
+// plane web components
+import { BillingActionsButton } from "@/plane-web/components/workspace/billing/billing-actions-button";
+import { SendWorkspaceInvitationModal } from "@/plane-web/components/workspace/members/invite-modal";
+
+const WorkspaceMembersSettingsPage = observer(() => {
+  // states
+  const [inviteModal, setInviteModal] = useState(false);
+  const [searchQuery, setSearchQuery] = useState<string>("");
+  // router
+  const { workspaceSlug } = useParams();
+  // store hooks
+  const { workspaceUserInfo, allowPermissions } = useUserPermissions();
+  const {
+    workspace: { workspaceMemberIds, inviteMembersToWorkspace, filtersStore },
+  } = useMember();
+  const { currentWorkspace } = useWorkspace();
+  const { t } = useTranslation();
+
+  // derived values
+  const canPerformWorkspaceAdminActions = allowPermissions([EUserPermissions.ADMIN], EUserPermissionsLevel.WORKSPACE);
+  const canPerformWorkspaceMemberActions = allowPermissions(
+    [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
+    EUserPermissionsLevel.WORKSPACE
+  );
+
+  const handleWorkspaceInvite = (data: IWorkspaceBulkInviteFormData) => {
+    if (!workspaceSlug) return;
+
+    return inviteMembersToWorkspace(workspaceSlug.toString(), data)
+      .then(() => {
+        setInviteModal(false);
+        captureSuccess({
+          eventName: MEMBER_TRACKER_EVENTS.invite,
+          payload: {
+            emails: [...data.emails.map((email) => email.email)],
+          },
+        });
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
+          title: "Success!",
+          message: t("workspace_settings.settings.members.invitations_sent_successfully"),
+        });
+      })
+      .catch((err) => {
+        captureError({
+          eventName: MEMBER_TRACKER_EVENTS.invite,
+          payload: {
+            emails: [...data.emails.map((email) => email.email)],
+          },
+          error: err,
+        });
+        setToast({
+          type: TOAST_TYPE.ERROR,
+          title: "Error!",
+          message: `${err.error ?? t("something_went_wrong_please_try_again")}`,
+        });
+        throw err;
+      });
+  };
+
+  // Handler for role filter updates
+  const handleRoleFilterUpdate = (role: string) => {
+    const currentFilters = filtersStore.filters;
+    const currentRoles = currentFilters?.roles || [];
+    const updatedRoles = currentRoles.includes(role) ? currentRoles.filter((r) => r !== role) : [...currentRoles, role];
+
+    filtersStore.updateFilters({
+      roles: updatedRoles.length > 0 ? updatedRoles : undefined,
+    });
+  };
+
+  // derived values
+  const pageTitle = currentWorkspace?.name ? `${currentWorkspace.name} - Members` : undefined;
+  const appliedRoleFilters = filtersStore.filters?.roles || [];
+
+  // if user is not authorized to view this page
+  if (workspaceUserInfo && !canPerformWorkspaceMemberActions) {
+    return <NotAuthorizedView section="settings" className="h-auto" />;
+  }
+
+  return (
+    <SettingsContentWrapper size="lg">
+      <PageHead title={pageTitle} />
+      <SendWorkspaceInvitationModal
+        isOpen={inviteModal}
+        onClose={() => setInviteModal(false)}
+        onSubmit={handleWorkspaceInvite}
+      />
+      <section
+        className={cn("w-full h-full", {
+          "opacity-60": !canPerformWorkspaceMemberActions,
+        })}
+      >
+        <div className="flex justify-between gap-4 pb-3.5 items-start">
+          <h4 className="flex items-center gap-2.5 text-xl font-medium">
+            {t("workspace_settings.settings.members.title")}
+            {workspaceMemberIds && workspaceMemberIds.length > 0 && (
+              <CountChip count={workspaceMemberIds.length} className="h-5 m-auto" />
+            )}
+          </h4>
+          <div className="flex items-center gap-2">
+            <div className="flex items-center gap-1.5 rounded-md border border-custom-border-200 bg-custom-background-100 px-2.5 py-1.5">
+              <Search className="h-3.5 w-3.5 text-custom-text-400" />
+              <input
+                className="w-full max-w-[234px] border-none bg-transparent text-sm outline-none placeholder:text-custom-text-400"
+                placeholder={`${t("search")}...`}
+                value={searchQuery}
+                autoFocus
+                onChange={(e) => setSearchQuery(e.target.value)}
+              />
+            </div>
+            <MemberListFiltersDropdown
+              appliedFilters={appliedRoleFilters}
+              handleUpdate={handleRoleFilterUpdate}
+              memberType="workspace"
+            />
+            {canPerformWorkspaceAdminActions && (
+              <Button
+                variant="primary"
+                size="sm"
+                onClick={() => setInviteModal(true)}
+                data-ph-element={MEMBER_TRACKER_ELEMENTS.HEADER_ADD_BUTTON}
+              >
+                {t("workspace_settings.settings.members.add_member")}
+              </Button>
+            )}
+            <BillingActionsButton canPerformWorkspaceAdminActions={canPerformWorkspaceAdminActions} />
+          </div>
+        </div>
+        <WorkspaceMembersList searchQuery={searchQuery} isAdmin={canPerformWorkspaceAdminActions} />
+      </section>
+    </SettingsContentWrapper>
+  );
+});
+
+export default WorkspaceMembersSettingsPage;
--- a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/mobile-header-tabs.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/mobile-header-tabs.tsx
@@ -0,0 +1,40 @@
+import { observer } from "mobx-react";
+import { useParams, usePathname } from "next/navigation";
+import { WORKSPACE_SETTINGS_LINKS, EUserPermissionsLevel } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+// hooks
+import { useUserPermissions } from "@/hooks/store/user";
+import { useAppRouter } from "@/hooks/use-app-router";
+// plane web helpers
+import { shouldRenderSettingLink } from "@/plane-web/helpers/workspace.helper";
+
+export const MobileWorkspaceSettingsTabs = observer(() => {
+  const router = useAppRouter();
+  const { workspaceSlug } = useParams();
+  const pathname = usePathname();
+  const { t } = useTranslation();
+  // mobx store
+  const { allowPermissions } = useUserPermissions();
+
+  return (
+    <div className="flex-shrink-0 md:hidden sticky inset-0 flex overflow-x-auto bg-custom-background-100 z-10">
+      {WORKSPACE_SETTINGS_LINKS.map(
+        (item, index) =>
+          shouldRenderSettingLink(workspaceSlug.toString(), item.key) &&
+          allowPermissions(item.access, EUserPermissionsLevel.WORKSPACE, workspaceSlug.toString()) && (
+            <div
+              className={`${
+                item.highlight(pathname, `/${workspaceSlug}`)
+                  ? "text-custom-primary-100 text-sm py-2 px-3 whitespace-nowrap flex flex-grow cursor-pointer justify-around border-b border-custom-primary-200"
+                  : "text-custom-text-200 flex flex-grow cursor-pointer justify-around border-b border-custom-border-200 text-sm py-2 px-3 whitespace-nowrap"
+              }`}
+              key={index}
+              onClick={() => router.push(`/${workspaceSlug}${item.href}`)}
+            >
+              {t(item.i18n_label)}
+            </div>
+          )
+      )}
+    </div>
+  );
+});
--- a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/page.tsx
@@ -0,0 +1,30 @@
+"use client";
+
+import { observer } from "mobx-react";
+// plane imports
+import { useTranslation } from "@plane/i18n";
+// components
+import { PageHead } from "@/components/core/page-title";
+import { SettingsContentWrapper } from "@/components/settings/content-wrapper";
+import { WorkspaceDetails } from "@/components/workspace/settings/workspace-details";
+// hooks
+import { useWorkspace } from "@/hooks/store/use-workspace";
+
+const WorkspaceSettingsPage = observer(() => {
+  // store hooks
+  const { currentWorkspace } = useWorkspace();
+  const { t } = useTranslation();
+  // derived values
+  const pageTitle = currentWorkspace?.name
+    ? t("workspace_settings.page_label", { workspace: currentWorkspace.name })
+    : undefined;
+
+  return (
+    <SettingsContentWrapper>
+      <PageHead title={pageTitle} />
+      <WorkspaceDetails />
+    </SettingsContentWrapper>
+  );
+});
+
+export default WorkspaceSettingsPage;
--- a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/sidebar.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/sidebar.tsx
@@ -0,0 +1,73 @@
+import { useParams, usePathname } from "next/navigation";
+import { ArrowUpToLine, Building, CreditCard, Users, Webhook } from "lucide-react";
+import {
+  EUserPermissionsLevel,
+  GROUPED_WORKSPACE_SETTINGS,
+  WORKSPACE_SETTINGS_CATEGORIES,
+  EUserPermissions,
+  WORKSPACE_SETTINGS_CATEGORY,
+} from "@plane/constants";
+import type { EUserWorkspaceRoles } from "@plane/types";
+import { SettingsSidebar } from "@/components/settings/sidebar";
+import { useUserPermissions } from "@/hooks/store/user";
+import { shouldRenderSettingLink } from "@/plane-web/helpers/workspace.helper";
+
+const ICONS = {
+  general: Building,
+  members: Users,
+  export: ArrowUpToLine,
+  "billing-and-plans": CreditCard,
+  webhooks: Webhook,
+};
+
+export const WorkspaceActionIcons = ({
+  type,
+  size,
+  className,
+}: {
+  type: string;
+  size?: number;
+  className?: string;
+}) => {
+  if (type === undefined) return null;
+  const Icon = ICONS[type as keyof typeof ICONS];
+  if (!Icon) return null;
+  return <Icon size={size} className={className} strokeWidth={2} />;
+};
+
+type TWorkspaceSettingsSidebarProps = {
+  isMobile?: boolean;
+};
+
+export const WorkspaceSettingsSidebar = (props: TWorkspaceSettingsSidebarProps) => {
+  const { isMobile = false } = props;
+  // router
+  const pathname = usePathname();
+  const { workspaceSlug } = useParams(); // store hooks
+  const { allowPermissions } = useUserPermissions();
+  const isAdmin = allowPermissions([EUserPermissions.ADMIN], EUserPermissionsLevel.WORKSPACE);
+
+  return (
+    <SettingsSidebar
+      isMobile={isMobile}
+      categories={WORKSPACE_SETTINGS_CATEGORIES.filter(
+        (category) =>
+          isAdmin || ![WORKSPACE_SETTINGS_CATEGORY.FEATURES, WORKSPACE_SETTINGS_CATEGORY.DEVELOPER].includes(category)
+      )}
+      groupedSettings={GROUPED_WORKSPACE_SETTINGS}
+      workspaceSlug={workspaceSlug.toString()}
+      isActive={(data: { href: string }) =>
+        data.href === "/settings"
+          ? pathname === `/${workspaceSlug}${data.href}/`
+          : new RegExp(`^/${workspaceSlug}${data.href}/`).test(pathname)
+      }
+      shouldRender={(data: { key: string; access?: EUserWorkspaceRoles[] | undefined }) =>
+        data.access
+          ? shouldRenderSettingLink(workspaceSlug.toString(), data.key) &&
+            allowPermissions(data.access, EUserPermissionsLevel.WORKSPACE, workspaceSlug.toString())
+          : false
+      }
+      actionIcons={WorkspaceActionIcons}
+    />
+  );
+};
--- 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
@@ -0,0 +1,120 @@
+"use client";
+
+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";
+import type { IWebhook } from "@plane/types";
+// ui
+// components
+import { LogoSpinner } from "@/components/common/logo-spinner";
+import { PageHead } from "@/components/core/page-title";
+import { SettingsContentWrapper } from "@/components/settings/content-wrapper";
+import { DeleteWebhookModal, WebhookDeleteSection, WebhookForm } from "@/components/web-hooks";
+// hooks
+import { captureError, captureSuccess } from "@/helpers/event-tracker.helper";
+import { useWebhook } from "@/hooks/store/use-webhook";
+import { useWorkspace } from "@/hooks/store/use-workspace";
+import { useUserPermissions } from "@/hooks/store/user";
+
+const WebhookDetailsPage = observer(() => {
+  // states
+  const [deleteWebhookModal, setDeleteWebhookModal] = useState(false);
+  // router
+  const { workspaceSlug, webhookId } = useParams();
+  // mobx store
+  const { currentWebhook, fetchWebhookById, updateWebhook } = useWebhook();
+  const { currentWorkspace } = useWorkspace();
+  const { allowPermissions } = useUserPermissions();
+
+  // TODO: fix this error
+  // useEffect(() => {
+  //   if (isCreated !== "true") clearSecretKey();
+  // }, [clearSecretKey, isCreated]);
+
+  // derived values
+  const isAdmin = allowPermissions([EUserPermissions.ADMIN], EUserPermissionsLevel.WORKSPACE);
+  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
+  );
+
+  const handleUpdateWebhook = async (formData: IWebhook) => {
+    if (!workspaceSlug || !formData || !formData.id) return;
+    const payload = {
+      url: formData?.url,
+      is_active: formData?.is_active,
+      project: formData?.project,
+      cycle: formData?.cycle,
+      module: formData?.module,
+      issue: formData?.issue,
+      issue_comment: formData?.issue_comment,
+    };
+    await updateWebhook(workspaceSlug.toString(), formData.id, payload)
+      .then(() => {
+        captureSuccess({
+          eventName: WORKSPACE_SETTINGS_TRACKER_EVENTS.webhook_updated,
+          payload: {
+            webhook: formData.id,
+          },
+        });
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
+          title: "Success!",
+          message: "Webhook updated successfully.",
+        });
+      })
+      .catch((error) => {
+        captureError({
+          eventName: WORKSPACE_SETTINGS_TRACKER_EVENTS.webhook_updated,
+          payload: {
+            webhook: formData.id,
+          },
+          error: error as Error,
+        });
+        setToast({
+          type: TOAST_TYPE.ERROR,
+          title: "Error!",
+          message: error?.error ?? "Something went wrong. Please try again.",
+        });
+      });
+  };
+
+  if (!isAdmin)
+    return (
+      <>
+        <PageHead title={pageTitle} />
+        <div className="mt-10 flex h-full w-full justify-center p-4">
+          <p className="text-sm text-custom-text-300">You are not authorized to access this page.</p>
+        </div>
+      </>
+    );
+
+  if (!currentWebhook)
+    return (
+      <div className="grid h-full w-full place-items-center p-4">
+        <LogoSpinner />
+      </div>
+    );
+
+  return (
+    <SettingsContentWrapper>
+      <PageHead title={pageTitle} />
+      <DeleteWebhookModal isOpen={deleteWebhookModal} onClose={() => setDeleteWebhookModal(false)} />
+      <div className="w-full space-y-8 overflow-y-auto">
+        <div className="">
+          <WebhookForm onSubmit={async (data) => await handleUpdateWebhook(data)} data={currentWebhook} />
+        </div>
+        {currentWebhook && <WebhookDeleteSection openDeleteModal={() => setDeleteWebhookModal(true)} />}
+      </div>
+    </SettingsContentWrapper>
+  );
+});
+
+export default 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
@@ -0,0 +1,117 @@
+"use client";
+
+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";
+import { useTranslation } from "@plane/i18n";
+// components
+import { NotAuthorizedView } from "@/components/auth-screens/not-authorized-view";
+import { PageHead } from "@/components/core/page-title";
+import { DetailedEmptyState } from "@/components/empty-state/detailed-empty-state-root";
+import { SettingsContentWrapper } from "@/components/settings/content-wrapper";
+import { SettingsHeading } from "@/components/settings/heading";
+import { WebhookSettingsLoader } from "@/components/ui/loader/settings/web-hook";
+import { WebhooksList, CreateWebhookModal } from "@/components/web-hooks";
+// hooks
+import { captureClick } from "@/helpers/event-tracker.helper";
+import { useWebhook } from "@/hooks/store/use-webhook";
+import { useWorkspace } from "@/hooks/store/use-workspace";
+import { useUserPermissions } from "@/hooks/store/user";
+import { useResolvedAssetPath } from "@/hooks/use-resolved-asset-path";
+
+const WebhooksListPage = observer(() => {
+  // states
+  const [showCreateWebhookModal, setShowCreateWebhookModal] = useState(false);
+  // router
+  const { workspaceSlug } = useParams();
+  // plane hooks
+  const { t } = useTranslation();
+  // mobx store
+  const { workspaceUserInfo, allowPermissions } = useUserPermissions();
+  const { fetchWebhooks, webhooks, clearSecretKey, webhookSecretKey, createWebhook } = useWebhook();
+  const { currentWorkspace } = useWorkspace();
+  // derived values
+  const canPerformWorkspaceAdminActions = allowPermissions([EUserPermissions.ADMIN], EUserPermissionsLevel.WORKSPACE);
+  const resolvedPath = useResolvedAssetPath({ basePath: "/empty-state/workspace-settings/webhooks" });
+
+  useSWR(
+    workspaceSlug && canPerformWorkspaceAdminActions ? `WEBHOOKS_LIST_${workspaceSlug}` : null,
+    workspaceSlug && canPerformWorkspaceAdminActions ? () => fetchWebhooks(workspaceSlug.toString()) : null
+  );
+
+  const pageTitle = currentWorkspace?.name
+    ? `${currentWorkspace.name} - ${t("workspace_settings.settings.webhooks.title")}`
+    : undefined;
+
+  // clear secret key when modal is closed.
+  useEffect(() => {
+    if (!showCreateWebhookModal && webhookSecretKey) clearSecretKey();
+  }, [showCreateWebhookModal, webhookSecretKey, clearSecretKey]);
+
+  if (workspaceUserInfo && !canPerformWorkspaceAdminActions) {
+    return <NotAuthorizedView section="settings" className="h-auto" />;
+  }
+
+  if (!webhooks) return <WebhookSettingsLoader />;
+
+  return (
+    <SettingsContentWrapper>
+      <PageHead title={pageTitle} />
+      <div className="w-full">
+        <CreateWebhookModal
+          createWebhook={createWebhook}
+          clearSecretKey={clearSecretKey}
+          currentWorkspace={currentWorkspace}
+          isOpen={showCreateWebhookModal}
+          onClose={() => {
+            setShowCreateWebhookModal(false);
+          }}
+        />
+        <SettingsHeading
+          title={t("workspace_settings.settings.webhooks.title")}
+          description={t("workspace_settings.settings.webhooks.description")}
+          button={{
+            label: t("workspace_settings.settings.webhooks.add_webhook"),
+            onClick: () => {
+              captureClick({
+                elementName: WORKSPACE_SETTINGS_TRACKER_ELEMENTS.HEADER_ADD_WEBHOOK_BUTTON,
+              });
+              setShowCreateWebhookModal(true);
+            },
+          }}
+        />
+        {Object.keys(webhooks).length > 0 ? (
+          <div className="flex h-full w-full flex-col">
+            <WebhooksList />
+          </div>
+        ) : (
+          <div className="flex h-full w-full flex-col">
+            <div className="h-full w-full flex items-center justify-center">
+              <DetailedEmptyState
+                className="!p-0"
+                title=""
+                description=""
+                assetPath={resolvedPath}
+                size="md"
+                primaryButton={{
+                  text: t("workspace_settings.settings.webhooks.add_webhook"),
+                  onClick: () => {
+                    captureClick({
+                      elementName: WORKSPACE_SETTINGS_TRACKER_ELEMENTS.EMPTY_STATE_ADD_WEBHOOK_BUTTON,
+                    });
+                    setShowCreateWebhookModal(true);
+                  },
+                }}
+              />
+            </div>
+          </div>
+        )}
+      </div>
+    </SettingsContentWrapper>
+  );
+});
+
+export default 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
@@ -0,0 +1,89 @@
+"use client";
+
+import { useState } from "react";
+import { observer } from "mobx-react";
+import { useTranslation } from "@plane/i18n";
+// ui
+import { Button } from "@plane/propel/button";
+// components
+import { PageHead } from "@/components/core/page-title";
+import { DetailedEmptyState } from "@/components/empty-state/detailed-empty-state-root";
+import { ProfileActivityListPage } from "@/components/profile/activity/profile-activity-list";
+// hooks
+import { SettingsHeading } from "@/components/settings/heading";
+import { useResolvedAssetPath } from "@/hooks/use-resolved-asset-path";
+
+const PER_PAGE = 100;
+
+const ProfileActivityPage = observer(() => {
+  // states
+  const [pageCount, setPageCount] = useState(1);
+  const [totalPages, setTotalPages] = useState(0);
+  const [resultsCount, setResultsCount] = useState(0);
+  const [isEmpty, setIsEmpty] = useState(false);
+  // plane hooks
+  const { t } = useTranslation();
+  // derived values
+  const resolvedPath = useResolvedAssetPath({ basePath: "/empty-state/profile/activity" });
+
+  const updateTotalPages = (count: number) => setTotalPages(count);
+
+  const updateResultsCount = (count: number) => setResultsCount(count);
+
+  const updateEmptyState = (isEmpty: boolean) => setIsEmpty(isEmpty);
+
+  const handleLoadMore = () => setPageCount((prev) => prev + 1);
+
+  const activityPages: React.ReactNode[] = [];
+  for (let i = 0; i < pageCount; i++)
+    activityPages.push(
+      <ProfileActivityListPage
+        key={i}
+        cursor={`${PER_PAGE}:${i}:0`}
+        perPage={PER_PAGE}
+        updateResultsCount={updateResultsCount}
+        updateTotalPages={updateTotalPages}
+        updateEmptyState={updateEmptyState}
+      />
+    );
+
+  const isLoadMoreVisible = pageCount < totalPages && resultsCount !== 0;
+
+  if (isEmpty) {
+    return (
+      <div className="flex h-full w-full flex-col">
+        <SettingsHeading
+          title={t("account_settings.activity.heading")}
+          description={t("account_settings.activity.description")}
+        />
+        <DetailedEmptyState
+          title={""}
+          description={""}
+          assetPath={resolvedPath}
+          className="w-full !p-0 justify-center mx-auto min-h-fit"
+          size="md"
+        />
+      </div>
+    );
+  }
+
+  return (
+    <>
+      <PageHead title="Profile - Activity" />
+      <SettingsHeading
+        title={t("account_settings.activity.heading")}
+        description={t("account_settings.activity.description")}
+      />
+      <div className="w-full">{activityPages}</div>
+      {isLoadMoreVisible && (
+        <div className="flex w-full items-center justify-center text-xs">
+          <Button variant="accent-primary" size="sm" onClick={handleLoadMore}>
+            {t("load_more")}
+          </Button>
+        </div>
+      )}
+    </>
+  );
+});
+
+export default 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
@@ -0,0 +1,112 @@
+"use client";
+
+import React, { useState } from "react";
+import { observer } from "mobx-react";
+import useSWR from "swr";
+// plane imports
+import { PROFILE_SETTINGS_TRACKER_ELEMENTS } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+// component
+import { APITokenService } from "@plane/services";
+import { CreateApiTokenModal } from "@/components/api-token/modal/create-token-modal";
+import { ApiTokenListItem } from "@/components/api-token/token-list-item";
+import { PageHead } from "@/components/core/page-title";
+import { DetailedEmptyState } from "@/components/empty-state/detailed-empty-state-root";
+import { SettingsHeading } from "@/components/settings/heading";
+import { APITokenSettingsLoader } from "@/components/ui/loader/settings/api-token";
+import { API_TOKENS_LIST } from "@/constants/fetch-keys";
+// store hooks
+import { captureClick } from "@/helpers/event-tracker.helper";
+import { useWorkspace } from "@/hooks/store/use-workspace";
+import { useResolvedAssetPath } from "@/hooks/use-resolved-asset-path";
+
+const apiTokenService = new APITokenService();
+
+const ApiTokensPage = observer(() => {
+  // states
+  const [isCreateTokenModalOpen, setIsCreateTokenModalOpen] = useState(false);
+  // router
+  // plane hooks
+  const { t } = useTranslation();
+  // store hooks
+  const { currentWorkspace } = useWorkspace();
+  // derived values
+  const resolvedPath = useResolvedAssetPath({ basePath: "/empty-state/workspace-settings/api-tokens" });
+
+  const { data: tokens } = useSWR(API_TOKENS_LIST, () => apiTokenService.list());
+
+  const pageTitle = currentWorkspace?.name
+    ? `${currentWorkspace.name} - ${t("workspace_settings.settings.api_tokens.title")}`
+    : undefined;
+
+  if (!tokens) {
+    return <APITokenSettingsLoader />;
+  }
+
+  return (
+    <div className="w-full">
+      <PageHead title={pageTitle} />
+      <CreateApiTokenModal isOpen={isCreateTokenModalOpen} onClose={() => setIsCreateTokenModalOpen(false)} />
+      <section className="w-full">
+        {tokens.length > 0 ? (
+          <>
+            <SettingsHeading
+              title={t("account_settings.api_tokens.heading")}
+              description={t("account_settings.api_tokens.description")}
+              button={{
+                label: t("workspace_settings.settings.api_tokens.add_token"),
+                onClick: () => {
+                  captureClick({
+                    elementName: PROFILE_SETTINGS_TRACKER_ELEMENTS.HEADER_ADD_PAT_BUTTON,
+                  });
+                  setIsCreateTokenModalOpen(true);
+                },
+              }}
+            />
+            <div>
+              {tokens.map((token) => (
+                <ApiTokenListItem key={token.id} token={token} />
+              ))}
+            </div>
+          </>
+        ) : (
+          <div className="flex h-full w-full flex-col">
+            <SettingsHeading
+              title={t("account_settings.api_tokens.heading")}
+              description={t("account_settings.api_tokens.description")}
+              button={{
+                label: t("workspace_settings.settings.api_tokens.add_token"),
+                onClick: () => {
+                  captureClick({
+                    elementName: PROFILE_SETTINGS_TRACKER_ELEMENTS.HEADER_ADD_PAT_BUTTON,
+                  });
+                  setIsCreateTokenModalOpen(true);
+                },
+              }}
+            />
+            <div className="h-full w-full flex items-center justify-center">
+              <DetailedEmptyState
+                title=""
+                description=""
+                assetPath={resolvedPath}
+                className="w-full !p-0 justify-center mx-auto"
+                size="md"
+                primaryButton={{
+                  text: t("workspace_settings.settings.api_tokens.add_token"),
+                  onClick: () => {
+                    captureClick({
+                      elementName: PROFILE_SETTINGS_TRACKER_ELEMENTS.EMPTY_STATE_ADD_PAT_BUTTON,
+                    });
+                    setIsCreateTokenModalOpen(true);
+                  },
+                }}
+              />
+            </div>
+          </div>
+        )}
+      </section>
+    </div>
+  );
+});
+
+export default ApiTokensPage;
--- a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/account/layout.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/account/layout.tsx
@@ -0,0 +1,37 @@
+"use client";
+
+import type { ReactNode } from "react";
+import { observer } from "mobx-react";
+import { usePathname } from "next/navigation";
+// components
+import { SettingsContentWrapper } from "@/components/settings/content-wrapper";
+import { getProfileActivePath } from "@/components/settings/helper";
+import { SettingsMobileNav } from "@/components/settings/mobile";
+// local imports
+import { ProfileSidebar } from "./sidebar";
+
+type Props = {
+  children: ReactNode;
+};
+
+const ProfileSettingsLayout = observer((props: Props) => {
+  const { children } = props;
+  // router
+  const pathname = usePathname();
+
+  return (
+    <>
+      <SettingsMobileNav hamburgerContent={ProfileSidebar} activePath={getProfileActivePath(pathname) || ""} />
+      <div className="relative flex h-full w-full">
+        <div className="hidden md:block">
+          <ProfileSidebar />
+        </div>
+        <div className="w-full h-full overflow-y-scroll md:pt-page-y">
+          <SettingsContentWrapper>{children}</SettingsContentWrapper>
+        </div>
+      </div>
+    </>
+  );
+});
+
+export default ProfileSettingsLayout;
--- a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/account/notifications/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/account/notifications/page.tsx
@@ -0,0 +1,38 @@
+"use client";
+
+import useSWR from "swr";
+// plane imports
+import { useTranslation } from "@plane/i18n";
+// components
+import { PageHead } from "@/components/core/page-title";
+import { EmailNotificationForm } from "@/components/profile/notification/email-notification-form";
+import { SettingsHeading } from "@/components/settings/heading";
+import { EmailSettingsLoader } from "@/components/ui/loader/settings/email";
+// services
+import { UserService } from "@/services/user.service";
+
+const userService = new UserService();
+
+export default function ProfileNotificationPage() {
+  const { t } = useTranslation();
+  // fetching user email notification settings
+  const { data, isLoading } = useSWR("CURRENT_USER_EMAIL_NOTIFICATION_SETTINGS", () =>
+    userService.currentUserEmailNotificationSettings()
+  );
+
+  if (!data || isLoading) {
+    return <EmailSettingsLoader />;
+  }
+
+  return (
+    <>
+      <PageHead title={`${t("profile.label")} - ${t("notifications")}`} />
+
+      <SettingsHeading
+        title={t("account_settings.notifications.heading")}
+        description={t("account_settings.notifications.description")}
+      />
+      <EmailNotificationForm data={data} />
+    </>
+  );
+}
--- a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/account/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/account/page.tsx
@@ -0,0 +1,32 @@
+"use client";
+
+import { observer } from "mobx-react";
+import { useTranslation } from "@plane/i18n";
+// components
+import { LogoSpinner } from "@/components/common/logo-spinner";
+import { PageHead } from "@/components/core/page-title";
+import { ProfileForm } from "@/components/profile/form";
+// hooks
+import { useUser } from "@/hooks/store/user";
+
+const ProfileSettingsPage = observer(() => {
+  const { t } = useTranslation();
+  // store hooks
+  const { data: currentUser, userProfile } = useUser();
+
+  if (!currentUser)
+    return (
+      <div className="grid h-full w-full place-items-center px-4 sm:px-0">
+        <LogoSpinner />
+      </div>
+    );
+
+  return (
+    <>
+      <PageHead title={`${t("profile.label")} - ${t("general_settings")}`} />
+      <ProfileForm user={currentUser} profile={userProfile.data} />
+    </>
+  );
+});
+
+export default 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
@@ -0,0 +1,49 @@
+"use client";
+
+import { observer } from "mobx-react";
+// plane imports
+import { useTranslation } from "@plane/i18n";
+// components
+import { LogoSpinner } from "@/components/common/logo-spinner";
+import { PageHead } from "@/components/core/page-title";
+import { PreferencesList } from "@/components/preferences/list";
+import { LanguageTimezone } from "@/components/profile/preferences/language-timezone";
+import { ProfileSettingContentHeader } from "@/components/profile/profile-setting-content-header";
+import { SettingsHeading } from "@/components/settings/heading";
+// hooks
+import { useUserProfile } from "@/hooks/store/user";
+
+const ProfileAppearancePage = observer(() => {
+  const { t } = useTranslation();
+  // hooks
+  const { data: userProfile } = useUserProfile();
+
+  return (
+    <>
+      <PageHead title={`${t("profile.label")} - ${t("preferences")}`} />
+      {userProfile ? (
+        <>
+          <div className="flex flex-col gap-4 w-full">
+            <div>
+              <SettingsHeading
+                title={t("account_settings.preferences.heading")}
+                description={t("account_settings.preferences.description")}
+              />
+              <PreferencesList />
+            </div>
+            <div>
+              <ProfileSettingContentHeader title={t("language_and_time")} />
+              <LanguageTimezone />
+            </div>
+          </div>
+        </>
+      ) : (
+        <div className="grid h-full w-full place-items-center px-4 sm:px-0">
+          <LogoSpinner />
+        </div>
+      )}
+    </>
+  );
+});
+
+export default 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
@@ -0,0 +1,260 @@
+"use client";
+
+import { useState } from "react";
+import { observer } from "mobx-react";
+import { Controller, useForm } from "react-hook-form";
+import { Eye, EyeOff } from "lucide-react";
+// plane imports
+import { E_PASSWORD_STRENGTH } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { Button } from "@plane/propel/button";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { Input, PasswordStrengthIndicator } from "@plane/ui";
+import { getPasswordStrength } from "@plane/utils";
+// components
+import { PageHead } from "@/components/core/page-title";
+import { ProfileSettingContentHeader } from "@/components/profile/profile-setting-content-header";
+// helpers
+import { authErrorHandler } from "@/helpers/authentication.helper";
+import type { EAuthenticationErrorCodes } from "@/helpers/authentication.helper";
+// hooks
+import { useUser } from "@/hooks/store/user";
+// services
+import { AuthService } from "@/services/auth.service";
+
+export interface FormValues {
+  old_password: string;
+  new_password: string;
+  confirm_password: string;
+}
+
+const defaultValues: FormValues = {
+  old_password: "",
+  new_password: "",
+  confirm_password: "",
+};
+
+const authService = new AuthService();
+
+const defaultShowPassword = {
+  oldPassword: false,
+  password: false,
+  confirmPassword: false,
+};
+
+const SecurityPage = observer(() => {
+  // store
+  const { data: currentUser, changePassword } = useUser();
+  // states
+  const [showPassword, setShowPassword] = useState(defaultShowPassword);
+  const [isPasswordInputFocused, setIsPasswordInputFocused] = useState(false);
+  const [isRetryPasswordInputFocused, setIsRetryPasswordInputFocused] = useState(false);
+
+  // use form
+  const {
+    control,
+    handleSubmit,
+    watch,
+    formState: { errors, isSubmitting },
+    reset,
+  } = useForm<FormValues>({ defaultValues });
+  // derived values
+  const oldPassword = watch("old_password");
+  const password = watch("new_password");
+  const confirmPassword = watch("confirm_password");
+  const oldPasswordRequired = !currentUser?.is_password_autoset;
+  // i18n
+  const { t } = useTranslation();
+
+  const isNewPasswordSameAsOldPassword = oldPassword !== "" && password !== "" && password === oldPassword;
+
+  const handleShowPassword = (key: keyof typeof showPassword) =>
+    setShowPassword((prev) => ({ ...prev, [key]: !prev[key] }));
+
+  const handleChangePassword = async (formData: FormValues) => {
+    const { old_password, new_password } = formData;
+    try {
+      const csrfToken = await authService.requestCSRFToken().then((data) => data?.csrf_token);
+      if (!csrfToken) throw new Error("csrf token not found");
+
+      await changePassword(csrfToken, {
+        ...(oldPasswordRequired && { old_password }),
+        new_password,
+      });
+
+      reset(defaultValues);
+      setShowPassword(defaultShowPassword);
+      setToast({
+        type: TOAST_TYPE.SUCCESS,
+        title: t("auth.common.password.toast.change_password.success.title"),
+        message: t("auth.common.password.toast.change_password.success.message"),
+      });
+    } catch (error: unknown) {
+      let errorInfo = undefined;
+      if (error instanceof Error) {
+        const err = error as Error & { error_code?: string };
+        const code = err.error_code?.toString();
+        errorInfo = code ? authErrorHandler(code as EAuthenticationErrorCodes) : undefined;
+      }
+
+      setToast({
+        type: TOAST_TYPE.ERROR,
+        title: errorInfo?.title ?? t("auth.common.password.toast.error.title"),
+        message:
+          typeof errorInfo?.message === "string" ? errorInfo.message : t("auth.common.password.toast.error.message"),
+      });
+    }
+  };
+
+  const isButtonDisabled =
+    getPasswordStrength(password) != E_PASSWORD_STRENGTH.STRENGTH_VALID ||
+    (oldPasswordRequired && oldPassword.trim() === "") ||
+    password.trim() === "" ||
+    confirmPassword.trim() === "" ||
+    password !== confirmPassword ||
+    password === oldPassword;
+
+  const passwordSupport = password.length > 0 &&
+    getPasswordStrength(password) != E_PASSWORD_STRENGTH.STRENGTH_VALID && (
+      <PasswordStrengthIndicator password={password} isFocused={isPasswordInputFocused} />
+    );
+
+  const renderPasswordMatchError = !isRetryPasswordInputFocused || confirmPassword.length >= password.length;
+
+  return (
+    <>
+      <PageHead title="Profile - Security" />
+      <ProfileSettingContentHeader title={t("auth.common.password.change_password.label.default")} />
+      <form onSubmit={handleSubmit(handleChangePassword)} className="flex flex-col gap-8 w-full mt-8">
+        <div className="flex flex-col gap-10 w-full">
+          {oldPasswordRequired && (
+            <div className="space-y-1">
+              <h4 className="text-sm">{t("auth.common.password.current_password.label")}</h4>
+              <div className="relative flex items-center rounded-md">
+                <Controller
+                  control={control}
+                  name="old_password"
+                  rules={{
+                    required: t("common.errors.required"),
+                  }}
+                  render={({ field: { value, onChange } }) => (
+                    <Input
+                      id="old_password"
+                      type={showPassword?.oldPassword ? "text" : "password"}
+                      value={value}
+                      onChange={onChange}
+                      placeholder={t("old_password")}
+                      className="w-full"
+                      hasError={Boolean(errors.old_password)}
+                    />
+                  )}
+                />
+                {showPassword?.oldPassword ? (
+                  <EyeOff
+                    className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
+                    onClick={() => handleShowPassword("oldPassword")}
+                  />
+                ) : (
+                  <Eye
+                    className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
+                    onClick={() => handleShowPassword("oldPassword")}
+                  />
+                )}
+              </div>
+              {errors.old_password && <span className="text-xs text-red-500">{errors.old_password.message}</span>}
+            </div>
+          )}
+          <div className="space-y-1">
+            <h4 className="text-sm">{t("auth.common.password.new_password.label")}</h4>
+            <div className="relative flex items-center rounded-md">
+              <Controller
+                control={control}
+                name="new_password"
+                rules={{
+                  required: t("common.errors.required"),
+                }}
+                render={({ field: { value, onChange } }) => (
+                  <Input
+                    id="new_password"
+                    type={showPassword?.password ? "text" : "password"}
+                    value={value}
+                    placeholder={t("auth.common.password.new_password.placeholder")}
+                    onChange={onChange}
+                    className="w-full"
+                    hasError={Boolean(errors.new_password)}
+                    onFocus={() => setIsPasswordInputFocused(true)}
+                    onBlur={() => setIsPasswordInputFocused(false)}
+                  />
+                )}
+              />
+              {showPassword?.password ? (
+                <EyeOff
+                  className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
+                  onClick={() => handleShowPassword("password")}
+                />
+              ) : (
+                <Eye
+                  className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
+                  onClick={() => handleShowPassword("password")}
+                />
+              )}
+            </div>
+            {passwordSupport}
+            {isNewPasswordSameAsOldPassword && !isPasswordInputFocused && (
+              <span className="text-xs text-red-500">{t("new_password_must_be_different_from_old_password")}</span>
+            )}
+          </div>
+          <div className="space-y-1">
+            <h4 className="text-sm">{t("auth.common.password.confirm_password.label")}</h4>
+            <div className="relative flex items-center rounded-md">
+              <Controller
+                control={control}
+                name="confirm_password"
+                rules={{
+                  required: t("common.errors.required"),
+                }}
+                render={({ field: { value, onChange } }) => (
+                  <Input
+                    id="confirm_password"
+                    type={showPassword?.confirmPassword ? "text" : "password"}
+                    placeholder={t("auth.common.password.confirm_password.placeholder")}
+                    value={value}
+                    onChange={onChange}
+                    className="w-full"
+                    hasError={Boolean(errors.confirm_password)}
+                    onFocus={() => setIsRetryPasswordInputFocused(true)}
+                    onBlur={() => setIsRetryPasswordInputFocused(false)}
+                  />
+                )}
+              />
+              {showPassword?.confirmPassword ? (
+                <EyeOff
+                  className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
+                  onClick={() => handleShowPassword("confirmPassword")}
+                />
+              ) : (
+                <Eye
+                  className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
+                  onClick={() => handleShowPassword("confirmPassword")}
+                />
+              )}
+            </div>
+            {!!confirmPassword && password !== confirmPassword && renderPasswordMatchError && (
+              <span className="text-sm text-red-500">{t("auth.common.password.errors.match")}</span>
+            )}
+          </div>
+        </div>
+
+        <div className="flex items-center justify-between py-2">
+          <Button variant="primary" type="submit" loading={isSubmitting} disabled={isButtonDisabled}>
+            {isSubmitting
+              ? `${t("auth.common.password.change_password.label.submitting")}`
+              : t("auth.common.password.change_password.label.default")}
+          </Button>
+        </div>
+      </form>
+    </>
+  );
+});
+
+export default SecurityPage;
--- a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/account/sidebar.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/account/sidebar.tsx
@@ -0,0 +1,75 @@
+import { observer } from "mobx-react";
+import { useParams, usePathname } from "next/navigation";
+import { CircleUser, Activity, Bell, CircleUserRound, KeyRound, Settings2, Blocks, Lock } from "lucide-react";
+// plane imports
+import { GROUPED_PROFILE_SETTINGS, PROFILE_SETTINGS_CATEGORIES } from "@plane/constants";
+import { getFileURL } from "@plane/utils";
+// components
+import { SettingsSidebar } from "@/components/settings/sidebar";
+// hooks
+import { useUser } from "@/hooks/store/user";
+
+const ICONS = {
+  profile: CircleUser,
+  security: Lock,
+  activity: Activity,
+  preferences: Settings2,
+  notifications: Bell,
+  "api-tokens": KeyRound,
+  connections: Blocks,
+};
+
+export const ProjectActionIcons = ({ type, size, className }: { type: string; size?: number; className?: string }) => {
+  if (type === undefined) return null;
+  const Icon = ICONS[type as keyof typeof ICONS];
+  if (!Icon) return null;
+  return <Icon size={size} className={className} strokeWidth={2} />;
+};
+
+type TProfileSidebarProps = {
+  isMobile?: boolean;
+};
+
+export const ProfileSidebar = observer((props: TProfileSidebarProps) => {
+  const { isMobile = false } = props;
+  // router
+  const pathname = usePathname();
+  const { workspaceSlug } = useParams();
+  // store hooks
+  const { data: currentUser } = useUser();
+
+  return (
+    <SettingsSidebar
+      isMobile={isMobile}
+      categories={PROFILE_SETTINGS_CATEGORIES}
+      groupedSettings={GROUPED_PROFILE_SETTINGS}
+      workspaceSlug={workspaceSlug?.toString() ?? ""}
+      isActive={(data: { href: string }) => pathname === `/${workspaceSlug}${data.href}/`}
+      customHeader={
+        <div className="flex items-center gap-2">
+          <div className="flex-shrink-0">
+            {!currentUser?.avatar_url || currentUser?.avatar_url === "" ? (
+              <div className="h-8 w-8 rounded-full">
+                <CircleUserRound className="h-full w-full text-custom-text-200" />
+              </div>
+            ) : (
+              <div className="relative h-8 w-8 overflow-hidden">
+                <img
+                  src={getFileURL(currentUser?.avatar_url)}
+                  className="absolute left-0 top-0 h-full w-full rounded-lg object-cover"
+                  alt={currentUser?.display_name}
+                />
+              </div>
+            )}
+          </div>
+          <div className="w-full overflow-hidden">
+            <div className="text-base font-medium text-custom-text-200 truncate">{currentUser?.display_name}</div>
+            <div className="text-sm text-custom-text-300 truncate">{currentUser?.email}</div>
+          </div>
+        </div>
+      }
+      actionIcons={ProjectActionIcons}
+      shouldRender
+    />
+  );
+});
--- 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
@@ -0,0 +1,72 @@
+"use client";
+
+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";
+import type { IProject } from "@plane/types";
+// ui
+// components
+import { NotAuthorizedView } from "@/components/auth-screens/not-authorized-view";
+import { AutoArchiveAutomation, AutoCloseAutomation } from "@/components/automation";
+import { PageHead } from "@/components/core/page-title";
+// hooks
+import { SettingsContentWrapper } from "@/components/settings/content-wrapper";
+import { SettingsHeading } from "@/components/settings/heading";
+import { useProject } from "@/hooks/store/use-project";
+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();
+  // store hooks
+  const { workspaceUserInfo, allowPermissions } = useUserPermissions();
+  const { currentProjectDetails: projectDetails, updateProject } = useProject();
+
+  const { t } = useTranslation();
+
+  // derived values
+  const canPerformProjectAdminActions = allowPermissions([EUserPermissions.ADMIN], EUserPermissionsLevel.PROJECT);
+
+  const handleChange = async (formData: Partial<IProject>) => {
+    if (!workspaceSlug || !projectId || !projectDetails) return;
+
+    await updateProject(workspaceSlug.toString(), projectId.toString(), formData).catch(() => {
+      setToast({
+        type: TOAST_TYPE.ERROR,
+        title: "Error!",
+        message: "Something went wrong. Please try again.",
+      });
+    });
+  };
+
+  // derived values
+  const pageTitle = projectDetails?.name ? `${projectDetails?.name} - Automations` : undefined;
+
+  if (workspaceUserInfo && !canPerformProjectAdminActions) {
+    return <NotAuthorizedView section="settings" isProjectView className="h-auto" />;
+  }
+
+  return (
+    <SettingsContentWrapper size="lg">
+      <PageHead title={pageTitle} />
+      <section className={`w-full ${canPerformProjectAdminActions ? "" : "opacity-60"}`}>
+        <SettingsHeading
+          title={t("project_settings.automations.heading")}
+          description={t("project_settings.automations.description")}
+        />
+        <AutoArchiveAutomation handleChange={handleChange} />
+        <AutoCloseAutomation handleChange={handleChange} />
+      </section>
+      <CustomAutomationsRoot projectId={projectId} workspaceSlug={workspaceSlug} />
+    </SettingsContentWrapper>
+  );
+});
+
+export default 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
@@ -0,0 +1,45 @@
+"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";
+import { PageHead } from "@/components/core/page-title";
+import { EstimateRoot } from "@/components/estimates";
+// hooks
+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();
+  // store
+  const { currentProjectDetails } = useProject();
+  const { workspaceUserInfo, allowPermissions } = useUserPermissions();
+
+  // derived values
+  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" />;
+  }
+
+  return (
+    <SettingsContentWrapper>
+      <PageHead title={pageTitle} />
+      <div className={`w-full ${canPerformProjectAdminActions ? "" : "pointer-events-none opacity-60"}`}>
+        <EstimateRoot
+          workspaceSlug={workspaceSlug?.toString()}
+          projectId={projectId?.toString()}
+          isAdmin={canPerformProjectAdminActions}
+        />
+      </div>
+    </SettingsContentWrapper>
+  );
+});
+
+export default 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
@@ -0,0 +1,45 @@
+"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";
+import { PageHead } from "@/components/core/page-title";
+import { SettingsContentWrapper } from "@/components/settings/content-wrapper";
+// hooks
+import { useProject } from "@/hooks/store/use-project";
+import { useUserPermissions } from "@/hooks/store/user";
+import { ProjectFeaturesList } from "@/plane-web/components/projects/settings/features-list";
+
+const FeaturesSettingsPage = observer(() => {
+  const { workspaceSlug, projectId } = useParams();
+  // store
+  const { workspaceUserInfo, allowPermissions } = useUserPermissions();
+
+  const { currentProjectDetails } = useProject();
+  // derived values
+  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" />;
+  }
+
+  return (
+    <SettingsContentWrapper>
+      <PageHead title={pageTitle} />
+      <section className={`w-full ${canPerformProjectAdminActions ? "" : "opacity-60"}`}>
+        <ProjectFeaturesList
+          workspaceSlug={workspaceSlug.toString()}
+          projectId={projectId.toString()}
+          isAdmin={canPerformProjectAdminActions}
+        />
+      </section>
+    </SettingsContentWrapper>
+  );
+});
+
+export default 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
@@ -0,0 +1,59 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
+import { autoScrollForElements } from "@atlaskit/pragmatic-drag-and-drop-auto-scroll/element";
+import { observer } from "mobx-react";
+// components
+import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
+import { NotAuthorizedView } from "@/components/auth-screens/not-authorized-view";
+import { PageHead } from "@/components/core/page-title";
+import { ProjectSettingsLabelList } from "@/components/labels";
+// hooks
+import { SettingsContentWrapper } from "@/components/settings/content-wrapper";
+import { useProject } from "@/hooks/store/use-project";
+import { useUserPermissions } from "@/hooks/store/user";
+
+const LabelsSettingsPage = observer(() => {
+  // store hooks
+  const { currentProjectDetails } = useProject();
+  const { workspaceUserInfo, allowPermissions } = useUserPermissions();
+
+  const pageTitle = currentProjectDetails?.name ? `${currentProjectDetails?.name} - Labels` : undefined;
+
+  const scrollableContainerRef = useRef<HTMLDivElement | null>(null);
+
+  // derived values
+  const canPerformProjectMemberActions = allowPermissions(
+    [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
+    EUserPermissionsLevel.PROJECT
+  );
+
+  // Enable Auto Scroll for Labels list
+  useEffect(() => {
+    const element = scrollableContainerRef.current;
+
+    if (!element) return;
+
+    return combine(
+      autoScrollForElements({
+        element,
+      })
+    );
+  }, []);
+
+  if (workspaceUserInfo && !canPerformProjectMemberActions) {
+    return <NotAuthorizedView section="settings" isProjectView className="h-auto" />;
+  }
+
+  return (
+    <SettingsContentWrapper>
+      <PageHead title={pageTitle} />
+      <div ref={scrollableContainerRef} className="h-full w-full gap-10">
+        <ProjectSettingsLabelList />
+      </div>
+    </SettingsContentWrapper>
+  );
+});
+
+export default 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
@@ -0,0 +1,56 @@
+"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";
+// components
+import { NotAuthorizedView } from "@/components/auth-screens/not-authorized-view";
+import { PageHead } from "@/components/core/page-title";
+// hooks
+import { ProjectMemberList } from "@/components/project/member-list";
+import { ProjectSettingsMemberDefaults } from "@/components/project/project-settings-member-defaults";
+import { SettingsContentWrapper } from "@/components/settings/content-wrapper";
+import { SettingsHeading } from "@/components/settings/heading";
+import { useProject } from "@/hooks/store/use-project";
+import { useUserPermissions } from "@/hooks/store/user";
+// plane web imports
+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();
+  // 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],
+    EUserPermissionsLevel.PROJECT
+  );
+  const isWorkspaceAdmin = allowPermissions([EUserPermissions.ADMIN], EUserPermissionsLevel.WORKSPACE);
+  const canPerformProjectMemberActions = isProjectMemberOrAdmin || isWorkspaceAdmin;
+
+  if (workspaceUserInfo && !canPerformProjectMemberActions) {
+    return <NotAuthorizedView section="settings" isProjectView className="h-auto" />;
+  }
+
+  return (
+    <SettingsContentWrapper size="lg">
+      <PageHead title={pageTitle} />
+      <SettingsHeading title={t(getProjectSettingsPageLabelI18nKey("members", "common.members"))} />
+      <ProjectSettingsMemberDefaults projectId={projectId} workspaceSlug={workspaceSlug} />
+      <ProjectTeamspaceList projectId={projectId} workspaceSlug={workspaceSlug} />
+      <ProjectMemberList projectId={projectId} workspaceSlug={workspaceSlug} />
+    </SettingsContentWrapper>
+  );
+});
+
+export default 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
@@ -0,0 +1,97 @@
+"use client";
+
+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";
+// components
+import { PageHead } from "@/components/core/page-title";
+import { DeleteProjectModal } from "@/components/project/delete-project-modal";
+import { ProjectDetailsForm } from "@/components/project/form";
+import { ProjectDetailsFormLoader } from "@/components/project/form-loader";
+import { ArchiveRestoreProjectModal } from "@/components/project/settings/archive-project/archive-restore-modal";
+import { ArchiveProjectSelection } from "@/components/project/settings/archive-project/selection";
+import { DeleteProjectSection } from "@/components/project/settings/delete-project-section";
+import { SettingsContentWrapper } from "@/components/settings/content-wrapper";
+// hooks
+import { useProject } from "@/hooks/store/use-project";
+import { useUserPermissions } from "@/hooks/store/user";
+
+const ProjectSettingsPage = observer(() => {
+  // 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
+  );
+  // derived values
+  const isAdmin = allowPermissions(
+    [EUserPermissions.ADMIN],
+    EUserPermissionsLevel.PROJECT,
+    workspaceSlug.toString(),
+    projectId.toString()
+  );
+
+  const pageTitle = currentProjectDetails?.name ? `${currentProjectDetails?.name} - General Settings` : undefined;
+
+  return (
+    <SettingsContentWrapper>
+      <PageHead title={pageTitle} />
+      {currentProjectDetails && workspaceSlug && projectId && (
+        <>
+          <ArchiveRestoreProjectModal
+            workspaceSlug={workspaceSlug.toString()}
+            projectId={projectId.toString()}
+            isOpen={archiveProject}
+            onClose={() => setArchiveProject(false)}
+            archive
+          />
+          <DeleteProjectModal
+            project={currentProjectDetails}
+            isOpen={Boolean(selectProject)}
+            onClose={() => setSelectedProject(null)}
+          />
+        </>
+      )}
+
+      <div className={`w-full ${isAdmin ? "" : "opacity-60"}`}>
+        {currentProjectDetails && workspaceSlug && projectId && !isLoading ? (
+          <ProjectDetailsForm
+            project={currentProjectDetails}
+            workspaceSlug={workspaceSlug.toString()}
+            projectId={projectId.toString()}
+            isAdmin={isAdmin}
+          />
+        ) : (
+          <ProjectDetailsFormLoader />
+        )}
+
+        {isAdmin && currentProjectDetails && (
+          <>
+            <ArchiveProjectSelection
+              projectDetails={currentProjectDetails}
+              handleArchive={() => setArchiveProject(true)}
+            />
+            <DeleteProjectSection
+              projectDetails={currentProjectDetails}
+              handleDelete={() => setSelectedProject(currentProjectDetails.id ?? null)}
+            />
+          </>
+        )}
+      </div>
+    </SettingsContentWrapper>
+  );
+});
+
+export default 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
@@ -0,0 +1,53 @@
+"use client";
+
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+// components
+import { NotAuthorizedView } from "@/components/auth-screens/not-authorized-view";
+import { PageHead } from "@/components/core/page-title";
+import { ProjectStateRoot } from "@/components/project-states";
+// hook
+import { SettingsContentWrapper } from "@/components/settings/content-wrapper";
+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();
+  // store
+  const { currentProjectDetails } = useProject();
+  const { workspaceUserInfo, allowPermissions } = useUserPermissions();
+
+  const { t } = useTranslation();
+
+  // derived values
+  const pageTitle = currentProjectDetails?.name ? `${currentProjectDetails?.name} - States` : undefined;
+  // derived values
+  const canPerformProjectMemberActions = allowPermissions(
+    [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
+    EUserPermissionsLevel.PROJECT
+  );
+
+  if (workspaceUserInfo && !canPerformProjectMemberActions) {
+    return <NotAuthorizedView section="settings" isProjectView className="h-auto" />;
+  }
+
+  return (
+    <SettingsContentWrapper>
+      <PageHead title={pageTitle} />
+      <div className="w-full">
+        <SettingsHeading
+          title={t("project_settings.states.heading")}
+          description={t("project_settings.states.description")}
+        />
+        {workspaceSlug && projectId && (
+          <ProjectStateRoot workspaceSlug={workspaceSlug.toString()} projectId={projectId.toString()} />
+        )}
+      </div>
+    </SettingsContentWrapper>
+  );
+});
+
+export default StatesSettingsPage;
--- a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/layout.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/layout.tsx
@@ -0,0 +1,47 @@
+"use client";
+
+import type { ReactNode } from "react";
+import { useEffect } from "react";
+import { observer } from "mobx-react";
+import { useParams, usePathname } from "next/navigation";
+// components
+import { getProjectActivePath } from "@/components/settings/helper";
+import { SettingsMobileNav } from "@/components/settings/mobile";
+import { ProjectSettingsSidebar } from "@/components/settings/project/sidebar";
+import { useProject } from "@/hooks/store/use-project";
+import { useAppRouter } from "@/hooks/use-app-router";
+import { ProjectAuthWrapper } from "@/plane-web/layouts/project-wrapper";
+
+type Props = {
+  children: ReactNode;
+};
+
+const ProjectSettingsLayout = observer((props: Props) => {
+  const { children } = props;
+  // router
+  const router = useAppRouter();
+  const pathname = usePathname();
+  const { workspaceSlug, projectId } = useParams();
+  const { joinedProjectIds } = useProject();
+
+  useEffect(() => {
+    if (projectId) return;
+    if (joinedProjectIds.length > 0) {
+      router.push(`/${workspaceSlug}/settings/projects/${joinedProjectIds[0]}`);
+    }
+  }, [joinedProjectIds, router, workspaceSlug, projectId]);
+
+  return (
+    <>
+      <SettingsMobileNav hamburgerContent={ProjectSettingsSidebar} activePath={getProjectActivePath(pathname) || ""} />
+      <ProjectAuthWrapper workspaceSlug={workspaceSlug?.toString()} projectId={projectId?.toString()}>
+        <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;
--- a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/page.tsx
@@ -0,0 +1,43 @@
+"use client";
+import Image from "next/image";
+import Link from "next/link";
+import { useTheme } from "next-themes";
+import { PROJECT_TRACKER_ELEMENTS } from "@plane/constants";
+import { Button, getButtonStyling } from "@plane/propel/button";
+import { cn } from "@plane/utils";
+import { useCommandPalette } from "@/hooks/store/use-command-palette";
+
+const ProjectSettingsPage = () => {
+  // store hooks
+  const { resolvedTheme } = useTheme();
+  const { toggleCreateProjectModal } = useCommandPalette();
+  // derived values
+  const resolvedPath =
+    resolvedTheme === "dark"
+      ? "/empty-state/project-settings/no-projects-dark.png"
+      : "/empty-state/project-settings/no-projects-light.png";
+  return (
+    <div className="flex flex-col gap-4 items-center justify-center h-full max-w-[480px] mx-auto">
+      <Image src={resolvedPath} alt="No projects yet" width={384} height={250} />
+      <div className="text-lg font-semibold text-custom-text-350">No projects yet</div>
+      <div className="text-sm text-custom-text-350 text-center">
+        Projects act as the foundation for goal-driven work. They let you manage your teams, tasks, and everything you
+        need to get things done.
+      </div>
+      <div className="flex gap-2">
+        <Link href="https://plane.so/" target="_blank" className={cn(getButtonStyling("neutral-primary", "sm"))}>
+          Learn more about projects
+        </Link>
+        <Button
+          size="sm"
+          onClick={() => toggleCreateProjectModal(true)}
+          data-ph-element={PROJECT_TRACKER_ELEMENTS.EMPTY_STATE_CREATE_PROJECT_BUTTON}
+        >
+          Start your first project
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+export default ProjectSettingsPage;