Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 3156 | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
3719 stevensc 1 
import React, { useState } from 'react';
2 
import {
3 
  Avatar,
4 
  Button,
5 
  Card,
6 
  CardActions,
7 
  CardContent,
8 
  CardHeader,
9 
  Collapse,
10 
  Typography
11 
} from '@mui/material';
12 
 
13 
export default function ReportCard({ report }) {
14 
  const {
15 
    first_name = '',
16 
    last_name = '',
17 
    email = '',
18 
    image = '',
19 
    status = '',
20 
    reason = '',
21 
    type = '',
22 
    commet = '',
23 
    review = null,
24 
    date = ''
25 
  } = report;
26 
  const [expanded, setExpanded] = useState(false);
27 
 
28 
  const handleExpandClick = () => {
29 
    setExpanded(!expanded);
30 
  };
31 
 
32 
  return (
33 
    <Card sx={{ maxWidth: 345, margin: '0 auto' }}>
34 
      <CardHeader
35 
        avatar={<Avatar src={image} alt={name} />}
36 
        title={`${first_name} ${last_name}`}
37 
        subheader={date}
38 
        sx={{ p: 1 }}
39 
      />
40 
 
41 
      <CardContent sx={{ p: 1, '& p': { marginBottom: 1 } }}>
42 
        <Typography paragraph>
43 
          <Typography variant='overline'>Tipo: </Typography>
44 
          {type}
45 
        </Typography>
46 
        <Typography paragraph>
47 
          <Typography variant='overline'>Motivo: </Typography>
48 
          {reason}
49 
        </Typography>
50 
        <Typography paragraph>
51 
          <Typography variant='overline'>Estatus: </Typography>
52 
          {status}
53 
        </Typography>
54 
        <Typography paragraph>
55 
          <Typography variant='overline'>Email: </Typography>
56 
          {email}
57 
        </Typography>
58 
      </CardContent>
59 
 
60 
      <CardActions sx={{ p: 1 }}>
61 
        <Button color='info' size='small' onClick={handleExpandClick}>
62 
          Detalles
63 
        </Button>
64 
      </CardActions>
65 
 
66 
      <Collapse in={expanded} timeout='auto' unmountOnExit>
67 
        <CardContent sx={{ p: 1, '& p': { marginBottom: 1 } }}>
68 
          <Typography variant='overline'>Comentario:</Typography>
69 
          <Typography paragraph>{commet}</Typography>
70 
          {review && (
71 
            <>
72 
              <Typography variant='overline'>Revisión:</Typography>
73 
              <Typography paragraph>{review}</Typography>
74 
            </>
75 
          )}
76 
        </CardContent>
77 
      </Collapse>
78 
    </Card>
79 
  );
80 
}