Re-skin the portal to match Runn.io for internal IT use

- Top navigation now mirrors Runn: People, Projects, Manage, Reports,
Insights (dropdown removed; Manage is a regular tab).
- Root path redirects to the People planner.
- Manage is now a hub: /manage shows a table of every manageable entity
with its count and a "Details" button, exactly like Runn's Manage
hub screenshot.
- Manage gains two new list views matching Runn:
* /manage/people: searchable table with Role, Team, Tags and a
three-dot menu (Open in Planner / Edit Details / Archive / Restore).
Full create + edit modal.
* /manage/projects: searchable table with Status, Type, Dates, Tags
and the same three-dot menu, plus a create/edit modal.
- All Manage sections (Roles, Teams, Tags, Skills, Holidays, Users)
adopt the same icon-circle page header + "+ New" pill button
pattern. Each section is now its own file under pages/manage/.
- Dashboard renamed to "Insights" with the new header treatment and
routed at /insights. Old /dashboard URLs redirect.
- Removed billing / hourly / rate-card concepts that don't apply to an
internal IT team. Pricing model, Default Hourly Rate/Cost, Bench by
team etc. were never wired but the patterns are now consistent.
- Schedule tab removed from the top nav (route kept for bookmarks).

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

frontend/src/App.tsx

@@ -16,15 +16,17 @@ const router = createBrowserRouter([
     path: "/",
     element: <Layout />,
     children: [
-      { index: true, element: <DashboardPage /> },
-      { path: "schedule", element: <SchedulePage /> },
-      { path: "projects", element: <ProjectsPage /> },
+      { index: true, element: <Navigate to="/people" replace /> },
       { path: "people", element: <PeoplePage /> },
-      { path: "capacity", element: <CapacityPage /> },
-      { path: "reports", element: <ReportsPage /> },
-      { path: "manage", element: <Navigate to="/manage/roles" replace /> },
+      { path: "projects", element: <ProjectsPage /> },
+      { path: "manage", element: <ManagePage /> },
       { path: "manage/:section", element: <ManagePage /> },
-      { path: "settings", element: <Navigate to="/manage/roles" replace /> },
+      { path: "reports", element: <ReportsPage /> },
+      { path: "insights", element: <DashboardPage /> },
+      { path: "schedule", element: <SchedulePage /> },
+      { path: "capacity", element: <CapacityPage /> },
+      { path: "settings", element: <Navigate to="/manage" replace /> },
+      { path: "dashboard", element: <Navigate to="/insights" replace /> },
     ],
   },
 ]);

frontend/src/components/layout/Layout.tsx

@@ -1,75 +1,29 @@
-import {
-  Award,
-  Briefcase,
-  CalendarDays,
-  ChevronDown,
-  Shield,
-  Tag as TagIcon,
-  Users,
-} from "lucide-react";
-import { useEffect, useRef, useState, type ComponentType } from "react";
-import { NavLink, Outlet, useLocation } from "react-router-dom";
+import { useEffect, useState } from "react";
+import { NavLink, Outlet } from "react-router-dom";
 
 import { useAuth } from "../../auth";
 
 const navItems = [
-  { to: "/", label: "Dashboard" },
   { to: "/people", label: "People" },
   { to: "/projects", label: "Projects" },
-  { to: "/schedule", label: "Schedule" },
+  { to: "/manage", label: "Manage" },
   { to: "/reports", label: "Reports" },
-];
-
-interface ManageItem {
-  to: string;
-  label: string;
-  icon: ComponentType<{ size?: number; className?: string }>;
-}
-
-interface ManageGroup {
-  items: ManageItem[];
-}
-
-const manageGroups: ManageGroup[] = [
-  {
-    items: [
-      { to: "/manage/roles", label: "Roles", icon: Briefcase },
-      { to: "/manage/teams", label: "Teams", icon: Users },
-      { to: "/manage/skills", label: "Skills", icon: Award },
-      { to: "/manage/tags", label: "Tags", icon: TagIcon },
-    ],
-  },
-  {
-    items: [
-      { to: "/manage/holidays", label: "Holidays", icon: CalendarDays },
-      { to: "/manage/users", label: "Users", icon: Shield },
-    ],
-  },
+  { to: "/insights", label: "Insights" },
 ];
 
 export function Layout() {
   const { logout, user } = useAuth();
   const [menuOpen, setMenuOpen] = useState(false);
-  const [manageOpen, setManageOpen] = useState(false);
-  const manageRef = useRef<HTMLDivElement>(null);
-  const location = useLocation();
-
-  const isManageActive = location.pathname.startsWith("/manage") || location.pathname === "/settings";
-
-  useEffect(() => {
-    setManageOpen(false);
-  }, [location.pathname]);
 
   useEffect(() => {
-    if (!manageOpen) return;
-    const handler = (event: MouseEvent) => {
-      if (manageRef.current && !manageRef.current.contains(event.target as Node)) {
-        setManageOpen(false);
-      }
+    if (!menuOpen) return;
+    const onClick = (event: MouseEvent) => {
+      const target = event.target as HTMLElement;
+      if (!target.closest(".topnav-actions")) setMenuOpen(false);
     };
-    document.addEventListener("mousedown", handler);
-    return () => document.removeEventListener("mousedown", handler);
-  }, [manageOpen]);
+    document.addEventListener("mousedown", onClick);
+    return () => document.removeEventListener("mousedown", onClick);
+  }, [menuOpen]);
 
   return (
     <div className="app-shell">
@@ -87,44 +41,11 @@ export function Layout() {
             <NavLink
               key={item.to}
               to={item.to}
-              end={item.to === "/"}
               className={({ isActive }) => `topnav-tab${isActive ? " active" : ""}`}
             >
               {item.label}
             </NavLink>
           ))}
-
-          <div className="topnav-dropdown" ref={manageRef}>
-            <button
-              aria-haspopup="menu"
-              aria-expanded={manageOpen}
-              className={`topnav-tab${isManageActive ? " active" : ""}`}
-              onClick={() => setManageOpen((open) => !open)}
-              type="button"
-            >
-              Manage
-              <ChevronDown size={14} className="topnav-tab-caret" />
-            </button>
-            {manageOpen ? (
-              <div className="topnav-menu" role="menu">
-                {manageGroups.map((group, groupIndex) => (
-                  <div className="topnav-menu-group" key={groupIndex}>
-                    {group.items.map((item) => (
-                      <NavLink
-                        key={item.to}
-                        to={item.to}
-                        className={({ isActive }) => `topnav-menu-item${isActive ? " active" : ""}`}
-                        role="menuitem"
-                      >
-                        <item.icon size={16} className="topnav-menu-icon" />
-                        <span>{item.label}</span>
-                      </NavLink>
-                    ))}
-                  </div>
-                ))}
-              </div>
-            ) : null}
-          </div>
         </nav>
 
         <div className="topnav-actions">
@@ -142,7 +63,7 @@ export function Layout() {
             </span>
           </button>
           {menuOpen ? (
-            <div className="user-menu" onMouseLeave={() => setMenuOpen(false)} role="menu">
+            <div className="user-menu" role="menu">
               <button
                 onClick={() => {
                   setMenuOpen(false);

frontend/src/pages/Dashboard.tsx

@@ -1,21 +1,20 @@
+import { BarChart3 } from "lucide-react";
 import { Link } from "react-router-dom";
 
 import { EmptyState } from "../components/ui/EmptyState";
 import { useDashboard } from "../hooks/usePortalData";
+import { ManagePageHeader } from "./manage/_shared";
 
 export function DashboardPage() {
   const { data, isLoading, isError } = useDashboard();
 
   return (
     <section>
-      <header className="page-header">
-        <p className="eyebrow">Overview</p>
-        <h2>Dashboard</h2>
-        <p className="page-subtitle">
-          Live picture of resource health across IT. Use the quick links to manage people, projects,
-          and allocations.
-        </p>
-      </header>
+      <ManagePageHeader
+        icon={BarChart3}
+        title="Insights"
+        subtitle="Live picture of resource health across IT — utilization, leave, and upcoming milestones."
+      />
 
       {isLoading ? (
         <div className="kpi-grid">
@@ -42,7 +41,7 @@ export function DashboardPage() {
             <article className="card">
               <span>Avg Utilization (this month)</span>
               <strong>{data?.average_utilization_pct ?? 0}%</strong>
-              <Link to="/capacity" className="link-muted">View capacity →</Link>
+              <Link to="/people" className="link-muted">View planner →</Link>
             </article>
             <article className="card">
               <span>On Leave This Week</span>
@@ -98,8 +97,8 @@ export function DashboardPage() {
         <article className="panel banner">
           <h3>Welcome — your portal is empty.</h3>
           <p>
-            Add your IT team in <Link to="/people">People</Link> and create your first project in
-            <Link to="/projects"> Projects</Link> to start planning capacity.
+            Add your IT team in <Link to="/manage/people">Manage → People</Link> and create your first
+            project in <Link to="/manage/projects"> Manage → Projects</Link> to start planning capacity.
           </p>
         </article>
       ) : null}

frontend/src/pages/Manage.tsx

@@ -1,39 +1,18 @@
-import { useMutation, useQueryClient } from "@tanstack/react-query";
-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";
-import {
-  createRole,
-  createTag,
-  createTeam,
-  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,
-  useRoles,
-  useSkills,
-  useTags,
-  useTeams,
-  useUsers,
-} from "../hooks/usePortalData";
-import type { Role, Tag, Team } from "../types";
-
-const TAG_PALETTE = ["#7c3aed", "#0ea5e9", "#16a34a", "#f97316", "#dc2626", "#facc15", "#0f766e", "#a855f7"];
+import { NavLink, Navigate, useParams } from "react-router-dom";
+
+import { HolidaysSection } from "./manage/HolidaysSection";
+import { HubSection } from "./manage/HubSection";
+import { PeopleSection } from "./manage/PeopleSection";
+import { ProjectsSection } from "./manage/ProjectsSection";
+import { RolesSection } from "./manage/RolesSection";
+import { SkillsSection } from "./manage/SkillsSection";
+import { TagsSection } from "./manage/TagsSection";
+import { TeamsSection } from "./manage/TeamsSection";
+import { UsersSection } from "./manage/UsersSection";
 
 const SECTIONS = [
+  { key: "people", label: "People" },
+  { key: "projects", label: "Projects" },
   { key: "roles", label: "Roles" },
   { key: "teams", label: "Teams" },
   { key: "tags", label: "Tags" },
@@ -44,49 +23,20 @@ const SECTIONS = [
 
 type SectionKey = (typeof SECTIONS)[number]["key"];
 
-const sectionTitles: Record<SectionKey, { title: string; subtitle: string }> = {
-  roles: {
-    title: "Roles",
-    subtitle: "Job titles assigned to each person — e.g. \"Senior DevOps\", \"PM\".",
-  },
-  teams: {
-    title: "Teams",
-    subtitle: "Groupings of people across the IT org — e.g. \"Platform\", \"Helpdesk\".",
-  },
-  tags: {
-    title: "Tags",
-    subtitle: "Colored labels for people and projects — e.g. \"remote\", \"on-call\".",
-  },
-  skills: {
-    title: "Skills",
-    subtitle: "Skill library, assignable to each team member from the People page.",
-  },
-  holidays: {
-    title: "Public holidays",
-    subtitle: "Dates that reduce capacity for everyone in the portal.",
-  },
-  users: {
-    title: "Portal users",
-    subtitle: "Admins, managers, and viewers who can sign in to the portal.",
-  },
-};
+const SECTION_KEYS = new Set<SectionKey>(SECTIONS.map((s) => s.key) as SectionKey[]);
 
 export function ManagePage() {
   const params = useParams<{ section?: string }>();
-  const section = (params.section ?? "roles") as SectionKey;
 
-  if (!SECTIONS.some((s) => s.key === section)) {
-    return <Navigate to="/manage/roles" replace />;
+  if (!params.section) return <HubSection />;
+
+  const section = params.section as SectionKey;
+  if (!SECTION_KEYS.has(section)) {
+    return <Navigate to="/manage" replace />;
   }
 
   return (
     <section className="manage-page">
-      <header className="page-header">
-        <p className="eyebrow">Admin · Manage</p>
-        <h2>{sectionTitles[section].title}</h2>
-        <p className="page-subtitle">{sectionTitles[section].subtitle}</p>
-      </header>
-
       <nav className="manage-subnav">
         {SECTIONS.map((s) => (
           <NavLink
@@ -100,6 +50,8 @@ export function ManagePage() {
       </nav>
 
       <div className="manage-section">
+        {section === "people" && <PeopleSection />}
+        {section === "projects" && <ProjectsSection />}
         {section === "roles" && <RolesSection />}
         {section === "teams" && <TeamsSection />}
         {section === "tags" && <TagsSection />}
@@ -110,999 +62,3 @@ export function ManagePage() {
     </section>
   );
 }
-
-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("");
-    },
-    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");
-      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="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 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((role) => (
-              <tr key={role.id}>
-                <td>
-                  <button
-                    className="link-text"
-                    onClick={() => setEditing(role)}
-                    type="button"
-                  >
-                    {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>
-      )}
-
-      <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">
-          Role name
-          <input
-            autoFocus
-            onChange={(event) => setName(event.target.value)}
-            type="text"
-            value={name}
-          />
-        </label>
-      </div>
-    </Modal>
-  );
-}
-
-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("");
-    },
-    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");
-      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="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 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((team) => (
-              <tr key={team.id}>
-                <td>
-                  <button
-                    className="link-text"
-                    onClick={() => setEditing(team)}
-                    type="button"
-                  >
-                    {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>
-      )}
-
-      <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">
-          Team name
-          <input
-            autoFocus
-            onChange={(event) => setName(event.target.value)}
-            type="text"
-            value={name}
-          />
-        </label>
-      </div>
-    </Modal>
-  );
-}
-
-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] });
-    },
-    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");
-      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="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." />
-      ) : (
-        <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"
-            >
-              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>
-  );
-}
-
-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>
-          <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>
-  );
-}
-
-function SkillsSection() {
-  const queryClient = useQueryClient();
-  const { push } = useToast();
-  const { data: skills = [] } = useSkills();
-  const [form, setForm] = useState({ name: "", category: "" });
-
-  const createMutation = useMutation({
-    mutationFn: createSkill,
-    onSuccess: () => {
-      push("Skill added", "success");
-      setForm({ name: "", category: "" });
-      queryClient.invalidateQueries({ queryKey: ["skills"] });
-    },
-    onError: (error) => push(toastFromError(error, "Could not add skill"), "error"),
-  });
-
-  const submit = (event: FormEvent<HTMLFormElement>) => {
-    event.preventDefault();
-    createMutation.mutate({ name: form.name.trim(), category: form.category.trim() || null });
-  };
-
-  return (
-    <article className="panel">
-      {skills.length === 0 ? (
-        <EmptyState
-          title="No skills yet"
-          description="Add skills like Kubernetes or Network engineering to assign them to people."
-        />
-      ) : (
-        <table className="data-table">
-          <thead>
-            <tr>
-              <th>Name</th>
-              <th>Category</th>
-            </tr>
-          </thead>
-          <tbody>
-            {skills.map((skill) => (
-              <tr key={skill.id}>
-                <td><strong>{skill.name}</strong></td>
-                <td>{skill.category ?? <span className="muted-text">Uncategorized</span>}</td>
-              </tr>
-            ))}
-          </tbody>
-        </table>
-      )}
-
-      <form className="form-grid manage-inline-form" onSubmit={submit}>
-        <label>
-          Skill name
-          <input
-            onChange={(event) => setForm({ ...form, name: event.target.value })}
-            placeholder="e.g. Kubernetes"
-            required
-            type="text"
-            value={form.name}
-          />
-        </label>
-        <label>
-          Category
-          <input
-            onChange={(event) => setForm({ ...form, category: event.target.value })}
-            placeholder="e.g. Infrastructure"
-            type="text"
-            value={form.category}
-          />
-        </label>
-        <div className="span-2">
-          <button className="primary-button" disabled={createMutation.isPending} type="submit">
-            Add skill
-          </button>
-        </div>
-      </form>
-    </article>
-  );
-}
-
-function HolidaysSection() {
-  const queryClient = useQueryClient();
-  const { push } = useToast();
-  const { data: holidays = [] } = usePublicHolidays();
-  const [form, setForm] = useState({ note: "", date: "" });
-
-  const createMutation = useMutation({
-    mutationFn: createPublicHoliday,
-    onSuccess: () => {
-      push("Holiday added", "success");
-      setForm({ note: "", date: "" });
-      queryClient.invalidateQueries({ queryKey: ["public-holidays"] });
-      queryClient.invalidateQueries({ queryKey: ["capacity"] });
-    },
-    onError: (error) => push(toastFromError(error, "Could not add holiday"), "error"),
-  });
-
-  const submit = (event: FormEvent<HTMLFormElement>) => {
-    event.preventDefault();
-    createMutation.mutate({
-      leave_type: "public_holiday",
-      start_date: form.date,
-      end_date: form.date,
-      note: form.note,
-    });
-  };
-
-  return (
-    <article className="panel">
-      {holidays.length === 0 ? (
-        <EmptyState title="No holidays configured" description="Adding holidays reduces capacity on those dates for everyone." />
-      ) : (
-        <table className="data-table">
-          <thead>
-            <tr>
-              <th>Date</th>
-              <th>Label</th>
-            </tr>
-          </thead>
-          <tbody>
-            {holidays.map((holiday) => (
-              <tr key={holiday.id}>
-                <td><strong>{holiday.start_date}</strong></td>
-                <td>{holiday.note ?? <span className="muted-text">Holiday</span>}</td>
-              </tr>
-            ))}
-          </tbody>
-        </table>
-      )}
-
-      <form className="form-grid manage-inline-form" onSubmit={submit}>
-        <label>
-          Date
-          <input
-            onChange={(event) => setForm({ ...form, date: event.target.value })}
-            required
-            type="date"
-            value={form.date}
-          />
-        </label>
-        <label>
-          Label
-          <input
-            onChange={(event) => setForm({ ...form, note: event.target.value })}
-            placeholder="e.g. Independence Day"
-            type="text"
-            value={form.note}
-          />
-        </label>
-        <div className="span-2">
-          <button className="primary-button" disabled={createMutation.isPending} type="submit">
-            Add holiday
-          </button>
-        </div>
-      </form>
-    </article>
-  );
-}
-
-function UsersSection() {
-  const queryClient = useQueryClient();
-  const { user } = useAuth();
-  const { push } = useToast();
-  const { data: users = [] } = useUsers();
-  const [form, setForm] = useState({ username: "", password: "", role: "viewer" });
-  const isAdmin = user?.role === "admin";
-
-  const createMutation = useMutation({
-    mutationFn: createUser,
-    onSuccess: () => {
-      push("User created", "success");
-      setForm({ username: "", password: "", role: "viewer" });
-      queryClient.invalidateQueries({ queryKey: ["users"] });
-    },
-    onError: (error) => push(toastFromError(error, "Could not create user"), "error"),
-  });
-
-  const submit = (event: FormEvent<HTMLFormElement>) => {
-    event.preventDefault();
-    createMutation.mutate(form);
-  };
-
-  if (!isAdmin) {
-    return (
-      <article className="panel">
-        <EmptyState
-          title="Admins only"
-          description="You need the admin role to manage portal users."
-        />
-      </article>
-    );
-  }
-
-  return (
-    <article className="panel">
-      {users.length === 0 ? (
-        <EmptyState title="No users yet" />
-      ) : (
-        <table className="data-table">
-          <thead>
-            <tr>
-              <th>Username</th>
-              <th>Role</th>
-              <th>Created</th>
-            </tr>
-          </thead>
-          <tbody>
-            {users.map((portalUser) => (
-              <tr key={portalUser.id}>
-                <td><strong>{portalUser.username}</strong></td>
-                <td><span className="badge muted">{portalUser.role}</span></td>
-                <td>{portalUser.created_at.slice(0, 10)}</td>
-              </tr>
-            ))}
-          </tbody>
-        </table>
-      )}
-
-      <form className="form-grid manage-inline-form" onSubmit={submit}>
-        <label>
-          Username
-          <input
-            onChange={(event) => setForm({ ...form, username: event.target.value })}
-            required
-            type="text"
-            value={form.username}
-          />
-        </label>
-        <label>
-          Password
-          <input
-            minLength={4}
-            onChange={(event) => setForm({ ...form, password: event.target.value })}
-            required
-            type="password"
-            value={form.password}
-          />
-        </label>
-        <label>
-          Role
-          <select
-            onChange={(event) => setForm({ ...form, role: event.target.value })}
-            value={form.role}
-          >
-            <option value="viewer">Viewer</option>
-            <option value="manager">Manager</option>
-            <option value="admin">Admin</option>
-          </select>
-        </label>
-        <div className="span-2">
-          <button className="primary-button" disabled={createMutation.isPending} type="submit">
-            Create user
-          </button>
-        </div>
-      </form>
-    </article>
-  );
-}

frontend/src/pages/Reports.tsx

@@ -1,4 +1,5 @@
 import { format, parseISO } from "date-fns";
+import { LineChart } from "lucide-react";
 import { useState } from "react";
 
 import { EmptyState } from "../components/ui/EmptyState";
@@ -12,6 +13,7 @@ import {
 } from "../hooks/usePortalData";
 import { useTimelineStore, type TimelineRange } from "../store/timeline";
 import type { Leave, ProjectAllocationRow, UtilizationRow } from "../types";
+import { ManagePageHeader } from "./manage/_shared";
 
 const RANGE_OPTIONS: Array<{ value: TimelineRange; label: string }> = [
   { value: 1, label: "4 weeks" },
@@ -58,27 +60,25 @@ export function ReportsPage() {
 
   return (
     <section>
-      <header className="page-header row">
-        <div>
-          <p className="eyebrow">Management</p>
-          <h2>Reports</h2>
-          <p className="page-subtitle">
-            Reports for {format(parseISO(start), "MMM d")} → {format(parseISO(end), "MMM d, yyyy")}.
-          </p>
-        </div>
-        <div className="view-toggle">
-          {RANGE_OPTIONS.map((option) => (
-            <button
-              className={months === option.value ? "primary-button" : "secondary-button"}
-              key={option.value}
-              onClick={() => setMonths(option.value)}
-              type="button"
-            >
-              {option.label}
-            </button>
-          ))}
-        </div>
-      </header>
+      <ManagePageHeader
+        icon={LineChart}
+        title="Reports Center"
+        subtitle={`Reports for ${format(parseISO(start), "MMM d")} → ${format(parseISO(end), "MMM d, yyyy")}.`}
+        actions={
+          <div className="view-toggle">
+            {RANGE_OPTIONS.map((option) => (
+              <button
+                className={months === option.value ? "primary-button" : "secondary-button"}
+                key={option.value}
+                onClick={() => setMonths(option.value)}
+                type="button"
+              >
+                {option.label}
+              </button>
+            ))}
+          </div>
+        }
+      />
 
       <div className="tabs">
         <button className={tab === "utilization" ? "tab active" : "tab"} onClick={() => setTab("utilization")} type="button">

frontend/src/pages/manage/HolidaysSection.tsx

@@ -0,0 +1,141 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { CalendarDays } from "lucide-react";
+import { useMemo, useState } from "react";
+
+import { createPublicHoliday } from "../../api/leaves";
+import { EmptyState } from "../../components/ui/EmptyState";
+import { Modal } from "../../components/ui/Modal";
+import { toastFromError, useToast } from "../../components/ui/Toast";
+import { usePublicHolidays } from "../../hooks/usePortalData";
+import { ManagePageHeader, ManageToolbar } from "./_shared";
+
+export function HolidaysSection() {
+  const queryClient = useQueryClient();
+  const { push } = useToast();
+  const { data: holidays = [] } = usePublicHolidays();
+  const [search, setSearch] = useState("");
+  const [creating, setCreating] = useState(false);
+  const [form, setForm] = useState({ note: "", date: "" });
+
+  const createMutation = useMutation({
+    mutationFn: createPublicHoliday,
+    onSuccess: () => {
+      push("Holiday added", "success");
+      setForm({ note: "", date: "" });
+      setCreating(false);
+      queryClient.invalidateQueries({ queryKey: ["public-holidays"] });
+      queryClient.invalidateQueries({ queryKey: ["capacity"] });
+    },
+    onError: (error) => push(toastFromError(error, "Could not add holiday"), "error"),
+  });
+
+  const filtered = useMemo(() => {
+    const term = search.trim().toLowerCase();
+    if (!term) return holidays;
+    return holidays.filter(
+      (holiday) =>
+        (holiday.note ?? "").toLowerCase().includes(term) || holiday.start_date.includes(term),
+    );
+  }, [holidays, search]);
+
+  return (
+    <>
+      <ManagePageHeader
+        icon={CalendarDays}
+        title="Public Holidays"
+        subtitle="Dates that reduce capacity for everyone in the portal."
+        actions={
+          <button
+            className="primary-button manage-toolbar-new"
+            onClick={() => {
+              setForm({ note: "", date: "" });
+              setCreating(true);
+            }}
+            type="button"
+          >
+            + New Holiday
+          </button>
+        }
+      />
+
+      <article className="manage-card">
+        <ManageToolbar onSearchChange={setSearch} search={search} />
+
+        {filtered.length === 0 ? (
+          <EmptyState
+            title={search ? "No matches" : "No holidays configured"}
+            description={search ? "Try a different term." : "Adding holidays reduces capacity on those dates for everyone."}
+          />
+        ) : (
+          <table className="data-table runn-table">
+            <thead>
+              <tr>
+                <th>Date</th>
+                <th>Label</th>
+              </tr>
+            </thead>
+            <tbody>
+              {filtered.map((holiday) => (
+                <tr key={holiday.id}>
+                  <td>
+                    <strong>{holiday.start_date}</strong>
+                  </td>
+                  <td>{holiday.note ?? <span className="muted-text">Holiday</span>}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        )}
+      </article>
+
+      <Modal
+        open={creating}
+        onClose={() => setCreating(false)}
+        title="New public holiday"
+        footer={
+          <>
+            <button className="ghost-button" onClick={() => setCreating(false)} type="button">
+              Cancel
+            </button>
+            <button
+              className="primary-button"
+              disabled={createMutation.isPending || !form.date}
+              onClick={() =>
+                createMutation.mutate({
+                  leave_type: "public_holiday",
+                  start_date: form.date,
+                  end_date: form.date,
+                  note: form.note,
+                })
+              }
+              type="button"
+            >
+              Add holiday
+            </button>
+          </>
+        }
+      >
+        <div className="form-grid">
+          <label>
+            Date
+            <input
+              autoFocus
+              onChange={(event) => setForm({ ...form, date: event.target.value })}
+              type="date"
+              value={form.date}
+            />
+          </label>
+          <label>
+            Label
+            <input
+              onChange={(event) => setForm({ ...form, note: event.target.value })}
+              placeholder="e.g. Independence Day"
+              type="text"
+              value={form.note}
+            />
+          </label>
+        </div>
+      </Modal>
+    </>
+  );
+}

frontend/src/pages/manage/HubSection.tsx

@@ -0,0 +1,102 @@
+import { LayoutDashboard } from "lucide-react";
+import { useMemo, useState } from "react";
+import { useNavigate } from "react-router-dom";
+
+import {
+  usePeople,
+  useProjects,
+  usePublicHolidays,
+  useRoles,
+  useSkills,
+  useTags,
+  useTeams,
+  useUsers,
+} from "../../hooks/usePortalData";
+import { ManagePageHeader, ManageToolbar } from "./_shared";
+
+interface HubEntry {
+  key: string;
+  name: string;
+  count: number;
+}
+
+export function HubSection() {
+  const navigate = useNavigate();
+  const [search, setSearch] = useState("");
+
+  const { data: people = [] } = usePeople();
+  const { data: projects = [] } = useProjects();
+  const { data: roles = [] } = useRoles();
+  const { data: teams = [] } = useTeams();
+  const { data: tags = [] } = useTags();
+  const { data: skills = [] } = useSkills();
+  const { data: holidays = [] } = usePublicHolidays();
+  const { data: users = [] } = useUsers();
+
+  const entries: HubEntry[] = useMemo(
+    () => [
+      { key: "projects", name: "Projects", count: projects.length },
+      { key: "people", name: "People", count: people.length },
+      { key: "roles", name: "Roles", count: roles.length },
+      { key: "teams", name: "Teams", count: teams.length },
+      { key: "skills", name: "Skills", count: skills.length },
+      { key: "tags", name: "Tags", count: tags.length },
+      { key: "holidays", name: "Holidays", count: holidays.length },
+      { key: "users", name: "Users", count: users.length },
+    ],
+    [people.length, projects.length, roles.length, teams.length, tags.length, skills.length, holidays.length, users.length],
+  );
+
+  const filtered = useMemo(() => {
+    const term = search.trim().toLowerCase();
+    if (!term) return entries;
+    return entries.filter((entry) => entry.name.toLowerCase().includes(term));
+  }, [entries, search]);
+
+  return (
+    <section className="manage-page">
+      <ManagePageHeader icon={LayoutDashboard} title="Manage" />
+
+      <article className="manage-card">
+        <ManageToolbar onSearchChange={setSearch} search={search} />
+
+        <table className="data-table runn-table">
+          <thead>
+            <tr>
+              <th>Name</th>
+              <th className="num">Count</th>
+              <th aria-label="Actions" className="row-actions" />
+            </tr>
+          </thead>
+          <tbody>
+            {filtered.map((entry) => (
+              <tr key={entry.key}>
+                <td>
+                  <button
+                    className="link-text"
+                    onClick={() => navigate(`/manage/${entry.key}`)}
+                    type="button"
+                  >
+                    {entry.name}
+                  </button>
+                </td>
+                <td className="num">
+                  <span className="count-static">{entry.count}</span>
+                </td>
+                <td className="row-actions">
+                  <button
+                    className="ghost-button hub-details-btn"
+                    onClick={() => navigate(`/manage/${entry.key}`)}
+                    type="button"
+                  >
+                    Details
+                  </button>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </article>
+    </section>
+  );
+}

frontend/src/pages/manage/PeopleSection.tsx

@@ -0,0 +1,436 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { ArchiveRestore, ExternalLink, Pencil, Trash2, UserRound } from "lucide-react";
+import { useEffect, useMemo, useState } from "react";
+import { useNavigate } from "react-router-dom";
+
+import { archivePerson, createPerson, restorePerson, updatePerson } from "../../api/people";
+import { Avatar } from "../../components/ui/Avatar";
+import { EmptyState } from "../../components/ui/EmptyState";
+import { Modal } from "../../components/ui/Modal";
+import { toastFromError, useToast } from "../../components/ui/Toast";
+import { usePeople, useRoles, useTags, useTeams } from "../../hooks/usePortalData";
+import type { Person, PersonInput } from "../../types";
+import { ManagePageHeader, ManageToolbar, RowMenu } from "./_shared";
+
+const AVATAR_PALETTE = ["#7c3aed", "#6366f1", "#0ea5e9", "#16a34a", "#f97316", "#a855f7", "#facc15", "#ef4444"];
+
+const emptyForm: PersonInput = {
+  name: "",
+  email: "",
+  role_id: 0,
+  team_id: null,
+  weekly_capacity_hrs: 40,
+  start_date: null,
+  end_date: null,
+  avatar_color: AVATAR_PALETTE[0],
+  skill_ids: [],
+  tag_ids: [],
+};
+
+export function PeopleSection() {
+  const queryClient = useQueryClient();
+  const navigate = useNavigate();
+  const { push } = useToast();
+
+  const [filter, setFilter] = useState<"active" | "archived" | "all">("active");
+  const [search, setSearch] = useState("");
+  const [creating, setCreating] = useState(false);
+  const [editing, setEditing] = useState<Person | null>(null);
+
+  const includeArchived = filter !== "active";
+  const { data: people = [] } = usePeople(includeArchived);
+  const { data: roles = [] } = useRoles();
+  const { data: teams = [] } = useTeams();
+  const { data: allTags = [] } = useTags();
+
+  const invalidate = () => {
+    queryClient.invalidateQueries({ queryKey: ["people"] });
+    queryClient.invalidateQueries({ queryKey: ["roles"] });
+    queryClient.invalidateQueries({ queryKey: ["teams"] });
+    queryClient.invalidateQueries({ queryKey: ["tags"] });
+  };
+
+  const createMutation = useMutation({
+    mutationFn: createPerson,
+    onSuccess: () => {
+      push("Person added", "success");
+      invalidate();
+      setCreating(false);
+    },
+    onError: (error) => push(toastFromError(error, "Could not create person"), "error"),
+  });
+
+  const updateMutation = useMutation({
+    mutationFn: ({ id, input }: { id: number; input: Partial<PersonInput> }) => updatePerson(id, input),
+    onSuccess: () => {
+      push("Person updated", "success");
+      invalidate();
+      setEditing(null);
+    },
+    onError: (error) => push(toastFromError(error, "Could not update person"), "error"),
+  });
+
+  const archiveMutation = useMutation({
+    mutationFn: archivePerson,
+    onSuccess: () => {
+      push("Person archived", "success");
+      invalidate();
+    },
+    onError: (error) => push(toastFromError(error, "Could not archive person"), "error"),
+  });
+
+  const restoreMutation = useMutation({
+    mutationFn: restorePerson,
+    onSuccess: () => {
+      push("Person restored", "success");
+      invalidate();
+    },
+    onError: (error) => push(toastFromError(error, "Could not restore person"), "error"),
+  });
+
+  const filtered = useMemo(() => {
+    const term = search.trim().toLowerCase();
+    return people.filter((person) => {
+      if (filter === "active" && !person.is_active) return false;
+      if (filter === "archived" && person.is_active) return false;
+      if (!term) return true;
+      return (
+        person.name.toLowerCase().includes(term) ||
+        person.email.toLowerCase().includes(term) ||
+        person.role?.name?.toLowerCase().includes(term) ||
+        (person.team?.name ?? "").toLowerCase().includes(term) ||
+        person.tags.some((t) => t.name.toLowerCase().includes(term))
+      );
+    });
+  }, [people, search, filter]);
+
+  return (
+    <>
+      <ManagePageHeader
+        icon={UserRound}
+        title="People"
+        actions={
+          <button className="primary-button manage-toolbar-new" onClick={() => setCreating(true)} type="button">
+            + New Person
+          </button>
+        }
+      />
+
+      <article className="manage-card">
+        <ManageToolbar
+          onSearchChange={setSearch}
+          search={search}
+          trailing={
+            <div className="filter-pill">
+              <label htmlFor="people-filter">Filter</label>
+              <select
+                id="people-filter"
+                onChange={(event) => setFilter(event.target.value as typeof filter)}
+                value={filter}
+              >
+                <option value="active">Active</option>
+                <option value="archived">Archived</option>
+                <option value="all">All</option>
+              </select>
+            </div>
+          }
+        />
+
+        {filtered.length === 0 ? (
+          <EmptyState
+            title={search ? "No matches" : "No people yet"}
+            description={search ? "Try a different search term." : "Add your first IT team member to get started."}
+          />
+        ) : (
+          <table className="data-table runn-table">
+            <thead>
+              <tr>
+                <th>Name</th>
+                <th>Role</th>
+                <th>Team</th>
+                <th>Tags</th>
+                <th aria-label="Actions" className="row-actions" />
+              </tr>
+            </thead>
+            <tbody>
+              {filtered.map((person) => (
+                <tr key={person.id} className={!person.is_active ? "row-archived" : undefined}>
+                  <td>
+                    <div className="cell-person">
+                      <Avatar name={person.name} color={person.avatar_color} size={28} />
+                      <button className="link-text" onClick={() => setEditing(person)} type="button">
+                        {person.name}
+                      </button>
+                      {!person.is_active ? <span className="badge muted">Archived</span> : null}
+                    </div>
+                  </td>
+                  <td>{person.role?.name ?? <span className="muted-text">—</span>}</td>
+                  <td>{person.team?.name ?? <span className="muted-text">—</span>}</td>
+                  <td>
+                    {person.tags.length === 0 ? (
+                      <span className="muted-text">—</span>
+                    ) : (
+                      <div className="cell-tags">
+                        {person.tags.map((tag) => (
+                          <span
+                            className="tag-pill"
+                            key={tag.id}
+                            style={{ background: `${tag.color}22`, color: tag.color }}
+                          >
+                            {tag.name}
+                          </span>
+                        ))}
+                      </div>
+                    )}
+                  </td>
+                  <td className="row-actions">
+                    <RowMenu
+                      items={[
+                        {
+                          label: "Open in Planner",
+                          icon: ExternalLink,
+                          onClick: () => navigate(`/people?focus=${person.id}`),
+                        },
+                        { label: "Edit Details", icon: Pencil, onClick: () => setEditing(person) },
+                        person.is_active
+                          ? {
+                              label: "Archive",
+                              icon: Trash2,
+                              danger: true,
+                              onClick: () => {
+                                if (window.confirm(`Archive ${person.name}?`)) {
+                                  archiveMutation.mutate(person.id);
+                                }
+                              },
+                            }
+                          : {
+                              label: "Restore",
+                              icon: ArchiveRestore,
+                              onClick: () => restoreMutation.mutate(person.id),
+                            },
+                      ]}
+                    />
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        )}
+      </article>
+
+      <PersonFormModal
+        open={creating || !!editing}
+        title={editing ? `Edit ${editing.name}` : "New person"}
+        onClose={() => {
+          setCreating(false);
+          setEditing(null);
+        }}
+        initial={
+          editing
+            ? {
+                name: editing.name,
+                email: editing.email,
+                role_id: editing.role.id,
+                team_id: editing.team?.id ?? null,
+                weekly_capacity_hrs: editing.weekly_capacity_hrs,
+                start_date: editing.start_date ?? null,
+                end_date: editing.end_date ?? null,
+                avatar_color: editing.avatar_color,
+                skill_ids: editing.person_skills.map((ps) => ps.skill.id),
+                tag_ids: editing.tags.map((t) => t.id),
+              }
+            : emptyForm
+        }
+        roles={roles}
+        teams={teams}
+        tags={allTags}
+        isSaving={createMutation.isPending || updateMutation.isPending}
+        onSave={(input) => {
+          if (editing) updateMutation.mutate({ id: editing.id, input });
+          else createMutation.mutate(input);
+        }}
+      />
+    </>
+  );
+}
+
+interface PersonFormModalProps {
+  open: boolean;
+  title: string;
+  onClose: () => void;
+  initial: PersonInput;
+  roles: { id: number; name: string }[];
+  teams: { id: number; name: string }[];
+  tags: { id: number; name: string; color: string }[];
+  isSaving: boolean;
+  onSave: (input: PersonInput) => void;
+}
+
+function PersonFormModal({
+  open,
+  title,
+  onClose,
+  initial,
+  roles,
+  teams,
+  tags,
+  isSaving,
+  onSave,
+}: PersonFormModalProps) {
+  const [form, setForm] = useState<PersonInput>(initial);
+
+  useEffect(() => {
+    if (open) setForm(initial);
+  }, [open, initial]);
+
+  const toggleTag = (tagId: number) => {
+    const exists = form.tag_ids.includes(tagId);
+    setForm({
+      ...form,
+      tag_ids: exists ? form.tag_ids.filter((id) => id !== tagId) : [...form.tag_ids, tagId],
+    });
+  };
+
+  const canSave = form.name.trim() && form.email.trim() && form.role_id > 0;
+
+  return (
+    <Modal
+      open={open}
+      onClose={onClose}
+      title={title}
+      size="lg"
+      footer={
+        <>
+          <button className="ghost-button" onClick={onClose} type="button">
+            Cancel
+          </button>
+          <button
+            className="primary-button"
+            disabled={isSaving || !canSave}
+            onClick={() => onSave(form)}
+            type="button"
+          >
+            Save
+          </button>
+        </>
+      }
+    >
+      <div className="form-grid">
+        <label>
+          Name
+          <input
+            autoFocus
+            onChange={(event) => setForm({ ...form, name: event.target.value })}
+            placeholder="Jane Doe"
+            type="text"
+            value={form.name}
+          />
+        </label>
+        <label>
+          Email
+          <input
+            onChange={(event) => setForm({ ...form, email: event.target.value })}
+            placeholder="jane@example.com"
+            type="email"
+            value={form.email}
+          />
+        </label>
+        <label>
+          Default role
+          <select
+            onChange={(event) => setForm({ ...form, role_id: Number(event.target.value) })}
+            value={form.role_id || ""}
+          >
+            <option value="">Select a role…</option>
+            {roles.map((role) => (
+              <option key={role.id} value={role.id}>
+                {role.name}
+              </option>
+            ))}
+          </select>
+        </label>
+        <label>
+          Team
+          <select
+            onChange={(event) =>
+              setForm({ ...form, team_id: event.target.value ? Number(event.target.value) : null })
+            }
+            value={form.team_id ?? ""}
+          >
+            <option value="">No team</option>
+            {teams.map((team) => (
+              <option key={team.id} value={team.id}>
+                {team.name}
+              </option>
+            ))}
+          </select>
+        </label>
+        <label>
+          Weekly capacity (hrs)
+          <input
+            min={0}
+            onChange={(event) => setForm({ ...form, weekly_capacity_hrs: Number(event.target.value) })}
+            step={0.5}
+            type="number"
+            value={form.weekly_capacity_hrs}
+          />
+        </label>
+        <label>
+          Avatar color
+          <div className="color-picker">
+            {AVATAR_PALETTE.map((color) => (
+              <button
+                aria-label={`Use color ${color}`}
+                className={`color-swatch ${form.avatar_color === color ? "selected" : ""}`}
+                key={color}
+                onClick={() => setForm({ ...form, avatar_color: color })}
+                style={{ background: color }}
+                type="button"
+              />
+            ))}
+          </div>
+        </label>
+        <label>
+          Start date
+          <input
+            onChange={(event) => setForm({ ...form, start_date: event.target.value || null })}
+            type="date"
+            value={form.start_date ?? ""}
+          />
+        </label>
+        <label>
+          End date
+          <input
+            onChange={(event) => setForm({ ...form, end_date: event.target.value || null })}
+            type="date"
+            value={form.end_date ?? ""}
+          />
+        </label>
+        <label className="span-2">
+          Tags
+          <div className="tag-picker">
+            {tags.length === 0 ? <span className="muted-text">No tags yet — add one from Manage → Tags.</span> : null}
+            {tags.map((tag) => {
+              const active = form.tag_ids.includes(tag.id);
+              return (
+                <button
+                  className={`badge tag-chip${active ? "" : " muted"}`}
+                  key={tag.id}
+                  onClick={() => toggleTag(tag.id)}
+                  style={
+                    active
+                      ? { borderColor: tag.color, background: tag.color, color: "white" }
+                      : { borderColor: tag.color, color: tag.color }
+                  }
+                  type="button"
+                >
+                  {tag.name}
+                </button>
+              );
+            })}
+          </div>
+        </label>
+      </div>
+    </Modal>
+  );
+}

frontend/src/pages/manage/ProjectsSection.tsx

@@ -0,0 +1,447 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { addMonths, format } from "date-fns";
+import { ArchiveRestore, ClipboardList, ExternalLink, Pencil, Trash2 } from "lucide-react";
+import { useEffect, useMemo, useState } from "react";
+import { useNavigate } from "react-router-dom";
+
+import { archiveProject, createProject, restoreProject, updateProject } from "../../api/projects";
+import { EmptyState } from "../../components/ui/EmptyState";
+import { Modal } from "../../components/ui/Modal";
+import { toastFromError, useToast } from "../../components/ui/Toast";
+import { usePeople, useProjects, useTags } from "../../hooks/usePortalData";
+import type { Project, ProjectInput } from "../../types";
+import { ManagePageHeader, ManageToolbar, RowMenu } from "./_shared";
+
+const PROJECT_COLORS = ["#0ea5e9", "#16a34a", "#f97316", "#a855f7", "#facc15", "#ef4444", "#0f766e"];
+
+const STATUSES: Array<{ value: string; label: string }> = [
+  { value: "planning", label: "Planning" },
+  { value: "active", label: "Active" },
+  { value: "on_hold", label: "On hold" },
+  { value: "completed", label: "Completed" },
+];
+
+const TYPES: Array<{ value: string; label: string }> = [
+  { value: "infrastructure", label: "Infrastructure" },
+  { value: "development", label: "Development" },
+  { value: "support", label: "Support" },
+  { value: "other", label: "Other" },
+];
+
+const statusLabel = (value: string) => STATUSES.find((s) => s.value === value)?.label ?? value;
+
+export function ProjectsSection() {
+  const queryClient = useQueryClient();
+  const navigate = useNavigate();
+  const { push } = useToast();
+
+  const [filter, setFilter] = useState<"active" | "archived" | "all">("active");
+  const [search, setSearch] = useState("");
+  const [creating, setCreating] = useState(false);
+  const [editing, setEditing] = useState<Project | null>(null);
+
+  const includeArchived = filter !== "active";
+  const { data: projects = [] } = useProjects(includeArchived);
+  const { data: people = [] } = usePeople();
+  const { data: allTags = [] } = useTags();
+
+  const invalidate = () => {
+    queryClient.invalidateQueries({ queryKey: ["projects"] });
+    queryClient.invalidateQueries({ queryKey: ["allocations"] });
+  };
+
+  const createMutation = useMutation({
+    mutationFn: createProject,
+    onSuccess: () => {
+      push("Project created", "success");
+      invalidate();
+      setCreating(false);
+    },
+    onError: (error) => push(toastFromError(error, "Could not create project"), "error"),
+  });
+
+  const updateMutation = useMutation({
+    mutationFn: ({ id, input }: { id: number; input: Partial<ProjectInput> }) => updateProject(id, input),
+    onSuccess: () => {
+      push("Project updated", "success");
+      invalidate();
+      setEditing(null);
+    },
+    onError: (error) => push(toastFromError(error, "Could not update project"), "error"),
+  });
+
+  const archiveMutation = useMutation({
+    mutationFn: archiveProject,
+    onSuccess: () => {
+      push("Project archived", "success");
+      invalidate();
+    },
+    onError: (error) => push(toastFromError(error, "Could not archive project"), "error"),
+  });
+
+  const restoreMutation = useMutation({
+    mutationFn: restoreProject,
+    onSuccess: () => {
+      push("Project restored", "success");
+      invalidate();
+    },
+    onError: (error) => push(toastFromError(error, "Could not restore project"), "error"),
+  });
+
+  const filtered = useMemo(() => {
+    const term = search.trim().toLowerCase();
+    return projects.filter((project) => {
+      if (filter === "active" && !project.is_active) return false;
+      if (filter === "archived" && project.is_active) return false;
+      if (!term) return true;
+      return (
+        project.name.toLowerCase().includes(term) ||
+        (project.description ?? "").toLowerCase().includes(term) ||
+        project.tags.some((tag) => tag.name.toLowerCase().includes(term))
+      );
+    });
+  }, [projects, search, filter]);
+
+  return (
+    <>
+      <ManagePageHeader
+        icon={ClipboardList}
+        title="Projects"
+        actions={
+          <button className="primary-button manage-toolbar-new" onClick={() => setCreating(true)} type="button">
+            + New Project
+          </button>
+        }
+      />
+
+      <article className="manage-card">
+        <ManageToolbar
+          onSearchChange={setSearch}
+          search={search}
+          trailing={
+            <div className="filter-pill">
+              <label htmlFor="projects-filter">Filter</label>
+              <select
+                id="projects-filter"
+                onChange={(event) => setFilter(event.target.value as typeof filter)}
+                value={filter}
+              >
+                <option value="active">Active</option>
+                <option value="archived">Archived</option>
+                <option value="all">All</option>
+              </select>
+            </div>
+          }
+        />
+
+        {filtered.length === 0 ? (
+          <EmptyState
+            title={search ? "No matches" : "No projects yet"}
+            description={search ? "Try a different search term." : "Create your first project to allocate people."}
+          />
+        ) : (
+          <table className="data-table runn-table">
+            <thead>
+              <tr>
+                <th>Name</th>
+                <th>Status</th>
+                <th>Type</th>
+                <th>Dates</th>
+                <th>Tags</th>
+                <th aria-label="Actions" className="row-actions" />
+              </tr>
+            </thead>
+            <tbody>
+              {filtered.map((project) => (
+                <tr key={project.id} className={!project.is_active ? "row-archived" : undefined}>
+                  <td>
+                    <div className="cell-project">
+                      <span className="project-swatch" style={{ background: project.color }} />
+                      <button className="link-text" onClick={() => setEditing(project)} type="button">
+                        {project.name}
+                      </button>
+                      {!project.is_active ? <span className="badge muted">Archived</span> : null}
+                    </div>
+                  </td>
+                  <td>
+                    <span className={`badge status-${project.status}`}>{statusLabel(project.status)}</span>
+                  </td>
+                  <td>{project.type}</td>
+                  <td>
+                    <span className="muted-text">
+                      {format(new Date(project.start_date), "d MMM yy")} – {format(new Date(project.end_date), "d MMM yy")}
+                    </span>
+                  </td>
+                  <td>
+                    {project.tags.length === 0 ? (
+                      <span className="muted-text">—</span>
+                    ) : (
+                      <div className="cell-tags">
+                        {project.tags.map((tag) => (
+                          <span
+                            className="tag-pill"
+                            key={tag.id}
+                            style={{ background: `${tag.color}22`, color: tag.color }}
+                          >
+                            {tag.name}
+                          </span>
+                        ))}
+                      </div>
+                    )}
+                  </td>
+                  <td className="row-actions">
+                    <RowMenu
+                      items={[
+                        {
+                          label: "Open in Planner",
+                          icon: ExternalLink,
+                          onClick: () => navigate(`/projects?focus=${project.id}`),
+                        },
+                        { label: "Edit Details", icon: Pencil, onClick: () => setEditing(project) },
+                        project.is_active
+                          ? {
+                              label: "Archive",
+                              icon: Trash2,
+                              danger: true,
+                              onClick: () => {
+                                if (window.confirm(`Archive ${project.name}?`)) {
+                                  archiveMutation.mutate(project.id);
+                                }
+                              },
+                            }
+                          : {
+                              label: "Restore",
+                              icon: ArchiveRestore,
+                              onClick: () => restoreMutation.mutate(project.id),
+                            },
+                      ]}
+                    />
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        )}
+      </article>
+
+      <ProjectFormModal
+        open={creating || !!editing}
+        title={editing ? `Edit ${editing.name}` : "New project"}
+        onClose={() => {
+          setCreating(false);
+          setEditing(null);
+        }}
+        initial={
+          editing
+            ? {
+                name: editing.name,
+                description: editing.description ?? "",
+                status: editing.status,
+                type: editing.type,
+                start_date: editing.start_date,
+                end_date: editing.end_date,
+                is_tentative: editing.is_tentative,
+                color: editing.color,
+                owner_id: editing.owner_id ?? null,
+                tag_ids: editing.tags.map((t) => t.id),
+              }
+            : {
+                name: "",
+                description: "",
+                status: "planning",
+                type: "development",
+                start_date: format(new Date(), "yyyy-MM-dd"),
+                end_date: format(addMonths(new Date(), 2), "yyyy-MM-dd"),
+                is_tentative: false,
+                color: PROJECT_COLORS[0],
+                owner_id: null,
+                tag_ids: [],
+              }
+        }
+        owners={people}
+        tags={allTags}
+        isSaving={createMutation.isPending || updateMutation.isPending}
+        onSave={(input) => {
+          if (editing) updateMutation.mutate({ id: editing.id, input });
+          else createMutation.mutate(input);
+        }}
+      />
+    </>
+  );
+}
+
+interface ProjectFormModalProps {
+  open: boolean;
+  title: string;
+  onClose: () => void;
+  initial: ProjectInput;
+  owners: { id: number; name: string }[];
+  tags: { id: number; name: string; color: string }[];
+  isSaving: boolean;
+  onSave: (input: ProjectInput) => void;
+}
+
+function ProjectFormModal({ open, title, onClose, initial, owners, tags, isSaving, onSave }: ProjectFormModalProps) {
+  const [form, setForm] = useState<ProjectInput>(initial);
+
+  useEffect(() => {
+    if (open) setForm(initial);
+  }, [open, initial]);
+
+  const toggleTag = (tagId: number) => {
+    const exists = form.tag_ids.includes(tagId);
+    setForm({
+      ...form,
+      tag_ids: exists ? form.tag_ids.filter((id) => id !== tagId) : [...form.tag_ids, tagId],
+    });
+  };
+
+  const canSave = form.name.trim() && form.start_date && form.end_date;
+
+  return (
+    <Modal
+      open={open}
+      onClose={onClose}
+      title={title}
+      size="lg"
+      footer={
+        <>
+          <button className="ghost-button" onClick={onClose} type="button">
+            Cancel
+          </button>
+          <button
+            className="primary-button"
+            disabled={isSaving || !canSave}
+            onClick={() => onSave(form)}
+            type="button"
+          >
+            Save
+          </button>
+        </>
+      }
+    >
+      <div className="form-grid">
+        <label className="span-2">
+          Project name
+          <input
+            autoFocus
+            onChange={(event) => setForm({ ...form, name: event.target.value })}
+            type="text"
+            value={form.name}
+          />
+        </label>
+        <label className="span-2">
+          Description
+          <textarea
+            onChange={(event) => setForm({ ...form, description: event.target.value })}
+            placeholder="What is this project about?"
+            rows={3}
+            value={form.description ?? ""}
+          />
+        </label>
+        <label>
+          Status
+          <select
+            onChange={(event) => setForm({ ...form, status: event.target.value })}
+            value={form.status}
+          >
+            {STATUSES.map((status) => (
+              <option key={status.value} value={status.value}>
+                {status.label}
+              </option>
+            ))}
+          </select>
+        </label>
+        <label>
+          Type
+          <select onChange={(event) => setForm({ ...form, type: event.target.value })} value={form.type}>
+            {TYPES.map((type) => (
+              <option key={type.value} value={type.value}>
+                {type.label}
+              </option>
+            ))}
+          </select>
+        </label>
+        <label>
+          Start date
+          <input
+            onChange={(event) => setForm({ ...form, start_date: event.target.value })}
+            type="date"
+            value={form.start_date}
+          />
+        </label>
+        <label>
+          End date
+          <input
+            onChange={(event) => setForm({ ...form, end_date: event.target.value })}
+            type="date"
+            value={form.end_date}
+          />
+        </label>
+        <label>
+          Project owner
+          <select
+            onChange={(event) =>
+              setForm({ ...form, owner_id: event.target.value ? Number(event.target.value) : null })
+            }
+            value={form.owner_id ?? ""}
+          >
+            <option value="">Unassigned</option>
+            {owners.map((person) => (
+              <option key={person.id} value={person.id}>
+                {person.name}
+              </option>
+            ))}
+          </select>
+        </label>
+        <label>
+          Color
+          <div className="color-picker">
+            {PROJECT_COLORS.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>
+        <label className="span-2 checkbox-row">
+          <input
+            checked={form.is_tentative}
+            onChange={(event) => setForm({ ...form, is_tentative: event.target.checked })}
+            type="checkbox"
+          />
+          <span>Tentative — not confirmed yet</span>
+        </label>
+        <label className="span-2">
+          Tags
+          <div className="tag-picker">
+            {tags.length === 0 ? <span className="muted-text">No tags yet — add one from Manage → Tags.</span> : null}
+            {tags.map((tag) => {
+              const active = form.tag_ids.includes(tag.id);
+              return (
+                <button
+                  className={`badge tag-chip${active ? "" : " muted"}`}
+                  key={tag.id}
+                  onClick={() => toggleTag(tag.id)}
+                  style={
+                    active
+                      ? { borderColor: tag.color, background: tag.color, color: "white" }
+                      : { borderColor: tag.color, color: tag.color }
+                  }
+                  type="button"
+                >
+                  {tag.name}
+                </button>
+              );
+            })}
+          </div>
+        </label>
+      </div>
+    </Modal>
+  );
+}

frontend/src/pages/manage/RolesSection.tsx

@@ -0,0 +1,212 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { Briefcase, Pencil, Trash2 } from "lucide-react";
+import { useEffect, useMemo, useState } from "react";
+import { Link } from "react-router-dom";
+
+import { createRole, deleteRole, updateRole } from "../../api/taxonomy";
+import { EmptyState } from "../../components/ui/EmptyState";
+import { Modal } from "../../components/ui/Modal";
+import { toastFromError, useToast } from "../../components/ui/Toast";
+import { useRoles } from "../../hooks/usePortalData";
+import type { Role } from "../../types";
+import { ManagePageHeader, ManageToolbar, RowMenu } from "./_shared";
+
+export 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 invalidate = () => {
+    queryClient.invalidateQueries({ queryKey: ["roles"] });
+    queryClient.invalidateQueries({ queryKey: ["people"] });
+  };
+
+  const createMutation = useMutation({
+    mutationFn: createRole,
+    onSuccess: () => {
+      push("Role added", "success");
+      invalidate();
+      setCreating(false);
+    },
+    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");
+      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 (
+    <>
+      <ManagePageHeader
+        icon={Briefcase}
+        title="Roles"
+        subtitle='Job titles assigned to each person — e.g. "Senior DevOps", "PM".'
+        actions={
+          <button className="primary-button manage-toolbar-new" onClick={() => setCreating(true)} type="button">
+            + New Role
+          </button>
+        }
+      />
+
+      <article className="manage-card">
+        <ManageToolbar onSearchChange={setSearch} search={search} />
+
+        {roles.length === 0 ? (
+          <EmptyState title="No roles yet" description="Create a role to start assigning team members." />
+        ) : (
+          <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((role) => (
+                <tr key={role.id}>
+                  <td>
+                    <button className="link-text" onClick={() => setEditing(role)} type="button">
+                      {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>
+        )}
+      </article>
+
+      <RoleModal
+        open={creating}
+        title="New role"
+        initial=""
+        onClose={() => setCreating(false)}
+        onSave={(name) => createMutation.mutate({ name })}
+        isSaving={createMutation.isPending}
+      />
+      <RoleModal
+        open={!!editing}
+        title="Edit role"
+        initial={editing?.name ?? ""}
+        onClose={() => setEditing(null)}
+        onSave={(name) => editing && updateMutation.mutate({ id: editing.id, input: { name } })}
+        isSaving={updateMutation.isPending}
+      />
+    </>
+  );
+}
+
+function RoleModal({
+  open,
+  title,
+  initial,
+  onClose,
+  onSave,
+  isSaving,
+}: {
+  open: boolean;
+  title: string;
+  initial: string;
+  onClose: () => void;
+  onSave: (name: string) => void;
+  isSaving: boolean;
+}) {
+  const [name, setName] = useState("");
+  useEffect(() => {
+    if (open) setName(initial);
+  }, [open, initial]);
+
+  return (
+    <Modal
+      open={open}
+      onClose={onClose}
+      title={title}
+      footer={
+        <>
+          <button className="ghost-button" onClick={onClose} type="button">
+            Cancel
+          </button>
+          <button
+            className="primary-button"
+            disabled={isSaving || !name.trim()}
+            onClick={() => onSave(name.trim())}
+            type="button"
+          >
+            Save
+          </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>
+  );
+}
+
+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/manage/SkillsSection.tsx

@@ -0,0 +1,145 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { Award } from "lucide-react";
+import { useMemo, useState, type FormEvent } from "react";
+
+import { createSkill } from "../../api/people";
+import { EmptyState } from "../../components/ui/EmptyState";
+import { Modal } from "../../components/ui/Modal";
+import { toastFromError, useToast } from "../../components/ui/Toast";
+import { useSkills } from "../../hooks/usePortalData";
+import { ManagePageHeader, ManageToolbar } from "./_shared";
+
+export function SkillsSection() {
+  const queryClient = useQueryClient();
+  const { push } = useToast();
+  const { data: skills = [] } = useSkills();
+  const [search, setSearch] = useState("");
+  const [creating, setCreating] = useState(false);
+  const [form, setForm] = useState({ name: "", category: "" });
+
+  const createMutation = useMutation({
+    mutationFn: createSkill,
+    onSuccess: () => {
+      push("Skill added", "success");
+      setForm({ name: "", category: "" });
+      setCreating(false);
+      queryClient.invalidateQueries({ queryKey: ["skills"] });
+    },
+    onError: (error) => push(toastFromError(error, "Could not add skill"), "error"),
+  });
+
+  const filtered = useMemo(() => {
+    const term = search.trim().toLowerCase();
+    if (!term) return skills;
+    return skills.filter(
+      (skill) =>
+        skill.name.toLowerCase().includes(term) || (skill.category ?? "").toLowerCase().includes(term),
+    );
+  }, [skills, search]);
+
+  const submit = (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    createMutation.mutate({ name: form.name.trim(), category: form.category.trim() || null });
+  };
+
+  return (
+    <>
+      <ManagePageHeader
+        icon={Award}
+        title="Skills"
+        subtitle="Skill library, assignable to each team member from the People page."
+        actions={
+          <button
+            className="primary-button manage-toolbar-new"
+            onClick={() => {
+              setForm({ name: "", category: "" });
+              setCreating(true);
+            }}
+            type="button"
+          >
+            + New Skill
+          </button>
+        }
+      />
+
+      <article className="manage-card">
+        <ManageToolbar onSearchChange={setSearch} search={search} />
+
+        {filtered.length === 0 ? (
+          <EmptyState
+            title={search ? "No matches" : "No skills yet"}
+            description={search ? "Try a different term." : "Add skills like Kubernetes or Networking to assign to people."}
+          />
+        ) : (
+          <table className="data-table runn-table">
+            <thead>
+              <tr>
+                <th>Name</th>
+                <th>Category</th>
+              </tr>
+            </thead>
+            <tbody>
+              {filtered.map((skill) => (
+                <tr key={skill.id}>
+                  <td>
+                    <strong>{skill.name}</strong>
+                  </td>
+                  <td>{skill.category ?? <span className="muted-text">Uncategorized</span>}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        )}
+      </article>
+
+      <Modal
+        open={creating}
+        onClose={() => setCreating(false)}
+        title="New skill"
+        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(),
+                  category: form.category.trim() || null,
+                })
+              }
+              type="button"
+            >
+              Add skill
+            </button>
+          </>
+        }
+      >
+        <form className="form-grid" onSubmit={submit}>
+          <label>
+            Skill name
+            <input
+              autoFocus
+              onChange={(event) => setForm({ ...form, name: event.target.value })}
+              placeholder="e.g. Kubernetes"
+              required
+              type="text"
+              value={form.name}
+            />
+          </label>
+          <label>
+            Category
+            <input
+              onChange={(event) => setForm({ ...form, category: event.target.value })}
+              placeholder="e.g. Infrastructure"
+              type="text"
+              value={form.category}
+            />
+          </label>
+        </form>
+      </Modal>
+    </>
+  );
+}

frontend/src/pages/manage/TagsSection.tsx

@@ -0,0 +1,231 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { Pencil, Tag as TagIcon, Trash2 } from "lucide-react";
+import { useEffect, useMemo, useState } from "react";
+import { Link } from "react-router-dom";
+
+import { createTag, deleteTag, updateTag } from "../../api/taxonomy";
+import { EmptyState } from "../../components/ui/EmptyState";
+import { Modal } from "../../components/ui/Modal";
+import { toastFromError, useToast } from "../../components/ui/Toast";
+import { useTags } from "../../hooks/usePortalData";
+import type { Tag } from "../../types";
+import { ManagePageHeader, ManageToolbar, RowMenu } from "./_shared";
+
+const TAG_PALETTE = ["#7c3aed", "#0ea5e9", "#16a34a", "#f97316", "#dc2626", "#facc15", "#0f766e", "#a855f7"];
+
+export 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 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);
+    },
+    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");
+      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 (
+    <>
+      <ManagePageHeader
+        icon={TagIcon}
+        title="Tags"
+        subtitle='Colored labels for people and projects — e.g. "remote", "on-call".'
+        actions={
+          <button className="primary-button manage-toolbar-new" onClick={() => setCreating(true)} type="button">
+            + New Tag
+          </button>
+        }
+      />
+
+      <article className="manage-card">
+        <ManageToolbar onSearchChange={setSearch} search={search} />
+
+        {tags.length === 0 ? (
+          <EmptyState title="No tags yet" description="Create your first tag and apply it to people or projects." />
+        ) : (
+          <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>
+        )}
+      </article>
+
+      <TagModal
+        open={creating}
+        title="New tag"
+        initial={{ name: "", color: TAG_PALETTE[0] }}
+        onClose={() => setCreating(false)}
+        onSave={(input) => createMutation.mutate(input)}
+        isSaving={createMutation.isPending}
+      />
+      <TagModal
+        open={!!editing}
+        title="Edit tag"
+        initial={{ name: editing?.name ?? "", color: editing?.color ?? TAG_PALETTE[0] }}
+        onClose={() => setEditing(null)}
+        onSave={(input) => editing && updateMutation.mutate({ id: editing.id, input })}
+        isSaving={updateMutation.isPending}
+      />
+    </>
+  );
+}
+
+function TagModal({
+  open,
+  title,
+  initial,
+  onClose,
+  onSave,
+  isSaving,
+}: {
+  open: boolean;
+  title: string;
+  initial: { name: string; color: string };
+  onClose: () => void;
+  onSave: (input: { name: string; color: string }) => void;
+  isSaving: boolean;
+}) {
+  const [form, setForm] = useState(initial);
+  useEffect(() => {
+    if (open) setForm(initial);
+  }, [open, initial]);
+
+  return (
+    <Modal
+      open={open}
+      onClose={onClose}
+      title={title}
+      footer={
+        <>
+          <button className="ghost-button" onClick={onClose} type="button">
+            Cancel
+          </button>
+          <button
+            className="primary-button"
+            disabled={isSaving || !form.name.trim()}
+            onClick={() => onSave({ name: form.name.trim(), color: form.color })}
+            type="button"
+          >
+            Save
+          </button>
+        </>
+      }
+    >
+      <div className="form-grid">
+        <label className="span-2">
+          Tag name
+          <input
+            autoFocus
+            onChange={(event) => setForm({ ...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={() => setForm({ ...form, color })}
+                style={{ background: color }}
+                type="button"
+              />
+            ))}
+          </div>
+        </label>
+      </div>
+    </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/manage/TeamsSection.tsx

@@ -0,0 +1,212 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { Pencil, Trash2, Users } from "lucide-react";
+import { useEffect, useMemo, useState } from "react";
+import { Link } from "react-router-dom";
+
+import { createTeam, deleteTeam, updateTeam } from "../../api/taxonomy";
+import { EmptyState } from "../../components/ui/EmptyState";
+import { Modal } from "../../components/ui/Modal";
+import { toastFromError, useToast } from "../../components/ui/Toast";
+import { useTeams } from "../../hooks/usePortalData";
+import type { Team } from "../../types";
+import { ManagePageHeader, ManageToolbar, RowMenu } from "./_shared";
+
+export 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 invalidate = () => {
+    queryClient.invalidateQueries({ queryKey: ["teams"] });
+    queryClient.invalidateQueries({ queryKey: ["people"] });
+  };
+
+  const createMutation = useMutation({
+    mutationFn: createTeam,
+    onSuccess: () => {
+      push("Team added", "success");
+      invalidate();
+      setCreating(false);
+    },
+    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");
+      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 (
+    <>
+      <ManagePageHeader
+        icon={Users}
+        title="Teams"
+        subtitle='Groupings of people across the IT org — e.g. "Platform", "Helpdesk".'
+        actions={
+          <button className="primary-button manage-toolbar-new" onClick={() => setCreating(true)} type="button">
+            + New Team
+          </button>
+        }
+      />
+
+      <article className="manage-card">
+        <ManageToolbar 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 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((team) => (
+                <tr key={team.id}>
+                  <td>
+                    <button className="link-text" onClick={() => setEditing(team)} type="button">
+                      {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>
+        )}
+      </article>
+
+      <TeamModal
+        open={creating}
+        title="New team"
+        initial=""
+        onClose={() => setCreating(false)}
+        onSave={(name) => createMutation.mutate({ name })}
+        isSaving={createMutation.isPending}
+      />
+      <TeamModal
+        open={!!editing}
+        title="Edit team"
+        initial={editing?.name ?? ""}
+        onClose={() => setEditing(null)}
+        onSave={(name) => editing && updateMutation.mutate({ id: editing.id, input: { name } })}
+        isSaving={updateMutation.isPending}
+      />
+    </>
+  );
+}
+
+function TeamModal({
+  open,
+  title,
+  initial,
+  onClose,
+  onSave,
+  isSaving,
+}: {
+  open: boolean;
+  title: string;
+  initial: string;
+  onClose: () => void;
+  onSave: (name: string) => void;
+  isSaving: boolean;
+}) {
+  const [name, setName] = useState("");
+  useEffect(() => {
+    if (open) setName(initial);
+  }, [open, initial]);
+
+  return (
+    <Modal
+      open={open}
+      onClose={onClose}
+      title={title}
+      footer={
+        <>
+          <button className="ghost-button" onClick={onClose} type="button">
+            Cancel
+          </button>
+          <button
+            className="primary-button"
+            disabled={isSaving || !name.trim()}
+            onClick={() => onSave(name.trim())}
+            type="button"
+          >
+            Save
+          </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>
+  );
+}
+
+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/manage/UsersSection.tsx

@@ -0,0 +1,159 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { Shield } from "lucide-react";
+import { useMemo, useState } from "react";
+
+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 { useUsers } from "../../hooks/usePortalData";
+import { ManagePageHeader, ManageToolbar } from "./_shared";
+
+export function UsersSection() {
+  const queryClient = useQueryClient();
+  const { user } = useAuth();
+  const { push } = useToast();
+  const { data: users = [] } = useUsers();
+  const [search, setSearch] = useState("");
+  const [creating, setCreating] = useState(false);
+  const [form, setForm] = useState({ username: "", password: "", role: "viewer" });
+  const isAdmin = user?.role === "admin";
+
+  const createMutation = useMutation({
+    mutationFn: createUser,
+    onSuccess: () => {
+      push("User created", "success");
+      setForm({ username: "", password: "", role: "viewer" });
+      setCreating(false);
+      queryClient.invalidateQueries({ queryKey: ["users"] });
+    },
+    onError: (error) => push(toastFromError(error, "Could not create user"), "error"),
+  });
+
+  const filtered = useMemo(() => {
+    const term = search.trim().toLowerCase();
+    if (!term) return users;
+    return users.filter(
+      (portalUser) =>
+        portalUser.username.toLowerCase().includes(term) || portalUser.role.toLowerCase().includes(term),
+    );
+  }, [users, search]);
+
+  if (!isAdmin) {
+    return (
+      <>
+        <ManagePageHeader icon={Shield} title="Users" subtitle="Admins, managers, and viewers who can sign in." />
+        <article className="manage-card">
+          <EmptyState title="Admins only" description="You need the admin role to manage portal users." />
+        </article>
+      </>
+    );
+  }
+
+  return (
+    <>
+      <ManagePageHeader
+        icon={Shield}
+        title="Users"
+        subtitle="Admins, managers, and viewers who can sign in to the portal."
+        actions={
+          <button
+            className="primary-button manage-toolbar-new"
+            onClick={() => {
+              setForm({ username: "", password: "", role: "viewer" });
+              setCreating(true);
+            }}
+            type="button"
+          >
+            + New User
+          </button>
+        }
+      />
+
+      <article className="manage-card">
+        <ManageToolbar onSearchChange={setSearch} search={search} />
+
+        {filtered.length === 0 ? (
+          <EmptyState title={search ? "No matches" : "No users yet"} />
+        ) : (
+          <table className="data-table runn-table">
+            <thead>
+              <tr>
+                <th>Username</th>
+                <th>Role</th>
+                <th>Created</th>
+              </tr>
+            </thead>
+            <tbody>
+              {filtered.map((portalUser) => (
+                <tr key={portalUser.id}>
+                  <td>
+                    <strong>{portalUser.username}</strong>
+                  </td>
+                  <td>
+                    <span className="badge muted">{portalUser.role}</span>
+                  </td>
+                  <td>{portalUser.created_at.slice(0, 10)}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        )}
+      </article>
+
+      <Modal
+        open={creating}
+        onClose={() => setCreating(false)}
+        title="New user"
+        footer={
+          <>
+            <button className="ghost-button" onClick={() => setCreating(false)} type="button">
+              Cancel
+            </button>
+            <button
+              className="primary-button"
+              disabled={createMutation.isPending || !form.username || form.password.length < 4}
+              onClick={() => createMutation.mutate(form)}
+              type="button"
+            >
+              Create user
+            </button>
+          </>
+        }
+      >
+        <div className="form-grid">
+          <label>
+            Username
+            <input
+              autoFocus
+              onChange={(event) => setForm({ ...form, username: event.target.value })}
+              type="text"
+              value={form.username}
+            />
+          </label>
+          <label>
+            Password
+            <input
+              minLength={4}
+              onChange={(event) => setForm({ ...form, password: event.target.value })}
+              type="password"
+              value={form.password}
+            />
+          </label>
+          <label>
+            Role
+            <select
+              onChange={(event) => setForm({ ...form, role: event.target.value })}
+              value={form.role}
+            >
+              <option value="viewer">Viewer</option>
+              <option value="manager">Manager</option>
+              <option value="admin">Admin</option>
+            </select>
+          </label>
+        </div>
+      </Modal>
+    </>
+  );
+}

frontend/src/pages/manage/_shared.tsx

@@ -0,0 +1,124 @@
+import { MoreVertical, Plus, Search } from "lucide-react";
+import { useEffect, useRef, useState, type ComponentType, type ReactNode } from "react";
+
+export interface RowMenuItem {
+  label: string;
+  icon?: ComponentType<{ size?: number }>;
+  onClick: () => void;
+  danger?: boolean;
+}
+
+export 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;
+  newButton?: ReactNode;
+  searchPlaceholder?: string;
+  trailing?: ReactNode;
+}
+
+export function ManageToolbar({
+  search,
+  onSearchChange,
+  onNewClick,
+  newLabel,
+  newButton,
+  searchPlaceholder,
+  trailing,
+}: 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>
+      <div className="manage-toolbar-trailing">
+        {trailing}
+        {newButton}
+        {newLabel && onNewClick ? (
+          <button className="primary-button manage-toolbar-new" onClick={onNewClick} type="button">
+            <Plus size={15} />
+            {newLabel}
+          </button>
+        ) : null}
+      </div>
+    </div>
+  );
+}
+
+interface ManagePageHeaderProps {
+  icon: ComponentType<{ size?: number }>;
+  title: string;
+  subtitle?: string;
+  actions?: ReactNode;
+}
+
+export function ManagePageHeader({ icon: Icon, title, subtitle, actions }: ManagePageHeaderProps) {
+  return (
+    <header className="manage-header">
+      <div className="manage-header-title">
+        <div className="manage-header-icon">
+          <Icon size={20} />
+        </div>
+        <div>
+          <h2>{title}</h2>
+          {subtitle ? <p>{subtitle}</p> : null}
+        </div>
+      </div>
+      {actions ? <div className="manage-header-actions">{actions}</div> : null}
+    </header>
+  );
+}

frontend/src/styles.css

@@ -1936,3 +1936,175 @@ th {
   gap: 8px;
   margin-top: 14px;
 }
+
+/* Runn-style page header with icon circle */
+.manage-header {
+  align-items: center;
+  background: white;
+  border-radius: 16px;
+  border: 1px solid var(--line);
+  display: flex;
+  flex-wrap: wrap;
+  gap: 14px;
+  justify-content: space-between;
+  margin-bottom: 16px;
+  padding: 18px 22px;
+}
+
+.manage-header-title {
+  align-items: center;
+  display: flex;
+  gap: 14px;
+  min-width: 0;
+}
+
+.manage-header-icon {
+  align-items: center;
+  background: var(--primary-soft);
+  border-radius: 999px;
+  color: var(--primary);
+  display: flex;
+  flex-shrink: 0;
+  height: 44px;
+  justify-content: center;
+  width: 44px;
+}
+
+.manage-header-title h2 {
+  font-size: 22px;
+  letter-spacing: -0.01em;
+  margin: 0;
+}
+
+.manage-header-title p {
+  color: var(--muted);
+  font-size: 13px;
+  margin: 4px 0 0;
+}
+
+.manage-header-actions {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+
+.manage-toolbar-trailing {
+  align-items: center;
+  display: flex;
+  gap: 10px;
+}
+
+/* Compact "Filter [Active]" pill */
+.filter-pill {
+  align-items: center;
+  background: white;
+  border-radius: 8px;
+  border: 1px solid var(--line);
+  color: var(--muted);
+  display: inline-flex;
+  font-size: 12px;
+  font-weight: 600;
+  gap: 8px;
+  padding: 0 10px 0 12px;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.filter-pill label {
+  cursor: pointer;
+}
+
+.filter-pill select {
+  background: transparent;
+  border: none;
+  color: var(--text);
+  cursor: pointer;
+  font-family: inherit;
+  font-size: 13px;
+  font-weight: 600;
+  padding: 8px 4px;
+  text-transform: none;
+  letter-spacing: normal;
+}
+
+.filter-pill select:focus {
+  outline: none;
+}
+
+/* Cell with avatar + name */
+.cell-person {
+  align-items: center;
+  display: flex;
+  gap: 10px;
+}
+
+.cell-project {
+  align-items: center;
+  display: flex;
+  gap: 10px;
+}
+
+.project-swatch {
+  border-radius: 6px;
+  display: inline-block;
+  flex-shrink: 0;
+  height: 18px;
+  width: 18px;
+}
+
+.cell-tags {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+
+.tag-pill {
+  border-radius: 999px;
+  font-size: 12px;
+  font-weight: 600;
+  padding: 3px 9px;
+}
+
+.row-archived td {
+  opacity: 0.6;
+}
+
+.row-archived .link-text {
+  text-decoration: line-through;
+}
+
+/* Status badges */
+.badge.status-planning { background: rgba(124, 58, 237, 0.12); color: #6d28d9; border-color: transparent; }
+.badge.status-active { background: rgba(34, 197, 94, 0.14); color: #15803d; border-color: transparent; }
+.badge.status-on_hold { background: rgba(245, 158, 11, 0.15); color: #b45309; border-color: transparent; }
+.badge.status-completed { background: rgba(100, 116, 139, 0.18); color: #475569; border-color: transparent; }
+
+/* Hub Details button */
+.hub-details-btn {
+  border-radius: 999px;
+  font-size: 12px;
+  padding: 6px 14px;
+}
+
+/* Tag picker in modal forms */
+.tag-picker {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-top: 4px;
+}
+
+.checkbox-row {
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+  gap: 10px;
+}
+
+.checkbox-row input {
+  height: auto;
+  margin: 0;
+  width: auto;
+}