Match Runn-style Manage tables for Roles, Teams, Tags

- Backend now returns active_people_count / active_projects_count for
every role, team, and tag so the Manage tables can show usage at a
glance.
- Manage page redesigned with a toolbar (search + "New" pill button),
Runn-style table columns, and a three-dot row menu offering
"Edit Details" and "Delete".
- Counts deep-link to People / Projects with the relevant filter
pre-applied; clear-filter chip is shown when a scoped filter is
active.
- Create and edit flows now use modal dialogs instead of permanent
inline forms.

Co-authored-by: Cursor <cursoragent@cursor.com>

backend/routers/taxonomy.py

@@ -1,11 +1,11 @@
 from fastapi import APIRouter, Depends, HTTPException
-from sqlalchemy import select
+from sqlalchemy import distinct, func, select
 from sqlalchemy.exc import IntegrityError
 from sqlalchemy.orm import Session
 
 from auth import get_current_user, require_manager
 from database import get_db
-from models import Person, Role, Tag, Team
+from models import Allocation, Person, Project, Role, Tag, Team, person_tags, project_tags
 from schemas import (
     RoleCreate,
     RoleRead,
@@ -21,13 +21,81 @@ from schemas import (
 router = APIRouter(dependencies=[Depends(get_current_user)])
 
 
+def _role_payload(role: Role, db: Session) -> dict:
+    people_count = db.scalar(
+        select(func.count(Person.id)).where(Person.role_id == role.id, Person.is_active.is_(True))
+    ) or 0
+    projects_count = db.scalar(
+        select(func.count(distinct(Allocation.project_id)))
+        .join(Person, Person.id == Allocation.person_id)
+        .join(Project, Project.id == Allocation.project_id)
+        .where(
+            Person.role_id == role.id,
+            Person.is_active.is_(True),
+            Project.is_active.is_(True),
+        )
+    ) or 0
+    return {
+        "id": role.id,
+        "name": role.name,
+        "created_at": role.created_at,
+        "active_people_count": int(people_count),
+        "active_projects_count": int(projects_count),
+    }
+
+
+def _team_payload(team: Team, db: Session) -> dict:
+    people_count = db.scalar(
+        select(func.count(Person.id)).where(Person.team_id == team.id, Person.is_active.is_(True))
+    ) or 0
+    projects_count = db.scalar(
+        select(func.count(distinct(Allocation.project_id)))
+        .join(Person, Person.id == Allocation.person_id)
+        .join(Project, Project.id == Allocation.project_id)
+        .where(
+            Person.team_id == team.id,
+            Person.is_active.is_(True),
+            Project.is_active.is_(True),
+        )
+    ) or 0
+    return {
+        "id": team.id,
+        "name": team.name,
+        "created_at": team.created_at,
+        "active_people_count": int(people_count),
+        "active_projects_count": int(projects_count),
+    }
+
+
+def _tag_payload(tag: Tag, db: Session) -> dict:
+    people_count = db.scalar(
+        select(func.count(person_tags.c.person_id))
+        .join(Person, Person.id == person_tags.c.person_id)
+        .where(person_tags.c.tag_id == tag.id, Person.is_active.is_(True))
+    ) or 0
+    projects_count = db.scalar(
+        select(func.count(project_tags.c.project_id))
+        .join(Project, Project.id == project_tags.c.project_id)
+        .where(project_tags.c.tag_id == tag.id, Project.is_active.is_(True))
+    ) or 0
+    return {
+        "id": tag.id,
+        "name": tag.name,
+        "color": tag.color,
+        "created_at": tag.created_at,
+        "active_people_count": int(people_count),
+        "active_projects_count": int(projects_count),
+    }
+
+
 @router.get("/roles", response_model=list[RoleRead])
-def list_roles(db: Session = Depends(get_db)) -> list[Role]:
-    return list(db.scalars(select(Role).order_by(Role.name)))
+def list_roles(db: Session = Depends(get_db)) -> list[dict]:
+    roles = list(db.scalars(select(Role).order_by(Role.name)))
+    return [_role_payload(role, db) for role in roles]
 
 
 @router.post("/roles", response_model=RoleRead, dependencies=[Depends(require_manager)])
-def create_role(payload: RoleCreate, db: Session = Depends(get_db)) -> Role:
+def create_role(payload: RoleCreate, db: Session = Depends(get_db)) -> dict:
     role = Role(name=payload.name.strip())
     db.add(role)
     try:
@@ -36,11 +104,11 @@ def create_role(payload: RoleCreate, db: Session = Depends(get_db)) -> Role:
         db.rollback()
         raise HTTPException(status_code=409, detail="Role name already exists") from exc
     db.refresh(role)
-    return role
+    return _role_payload(role, db)
 
 
 @router.patch("/roles/{role_id}", response_model=RoleRead, dependencies=[Depends(require_manager)])
-def update_role(role_id: int, payload: RoleUpdate, db: Session = Depends(get_db)) -> Role:
+def update_role(role_id: int, payload: RoleUpdate, db: Session = Depends(get_db)) -> dict:
     role = db.get(Role, role_id)
     if not role:
         raise HTTPException(status_code=404, detail="Role not found")
@@ -52,7 +120,7 @@ def update_role(role_id: int, payload: RoleUpdate, db: Session = Depends(get_db)
         db.rollback()
         raise HTTPException(status_code=409, detail="Role name already exists") from exc
     db.refresh(role)
-    return role
+    return _role_payload(role, db)
 
 
 @router.delete("/roles/{role_id}", dependencies=[Depends(require_manager)])
@@ -69,12 +137,13 @@ def delete_role(role_id: int, db: Session = Depends(get_db)) -> dict:
 
 
 @router.get("/teams", response_model=list[TeamRead])
-def list_teams(db: Session = Depends(get_db)) -> list[Team]:
-    return list(db.scalars(select(Team).order_by(Team.name)))
+def list_teams(db: Session = Depends(get_db)) -> list[dict]:
+    teams = list(db.scalars(select(Team).order_by(Team.name)))
+    return [_team_payload(team, db) for team in teams]
 
 
 @router.post("/teams", response_model=TeamRead, dependencies=[Depends(require_manager)])
-def create_team(payload: TeamCreate, db: Session = Depends(get_db)) -> Team:
+def create_team(payload: TeamCreate, db: Session = Depends(get_db)) -> dict:
     team = Team(name=payload.name.strip())
     db.add(team)
     try:
@@ -83,11 +152,11 @@ def create_team(payload: TeamCreate, db: Session = Depends(get_db)) -> Team:
         db.rollback()
         raise HTTPException(status_code=409, detail="Team name already exists") from exc
     db.refresh(team)
-    return team
+    return _team_payload(team, db)
 
 
 @router.patch("/teams/{team_id}", response_model=TeamRead, dependencies=[Depends(require_manager)])
-def update_team(team_id: int, payload: TeamUpdate, db: Session = Depends(get_db)) -> Team:
+def update_team(team_id: int, payload: TeamUpdate, db: Session = Depends(get_db)) -> dict:
     team = db.get(Team, team_id)
     if not team:
         raise HTTPException(status_code=404, detail="Team not found")
@@ -99,7 +168,7 @@ def update_team(team_id: int, payload: TeamUpdate, db: Session = Depends(get_db)
         db.rollback()
         raise HTTPException(status_code=409, detail="Team name already exists") from exc
     db.refresh(team)
-    return team
+    return _team_payload(team, db)
 
 
 @router.delete("/teams/{team_id}", dependencies=[Depends(require_manager)])
@@ -119,12 +188,13 @@ def delete_team(team_id: int, db: Session = Depends(get_db)) -> dict:
 
 
 @router.get("/tags", response_model=list[TagRead])
-def list_tags(db: Session = Depends(get_db)) -> list[Tag]:
-    return list(db.scalars(select(Tag).order_by(Tag.name)))
+def list_tags(db: Session = Depends(get_db)) -> list[dict]:
+    tags = list(db.scalars(select(Tag).order_by(Tag.name)))
+    return [_tag_payload(tag, db) for tag in tags]
 
 
 @router.post("/tags", response_model=TagRead, dependencies=[Depends(require_manager)])
-def create_tag(payload: TagCreate, db: Session = Depends(get_db)) -> Tag:
+def create_tag(payload: TagCreate, db: Session = Depends(get_db)) -> dict:
     tag = Tag(name=payload.name.strip(), color=payload.color)
     db.add(tag)
     try:
@@ -133,11 +203,11 @@ def create_tag(payload: TagCreate, db: Session = Depends(get_db)) -> Tag:
         db.rollback()
         raise HTTPException(status_code=409, detail="Tag name already exists") from exc
     db.refresh(tag)
-    return tag
+    return _tag_payload(tag, db)
 
 
 @router.patch("/tags/{tag_id}", response_model=TagRead, dependencies=[Depends(require_manager)])
-def update_tag(tag_id: int, payload: TagUpdate, db: Session = Depends(get_db)) -> Tag:
+def update_tag(tag_id: int, payload: TagUpdate, db: Session = Depends(get_db)) -> dict:
     tag = db.get(Tag, tag_id)
     if not tag:
         raise HTTPException(status_code=404, detail="Tag not found")
@@ -151,7 +221,7 @@ def update_tag(tag_id: int, payload: TagUpdate, db: Session = Depends(get_db)) -
         db.rollback()
         raise HTTPException(status_code=409, detail="Tag name already exists") from exc
     db.refresh(tag)
-    return tag
+    return _tag_payload(tag, db)
 
 
 @router.delete("/tags/{tag_id}", dependencies=[Depends(require_manager)])

backend/schemas.py

@@ -40,6 +40,8 @@ class RoleRead(RoleBase):
 
     id: int
     created_at: datetime
+    active_people_count: int = 0
+    active_projects_count: int = 0
 
 
 class TeamBase(BaseModel):
@@ -59,6 +61,8 @@ class TeamRead(TeamBase):
 
     id: int
     created_at: datetime
+    active_people_count: int = 0
+    active_projects_count: int = 0
 
 
 class TagBase(BaseModel):
@@ -80,6 +84,8 @@ class TagRead(TagBase):
 
     id: int
     created_at: datetime
+    active_people_count: int = 0
+    active_projects_count: int = 0
 
 
 class PersonBase(BaseModel):

frontend/src/pages/Manage.tsx

@@ -1,6 +1,7 @@
 import { useMutation, useQueryClient } from "@tanstack/react-query";
-import { useState, type FormEvent } from "react";
-import { NavLink, Navigate, useParams } from "react-router-dom";
+import { MoreVertical, Pencil, Plus, Search, Trash2 } from "lucide-react";
+import { useEffect, useMemo, useRef, useState, type FormEvent } from "react";
+import { Link, NavLink, Navigate, useParams } from "react-router-dom";
 
 import { createPublicHoliday } from "../api/leaves";
 import { createSkill } from "../api/people";
@@ -11,10 +12,14 @@ import {
   deleteRole,
   deleteTag,
   deleteTeam,
+  updateRole,
+  updateTag,
+  updateTeam,
 } from "../api/taxonomy";
 import { createUser } from "../api/users";
 import { useAuth } from "../auth";
 import { EmptyState } from "../components/ui/EmptyState";
+import { Modal } from "../components/ui/Modal";
 import { toastFromError, useToast } from "../components/ui/Toast";
 import {
   usePublicHolidays,
@@ -24,6 +29,7 @@ import {
   useTeams,
   useUsers,
 } from "../hooks/usePortalData";
+import type { Role, Tag, Team } from "../types";
 
 const TAG_PALETTE = ["#7c3aed", "#0ea5e9", "#16a34a", "#f97316", "#dc2626", "#facc15", "#0f766e", "#a855f7"];
 
@@ -105,88 +111,297 @@ export function ManagePage() {
   );
 }
 
+interface RowMenuItem {
+  label: string;
+  icon?: React.ComponentType<{ size?: number }>;
+  onClick: () => void;
+  danger?: boolean;
+}
+
+function RowMenu({ items }: { items: RowMenuItem[] }) {
+  const [open, setOpen] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!open) return;
+    const handler = (event: MouseEvent) => {
+      if (ref.current && !ref.current.contains(event.target as Node)) setOpen(false);
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, [open]);
+
+  return (
+    <div className="row-menu" ref={ref}>
+      <button
+        aria-haspopup="menu"
+        aria-expanded={open}
+        className="row-menu-trigger"
+        onClick={() => setOpen((v) => !v)}
+        type="button"
+      >
+        <MoreVertical size={16} />
+      </button>
+      {open ? (
+        <div className="row-menu-popover" role="menu">
+          {items.map((item) => (
+            <button
+              className={`row-menu-item${item.danger ? " danger" : ""}`}
+              key={item.label}
+              onClick={() => {
+                setOpen(false);
+                item.onClick();
+              }}
+              role="menuitem"
+              type="button"
+            >
+              {item.icon ? <item.icon size={15} /> : null}
+              <span>{item.label}</span>
+            </button>
+          ))}
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+interface ManageToolbarProps {
+  search: string;
+  onSearchChange: (value: string) => void;
+  onNewClick: () => void;
+  newLabel: string;
+  searchPlaceholder?: string;
+}
+
+function ManageToolbar({ search, onSearchChange, onNewClick, newLabel, searchPlaceholder }: ManageToolbarProps) {
+  return (
+    <div className="manage-toolbar">
+      <div className="manage-toolbar-search">
+        <Search size={15} className="manage-toolbar-search-icon" />
+        <input
+          onChange={(event) => onSearchChange(event.target.value)}
+          placeholder={searchPlaceholder ?? "Search"}
+          type="search"
+          value={search}
+        />
+      </div>
+      <button className="primary-button manage-toolbar-new" onClick={onNewClick} type="button">
+        <Plus size={15} />
+        {newLabel}
+      </button>
+    </div>
+  );
+}
+
 function RolesSection() {
   const queryClient = useQueryClient();
   const { push } = useToast();
   const { data: roles = [] } = useRoles();
+  const [search, setSearch] = useState("");
+  const [editing, setEditing] = useState<Role | null>(null);
+  const [creating, setCreating] = useState(false);
   const [name, setName] = useState("");
 
+  const invalidate = () => {
+    queryClient.invalidateQueries({ queryKey: ["roles"] });
+    queryClient.invalidateQueries({ queryKey: ["people"] });
+  };
+
   const createMutation = useMutation({
     mutationFn: createRole,
     onSuccess: () => {
       push("Role added", "success");
+      invalidate();
+      setCreating(false);
       setName("");
-      queryClient.invalidateQueries({ queryKey: ["roles"] });
     },
     onError: (error) => push(toastFromError(error, "Could not add role"), "error"),
   });
 
+  const updateMutation = useMutation({
+    mutationFn: ({ id, input }: { id: number; input: { name: string } }) => updateRole(id, input),
+    onSuccess: () => {
+      push("Role updated", "success");
+      invalidate();
+      setEditing(null);
+    },
+    onError: (error) => push(toastFromError(error, "Could not update role"), "error"),
+  });
+
   const deleteMutation = useMutation({
     mutationFn: deleteRole,
     onSuccess: () => {
       push("Role removed", "success");
-      queryClient.invalidateQueries({ queryKey: ["roles"] });
+      invalidate();
     },
     onError: (error) => push(toastFromError(error, "Could not remove role"), "error"),
   });
 
+  const filtered = useMemo(() => {
+    const term = search.trim().toLowerCase();
+    if (!term) return roles;
+    return roles.filter((role) => role.name.toLowerCase().includes(term));
+  }, [roles, search]);
+
   return (
-    <article className="panel">
+    <article className="manage-card">
+      <ManageToolbar
+        newLabel="New Role"
+        onNewClick={() => {
+          setName("");
+          setCreating(true);
+        }}
+        onSearchChange={setSearch}
+        search={search}
+        searchPlaceholder="Search"
+      />
+
       {roles.length === 0 ? (
         <EmptyState title="No roles yet" description="Create a role to start assigning team members." />
       ) : (
-        <table className="data-table">
+        <table className="data-table runn-table">
           <thead>
             <tr>
               <th>Name</th>
-              <th style={{ width: 120, textAlign: "right" }}>Actions</th>
+              <th className="num">Active People</th>
+              <th className="num">Active Projects</th>
+              <th aria-label="Actions" className="row-actions" />
             </tr>
           </thead>
           <tbody>
-            {roles.map((role) => (
+            {filtered.map((role) => (
               <tr key={role.id}>
-                <td><strong>{role.name}</strong></td>
-                <td style={{ textAlign: "right" }}>
+                <td>
                   <button
-                    className="ghost-button danger"
-                    onClick={() => {
-                      if (window.confirm(`Remove role "${role.name}"?`)) deleteMutation.mutate(role.id);
-                    }}
+                    className="link-text"
+                    onClick={() => setEditing(role)}
                     type="button"
                   >
-                    Remove
+                    {role.name}
                   </button>
                 </td>
+                <td className="num">
+                  <CountLink count={role.active_people_count} to={`/people?role=${role.id}`} />
+                </td>
+                <td className="num">
+                  <span className="count-static">{role.active_projects_count}</span>
+                </td>
+                <td className="row-actions">
+                  <RowMenu
+                    items={[
+                      { label: "Edit Details", icon: Pencil, onClick: () => setEditing(role) },
+                      {
+                        label: "Delete",
+                        icon: Trash2,
+                        danger: true,
+                        onClick: () => {
+                          if (window.confirm(`Remove role "${role.name}"?`)) {
+                            deleteMutation.mutate(role.id);
+                          }
+                        },
+                      },
+                    ]}
+                  />
+                </td>
               </tr>
             ))}
           </tbody>
         </table>
       )}
 
-      <form
-        className="form-grid manage-inline-form"
-        onSubmit={(event) => {
-          event.preventDefault();
-          if (name.trim()) createMutation.mutate({ name: name.trim() });
-        }}
+      <Modal
+        open={creating}
+        onClose={() => setCreating(false)}
+        title="New role"
+        footer={
+          <>
+            <button className="ghost-button" onClick={() => setCreating(false)} type="button">
+              Cancel
+            </button>
+            <button
+              className="primary-button"
+              disabled={createMutation.isPending || !name.trim()}
+              onClick={() => createMutation.mutate({ name: name.trim() })}
+              type="button"
+            >
+              Add role
+            </button>
+          </>
+        }
       >
+        <div className="form-grid">
+          <label className="span-2">
+            Role name
+            <input
+              autoFocus
+              onChange={(event) => setName(event.target.value)}
+              placeholder="e.g. Senior DevOps Engineer"
+              type="text"
+              value={name}
+            />
+          </label>
+        </div>
+      </Modal>
+
+      <RoleEditModal
+        role={editing}
+        onClose={() => setEditing(null)}
+        onSave={(input) => editing && updateMutation.mutate({ id: editing.id, input })}
+        isSaving={updateMutation.isPending}
+      />
+    </article>
+  );
+}
+
+function RoleEditModal({
+  role,
+  onClose,
+  onSave,
+  isSaving,
+}: {
+  role: Role | null;
+  onClose: () => void;
+  onSave: (input: { name: string }) => void;
+  isSaving: boolean;
+}) {
+  const [name, setName] = useState("");
+  useEffect(() => {
+    setName(role?.name ?? "");
+  }, [role]);
+
+  return (
+    <Modal
+      open={!!role}
+      onClose={onClose}
+      title="Edit role"
+      footer={
+        <>
+          <button className="ghost-button" onClick={onClose} type="button">
+            Cancel
+          </button>
+          <button
+            className="primary-button"
+            disabled={isSaving || !name.trim()}
+            onClick={() => onSave({ name: name.trim() })}
+            type="button"
+          >
+            Save
+          </button>
+        </>
+      }
+    >
+      <div className="form-grid">
         <label className="span-2">
-          New role
+          Role name
           <input
+            autoFocus
             onChange={(event) => setName(event.target.value)}
-            placeholder="e.g. Senior DevOps Engineer"
-            required
             type="text"
             value={name}
           />
         </label>
-        <div className="span-2">
-          <button className="primary-button" disabled={createMutation.isPending} type="submit">
-            Add role
-          </button>
-        </div>
-      </form>
-    </article>
+      </div>
+    </Modal>
   );
 }
 
@@ -194,84 +409,210 @@ function TeamsSection() {
   const queryClient = useQueryClient();
   const { push } = useToast();
   const { data: teams = [] } = useTeams();
+  const [search, setSearch] = useState("");
+  const [editing, setEditing] = useState<Team | null>(null);
+  const [creating, setCreating] = useState(false);
   const [name, setName] = useState("");
 
+  const invalidate = () => {
+    queryClient.invalidateQueries({ queryKey: ["teams"] });
+    queryClient.invalidateQueries({ queryKey: ["people"] });
+  };
+
   const createMutation = useMutation({
     mutationFn: createTeam,
     onSuccess: () => {
       push("Team added", "success");
+      invalidate();
+      setCreating(false);
       setName("");
-      queryClient.invalidateQueries({ queryKey: ["teams"] });
     },
     onError: (error) => push(toastFromError(error, "Could not add team"), "error"),
   });
 
+  const updateMutation = useMutation({
+    mutationFn: ({ id, input }: { id: number; input: { name: string } }) => updateTeam(id, input),
+    onSuccess: () => {
+      push("Team updated", "success");
+      invalidate();
+      setEditing(null);
+    },
+    onError: (error) => push(toastFromError(error, "Could not update team"), "error"),
+  });
+
   const deleteMutation = useMutation({
     mutationFn: deleteTeam,
     onSuccess: () => {
       push("Team removed", "success");
-      queryClient.invalidateQueries({ queryKey: ["teams"] });
+      invalidate();
     },
     onError: (error) => push(toastFromError(error, "Could not remove team"), "error"),
   });
 
+  const filtered = useMemo(() => {
+    const term = search.trim().toLowerCase();
+    if (!term) return teams;
+    return teams.filter((team) => team.name.toLowerCase().includes(term));
+  }, [teams, search]);
+
   return (
-    <article className="panel">
+    <article className="manage-card">
+      <ManageToolbar
+        newLabel="New Team"
+        onNewClick={() => {
+          setName("");
+          setCreating(true);
+        }}
+        onSearchChange={setSearch}
+        search={search}
+      />
+
       {teams.length === 0 ? (
         <EmptyState title="No teams yet" description="Create a team to group people by department or function." />
       ) : (
-        <table className="data-table">
+        <table className="data-table runn-table">
           <thead>
             <tr>
               <th>Name</th>
-              <th style={{ width: 120, textAlign: "right" }}>Actions</th>
+              <th className="num">Active People</th>
+              <th className="num">Active Projects</th>
+              <th aria-label="Actions" className="row-actions" />
             </tr>
           </thead>
           <tbody>
-            {teams.map((team) => (
+            {filtered.map((team) => (
               <tr key={team.id}>
-                <td><strong>{team.name}</strong></td>
-                <td style={{ textAlign: "right" }}>
+                <td>
                   <button
-                    className="ghost-button danger"
-                    onClick={() => {
-                      if (window.confirm(`Remove team "${team.name}"?`)) deleteMutation.mutate(team.id);
-                    }}
+                    className="link-text"
+                    onClick={() => setEditing(team)}
                     type="button"
                   >
-                    Remove
+                    {team.name}
                   </button>
                 </td>
+                <td className="num">
+                  <CountLink count={team.active_people_count} to={`/people?team=${team.id}`} />
+                </td>
+                <td className="num">
+                  <span className="count-static">{team.active_projects_count}</span>
+                </td>
+                <td className="row-actions">
+                  <RowMenu
+                    items={[
+                      { label: "Edit Details", icon: Pencil, onClick: () => setEditing(team) },
+                      {
+                        label: "Delete",
+                        icon: Trash2,
+                        danger: true,
+                        onClick: () => {
+                          if (window.confirm(`Remove team "${team.name}"?`)) {
+                            deleteMutation.mutate(team.id);
+                          }
+                        },
+                      },
+                    ]}
+                  />
+                </td>
               </tr>
             ))}
           </tbody>
         </table>
       )}
 
-      <form
-        className="form-grid manage-inline-form"
-        onSubmit={(event) => {
-          event.preventDefault();
-          if (name.trim()) createMutation.mutate({ name: name.trim() });
-        }}
+      <Modal
+        open={creating}
+        onClose={() => setCreating(false)}
+        title="New team"
+        footer={
+          <>
+            <button className="ghost-button" onClick={() => setCreating(false)} type="button">
+              Cancel
+            </button>
+            <button
+              className="primary-button"
+              disabled={createMutation.isPending || !name.trim()}
+              onClick={() => createMutation.mutate({ name: name.trim() })}
+              type="button"
+            >
+              Add team
+            </button>
+          </>
+        }
       >
+        <div className="form-grid">
+          <label className="span-2">
+            Team name
+            <input
+              autoFocus
+              onChange={(event) => setName(event.target.value)}
+              placeholder="e.g. Platform"
+              type="text"
+              value={name}
+            />
+          </label>
+        </div>
+      </Modal>
+
+      <TeamEditModal
+        team={editing}
+        onClose={() => setEditing(null)}
+        onSave={(input) => editing && updateMutation.mutate({ id: editing.id, input })}
+        isSaving={updateMutation.isPending}
+      />
+    </article>
+  );
+}
+
+function TeamEditModal({
+  team,
+  onClose,
+  onSave,
+  isSaving,
+}: {
+  team: Team | null;
+  onClose: () => void;
+  onSave: (input: { name: string }) => void;
+  isSaving: boolean;
+}) {
+  const [name, setName] = useState("");
+  useEffect(() => {
+    setName(team?.name ?? "");
+  }, [team]);
+
+  return (
+    <Modal
+      open={!!team}
+      onClose={onClose}
+      title="Edit team"
+      footer={
+        <>
+          <button className="ghost-button" onClick={onClose} type="button">
+            Cancel
+          </button>
+          <button
+            className="primary-button"
+            disabled={isSaving || !name.trim()}
+            onClick={() => onSave({ name: name.trim() })}
+            type="button"
+          >
+            Save
+          </button>
+        </>
+      }
+    >
+      <div className="form-grid">
         <label className="span-2">
-          New team
+          Team name
           <input
+            autoFocus
             onChange={(event) => setName(event.target.value)}
-            placeholder="e.g. Platform"
-            required
             type="text"
             value={name}
           />
         </label>
-        <div className="span-2">
-          <button className="primary-button" disabled={createMutation.isPending} type="submit">
-            Add team
-          </button>
-        </div>
-      </form>
-    </article>
+      </div>
+    </Modal>
   );
 }
 
@@ -279,93 +620,234 @@ function TagsSection() {
   const queryClient = useQueryClient();
   const { push } = useToast();
   const { data: tags = [] } = useTags();
+  const [search, setSearch] = useState("");
+  const [editing, setEditing] = useState<Tag | null>(null);
+  const [creating, setCreating] = useState(false);
   const [form, setForm] = useState({ name: "", color: TAG_PALETTE[0] });
 
+  const invalidate = () => {
+    queryClient.invalidateQueries({ queryKey: ["tags"] });
+    queryClient.invalidateQueries({ queryKey: ["people"] });
+    queryClient.invalidateQueries({ queryKey: ["projects"] });
+  };
+
   const createMutation = useMutation({
     mutationFn: createTag,
     onSuccess: () => {
       push("Tag added", "success");
+      invalidate();
+      setCreating(false);
       setForm({ name: "", color: TAG_PALETTE[0] });
-      queryClient.invalidateQueries({ queryKey: ["tags"] });
     },
     onError: (error) => push(toastFromError(error, "Could not add tag"), "error"),
   });
 
+  const updateMutation = useMutation({
+    mutationFn: ({ id, input }: { id: number; input: { name: string; color: string } }) => updateTag(id, input),
+    onSuccess: () => {
+      push("Tag updated", "success");
+      invalidate();
+      setEditing(null);
+    },
+    onError: (error) => push(toastFromError(error, "Could not update tag"), "error"),
+  });
+
   const deleteMutation = useMutation({
     mutationFn: deleteTag,
     onSuccess: () => {
       push("Tag removed", "success");
-      queryClient.invalidateQueries({ queryKey: ["tags"] });
+      invalidate();
     },
     onError: (error) => push(toastFromError(error, "Could not remove tag"), "error"),
   });
 
+  const filtered = useMemo(() => {
+    const term = search.trim().toLowerCase();
+    if (!term) return tags;
+    return tags.filter((tag) => tag.name.toLowerCase().includes(term));
+  }, [tags, search]);
+
   return (
-    <article className="panel">
+    <article className="manage-card">
+      <ManageToolbar
+        newLabel="New Tag"
+        onNewClick={() => {
+          setForm({ name: "", color: TAG_PALETTE[0] });
+          setCreating(true);
+        }}
+        onSearchChange={setSearch}
+        search={search}
+      />
+
       {tags.length === 0 ? (
         <EmptyState title="No tags yet" description="Create your first tag and apply it to people or projects." />
       ) : (
-        <div className="badge-row" style={{ marginBottom: 18 }}>
-          {tags.map((tag) => (
-            <span
-              key={tag.id}
-              className="badge tag-chip"
-              style={{ background: tag.color, borderColor: tag.color, color: "white" }}
+        <table className="data-table runn-table">
+          <thead>
+            <tr>
+              <th>Name</th>
+              <th className="num">Active People</th>
+              <th className="num">Active Projects</th>
+              <th aria-label="Actions" className="row-actions" />
+            </tr>
+          </thead>
+          <tbody>
+            {filtered.map((tag) => (
+              <tr key={tag.id}>
+                <td>
+                  <button className="link-text tag-name-cell" onClick={() => setEditing(tag)} type="button">
+                    <span className="tag-dot" style={{ background: tag.color }} />
+                    {tag.name}
+                  </button>
+                </td>
+                <td className="num">
+                  <CountLink count={tag.active_people_count} to={`/people?tag=${tag.id}`} />
+                </td>
+                <td className="num">
+                  <CountLink count={tag.active_projects_count} to={`/projects?tag=${tag.id}`} />
+                </td>
+                <td className="row-actions">
+                  <RowMenu
+                    items={[
+                      { label: "Edit Details", icon: Pencil, onClick: () => setEditing(tag) },
+                      {
+                        label: "Delete",
+                        icon: Trash2,
+                        danger: true,
+                        onClick: () => {
+                          if (window.confirm(`Remove tag "${tag.name}"?`)) {
+                            deleteMutation.mutate(tag.id);
+                          }
+                        },
+                      },
+                    ]}
+                  />
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      )}
+
+      <Modal
+        open={creating}
+        onClose={() => setCreating(false)}
+        title="New tag"
+        footer={
+          <>
+            <button className="ghost-button" onClick={() => setCreating(false)} type="button">
+              Cancel
+            </button>
+            <button
+              className="primary-button"
+              disabled={createMutation.isPending || !form.name.trim()}
+              onClick={() => createMutation.mutate({ name: form.name.trim(), color: form.color })}
+              type="button"
             >
-              {tag.name}
-              <button
-                className="tag-remove"
-                onClick={() => {
-                  if (window.confirm(`Remove tag "${tag.name}"?`)) deleteMutation.mutate(tag.id);
-                }}
-                type="button"
-              >
-                ×
-              </button>
-            </span>
+              Add tag
+            </button>
+          </>
+        }
+      >
+        <TagForm form={form} onChange={setForm} />
+      </Modal>
+
+      <TagEditModal
+        tag={editing}
+        onClose={() => setEditing(null)}
+        onSave={(input) => editing && updateMutation.mutate({ id: editing.id, input })}
+        isSaving={updateMutation.isPending}
+      />
+    </article>
+  );
+}
+
+function TagForm({
+  form,
+  onChange,
+}: {
+  form: { name: string; color: string };
+  onChange: (next: { name: string; color: string }) => void;
+}) {
+  return (
+    <div className="form-grid">
+      <label className="span-2">
+        Tag name
+        <input
+          autoFocus
+          onChange={(event) => onChange({ ...form, name: event.target.value })}
+          placeholder="e.g. on-call"
+          type="text"
+          value={form.name}
+        />
+      </label>
+      <label className="span-2">
+        Color
+        <div className="color-picker">
+          {TAG_PALETTE.map((color) => (
+            <button
+              aria-label={`Use color ${color}`}
+              className={`color-swatch ${form.color === color ? "selected" : ""}`}
+              key={color}
+              onClick={() => onChange({ ...form, color })}
+              style={{ background: color }}
+              type="button"
+            />
           ))}
         </div>
-      )}
+      </label>
+    </div>
+  );
+}
 
-      <form
-        className="form-grid manage-inline-form"
-        onSubmit={(event) => {
-          event.preventDefault();
-          if (form.name.trim()) createMutation.mutate({ name: form.name.trim(), color: form.color });
-        }}
-      >
-        <label>
-          Tag name
-          <input
-            onChange={(event) => setForm({ ...form, name: event.target.value })}
-            placeholder="e.g. on-call"
-            required
-            type="text"
-            value={form.name}
-          />
-        </label>
-        <label>
-          Color
-          <div className="color-picker">
-            {TAG_PALETTE.map((color) => (
-              <button
-                aria-label={`Use color ${color}`}
-                className={`color-swatch ${form.color === color ? "selected" : ""}`}
-                key={color}
-                onClick={() => setForm({ ...form, color })}
-                style={{ background: color }}
-                type="button"
-              />
-            ))}
-          </div>
-        </label>
-        <div className="span-2">
-          <button className="primary-button" disabled={createMutation.isPending} type="submit">
-            Add tag
+function TagEditModal({
+  tag,
+  onClose,
+  onSave,
+  isSaving,
+}: {
+  tag: Tag | null;
+  onClose: () => void;
+  onSave: (input: { name: string; color: string }) => void;
+  isSaving: boolean;
+}) {
+  const [form, setForm] = useState({ name: "", color: TAG_PALETTE[0] });
+  useEffect(() => {
+    if (tag) setForm({ name: tag.name, color: tag.color });
+  }, [tag]);
+
+  return (
+    <Modal
+      open={!!tag}
+      onClose={onClose}
+      title="Edit tag"
+      footer={
+        <>
+          <button className="ghost-button" onClick={onClose} type="button">
+            Cancel
           </button>
-        </div>
-      </form>
-    </article>
+          <button
+            className="primary-button"
+            disabled={isSaving || !form.name.trim()}
+            onClick={() => onSave({ name: form.name.trim(), color: form.color })}
+            type="button"
+          >
+            Save
+          </button>
+        </>
+      }
+    >
+      <TagForm form={form} onChange={setForm} />
+    </Modal>
+  );
+}
+
+function CountLink({ count, to }: { count: number; to: string }) {
+  if (!count) return <span className="count-static count-zero">0</span>;
+  return (
+    <Link className="count-link" to={to}>
+      {count}
+    </Link>
   );
 }
 

frontend/src/pages/People.tsx

@@ -1,6 +1,7 @@
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { addMonths, addWeeks, format, startOfMonth, startOfWeek } from "date-fns";
 import { useEffect, useMemo, useState, type FormEvent } from "react";
+import { useSearchParams } from "react-router-dom";
 
 import { createLeave } from "../api/leaves";
 import { archivePerson, createPerson, restorePerson, updatePerson } from "../api/people";
@@ -71,6 +72,7 @@ const cellTone = (free: number, capacity: number): CellTone => {
 export function PeoplePage() {
   const queryClient = useQueryClient();
   const { push } = useToast();
+  const [searchParams, setSearchParams] = useSearchParams();
   const [showArchived, setShowArchived] = useState(false);
   const { data: people = [], isLoading } = usePeople(showArchived);
   const { data: skills = [] } = useSkills();
@@ -78,12 +80,36 @@ export function PeoplePage() {
   const { data: teams = [] } = useTeams();
   const { data: allTags = [] } = useTags();
 
+  const roleParam = searchParams.get("role");
+  const teamParam = searchParams.get("team");
+  const tagParam = searchParams.get("tag");
+  const roleFilter = roleParam ? Number(roleParam) : null;
+  const teamFilter = teamParam ? Number(teamParam) : null;
+
   const [search, setSearch] = useState("");
   const [groupBy, setGroupBy] = useState<GroupBy>("team");
   const [sortBy, setSortBy] = useState<SortBy>("first");
   const [showChart, setShowChart] = useState(true);
   const [showTentative, setShowTentative] = useState(true);
   const [tagFilter, setTagFilter] = useState<Set<number>>(new Set());
+
+  useEffect(() => {
+    if (tagParam) {
+      const id = Number(tagParam);
+      if (!Number.isNaN(id)) {
+        setTagFilter((prev) => (prev.has(id) ? prev : new Set([...prev, id])));
+      }
+    }
+  }, [tagParam]);
+
+  const clearScopedFilters = () => {
+    const next = new URLSearchParams(searchParams);
+    next.delete("role");
+    next.delete("team");
+    next.delete("tag");
+    setSearchParams(next, { replace: true });
+    setTagFilter(new Set());
+  };
   const [range, setRange] = useState<RangeValue>("month");
   const [anchor, setAnchor] = useState<Date>(() => startOfWeek(new Date(), { weekStartsOn: 1 }));
   const [collapsedGroups, setCollapsedGroups] = useState<Record<string, boolean>>({});
@@ -113,6 +139,8 @@ export function PeoplePage() {
   const filtered = useMemo(() => {
     const term = search.trim().toLowerCase();
     return people.filter((person) => {
+      if (roleFilter && person.role.id !== roleFilter) return false;
+      if (teamFilter && person.team?.id !== teamFilter) return false;
       if (tagFilter.size > 0) {
         const personTagIds = new Set(person.tags.map((t) => t.id));
         const overlap = Array.from(tagFilter).some((id) => personTagIds.has(id));
@@ -127,7 +155,11 @@ export function PeoplePage() {
         person.tags.some((t) => t.name.toLowerCase().includes(term))
       );
     });
-  }, [people, search, tagFilter]);
+  }, [people, search, tagFilter, roleFilter, teamFilter]);
+
+  const activeRole = roleFilter ? roles.find((r) => r.id === roleFilter) : null;
+  const activeTeam = teamFilter ? teams.find((t) => t.id === teamFilter) : null;
+  const hasScopedFilter = Boolean(activeRole || activeTeam || tagParam);
 
   const sorted = useMemo(() => {
     const copy = [...filtered];
@@ -474,6 +506,17 @@ export function PeoplePage() {
             ) : null}
           </div>
         ) : null}
+
+        {hasScopedFilter ? (
+          <div className="filter-scope-bar">
+            <span className="muted-text">Filtered by:</span>
+            {activeRole ? <span className="badge muted">Role · {activeRole.name}</span> : null}
+            {activeTeam ? <span className="badge muted">Team · {activeTeam.name}</span> : null}
+            <button className="ghost-button" onClick={clearScopedFilters} type="button">
+              Clear filter
+            </button>
+          </div>
+        ) : null}
       </header>
 
       {showChart ? (

frontend/src/pages/Projects.tsx

@@ -6,7 +6,8 @@ import {
   parseISO,
   startOfMonth,
 } from "date-fns";
-import { useMemo, useState, type FormEvent } from "react";
+import { useEffect, useMemo, useState, type FormEvent } from "react";
+import { useSearchParams } from "react-router-dom";
 
 import {
   archiveProject,
@@ -68,6 +69,17 @@ export function ProjectsPage() {
   const [form, setForm] = useState<ProjectInput>(emptyForm);
   const [milestoneProject, setMilestoneProject] = useState<Project | null>(null);
   const [tagFilter, setTagFilter] = useState<Set<number>>(new Set());
+  const [searchParams] = useSearchParams();
+  const tagParam = searchParams.get("tag");
+
+  useEffect(() => {
+    if (tagParam) {
+      const id = Number(tagParam);
+      if (!Number.isNaN(id)) {
+        setTagFilter((prev) => (prev.has(id) ? prev : new Set([...prev, id])));
+      }
+    }
+  }, [tagParam]);
 
   const filtered = useMemo(() => {
     const term = search.trim().toLowerCase();

frontend/src/styles.css

@@ -1728,3 +1728,211 @@ th {
 .tag-remove:hover {
   opacity: 0.75;
 }
+
+/* Runn-style Manage tables */
+.manage-card {
+  background: white;
+  border-radius: 14px;
+  border: 1px solid var(--line);
+  display: grid;
+  overflow: hidden;
+}
+
+.manage-toolbar {
+  align-items: center;
+  background: #fafafa;
+  border-bottom: 1px solid var(--line);
+  display: flex;
+  gap: 12px;
+  justify-content: space-between;
+  padding: 14px 18px;
+}
+
+.manage-toolbar-search {
+  align-items: center;
+  background: white;
+  border-radius: 8px;
+  border: 1px solid var(--line);
+  display: flex;
+  flex: 1 1 320px;
+  gap: 8px;
+  max-width: 360px;
+  padding: 0 10px;
+}
+
+.manage-toolbar-search-icon {
+  color: var(--muted);
+  flex-shrink: 0;
+}
+
+.manage-toolbar-search input {
+  background: transparent;
+  border: none;
+  font-family: inherit;
+  font-size: 14px;
+  outline: none;
+  padding: 9px 0;
+  width: 100%;
+}
+
+.manage-toolbar-new {
+  align-items: center;
+  border-radius: 999px;
+  display: inline-flex;
+  font-size: 13px;
+  gap: 6px;
+  padding: 9px 16px;
+}
+
+.runn-table {
+  border-radius: 0;
+}
+
+.runn-table th,
+.runn-table td {
+  padding: 14px 18px;
+}
+
+.runn-table th {
+  background: white;
+  border-bottom: 1px solid var(--line);
+}
+
+.runn-table tbody tr:hover {
+  background: rgba(124, 58, 237, 0.04);
+}
+
+.runn-table .num {
+  text-align: left;
+  width: 160px;
+}
+
+.runn-table th.num {
+  color: var(--muted);
+}
+
+.runn-table .row-actions {
+  text-align: right;
+  white-space: nowrap;
+  width: 56px;
+}
+
+.link-text {
+  background: transparent;
+  border: none;
+  color: var(--text);
+  cursor: pointer;
+  font-family: inherit;
+  font-size: 14px;
+  font-weight: 600;
+  padding: 0;
+  text-align: left;
+}
+
+.link-text:hover {
+  color: var(--primary);
+  text-decoration: underline;
+}
+
+.tag-name-cell {
+  align-items: center;
+  display: inline-flex;
+  gap: 8px;
+}
+
+.count-link {
+  color: var(--primary);
+  font-weight: 600;
+  text-decoration: underline;
+  text-decoration-color: transparent;
+  text-underline-offset: 3px;
+}
+
+.count-link:hover {
+  text-decoration-color: currentColor;
+}
+
+.count-static {
+  color: var(--text);
+  font-weight: 600;
+}
+
+.count-zero {
+  color: var(--muted);
+}
+
+.row-menu {
+  display: inline-block;
+  position: relative;
+}
+
+.row-menu-trigger {
+  align-items: center;
+  background: transparent;
+  border-radius: 6px;
+  border: none;
+  color: var(--muted);
+  cursor: pointer;
+  display: inline-flex;
+  height: 30px;
+  justify-content: center;
+  padding: 0;
+  width: 30px;
+}
+
+.row-menu-trigger:hover {
+  background: var(--primary-soft);
+  color: var(--primary);
+}
+
+.row-menu-popover {
+  background: white;
+  border-radius: 10px;
+  border: 1px solid var(--line);
+  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.14);
+  display: grid;
+  min-width: 170px;
+  padding: 4px;
+  position: absolute;
+  right: 0;
+  top: calc(100% + 4px);
+  z-index: 40;
+}
+
+.row-menu-item {
+  align-items: center;
+  background: transparent;
+  border-radius: 6px;
+  border: none;
+  color: var(--text);
+  cursor: pointer;
+  display: flex;
+  font-family: inherit;
+  font-size: 13px;
+  font-weight: 600;
+  gap: 10px;
+  padding: 8px 10px;
+  text-align: left;
+}
+
+.row-menu-item:hover {
+  background: var(--primary-soft);
+  color: var(--primary);
+}
+
+.row-menu-item.danger {
+  color: var(--danger, #dc2626);
+}
+
+.row-menu-item.danger:hover {
+  background: rgba(220, 38, 38, 0.08);
+  color: var(--danger, #dc2626);
+}
+
+.filter-scope-bar {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-top: 14px;
+}

frontend/src/types/index.ts

@@ -13,6 +13,8 @@ export interface Role {
   id: number;
   name: string;
   created_at: string;
+  active_people_count: number;
+  active_projects_count: number;
 }
 
 export interface RoleInput {
@@ -23,6 +25,8 @@ export interface Team {
   id: number;
   name: string;
   created_at: string;
+  active_people_count: number;
+  active_projects_count: number;
 }
 
 export interface TeamInput {
@@ -34,6 +38,8 @@ export interface Tag {
   name: string;
   color: string;
   created_at: string;
+  active_people_count: number;
+  active_projects_count: number;
 }
 
 export interface TagInput {