update

backend/app/tenant_routes.py

@@ -162,7 +162,7 @@ async def create_invitation(body: InviteBody, tc: TenantContext = Depends(requir
 
 @router.get("/members")
 def list_tenant_members(tc: TenantContext = Depends(require_tenant_admin)):
-    """List users in the current workspace (admin only)."""
+    """List workspace members and pending invitations (admin only)."""
     db = tc.db
     rows = (
         db.query(TenantMembership, User)
@@ -171,19 +171,79 @@ def list_tenant_members(tc: TenantContext = Depends(require_tenant_admin)):
         .order_by(User.email)
         .all()
     )
-    members = []
+    member_emails: set[str] = set()
+    members: list[dict] = []
     for m, u in rows:
+        em = (u.email or "").strip().lower()
+        if em:
+            member_emails.add(em)
         members.append(
             {
                 "user_id": u.id,
+                "invitation_id": None,
                 "email": u.email or "",
                 "name": u.name or "",
                 "role": m.role,
+                "status": "active",
             }
         )
+
+    now = datetime.utcnow()
+    pending = (
+        db.query(Invitation)
+        .filter(
+            Invitation.tenant_id == tc.tenant_id,
+            Invitation.accepted_at.is_(None),
+            Invitation.expires_at > now,
+        )
+        .order_by(Invitation.created_at.desc())
+        .all()
+    )
+    pending_latest: dict[str, Invitation] = {}
+    for inv in pending:
+        key = (inv.email or "").strip().lower()
+        if key and key not in pending_latest:
+            pending_latest[key] = inv
+
+    for key, inv in pending_latest.items():
+        if key in member_emails:
+            continue
+        members.append(
+            {
+                "user_id": None,
+                "invitation_id": inv.id,
+                "email": inv.email or "",
+                "name": "",
+                "role": inv.role or "member",
+                "status": "invited",
+            }
+        )
+
+    members.sort(key=lambda x: (x.get("email") or "").lower())
     return {"members": members}
 
 
+@router.delete("/invitations/{invitation_id}")
+def revoke_tenant_invitation(
+    invitation_id: int,
+    tc: TenantContext = Depends(require_tenant_admin),
+):
+    """Remove a pending invitation before it is accepted."""
+    db = tc.db
+    inv = (
+        db.query(Invitation)
+        .filter(Invitation.id == invitation_id, Invitation.tenant_id == tc.tenant_id)
+        .first()
+    )
+    if not inv:
+        raise HTTPException(status_code=404, detail="Invitation not found")
+    if inv.accepted_at is not None:
+        raise HTTPException(status_code=400, detail="Invitation already accepted")
+    db.delete(inv)
+    db.commit()
+    return {"ok": True}
+
+
 @router.delete("/members/{member_user_id}")
 def remove_tenant_member(
     member_user_id: int,

frontend/src/components/layout/AppShell.jsx

@@ -129,11 +129,13 @@ export default function AppShell({ title, subtitle, rightContent, children }) {
                             const Icon = item.icon;
                             const active = pathMatches(location.pathname, item.href);
                             const activeHighlight = active && !sidebarCollapsed;
+                            const collapsedActive = active && sidebarCollapsed;
                             return (
                                 <Link
                                     to={item.href}
                                     key={item.href}
                                     title={sidebarCollapsed ? item.label : undefined}
+                                    aria-current={active ? 'page' : undefined}
                                     className={cn(
                                         'flex rounded-2xl py-3 transition-all',
                                         sidebarCollapsed
@@ -146,13 +148,15 @@ export default function AppShell({ title, subtitle, rightContent, children }) {
                                 >
                                     <div
                                         className={cn(
-                                            'flex h-10 w-10 shrink-0 items-center justify-center rounded-xl border',
+                                            'flex h-10 w-10 shrink-0 items-center justify-center rounded-xl border transition-colors',
                                             activeHighlight
                                                 ? 'border-violet-200 bg-white text-violet-600'
-                                                : 'border-slate-200 bg-white text-slate-500'
+                                                : collapsedActive
+                                                  ? 'border-violet-300 bg-violet-50/90 text-violet-800'
+                                                  : 'border-slate-200 bg-white text-slate-500'
                                         )}
                                     >
-                                        <Icon className="h-5 w-5" />
+                                        <Icon className="h-5 w-5" strokeWidth={collapsedActive ? 2.25 : 2} />
                                     </div>
                                     {!sidebarCollapsed && (
                                         <span

frontend/src/pages/Deals.jsx

@@ -977,7 +977,11 @@ export default function Deals() {
         }
         apiFetch('/api/tenants/members')
             .then((r) => (r.ok ? r.json() : null))
-            .then((d) => setTenantMembers(d?.members || []))
+            .then((d) =>
+                setTenantMembers(
+                    (d?.members || []).filter((x) => x.user_id != null)
+                )
+            )
             .catch(() => setTenantMembers([]));
     }, [me]);
 

frontend/src/pages/SalesDashboard.jsx

@@ -374,7 +374,11 @@ export default function SalesDashboard() {
         }
         apiFetch('/api/tenants/members')
             .then((r) => (r.ok ? r.json() : null))
-            .then((d) => setTenantMembers(d?.members || []))
+            .then((d) =>
+                setTenantMembers(
+                    (d?.members || []).filter((x) => x.user_id != null)
+                )
+            )
             .catch(() => setTenantMembers([]));
     }, [me, isAdmin]);
 

frontend/src/pages/Settings.jsx

@@ -39,7 +39,8 @@ export default function Settings() {
     const [inviteBusy, setInviteBusy] = useState(false);
     const [inviteResult, setInviteResult] = useState(null);
 
-    const [removeBusyId, setRemoveBusyId] = useState(null);
+    /** e.g. `member:12` or `invite:3` while a remove/revoke request is in flight */
+    const [removeBusyKey, setRemoveBusyKey] = useState(null);
 
     const loadMe = useCallback(async () => {
         setMeLoading(true);
@@ -143,6 +144,7 @@ export default function Settings() {
             });
             setInviteEmail('');
             loadMe();
+            await loadMembers();
         } catch (e) {
             setInviteResult({ error: String(e) });
         } finally {
@@ -152,7 +154,7 @@ export default function Settings() {
 
     const removeMember = async (userId) => {
         if (!window.confirm('Remove this user from the workspace?')) return;
-        setRemoveBusyId(userId);
+        setRemoveBusyKey(`member:${userId}`);
         try {
             const res = await apiFetch(`/api/tenants/members/${userId}`, { method: 'DELETE' });
             const data = await res.json().catch(() => ({}));
@@ -164,7 +166,26 @@ export default function Settings() {
         } catch (e) {
             alert(e.message || 'Could not remove member');
         } finally {
-            setRemoveBusyId(null);
+            setRemoveBusyKey(null);
+        }
+    };
+
+    const revokeInvitation = async (invitationId) => {
+        if (!window.confirm('Cancel this invitation? They will not be able to join with the current link.'))
+            return;
+        setRemoveBusyKey(`invite:${invitationId}`);
+        try {
+            const res = await apiFetch(`/api/tenants/invitations/${invitationId}`, { method: 'DELETE' });
+            const data = await res.json().catch(() => ({}));
+            if (!res.ok) {
+                alert(typeof data.detail === 'string' ? data.detail : 'Could not cancel invitation');
+                return;
+            }
+            await loadMembers();
+        } catch (e) {
+            alert(e.message || 'Could not cancel invitation');
+        } finally {
+            setRemoveBusyKey(null);
         }
     };
 
@@ -314,7 +335,7 @@ export default function Settings() {
                     ) : membersError ? (
                         <p className="text-sm text-red-600">{membersError}</p>
                     ) : members.length === 0 ? (
-                        <p className="text-sm text-slate-500">No members found.</p>
+                        <p className="text-sm text-slate-500">No members or pending invitations.</p>
                     ) : (
                         <div className="overflow-x-auto rounded-xl border border-slate-100">
                             <table className="w-full text-sm text-left">
@@ -323,15 +344,23 @@ export default function Settings() {
                                         <th className="px-4 py-3 font-medium text-slate-600">Email</th>
                                         <th className="px-4 py-3 font-medium text-slate-600">Name</th>
                                         <th className="px-4 py-3 font-medium text-slate-600">Role</th>
-                                        <th className="px-4 py-3 font-medium text-slate-600 w-24" />
+                                        <th className="px-4 py-3 font-medium text-slate-600">Status</th>
+                                        <th className="px-4 py-3 font-medium text-slate-600 w-28" />
                                     </tr>
                                 </thead>
                                 <tbody>
                                     {members.map((m) => {
+                                        const rowKey =
+                                            m.user_id != null ? `m-${m.user_id}` : `i-${m.invitation_id}`;
                                         const isSelf = m.user_id === me.user_id;
+                                        const isInvited = m.status === 'invited';
+                                        const busyMember = removeBusyKey === `member:${m.user_id}`;
+                                        const busyInvite =
+                                            m.invitation_id != null &&
+                                            removeBusyKey === `invite:${m.invitation_id}`;
                                         return (
                                             <tr
-                                                key={m.user_id}
+                                                key={rowKey}
                                                 className="border-b border-slate-50 last:border-0"
                                             >
                                                 <td className="px-4 py-3 text-slate-900">
@@ -352,22 +381,50 @@ export default function Settings() {
                                                         {m.role}
                                                     </span>
                                                 </td>
+                                                <td className="px-4 py-3">
+                                                    <span
+                                                        className={cn(
+                                                            'inline-flex rounded-full px-2 py-0.5 text-xs font-medium',
+                                                            isInvited
+                                                                ? 'bg-amber-50 text-amber-900 ring-1 ring-amber-200/80'
+                                                                : 'bg-emerald-50 text-emerald-900 ring-1 ring-emerald-200/80'
+                                                        )}
+                                                    >
+                                                        {isInvited ? 'Invited' : 'Active'}
+                                                    </span>
+                                                </td>
                                                 <td className="px-4 py-3 text-right">
                                                     {isSelf ? (
                                                         <span className="text-xs text-slate-400">
                                                             You
                                                         </span>
+                                                    ) : isInvited ? (
+                                                        <Button
+                                                            type="button"
+                                                            variant="ghost"
+                                                            size="sm"
+                                                            className="h-8 text-red-600 hover:text-red-700 hover:bg-red-50"
+                                                            disabled={busyInvite}
+                                                            onClick={() => revokeInvitation(m.invitation_id)}
+                                                            title="Cancel invitation"
+                                                        >
+                                                            {busyInvite ? (
+                                                                <Loader2 className="h-4 w-4 animate-spin" />
+                                                            ) : (
+                                                                <Trash2 className="h-4 w-4" />
+                                                            )}
+                                                        </Button>
                                                     ) : (
                                                         <Button
                                                             type="button"
                                                             variant="ghost"
                                                             size="sm"
                                                             className="h-8 text-red-600 hover:text-red-700 hover:bg-red-50"
-                                                            disabled={removeBusyId === m.user_id}
+                                                            disabled={busyMember}
                                                             onClick={() => removeMember(m.user_id)}
                                                             title="Remove from workspace"
                                                         >
-                                                            {removeBusyId === m.user_id ? (
+                                                            {busyMember ? (
                                                                 <Loader2 className="h-4 w-4 animate-spin" />
                                                             ) : (
                                                                 <Trash2 className="h-4 w-4" />