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

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(member: TeamMemberListItem) {
  return member.pendingRegistration ? "Pending registration" : member.status;
}

export function TeamMembersTable({
  rows,
  isLoading,
  hasError,
  tab,
  onOpen,
}: {
  rows: TeamMemberListItem[];
  isLoading: boolean;
  hasError: 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>
          ) : hasError ? (
            <TableRow>
              <TableCell colSpan={8} align="center" sx={{ py: 8 }}>
                <Typography sx={{ fontWeight: 600 }}>Unable to load team members</Typography>
                <Typography variant="body2" color="text.secondary">
                  Check your connection and try again.
                </Typography>
              </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)}</TableCell>
                <TableCell align="right">
                  <Button
                    size="small"
                    onClick={(event) => {
                      event.stopPropagation();
                      onOpen(member);
                    }}
                  >
                    View
                  </Button>
                </TableCell>
              </TableRow>
            ))
          )}
        </TableBody>
      </Table>
    </TableContainer>
  );
}