feat(team-members): add member detail drawer (SH-326)

2026-09-30 08:03:13 +00:00 · 2026-09-16 20:27:05 -03:00 · 2026-09-16 20:27:05 -03:00 · e323b0b2ce
commit e323b0b2ce
parent b6f4590bfa
13 changed files with 943 additions and 195 deletions
--- a/src/api/api-paths.ts
+++ b/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",
--- a/src/app/(protected)/team-members/_components/add-team-member-dialog.tsx
+++ b/src/app/(protected)/team-members/_components/add-team-member-dialog.tsx
@ -29,6 +29,13 @@ import type {
  CreateTeamMemberInput,
  TeamMemberRole,
 } from "@/domain/team-members/types/team-member";
+import {
+  defaultsForRole,
+  getFormErrors,
+  PERMISSION_GROUPS,
+  PERMISSION_LABELS,
+  permissionOverrides,
+} from "./team-member-permissions";

 const ROLES: TeamMemberRole[] = ["Dispatcher", "Scheduler", "Admin"];
 const COLORS = [
@ -44,100 +51,6 @@ const COLORS = [
  "#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: "",
@ -145,42 +58,15 @@ function emptyForm() {
    color: "",
    email: "",
    phone: "",
+    active: true,
    serviceAreas: [] as string[],
    permissions: defaultsForRole("Dispatcher"),
  };
 }

-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>;
-}
-
-type TeamMemberForm = ReturnType<typeof emptyForm>;
+export 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 +109,14 @@ function PermissionsSection({
  );
 }

-function TeamMemberFormFields({
+export function TeamMemberFormFields({
  form,
  setForm,
  errors,
  updateRole,
  toggleArea,
  togglePermission,
+  roleDisabled = false,
 }: {
  form: TeamMemberForm;
  setForm: Dispatch<SetStateAction<TeamMemberForm>>;
@ -237,6 +124,7 @@ function TeamMemberFormFields({
  updateRole: (role: TeamMemberRole) => void;
  toggleArea: (area: string) => void;
  togglePermission: (key: string) => void;
+  roleDisabled?: boolean;
 }) {
  return (
    <Stack spacing={2.5}>
@ -256,6 +144,7 @@ function TeamMemberFormFields({
          labelId="team-member-role-label"
          label="Role"
          value={form.role}
+          disabled={roleDisabled}
          onChange={(event) => updateRole(event.target.value as TeamMemberRole)}
        >
          {ROLES.map((role) => (
--- a/src/app/(protected)/team-members/_components/team-member-detail-drawer.tsx
+++ b/src/app/(protected)/team-members/_components/team-member-detail-drawer.tsx
@ -0,0 +1,467 @@
+import {
+  useEffect,
+  useMemo,
+  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 {
+  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 {
+  return {
+    name: member.name,
+    role: (member.role as TeamMemberRole) || "Dispatcher",
+    color: member.color,
+    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: "",
+    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={member.role} />
+        <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,
+}: {
+  form: TeamMemberForm;
+  setForm: Dispatch<SetStateAction<TeamMemberForm>>;
+  errors: ReturnType<typeof getFormErrors>;
+  updateRole: (role: TeamMemberRole) => void;
+  toggleArea: (area: string) => void;
+  togglePermission: (key: string) => void;
+  roleDisabled: boolean;
+}) {
+  return (
+    <TeamMemberFormFields
+      form={form}
+      setForm={setForm}
+      errors={errors}
+      updateRole={updateRole}
+      toggleArea={toggleArea}
+      togglePermission={togglePermission}
+      roleDisabled={roleDisabled}
+    />
+  );
+}
+
+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();
+
+  useEffect(() => {
+    if (currentMember) {
+      setForm(formFromMember(currentMember));
+      setEditing(false);
+      setSubmitted(false);
+    }
+  }, [currentMember]);
+
+  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 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) 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,
+    isPending: updateTeamMember.isPending,
+    updateRole,
+    toggleArea,
+    togglePermission,
+    save,
+    cancel: () => 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}
+        />
+      )}
+    </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>
+  );
+}
--- a/src/app/(protected)/team-members/_components/team-member-permissions.ts
+++ b/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."
+        : "",
+  };
+}
--- a/src/app/(protected)/team-members/index.tsx
+++ b/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 {
-  Alert,
-  Avatar,
-  Box,
-  Button,
-  Chip,
-  Drawer,
-  IconButton,
-  Stack,
-  Tab,
-  Tabs,
-  TextField,
-  Typography,
-} from "@mui/material";
-import CloseIcon from "@mui/icons-material/Close";
+import { Alert, Box, Button, Stack, Tab, Tabs, TextField, Typography } from "@mui/material";
 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");
@ -171,7 +107,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>
  );
--- a/src/domain/team-members/api/team-members-api.ts
+++ b/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));
+  },
 };
--- a/src/domain/team-members/mappers/team-member-mapper.ts
+++ b/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),
+  };
+}
--- a/src/domain/team-members/types/team-member.ts
+++ b/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[];
 }
--- a/src/domain/team-members/use-cases/use-team-member-detail.ts
+++ b/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");
+    },
+  });
+}
--- a/src/infra/query-key/query-key.ts
+++ b/src/infra/query-key/query-key.ts
@ -50,6 +50,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,
--- a/src/test/app/(protected)/team-members/team-member-detail-drawer.test.tsx
+++ b/src/test/app/(protected)/team-members/team-member-detail-drawer.test.tsx
@ -0,0 +1,121 @@
+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.",
+      ),
+    );
+  });
+});
--- a/src/test/domain/team-members/api/team-members-api.test.ts
+++ b/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);
+  });
 });
--- a/src/test/domain/team-members/team-member-mapper.test.ts
+++ b/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 },
+      ],
+    });
+  });
+});