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

import DeleteOutlineIcon from "@mui/icons-material/DeleteOutlined";
import EditOutlinedIcon from "@mui/icons-material/EditOutlined";
import {
  Button,
  CircularProgress,
  IconButton,
  Paper,
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TableRow,
  Tooltip,
  Typography,
} from "@mui/material";
import type { LocationListItem } from "@/domain/locations/types/location";
import { LocationsContactsCell } from "./locations-contacts-cell";
import { StateAreaCell } from "./state-area-cell";

interface LocationsTableProps {
  isLoading: boolean;
  onDelete: (row: LocationListItem) => void;
  onEdit: (row: LocationListItem) => void;
  rows: LocationListItem[];
}

export function LocationsTable({ isLoading, onDelete, onEdit, rows }: LocationsTableProps) {
  return (
    <TableContainer component={Paper} variant="outlined">
      <Table size="small">
        <TableHead>
          <TableRow>
            <TableCell className="font-semibold">Location Name</TableCell>
            <TableCell className="font-semibold">Address</TableCell>
            <TableCell className="font-semibold">City</TableCell>
            <TableCell className="font-semibold">State</TableCell>
            <TableCell className="font-semibold">Phone</TableCell>
            <TableCell className="font-semibold">Contact</TableCell>
            <TableCell className="font-semibold">Status</TableCell>
            <TableCell align="right" className="font-semibold">
              Actions
            </TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {isLoading ? (
            <TableRow>
              <TableCell colSpan={8} align="center" className="py-10">
                <CircularProgress size={28} />
              </TableCell>
            </TableRow>
          ) : rows.length === 0 ? (
            <TableRow>
              <TableCell colSpan={8} align="center" className="py-10">
                <Typography sx={{ color: "text.secondary" }}>No locations found</Typography>
              </TableCell>
            </TableRow>
          ) : (
            rows.map((row) => (
              <TableRow key={String(row.id)} hover>
                <TableCell>
                  <Button
                    variant="text"
                    size="small"
                    className="font-semibold"
                    onClick={() => onEdit(row)}
                  >
                    {row.name || "—"}
                  </Button>
                </TableCell>
                <TableCell>{row.address || "—"}</TableCell>
                <TableCell>{row.city || "—"}</TableCell>
                <TableCell>
                  <StateAreaCell state={row.state} />
                </TableCell>
                <TableCell>{row.phone || "—"}</TableCell>
                <TableCell>
                  <LocationsContactsCell row={row} />
                </TableCell>
                <TableCell>{row.status || "—"}</TableCell>
                <TableCell align="right">
                  <Tooltip title="Edit">
                    <IconButton size="small" aria-label="Edit location" onClick={() => onEdit(row)}>
                      <EditOutlinedIcon fontSize="small" />
                    </IconButton>
                  </Tooltip>
                  <Tooltip title="Delete">
                    <IconButton
                      size="small"
                      aria-label="Delete location"
                      onClick={() => onDelete(row)}
                    >
                      <DeleteOutlineIcon fontSize="small" />
                    </IconButton>
                  </Tooltip>
                </TableCell>
              </TableRow>
            ))
          )}
        </TableBody>
      </Table>
    </TableContainer>
  );
}