Merge branch 'dev' into fix/ab/sh-339-wizard-complete-image

src/api/api-paths.ts

@@ -80,6 +80,7 @@ export const API_PATHS = {
   teamMember: {
     getList: "User",
     create: "team-members",
+    detail: "team-members",
   },
   contact: {
     getList: "Contact/GetContactList",

src/app/(protected)/team-members/_components/add-team-member-dialog.tsx

@@ -29,158 +29,34 @@ import type {
   CreateTeamMemberInput,
   TeamMemberRole,
 } from "@/domain/team-members/types/team-member";
+import {
+  defaultsForRole,
+  getFormErrors,
+  PERMISSION_GROUPS,
+  PERMISSION_LABELS,
+  permissionOverrides,
+} from "./team-member-permissions";
+import { TEAM_MEMBER_COLORS, TEAM_MEMBER_ROLES } from "./team-member-form-options";
 
-const ROLES: TeamMemberRole[] = ["Dispatcher", "Scheduler", "Admin"];
+const LEGACY_ROLE_OPTION = "__legacy-role__";
-const COLORS = [
-  "#F59E0B",
-  "#0D9488",
-  "#6366F1",
-  "#F43F5E",
-  "#7C3AED",
-  "#0EA5E9",
-  "#16A34A",
-  "#EA580C",
-  "#0891B2",
-  "#C026D3",
-] as const;
-
-const PERMISSION_GROUPS = [
-  {
-    label: "Team Members",
-    keys: ["manageTeamMembers", "changeTeamMemberRole"],
-  },
-  {
-    label: "Vendors",
-    keys: ["createVendors", "editVendors", "deactivateVendors"],
-  },
-  {
-    label: "Sites",
-    keys: ["createSites", "editSites", "deleteSites"],
-  },
-  {
-    label: "Services",
-    keys: ["createServices", "editServices", "deactivateServices"],
-  },
-  {
-    label: "Completion Document Templates",
-    keys: [
-      "createCompletionDocTemplates",
-      "editCompletionDocTemplates",
-      "deleteCompletionDocTemplates",
-    ],
-  },
-  {
-    label: "Work Orders",
-    keys: ["createWorkOrders", "editOthersWorkOrders", "cancelWorkOrders", "deleteWorkOrders"],
-  },
-  {
-    label: "Uplifts",
-    keys: ["requestUplifts", "autoApproveUplifts", "reviewUplifts"],
-  },
-  {
-    label: "Dashboard",
-    keys: ["viewAllDispatchersOnDashboard"],
-  },
-] as const;
-
-const PERMISSION_LABELS: Record<string, string> = {
-  manageTeamMembers: "Manage team members",
-  changeTeamMemberRole: "Change team member role",
-  createVendors: "Create vendors",
-  editVendors: "Edit vendors",
-  deactivateVendors: "Deactivate vendors",
-  createSites: "Create sites",
-  editSites: "Edit sites",
-  deleteSites: "Delete sites",
-  createServices: "Create services",
-  editServices: "Edit services",
-  deactivateServices: "Deactivate services",
-  createCompletionDocTemplates: "Create completion document templates",
-  editCompletionDocTemplates: "Edit completion document templates",
-  deleteCompletionDocTemplates: "Delete completion document templates",
-  createWorkOrders: "Create work orders",
-  editOthersWorkOrders: "Edit other users' work orders",
-  cancelWorkOrders: "Cancel work orders",
-  deleteWorkOrders: "Delete work orders",
-  requestUplifts: "Request uplifts",
-  autoApproveUplifts: "Automatically approve uplifts",
-  reviewUplifts: "Review uplifts",
-  viewAllDispatchersOnDashboard: "View all Dispatchers on dashboard",
-};
-
-const ALL_PERMISSION_KEYS = PERMISSION_GROUPS.flatMap((group) => group.keys);
-const DISPATCHER_DEFAULTS = new Set([
-  "createVendors",
-  "editVendors",
-  "deactivateVendors",
-  "createSites",
-  "editSites",
-  "createWorkOrders",
-  "editOthersWorkOrders",
-  "cancelWorkOrders",
-  "requestUplifts",
-  "autoApproveUplifts",
-]);
-const SCHEDULER_DEFAULTS = new Set([
-  ...Array.from(DISPATCHER_DEFAULTS).filter(
-    (key) => key !== "requestUplifts" && key !== "autoApproveUplifts",
-  ),
-  "deleteSites",
-  "createServices",
-  "editServices",
-  "createCompletionDocTemplates",
-  "editCompletionDocTemplates",
-  "viewAllDispatchersOnDashboard",
-]);
-
-function defaultsForRole(role: TeamMemberRole): Set<string> {
-  if (role === "Admin") return new Set(ALL_PERMISSION_KEYS);
-  return role === "Scheduler" ? new Set(SCHEDULER_DEFAULTS) : new Set(DISPATCHER_DEFAULTS);
-}
 
 function emptyForm() {
   return {
     name: "",
-    role: "Dispatcher" as TeamMemberRole,
+    role: "Dispatcher" as TeamMemberRole | "",
     color: "",
+    colorNotice: "",
     email: "",
     phone: "",
+    active: true,
     serviceAreas: [] as string[],
     permissions: defaultsForRole("Dispatcher"),
   };
 }
 
-function permissionOverrides(role: TeamMemberRole, selected: Set<string>) {
+export type TeamMemberForm = ReturnType<typeof emptyForm>;
-  const defaults = defaultsForRole(role);
-  return Object.fromEntries(
-    ALL_PERMISSION_KEYS.filter((key) => defaults.has(key) !== selected.has(key)).map((key) => [
-      key,
-      selected.has(key) ? 1 : 2,
-    ]),
-  ) as Record<string, 1 | 2>;
-}
-
-type TeamMemberForm = ReturnType<typeof emptyForm>;
 type FormErrors = ReturnType<typeof getFormErrors>;
 
-function getFormErrors(form: TeamMemberForm, submitted: boolean, emailIsValid: boolean) {
-  return {
-    name: submitted && !form.name.trim() ? "Name is required." : "",
-    role: submitted && !form.role ? "Role is required." : "",
-    color: submitted && !form.color ? "Color is required." : "",
-    email:
-      submitted && !form.email.trim()
-        ? "Email is required."
-        : submitted && !emailIsValid
-          ? "Enter a valid email address."
-          : "",
-    serviceAreas:
-      submitted && form.role === "Dispatcher" && form.serviceAreas.length === 0
-        ? "Select at least one service area."
-        : "",
-  };
-}
-
 function PermissionsSection({
   form,
   togglePermission,
@@ -223,13 +99,62 @@ function PermissionsSection({
   );
 }
 
-function TeamMemberFormFields({
+function RoleSelectField({
+  role,
+  roleError,
+  updateRole,
+  disabled,
+  legacyRole,
+}: {
+  role: TeamMemberRole | "";
+  roleError: string;
+  updateRole: (role: TeamMemberRole) => void;
+  disabled: boolean;
+  legacyRole: string;
+}) {
+  const legacyRolePending = Boolean(legacyRole) && !role;
+
+  return (
+    <FormControl fullWidth required error={Boolean(roleError)}>
+      <InputLabel id="team-member-role-label">Role</InputLabel>
+      <Select
+        labelId="team-member-role-label"
+        label="Role"
+        value={legacyRolePending ? LEGACY_ROLE_OPTION : role}
+        disabled={disabled}
+        onChange={(event) => updateRole(event.target.value as TeamMemberRole)}
+      >
+        {legacyRolePending && (
+          <MenuItem value={LEGACY_ROLE_OPTION} disabled>
+            {legacyRole} (legacy)
+          </MenuItem>
+        )}
+        {TEAM_MEMBER_ROLES.map((option) => (
+          <MenuItem key={option} value={option}>
+            {option}
+          </MenuItem>
+        ))}
+      </Select>
+      {legacyRolePending && (
+        <FormHelperText error={Boolean(roleError)}>
+          {legacyRole} is a legacy role and can no longer be saved. Choose Dispatcher, Scheduler, or
+          Admin.
+        </FormHelperText>
+      )}
+      {!legacyRolePending && Boolean(roleError) && <FormHelperText>{roleError}</FormHelperText>}
+    </FormControl>
+  );
+}
+
+export function TeamMemberFormFields({
   form,
   setForm,
   errors,
   updateRole,
   toggleArea,
   togglePermission,
+  roleDisabled = false,
+  legacyRole = "",
 }: {
   form: TeamMemberForm;
   setForm: Dispatch<SetStateAction<TeamMemberForm>>;
@@ -237,6 +162,8 @@ function TeamMemberFormFields({
   updateRole: (role: TeamMemberRole) => void;
   toggleArea: (area: string) => void;
   togglePermission: (key: string) => void;
+  roleDisabled?: boolean;
+  legacyRole?: string;
 }) {
   return (
     <Stack spacing={2.5}>
@@ -250,35 +177,26 @@ function TeamMemberFormFields({
         required
         fullWidth
       />
-      <FormControl fullWidth required error={Boolean(errors.role)}>
+      <RoleSelectField
-        <InputLabel id="team-member-role-label">Role</InputLabel>
+        role={form.role}
-        <Select
+        roleError={errors.role}
-          labelId="team-member-role-label"
+        updateRole={updateRole}
-          label="Role"
+        disabled={roleDisabled}
-          value={form.role}
+        legacyRole={legacyRole}
-          onChange={(event) => updateRole(event.target.value as TeamMemberRole)}
+      />
-        >
-          {ROLES.map((role) => (
-            <MenuItem key={role} value={role}>
-              {role}
-            </MenuItem>
-          ))}
-        </Select>
-        {Boolean(errors.role) && <FormHelperText>{errors.role}</FormHelperText>}
-      </FormControl>
 
       <Box>
         <Typography component="p" variant="body2" sx={{ mb: 1, fontWeight: 600 }}>
           Color <span aria-hidden="true">*</span>
         </Typography>
         <Stack direction="row" spacing={1} useFlexGap sx={{ flexWrap: "wrap" }}>
-          {COLORS.map((color) => (
+          {TEAM_MEMBER_COLORS.map((color) => (
             <Button
               key={color}
               type="button"
               aria-label={`Select color ${color}`}
               aria-pressed={form.color === color}
-              onClick={() => setForm((current) => ({ ...current, color }))}
+              onClick={() => setForm((current) => ({ ...current, color, colorNotice: "" }))}
               sx={{
                 minWidth: 32,
                 width: 32,
@@ -294,6 +212,9 @@ function TeamMemberFormFields({
             />
           ))}
         </Stack>
+        {Boolean(form.colorNotice) && !errors.color && (
+          <FormHelperText>{form.colorNotice}</FormHelperText>
+        )}
         {Boolean(errors.color) && <FormHelperText error>{errors.color}</FormHelperText>}
       </Box>
 
@@ -418,7 +339,7 @@ export function AddTeamMemberDialog({ open, onClose }: { open: boolean; onClose:
 
   const submit = () => {
     setSubmitted(true);
-    if (!isValid) return;
+    if (!isValid || form.role === "") return;
 
     const input: CreateTeamMemberInput = {
       name: form.name.trim(),

src/app/(protected)/team-members/_components/team-member-detail-drawer.tsx

@@ -0,0 +1,491 @@
+import {
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type Dispatch,
+  type ReactNode,
+  type SetStateAction,
+} from "react";
+import {
+  Accordion,
+  AccordionDetails,
+  AccordionSummary,
+  Alert,
+  Avatar,
+  Box,
+  Button,
+  Chip,
+  CircularProgress,
+  Divider,
+  Drawer,
+  FormControlLabel,
+  IconButton,
+  Stack,
+  Switch,
+  Tooltip,
+  Typography,
+} from "@mui/material";
+import CloseIcon from "@mui/icons-material/Close";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+import {
+  defaultsForRole,
+  PERMISSION_GROUPS,
+  PERMISSION_LABELS,
+  permissionOverrides,
+} from "./team-member-permissions";
+import { getFormErrors } from "./team-member-permissions";
+import { TeamMemberFormFields, type TeamMemberForm } from "./add-team-member-dialog";
+import { canonicalRole, resolveFormColor } from "./team-member-form-options";
+import {
+  useTeamMemberDetail,
+  useUpdateTeamMember,
+} from "@/domain/team-members/use-cases/use-team-member-detail";
+import type {
+  TeamMemberDetail,
+  TeamMemberListItem,
+  TeamMemberRole,
+} from "@/domain/team-members/types/team-member";
+
+function formFromMember(member: TeamMemberDetail): TeamMemberForm {
+  const { color, notice: colorNotice } = resolveFormColor(member.color);
+  return {
+    name: member.name,
+    role: canonicalRole(member.role) ?? "",
+    color,
+    colorNotice,
+    email: member.email,
+    phone: member.phone,
+    active: member.status === "Active",
+    serviceAreas: member.serviceAreas,
+    permissions: new Set(
+      member.permissions
+        .filter((permission) => permission.isGranted)
+        .map((permission) => permission.permissionKey),
+    ),
+  };
+}
+
+function emptyForm(): TeamMemberForm {
+  return {
+    name: "",
+    role: "Dispatcher",
+    color: "",
+    colorNotice: "",
+    email: "",
+    phone: "",
+    active: true,
+    serviceAreas: [],
+    permissions: new Set(),
+  };
+}
+
+function Field({ label, value }: { label: string; value: ReactNode }) {
+  return (
+    <Box>
+      <Typography variant="caption" color="text.secondary">
+        {label}
+      </Typography>
+      <Typography>{value || "—"}</Typography>
+    </Box>
+  );
+}
+
+function PermissionSummary({ member }: { member: TeamMemberDetail }) {
+  const permissions = new Map(
+    member.permissions.map((permission) => [permission.permissionKey, permission.isGranted]),
+  );
+
+  return (
+    <Box>
+      <Typography variant="h6" sx={{ mb: 1 }}>
+        Permissions
+      </Typography>
+      <Stack spacing={1}>
+        {PERMISSION_GROUPS.map((group) => {
+          const granted = group.keys.filter((key) => permissions.get(key)).length;
+          return (
+            <Accordion key={group.label} disableGutters>
+              <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+                <Typography sx={{ flex: 1 }}>{group.label}</Typography>
+                <Chip size="small" label={`${granted}/${group.keys.length}`} />
+              </AccordionSummary>
+              <AccordionDetails>
+                <Stack spacing={1}>
+                  {group.keys.map((key) => (
+                    <Stack
+                      key={key}
+                      direction="row"
+                      sx={{ alignItems: "center", justifyContent: "space-between" }}
+                    >
+                      <Typography variant="body2">{PERMISSION_LABELS[key]}</Typography>
+                      <Chip
+                        size="small"
+                        label={permissions.get(key) ? "Granted" : "Not granted"}
+                        color={permissions.get(key) ? "success" : "default"}
+                      />
+                    </Stack>
+                  ))}
+                </Stack>
+              </AccordionDetails>
+            </Accordion>
+          );
+        })}
+      </Stack>
+    </Box>
+  );
+}
+
+function MemberView({ member }: { member: TeamMemberDetail }) {
+  return (
+    <Stack spacing={2.5}>
+      <Stack direction="row" spacing={2} sx={{ alignItems: "center" }}>
+        <Avatar sx={{ bgcolor: member.color || "primary.main" }}>
+          {member.name.slice(0, 1).toUpperCase() || "?"}
+        </Avatar>
+        <Chip
+          label={member.status}
+          color={member.status === "Active" ? "success" : "default"}
+          size="small"
+        />
+      </Stack>
+      <Stack spacing={1.5}>
+        <Field label="Name" value={member.name} />
+        <Field
+          label="Role"
+          value={canonicalRole(member.role) ? member.role : `${member.role} (legacy)`}
+        />
+        <Field label="Color" value={member.color} />
+        <Field
+          label="Service Area"
+          value={member.serviceAreas.length ? member.serviceAreas.join(", ") : "Not applicable"}
+        />
+        <Field label="Phone" value={member.phone} />
+        <Field label="Email" value={member.email} />
+        <Field
+          label="Registration"
+          value={member.pendingRegistration ? "Pending registration" : "Registered"}
+        />
+      </Stack>
+      <PermissionSummary member={member} />
+    </Stack>
+  );
+}
+
+function MemberEditForm({
+  form,
+  setForm,
+  errors,
+  updateRole,
+  toggleArea,
+  togglePermission,
+  roleDisabled,
+  legacyRole,
+}: {
+  form: TeamMemberForm;
+  setForm: Dispatch<SetStateAction<TeamMemberForm>>;
+  errors: ReturnType<typeof getFormErrors>;
+  updateRole: (role: TeamMemberRole) => void;
+  toggleArea: (area: string) => void;
+  togglePermission: (key: string) => void;
+  roleDisabled: boolean;
+  legacyRole: string;
+}) {
+  return (
+    <TeamMemberFormFields
+      form={form}
+      setForm={setForm}
+      errors={errors}
+      updateRole={updateRole}
+      toggleArea={toggleArea}
+      togglePermission={togglePermission}
+      roleDisabled={roleDisabled}
+      legacyRole={legacyRole}
+    />
+  );
+}
+
+function DrawerFooter({
+  editing,
+  form,
+  setForm,
+  protectedOwner,
+  isPending,
+  onCancel,
+  onEdit,
+  onSave,
+}: {
+  editing: boolean;
+  form: TeamMemberForm;
+  setForm: Dispatch<SetStateAction<TeamMemberForm>>;
+  protectedOwner: boolean;
+  isPending: boolean;
+  onCancel: () => void;
+  onEdit: () => void;
+  onSave: () => void;
+}) {
+  return (
+    <Box sx={{ borderTop: "1px solid var(--color-border)", p: 2, flexShrink: 0 }}>
+      {editing ? (
+        <Stack spacing={1.5}>
+          <Tooltip
+            title={protectedOwner ? "The account owner cannot be deactivated." : ""}
+            disableHoverListener={!protectedOwner}
+          >
+            <span>
+              <FormControlLabel
+                control={
+                  <Switch
+                    checked={form.active}
+                    disabled={protectedOwner}
+                    onChange={(event) =>
+                      setForm((current) => ({ ...current, active: event.target.checked }))
+                    }
+                  />
+                }
+                label="Active"
+              />
+            </span>
+          </Tooltip>
+          <Stack direction="row" sx={{ justifyContent: "flex-end", gap: 1.5 }}>
+            <Button onClick={onCancel} disabled={isPending}>
+              Cancel
+            </Button>
+            <Button variant="contained" onClick={onSave} disabled={isPending}>
+              {isPending ? <CircularProgress size={20} /> : "Save changes"}
+            </Button>
+          </Stack>
+        </Stack>
+      ) : (
+        <Stack direction="row" sx={{ justifyContent: "flex-end" }}>
+          <Button variant="contained" onClick={onEdit}>
+            Edit
+          </Button>
+        </Stack>
+      )}
+    </Box>
+  );
+}
+
+function useTeamMemberEditor(
+  currentMember: TeamMemberDetail | undefined,
+  memberId: string | number | undefined,
+) {
+  const [editing, setEditing] = useState(false);
+  const [form, setForm] = useState<TeamMemberForm>(emptyForm);
+  const [submitted, setSubmitted] = useState(false);
+  const updateTeamMember = useUpdateTeamMember();
+  const currentMemberRef = useRef(currentMember);
+
+  useEffect(() => {
+    currentMemberRef.current = currentMember;
+  }, [currentMember]);
+
+  useEffect(() => {
+    const member = currentMemberRef.current;
+    if (member) {
+      setForm(formFromMember(member));
+      setEditing(false);
+      setSubmitted(false);
+    }
+  }, [currentMember?.id]);
+
+  useEffect(() => {
+    setEditing(false);
+    setSubmitted(false);
+  }, [memberId]);
+
+  const emailIsValid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email.trim());
+  const errors = useMemo(
+    () => getFormErrors(form, submitted, emailIsValid),
+    [emailIsValid, form, submitted],
+  );
+  const isValid =
+    Boolean(form.name.trim()) &&
+    Boolean(form.role) &&
+    Boolean(form.color) &&
+    emailIsValid &&
+    (form.role !== "Dispatcher" || form.serviceAreas.length > 0);
+  const protectedOwner = currentMember?.isAccountOwner === true;
+  const legacyRole = currentMember && !canonicalRole(currentMember.role) ? currentMember.role : "";
+
+  const updateRole = (role: TeamMemberRole) => {
+    setForm((current) => ({
+      ...current,
+      role,
+      serviceAreas: [],
+      permissions: defaultsForRole(role),
+    }));
+  };
+
+  const toggleArea = (area: string) => {
+    setForm((current) => ({
+      ...current,
+      serviceAreas: current.serviceAreas.includes(area)
+        ? current.serviceAreas.filter((value) => value !== area)
+        : [...current.serviceAreas, area],
+    }));
+  };
+
+  const togglePermission = (key: string) => {
+    setForm((current) => {
+      const permissions = new Set(current.permissions);
+      if (permissions.has(key)) permissions.delete(key);
+      else permissions.add(key);
+      return { ...current, permissions };
+    });
+  };
+
+  const save = () => {
+    setSubmitted(true);
+    if (!isValid || !currentMember || form.role === "") return;
+
+    updateTeamMember.mutate(
+      {
+        id: currentMember.id,
+        input: {
+          name: form.name.trim(),
+          role: form.role,
+          color: form.color,
+          email: form.email.trim(),
+          phone: form.phone.trim() || undefined,
+          serviceAreas: form.serviceAreas,
+          permissionOverrides: permissionOverrides(form.role, form.permissions),
+          isActive: form.active,
+        },
+      },
+      { onSuccess: () => setEditing(false) },
+    );
+  };
+
+  return {
+    editing,
+    form,
+    setForm,
+    errors,
+    protectedOwner,
+    legacyRole,
+    isPending: updateTeamMember.isPending,
+    updateRole,
+    toggleArea,
+    togglePermission,
+    save,
+    cancel: () => {
+      if (currentMember) setForm(formFromMember(currentMember));
+      setSubmitted(false);
+      setEditing(false);
+    },
+    beginEdit: () => setEditing(true),
+  };
+}
+
+function DrawerHeader({
+  member,
+  currentMember,
+  onClose,
+}: {
+  member: TeamMemberListItem | null;
+  currentMember: TeamMemberDetail | undefined;
+  onClose: () => void;
+}) {
+  return (
+    <>
+      <Stack
+        direction="row"
+        sx={{ alignItems: "center", justifyContent: "space-between", p: 2.5, flexShrink: 0 }}
+      >
+        <Box sx={{ minWidth: 0 }}>
+          <Typography noWrap variant="h6">
+            {currentMember?.name ?? member?.name ?? "Team Member"}
+          </Typography>
+          <Typography noWrap variant="body2" color="text.secondary">
+            {currentMember?.role ?? member?.role ?? ""}
+          </Typography>
+        </Box>
+        <IconButton aria-label="Close team member details" onClick={onClose}>
+          <CloseIcon />
+        </IconButton>
+      </Stack>
+      <Divider />
+    </>
+  );
+}
+
+function DrawerContent({
+  detail,
+  currentMember,
+  editing,
+  editor,
+}: {
+  detail: ReturnType<typeof useTeamMemberDetail>;
+  currentMember: TeamMemberDetail | undefined;
+  editing: boolean;
+  editor: ReturnType<typeof useTeamMemberEditor>;
+}) {
+  return (
+    <Box sx={{ flex: 1, minHeight: 0, overflow: "auto", p: 2.5 }}>
+      {Boolean(detail.isLoading) && <CircularProgress aria-label="Loading team member details" />}
+      {detail.error !== null && detail.error !== undefined && (
+        <Alert severity="error">{detail.error.message}</Alert>
+      )}
+      {currentMember !== undefined && !editing && <MemberView member={currentMember} />}
+      {currentMember !== undefined && editing && (
+        <MemberEditForm
+          form={editor.form}
+          setForm={editor.setForm}
+          errors={editor.errors}
+          updateRole={editor.updateRole}
+          toggleArea={editor.toggleArea}
+          togglePermission={editor.togglePermission}
+          roleDisabled={editor.protectedOwner}
+          legacyRole={editor.legacyRole}
+        />
+      )}
+    </Box>
+  );
+}
+
+export function TeamMemberDetailDrawer({
+  member,
+  onClose,
+}: {
+  member: TeamMemberListItem | null;
+  onClose: () => void;
+}) {
+  const detail = useTeamMemberDetail(member?.id ?? null);
+  const currentMember = detail.data;
+  const editor = useTeamMemberEditor(currentMember, member?.id);
+
+  return (
+    <Drawer
+      anchor="right"
+      open={Boolean(member)}
+      onClose={onClose}
+      aria-label={currentMember?.name ?? "Team Member"}
+      slotProps={{ paper: { sx: { width: { xs: "100vw", sm: 420 }, display: "flex" } } }}
+    >
+      <Stack sx={{ height: "100%", minHeight: 0 }}>
+        <DrawerHeader member={member} currentMember={currentMember} onClose={onClose} />
+        <DrawerContent
+          detail={detail}
+          currentMember={currentMember}
+          editing={editor.editing}
+          editor={editor}
+        />
+
+        {currentMember !== undefined && (
+          <DrawerFooter
+            editing={editor.editing}
+            form={editor.form}
+            setForm={editor.setForm}
+            protectedOwner={editor.protectedOwner}
+            isPending={editor.isPending}
+            onCancel={editor.cancel}
+            onEdit={editor.beginEdit}
+            onSave={editor.save}
+          />
+        )}
+      </Stack>
+    </Drawer>
+  );
+}

src/app/(protected)/team-members/_components/team-member-form-options.ts

@@ -0,0 +1,78 @@
+import type { TeamMemberRole } from "@/domain/team-members/types/team-member";
+
+export const TEAM_MEMBER_ROLES: readonly TeamMemberRole[] = ["Dispatcher", "Scheduler", "Admin"];
+
+export const TEAM_MEMBER_COLORS = [
+  "#F59E0B",
+  "#0D9488",
+  "#6366F1",
+  "#F43F5E",
+  "#7C3AED",
+  "#0EA5E9",
+  "#16A34A",
+  "#EA580C",
+  "#0891B2",
+  "#C026D3",
+] as const;
+
+/** Returns the supported role matching the stored value (case-insensitive), or null for legacy roles. */
+export function canonicalRole(value: string): TeamMemberRole | null {
+  const trimmed = value.trim();
+  return TEAM_MEMBER_ROLES.find((role) => role.toLowerCase() === trimmed.toLowerCase()) ?? null;
+}
+
+function parseHexColor(value: string): [number, number, number] | null {
+  const match = /^#?([0-9a-f]{6})$/i.exec(value.trim());
+  if (!match) return null;
+  const numeric = Number.parseInt(match[1], 16);
+  return [(numeric >> 16) & 255, (numeric >> 8) & 255, numeric & 255];
+}
+
+/** Returns the palette color closest to the stored color by RGB distance, or the first palette color when unparseable. */
+export function nearestPaletteColor(value: string): string {
+  const target = parseHexColor(value);
+  if (!target) return TEAM_MEMBER_COLORS[0];
+
+  let nearest: string = TEAM_MEMBER_COLORS[0];
+  let nearestDistance = Number.POSITIVE_INFINITY;
+  for (const color of TEAM_MEMBER_COLORS) {
+    const [red, green, blue] = parseHexColor(color) ?? [0, 0, 0];
+    const distance = (red - target[0]) ** 2 + (green - target[1]) ** 2 + (blue - target[2]) ** 2;
+    if (distance < nearestDistance) {
+      nearest = color;
+      nearestDistance = distance;
+    }
+  }
+  return nearest;
+}
+
+export interface ResolvedFormColor {
+  color: string;
+  notice: string;
+}
+
+/**
+ * Maps a stored color onto the current palette. Palette colors (any casing) are
+ * canonicalized; legacy colors are replaced by the nearest palette color with a
+ * notice so the replacement is never silent.
+ */
+export function resolveFormColor(stored: string): ResolvedFormColor {
+  const trimmed = stored.trim();
+  if (!trimmed) {
+    return {
+      color: TEAM_MEMBER_COLORS[0],
+      notice: `No color was saved for this member; preselected ${TEAM_MEMBER_COLORS[0]} from the palette.`,
+    };
+  }
+
+  const canonical = TEAM_MEMBER_COLORS.find(
+    (color) => color.toLowerCase() === trimmed.toLowerCase(),
+  );
+  if (canonical) return { color: canonical, notice: "" };
+
+  const nearest = nearestPaletteColor(trimmed);
+  return {
+    color: nearest,
+    notice: `Saved color ${trimmed} is not in the current palette and was replaced with the nearest palette color ${nearest}.`,
+  };
+}

src/app/(protected)/team-members/_components/team-member-permissions.ts

@@ -0,0 +1,120 @@
+import type { TeamMemberRole } from "@/domain/team-members/types/team-member";
+
+export const PERMISSION_GROUPS = [
+  { label: "Team Members", keys: ["manageTeamMembers", "changeTeamMemberRole"] },
+  { label: "Vendors", keys: ["createVendors", "editVendors", "deactivateVendors"] },
+  { label: "Sites", keys: ["createSites", "editSites", "deleteSites"] },
+  { label: "Services", keys: ["createServices", "editServices", "deactivateServices"] },
+  {
+    label: "Completion Document Templates",
+    keys: [
+      "createCompletionDocTemplates",
+      "editCompletionDocTemplates",
+      "deleteCompletionDocTemplates",
+    ],
+  },
+  {
+    label: "Work Orders",
+    keys: ["createWorkOrders", "editOthersWorkOrders", "cancelWorkOrders", "deleteWorkOrders"],
+  },
+  { label: "Uplifts", keys: ["requestUplifts", "autoApproveUplifts", "reviewUplifts"] },
+  { label: "Dashboard", keys: ["viewAllDispatchersOnDashboard"] },
+] as const;
+
+export const PERMISSION_LABELS: Record<string, string> = {
+  manageTeamMembers: "Manage team members",
+  changeTeamMemberRole: "Change team member role",
+  createVendors: "Create vendors",
+  editVendors: "Edit vendors",
+  deactivateVendors: "Deactivate vendors",
+  createSites: "Create sites",
+  editSites: "Edit sites",
+  deleteSites: "Delete sites",
+  createServices: "Create services",
+  editServices: "Edit services",
+  deactivateServices: "Deactivate services",
+  createCompletionDocTemplates: "Create completion document templates",
+  editCompletionDocTemplates: "Edit completion document templates",
+  deleteCompletionDocTemplates: "Delete completion document templates",
+  createWorkOrders: "Create work orders",
+  editOthersWorkOrders: "Edit other users' work orders",
+  cancelWorkOrders: "Cancel work orders",
+  deleteWorkOrders: "Delete work orders",
+  requestUplifts: "Request uplifts",
+  autoApproveUplifts: "Automatically approve uplifts",
+  reviewUplifts: "Review uplifts",
+  viewAllDispatchersOnDashboard: "View all Dispatchers on dashboard",
+};
+
+export const ALL_PERMISSION_KEYS = PERMISSION_GROUPS.flatMap((group) => group.keys);
+const DISPATCHER_DEFAULTS = new Set([
+  "createVendors",
+  "editVendors",
+  "deactivateVendors",
+  "createSites",
+  "editSites",
+  "createWorkOrders",
+  "editOthersWorkOrders",
+  "cancelWorkOrders",
+  "requestUplifts",
+  "autoApproveUplifts",
+]);
+const SCHEDULER_DEFAULTS = new Set([
+  ...Array.from(DISPATCHER_DEFAULTS).filter(
+    (key) => key !== "requestUplifts" && key !== "autoApproveUplifts",
+  ),
+  "deleteSites",
+  "createServices",
+  "editServices",
+  "createCompletionDocTemplates",
+  "editCompletionDocTemplates",
+  "viewAllDispatchersOnDashboard",
+]);
+
+export function defaultsForRole(role: TeamMemberRole): Set<string> {
+  if (role === "Admin") return new Set(ALL_PERMISSION_KEYS);
+  return role === "Scheduler" ? new Set(SCHEDULER_DEFAULTS) : new Set(DISPATCHER_DEFAULTS);
+}
+
+export function permissionOverrides(role: TeamMemberRole, selected: Set<string>) {
+  const defaults = defaultsForRole(role);
+  return Object.fromEntries(
+    ALL_PERMISSION_KEYS.filter((key) => defaults.has(key) !== selected.has(key)).map((key) => [
+      key,
+      selected.has(key) ? 1 : 2,
+    ]),
+  ) as Record<string, 1 | 2>;
+}
+
+export interface TeamMemberFormValues {
+  name: string;
+  role: TeamMemberRole | "";
+  color: string;
+  email: string;
+  phone: string;
+  active: boolean;
+  serviceAreas: string[];
+  permissions: Set<string>;
+}
+
+export function getFormErrors(
+  form: TeamMemberFormValues,
+  submitted: boolean,
+  emailIsValid: boolean,
+) {
+  return {
+    name: submitted && !form.name.trim() ? "Name is required." : "",
+    role: submitted && !form.role ? "Role is required." : "",
+    color: submitted && !form.color ? "Color is required." : "",
+    email:
+      submitted && !form.email.trim()
+        ? "Email is required."
+        : submitted && !emailIsValid
+          ? "Enter a valid email address."
+          : "",
+    serviceAreas:
+      submitted && form.role === "Dispatcher" && form.serviceAreas.length === 0
+        ? "Select at least one service area."
+        : "",
+  };
+}

src/app/(protected)/team-members/index.tsx

@@ -2,23 +2,10 @@ import { useState } from "react";
 import { useDebounce } from "@/hooks/use-debounce";
 import { useTeamMembersList } from "@/domain/team-members/use-cases/use-team-members-list";
 import type { TeamMemberListItem } from "@/domain/team-members/types/team-member";
-import {
+import { Alert, Box, Button, Stack, Tab, Tabs, TextField, Typography } from "@mui/material";
-  Alert,
-  Avatar,
-  Box,
-  Button,
-  Chip,
-  Drawer,
-  IconButton,
-  Stack,
-  Tab,
-  Tabs,
-  TextField,
-  Typography,
-} from "@mui/material";
-import CloseIcon from "@mui/icons-material/Close";
 import { TeamMembersTable } from "./_components/team-members-table";
 import { AddTeamMemberDialog } from "./_components/add-team-member-dialog";
+import { TeamMemberDetailDrawer } from "./_components/team-member-detail-drawer";
 
 type StatusTab = "active" | "inactive";
 
@@ -27,57 +14,6 @@ const STATUS_LABELS: Record<StatusTab, "Active" | "Inactive"> = {
   inactive: "Inactive",
 };
 
-function MemberStatus({ status }: { status: TeamMemberListItem["status"] }) {
-  return <Chip size="small" label={status} color={status === "Active" ? "success" : "default"} />;
-}
-
-function TeamMemberDrawer({
-  member,
-  onClose,
-}: {
-  member: TeamMemberListItem | null;
-  onClose: () => void;
-}) {
-  return (
-    <Drawer anchor="right" open={Boolean(member)} onClose={onClose}>
-      <Box sx={{ width: { xs: "100vw", sm: 380 }, p: 3 }}>
-        <Stack
-          direction="row"
-          sx={{ alignItems: "center", justifyContent: "space-between", mb: 3 }}
-        >
-          <Typography variant="h6">Team Member</Typography>
-          <IconButton aria-label="Close team member details" onClick={onClose}>
-            <CloseIcon />
-          </IconButton>
-        </Stack>
-        {member !== null && (
-          <Stack spacing={2}>
-            <Stack direction="row" spacing={2} sx={{ alignItems: "center" }}>
-              <Avatar sx={{ bgcolor: member.color || "primary.main" }}>
-                {member.name.slice(0, 1).toUpperCase() || "?"}
-              </Avatar>
-              <Box>
-                <Typography variant="h6">{member.name || "—"}</Typography>
-                <Typography color="text.secondary">{member.role || "—"}</Typography>
-              </Box>
-            </Stack>
-            <MemberStatus status={member.status} />
-            <Typography>
-              <strong>Service Area:</strong> {member.serviceArea || "—"}
-            </Typography>
-            <Typography>
-              <strong>Phone:</strong> {member.phone || "—"}
-            </Typography>
-            <Typography>
-              <strong>Email:</strong> {member.email || "—"}
-            </Typography>
-          </Stack>
-        )}
-      </Box>
-    </Drawer>
-  );
-}
-
 export default function TeamMembersListPage() {
   const [search, setSearch] = useState("");
   const [tab, setTab] = useState<StatusTab>("active");
@@ -177,7 +113,7 @@ export default function TeamMembersListPage() {
         </Typography>
       </Stack>
 
-      <TeamMemberDrawer member={selectedMember} onClose={() => setSelectedMember(null)} />
+      <TeamMemberDetailDrawer member={selectedMember} onClose={() => setSelectedMember(null)} />
       <AddTeamMemberDialog open={addMemberOpen} onClose={() => setAddMemberOpen(false)} />
     </Box>
   );

src/domain/team-members/api/team-members-api.ts

@@ -1,11 +1,16 @@
-import { apiGet, apiPost } from "@/api/api";
+import { apiGet, apiPost, apiPut } from "@/api/api";
 import { API_PATHS } from "@/api/api-paths";
 import { handleApiResponse } from "@/api/handle-api-response";
-import { mapTeamMemberListItems } from "@/domain/team-members/mappers/team-member-mapper";
+import {
+  mapTeamMemberDetail,
+  mapTeamMemberListItems,
+} from "@/domain/team-members/mappers/team-member-mapper";
 import type {
   CreateTeamMemberInput,
   TeamMemberCreated,
+  TeamMemberDetail,
   TeamMemberListResult,
+  UpdateTeamMemberInput,
 } from "@/domain/team-members/types/team-member";
 
 export const teamMembersApi = {
@@ -19,4 +24,19 @@ export const teamMembersApi = {
     const data = await apiPost<unknown>(API_PATHS.teamMember.create, input);
     return handleApiResponse<TeamMemberCreated>(data);
   },
+
+  getDetail: async (id: string | number): Promise<TeamMemberDetail> => {
+    const data = await apiGet<unknown>(
+      `${API_PATHS.teamMember.detail}/${encodeURIComponent(String(id))}`,
+    );
+    return mapTeamMemberDetail(handleApiResponse<unknown>(data));
+  },
+
+  update: async (id: string | number, input: UpdateTeamMemberInput): Promise<TeamMemberDetail> => {
+    const data = await apiPut<unknown>(
+      `${API_PATHS.teamMember.detail}/${encodeURIComponent(String(id))}`,
+      input,
+    );
+    return mapTeamMemberDetail(handleApiResponse<unknown>(data));
+  },
 };

src/domain/team-members/mappers/team-member-mapper.ts

@@ -1,4 +1,9 @@
-import type { TeamMemberListItem } from "@/domain/team-members/types/team-member";
+import type {
+  TeamMemberDetail,
+  TeamMemberListItem,
+  TeamPermissionState,
+  TeamPermissionValue,
+} from "@/domain/team-members/types/team-member";
 
 function readString(record: Record<string, unknown>, ...keys: string[]): string {
   for (const key of keys) {
@@ -18,6 +23,41 @@ function readBoolean(record: Record<string, unknown>, ...keys: string[]): boolea
   return false;
 }
 
+function readStringArray(record: Record<string, unknown>, ...keys: string[]): string[] {
+  for (const key of keys) {
+    const value = record[key];
+    if (Array.isArray(value))
+      return value.filter((item): item is string => typeof item === "string");
+    if (typeof value === "string" && value.trim()) return [value];
+  }
+  return [];
+}
+
+function readPermissionState(value: unknown): TeamPermissionState {
+  if (value === 1 || value === "Allow") return 1;
+  if (value === 2 || value === "Deny") return 2;
+  return 0;
+}
+
+function readPermissions(record: Record<string, unknown>): TeamPermissionValue[] {
+  const value = record.permissions ?? record.Permissions;
+  if (!Array.isArray(value)) return [];
+
+  return value.flatMap((item) => {
+    if (typeof item !== "object" || item === null) return [];
+    const permission = item as Record<string, unknown>;
+    const permissionKey = readString(permission, "permissionKey", "PermissionKey");
+    if (!permissionKey) return [];
+    return [
+      {
+        permissionKey,
+        overrideState: readPermissionState(permission.overrideState ?? permission.OverrideState),
+        isGranted: readBoolean(permission, "isGranted", "IsGranted"),
+      },
+    ];
+  });
+}
+
 export function mapTeamMemberListItem(raw: unknown): TeamMemberListItem {
   const record = (typeof raw === "object" && raw !== null ? raw : {}) as Record<string, unknown>;
   const id = record.id ?? record.Id;
@@ -44,3 +84,13 @@ export function mapTeamMemberListItem(raw: unknown): TeamMemberListItem {
 export function mapTeamMemberListItems(rawItems: unknown[]): TeamMemberListItem[] {
   return rawItems.map(mapTeamMemberListItem);
 }
+
+export function mapTeamMemberDetail(raw: unknown): TeamMemberDetail {
+  const record = (typeof raw === "object" && raw !== null ? raw : {}) as Record<string, unknown>;
+  const listItem = mapTeamMemberListItem(record);
+  return {
+    ...listItem,
+    serviceAreas: readStringArray(record, "serviceAreas", "ServiceAreas"),
+    permissions: readPermissions(record),
+  };
+}

src/domain/team-members/types/team-member.ts

@@ -34,6 +34,30 @@ export interface TeamMemberCreated {
   pendingRegistration: boolean;
 }
 
+export type TeamPermissionState = 0 | 1 | 2;
+
+export interface TeamPermissionValue {
+  permissionKey: string;
+  overrideState: TeamPermissionState;
+  isGranted: boolean;
+}
+
+export interface TeamMemberDetail extends TeamMemberListItem {
+  serviceAreas: string[];
+  permissions: TeamPermissionValue[];
+}
+
+export interface UpdateTeamMemberInput {
+  name: string;
+  role: TeamMemberRole;
+  color: string;
+  email: string;
+  phone?: string;
+  serviceAreas: string[];
+  permissionOverrides: Record<string, TeamPermissionState>;
+  isActive: boolean;
+}
+
 export interface TeamMemberListResult {
   items: TeamMemberListItem[];
 }

src/domain/team-members/use-cases/use-team-member-detail.ts

@@ -0,0 +1,45 @@
+import {
+  useMutation,
+  useQuery,
+  useQueryClient,
+  type UseMutationResult,
+  type UseQueryResult,
+} from "@tanstack/react-query";
+import { toast } from "react-toastify";
+import { teamMembersApi } from "@/domain/team-members/api/team-members-api";
+import type {
+  TeamMemberDetail,
+  UpdateTeamMemberInput,
+} from "@/domain/team-members/types/team-member";
+import { queryKeys } from "@/infra/query-key/query-key";
+
+export function useTeamMemberDetail(
+  id: string | number | null,
+): UseQueryResult<TeamMemberDetail, Error> {
+  return useQuery({
+    queryKey: queryKeys.teamMembers.detail(id ?? ""),
+    queryFn: () => teamMembersApi.getDetail(id as string | number),
+    enabled: id !== null,
+  });
+}
+
+interface UpdateVariables {
+  id: string | number;
+  input: UpdateTeamMemberInput;
+}
+
+export function useUpdateTeamMember(): UseMutationResult<TeamMemberDetail, Error, UpdateVariables> {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({ id, input }) => teamMembersApi.update(id, input),
+    onSuccess: (member) => {
+      void queryClient.invalidateQueries({ queryKey: queryKeys.teamMembers.all });
+      void queryClient.setQueryData(queryKeys.teamMembers.detail(member.id), member);
+      toast.success("Team member updated.");
+    },
+    onError: (error: Error) => {
+      toast.error(error.message || "Failed to update team member");
+    },
+  });
+}

src/infra/query-key/query-key.ts

@@ -52,6 +52,7 @@ export const queryKeys = {
   teamMembers: {
     all: ["teamMembers"] as const,
     list: () => [...queryKeys.teamMembers.all, "list"] as const,
+    detail: (id: string | number) => [...queryKeys.teamMembers.all, "detail", id] as const,
   },
   dashboard: {
     all: ["dashboard"] as const,

src/test/app/(protected)/team-members/team-member-detail-drawer.test.tsx

@@ -0,0 +1,240 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { renderWithProviders } from "@/test/test-utils";
+import { TeamMemberDetailDrawer } from "@/app/(protected)/team-members/_components/team-member-detail-drawer";
+import {
+  useTeamMemberDetail,
+  useUpdateTeamMember,
+} from "@/domain/team-members/use-cases/use-team-member-detail";
+import type { TeamMemberDetail, TeamMemberListItem } from "@/domain/team-members/types/team-member";
+
+vi.mock("@/domain/team-members/use-cases/use-team-member-detail", () => ({
+  useTeamMemberDetail: vi.fn(),
+  useUpdateTeamMember: vi.fn(),
+}));
+
+const member: TeamMemberListItem = {
+  id: "u-1",
+  name: "Taylor Dispatcher",
+  role: "Dispatcher",
+  serviceArea: "East",
+  phone: "555-0100",
+  email: "taylor@example.com",
+  color: "#F59E0B",
+  status: "Active",
+  isAccountOwner: false,
+  pendingRegistration: true,
+};
+
+const detail: TeamMemberDetail = {
+  ...member,
+  serviceAreas: ["East"],
+  permissions: [
+    { permissionKey: "createSites", overrideState: 1, isGranted: true },
+    { permissionKey: "editSites", overrideState: 2, isGranted: false },
+  ],
+};
+
+describe("TeamMemberDetailDrawer", () => {
+  const mutate = vi.fn();
+
+  beforeEach(() => {
+    mutate.mockReset();
+    vi.mocked(useTeamMemberDetail).mockReturnValue({
+      data: detail,
+      isLoading: false,
+      error: null,
+    } as unknown as ReturnType<typeof useTeamMemberDetail>);
+    vi.mocked(useUpdateTeamMember).mockReturnValue({
+      mutate,
+      isPending: false,
+    } as unknown as ReturnType<typeof useUpdateTeamMember>);
+  });
+
+  it("shows all member fields and grouped permission state in view mode", () => {
+    renderWithProviders(<TeamMemberDetailDrawer member={member} onClose={vi.fn()} />, {
+      withAuth: false,
+    });
+
+    expect(screen.getAllByText("Taylor Dispatcher")).not.toHaveLength(0);
+    expect(screen.getByText("taylor@example.com")).toBeInTheDocument();
+    expect(screen.getByText("East")).toBeInTheDocument();
+    expect(screen.getByText("Pending registration")).toBeInTheDocument();
+    expect(screen.getByText("Create sites")).toBeInTheDocument();
+    expect(screen.getByText("Granted")).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Edit" })).toBeInTheDocument();
+  });
+
+  it("edits fields and saves active status and permission overrides", async () => {
+    const user = userEvent.setup();
+    renderWithProviders(<TeamMemberDetailDrawer member={member} onClose={vi.fn()} />, {
+      withAuth: false,
+    });
+
+    await user.click(screen.getByRole("button", { name: "Edit" }));
+    const name = screen.getByRole("textbox", { name: "Name" });
+    await user.clear(name);
+    await user.type(name, "Taylor Updated");
+    await user.click(screen.getByRole("switch", { name: "Active" }));
+    await user.click(screen.getByRole("button", { name: "Save changes" }));
+
+    await waitFor(() => expect(mutate).toHaveBeenCalledTimes(1));
+    expect(mutate).toHaveBeenCalledWith(
+      expect.objectContaining({
+        id: "u-1",
+        input: expect.objectContaining({
+          name: "Taylor Updated",
+          isActive: false,
+          serviceAreas: ["East"],
+        }),
+      }),
+      expect.any(Object),
+    );
+  });
+
+  it("disables role changes and deactivation for the account owner", async () => {
+    const owner = { ...detail, isAccountOwner: true };
+    vi.mocked(useTeamMemberDetail).mockReturnValue({
+      data: owner,
+      isLoading: false,
+      error: null,
+    } as unknown as ReturnType<typeof useTeamMemberDetail>);
+    const user = userEvent.setup();
+    renderWithProviders(<TeamMemberDetailDrawer member={member} onClose={vi.fn()} />, {
+      withAuth: false,
+    });
+
+    await user.click(screen.getByRole("button", { name: "Edit" }));
+    expect(screen.getByRole("combobox", { name: "Role" })).toHaveAttribute("aria-disabled", "true");
+    const activeSwitch = screen.getByRole("switch", { name: "Active" });
+    expect(activeSwitch).toBeDisabled();
+    const tooltipTarget = activeSwitch.closest("label")?.parentElement;
+    if (!tooltipTarget) throw new Error("missing account-owner tooltip target");
+    await user.hover(tooltipTarget);
+    await waitFor(() =>
+      expect(screen.getByRole("tooltip")).toHaveTextContent(
+        "The account owner cannot be deactivated.",
+      ),
+    );
+  });
+
+  it("keeps edits when the detail query refreshes", async () => {
+    const user = userEvent.setup();
+    const { rerender } = renderWithProviders(
+      <TeamMemberDetailDrawer member={member} onClose={vi.fn()} />,
+      { withAuth: false },
+    );
+
+    await user.click(screen.getByRole("button", { name: "Edit" }));
+    const name = screen.getByRole("textbox", { name: "Name" });
+    await user.clear(name);
+    await user.type(name, "Taylor Updated");
+
+    vi.mocked(useTeamMemberDetail).mockReturnValue({
+      data: { ...detail, phone: "555-0101" },
+      isLoading: false,
+      error: null,
+    } as unknown as ReturnType<typeof useTeamMemberDetail>);
+    rerender(<TeamMemberDetailDrawer member={member} onClose={vi.fn()} />);
+
+    expect(screen.getByRole("textbox", { name: "Name" })).toHaveValue("Taylor Updated");
+    expect(screen.getByRole("textbox", { name: "Phone" })).toHaveValue("555-0100");
+  });
+
+  it("restores the saved detail when editing is cancelled", async () => {
+    const user = userEvent.setup();
+    renderWithProviders(<TeamMemberDetailDrawer member={member} onClose={vi.fn()} />, {
+      withAuth: false,
+    });
+
+    await user.click(screen.getByRole("button", { name: "Edit" }));
+    const name = screen.getByRole("textbox", { name: "Name" });
+    await user.clear(name);
+    await user.type(name, "Discarded draft");
+    await user.click(screen.getByRole("button", { name: "Cancel" }));
+
+    expect(screen.getByRole("button", { name: "Edit" })).toBeInTheDocument();
+    expect(screen.getAllByText("Taylor Dispatcher")).not.toHaveLength(0);
+    expect(screen.queryByDisplayValue("Discarded draft")).not.toBeInTheDocument();
+  });
+
+  it("marks a legacy role in view mode", () => {
+    vi.mocked(useTeamMemberDetail).mockReturnValue({
+      data: { ...detail, role: "Manager" },
+      isLoading: false,
+      error: null,
+    } as unknown as ReturnType<typeof useTeamMemberDetail>);
+    renderWithProviders(<TeamMemberDetailDrawer member={member} onClose={vi.fn()} />, {
+      withAuth: false,
+    });
+
+    expect(screen.getByText("Manager (legacy)")).toBeInTheDocument();
+  });
+
+  it("shows a legacy role in the edit form and blocks save until a supported role is chosen", async () => {
+    vi.mocked(useTeamMemberDetail).mockReturnValue({
+      data: { ...detail, role: "Manager" },
+      isLoading: false,
+      error: null,
+    } as unknown as ReturnType<typeof useTeamMemberDetail>);
+    const user = userEvent.setup();
+    renderWithProviders(<TeamMemberDetailDrawer member={member} onClose={vi.fn()} />, {
+      withAuth: false,
+    });
+
+    await user.click(screen.getByRole("button", { name: "Edit" }));
+    const roleSelect = screen.getByRole("combobox", { name: "Role" });
+    expect(roleSelect).toHaveTextContent("Manager (legacy)");
+    expect(
+      screen.getByText(/Manager is a legacy role and can no longer be saved/),
+    ).toBeInTheDocument();
+
+    await user.click(screen.getByRole("button", { name: "Save changes" }));
+    expect(mutate).not.toHaveBeenCalled();
+
+    await user.click(roleSelect);
+    await user.click(screen.getByRole("option", { name: "Scheduler" }));
+    await user.click(screen.getByRole("button", { name: "Save changes" }));
+
+    await waitFor(() => expect(mutate).toHaveBeenCalledTimes(1));
+    expect(mutate).toHaveBeenCalledWith(
+      expect.objectContaining({
+        id: "u-1",
+        input: expect.objectContaining({ role: "Scheduler" }),
+      }),
+      expect.any(Object),
+    );
+  });
+
+  it("preselects the nearest palette color for a legacy color and saves without a manual pick", async () => {
+    vi.mocked(useTeamMemberDetail).mockReturnValue({
+      data: { ...detail, color: "#FF0000" },
+      isLoading: false,
+      error: null,
+    } as unknown as ReturnType<typeof useTeamMemberDetail>);
+    const user = userEvent.setup();
+    renderWithProviders(<TeamMemberDetailDrawer member={member} onClose={vi.fn()} />, {
+      withAuth: false,
+    });
+
+    await user.click(screen.getByRole("button", { name: "Edit" }));
+    expect(
+      screen.getByText(/Saved color #FF0000 is not in the current palette/),
+    ).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Select color #EA580C" })).toHaveAttribute(
+      "aria-pressed",
+      "true",
+    );
+
+    await user.click(screen.getByRole("button", { name: "Save changes" }));
+
+    await waitFor(() => expect(mutate).toHaveBeenCalledTimes(1));
+    expect(mutate).toHaveBeenCalledWith(
+      expect.objectContaining({
+        input: expect.objectContaining({ color: "#EA580C" }),
+      }),
+      expect.any(Object),
+    );
+  });
+});

src/test/app/(protected)/team-members/team-member-form-options.test.ts

@@ -0,0 +1,54 @@
+import { describe, expect, it } from "vitest";
+import {
+  canonicalRole,
+  nearestPaletteColor,
+  resolveFormColor,
+  TEAM_MEMBER_COLORS,
+} from "@/app/(protected)/team-members/_components/team-member-form-options";
+
+describe("canonicalRole", () => {
+  it("returns the canonical role for supported values", () => {
+    expect(canonicalRole("Dispatcher")).toBe("Dispatcher");
+    expect(canonicalRole("scheduler")).toBe("Scheduler");
+    expect(canonicalRole("  Admin ")).toBe("Admin");
+  });
+
+  it("returns null for legacy and empty roles", () => {
+    expect(canonicalRole("Manager")).toBeNull();
+    expect(canonicalRole("Supervisor")).toBeNull();
+    expect(canonicalRole("")).toBeNull();
+  });
+});
+
+describe("nearestPaletteColor", () => {
+  it("returns the closest palette color by RGB distance", () => {
+    expect(nearestPaletteColor("#FF0000")).toBe("#EA580C");
+    expect(nearestPaletteColor("#00FF00")).toBe("#16A34A");
+    expect(nearestPaletteColor("#111111")).toBe("#16A34A");
+  });
+
+  it("falls back to the first palette color for unparseable values", () => {
+    expect(nearestPaletteColor("not-a-color")).toBe(TEAM_MEMBER_COLORS[0]);
+    expect(nearestPaletteColor("")).toBe(TEAM_MEMBER_COLORS[0]);
+  });
+});
+
+describe("resolveFormColor", () => {
+  it("keeps palette colors and canonicalizes their casing", () => {
+    expect(resolveFormColor("#F59E0B")).toEqual({ color: "#F59E0B", notice: "" });
+    expect(resolveFormColor("#f59e0b")).toEqual({ color: "#F59E0B", notice: "" });
+  });
+
+  it("replaces a legacy color with the nearest palette color and explains the replacement", () => {
+    const resolved = resolveFormColor("#FF0000");
+    expect(resolved.color).toBe("#EA580C");
+    expect(resolved.notice).toContain("#FF0000");
+    expect(resolved.notice).toContain("#EA580C");
+  });
+
+  it("preselects the first palette color when nothing was stored", () => {
+    const resolved = resolveFormColor("  ");
+    expect(resolved.color).toBe(TEAM_MEMBER_COLORS[0]);
+    expect(resolved.notice).not.toBe("");
+  });
+});

src/test/domain/team-members/api/team-members-api.test.ts

@@ -3,10 +3,12 @@ import { API_PATHS } from "@/api/api-paths";
 
 const apiGet = vi.fn();
 const apiPost = vi.fn();
+const apiPut = vi.fn();
 
 vi.mock("@/api/api", () => ({
   apiGet: (...args: unknown[]) => apiGet(...args),
   apiPost: (...args: unknown[]) => apiPost(...args),
+  apiPut: (...args: unknown[]) => apiPut(...args),
 }));
 
 import { teamMembersApi } from "@/domain/team-members/api/team-members-api";
@@ -15,6 +17,7 @@ describe("teamMembersApi", () => {
   beforeEach(() => {
     apiGet.mockReset();
     apiPost.mockReset();
+    apiPut.mockReset();
   });
 
   it("posts the pending team member contract without invitation fields", async () => {
@@ -45,4 +48,47 @@ describe("teamMembersApi", () => {
     expect(apiPost.mock.calls[0]?.[1]).not.toHaveProperty("invite");
     expect(apiPost.mock.calls[0]?.[1]).not.toHaveProperty("password");
   });
+
+  it("gets and updates detail through the team-member detail route", async () => {
+    apiGet.mockResolvedValueOnce({
+      data: {
+        id: "u/1",
+        name: "Taylor Dispatcher",
+        role: "Dispatcher",
+        status: "Active",
+        serviceAreas: ["East"],
+        permissions: [{ permissionKey: "createSites", overrideState: 1, isGranted: true }],
+      },
+    });
+    apiPut.mockResolvedValueOnce({
+      data: {
+        id: "u/1",
+        name: "Taylor Updated",
+        role: "Dispatcher",
+        status: "Inactive",
+        serviceAreas: [],
+        permissions: [],
+      },
+    });
+
+    await expect(teamMembersApi.getDetail("u/1")).resolves.toMatchObject({
+      id: "u/1",
+      serviceAreas: ["East"],
+    });
+    const input = {
+      name: "Taylor Updated",
+      role: "Dispatcher" as const,
+      color: "#F59E0B",
+      email: "taylor@example.com",
+      serviceAreas: [],
+      permissionOverrides: { createSites: 2 as const },
+      isActive: false,
+    };
+    await expect(teamMembersApi.update("u/1", input)).resolves.toMatchObject({
+      name: "Taylor Updated",
+      status: "Inactive",
+    });
+    expect(apiGet).toHaveBeenCalledWith("team-members/u%2F1");
+    expect(apiPut).toHaveBeenCalledWith("team-members/u%2F1", input);
+  });
 });

src/test/domain/team-members/team-member-mapper.test.ts

@@ -1,5 +1,8 @@
 import { describe, expect, it } from "vitest";
-import { mapTeamMemberListItem } from "@/domain/team-members/mappers/team-member-mapper";
+import {
+  mapTeamMemberDetail,
+  mapTeamMemberListItem,
+} from "@/domain/team-members/mappers/team-member-mapper";
 
 describe("mapTeamMemberListItem", () => {
   it("maps the existing User list response and derives inactive state", () => {
@@ -27,3 +30,28 @@ describe("mapTeamMemberListItem", () => {
     });
   });
 });
+
+describe("mapTeamMemberDetail", () => {
+  it("maps service areas and the full permission summary", () => {
+    expect(
+      mapTeamMemberDetail({
+        Id: "u1",
+        Name: "Taylor",
+        Role: "Scheduler",
+        Status: "Active",
+        ServiceAreas: ["Central", "West"],
+        Permissions: [
+          { PermissionKey: "createSites", OverrideState: 2, IsGranted: false },
+          { PermissionKey: "editSites", OverrideState: "Allow", IsGranted: true },
+        ],
+      }),
+    ).toMatchObject({
+      id: "u1",
+      serviceAreas: ["Central", "West"],
+      permissions: [
+        { permissionKey: "createSites", overrideState: 2, isGranted: false },
+        { permissionKey: "editSites", overrideState: 1, isGranted: true },
+      ],
+    });
+  });
+});