diff --git a/src/Admin/Pages/Pages/SubPages/BlockedUsers.js b/src/Admin/Pages/Pages/SubPages/BlockedUsers.js
new file mode 100644
index 0000000000000000000000000000000000000000..fcfd7a225e2621bbfa8fede08475f43a886de04c
--- /dev/null
+++ b/src/Admin/Pages/Pages/SubPages/BlockedUsers.js
@@ -0,0 +1,395 @@
+/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
+Departamento de Informatica - Universidade Federal do Parana
+
+This file is part of Plataforma Integrada MEC.
+
+Plataforma Integrada MEC is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+Plataforma Integrada MEC is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/
+import React, { useEffect, useState } from 'react';
+import moment from "moment";
+//Material ui componets
+import { withStyles } from '@material-ui/core/styles';
+import TableBody from '@material-ui/core/TableBody';
+import Grid from "@material-ui/core/Grid";
+import Paper from "@material-ui/core/Paper";
+import MenuItem from "@material-ui/core/MenuItem";
+import TableRow from "@material-ui/core/TableRow";
+import TextField from "@material-ui/core/TextField";
+import TableCell from '@material-ui/core/TableCell';
+import RemoveCircleOutlineRoundedIcon from '@material-ui/icons/RemoveCircleOutlineRounded';
+import VisibilityIcon from '@material-ui/icons/Visibility';
+import { Button, Typography } from '@material-ui/core';
+import CircularProgress from '@material-ui/core/CircularProgress';
+import AddRoundedIcon from '@material-ui/icons/AddRounded';
+import UpdateRoundedIcon from '@material-ui/icons/UpdateRounded'
+//Local files
+import TableData from '../../../Components/Components/Table';
+import SnackBar from '../../../../Components/SnackbarComponent';
+import LoadingSpinner from '../../../../Components/LoadingSpinner';
+//Services
+import { getRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
+import { Url } from '../../../Filters';
+//routers
+import { Link } from 'react-router-dom';
+
+let currPage = 0; //var that controlls the current page that we are
+let currContentFilter = 1;
+let transformListToAsc = false;
+
+const StyledTableCell = withStyles((theme) => ({
+ head: {
+ backgroundColor: theme.palette.common.black,
+ color: theme.palette.common.white,
+ },
+ body: {
+ fontSize: 14,
+ },
+}))(TableCell);
+
+const StyledTableRow = withStyles((theme) => ({
+ root: {
+ '&:nth-of-type(odd)': {
+ backgroundColor: theme.palette.action.hover,
+ },
+ },
+}))(TableRow);
+
+const BlockedUsers = () => {
+ const AddOneLenght = [''];
+ const [error, setError] = useState(null); //Necessary to consult the API, catch errors
+ const [isLoaded, setIsLoaded] = useState(false); //Necessary to consult the API, wait until complete
+ const [items, setItems] = useState([]); //Necessary to consult the API, data
+ const [isLoadingMoreItems, setIsLoadingMoreItems] = useState(false)
+ const [isUpdating, setIsUpdating] = useState(false)
+
+ const [snackInfo, setSnackInfo] = useState({
+ message: '',
+ icon: '',
+ open: false,
+ color: '',
+ })
+
+ const StateOptions = [
+ {
+ id : 1,
+ name : "Semanal"
+ },
+ {
+ id : 2,
+ name : "Permanente"
+ }
+ ];
+
+ // Handle snack infos
+ const HandleSnack = (message, state, icon, color) => {
+ setSnackInfo({
+ message: message,
+ icon: icon,
+ open: state,
+ color: color
+ })
+ }
+
+ const LoadMoreItens = async (api) => {
+ setIsLoadingMoreItems(true)
+ getRequest(
+ api,
+ (data, header) => {
+ const arrData = [...data]
+ if (arrData.length === 0) {
+ HandleSnack('Não há mais dados para serem carregados', true, 'warning', '#FFC125')
+ } else {
+ const arrItems = [...items]
+ arrItems.pop(); //Deleting the last position, that was used to display the button of load more items
+ const arrResult = arrItems.concat(arrData)
+ setItems(arrResult.concat(AddOneLenght))
+ }
+ setIsLoadingMoreItems(false)
+ },
+ (error) => {
+ HandleSnack('Erro ao carregar os dados', true, 'warning', '#FA8072')
+ setIsLoadingMoreItems(false)
+ }
+ )
+ }
+
+ const InvertList = async () => {
+ transformListToAsc = !transformListToAsc
+ currPage = 0
+ if (transformListToAsc) {
+ getRequest(
+ Url('users', `"state" : "${currContentFilter}"`, `${currPage}`, 'ASC'),
+ (data, header) => {
+ const arrData = [...data]
+ setItems(arrData.concat(AddOneLenght))
+ },
+ (error) => {
+ HandleSnack('Erro ao carregar os dados', true, 'warning', '#FA8072')
+ }
+ )
+ } else {
+ getRequest(
+ Url('users', `"state" : "${currContentFilter}"`, `${currPage}`, 'DESC'),
+ (data, header) => {
+ const arrData = [...data]
+ setItems(arrData.concat(AddOneLenght))
+ },
+ (error) => {
+ HandleSnack('Erro ao carregar os dados', true, 'warning', '#FA8072')
+ }
+ )
+ }
+ }
+
+ const UpdateHandler = async (api) => {
+ setIsUpdating(true)
+ getRequest(
+ api,
+ (data, header) => {
+ HandleSnack('A lista de dados foi atualizada', true, 'success', '#228B22')
+ const arrData = [...data]
+ setItems(arrData.concat(AddOneLenght))
+ setIsUpdating(false)
+ },
+ (error) => {
+ HandleSnack('Erro ao carregar os dados', true, 'warning', '#FA8072')
+ setIsUpdating(false)
+ }
+ )
+ }
+
+ const BlockStatus = (status) => {
+ switch (status) {
+ case 1:
+ return (
+ <Paper
+ style={{
+ textAlign: "center",
+ padding: "0.5em",
+ backgroundColor: "#FF8C00",
+ fontWeight: "500",
+ color: "#FFFAFA",
+ }}
+ >
+ SEMANAL
+ </Paper>
+ );
+ case 2:
+ return (
+ <Paper
+ style={{
+ textAlign: "center",
+ padding: "0.5em",
+ backgroundColor: "#FA8072",
+ fontWeight: "500",
+ color: "#FFFAFA",
+ }}
+ >
+ PERMANENTE
+ </Paper>
+ );
+ case 3:
+ return (
+ <Paper
+ style={{
+ textAlign: "center",
+ padding: "0.5em",
+ backgroundColor: "#228B22",
+ fontWeight: "500",
+ color: "#FFFAFA",
+ }}
+ >
+ AVALIADO
+ </Paper>
+ );
+ default:
+ return "NOTHING";
+ }
+ };
+
+ const DisplayDate = (date) => {
+ const convertedData = moment.utc(date);
+ return moment(convertedData)
+ .format("LLL")
+ .toString();
+ };
+
+ useEffect(() => {
+ getRequest(
+ Url('users', `"state" : "${currContentFilter}"`, '0', 'DESC'),
+ (data, header) => {
+ setIsLoaded(true);
+ setItems(data.concat(AddOneLenght));
+ },
+ (error) => {
+ setError(true);
+ }
+ )
+ }, []);
+
+
+ if (error) {
+ return <div>Error: {error.message}</div>;
+ } else if (!isLoaded) {
+ return <LoadingSpinner text="Carregando..." />
+ } else {
+
+ //Words in the top part of the table
+ const topTable = ['ID', 'ESTADO', 'NAME', 'EMAIL', 'BLOQUEADO EM', 'AÇÕES'];
+
+ return (
+ <div>
+ <SnackBar
+ severity={snackInfo.icon}
+ text={snackInfo.message}
+ snackbarOpen={snackInfo.open}
+ color={snackInfo.color}
+ handleClose={() => setSnackInfo({
+ message: '',
+ icon: '',
+ open: false,
+ color: ''
+ })}
+ />
+ <Paper style={{ padding: '1em' }}>
+ <Grid container direction="row" alignItems="center">
+ <Grid container spacing={3} >
+ <Grid item xs={6}>
+ <Typography variant="h4">
+ Lista de usuários bloqueados
+ </Typography>
+ </Grid>
+ <Grid
+ item
+ xs={6}
+ >
+ <Grid container justify="flex-end" spacing={3}>
+ <Grid item>
+ <Button
+ variant="contained"
+ color="secondary"
+ disabled={isUpdating}
+ onClick={() => {
+ currPage = 0
+ transformListToAsc = false
+ UpdateHandler(Url('users', `"state" : "${currContentFilter}"`, `${currPage}`, 'DESC'))
+ }}
+ startIcon={<UpdateRoundedIcon />}
+ >
+ {
+ isUpdating ? <CircularProgress size={24} /> : 'Atualizar'
+ }
+ </Button>
+ </Grid>
+ </Grid>
+ </Grid>
+ </Grid>
+ <Grid item>
+ <TextField
+ select
+ label="Motivo"
+ // onChange={handleChange}
+ helperText="Por favor, selecione uma das opções"
+ >
+ {StateOptions.map((option, index) => (
+ <MenuItem
+ key={option.id}
+ value={option.name}
+ name={option.id}
+ >
+ {option.name}
+ </MenuItem>
+ ))}
+ </TextField>
+ </Grid>
+
+ </Grid>
+ </Paper>
+
+ <div style={{ height: '2em' }}></div>
+
+ <TableData
+ top={topTable}
+ onIconPressed={InvertList}
+ >
+ <TableBody>
+ {items.map((row, index) => (
+ index === items.length - 1 ?
+ <StyledTableRow key={index}>
+ {/* Button to load more data */}
+ <StyledTableCell>
+ <Button
+ color='primary'
+ variant='text'
+ disabled={isLoadingMoreItems}
+ startIcon={<AddRoundedIcon />}
+ onClick={() => {
+ currPage++
+ if (transformListToAsc) {
+ LoadMoreItens(Url('users', `"state" : "${currContentFilter}"`, `${currPage}`, 'ASC'))
+ } else {
+ LoadMoreItens(Url('users', `"state" : "${currContentFilter}"`, `${currPage}`, 'DESC'))
+ }
+ }}
+ >
+ {
+ isLoadingMoreItems ? <CircularProgress size={24} /> : 'Carregar mais itens'
+ }
+ </Button>
+ </StyledTableCell>
+ </StyledTableRow>
+
+ :
+
+ <StyledTableRow key={index}>
+ <StyledTableCell component="th" scope="row">{row.id}</StyledTableCell>
+ <StyledTableCell align="right">
+ {BlockStatus(currContentFilter)}
+ </StyledTableCell>
+ <StyledTableCell align="right">{row.name}</StyledTableCell>
+ <StyledTableCell align="right">{row.email}</StyledTableCell>
+ <StyledTableCell align="right">
+ {DisplayDate(row.suspended_at)}
+ </StyledTableCell>
+ <StyledTableCell align="right">
+ <Button
+ style={{ width: "100%", marginBottom: "0.5em" }}
+ variant="contained"
+ color="secondary"
+ startIcon={<RemoveCircleOutlineRoundedIcon />}
+ >
+ Desbloquear
+ </Button>
+ <Link to={`/admin/user/${row.id}`}>
+ <Button
+ onClick={() => { currPage = 0; transformListToAsc = false }}
+ style={{ width: "100%" }}
+ variant="contained"
+ color="primary"
+ startIcon={<VisibilityIcon />}
+ >
+ Visualizar
+ </Button>
+ </Link>
+ </StyledTableCell>
+ </StyledTableRow>
+ ))}
+ </TableBody>
+ </TableData>
+ </div>
+ )
+ }
+}
+
+
+export default BlockedUsers;
\ No newline at end of file