Adriano Robson
GitHub
commit
0ecb553703
|
|
@ -13,12 +13,17 @@ import Avatar from "@mui/material/Avatar";
|
||||||
import Tooltip from "@mui/material/Tooltip";
|
import Tooltip from "@mui/material/Tooltip";
|
||||||
import Zoom from "@mui/material/Zoom";
|
import Zoom from "@mui/material/Zoom";
|
||||||
import IconButton from "@mui/material/IconButton";
|
import IconButton from "@mui/material/IconButton";
|
||||||
import Info from "@material-ui/icons/Info";
|
|
||||||
import Box from "@mui/material/Box";
|
import Box from "@mui/material/Box";
|
||||||
import InputLabel from "@mui/material/InputLabel";
|
import InputLabel from "@mui/material/InputLabel";
|
||||||
import MenuItem from "@mui/material/MenuItem";
|
import MenuItem from "@mui/material/MenuItem";
|
||||||
import FormControl from "@mui/material/FormControl";
|
import FormControl from "@mui/material/FormControl";
|
||||||
import Select from "@mui/material/Select";
|
import Select from "@mui/material/Select";
|
||||||
|
import TextField from "@mui/material/TextField";
|
||||||
|
import Info from "@material-ui/icons/Info";
|
||||||
|
import CancelIcon from "@material-ui/icons/Cancel";
|
||||||
|
import CheckCircleIcon from "@material-ui/icons/CheckCircle";
|
||||||
|
import ErrorIcon from "@material-ui/icons/Error";
|
||||||
|
import RemoveCircleIcon from "@material-ui/icons/RemoveCircle";
|
||||||
|
|
||||||
import useTickets from "../../hooks/useTickets";
|
import useTickets from "../../hooks/useTickets";
|
||||||
|
|
||||||
|
|
@ -35,6 +40,7 @@ import api from "../../services/api";
|
||||||
import { Can } from "../../components/Can";
|
import { Can } from "../../components/Can";
|
||||||
|
|
||||||
import { Button } from "@material-ui/core";
|
import { Button } from "@material-ui/core";
|
||||||
|
import { id } from "date-fns/locale";
|
||||||
|
|
||||||
const useStyles = makeStyles((theme) => ({
|
const useStyles = makeStyles((theme) => ({
|
||||||
container: {
|
container: {
|
||||||
|
|
@ -62,6 +68,14 @@ const useStyles = makeStyles((theme) => ({
|
||||||
flexDirection: "column",
|
flexDirection: "column",
|
||||||
height: "100%",
|
height: "100%",
|
||||||
},
|
},
|
||||||
|
containerPaperFix: {
|
||||||
|
width: "100%",
|
||||||
|
textTransform: "capitalize",
|
||||||
|
padding: theme.spacing(2),
|
||||||
|
paddingBottom: theme.spacing(4),
|
||||||
|
height: "auto",
|
||||||
|
overflowY: "hidden",
|
||||||
|
},
|
||||||
cardPaperFix: {
|
cardPaperFix: {
|
||||||
textTransform: "capitalize",
|
textTransform: "capitalize",
|
||||||
padding: theme.spacing(2),
|
padding: theme.spacing(2),
|
||||||
|
|
@ -179,6 +193,7 @@ const reducer = (state, action) => {
|
||||||
const Dashboard = () => {
|
const Dashboard = () => {
|
||||||
const classes = useStyles();
|
const classes = useStyles();
|
||||||
const [usersOnlineInfo, dispatch] = useReducer(reducer, []);
|
const [usersOnlineInfo, dispatch] = useReducer(reducer, []);
|
||||||
|
const [search, setSearch] = useState("");
|
||||||
const [filterStatus, setFilterStatus] = useState(null);
|
const [filterStatus, setFilterStatus] = useState(null);
|
||||||
const { user } = useContext(AuthContext);
|
const { user } = useContext(AuthContext);
|
||||||
var userQueueIds = [];
|
var userQueueIds = [];
|
||||||
|
|
@ -265,191 +280,328 @@ const Dashboard = () => {
|
||||||
const handleFilterChange = (event) => {
|
const handleFilterChange = (event) => {
|
||||||
setFilterStatus(event.target.value);
|
setFilterStatus(event.target.value);
|
||||||
};
|
};
|
||||||
|
const handlesearch = (event) => {
|
||||||
|
setSearch(event.target.value.toLowerCase());
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Can
|
<Can
|
||||||
role={user.profile}
|
role={user.profile}
|
||||||
perform="dashboard-view:show"
|
perform="dashboard-view:show"
|
||||||
yes={() => (
|
yes={() => (
|
||||||
<div>
|
<Container maxWidth="lg" className={classes.container}>
|
||||||
<Container maxWidth="lg" className={classes.container}>
|
<Grid container spacing={3}>
|
||||||
<Grid container spacing={3}>
|
<Paper className={classes.containerPaperFix} sx={12}>
|
||||||
<Grid item xs={12} sm={6} md={6} lg={4}>
|
<Grid item sx={4}>
|
||||||
<Paper className={classes.customFixedHeightPaper} style={{ overflow: "hidden" }}>
|
<Typography
|
||||||
<Typography component="h3" variant="h6" color="primary" paragraph>
|
component="h1"
|
||||||
{i18n.t("dashboard.messages.inAttendance.title")}
|
variant="h4"
|
||||||
</Typography>
|
color="primary"
|
||||||
<Grid item>
|
style={{ marginBottom: "16px" }}
|
||||||
<Typography component="h1" variant="h4">
|
>
|
||||||
{GetTickets("open", "true", "false", "true")}
|
tickets
|
||||||
</Typography>
|
<Tooltip
|
||||||
</Grid>
|
title={`Os dados informados abaixo é baseado na data: ${new Date().toLocaleDateString()}`}
|
||||||
</Paper>
|
|
||||||
</Grid>
|
|
||||||
<Grid item xs={12} sm={6} md={6} lg={4}>
|
|
||||||
<Paper className={classes.customFixedHeightPaper} style={{ overflow: "hidden" }}>
|
|
||||||
<Typography component="h3" variant="h6" color="primary" paragraph>
|
|
||||||
{i18n.t("dashboard.messages.waiting.title")}
|
|
||||||
</Typography>
|
|
||||||
<Grid item>
|
|
||||||
<Typography component="h1" variant="h4">
|
|
||||||
{GetTickets("pending", "true", "false", "true")}
|
|
||||||
</Typography>
|
|
||||||
</Grid>
|
|
||||||
</Paper>
|
|
||||||
</Grid>
|
|
||||||
<Grid item xs={12} sm={6} md={6} lg={4}>
|
|
||||||
<Paper className={classes.customFixedHeightPaper} style={{ overflow: "hidden" }}>
|
|
||||||
<Typography component="h3" variant="h6" color="primary" paragraph>
|
|
||||||
{i18n.t("dashboard.messages.closed.title")}
|
|
||||||
</Typography>
|
|
||||||
<Grid item>
|
|
||||||
<Typography component="h1" variant="h4">
|
|
||||||
{GetTickets("closed", "true", "false", "true")}
|
|
||||||
</Typography>
|
|
||||||
</Grid>
|
|
||||||
</Paper>
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
</Container>
|
|
||||||
<Container maxWidth="lg" className={classes.container}>
|
|
||||||
<Paper className={classes.cardPaperFix}>
|
|
||||||
<Grid container justifyContent="space-between">
|
|
||||||
<Grid item>
|
|
||||||
<Typography
|
|
||||||
component="h3"
|
|
||||||
variant="h6"
|
|
||||||
color="primary"
|
color="primary"
|
||||||
style={{ marginBottom: "16px" }}
|
TransitionComponent={Zoom}
|
||||||
>
|
>
|
||||||
Usuários
|
<IconButton>
|
||||||
<Tooltip
|
<Info />
|
||||||
title={`Os dados informados abaixo é baseado na data: ${new Date().toLocaleDateString()}`}
|
</IconButton>
|
||||||
color="primary"
|
</Tooltip>
|
||||||
TransitionComponent={Zoom}
|
</Typography>
|
||||||
>
|
|
||||||
<IconButton>
|
|
||||||
<Info />
|
|
||||||
</IconButton>
|
|
||||||
</Tooltip>
|
|
||||||
</Typography>
|
|
||||||
</Grid>
|
|
||||||
<Grid item>
|
|
||||||
<Box sx={{ minWidth: 120, marginBottom: 2 }}>
|
|
||||||
<FormControl fullWidth>
|
|
||||||
<InputLabel id="demo-simple-select-label">Status</InputLabel>
|
|
||||||
<Select
|
|
||||||
labelId="demo-simple-select-label"
|
|
||||||
id="demo-simple-select"
|
|
||||||
value={filterStatus}
|
|
||||||
label="Status"
|
|
||||||
onChange={handleFilterChange}
|
|
||||||
>
|
|
||||||
<MenuItem value={null}>-Online/Offline-</MenuItem>
|
|
||||||
<MenuItem value={"online"}>Online</MenuItem>
|
|
||||||
<MenuItem value={"offline"}>Offline</MenuItem>
|
|
||||||
<MenuItem value={"not"}>Não entrou</MenuItem>
|
|
||||||
</Select>
|
|
||||||
</FormControl>
|
|
||||||
</Box>
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
</Grid>
|
||||||
|
|
||||||
<Grid container spacing={3}>
|
<Grid container spacing={3}>
|
||||||
{usersOnlineInfo &&
|
<Grid item xs={12} sm={6} md={6} lg={4}>
|
||||||
usersOnlineInfo
|
<Paper
|
||||||
.filter((e) => {
|
className={classes.customFixedHeightPaper}
|
||||||
if (filterStatus === null) return e;
|
style={{ overflow: "hidden" }}
|
||||||
if (filterStatus === "not") return !e.statusOnline;
|
variant="outlined"
|
||||||
return e.statusOnline && e.statusOnline.status === filterStatus;
|
>
|
||||||
})
|
<Typography component="h3" variant="h6" color="primary" paragraph>
|
||||||
.map((user, index) => (
|
{i18n.t("dashboard.messages.inAttendance.title")}
|
||||||
<Grid
|
</Typography>
|
||||||
item
|
<Grid item>
|
||||||
xs={12}
|
<Typography component="h1" variant="h4">
|
||||||
sm={6}
|
{GetTickets("open", "true", "false", "true")}
|
||||||
md={6}
|
</Typography>
|
||||||
lg={3}
|
</Grid>
|
||||||
key={index}
|
</Paper>
|
||||||
style={{ position: "relative" }}
|
</Grid>
|
||||||
>
|
<Grid item xs={12} sm={6} md={6} lg={4}>
|
||||||
<Card variant="outlined">
|
<Paper
|
||||||
<CardHeader
|
className={classes.customFixedHeightPaper}
|
||||||
avatar={
|
style={{ overflow: "hidden" }}
|
||||||
<Avatar
|
variant="outlined"
|
||||||
sx={
|
>
|
||||||
user.statusOnline && user.statusOnline.status === "online"
|
<Typography component="h3" variant="h6" color="primary" paragraph>
|
||||||
? { backgroundColor: "green" }
|
{i18n.t("dashboard.messages.waiting.title")}
|
||||||
: { backgroundColor: "red" }
|
</Typography>
|
||||||
}
|
<Grid item>
|
||||||
aria-label="recipe"
|
<Typography component="h1" variant="h4">
|
||||||
>
|
{GetTickets("pending", "true", "false", "true")}
|
||||||
{user.name[0].toUpperCase()}
|
</Typography>
|
||||||
</Avatar>
|
</Grid>
|
||||||
}
|
</Paper>
|
||||||
title={
|
</Grid>
|
||||||
<Typography variant="h5" component="div">
|
<Grid item xs={12} sm={6} md={6} lg={4}>
|
||||||
{user.name}
|
<Paper
|
||||||
</Typography>
|
className={classes.customFixedHeightPaper}
|
||||||
}
|
style={{ overflow: "hidden" }}
|
||||||
/>
|
variant="outlined"
|
||||||
|
>
|
||||||
<CardContent>
|
<Typography component="h3" variant="h6" color="primary" paragraph>
|
||||||
<Typography variant="h6" component="h1" color="textPrimary">
|
{i18n.t("dashboard.messages.closed.title")}
|
||||||
Em atendimento:
|
</Typography>
|
||||||
<Typography component="p" color="textPrimary" paragraph>
|
<Grid item>
|
||||||
{user.sumOpen && user.sumOpen.count ? user.sumOpen.count : 0}
|
<Typography component="h1" variant="h4">
|
||||||
</Typography>
|
{GetTickets("closed", "true", "false", "true")}
|
||||||
</Typography>
|
</Typography>
|
||||||
|
</Grid>
|
||||||
<Typography variant="h6" component="h1" color="textPrimary">
|
</Paper>
|
||||||
Finalizado:
|
</Grid>
|
||||||
<Typography component="p" color="textPrimary" paragraph>
|
<Grid item xs={12}>
|
||||||
{user.sumClosed && user.sumClosed.count ? user.sumClosed.count : 0}
|
<Paper className={classes.fixedHeightPaper} variant="outlined">
|
||||||
</Typography>
|
<Chart />
|
||||||
</Typography>
|
</Paper>
|
||||||
|
</Grid>
|
||||||
<Typography variant="h6" component="h1" color="textPrimary">
|
|
||||||
Tempo online:
|
|
||||||
<Typography component="p" color="textPrimary" paragraph>
|
|
||||||
{user.sumOnlineTime && user.sumOnlineTime.sum
|
|
||||||
? user.sumOnlineTime.sum
|
|
||||||
: "Não entrou Hoje"}
|
|
||||||
</Typography>
|
|
||||||
</Typography>
|
|
||||||
</CardContent>
|
|
||||||
<CardActions>
|
|
||||||
{user.statusOnline &&
|
|
||||||
user.statusOnline.status === "online" &&
|
|
||||||
user.statusOnline && (
|
|
||||||
<Button
|
|
||||||
className={classes.logginBtn}
|
|
||||||
variant="contained"
|
|
||||||
color="primary"
|
|
||||||
onClick={(e) => {
|
|
||||||
handleLogouOnlineUser(user.id);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{"Deslogar"}
|
|
||||||
</Button>
|
|
||||||
)}
|
|
||||||
</CardActions>
|
|
||||||
</Card>
|
|
||||||
</Grid>
|
|
||||||
))}
|
|
||||||
</Grid>
|
</Grid>
|
||||||
</Paper>
|
</Paper>
|
||||||
</Container>
|
<Paper className={classes.containerPaperFix} style={{ marginTop: "21px" }} sx={12}>
|
||||||
<Container maxWidth="lg" className={classes.container}>
|
<Grid item sx={4}>
|
||||||
<Grid container className={classes.cardStyleFix}>
|
<Typography
|
||||||
<Grid item xs={12}>
|
component="h1"
|
||||||
<Paper className={classes.fixedHeightPaper}>
|
variant="h4"
|
||||||
<Chart />
|
color="primary"
|
||||||
</Paper>
|
style={{ marginBottom: "16px" }}
|
||||||
|
>
|
||||||
|
Usuários
|
||||||
|
<Tooltip
|
||||||
|
title={`Os dados informados abaixo é baseado na data: ${new Date().toLocaleDateString()}`}
|
||||||
|
color="primary"
|
||||||
|
TransitionComponent={Zoom}
|
||||||
|
>
|
||||||
|
<IconButton>
|
||||||
|
<Info />
|
||||||
|
</IconButton>
|
||||||
|
</Tooltip>
|
||||||
|
</Typography>
|
||||||
</Grid>
|
</Grid>
|
||||||
</Grid>
|
<Grid container spacing={3}>
|
||||||
</Container>
|
<Grid item xs={12} sm={6} md={6} lg={4}>
|
||||||
</div>
|
<Paper
|
||||||
|
className={classes.customFixedHeightPaper}
|
||||||
|
style={{ overflow: "hidden" }}
|
||||||
|
variant="outlined"
|
||||||
|
>
|
||||||
|
<Typography component="h3" variant="h6" color="primary" paragraph>
|
||||||
|
Total de Agentes
|
||||||
|
</Typography>
|
||||||
|
<Grid item>
|
||||||
|
<Typography component="h1" variant="h4">
|
||||||
|
{usersOnlineInfo.length}
|
||||||
|
</Typography>
|
||||||
|
</Grid>
|
||||||
|
</Paper>
|
||||||
|
</Grid>
|
||||||
|
<Grid item xs={12} sm={6} md={6} lg={4}>
|
||||||
|
<Paper
|
||||||
|
className={classes.customFixedHeightPaper}
|
||||||
|
style={{ overflow: "hidden" }}
|
||||||
|
variant="outlined"
|
||||||
|
>
|
||||||
|
<Typography component="h3" variant="h6" color="primary" paragraph>
|
||||||
|
Online
|
||||||
|
</Typography>
|
||||||
|
<Grid item>
|
||||||
|
<Typography component="h1" variant="h4">
|
||||||
|
{
|
||||||
|
usersOnlineInfo.filter(
|
||||||
|
(status) =>
|
||||||
|
status.statusOnline && status.statusOnline.status === "online"
|
||||||
|
).length
|
||||||
|
}
|
||||||
|
</Typography>
|
||||||
|
</Grid>
|
||||||
|
</Paper>
|
||||||
|
</Grid>
|
||||||
|
<Grid item xs={12} sm={6} md={6} lg={4}>
|
||||||
|
<Paper
|
||||||
|
className={classes.customFixedHeightPaper}
|
||||||
|
style={{ overflow: "hidden" }}
|
||||||
|
variant="outlined"
|
||||||
|
>
|
||||||
|
<Typography component="h3" variant="h6" color="primary" paragraph>
|
||||||
|
Offline
|
||||||
|
</Typography>
|
||||||
|
<Grid item>
|
||||||
|
<Typography component="h1" variant="h4">
|
||||||
|
{
|
||||||
|
usersOnlineInfo.filter(
|
||||||
|
(status) =>
|
||||||
|
!status.statusOnline || status.statusOnline.status === "offline"
|
||||||
|
).length
|
||||||
|
}
|
||||||
|
</Typography>
|
||||||
|
</Grid>
|
||||||
|
</Paper>
|
||||||
|
</Grid>
|
||||||
|
<Grid item xs={12}>
|
||||||
|
<Paper className={classes.cardPaperFix} sx={12} variant="outlined">
|
||||||
|
<Grid container sx={12} justifyContent="space-between">
|
||||||
|
<Grid item sx={4}>
|
||||||
|
<Typography
|
||||||
|
component="h4"
|
||||||
|
variant="h6"
|
||||||
|
color="primary"
|
||||||
|
style={{ marginBottom: "16px" }}
|
||||||
|
>
|
||||||
|
Lista de Usuários
|
||||||
|
</Typography>
|
||||||
|
</Grid>
|
||||||
|
<Grid item sx={8} width="100%">
|
||||||
|
<Box sx={{ marginBottom: 2, display: "flex", gap: "12px" }}>
|
||||||
|
<TextField
|
||||||
|
id="outlined-basic"
|
||||||
|
label="Usuário"
|
||||||
|
variant="standard"
|
||||||
|
value={search}
|
||||||
|
onChange={handlesearch}
|
||||||
|
/>
|
||||||
|
<FormControl fullWidth variant="standard">
|
||||||
|
<InputLabel id="status">Status</InputLabel>
|
||||||
|
<Select
|
||||||
|
labelId="status"
|
||||||
|
id="status"
|
||||||
|
value={filterStatus}
|
||||||
|
label="Status"
|
||||||
|
onChange={handleFilterChange}
|
||||||
|
>
|
||||||
|
<MenuItem value={null}>Todos</MenuItem>
|
||||||
|
<MenuItem value={"online"}>Online</MenuItem>
|
||||||
|
<MenuItem value={"offline"}>Offline</MenuItem>
|
||||||
|
<MenuItem value={"not"}>Não entrou</MenuItem>
|
||||||
|
</Select>
|
||||||
|
</FormControl>
|
||||||
|
</Box>
|
||||||
|
</Grid>
|
||||||
|
</Grid>
|
||||||
|
|
||||||
|
<Grid container spacing={3}>
|
||||||
|
{usersOnlineInfo &&
|
||||||
|
usersOnlineInfo
|
||||||
|
.filter((e) => {
|
||||||
|
if (filterStatus === null) return e;
|
||||||
|
if (filterStatus === "not") return !e.statusOnline;
|
||||||
|
return e.statusOnline && e.statusOnline.status === filterStatus;
|
||||||
|
})
|
||||||
|
.filter((e) => {
|
||||||
|
return e.name.toLowerCase().includes(search);
|
||||||
|
}).sort((a) => {
|
||||||
|
if (a.statusOnline) {
|
||||||
|
if (a.statusOnline.status === "online") {
|
||||||
|
return -1;
|
||||||
|
}
|
||||||
|
return 0;
|
||||||
|
}
|
||||||
|
return 0;
|
||||||
|
})
|
||||||
|
.map((user, index) => (
|
||||||
|
<Grid
|
||||||
|
item
|
||||||
|
xs={12}
|
||||||
|
sm={6}
|
||||||
|
md={6}
|
||||||
|
lg={3}
|
||||||
|
key={index}
|
||||||
|
style={{ position: "relative" }}
|
||||||
|
>
|
||||||
|
<Card variant="outlined">
|
||||||
|
<CardHeader
|
||||||
|
avatar={
|
||||||
|
<Avatar
|
||||||
|
style={{
|
||||||
|
backgroundColor: user.statusOnline
|
||||||
|
? user.statusOnline.status === "online"
|
||||||
|
? "green"
|
||||||
|
: user.statusOnline.status === "offline"
|
||||||
|
? "red"
|
||||||
|
: "black"
|
||||||
|
: "grey",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{user.statusOnline ? (
|
||||||
|
user.statusOnline.status === "online" ? (
|
||||||
|
<CheckCircleIcon style={{ color: "white" }} />
|
||||||
|
) : user.statusOnline.status === "offline" ? (
|
||||||
|
<CancelIcon style={{ color: "white" }} />
|
||||||
|
) : (
|
||||||
|
<ErrorIcon style={{ color: "yellow" }} />
|
||||||
|
)
|
||||||
|
) : (
|
||||||
|
<RemoveCircleIcon style={{ color: "black" }} />
|
||||||
|
)}
|
||||||
|
</Avatar>
|
||||||
|
}
|
||||||
|
title={
|
||||||
|
<Typography variant="h5" component="div">
|
||||||
|
{user.name}
|
||||||
|
</Typography>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<CardContent>
|
||||||
|
<Typography variant="h6" component="h1" color="textPrimary">
|
||||||
|
Em atendimento:
|
||||||
|
<Typography component="p" color="textPrimary" paragraph>
|
||||||
|
{user.sumOpen && user.sumOpen.count ? user.sumOpen.count : 0}
|
||||||
|
</Typography>
|
||||||
|
</Typography>
|
||||||
|
|
||||||
|
<Typography variant="h6" component="h1" color="textPrimary">
|
||||||
|
Finalizado:
|
||||||
|
<Typography component="p" color="textPrimary" paragraph>
|
||||||
|
{user.sumClosed && user.sumClosed.count
|
||||||
|
? user.sumClosed.count
|
||||||
|
: 0}
|
||||||
|
</Typography>
|
||||||
|
</Typography>
|
||||||
|
|
||||||
|
<Typography variant="h6" component="h1" color="textPrimary">
|
||||||
|
Tempo online:
|
||||||
|
<Typography component="p" color="textPrimary" paragraph>
|
||||||
|
{user.sumOnlineTime && user.sumOnlineTime.sum
|
||||||
|
? user.sumOnlineTime.sum
|
||||||
|
: "Não entrou Hoje"}
|
||||||
|
</Typography>
|
||||||
|
</Typography>
|
||||||
|
</CardContent>
|
||||||
|
<CardActions>
|
||||||
|
{user.statusOnline &&
|
||||||
|
user.statusOnline.status === "online" &&
|
||||||
|
user.statusOnline && (
|
||||||
|
<Button
|
||||||
|
className={classes.logginBtn}
|
||||||
|
variant="contained"
|
||||||
|
color="primary"
|
||||||
|
onClick={(e) => {
|
||||||
|
handleLogouOnlineUser(user.id);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{"Deslogar"}
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
</CardActions>
|
||||||
|
</Card>
|
||||||
|
</Grid>
|
||||||
|
))}
|
||||||
|
</Grid>
|
||||||
|
</Paper>
|
||||||
|
</Grid>
|
||||||
|
</Grid>
|
||||||
|
</Paper>
|
||||||
|
</Grid>
|
||||||
|
</Container>
|
||||||
)}
|
)}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue