@m5kdev/web-ui 0.1.4 → 0.2.0

package/src/modules/auth/components/OrganizationMembersRoute.tsx

@@ -1,730 +0,0 @@
-import {
-  Button,
-  Card,
-  CardBody,
-  CardHeader,
-  Chip,
-  Input,
-  Select,
-  SelectItem,
-  Spinner,
-  Table,
-  TableBody,
-  TableCell,
-  TableColumn,
-  TableHeader,
-  TableRow,
-} from "@heroui/react";
-import { authClient } from "@m5kdev/frontend/modules/auth/auth.lib";
-import { useSession } from "@m5kdev/frontend/modules/auth/hooks/useSession";
-import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import { Copy, Trash2, UserPlus, Users } from "lucide-react";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { useTranslation } from "react-i18next";
-import { toast } from "sonner";
-
-type OrganizationDetails = {
-  id: string;
-  name: string;
-  slug: string;
-  logo?: string | null;
-  metadata?: Record<string, unknown> | null;
-};
-
-type OrganizationMember = {
-  id: string;
-  userId: string;
-  role: string;
-  user: {
-    id: string;
-    name: string;
-    email: string;
-    image?: string | null;
-  };
-};
-
-type OrganizationInvitation = {
-  id: string;
-  organizationId: string;
-  email: string;
-  role: string;
-  status: string;
-  inviterId: string;
-  createdAt: Date | string;
-  expiresAt: Date | string;
-};
-
-type CombinedMemberRow =
-  | {
-      kind: "member";
-      id: string;
-      displayName: string;
-      email: string;
-      role: string;
-      status: "active";
-      memberId: string;
-    }
-  | {
-      kind: "invitation";
-      id: string;
-      displayName: string;
-      email: string;
-      role: string;
-      status: "invited";
-      invitationId: string;
-    };
-
-const ORGANIZATION_ROLES = ["member", "admin", "owner"] as const;
-
-export type OrganizationRole = (typeof ORGANIZATION_ROLES)[number];
-
-function isOrganizationRole(role: string): role is OrganizationRole {
-  return (ORGANIZATION_ROLES as readonly string[]).includes(role);
-}
-
-export type OrganizationMembersRouteLabels = {
-  loadError: string;
-  membersTitle: string;
-  membersNoActive: string;
-  membersManageOnly: string;
-  membersDescription: (organizationName: string) => string;
-  defaultOrganizationName: string;
-  loadMembersError: string;
-  loadInvitationsError: string;
-  roleUpdateSuccess: string;
-  roleUpdateError: string;
-  removeMemberSuccess: string;
-  removeMemberError: string;
-  emailRequired: string;
-  inviteSuccess: string;
-  inviteError: string;
-  cancelInvitationSuccess: string;
-  cancelInvitationError: string;
-  inviteLinkCopied: string;
-  copyInviteLinkError: string;
-  unknownName: string;
-  invitedUser: string;
-  emailLabel: string;
-  emailPlaceholder: string;
-  roleLabel: string;
-  inviteButton: string;
-  tableTitle: string;
-  columnName: string;
-  columnEmail: string;
-  columnRole: string;
-  columnStatus: string;
-  columnActions: string;
-  tableEmpty: string;
-  roleFor: (name: string) => string;
-  statusActive: string;
-  statusInvited: string;
-  removeMember: string;
-  copyInviteLink: string;
-  cancelInvitation: string;
-  roleUnknown: string;
-};
-
-export type OrganizationMembersRouteProps = {
-  managerRoles?: string[];
-  assignableRoles?: OrganizationRole[];
-  invitationAcceptPath?: string;
-  onInvalidateScopedQueries?: () => void | Promise<void>;
-};
-
-function OrganizationStateCard({ title, message }: { title: string; message: string }) {
-  return (
-    <div className="p-6">
-      <Card>
-        <CardHeader className="text-lg font-semibold">{title}</CardHeader>
-        <CardBody>{message}</CardBody>
-      </Card>
-    </div>
-  );
-}
-
-function useOrganizationAccess({
-  managerRoles,
-  onInvalidateScopedQueries,
-}: Pick<OrganizationMembersRouteProps, "managerRoles" | "onInvalidateScopedQueries">) {
-  const { data: session, registerSession } = useSession();
-  const queryClient = useQueryClient();
-
-  const activeOrganizationId = session?.session.activeOrganizationId ?? "";
-  const activeOrganizationRole =
-    (session?.session as { activeOrganizationRole?: string } | undefined)?.activeOrganizationRole ??
-    "";
-  const managerRoleSet = useMemo(() => new Set(managerRoles ?? ["admin", "owner"]), [managerRoles]);
-  const canManageOrganization = managerRoleSet.has(activeOrganizationRole);
-
-  const refreshOrganizationQueries = useCallback(async () => {
-    await Promise.allSettled([
-      queryClient.invalidateQueries({ queryKey: ["auth-organization-list"] }),
-      queryClient.invalidateQueries({
-        queryKey: ["auth-organization-details", activeOrganizationId],
-      }),
-      queryClient.invalidateQueries({
-        queryKey: ["auth-organization-members", activeOrganizationId],
-      }),
-      queryClient.invalidateQueries({
-        queryKey: ["auth-organization-invitations", activeOrganizationId],
-      }),
-    ]);
-
-    registerSession(() => {
-      void onInvalidateScopedQueries?.();
-    });
-  }, [activeOrganizationId, onInvalidateScopedQueries, queryClient, registerSession]);
-
-  return {
-    activeOrganizationId,
-    activeOrganizationRole,
-    canManageOrganization,
-    refreshOrganizationQueries,
-  };
-}
-
-function useOrganizationConfig({
-  assignableRoles,
-}: Pick<OrganizationMembersRouteProps, "assignableRoles">) {
-  const { t } = useTranslation();
-
-  const translatedLabels = useMemo<OrganizationMembersRouteLabels>(
-    () => ({
-      loadError: t("web-ui:organization.members.loadError"),
-      membersTitle: t("web-ui:organization.members.title"),
-      membersNoActive: t("web-ui:organization.members.noActive"),
-      membersManageOnly: t("web-ui:organization.members.manageOnly"),
-      membersDescription: (organizationName: string) =>
-        t("web-ui:organization.members.description", { name: organizationName }),
-      defaultOrganizationName: t("web-ui:organization.members.defaultName"),
-      loadMembersError: t("web-ui:organization.members.loadMembersError"),
-      loadInvitationsError: t("web-ui:organization.members.loadInvitationsError"),
-      roleUpdateSuccess: t("web-ui:organization.members.roleUpdateSuccess"),
-      roleUpdateError: t("web-ui:organization.members.roleUpdateError"),
-      removeMemberSuccess: t("web-ui:organization.members.removeMemberSuccess"),
-      removeMemberError: t("web-ui:organization.members.removeMemberError"),
-      emailRequired: t("web-ui:organization.members.emailRequired"),
-      inviteSuccess: t("web-ui:organization.members.inviteSuccess"),
-      inviteError: t("web-ui:organization.members.inviteError"),
-      cancelInvitationSuccess: t("web-ui:organization.members.cancelInvitationSuccess"),
-      cancelInvitationError: t("web-ui:organization.members.cancelInvitationError"),
-      inviteLinkCopied: t("web-ui:organization.members.inviteLinkCopied"),
-      copyInviteLinkError: t("web-ui:organization.members.copyInviteLinkError"),
-      unknownName: t("web-ui:organization.members.unknownName"),
-      invitedUser: t("web-ui:organization.members.invitedUser"),
-      emailLabel: t("web-ui:organization.members.emailLabel"),
-      emailPlaceholder: t("web-ui:organization.members.emailPlaceholder"),
-      roleLabel: t("web-ui:organization.members.roleLabel"),
-      inviteButton: t("web-ui:organization.members.inviteButton"),
-      tableTitle: t("web-ui:organization.members.tableTitle"),
-      columnName: t("web-ui:organization.members.columnName"),
-      columnEmail: t("web-ui:organization.members.columnEmail"),
-      columnRole: t("web-ui:organization.members.columnRole"),
-      columnStatus: t("web-ui:organization.members.columnStatus"),
-      columnActions: t("web-ui:organization.members.columnActions"),
-      tableEmpty: t("web-ui:organization.members.tableEmpty"),
-      roleFor: (name: string) => t("web-ui:organization.members.roleFor", { name }),
-      statusActive: t("web-ui:organization.members.statusActive"),
-      statusInvited: t("web-ui:organization.members.statusInvited"),
-      removeMember: t("web-ui:organization.members.removeMember"),
-      copyInviteLink: t("web-ui:organization.members.copyInviteLink"),
-      cancelInvitation: t("web-ui:organization.members.cancelInvitation"),
-      roleUnknown: t("web-ui:organization.members.roleUnknown"),
-    }),
-    [t]
-  );
-
-  const translatedRoleLabels = useMemo<Record<string, string>>(
-    () => ({
-      member: t("web-ui:organization.roles.member"),
-      admin: t("web-ui:organization.roles.admin"),
-      owner: t("web-ui:organization.roles.owner"),
-    }),
-    [t]
-  );
-
-  const resolvedAssignableRoles = useMemo(
-    () =>
-      assignableRoles && assignableRoles.length > 0 ? assignableRoles : [...ORGANIZATION_ROLES],
-    [assignableRoles]
-  );
-
-  return {
-    resolvedLabels: translatedLabels,
-    resolvedRoleLabels: translatedRoleLabels,
-    resolvedAssignableRoles,
-  };
-}
-
-export function OrganizationMembersRoute({
-  managerRoles,
-  assignableRoles,
-  invitationAcceptPath,
-  onInvalidateScopedQueries,
-}: OrganizationMembersRouteProps) {
-  const { resolvedLabels, resolvedRoleLabels, resolvedAssignableRoles } = useOrganizationConfig({
-    assignableRoles,
-  });
-
-  const {
-    activeOrganizationId,
-    activeOrganizationRole,
-    canManageOrganization,
-    refreshOrganizationQueries,
-  } = useOrganizationAccess({ managerRoles, onInvalidateScopedQueries });
-
-  const [inviteEmail, setInviteEmail] = useState("");
-  const [inviteRole, setInviteRole] = useState<OrganizationRole>(
-    resolvedAssignableRoles[0] ?? "member"
-  );
-  const isMountedRef = useRef(true);
-  useEffect(() => {
-    return () => {
-      isMountedRef.current = false;
-    };
-  }, []);
-
-  const refreshOrganizationQueriesStable = useCallback(
-    () => refreshOrganizationQueries(),
-    [refreshOrganizationQueries]
-  );
-
-  const updateRoleMutation = useMutation({
-    mutationFn: async ({
-      memberId,
-      role,
-      organizationId,
-    }: {
-      memberId: string;
-      role: OrganizationRole;
-      organizationId: string;
-    }) => {
-      const { error } = await authClient.organization.updateMemberRole({
-        memberId,
-        role,
-        organizationId,
-      });
-      if (error) throw new Error(error.message ?? resolvedLabels.roleUpdateError);
-    },
-    onSuccess: async () => {
-      await refreshOrganizationQueriesStable();
-      toast.success(resolvedLabels.roleUpdateSuccess);
-    },
-    onError: (error) => {
-      toast.error(error instanceof Error ? error.message : resolvedLabels.roleUpdateError);
-    },
-  });
-
-  const removeMemberMutation = useMutation({
-    mutationFn: async ({
-      memberId,
-      organizationId,
-    }: {
-      memberId: string;
-      organizationId: string;
-    }) => {
-      const { error } = await authClient.organization.removeMember({
-        memberIdOrEmail: memberId,
-        organizationId,
-      });
-      if (error) throw new Error(error.message ?? resolvedLabels.removeMemberError);
-    },
-    onSuccess: async () => {
-      await refreshOrganizationQueriesStable();
-      toast.success(resolvedLabels.removeMemberSuccess);
-    },
-    onError: (error) => {
-      toast.error(error instanceof Error ? error.message : resolvedLabels.removeMemberError);
-    },
-  });
-
-  const createInvitationMutation = useMutation({
-    mutationFn: async ({
-      email,
-      role,
-      organizationId,
-    }: {
-      email: string;
-      role: OrganizationRole;
-      organizationId: string;
-    }) => {
-      const { error } = await authClient.organization.inviteMember({
-        organizationId,
-        email: email.trim(),
-        role,
-      });
-      if (error) throw new Error(error.message ?? resolvedLabels.inviteError);
-    },
-    onSuccess: async () => {
-      await refreshOrganizationQueriesStable();
-      toast.success(resolvedLabels.inviteSuccess);
-      if (isMountedRef.current) {
-        setInviteEmail("");
-        setInviteRole(resolvedAssignableRoles[0] ?? "member");
-      }
-    },
-    onError: (error) => {
-      toast.error(error instanceof Error ? error.message : resolvedLabels.inviteError);
-    },
-  });
-
-  const cancelInvitationMutation = useMutation({
-    mutationFn: async ({ invitationId }: { invitationId: string }) => {
-      const { error } = await authClient.organization.cancelInvitation({ invitationId });
-      if (error) throw new Error(error.message ?? resolvedLabels.cancelInvitationError);
-    },
-    onSuccess: async () => {
-      await refreshOrganizationQueriesStable();
-      toast.success(resolvedLabels.cancelInvitationSuccess);
-    },
-    onError: (error) => {
-      toast.error(error instanceof Error ? error.message : resolvedLabels.cancelInvitationError);
-    },
-  });
-
-  const updatingMemberId =
-    updateRoleMutation.isPending && updateRoleMutation.variables
-      ? updateRoleMutation.variables.memberId
-      : null;
-  const removingMemberId =
-    removeMemberMutation.isPending && removeMemberMutation.variables
-      ? removeMemberMutation.variables.memberId
-      : null;
-  const cancelingInvitationId =
-    cancelInvitationMutation.isPending && cancelInvitationMutation.variables
-      ? cancelInvitationMutation.variables.invitationId
-      : null;
-
-  useEffect(() => {
-    if (!resolvedAssignableRoles.includes(inviteRole)) {
-      setInviteRole(resolvedAssignableRoles[0] ?? "member");
-    }
-  }, [inviteRole, resolvedAssignableRoles]);
-
-  const organizationQuery = useQuery({
-    queryKey: ["auth-organization-details", activeOrganizationId],
-    enabled: Boolean(activeOrganizationId && canManageOrganization),
-    queryFn: async () => {
-      const { data, error } = await authClient.organization.getFullOrganization({
-        query: {
-          organizationId: activeOrganizationId,
-          membersLimit: 200,
-        },
-      });
-      if (error) {
-        throw new Error(error.message ?? resolvedLabels.loadError);
-      }
-      return data as OrganizationDetails | null;
-    },
-  });
-
-  const membersQuery = useQuery({
-    queryKey: ["auth-organization-members", activeOrganizationId],
-    enabled: Boolean(activeOrganizationId && canManageOrganization),
-    queryFn: async () => {
-      const { data, error } = await authClient.organization.listMembers({
-        query: {
-          organizationId: activeOrganizationId,
-          limit: 200,
-          offset: 0,
-        },
-      });
-      if (error) {
-        throw new Error(error.message ?? resolvedLabels.loadMembersError);
-      }
-      return ((data as { members: OrganizationMember[] } | null)?.members ??
-        []) as OrganizationMember[];
-    },
-  });
-
-  const invitationsQuery = useQuery({
-    queryKey: ["auth-organization-invitations", activeOrganizationId],
-    enabled: Boolean(activeOrganizationId && canManageOrganization),
-    queryFn: async () => {
-      const { data, error } = await authClient.organization.listInvitations({
-        query: {
-          organizationId: activeOrganizationId,
-        },
-      });
-      if (error) {
-        throw new Error(error.message ?? resolvedLabels.loadInvitationsError);
-      }
-      return (data ?? []) as OrganizationInvitation[];
-    },
-  });
-
-  const members = membersQuery.data ?? [];
-  const invitations = invitationsQuery.data ?? [];
-
-  const rows = useMemo<CombinedMemberRow[]>(() => {
-    const memberRows: CombinedMemberRow[] = members.map((member) => ({
-      kind: "member",
-      id: `member-${member.id}`,
-      displayName: member.user?.name || resolvedLabels.unknownName,
-      email: member.user?.email || "-",
-      role: member.role,
-      status: "active",
-      memberId: member.id,
-    }));
-
-    const invitationRows: CombinedMemberRow[] = invitations.map((invitation) => ({
-      kind: "invitation",
-      id: `invitation-${invitation.id}`,
-      displayName: resolvedLabels.invitedUser,
-      email: invitation.email,
-      role: invitation.role,
-      status: "invited",
-      invitationId: invitation.id,
-    }));
-
-    return [...memberRows, ...invitationRows].sort((left, right) => {
-      if (left.status === right.status) {
-        return left.email.localeCompare(right.email);
-      }
-      return left.status === "active" ? -1 : 1;
-    });
-  }, [invitations, members, resolvedLabels.invitedUser, resolvedLabels.unknownName]);
-
-  const onUpdateMemberRole = useCallback(
-    (memberId: string, role: OrganizationRole) => {
-      if (!canManageOrganization || !activeOrganizationId) return;
-      updateRoleMutation.mutate({ memberId, role, organizationId: activeOrganizationId });
-    },
-    [canManageOrganization, activeOrganizationId, updateRoleMutation]
-  );
-
-  const onRemoveMember = useCallback(
-    (memberId: string) => {
-      if (!canManageOrganization || !activeOrganizationId) return;
-      removeMemberMutation.mutate({ memberId, organizationId: activeOrganizationId });
-    },
-    [canManageOrganization, activeOrganizationId, removeMemberMutation]
-  );
-
-  const onCreateInvitation = useCallback(() => {
-    if (!canManageOrganization || !activeOrganizationId) return;
-    if (!inviteEmail.trim()) {
-      toast.error(resolvedLabels.emailRequired);
-      return;
-    }
-    createInvitationMutation.mutate({
-      email: inviteEmail,
-      role: inviteRole,
-      organizationId: activeOrganizationId,
-    });
-  }, [
-    canManageOrganization,
-    activeOrganizationId,
-    inviteEmail,
-    inviteRole,
-    resolvedLabels.emailRequired,
-    createInvitationMutation,
-  ]);
-
-  const onCancelInvitation = useCallback(
-    (invitationId: string) => {
-      if (!canManageOrganization) return;
-      cancelInvitationMutation.mutate({ invitationId });
-    },
-    [canManageOrganization, cancelInvitationMutation]
-  );
-
-  const invitationLinkBase = useMemo(() => {
-    const invitationPath = invitationAcceptPath ?? "/organization/accept-invitation";
-    if (/^https?:\/\//i.test(invitationPath)) {
-      return `${invitationPath}?id=`;
-    }
-    return typeof window === "undefined"
-      ? `${invitationPath}?id=`
-      : `${window.location.origin}${invitationPath}?id=`;
-  }, [invitationAcceptPath]);
-
-  const onCopyInvitationLink = async (invitationId: string) => {
-    try {
-      await navigator.clipboard.writeText(`${invitationLinkBase}${invitationId}`);
-      toast.success(resolvedLabels.inviteLinkCopied);
-    } catch {
-      toast.error(resolvedLabels.copyInviteLinkError);
-    }
-  };
-
-  const getRoleLabel = (role: string) => resolvedRoleLabels[role] ?? resolvedLabels.roleUnknown;
-
-  if (!activeOrganizationId) {
-    return (
-      <OrganizationStateCard
-        title={resolvedLabels.membersTitle}
-        message={resolvedLabels.membersNoActive}
-      />
-    );
-  }
-
-  if (!canManageOrganization) {
-    return (
-      <OrganizationStateCard
-        title={resolvedLabels.membersTitle}
-        message={resolvedLabels.membersManageOnly}
-      />
-    );
-  }
-
-  if (organizationQuery.isLoading || membersQuery.isLoading || invitationsQuery.isLoading) {
-    return (
-      <div className="p-6 flex justify-center">
-        <Spinner />
-      </div>
-    );
-  }
-
-  return (
-    <div className="p-6 space-y-6">
-      <Card>
-        <CardHeader className="flex items-center justify-between">
-          <div className="flex items-center gap-2">
-            <Users className="h-4 w-4" />
-            <div className="flex flex-col">
-              <h2 className="text-lg font-semibold">{resolvedLabels.membersTitle}</h2>
-              <p className="text-sm text-default-500">
-                {resolvedLabels.membersDescription(
-                  organizationQuery.data?.name ?? resolvedLabels.defaultOrganizationName
-                )}
-              </p>
-            </div>
-          </div>
-          <Chip variant="flat" color="primary">
-            {getRoleLabel(activeOrganizationRole || "member")}
-          </Chip>
-        </CardHeader>
-        <CardBody className="space-y-4">
-          <div className="grid gap-3 md:grid-cols-[1fr_160px_auto]">
-            <Input
-              type="email"
-              label={resolvedLabels.emailLabel}
-              value={inviteEmail}
-              onValueChange={setInviteEmail}
-              placeholder={resolvedLabels.emailPlaceholder}
-            />
-            <Select
-              label={resolvedLabels.roleLabel}
-              selectedKeys={[inviteRole]}
-              disallowEmptySelection
-              onSelectionChange={(keys) => {
-                const role = Array.from(keys as Set<string>)[0];
-                if (role && isOrganizationRole(role) && resolvedAssignableRoles.includes(role)) {
-                  setInviteRole(role);
-                }
-              }}
-            >
-              {resolvedAssignableRoles.map((role) => (
-                <SelectItem key={role}>{getRoleLabel(role)}</SelectItem>
-              ))}
-            </Select>
-            <Button
-              color="primary"
-              startContent={<UserPlus className="h-4 w-4" />}
-              onPress={onCreateInvitation}
-              isLoading={createInvitationMutation.isPending}
-            >
-              {resolvedLabels.inviteButton}
-            </Button>
-          </div>
-
-          <Table aria-label={resolvedLabels.tableTitle}>
-            <TableHeader>
-              <TableColumn>{resolvedLabels.columnName}</TableColumn>
-              <TableColumn>{resolvedLabels.columnEmail}</TableColumn>
-              <TableColumn>{resolvedLabels.columnRole}</TableColumn>
-              <TableColumn>{resolvedLabels.columnStatus}</TableColumn>
-              <TableColumn className="text-right">{resolvedLabels.columnActions}</TableColumn>
-            </TableHeader>
-            <TableBody emptyContent={resolvedLabels.tableEmpty}>
-              {rows.map((row) => (
-                <TableRow key={row.id}>
-                  <TableCell>{row.displayName}</TableCell>
-                  <TableCell>{row.email}</TableCell>
-                  <TableCell>
-                    {row.kind === "member" ? (
-                      <Select
-                        size="sm"
-                        selectedKeys={[row.role]}
-                        disallowEmptySelection
-                        isDisabled={updatingMemberId === row.memberId}
-                        aria-label={resolvedLabels.roleFor(row.displayName)}
-                        onSelectionChange={(keys) => {
-                          const role = Array.from(keys as Set<string>)[0];
-                          if (
-                            role &&
-                            role !== row.role &&
-                            isOrganizationRole(role) &&
-                            resolvedAssignableRoles.includes(role)
-                          ) {
-                            void onUpdateMemberRole(row.memberId, role);
-                          }
-                        }}
-                      >
-                        {resolvedAssignableRoles.map((role) => (
-                          <SelectItem key={role}>{getRoleLabel(role)}</SelectItem>
-                        ))}
-                      </Select>
-                    ) : (
-                      getRoleLabel(row.role)
-                    )}
-                  </TableCell>
-                  <TableCell>
-                    <Chip
-                      size="sm"
-                      variant="flat"
-                      color={row.status === "active" ? "success" : "warning"}
-                    >
-                      {row.status === "active"
-                        ? resolvedLabels.statusActive
-                        : resolvedLabels.statusInvited}
-                    </Chip>
-                  </TableCell>
-                  <TableCell className="text-right">
-                    {row.kind === "member" ? (
-                      <Button
-                        size="sm"
-                        color="danger"
-                        variant="light"
-                        isIconOnly
-                        onPress={() => void onRemoveMember(row.memberId)}
-                        isDisabled={removingMemberId === row.memberId}
-                        aria-label={resolvedLabels.removeMember}
-                      >
-                        <Trash2 className="h-4 w-4" />
-                      </Button>
-                    ) : (
-                      <div className="flex justify-end gap-2">
-                        <Button
-                          size="sm"
-                          variant="light"
-                          isIconOnly
-                          onPress={() => void onCopyInvitationLink(row.invitationId)}
-                          aria-label={resolvedLabels.copyInviteLink}
-                        >
-                          <Copy className="h-4 w-4" />
-                        </Button>
-                        <Button
-                          size="sm"
-                          color="danger"
-                          variant="light"
-                          isIconOnly
-                          onPress={() => void onCancelInvitation(row.invitationId)}
-                          isDisabled={cancelingInvitationId === row.invitationId}
-                          aria-label={resolvedLabels.cancelInvitation}
-                        >
-                          <Trash2 className="h-4 w-4" />
-                        </Button>
-                      </div>
-                    )}
-                  </TableCell>
-                </TableRow>
-              ))}
-            </TableBody>
-          </Table>
-        </CardBody>
-      </Card>
-    </div>
-  );
-}