Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 3694 | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

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