Proyectos de Subversion LeadersLinked - SPA

import React from 'react'
import { Link } from 'react-router-dom'
import {
  IconButton,
  Paper,
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TableRow,
  Typography,
  styled,
  tableCellClasses
} from '@mui/material'
import { Visibility } from '@mui/icons-material'

const StyledTableCell = styled(TableCell)(() => ({
  borderColor: 'var(--font-color)',
  [`&.${tableCellClasses.head}`]: {
    fontWeight: '600'
  },
  [`&.${tableCellClasses.body}`]: {
    position: 'relative',
    borderRight: '1px solid',
    fontWeight: '500'
  }
}))

export default function ReportTable({ reports = [] }) {
  if (!reports || reports.length === 0) {
    return <Typography variant='h2'>No hay reportes disponibles</Typography>
  }

  return (
    <TableContainer
      component={Paper}
      sx={{ border: '1px solid var(--font-color)' }}
    >
      <Table sx={{ minWidth: 650 }} aria-label='simple table'>
        <TableHead>
          <TableRow>
            <StyledTableCell>Email</StyledTableCell>
            <StyledTableCell align='right'>Nombre completo</StyledTableCell>
            <StyledTableCell align='right'>Estatus</StyledTableCell>
            <StyledTableCell align='right'>Motivo</StyledTableCell>
            <StyledTableCell align='right'>Tipo</StyledTableCell>
            <StyledTableCell align='right'>Fecha</StyledTableCell>
            <StyledTableCell align='center'>Acciones</StyledTableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {reports.map(
            (
              {
                first_name,
                last_name,
                email,
                status,
                reason,
                type,
                date,
                actions
              },
              key
            ) => (
              <TableRow
                key={key}
                sx={{
                  '& td:last-child': { borderRight: 0 },
                  '&:last-child td, &:last-child th': { borderBottom: 0 }
                }}
              >
                <StyledTableCell component='th' scope='row'>
                  {email}
                </StyledTableCell>
                <StyledTableCell align='right'>{`${first_name} ${last_name}`}</StyledTableCell>
                <StyledTableCell align='right'>{status}</StyledTableCell>
                <StyledTableCell align='right'>{reason}</StyledTableCell>
                <StyledTableCell align='right'>{type}</StyledTableCell>
                <StyledTableCell align='right'>{date}</StyledTableCell>
                <StyledTableCell align='center'>
                  <IconButton component={Link} to={actions?.link_view}>
                    <Visibility />
                  </IconButton>
                </StyledTableCell>
              </TableRow>
            )
          )}
        </TableBody>
      </Table>
    </TableContainer>
  )
}