feat: init

apps/web/ce/components/workspace/app-switcher.tsx

@@ -0,0 +1,5 @@
+"use client";
+
+import React from "react";
+
+export const WorkspaceAppSwitcher = () => <></>;

apps/web/ce/components/workspace/billing/billing-actions-button.tsx

@@ -0,0 +1,10 @@
+"use client";
+
+import { observer } from "mobx-react";
+
+export type TBillingActionsButtonProps = {
+  canPerformWorkspaceAdminActions: boolean;
+};
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export const BillingActionsButton = observer((props: TBillingActionsButtonProps) => <></>);

apps/web/ce/components/workspace/billing/comparison/frequency-toggle.tsx

@@ -0,0 +1,61 @@
+import type { FC } from "react";
+// plane imports
+import { observer } from "mobx-react";
+import type { EProductSubscriptionEnum, TBillingFrequency } from "@plane/types";
+import { getSubscriptionBackgroundColor, getDiscountPillStyle } from "@plane/ui";
+import { calculateYearlyDiscount, cn } from "@plane/utils";
+
+type TPlanFrequencyToggleProps = {
+  subscriptionType: EProductSubscriptionEnum;
+  monthlyPrice: number;
+  yearlyPrice: number;
+  selectedFrequency: TBillingFrequency;
+  setSelectedFrequency: (frequency: TBillingFrequency) => void;
+};
+
+export const PlanFrequencyToggle: FC<TPlanFrequencyToggleProps> = observer((props) => {
+  const { subscriptionType, monthlyPrice, yearlyPrice, selectedFrequency, setSelectedFrequency } = props;
+  // derived values
+  const yearlyDiscount = calculateYearlyDiscount(monthlyPrice, yearlyPrice);
+
+  return (
+    <div className="flex w-full items-center cursor-pointer py-1 animate-slide-up">
+      <div
+        className={cn(
+          "flex space-x-1 rounded-md bg-custom-primary-200/10 p-0.5 w-full",
+          getSubscriptionBackgroundColor(subscriptionType, "50")
+        )}
+      >
+        <div
+          key="month"
+          onClick={() => setSelectedFrequency("month")}
+          className={cn(
+            "w-full rounded px-1 py-0.5 text-xs font-medium leading-5 text-center",
+            selectedFrequency === "month"
+              ? "bg-custom-background-100 text-custom-text-100 shadow"
+              : "text-custom-text-300 hover:text-custom-text-200"
+          )}
+        >
+          Monthly
+        </div>
+        <div
+          key="year"
+          onClick={() => setSelectedFrequency("year")}
+          className={cn(
+            "w-full rounded px-1 py-0.5 text-xs font-medium leading-5 text-center",
+            selectedFrequency === "year"
+              ? "bg-custom-background-100 text-custom-text-100 shadow"
+              : "text-custom-text-300 hover:text-custom-text-200"
+          )}
+        >
+          Yearly
+          {yearlyDiscount > 0 && (
+            <span className={cn(getDiscountPillStyle(subscriptionType), "rounded-full px-1 py-0.5 ml-1 text-[9px]")}>
+              -{yearlyDiscount}%
+            </span>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+});

apps/web/ce/components/workspace/billing/comparison/plan-detail.tsx

@@ -0,0 +1,127 @@
+import type { FC } from "react";
+import { observer } from "mobx-react";
+// plane imports
+import {
+  SUBSCRIPTION_REDIRECTION_URLS,
+  SUBSCRIPTION_WITH_BILLING_FREQUENCY,
+  TALK_TO_SALES_URL,
+  WORKSPACE_SETTINGS_TRACKER_ELEMENTS,
+  WORKSPACE_SETTINGS_TRACKER_EVENTS,
+} from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { getButtonStyling } from "@plane/propel/button";
+import type { TBillingFrequency } from "@plane/types";
+import { EProductSubscriptionEnum } from "@plane/types";
+import { getUpgradeButtonStyle } from "@plane/ui";
+import { cn, getSubscriptionName } from "@plane/utils";
+// components
+import { DiscountInfo } from "@/components/license/modal/card/discount-info";
+import type { TPlanDetail } from "@/constants/plans";
+// local imports
+import { captureSuccess } from "@/helpers/event-tracker.helper";
+import { PlanFrequencyToggle } from "./frequency-toggle";
+
+type TPlanDetailProps = {
+  subscriptionType: EProductSubscriptionEnum;
+  planDetail: TPlanDetail;
+  billingFrequency: TBillingFrequency | undefined;
+  setBillingFrequency: (frequency: TBillingFrequency) => void;
+};
+
+const COMMON_BUTTON_STYLE =
+  "relative inline-flex items-center justify-center w-full px-4 py-1.5 text-xs font-medium rounded-lg focus:outline-none transition-all duration-300 animate-slide-up";
+
+export const PlanDetail: FC<TPlanDetailProps> = observer((props) => {
+  const { subscriptionType, planDetail, billingFrequency, setBillingFrequency } = props;
+  // plane hooks
+  const { t } = useTranslation();
+  // subscription details
+  const subscriptionName = getSubscriptionName(subscriptionType);
+  const isSubscriptionActive = planDetail.isActive;
+  // pricing details
+  const displayPrice = billingFrequency === "month" ? planDetail.monthlyPrice : planDetail.yearlyPrice;
+  const pricingDescription = isSubscriptionActive ? "a user per month" : "Quote on request";
+  const pricingSecondaryDescription =
+    billingFrequency === "month"
+      ? planDetail.monthlyPriceSecondaryDescription
+      : planDetail.yearlyPriceSecondaryDescription;
+  // helper styles
+  const upgradeButtonStyle = getUpgradeButtonStyle(subscriptionType, false) ?? getButtonStyling("primary", "lg");
+
+  const handleRedirection = () => {
+    const frequency = billingFrequency ?? "year";
+    // Get the redirection URL based on the subscription type and billing frequency
+    const redirectUrl = SUBSCRIPTION_REDIRECTION_URLS[subscriptionType][frequency] ?? TALK_TO_SALES_URL;
+    captureSuccess({
+      eventName: WORKSPACE_SETTINGS_TRACKER_EVENTS.upgrade_plan_redirected,
+      payload: {
+        subscriptionType,
+      },
+    });
+    // Open the URL in a new tab
+    window.open(redirectUrl, "_blank");
+  };
+
+  return (
+    <div className="flex flex-col justify-between col-span-1 p-3 space-y-0.5">
+      {/* Plan name and pricing section */}
+      <div className="flex flex-col items-start">
+        <div className="flex w-full gap-2 items-center text-xl font-medium">
+          <span className="transition-all duration-300">{subscriptionName}</span>
+          {subscriptionType === EProductSubscriptionEnum.PRO && (
+            <span className="px-2 rounded text-custom-primary-200 bg-custom-primary-100/20 text-xs">Popular</span>
+          )}
+        </div>
+        <div className="flex gap-x-2 items-start text-custom-text-300 pb-1 transition-all duration-300 animate-slide-up">
+          {isSubscriptionActive && displayPrice !== undefined && (
+            <div className="flex items-center gap-1 text-2xl text-custom-text-100 font-semibold transition-all duration-300">
+              <DiscountInfo
+                currency="$"
+                frequency={billingFrequency ?? "month"}
+                price={displayPrice}
+                subscriptionType={subscriptionType}
+                className="mr-1.5"
+              />
+            </div>
+          )}
+          <div className="pt-1">
+            {pricingDescription && <div className="transition-all duration-300">{pricingDescription}</div>}
+            {pricingSecondaryDescription && (
+              <div className="text-xs text-custom-text-400 transition-all duration-300">
+                {pricingSecondaryDescription}
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+
+      {/* Billing frequency toggle */}
+      {SUBSCRIPTION_WITH_BILLING_FREQUENCY.includes(subscriptionType) && billingFrequency && (
+        <div className="h-8 py-0.5">
+          <PlanFrequencyToggle
+            subscriptionType={subscriptionType}
+            monthlyPrice={planDetail.monthlyPrice || 0}
+            yearlyPrice={planDetail.yearlyPrice || 0}
+            selectedFrequency={billingFrequency}
+            setSelectedFrequency={setBillingFrequency}
+          />
+        </div>
+      )}
+
+      {/* Subscription button */}
+      <div className={cn("flex flex-col gap-1 py-3 items-start transition-all duration-300")}>
+        <button
+          onClick={handleRedirection}
+          className={cn(upgradeButtonStyle, COMMON_BUTTON_STYLE)}
+          data-ph-element={
+            isSubscriptionActive
+              ? WORKSPACE_SETTINGS_TRACKER_ELEMENTS.BILLING_UPGRADE_BUTTON(subscriptionType)
+              : WORKSPACE_SETTINGS_TRACKER_ELEMENTS.BILLING_TALK_TO_SALES_BUTTON
+          }
+        >
+          {isSubscriptionActive ? `Upgrade to ${subscriptionName}` : t("common.upgrade_cta.talk_to_sales")}
+        </button>
+      </div>
+    </div>
+  );
+});

apps/web/ce/components/workspace/billing/comparison/root.tsx

@@ -0,0 +1,48 @@
+import { observer } from "mobx-react";
+// plane imports
+import type { EProductSubscriptionEnum, TBillingFrequency } from "@plane/types";
+// components
+import { PlansComparisonBase, shouldRenderPlanDetail } from "@/components/workspace/billing/comparison/base";
+import type { TPlanePlans } from "@/constants/plans";
+import { PLANE_PLANS } from "@/constants/plans";
+// plane web imports
+import { PlanDetail } from "./plan-detail";
+
+type TPlansComparisonProps = {
+  isCompareAllFeaturesSectionOpen: boolean;
+  getBillingFrequency: (subscriptionType: EProductSubscriptionEnum) => TBillingFrequency | undefined;
+  setBillingFrequency: (subscriptionType: EProductSubscriptionEnum, frequency: TBillingFrequency) => void;
+  setIsCompareAllFeaturesSectionOpen: React.Dispatch<React.SetStateAction<boolean>>;
+};
+
+export const PlansComparison = observer((props: TPlansComparisonProps) => {
+  const {
+    isCompareAllFeaturesSectionOpen,
+    getBillingFrequency,
+    setBillingFrequency,
+    setIsCompareAllFeaturesSectionOpen,
+  } = props;
+  // plan details
+  const { planDetails } = PLANE_PLANS;
+
+  return (
+    <PlansComparisonBase
+      planeDetails={Object.entries(planDetails).map(([planKey, plan]) => {
+        const currentPlanKey = planKey as TPlanePlans;
+        if (!shouldRenderPlanDetail(currentPlanKey)) return null;
+        return (
+          <PlanDetail
+            key={planKey}
+            subscriptionType={plan.id}
+            planDetail={plan}
+            billingFrequency={getBillingFrequency(plan.id)}
+            setBillingFrequency={(frequency) => setBillingFrequency(plan.id, frequency)}
+          />
+        );
+      })}
+      isSelfManaged
+      isCompareAllFeaturesSectionOpen={isCompareAllFeaturesSectionOpen}
+      setIsCompareAllFeaturesSectionOpen={setIsCompareAllFeaturesSectionOpen}
+    />
+  );
+});

apps/web/ce/components/workspace/billing/index.ts

@@ -0,0 +1 @@
+export * from "./root";

apps/web/ce/components/workspace/billing/root.tsx

@@ -0,0 +1,74 @@
+import { useState } from "react";
+import { observer } from "mobx-react";
+// plane imports
+import { DEFAULT_PRODUCT_BILLING_FREQUENCY, SUBSCRIPTION_WITH_BILLING_FREQUENCY } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import type { TBillingFrequency, TProductBillingFrequency } from "@plane/types";
+import { EProductSubscriptionEnum } from "@plane/types";
+import { getSubscriptionTextColor } from "@plane/ui";
+import { cn } from "@plane/utils";
+// components
+import { SettingsHeading } from "@/components/settings/heading";
+// local imports
+import { PlansComparison } from "./comparison/root";
+
+export const BillingRoot = observer(() => {
+  const [isCompareAllFeaturesSectionOpen, setIsCompareAllFeaturesSectionOpen] = useState(false);
+  const [productBillingFrequency, setProductBillingFrequency] = useState<TProductBillingFrequency>(
+    DEFAULT_PRODUCT_BILLING_FREQUENCY
+  );
+  const { t } = useTranslation();
+
+  /**
+   * Retrieves the billing frequency for a given subscription type
+   * @param {EProductSubscriptionEnum} subscriptionType - Type of subscription to get frequency for
+   * @returns {TBillingFrequency | undefined} - Billing frequency if subscription supports it, undefined otherwise
+   */
+  const getBillingFrequency = (subscriptionType: EProductSubscriptionEnum): TBillingFrequency | undefined =>
+    SUBSCRIPTION_WITH_BILLING_FREQUENCY.includes(subscriptionType)
+      ? productBillingFrequency[subscriptionType]
+      : undefined;
+
+  /**
+   * Updates the billing frequency for a specific subscription type
+   * @param {EProductSubscriptionEnum} subscriptionType - Type of subscription to update
+   * @param {TBillingFrequency} frequency - New billing frequency to set
+   * @returns {void}
+   */
+  const setBillingFrequency = (subscriptionType: EProductSubscriptionEnum, frequency: TBillingFrequency): void =>
+    setProductBillingFrequency({ ...productBillingFrequency, [subscriptionType]: frequency });
+
+  return (
+    <section className="relative size-full flex flex-col overflow-y-auto scrollbar-hide">
+      <SettingsHeading
+        title={t("workspace_settings.settings.billing_and_plans.heading")}
+        description={t("workspace_settings.settings.billing_and_plans.description")}
+      />
+      <div className={cn("transition-all duration-500 ease-in-out will-change-[height,opacity]")}>
+        <div className="py-6">
+          <div className={cn("px-6 py-4 border border-custom-border-200 rounded-lg")}>
+            <div className="flex gap-2 font-medium items-center justify-between">
+              <div className="flex flex-col gap-1">
+                <h4
+                  className={cn("text-xl leading-6 font-bold", getSubscriptionTextColor(EProductSubscriptionEnum.FREE))}
+                >
+                  Community
+                </h4>
+                <div className="text-sm text-custom-text-200 font-medium">
+                  Unlimited projects, issues, cycles, modules, pages, and storage
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className="text-xl font-semibold mt-3">All plans</div>
+      </div>
+      <PlansComparison
+        isCompareAllFeaturesSectionOpen={isCompareAllFeaturesSectionOpen}
+        getBillingFrequency={getBillingFrequency}
+        setBillingFrequency={setBillingFrequency}
+        setIsCompareAllFeaturesSectionOpen={setIsCompareAllFeaturesSectionOpen}
+      />
+    </section>
+  );
+});

apps/web/ce/components/workspace/content-wrapper.tsx

@@ -0,0 +1,9 @@
+"use client";
+import React from "react";
+import { observer } from "mobx-react";
+
+export const WorkspaceContentWrapper = observer(({ children }: { children: React.ReactNode }) => (
+  <div className="flex relative size-full overflow-hidden bg-custom-background-90 rounded-lg transition-all ease-in-out duration-300">
+    <div className="size-full p-2 flex-grow transition-all ease-in-out duration-300 overflow-hidden">{children}</div>
+  </div>
+));

apps/web/ce/components/workspace/delete-workspace-modal.tsx

@@ -0,0 +1,27 @@
+"use client";
+
+import React from "react";
+import { observer } from "mobx-react";
+import type { IWorkspace } from "@plane/types";
+// ui
+import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
+// constants
+// hooks
+
+import { DeleteWorkspaceForm } from "@/components/workspace/delete-workspace-form";
+
+type Props = {
+  isOpen: boolean;
+  data: IWorkspace | null;
+  onClose: () => void;
+};
+
+export const DeleteWorkspaceModal: React.FC<Props> = observer((props) => {
+  const { isOpen, data, onClose } = props;
+
+  return (
+    <ModalCore isOpen={isOpen} handleClose={() => onClose()} position={EModalPosition.CENTER} width={EModalWidth.XL}>
+      <DeleteWorkspaceForm data={data} onClose={onClose} />
+    </ModalCore>
+  );
+});

apps/web/ce/components/workspace/delete-workspace-section.tsx

@@ -0,0 +1,68 @@
+import type { FC } from "react";
+import { useState } from "react";
+import { observer } from "mobx-react";
+import { ChevronDown, ChevronUp } from "lucide-react";
+// types
+import { WORKSPACE_TRACKER_ELEMENTS } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { Button } from "@plane/propel/button";
+import type { IWorkspace } from "@plane/types";
+// ui
+import { Collapsible } from "@plane/ui";
+import { DeleteWorkspaceModal } from "./delete-workspace-modal";
+// components
+
+type TDeleteWorkspace = {
+  workspace: IWorkspace | null;
+};
+
+export const DeleteWorkspaceSection: FC<TDeleteWorkspace> = observer((props) => {
+  const { workspace } = props;
+  // states
+  const [isOpen, setIsOpen] = useState(false);
+  const [deleteWorkspaceModal, setDeleteWorkspaceModal] = useState(false);
+  const { t } = useTranslation();
+
+  return (
+    <>
+      <DeleteWorkspaceModal
+        data={workspace}
+        isOpen={deleteWorkspaceModal}
+        onClose={() => setDeleteWorkspaceModal(false)}
+      />
+      <div className="border-t border-custom-border-100">
+        <div className="w-full">
+          <Collapsible
+            isOpen={isOpen}
+            onToggle={() => setIsOpen(!isOpen)}
+            className="w-full"
+            buttonClassName="flex w-full items-center justify-between py-4"
+            title={
+              <>
+                <span className="text-lg tracking-tight">
+                  {t("workspace_settings.settings.general.delete_workspace")}
+                </span>
+                {isOpen ? <ChevronUp className="h-5 w-5" /> : <ChevronDown className="h-5 w-5" />}
+              </>
+            }
+          >
+            <div className="flex flex-col gap-4">
+              <span className="text-base tracking-tight">
+                {t("workspace_settings.settings.general.delete_workspace_description")}
+              </span>
+              <div>
+                <Button
+                  variant="danger"
+                  onClick={() => setDeleteWorkspaceModal(true)}
+                  data-ph-element={WORKSPACE_TRACKER_ELEMENTS.DELETE_WORKSPACE_BUTTON}
+                >
+                  {t("workspace_settings.settings.general.delete_btn")}
+                </Button>
+              </div>
+            </div>
+          </Collapsible>
+        </div>
+      </div>
+    </>
+  );
+});

apps/web/ce/components/workspace/edition-badge.tsx

@@ -0,0 +1,41 @@
+import { useState } from "react";
+import { observer } from "mobx-react";
+// ui
+import { useTranslation } from "@plane/i18n";
+import { Button } from "@plane/propel/button";
+import { Tooltip } from "@plane/propel/tooltip";
+// hooks
+import { usePlatformOS } from "@/hooks/use-platform-os";
+import packageJson from "package.json";
+// local components
+import { PaidPlanUpgradeModal } from "../license";
+
+export const WorkspaceEditionBadge = observer(() => {
+  // states
+  const [isPaidPlanPurchaseModalOpen, setIsPaidPlanPurchaseModalOpen] = useState(false);
+  // translation
+  const { t } = useTranslation();
+  // platform
+  const { isMobile } = usePlatformOS();
+
+  return (
+    <>
+      <PaidPlanUpgradeModal
+        isOpen={isPaidPlanPurchaseModalOpen}
+        handleClose={() => setIsPaidPlanPurchaseModalOpen(false)}
+      />
+      <Tooltip tooltipContent={`Version: v${packageJson.version}`} isMobile={isMobile}>
+        <Button
+          tabIndex={-1}
+          variant="accent-primary"
+          className="w-fit min-w-24 cursor-pointer rounded-2xl px-2 py-1 text-center text-sm font-medium outline-none"
+          onClick={() => setIsPaidPlanPurchaseModalOpen(true)}
+          aria-haspopup="dialog"
+          aria-label={t("aria_labels.projects_sidebar.edition_badge")}
+        >
+          Community
+        </Button>
+      </Tooltip>
+    </>
+  );
+});

apps/web/ce/components/workspace/members/invite-modal.tsx

@@ -0,0 +1,60 @@
+"use client";
+
+import React from "react";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+// plane imports
+import { useTranslation } from "@plane/i18n";
+import type { IWorkspaceBulkInviteFormData } from "@plane/types";
+import { EModalWidth, EModalPosition, ModalCore } from "@plane/ui";
+// components
+import { InvitationModalActions } from "@/components/workspace/invite-modal/actions";
+import { InvitationFields } from "@/components/workspace/invite-modal/fields";
+import { InvitationForm } from "@/components/workspace/invite-modal/form";
+// hooks
+import { useWorkspaceInvitationActions } from "@/hooks/use-workspace-invitation";
+
+export type TSendWorkspaceInvitationModalProps = {
+  isOpen: boolean;
+  onClose: () => void;
+  onSubmit: (data: IWorkspaceBulkInviteFormData) => Promise<void> | undefined;
+};
+
+export const SendWorkspaceInvitationModal: React.FC<TSendWorkspaceInvitationModalProps> = observer((props) => {
+  const { isOpen, onClose, onSubmit } = props;
+  // store hooks
+  const { t } = useTranslation();
+  // router
+  const { workspaceSlug } = useParams();
+  // derived values
+  const { control, fields, formState, remove, onFormSubmit, handleClose, appendField } = useWorkspaceInvitationActions({
+    onSubmit,
+    onClose,
+  });
+
+  return (
+    <ModalCore isOpen={isOpen} position={EModalPosition.TOP} width={EModalWidth.XXL}>
+      <InvitationForm
+        title={t("workspace_settings.settings.members.modal.title")}
+        description={t("workspace_settings.settings.members.modal.description")}
+        onSubmit={onFormSubmit}
+        actions={
+          <InvitationModalActions
+            isSubmitting={formState.isSubmitting}
+            handleClose={handleClose}
+            appendField={appendField}
+          />
+        }
+        className="p-5"
+      >
+        <InvitationFields
+          workspaceSlug={workspaceSlug.toString()}
+          fields={fields}
+          control={control}
+          formState={formState}
+          remove={remove}
+        />
+      </InvitationForm>
+    </ModalCore>
+  );
+});

apps/web/ce/components/workspace/settings/useMemberColumns.tsx

@@ -0,0 +1,131 @@
+import { useState } from "react";
+import { useParams } from "next/navigation";
+import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { renderFormattedDate } from "@plane/utils";
+import { MemberHeaderColumn } from "@/components/project/member-header-column";
+import type { RowData } from "@/components/workspace/settings/member-columns";
+import { AccountTypeColumn, NameColumn } from "@/components/workspace/settings/member-columns";
+import { useMember } from "@/hooks/store/use-member";
+import { useUser, useUserPermissions } from "@/hooks/store/user";
+import type { IMemberFilters } from "@/store/member/utils";
+
+export const useMemberColumns = () => {
+  // states
+  const [removeMemberModal, setRemoveMemberModal] = useState<RowData | null>(null);
+
+  const { workspaceSlug } = useParams();
+
+  const { data: currentUser } = useUser();
+  const { allowPermissions } = useUserPermissions();
+  const {
+    workspace: {
+      filtersStore: { filters, updateFilters },
+    },
+  } = useMember();
+  const { t } = useTranslation();
+
+  // derived values
+  const isAdmin = allowPermissions([EUserPermissions.ADMIN], EUserPermissionsLevel.WORKSPACE);
+
+  const isSuspended = (rowData: RowData) => rowData.is_active === false;
+  // handlers
+  const handleDisplayFilterUpdate = (filterUpdates: Partial<IMemberFilters>) => {
+    updateFilters(filterUpdates);
+  };
+
+  const columns = [
+    {
+      key: "Full name",
+      content: t("workspace_settings.settings.members.details.full_name"),
+      thClassName: "text-left",
+      thRender: () => (
+        <MemberHeaderColumn
+          property="full_name"
+          displayFilters={filters}
+          handleDisplayFilterUpdate={handleDisplayFilterUpdate}
+        />
+      ),
+      tdRender: (rowData: RowData) => (
+        <NameColumn
+          rowData={rowData}
+          workspaceSlug={workspaceSlug as string}
+          isAdmin={isAdmin}
+          currentUser={currentUser}
+          setRemoveMemberModal={setRemoveMemberModal}
+        />
+      ),
+    },
+
+    {
+      key: "Display name",
+      content: t("workspace_settings.settings.members.details.display_name"),
+      tdRender: (rowData: RowData) => (
+        <div className={`w-32 ${isSuspended(rowData) ? "text-custom-text-400" : ""}`}>
+          {rowData.member.display_name}
+        </div>
+      ),
+      thRender: () => (
+        <MemberHeaderColumn
+          property="display_name"
+          displayFilters={filters}
+          handleDisplayFilterUpdate={handleDisplayFilterUpdate}
+        />
+      ),
+    },
+
+    {
+      key: "Email address",
+      content: t("workspace_settings.settings.members.details.email_address"),
+      tdRender: (rowData: RowData) => (
+        <div className={`w-48 truncate ${isSuspended(rowData) ? "text-custom-text-400" : ""}`}>
+          {rowData.member.email}
+        </div>
+      ),
+      thRender: () => (
+        <MemberHeaderColumn
+          property="email"
+          displayFilters={filters}
+          handleDisplayFilterUpdate={handleDisplayFilterUpdate}
+        />
+      ),
+    },
+
+    {
+      key: "Account type",
+      content: t("workspace_settings.settings.members.details.account_type"),
+      thRender: () => (
+        <MemberHeaderColumn
+          property="role"
+          displayFilters={filters}
+          handleDisplayFilterUpdate={handleDisplayFilterUpdate}
+        />
+      ),
+      tdRender: (rowData: RowData) => <AccountTypeColumn rowData={rowData} workspaceSlug={workspaceSlug as string} />,
+    },
+
+    {
+      key: "Authentication",
+      content: t("workspace_settings.settings.members.details.authentication"),
+      tdRender: (rowData: RowData) =>
+        isSuspended(rowData) ? null : (
+          <div className="capitalize">{rowData.member.last_login_medium?.replace("-", " ")}</div>
+        ),
+    },
+
+    {
+      key: "Joining date",
+      content: t("workspace_settings.settings.members.details.joining_date"),
+      tdRender: (rowData: RowData) =>
+        isSuspended(rowData) ? null : <div>{renderFormattedDate(rowData?.member?.joining_date)}</div>,
+      thRender: () => (
+        <MemberHeaderColumn
+          property="joining_date"
+          displayFilters={filters}
+          handleDisplayFilterUpdate={handleDisplayFilterUpdate}
+        />
+      ),
+    },
+  ];
+  return { columns, workspaceSlug, removeMemberModal, setRemoveMemberModal };
+};

apps/web/ce/components/workspace/sidebar/app-search.tsx

@@ -0,0 +1,23 @@
+import { observer } from "mobx-react";
+// plane imports
+import { useTranslation } from "@plane/i18n";
+// hooks
+import { SidebarSearchButton } from "@/components/sidebar/search-button";
+import { useCommandPalette } from "@/hooks/store/use-command-palette";
+
+export const AppSearch = observer(() => {
+  // store hooks
+  const { toggleCommandPaletteModal } = useCommandPalette();
+  // translation
+  const { t } = useTranslation();
+
+  return (
+    <button
+      type="button"
+      onClick={() => toggleCommandPaletteModal(true)}
+      aria-label={t("aria_labels.projects_sidebar.open_command_palette")}
+    >
+      <SidebarSearchButton isActive={false} />
+    </button>
+  );
+});

apps/web/ce/components/workspace/sidebar/extended-sidebar-item.tsx

@@ -0,0 +1,222 @@
+import type { FC } from "react";
+import { useEffect, useRef, useState } from "react";
+import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
+import { draggable, dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
+import { attachInstruction, extractInstruction } from "@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item";
+import { observer } from "mobx-react";
+import Link from "next/link";
+import { useParams, usePathname } from "next/navigation";
+import { Pin, PinOff } from "lucide-react";
+// plane imports
+import type { IWorkspaceSidebarNavigationItem } from "@plane/constants";
+import { EUserPermissionsLevel } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { Tooltip } from "@plane/propel/tooltip";
+import { DragHandle, DropIndicator } from "@plane/ui";
+import { cn } from "@plane/utils";
+// components
+import { SidebarNavItem } from "@/components/sidebar/sidebar-navigation";
+// hooks
+import { useAppTheme } from "@/hooks/store/use-app-theme";
+import { useWorkspace } from "@/hooks/store/use-workspace";
+import { useUser, useUserPermissions } from "@/hooks/store/user";
+// plane web imports
+// local imports
+import { UpgradeBadge } from "../upgrade-badge";
+import { getSidebarNavigationItemIcon } from "./helper";
+
+type TExtendedSidebarItemProps = {
+  item: IWorkspaceSidebarNavigationItem;
+  handleOnNavigationItemDrop?: (
+    sourceId: string | undefined,
+    destinationId: string | undefined,
+    shouldDropAtEnd: boolean
+  ) => void;
+  disableDrag?: boolean;
+  disableDrop?: boolean;
+  isLastChild: boolean;
+};
+
+export const ExtendedSidebarItem: FC<TExtendedSidebarItemProps> = observer((props) => {
+  const { item, handleOnNavigationItemDrop, disableDrag = false, disableDrop = false, isLastChild } = props;
+  const { t } = useTranslation();
+  // states
+  const [isDragging, setIsDragging] = useState(false);
+  const [instruction, setInstruction] = useState<"DRAG_OVER" | "DRAG_BELOW" | undefined>(undefined);
+  // refs
+  const navigationIemRef = useRef<HTMLDivElement | null>(null);
+  const dragHandleRef = useRef<HTMLButtonElement | null>(null);
+
+  // nextjs hooks
+  const pathname = usePathname();
+  const { workspaceSlug } = useParams();
+  // store hooks
+  const { getNavigationPreferences, updateSidebarPreference } = useWorkspace();
+  const { toggleExtendedSidebar } = useAppTheme();
+  const { data } = useUser();
+  const { allowPermissions } = useUserPermissions();
+
+  // derived values
+  const sidebarPreference = getNavigationPreferences(workspaceSlug.toString());
+  const isPinned = sidebarPreference?.[item.key]?.is_pinned;
+
+  const handleLinkClick = () => toggleExtendedSidebar(true);
+
+  if (!allowPermissions(item.access as any, EUserPermissionsLevel.WORKSPACE, workspaceSlug.toString())) {
+    return null;
+  }
+
+  const itemHref =
+    item.key === "your_work"
+      ? `/${workspaceSlug.toString()}${item.href}${data?.id}`
+      : `/${workspaceSlug.toString()}${item.href}`;
+  const isActive = itemHref === pathname;
+
+  const pinNavigationItem = (workspaceSlug: string, key: string) => {
+    updateSidebarPreference(workspaceSlug, key, { is_pinned: true });
+  };
+
+  const unPinNavigationItem = (workspaceSlug: string, key: string) => {
+    updateSidebarPreference(workspaceSlug, key, { is_pinned: false });
+  };
+
+  const icon = getSidebarNavigationItemIcon(item.key);
+
+  useEffect(() => {
+    const element = navigationIemRef.current;
+    const dragHandleElement = dragHandleRef.current;
+
+    if (!element) return;
+
+    return combine(
+      draggable({
+        element,
+        canDrag: () => !disableDrag,
+        dragHandle: dragHandleElement ?? undefined,
+        getInitialData: () => ({ id: item.key, dragInstanceId: "NAVIGATION" }), // var1
+        onDragStart: () => {
+          setIsDragging(true);
+        },
+        onDrop: () => {
+          setIsDragging(false);
+        },
+      }),
+      dropTargetForElements({
+        element,
+        canDrop: ({ source }) =>
+          !disableDrop && source?.data?.id !== item.key && source?.data?.dragInstanceId === "NAVIGATION",
+        getData: ({ input, element }) => {
+          const data = { id: item.key };
+
+          // attach instruction for last in list
+          return attachInstruction(data, {
+            input,
+            element,
+            currentLevel: 0,
+            indentPerLevel: 0,
+            mode: isLastChild ? "last-in-group" : "standard",
+          });
+        },
+        onDrag: ({ self }) => {
+          const extractedInstruction = extractInstruction(self?.data)?.type;
+          // check if the highlight is to be shown above or below
+          setInstruction(
+            extractedInstruction
+              ? extractedInstruction === "reorder-below" && isLastChild
+                ? "DRAG_BELOW"
+                : "DRAG_OVER"
+              : undefined
+          );
+        },
+        onDragLeave: () => {
+          setInstruction(undefined);
+        },
+        onDrop: ({ self, source }) => {
+          setInstruction(undefined);
+          const extractedInstruction = extractInstruction(self?.data)?.type;
+          const currentInstruction = extractedInstruction
+            ? extractedInstruction === "reorder-below" && isLastChild
+              ? "DRAG_BELOW"
+              : "DRAG_OVER"
+            : undefined;
+          if (!currentInstruction) return;
+
+          const sourceId = source?.data?.id as string | undefined;
+          const destinationId = self?.data?.id as string | undefined;
+
+          if (handleOnNavigationItemDrop)
+            handleOnNavigationItemDrop(sourceId, destinationId, currentInstruction === "DRAG_BELOW");
+        },
+      })
+    );
+  }, [isLastChild, handleOnNavigationItemDrop, disableDrag, disableDrop, item.key]);
+
+  return (
+    <div
+      id={`sidebar-${item.key}`}
+      className={cn("relative", { "bg-custom-sidebar-background-80 opacity-60": isDragging })}
+      ref={navigationIemRef}
+    >
+      <DropIndicator classNames="absolute top-0" isVisible={instruction === "DRAG_OVER"} />
+      <div
+        className={cn(
+          "group/project-item relative w-full  flex items-center rounded-md text-custom-sidebar-text-100 hover:bg-custom-sidebar-background-90"
+        )}
+        id={`${item.key}`}
+      >
+        {!disableDrag && (
+          <Tooltip
+            // isMobile={isMobile}
+            tooltipContent={t("drag_to_rearrange")}
+            position="top-end"
+            disabled={isDragging}
+          >
+            <button
+              type="button"
+              className={cn(
+                "flex items-center justify-center absolute top-1/2 -left-3 -translate-y-1/2 rounded text-custom-sidebar-text-400 cursor-grab",
+                {
+                  "cursor-grabbing": isDragging,
+                }
+              )}
+              ref={dragHandleRef}
+            >
+              <DragHandle className="bg-transparent" />
+            </button>
+          </Tooltip>
+        )}
+        <SidebarNavItem isActive={isActive}>
+          <Link href={itemHref} onClick={() => handleLinkClick()} className="group flex-grow">
+            <div className="flex items-center gap-1.5 py-[1px]">
+              {icon}
+              <p className="text-sm leading-5 font-medium">{t(item.labelTranslationKey)}</p>
+            </div>
+          </Link>
+          <div className="flex items-center gap-2">
+            {item.key === "active_cycles" && (
+              <div className="flex-shrink-0">
+                <UpgradeBadge />
+              </div>
+            )}
+            {isPinned ? (
+              <Tooltip tooltipContent="Unpin">
+                <PinOff
+                  className="size-3.5 flex-shrink-0 hover:text-custom-text-300 outline-none text-custom-text-400"
+                  onClick={() => unPinNavigationItem(workspaceSlug.toString(), item.key)}
+                />
+              </Tooltip>
+            ) : (
+              <Tooltip tooltipContent="Pin">
+                <Pin
+                  className="size-3.5 flex-shrink-0 hover:text-custom-text-300 outline-none text-custom-text-400"
+                  onClick={() => pinNavigationItem(workspaceSlug.toString(), item.key)}
+                />
+              </Tooltip>
+            )}
+          </div>
+        </SidebarNavItem>
+      </div>
+      {isLastChild && <DropIndicator isVisible={instruction === "DRAG_BELOW"} />}
+    </div>
+  );
+});

apps/web/ce/components/workspace/sidebar/helper.tsx

@@ -0,0 +1,35 @@
+import {
+  AnalyticsIcon,
+  ArchiveIcon,
+  CycleIcon,
+  DraftIcon,
+  HomeIcon,
+  InboxIcon,
+  ProjectIcon,
+  ViewsIcon,
+  YourWorkIcon,
+} from "@plane/propel/icons";
+import { cn } from "@plane/utils";
+
+export const getSidebarNavigationItemIcon = (key: string, className: string = "") => {
+  switch (key) {
+    case "home":
+      return <HomeIcon className={cn("size-4 flex-shrink-0", className)} />;
+    case "inbox":
+      return <InboxIcon className={cn("size-4 flex-shrink-0", className)} />;
+    case "projects":
+      return <ProjectIcon className={cn("size-4 flex-shrink-0", className)} />;
+    case "views":
+      return <ViewsIcon className={cn("size-4 flex-shrink-0", className)} />;
+    case "active_cycles":
+      return <CycleIcon className={cn("size-4 flex-shrink-0", className)} />;
+    case "analytics":
+      return <AnalyticsIcon className={cn("size-4 flex-shrink-0", className)} />;
+    case "your_work":
+      return <YourWorkIcon className={cn("size-4 flex-shrink-0", className)} />;
+    case "drafts":
+      return <DraftIcon className={cn("size-4 flex-shrink-0", className)} />;
+    case "archives":
+      return <ArchiveIcon className={cn("size-4 flex-shrink-0", className)} />;
+  }
+};

apps/web/ce/components/workspace/sidebar/sidebar-item.tsx

@@ -0,0 +1,9 @@
+import type { FC } from "react";
+import type { IWorkspaceSidebarNavigationItem } from "@plane/constants";
+import { SidebarItemBase } from "@/components/workspace/sidebar/sidebar-item";
+
+type Props = {
+  item: IWorkspaceSidebarNavigationItem;
+};
+
+export const SidebarItem: FC<Props> = ({ item }) => <SidebarItemBase item={item} />;

apps/web/ce/components/workspace/sidebar/teams-sidebar-list.tsx

@@ -0,0 +1 @@
+export const SidebarTeamsList = () => null;

apps/web/ce/components/workspace/upgrade-badge.tsx

@@ -0,0 +1,30 @@
+import type { FC } from "react";
+// helpers
+import { useTranslation } from "@plane/i18n";
+import { cn } from "@plane/utils";
+
+type TUpgradeBadge = {
+  className?: string;
+  size?: "sm" | "md";
+};
+
+export const UpgradeBadge: FC<TUpgradeBadge> = (props) => {
+  const { className, size = "sm" } = props;
+
+  const { t } = useTranslation();
+
+  return (
+    <div
+      className={cn(
+        "w-fit cursor-pointer rounded-2xl text-custom-primary-200 bg-custom-primary-100/20 text-center font-medium outline-none",
+        {
+          "text-sm px-3": size === "md",
+          "text-xs px-2": size === "sm",
+        },
+        className
+      )}
+    >
+      {t("sidebar.pro")}
+    </div>
+  );
+};