feat(team-members): add searchable team member registry (SH-324)

src/api/api-paths.ts

@@ -77,6 +77,9 @@ export const API_PATHS = {
     deleteEmployees: "Employee/DeleteEmployees",
     dropdown: "Employee/Dropdown",
   },
+  teamMember: {
+    getList: "User",
+  },
   contact: {
     getList: "Contact/GetContactList",
     getContacts: "Contact/GetContacts",

src/app/(protected)/team-members/_components/team-members-table.tsx

@@ -0,0 +1,99 @@
+import {
+  Avatar,
+  Button,
+  CircularProgress,
+  Paper,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  Typography,
+} from "@mui/material";
+import type { TeamMemberListItem } from "@/domain/team-members/types/team-member";
+
+const HEADINGS = ["Team Member", "Role", "Service Area", "Phone", "Email", "Color", "Status"];
+
+function memberStatusLabel(status: TeamMemberListItem["status"]) {
+  return status === "Active" ? "Active" : "Inactive";
+}
+
+export function TeamMembersTable({
+  rows,
+  isLoading,
+  tab,
+  onOpen,
+}: {
+  rows: TeamMemberListItem[];
+  isLoading: boolean;
+  tab: "active" | "inactive";
+  onOpen: (member: TeamMemberListItem) => void;
+}) {
+  return (
+    <TableContainer component={Paper} variant="outlined">
+      <Table stickyHeader size="small" sx={{ minWidth: 900 }}>
+        <TableHead>
+          <TableRow>
+            {HEADINGS.map((heading) => (
+              <TableCell key={heading} className="font-semibold">
+                {heading}
+              </TableCell>
+            ))}
+            <TableCell align="right" className="font-semibold">
+              Actions
+            </TableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {isLoading ? (
+            <TableRow>
+              <TableCell colSpan={8} align="center" sx={{ py: 8 }}>
+                <CircularProgress size={28} />
+              </TableCell>
+            </TableRow>
+          ) : rows.length === 0 ? (
+            <TableRow>
+              <TableCell colSpan={8} align="center" sx={{ py: 8 }}>
+                <Typography sx={{ fontWeight: 600 }}>No {tab} team members found</Typography>
+                <Typography variant="body2" color="text.secondary">
+                  Try a different search, or add a new team member.
+                </Typography>
+              </TableCell>
+            </TableRow>
+          ) : (
+            rows.map((member) => (
+              <TableRow
+                key={String(member.id)}
+                hover
+                onClick={() => onOpen(member)}
+                sx={{ cursor: "pointer" }}
+              >
+                <TableCell>{member.name || "—"}</TableCell>
+                <TableCell>{member.role || "—"}</TableCell>
+                <TableCell>{member.serviceArea || "—"}</TableCell>
+                <TableCell>{member.phone || "—"}</TableCell>
+                <TableCell>{member.email || "—"}</TableCell>
+                <TableCell>
+                  <Avatar sx={{ width: 22, height: 22, bgcolor: member.color || "primary.main" }} />
+                </TableCell>
+                <TableCell>{memberStatusLabel(member.status)}</TableCell>
+                <TableCell align="right">
+                  <Button
+                    size="small"
+                    onClick={(event) => {
+                      event.stopPropagation();
+                      onOpen(member);
+                    }}
+                  >
+                    View
+                  </Button>
+                </TableCell>
+              </TableRow>
+            ))
+          )}
+        </TableBody>
+      </Table>
+    </TableContainer>
+  );
+}

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

@@ -0,0 +1,187 @@
+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,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  Drawer,
+  IconButton,
+  Stack,
+  Tab,
+  Tabs,
+  TextField,
+  Typography,
+} from "@mui/material";
+import CloseIcon from "@mui/icons-material/Close";
+import { TeamMembersTable } from "./_components/team-members-table";
+
+type StatusTab = "active" | "inactive";
+
+const STATUS_LABELS: Record<StatusTab, "Active" | "Inactive"> = {
+  active: "Active",
+  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");
+  const [selectedMember, setSelectedMember] = useState<TeamMemberListItem | null>(null);
+  const [addMemberOpen, setAddMemberOpen] = useState(false);
+  const debouncedSearch = useDebounce(search, 300).trim().toLowerCase();
+  const { data, isLoading, error } = useTeamMembersList();
+  const allMembers = data?.items ?? [];
+
+  const activeCount = allMembers.filter((member) => member.status === "Active").length;
+  const inactiveCount = allMembers.length - activeCount;
+  const rows = allMembers
+    .filter((member) => member.status === STATUS_LABELS[tab])
+    .filter((member) => !debouncedSearch || member.name.toLowerCase().includes(debouncedSearch));
+
+  return (
+    <Box
+      className="flex h-full flex-col overflow-hidden"
+      sx={{ backgroundColor: "var(--color-bg-page)" }}
+    >
+      <Stack
+        direction={{ xs: "column", sm: "row" }}
+        spacing={2}
+        sx={{
+          alignItems: { xs: "stretch", sm: "center" },
+          justifyContent: "space-between",
+          p: 2.5,
+          backgroundColor: "var(--color-bg-surface)",
+          borderBottom: "1px solid var(--color-border)",
+        }}
+      >
+        <Box>
+          <Typography variant="h4" component="h1">
+            Team Members
+          </Typography>
+          <Typography variant="body2" color="text.secondary" sx={{ mt: 0.75 }}>
+            {allMembers.length} team member{allMembers.length === 1 ? "" : "s"} · {activeCount}{" "}
+            active
+          </Typography>
+        </Box>
+        <Stack direction="row" spacing={1} sx={{ alignItems: "center" }}>
+          <TextField
+            size="small"
+            value={search}
+            onChange={(event) => setSearch(event.target.value)}
+            placeholder="Search team member…"
+            aria-label="Search team member"
+            sx={{ width: 224 }}
+          />
+          <Button variant="contained" size="small" onClick={() => setAddMemberOpen(true)}>
+            Add Member
+          </Button>
+        </Stack>
+      </Stack>
+
+      <Tabs
+        value={tab}
+        onChange={(_event, value: StatusTab) => setTab(value)}
+        aria-label="Team member status"
+      >
+        <Tab value="active" label={`Active ${activeCount}`} />
+        <Tab value="inactive" label={`Inactive ${inactiveCount}`} />
+      </Tabs>
+
+      {Boolean(error) && (
+        <Alert severity="error">
+          {error instanceof Error ? error.message : "Failed to load team members"}
+        </Alert>
+      )}
+
+      <Box sx={{ flex: 1, overflow: "auto", p: 2 }}>
+        <TeamMembersTable rows={rows} isLoading={isLoading} tab={tab} onOpen={setSelectedMember} />
+      </Box>
+
+      <Stack
+        direction="row"
+        sx={{
+          justifyContent: "space-between",
+          px: 2,
+          py: 1,
+          borderTop: "1px solid var(--color-border)",
+          backgroundColor: "var(--color-bg-surface)",
+        }}
+      >
+        <Typography variant="caption" color="text.secondary">
+          {rows.length} {tab} team member{rows.length === 1 ? "" : "s"}
+          {debouncedSearch ? " · filtered" : ""}
+        </Typography>
+        <Typography variant="caption" color="text.secondary">
+          {activeCount} active · {inactiveCount} inactive
+        </Typography>
+      </Stack>
+
+      <TeamMemberDrawer member={selectedMember} onClose={() => setSelectedMember(null)} />
+      <Dialog open={addMemberOpen} onClose={() => setAddMemberOpen(false)}>
+        <DialogTitle>Add Member</DialogTitle>
+        <DialogContent>Member details will be added here.</DialogContent>
+        <DialogActions>
+          <Button onClick={() => setAddMemberOpen(false)}>Close</Button>
+        </DialogActions>
+      </Dialog>
+    </Box>
+  );
+}

src/config/menu.ts

@@ -10,6 +10,7 @@ import {
   Bell,
   BarChart3,
   Star,
+  Users,
 } from "lucide-react";
 
 export type NavItemDef = {
@@ -58,6 +59,10 @@ export const navGroups: NavGroup[] = [
       { label: "Sites", icon: MapPin, path: "/locations" },
     ],
   },
+  {
+    title: "TEAM",
+    items: [{ label: "Team Members", icon: Users, path: "/team-members" }],
+  },
   // {
   //   title: "INTERNAL",
   //   items: [{ label: "Documents", icon: FileText, path: "/documents" }],

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

@@ -0,0 +1,13 @@
+import { apiGet } 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 type { TeamMemberListResult } from "@/domain/team-members/types/team-member";
+
+export const teamMembersApi = {
+  getList: async (): Promise<TeamMemberListResult> => {
+    const data = await apiGet<unknown>(API_PATHS.teamMember.getList);
+    const items = handleApiResponse<unknown[]>(data);
+    return { items: mapTeamMemberListItems(Array.isArray(items) ? items : []) };
+  },
+};

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

@@ -0,0 +1,45 @@
+import type { TeamMemberListItem } from "@/domain/team-members/types/team-member";
+
+function readString(record: Record<string, unknown>, ...keys: string[]): string {
+  for (const key of keys) {
+    const value = record[key];
+    if (typeof value === "string") return value;
+    if (typeof value === "number") return String(value);
+  }
+  return "";
+}
+
+function readBoolean(record: Record<string, unknown>, ...keys: string[]): boolean {
+  for (const key of keys) {
+    const value = record[key];
+    if (typeof value === "boolean") return value;
+    if (typeof value === "string") return value.toLowerCase() === "true";
+  }
+  return false;
+}
+
+export function mapTeamMemberListItem(raw: unknown): TeamMemberListItem {
+  const record = (typeof raw === "object" && raw !== null ? raw : {}) as Record<string, unknown>;
+  const id = record.id ?? record.Id;
+  const status =
+    readString(record, "status", "Status").toLowerCase() === "inactive" ||
+    readBoolean(record, "isDeleted", "IsDeleted")
+      ? "Inactive"
+      : "Active";
+
+  return {
+    id: typeof id === "string" || typeof id === "number" ? id : "",
+    name: readString(record, "name", "Name"),
+    role: readString(record, "role", "Role", "roleName", "RoleName"),
+    serviceArea: readString(record, "serviceArea", "ServiceArea", "locations", "Locations"),
+    phone: readString(record, "phone", "Phone"),
+    email: readString(record, "email", "Email"),
+    color: readString(record, "color", "Color"),
+    status,
+    isAccountOwner: readBoolean(record, "isAccountOwner", "IsAccountOwner"),
+  };
+}
+
+export function mapTeamMemberListItems(rawItems: unknown[]): TeamMemberListItem[] {
+  return rawItems.map(mapTeamMemberListItem);
+}

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

@@ -0,0 +1,15 @@
+export interface TeamMemberListItem {
+  id: string | number;
+  name: string;
+  role: string;
+  serviceArea: string;
+  phone: string;
+  email: string;
+  color: string;
+  status: "Active" | "Inactive";
+  isAccountOwner: boolean;
+}
+
+export interface TeamMemberListResult {
+  items: TeamMemberListItem[];
+}

src/domain/team-members/use-cases/use-team-members-list.ts

@@ -0,0 +1,11 @@
+import { useQuery, type UseQueryResult } from "@tanstack/react-query";
+import { teamMembersApi } from "@/domain/team-members/api/team-members-api";
+import type { TeamMemberListResult } from "@/domain/team-members/types/team-member";
+import { queryKeys } from "@/infra/query-key/query-key";
+
+export function useTeamMembersList(): UseQueryResult<TeamMemberListResult, Error> {
+  return useQuery({
+    queryKey: queryKeys.teamMembers.list(),
+    queryFn: teamMembersApi.getList,
+  });
+}

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

@@ -47,6 +47,10 @@ export const queryKeys = {
       [...queryKeys.employees.all, "list", params ?? {}] as const,
     detail: (id: string | number) => [...queryKeys.employees.all, "detail", id] as const,
   },
+  teamMembers: {
+    all: ["teamMembers"] as const,
+    list: () => [...queryKeys.teamMembers.all, "list"] as const,
+  },
   dashboard: {
     all: ["dashboard"] as const,
     stats: () => [...queryKeys.dashboard.all, "stats"] as const,

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

@@ -0,0 +1,28 @@
+import { describe, expect, it } from "vitest";
+import { mapTeamMemberListItem } from "@/domain/team-members/mappers/team-member-mapper";
+
+describe("mapTeamMemberListItem", () => {
+  it("maps the existing User list response and derives inactive state", () => {
+    expect(
+      mapTeamMemberListItem({
+        Id: "u1",
+        Name: "Alex Smith",
+        RoleName: "Dispatcher",
+        Locations: "Central",
+        Email: "alex@example.com",
+        Status: "Inactive",
+        IsAccountOwner: true,
+      }),
+    ).toEqual({
+      id: "u1",
+      name: "Alex Smith",
+      role: "Dispatcher",
+      serviceArea: "Central",
+      phone: "",
+      email: "alex@example.com",
+      color: "",
+      status: "Inactive",
+      isAccountOwner: true,
+    });
+  });
+});