> ## Documentation Index
> Fetch the complete documentation index at: https://docs.topsort.com/llms.txt
> Use this file to discover all available pages before exploring further.

# User Management UI

> Enhanced user management with filters, inline editing, invitation controls, and quick actions

export const ChangelogActions = () => {
  return <>
      <style>{`
        .changelog-actions {
          display: flex;
          justify-content: center;
          gap: 12px;
          margin-top: 2rem;
          padding-top: 1.5rem;
          border-top: 1px solid #e5e7eb;
        }
        
        [data-theme="dark"] .changelog-actions {
          border-top-color: #374151;
        }
        
        .changelog-btn {
          display: inline-flex;
          align-items: center;
          gap: 6px;
          padding: 8px 16px;
          border-radius: 9999px;
          border: 1px solid #d1d5db;
          background: transparent;
          color: #6b7280;
          font-size: 14px;
          cursor: pointer;
          transition: all 0.2s ease;
        }
        
        .changelog-btn:hover {
          border-color: #9ca3af;
          background: #f9fafb;
        }
        
        [data-theme="dark"] .changelog-btn {
          border-color: #4b5563;
          color: #9ca3af;
        }
        
        [data-theme="dark"] .changelog-btn:hover {
          border-color: #6b7280;
          background: #1f2937;
        }
      `}</style>
      <div className="changelog-actions">
        <button className="changelog-btn" onClick={() => {
    const btn = event.target.closest("button");
    btn.innerHTML = "❤️ Like";
    btn.style.borderColor = "#ec4899";
  }}>
          🤍 Like
        </button>
        <button className="changelog-btn" onClick={() => {
    const btn = event.target.closest("button");
    navigator.clipboard.writeText(window.location.href);
    const originalContent = btn.innerHTML;
    btn.innerHTML = "✓ Copied";
    btn.style.borderColor = "#22c55e";
    btn.style.color = "#22c55e";
    setTimeout(() => {
      btn.innerHTML = originalContent;
      btn.style.borderColor = "";
      btn.style.color = "";
    }, 2000);
  }}>
          ↗ Share
        </button>
      </div>
    </>;
};

<div className="cl-badge-group">
  <Badge color="gray" size="sm" icon="calendar">
    January 30, 2026
  </Badge>

  <Badge color="blue" size="sm" icon="rectangle-ad">
    Ad Platform
  </Badge>

  <Badge color="green" size="sm" icon="sparkles">
    New Feature
  </Badge>

  <Badge color="orange" size="sm" icon="arrow-up">
    Update
  </Badge>
</div>

<div className="cl-mockup-wrapper">
  <div className="cl-mockup-card" style={{ maxWidth: "520px" }}>
    <div
      style={{
    display: "flex",
    justifyContent: "space-between",
    alignItems: "center",
    marginBottom: "12px",
    paddingBottom: "12px",
    borderBottom: "1px solid #E5E7EB"
  }}
    >
      <div style={{ height: "14px", width: "140px", background: "linear-gradient(90deg, #6B7280, #9CA3AF)", borderRadius: "2px" }} />

      <div style={{ display: "flex", gap: "8px" }}>
        <div style={{ height: "10px", width: "60px", background: "#E8E8ED", borderRadius: "12px" }} />

        <div style={{ height: "10px", width: "50px", background: "#E8E8ED", borderRadius: "12px" }} />
      </div>
    </div>

    <div style={{ display: "flex", gap: "8px", marginBottom: "12px" }}>
      <div
        style={{
    fontSize: "9px",
    fontWeight: "600",
    padding: "4px 10px",
    borderRadius: "6px",
    background: "#F3F4F6",
    color: "#6B7280",
    border: "1px solid #E5E7EB"
  }}
      >
        Status ▾
      </div>

      <div
        style={{
    fontSize: "9px",
    fontWeight: "600",
    padding: "4px 10px",
    borderRadius: "6px",
    background: "#F3F4F6",
    color: "#6B7280",
    border: "1px solid #E5E7EB"
  }}
      >
        Role ▾
      </div>
    </div>

    <div style={{ display: "flex", flexDirection: "column", gap: "10px" }}>
      {[
                  { name: "Maria Santos", status: "Active", statusColor: "#22C55E", statusBg: "#DCFCE7", role: "Admin" },
                  { name: "John Chen", status: "Pending", statusColor: "#F59E0B", statusBg: "#FEF3C7", role: "Sales" },
                  { name: "Alex Kim", status: "Expired", statusColor: "#EF4444", statusBg: "#FEE2E2", role: "Analytics" }
                ].map((user, i) => (
                  <div key={i} style={{
                    display: "flex",
                    alignItems: "center",
                    justifyContent: "space-between",
                    padding: "12px",
                    background: "#F9FAFB",
                    borderRadius: "8px",
                    border: "1px solid #E5E7EB"
                  }}>
                    <div style={{ display: "flex", alignItems: "center", gap: "12px" }}>
                      <div style={{
                        width: "36px",
                        height: "36px",
                        borderRadius: "50%",
                        background: "#E8E8ED",
                        display: "flex",
                        alignItems: "center",
                        justifyContent: "center",
                        fontSize: "12px",
                        fontWeight: "600",
                        color: "#6B7280"
                      }}>
                        {user.name.split(' ').map(n => n[0]).join('')}
                      </div>
                      <div>
                        <div style={{ height: "12px", width: "100px", background: "#D1D5DB", borderRadius: "2px", marginBottom: "4px" }} />
                        <div style={{ height: "8px", width: "70px", background: "#E8E8ED", borderRadius: "2px" }} />
                      </div>
                    </div>
                    <div style={{ display: "flex", alignItems: "center", gap: "10px" }}>
                      <div style={{
                        fontSize: "10px",
                        fontWeight: "600",
                        padding: "4px 10px",
                        borderRadius: "12px",
                        background: user.statusBg,
                        color: user.statusColor
                      }}>
                        {user.status}
                      </div>
                      <div style={{
                        fontSize: "10px",
                        fontWeight: "500",
                        padding: "4px 10px",
                        borderRadius: "12px",
                        background: "#DBEAFE",
                        color: "#3B82F6"
                      }}>
                        {user.role}
                      </div>
                      <div style={{
                        width: "24px",
                        height: "24px",
                        borderRadius: "4px",
                        background: "#E8E8ED",
                        display: "flex",
                        alignItems: "center",
                        justifyContent: "center",
                        cursor: "pointer"
                      }}>
                        <span style={{ color: "#9CA3AF", fontSize: "14px" }}>⋯</span>
                      </div>
                    </div>
                  </div>
                ))}
    </div>

    <div
      style={{
  display: "flex",
  gap: "6px",
  marginTop: "10px",
  padding: "8px 10px",
  background: "#FFFFFF",
  border: "1px solid #E5E7EB",
  borderRadius: "6px",
  width: "fit-content",
  marginLeft: "auto"
}}
    >
      {["Resend Invite", "Edit", "Copy Link", "Delete"].map((action, i) => (
                  <div key={i} style={{
                    fontSize: "8px",
                    fontWeight: "500",
                    padding: "3px 8px",
                    borderRadius: "4px",
                    background: i === 3 ? "#FEE2E2" : "#F3F4F6",
                    color: i === 3 ? "#EF4444" : "#374151"
                  }}>
                    {action}
                  </div>
                ))}
    </div>

    <div
      style={{
    display: "flex",
    alignItems: "center",
    justifyContent: "space-between",
    marginTop: "12px",
    paddingTop: "12px",
    borderTop: "1px solid #E5E7EB"
  }}
    >
      <div style={{ height: "8px", width: "80px", background: "#E8E8ED", borderRadius: "2px" }} />

      <div
        style={{
    background: "#3B82F6",
    color: "white",
    fontSize: "11px",
    fontWeight: "600",
    padding: "8px 14px",
    borderRadius: "6px"
  }}
      >
        Invite User
      </div>
    </div>
  </div>
</div>

<Note>
  **Why We Built This**

  Managing users across a growing marketplace shouldn't require support tickets or backend access. The User Management tab puts admins in control—invite users, assign roles, manage vendor access, and handle expired invitations without leaving the dashboard.
</Note>

## The Problem

User administration was fragmented. Inviting new team members, checking invitation status, reassigning vendors, or revoking access required multiple workflows—or escalation to support. Finding a specific user meant scrolling through an unsorted list, and there was no way to resend expired invitations or copy invitation links to share directly.

## The Solution

One unified interface for all user operations with powerful filters and quick actions. See who's active, pending, or expired at a glance. Edit roles and vendor assignments inline. Manage invitations with a full set of actions—resend, copy, or delete—all from a single row.

**Status at a glance.** Active, Pending, Expired—each user's state is immediately visible with color-coded labels.

**Role management.** Assign Admin, Sales, Analytics, or custom roles with clear permission boundaries.

**Vendor control.** For Sales users, assign specific vendors or grant access to all vendors at once.

## What You Can Do

**Filter by status or role.** Narrow your user list instantly—only filter options that exist in your system appear, so there's no noise.

**Edit users inline.** Update names, roles, and vendor assignments without navigating away from the table.

**Resend invitations.** One click to resend an expired or pending invitation—no need to delete and re-invite.

**Copy invitation links.** Grab a shareable invitation link directly from the action menu to send through any channel.

**Delete users.** Remove users entirely when they no longer need access—revocation is immediate.

## Use Cases

**Marketplace admins.** Manage your team without support tickets—invite users, adjust permissions, and handle access issues yourself.

**Operations teams.** Quickly onboard new team members with the right roles and vendor assignments from day one.

**Security-conscious organizations.** Revoke access immediately when team members leave—deleted users lose access instantly.

<div
  style={{
margin: "3rem 0",
height: "3px",
background:
  "linear-gradient(to right, transparent, #00ff88 20%, #00d4ff 40%, #8280ff 60%, #ff6b9d 80%, transparent)",
borderRadius: "2px",
opacity: "0.6",
}}
/>

Available now in the [Ad Platform](https://www.topsort.com/retail-media). Access User Management from the Admin Dashboard.

<ChangelogActions />