[WEB-1959]: Chore/settings member page (#5144)

* chore: implemented table component in ui library * chore: added export in the UI package * chore/member-page-revamp * fix: added custom popover className * fix: updated ui for projects * fix: hide pending invites for members * fix: added ee component * removed unwanted logging * fix: seperated components * fix: used collapsible instead of disclosure * fix: removed commented code --------- Co-authored-by: gurusainath <gurusainath007@gmail.com>
2025-12-23 07:09:34 +01:00 · 2024-07-18 13:02:22 +05:30
parent 474d7ef3c0
commit fff27c60e4
20 changed files with 758 additions and 491 deletions
--- a/packages/types/src/workspace.d.ts
+++ b/packages/types/src/workspace.d.ts
@@ -69,6 +69,13 @@ export interface IWorkspaceMember {
 	id: string;
 	member: IUserLite;
 	role: EUserWorkspaceRoles;
+	created_at: string;
+	avatar?: string;
+	email?: string;
+	first_name?: string;
+	last_name?: string;
+	joining_date: string;
+	display_name?: string;
 }

 export interface IWorkspaceMemberMe {
--- a/packages/ui/src/dropdowns/custom-select.tsx
+++ b/packages/ui/src/dropdowns/custom-select.tsx
@@ -82,11 +82,16 @@ const CustomSelect = (props: ICustomSelectProps) => {
            <button
              ref={setReferenceElement}
              type="button"
-              className={`flex w-full items-center justify-between gap-1 rounded border-[0.5px] border-custom-border-300 ${
-                input ? "px-3 py-2 text-sm" : "px-2 py-1 text-xs"
-              } ${
-                disabled ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer hover:bg-custom-background-80"
-              } ${buttonClassName}`}
+              className={cn(
+                "flex w-full items-center justify-between gap-1 rounded border-[0.5px] border-custom-border-300",
+                {
+                  "px-3 py-2 text-sm": input,
+                  "px-2 py-1 text-xs": !input,
+                  "cursor-not-allowed text-custom-text-200": disabled,
+                  "cursor-pointer hover:bg-custom-background-80": !disabled,
+                },
+                buttonClassName
+              )}
              onClick={toggleDropdown}
            >
              {label}
--- a/packages/ui/src/popovers/popover-menu.tsx
+++ b/packages/ui/src/popovers/popover-menu.tsx
@@ -14,6 +14,7 @@ export const PopoverMenu = <T,>(props: TPopoverMenu<T>) => {
    button,
    panelClassName = "",
    data,
+    popoverClassName = "",
    keyExtractor,
    render,
  } = props;
@@ -28,6 +29,7 @@ export const PopoverMenu = <T,>(props: TPopoverMenu<T>) => {
        "my-1 w-48 rounded border-[0.5px] border-custom-border-300 bg-custom-background-100 px-2 py-2 text-xs shadow-custom-shadow-rg focus:outline-none",
        panelClassName
      )}
+      popoverClassName={popoverClassName}
    >
      <Fragment>
        {data.map((item, index) => (
--- a/packages/ui/src/popovers/popover.tsx
+++ b/packages/ui/src/popovers/popover.tsx
@@ -12,6 +12,7 @@ export const Popover = (props: TPopover) => {
    popperPosition = "bottom-end",
    popperPadding = 0,
    buttonClassName = "",
+    popoverClassName = "",
    button,
    panelClassName = "",
    children,
@@ -34,7 +35,7 @@ export const Popover = (props: TPopover) => {
  });

  return (
-    <HeadlessReactPopover className="relative flex h-full w-full items-center justify-center">
+    <HeadlessReactPopover className={cn("relative flex h-full w-full items-center justify-center", popoverClassName)}>
      <HeadlessReactPopover.Button ref={setReferenceElement} className="flex justify-center items-center">
        {button ? (
          button
--- a/packages/ui/src/popovers/types.ts
+++ b/packages/ui/src/popovers/types.ts
@@ -13,6 +13,7 @@ export type TPopoverDefaultOptions = TPopoverButtonDefaultOptions & {
  popperPadding?: number | undefined;
  // panel styling
  panelClassName?: string;
+  popoverClassName?: string;
 };

 export type TPopover = TPopoverDefaultOptions & {
--- a/packages/ui/src/tables/table.tsx
+++ b/packages/ui/src/tables/table.tsx
@@ -29,7 +29,7 @@ export const Table = <T,>(props: TTableData<T>) => {
          ))}
        </tr>
      </thead>
-      <tbody className={cn("divide-y divide-x divide-custom-border-200", tBodyClassName)}>
+      <tbody className={cn("divide-y divide-custom-border-200", tBodyClassName)}>
        {data.map((item) => (
          <tr
            key={keyExtractor(item)}
--- a/web/app/[workspaceSlug]/(projects)/settings/members/page.tsx
+++ b/web/app/[workspaceSlug]/(projects)/settings/members/page.tsx
@@ -79,8 +79,7 @@ const WorkspaceMembersSettingsPage = observer(() => {
  };

  // derived values
-  const hasAddMemberPermission =
-    currentWorkspaceRole && [EUserWorkspaceRoles.ADMIN, EUserWorkspaceRoles.MEMBER].includes(currentWorkspaceRole);
+  const isAdmin = currentWorkspaceRole && [EUserWorkspaceRoles.ADMIN].includes(currentWorkspaceRole);
  const pageTitle = currentWorkspace?.name ? `${currentWorkspace.name} - Members` : undefined;

  return (
@@ -104,13 +103,13 @@ const WorkspaceMembersSettingsPage = observer(() => {
              onChange={(e) => setSearchQuery(e.target.value)}
            />
          </div>
-          {hasAddMemberPermission && (
+          {isAdmin && (
            <Button variant="primary" size="sm" onClick={() => setInviteModal(true)}>
              Add member
            </Button>
          )}
        </div>
-        <WorkspaceMembersList searchQuery={searchQuery} />
+        <WorkspaceMembersList searchQuery={searchQuery} isAdmin={isAdmin ?? false} />
      </section>
    </>
  );
--- a/web/ce/components/projects/settings/useProjectColumns.tsx
+++ b/web/ce/components/projects/settings/useProjectColumns.tsx
@@ -0,0 +1,75 @@
+import { useState } from "react";
+import { useParams } from "next/navigation";
+import { IWorkspaceMember } from "@plane/types";
+import { EUserProjectRoles } from "@plane/types/src/enums";
+import { AccountTypeColumn, NameColumn } from "@/components/project/settings/member-columns";
+import { EUserWorkspaceRoles } from "@/constants/workspace";
+import { useUser } from "@/hooks/store";
+
+interface RowData {
+  member: IWorkspaceMember;
+  role: EUserWorkspaceRoles;
+}
+
+const useProjectColumns = () => {
+  // states
+  const [removeMemberModal, setRemoveMemberModal] = useState<RowData | null>(null);
+
+  const { workspaceSlug, projectId } = useParams();
+
+  const {
+    membership: { currentProjectRole },
+    data: currentUser,
+  } = useUser();
+
+  const getFormattedDate = (dateStr: string) => {
+    const date = new Date(dateStr);
+
+    const options: Intl.DateTimeFormatOptions = { year: "numeric", month: "long", day: "numeric" };
+    return date.toLocaleDateString("en-US", options);
+  };
+  // derived values
+  const isAdmin = currentProjectRole === EUserProjectRoles.ADMIN;
+  const columns = [
+    {
+      key: "Full Name",
+      content: "Full Name",
+      thClassName: "text-left",
+      tdRender: (rowData: RowData) => (
+        <NameColumn
+          rowData={rowData}
+          workspaceSlug={workspaceSlug as string}
+          isAdmin={isAdmin}
+          currentUser={currentUser}
+          setRemoveMemberModal={setRemoveMemberModal}
+        />
+      ),
+    },
+    {
+      key: "Display Name",
+      content: "Display Name",
+      tdRender: (rowData: RowData) => <div className="w-32">{rowData.member.display_name}</div>,
+    },
+
+    {
+      key: "Account Type",
+      content: "Account Type",
+      tdRender: (rowData: RowData) => (
+        <AccountTypeColumn
+          rowData={rowData}
+          currentProjectRole={currentProjectRole}
+          projectId={projectId as string}
+          workspaceSlug={workspaceSlug as string}
+        />
+      ),
+    },
+    {
+      key: "Joining Date",
+      content: "Joining Date",
+      tdRender: (rowData: RowData) => <div>{getFormattedDate(rowData.member.joining_date)}</div>,
+    },
+  ];
+  return { columns, workspaceSlug, projectId, removeMemberModal, setRemoveMemberModal };
+};
+
+export default useProjectColumns;
--- a/web/ce/components/workspace/settings/useMemberColumns.tsx
+++ b/web/ce/components/workspace/settings/useMemberColumns.tsx
@@ -0,0 +1,69 @@
+import { useState } from "react";
+import { useParams } from "next/navigation";
+import { AccountTypeColumn, NameColumn, RowData } from "@/components/workspace/settings/member-columns";
+import { EUserWorkspaceRoles } from "@/constants/workspace";
+import { useUser } from "@/hooks/store";
+
+const useMemberColumns = () => {
+  // states
+  const [removeMemberModal, setRemoveMemberModal] = useState<RowData | null>(null);
+
+  const { workspaceSlug } = useParams();
+
+  const {
+    membership: { currentWorkspaceRole },
+    data: currentUser,
+  } = useUser();
+
+  const getFormattedDate = (dateStr: string) => {
+    const date = new Date(dateStr);
+
+    const options: Intl.DateTimeFormatOptions = { year: "numeric", month: "long", day: "numeric" };
+    return date.toLocaleDateString("en-US", options);
+  };
+
+  const isAdmin = currentWorkspaceRole === EUserWorkspaceRoles.ADMIN;
+
+  const columns = [
+    {
+      key: "Full Name",
+      content: "Full Name",
+      thClassName: "text-left",
+      tdRender: (rowData: RowData) => (
+        <NameColumn
+          rowData={rowData}
+          workspaceSlug={workspaceSlug as string}
+          isAdmin={isAdmin}
+          currentUser={currentUser}
+          setRemoveMemberModal={setRemoveMemberModal}
+        />
+      ),
+    },
+    {
+      key: "Display Name",
+      content: "Display Name",
+      tdRender: (rowData: RowData) => <div className="w-32">{rowData.member.display_name}</div>,
+    },
+
+    {
+      key: "Account Type",
+      content: "Account Type",
+      tdRender: (rowData: RowData) => (
+        <AccountTypeColumn
+          rowData={rowData}
+          currentWorkspaceRole={currentWorkspaceRole}
+          workspaceSlug={workspaceSlug as string}
+        />
+      ),
+    },
+
+    {
+      key: "Joining Date",
+      content: "Joining Date",
+      tdRender: (rowData: RowData) => <div>{getFormattedDate(rowData.member.joining_date)}</div>,
+    },
+  ];
+  return { columns, workspaceSlug, removeMemberModal, setRemoveMemberModal };
+};
+
+export default useMemberColumns;
--- a/web/core/components/project/member-list-item.tsx
+++ b/web/core/components/project/member-list-item.tsx
@@ -1,54 +1,45 @@
 "use client";

-import { useState } from "react";
 import { observer } from "mobx-react";
-import Link from "next/link";
-import { useParams } from "next/navigation";
-// icons
-import { ChevronDown, Dot, XCircle } from "lucide-react";
-// ui
-import { CustomSelect, TOAST_TYPE, Tooltip, setToast } from "@plane/ui";
+
+import { TOAST_TYPE, Table, setToast } from "@plane/ui";
 // components
 import { ConfirmProjectMemberRemove } from "@/components/project";
 // constants
 import { PROJECT_MEMBER_LEAVE } from "@/constants/event-tracker";
-import { EUserProjectRoles } from "@/constants/project";
-import { ROLE } from "@/constants/workspace";
+
 // hooks
 import { useEventTracker, useMember, useProject, useUser } from "@/hooks/store";
 import { useAppRouter } from "@/hooks/use-app-router";
-import { usePlatformOS } from "@/hooks/use-platform-os";
+import useProjectColumns from "@/plane-web/components/projects/settings/useProjectColumns";
+import { IProjectMemberDetails } from "@/store/member/project-member.store";

 type Props = {
-  userId: string;
+  memberDetails: (IProjectMemberDetails | null)[];
 };

 export const ProjectMemberListItem: React.FC<Props> = observer((props) => {
-  const { userId } = props;
-  // states
-  const [removeMemberModal, setRemoveMemberModal] = useState(false);
+  const { memberDetails } = props;
+  const { columns, workspaceSlug, projectId, removeMemberModal, setRemoveMemberModal } = useProjectColumns();
+
  // router
  const router = useAppRouter();
-  const { workspaceSlug, projectId } = useParams();
  // store hooks
  const {
-    membership: { currentProjectRole, leaveProject },
+    membership: { leaveProject },
  } = useUser();
  const { data: currentUser } = useUser();
  const { fetchProjects } = useProject();
  const {
-    project: { removeMemberFromProject, getProjectMemberDetails, updateMember },
+    project: { removeMemberFromProject },
  } = useMember();
  const { captureEvent } = useEventTracker();
-  const { isMobile } = usePlatformOS();
-  // derived values
-  const isAdmin = currentProjectRole === EUserProjectRoles.ADMIN;
-  const userDetails = getProjectMemberDetails(userId);
+  // const { isMobile } = usePlatformOS();

-  const handleRemove = async () => {
-    if (!workspaceSlug || !projectId || !userDetails) return;
+  const handleRemove = async (memberId: string) => {
+    if (!workspaceSlug || !projectId || !memberId) return;

-    if (userDetails.member?.id === currentUser?.id) {
+    if (memberId === currentUser?.id) {
      await leaveProject(workspaceSlug.toString(), projectId.toString())
        .then(async () => {
          captureEvent(PROJECT_MEMBER_LEAVE, {
@@ -58,7 +49,7 @@ export const ProjectMemberListItem: React.FC<Props> = observer((props) => {
          await fetchProjects(workspaceSlug.toString());
          router.push(`/${workspaceSlug}/projects`);
        })
-        .catch((err: any) =>
+        .catch((err) =>
          setToast({
            type: TOAST_TYPE.ERROR,
            title: "Error!",
@@ -66,8 +57,7 @@ export const ProjectMemberListItem: React.FC<Props> = observer((props) => {
          })
        );
    } else
-      await removeMemberFromProject(workspaceSlug.toString(), projectId.toString(), userDetails.member?.id).catch(
-        (err) =>
+      await removeMemberFromProject(workspaceSlug.toString(), projectId.toString(), memberId).catch((err) =>
        setToast({
          type: TOAST_TYPE.ERROR,
          title: "Error!",
@@ -76,120 +66,27 @@ export const ProjectMemberListItem: React.FC<Props> = observer((props) => {
      );
  };

-  if (!userDetails) return null;
-
+  if (!memberDetails) return null;
+  removeMemberModal && console.log("removeMemberModal", JSON.parse(JSON.stringify(removeMemberModal?.member)));
  return (
    <>
+      {removeMemberModal && (
        <ConfirmProjectMemberRemove
-        isOpen={removeMemberModal}
-        onClose={() => setRemoveMemberModal(false)}
-        data={userDetails.member}
-        onSubmit={handleRemove}
+          isOpen={removeMemberModal !== null}
+          onClose={() => setRemoveMemberModal(null)}
+          data={{ id: removeMemberModal.member.id, display_name: removeMemberModal.member.display_name || "" }}
+          onSubmit={() => handleRemove(removeMemberModal.member.id)}
        />
-      <div className="group flex items-center justify-between px-3 py-4 hover:bg-custom-background-90">
-        <div className="flex items-center gap-x-4 gap-y-2">
-          {userDetails.member?.avatar && userDetails.member?.avatar !== "" ? (
-            <Link href={`/${workspaceSlug}/profile/${userDetails.member?.id}`}>
-              <span className="relative flex h-10 w-10 items-center justify-center rounded p-4 capitalize text-white">
-                <img
-                  src={userDetails.member?.avatar}
-                  alt={userDetails.member?.display_name || userDetails.member?.email}
-                  className="absolute left-0 top-0 h-full w-full rounded object-cover"
+      )}
+      <Table
+        columns={columns}
+        data={memberDetails?.filter((member): member is IProjectMemberDetails => member !== null) ?? []}
+        keyExtractor={(rowData) => rowData?.member.id ?? ""}
+        thClassName="text-left font-medium divide-x-0 border-b border-t divide-custom-border-200"
+        tBodyClassName="divide-y-0"
+        tBodyTrClassName="divide-x-0"
+        tHeadTrClassName="divide-x-0"
      />
-              </span>
-            </Link>
-          ) : (
-            <Link href={`/${workspaceSlug}/profile/${userDetails.id}`}>
-              <span className="relative flex h-10 w-10 items-center justify-center rounded bg-gray-700 p-4 capitalize text-white">
-                {(userDetails.member?.display_name ?? userDetails.member?.email ?? "?")[0]}
-              </span>
-            </Link>
-          )}
-
-          <div>
-            <Link href={`/${workspaceSlug}/profile/${userDetails.member?.id}`}>
-              <span className="text-sm font-medium">
-                {userDetails.member?.first_name} {userDetails.member?.last_name}
-              </span>
-            </Link>
-            <div className="flex items-center">
-              <p className="text-xs text-custom-text-300">{userDetails.member?.display_name}</p>
-              {isAdmin && (
-                <>
-                  <Dot height={16} width={16} className="text-custom-text-300" />
-                  <p className="text-xs text-custom-text-300">{userDetails.member?.email}</p>
-                </>
-              )}
-            </div>
-          </div>
-        </div>
-
-        <div className="flex items-center gap-2 text-xs">
-          <CustomSelect
-            customButton={
-              <div className="item-center flex gap-1 rounded px-2 py-0.5">
-                <span
-                  className={`flex items-center rounded text-xs font-medium ${
-                    userDetails.member?.id !== currentUser?.id ? "" : "text-custom-text-400"
-                  }`}
-                >
-                  {ROLE[userDetails.role]}
-                </span>
-                {userDetails.member?.id !== currentUser?.id && (
-                  <span className="grid place-items-center">
-                    <ChevronDown className="h-3 w-3" />
-                  </span>
-                )}
-              </div>
-            }
-            value={userDetails.role}
-            onChange={(value: EUserProjectRoles) => {
-              if (!workspaceSlug || !projectId) return;
-
-              updateMember(workspaceSlug.toString(), projectId.toString(), userDetails.member?.id, {
-                role: value,
-              }).catch((err) => {
-                const error = err.error;
-                const errorString = Array.isArray(error) ? error[0] : error;
-
-                setToast({
-                  type: TOAST_TYPE.ERROR,
-                  title: "Error!",
-                  message: errorString ?? "An error occurred while updating member role. Please try again.",
-                });
-              });
-            }}
-            disabled={
-              userDetails.member?.id === currentUser?.id || !currentProjectRole || currentProjectRole < userDetails.role
-            }
-            placement="bottom-end"
-          >
-            {Object.keys(ROLE).map((key) => {
-              if (currentProjectRole && !isAdmin && currentProjectRole < parseInt(key)) return null;
-
-              return (
-                <CustomSelect.Option key={key} value={parseInt(key, 10)}>
-                  <>{ROLE[parseInt(key) as keyof typeof ROLE]}</>
-                </CustomSelect.Option>
-              );
-            })}
-          </CustomSelect>
-          {(isAdmin || userDetails.member?.id === currentUser?.id) && (
-            <Tooltip
-              tooltipContent={userDetails.member?.id === currentUser?.id ? "Leave project" : "Remove member"}
-              isMobile={isMobile}
-            >
-              <button
-                type="button"
-                onClick={() => setRemoveMemberModal(true)}
-                className="pointer-events-none opacity-0 group-hover:pointer-events-auto group-hover:opacity-100"
-              >
-                <XCircle className="h-3.5 w-3.5 text-red-500" strokeWidth={2} />
-              </button>
-            </Tooltip>
-          )}
-        </div>
-      </div>
    </>
  );
 });
--- a/web/core/components/project/member-list.tsx
+++ b/web/core/components/project/member-list.tsx
@@ -9,7 +9,8 @@ import { Button } from "@plane/ui";
 import { ProjectMemberListItem, SendProjectInvitationModal } from "@/components/project";
 // ui
 import { MembersSettingsLoader } from "@/components/ui";
-import { useEventTracker, useMember } from "@/hooks/store";
+import { EUserProjectRoles } from "@/constants/project";
+import { useEventTracker, useMember, useUser } from "@/hooks/store";

 export const ProjectMemberList: React.FC = observer(() => {
  // states
@@ -20,7 +21,9 @@ export const ProjectMemberList: React.FC = observer(() => {
  const {
    project: { projectMemberIds, getProjectMemberDetails },
  } = useMember();
-
+  const {
+    membership: { currentProjectRole },
+  } = useUser();
  const searchedMembers = (projectMemberIds ?? []).filter((userId) => {
    const memberDetails = getProjectMemberDetails(userId);

@@ -31,12 +34,13 @@ export const ProjectMemberList: React.FC = observer(() => {

    return displayName?.includes(searchQuery.toLowerCase()) || fullName.includes(searchQuery.toLowerCase());
  });
+  const memberDetails = searchedMembers?.map((memberId) => getProjectMemberDetails(memberId));

  return (
    <>
      <SendProjectInvitationModal isOpen={inviteModal} onClose={() => setInviteModal(false)} />

-      <div className="flex items-center justify-between gap-4 border-b border-custom-border-100 py-3.5">
+      <div className="flex items-center justify-between gap-4 border-b border-custom-border-100 py-3.5 overflow-x-hidden">
        <h4 className="text-xl font-medium">Members</h4>
        <div className="ml-auto flex items-center justify-start gap-1 rounded-md border border-custom-border-200 bg-custom-background-100 px-2.5 py-1.5 text-custom-text-400">
          <Search className="h-3.5 w-3.5" />
@@ -48,6 +52,7 @@ export const ProjectMemberList: React.FC = observer(() => {
            onChange={(e) => setSearchQuery(e.target.value)}
          />
        </div>
+        {currentProjectRole === EUserProjectRoles.ADMIN && (
          <Button
            variant="primary"
            onClick={() => {
@@ -57,14 +62,14 @@ export const ProjectMemberList: React.FC = observer(() => {
          >
            Add member
          </Button>
+        )}
      </div>
      {!projectMemberIds ? (
        <MembersSettingsLoader />
      ) : (
-        <div className="divide-y divide-custom-border-100">
-          {projectMemberIds.length > 0
-            ? searchedMembers.map((userId) => <ProjectMemberListItem key={userId} userId={userId} />)
-            : null}
+        <div className="divide-y divide-custom-border-100 overflow-scroll">
+          <ProjectMemberListItem memberDetails={memberDetails ?? []} />
+
          {searchedMembers.length === 0 && (
            <h4 className="text-sm mt-16 text-center text-custom-text-400">No matching members</h4>
          )}
--- a/web/core/components/project/settings/member-columns.tsx
+++ b/web/core/components/project/settings/member-columns.tsx
@@ -0,0 +1,141 @@
+import Link from "next/link";
+import { Controller, useForm } from "react-hook-form";
+import { Trash2 } from "lucide-react";
+import { Disclosure } from "@headlessui/react";
+import { IUser, IWorkspaceMember } from "@plane/types";
+import { CustomSelect, PopoverMenu, TOAST_TYPE, setToast } from "@plane/ui";
+import { EUserProjectRoles } from "@/constants/project";
+import { EUserWorkspaceRoles, ROLE } from "@/constants/workspace";
+import { useMember } from "@/hooks/store";
+
+export interface RowData {
+  member: IWorkspaceMember;
+  role: EUserWorkspaceRoles;
+}
+
+type NameProps = {
+  rowData: RowData;
+  workspaceSlug: string;
+  isAdmin: boolean;
+  currentUser: IUser | undefined;
+  setRemoveMemberModal: (rowData: RowData) => void;
+};
+
+type AccountTypeProps = {
+  rowData: RowData;
+  currentProjectRole: EUserProjectRoles | undefined;
+  workspaceSlug: string;
+  projectId: string;
+};
+
+export const NameColumn: React.FC<NameProps> = (props: any) => {
+  const { rowData, workspaceSlug, isAdmin, currentUser, setRemoveMemberModal } = props;
+  return (
+    <Disclosure>
+      {({}) => (
+        <div className="relative group">
+          <div className="flex items-center gap-x-4 gap-y-2 w-72 justify-between">
+            <div className="flex items-center gap-x-4 gap-y-2 flex-1">
+              {rowData.member.avatar && rowData.member.avatar.trim() !== "" ? (
+                <Link href={`/${workspaceSlug}/profile/${rowData.member.id}`}>
+                  <span className="relative flex h-6 w-6 items-center justify-center rounded-full p-4 capitalize text-white">
+                    <img
+                      src={rowData.member.avatar}
+                      className="absolute left-0 top-0 h-full w-full rounded-full object-cover"
+                      alt={rowData.member.display_name || rowData.member.email}
+                    />
+                  </span>
+                </Link>
+              ) : (
+                <Link href={`/${workspaceSlug}/profile/${rowData.member.id}`}>
+                  <span className="relative flex h-6 w-6 items-center justify-center rounded-full bg-gray-700 p-4 capitalize text-white">
+                    {(rowData.member.email ?? rowData.member.display_name ?? "?")[0]}
+                  </span>
+                </Link>
+              )}
+              {rowData.member.first_name} {rowData.member.last_name}
+            </div>
+
+            {(isAdmin || rowData.member?.id === currentUser?.id) && (
+              <PopoverMenu
+                data={[""]}
+                keyExtractor={(item) => item}
+                popoverClassName="justify-end"
+                buttonClassName="outline-none	origin-center rotate-90 size-8 aspect-square flex-shrink-0 grid place-items-center opacity-0 group-hover:opacity-100 transition-opacity"
+                render={() => (
+                  <div
+                    className="flex items-center gap-x-3 cursor-pointer"
+                    onClick={() => setRemoveMemberModal(rowData)}
+                  >
+                    <Trash2 className="size-3.5 align-middle" />
+                    {rowData.member?.id === currentUser?.id ? "Leave " : "Remove "}
+                  </div>
+                )}
+              />
+            )}
+          </div>
+        </div>
+      )}
+    </Disclosure>
+  );
+};
+
+export const AccountTypeColumn: React.FC<AccountTypeProps> = (props) => {
+  const { rowData, currentProjectRole, projectId, workspaceSlug } = props;
+  // form info
+  const {
+    control,
+    formState: { errors },
+  } = useForm();
+  const {
+    project: { updateMember },
+  } = useMember();
+  return rowData.role === EUserWorkspaceRoles.ADMIN || currentProjectRole !== EUserProjectRoles.ADMIN ? (
+    <div className="w-32 flex ">
+      <span>{ROLE[rowData.role as keyof typeof ROLE]}</span>
+    </div>
+  ) : (
+    <Controller
+      name="role"
+      control={control}
+      rules={{ required: "Role is required." }}
+      render={({ field: { value } }) => (
+        <CustomSelect
+          value={value}
+          onChange={(value: EUserProjectRoles) => {
+            if (!workspaceSlug) return;
+
+            updateMember(workspaceSlug.toString(), projectId.toString(), rowData.member.id, {
+              role: value as unknown as EUserProjectRoles, // Cast value to unknown first, then to EUserWorkspaceRoles
+            }).catch((err) => {
+              console.log(err, "err");
+              const error = err.error;
+              const errorString = Array.isArray(error) ? error[0] : error;
+
+              setToast({
+                type: TOAST_TYPE.ERROR,
+                title: "Error!",
+                message: errorString ?? "An error occurred while updating member role. Please try again.",
+              });
+            });
+          }}
+          label={
+            <div className="flex ">
+              <span>{ROLE[rowData.role as keyof typeof ROLE]}</span>
+            </div>
+          }
+          buttonClassName={`!px-0 !justify-start hover:bg-custom-background-100 ${errors.role ? "border-red-500" : "border-none"}`}
+          className="rounded-md p-0 w-32"
+          optionsClassName="w-full"
+          input
+        >
+          {Object.keys(ROLE).map((item) => (
+            <CustomSelect.Option key={item} value={item as unknown as EUserProjectRoles}>
+              {ROLE[item as unknown as keyof typeof ROLE]}
+            </CustomSelect.Option>
+          ))}
+        </CustomSelect>
+      )}
+    />
+  );
+};
--- a/web/core/components/workspace/settings/invitations-list-item.tsx
+++ b/web/core/components/workspace/settings/invitations-list-item.tsx
@@ -79,7 +79,7 @@ export const WorkspaceInvitationsListItem: FC<Props> = observer((props) => {
        }}
        onSubmit={handleRemoveInvitation}
      />
-      <div className="group flex items-center justify-between px-3 py-4 hover:bg-custom-background-90">
+      <div className="group flex items-center justify-between px-3 py-4 hover:bg-custom-background-90 w-full">
        <div className="flex items-center gap-x-4 gap-y-2">
          <span className="relative flex h-10 w-10 items-center justify-center rounded bg-gray-700 p-4 capitalize text-white">
            {(invitationDetails.email ?? "?")[0]}
@@ -137,6 +137,7 @@ export const WorkspaceInvitationsListItem: FC<Props> = observer((props) => {
              );
            })}
          </CustomSelect>
+          {isAdmin && (
            <Tooltip tooltipContent="Remove member" disabled={!isAdmin} isMobile={isMobile}>
              <button
                type="button"
@@ -148,6 +149,7 @@ export const WorkspaceInvitationsListItem: FC<Props> = observer((props) => {
                <XCircle className="h-3.5 w-3.5 text-red-500" strokeWidth={2} />
              </button>
            </Tooltip>
+          )}
        </div>
      </div>
    </>
--- a/web/core/components/workspace/settings/member-columns.tsx
+++ b/web/core/components/workspace/settings/member-columns.tsx
@@ -0,0 +1,141 @@
+import Link from "next/link";
+import { Controller, useForm } from "react-hook-form";
+import { Trash2 } from "lucide-react";
+import { Disclosure } from "@headlessui/react";
+import { IUser, IWorkspaceMember } from "@plane/types";
+import { CustomSelect, PopoverMenu, TOAST_TYPE, setToast } from "@plane/ui";
+import { EUserProjectRoles } from "@/constants/project";
+import { EUserWorkspaceRoles, ROLE } from "@/constants/workspace";
+import { useMember } from "@/hooks/store";
+
+export interface RowData {
+  member: IWorkspaceMember;
+  role: EUserWorkspaceRoles;
+}
+
+type NameProps = {
+  rowData: RowData;
+  workspaceSlug: string;
+  isAdmin: boolean;
+  currentUser: IUser | undefined;
+  setRemoveMemberModal: (rowData: RowData) => void;
+};
+
+type AccountTypeProps = {
+  rowData: RowData;
+  currentWorkspaceRole: EUserWorkspaceRoles | undefined;
+  workspaceSlug: string;
+};
+
+export const NameColumn: React.FC<NameProps> = (props: any) => {
+  const { rowData, workspaceSlug, isAdmin, currentUser, setRemoveMemberModal } = props;
+  return (
+    <Disclosure>
+      {({}) => (
+        <div className="relative group">
+          <div className="flex items-center gap-x-4 gap-y-2 w-72 justify-between">
+            <div className="flex items-center gap-x-4 gap-y-2 flex-1">
+              {rowData.member.avatar && rowData.member.avatar.trim() !== "" ? (
+                <Link href={`/${workspaceSlug}/profile/${rowData.member.id}`}>
+                  <span className="relative flex h-6 w-6 items-center justify-center rounded-full p-4 capitalize text-white">
+                    <img
+                      src={rowData.member.avatar}
+                      className="absolute left-0 top-0 h-full w-full rounded-full object-cover"
+                      alt={rowData.member.display_name || rowData.member.email}
+                    />
+                  </span>
+                </Link>
+              ) : (
+                <Link href={`/${workspaceSlug}/profile/${rowData.member.id}`}>
+                  <span className="relative flex h-6 w-6 items-center justify-center rounded-full bg-gray-700 p-4 capitalize text-white">
+                    {(rowData.member.email ?? rowData.member.display_name ?? "?")[0]}
+                  </span>
+                </Link>
+              )}
+              {rowData.member.first_name} {rowData.member.last_name}
+            </div>
+
+            {(isAdmin || rowData.member?.id === currentUser?.id) && (
+              <PopoverMenu
+                data={[""]}
+                keyExtractor={(item) => item}
+                popoverClassName="justify-end"
+                buttonClassName="outline-none	origin-center rotate-90 size-8 aspect-square flex-shrink-0 grid place-items-center opacity-0 group-hover:opacity-100 transition-opacity"
+                render={() => (
+                  <div
+                    className="flex items-center gap-x-3 cursor-pointer"
+                    onClick={() => setRemoveMemberModal(rowData)}
+                  >
+                    <Trash2 className="size-3.5 align-middle" />{" "}
+                    {rowData.member?.id === currentUser?.id ? "Leave " : "Remove "}
+                  </div>
+                )}
+              />
+            )}
+          </div>
+        </div>
+      )}
+    </Disclosure>
+  );
+};
+
+export const AccountTypeColumn: React.FC<AccountTypeProps> = (props) => {
+  const { rowData, currentWorkspaceRole, workspaceSlug } = props;
+  // form info
+  const {
+    control,
+    formState: { errors },
+  } = useForm();
+  const {
+    workspace: { updateMember },
+  } = useMember();
+  return rowData.role === EUserWorkspaceRoles.ADMIN || currentWorkspaceRole !== EUserWorkspaceRoles.ADMIN ? (
+    <div className="w-32 flex ">
+      <span>{ROLE[rowData.role as keyof typeof ROLE]}</span>
+    </div>
+  ) : (
+    <Controller
+      name="role"
+      control={control}
+      rules={{ required: "Role is required." }}
+      render={({ field: { value } }) => (
+        <CustomSelect
+          value={value}
+          onChange={(value: EUserProjectRoles) => {
+            console.log({ value, workspaceSlug }, "onChange");
+            if (!workspaceSlug) return;
+
+            updateMember(workspaceSlug.toString(), rowData.member.id, {
+              role: value as unknown as EUserWorkspaceRoles, // Cast value to unknown first, then to EUserWorkspaceRoles
+            }).catch((err) => {
+              console.log(err, "err");
+              const error = err.error;
+              const errorString = Array.isArray(error) ? error[0] : error;
+
+              setToast({
+                type: TOAST_TYPE.ERROR,
+                title: "Error!",
+                message: errorString ?? "An error occurred while updating member role. Please try again.",
+              });
+            });
+          }}
+          label={
+            <div className="flex ">
+              <span>{ROLE[rowData.role as keyof typeof ROLE]}</span>
+            </div>
+          }
+          buttonClassName={`!px-0 !justify-start hover:bg-custom-background-100 ${errors.role ? "border-red-500" : "border-none"}`}
+          className="rounded-md p-0 w-32"
+          optionsClassName="w-full"
+          input
+        >
+          {Object.keys(ROLE).map((item) => (
+            <CustomSelect.Option key={item} value={item as unknown as EUserProjectRoles}>
+              {ROLE[item as unknown as keyof typeof ROLE]}
+            </CustomSelect.Option>
+          ))}
+        </CustomSelect>
+      )}
+    />
+  );
+};
--- a/web/core/components/workspace/settings/members-list-item.tsx
+++ b/web/core/components/workspace/settings/members-list-item.tsx
@@ -1,48 +1,40 @@
 "use client";

-import { FC, useState } from "react";
+import { FC } from "react";
 import { observer } from "mobx-react";
-import Link from "next/link";
-import { useParams } from "next/navigation";
-// lucide icons
-import { ChevronDown, Dot, XCircle } from "lucide-react";
 // ui
-import { CustomSelect, TOAST_TYPE, Tooltip, setToast } from "@plane/ui";
+import { IWorkspaceMember } from "@plane/types";
+import { TOAST_TYPE, Table, setToast } from "@plane/ui";
 // components
 import { ConfirmWorkspaceMemberRemove } from "@/components/workspace";
 // constants
 import { WORKSPACE_MEMBER_LEAVE } from "@/constants/event-tracker";
-import { EUserWorkspaceRoles, ROLE } from "@/constants/workspace";
 // hooks
 import { useEventTracker, useMember, useUser } from "@/hooks/store";
 import { useAppRouter } from "@/hooks/use-app-router";
 import { usePlatformOS } from "@/hooks/use-platform-os";
+import useMemberColumns from "@/plane-web/components/workspace/settings/useMemberColumns";

 type Props = {
-  memberId: string;
+  memberDetails: (IWorkspaceMember | null)[];
 };

 export const WorkspaceMembersListItem: FC<Props> = observer((props) => {
-  const { memberId } = props;
-  // states
-  const [removeMemberModal, setRemoveMemberModal] = useState(false);
+  const { memberDetails } = props;
+  const { columns, workspaceSlug, removeMemberModal, setRemoveMemberModal } = useMemberColumns();
  // router
  const router = useAppRouter();
-  const { workspaceSlug } = useParams();
  // store hooks
  const {
-    // currentUser,
-    // currentUserSettings,
-    membership: { currentWorkspaceRole, leaveWorkspace },
+    membership: { leaveWorkspace },
  } = useUser();
  const { data: currentUser } = useUser();
  const {
-    workspace: { updateMember, removeMemberFromWorkspace, getWorkspaceMemberDetails },
+    workspace: { removeMemberFromWorkspace },
  } = useMember();
  const { captureEvent } = useEventTracker();
  const { isMobile } = usePlatformOS();
  // derived values
-  const memberDetails = getWorkspaceMemberDetails(memberId);

  const handleLeaveWorkspace = async () => {
    if (!workspaceSlug || !currentUser) return;
@@ -64,10 +56,10 @@ export const WorkspaceMembersListItem: FC<Props> = observer((props) => {
      );
  };

-  const handleRemoveMember = async () => {
-    if (!workspaceSlug || !memberDetails) return;
+  const handleRemoveMember = async (memberId: string) => {
+    if (!workspaceSlug || !memberId) return;

-    await removeMemberFromWorkspace(workspaceSlug.toString(), memberDetails.member.id).catch((err) =>
+    await removeMemberFromWorkspace(workspaceSlug.toString(), memberId).catch((err) =>
      setToast({
        type: TOAST_TYPE.ERROR,
        title: "Error!",
@@ -76,143 +68,41 @@ export const WorkspaceMembersListItem: FC<Props> = observer((props) => {
    );
  };

-  const handleRemove = async () => {
-    if (memberDetails?.member.id === currentUser?.id) await handleLeaveWorkspace();
-    else await handleRemoveMember();
+  const handleRemove = async (memberId: string) => {
+    if (memberId === currentUser?.id) await handleLeaveWorkspace();
+    else await handleRemoveMember(memberId);
  };

-  if (!memberDetails) return null;
-
  // is the member current logged in user
-  const isCurrentUser = memberDetails?.member.id === currentUser?.id;
+  // const isCurrentUser = memberDetails?.member.id === currentUser?.id;
  // is the current logged in user admin
-  const isAdmin = currentWorkspaceRole === EUserWorkspaceRoles.ADMIN;
  // role change access-
  // 1. user cannot change their own role
  // 2. only admin or member can change role
  // 3. user cannot change role of higher role
-  const hasRoleChangeAccess =
-    currentWorkspaceRole &&
-    !isCurrentUser &&
-    [EUserWorkspaceRoles.ADMIN, EUserWorkspaceRoles.MEMBER].includes(currentWorkspaceRole) &&
-    memberDetails.role <= currentWorkspaceRole;

  return (
    <>
+      {removeMemberModal && (
        <ConfirmWorkspaceMemberRemove
-        isOpen={removeMemberModal}
-        onClose={() => setRemoveMemberModal(false)}
+          isOpen={removeMemberModal.member.id.length > 0}
+          onClose={() => setRemoveMemberModal(null)}
          userDetails={{
-          id: memberDetails.member.id,
-          display_name: `${memberDetails.member.display_name}`,
+            id: removeMemberModal.member.id,
+            display_name: removeMemberModal.member.display_name || "",
          }}
-        onSubmit={handleRemove}
+          onSubmit={() => handleRemove(removeMemberModal.member.id)}
        />
-      <div className="group w-full flex items-center justify-between px-3 py-4 hover:bg-custom-background-90">
-        <div className="flex w-full items-center gap-x-4 gap-y-2">
-          {memberDetails.member.avatar && memberDetails.member.avatar.trim() !== "" ? (
-            <Link href={`/${workspaceSlug}/profile/${memberDetails.member.id}`}>
-              <span className="relative flex h-10 w-10 items-center justify-center rounded p-4 capitalize text-white">
-                <img
-                  src={memberDetails.member.avatar}
-                  className="absolute left-0 top-0 h-full w-full rounded object-cover"
-                  alt={memberDetails.member.display_name || memberDetails.member.email}
+      )}
+      <Table
+        columns={columns}
+        data={memberDetails?.filter((member): member is IWorkspaceMember => member !== null) ?? []}
+        keyExtractor={(rowData) => rowData?.member.id ?? ""}
+        thClassName="text-left font-medium divide-x-0 border-b border-t divide-custom-border-200"
+        tBodyClassName="divide-y-0"
+        tBodyTrClassName="divide-x-0"
+        tHeadTrClassName="divide-x-0"
      />
-              </span>
-            </Link>
-          ) : (
-            <Link href={`/${workspaceSlug}/profile/${memberDetails.member.id}`}>
-              <span className="relative flex h-10 w-10 items-center justify-center rounded bg-gray-700 p-4 capitalize text-white">
-                {(memberDetails.member.email ?? memberDetails.member.display_name ?? "?")[0]}
-              </span>
-            </Link>
-          )}
-          <div className="w-full flex items-center justify-between">
-            <div className="truncate">
-              <Link href={`/${workspaceSlug}/profile/${memberDetails.member.id}`} className="truncate">
-                <div className="w-full truncate">
-                  <span className="text-sm font-medium truncate">
-                    {memberDetails.member.first_name} {memberDetails.member.last_name}
-                  </span>
-                </div>
-              </Link>
-              <div className="flex flex-col sm:flex-row items-start sm:items-center truncate">
-                <p className="text-xs text-custom-text-300">{memberDetails.member.display_name}</p>
-                {isAdmin && (
-                  <>
-                    <Dot height={16} width={16} className="text-custom-text-300 hidden sm:block" />
-                    <p className="text-xs text-custom-text-300 line-clamp-1 truncate">{memberDetails.member.email}</p>
-                  </>
-                )}
-              </div>
-            </div>
-            <div className="flex flex-shrink-0 items-center gap-2 text-xs">
-              <CustomSelect
-                customButton={
-                  <div className="item-center flex gap-1 rounded px-2 py-0.5">
-                    <span
-                      className={`flex items-center rounded text-xs font-medium ${
-                        hasRoleChangeAccess ? "" : "text-custom-sidebar-text-400"
-                      }`}
-                    >
-                      {ROLE[memberDetails.role]}
-                    </span>
-                    {hasRoleChangeAccess && (
-                      <span className="grid place-items-center">
-                        <ChevronDown className="h-3 w-3" />
-                      </span>
-                    )}
-                  </div>
-                }
-                value={memberDetails.role}
-                onChange={(value: EUserWorkspaceRoles) => {
-                  if (!workspaceSlug || !value) return;
-
-                  updateMember(workspaceSlug.toString(), memberDetails.member.id, {
-                    role: value,
-                  }).catch(() => {
-                    setToast({
-                      type: TOAST_TYPE.ERROR,
-                      title: "Error!",
-                      message: "An error occurred while updating member role. Please try again.",
-                    });
-                  });
-                }}
-                disabled={!hasRoleChangeAccess}
-                placement="bottom-end"
-              >
-                {Object.keys(ROLE).map((key) => {
-                  if (currentWorkspaceRole && currentWorkspaceRole !== 20 && currentWorkspaceRole < parseInt(key))
-                    return null;
-
-                  return (
-                    <CustomSelect.Option key={key} value={parseInt(key, 10)}>
-                      <>{ROLE[parseInt(key) as keyof typeof ROLE]}</>
-                    </CustomSelect.Option>
-                  );
-                })}
-              </CustomSelect>
-              <Tooltip
-                isMobile={isMobile}
-                tooltipContent={isCurrentUser ? "Leave workspace" : "Remove member"}
-                disabled={!isAdmin && !isCurrentUser}
-              >
-                <button
-                  type="button"
-                  onClick={() => setRemoveMemberModal(true)}
-                  className={
-                    isAdmin || isCurrentUser
-                      ? "pointer-events-none md:opacity-0 group-hover:pointer-events-auto md:group-hover:opacity-100"
-                      : "pointer-events-none hidden md:opacity-0 md:block"
-                  }
-                >
-                  <XCircle className="h-3.5 w-3.5 text-red-500" strokeWidth={2} />
-                </button>
-              </Tooltip>
-            </div>
-          </div>
-        </div>
-      </div>
    </>
  );
 });
--- a/web/core/components/workspace/settings/members-list.tsx
+++ b/web/core/components/workspace/settings/members-list.tsx
@@ -1,15 +1,20 @@
-import { FC } from "react";
+import { FC, useState } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 import useSWR from "swr";
-// components
+import { ChevronDown } from "lucide-react";
+import { Disclosure } from "@headlessui/react";
+import { Collapsible } from "@plane/ui";
+import { CountChip } from "@/components/common";
 import { MembersSettingsLoader } from "@/components/ui";
 import { WorkspaceInvitationsListItem, WorkspaceMembersListItem } from "@/components/workspace";
 // hooks
 import { useMember } from "@/hooks/store";

-export const WorkspaceMembersList: FC<{ searchQuery: string }> = observer((props) => {
-  const { searchQuery } = props;
+export const WorkspaceMembersList: FC<{ searchQuery: string; isAdmin: boolean }> = observer((props) => {
+  const { searchQuery, isAdmin } = props;
+  const [showPendingInvites, setShowPendingInvites] = useState<boolean>(false);
+
  // router
  const { workspaceSlug } = useParams();
  // store hooks
@@ -21,6 +26,7 @@ export const WorkspaceMembersList: FC<{ searchQuery: string }> = observer((props
      getSearchedWorkspaceMemberIds,
      workspaceMemberInvitationIds,
      getSearchedWorkspaceInvitationIds,
+      getWorkspaceMemberDetails,
    },
  } = useMember();
  // fetching workspace invitations
@@ -39,20 +45,44 @@ export const WorkspaceMembersList: FC<{ searchQuery: string }> = observer((props
  // derived values
  const searchedMemberIds = getSearchedWorkspaceMemberIds(searchQuery);
  const searchedInvitationsIds = getSearchedWorkspaceInvitationIds(searchQuery);
+  const memberDetails = searchedMemberIds?.map((memberId) => getWorkspaceMemberDetails(memberId));

  return (
-    <div className="divide-y-[0.5px] divide-custom-border-100">
+    <>
+      <div className="divide-y-[0.5px] divide-custom-border-100 overflow-scroll	">
+        <WorkspaceMembersListItem memberDetails={memberDetails ?? []} />
+        {searchedInvitationsIds?.length === 0 && searchedMemberIds?.length === 0 && (
+          <h4 className="mt-16 text-center text-sm text-custom-text-400">No matching members</h4>
+        )}
+      </div>
+      {isAdmin && (
+        <Collapsible
+          isOpen={showPendingInvites}
+          onToggle={() => setShowPendingInvites((prev) => !prev)}
+          buttonClassName="w-full"
+          title={
+            <div className="flex w-full items-center justify-between pt-4">
+              <div className="flex">
+                <h4 className="text-xl font-medium pt-2 pb-2">Pending invites</h4>
+                {searchedInvitationsIds && (
+                  <CountChip count={searchedInvitationsIds.length} className="h-5  m-auto ml-2" />
+                )}
+              </div>{" "}
+              <ChevronDown className={`h-5 w-5 transition-all ${showPendingInvites ? "rotate-180" : ""}`} />
+            </div>
+          }
+        >
+          <Disclosure.Panel>
+            <div className="ml-auto  items-center gap-1.5 rounded-md bg-custom-background-100  py-1.5">
              {searchedInvitationsIds && searchedInvitationsIds.length > 0
                ? searchedInvitationsIds?.map((invitationId) => (
                    <WorkspaceInvitationsListItem key={invitationId} invitationId={invitationId} />
                  ))
                : null}
-      {searchedMemberIds && searchedMemberIds.length > 0
-        ? searchedMemberIds?.map((memberId) => <WorkspaceMembersListItem key={memberId} memberId={memberId} />)
-        : null}
-      {searchedInvitationsIds?.length === 0 && searchedMemberIds?.length === 0 && (
-        <h4 className="mt-16 text-center text-sm text-custom-text-400">No matching members</h4>
-      )}
            </div>
+          </Disclosure.Panel>
+        </Collapsible>
+      )}
+    </>
  );
 });
--- a/web/core/store/member/project-member.store.ts
+++ b/web/core/store/member/project-member.store.ts
@@ -15,7 +15,7 @@ import { IUserStore } from "@/store/user";
 import { CoreRootStore } from "../root.store";
 import { IMemberRootStore } from ".";

-interface IProjectMemberDetails {
+export interface IProjectMemberDetails {
  id: string;
  member: IUserLite;
  role: EUserProjectRoles;
--- a/web/core/store/member/workspace-member.store.ts
+++ b/web/core/store/member/workspace-member.store.ts
@@ -196,7 +196,7 @@ export class WorkspaceMemberStore implements IWorkspaceMemberStore {
    await this.workspaceService.fetchWorkspaceMembers(workspaceSlug).then((response) => {
      runInAction(() => {
        response.forEach((member) => {
-          set(this.memberRoot?.memberMap, member.member.id, member.member);
+          set(this.memberRoot?.memberMap, member.member.id, { ...member.member, joining_date: member.created_at });
          set(this.workspaceMemberMap, [workspaceSlug, member.member.id], {
            id: member.id,
            member: member.member.id,
--- a/web/ee/components/projects/settings/useProjectColumns.tsx
+++ b/web/ee/components/projects/settings/useProjectColumns.tsx
@@ -0,0 +1 @@
+export * from "ce/components/projects/settings/useProjectColumns";
--- a/web/ee/components/workspace/settings/useMemberColumns.tsx
+++ b/web/ee/components/workspace/settings/useMemberColumns.tsx
@@ -0,0 +1 @@
+export * from "ce/components/workspace/settings/useMemberColumns";
				`@@ -0,0 +1 @@`
				`export * from "ce/components/projects/settings/useProjectColumns";`
				`@@ -0,0 +1 @@`
				`export * from "ce/components/workspace/settings/useMemberColumns";`