base

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

@@ -0,0 +1,11 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+
+export function WorkspaceAppSwitcher() {
+  return <></>;
+}

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

@@ -0,0 +1,16 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+
+export type TBillingActionsButtonProps = {
+  canPerformWorkspaceAdminActions: boolean;
+};
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export const BillingActionsButton = observer(function BillingActionsButton(props: TBillingActionsButtonProps) {
+  return <></>;
+});

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

@@ -0,0 +1,60 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// plane imports
+import { observer } from "mobx-react";
+import type { EProductSubscriptionEnum, TBillingFrequency } from "@plane/types";
+import { calculateYearlyDiscount, cn } from "@plane/utils";
+
+type TPlanFrequencyToggleProps = {
+  subscriptionType: EProductSubscriptionEnum;
+  monthlyPrice: number;
+  yearlyPrice: number;
+  selectedFrequency: TBillingFrequency;
+  setSelectedFrequency: (frequency: TBillingFrequency) => void;
+};
+
+export const PlanFrequencyToggle = observer(function PlanFrequencyToggle(props: TPlanFrequencyToggleProps) {
+  const { monthlyPrice, yearlyPrice, selectedFrequency, setSelectedFrequency } = props;
+  // derived values
+  const yearlyDiscount = calculateYearlyDiscount(monthlyPrice, yearlyPrice);
+
+  return (
+    <div className="flex w-full cursor-pointer items-center py-1">
+      <div className="flex w-full space-x-1 rounded-md bg-layer-3 p-0.5">
+        <button
+          type="button"
+          onClick={() => setSelectedFrequency("month")}
+          className={cn(
+            "w-full rounded-sm px-1 py-0.5 text-center text-caption-sm-medium leading-5",
+            selectedFrequency === "month"
+              ? "border border-subtle-1 bg-layer-2 text-primary shadow-raised-100"
+              : "text-tertiary hover:text-secondary"
+          )}
+        >
+          Monthly
+        </button>
+        <button
+          type="button"
+          onClick={() => setSelectedFrequency("year")}
+          className={cn(
+            "w-full rounded-sm px-1 py-0.5 text-center text-caption-sm-medium leading-5",
+            selectedFrequency === "year"
+              ? "border border-subtle-1 bg-layer-2 text-primary shadow-raised-100"
+              : "text-tertiary hover:text-secondary"
+          )}
+        >
+          Yearly
+          {yearlyDiscount > 0 && (
+            <span className="ml-1.5 rounded-full bg-accent-primary px-1 py-0.5 text-caption-xs-regular text-on-color">
+              -{yearlyDiscount}%
+            </span>
+          )}
+        </button>
+      </div>
+    </div>
+  );
+});

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

@@ -0,0 +1,109 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+// plane imports
+import {
+  SUBSCRIPTION_REDIRECTION_URLS,
+  SUBSCRIPTION_WITH_BILLING_FREQUENCY,
+  TALK_TO_SALES_URL,
+} from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { Button } from "@plane/propel/button";
+import type { TBillingFrequency } from "@plane/types";
+import { EProductSubscriptionEnum } from "@plane/types";
+import { getSubscriptionName } from "@plane/utils";
+// components
+import { DiscountInfo } from "@/components/license/modal/card/discount-info";
+import type { TPlanDetail } from "@/constants/plans";
+// local imports
+import { PlanFrequencyToggle } from "./frequency-toggle";
+
+type TPlanDetailProps = {
+  subscriptionType: EProductSubscriptionEnum;
+  planDetail: TPlanDetail;
+  billingFrequency: TBillingFrequency | undefined;
+  setBillingFrequency: (frequency: TBillingFrequency) => void;
+};
+
+export const PlanDetail = observer(function PlanDetail(props: TPlanDetailProps) {
+  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;
+
+  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;
+    // Open the URL in a new tab
+    window.open(redirectUrl, "_blank");
+  };
+
+  return (
+    <div className="col-span-1 flex flex-col justify-between space-y-0.5 p-3">
+      {/* Plan name and pricing section */}
+      <div className="flex flex-col items-start">
+        <div className="flex w-full items-center gap-2 text-h4-semibold">
+          <span>{subscriptionName}</span>
+          {subscriptionType === EProductSubscriptionEnum.PRO && (
+            <span className="rounded-sm bg-accent-primary px-2 py-0.5 text-caption-sm-medium text-on-color">
+              Popular
+            </span>
+          )}
+        </div>
+        <div className="flex items-start gap-x-2 pb-1 text-tertiary">
+          {isSubscriptionActive && displayPrice !== undefined && (
+            <div className="flex items-center gap-1 text-h3-semibold text-primary">
+              <DiscountInfo
+                currency="$"
+                frequency={billingFrequency ?? "month"}
+                price={displayPrice}
+                subscriptionType={subscriptionType}
+                className="mr-1.5"
+              />
+            </div>
+          )}
+          <div className="pt-1">
+            {pricingDescription && <div>{pricingDescription}</div>}
+            {pricingSecondaryDescription && (
+              <div className="text-caption-xs text-placeholder">{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="flex flex-col items-start gap-1 py-3">
+        <Button variant="primary" size="lg" onClick={handleRedirection} className="w-full">
+          {isSubscriptionActive ? `Upgrade to ${subscriptionName}` : t("common.upgrade_cta.talk_to_sales")}
+        </Button>
+      </div>
+    </div>
+  );
+});

plane-src/apps/web/ce/components/workspace/billing/comparison/root.tsx

@@ -0,0 +1,54 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+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(function PlansComparison(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}
+    />
+  );
+});

plane-src/apps/web/ce/components/workspace/billing/index.ts

@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./root";

plane-src/apps/web/ce/components/workspace/billing/root.tsx

@@ -0,0 +1,71 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+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";
+// components
+import { SettingsBoxedControlItem } from "@/components/settings/boxed-control-item";
+import { SettingsHeading } from "@/components/settings/heading";
+// local imports
+import { PlansComparison } from "./comparison/root";
+
+export const BillingRoot = observer(function BillingRoot() {
+  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 scrollbar-hide size-full overflow-y-auto">
+      <div>
+        <SettingsHeading
+          title={t("workspace_settings.settings.billing_and_plans.heading")}
+          description={t("workspace_settings.settings.billing_and_plans.description")}
+        />
+        <div className="mt-6">
+          <SettingsBoxedControlItem
+            title={t("billing.community_plan_title")}
+            description={t("billing.community_plan_description")}
+          />
+        </div>
+      </div>
+      <div className="mt-10 flex flex-col gap-y-3">
+        <h4 className="text-h6-semibold">{t("billing.all_plans")}</h4>
+        <PlansComparison
+          isCompareAllFeaturesSectionOpen={isCompareAllFeaturesSectionOpen}
+          getBillingFrequency={getBillingFrequency}
+          setBillingFrequency={setBillingFrequency}
+          setIsCompareAllFeaturesSectionOpen={setIsCompareAllFeaturesSectionOpen}
+        />
+      </div>
+    </section>
+  );
+});

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

@@ -0,0 +1,43 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+import { observer } from "mobx-react";
+// plane imports
+import { cn } from "@plane/utils";
+import { AppRailRoot } from "@/components/navigation";
+import { useAppRailVisibility } from "@/lib/app-rail";
+// local imports
+import { TopNavigationRoot } from "../navigations";
+
+export const WorkspaceContentWrapper = observer(function WorkspaceContentWrapper({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  // Use the context to determine if app rail should render
+  const { shouldRenderAppRail } = useAppRailVisibility();
+
+  return (
+    <div className="relative flex size-full flex-col overflow-hidden bg-canvas transition-all duration-300 ease-in-out">
+      <TopNavigationRoot />
+      <div className="relative flex size-full overflow-hidden">
+        {/* Conditionally render AppRailRoot based on context */}
+        {shouldRenderAppRail && <AppRailRoot />}
+        <div
+          className={cn(
+            "relative size-full flex-grow overflow-hidden pr-2 pb-2 pl-2 transition-all duration-300 ease-in-out",
+            {
+              "pl-0!": shouldRenderAppRail,
+            }
+          )}
+        >
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+});

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

@@ -0,0 +1,31 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+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 = observer(function DeleteWorkspaceModal(props: Props) {
+  const { isOpen, data, onClose } = props;
+
+  return (
+    <ModalCore isOpen={isOpen} handleClose={() => onClose()} position={EModalPosition.CENTER} width={EModalWidth.XL}>
+      <DeleteWorkspaceForm data={data} onClose={onClose} />
+    </ModalCore>
+  );
+});

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

@@ -0,0 +1,52 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
+import { observer } from "mobx-react";
+// plane imports
+import { WORKSPACE_TRACKER_ELEMENTS } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { Button } from "@plane/propel/button";
+import type { IWorkspace } from "@plane/types";
+// components
+import { SettingsBoxedControlItem } from "@/components/settings/boxed-control-item";
+// local imports
+import { DeleteWorkspaceModal } from "./delete-workspace-modal";
+
+type TDeleteWorkspace = {
+  workspace: IWorkspace | null;
+};
+
+export const DeleteWorkspaceSection = observer(function DeleteWorkspaceSection(props: TDeleteWorkspace) {
+  const { workspace } = props;
+  // states
+  const [deleteWorkspaceModal, setDeleteWorkspaceModal] = useState(false);
+  // translation
+  const { t } = useTranslation();
+
+  return (
+    <>
+      <DeleteWorkspaceModal
+        data={workspace}
+        isOpen={deleteWorkspaceModal}
+        onClose={() => setDeleteWorkspaceModal(false)}
+      />
+      <SettingsBoxedControlItem
+        title={t("workspace_settings.settings.general.delete_workspace")}
+        description={t("workspace_settings.settings.general.delete_workspace_description")}
+        control={
+          <Button
+            variant="error-outline"
+            onClick={() => setDeleteWorkspaceModal(true)}
+            data-ph-element={WORKSPACE_TRACKER_ELEMENTS.DELETE_WORKSPACE_BUTTON}
+          >
+            {t("delete")}
+          </Button>
+        }
+      />
+    </>
+  );
+});

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

@@ -0,0 +1,46 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
+import { observer } from "mobx-react";
+// ui
+import { useTranslation } from "@plane/i18n";
+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";
+import { Button } from "@plane/propel/button";
+
+export const WorkspaceEditionBadge = observer(function WorkspaceEditionBadge() {
+  // states
+  const [isPaidPlanPurchaseModalOpen, setIsPaidPlanPurchaseModalOpen] = useState(false);
+  // translation
+  const { t } = useTranslation();
+  // platform
+  const { isMobile } = usePlatformOS();
+
+  return (
+    <>
+      <PaidPlanUpgradeModal
+        isOpen={isPaidPlanPurchaseModalOpen}
+        handleClose={() => setIsPaidPlanPurchaseModalOpen(false)}
+      />
+      <Tooltip tooltipContent={`${t("edition.version")}: v${packageJson.version}`} isMobile={isMobile}>
+        <Button
+          variant="tertiary"
+          size="lg"
+          onClick={() => setIsPaidPlanPurchaseModalOpen(true)}
+          aria-haspopup="dialog"
+          aria-label={t("aria_labels.projects_sidebar.edition_badge")}
+        >
+          {t("sidebar_actions.community")}
+        </Button>
+      </Tooltip>
+    </>
+  );
+});

plane-src/apps/web/ce/components/workspace/members/index.ts

@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./invite-modal";
+export * from "./members-activity-button";

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

@@ -0,0 +1,66 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+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 = observer(function SendWorkspaceInvitationModal(
+  props: TSendWorkspaceInvitationModalProps
+) {
+  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>
+  );
+});

plane-src/apps/web/ce/components/workspace/members/members-activity-button.tsx

@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export const MembersActivityButton = observer(function MembersActivityButton(props: { workspaceSlug: string }) {
+  return <></>;
+});

plane-src/apps/web/ce/components/workspace/settings/useMemberColumns.tsx

@@ -0,0 +1,136 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
+import { useParams } from "next/navigation";
+import { EUserPermissions, EUserPermissionsLevel, LOGIN_MEDIUM_LABELS } 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}
+          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-placeholder" : ""}`}>{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-placeholder" : ""}`}>{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} />,
+    },
+
+    {
+      key: "Authentication",
+      content: t("workspace_settings.settings.members.details.authentication"),
+      tdRender: (rowData: RowData) => {
+        if (isSuspended(rowData)) return null;
+        const loginMedium = rowData.member.last_login_medium;
+        if (!loginMedium) return null;
+        return <div>{LOGIN_MEDIUM_LABELS[loginMedium]}</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 };
+};

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

@@ -0,0 +1,228 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+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 { useUser, useUserPermissions } from "@/hooks/store/user";
+import { useWorkspaceNavigationPreferences } from "@/hooks/use-navigation-preferences";
+// 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 = observer(function ExtendedSidebarItem(props: TExtendedSidebarItemProps) {
+  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 { toggleExtendedSidebar } = useAppTheme();
+  const { data } = useUser();
+  const { allowPermissions } = useUserPermissions();
+  const { preferences: workspacePreferences, toggleWorkspaceItem } = useWorkspaceNavigationPreferences();
+
+  // derived values
+  const isPinned = workspacePreferences.items[item.key]?.is_pinned ?? false;
+
+  const handleLinkClick = () => toggleExtendedSidebar(true);
+
+  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]);
+
+  const itemHref =
+    item.key === "your_work"
+      ? `/${workspaceSlug.toString()}${item.href}${data?.id}`
+      : `/${workspaceSlug.toString()}${item.href}`;
+  const isActive = itemHref === pathname;
+
+  const pinNavigationItem = (key: string) => {
+    toggleWorkspaceItem(key, true);
+  };
+
+  const unPinNavigationItem = (key: string) => {
+    toggleWorkspaceItem(key, false);
+  };
+
+  const icon = getSidebarNavigationItemIcon(item.key);
+
+  if (!allowPermissions(item.access as any, EUserPermissionsLevel.WORKSPACE, workspaceSlug.toString())) {
+    return null;
+  }
+
+  return (
+    <div
+      id={`sidebar-${item.key}`}
+      className={cn("relative", {
+        "bg-layer-1 opacity-60": isDragging,
+      })}
+      ref={navigationIemRef}
+    >
+      <DropIndicator classNames="absolute top-0" isVisible={instruction === "DRAG_OVER"} />
+      <div
+        className={cn(
+          "group/project-item relative flex w-full items-center rounded-md text-primary hover:bg-surface-2"
+        )}
+        id={`${item.key}`}
+      >
+        {!disableDrag && (
+          <Tooltip
+            // isMobile={isMobile}
+            tooltipContent={t("drag_to_rearrange")}
+            position="top-start"
+            disabled={isDragging}
+          >
+            <button
+              type="button"
+              className={cn(
+                "absolute top-1/2 -left-3 flex -translate-y-1/2 cursor-grab items-center justify-center rounded text-placeholder opacity-0 group-hover/project-item:opacity-100",
+                {
+                  "cursor-grabbing": isDragging,
+                  "opacity-100": 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-13 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 text-placeholder outline-none hover:text-tertiary"
+                  onClick={() => unPinNavigationItem(item.key)}
+                />
+              </Tooltip>
+            ) : (
+              <Tooltip tooltipContent="Pin">
+                <Pin
+                  className="size-3.5 flex-shrink-0 text-placeholder outline-none hover:text-tertiary"
+                  onClick={() => pinNavigationItem(item.key)}
+                />
+              </Tooltip>
+            )}
+          </div>
+        </SidebarNavItem>
+      </div>
+      {isLastChild && <DropIndicator isVisible={instruction === "DRAG_BELOW"} />}
+    </div>
+  );
+});

plane-src/apps/web/ce/components/workspace/sidebar/helper.tsx

@@ -0,0 +1,44 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import {
+  AnalyticsIcon,
+  ArchiveIcon,
+  CycleIcon,
+  DraftIcon,
+  HomeIcon,
+  InboxIcon,
+  MultipleStickyIcon,
+  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)} />;
+    case "stickies":
+      return <MultipleStickyIcon className={cn("size-4 flex-shrink-0", className)} />;
+  }
+};

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

@@ -0,0 +1,16 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { IWorkspaceSidebarNavigationItem } from "@plane/constants";
+import { SidebarItemBase } from "@/components/workspace/sidebar/sidebar-item";
+
+type Props = {
+  item: IWorkspaceSidebarNavigationItem;
+};
+
+export function SidebarItem({ item }: Props) {
+  return <SidebarItemBase item={item} />;
+}

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

@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export function SidebarTeamsList() {
+  return null;
+}

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

@@ -0,0 +1,35 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// helpers
+import { useTranslation } from "@plane/i18n";
+import { cn } from "@plane/utils";
+
+type TUpgradeBadge = {
+  className?: string;
+  size?: "sm" | "md";
+};
+
+export function UpgradeBadge(props: TUpgradeBadge) {
+  const { className, size = "sm" } = props;
+
+  const { t } = useTranslation();
+
+  return (
+    <div
+      className={cn(
+        "w-fit cursor-pointer rounded-2xl bg-accent-primary/20 text-center font-medium text-accent-secondary outline-none",
+        {
+          "px-3 text-13": size === "md",
+          "px-2 text-11": size === "sm",
+        },
+        className
+      )}
+    >
+      {t("sidebar.pro")}
+    </div>
+  );
+}