diff --git a/src/Admin/Pages/Pages/SubPages/Gamefication.js b/src/Admin/Pages/Pages/SubPages/Gamefication.js
new file mode 100644
index 0000000000000000000000000000000000000000..cc4011036e29a3d1682b5de72d673aa5eda1c78e
--- /dev/null
+++ b/src/Admin/Pages/Pages/SubPages/Gamefication.js
@@ -0,0 +1,469 @@
+/*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, { useContext, useEffect, useState } from "react";
+import moment from "moment";
+import Unauthorized from "../../../Components/Components/Unauthorized";
+import { Store } from "../../../../Store";
+import { Link } from "react-router-dom";
+import { getRequest } from "../../../../Components/HelperFunctions/getAxiosConfig";
+import { Url } from "../../../Filters";
+import UpdateRoundedIcon from "@material-ui/icons/UpdateRounded";
+import { withStyles } from "@material-ui/core/styles";
+import AddRoundedIcon from "@material-ui/icons/AddRounded";
+import FilterListRoundedIcon from "@material-ui/icons/FilterListRounded";
+import VisibilityIcon from "@material-ui/icons/Visibility";
+import LoadingSpinner from "../../../../Components/LoadingSpinner";
+import PageHeader from "../../../Components/Components/PageHeader";
+import SnackBar from "../../../../Components/SnackbarComponent";
+import TableData from "../../../Components/Components/Table";
+import TableBody from "@material-ui/core/TableBody";
+import TableCell from "@material-ui/core/TableCell";
+import TableRow from "@material-ui/core/TableRow";
+import Button from "@material-ui/core/Button";
+import CircularProgress from "@material-ui/core/CircularProgress";
+import IconButton from "@material-ui/core/IconButton";
+import Paper from "@material-ui/core/Paper";
+import MobilePageHeader from "../../../Components/Components/MobileComponents/MobilePageHeader"
+import styled from 'styled-components'
+import { apiDomain } from '../../../../env';
+import MobileList from "../../../Components/Components/MobileComponents/SimpleList"
+import noAvatar from "../../../../img/default_profile.png";
+
+
+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 Gamefication = () => {
+ const WINDOW_WIDTH = window.innerWidth
+ const ADD_ONE_LENGHT = [""];
+ const TOP_LABELS = [
+ "ESTADO",
+ "ID",
+ "NAME",
+ "TIPO",
+ "CRIADO EM",
+ "ATUALIZADO EM",
+ "VISUALIZAR"
+ ]; //Labels from Table
+ const { state } = useContext(Store);
+ const [currPage, setcurrPage] = useState(0);
+ const [error, setError] = useState(false);
+ const [loaded, setLoaded] = useState(true);
+ const [isLoadingMoreItems, setIsLoadingMoreItems] = useState(false);
+ const [showFilter, setShowFilter] = useState(false);
+ const [items, setItems] = useState([
+ {
+ id: "1",
+ name: "Doctor strange",
+ description:
+ "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et consectetur tortor. Proin euismod est vitae facilisis porttitor. Fusce et ultricies sapien. Aliquam tincidunt orci sit amet mi malesuada egestas. Donec imperdiet porta dui, in elementum est porttitor sit amet. Proin sapien ante, pretium pretium aliquet vitae, blandit in erat. Sed mollis porta felis, sit amet volutpat diam lacinia nec. Fusce ligula purus, dignissim et blandit vitae, hendrerit et neque. ",
+ price: "29",
+ discount: "10",
+ state: "active",
+ item_type: "badge",
+ achievement: null,
+ image:
+ "https://64.media.tumblr.com/077441739e9e4fa80f2d7dccdabf7a85/tumblr_oqoib6a5Jj1w7t6tto2_400.png",
+ created_at: "2021-03-17T14:19:59.603Z",
+ updated_at: "2021-03-17T14:19:59.603Z",
+ },
+ ]);
+ const [snackInfo, setSnackInfo] = useState({
+ message: "",
+ icon: "",
+ open: false,
+ color: "",
+ });
+
+ //handle snack info
+ const HandleSnack = (message, state, icon, color) => {
+ setSnackInfo({
+ message: message,
+ icon: icon,
+ open: state,
+ color: color,
+ });
+ };
+
+ const CheckUserPermission = () => {
+ let canUserEdit = false;
+
+ if (state.userIsLoggedIn) {
+ const roles = [...state.currentUser.roles];
+ for (let i = 0; i < roles.length; i++)
+ if (roles[i].name === "admin" || roles[i].name === "editor")
+ canUserEdit = true;
+ } else {
+ canUserEdit = false;
+ }
+
+ return canUserEdit;
+ };
+
+ const DisplayDate = (date) => {
+ const convertedData = moment.utc(date);
+ return moment(convertedData)
+ .format("LLL")
+ .toString();
+ };
+
+ const StateItem = (status, type) => {
+ switch (status) {
+ case "removed":
+ return (
+ <Paper
+ style={{
+ textAlign: "center",
+ padding: "0.5em",
+ backgroundColor: "#FA8072",
+ fontWeight: "500",
+ color: "#FFFAFA",
+ }}
+ >
+ Removido
+ </Paper>
+ );
+ case "inactive":
+ return (
+ <Paper
+ style={{
+ textAlign: "center",
+ padding: "0.5em",
+ backgroundColor: "#FF8C00",
+ fontWeight: "500",
+ color: "#FFFAFA",
+ }}
+ >
+ Inativo
+ </Paper>
+ );
+ case "active":
+ return (
+ <Paper
+ style={{
+ textAlign: "center",
+ padding: "0.5em",
+ backgroundColor: "#228B22",
+ fontWeight: "500",
+ color: "#FFFAFA",
+ }}
+ >
+ Ativo
+ </Paper>
+ );
+ default:
+ return "NOTHING";
+ }
+ };
+
+ useEffect(() => {
+ const arrItems = [...items]
+ arrItems.concat(ADD_ONE_LENGHT)
+ setItems(arrItems.concat(ADD_ONE_LENGHT))
+ }, []);
+
+ useEffect(() => {
+ // setLoaded(false)
+ getRequest(
+ Url("items", "", currPage, "DESC"),
+ (data, header) => {
+ // setItems(data)
+ // console.log(data)
+ // setLoaded(true)
+ // setError(false)
+ },
+ (data) => {
+ // setLoaded(true)
+ // setError(true)
+ // console.log("merda")
+ },
+ )
+ }, [currPage])
+
+ if (error) {
+ return <div>Error</div>;
+ } else if (!loaded) {
+ return <LoadingSpinner text="Carregando..." />;
+ } else {
+ if (!CheckUserPermission()) {
+ if (WINDOW_WIDTH <= 770) {
+ return (
+ <>
+ <SnackBar
+ severity={snackInfo.icon}
+ text={snackInfo.message}
+ snackbarOpen={snackInfo.open}
+ color={snackInfo.color}
+ handleClose={() =>
+ setSnackInfo({
+ message: "",
+ icon: "",
+ open: false,
+ color: "",
+ })
+ }
+ />
+ <MobilePageHeader
+ title="Itens da gameficação"
+ actions={[
+ {
+ name: "Atualizar",
+ isLoading: false,
+ func: () => {
+ setcurrPage(0);
+ },
+ icon: <UpdateRoundedIcon />,
+ },
+ {
+ name: "Filtrar",
+ isLoading: false,
+ func: () => {
+ setShowFilter(!showFilter);
+ },
+ icon: <FilterListRoundedIcon />,
+ },
+ {
+ name: "Novo",
+ isLoading: false,
+ func: () => {
+ console.log("Changed page!");
+ },
+ icon: <AddRoundedIcon />,
+ },
+ ]}
+ >
+ {showFilter ? (
+ <>
+ <div style={{ height: "1em" }}> Filter area</div>
+ </>
+ ) : null}
+ </MobilePageHeader>
+ <div style={{ height: '2em' }}></div>
+
+ {items.map((row, index) =>
+ index === items.length - 1 ? (
+ <StyledDivButton>
+ <Button
+ key={index}
+ color="primary"
+ variant="text"
+ // disabled={isLoadingMoreItems}
+ startIcon={<AddRoundedIcon />}
+ disabled={isLoadingMoreItems}
+ onClick={() => {
+ setcurrPage(currPage+1)
+ }}
+ >
+ {isLoadingMoreItems ? (
+ <CircularProgress size={24} />
+ ) : (
+ "Carregar mais itens"
+ )}
+ </Button>
+ </StyledDivButton>
+ ) : (
+ <>
+ <MobileList
+ key={index}
+ title={row.name}
+ subtitle={row.id}
+ backColor={"#00bcd4"}
+ avatar={
+ <img
+ src={row.image ? row.image : noAvatar}
+ alt="user avatar"
+ style={{
+ height: "100%",
+ width: "100%",
+ borderRadius: "50%",
+ }}
+ />
+ }
+ href={`/admin/user/${row.id}`}
+ reset={() => {}}
+ data={[
+
+ {
+ title: "Criado em",
+ subtitle: DisplayDate(row.created_at)
+ },
+ {
+ title: "Atualizado em",
+ subtitle: DisplayDate(row.updated_at)
+ },
+ {
+ title: "Tipo",
+ subtitle: row.item_type
+ },
+ {
+ title: "Ações rápidas",
+ subtitle: row.description
+ },
+ {
+ title: "Estado",
+ subtitle: StateItem(row.state)
+ }
+
+ ]}
+ />
+ <div style={{ height: "0.5em" }} />
+ </>
+ )
+ )}
+ </>
+ )
+ } else {
+ return (
+ <>
+ <SnackBar
+ severity={snackInfo.icon}
+ text={snackInfo.message}
+ snackbarOpen={snackInfo.open}
+ color={snackInfo.color}
+ handleClose={() =>
+ setSnackInfo({
+ message: "",
+ icon: "",
+ open: false,
+ color: "",
+ })
+ }
+ />
+ <PageHeader
+ title="Itens da gameficação"
+ actions={[
+ {
+ name: "Atualizar",
+ isLoading: false,
+ func: () => {
+ setcurrPage(0);
+ },
+ icon: <UpdateRoundedIcon />,
+ },
+ {
+ name: "Filtrar",
+ isLoading: false,
+ func: () => {
+ setShowFilter(!showFilter);
+ },
+ icon: <FilterListRoundedIcon />,
+ },
+ {
+ name: "Novo",
+ isLoading: false,
+ func: () => {
+ console.log("Changed page!");
+ },
+ icon: <AddRoundedIcon />,
+ },
+ ]}
+ >
+ {showFilter ? (
+ <>
+ <div style={{ height: "1em" }}> Filter area</div>
+ </>
+ ) : null}
+ </PageHeader>
+
+ <div style={{ height: "2em" }}></div>
+
+ <TableData top={TOP_LABELS}>
+ <TableBody>
+ {items.map((row, index) =>
+ index === items.length - 1 ? (
+ <StyledTableRow key={index} style={{ padding: "1em" }}>
+ {/* Button to load more data */}
+ <StyledTableCell>
+ <Button
+ color="primary"
+ variant="text"
+ // disabled={isLoadingMoreItems}
+ startIcon={<AddRoundedIcon />}
+ disabled={isLoadingMoreItems}
+ onClick={() => {
+ setcurrPage(currPage + 1);
+ }}
+ >
+ {isLoadingMoreItems ? (
+ <CircularProgress size={24} />
+ ) : (
+ "Carregar mais itens"
+ )}
+ </Button>
+ </StyledTableCell>
+ </StyledTableRow>
+ ) : (
+ <StyledTableRow key={index}>
+ <StyledTableCell component="th" scope="row">
+ {StateItem(row.state)}
+ </StyledTableCell>
+ <StyledTableCell align="right">{row.id}</StyledTableCell>
+ <StyledTableCell align="right">{row.name}</StyledTableCell>
+ <StyledTableCell align="right">
+ {row.item_type}
+ </StyledTableCell>
+ <StyledTableCell align="right">
+ {DisplayDate(row.created_at)}
+ </StyledTableCell>
+ <StyledTableCell align="right">
+ {DisplayDate(row.updated_at)}
+ </StyledTableCell>
+ <StyledTableCell align="right">
+ <Link>
+ <IconButton>
+ <VisibilityIcon style={{ fill: "#00bcd4" }} />
+ </IconButton>
+ </Link>
+ </StyledTableCell>
+ </StyledTableRow>
+ )
+ )}
+ </TableBody>
+ </TableData>
+ </>
+ );
+ }
+ } else return <Unauthorized />;
+ }
+};
+export default Gamefication;
+
+const StyledDivButton = styled(Paper)`
+ width : 100%;
+ display : flex;
+ justify-content : center;
+ align-items : center;
+`
+
+