Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 1757 | Ir a la última revisión | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
3694 stevensc 1
import React from 'react';
2
import { Link } from 'react-router-dom';
1747 stevensc 3
import {
4
  IconButton,
3694 stevensc 5
  styled,
1747 stevensc 6
  Table,
7
  TableBody,
8
  TableCell,
9
  TableHead,
10
  TableRow,
11
  Typography,
3694 stevensc 12
  TableContainer,
13
  Paper
14
} from '@mui/material';
15
import Visibility from '@mui/icons-material/Visibility';
1747 stevensc 16
 
3694 stevensc 17
import { tableCellClasses } from '@mui/material';
18
 
1747 stevensc 19
const StyledTableCell = styled(TableCell)(() => ({
20
  borderColor: 'var(--font-color)',
21
  [`&.${tableCellClasses.head}`]: {
22
    fontWeight: '600'
23
  },
24
  [`&.${tableCellClasses.body}`]: {
25
    position: 'relative',
26
    borderRight: '1px solid',
1756 stevensc 27
    fontWeight: '500'
1747 stevensc 28
  }
3694 stevensc 29
}));
1747 stevensc 30
 
31
export default function ReportTable({ reports = [] }) {
32
  if (!reports || reports.length === 0) {
3694 stevensc 33
    return <Typography variant='h2'>No hay reportes disponibles</Typography>;
1747 stevensc 34
  }
35
 
36
  return (
3694 stevensc 37
    <TableContainer component={Paper} sx={{ border: '1px solid var(--font-color)' }}>
1747 stevensc 38
      <Table sx={{ minWidth: 650 }} aria-label='simple table'>
39
        <TableHead>
40
          <TableRow>
41
            <StyledTableCell>Email</StyledTableCell>
42
            <StyledTableCell align='right'>Nombre completo</StyledTableCell>
43
            <StyledTableCell align='right'>Estatus</StyledTableCell>
44
            <StyledTableCell align='right'>Motivo</StyledTableCell>
45
            <StyledTableCell align='right'>Tipo</StyledTableCell>
46
            <StyledTableCell align='right'>Fecha</StyledTableCell>
1749 stevensc 47
            <StyledTableCell align='center'>Acciones</StyledTableCell>
1747 stevensc 48
          </TableRow>
49
        </TableHead>
50
        <TableBody>
51
          {reports.map(
3694 stevensc 52
            ({ first_name, last_name, email, status, reason, type, date, actions }, key) => (
1756 stevensc 53
              <TableRow
54
                key={key}
55
                sx={{
1757 stevensc 56
                  '& td:last-child': { borderRight: 0 },
1756 stevensc 57
                  '&:last-child td, &:last-child th': { borderBottom: 0 }
58
                }}
59
              >
1747 stevensc 60
                <StyledTableCell component='th' scope='row'>
61
                  {email}
62
                </StyledTableCell>
63
                <StyledTableCell align='right'>{`${first_name} ${last_name}`}</StyledTableCell>
64
                <StyledTableCell align='right'>{status}</StyledTableCell>
65
                <StyledTableCell align='right'>{reason}</StyledTableCell>
66
                <StyledTableCell align='right'>{type}</StyledTableCell>
67
                <StyledTableCell align='right'>{date}</StyledTableCell>
1749 stevensc 68
                <StyledTableCell align='center'>
1747 stevensc 69
                  <IconButton component={Link} to={actions?.link_view}>
70
                    <Visibility />
71
                  </IconButton>
72
                </StyledTableCell>
73
              </TableRow>
74
            )
75
          )}
76
        </TableBody>
77
      </Table>
78
    </TableContainer>
3694 stevensc 79
  );
1747 stevensc 80
}