fix(admin): restyle EditGroupsModal, filters, and groups cell

- Rewrite EditGroupsModal with Section/ContentAction layout primitives
- Add white subsection card with absolute bg pattern from Figma
- Use LineItem for all group entries with tint-01 background
- Add ShadowDiv scroll indicators to filter popovers and group lists
- Fix icon indentation in filter dropdowns (always provide fallback icon)
- Polish GroupsCell and UsersSummary

backend/onyx/db/users.py

@@ -11,6 +11,7 @@ from sqlalchemy.orm import Session
 from sqlalchemy.sql import expression
 from sqlalchemy.sql.elements import ColumnElement
 from sqlalchemy.sql.elements import KeyedColumnElement
+from sqlalchemy.sql.expression import or_
 
 from onyx.auth.invited_users import remove_user_from_invited_users
 from onyx.auth.schemas import UserRole
@@ -163,7 +164,13 @@ def _get_accepted_user_where_clause(
         where_clause.append(User.role != UserRole.EXT_PERM_USER)
 
     if email_filter_string is not None:
-        where_clause.append(email_col.ilike(f"%{email_filter_string}%"))
+        personal_name_col: KeyedColumnElement[Any] = User.__table__.c.personal_name
+        where_clause.append(
+            or_(
+                email_col.ilike(f"%{email_filter_string}%"),
+                personal_name_col.ilike(f"%{email_filter_string}%"),
+            )
+        )
 
     if roles_filter:
         where_clause.append(User.role.in_(roles_filter))
@@ -189,6 +196,15 @@ def get_all_accepted_users(
     return db_session.scalars(stmt).unique().all()
 
 
+_USER_SORTABLE_COLUMNS: dict[str, KeyedColumnElement[Any]] = {
+    "email": User.email,
+    "role": User.role,
+    "is_active": User.is_active,
+    "created_at": User.created_at,
+    "updated_at": User.updated_at,
+}
+
+
 def get_page_of_filtered_users(
     db_session: Session,
     page_size: int,
@@ -197,6 +213,8 @@ def get_page_of_filtered_users(
     is_active_filter: bool | None = None,
     roles_filter: list[UserRole] = [],
     include_external: bool = False,
+    sort_by: str | None = None,
+    sort_dir: str | None = None,
 ) -> Sequence[User]:
     users_stmt = select(User)
 
@@ -206,11 +224,19 @@ def get_page_of_filtered_users(
         include_external=include_external,
         is_active_filter=is_active_filter,
     )
-    # Apply pagination
-    users_stmt = users_stmt.offset((page_num) * page_size).limit(page_size)
     # Apply filtering
     users_stmt = users_stmt.where(*where_clause)
 
+    # Apply sorting
+    col = _USER_SORTABLE_COLUMNS.get(sort_by) if sort_by else None
+    if col is not None:
+        users_stmt = users_stmt.order_by(
+            col.desc() if sort_dir == "desc" else col.asc()
+        )
+
+    # Apply pagination
+    users_stmt = users_stmt.offset((page_num) * page_size).limit(page_size)
+
     return db_session.scalars(users_stmt).unique().all()
 
 
@@ -234,6 +260,36 @@ def get_total_filtered_users_count(
     return db_session.scalar(total_count_stmt) or 0
 
 
+def get_user_counts_by_role_and_status(
+    db_session: Session,
+) -> dict[str, dict[str, int]]:
+    """Returns user counts grouped by role and by active/inactive status.
+
+    Excludes API key users, anonymous users, and no-auth placeholder users.
+    """
+    base_where = _get_accepted_user_where_clause()
+
+    # Counts by role
+    role_col = User.__table__.c.role
+    role_stmt = select(role_col, func.count()).where(*base_where).group_by(role_col)
+    role_counts: dict[str, int] = {}
+    for role_val, count in db_session.execute(role_stmt).all():
+        key = role_val.value if hasattr(role_val, "value") else str(role_val)
+        role_counts[key] = count
+
+    # Counts by is_active
+    is_active_col = User.__table__.c.is_active
+    status_stmt = (
+        select(is_active_col, func.count()).where(*base_where).group_by(is_active_col)
+    )
+    status_counts: dict[str, int] = {}
+    for is_active_val, count in db_session.execute(status_stmt).all():
+        key = "active" if is_active_val else "inactive"
+        status_counts[key] = count
+
+    return {"role_counts": role_counts, "status_counts": status_counts}
+
+
 def get_user_by_email(email: str, db_session: Session) -> User | None:
     user = (
         db_session.query(User)

backend/onyx/llm/model_metadata_enrichments.json

@@ -3782,6 +3782,16 @@
     "display_name": "Claude Sonnet 3.5",
     "model_vendor": "anthropic"
   },
+  "vertex_ai/claude-3-5-sonnet-v2": {
+    "display_name": "Claude Sonnet 3.5",
+    "model_vendor": "anthropic",
+    "model_version": "v2"
+  },
+  "vertex_ai/claude-3-5-sonnet-v2@20241022": {
+    "display_name": "Claude Sonnet 3.5 v2",
+    "model_vendor": "anthropic",
+    "model_version": "20241022"
+  },
   "vertex_ai/claude-3-5-sonnet@20240620": {
     "display_name": "Claude Sonnet 3.5",
     "model_vendor": "anthropic",

backend/onyx/onyxbot/slack/constants.py

@@ -1,9 +1,5 @@
-import re
 from enum import Enum
 
-# Matches Slack channel references like <#C097NBWMY8Y> or <#C097NBWMY8Y|channel-name>
-SLACK_CHANNEL_REF_PATTERN = re.compile(r"<#([A-Z0-9]+)(?:\|([^>]+))?>")
-
 LIKE_BLOCK_ACTION_ID = "feedback-like"
 DISLIKE_BLOCK_ACTION_ID = "feedback-dislike"
 SHOW_EVERYONE_ACTION_ID = "show-everyone"

backend/onyx/onyxbot/slack/handlers/handle_regular_answer.py

@@ -18,18 +18,15 @@ from onyx.configs.onyxbot_configs import ONYX_BOT_DISPLAY_ERROR_MSGS
 from onyx.configs.onyxbot_configs import ONYX_BOT_NUM_RETRIES
 from onyx.configs.onyxbot_configs import ONYX_BOT_REACT_EMOJI
 from onyx.context.search.models import BaseFilters
-from onyx.context.search.models import Tag
 from onyx.db.engine.sql_engine import get_session_with_current_tenant
 from onyx.db.models import SlackChannelConfig
 from onyx.db.models import User
 from onyx.db.persona import get_persona_by_id
 from onyx.db.users import get_user_by_email
 from onyx.onyxbot.slack.blocks import build_slack_response_blocks
-from onyx.onyxbot.slack.constants import SLACK_CHANNEL_REF_PATTERN
 from onyx.onyxbot.slack.handlers.utils import send_team_member_message
 from onyx.onyxbot.slack.models import SlackMessageInfo
 from onyx.onyxbot.slack.models import ThreadMessage
-from onyx.onyxbot.slack.utils import get_channel_from_id
 from onyx.onyxbot.slack.utils import get_channel_name_from_id
 from onyx.onyxbot.slack.utils import respond_in_thread_or_channel
 from onyx.onyxbot.slack.utils import SlackRateLimiter
@@ -44,51 +41,6 @@ srl = SlackRateLimiter()
 RT = TypeVar("RT")  # return type
 
 
-def resolve_channel_references(
-    message: str,
-    client: WebClient,
-    logger: OnyxLoggingAdapter,
-) -> tuple[str, list[Tag]]:
-    """Parse Slack channel references from a message, resolve IDs to names,
-    replace the raw markup with readable #channel-name, and return channel tags
-    for search filtering."""
-    tags: list[Tag] = []
-    channel_matches = SLACK_CHANNEL_REF_PATTERN.findall(message)
-    seen_channel_ids: set[str] = set()
-
-    for channel_id, channel_name_from_markup in channel_matches:
-        if channel_id in seen_channel_ids:
-            continue
-        seen_channel_ids.add(channel_id)
-
-        channel_name = channel_name_from_markup or None
-
-        if not channel_name:
-            try:
-                channel_info = get_channel_from_id(client=client, channel_id=channel_id)
-                channel_name = channel_info.get("name") or None
-            except Exception:
-                logger.warning(f"Failed to resolve channel name for ID: {channel_id}")
-
-            if not channel_name:
-                continue
-
-        # Replace raw Slack markup with readable channel name
-        if channel_name_from_markup:
-            message = message.replace(
-                f"<#{channel_id}|{channel_name_from_markup}>",
-                f"#{channel_name}",
-            )
-        else:
-            message = message.replace(
-                f"<#{channel_id}>",
-                f"#{channel_name}",
-            )
-        tags.append(Tag(tag_key="Channel", tag_value=channel_name))
-
-    return message, tags
-
-
 def rate_limits(
     client: WebClient, channel: str, thread_ts: Optional[str]
 ) -> Callable[[Callable[..., RT]], Callable[..., RT]]:
@@ -205,20 +157,6 @@ def handle_regular_answer(
     user_message = messages[-1]
     history_messages = messages[:-1]
 
-    # Resolve any <#CHANNEL_ID> references in the user message to readable
-    # channel names and extract channel tags for search filtering
-    resolved_message, channel_tags = resolve_channel_references(
-        message=user_message.message,
-        client=client,
-        logger=logger,
-    )
-
-    user_message = ThreadMessage(
-        message=resolved_message,
-        sender=user_message.sender,
-        role=user_message.role,
-    )
-
     channel_name, _ = get_channel_name_from_id(
         client=client,
         channel_id=channel,
@@ -269,7 +207,6 @@ def handle_regular_answer(
             source_type=None,
             document_set=document_set_names,
             time_cutoff=None,
-            tags=channel_tags if channel_tags else None,
         )
 
         new_message_request = SendMessageRequest(
@@ -294,16 +231,6 @@ def handle_regular_answer(
             slack_context_str=slack_context_str,
         )
 
-        # If a channel filter was applied but no results were found, override
-        # the LLM response to avoid hallucinated answers about unindexed channels
-        if channel_tags and not answer.citation_info and not answer.top_documents:
-            channel_names = ", ".join(f"#{tag.tag_value}" for tag in channel_tags)
-            answer.answer = (
-                f"No indexed data found for {channel_names}. "
-                "This channel may not be indexed, or there may be no messages "
-                "matching your query within it."
-            )
-
     except Exception as e:
         logger.exception(
             f"Unable to process message - did not successfully answer "
@@ -358,7 +285,6 @@ def handle_regular_answer(
         only_respond_if_citations
         and not answer.citation_info
         and not message_info.bypass_filters
-        and not channel_tags
     ):
         logger.error(
             f"Unable to find citations to answer: '{answer.answer}' - not answering!"

backend/onyx/server/manage/users.py

@@ -5,6 +5,7 @@ from datetime import datetime
 from datetime import timedelta
 from datetime import timezone
 from typing import cast
+from uuid import UUID
 
 import jwt
 from email_validator import EmailNotValidError
@@ -18,6 +19,7 @@ from fastapi import Query
 from fastapi import Request
 from fastapi.responses import StreamingResponse
 from pydantic import BaseModel
+from sqlalchemy import select
 from sqlalchemy.orm import Session
 
 from onyx.auth.anonymous_user import fetch_anonymous_user_info
@@ -74,6 +76,7 @@ from onyx.db.users import get_all_users
 from onyx.db.users import get_page_of_filtered_users
 from onyx.db.users import get_total_filtered_users_count
 from onyx.db.users import get_user_by_email
+from onyx.db.users import get_user_counts_by_role_and_status
 from onyx.db.users import validate_user_role_update
 from onyx.key_value_store.factory import get_kv_store
 from onyx.redis.redis_pool import get_raw_redis_client
@@ -180,6 +183,8 @@ def list_accepted_users(
     page_size: int = Query(10, ge=1, le=1000),
     roles: list[UserRole] = Query(default=[]),
     is_active: bool | None = Query(default=None),
+    sort_by: str | None = Query(default=None),
+    sort_dir: str | None = Query(default=None),
     _: User = Depends(current_admin_user),
     db_session: Session = Depends(get_session),
 ) -> PaginatedReturn[FullUserSnapshot]:
@@ -190,6 +195,8 @@ def list_accepted_users(
         email_filter_string=q,
         is_active_filter=is_active,
         roles_filter=roles,
+        sort_by=sort_by,
+        sort_dir=sort_dir,
     )
 
     total_accepted_users_count = get_total_filtered_users_count(
@@ -209,6 +216,21 @@ def list_accepted_users(
     user_ids = [user.id for user in filtered_accepted_users]
     groups_by_user = batch_get_user_groups(db_session, user_ids)
 
+    # Batch-fetch SCIM mappings to mark synced users
+    scim_synced_ids: set[UUID] = set()
+    try:
+        from onyx.db.models import ScimUserMapping
+
+        scim_mappings = db_session.scalars(
+            select(ScimUserMapping.user_id).where(ScimUserMapping.user_id.in_(user_ids))
+        ).all()
+        scim_synced_ids = set(scim_mappings)
+    except Exception:
+        logger.warning(
+            "Failed to fetch SCIM mappings; marking all users as non-synced",
+            exc_info=True,
+        )
+
     return PaginatedReturn(
         items=[
             FullUserSnapshot.from_user_model(
@@ -217,6 +239,7 @@ def list_accepted_users(
                     UserGroupInfo(id=gid, name=gname)
                     for gid, gname in groups_by_user.get(user.id, [])
                 ],
+                is_scim_synced=user.id in scim_synced_ids,
             )
             for user in filtered_accepted_users
         ],
@@ -239,6 +262,21 @@ def list_all_accepted_users(
     user_ids = [user.id for user in users]
     groups_by_user = batch_get_user_groups(db_session, user_ids)
 
+    # Batch-fetch SCIM mappings to mark synced users
+    scim_synced_ids: set[UUID] = set()
+    try:
+        from onyx.db.models import ScimUserMapping
+
+        scim_mappings = db_session.scalars(
+            select(ScimUserMapping.user_id).where(ScimUserMapping.user_id.in_(user_ids))
+        ).all()
+        scim_synced_ids = set(scim_mappings)
+    except Exception:
+        logger.warning(
+            "Failed to fetch SCIM mappings; marking all users as non-synced",
+            exc_info=True,
+        )
+
     return [
         FullUserSnapshot.from_user_model(
             user,
@@ -246,11 +284,20 @@ def list_all_accepted_users(
                 UserGroupInfo(id=gid, name=gname)
                 for gid, gname in groups_by_user.get(user.id, [])
             ],
+            is_scim_synced=user.id in scim_synced_ids,
         )
         for user in users
     ]
 
 
+@router.get("/manage/users/counts")
+def get_user_counts(
+    _: User = Depends(current_admin_user),
+    db_session: Session = Depends(get_session),
+) -> dict[str, dict[str, int]]:
+    return get_user_counts_by_role_and_status(db_session)
+
+
 @router.get("/manage/users/invited", tags=PUBLIC_API_TAGS)
 def list_invited_users(
     _: User = Depends(current_admin_user),

backend/onyx/server/models.py

@@ -47,12 +47,14 @@ class FullUserSnapshot(BaseModel):
     created_at: datetime.datetime
     updated_at: datetime.datetime
     groups: list[UserGroupInfo]
+    is_scim_synced: bool
 
     @classmethod
     def from_user_model(
         cls,
         user: User,
         groups: list[UserGroupInfo] | None = None,
+        is_scim_synced: bool = False,
     ) -> "FullUserSnapshot":
         return cls(
             id=user.id,
@@ -64,6 +66,7 @@ class FullUserSnapshot(BaseModel):
             created_at=user.created_at,
             updated_at=user.updated_at,
             groups=groups or [],
+            is_scim_synced=is_scim_synced,
         )
 
 

backend/tests/unit/onyx/onyxbot/test_handle_regular_answer.py

@@ -1,204 +0,0 @@
-"""Tests for Slack channel reference resolution and tag filtering
-in handle_regular_answer.py."""
-
-from unittest.mock import MagicMock
-
-from slack_sdk.errors import SlackApiError
-
-from onyx.context.search.models import Tag
-from onyx.onyxbot.slack.constants import SLACK_CHANNEL_REF_PATTERN
-from onyx.onyxbot.slack.handlers.handle_regular_answer import resolve_channel_references
-
-
-# ---------------------------------------------------------------------------
-# Helpers
-# ---------------------------------------------------------------------------
-
-
-def _mock_client_with_channels(
-    channel_map: dict[str, str],
-) -> MagicMock:
-    """Return a mock WebClient where conversations_info resolves IDs to names."""
-    client = MagicMock()
-
-    def _conversations_info(channel: str) -> MagicMock:
-        if channel in channel_map:
-            resp = MagicMock()
-            resp.validate = MagicMock()
-            resp.__getitem__ = lambda _self, key: {
-                "channel": {
-                    "name": channel_map[channel],
-                    "is_im": False,
-                    "is_mpim": False,
-                }
-            }[key]
-            return resp
-        raise SlackApiError("channel_not_found", response=MagicMock())
-
-    client.conversations_info = _conversations_info
-    return client
-
-
-def _mock_logger() -> MagicMock:
-    return MagicMock()
-
-
-# ---------------------------------------------------------------------------
-# SLACK_CHANNEL_REF_PATTERN regex tests
-# ---------------------------------------------------------------------------
-
-
-class TestSlackChannelRefPattern:
-    def test_matches_bare_channel_id(self) -> None:
-        matches = SLACK_CHANNEL_REF_PATTERN.findall("<#C097NBWMY8Y>")
-        assert matches == [("C097NBWMY8Y", "")]
-
-    def test_matches_channel_id_with_name(self) -> None:
-        matches = SLACK_CHANNEL_REF_PATTERN.findall("<#C097NBWMY8Y|eng-infra>")
-        assert matches == [("C097NBWMY8Y", "eng-infra")]
-
-    def test_matches_multiple_channels(self) -> None:
-        msg = "compare <#C111AAA> and <#C222BBB|general>"
-        matches = SLACK_CHANNEL_REF_PATTERN.findall(msg)
-        assert len(matches) == 2
-        assert ("C111AAA", "") in matches
-        assert ("C222BBB", "general") in matches
-
-    def test_no_match_on_plain_text(self) -> None:
-        matches = SLACK_CHANNEL_REF_PATTERN.findall("no channels here")
-        assert matches == []
-
-    def test_no_match_on_user_mention(self) -> None:
-        matches = SLACK_CHANNEL_REF_PATTERN.findall("<@U12345>")
-        assert matches == []
-
-
-# ---------------------------------------------------------------------------
-# resolve_channel_references tests
-# ---------------------------------------------------------------------------
-
-
-class TestResolveChannelReferences:
-    def test_resolves_bare_channel_id_via_api(self) -> None:
-        client = _mock_client_with_channels({"C097NBWMY8Y": "eng-infra"})
-        logger = _mock_logger()
-
-        message, tags = resolve_channel_references(
-            message="summary of <#C097NBWMY8Y> this week",
-            client=client,
-            logger=logger,
-        )
-
-        assert message == "summary of #eng-infra this week"
-        assert len(tags) == 1
-        assert tags[0] == Tag(tag_key="Channel", tag_value="eng-infra")
-
-    def test_uses_name_from_pipe_format_without_api_call(self) -> None:
-        client = MagicMock()
-        logger = _mock_logger()
-
-        message, tags = resolve_channel_references(
-            message="check <#C097NBWMY8Y|eng-infra> for updates",
-            client=client,
-            logger=logger,
-        )
-
-        assert message == "check #eng-infra for updates"
-        assert tags == [Tag(tag_key="Channel", tag_value="eng-infra")]
-        # Should NOT have called the API since name was in the markup
-        client.conversations_info.assert_not_called()
-
-    def test_multiple_channels(self) -> None:
-        client = _mock_client_with_channels(
-            {
-                "C111AAA": "eng-infra",
-                "C222BBB": "eng-general",
-            }
-        )
-        logger = _mock_logger()
-
-        message, tags = resolve_channel_references(
-            message="compare <#C111AAA> and <#C222BBB>",
-            client=client,
-            logger=logger,
-        )
-
-        assert "#eng-infra" in message
-        assert "#eng-general" in message
-        assert "<#" not in message
-        assert len(tags) == 2
-        tag_values = {t.tag_value for t in tags}
-        assert tag_values == {"eng-infra", "eng-general"}
-
-    def test_no_channel_references_returns_unchanged(self) -> None:
-        client = MagicMock()
-        logger = _mock_logger()
-
-        message, tags = resolve_channel_references(
-            message="just a normal message with no channels",
-            client=client,
-            logger=logger,
-        )
-
-        assert message == "just a normal message with no channels"
-        assert tags == []
-
-    def test_api_failure_skips_channel_gracefully(self) -> None:
-        # Client that fails for all channel lookups
-        client = _mock_client_with_channels({})
-        logger = _mock_logger()
-
-        message, tags = resolve_channel_references(
-            message="check <#CBADID123>",
-            client=client,
-            logger=logger,
-        )
-
-        # Message should remain unchanged for the failed channel
-        assert "<#CBADID123>" in message
-        assert tags == []
-        logger.warning.assert_called_once()
-
-    def test_partial_failure_resolves_what_it_can(self) -> None:
-        # Only one of two channels resolves
-        client = _mock_client_with_channels({"C111AAA": "eng-infra"})
-        logger = _mock_logger()
-
-        message, tags = resolve_channel_references(
-            message="compare <#C111AAA> and <#CBADID123>",
-            client=client,
-            logger=logger,
-        )
-
-        assert "#eng-infra" in message
-        assert "<#CBADID123>" in message  # failed one stays raw
-        assert len(tags) == 1
-        assert tags[0].tag_value == "eng-infra"
-
-    def test_duplicate_channel_produces_single_tag(self) -> None:
-        client = _mock_client_with_channels({"C111AAA": "eng-infra"})
-        logger = _mock_logger()
-
-        message, tags = resolve_channel_references(
-            message="summarize <#C111AAA> and compare with <#C111AAA>",
-            client=client,
-            logger=logger,
-        )
-
-        assert message == "summarize #eng-infra and compare with #eng-infra"
-        assert len(tags) == 1
-        assert tags[0].tag_value == "eng-infra"
-
-    def test_mixed_pipe_and_bare_formats(self) -> None:
-        client = _mock_client_with_channels({"C222BBB": "random"})
-        logger = _mock_logger()
-
-        message, tags = resolve_channel_references(
-            message="see <#C111AAA|eng-infra> and <#C222BBB>",
-            client=client,
-            logger=logger,
-        )
-
-        assert "#eng-infra" in message
-        assert "#random" in message
-        assert len(tags) == 2

web/jest.config.js

@@ -143,6 +143,7 @@ module.exports = {
         "**/src/app/**/utils/*.test.ts",
         "**/src/app/**/hooks/*.test.ts", // Pure packet processor tests
         "**/src/refresh-components/**/*.test.ts",
+        "**/src/refresh-pages/**/*.test.ts",
         "**/src/sections/**/*.test.ts",
         "**/src/components/**/*.test.ts",
         // Add more patterns here as you add more unit tests

web/lib/opal/src/components/buttons/open-button/components.tsx

@@ -55,7 +55,7 @@ type OpenButtonContentProps =
       children?: string;
     };
 
-type OpenButtonProps = Omit<InteractiveStatefulProps, "variant"> &
+type OpenButtonProps = InteractiveStatefulProps &
   OpenButtonContentProps & {
     /**
      * Size preset — controls gap, text size, and Container height/rounding.
@@ -65,6 +65,13 @@ type OpenButtonProps = Omit<InteractiveStatefulProps, "variant"> &
     /** Width preset. */
     width?: WidthVariant;
 
+    /**
+     * Content justify mode. When `"between"`, icon+label group left and
+     * chevron pushes to the right edge. Default keeps all items in a
+     * tight `gap-1` row.
+     */
+    justifyContent?: "between";
+
     /** Tooltip text shown on hover. */
     tooltip?: string;
 
@@ -82,9 +89,11 @@ function OpenButton({
   size = "lg",
   foldable,
   width,
+  justifyContent,
   tooltip,
   tooltipSide = "top",
   interaction,
+  variant = "select-heavy",
   ...statefulProps
 }: OpenButtonProps) {
   const { isDisabled } = useDisabled();
@@ -111,7 +120,7 @@ function OpenButton({
 
   const button = (
     <Interactive.Stateful
-      variant="select-heavy"
+      variant={variant}
       interaction={resolvedInteraction}
       {...statefulProps}
     >
@@ -125,19 +134,30 @@ function OpenButton({
       >
         <div
           className={cn(
-            "opal-button interactive-foreground flex flex-row items-center gap-1",
+            "opal-button interactive-foreground flex flex-row items-center",
+            justifyContent === "between" ? "w-full justify-between" : "gap-1",
             foldable && "interactive-foldable-host"
           )}
         >
-          {iconWrapper(Icon, size, !foldable && !!children)}
-
-          {foldable ? (
-            <Interactive.Foldable>
-              {labelEl}
+          {justifyContent === "between" ? (
+            <>
+              <span className="flex flex-row items-center gap-1">
+                {iconWrapper(Icon, size, !foldable && !!children)}
+                {labelEl}
+              </span>
               {iconWrapper(ChevronIcon, size, !!children)}
-            </Interactive.Foldable>
+            </>
+          ) : foldable ? (
+            <>
+              {iconWrapper(Icon, size, !foldable && !!children)}
+              <Interactive.Foldable>
+                {labelEl}
+                {iconWrapper(ChevronIcon, size, !!children)}
+              </Interactive.Foldable>
+            </>
           ) : (
             <>
+              {iconWrapper(Icon, size, !foldable && !!children)}
               {labelEl}
               {iconWrapper(ChevronIcon, size, !!children)}
             </>

web/lib/opal/src/components/tag/components.tsx

@@ -9,6 +9,8 @@ import { cn } from "@opal/utils";
 
 type TagColor = "green" | "purple" | "blue" | "gray" | "amber";
 
+type TagSize = "sm" | "md";
+
 interface TagProps {
   /** Optional icon component. */
   icon?: IconFunctionComponent;
@@ -18,6 +20,9 @@ interface TagProps {
 
   /** Color variant. Default: `"gray"`. */
   color?: TagColor;
+
+  /** Size variant. Default: `"sm"`. */
+  size?: TagSize;
 }
 
 // ---------------------------------------------------------------------------
@@ -36,11 +41,11 @@ const COLOR_CONFIG: Record<TagColor, { bg: string; text: string }> = {
 // Tag
 // ---------------------------------------------------------------------------
 
-function Tag({ icon: Icon, title, color = "gray" }: TagProps) {
+function Tag({ icon: Icon, title, color = "gray", size = "sm" }: TagProps) {
   const config = COLOR_CONFIG[color];
 
   return (
-    <div className={cn("opal-auxiliary-tag", config.bg)}>
+    <div className={cn("opal-auxiliary-tag", config.bg)} data-size={size}>
       {Icon && (
         <div className="opal-auxiliary-tag-icon-container">
           <Icon className={cn("opal-auxiliary-tag-icon", config.text)} />
@@ -48,7 +53,8 @@ function Tag({ icon: Icon, title, color = "gray" }: TagProps) {
       )}
       <span
         className={cn(
-          "opal-auxiliary-tag-title px-[2px] font-figure-small-value",
+          "opal-auxiliary-tag-title px-[2px]",
+          size === "md" ? "font-secondary-body" : "font-figure-small-value",
           config.text
         )}
       >
@@ -58,4 +64,4 @@ function Tag({ icon: Icon, title, color = "gray" }: TagProps) {
   );
 }
 
-export { Tag, type TagProps, type TagColor };
+export { Tag, type TagProps, type TagColor, type TagSize };

web/lib/opal/src/components/tag/styles.css

@@ -13,6 +13,12 @@
   gap: 0;
 }
 
+.opal-auxiliary-tag[data-size="md"] {
+  height: 1.375rem;
+  padding: 0 0.375rem;
+  border-radius: 0.375rem;
+}
+
 .opal-auxiliary-tag-icon-container {
   display: flex;
   align-items: center;

web/lib/opal/src/core/interactive/stateful/components.tsx

@@ -10,7 +10,11 @@ import type { WithoutStyles } from "@opal/types";
 // Types
 // ---------------------------------------------------------------------------
 
-type InteractiveStatefulVariant = "select-light" | "select-heavy" | "sidebar";
+type InteractiveStatefulVariant =
+  | "select-light"
+  | "select-heavy"
+  | "select-tinted"
+  | "sidebar";
 type InteractiveStatefulState = "empty" | "filled" | "selected";
 type InteractiveStatefulInteraction = "rest" | "hover" | "active";
 

web/lib/opal/src/core/interactive/stateful/styles.css

@@ -211,6 +211,22 @@
   --interactive-foreground-icon: var(--action-link-03);
 }
 
+/* Select-Tinted — Select-Heavy with tinted rest background */
+.interactive[data-interactive-variant="select-tinted"] {
+  @apply bg-background-tint-01;
+  --interactive-foreground: var(--text-04);
+  --interactive-foreground-icon: var(--text-03);
+}
+.interactive[data-interactive-variant="select-tinted"]:hover:not(
+    [data-disabled]
+  ),
+.interactive[data-interactive-variant="select-tinted"][data-interaction="hover"]:not(
+    [data-disabled]
+  ) {
+  @apply bg-background-tint-02;
+  --interactive-foreground-icon: var(--text-04);
+}
+
 /* ===========================================================================
    Sidebar
    =========================================================================== */

web/lib/opal/src/icons/filter-plus.tsx

@@ -0,0 +1,21 @@
+import type { IconProps } from "@opal/types";
+
+const SvgFilterPlus = ({ size, ...props }: IconProps) => (
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    stroke="currentColor"
+    {...props}
+  >
+    <path
+      d="M9.5 12.5L6.83334 11.1667V7.80667L1.5 1.5H14.8333L12.1667 4.65333M12.1667 7V9.5M12.1667 9.5V12M12.1667 9.5H9.66667M12.1667 9.5H14.6667"
+      strokeWidth={1.5}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+export default SvgFilterPlus;

web/lib/opal/src/icons/index.ts

@@ -72,6 +72,7 @@ export { default as SvgFileChartPie } from "@opal/icons/file-chart-pie";
 export { default as SvgFileSmall } from "@opal/icons/file-small";
 export { default as SvgFileText } from "@opal/icons/file-text";
 export { default as SvgFilter } from "@opal/icons/filter";
+export { default as SvgFilterPlus } from "@opal/icons/filter-plus";
 export { default as SvgFold } from "@opal/icons/fold";
 export { default as SvgFolder } from "@opal/icons/folder";
 export { default as SvgFolderIn } from "@opal/icons/folder-in";

web/lib/opal/src/layouts/content/ContentMd.tsx

@@ -8,8 +8,65 @@ import SvgAlertTriangle from "@opal/icons/alert-triangle";
 import SvgEdit from "@opal/icons/edit";
 import SvgXOctagon from "@opal/icons/x-octagon";
 import type { IconFunctionComponent } from "@opal/types";
+import "@opal/components/tooltip.css";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 import { cn } from "@opal/utils";
-import { useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
+
+// ---------------------------------------------------------------------------
+// Overflow tooltip helper
+// ---------------------------------------------------------------------------
+
+/** Returns a ref + boolean indicating whether the element's text is clipped. */
+function useIsOverflowing<T extends HTMLElement>() {
+  const ref = useRef<T>(null);
+  const [overflowing, setOverflowing] = useState(false);
+
+  const check = useCallback(() => {
+    const el = ref.current;
+    if (!el) return;
+    setOverflowing(el.scrollWidth > el.clientWidth);
+  }, []);
+
+  useEffect(() => {
+    check();
+    window.addEventListener("resize", check);
+    return () => window.removeEventListener("resize", check);
+  }, [check]);
+
+  return { ref, overflowing, check };
+}
+
+/**
+ * Wraps children in a Radix tooltip that only appears when the element is
+ * overflowing (text truncated). Uses the same opal-tooltip styling as Button.
+ */
+function OverflowTooltip({
+  text,
+  overflowing,
+  children,
+}: {
+  text: string;
+  overflowing: boolean;
+  children: React.ReactNode;
+}) {
+  if (!overflowing) return children;
+
+  return (
+    <TooltipPrimitive.Root>
+      <TooltipPrimitive.Trigger asChild>{children}</TooltipPrimitive.Trigger>
+      <TooltipPrimitive.Portal>
+        <TooltipPrimitive.Content
+          className="opal-tooltip"
+          side="top"
+          sideOffset={4}
+        >
+          {text}
+        </TooltipPrimitive.Content>
+      </TooltipPrimitive.Portal>
+    </TooltipPrimitive.Root>
+  );
+}
 
 // ---------------------------------------------------------------------------
 // Types
@@ -142,6 +199,8 @@ function ContentMd({
   const [editing, setEditing] = useState(false);
   const [editValue, setEditValue] = useState(title);
   const inputRef = useRef<HTMLInputElement>(null);
+  const titleOverflow = useIsOverflowing<HTMLSpanElement>();
+  const descOverflow = useIsOverflowing<HTMLDivElement>();
 
   const config = CONTENT_MD_PRESETS[sizePreset];
 
@@ -211,18 +270,24 @@ function ContentMd({
               />
             </div>
           ) : (
-            <span
-              className={cn(
-                "opal-content-md-title",
-                config.titleFont,
-                "text-text-04",
-                editable && "cursor-pointer"
-              )}
-              onClick={editable ? startEditing : undefined}
-              style={{ height: config.lineHeight }}
+            <OverflowTooltip
+              text={title}
+              overflowing={titleOverflow.overflowing}
             >
-              {title}
-            </span>
+              <span
+                ref={titleOverflow.ref}
+                className={cn(
+                  "opal-content-md-title",
+                  config.titleFont,
+                  "text-text-04",
+                  editable && "cursor-pointer"
+                )}
+                onClick={editable ? startEditing : undefined}
+                style={{ height: config.lineHeight }}
+              >
+                {title}
+              </span>
+            </OverflowTooltip>
           )}
 
           {optional && (
@@ -275,9 +340,17 @@ function ContentMd({
         </div>
 
         {description && (
-          <div className="opal-content-md-description font-secondary-body text-text-03">
-            {description}
-          </div>
+          <OverflowTooltip
+            text={description}
+            overflowing={descOverflow.overflowing}
+          >
+            <div
+              ref={descOverflow.ref}
+              className="opal-content-md-description font-secondary-body text-text-03"
+            >
+              {description}
+            </div>
+          </OverflowTooltip>
         )}
       </div>
     </div>

web/lib/opal/src/layouts/content/styles.css

@@ -224,7 +224,7 @@
    --------------------------------------------------------------------------- */
 
 .opal-content-md {
-  @apply flex flex-row items-start;
+  @apply flex flex-row items-start min-w-0;
 }
 
 /* ---------------------------------------------------------------------------
@@ -311,7 +311,7 @@
    --------------------------------------------------------------------------- */
 
 .opal-content-md-description {
-  @apply text-left w-full;
+  @apply text-left w-full truncate;
   padding: 0 0.125rem;
 }
 

web/src/hooks/useAdminUsers.ts

@@ -0,0 +1,118 @@
+"use client";
+
+import useSWR from "swr";
+import { errorHandlingFetcher } from "@/lib/fetcher";
+import { NEXT_PUBLIC_CLOUD_ENABLED } from "@/lib/constants";
+import { UserStatus } from "@/lib/types";
+import type { UserRole, InvitedUserSnapshot } from "@/lib/types";
+import type {
+  UserRow,
+  UserGroupInfo,
+} from "@/refresh-pages/admin/UsersPage/interfaces";
+
+// ---------------------------------------------------------------------------
+// Backend response shape (GET /manage/users/accepted/all)
+// ---------------------------------------------------------------------------
+
+interface FullUserSnapshot {
+  id: string;
+  email: string;
+  role: UserRole;
+  is_active: boolean;
+  password_configured: boolean;
+  personal_name: string | null;
+  created_at: string;
+  updated_at: string;
+  groups: UserGroupInfo[];
+  is_scim_synced: boolean;
+}
+
+// ---------------------------------------------------------------------------
+// Converters
+// ---------------------------------------------------------------------------
+
+function toUserRow(snapshot: FullUserSnapshot): UserRow {
+  return {
+    id: snapshot.id,
+    email: snapshot.email,
+    role: snapshot.role,
+    status: snapshot.is_active ? UserStatus.ACTIVE : UserStatus.INACTIVE,
+    is_active: snapshot.is_active,
+    is_scim_synced: snapshot.is_scim_synced,
+    personal_name: snapshot.personal_name,
+    created_at: snapshot.created_at,
+    updated_at: snapshot.updated_at,
+    groups: snapshot.groups,
+  };
+}
+
+function emailToUserRow(
+  email: string,
+  status: UserStatus.INVITED | UserStatus.REQUESTED
+): UserRow {
+  return {
+    id: null,
+    email,
+    role: null,
+    status,
+    is_active: false,
+    is_scim_synced: false,
+    personal_name: null,
+    created_at: null,
+    updated_at: null,
+    groups: [],
+  };
+}
+
+// ---------------------------------------------------------------------------
+// Hook
+// ---------------------------------------------------------------------------
+
+export default function useAdminUsers() {
+  const {
+    data: acceptedData,
+    isLoading: acceptedLoading,
+    mutate: acceptedMutate,
+  } = useSWR<FullUserSnapshot[]>(
+    "/api/manage/users/accepted/all",
+    errorHandlingFetcher
+  );
+
+  const {
+    data: invitedData,
+    isLoading: invitedLoading,
+    mutate: invitedMutate,
+  } = useSWR<InvitedUserSnapshot[]>(
+    "/api/manage/users/invited",
+    errorHandlingFetcher
+  );
+
+  const {
+    data: requestedData,
+    isLoading: requestedLoading,
+    mutate: requestedMutate,
+  } = useSWR<InvitedUserSnapshot[]>(
+    NEXT_PUBLIC_CLOUD_ENABLED ? "/api/tenants/users/pending" : null,
+    errorHandlingFetcher
+  );
+
+  const acceptedRows = (acceptedData ?? []).map(toUserRow);
+  const invitedRows = (invitedData ?? []).map((u) =>
+    emailToUserRow(u.email, UserStatus.INVITED)
+  );
+  const requestedRows = (requestedData ?? []).map((u) =>
+    emailToUserRow(u.email, UserStatus.REQUESTED)
+  );
+
+  const users = [...invitedRows, ...requestedRows, ...acceptedRows];
+
+  const isLoading = acceptedLoading || invitedLoading || requestedLoading;
+
+  function refresh() {
+    acceptedMutate();
+    invitedMutate();
+    requestedMutate();
+  }
+
+  return { users, isLoading, refresh };
+}

web/src/hooks/useUserCounts.ts

@@ -5,22 +5,26 @@ import { errorHandlingFetcher } from "@/lib/fetcher";
 import type { InvitedUserSnapshot } from "@/lib/types";
 import { NEXT_PUBLIC_CLOUD_ENABLED } from "@/lib/constants";
 
-type PaginatedCountResponse = {
-  total_items: number;
+type UserCountsResponse = {
+  role_counts: Record<string, number>;
+  status_counts: Record<string, number>;
 };
 
 type UserCounts = {
   activeCount: number | null;
   invitedCount: number | null;
   pendingCount: number | null;
+  roleCounts: Record<string, number>;
+  statusCounts: Record<string, number>;
+  refreshCounts: () => void;
 };
 
 export default function useUserCounts(): UserCounts {
-  // Active user count — lightweight fetch (page_size=1 to minimize payload)
-  const { data: activeData } = useSWR<PaginatedCountResponse>(
-    "/api/manage/users/accepted?page_num=0&page_size=1",
-    errorHandlingFetcher
-  );
+  const { data: countsData, mutate: refreshCounts } =
+    useSWR<UserCountsResponse>(
+      "/api/manage/users/counts",
+      errorHandlingFetcher
+    );
 
   const { data: invitedUsers } = useSWR<InvitedUserSnapshot[]>(
     "/api/manage/users/invited",
@@ -32,9 +36,20 @@ export default function useUserCounts(): UserCounts {
     errorHandlingFetcher
   );
 
+  const activeCount = countsData?.status_counts?.active ?? null;
+  const inactiveCount = countsData?.status_counts?.inactive ?? null;
+
   return {
-    activeCount: activeData?.total_items ?? null,
+    activeCount,
     invitedCount: invitedUsers?.length ?? null,
     pendingCount: pendingUsers?.length ?? null,
+    roleCounts: countsData?.role_counts ?? {},
+    statusCounts: {
+      ...(activeCount !== null ? { active: activeCount } : {}),
+      ...(inactiveCount !== null ? { inactive: inactiveCount } : {}),
+      ...(invitedUsers ? { invited: invitedUsers.length } : {}),
+      ...(pendingUsers ? { requested: pendingUsers.length } : {}),
+    } as Record<string, number>,
+    refreshCounts,
   };
 }

web/src/lib/types.ts

@@ -68,6 +68,20 @@ export const USER_ROLE_LABELS: Record<UserRole, string> = {
   [UserRole.SLACK_USER]: "Slack User",
 };
 
+export enum UserStatus {
+  ACTIVE = "active",
+  INACTIVE = "inactive",
+  INVITED = "invited",
+  REQUESTED = "requested",
+}
+
+export const USER_STATUS_LABELS: Record<UserStatus, string> = {
+  [UserStatus.ACTIVE]: "Active",
+  [UserStatus.INACTIVE]: "Inactive",
+  [UserStatus.INVITED]: "Invite Pending",
+  [UserStatus.REQUESTED]: "Request to Join",
+};
+
 export const INVALID_ROLE_HOVER_TEXT: Partial<Record<UserRole, string>> = {
   [UserRole.BASIC]: "Basic users can't perform any admin actions",
   [UserRole.ADMIN]: "Admin users can perform all admin actions",

web/src/refresh-components/Chip.tsx

@@ -6,6 +6,9 @@ import type { IconProps } from "@opal/types";
 export interface ChipProps {
   children?: string;
   icon?: React.FunctionComponent<IconProps>;
+  /** Icon rendered after the label (e.g. a warning indicator) */
+  rightIcon?: React.FunctionComponent<IconProps>;
+  rightIconClassName?: string;
   onRemove?: () => void;
   smallLabel?: boolean;
 }
@@ -24,6 +27,8 @@ export interface ChipProps {
 export default function Chip({
   children,
   icon: Icon,
+  rightIcon: RightIcon,
+  rightIconClassName,
   onRemove,
   smallLabel = true,
 }: ChipProps) {
@@ -35,6 +40,9 @@ export default function Chip({
           {children}
         </Text>
       )}
+      {RightIcon && (
+        <RightIcon size={14} className={rightIconClassName ?? "text-text-03"} />
+      )}
       {onRemove && (
         <Button
           onClick={(e) => {

web/src/refresh-components/inputs/InputChipField.tsx

@@ -9,11 +9,14 @@ import {
   Variants,
   wrapperClasses,
 } from "@/refresh-components/inputs/styles";
+import { SvgAlertTriangle } from "@opal/icons";
 import type { IconProps } from "@opal/types";
 
 export interface ChipItem {
   id: string;
   label: string;
+  /** When true the chip shows a warning icon */
+  error?: boolean;
 }
 
 export interface InputChipFieldProps {
@@ -88,36 +91,46 @@ function InputChipField({
   return (
     <div
       className={cn(
-        "flex flex-row items-center flex-wrap gap-1 p-1.5 rounded-08 cursor-text w-full",
+        "flex flex-col gap-1 p-1.5 rounded-08 cursor-text w-full",
         wrapperClasses[variant],
         className
       )}
       onClick={() => inputRef.current?.focus()}
     >
-      {Icon && <Icon size={16} className="text-text-04 shrink-0" />}
-      {chips.map((chip) => (
-        <Chip
-          key={chip.id}
-          onRemove={disabled ? undefined : () => onRemoveChip(chip.id)}
-          smallLabel={false}
-        >
-          {chip.label}
-        </Chip>
-      ))}
-      <input
-        ref={inputRef}
-        type="text"
-        disabled={disabled}
-        value={value}
-        onChange={(e) => onChange(e.target.value)}
-        onKeyDown={handleKeyDown}
-        placeholder={chips.length === 0 ? placeholder : undefined}
-        className={cn(
-          "flex-1 min-w-[80px] h-[1.5rem] bg-transparent p-0.5 focus:outline-none",
-          innerClasses[variant],
-          textClasses[variant]
-        )}
-      />
+      {chips.length > 0 && (
+        <div className="flex flex-row items-center flex-wrap gap-1">
+          {chips.map((chip) => (
+            <Chip
+              key={chip.id}
+              onRemove={disabled ? undefined : () => onRemoveChip(chip.id)}
+              rightIcon={chip.error ? SvgAlertTriangle : undefined}
+              rightIconClassName={
+                chip.error ? "text-status-warning-text" : undefined
+              }
+              smallLabel={false}
+            >
+              {chip.label}
+            </Chip>
+          ))}
+        </div>
+      )}
+      <div className="flex flex-row items-center gap-1">
+        {Icon && <Icon size={16} className="text-text-04 shrink-0" />}
+        <input
+          ref={inputRef}
+          type="text"
+          disabled={disabled}
+          value={value}
+          onChange={(e) => onChange(e.target.value)}
+          onKeyDown={handleKeyDown}
+          placeholder={placeholder}
+          className={cn(
+            "flex-1 min-w-[80px] h-[1.5rem] bg-transparent p-0.5 focus:outline-none",
+            innerClasses[variant],
+            textClasses[variant]
+          )}
+        />
+      </div>
     </div>
   );
 }

web/src/refresh-components/table/DataTable.tsx

@@ -273,6 +273,7 @@ export default function DataTable<TData>(props: DataTableProps<TData>) {
         currentPage={currentPage}
         totalPages={totalPages}
         onPageChange={setPage}
+        leftExtra={footerConfig.leftExtra}
       />
     );
   }
@@ -301,7 +302,25 @@ export default function DataTable<TData>(props: DataTableProps<TData>) {
               : undefined),
           }}
         >
-          <Table>
+          <Table
+            width={
+              Object.keys(columnWidths).length > 0
+                ? Object.values(columnWidths).reduce((sum, w) => sum + w, 0)
+                : undefined
+            }
+          >
+            <colgroup>
+              {table.getAllLeafColumns().map((col) => (
+                <col
+                  key={col.id}
+                  style={
+                    columnWidths[col.id] != null
+                      ? { width: columnWidths[col.id] }
+                      : undefined
+                  }
+                />
+              ))}
+            </colgroup>
             <TableHeader>
               {table.getHeaderGroups().map((headerGroup) => (
                 <TableRow key={headerGroup.id}>

web/src/refresh-components/table/Footer.tsx

@@ -61,6 +61,8 @@ interface FooterSummaryModeProps {
   totalPages: number;
   /** Called when the user navigates to a different page. */
   onPageChange: (page: number) => void;
+  /** Optional extra element rendered after the summary text (e.g. a download icon). */
+  leftExtra?: React.ReactNode;
   /** Controls overall footer sizing. `"regular"` (default) or `"small"`. */
   size?: TableSize;
   className?: string;
@@ -115,12 +117,15 @@ export default function Footer(props: FooterProps) {
             isSmall={isSmall}
           />
         ) : (
-          <SummaryLeft
-            rangeStart={props.rangeStart}
-            rangeEnd={props.rangeEnd}
-            totalItems={props.totalItems}
-            isSmall={isSmall}
-          />
+          <>
+            <SummaryLeft
+              rangeStart={props.rangeStart}
+              rangeEnd={props.rangeEnd}
+              totalItems={props.totalItems}
+              isSmall={isSmall}
+            />
+            {props.leftExtra}
+          </>
         )}
       </div>
 

web/src/refresh-components/table/TableCell.tsx

@@ -21,13 +21,13 @@ export default function TableCell({
   const resolvedSize = size ?? contextSize;
   return (
     <td
-      className="tbl-cell"
+      className="tbl-cell overflow-hidden"
       data-size={resolvedSize}
       style={width != null ? { width } : undefined}
       {...props}
     >
       <div
-        className={cn("tbl-cell-inner", "flex items-center")}
+        className={cn("tbl-cell-inner", "flex items-center overflow-hidden")}
         data-size={resolvedSize}
       >
         {children}

web/src/refresh-components/table/TableQualifier.tsx

@@ -114,11 +114,16 @@ function TableQualifier({
         return (
           <div
             className={cn(
-              "flex items-center justify-center rounded-full bg-text-05",
+              "flex items-center justify-center rounded-full bg-background-neutral-inverted-00",
               resolvedSize === "regular" ? "h-7 w-7" : "h-6 w-6"
             )}
           >
-            <Text secondaryAction textLight05 className="select-none uppercase">
+            <Text
+              inverted
+              secondaryAction
+              text05
+              className="select-none uppercase"
+            >
               {initials}
             </Text>
           </div>

web/src/refresh-components/table/types.ts

@@ -141,6 +141,8 @@ export interface DataTableFooterSelection {
 
 export interface DataTableFooterSummary {
   mode: "summary";
+  /** Optional extra element rendered after the summary text (e.g. a download icon). */
+  leftExtra?: ReactNode;
 }
 
 export type DataTableFooterConfig =

web/src/refresh-pages/admin/UsersPage.tsx

@@ -1,13 +1,18 @@
 "use client";
 
+import { useState } from "react";
 import { SvgUser, SvgUserPlus } from "@opal/icons";
 import { Button } from "@opal/components";
 import * as SettingsLayouts from "@/layouts/settings-layouts";
 import { useScimToken } from "@/hooks/useScimToken";
 import { usePaidEnterpriseFeaturesEnabled } from "@/components/settings/usePaidEnterpriseFeaturesEnabled";
 import useUserCounts from "@/hooks/useUserCounts";
+import { UserStatus } from "@/lib/types";
+import type { StatusFilter } from "./UsersPage/interfaces";
 
 import UsersSummary from "./UsersPage/UsersSummary";
+import UsersTable from "./UsersPage/UsersTable";
+import InviteUsersModal from "./UsersPage/InviteUsersModal";
 
 // ---------------------------------------------------------------------------
 // Users page content
@@ -19,7 +24,18 @@ function UsersContent() {
   const { data: scimToken } = useScimToken();
   const showScim = isEe && !!scimToken;
 
-  const { activeCount, invitedCount, pendingCount } = useUserCounts();
+  const { activeCount, invitedCount, pendingCount, roleCounts, statusCounts } =
+    useUserCounts();
+
+  const [selectedStatuses, setSelectedStatuses] = useState<StatusFilter>([]);
+
+  const toggleStatus = (target: UserStatus) => {
+    setSelectedStatuses((prev) =>
+      prev.includes(target)
+        ? prev.filter((s) => s !== target)
+        : [...prev, target]
+    );
+  };
 
   return (
     <>
@@ -28,9 +44,17 @@ function UsersContent() {
         pendingInvites={invitedCount}
         requests={pendingCount}
         showScim={showScim}
+        onFilterActive={() => toggleStatus(UserStatus.ACTIVE)}
+        onFilterInvites={() => toggleStatus(UserStatus.INVITED)}
+        onFilterRequests={() => toggleStatus(UserStatus.REQUESTED)}
       />
 
-      {/* Table and filters will be added in subsequent PRs */}
+      <UsersTable
+        selectedStatuses={selectedStatuses}
+        onStatusesChange={setSelectedStatuses}
+        roleCounts={roleCounts}
+        statusCounts={statusCounts}
+      />
     </>
   );
 }
@@ -40,19 +64,24 @@ function UsersContent() {
 // ---------------------------------------------------------------------------
 
 export default function UsersPage() {
+  const [inviteOpen, setInviteOpen] = useState(false);
+
   return (
     <SettingsLayouts.Root width="lg">
       <SettingsLayouts.Header
         title="Users & Requests"
         icon={SvgUser}
         rightChildren={
-          // TODO (ENG-3806): Wire up invite modal
-          <Button icon={SvgUserPlus}>Invite Users</Button>
+          <Button icon={SvgUserPlus} onClick={() => setInviteOpen(true)}>
+            Invite Users
+          </Button>
         }
       />
       <SettingsLayouts.Body>
         <UsersContent />
       </SettingsLayouts.Body>
+
+      <InviteUsersModal open={inviteOpen} onOpenChange={setInviteOpen} />
     </SettingsLayouts.Root>
   );
 }

web/src/refresh-pages/admin/UsersPage/EditGroupsModal.tsx

@@ -0,0 +1,314 @@
+"use client";
+
+import { useState, useMemo, useRef, useCallback } from "react";
+import { Button } from "@opal/components";
+import { SvgUsers, SvgUser, SvgLogOut, SvgCheck } from "@opal/icons";
+import { Disabled } from "@opal/core";
+import { ContentAction } from "@opal/layouts";
+import Modal from "@/refresh-components/Modal";
+import Text from "@/refresh-components/texts/Text";
+import InputTypeIn from "@/refresh-components/inputs/InputTypeIn";
+import InputSelect from "@/refresh-components/inputs/InputSelect";
+import LineItem from "@/refresh-components/buttons/LineItem";
+import Separator from "@/refresh-components/Separator";
+import ShadowDiv from "@/refresh-components/ShadowDiv";
+import { Section } from "@/layouts/general-layouts";
+import { toast } from "@/hooks/useToast";
+import { UserRole } from "@/lib/types";
+import useGroups from "@/hooks/useGroups";
+import { addUserToGroup, removeUserFromGroup, setUserRole } from "./svc";
+import type { UserRow } from "./interfaces";
+
+// ---------------------------------------------------------------------------
+// Constants
+// ---------------------------------------------------------------------------
+
+const ASSIGNABLE_ROLES: { value: UserRole; label: string }[] = [
+  { value: UserRole.ADMIN, label: "Admin" },
+  { value: UserRole.GLOBAL_CURATOR, label: "Global Curator" },
+  { value: UserRole.BASIC, label: "Basic" },
+];
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+interface EditGroupsModalProps {
+  user: UserRow;
+  onClose: () => void;
+  onMutate: () => void;
+}
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
+export default function EditGroupsModal({
+  user,
+  onClose,
+  onMutate,
+}: EditGroupsModalProps) {
+  const { data: allGroups, isLoading: groupsLoading } = useGroups();
+  const [searchTerm, setSearchTerm] = useState("");
+  const [dropdownOpen, setDropdownOpen] = useState(false);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const closeDropdown = useCallback(() => {
+    // Delay to allow click events on dropdown items to fire before closing
+    setTimeout(() => {
+      if (!containerRef.current?.contains(document.activeElement)) {
+        setDropdownOpen(false);
+      }
+    }, 0);
+  }, []);
+  const [selectedRole, setSelectedRole] = useState<string>(user.role ?? "");
+
+  const initialMemberGroupIds = useMemo(
+    () => new Set(user.groups.map((g) => g.id)),
+    [user.groups]
+  );
+  const [memberGroupIds, setMemberGroupIds] = useState<Set<number>>(
+    () => new Set(initialMemberGroupIds)
+  );
+
+  // Dropdown shows all groups filtered by search term
+  const dropdownGroups = useMemo(() => {
+    if (!allGroups) return [];
+    if (searchTerm.length === 0) return allGroups;
+    const lower = searchTerm.toLowerCase();
+    return allGroups.filter((g) => g.name.toLowerCase().includes(lower));
+  }, [allGroups, searchTerm]);
+
+  // Joined groups shown in the modal body
+  const joinedGroups = useMemo(() => {
+    if (!allGroups) return [];
+    return allGroups.filter((g) => memberGroupIds.has(g.id));
+  }, [allGroups, memberGroupIds]);
+
+  const hasGroupChanges = useMemo(() => {
+    if (memberGroupIds.size !== initialMemberGroupIds.size) return true;
+    return Array.from(memberGroupIds).some(
+      (id) => !initialMemberGroupIds.has(id)
+    );
+  }, [memberGroupIds, initialMemberGroupIds]);
+
+  const hasRoleChange = user.role !== null && selectedRole !== user.role;
+  const hasChanges = hasGroupChanges || hasRoleChange;
+
+  const toggleGroup = (groupId: number) => {
+    setMemberGroupIds((prev) => {
+      const next = new Set(prev);
+      if (next.has(groupId)) {
+        next.delete(groupId);
+      } else {
+        next.add(groupId);
+      }
+      return next;
+    });
+  };
+
+  const handleSave = async () => {
+    setIsSubmitting(true);
+    try {
+      const promises: Promise<void>[] = [];
+
+      const toAdd = Array.from(memberGroupIds).filter(
+        (id) => !initialMemberGroupIds.has(id)
+      );
+      const toRemove = Array.from(initialMemberGroupIds).filter(
+        (id) => !memberGroupIds.has(id)
+      );
+
+      if (user.id) {
+        for (const groupId of toAdd) {
+          promises.push(addUserToGroup(groupId, user.id));
+        }
+        for (const groupId of toRemove) {
+          const group = allGroups?.find((g) => g.id === groupId);
+          if (group) {
+            const currentUserIds = group.users.map((u) => u.id);
+            promises.push(
+              removeUserFromGroup(groupId, currentUserIds, user.id)
+            );
+          }
+        }
+      }
+
+      if (hasRoleChange) {
+        promises.push(setUserRole(user.email, selectedRole));
+      }
+
+      await Promise.all(promises);
+      onMutate();
+      toast.success("User updated");
+      onClose();
+    } catch (err) {
+      toast.error(err instanceof Error ? err.message : "An error occurred");
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const displayName = user.personal_name ?? user.email;
+
+  return (
+    <Modal open onOpenChange={(isOpen) => !isOpen && onClose()}>
+      <Modal.Content width="sm">
+        <Modal.Header
+          icon={SvgUsers}
+          title="Edit User's Groups & Roles"
+          description={
+            user.personal_name
+              ? `${user.personal_name} (${user.email})`
+              : user.email
+          }
+          onClose={onClose}
+        />
+        <Modal.Body twoTone>
+          <Section
+            gap={1}
+            height="auto"
+            alignItems="stretch"
+            justifyContent="start"
+          >
+            {/* Subsection: white card behind search + groups */}
+            <div className="relative">
+              <div className="absolute -inset-2 bg-background-neutral-00 rounded-12" />
+              <Section
+                gap={0.5}
+                height="auto"
+                alignItems="stretch"
+                justifyContent="start"
+              >
+                <div ref={containerRef} className="relative">
+                  <InputTypeIn
+                    value={searchTerm}
+                    onChange={(e) => {
+                      setSearchTerm(e.target.value);
+                      if (!dropdownOpen) setDropdownOpen(true);
+                    }}
+                    onFocus={() => setDropdownOpen(true)}
+                    onBlur={closeDropdown}
+                    placeholder="Search groups to join..."
+                    leftSearchIcon
+                  />
+                  {dropdownOpen && (
+                    <div className="absolute top-full left-0 right-0 z-50 mt-1 bg-background-neutral-00 border border-border-02 rounded-12 shadow-md p-1">
+                      {groupsLoading ? (
+                        <Text as="p" text03 secondaryBody className="px-3 py-2">
+                          Loading groups...
+                        </Text>
+                      ) : dropdownGroups.length === 0 ? (
+                        <Text as="p" text03 secondaryBody className="px-3 py-2">
+                          No groups found
+                        </Text>
+                      ) : (
+                        <ShadowDiv className="max-h-[200px] flex flex-col gap-1">
+                          {dropdownGroups.map((group) => {
+                            const isMember = memberGroupIds.has(group.id);
+                            return (
+                              <LineItem
+                                key={group.id}
+                                icon={isMember ? SvgCheck : SvgUsers}
+                                description={`${group.users.length} ${
+                                  group.users.length === 1 ? "user" : "users"
+                                }`}
+                                selected={isMember}
+                                emphasized={isMember}
+                                onMouseDown={(e: React.MouseEvent) =>
+                                  e.preventDefault()
+                                }
+                                onClick={() => toggleGroup(group.id)}
+                              >
+                                {group.name}
+                              </LineItem>
+                            );
+                          })}
+                        </ShadowDiv>
+                      )}
+                    </div>
+                  )}
+                </div>
+
+                {joinedGroups.length === 0 ? (
+                  <LineItem
+                    icon={SvgUsers}
+                    description={`${displayName} is not in any groups.`}
+                    muted
+                  >
+                    No groups found
+                  </LineItem>
+                ) : (
+                  <ShadowDiv className="flex flex-col gap-1 max-h-[200px]">
+                    {joinedGroups.map((group) => (
+                      <div
+                        key={group.id}
+                        className="bg-background-tint-01 rounded-08"
+                      >
+                        <LineItem
+                          icon={SvgUsers}
+                          description={`${group.users.length} ${
+                            group.users.length === 1 ? "user" : "users"
+                          }`}
+                          rightChildren={
+                            <SvgLogOut className="w-4 h-4 text-text-03" />
+                          }
+                          onClick={() => toggleGroup(group.id)}
+                        >
+                          {group.name}
+                        </LineItem>
+                      </div>
+                    ))}
+                  </ShadowDiv>
+                )}
+              </Section>
+            </div>
+
+            {user.role && (
+              <>
+                <Separator noPadding />
+
+                <ContentAction
+                  title="User Role"
+                  description="This controls their general permissions."
+                  sizePreset="main-ui"
+                  variant="section"
+                  paddingVariant="fit"
+                  rightChildren={
+                    <InputSelect
+                      value={selectedRole}
+                      onValueChange={setSelectedRole}
+                    >
+                      <InputSelect.Trigger />
+                      <InputSelect.Content>
+                        {ASSIGNABLE_ROLES.map(({ value, label }) => (
+                          <InputSelect.Item
+                            key={value}
+                            value={value}
+                            icon={SvgUser}
+                          >
+                            {label}
+                          </InputSelect.Item>
+                        ))}
+                      </InputSelect.Content>
+                    </InputSelect>
+                  }
+                />
+              </>
+            )}
+          </Section>
+        </Modal.Body>
+
+        <Modal.Footer>
+          <Button prominence="secondary" onClick={onClose}>
+            Cancel
+          </Button>
+          <Disabled disabled={isSubmitting || !hasChanges}>
+            <Button onClick={handleSave}>Save Changes</Button>
+          </Disabled>
+        </Modal.Footer>
+      </Modal.Content>
+    </Modal>
+  );
+}

web/src/refresh-pages/admin/UsersPage/GroupsCell.tsx

@@ -0,0 +1,187 @@
+"use client";
+
+import { useState, useRef, useLayoutEffect, useCallback } from "react";
+import { SvgEdit } from "@opal/icons";
+import { Tag } from "@opal/components";
+import IconButton from "@/refresh-components/buttons/IconButton";
+import Text from "@/refresh-components/texts/Text";
+import SimpleTooltip from "@/refresh-components/SimpleTooltip";
+import EditGroupsModal from "./EditGroupsModal";
+import type { UserRow, UserGroupInfo } from "./interfaces";
+
+interface GroupsCellProps {
+  groups: UserGroupInfo[];
+  user: UserRow;
+  onMutate: () => void;
+}
+
+/**
+ * Measures how many Tag pills fit in the container, accounting for a "+N"
+ * overflow counter when not all tags are visible. Uses a two-phase render:
+ * first renders all tags (clipped by overflow:hidden) for measurement, then
+ * re-renders with only the visible subset + "+N".
+ *
+ * Hovering the cell shows a tooltip with ALL groups. Clicking opens the
+ * edit groups modal.
+ */
+export default function GroupsCell({
+  groups,
+  user,
+  onMutate,
+}: GroupsCellProps) {
+  const [showModal, setShowModal] = useState(false);
+  const [visibleCount, setVisibleCount] = useState<number | null>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const computeVisibleCount = useCallback(() => {
+    const container = containerRef.current;
+    if (!container || groups.length <= 1) {
+      setVisibleCount(groups.length);
+      return;
+    }
+
+    const tags = container.querySelectorAll<HTMLElement>("[data-group-tag]");
+    if (tags.length === 0) return;
+
+    const containerWidth = container.clientWidth;
+    const gap = 4; // gap-1
+    const counterWidth = 32; // "+N" Tag approximate width
+
+    let used = 0;
+    let count = 0;
+
+    for (let i = 0; i < tags.length; i++) {
+      const tagWidth = tags[i]!.offsetWidth;
+      const gapBefore = count > 0 ? gap : 0;
+      const hasMore = i < tags.length - 1;
+      const reserve = hasMore ? gap + counterWidth : 0;
+
+      if (used + gapBefore + tagWidth + reserve <= containerWidth) {
+        used += gapBefore + tagWidth;
+        count++;
+      } else {
+        break;
+      }
+    }
+
+    setVisibleCount(Math.max(1, count));
+  }, [groups]);
+
+  // Reset to measurement phase when groups change
+  useLayoutEffect(() => {
+    setVisibleCount(null);
+  }, [groups]);
+
+  // Measure after the "show all" render
+  useLayoutEffect(() => {
+    if (visibleCount !== null) return;
+    computeVisibleCount();
+  }, [visibleCount, computeVisibleCount]);
+
+  // Re-measure on container resize
+  useLayoutEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+
+    const observer = new ResizeObserver(() => {
+      setVisibleCount(null);
+    });
+    observer.observe(container);
+    return () => observer.disconnect();
+  }, []);
+
+  const isMeasuring = visibleCount === null;
+  const effectiveVisible = visibleCount ?? groups.length;
+  const overflowCount = groups.length - effectiveVisible;
+  const hasOverflow = !isMeasuring && overflowCount > 0;
+
+  const allGroupsTooltip = (
+    <div className="flex flex-wrap gap-1 max-w-[14rem]">
+      {groups.map((g) => (
+        <div key={g.id} className="max-w-[10rem]">
+          <Tag title={g.name} size="md" />
+        </div>
+      ))}
+    </div>
+  );
+
+  const tagsContent = (
+    <>
+      {(isMeasuring ? groups : groups.slice(0, effectiveVisible)).map((g) => (
+        <div key={g.id} data-group-tag className="flex-shrink-0">
+          <Tag title={g.name} size="md" />
+        </div>
+      ))}
+      {hasOverflow && (
+        <div className="flex-shrink-0">
+          <Tag title={`+${overflowCount}`} size="md" />
+        </div>
+      )}
+    </>
+  );
+
+  return (
+    <>
+      <div
+        className={`group/groups relative flex items-center w-full min-w-0 ${
+          user.id ? "cursor-pointer" : ""
+        }`}
+        onClick={user.id ? () => setShowModal(true) : undefined}
+      >
+        {groups.length === 0 ? (
+          <div
+            ref={containerRef}
+            className="flex items-center gap-1 overflow-hidden flex-nowrap min-w-0 pr-7"
+          >
+            <Text as="span" secondaryBody text03>
+              —
+            </Text>
+          </div>
+        ) : hasOverflow ? (
+          <SimpleTooltip
+            side="bottom"
+            align="start"
+            tooltip={allGroupsTooltip}
+            className="bg-background-neutral-01 border border-border-01 shadow-sm"
+            delayDuration={200}
+          >
+            <div
+              ref={containerRef}
+              className="flex items-center gap-1 overflow-hidden flex-nowrap min-w-0 pr-7"
+            >
+              {tagsContent}
+            </div>
+          </SimpleTooltip>
+        ) : (
+          <div
+            ref={containerRef}
+            className="flex items-center gap-1 overflow-hidden flex-nowrap min-w-0 pr-7"
+          >
+            {tagsContent}
+          </div>
+        )}
+        {user.id && (
+          <IconButton
+            tertiary
+            icon={SvgEdit}
+            tooltip="Edit"
+            toolTipPosition="left"
+            tooltipSize="sm"
+            className="absolute right-0 opacity-0 group-hover/groups:opacity-100 transition-opacity"
+            onClick={(e) => {
+              e.stopPropagation();
+              setShowModal(true);
+            }}
+          />
+        )}
+      </div>
+      {showModal && user.id && (
+        <EditGroupsModal
+          user={user}
+          onClose={() => setShowModal(false)}
+          onMutate={onMutate}
+        />
+      )}
+    </>
+  );
+}

web/src/refresh-pages/admin/UsersPage/InviteUsersModal.tsx

@@ -0,0 +1,177 @@
+"use client";
+
+import { useState } from "react";
+import { Button } from "@opal/components";
+import { SvgUsers, SvgUser } from "@opal/icons";
+import { Disabled } from "@opal/core";
+import Modal, { BasicModalFooter } from "@/refresh-components/Modal";
+import InputChipField from "@/refresh-components/inputs/InputChipField";
+import type { ChipItem } from "@/refresh-components/inputs/InputChipField";
+import InputSelect from "@/refresh-components/inputs/InputSelect";
+import Text from "@/refresh-components/texts/Text";
+import { toast } from "@/hooks/useToast";
+import { UserRole, USER_ROLE_LABELS } from "@/lib/types";
+import { inviteUsers } from "./svc";
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+const EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+
+/** Roles available for invite — excludes curator-specific and system roles */
+const INVITE_ROLES = [
+  UserRole.BASIC,
+  UserRole.ADMIN,
+  UserRole.GLOBAL_CURATOR,
+] as const;
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+interface InviteUsersModalProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
+export default function InviteUsersModal({
+  open,
+  onOpenChange,
+}: InviteUsersModalProps) {
+  const [chips, setChips] = useState<ChipItem[]>([]);
+  const [inputValue, setInputValue] = useState("");
+  const [role, setRole] = useState<string>(UserRole.BASIC);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  function addEmail(value: string) {
+    // Split on commas so pasted lists like "a@b.com, c@d.com" still work
+    const entries = value
+      .split(",")
+      .map((e) => e.trim().toLowerCase())
+      .filter(Boolean);
+
+    const newChips: ChipItem[] = [];
+    for (const email of entries) {
+      const alreadyAdded = chips.some((c) => c.label === email);
+      if (!alreadyAdded) {
+        newChips.push({
+          id: email,
+          label: email,
+          error: !EMAIL_REGEX.test(email),
+        });
+      }
+    }
+
+    if (newChips.length > 0) {
+      setChips((prev) => [...prev, ...newChips]);
+    }
+    setInputValue("");
+  }
+
+  function removeChip(id: string) {
+    setChips((prev) => prev.filter((c) => c.id !== id));
+  }
+
+  function handleClose() {
+    onOpenChange(false);
+    // Reset state after close animation
+    setTimeout(() => {
+      setChips([]);
+      setInputValue("");
+      setRole(UserRole.BASIC);
+    }, 200);
+  }
+
+  async function handleInvite() {
+    const validEmails = chips
+      .map((c) => c.label)
+      .filter((e) => EMAIL_REGEX.test(e));
+
+    if (validEmails.length === 0) {
+      toast.error("Please add at least one valid email address");
+      return;
+    }
+
+    setIsSubmitting(true);
+    try {
+      await inviteUsers(validEmails);
+      toast.success(
+        `Invited ${validEmails.length} user${validEmails.length > 1 ? "s" : ""}`
+      );
+      handleClose();
+    } catch (err) {
+      toast.error(
+        err instanceof Error ? err.message : "Failed to invite users"
+      );
+    } finally {
+      setIsSubmitting(false);
+    }
+  }
+
+  return (
+    <Modal open={open} onOpenChange={onOpenChange}>
+      <Modal.Content width="sm" height="fit">
+        <Modal.Header
+          icon={SvgUsers}
+          title="Invite Users"
+          onClose={handleClose}
+        />
+
+        <Modal.Body>
+          <InputChipField
+            chips={chips}
+            onRemoveChip={removeChip}
+            onAdd={addEmail}
+            value={inputValue}
+            onChange={setInputValue}
+            placeholder="Add emails to invite, comma separated"
+          />
+
+          <div className="flex items-start justify-between w-full gap-4">
+            <div className="flex flex-col gap-0.5">
+              <Text as="p" mainUiAction text04>
+                User Role
+              </Text>
+              <Text as="p" secondaryBody text03>
+                Invite new users as
+              </Text>
+            </div>
+
+            <div className="w-[200px]">
+              <InputSelect value={role} onValueChange={setRole}>
+                <InputSelect.Trigger />
+                <InputSelect.Content>
+                  {INVITE_ROLES.map((r) => (
+                    <InputSelect.Item key={r} value={r} icon={SvgUser}>
+                      {USER_ROLE_LABELS[r]}
+                    </InputSelect.Item>
+                  ))}
+                </InputSelect.Content>
+              </InputSelect>
+            </div>
+          </div>
+        </Modal.Body>
+
+        <Modal.Footer>
+          <BasicModalFooter
+            cancel={
+              <Button prominence="tertiary" onClick={handleClose}>
+                Cancel
+              </Button>
+            }
+            submit={
+              <Disabled disabled={isSubmitting || chips.length === 0}>
+                <Button onClick={handleInvite}>Invite</Button>
+              </Disabled>
+            }
+          />
+        </Modal.Footer>
+      </Modal.Content>
+    </Modal>
+  );
+}

web/src/refresh-pages/admin/UsersPage/UserFilters.tsx

@@ -0,0 +1,301 @@
+"use client";
+
+import { useState } from "react";
+import {
+  SvgCheck,
+  SvgSlack,
+  SvgUser,
+  SvgUserManage,
+  SvgUsers,
+} from "@opal/icons";
+import type { IconFunctionComponent } from "@opal/types";
+import FilterButton from "@/refresh-components/buttons/FilterButton";
+import Popover from "@/refresh-components/Popover";
+import InputTypeIn from "@/refresh-components/inputs/InputTypeIn";
+import LineItem from "@/refresh-components/buttons/LineItem";
+import Text from "@/refresh-components/texts/Text";
+import ShadowDiv from "@/refresh-components/ShadowDiv";
+import {
+  UserRole,
+  UserStatus,
+  USER_ROLE_LABELS,
+  USER_STATUS_LABELS,
+} from "@/lib/types";
+import { NEXT_PUBLIC_CLOUD_ENABLED } from "@/lib/constants";
+import type { GroupOption, StatusFilter } from "./interfaces";
+
+// ---------------------------------------------------------------------------
+// Constants
+// ---------------------------------------------------------------------------
+
+const VISIBLE_FILTER_ROLES: UserRole[] = [
+  UserRole.ADMIN,
+  UserRole.GLOBAL_CURATOR,
+  UserRole.BASIC,
+  UserRole.SLACK_USER,
+];
+
+const FILTERABLE_ROLES = VISIBLE_FILTER_ROLES.map(
+  (role) => [role, USER_ROLE_LABELS[role]] as [UserRole, string]
+);
+
+const FILTERABLE_STATUSES = (
+  Object.entries(USER_STATUS_LABELS) as [UserStatus, string][]
+).filter(
+  ([value]) => value !== UserStatus.REQUESTED || NEXT_PUBLIC_CLOUD_ENABLED
+);
+
+const ROLE_ICONS: Partial<Record<UserRole, IconFunctionComponent>> = {
+  [UserRole.ADMIN]: SvgUserManage,
+  [UserRole.SLACK_USER]: SvgSlack,
+};
+
+/** Map UserStatus enum values to the keys returned by the counts endpoint. */
+const STATUS_COUNT_KEY: Record<UserStatus, string> = {
+  [UserStatus.ACTIVE]: "active",
+  [UserStatus.INACTIVE]: "inactive",
+  [UserStatus.INVITED]: "invited",
+  [UserStatus.REQUESTED]: "requested",
+};
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+function CountBadge({ count }: { count: number | undefined }) {
+  return (
+    <Text as="span" secondaryBody text03>
+      {count ?? 0}
+    </Text>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
+interface UserFiltersProps {
+  selectedRoles: UserRole[];
+  onRolesChange: (roles: UserRole[]) => void;
+  selectedGroups: number[];
+  onGroupsChange: (groupIds: number[]) => void;
+  groups: GroupOption[];
+  selectedStatuses: StatusFilter;
+  onStatusesChange: (statuses: StatusFilter) => void;
+  roleCounts: Record<string, number>;
+  statusCounts: Record<string, number>;
+}
+
+export default function UserFilters({
+  selectedRoles,
+  onRolesChange,
+  selectedGroups,
+  onGroupsChange,
+  groups,
+  selectedStatuses,
+  onStatusesChange,
+  roleCounts,
+  statusCounts,
+}: UserFiltersProps) {
+  const hasRoleFilter = selectedRoles.length > 0;
+  const hasGroupFilter = selectedGroups.length > 0;
+  const hasStatusFilter = selectedStatuses.length > 0;
+  const [groupSearch, setGroupSearch] = useState("");
+
+  const toggleRole = (role: UserRole) => {
+    if (selectedRoles.includes(role)) {
+      onRolesChange(selectedRoles.filter((r) => r !== role));
+    } else {
+      onRolesChange([...selectedRoles, role]);
+    }
+  };
+
+  const toggleGroup = (groupId: number) => {
+    if (selectedGroups.includes(groupId)) {
+      onGroupsChange(selectedGroups.filter((id) => id !== groupId));
+    } else {
+      onGroupsChange([...selectedGroups, groupId]);
+    }
+  };
+
+  const toggleStatus = (status: UserStatus) => {
+    if (selectedStatuses.includes(status)) {
+      onStatusesChange(selectedStatuses.filter((s) => s !== status));
+    } else {
+      onStatusesChange([...selectedStatuses, status]);
+    }
+  };
+
+  const roleLabel = hasRoleFilter
+    ? FILTERABLE_ROLES.filter(([role]) => selectedRoles.includes(role))
+        .map(([, label]) => label)
+        .slice(0, 2)
+        .join(", ") +
+      (selectedRoles.length > 2 ? `, +${selectedRoles.length - 2}` : "")
+    : "All Account Types";
+
+  const groupLabel = hasGroupFilter
+    ? groups
+        .filter((g) => selectedGroups.includes(g.id))
+        .map((g) => g.name)
+        .slice(0, 2)
+        .join(", ") +
+      (selectedGroups.length > 2 ? `, +${selectedGroups.length - 2}` : "")
+    : "All Groups";
+
+  const statusLabel = hasStatusFilter
+    ? FILTERABLE_STATUSES.filter(([status]) =>
+        selectedStatuses.includes(status)
+      )
+        .map(([, label]) => label)
+        .slice(0, 2)
+        .join(", ") +
+      (selectedStatuses.length > 2 ? `, +${selectedStatuses.length - 2}` : "")
+    : "All Status";
+
+  const filteredGroups = groupSearch
+    ? groups.filter((g) =>
+        g.name.toLowerCase().includes(groupSearch.toLowerCase())
+      )
+    : groups;
+
+  return (
+    <div className="flex gap-2">
+      {/* Role filter */}
+      <Popover>
+        <Popover.Trigger asChild>
+          <FilterButton
+            leftIcon={SvgUsers}
+            active={hasRoleFilter}
+            onClear={() => onRolesChange([])}
+          >
+            {roleLabel}
+          </FilterButton>
+        </Popover.Trigger>
+        <Popover.Content align="start">
+          <div className="flex flex-col gap-1 p-1 min-w-[200px]">
+            <LineItem
+              icon={!hasRoleFilter ? SvgCheck : SvgUsers}
+              selected={!hasRoleFilter}
+              emphasized={!hasRoleFilter}
+              onClick={() => onRolesChange([])}
+            >
+              All Account Types
+            </LineItem>
+            {FILTERABLE_ROLES.map(([role, label]) => {
+              const isSelected = selectedRoles.includes(role);
+              const roleIcon = ROLE_ICONS[role] ?? SvgUser;
+              return (
+                <LineItem
+                  key={role}
+                  icon={isSelected ? SvgCheck : roleIcon}
+                  selected={isSelected}
+                  emphasized={isSelected}
+                  onClick={() => toggleRole(role)}
+                  rightChildren={<CountBadge count={roleCounts[role]} />}
+                >
+                  {label}
+                </LineItem>
+              );
+            })}
+          </div>
+        </Popover.Content>
+      </Popover>
+
+      {/* Groups filter */}
+      <Popover>
+        <Popover.Trigger asChild>
+          <FilterButton
+            leftIcon={SvgUsers}
+            active={hasGroupFilter}
+            onClear={() => onGroupsChange([])}
+          >
+            {groupLabel}
+          </FilterButton>
+        </Popover.Trigger>
+        <Popover.Content align="start">
+          <div className="flex flex-col gap-1 p-1 min-w-[200px]">
+            <InputTypeIn
+              value={groupSearch}
+              onChange={(e) => setGroupSearch(e.target.value)}
+              placeholder="Search groups..."
+              leftSearchIcon
+              variant="internal"
+            />
+            <LineItem
+              icon={!hasGroupFilter ? SvgCheck : SvgUsers}
+              selected={!hasGroupFilter}
+              emphasized={!hasGroupFilter}
+              onClick={() => onGroupsChange([])}
+            >
+              All Groups
+            </LineItem>
+            <ShadowDiv className="flex flex-col gap-1 max-h-[240px]">
+              {filteredGroups.map((group) => {
+                const isSelected = selectedGroups.includes(group.id);
+                return (
+                  <LineItem
+                    key={group.id}
+                    icon={isSelected ? SvgCheck : SvgUsers}
+                    selected={isSelected}
+                    emphasized={isSelected}
+                    onClick={() => toggleGroup(group.id)}
+                    rightChildren={<CountBadge count={group.memberCount} />}
+                  >
+                    {group.name}
+                  </LineItem>
+                );
+              })}
+              {filteredGroups.length === 0 && (
+                <Text as="span" secondaryBody text03 className="px-2 py-1.5">
+                  No groups found
+                </Text>
+              )}
+            </ShadowDiv>
+          </div>
+        </Popover.Content>
+      </Popover>
+
+      {/* Status filter */}
+      <Popover>
+        <Popover.Trigger asChild>
+          <FilterButton
+            leftIcon={SvgUsers}
+            active={hasStatusFilter}
+            onClear={() => onStatusesChange([])}
+          >
+            {statusLabel}
+          </FilterButton>
+        </Popover.Trigger>
+        <Popover.Content align="start">
+          <div className="flex flex-col gap-1 p-1 min-w-[200px]">
+            <LineItem
+              icon={!hasStatusFilter ? SvgCheck : SvgUser}
+              selected={!hasStatusFilter}
+              emphasized={!hasStatusFilter}
+              onClick={() => onStatusesChange([])}
+            >
+              All Status
+            </LineItem>
+            {FILTERABLE_STATUSES.map(([status, label]) => {
+              const isSelected = selectedStatuses.includes(status);
+              const countKey = STATUS_COUNT_KEY[status];
+              return (
+                <LineItem
+                  key={status}
+                  icon={isSelected ? SvgCheck : SvgUser}
+                  selected={isSelected}
+                  emphasized={isSelected}
+                  onClick={() => toggleStatus(status)}
+                  rightChildren={<CountBadge count={statusCounts[countKey]} />}
+                >
+                  {label}
+                </LineItem>
+              );
+            })}
+          </div>
+        </Popover.Content>
+      </Popover>
+    </div>
+  );
+}

web/src/refresh-pages/admin/UsersPage/UserRoleCell.tsx

@@ -0,0 +1,150 @@
+"use client";
+
+import { useState } from "react";
+import { UserRole, USER_ROLE_LABELS } from "@/lib/types";
+import { usePaidEnterpriseFeaturesEnabled } from "@/components/settings/usePaidEnterpriseFeaturesEnabled";
+import { OpenButton } from "@opal/components";
+import { Disabled } from "@opal/core";
+import GenericConfirmModal from "@/components/modals/GenericConfirmModal";
+import {
+  SvgCheck,
+  SvgGlobe,
+  SvgUser,
+  SvgSlack,
+  SvgUserManage,
+} from "@opal/icons";
+import type { IconFunctionComponent } from "@opal/types";
+import Text from "@/refresh-components/texts/Text";
+import Popover from "@/refresh-components/Popover";
+import LineItem from "@/refresh-components/buttons/LineItem";
+import { setUserRole } from "./svc";
+import type { UserRow } from "./interfaces";
+
+const ROLE_ICONS: Record<string, IconFunctionComponent> = {
+  [UserRole.ADMIN]: SvgUserManage,
+  [UserRole.GLOBAL_CURATOR]: SvgGlobe,
+  [UserRole.SLACK_USER]: SvgSlack,
+};
+
+const SELECTABLE_ROLES = [
+  UserRole.ADMIN,
+  UserRole.GLOBAL_CURATOR,
+  UserRole.BASIC,
+] as const;
+
+interface UserRoleCellProps {
+  user: UserRow;
+  onMutate: () => void;
+}
+
+export default function UserRoleCell({ user, onMutate }: UserRoleCellProps) {
+  const [isUpdating, setIsUpdating] = useState(false);
+  const [showConfirmModal, setShowConfirmModal] = useState(false);
+  const [pendingRole, setPendingRole] = useState<string | null>(null);
+  const [open, setOpen] = useState(false);
+  const isPaidEnterpriseFeaturesEnabled = usePaidEnterpriseFeaturesEnabled();
+
+  if (!user.role) {
+    return (
+      <Text as="span" secondaryBody text03>
+        —
+      </Text>
+    );
+  }
+
+  const applyRole = async (newRole: string) => {
+    setIsUpdating(true);
+    try {
+      await setUserRole(user.email, newRole);
+      onMutate();
+    } catch {
+      onMutate();
+    } finally {
+      setIsUpdating(false);
+    }
+  };
+
+  const handleSelect = (role: UserRole) => {
+    if (role === user.role) {
+      setOpen(false);
+      return;
+    }
+    setOpen(false);
+    if (user.role === UserRole.CURATOR) {
+      setPendingRole(role);
+      setShowConfirmModal(true);
+    } else {
+      applyRole(role);
+    }
+  };
+
+  const handleConfirm = () => {
+    if (pendingRole) {
+      applyRole(pendingRole);
+    }
+    setShowConfirmModal(false);
+    setPendingRole(null);
+  };
+
+  const currentIcon = ROLE_ICONS[user.role] ?? SvgUser;
+
+  return (
+    <>
+      {showConfirmModal && (
+        <GenericConfirmModal
+          title="Change Curator Role"
+          message={`Warning: Switching roles from Curator to ${
+            USER_ROLE_LABELS[pendingRole as UserRole] ??
+            USER_ROLE_LABELS[user.role]
+          } will remove their status as individual curators from all groups.`}
+          confirmText={`Switch Role to ${
+            USER_ROLE_LABELS[pendingRole as UserRole] ??
+            USER_ROLE_LABELS[user.role]
+          }`}
+          onClose={() => setShowConfirmModal(false)}
+          onConfirm={handleConfirm}
+        />
+      )}
+
+      <Disabled disabled={isUpdating}>
+        <Popover open={open} onOpenChange={setOpen}>
+          <Popover.Trigger asChild>
+            <OpenButton
+              icon={currentIcon}
+              variant="select-tinted"
+              width="full"
+              justifyContent="between"
+            >
+              {USER_ROLE_LABELS[user.role]}
+            </OpenButton>
+          </Popover.Trigger>
+          <Popover.Content align="start">
+            <div className="flex flex-col gap-1 p-1 min-w-[160px]">
+              {SELECTABLE_ROLES.map((role) => {
+                if (
+                  role === UserRole.GLOBAL_CURATOR &&
+                  !isPaidEnterpriseFeaturesEnabled
+                ) {
+                  return null;
+                }
+                const isSelected = user.role === role;
+                const icon = ROLE_ICONS[role] ?? SvgUser;
+                return (
+                  <LineItem
+                    key={role}
+                    icon={isSelected ? SvgCheck : icon}
+                    selected={isSelected}
+                    emphasized={isSelected}
+                    onClick={() => handleSelect(role)}
+                  >
+                    {USER_ROLE_LABELS[role]}
+                  </LineItem>
+                );
+              })}
+            </div>
+          </Popover.Content>
+        </Popover>
+      </Disabled>
+    </>
+  );
+}

web/src/refresh-pages/admin/UsersPage/UserRowActions.tsx

@@ -0,0 +1,324 @@
+"use client";
+
+import { useState } from "react";
+import { Button } from "@opal/components";
+import {
+  SvgMoreHorizontal,
+  SvgUsers,
+  SvgXCircle,
+  SvgTrash,
+  SvgCheck,
+} from "@opal/icons";
+import { Disabled } from "@opal/core";
+import Popover from "@/refresh-components/Popover";
+import ConfirmationModalLayout from "@/refresh-components/layouts/ConfirmationModalLayout";
+import Text from "@/refresh-components/texts/Text";
+import { UserStatus } from "@/lib/types";
+import { toast } from "@/hooks/useToast";
+import {
+  deactivateUser,
+  activateUser,
+  deleteUser,
+  cancelInvite,
+  approveRequest,
+} from "./svc";
+import EditGroupsModal from "./EditGroupsModal";
+import type { UserRow } from "./interfaces";
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+type ModalType =
+  | "deactivate"
+  | "activate"
+  | "delete"
+  | "cancelInvite"
+  | "editGroups"
+  | null;
+
+interface UserRowActionsProps {
+  user: UserRow;
+  onMutate: () => void;
+}
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
+export default function UserRowActions({
+  user,
+  onMutate,
+}: UserRowActionsProps) {
+  const [modal, setModal] = useState<ModalType>(null);
+  const [popoverOpen, setPopoverOpen] = useState(false);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  async function handleAction(
+    action: () => Promise<void>,
+    successMessage: string
+  ) {
+    setIsSubmitting(true);
+    try {
+      await action();
+      onMutate();
+      toast.success(successMessage);
+      setModal(null);
+    } catch (err) {
+      toast.error(err instanceof Error ? err.message : "An error occurred");
+    } finally {
+      setIsSubmitting(false);
+    }
+  }
+
+  const openModal = (type: ModalType) => {
+    setPopoverOpen(false);
+    setModal(type);
+  };
+
+  // Status-aware action menus
+  const actionButtons = (() => {
+    switch (user.status) {
+      case UserStatus.INVITED:
+        return (
+          <Button
+            prominence="tertiary"
+            variant="danger"
+            icon={SvgXCircle}
+            onClick={() => openModal("cancelInvite")}
+          >
+            Cancel Invite
+          </Button>
+        );
+
+      case UserStatus.REQUESTED:
+        return (
+          <>
+            <Button
+              prominence="tertiary"
+              icon={SvgCheck}
+              onClick={() => {
+                setPopoverOpen(false);
+                handleAction(
+                  () => approveRequest(user.email),
+                  "Request approved"
+                );
+              }}
+            >
+              Approve
+            </Button>
+            <Button
+              prominence="tertiary"
+              variant="danger"
+              icon={SvgXCircle}
+              onClick={() => openModal("cancelInvite")}
+            >
+              Reject
+            </Button>
+          </>
+        );
+
+      case UserStatus.ACTIVE:
+        return (
+          <>
+            {user.id && (
+              <Button
+                prominence="tertiary"
+                icon={SvgUsers}
+                onClick={() => openModal("editGroups")}
+              >
+                Groups
+              </Button>
+            )}
+            <Button
+              prominence="tertiary"
+              icon={SvgXCircle}
+              onClick={() => openModal("deactivate")}
+            >
+              Deactivate User
+            </Button>
+          </>
+        );
+
+      case UserStatus.INACTIVE:
+        return (
+          <>
+            {user.id && (
+              <Button
+                prominence="tertiary"
+                icon={SvgUsers}
+                onClick={() => openModal("editGroups")}
+              >
+                Groups
+              </Button>
+            )}
+            <Button
+              prominence="tertiary"
+              icon={SvgCheck}
+              onClick={() => openModal("activate")}
+            >
+              Activate User
+            </Button>
+            <Button
+              prominence="tertiary"
+              variant="danger"
+              icon={SvgTrash}
+              onClick={() => openModal("delete")}
+            >
+              Delete User
+            </Button>
+          </>
+        );
+    }
+  })();
+
+  return (
+    <>
+      <Popover open={popoverOpen} onOpenChange={setPopoverOpen}>
+        <Popover.Trigger asChild>
+          <Button prominence="tertiary" icon={SvgMoreHorizontal} />
+        </Popover.Trigger>
+        <Popover.Content align="end">
+          <div className="flex flex-col gap-0.5 p-1">
+            {actionButtons}
+          </div>
+        </Popover.Content>
+      </Popover>
+
+      {modal === "editGroups" && user.id && (
+        <EditGroupsModal
+          user={user}
+          onClose={() => setModal(null)}
+          onMutate={onMutate}
+        />
+      )}
+
+      {modal === "cancelInvite" && (
+        <ConfirmationModalLayout
+          icon={SvgXCircle}
+          title={
+            user.status === UserStatus.REQUESTED
+              ? "Reject Request"
+              : "Cancel Invite"
+          }
+          onClose={() => setModal(null)}
+          submit={
+            <Disabled disabled={isSubmitting}>
+              <Button
+                variant="danger"
+                onClick={() => {
+                  handleAction(
+                    () => cancelInvite(user.email),
+                    user.status === UserStatus.REQUESTED
+                      ? "Request rejected"
+                      : "Invite cancelled"
+                  );
+                }}
+              >
+                {user.status === UserStatus.REQUESTED ? "Reject" : "Cancel"}
+              </Button>
+            </Disabled>
+          }
+        >
+          <Text as="p" text03>
+            <Text as="span" text05>
+              {user.email}
+            </Text>{" "}
+            {user.status === UserStatus.REQUESTED
+              ? "will be removed from the pending requests list."
+              : "will no longer be able to join Onyx with this invite."}
+          </Text>
+        </ConfirmationModalLayout>
+      )}
+
+      {modal === "deactivate" && (
+        <ConfirmationModalLayout
+          icon={SvgXCircle}
+          title="Deactivate User"
+          onClose={() => setModal(null)}
+          submit={
+            <Disabled disabled={isSubmitting}>
+              <Button
+                variant="danger"
+                onClick={() => {
+                  handleAction(
+                    () => deactivateUser(user.email),
+                    "User deactivated"
+                  );
+                }}
+              >
+                Deactivate
+              </Button>
+            </Disabled>
+          }
+        >
+          <Text as="p" text03>
+            <Text as="span" text05>
+              {user.email}
+            </Text>{" "}
+            will immediately lose access to Onyx. Their sessions and agents will
+            be preserved. Their license seat will be freed. You can reactivate
+            this account later.
+          </Text>
+        </ConfirmationModalLayout>
+      )}
+
+      {modal === "activate" && (
+        <ConfirmationModalLayout
+          icon={SvgCheck}
+          title="Activate User"
+          onClose={() => setModal(null)}
+          submit={
+            <Disabled disabled={isSubmitting}>
+              <Button
+                onClick={() => {
+                  handleAction(
+                    () => activateUser(user.email),
+                    "User activated"
+                  );
+                }}
+              >
+                Activate
+              </Button>
+            </Disabled>
+          }
+        >
+          <Text as="p" text03>
+            <Text as="span" text05>
+              {user.email}
+            </Text>{" "}
+            will regain access to Onyx.
+          </Text>
+        </ConfirmationModalLayout>
+      )}
+
+      {modal === "delete" && (
+        <ConfirmationModalLayout
+          icon={SvgTrash}
+          title="Delete User"
+          onClose={() => setModal(null)}
+          submit={
+            <Disabled disabled={isSubmitting}>
+              <Button
+                variant="danger"
+                onClick={() => {
+                  handleAction(() => deleteUser(user.email), "User deleted");
+                }}
+              >
+                Delete
+              </Button>
+            </Disabled>
+          }
+        >
+          <Text as="p" text03>
+            <Text as="span" text05>
+              {user.email}
+            </Text>{" "}
+            will be permanently removed from Onyx. All of their session history
+            will be deleted. Deletion cannot be undone.
+          </Text>
+        </ConfirmationModalLayout>
+      )}
+    </>
+  );
+}

web/src/refresh-pages/admin/UsersPage/UsersSummary.tsx

@@ -1,32 +1,49 @@
-import { SvgArrowUpRight, SvgUserSync } from "@opal/icons";
+import { SvgArrowUpRight, SvgFilterPlus, SvgUserSync } from "@opal/icons";
 import { ContentAction } from "@opal/layouts";
 import { Button } from "@opal/components";
 import { Section } from "@/layouts/general-layouts";
 import Card from "@/refresh-components/cards/Card";
+import IconButton from "@/refresh-components/buttons/IconButton";
 import Text from "@/refresh-components/texts/Text";
 import Link from "next/link";
 import { ADMIN_PATHS } from "@/lib/admin-routes";
 
 // ---------------------------------------------------------------------------
-// Stats cell — number + label
+// Stats cell — number + label + hover filter icon
 // ---------------------------------------------------------------------------
 
 type StatCellProps = {
   value: number | null;
   label: string;
+  onFilter?: () => void;
 };
 
-function StatCell({ value, label }: StatCellProps) {
+function StatCell({ value, label, onFilter }: StatCellProps) {
   const display = value === null ? "\u2014" : value.toLocaleString();
 
   return (
-    <div className="flex flex-col items-start gap-0.5 w-full p-2">
+    <div
+      className="group/stat relative flex flex-col items-start gap-0.5 w-full p-2 rounded-08 transition-colors cursor-pointer hover:bg-background-tint-02"
+      onClick={onFilter}
+    >
       <Text as="span" mainUiAction text04>
         {display}
       </Text>
       <Text as="span" secondaryBody text03>
         {label}
       </Text>
+      <IconButton
+        tertiary
+        icon={SvgFilterPlus}
+        tooltip="Add Filter"
+        toolTipPosition="left"
+        tooltipSize="sm"
+        className="absolute right-1 top-1 opacity-0 group-hover/stat:opacity-100 transition-opacity"
+        onClick={(e) => {
+          e.stopPropagation();
+          onFilter?.();
+        }}
+      />
     </div>
   );
 }
@@ -66,6 +83,9 @@ type UsersSummaryProps = {
   pendingInvites: number | null;
   requests: number | null;
   showScim: boolean;
+  onFilterActive?: () => void;
+  onFilterInvites?: () => void;
+  onFilterRequests?: () => void;
 };
 
 export default function UsersSummary({
@@ -73,9 +93,36 @@ export default function UsersSummary({
   pendingInvites,
   requests,
   showScim,
+  onFilterActive,
+  onFilterInvites,
+  onFilterRequests,
 }: UsersSummaryProps) {
   const showRequests = requests !== null && requests > 0;
 
+  const statsCard = (
+    <Card padding={0.5}>
+      <Section flexDirection="row" gap={0}>
+        <StatCell
+          value={activeUsers}
+          label="active users"
+          onFilter={onFilterActive}
+        />
+        <StatCell
+          value={pendingInvites}
+          label="pending invites"
+          onFilter={onFilterInvites}
+        />
+        {showRequests && (
+          <StatCell
+            value={requests}
+            label="requests to join"
+            onFilter={onFilterRequests}
+          />
+        )}
+      </Section>
+    </Card>
+  );
+
   if (showScim) {
     return (
       <Section
@@ -84,15 +131,7 @@ export default function UsersSummary({
         alignItems="stretch"
         gap={0.5}
       >
-        <Card padding={0.5}>
-          <Section flexDirection="row" gap={0}>
-            <StatCell value={activeUsers} label="active users" />
-            <StatCell value={pendingInvites} label="pending invites" />
-            {showRequests && (
-              <StatCell value={requests} label="requests to join" />
-            )}
-          </Section>
-        </Card>
+        {statsCard}
         <ScimCard />
       </Section>
     );
@@ -102,14 +141,26 @@ export default function UsersSummary({
   return (
     <Section flexDirection="row" gap={0.5}>
       <Card padding={0.5}>
-        <StatCell value={activeUsers} label="active users" />
+        <StatCell
+          value={activeUsers}
+          label="active users"
+          onFilter={onFilterActive}
+        />
       </Card>
       <Card padding={0.5}>
-        <StatCell value={pendingInvites} label="pending invites" />
+        <StatCell
+          value={pendingInvites}
+          label="pending invites"
+          onFilter={onFilterInvites}
+        />
       </Card>
       {showRequests && (
         <Card padding={0.5}>
-          <StatCell value={requests} label="requests to join" />
+          <StatCell
+            value={requests}
+            label="requests to join"
+            onFilter={onFilterRequests}
+          />
         </Card>
       )}
     </Section>

web/src/refresh-pages/admin/UsersPage/UsersTable.tsx

@@ -0,0 +1,265 @@
+"use client";
+
+import { useMemo, useState } from "react";
+import DataTable from "@/refresh-components/table/DataTable";
+import { createTableColumns } from "@/refresh-components/table/columns";
+import { Content } from "@opal/layouts";
+import SvgNoResult from "@opal/illustrations/no-result";
+import { IllustrationContent } from "@opal/layouts";
+import SimpleLoader from "@/refresh-components/loaders/SimpleLoader";
+import { UserRole, UserStatus, USER_STATUS_LABELS } from "@/lib/types";
+import { timeAgo } from "@/lib/time";
+import Text from "@/refresh-components/texts/Text";
+import InputTypeIn from "@/refresh-components/inputs/InputTypeIn";
+import useAdminUsers from "@/hooks/useAdminUsers";
+import useGroups from "@/hooks/useGroups";
+import UserFilters from "./UserFilters";
+import UserRowActions from "./UserRowActions";
+import UserRoleCell from "./UserRoleCell";
+import type {
+  UserRow,
+  UserGroupInfo,
+  GroupOption,
+  StatusFilter,
+} from "./interfaces";
+import { getInitials } from "./utils";
+
+// ---------------------------------------------------------------------------
+// Column renderers
+// ---------------------------------------------------------------------------
+
+function renderNameColumn(email: string, row: UserRow) {
+  return (
+    <Content
+      sizePreset="main-ui"
+      variant="section"
+      title={row.personal_name ?? email}
+      description={row.personal_name ? email : undefined}
+    />
+  );
+}
+
+function renderGroupsColumn(groups: UserGroupInfo[]) {
+  if (!groups.length) {
+    return (
+      <Text as="span" secondaryBody text03>
+        {"\u2014"}
+      </Text>
+    );
+  }
+  const visible = groups.slice(0, 2);
+  const overflow = groups.length - visible.length;
+  return (
+    <div className="flex items-center gap-1 flex-nowrap overflow-hidden min-w-0">
+      {visible.map((g) => (
+        <span
+          key={g.id}
+          className="inline-flex items-center flex-shrink-0 rounded-md bg-background-tint-02 px-2 py-0.5 whitespace-nowrap"
+        >
+          <Text as="span" secondaryBody text03>
+            {g.name}
+          </Text>
+        </span>
+      ))}
+      {overflow > 0 && (
+        <Text as="span" secondaryBody text03>
+          +{overflow}
+        </Text>
+      )}
+    </div>
+  );
+}
+
+function renderStatusColumn(value: UserStatus, row: UserRow) {
+  return (
+    <div className="flex flex-col">
+      <Text as="span" mainUiBody text03>
+        {USER_STATUS_LABELS[value] ?? value}
+      </Text>
+      {row.is_scim_synced && (
+        <Text as="span" secondaryBody text03>
+          SCIM synced
+        </Text>
+      )}
+    </div>
+  );
+}
+
+function renderLastUpdatedColumn(value: string | null) {
+  return (
+    <Text as="span" secondaryBody text03>
+      {timeAgo(value) ?? "\u2014"}
+    </Text>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Columns
+// ---------------------------------------------------------------------------
+
+const tc = createTableColumns<UserRow>();
+
+function buildColumns(onMutate: () => void) {
+  return [
+    tc.qualifier({
+      content: "avatar-user",
+      getInitials: (row) => getInitials(row.personal_name, row.email),
+      selectable: false,
+    }),
+    tc.column("email", {
+      header: "Name",
+      weight: 22,
+      minWidth: 140,
+      cell: renderNameColumn,
+    }),
+    tc.column("groups", {
+      header: "Groups",
+      weight: 24,
+      minWidth: 200,
+      enableSorting: false,
+      cell: renderGroupsColumn,
+    }),
+    tc.column("role", {
+      header: "Account Type",
+      weight: 16,
+      minWidth: 180,
+      cell: (_value, row) => <UserRoleCell user={row} onMutate={onMutate} />,
+    }),
+    tc.column("status", {
+      header: "Status",
+      weight: 14,
+      minWidth: 100,
+      cell: renderStatusColumn,
+    }),
+    tc.column("updated_at", {
+      header: "Last Updated",
+      weight: 14,
+      minWidth: 100,
+      cell: renderLastUpdatedColumn,
+    }),
+    tc.actions({
+      cell: (row) => <UserRowActions user={row} onMutate={onMutate} />,
+    }),
+  ];
+}
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
+const PAGE_SIZE = 8;
+
+interface UsersTableProps {
+  selectedStatuses: StatusFilter;
+  onStatusesChange: (statuses: StatusFilter) => void;
+  roleCounts: Record<string, number>;
+  statusCounts: Record<string, number>;
+}
+
+export default function UsersTable({
+  selectedStatuses,
+  onStatusesChange,
+  roleCounts,
+  statusCounts,
+}: UsersTableProps) {
+  const [searchTerm, setSearchTerm] = useState("");
+  const [selectedRoles, setSelectedRoles] = useState<UserRole[]>([]);
+  const [selectedGroups, setSelectedGroups] = useState<number[]>([]);
+
+  const { data: allGroups } = useGroups();
+
+  const groupOptions: GroupOption[] = useMemo(
+    () =>
+      (allGroups ?? []).map((g) => ({
+        id: g.id,
+        name: g.name,
+        memberCount: g.users.length,
+      })),
+    [allGroups]
+  );
+
+  const { users, isLoading, error, refresh } = useAdminUsers();
+
+  const columns = useMemo(() => buildColumns(() => refresh()), [refresh]);
+
+  // Client-side filtering
+  const filteredUsers = useMemo(() => {
+    let result = users;
+
+    if (selectedRoles.length > 0) {
+      result = result.filter(
+        (u) => u.role !== null && selectedRoles.includes(u.role)
+      );
+    }
+
+    if (selectedStatuses.length > 0) {
+      result = result.filter((u) => selectedStatuses.includes(u.status));
+    }
+
+    if (selectedGroups.length > 0) {
+      result = result.filter((u) =>
+        u.groups.some((g) => selectedGroups.includes(g.id))
+      );
+    }
+
+    return result;
+  }, [users, selectedRoles, selectedStatuses, selectedGroups]);
+
+  if (isLoading) {
+    return (
+      <div className="flex justify-center py-12">
+        <SimpleLoader className="h-6 w-6" />
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <Text as="p" secondaryBody text03>
+        Failed to load users. Please try refreshing the page.
+      </Text>
+    );
+  }
+
+  return (
+    <div className="flex flex-col gap-3">
+      <InputTypeIn
+        value={searchTerm}
+        onChange={(e) => setSearchTerm(e.target.value)}
+        placeholder="Search users..."
+        leftSearchIcon
+      />
+      <UserFilters
+        selectedRoles={selectedRoles}
+        onRolesChange={setSelectedRoles}
+        selectedGroups={selectedGroups}
+        onGroupsChange={setSelectedGroups}
+        groups={groupOptions}
+        selectedStatuses={selectedStatuses}
+        onStatusesChange={onStatusesChange}
+        roleCounts={roleCounts}
+        statusCounts={statusCounts}
+      />
+      {filteredUsers.length === 0 ? (
+        <IllustrationContent
+          illustration={SvgNoResult}
+          title="No users found"
+          description={
+            searchTerm
+              ? "Try a different search term or adjust your filters."
+              : "No users match the current filters."
+          }
+        />
+      ) : (
+        <DataTable
+          data={filteredUsers}
+          columns={columns}
+          getRowId={(row) => row.id ?? row.email}
+          pageSize={PAGE_SIZE}
+          searchTerm={searchTerm}
+          footer={{ mode: "summary" }}
+        />
+      )}
+    </div>
+  );
+}

web/src/refresh-pages/admin/UsersPage/interfaces.ts

@@ -0,0 +1,28 @@
+import type { UserRole, UserStatus } from "@/lib/types";
+
+export interface UserGroupInfo {
+  id: number;
+  name: string;
+}
+
+export interface UserRow {
+  id: string | null;
+  email: string;
+  role: UserRole | null;
+  status: UserStatus;
+  is_active: boolean;
+  is_scim_synced: boolean;
+  personal_name: string | null;
+  created_at: string | null;
+  updated_at: string | null;
+  groups: UserGroupInfo[];
+}
+
+export interface GroupOption {
+  id: number;
+  name: string;
+  memberCount?: number;
+}
+
+/** Empty array = no filter (show all). */
+export type StatusFilter = UserStatus[];

web/src/refresh-pages/admin/UsersPage/svc.ts

@@ -0,0 +1,120 @@
+export async function deactivateUser(email: string): Promise<void> {
+  const res = await fetch("/api/manage/admin/deactivate-user", {
+    method: "PATCH",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ user_email: email }),
+  });
+  if (!res.ok) {
+    const detail = (await res.json()).detail;
+    throw new Error(detail ?? "Failed to deactivate user");
+  }
+}
+
+export async function activateUser(email: string): Promise<void> {
+  const res = await fetch("/api/manage/admin/activate-user", {
+    method: "PATCH",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ user_email: email }),
+  });
+  if (!res.ok) {
+    const detail = (await res.json()).detail;
+    throw new Error(detail ?? "Failed to activate user");
+  }
+}
+
+export async function deleteUser(email: string): Promise<void> {
+  const res = await fetch("/api/manage/admin/delete-user", {
+    method: "DELETE",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ user_email: email }),
+  });
+  if (!res.ok) {
+    const detail = (await res.json()).detail;
+    throw new Error(detail ?? "Failed to delete user");
+  }
+}
+
+export async function setUserRole(
+  email: string,
+  newRole: string
+): Promise<void> {
+  const res = await fetch("/api/manage/set-user-role", {
+    method: "PATCH",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ user_email: email, new_role: newRole }),
+  });
+  if (!res.ok) {
+    const detail = (await res.json()).detail;
+    throw new Error(detail ?? "Failed to update user role");
+  }
+}
+
+export async function addUserToGroup(
+  groupId: number,
+  userId: string
+): Promise<void> {
+  const res = await fetch(`/api/manage/admin/user-group/${groupId}/add-users`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ user_ids: [userId] }),
+  });
+  if (!res.ok) {
+    const detail = (await res.json()).detail;
+    throw new Error(detail ?? "Failed to add user to group");
+  }
+}
+
+export async function removeUserFromGroup(
+  groupId: number,
+  currentUserIds: string[],
+  userIdToRemove: string
+): Promise<void> {
+  const res = await fetch(`/api/manage/admin/user-group/${groupId}`, {
+    method: "PATCH",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({
+      user_ids: currentUserIds.filter((id) => id !== userIdToRemove),
+      cc_pair_ids: [],
+    }),
+  });
+  if (!res.ok) {
+    const detail = (await res.json()).detail;
+    throw new Error(detail ?? "Failed to remove user from group");
+  }
+}
+
+export async function cancelInvite(email: string): Promise<void> {
+  const res = await fetch("/api/manage/admin/remove-invited-user", {
+    method: "PATCH",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ user_email: email }),
+  });
+  if (!res.ok) {
+    const detail = (await res.json()).detail;
+    throw new Error(detail ?? "Failed to cancel invite");
+  }
+}
+
+export async function approveRequest(email: string): Promise<void> {
+  const res = await fetch("/api/tenants/users/invite/approve", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ email }),
+  });
+  if (!res.ok) {
+    const detail = (await res.json()).detail;
+    throw new Error(detail ?? "Failed to approve request");
+  }
+}
+
+export async function inviteUsers(emails: string[]): Promise<void> {
+  const res = await fetch("/api/manage/admin/users", {
+    method: "PUT",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ emails }),
+  });
+  if (!res.ok) {
+    const detail = (await res.json()).detail;
+    throw new Error(detail ?? "Failed to invite users");
+  }
+}

web/src/refresh-pages/admin/UsersPage/utils.test.ts

@@ -0,0 +1,43 @@
+import { getInitials } from "./utils";
+
+describe("getInitials", () => {
+  it("returns first letters of first two name parts", () => {
+    expect(getInitials("Alice Smith", "alice@example.com")).toBe("AS");
+  });
+
+  it("returns first two chars of a single-word name", () => {
+    expect(getInitials("Alice", "alice@example.com")).toBe("AL");
+  });
+
+  it("handles three-word names (uses first two)", () => {
+    expect(getInitials("Alice B. Smith", "alice@example.com")).toBe("AB");
+  });
+
+  it("falls back to email local part with dot separator", () => {
+    expect(getInitials(null, "alice.smith@example.com")).toBe("AS");
+  });
+
+  it("falls back to email local part with underscore separator", () => {
+    expect(getInitials(null, "alice_smith@example.com")).toBe("AS");
+  });
+
+  it("falls back to email local part with hyphen separator", () => {
+    expect(getInitials(null, "alice-smith@example.com")).toBe("AS");
+  });
+
+  it("uses first two chars of email local if no separator", () => {
+    expect(getInitials(null, "alice@example.com")).toBe("AL");
+  });
+
+  it("returns ? for empty email local part", () => {
+    expect(getInitials(null, "@example.com")).toBe("?");
+  });
+
+  it("uppercases the result", () => {
+    expect(getInitials("john doe", "jd@test.com")).toBe("JD");
+  });
+
+  it("trims whitespace from name", () => {
+    expect(getInitials("  Alice Smith  ", "a@test.com")).toBe("AS");
+  });
+});

web/src/refresh-pages/admin/UsersPage/utils.ts

@@ -0,0 +1,23 @@
+/**
+ * Derive display initials from a user's name or email.
+ *
+ * - If a name is provided, uses the first letter of the first two words.
+ * - Falls back to the email local part, splitting on `.`, `_`, or `-`.
+ * - Returns at most 2 uppercase characters.
+ */
+export function getInitials(name: string | null, email: string): string {
+  if (name) {
+    const parts = name.trim().split(/\s+/);
+    if (parts.length >= 2) {
+      return ((parts[0]?.[0] ?? "") + (parts[1]?.[0] ?? "")).toUpperCase();
+    }
+    return name.slice(0, 2).toUpperCase();
+  }
+  const local = email.split("@")[0];
+  if (!local) return "?";
+  const parts = local.split(/[._-]/);
+  if (parts.length >= 2) {
+    return ((parts[0]?.[0] ?? "") + (parts[1]?.[0] ?? "")).toUpperCase();
+  }
+  return local.slice(0, 2).toUpperCase();
+}