Merge branch 'administativePages' into 'dev'
Administative pages See merge request kluppsoftware/smart-energia-web!58
This commit is contained in:
José Corte
commit
3853d8ceb6
233
package-lock.json
generated
233
package-lock.json
generated
@ -4595,6 +4595,171 @@
|
||||
"engines": {
|
||||
"node": ">= 6"
|
||||
}
|
||||
},
|
||||
"node_modules/@next/swc-android-arm-eabi": {
|
||||
"version": "12.1.6",
|
||||
"resolved": "https://registry.npmjs.org/@next/swc-android-arm-eabi/-/swc-android-arm-eabi-12.1.6.tgz",
|
||||
"integrity": "sha512-BxBr3QAAAXWgk/K7EedvzxJr2dE014mghBSA9iOEAv0bMgF+MRq4PoASjuHi15M2zfowpcRG8XQhMFtxftCleQ==",
|
||||
"cpu": [
|
||||
"arm"
|
||||
],
|
||||
"optional": true,
|
||||
"os": [
|
||||
"android"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">= 10"
|
||||
}
|
||||
},
|
||||
"node_modules/@next/swc-android-arm64": {
|
||||
"version": "12.1.6",
|
||||
"resolved": "https://registry.npmjs.org/@next/swc-android-arm64/-/swc-android-arm64-12.1.6.tgz",
|
||||
"integrity": "sha512-EboEk3ROYY7U6WA2RrMt/cXXMokUTXXfnxe2+CU+DOahvbrO8QSWhlBl9I9ZbFzJx28AGB9Yo3oQHCvph/4Lew==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"optional": true,
|
||||
"os": [
|
||||
"android"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">= 10"
|
||||
}
|
||||
},
|
||||
"node_modules/@next/swc-darwin-arm64": {
|
||||
"version": "12.1.6",
|
||||
"resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-12.1.6.tgz",
|
||||
"integrity": "sha512-P0EXU12BMSdNj1F7vdkP/VrYDuCNwBExtRPDYawgSUakzi6qP0iKJpya2BuLvNzXx+XPU49GFuDC5X+SvY0mOw==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"optional": true,
|
||||
"os": [
|
||||
"darwin"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">= 10"
|
||||
}
|
||||
},
|
||||
"node_modules/@next/swc-darwin-x64": {
|
||||
"version": "12.1.6",
|
||||
"resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-12.1.6.tgz",
|
||||
"integrity": "sha512-9FptMnbgHJK3dRDzfTpexs9S2hGpzOQxSQbe8omz6Pcl7rnEp9x4uSEKY51ho85JCjL4d0tDLBcXEJZKKLzxNg==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"optional": true,
|
||||
"os": [
|
||||
"darwin"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">= 10"
|
||||
}
|
||||
},
|
||||
"node_modules/@next/swc-linux-arm-gnueabihf": {
|
||||
"version": "12.1.6",
|
||||
"resolved": "https://registry.npmjs.org/@next/swc-linux-arm-gnueabihf/-/swc-linux-arm-gnueabihf-12.1.6.tgz",
|
||||
"integrity": "sha512-PvfEa1RR55dsik/IDkCKSFkk6ODNGJqPY3ysVUZqmnWMDSuqFtf7BPWHFa/53znpvVB5XaJ5Z1/6aR5CTIqxPw==",
|
||||
"cpu": [
|
||||
"arm"
|
||||
],
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">= 10"
|
||||
}
|
||||
},
|
||||
"node_modules/@next/swc-linux-arm64-gnu": {
|
||||
"version": "12.1.6",
|
||||
"resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-12.1.6.tgz",
|
||||
"integrity": "sha512-53QOvX1jBbC2ctnmWHyRhMajGq7QZfl974WYlwclXarVV418X7ed7o/EzGY+YVAEKzIVaAB9JFFWGXn8WWo0gQ==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">= 10"
|
||||
}
|
||||
},
|
||||
"node_modules/@next/swc-linux-arm64-musl": {
|
||||
"version": "12.1.6",
|
||||
"resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-12.1.6.tgz",
|
||||
"integrity": "sha512-CMWAkYqfGdQCS+uuMA1A2UhOfcUYeoqnTW7msLr2RyYAys15pD960hlDfq7QAi8BCAKk0sQ2rjsl0iqMyziohQ==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">= 10"
|
||||
}
|
||||
},
|
||||
"node_modules/@next/swc-linux-x64-gnu": {
|
||||
"version": "12.1.6",
|
||||
"resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-12.1.6.tgz",
|
||||
"integrity": "sha512-AC7jE4Fxpn0s3ujngClIDTiEM/CQiB2N2vkcyWWn6734AmGT03Duq6RYtPMymFobDdAtZGFZd5nR95WjPzbZAQ==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">= 10"
|
||||
}
|
||||
},
|
||||
"node_modules/@next/swc-linux-x64-musl": {
|
||||
"version": "12.1.6",
|
||||
"resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-12.1.6.tgz",
|
||||
"integrity": "sha512-c9Vjmi0EVk0Kou2qbrynskVarnFwfYIi+wKufR9Ad7/IKKuP6aEhOdZiIIdKsYWRtK2IWRF3h3YmdnEa2WLUag==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">= 10"
|
||||
}
|
||||
},
|
||||
"node_modules/@next/swc-win32-arm64-msvc": {
|
||||
"version": "12.1.6",
|
||||
"resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-12.1.6.tgz",
|
||||
"integrity": "sha512-3UTOL/5XZSKFelM7qN0it35o3Cegm6LsyuERR3/OoqEExyj3aCk7F025b54/707HTMAnjlvQK3DzLhPu/xxO4g==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"optional": true,
|
||||
"os": [
|
||||
"win32"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">= 10"
|
||||
}
|
||||
},
|
||||
"node_modules/@next/swc-win32-ia32-msvc": {
|
||||
"version": "12.1.6",
|
||||
"resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-12.1.6.tgz",
|
||||
"integrity": "sha512-8ZWoj6nCq6fI1yCzKq6oK0jE6Mxlz4MrEsRyu0TwDztWQWe7rh4XXGLAa2YVPatYcHhMcUL+fQQbqd1MsgaSDA==",
|
||||
"cpu": [
|
||||
"ia32"
|
||||
],
|
||||
"optional": true,
|
||||
"os": [
|
||||
"win32"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">= 10"
|
||||
}
|
||||
}
|
||||
},
|
||||
"dependencies": {
|
||||
@ -7417,6 +7582,72 @@
|
||||
"yaml": {
|
||||
"version": "1.10.2",
|
||||
"resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz"
|
||||
},
|
||||
"@next/swc-android-arm-eabi": {
|
||||
"version": "12.1.6",
|
||||
"resolved": "https://registry.npmjs.org/@next/swc-android-arm-eabi/-/swc-android-arm-eabi-12.1.6.tgz",
|
||||
"integrity": "sha512-BxBr3QAAAXWgk/K7EedvzxJr2dE014mghBSA9iOEAv0bMgF+MRq4PoASjuHi15M2zfowpcRG8XQhMFtxftCleQ==",
|
||||
"optional": true
|
||||
},
|
||||
"@next/swc-android-arm64": {
|
||||
"version": "12.1.6",
|
||||
"resolved": "https://registry.npmjs.org/@next/swc-android-arm64/-/swc-android-arm64-12.1.6.tgz",
|
||||
"integrity": "sha512-EboEk3ROYY7U6WA2RrMt/cXXMokUTXXfnxe2+CU+DOahvbrO8QSWhlBl9I9ZbFzJx28AGB9Yo3oQHCvph/4Lew==",
|
||||
"optional": true
|
||||
},
|
||||
"@next/swc-darwin-arm64": {
|
||||
"version": "12.1.6",
|
||||
"resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-12.1.6.tgz",
|
||||
"integrity": "sha512-P0EXU12BMSdNj1F7vdkP/VrYDuCNwBExtRPDYawgSUakzi6qP0iKJpya2BuLvNzXx+XPU49GFuDC5X+SvY0mOw==",
|
||||
"optional": true
|
||||
},
|
||||
"@next/swc-darwin-x64": {
|
||||
"version": "12.1.6",
|
||||
"resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-12.1.6.tgz",
|
||||
"integrity": "sha512-9FptMnbgHJK3dRDzfTpexs9S2hGpzOQxSQbe8omz6Pcl7rnEp9x4uSEKY51ho85JCjL4d0tDLBcXEJZKKLzxNg==",
|
||||
"optional": true
|
||||
},
|
||||
"@next/swc-linux-arm-gnueabihf": {
|
||||
"version": "12.1.6",
|
||||
"resolved": "https://registry.npmjs.org/@next/swc-linux-arm-gnueabihf/-/swc-linux-arm-gnueabihf-12.1.6.tgz",
|
||||
"integrity": "sha512-PvfEa1RR55dsik/IDkCKSFkk6ODNGJqPY3ysVUZqmnWMDSuqFtf7BPWHFa/53znpvVB5XaJ5Z1/6aR5CTIqxPw==",
|
||||
"optional": true
|
||||
},
|
||||
"@next/swc-linux-arm64-gnu": {
|
||||
"version": "12.1.6",
|
||||
"resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-12.1.6.tgz",
|
||||
"integrity": "sha512-53QOvX1jBbC2ctnmWHyRhMajGq7QZfl974WYlwclXarVV418X7ed7o/EzGY+YVAEKzIVaAB9JFFWGXn8WWo0gQ==",
|
||||
"optional": true
|
||||
},
|
||||
"@next/swc-linux-arm64-musl": {
|
||||
"version": "12.1.6",
|
||||
"resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-12.1.6.tgz",
|
||||
"integrity": "sha512-CMWAkYqfGdQCS+uuMA1A2UhOfcUYeoqnTW7msLr2RyYAys15pD960hlDfq7QAi8BCAKk0sQ2rjsl0iqMyziohQ==",
|
||||
"optional": true
|
||||
},
|
||||
"@next/swc-linux-x64-gnu": {
|
||||
"version": "12.1.6",
|
||||
"resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-12.1.6.tgz",
|
||||
"integrity": "sha512-AC7jE4Fxpn0s3ujngClIDTiEM/CQiB2N2vkcyWWn6734AmGT03Duq6RYtPMymFobDdAtZGFZd5nR95WjPzbZAQ==",
|
||||
"optional": true
|
||||
},
|
||||
"@next/swc-linux-x64-musl": {
|
||||
"version": "12.1.6",
|
||||
"resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-12.1.6.tgz",
|
||||
"integrity": "sha512-c9Vjmi0EVk0Kou2qbrynskVarnFwfYIi+wKufR9Ad7/IKKuP6aEhOdZiIIdKsYWRtK2IWRF3h3YmdnEa2WLUag==",
|
||||
"optional": true
|
||||
},
|
||||
"@next/swc-win32-arm64-msvc": {
|
||||
"version": "12.1.6",
|
||||
"resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-12.1.6.tgz",
|
||||
"integrity": "sha512-3UTOL/5XZSKFelM7qN0it35o3Cegm6LsyuERR3/OoqEExyj3aCk7F025b54/707HTMAnjlvQK3DzLhPu/xxO4g==",
|
||||
"optional": true
|
||||
},
|
||||
"@next/swc-win32-ia32-msvc": {
|
||||
"version": "12.1.6",
|
||||
"resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-12.1.6.tgz",
|
||||
"integrity": "sha512-8ZWoj6nCq6fI1yCzKq6oK0jE6Mxlz4MrEsRyu0TwDztWQWe7rh4XXGLAa2YVPatYcHhMcUL+fQQbqd1MsgaSDA==",
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -26,16 +26,21 @@
|
||||
"@mui/material": "^5.6.4",
|
||||
"@mui/x-data-grid": "^5.11.0",
|
||||
"@mui/x-date-pickers": "^5.0.0-alpha.3",
|
||||
"@tinymce/tinymce-react": "^4.1.0",
|
||||
"@types/react-csv": "^1.1.2",
|
||||
"@typescript-eslint/eslint-plugin": "^5.22.0",
|
||||
"@typescript-eslint/parser": "^5.22.0",
|
||||
"axios": "^0.27.2",
|
||||
"chart.js": "^3.7.1",
|
||||
"chartjs-plugin-datalabels": "^2.0.0",
|
||||
"eslint-plugin-react": "^7.29.4",
|
||||
"eslit": "^6.0.0",
|
||||
"faker": "5.5.3",
|
||||
"fs-extra": "^10.1.0",
|
||||
"install": "^0.13.0",
|
||||
"next": "12.1.6",
|
||||
"nookies": "^2.5.2",
|
||||
"notistack": "^2.0.5",
|
||||
"npm": "^8.10.0",
|
||||
"nprogress": "^0.2.0",
|
||||
"patternomaly": "^1.3.2",
|
||||
@ -45,11 +50,13 @@
|
||||
"react-csv": "^2.2.2",
|
||||
"react-dom": "18.1.0",
|
||||
"react-icons": "^4.3.1",
|
||||
"styled-components": "^5.3.5"
|
||||
"styled-components": "^5.3.5",
|
||||
"tinymce": "^6.0.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/preset-env": "^7.17.10",
|
||||
"@types/chartjs": "^0.0.31",
|
||||
"@types/cookies": "^0.7.7",
|
||||
"@types/faker": "5.5.3",
|
||||
"@types/node": "^17.0.31",
|
||||
"@types/nprogress": "^0.2.0",
|
||||
|
||||
@ -0,0 +1,29 @@
|
||||
import React, { useState } from 'react'
|
||||
import Image from 'next/image'
|
||||
import getAPIClient from '../../services/ssrApi';
|
||||
import { FaqQuestionsCardBody, FaqQuestionsCardHeader, CommonQuestionsCardView } from './NotificationQuestionsCardView'
|
||||
|
||||
interface CommonsQuestionsCardInterface {
|
||||
title: string,
|
||||
body: string,
|
||||
|
||||
}
|
||||
|
||||
export default function NotificationQuestionsCard({title, body}: CommonsQuestionsCardInterface) {
|
||||
const [ showCardBody, setShowCardBody ] = useState<boolean>(false)
|
||||
return (
|
||||
|
||||
<CommonQuestionsCardView>
|
||||
<FaqQuestionsCardHeader>
|
||||
<h4>{title}</h4>
|
||||
<Image src={showCardBody? '/assets/less-icon.svg' : '/assets/plus-icon.svg' } width={32} height={32} onClick={() => setShowCardBody(!showCardBody)} />
|
||||
</FaqQuestionsCardHeader>
|
||||
|
||||
<FaqQuestionsCardBody showCardBody={showCardBody} >
|
||||
<p>
|
||||
{body}
|
||||
</p>
|
||||
</FaqQuestionsCardBody>
|
||||
</CommonQuestionsCardView>
|
||||
)
|
||||
}
|
||||
@ -0,0 +1,45 @@
|
||||
import styled from "styled-components";
|
||||
|
||||
export const CommonQuestionsCardView = styled.article`
|
||||
`
|
||||
|
||||
export const FaqQuestionsCardHeader = styled.div`
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
flex-direction: row;
|
||||
|
||||
margin-top: 53px;
|
||||
|
||||
width: 100%;
|
||||
|
||||
img {
|
||||
cursor: pointer;
|
||||
}
|
||||
`
|
||||
interface CardBodyInterface {
|
||||
showCardBody: boolean;
|
||||
}
|
||||
export const FaqQuestionsCardBody = styled.div<CardBodyInterface>`
|
||||
display: ${props => props.showCardBody? 'flex' : 'none'};
|
||||
|
||||
margin-bottom: 20px;
|
||||
|
||||
p {
|
||||
font-weight: 400;
|
||||
font-size: 99%;
|
||||
|
||||
letter-spacing: 0.5px;
|
||||
|
||||
color: rgba(0, 0, 0, 0.6);
|
||||
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
@media (max-width: 1008px) {
|
||||
p {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
`
|
||||
74
src/components/administrativeHeader/AdministrativeHeader.tsx
Normal file
74
src/components/administrativeHeader/AdministrativeHeader.tsx
Normal file
@ -0,0 +1,74 @@
|
||||
import Avatar from '@mui/material/Avatar'
|
||||
import FormControl from '@mui/material/FormControl';
|
||||
import InputLabel from '@mui/material/InputLabel';
|
||||
import MenuItem from '@mui/material/MenuItem';
|
||||
import Select, { SelectChangeEvent } from '@mui/material/Select';
|
||||
import TextField from '@mui/material/TextField';
|
||||
import React, { useState } from 'react'
|
||||
|
||||
import { AdministrativeHeaderView } from './AdministrativeHeaderView';
|
||||
|
||||
function stringToColor(string: string) {
|
||||
let hash = 0;
|
||||
let i;
|
||||
|
||||
for (i = 0; i < string.length; i += 1) {
|
||||
hash = string.charCodeAt(i) + ((hash << 5) - hash);
|
||||
}
|
||||
|
||||
let color = '#';
|
||||
|
||||
for (i = 0; i < 3; i += 1) {
|
||||
const value = (hash >> (i * 8)) & 0xff;
|
||||
color += `00${value.toString(16)}`.slice(-2);
|
||||
}
|
||||
|
||||
return color;
|
||||
}
|
||||
|
||||
function stringAvatar(name: string) {
|
||||
return {
|
||||
sx: {
|
||||
bgcolor: stringToColor(name),
|
||||
},
|
||||
children: `${name.split(' ')[0][0]}${name.split(' ')[1][0]}`,
|
||||
};
|
||||
}
|
||||
|
||||
export default function AdministrativeHeader() {
|
||||
const [unity, setUnity] = useState('');
|
||||
|
||||
const handleChange = (event: SelectChangeEvent) => {
|
||||
setUnity(event.target.value);
|
||||
};
|
||||
|
||||
return (
|
||||
<AdministrativeHeaderView>
|
||||
<section>
|
||||
<TextField
|
||||
id="outlined-textarea"
|
||||
label="Encontre na Página"
|
||||
placeholder="Encontre na Página"
|
||||
multiline
|
||||
fullWidth
|
||||
/>
|
||||
</section>
|
||||
<section>
|
||||
<FormControl sx={{mr: '20px', minWidth: 180, minHeight: '80px'}}>
|
||||
<Select
|
||||
value={unity}
|
||||
onChange={handleChange}
|
||||
displayEmpty
|
||||
inputProps={{ 'aria-label': 'Without label' }}
|
||||
>
|
||||
<MenuItem value="">Administrativo</MenuItem>
|
||||
<MenuItem value={10}>Copel</MenuItem>
|
||||
<MenuItem value={20}>Cliente 1</MenuItem>
|
||||
<MenuItem value={30}>Cliente 2</MenuItem>
|
||||
</Select>
|
||||
</FormControl>
|
||||
<Avatar {...stringAvatar('José Corte')} />
|
||||
</section>
|
||||
</AdministrativeHeaderView>
|
||||
)
|
||||
}
|
||||
@ -0,0 +1,72 @@
|
||||
import styled from "styled-components";
|
||||
|
||||
export const AdministrativeHeaderView = styled.header`
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
|
||||
align-self: center;
|
||||
|
||||
margin: 10px 0 20px 0;
|
||||
|
||||
width: 95%;
|
||||
|
||||
/* min-height: 80px; */
|
||||
|
||||
section {
|
||||
width: 30%;
|
||||
|
||||
:last-child {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: flex-start;
|
||||
|
||||
height: fit-content;
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
position: relative;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
width: 150px;
|
||||
height: 40px;
|
||||
|
||||
border-radius: 8px;
|
||||
|
||||
background-color: #254F7F;
|
||||
color: white;
|
||||
|
||||
transform: translateX(12%);
|
||||
|
||||
::after {
|
||||
content: "";
|
||||
position: relative;
|
||||
left: 2.5rem;
|
||||
background-color: #fff;
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1020px) {
|
||||
.icon {
|
||||
display: none;
|
||||
}
|
||||
section {
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1640px) {
|
||||
.icon {
|
||||
transform: translateX(6%);
|
||||
}
|
||||
input {
|
||||
height: 2rem;
|
||||
}
|
||||
}
|
||||
`
|
||||
325
src/components/administrativeTables/ClientsTable.tsx
Normal file
325
src/components/administrativeTables/ClientsTable.tsx
Normal file
@ -0,0 +1,325 @@
|
||||
import DeleteIcon from '@mui/icons-material/Delete';
|
||||
import FilterListIcon from '@mui/icons-material/FilterList';
|
||||
import Box from '@mui/material/Box';
|
||||
import Checkbox from '@mui/material/Checkbox';
|
||||
import FormControlLabel from '@mui/material/FormControlLabel';
|
||||
import IconButton from '@mui/material/IconButton';
|
||||
import Paper from '@mui/material/Paper';
|
||||
import { alpha } from '@mui/material/styles';
|
||||
import Switch from '@mui/material/Switch';
|
||||
import Table from '@mui/material/Table';
|
||||
import TableBody from '@mui/material/TableBody';
|
||||
import TableCell from '@mui/material/TableCell';
|
||||
import TableContainer from '@mui/material/TableContainer';
|
||||
import TableHead from '@mui/material/TableHead';
|
||||
import TablePagination from '@mui/material/TablePagination';
|
||||
import TableRow from '@mui/material/TableRow';
|
||||
import TableSortLabel from '@mui/material/TableSortLabel';
|
||||
import Toolbar from '@mui/material/Toolbar';
|
||||
import Tooltip from '@mui/material/Tooltip';
|
||||
import Typography from '@mui/material/Typography';
|
||||
import { visuallyHidden } from '@mui/utils';
|
||||
import React, { useState } from 'react';
|
||||
|
||||
import { ClientTableView, StyledStatus } from './ClientsTableView';
|
||||
|
||||
interface Data {
|
||||
clientCode: number,
|
||||
name: string,
|
||||
unity: string,
|
||||
status: string,
|
||||
}
|
||||
|
||||
function createData(
|
||||
clientCode: number,
|
||||
name: string,
|
||||
unity: string,
|
||||
status: string,
|
||||
): Data {
|
||||
return {
|
||||
clientCode,
|
||||
name,
|
||||
unity,
|
||||
status,
|
||||
};
|
||||
}
|
||||
|
||||
const rows = [
|
||||
createData(9500130, 'Copel', 'clique para ver unidades', 'ativo'),
|
||||
createData(9500131, 'Copel', 'clique para ver unidades', 'ativo'),
|
||||
createData(9500132, 'Copel', 'clique para ver unidades', 'ativo'),
|
||||
createData(9500689, 'Copel', 'clique para ver unidades', 'pendente'),
|
||||
createData(9500690, 'Copel', 'clique para ver unidades', 'inativo'),
|
||||
createData(9500691, 'Copel', 'clique para ver unidades', 'inativo'),
|
||||
];
|
||||
|
||||
function descendingComparator<T>(a: T, b: T, orderBy: keyof T) {
|
||||
if (b[orderBy] < a[orderBy]) {
|
||||
return -1;
|
||||
}
|
||||
if (b[orderBy] > a[orderBy]) {
|
||||
return 1;
|
||||
}
|
||||
return 0;
|
||||
}
|
||||
|
||||
type Order = 'asc' | 'desc';
|
||||
|
||||
function getComparator<Key extends keyof any>(
|
||||
order: Order,
|
||||
orderBy: any,
|
||||
): (
|
||||
a: { [key in Key]: number | string },
|
||||
b: { [key in Key]: number | string },
|
||||
) => number {
|
||||
return order === 'desc'
|
||||
? (a, b) => descendingComparator(a, b, orderBy)
|
||||
: (a, b) => -descendingComparator(a, b, orderBy);
|
||||
}
|
||||
|
||||
function stableSort<T>(array: readonly T[], comparator: (a: T, b: T) => number) {
|
||||
const stabilizedThis = array.map((el, index) => [el, index] as [T, number]);
|
||||
stabilizedThis.sort((a, b) => {
|
||||
const order = comparator(a[0], b[0]);
|
||||
if (order !== 0) {
|
||||
return order;
|
||||
}
|
||||
return a[1] - b[1];
|
||||
});
|
||||
return stabilizedThis.map((el) => el[0]);
|
||||
}
|
||||
|
||||
interface HeadCell {
|
||||
disablePadding: boolean;
|
||||
id: keyof Data | string;
|
||||
label: string;
|
||||
numeric: boolean;
|
||||
}
|
||||
|
||||
const headCells: readonly HeadCell[] = [
|
||||
{
|
||||
id: 'clientCode',
|
||||
numeric: false,
|
||||
disablePadding: true,
|
||||
label: 'código do cliente',
|
||||
},
|
||||
{
|
||||
id: 'name',
|
||||
numeric: true,
|
||||
disablePadding: false,
|
||||
label: 'name',
|
||||
},
|
||||
{
|
||||
id: 'unity',
|
||||
numeric: true,
|
||||
disablePadding: false,
|
||||
label: 'unity',
|
||||
},
|
||||
{
|
||||
id: 'status',
|
||||
numeric: true,
|
||||
disablePadding: false,
|
||||
label: 'status',
|
||||
},
|
||||
];
|
||||
|
||||
interface EnhancedTableProps {
|
||||
numSelected: number;
|
||||
onRequestSort: (event: React.MouseEvent<unknown>, property: keyof Data) => void;
|
||||
onSelectAllClick: (event: React.ChangeEvent<HTMLInputElement>) => void;
|
||||
order: Order;
|
||||
orderBy: string;
|
||||
rowCount: number;
|
||||
}
|
||||
|
||||
function EnhancedTableHead(props: EnhancedTableProps) {
|
||||
const { onSelectAllClick, order, orderBy, numSelected, rowCount, onRequestSort } =
|
||||
props;
|
||||
const createSortHandler =
|
||||
(property: any) => (event: React.MouseEvent<unknown>) => {
|
||||
onRequestSort(event, property);
|
||||
};
|
||||
|
||||
return (
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<TableCell padding="checkbox">
|
||||
<Checkbox
|
||||
color="primary"
|
||||
indeterminate={numSelected > 0 && numSelected < rowCount}
|
||||
checked={rowCount > 0 && numSelected === rowCount}
|
||||
onChange={onSelectAllClick}
|
||||
inputProps={{
|
||||
'aria-label': 'select all desserts',
|
||||
}}
|
||||
/>
|
||||
</TableCell>
|
||||
{headCells.map((headCell) => (
|
||||
<TableCell
|
||||
key={headCell.id}
|
||||
align='left'
|
||||
padding={headCell.disablePadding ? 'none' : 'normal'}
|
||||
sortDirection={orderBy === headCell.id ? order : false}
|
||||
>
|
||||
<TableSortLabel
|
||||
active={orderBy === headCell.id}
|
||||
direction={orderBy === headCell.id ? order : 'asc'}
|
||||
onClick={createSortHandler(headCell.id)}
|
||||
>
|
||||
{headCell.label}
|
||||
{orderBy === headCell.id ? (
|
||||
<Box component="span" sx={visuallyHidden}>
|
||||
{order === 'desc' ? 'sorted descending' : 'sorted ascending'}
|
||||
</Box>
|
||||
) : null}
|
||||
</TableSortLabel>
|
||||
</TableCell>
|
||||
))}
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
);
|
||||
}
|
||||
|
||||
export default function ClientTable() {
|
||||
const [order, setOrder] = useState<Order>('asc');
|
||||
const [orderBy, setOrderBy] = useState<keyof Data | string>('status');
|
||||
const [selected, setSelected] = useState<readonly string[]>([]);
|
||||
const [page, setPage] = useState<number>(0);
|
||||
const [dense, setDense] = useState<boolean>(false);
|
||||
const [rowsPerPage, setRowsPerPage] = useState<number>(5);
|
||||
|
||||
const handleRequestSort = (
|
||||
event: React.MouseEvent<unknown>,
|
||||
property: keyof Data,
|
||||
) => {
|
||||
const isAsc = orderBy === property && order === 'asc';
|
||||
setOrder(isAsc ? 'desc' : 'asc');
|
||||
setOrderBy(property);
|
||||
};
|
||||
|
||||
const handleSelectAllClick = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
if (event.target.checked) {
|
||||
const newSelecteds = rows.map((n) => n.name);
|
||||
setSelected(newSelecteds);
|
||||
return;
|
||||
}
|
||||
setSelected([]);
|
||||
};
|
||||
|
||||
const handleClick = (event: React.MouseEvent<unknown>, code: string) => {
|
||||
const selectedIndex = selected.indexOf(code);
|
||||
let newSelected: readonly string[] = [];
|
||||
|
||||
if (selectedIndex === -1) {
|
||||
newSelected = newSelected.concat(selected, code);
|
||||
} else if (selectedIndex === 0) {
|
||||
newSelected = newSelected.concat(selected.slice(1));
|
||||
} else if (selectedIndex === selected.length - 1) {
|
||||
newSelected = newSelected.concat(selected.slice(0, -1));
|
||||
} else if (selectedIndex > 0) {
|
||||
newSelected = newSelected.concat(
|
||||
selected.slice(0, selectedIndex),
|
||||
selected.slice(selectedIndex + 1),
|
||||
);
|
||||
}
|
||||
|
||||
setSelected(newSelected);
|
||||
};
|
||||
|
||||
const handleChangePage = (event: unknown, newPage: number) => {
|
||||
setPage(newPage);
|
||||
};
|
||||
|
||||
const handleChangeRowsPerPage = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setRowsPerPage(parseInt(event.target.value, 10));
|
||||
setPage(0);
|
||||
};
|
||||
|
||||
const isSelected = (code: any) => selected.indexOf(code.toString()) !== -1;
|
||||
|
||||
// Avoid a layout jump when reaching the last page with empty rows.
|
||||
const emptyRows =
|
||||
page > 0 ? Math.max(0, (1 + page) * rowsPerPage - rows.length) : 0;
|
||||
|
||||
return (
|
||||
<ClientTableView>
|
||||
<Paper sx={{ width: '100%', mb: 2 }}>
|
||||
<TableContainer>
|
||||
<Table
|
||||
sx={{ minWidth: 750 }}
|
||||
aria-labelledby="tableTitle"
|
||||
size={dense ? 'small' : 'medium'}
|
||||
>
|
||||
<EnhancedTableHead
|
||||
numSelected={selected.length}
|
||||
order={order}
|
||||
orderBy={orderBy}
|
||||
onSelectAllClick={handleSelectAllClick}
|
||||
onRequestSort={handleRequestSort}
|
||||
rowCount={rows.length}
|
||||
/>
|
||||
<TableBody>
|
||||
{stableSort(rows, getComparator(order, orderBy))
|
||||
.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
|
||||
.map((row, index) => {
|
||||
const isItemSelected = isSelected(row.clientCode);
|
||||
const labelId = `enhanced-table-checkbox-${index}`;
|
||||
|
||||
return (
|
||||
<TableRow
|
||||
hover
|
||||
onClick={(event) => handleClick(event, row.clientCode.toString())}
|
||||
role="checkbox"
|
||||
aria-checked={isItemSelected}
|
||||
tabIndex={-1}
|
||||
key={row.clientCode}
|
||||
selected={isItemSelected}
|
||||
>
|
||||
<TableCell padding="checkbox">
|
||||
<Checkbox
|
||||
color="primary"
|
||||
checked={isItemSelected}
|
||||
inputProps={{
|
||||
'aria-labelledby': labelId,
|
||||
}}
|
||||
/>
|
||||
</TableCell>
|
||||
<TableCell
|
||||
component="th"
|
||||
id={labelId}
|
||||
scope="row"
|
||||
padding="none"
|
||||
>
|
||||
Unidade - {row.clientCode}
|
||||
</TableCell>
|
||||
<TableCell align="left">{row.name}</TableCell>
|
||||
<TableCell align="left">{row.unity}button</TableCell>
|
||||
<TableCell align="left"><StyledStatus status={row.status}>{row.status}</StyledStatus></TableCell>
|
||||
</TableRow>
|
||||
);
|
||||
})}
|
||||
{emptyRows > 0 && (
|
||||
<TableRow
|
||||
style={{
|
||||
height: (dense ? 33 : 53) * emptyRows,
|
||||
}}
|
||||
>
|
||||
<TableCell colSpan={6} />
|
||||
</TableRow>
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
<TablePagination
|
||||
rowsPerPageOptions={[5, 10, 25]}
|
||||
component="div"
|
||||
count={rows.length}
|
||||
rowsPerPage={rowsPerPage}
|
||||
page={page}
|
||||
onPageChange={handleChangePage}
|
||||
onRowsPerPageChange={handleChangeRowsPerPage}
|
||||
/>
|
||||
</Paper>
|
||||
</ClientTableView>
|
||||
);
|
||||
}
|
||||
62
src/components/administrativeTables/ClientsTableView.ts
Normal file
62
src/components/administrativeTables/ClientsTableView.ts
Normal file
@ -0,0 +1,62 @@
|
||||
import styled from "styled-components";
|
||||
|
||||
export const ClientTableView = styled.main`
|
||||
width: 100%;
|
||||
|
||||
color: #6A707E;
|
||||
|
||||
thead {
|
||||
border-radius: 16px;
|
||||
background-color: #f9f9f9;
|
||||
|
||||
th {
|
||||
font-size: 12px;
|
||||
font-family: 'inter';
|
||||
font-weight: 800;
|
||||
font-style: italic;
|
||||
}
|
||||
}
|
||||
tbody {
|
||||
border-radius: 16px;
|
||||
tr {
|
||||
th {
|
||||
font-family: 'poppins';
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
color: #6A707E;
|
||||
}
|
||||
|
||||
td {
|
||||
:nth-child(3) {
|
||||
font-family: 'poppins';
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
color: #6A707E;
|
||||
}
|
||||
:nth-child(4) {
|
||||
font-family: 'poppins';
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
color: #828282;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`
|
||||
|
||||
export const StyledStatus = styled.div<{status: any}>`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
width: 72px;
|
||||
height: 31px;
|
||||
|
||||
border-radius: 8px;
|
||||
|
||||
background-color: ${props => props.status == 'ativo'? '#F0FFF8' : props.status == 'pendente'? '#FEFFE5' : '#FFF0F0'};
|
||||
color: ${props => props.status == 'ativo'? '#18AB56' : props.status == 'pendente'? '#FFBC10' : '#EB5757'};
|
||||
|
||||
text-decoration: none!important;;
|
||||
`
|
||||
317
src/components/administrativeTables/FaqTable.tsx
Normal file
317
src/components/administrativeTables/FaqTable.tsx
Normal file
@ -0,0 +1,317 @@
|
||||
import DeleteIcon from '@mui/icons-material/Delete';
|
||||
import FilterListIcon from '@mui/icons-material/FilterList';
|
||||
import Box from '@mui/material/Box';
|
||||
import Checkbox from '@mui/material/Checkbox';
|
||||
import FormControlLabel from '@mui/material/FormControlLabel';
|
||||
import IconButton from '@mui/material/IconButton';
|
||||
import Paper from '@mui/material/Paper';
|
||||
import { alpha } from '@mui/material/styles';
|
||||
import Switch from '@mui/material/Switch';
|
||||
import Table from '@mui/material/Table';
|
||||
import TableBody from '@mui/material/TableBody';
|
||||
import TableCell from '@mui/material/TableCell';
|
||||
import TableContainer from '@mui/material/TableContainer';
|
||||
import TableHead from '@mui/material/TableHead';
|
||||
import TablePagination from '@mui/material/TablePagination';
|
||||
import TableRow from '@mui/material/TableRow';
|
||||
import TableSortLabel from '@mui/material/TableSortLabel';
|
||||
import { visuallyHidden } from '@mui/utils';
|
||||
import { GetServerSideProps } from 'next';
|
||||
import React, { useState } from 'react';
|
||||
import getAPIClient from '../../services/ssrApi';
|
||||
|
||||
import { ClientTableView, StyledStatus } from './ClientsTableView';
|
||||
|
||||
interface Data {
|
||||
question: string,
|
||||
answer: string,
|
||||
status: string,
|
||||
}
|
||||
|
||||
function createData(
|
||||
question: string,
|
||||
answer: string,
|
||||
status: string,
|
||||
): Data {
|
||||
return {
|
||||
question,
|
||||
answer,
|
||||
status,
|
||||
};
|
||||
}
|
||||
|
||||
const rows = [
|
||||
createData('Como usar o sistema?', 'Você deve usar assim... e assado...', 'ativo'),
|
||||
createData('Como usar o sistema', 'Você deve usar assim... e assado...', 'ativo'),
|
||||
createData('Como usar o sistema?', 'Você deve usar assim... e assado...', 'ativo'),
|
||||
createData('Como usar o sistema?', 'Você deve usar assim... e assado...', 'ativo'),
|
||||
createData('Como usar o sistema?', 'Você deve usar assim... e assado...', 'ativo'),
|
||||
createData('Como usar o sistema?', 'Você deve usar assim... e assado...', 'inativo'),
|
||||
];
|
||||
|
||||
function descendingComparator<T>(a: T, b: T, orderBy: keyof T) {
|
||||
if (b[orderBy] < a[orderBy]) {
|
||||
return -1;
|
||||
}
|
||||
if (b[orderBy] > a[orderBy]) {
|
||||
return 1;
|
||||
}
|
||||
return 0;
|
||||
}
|
||||
|
||||
type Order = 'asc' | 'desc';
|
||||
|
||||
function getComparator<Key extends keyof any>(
|
||||
order: Order,
|
||||
orderBy: Key,
|
||||
): (
|
||||
a: { [key in Key]: any },
|
||||
b: { [key in Key]: any },
|
||||
) => number {
|
||||
return order === 'desc'
|
||||
? (a, b) => descendingComparator(a, b, orderBy)
|
||||
: (a, b) => -descendingComparator(a, b, orderBy);
|
||||
}
|
||||
|
||||
function stableSort<T>(array: readonly T[], comparator: (a: T, b: T) => number) {
|
||||
const stabilizedThis = array.map((el, index) => [el, index] as [T, number]);
|
||||
stabilizedThis.sort((a, b) => {
|
||||
const order = comparator(a[0], b[0]);
|
||||
if (order !== 0) {
|
||||
return order;
|
||||
}
|
||||
return a[1] - b[1];
|
||||
});
|
||||
return stabilizedThis.map((el) => el[0]);
|
||||
}
|
||||
|
||||
interface HeadCell {
|
||||
disablePadding: boolean;
|
||||
id: keyof Data | string;
|
||||
label: string;
|
||||
numeric: boolean;
|
||||
}
|
||||
|
||||
const headCells: readonly HeadCell[] = [
|
||||
{
|
||||
id: 'question',
|
||||
numeric: false,
|
||||
disablePadding: true,
|
||||
label: 'Pergunta',
|
||||
},
|
||||
{
|
||||
id: 'answer',
|
||||
numeric: true,
|
||||
disablePadding: false,
|
||||
label: 'Resposta',
|
||||
},
|
||||
{
|
||||
id: 'status',
|
||||
numeric: true,
|
||||
disablePadding: false,
|
||||
label: 'status',
|
||||
},
|
||||
];
|
||||
|
||||
interface EnhancedTableProps {
|
||||
numSelected: number;
|
||||
onRequestSort: (event: React.MouseEvent<unknown>, property: keyof Data) => void;
|
||||
onSelectAllClick: (event: React.ChangeEvent<HTMLInputElement>) => void;
|
||||
order: Order;
|
||||
orderBy: string;
|
||||
rowCount: number;
|
||||
}
|
||||
|
||||
function EnhancedTableHead(props: EnhancedTableProps) {
|
||||
const { onSelectAllClick, order, orderBy, numSelected, rowCount, onRequestSort } =
|
||||
props;
|
||||
const createSortHandler =
|
||||
(property: any) => (event: React.MouseEvent<unknown>) => {
|
||||
onRequestSort(event, property);
|
||||
};
|
||||
|
||||
return (
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<TableCell padding="checkbox">
|
||||
<Checkbox
|
||||
color="primary"
|
||||
indeterminate={numSelected > 0 && numSelected < rowCount}
|
||||
checked={rowCount > 0 && numSelected === rowCount}
|
||||
onChange={onSelectAllClick}
|
||||
inputProps={{
|
||||
'aria-label': 'select all desserts',
|
||||
}}
|
||||
/>
|
||||
</TableCell>
|
||||
{headCells.map((headCell) => (
|
||||
<TableCell
|
||||
key={headCell.id}
|
||||
align='left'
|
||||
padding={headCell.disablePadding ? 'none' : 'normal'}
|
||||
sortDirection={orderBy === headCell.id ? order : false}
|
||||
>
|
||||
<TableSortLabel
|
||||
active={orderBy === headCell.id}
|
||||
direction={orderBy === headCell.id ? order : 'asc'}
|
||||
onClick={createSortHandler(headCell.id)}
|
||||
>
|
||||
{headCell.label}
|
||||
{orderBy === headCell.id ? (
|
||||
<Box component="span" sx={visuallyHidden}>
|
||||
{order === 'desc' ? 'sorted descending' : 'sorted ascending'}
|
||||
</Box>
|
||||
) : null}
|
||||
</TableSortLabel>
|
||||
</TableCell>
|
||||
))}
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
);
|
||||
}
|
||||
|
||||
export default function FaqTable({questionData}: any) {
|
||||
const [order, setOrder] = useState<Order>('asc');
|
||||
const [orderBy, setOrderBy] = useState<keyof Data | string>('status');
|
||||
const [selected, setSelected] = useState<readonly string[]>([]);
|
||||
const [page, setPage] = useState<number>(0);
|
||||
const [dense, setDense] = useState<boolean>(false);
|
||||
const [rowsPerPage, setRowsPerPage] = useState<number>(5);
|
||||
|
||||
console.table(questionData)
|
||||
console.table(rows)
|
||||
const handleRequestSort = (
|
||||
event: React.MouseEvent<unknown>,
|
||||
property: keyof Data,
|
||||
) => {
|
||||
const isAsc = orderBy === property && order === 'asc';
|
||||
setOrder(isAsc ? 'desc' : 'asc');
|
||||
setOrderBy(property);
|
||||
};
|
||||
|
||||
const handleSelectAllClick = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
if (event.target.checked) {
|
||||
const newSelecteds = questionData.map((n) => n.id);
|
||||
setSelected(newSelecteds);
|
||||
return;
|
||||
}
|
||||
setSelected([]);
|
||||
};
|
||||
|
||||
const handleClick = (event: React.MouseEvent<unknown>, name: string) => {
|
||||
const selectedIndex = selected.indexOf(name);
|
||||
let newSelected: readonly string[] = [];
|
||||
|
||||
if (selectedIndex === -1) {
|
||||
newSelected = newSelected.concat(selected, name);
|
||||
} else if (selectedIndex === 0) {
|
||||
newSelected = newSelected.concat(selected.slice(1));
|
||||
} else if (selectedIndex === selected.length - 1) {
|
||||
newSelected = newSelected.concat(selected.slice(0, -1));
|
||||
} else if (selectedIndex > 0) {
|
||||
newSelected = newSelected.concat(
|
||||
selected.slice(0, selectedIndex),
|
||||
selected.slice(selectedIndex + 1),
|
||||
);
|
||||
}
|
||||
|
||||
setSelected(newSelected);
|
||||
};
|
||||
|
||||
const handleChangePage = (event: unknown, newPage: number) => {
|
||||
setPage(newPage);
|
||||
};
|
||||
|
||||
const handleChangeRowsPerPage = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setRowsPerPage(parseInt(event.target.value, 10));
|
||||
setPage(0);
|
||||
};
|
||||
|
||||
const isSelected = (name: string) => selected.indexOf(name) !== -1;
|
||||
|
||||
// Avoid a layout jump when reaching the last page with empty rows.
|
||||
const emptyRows =
|
||||
page > 0 ? Math.max(0, (1 + page) * rowsPerPage - rows.length) : 0;
|
||||
|
||||
return (
|
||||
<ClientTableView>
|
||||
<Paper sx={{ width: '100%', mb: 2 }}>
|
||||
<TableContainer>
|
||||
<Table
|
||||
sx={{ minWidth: 750 }}
|
||||
aria-labelledby="tableTitle"
|
||||
size={dense ? 'small' : 'medium'}
|
||||
>
|
||||
<EnhancedTableHead
|
||||
numSelected={selected.length}
|
||||
order={order}
|
||||
orderBy={orderBy}
|
||||
onSelectAllClick={handleSelectAllClick}
|
||||
onRequestSort={handleRequestSort}
|
||||
rowCount={questionData.length}
|
||||
/>
|
||||
<TableBody>
|
||||
{stableSort(questionData, getComparator(order, orderBy))
|
||||
.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
|
||||
.map((row, index) => {
|
||||
const isItemSelected = isSelected(row.id);
|
||||
const labelId = `enhanced-table-checkbox-${index}`;
|
||||
|
||||
return (
|
||||
<TableRow
|
||||
hover
|
||||
onClick={(event) => handleClick(event, row.id)}
|
||||
role="checkbox"
|
||||
aria-checked={isItemSelected}
|
||||
tabIndex={-1}
|
||||
key={row.id}
|
||||
selected={isItemSelected}
|
||||
>
|
||||
<TableCell padding="checkbox">
|
||||
<Checkbox
|
||||
color="primary"
|
||||
checked={isItemSelected}
|
||||
inputProps={{
|
||||
'aria-labelledby': labelId,
|
||||
}}
|
||||
/>
|
||||
</TableCell>
|
||||
<TableCell
|
||||
component="th"
|
||||
id={labelId}
|
||||
scope="row"
|
||||
padding="none"
|
||||
>
|
||||
{row.question}
|
||||
</TableCell>
|
||||
<TableCell align="left">{row.answer}</TableCell>
|
||||
<TableCell align="left"><StyledStatus status={row.deleted_at? 'ativo' : 'inativo'}> {row.deleted_at? 'ativo' : 'inativo'}</StyledStatus></TableCell>
|
||||
</TableRow>
|
||||
);
|
||||
})}
|
||||
{emptyRows > 0 && (
|
||||
<TableRow
|
||||
style={{
|
||||
height: (dense ? 33 : 53) * emptyRows,
|
||||
}}
|
||||
>
|
||||
<TableCell colSpan={6} />
|
||||
</TableRow>
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
<TablePagination
|
||||
rowsPerPageOptions={[5, 10, 25]}
|
||||
component="div"
|
||||
count={rows.length}
|
||||
rowsPerPage={rowsPerPage}
|
||||
page={page}
|
||||
onPageChange={handleChangePage}
|
||||
onRowsPerPageChange={handleChangeRowsPerPage}
|
||||
/>
|
||||
</Paper>
|
||||
</ClientTableView>
|
||||
);
|
||||
}
|
||||
|
||||
330
src/components/administrativeTables/NotificationsTable.tsx
Normal file
330
src/components/administrativeTables/NotificationsTable.tsx
Normal file
@ -0,0 +1,330 @@
|
||||
import DeleteIcon from '@mui/icons-material/Delete';
|
||||
import FilterListIcon from '@mui/icons-material/FilterList';
|
||||
import Box from '@mui/material/Box';
|
||||
import Checkbox from '@mui/material/Checkbox';
|
||||
import FormControlLabel from '@mui/material/FormControlLabel';
|
||||
import IconButton from '@mui/material/IconButton';
|
||||
import Paper from '@mui/material/Paper';
|
||||
import { alpha } from '@mui/material/styles';
|
||||
import Switch from '@mui/material/Switch';
|
||||
import Table from '@mui/material/Table';
|
||||
import TableBody from '@mui/material/TableBody';
|
||||
import TableCell from '@mui/material/TableCell';
|
||||
import TableContainer from '@mui/material/TableContainer';
|
||||
import TableHead from '@mui/material/TableHead';
|
||||
import TablePagination from '@mui/material/TablePagination';
|
||||
import TableRow from '@mui/material/TableRow';
|
||||
import TableSortLabel from '@mui/material/TableSortLabel';
|
||||
import Toolbar from '@mui/material/Toolbar';
|
||||
import Tooltip from '@mui/material/Tooltip';
|
||||
import Typography from '@mui/material/Typography';
|
||||
import { visuallyHidden } from '@mui/utils';
|
||||
import React, { useState, useEffect } from 'react';
|
||||
|
||||
import { ClientTableView, StyledStatus } from './ClientsTableView';
|
||||
|
||||
interface Data {
|
||||
notification: string,
|
||||
client: string,
|
||||
status: string,
|
||||
}
|
||||
|
||||
function createData(
|
||||
notification: string,
|
||||
client: string,
|
||||
status: string,
|
||||
): Data {
|
||||
return {
|
||||
notification,
|
||||
client,
|
||||
status,
|
||||
};
|
||||
}
|
||||
|
||||
const rows = [
|
||||
createData('Confira tal coisa - Texto da notificação', 'Copel', 'enviada'),
|
||||
createData('Confira tal coisa - Texto da notificação', 'Copel', 'enviada'),
|
||||
createData('Confira tal coisa - Texto da notificação', 'Copel', 'enviada'),
|
||||
createData('Confira tal coisa - Texto da notificação', 'Copel', 'falhou'),
|
||||
createData('Confira tal coisa - Texto da notificação', 'Copel', 'pendente'),
|
||||
createData('Confira tal coisa - Texto da notificação', 'Copel', 'enviada'),
|
||||
];
|
||||
|
||||
function descendingComparator<T>(a: T, b: T, orderBy: keyof T) {
|
||||
if (b[orderBy] < a[orderBy]) {
|
||||
return -1;
|
||||
}
|
||||
if (b[orderBy] > a[orderBy]) {
|
||||
return 1;
|
||||
}
|
||||
return 0;
|
||||
}
|
||||
|
||||
type Order = 'asc' | 'desc';
|
||||
|
||||
function getComparator<Key extends keyof any>(
|
||||
order: Order,
|
||||
orderBy: Key,
|
||||
): (
|
||||
a: { [key in Key]: any },
|
||||
b: { [key in Key]: any },
|
||||
) => number {
|
||||
return order === 'desc'
|
||||
? (a, b) => descendingComparator(a, b, orderBy)
|
||||
: (a, b) => -descendingComparator(a, b, orderBy);
|
||||
}
|
||||
|
||||
function stableSort<T>(array: readonly T[], comparator: (a: T, b: T) => number) {
|
||||
const stabilizedThis = array.map((el, index) => [el, index] as [T, number]);
|
||||
stabilizedThis.sort((a, b) => {
|
||||
const order = comparator(a[0], b[0]);
|
||||
if (order !== 0) {
|
||||
return order;
|
||||
}
|
||||
return a[1] - b[1];
|
||||
});
|
||||
return stabilizedThis.map((el) => el[0]);
|
||||
}
|
||||
|
||||
interface HeadCell {
|
||||
disablePadding: boolean;
|
||||
id: keyof Data | string;
|
||||
label: string;
|
||||
numeric: boolean;
|
||||
}
|
||||
|
||||
const headCells: readonly HeadCell[] = [
|
||||
{
|
||||
id: 'notification',
|
||||
numeric: false,
|
||||
disablePadding: true,
|
||||
label: 'notificação',
|
||||
},
|
||||
{
|
||||
id: 'client',
|
||||
numeric: true,
|
||||
disablePadding: false,
|
||||
label: 'cliente',
|
||||
},
|
||||
{
|
||||
id: 'status',
|
||||
numeric: true,
|
||||
disablePadding: false,
|
||||
label: 'status',
|
||||
},
|
||||
];
|
||||
|
||||
interface EnhancedTableProps {
|
||||
numSelected: number;
|
||||
onRequestSort: (event: React.MouseEvent<unknown>, property: keyof Data) => void;
|
||||
onSelectAllClick: (event: React.ChangeEvent<HTMLInputElement>) => void;
|
||||
order: Order;
|
||||
orderBy: string;
|
||||
rowCount: number;
|
||||
}
|
||||
|
||||
function EnhancedTableHead(props: EnhancedTableProps) {
|
||||
const { onSelectAllClick, order, orderBy, numSelected, rowCount, onRequestSort } =
|
||||
props;
|
||||
const createSortHandler =
|
||||
(property: any) => (event: React.MouseEvent<unknown>) => {
|
||||
onRequestSort(event, property);
|
||||
};
|
||||
|
||||
return (
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<TableCell padding="checkbox">
|
||||
<Checkbox
|
||||
color="primary"
|
||||
indeterminate={numSelected > 0 && numSelected < rowCount}
|
||||
checked={rowCount > 0 && numSelected === rowCount}
|
||||
onChange={onSelectAllClick}
|
||||
inputProps={{
|
||||
'aria-label': 'select all desserts',
|
||||
}}
|
||||
/>
|
||||
</TableCell>
|
||||
{headCells.map((headCell) => (
|
||||
<TableCell
|
||||
key={headCell.id}
|
||||
align='left'
|
||||
padding={headCell.disablePadding ? 'none' : 'normal'}
|
||||
sortDirection={orderBy === headCell.id ? order : false}
|
||||
>
|
||||
<TableSortLabel
|
||||
active={orderBy === headCell.id}
|
||||
direction={orderBy === headCell.id ? order : 'asc'}
|
||||
onClick={createSortHandler(headCell.id)}
|
||||
>
|
||||
{headCell.label}
|
||||
{orderBy === headCell.id ? (
|
||||
<Box component="span" sx={visuallyHidden}>
|
||||
{order === 'desc' ? 'sorted descending' : 'sorted ascending'}
|
||||
</Box>
|
||||
) : null}
|
||||
</TableSortLabel>
|
||||
</TableCell>
|
||||
))}
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
);
|
||||
}
|
||||
|
||||
interface NotificationData {
|
||||
title: string,
|
||||
body: string,
|
||||
users: string
|
||||
deleted_at: Date,
|
||||
}
|
||||
|
||||
interface NotificationsTableInterface{
|
||||
notifications: any,
|
||||
onChange: any
|
||||
}
|
||||
|
||||
export default function NotificationsTable({notifications, onChange}: NotificationsTableInterface) {
|
||||
const [order, setOrder] = useState<Order>('asc');
|
||||
const [orderBy, setOrderBy] = useState<keyof Data | string>('status');
|
||||
const [selected, setSelected] = useState<readonly string[]>([]);
|
||||
const [page, setPage] = useState<number>(0);
|
||||
const [dense, setDense] = useState<boolean>(false);
|
||||
const [rowsPerPage, setRowsPerPage] = useState<number>(5);
|
||||
|
||||
const handleRequestSort = (
|
||||
event: React.MouseEvent<unknown>,
|
||||
property: keyof Data,
|
||||
) => {
|
||||
const isAsc = orderBy === property && order === 'asc';
|
||||
setOrder(isAsc ? 'desc' : 'asc');
|
||||
setOrderBy(property);
|
||||
};
|
||||
|
||||
const handleSelectAllClick = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
if (event.target.checked) {
|
||||
const newSelecteds = notifications.map((n) => n.id.toString());
|
||||
setSelected(newSelecteds);
|
||||
return;
|
||||
}
|
||||
setSelected([]);
|
||||
};
|
||||
|
||||
const handleClick = (event: React.MouseEvent<unknown>, name: string) => {
|
||||
const selectedIndex = selected.indexOf(name);
|
||||
let newSelected: readonly string[] = [];
|
||||
|
||||
if (selectedIndex === -1) {
|
||||
newSelected = newSelected.concat(selected, name);
|
||||
} else if (selectedIndex === 0) {
|
||||
newSelected = newSelected.concat(selected.slice(1));
|
||||
} else if (selectedIndex === selected.length - 1) {
|
||||
newSelected = newSelected.concat(selected.slice(0, -1));
|
||||
} else if (selectedIndex > 0) {
|
||||
newSelected = newSelected.concat(
|
||||
selected.slice(0, selectedIndex),
|
||||
selected.slice(selectedIndex + 1),
|
||||
);
|
||||
}
|
||||
|
||||
setSelected(newSelected);
|
||||
};
|
||||
|
||||
const handleChangePage = (event: unknown, newPage: number) => {
|
||||
setPage(newPage);
|
||||
};
|
||||
|
||||
const handleChangeRowsPerPage = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setRowsPerPage(parseInt(event.target.value, 10));
|
||||
setPage(0);
|
||||
};
|
||||
|
||||
const isSelected = (name: string) => selected.indexOf(name) !== -1;
|
||||
|
||||
// Avoid a layout jump when reaching the last page with empty rows.
|
||||
const emptyRows = page > 0 ? Math.max(0, (1 + page) * rowsPerPage - notifications.length) : 0;
|
||||
|
||||
useEffect(() => {
|
||||
onChange(selected)
|
||||
}, [selected])
|
||||
|
||||
return (
|
||||
<ClientTableView>
|
||||
<Paper sx={{ width: '100%', mb: 2 }}>
|
||||
<TableContainer>
|
||||
<Table
|
||||
sx={{ minWidth: 750 }}
|
||||
aria-labelledby="tableTitle"
|
||||
size={dense ? 'small' : 'medium'}
|
||||
>
|
||||
<EnhancedTableHead
|
||||
numSelected={selected.length}
|
||||
order={order}
|
||||
orderBy={orderBy}
|
||||
onSelectAllClick={handleSelectAllClick}
|
||||
onRequestSort={handleRequestSort}
|
||||
rowCount={notifications.length}
|
||||
/>
|
||||
<TableBody>
|
||||
{stableSort(notifications, getComparator(order, orderBy))
|
||||
.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
|
||||
.map((row, index) => {
|
||||
const isItemSelected = isSelected(row.id.toString());
|
||||
const labelId = `enhanced-table-checkbox-${index}`;
|
||||
|
||||
return (
|
||||
<TableRow
|
||||
hover
|
||||
onClick={(event) => handleClick(event, row.id.toString())}
|
||||
role="checkbox"
|
||||
aria-checked={isItemSelected}
|
||||
tabIndex={-1}
|
||||
key={index}
|
||||
selected={isItemSelected}
|
||||
>
|
||||
<TableCell padding="checkbox">
|
||||
<Checkbox
|
||||
color="primary"
|
||||
checked={isItemSelected}
|
||||
inputProps={{
|
||||
'aria-labelledby': labelId,
|
||||
}}
|
||||
/>
|
||||
</TableCell>
|
||||
<TableCell
|
||||
component="th"
|
||||
id={labelId}
|
||||
scope="row"
|
||||
padding="none"
|
||||
>
|
||||
{row.title}
|
||||
</TableCell>
|
||||
<TableCell align="left">{'copel'}</TableCell>
|
||||
<TableCell align="left"><StyledStatus status={row.deleted_at===null? 'ativo' : 'inativo'}>{row.deleted_at===null? 'ativo' : 'inativo'}</StyledStatus></TableCell>
|
||||
</TableRow>
|
||||
);
|
||||
})}
|
||||
{emptyRows > 0 && (
|
||||
<TableRow
|
||||
style={{
|
||||
height: (dense ? 33 : 53) * emptyRows,
|
||||
}}
|
||||
>
|
||||
<TableCell colSpan={6} />
|
||||
</TableRow>
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
<TablePagination
|
||||
rowsPerPageOptions={[5, 10, 25]}
|
||||
component="div"
|
||||
count={notifications.length}
|
||||
rowsPerPage={rowsPerPage}
|
||||
page={page}
|
||||
onPageChange={handleChangePage}
|
||||
onRowsPerPageChange={handleChangeRowsPerPage}
|
||||
/>
|
||||
</Paper>
|
||||
</ClientTableView>
|
||||
);
|
||||
}
|
||||
14
src/components/buttons/faqButton/FaqButton1.tsx
Normal file
14
src/components/buttons/faqButton/FaqButton1.tsx
Normal file
@ -0,0 +1,14 @@
|
||||
import React from 'react'
|
||||
|
||||
import { FaqButtonView1 } from './FaqButtonView1'
|
||||
|
||||
interface FaqButtonInterface {
|
||||
title: string
|
||||
onClick: () => void
|
||||
}
|
||||
|
||||
export default function FaqButton1({title, onClick}: FaqButtonInterface) {
|
||||
return (
|
||||
<FaqButtonView1 onClick={() => onClick()}>{title}</FaqButtonView1>
|
||||
)
|
||||
}
|
||||
14
src/components/buttons/faqButton/FaqButton2.tsx
Normal file
14
src/components/buttons/faqButton/FaqButton2.tsx
Normal file
@ -0,0 +1,14 @@
|
||||
import React from 'react'
|
||||
|
||||
import { FaqButtonView2 } from './FaqButtonView2'
|
||||
|
||||
interface FaqButtonInterface {
|
||||
title: string
|
||||
onClick: () => void
|
||||
}
|
||||
|
||||
export default function FaqButton2({title, onClick}: FaqButtonInterface) {
|
||||
return (
|
||||
<FaqButtonView2 onClick={() => onClick()}>{title}</FaqButtonView2>
|
||||
)
|
||||
}
|
||||
21
src/components/buttons/faqButton/FaqButtonView1.ts
Normal file
21
src/components/buttons/faqButton/FaqButtonView1.ts
Normal file
@ -0,0 +1,21 @@
|
||||
import styled from 'styled-components'
|
||||
|
||||
export const FaqButtonView1 = styled.button`
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: 10px;
|
||||
margin-left: 65px;
|
||||
width: 350px;
|
||||
height: 45px;
|
||||
cursor: pointer;
|
||||
background: #DDDDDD;
|
||||
border-radius: 8px;
|
||||
border-style: none;
|
||||
|
||||
font-family: 'Poppins';
|
||||
font-size: 90%;
|
||||
|
||||
|
||||
color: #6A707E;
|
||||
`
|
||||
22
src/components/buttons/faqButton/FaqButtonView2.ts
Normal file
22
src/components/buttons/faqButton/FaqButtonView2.ts
Normal file
@ -0,0 +1,22 @@
|
||||
import styled from 'styled-components'
|
||||
|
||||
export const FaqButtonView2 = styled.button`
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: -46px;
|
||||
margin-left: 430px;
|
||||
width: 350px;
|
||||
height: 45px;
|
||||
cursor: pointer;
|
||||
background: #254F7F;
|
||||
border-radius: 8px;
|
||||
border-style: none;
|
||||
|
||||
font-family: 'Poppins';
|
||||
font-size: 90%;
|
||||
|
||||
|
||||
|
||||
color: #FFFFFF;
|
||||
`
|
||||
@ -1,20 +1,21 @@
|
||||
import React from 'react'
|
||||
import Link from 'next/link'
|
||||
import React from 'react'
|
||||
|
||||
import RenderIf from '../../../utils/renderIf'
|
||||
import { LoginButtonView } from './LoginButtonView'
|
||||
|
||||
interface LoginButtonInterface {
|
||||
title: string,
|
||||
link?: boolean | undefined,
|
||||
onClick?: () => void
|
||||
onClick: () => void
|
||||
}
|
||||
|
||||
export default function LoginButton({ title, link, onClick }: LoginButtonInterface) {
|
||||
return (
|
||||
<>
|
||||
<RenderIf isTrue={link? true : false}>
|
||||
<Link href='/dashboard' >
|
||||
<LoginButtonView>
|
||||
<Link href='/dashboard'>
|
||||
<LoginButtonView onClick={() => onClick()}>
|
||||
{title}
|
||||
</LoginButtonView>
|
||||
</Link>
|
||||
|
||||
@ -1,21 +1,27 @@
|
||||
import React, { useState } from 'react'
|
||||
import Image from 'next/image'
|
||||
|
||||
import getAPIClient from '../../services/ssrApi';
|
||||
import { FaqQuestionsCardBody, FaqQuestionsCardHeader, CommonQuestionsCardView } from './FaqQuestionsCardView'
|
||||
|
||||
export default function CommonsQuestionsCard() {
|
||||
interface CommonsQuestionsCardInterface {
|
||||
question: string,
|
||||
answer: string,
|
||||
|
||||
}
|
||||
|
||||
export default function CommonsQuestionsCard({question, answer}: CommonsQuestionsCardInterface) {
|
||||
const [ showCardBody, setShowCardBody ] = useState<boolean>(false)
|
||||
return (
|
||||
|
||||
<CommonQuestionsCardView>
|
||||
<FaqQuestionsCardHeader>
|
||||
<h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit?</h4>
|
||||
<h4>{question}</h4>
|
||||
<Image src={showCardBody? '/assets/less-icon.svg' : '/assets/plus-icon.svg' } width={32} height={32} onClick={() => setShowCardBody(!showCardBody)} />
|
||||
</FaqQuestionsCardHeader>
|
||||
|
||||
<FaqQuestionsCardBody showCardBody={showCardBody} >
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
Consequat porta faucibus elementum pharetra varius
|
||||
{answer}
|
||||
</p>
|
||||
</FaqQuestionsCardBody>
|
||||
</CommonQuestionsCardView>
|
||||
|
||||
@ -1,18 +1,11 @@
|
||||
import React from 'react';
|
||||
import {
|
||||
Chart as ChartJS,
|
||||
CategoryScale,
|
||||
LinearScale,
|
||||
BarElement,
|
||||
Title,
|
||||
Tooltip,
|
||||
Legend,
|
||||
} from 'chart.js';
|
||||
import { Bar } from 'react-chartjs-2';
|
||||
import { BarElement, CategoryScale, Chart as ChartJS, Legend, LinearScale, Title, Tooltip } from 'chart.js';
|
||||
import ChartDataLabels from 'chartjs-plugin-datalabels';
|
||||
import { ChartView } from './ChartView';
|
||||
import ChartTitle from './ChartTitle';
|
||||
import { draw, generate } from 'patternomaly'
|
||||
import React from 'react';
|
||||
import { Bar } from 'react-chartjs-2';
|
||||
|
||||
import ChartTitle from './ChartTitle';
|
||||
import { ChartView } from './ChartView';
|
||||
|
||||
ChartJS.register(
|
||||
CategoryScale,
|
||||
@ -57,8 +50,6 @@ export function SingleBar({ title, subtitle, dataProps, label, dataset, dataset1
|
||||
const percentage = (value*100 / sum).toFixed(0)+"%";
|
||||
const result = `${value}\n ${percentage}`
|
||||
|
||||
console.log(value)
|
||||
|
||||
return value==null? null : result
|
||||
},
|
||||
display: true,
|
||||
|
||||
@ -1,8 +1,7 @@
|
||||
import React from 'react'
|
||||
import Image from 'next/image';
|
||||
|
||||
import TextField from '@mui/material/TextField';
|
||||
import Avatar from '@mui/material/Avatar';
|
||||
import TextField from '@mui/material/TextField';
|
||||
import Image from 'next/image';
|
||||
import React from 'react'
|
||||
|
||||
import { HeaderView } from './HeaderView'
|
||||
|
||||
@ -38,7 +37,6 @@ interface headerInterface {
|
||||
}
|
||||
|
||||
export default function Header({ name }: headerInterface) {
|
||||
|
||||
return (
|
||||
<HeaderView>
|
||||
<section>
|
||||
@ -53,9 +51,11 @@ export default function Header({ name }: headerInterface) {
|
||||
<section>
|
||||
<Image src='/assets/png/copel.png' width={170} height={50} />
|
||||
<div className='icon' >
|
||||
olá, {'josé'}
|
||||
<p>
|
||||
olá, {'josé'}
|
||||
</p>
|
||||
</div>
|
||||
<Avatar {...stringAvatar('José Corte')} />
|
||||
<Avatar {...stringAvatar('José Corte')} style={{border: 'white solid 4px', width: '47px', height: '47px'}}/>
|
||||
</section>
|
||||
</HeaderView>
|
||||
)
|
||||
|
||||
@ -11,58 +11,32 @@ export const HeaderView = styled.header`
|
||||
section {
|
||||
width: 30%;
|
||||
|
||||
|
||||
:last-child {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: flex-start;
|
||||
align-items: center;
|
||||
|
||||
height: fit-content;
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
position: relative;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
justify-content: flex-start;
|
||||
|
||||
width: 150px;
|
||||
min-width: 120px;
|
||||
height: 40px;
|
||||
|
||||
border-radius: 8px;
|
||||
border-radius: 8px 0 0 8px;
|
||||
|
||||
background-color: #254F7F;
|
||||
color: white;
|
||||
|
||||
transform: translateX(12%);
|
||||
transform: translateX(16px);
|
||||
|
||||
::after {
|
||||
content: "";
|
||||
position: relative;
|
||||
left: 2.5rem;
|
||||
background-color: #fff;
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1020px) {
|
||||
.icon {
|
||||
display: none;
|
||||
}
|
||||
section {
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1640px) {
|
||||
.icon {
|
||||
transform: translateX(6%);
|
||||
}
|
||||
input {
|
||||
height: 2rem;
|
||||
p{
|
||||
color: white;
|
||||
margin-left: 15%;
|
||||
}
|
||||
}
|
||||
`
|
||||
|
||||
50
src/components/inputUplaod/inputUpload.tsx
Normal file
50
src/components/inputUplaod/inputUpload.tsx
Normal file
@ -0,0 +1,50 @@
|
||||
import React,{ useState, useEffect } from 'react'
|
||||
|
||||
import { InputUploadView } from './inputUploadView'
|
||||
|
||||
|
||||
export default function InputUpload() {
|
||||
const [images, setImages] = useState([] as any);
|
||||
const [imageURLS, setImageURLs] = useState([]);
|
||||
|
||||
useEffect(() => {
|
||||
if (images.length < 1) return;
|
||||
const newImageUrls: any = [];
|
||||
images.forEach((image:any) => newImageUrls.push(URL.createObjectURL(image)));
|
||||
setImageURLs(newImageUrls);
|
||||
}, [images]);
|
||||
|
||||
function onImageChange(e: any) {
|
||||
setImages([...e.target.files]);
|
||||
console.log(e);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<InputUploadView>
|
||||
|
||||
<div className='imgContainer'>
|
||||
<article>
|
||||
{imageURLS.map((imageSrc) => (
|
||||
<img className="image" src={imageSrc} alt="not fount" />
|
||||
))}
|
||||
|
||||
</article>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div className="update">
|
||||
<form action="">
|
||||
<div >
|
||||
<label htmlFor="arquivo"> <p className='TitleButton'> Enviar foto de Perfil </p> </label>
|
||||
<input type="file" name='arquivo' id='arquivo' onChange={onImageChange} />
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
</InputUploadView>
|
||||
)
|
||||
}
|
||||
57
src/components/inputUplaod/inputUploadView.ts
Normal file
57
src/components/inputUplaod/inputUploadView.ts
Normal file
@ -0,0 +1,57 @@
|
||||
import styled from 'styled-components'
|
||||
|
||||
export const InputUploadView = styled.button`
|
||||
width: 350px;
|
||||
margin-left: 63px;
|
||||
height: 58px;
|
||||
|
||||
border-radius: 5px;
|
||||
background-color: #fff;
|
||||
border: 1px solid #adacac;
|
||||
|
||||
|
||||
margin-top: 13px;
|
||||
|
||||
.imgContainer{
|
||||
max-width: 40px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
input[type="file"] {
|
||||
display: none;
|
||||
|
||||
}
|
||||
label {
|
||||
width: 169px;
|
||||
height: 30px;
|
||||
border-radius: 4px;
|
||||
background-color: #254F7F;
|
||||
color: white;
|
||||
margin-left: 3px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
display: flex;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
.image{
|
||||
width:30px;
|
||||
}
|
||||
|
||||
.text{
|
||||
margin-left: 60px;
|
||||
}
|
||||
.update{
|
||||
margin-left: 160px;
|
||||
margin-top: -29px;
|
||||
}
|
||||
.TitleButton{
|
||||
margin-left: 9px;
|
||||
margin-top: 6px;
|
||||
font-family: 'Poppins';
|
||||
}
|
||||
|
||||
|
||||
|
||||
`
|
||||
50
src/components/modal/ConfirmModal.tsx
Normal file
50
src/components/modal/ConfirmModal.tsx
Normal file
@ -0,0 +1,50 @@
|
||||
import { ReactJSXElement } from '@emotion/react/types/jsx-namespace';
|
||||
import Box from '@mui/material/Box';
|
||||
import Button from '@mui/material/Button';
|
||||
import Modal from '@mui/material/Modal';
|
||||
import Typography from '@mui/material/Typography';
|
||||
import * as React from 'react';
|
||||
import { useEffect } from 'react';
|
||||
|
||||
const style = {
|
||||
// eslint-disable-next-line @typescript-eslint/prefer-as-const
|
||||
position: 'absolute' as 'absolute',
|
||||
top: '50%',
|
||||
left: '50%',
|
||||
transform: 'translate(-50%, -50%)',
|
||||
width: '30%',
|
||||
height: '30%',
|
||||
bgcolor: 'background.paper',
|
||||
border: '2px solid #254F7F',
|
||||
boxShadow: 24,
|
||||
p: 4,
|
||||
};
|
||||
|
||||
interface ConfirmModalInterface{
|
||||
open: boolean,
|
||||
handleIsClose: (value: any) => void,
|
||||
children: React.ReactNode
|
||||
}
|
||||
|
||||
export default function ConfirmModal({open, handleIsClose, children}: ConfirmModalInterface) {
|
||||
const [openState, setOpenState] = React.useState(false);
|
||||
const handleOpen = () => setOpenState(true);
|
||||
const handleClose = () => {setOpenState(false); handleIsClose(false)}
|
||||
|
||||
useEffect(() => {
|
||||
setOpenState(open)
|
||||
}, [open, openState])
|
||||
|
||||
return (
|
||||
<Modal
|
||||
open={openState}
|
||||
onClose={handleClose}
|
||||
aria-labelledby="modal-modal-title"
|
||||
aria-describedby="modal-modal-description"
|
||||
>
|
||||
<Box sx={style}>
|
||||
{children}
|
||||
</Box>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
@ -13,14 +13,20 @@ const style = {
|
||||
left: '50%',
|
||||
transform: 'translate(-50%, -50%)',
|
||||
width: '80%',
|
||||
height: '80%',
|
||||
height: '550px',
|
||||
bgcolor: 'background.paper',
|
||||
border: '2px solid #000',
|
||||
border: '2px solid #254F7F',
|
||||
boxShadow: 24,
|
||||
p: 4,
|
||||
};
|
||||
|
||||
export default function BasicModal({open, handleIsClose, children}: {open: boolean, handleIsClose: (value: any) => void, children: React.ReactNode}) {
|
||||
interface BasicModalInterface{
|
||||
open: boolean,
|
||||
handleIsClose: (value: any) => void,
|
||||
children: React.ReactNode
|
||||
}
|
||||
|
||||
export default function BasicModal({open, handleIsClose, children}: BasicModalInterface) {
|
||||
const [openState, setOpenState] = React.useState(false);
|
||||
const handleOpen = () => setOpenState(true);
|
||||
const handleClose = () => {setOpenState(false); handleIsClose(false)}
|
||||
|
||||
@ -1,15 +1,15 @@
|
||||
import React, { useState, useEffect } from 'react'
|
||||
import { useRouter } from 'next/router'
|
||||
import Image from 'next/image'
|
||||
import Link from 'next/link'
|
||||
import Box from '@mui/material/Box';
|
||||
import Button from '@mui/material/Button';
|
||||
import Typography from '@mui/material/Typography';
|
||||
import Modal from '@mui/material/Modal';
|
||||
import Stack from '@mui/material/Stack';
|
||||
|
||||
|
||||
import Typography from '@mui/material/Typography';
|
||||
import { GetServerSideProps } from 'next';
|
||||
import Image from 'next/image'
|
||||
import Link from 'next/link'
|
||||
import { useRouter } from 'next/router'
|
||||
import { parseCookies } from 'nookies';
|
||||
import React, { useEffect, useState } from 'react'
|
||||
|
||||
import RenderIf from '../../utils/renderIf';
|
||||
import { SidebarView } from './SidebarView'
|
||||
|
||||
const style = {
|
||||
@ -35,56 +35,99 @@ export default function Sidebar() {
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
const { ['user-role']: role } = parseCookies()
|
||||
|
||||
console.log(role)
|
||||
|
||||
useEffect(() => {
|
||||
setViewModal(false)
|
||||
}, [router.pathname])
|
||||
|
||||
return (
|
||||
<SidebarView economiaDrawer={economiaDrawer} modalOpen={viewModal} >
|
||||
<div className='hamburger' onClick={() => setViewModal(!viewModal)} >
|
||||
<Image src='/assets/hamburgerModal.svg' width={60} height={60} />
|
||||
</div>
|
||||
<div className='imageNext'>
|
||||
<Image src='/assets/logo.svg' width={100} height={100} />
|
||||
</div>
|
||||
<ul>
|
||||
<Link href='/dashboard'><li className={router.pathname=='/dashboard'? 'actualPath' : null} ><Image src='/assets/sidebar/dashboardIcon.svg' width={25} height={25} />{'Visão Geral'}</li></Link>
|
||||
<li onClick={() => setEconomiaDrawer(!economiaDrawer)} className={router.pathname=='/grossSavings' || router.pathname=='/accumulatedSavings' || router.pathname=='/estimatedCost' || router.pathname=='/costIndicator' ? 'actualPath' : null } ><Image src='/assets/sidebar/economyIcon.svg' width={25} height={25} />{'Economia >'}</li>
|
||||
<div className='economiaDrawer drawer' >
|
||||
<Link href='/grossSavings'><li className={router.pathname=='/grossSavings'? 'actualPathDrawer' : null}>Economia Bruta</li></Link>
|
||||
<Link href='/accumulatedSavings'><li className={router.pathname=='/accumulatedSavings'? 'actualPathDrawer' : null}>Economia Acumulada</li></Link>
|
||||
<Link href='/estimatedCost'><li className={router.pathname=='/estimatedCost'? 'actualPathDrawer' : null}>Custo Estimado</li></Link>
|
||||
<Link href='/costIndicator'><li className={router.pathname=='/costIndicator'? 'actualPathDrawer' : null}>Custo R/MWh</li></Link>
|
||||
<>
|
||||
<RenderIf isTrue={role === '1'}>
|
||||
<SidebarView economiaDrawer={economiaDrawer} modalOpen={viewModal} >
|
||||
<div className='hamburger' onClick={() => setViewModal(!viewModal)} >
|
||||
<Image src='/assets/hamburgerModal.svg' width={60} height={60} />
|
||||
</div>
|
||||
<Link href='/telemetria'><li className={router.pathname=='/telemetria'? 'actualPath' : null}><Image src='/assets/sidebar/telemetryIcon.svg' width={25} height={25} />{'Telemetria >'}</li></Link>
|
||||
<Link href='/resumoOperacao'><li className={router.pathname=='/resumoOperacao'? 'actualPath' : null} ><Image src='/assets/sidebar/summaryOperationsIcon.svg' width={25} height={25} />{'Resumo de Op. '}</li></Link>
|
||||
<Link href='/news'><li className={router.pathname=='/news'? 'actualPath' : null}><Image src='/assets/sidebar/newsIcon.svg' width={25} height={25} />{'Notícias >'}</li></Link>
|
||||
<Link href='/pld'><li className={router.pathname=='/pld'? 'actualPath' : null}><Image src='/assets/sidebar/newsIcon.svg' width={25} height={25} />{'PLD >'}</li></Link>
|
||||
<Link href='/industryInfo'><li className={router.pathname=='/industryInfo'? 'actualPath' : null}><Image src='/assets/sidebar/sectorialInfoIcon.svg' width={25} height={25} />{'Info Setorial >'}</li></Link>
|
||||
{/* <Link href='/consumption'><li className={router.pathname=='/consumption'? 'actualPath' : null} ><Image src='/assets/sidebar/consumptionIcon.svg' width={25} height={25} />{'Consumo'}</li></Link> */}
|
||||
<Link href='/notifications'><li className={router.pathname=='/notifications'? 'actualPath' : null}><Image src='/assets/sidebar/notificationsIcon.svg' width={25} height={25} />{'Notificações >'}<div className='notification'><p>25</p></div></li></Link>
|
||||
<Link href='/aboutUs'><li className={router.pathname=='/aboutUs'? 'actualPath' : null}><Image src='/assets/sidebar/aboutUs.svg' width={25} height={25} />{'Sobre Nós >'}</li></Link>
|
||||
<Link href='/faq'><li className={router.pathname=='/faq'? 'actualPath' : null}><Image src='/assets/sidebar/saqIcon.svg' width={25} height={25} />{'FAQ >'}</li></Link>
|
||||
<button onClick={handleOpen}><Image src='/assets/logout.svg' width={25} height={25} />{'Sair'}</button>
|
||||
<Modal
|
||||
open={open}
|
||||
onClose={handleClose}
|
||||
aria-labelledby="modal-modal-title"
|
||||
aria-describedby="modal-modal-description"
|
||||
>
|
||||
<Box sx={style}>
|
||||
<Typography id="modal-modal-title" variant="h6" component="h2">
|
||||
Deseja realmente sair ?
|
||||
</Typography>
|
||||
<Link href='/'><Button variant="contained" sx={{mt:5}}>Sim</Button></Link>
|
||||
<Button variant="contained" onClick={handleClose} color="error" sx={{mt:5 ,ml:1}}>Não</Button>
|
||||
</Box>
|
||||
</Modal>
|
||||
</ul>
|
||||
<aside>
|
||||
<p>Nossos Gerentes estão prontos para atendê-los</p>
|
||||
<div><h3>+55(41) 3012-5900</h3></div>
|
||||
</aside>
|
||||
</SidebarView>
|
||||
<div className='imageNext'>
|
||||
<Image src='/assets/logo.svg' width={100} height={100} />
|
||||
</div>
|
||||
<ul>
|
||||
<Link href='/administrative/clients'><li className={router.pathname=='/administrative' ? 'actualPath' : null } ><Image src='/assets/sidebar/economyIcon.svg' width={25} height={25} />{'Clientes >'}</li></Link>
|
||||
<Link href='/administrative/general'><li className={router.pathname=='/administrative/general'? 'actualPath' : null} ><Image src='/assets/sidebar/dashboardIcon.svg' width={25} height={25} />{'Visão Geral'}</li></Link>
|
||||
<Link href='/administrative/faq'><li className={router.pathname=='/administrative/faq' ? 'actualPath' : null } ><Image src='/assets/sidebar/saqIcon.svg' width={25} height={25} />{'FAQ >'}</li></Link>
|
||||
<Link href='/administrative/notification'><li className={router.pathname=='/administrative/notifications'? 'actualPath' : null}><Image src='/assets/sidebar/notificationsIcon.svg' width={25} height={25} />{'Notificações >'}<div className='notification'><p>25</p></div></li></Link>
|
||||
<button onClick={handleOpen}><Image src='/assets/logout.svg' width={25} height={25} />{'Sair'}</button>
|
||||
<Modal
|
||||
open={open}
|
||||
onClose={handleClose}
|
||||
aria-labelledby="modal-modal-title"
|
||||
aria-describedby="modal-modal-description"
|
||||
>
|
||||
<Box sx={style}>
|
||||
<Typography id="modal-modal-title" variant="h6" component="h2">
|
||||
Deseja realmente sair ?
|
||||
</Typography>
|
||||
<Link href='/'><Button variant="contained" sx={{mt:5}}>Sim</Button></Link>
|
||||
<Button variant="contained" onClick={handleClose} color="error" sx={{mt:5 ,ml:1}}>Não</Button>
|
||||
</Box>
|
||||
</Modal>
|
||||
</ul>
|
||||
<aside>
|
||||
<p>Nossos Gerentes estão prontos para atendê-los</p>
|
||||
<div><h3>+55(41) 3012-5900</h3></div>
|
||||
</aside>
|
||||
</SidebarView>
|
||||
</RenderIf>
|
||||
<RenderIf isTrue={role === '2'}>
|
||||
<SidebarView economiaDrawer={economiaDrawer} modalOpen={viewModal} >
|
||||
<div className='hamburger' onClick={() => setViewModal(!viewModal)} >
|
||||
<Image src='/assets/hamburgerModal.svg' width={60} height={60} />
|
||||
</div>
|
||||
<div className='imageNext'>
|
||||
<Image src='/assets/logo.svg' width={100} height={100} />
|
||||
</div>
|
||||
<ul>
|
||||
<Link href='/dashboard'><li className={router.pathname=='/dashboard'? 'actualPath' : null} ><Image src='/assets/sidebar/dashboardIcon.svg' width={25} height={25} />{'Visão Geral'}</li></Link>
|
||||
<li onClick={() => setEconomiaDrawer(!economiaDrawer)} className={router.pathname=='/grossSavings' || router.pathname=='/accumulatedSavings' || router.pathname=='/estimatedCost' || router.pathname=='/costIndicator' ? 'actualPath' : null } ><Image src='/assets/sidebar/economyIcon.svg' width={25} height={25} />{'Economia >'}</li>
|
||||
<div className='economiaDrawer drawer' >
|
||||
<Link href='/grossSavings'><li className={router.pathname=='/grossSavings'? 'actualPathDrawer' : null}>Economia Bruta</li></Link>
|
||||
<Link href='/accumulatedSavings'><li className={router.pathname=='/accumulatedSavings'? 'actualPathDrawer' : null}>Economia Acumulada</li></Link>
|
||||
<Link href='/estimatedCost'><li className={router.pathname=='/estimatedCost'? 'actualPathDrawer' : null}>Custo Estimado</li></Link>
|
||||
<Link href='/costIndicator'><li className={router.pathname=='/costIndicator'? 'actualPathDrawer' : null}>Custo R/MWh</li></Link>
|
||||
</div>
|
||||
<Link href='/telemetria'><li className={router.pathname=='/telemetria'? 'actualPath' : null}><Image src='/assets/sidebar/telemetryIcon.svg' width={25} height={25} />{'Telemetria >'}</li></Link>
|
||||
<Link href='/resumoOperacao'><li className={router.pathname=='/resumoOperacao'? 'actualPath' : null} ><Image src='/assets/sidebar/summaryOperationsIcon.svg' width={25} height={25} />{'Resumo de Op. '}</li></Link>
|
||||
<Link href='/news'><li className={router.pathname=='/news'? 'actualPath' : null}><Image src='/assets/sidebar/newsIcon.svg' width={25} height={25} />{'Notícias >'}</li></Link>
|
||||
<Link href='/pld'><li className={router.pathname=='/pld'? 'actualPath' : null}><Image src='/assets/sidebar/newsIcon.svg' width={25} height={25} />{'PLD >'}</li></Link>
|
||||
<Link href='/industryInfo'><li className={router.pathname=='/industryInfo'? 'actualPath' : null}><Image src='/assets/sidebar/sectorialInfoIcon.svg' width={25} height={25} />{'Info Setorial >'}</li></Link>
|
||||
{/* <Link href='/consumption'><li className={router.pathname=='/consumption'? 'actualPath' : null} ><Image src='/assets/sidebar/consumptionIcon.svg' width={25} height={25} />{'Consumo'}</li></Link> */}
|
||||
<Link href='/notifications'><li className={router.pathname=='/notifications'? 'actualPath' : null}><Image src='/assets/sidebar/notificationsIcon.svg' width={25} height={25} />{'Notificações >'}<div className='notification'><p>25</p></div></li></Link>
|
||||
<Link href='/aboutUs'><li className={router.pathname=='/aboutUs'? 'actualPath' : null}><Image src='/assets/sidebar/aboutUs.svg' width={25} height={25} />{'Sobre Nós >'}</li></Link>
|
||||
<Link href='/faq'><li className={router.pathname=='/faq'? 'actualPath' : null}><Image src='/assets/sidebar/saqIcon.svg' width={25} height={25} />{'FAQ >'}</li></Link>
|
||||
<button onClick={handleOpen}><Image src='/assets/logout.svg' width={25} height={25} />{'Sair'}</button>
|
||||
<Modal
|
||||
open={open}
|
||||
onClose={handleClose}
|
||||
aria-labelledby="modal-modal-title"
|
||||
aria-describedby="modal-modal-description"
|
||||
>
|
||||
<Box sx={style}>
|
||||
<Typography id="modal-modal-title" variant="h6" component="h2">
|
||||
Deseja realmente sair ?
|
||||
</Typography>
|
||||
<Link href='/'><Button variant="contained" sx={{mt:5}}>Sim</Button></Link>
|
||||
<Button variant="contained" onClick={handleClose} color="error" sx={{mt:5 ,ml:1}}>Não</Button>
|
||||
</Box>
|
||||
</Modal>
|
||||
</ul>
|
||||
<aside>
|
||||
<p>Nossos Gerentes estão prontos para atendê-los</p>
|
||||
<div><h3>+55(41) 3012-5900</h3></div>
|
||||
</aside>
|
||||
</SidebarView>
|
||||
</RenderIf>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
@ -182,7 +182,7 @@ export const SidebarView = styled.nav<SidebarViewInterface>`
|
||||
|
||||
z-index: 2;
|
||||
|
||||
height: 5rem;
|
||||
height: 3.5rem;
|
||||
}
|
||||
.imageNext {
|
||||
display: none;
|
||||
@ -194,8 +194,8 @@ export const SidebarView = styled.nav<SidebarViewInterface>`
|
||||
background-color: #FFF;
|
||||
|
||||
li {
|
||||
height: 7rem;
|
||||
font-size: 170%;
|
||||
height: 5rem;
|
||||
font-size: 150%;
|
||||
}
|
||||
}
|
||||
aside {
|
||||
@ -207,15 +207,17 @@ export const SidebarView = styled.nav<SidebarViewInterface>`
|
||||
font-size: 14px;
|
||||
ul {
|
||||
li {
|
||||
height: 2rem;
|
||||
height: 3rem;
|
||||
font-size: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
@media (max-width: 1008px) {
|
||||
font-size: 14px;
|
||||
font-size: 26px;
|
||||
ul {
|
||||
li {
|
||||
height: 6rem;
|
||||
height: 7rem;
|
||||
font-size: 99.98%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
70
src/contexts/AuthContext.tsx
Normal file
70
src/contexts/AuthContext.tsx
Normal file
@ -0,0 +1,70 @@
|
||||
import React, { createContext, useState } from "react";
|
||||
import Router from 'next/router'
|
||||
|
||||
import { setCookie } from "nookies";
|
||||
|
||||
import { signInRequest } from "../services/auth";
|
||||
import { api } from "../services/api";
|
||||
|
||||
type UserType = {
|
||||
name: string;
|
||||
email: string;
|
||||
avatar_url: string;
|
||||
}
|
||||
|
||||
type SignInData = {
|
||||
email: string;
|
||||
password: string;
|
||||
}
|
||||
|
||||
type AuthContextType = {
|
||||
isAuthenticated: boolean;
|
||||
user: UserType;
|
||||
signIn: (data: SignInData) => Promise<void>;
|
||||
}
|
||||
|
||||
export const AuthContext = createContext({} as AuthContextType)
|
||||
|
||||
export function AuthProvider({children}: {children: React.ReactNode}) {
|
||||
const [user, setUser] = useState<UserType | null>(null)
|
||||
|
||||
const isAuthenticated = !!user
|
||||
|
||||
async function signIn({email, password}: SignInData) {
|
||||
const { token, user, exception }: any = await signInRequest({
|
||||
email,
|
||||
password
|
||||
})
|
||||
|
||||
if (token) {
|
||||
setCookie(undefined, '@smartAuth-token', token, {
|
||||
maxAge: 60 * 60 * 1, // 1 hour
|
||||
})
|
||||
}
|
||||
|
||||
if (user.role) {
|
||||
setCookie(undefined, 'user-role', user.role)
|
||||
}
|
||||
|
||||
if (!exception) {
|
||||
if (user.role == 2) {
|
||||
Router.push('/dashboard')
|
||||
} else {
|
||||
Router.push('administrative/clients')
|
||||
}
|
||||
return;
|
||||
} else {
|
||||
return
|
||||
}
|
||||
|
||||
api.defaults.headers['Authorization'] = `Bearer ${token}`
|
||||
|
||||
setUser(user)
|
||||
}
|
||||
|
||||
return (
|
||||
<AuthContext.Provider value={{ user, isAuthenticated, signIn }}>
|
||||
{children}
|
||||
</AuthContext.Provider>
|
||||
)
|
||||
}
|
||||
@ -1,19 +1,23 @@
|
||||
import React, { useState, useEffect } from 'react'
|
||||
import { useRouter } from 'next/router'
|
||||
import { AppProps } from 'next/app'
|
||||
import Head from 'next/head'
|
||||
import { useRouter } from 'next/router'
|
||||
import NProgress from 'nprogress'
|
||||
|
||||
// import Footer from '../components/footer/Footer'
|
||||
import Sidebar from '../components/sidebar/Sidebar'
|
||||
import { GlobalStyle } from '../styles/globals'
|
||||
import { AppView } from '../styles/app/AppView'
|
||||
import '../styles/nprogress/nprogress.css'
|
||||
import '../styles/globals.ts'
|
||||
import React, { useContext, useEffect, useState } from 'react'
|
||||
|
||||
import Home from '.'
|
||||
import Head from 'next/head'
|
||||
import VerifyEmail from './verifyEmail'
|
||||
// import Footer from '../components/footer/Footer'
|
||||
import Sidebar from '../components/sidebar/Sidebar'
|
||||
import { AuthContext, AuthProvider } from '../contexts/AuthContext'
|
||||
import { AppView } from '../styles/app/AppView'
|
||||
import { GlobalStyle } from '../styles/globals'
|
||||
import ForgotPassword from './forgotPassword'
|
||||
import VerifyEmail from './verifyEmail'
|
||||
|
||||
import '../styles/globals.ts'
|
||||
import '../styles/nprogress/nprogress.css'
|
||||
import { GetServerSideProps } from 'next'
|
||||
import { parseCookies } from 'nookies'
|
||||
import getAPIClient from '../services/ssrApi'
|
||||
|
||||
function MyApp({ Component, pageProps }: AppProps) {
|
||||
const router = useRouter()
|
||||
@ -40,7 +44,7 @@ function MyApp({ Component, pageProps }: AppProps) {
|
||||
}, [router])
|
||||
|
||||
return (
|
||||
<>
|
||||
<AuthProvider>
|
||||
<AppView>
|
||||
<Head>
|
||||
<link rel="icon" type="imagem/png" href="/assets/logose.png" />
|
||||
@ -61,8 +65,7 @@ function MyApp({ Component, pageProps }: AppProps) {
|
||||
null
|
||||
}
|
||||
</AppView>
|
||||
{/* <Footer /> */}
|
||||
</>
|
||||
</AuthProvider>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@ -7,7 +7,6 @@ import Header from '../components/header/Header'
|
||||
import PageTitle from '../components/pageTitle/PageTitle'
|
||||
import { EconomiaAcumulada } from '../services/economiaAcumulada'
|
||||
import { dataEconomiaBruta } from '../services/economiaBruta'
|
||||
|
||||
import { AccumulatedSavingsView } from '../styles/layouts/economy/accumulatedSavings/AccumulatedSavingsView'
|
||||
|
||||
export default function AccumulatedSavings() {
|
||||
@ -19,7 +18,8 @@ export default function AccumulatedSavings() {
|
||||
<Header name='' />
|
||||
<PageTitle title='Economia Acumulada' subtitle='Economia Bruta Estimada e Acumulada anual (Valores em R$ mil)' />
|
||||
<section>
|
||||
<SingleBar title='Economia Bruta Estimada e Acumulada' subtitle='(Valores em R$ mil)' dataset='Consolidada' dataset1='Estimada' label={EconomiaAcumulada.label} dataProps={EconomiaAcumulada.data2} barLabel month/>
|
||||
<SingleBar title='Economia Bruta Estimada e Acumulada' subtitle='(Valores em R$ mil)' dataset='Consolidada'
|
||||
dataset1='Estimada' label={EconomiaAcumulada.label} dataProps={EconomiaAcumulada.data2} barLabel month/>
|
||||
</section>
|
||||
</AccumulatedSavingsView>
|
||||
)
|
||||
|
||||
64
src/pages/administrative/aboutUs/index.tsx
Normal file
64
src/pages/administrative/aboutUs/index.tsx
Normal file
@ -0,0 +1,64 @@
|
||||
import TextField from '@mui/material/TextField';
|
||||
import Head from 'next/head'
|
||||
import Image from 'next/image'
|
||||
import React from 'react'
|
||||
|
||||
import AdministrativeHeader from '../../../components/administrativeHeader/AdministrativeHeader';
|
||||
import Banner from '../../../components/banner/Banner'
|
||||
import Header from '../../../components/header/Header'
|
||||
import { AboutUsView } from '../../../styles/layouts/aboutUs/AboutUsView'
|
||||
|
||||
export default function aboutUs() {
|
||||
return (
|
||||
<AboutUsView>
|
||||
<Head>
|
||||
<title>Smart Energia - About Us</title>
|
||||
</Head>
|
||||
<AdministrativeHeader />
|
||||
<Banner title='Quem Somos' subtitle='Soluções inteligentes em Gestão de Energia' imgSource='/assets/banners/aboutUsBanner.png' />
|
||||
<div>
|
||||
<h4>atualizar texto</h4>
|
||||
<TextField
|
||||
id="outlined-textarea"
|
||||
label="Sobre nós"
|
||||
placeholder="Placeholder"
|
||||
multiline
|
||||
fullWidth
|
||||
/>
|
||||
</div>
|
||||
<section>
|
||||
<p>A <strong>SMART ENERGIA</strong> é uma consultoria independente especializada em Gestão de Energia Elétrica, consolidada como uma das três maiores consultorias do Brasil.
|
||||
Devido à grande experiência em operações na CCEE – Câmara de Comercialização de Energia Elétrica e ANEEL, entrega resultados que superam as expectativas.</p>
|
||||
|
||||
<p>Nasceu para gerenciar a compra de energia com inovação, transparência e imparcialidade sendo o elo forte e necessário entre os Consumidores e os
|
||||
Vendedores de energia. </p>
|
||||
|
||||
<p>Baseada em sua experiência no setor elétrico adquirida desde 2001 e em mais de 900 unidades migradas, atua na negociação de contratos de compra e venda de
|
||||
energia, na Gestão de Energia no Mercado Livre e criação de produtos diferenciados para atender as necessidades específicas dos consumidores.</p>
|
||||
|
||||
<p>Apoiada pela sólida experiência de seus gestores, conhecendo as premissas dos agentes de Comercialização e Geração para a compra e venda de energia,
|
||||
aplicamos as mesmas premissas a favor dos Consumidores, disponibilizando assim um diferencial único para a tomada de decisão e elaboração das estratégias de
|
||||
contratação de energia.</p>
|
||||
<ul>
|
||||
<li><Image src='/assets/listIcon.svg' width={25} height={25} />{'Informação'}</li>
|
||||
<li><Image src='/assets/listIcon.svg' width={25} height={25} />{'Economia'}</li>
|
||||
<li><Image src='/assets/listIcon.svg' width={25} height={25} />{'Gestão de Energia'}</li>
|
||||
<li><Image src='/assets/listIcon.svg' width={25} height={25} />{'Imparcialidade'}</li>
|
||||
<li><Image src='/assets/listIcon.svg' width={25} height={25} />{'Previsão de Custos'}</li>
|
||||
<li><Image src='/assets/listIcon.svg' width={25} height={25} />{'Experiência'}</li>
|
||||
<li><Image src='/assets/listIcon.svg' width={25} height={25} />{'Relacionamento'}</li>
|
||||
</ul>
|
||||
|
||||
<article>
|
||||
<aside>
|
||||
<h2>Apoio a projetos sociais</h2>
|
||||
<div>
|
||||
<Image src='/assets/stamps/whiteStamp.png' width={200} height={200} />
|
||||
<Image src='/assets/stamps/blueStamp.png' width={200} height={200} />
|
||||
</div>
|
||||
</aside>
|
||||
</article>
|
||||
</section>
|
||||
</AboutUsView>
|
||||
)
|
||||
}
|
||||
@ -1,89 +1,98 @@
|
||||
import Box from '@mui/material/Box';
|
||||
import Button from '@mui/material/Button';
|
||||
import Modal from '@mui/material/Modal';
|
||||
import TextField from '@mui/material/TextField';
|
||||
import Typography from '@mui/material/Typography';
|
||||
import { DataGrid, GridColDef, GridValueGetterParams } from '@mui/x-data-grid';
|
||||
import React, { useState } from 'react'
|
||||
|
||||
import AdministrativeHeader from '../../components/administrativeHeader/AdministrativeHeader';
|
||||
import ClientsTable from '../../components/administrativeTables/ClientsTable';
|
||||
import BasicButton from '../../components/buttons/basicButton/BasicButton'
|
||||
import Modal from '../../components/modal/Modal';
|
||||
import PageTitle from '../../components/pageTitle/PageTitle'
|
||||
import { ClientsModalView, ClientsView } from '../../styles/layouts/clients/ClientsView'
|
||||
import FaqButton1 from '../../components/buttons/faqButton/FaqButton1';
|
||||
import FaqButton2 from '../../components/buttons/faqButton/FaqButton2';
|
||||
import Header from '../../components/header/Header'
|
||||
import InputUpload from '../../components/inputUplaod/inputUpload';
|
||||
import { ClientsView } from '../../styles/layouts/clients/ClientsView';
|
||||
import PageTitle from '../../components/pageTitle/PageTitle';
|
||||
import ConfirmModal from '../../components/modal/ConfirmModal';
|
||||
import { ConfirmModalView } from '../../styles/layouts/modals/confirmModalView';
|
||||
import { api } from '../../services/api';
|
||||
|
||||
const style = {
|
||||
position: 'absolute' as const,
|
||||
top: '50%',
|
||||
left: '50%',
|
||||
transform: 'translate(-50%, -50%)',
|
||||
width: 900,
|
||||
height: 500,
|
||||
bgcolor: 'background.paper',
|
||||
border: '2px solid #000',
|
||||
boxShadow: 24,
|
||||
p: 4,
|
||||
overflowY: 'scroll'
|
||||
};
|
||||
|
||||
export default function clients() {
|
||||
const [open, setOpen] = React.useState(false);
|
||||
const [openModalInativar, setOpenModalInativar] = useState(false)
|
||||
const handleOpen = () => setOpen(true);
|
||||
const handleClose = () => setOpen(false);
|
||||
|
||||
const [openModal, setOpenModal] = useState(false)
|
||||
|
||||
const rows = [
|
||||
{ id: 1, lastName: 'Snow', firstName: 'Jon', age: 35 },
|
||||
{ id: 2, lastName: 'Lannister', firstName: 'Cersei', age: 42 },
|
||||
{ id: 3, lastName: 'Lannister', firstName: 'Jaime', age: 45 },
|
||||
{ id: 4, lastName: 'Stark', firstName: 'Arya', age: 16 },
|
||||
{ id: 5, lastName: 'Targaryen', firstName: 'Daenerys', age: null },
|
||||
{ id: 6, lastName: 'Melisandre', firstName: null, age: 150 },
|
||||
{ id: 7, lastName: 'Clifford', firstName: 'Ferrara', age: 44 },
|
||||
{ id: 8, lastName: 'Frances', firstName: 'Rossini', age: 36 },
|
||||
{ id: 9, lastName: 'Roxie', firstName: 'Harvey', age: 65 },
|
||||
];
|
||||
|
||||
const columns: GridColDef[] = [
|
||||
{ field: 'id', headerName: 'ID', width: 70 },
|
||||
{ field: 'firstName', headerName: 'First name', width: 130 },
|
||||
{ field: 'lastName', headerName: 'Last name', width: 130 },
|
||||
{
|
||||
field: 'age',
|
||||
headerName: 'Age',
|
||||
type: 'number',
|
||||
width: 90,
|
||||
},
|
||||
{
|
||||
field: 'fullName',
|
||||
headerName: 'Full name',
|
||||
description: 'This column has a value getter and is not sortable.',
|
||||
sortable: false,
|
||||
width: 160,
|
||||
valueGetter: (params: GridValueGetterParams) =>
|
||||
`${params.row.firstName || ''} ${params.row.lastName || ''}`,
|
||||
},
|
||||
];
|
||||
function handleCreateClient() {
|
||||
api.post('', {
|
||||
"name": "Teste3",
|
||||
"email": "teste3@gmail.com",
|
||||
"password": "password",
|
||||
"password_confirmation": "password",
|
||||
"client_id": 222
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div style={{display: 'flex', flexDirection: 'column', width: '100%'}}>
|
||||
<ClientsView>
|
||||
<Header name='' />
|
||||
<PageTitle title='Clientes' subtitle='Clientes Smart Energia'/>
|
||||
|
||||
<div className='buttons'>
|
||||
<button className='btn2' onClick={handleOpen}>Adicionar</button>
|
||||
<button className='btn1' onClick={() => setOpenModalInativar(true)}>Inativar</button>
|
||||
</div>
|
||||
<Modal
|
||||
open={open}
|
||||
onClose={handleClose}
|
||||
aria-labelledby="modal-modal-title"
|
||||
aria-describedby="modal-modal-description"
|
||||
>
|
||||
<Box sx={style}>
|
||||
<h1>Adicionar Cliente</h1>
|
||||
<Typography sx={{color:'gray', fontSize:12}}variant="h5" gutterBottom component="div">
|
||||
Adicionar Cliente Smart Energia</Typography>
|
||||
<br />
|
||||
<TextField id="outlined-basic" label="Nome" sx={{width:350, ml:5}} variant="outlined" />
|
||||
<TextField id="outlined-basic" label="E-mail/Usuário" sx={{width:350, ml:8}} variant="outlined" />
|
||||
<TextField id="outlined-basic" label="Senha" sx={{width:350, ml:5, mt:2}} variant="outlined" />
|
||||
<TextField id="outlined-basic" label="Confirma Senha" sx={{width:350, ml:8, mt:2}} variant="outlined" />
|
||||
<TextField id="outlined-basic" label="Codigo do Cliente Smart Energia" sx={{width:350, ml:5, mt:2}} variant="outlined" />
|
||||
<InputUpload />
|
||||
<br /><br />
|
||||
<FaqButton1 title='Cancelar' onClick={()=>console.log()} />
|
||||
<FaqButton2 title='Salvar' onClick={()=>console.log()}/>
|
||||
</Box>
|
||||
</Modal>
|
||||
<section>
|
||||
<BasicButton title='Adicionar' onClick={() => setOpenModal(true)}/>
|
||||
<BasicButton title='Inativar' onClick={() => {throw new Error('fixing...')}}/>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<DataGrid
|
||||
rows={rows}
|
||||
columns={columns}
|
||||
pageSize={6}
|
||||
rowsPerPageOptions={[6]}
|
||||
checkboxSelection
|
||||
/>
|
||||
<ClientsTable />
|
||||
</section>
|
||||
</ClientsView>
|
||||
|
||||
<Modal open={openModal} handleIsClose={(value) => {setOpenModal(value)}}>
|
||||
<ClientsModalView>
|
||||
<TextField id="outlined-basic" label="Outlined" variant="outlined" style={{width: '300px'}}/>
|
||||
<TextField id="outlined-basic" label="Outlined" variant="outlined" style={{width: '300px'}}/>
|
||||
<TextField id="outlined-basic" label="Outlined" variant="outlined" style={{width: '300px'}}/>
|
||||
<TextField id="outlined-basic" label="Outlined" variant="outlined" style={{width: '300px'}}/>
|
||||
<TextField id="outlined-basic" label="Outlined" variant="outlined" style={{width: '300px'}}/>
|
||||
<Button
|
||||
variant="contained"
|
||||
component="label"
|
||||
>
|
||||
Upload File
|
||||
<input
|
||||
type="file"
|
||||
hidden
|
||||
/>
|
||||
</Button>
|
||||
</ClientsModalView>
|
||||
</Modal>
|
||||
</>
|
||||
<ConfirmModal open={openModalInativar} handleIsClose={(value) => {setOpenModalInativar(value)}}>
|
||||
<ConfirmModalView>
|
||||
<BasicButton title='Confirmar' onClick={() => setOpenModalInativar(true)}/>
|
||||
<BasicButton title='Cancelar' onClick={() => setOpenModalInativar(true)}/>
|
||||
</ConfirmModalView>
|
||||
</ConfirmModal>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
54
src/pages/administrative/faq/faqView.ts
Normal file
54
src/pages/administrative/faq/faqView.ts
Normal file
@ -0,0 +1,54 @@
|
||||
import styled from 'styled-components'
|
||||
|
||||
|
||||
|
||||
export const FaqView = styled.nav`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
|
||||
|
||||
.btn{
|
||||
background: #254F7F;
|
||||
border-radius: 8px;
|
||||
color: white;
|
||||
width: 164px;
|
||||
height: 40px;
|
||||
border: none;
|
||||
|
||||
}
|
||||
.btn2{
|
||||
background: #FFBC10;
|
||||
border-radius: 8px;
|
||||
color: white;
|
||||
width: 164px;
|
||||
height: 40px;
|
||||
border: none;
|
||||
margin-left: 3px;
|
||||
}
|
||||
.buttons{
|
||||
display: flex;
|
||||
margin-top:50px ;
|
||||
justify-content: space-between;
|
||||
align-self:flex-start ;
|
||||
margin-left: 20px;
|
||||
}
|
||||
.title{
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-self:flex-start ;
|
||||
flex-direction: column;
|
||||
margin-left: 19px;
|
||||
}
|
||||
|
||||
/*
|
||||
.teste{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-left: 100px;
|
||||
} */
|
||||
|
||||
|
||||
`
|
||||
138
src/pages/administrative/faq/index.tsx
Normal file
138
src/pages/administrative/faq/index.tsx
Normal file
@ -0,0 +1,138 @@
|
||||
import Box from '@mui/material/Box';
|
||||
import Button from '@mui/material/Button';
|
||||
import Modal from '@mui/material/Modal';
|
||||
import Stack from '@mui/material/Stack';
|
||||
import TextField from '@mui/material/TextField';
|
||||
import Typography from '@mui/material/Typography';
|
||||
import Head from 'next/head'
|
||||
import Image from 'next/image'
|
||||
import Link from 'next/link'
|
||||
import { useRouter } from 'next/router'
|
||||
import React, { useEffect, useState } from 'react'
|
||||
import { api } from '../../../services/api';
|
||||
|
||||
|
||||
import FaqTable from '../../../components/administrativeTables/FaqTable';
|
||||
import BasicButton from '../../../components/buttons/basicButton/BasicButton';
|
||||
import FaqButton1 from '../../../components/buttons/faqButton/FaqButton1';
|
||||
import FaqButton2 from '../../../components/buttons/faqButton/FaqButton2';
|
||||
import Header from '../../../components/header/Header'
|
||||
import PageTitle from '../../../components/pageTitle/PageTitle'
|
||||
import { FaqView } from '../../../styles/layouts/commonQuestions/FaqView'
|
||||
import getAPIClient from '../../../services/ssrApi';
|
||||
import { GetServerSideProps } from 'next';
|
||||
import { parseCookies } from 'nookies';
|
||||
|
||||
const style = {
|
||||
position: 'absolute' as const,
|
||||
top: '50%',
|
||||
left: '50%',
|
||||
transform: 'translate(-50%, -50%)',
|
||||
width: 900,
|
||||
height: 500,
|
||||
bgcolor: 'background.paper',
|
||||
border: '2px solid #000',
|
||||
boxShadow: 24,
|
||||
p: 4,
|
||||
};
|
||||
|
||||
type FaqInterface = {
|
||||
question: string;
|
||||
answer: string;
|
||||
|
||||
}
|
||||
|
||||
|
||||
export default function Sidebar({faqData}) {
|
||||
async function handleRegisterNewFaq({question, answer}: FaqInterface) {
|
||||
await api.post('/faq', {
|
||||
"question": question,
|
||||
"answer": answer,
|
||||
|
||||
}).then(res => console.log(res.data))
|
||||
}
|
||||
|
||||
const [faq, setFaq] = useState<FaqInterface>({
|
||||
question: '',
|
||||
answer: '',
|
||||
})
|
||||
|
||||
|
||||
const [open, setOpen] = React.useState(false);
|
||||
const handleOpen = () => setOpen(true);
|
||||
const handleClose = () => setOpen(false);
|
||||
|
||||
return (
|
||||
<>
|
||||
<FaqView>
|
||||
<Header name=''/>
|
||||
|
||||
<PageTitle title='Perguntas Frequentes' subtitle='Perguntas Frequentes'/>
|
||||
|
||||
<div className='buttons'>
|
||||
<button className='btn2' value="Refresh Page"onClick={handleOpen} >Adicionar</button>
|
||||
<button className='btn1' onClick={handleOpen}>Inativar</button>
|
||||
|
||||
</div>
|
||||
<Modal
|
||||
open={open}
|
||||
onClose={handleClose}
|
||||
aria-labelledby="modal-modal-title"
|
||||
aria-describedby="modal-modal-description"
|
||||
>
|
||||
<Box sx={style}>
|
||||
<h1>Adicionar/Editar Pergunta</h1>
|
||||
<Typography sx={{color:'gray', fontSize:12}}variant="h5" gutterBottom component="div">
|
||||
Adicionar/Editar Pergunta
|
||||
</Typography>
|
||||
<br />
|
||||
|
||||
<TextField id="outlined-basic" label="Pergunta" onChange={value=>setFaq({...faq, question:value.target.value})} sx={{width:710, ml:8}} variant="outlined" /> <br /><br />
|
||||
<TextField id="outlined-basic" label="Resposta" onChange={value=>setFaq({...faq, answer:value.target.value})} sx={{width:710, ml:8}} variant="outlined" />
|
||||
|
||||
<br /><br />
|
||||
<FaqButton1 title='Cancelar' onClick={function (): void {
|
||||
throw new Error('Function not implemented.');
|
||||
} } />
|
||||
<FaqButton2 title='Salvar' onClick={() => handleRegisterNewFaq(faq)}
|
||||
|
||||
/>
|
||||
</Box>
|
||||
|
||||
</Modal>
|
||||
<FaqTable questionData={faqData}/>
|
||||
|
||||
</FaqView>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export const getServerSideProps: GetServerSideProps = async (ctx) => {
|
||||
const apiClient = getAPIClient(ctx)
|
||||
const { ['@smartAuth-token']: token } = parseCookies(ctx)
|
||||
console.log('teste')
|
||||
let faqData = [];
|
||||
|
||||
|
||||
await apiClient.get('/faq').then(res => {
|
||||
faqData = res.data
|
||||
}).catch(res => {
|
||||
console.log(res)
|
||||
})
|
||||
console.table(faqData);
|
||||
|
||||
if (!token) {
|
||||
return {
|
||||
redirect: {
|
||||
destination: '/',
|
||||
permanent: false
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
props: {
|
||||
faqData
|
||||
}
|
||||
}
|
||||
}
|
||||
86
src/pages/administrative/general.tsx
Normal file
86
src/pages/administrative/general.tsx
Normal file
@ -0,0 +1,86 @@
|
||||
import FormControl from '@mui/material/FormControl';
|
||||
import InputLabel from '@mui/material/InputLabel';
|
||||
import MenuItem from '@mui/material/MenuItem';
|
||||
import Select, { SelectChangeEvent } from '@mui/material/Select';
|
||||
import TextField from '@mui/material/TextField';
|
||||
import { Editor } from '@tinymce/tinymce-react'
|
||||
import React, { useRef, useState } from 'react'
|
||||
|
||||
import Header from '../../components/header/Header';
|
||||
import { GeneralView } from '../../styles/layouts/general/GeneralView'
|
||||
|
||||
export default function index() {
|
||||
const editorRef = useRef(null);
|
||||
const [text, setText] = useState('');
|
||||
|
||||
const log = () => {
|
||||
if (editorRef.current) {
|
||||
console.log(editorRef.current.getContent());
|
||||
}
|
||||
};
|
||||
|
||||
const handleChange = (event: SelectChangeEvent) => {
|
||||
setText(event.target.value);
|
||||
};
|
||||
|
||||
return (
|
||||
<GeneralView>
|
||||
<Header name=''/>
|
||||
<section>
|
||||
<FormControl sx={{mr: '20px', minWidth: 180, minHeight: '80px'}}>
|
||||
<Select
|
||||
value={text}
|
||||
onChange={handleChange}
|
||||
displayEmpty
|
||||
inputProps={{ 'aria-label': 'Without label' }}
|
||||
>
|
||||
<MenuItem value={0}>Sobre Nós</MenuItem>
|
||||
<MenuItem value={10}>Copel</MenuItem>
|
||||
<MenuItem value={20}>Cliente 1</MenuItem>
|
||||
<MenuItem value={30}>Cliente 2</MenuItem>
|
||||
</Select>
|
||||
</FormControl>
|
||||
</section>
|
||||
<Editor
|
||||
onInit={(evt, editor) => editorRef.current = editor}
|
||||
initialValue=' <p>A <strong>SMART ENERGIA</strong> é uma consultoria independente especializada em Gestão de Energia Elétrica, consolidada como uma das três maiores consultorias do Brasil.
|
||||
Devido à grande experiência em operações na CCEE – Câmara de Comercialização de Energia Elétrica e ANEEL, entrega resultados que superam as expectativas.</p>
|
||||
|
||||
<p>Nasceu para gerenciar a compra de energia com inovação, transparência e imparcialidade sendo o elo forte e necessário entre os Consumidores e os
|
||||
Vendedores de energia. </p>
|
||||
|
||||
<p>Baseada em sua experiência no setor elétrico adquirida desde 2001 e em mais de 900 unidades migradas, atua na negociação de contratos de compra e venda de
|
||||
energia, na Gestão de Energia no Mercado Livre e criação de produtos diferenciados para atender as necessidades específicas dos consumidores.</p>
|
||||
|
||||
<p>Apoiada pela sólida experiência de seus gestores, conhecendo as premissas dos agentes de Comercialização e Geração para a compra e venda de energia,
|
||||
aplicamos as mesmas premissas a favor dos Consumidores, disponibilizando assim um diferencial único para a tomada de decisão e elaboração das estratégias de
|
||||
contratação de energia.</p>
|
||||
<ul>
|
||||
<li>Informação</li>
|
||||
<li>Economia</li>
|
||||
<li>Gestão de Energia</li>
|
||||
<li>Imparcialidade</li>
|
||||
<li>Previsão de Custos</li>
|
||||
<li>Experiência</li>
|
||||
<li>Relacionamento</li>
|
||||
</ul>'
|
||||
init={{
|
||||
height: 500,
|
||||
width: '100%',
|
||||
menubar: false,
|
||||
plugins: [
|
||||
'advlist', 'autolink', 'lists', 'link', 'image', 'charmap',
|
||||
'anchor', 'searchreplace', 'visualblocks', 'code', 'fullscreen',
|
||||
'insertdatetime', 'media', 'table', 'preview', 'help', 'wordcount'
|
||||
],
|
||||
toolbar: 'undo redo | blocks | ' +
|
||||
'bold italic forecolor | alignleft aligncenter ' +
|
||||
'alignright alignjustify | bullist numlist outdent indent | ' +
|
||||
'removeformat | help',
|
||||
content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'
|
||||
}}
|
||||
/>
|
||||
<button onClick={log}>Log editor content</button>
|
||||
</GeneralView>
|
||||
)
|
||||
}
|
||||
@ -1,7 +1,74 @@
|
||||
import React from 'react'
|
||||
import Button from '@mui/material/Button';
|
||||
import TextField from '@mui/material/TextField';
|
||||
import { DataGrid, GridColDef, GridValueGetterParams } from '@mui/x-data-grid';
|
||||
import React, { useState } from 'react'
|
||||
|
||||
import AdministrativeHeader from '../../components/administrativeHeader/AdministrativeHeader';
|
||||
import ClientsTable from '../../components/administrativeTables/ClientsTable';
|
||||
import BasicButton from '../../components/buttons/basicButton/BasicButton'
|
||||
import Header from '../../components/header/Header'
|
||||
import ConfirmModal from '../../components/modal/ConfirmModal';
|
||||
import Modal from '../../components/modal/Modal';
|
||||
import PageTitle from '../../components/pageTitle/PageTitle'
|
||||
import { ClientsModalView, ClientsView, ConfirmModalView } from '../../styles/layouts/clients/ClientsView'
|
||||
|
||||
export default function clients() {
|
||||
const [openModal, setOpenModal] = useState(false)
|
||||
const [openModalInativar, setOpenModalInativar] = useState(false)
|
||||
|
||||
export default function index() {
|
||||
return (
|
||||
<div>index</div>
|
||||
<div style={{display: 'flex', flexDirection: 'column', width: '100%'}}>
|
||||
<ClientsView>
|
||||
<Header name='' />
|
||||
<PageTitle title='Clientes' subtitle='Clientes Smart Energia'/>
|
||||
|
||||
<section>
|
||||
<BasicButton title='Adicionar' onClick={() => setOpenModal(true)}/>
|
||||
<BasicButton title='Inativar' onClick={() => setOpenModalInativar(true)}/>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
{/* <DataGrid
|
||||
rows={rows}
|
||||
columns={columns}
|
||||
pageSize={6}
|
||||
rowsPerPageOptions={[6]}
|
||||
checkboxSelection
|
||||
/> */}
|
||||
<ClientsTable />
|
||||
</section>
|
||||
</ClientsView>
|
||||
|
||||
<Modal open={openModal} handleIsClose={(value) => {setOpenModal(value)}}>
|
||||
<ClientsModalView>
|
||||
<PageTitle title='Adicionar Cliente' subtitle='Adicionar Cliente Smart Energia'/>
|
||||
<article>
|
||||
<TextField id="outlined-basic" label="Nome" variant="outlined" style={{width: '90%', marginRight: '20px'}}/>
|
||||
<TextField id="outlined-basic" label="email" variant="outlined" style={{width: '90%', marginRight: '20px'}}/>
|
||||
<TextField id="outlined-basic" label="senha" variant="outlined" style={{width: '90%', marginRight: '20px'}}/>
|
||||
<TextField id="outlined-basic" label="código" variant="outlined" style={{width: '90%', marginRight: '20px'}}/>
|
||||
<BasicButton title='Criar Cliente' onClick={() => console.log()}/>
|
||||
<Button
|
||||
variant="contained"
|
||||
component="label"
|
||||
style={{width: '300px'}}
|
||||
>
|
||||
Logo
|
||||
<input
|
||||
type="file"
|
||||
hidden
|
||||
/>
|
||||
</Button>
|
||||
</article>
|
||||
</ClientsModalView>
|
||||
</Modal>
|
||||
|
||||
<ConfirmModal open={openModalInativar} handleIsClose={(value) => {setOpenModalInativar(value)}}>
|
||||
<ConfirmModalView>
|
||||
<BasicButton title='Confirmar' onClick={() => setOpenModalInativar(true)}/>
|
||||
<BasicButton title='Cancelar' onClick={() => setOpenModalInativar(true)}/>
|
||||
</ConfirmModalView>
|
||||
</ConfirmModal>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
280
src/pages/administrative/notification/index.tsx
Normal file
280
src/pages/administrative/notification/index.tsx
Normal file
@ -0,0 +1,280 @@
|
||||
import CheckBoxIcon from '@mui/icons-material/CheckBox';
|
||||
import CheckBoxOutlineBlankIcon from '@mui/icons-material/CheckBoxOutlineBlank';
|
||||
import Autocomplete from '@mui/material/Autocomplete';
|
||||
import Box from '@mui/material/Box';
|
||||
import Checkbox from '@mui/material/Checkbox';
|
||||
import FormControl from '@mui/material/FormControl';
|
||||
import Modal from '@mui/material/Modal';
|
||||
import TextField from '@mui/material/TextField';
|
||||
import Typography from '@mui/material/Typography';
|
||||
import Head from 'next/head'
|
||||
import React, { useEffect, useState } from 'react'
|
||||
|
||||
import NotificationsTable from '../../../components/administrativeTables/NotificationsTable'
|
||||
import FaqButton1 from '../../../components/buttons/faqButton/FaqButton1';
|
||||
import FaqButton2 from '../../../components/buttons/faqButton/FaqButton2';
|
||||
import Header from '../../../components/header/Header'
|
||||
import PageTitle from '../../../components/pageTitle/PageTitle'
|
||||
import { api } from '../../../services/api';
|
||||
import { FaqView } from '../../../styles/layouts/commonQuestions/FaqView'
|
||||
|
||||
import Radio from '@mui/material/Radio';
|
||||
import RadioGroup from '@mui/material/RadioGroup';
|
||||
import FormControlLabel from '@mui/material/FormControlLabel';
|
||||
import getAPIClient from '../../../services/ssrApi';
|
||||
import { GetServerSideProps } from 'next';
|
||||
import { parseCookies } from 'nookies';
|
||||
import Snackbar from '@mui/material/Snackbar';
|
||||
import MuiAlert, { AlertProps } from '@mui/material/Alert';
|
||||
import BasicButton from '../../../components/buttons/basicButton/BasicButton';
|
||||
import { ConfirmModalView } from '../../../styles/layouts/modals/confirmModalView';
|
||||
import ConfirmModal from '../../../components/modal/ConfirmModal';
|
||||
import { JsxElement } from 'typescript';
|
||||
|
||||
const style = {
|
||||
position: 'absolute' as const,
|
||||
top: '50%',
|
||||
left: '50%',
|
||||
transform: 'translate(-50%, -50%)',
|
||||
width: 900,
|
||||
height: 500,
|
||||
bgcolor: 'background.paper',
|
||||
border: '2px solid #000',
|
||||
boxShadow: 24,
|
||||
p: 4,
|
||||
overflowY: 'scroll'
|
||||
};
|
||||
|
||||
const Alert = React.forwardRef<HTMLDivElement, AlertProps>(function Alert(
|
||||
props,
|
||||
ref,
|
||||
) {
|
||||
return <MuiAlert elevation={6} ref={ref} variant="filled" {...props} />;
|
||||
});
|
||||
|
||||
const icon = <CheckBoxOutlineBlankIcon fontSize="small" />;
|
||||
const checkedIcon = <CheckBoxIcon fontSize="small" />;
|
||||
|
||||
interface NotificationInterface {
|
||||
title: string,
|
||||
body: string,
|
||||
users: object[]
|
||||
}
|
||||
|
||||
export default function notification({clients, notifications}) {
|
||||
|
||||
const [notification, setNotification] = useState<NotificationInterface>({
|
||||
title: '',
|
||||
body: '',
|
||||
users: []
|
||||
})
|
||||
const [selectedNotifications, setSelectedNotifications] = useState([])
|
||||
|
||||
const [open, setOpen] = useState<boolean>(false);
|
||||
const [openModalInativar, setOpenModalInativar] = useState<boolean>(false)
|
||||
const [openSnackSuccess, setOpenSnackSuccess] = useState<boolean>(false);
|
||||
const [openSnackError, setOpenSnackError] = useState<boolean>(false);
|
||||
const [openSnackSuccessDelete, setOpenSnackSuccessDelete] = useState<boolean>(false);
|
||||
const [openSnackErrorDelete, setOpenSnackErrorDelete] = useState<boolean>(false);
|
||||
|
||||
const [radiusValue, setRadiusValue] = useState<string>('all');
|
||||
|
||||
const handleOpen = () => setOpen(true);
|
||||
const handleClose = () => setOpen(false);
|
||||
|
||||
const handleCloseSnack = (event?: React.SyntheticEvent | Event, reason?: string) => {
|
||||
if (reason === 'clickaway') {
|
||||
return;
|
||||
}
|
||||
|
||||
setOpenSnackError(false);
|
||||
setOpenSnackSuccess(false);
|
||||
};
|
||||
|
||||
const handleCloseSnackDelete = (event?: React.SyntheticEvent | Event, reason?: string) => {
|
||||
if (reason === 'clickaway') {
|
||||
return;
|
||||
}
|
||||
|
||||
setOpenSnackErrorDelete(false);
|
||||
setOpenSnackSuccessDelete(false);
|
||||
};
|
||||
|
||||
async function handleRegisterNewNotification({title, body, users}: NotificationInterface) {
|
||||
await api.post('/notification', {
|
||||
title,
|
||||
body,
|
||||
users
|
||||
}).then(res => setOpenSnackSuccess(true)).catch(res => setOpenSnackError(true))
|
||||
}
|
||||
async function handleDeleteNotification(id: any) {
|
||||
await id.map((value) => {
|
||||
api.delete(`/notification/${value}`).then(res => {
|
||||
setOpenSnackSuccessDelete(true)
|
||||
setOpenModalInativar(false)
|
||||
window.location.reload()
|
||||
}).catch(res => setOpenSnackErrorDelete(true))
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<FaqView>
|
||||
<Head>
|
||||
<title>Smart Energia - Notificações</title>
|
||||
</Head>
|
||||
<Header name=''/>
|
||||
<PageTitle title='Notificações' subtitle='Notificações'/>
|
||||
|
||||
<Snackbar open={openSnackSuccess} autoHideDuration={4000} onClose={handleCloseSnack}>
|
||||
<Alert onClose={handleCloseSnack} severity="success" sx={{ width: '100%' }}>
|
||||
notificação cadastrada com sucesso!
|
||||
</Alert>
|
||||
</Snackbar>
|
||||
<Snackbar open={openSnackError} autoHideDuration={4000} onClose={handleCloseSnack}>
|
||||
<Alert onClose={handleCloseSnack} severity="error" sx={{ width: '100%' }}>
|
||||
Notificação não cadastrada!
|
||||
</Alert>
|
||||
</Snackbar>
|
||||
|
||||
<Snackbar open={openSnackSuccessDelete} autoHideDuration={4000} onClose={handleCloseSnackDelete}>
|
||||
<Alert onClose={handleCloseSnackDelete} severity="success" sx={{ width: '100%' }}>
|
||||
notificação excluida com sucesso!
|
||||
</Alert>
|
||||
</Snackbar>
|
||||
<Snackbar open={openSnackErrorDelete} autoHideDuration={4000} onClose={handleCloseSnackDelete}>
|
||||
<Alert onClose={handleCloseSnackDelete} severity="error" sx={{ width: '100%' }}>
|
||||
Notificação não excluida!
|
||||
</Alert>
|
||||
</Snackbar>
|
||||
|
||||
<div className='buttons'>
|
||||
<button className='btn2' onClick={handleOpen}>Disparar nova</button>
|
||||
<button className='btn1' onClick={() => setOpenModalInativar(true)}>Inativar</button>
|
||||
|
||||
</div>
|
||||
<NotificationsTable notifications={notifications} onChange={(value) => setSelectedNotifications(value)}/>
|
||||
<Modal
|
||||
open={open}
|
||||
onClose={handleClose}
|
||||
aria-labelledby="modal-modal-title"
|
||||
aria-describedby="modal-modal-description"
|
||||
>
|
||||
<Box sx={style}>
|
||||
<h1>Disparar Notificações</h1>
|
||||
<Typography sx={{color:'gray', fontSize:12}}variant="h5" gutterBottom component="div">
|
||||
Pode ser que todas as notificaçõs demorem alguns minutos para estarem disponíveis</Typography>
|
||||
<br />
|
||||
<TextField id="outlined-basic" label="Título" sx={{width:700, ml:8}} onChange={(value) => {
|
||||
setNotification({
|
||||
...notification,
|
||||
title: value.target.value
|
||||
})
|
||||
}} variant="outlined" /> <br /><br />
|
||||
<TextField id="outlined-basic" label="Corpo/Conteúdo da notificação" sx={{width:700, ml:8}} onChange={(value) => {
|
||||
setNotification({
|
||||
...notification,
|
||||
body: value.target.value
|
||||
})
|
||||
}} variant="outlined" /> <br /><br />
|
||||
|
||||
<div>
|
||||
<FormControl>
|
||||
<RadioGroup
|
||||
aria-labelledby="demo-radio-buttons-group-label"
|
||||
defaultValue="female"
|
||||
name="radio-buttons-group"
|
||||
>
|
||||
<FormControlLabel value="all" control={<Radio />} checked={radiusValue==='all'? true : false}onChange={(value: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setRadiusValue(value.target.value)
|
||||
}} label="Disparar para todos os clientes" />
|
||||
<FormControlLabel value="some" control={<Radio />} checked={radiusValue==='some'? true : false} onChange={(value: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setRadiusValue(value.target.value)
|
||||
}} label="Disparar somente para alguns clientes" />
|
||||
</RadioGroup>
|
||||
</FormControl>
|
||||
</div>
|
||||
|
||||
{
|
||||
radiusValue === 'some'?
|
||||
<Autocomplete
|
||||
multiple
|
||||
id="checkboxes-tags-demo"
|
||||
options={clients}
|
||||
disableCloseOnSelect
|
||||
onChange={(event: any, newValue: any) => {
|
||||
setNotification({...notification, users: newValue.map((el) => {return {"user_id": el.id}})});
|
||||
}}
|
||||
getOptionLabel={(option) => option.name}
|
||||
renderOption={(props, option, { selected }) => (
|
||||
<li {...props}>
|
||||
<Checkbox
|
||||
icon={icon}
|
||||
checkedIcon={checkedIcon}
|
||||
style={{ marginRight: 8 }}
|
||||
checked={selected}
|
||||
value={option.name}
|
||||
/>
|
||||
{option.name}
|
||||
</li>
|
||||
)}
|
||||
sx={{ml:8}}
|
||||
style={{ width: 700 }}
|
||||
renderInput={(params) => (
|
||||
<TextField {...params} label="Clientes" placeholder="Selecionar clientes"/>
|
||||
)}
|
||||
/> :
|
||||
null
|
||||
}
|
||||
|
||||
<FaqButton1 title='Cancelar' onClick={() => {setOpen(false)}} />
|
||||
<FaqButton2 title='Salvar' onClick={() => {
|
||||
handleRegisterNewNotification(notification)}}
|
||||
/>
|
||||
</Box>
|
||||
</Modal>
|
||||
<ConfirmModal open={openModalInativar} handleIsClose={(value) => {setOpenModalInativar(value)}}>
|
||||
<PageTitle title='Excluir notificação' subtitle='deseja realmente excluir as notificações selecionadas?'/>
|
||||
<ConfirmModalView>
|
||||
<BasicButton title='Confirmar' onClick={() => handleDeleteNotification(selectedNotifications)}/>
|
||||
<BasicButton title='Cancelar' onClick={() => setOpenModalInativar(false)}/>
|
||||
</ConfirmModalView>
|
||||
</ConfirmModal>
|
||||
</FaqView>
|
||||
)
|
||||
}
|
||||
|
||||
export const getServerSideProps: GetServerSideProps = async (ctx) => {
|
||||
const apiClient = getAPIClient(ctx)
|
||||
const { ['@smartAuth-token']: token } = parseCookies(ctx)
|
||||
|
||||
let clients = [];
|
||||
let notifications = [];
|
||||
|
||||
await apiClient.get('/user').then(res => {
|
||||
clients = res.data
|
||||
}).catch(res => {
|
||||
console.log(res)
|
||||
})
|
||||
|
||||
await apiClient.get('/notification').then(res => {
|
||||
notifications = res.data
|
||||
}).catch(res => {
|
||||
console.log(res)
|
||||
})
|
||||
|
||||
if (!token) {
|
||||
return {
|
||||
redirect: {
|
||||
destination: '/',
|
||||
permanent: false
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
props: {
|
||||
clients,
|
||||
notifications
|
||||
}
|
||||
}
|
||||
}
|
||||
83
src/pages/administrative/notification/notificationView.ts
Normal file
83
src/pages/administrative/notification/notificationView.ts
Normal file
@ -0,0 +1,83 @@
|
||||
import styled from 'styled-components'
|
||||
|
||||
|
||||
|
||||
export const NotificationView = styled.nav`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
flex-direction: column;
|
||||
|
||||
width: 100%;
|
||||
|
||||
h1 {
|
||||
font-weight: 700;
|
||||
font-size: calc(90% + 2rem);
|
||||
line-height: 72px;
|
||||
text-align: center;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-weight: 400;
|
||||
font-size: 99.98%;
|
||||
line-height: 21px;
|
||||
text-align: center;
|
||||
letter-spacing: 0.5px;
|
||||
|
||||
color: #AAAAAA;
|
||||
}
|
||||
|
||||
.CommonQuestionsSection {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
hr {
|
||||
border: 1px solid #DDDDDD;
|
||||
}
|
||||
|
||||
/* .modal{
|
||||
display: flex;
|
||||
justify-self: flex-end;
|
||||
align-self: center;
|
||||
margin-left: 100px;
|
||||
|
||||
} */
|
||||
.btn2{
|
||||
background: #254F7F;
|
||||
border-radius: 8px;
|
||||
color: white;
|
||||
width: 164px;
|
||||
height: 45px;
|
||||
border: none;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.btn1{
|
||||
background:#FFBC10;
|
||||
border-radius: 8px;
|
||||
color: white;
|
||||
width: 164px;
|
||||
height: 45px;
|
||||
border: none;
|
||||
margin-top: 10px;
|
||||
margin-left: 6px;
|
||||
}
|
||||
.buttons{
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-self: flex-start;
|
||||
margin-top: 45px;
|
||||
margin-left: 16px;
|
||||
|
||||
}
|
||||
.title{
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-self: flex-start;
|
||||
margin-left: 16px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
`
|
||||
@ -1,23 +1,24 @@
|
||||
import React from 'react'
|
||||
import Box from '@mui/material/Box';
|
||||
import FilledInput from '@mui/material/FilledInput';
|
||||
import FormControl from '@mui/material/FormControl';
|
||||
import FormHelperText from '@mui/material/FormHelperText';
|
||||
import IconButton from '@mui/material/IconButton';
|
||||
import Input from '@mui/material/Input';
|
||||
import InputAdornment from '@mui/material/InputAdornment';
|
||||
import InputLabel from '@mui/material/InputLabel';
|
||||
import OutlinedInput from '@mui/material/OutlinedInput';
|
||||
import TextField from '@mui/material/TextField';
|
||||
import Image from 'next/image'
|
||||
import React from 'react'
|
||||
|
||||
import BasicButton from '../components/buttons/basicButton/BasicButton'
|
||||
import GradientButton from '../components/buttons/gradientButton/GradientButton'
|
||||
import Graph from '../components/graph/Chart'
|
||||
import Box from '@mui/material/Box';
|
||||
import IconButton from '@mui/material/IconButton';
|
||||
import Input from '@mui/material/Input';
|
||||
import FilledInput from '@mui/material/FilledInput';
|
||||
import OutlinedInput from '@mui/material/OutlinedInput';
|
||||
import InputLabel from '@mui/material/InputLabel';
|
||||
import InputAdornment from '@mui/material/InputAdornment';
|
||||
import FormHelperText from '@mui/material/FormHelperText';
|
||||
import FormControl from '@mui/material/FormControl';
|
||||
import TextField from '@mui/material/TextField';
|
||||
import LineChart from '../components/graph/LineChart'
|
||||
|
||||
// import Footer from '../components/footer/footer'
|
||||
|
||||
export default function areaTest() {
|
||||
|
||||
const [values, setValues] = React.useState({
|
||||
amount: '',
|
||||
password: '',
|
||||
|
||||
@ -17,6 +17,10 @@ import Chart from '../components/graph/Chart'
|
||||
import { LineBarChart } from '../components/graph/LineBarChart'
|
||||
import { ConsumoEstimado } from '../services/consumoEstimado'
|
||||
import Head from 'next/head'
|
||||
import recoverUserInformation from '../services/auth'
|
||||
import { parseCookies } from 'nookies'
|
||||
import { GetServerSideProps } from 'next'
|
||||
import getAPIClient from '../services/ssrApi'
|
||||
|
||||
export default function Dashboard() {
|
||||
|
||||
@ -53,9 +57,27 @@ export default function Dashboard() {
|
||||
</GraphCard>
|
||||
</section>
|
||||
|
||||
<button onClick={() => {
|
||||
const id = 1
|
||||
console.log(recoverUserInformation(id))
|
||||
}}></button>
|
||||
</DashboardView>
|
||||
|
||||
|
||||
|
||||
)
|
||||
}
|
||||
|
||||
export const getServerSideProps: GetServerSideProps = async (ctx) => {
|
||||
const { ['@smartAuth-token']: token } = parseCookies(ctx)
|
||||
|
||||
if (!token) {
|
||||
return {
|
||||
redirect: {
|
||||
destination: '/',
|
||||
permanent: false
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
props: {}
|
||||
}
|
||||
}
|
||||
|
||||
@ -6,7 +6,6 @@ import { LineBarChart } from '../components/graph/LineBarChart'
|
||||
import Header from '../components/header/Header'
|
||||
import PageTitle from '../components/pageTitle/PageTitle'
|
||||
import { ConsumoEstimado } from '../services/consumoEstimado'
|
||||
|
||||
import { EstimatedCostView } from '../styles/layouts/economy/estimatedCost/EstimatedCostView'
|
||||
|
||||
export default function EstimatedCost() {
|
||||
@ -16,7 +15,7 @@ export default function EstimatedCost() {
|
||||
<title>Smart Energia - Custos Estimados</title>
|
||||
</Head>
|
||||
<Header name='' />
|
||||
<PageTitle title='Custos Estimados' subtitle='Comparativo de Custo Estimado' />
|
||||
<PageTitle title='Cativo x Livre mensal' subtitle='Comparativo de Custo Estimado' />
|
||||
<section>
|
||||
<LineBarChart data1={ConsumoEstimado.data2} data2={ConsumoEstimado.data} data3={ConsumoEstimado.data1} dataset1="Economia (R$)" dataset2='Cativo' dataset3='Livre' label={ConsumoEstimado.label} title='Custo Estimado' subtitle='' barLabel hashurado />
|
||||
</section>
|
||||
|
||||
@ -1,10 +1,15 @@
|
||||
import { GetServerSideProps } from 'next'
|
||||
import Head from 'next/head'
|
||||
import { parseCookies } from 'nookies'
|
||||
import React from 'react'
|
||||
import CommonQuestionsCard from '../components/faqQuestionsCard/FaqQuestionsCard'
|
||||
import Header from '../components/header/Header'
|
||||
import { api } from '../services/api'
|
||||
import getAPIClient from '../services/ssrApi'
|
||||
import { FaqView } from '../styles/layouts/commonQuestions/FaqView'
|
||||
|
||||
export default function commonQuestions() {
|
||||
|
||||
export default function commonQuestions({faqData}) {
|
||||
return (
|
||||
<FaqView>
|
||||
<Head>
|
||||
@ -14,17 +19,44 @@ export default function commonQuestions() {
|
||||
<h1>Perguntas Frequentes</h1>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
|
||||
<section className='CommonQuestionsSection' >
|
||||
<CommonQuestionsCard />
|
||||
<hr />
|
||||
<CommonQuestionsCard />
|
||||
<hr />
|
||||
<CommonQuestionsCard />
|
||||
<hr />
|
||||
<CommonQuestionsCard />
|
||||
<hr />
|
||||
<CommonQuestionsCard />
|
||||
<hr />
|
||||
{
|
||||
faqData.map((value, index ) => {
|
||||
return <>
|
||||
<CommonQuestionsCard key={index} question={value.question} answer={value.answer}/>
|
||||
<hr />
|
||||
</>
|
||||
})
|
||||
}
|
||||
</section>
|
||||
</FaqView>
|
||||
)
|
||||
}
|
||||
export const getServerSideProps: GetServerSideProps = async (ctx) => {
|
||||
const apiClient = getAPIClient(ctx)
|
||||
const { ['@smartAuth-token']: token } = parseCookies(ctx)
|
||||
console.log('teste')
|
||||
let faqData = [];
|
||||
|
||||
|
||||
await apiClient.get('/faq').then(res => {
|
||||
faqData = res.data
|
||||
}).catch(res => {
|
||||
console.log(res)
|
||||
})
|
||||
console.table(faqData);
|
||||
|
||||
if (!token) {
|
||||
return {
|
||||
redirect: {
|
||||
destination: '/',
|
||||
permanent: false
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
props: {
|
||||
faqData
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,33 +1,38 @@
|
||||
import React, { useState } from 'react'
|
||||
import FormControl from '@mui/material/FormControl';
|
||||
import IconButton from '@mui/material/IconButton';
|
||||
import InputAdornment from '@mui/material/InputAdornment';
|
||||
import InputLabel from '@mui/material/InputLabel';
|
||||
import OutlinedInput from '@mui/material/OutlinedInput';
|
||||
import TextField from '@mui/material/TextField';
|
||||
import Head from 'next/head';
|
||||
import Image from 'next/image';
|
||||
import Link from 'next/link';
|
||||
import { useRouter } from 'next/router'
|
||||
import OutlinedInput from '@mui/material/OutlinedInput';
|
||||
import InputLabel from '@mui/material/InputLabel';
|
||||
import InputAdornment from '@mui/material/InputAdornment';
|
||||
import React, { useContext, useState } from 'react'
|
||||
import { AiOutlineEye, AiOutlineEyeInvisible } from 'react-icons/ai';
|
||||
|
||||
import LoginButton from '../components/buttons/loginButton/LoginButton';
|
||||
import FormControl from '@mui/material/FormControl';
|
||||
import IconButton from '@mui/material/IconButton';
|
||||
import TextField from '@mui/material/TextField';
|
||||
|
||||
import {AiOutlineEyeInvisible, AiOutlineEye} from 'react-icons/ai';
|
||||
|
||||
import { LoginView, LoginContainer } from '../styles/layouts/login/LoginView';
|
||||
import Head from 'next/head';
|
||||
import { AuthContext } from '../contexts/AuthContext';
|
||||
import { api } from '../services/api';
|
||||
import { LoginContainer, LoginView } from '../styles/layouts/login/LoginView';
|
||||
import Dashboard from './dashboard';
|
||||
|
||||
export default function Home() {
|
||||
const [state, setstate]=useState(false);
|
||||
const [state, setstate] = useState(false);
|
||||
|
||||
const [values, setValues] = React.useState({
|
||||
const [values, setValues] = useState({
|
||||
password: '',
|
||||
showPassword: false,
|
||||
});
|
||||
const [email, setEmail] = useState<string>()
|
||||
const [password, setPassword] = useState<string>()
|
||||
|
||||
const router = useRouter()
|
||||
const rota = router.pathname
|
||||
|
||||
const handleChange = (prop) => (event) => {
|
||||
setValues({ ...values, [prop]: event.target.value });
|
||||
setPassword(event.target.value);
|
||||
};
|
||||
|
||||
const handleClickShowPassword = () => {
|
||||
@ -41,6 +46,12 @@ export default function Home() {
|
||||
event.preventDefault();
|
||||
};
|
||||
|
||||
const { signIn } = useContext(AuthContext)
|
||||
|
||||
async function handleSignIn() {
|
||||
await signIn({email, password})
|
||||
}
|
||||
|
||||
return (
|
||||
<LoginView auth={rota} >
|
||||
<Head>
|
||||
@ -48,14 +59,16 @@ export default function Home() {
|
||||
</Head>
|
||||
|
||||
<div>
|
||||
<Image src='/assets/marca1.svg' width={520} height={350} />
|
||||
<Image src='/assets/marca1.svg' width={520} height={350} />
|
||||
</div>
|
||||
|
||||
<LoginContainer>
|
||||
<h1>Bem-Vindo</h1>
|
||||
<h2>Estratégias Inteligentes em<br /> Gestão de Energia</h2>
|
||||
|
||||
<TextField id="outlined-basic" sx={{ m: 1, width: '90%' }}label="Login" variant="outlined" />
|
||||
<TextField id="outlined-basic" sx={{ m: 1, width: '90%' }} label="Login" variant="outlined" onChange={value => {
|
||||
setEmail(value.target.value)
|
||||
}}/>
|
||||
<FormControl sx={{ m: 1, width: '90%' }} variant="outlined">
|
||||
<InputLabel htmlFor="outlined-adornment-password">Password</InputLabel>
|
||||
<OutlinedInput
|
||||
@ -80,14 +93,13 @@ export default function Home() {
|
||||
</FormControl>
|
||||
<Link href='verifyEmail' >Esqueceu a senha ?</Link>
|
||||
|
||||
<LoginButton title='ENTRAR' link />
|
||||
<LoginButton title='ENTRAR' onClick={() => handleSignIn()}/>
|
||||
|
||||
<fieldset className="line">
|
||||
<legend className="text">Ou</legend>
|
||||
</fieldset>
|
||||
|
||||
<p><a href='tel:+55(41) 3012-5900' >+55(41) 3012-5900</a><br/><a href='https://www.energiasmart.com.br' target="_blank" rel="noreferrer" >www.energiasmart.com.br</a></p>
|
||||
|
||||
</LoginContainer>
|
||||
|
||||
</LoginView>
|
||||
|
||||
@ -1,10 +1,11 @@
|
||||
import React from 'react'
|
||||
import Banner from '../components/banner/Banner'
|
||||
import Header from '../components/header/Header'
|
||||
import BasicButton from '../components/buttons/basicButton/BasicButton';
|
||||
import { NewsView, Button } from '../styles/layouts/news/NewsView'
|
||||
import Head from 'next/head';
|
||||
import Link from 'next/link'
|
||||
import React from 'react'
|
||||
|
||||
import Banner from '../components/banner/Banner'
|
||||
import BasicButton from '../components/buttons/basicButton/BasicButton';
|
||||
import Header from '../components/header/Header'
|
||||
import { Button, NewsView } from '../styles/layouts/news/NewsView'
|
||||
|
||||
export default function aboutUs() {
|
||||
return (
|
||||
@ -26,7 +27,7 @@ export default function aboutUs() {
|
||||
Os itens que mais impactaram a correção foram os encargos setoriais, os custos de distribuição, a retirada dos componentes financeiros..</p>
|
||||
<Button>
|
||||
<fieldset>
|
||||
<legend> <BasicButton title='Ver Mais...' /></legend>
|
||||
<legend> <BasicButton title='Ver Mais...' onClick={() => console.log()}/></legend>
|
||||
</fieldset>
|
||||
</Button>
|
||||
|
||||
@ -40,15 +41,15 @@ export default function aboutUs() {
|
||||
Os itens que mais impactaram a correção foram os encargos setoriais, os custos de distribuição, a retirada dos componentes financeiros..</p>
|
||||
<Button>
|
||||
<fieldset>
|
||||
<legend> <BasicButton title='Ver Mais...' /></legend>
|
||||
<legend> <BasicButton title='Ver Mais...' onClick={() => console.log()}/></legend>
|
||||
</fieldset>
|
||||
</Button>
|
||||
|
||||
</section>
|
||||
|
||||
<a href='https://www.energiasmart.com.br/noticias/'
|
||||
target={"_blank"}
|
||||
rel={"noreferrer"}><BasicButton title='Noticias Atualizadas' /></a>
|
||||
target={"_blank"}
|
||||
rel={"noreferrer"}><BasicButton title='Noticias Atualizadas' onClick={() => console.log()}/></a>
|
||||
</NewsView>
|
||||
)
|
||||
}
|
||||
|
||||
@ -1,11 +1,15 @@
|
||||
import { GetServerSideProps } from 'next'
|
||||
import Head from 'next/head'
|
||||
import { parseCookies } from 'nookies'
|
||||
import React from 'react'
|
||||
import CommonQuestionsCard from '../components/faqQuestionsCard/FaqQuestionsCard'
|
||||
import NotificationQuestionsCard from '../components/NotificationQuestionsCard/NotificationQuestionsCard'
|
||||
import Header from '../components/header/Header'
|
||||
import PageTitle from '../components/pageTitle/PageTitle'
|
||||
import { api } from '../services/api'
|
||||
import getAPIClient from '../services/ssrApi'
|
||||
import { FaqView } from '../styles/layouts/commonQuestions/FaqView'
|
||||
|
||||
export default function Notifications() {
|
||||
export default function Notifications({notificationData}: any) {
|
||||
return (
|
||||
<FaqView>
|
||||
<Head>
|
||||
@ -15,17 +19,44 @@ export default function Notifications() {
|
||||
<PageTitle title='Notifications' subtitle='' />
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
|
||||
<section className='CommonQuestionsSection' >
|
||||
<CommonQuestionsCard />
|
||||
<hr />
|
||||
<CommonQuestionsCard />
|
||||
<hr />
|
||||
<CommonQuestionsCard />
|
||||
<hr />
|
||||
<CommonQuestionsCard />
|
||||
<hr />
|
||||
<CommonQuestionsCard />
|
||||
<hr />
|
||||
{
|
||||
notificationData.map((value, index ) => {
|
||||
return <>
|
||||
<NotificationQuestionsCard key={index} title={value.title} body={value.body}/>
|
||||
<hr />
|
||||
</>
|
||||
})
|
||||
}
|
||||
</section>
|
||||
</FaqView>
|
||||
)
|
||||
}
|
||||
export const getServerSideProps: GetServerSideProps = async (ctx) => {
|
||||
const apiClient = getAPIClient(ctx)
|
||||
const { ['@smartAuth-token']: token } = parseCookies(ctx)
|
||||
console.log('teste')
|
||||
let notificationData = [];
|
||||
|
||||
|
||||
await apiClient.get('/notification').then(res => {
|
||||
notificationData = res.data
|
||||
}).catch(res => {
|
||||
console.log(res)
|
||||
})
|
||||
console.table(notificationData);
|
||||
|
||||
if (!token) {
|
||||
return {
|
||||
redirect: {
|
||||
destination: '/',
|
||||
permanent: false
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
props: {
|
||||
notificationData
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,22 +1,20 @@
|
||||
import React, { useEffect, useState } from 'react'
|
||||
import { useRouter } from 'next/router'
|
||||
|
||||
import Header from '../../components/header/Header'
|
||||
import MenuItem from '@mui/material/MenuItem';
|
||||
import Select, { SelectChangeEvent } from '@mui/material/Select';
|
||||
import Head from 'next/head';
|
||||
import Link from 'next/link';
|
||||
import { useRouter } from 'next/router'
|
||||
import React, { useEffect, useState } from 'react'
|
||||
|
||||
import { GoBack, PldGraphView, PldTableView } from '../../styles/layouts/pld/PldView'
|
||||
|
||||
import RenderIf from '../../utils/renderIf'
|
||||
import BasicButton from '../../components/buttons/basicButton/BasicButton';
|
||||
import Chart from '../../components/graph/Chart';
|
||||
import PageTitle from '../../components/pageTitle/PageTitle';
|
||||
import Link from 'next/link';
|
||||
import LineChart from '../../components/graph/LineChart';
|
||||
import { LineBarChart } from '../../components/graph/LineBarChart';
|
||||
import LineChart from '../../components/graph/LineChart';
|
||||
import Header from '../../components/header/Header'
|
||||
import PageTitle from '../../components/pageTitle/PageTitle';
|
||||
import { EconomiaAcumulada } from '../../services/economiaAcumulada';
|
||||
import { EvolucaoPld } from '../../services/evolucaoPld';
|
||||
import Head from 'next/head';
|
||||
import { GoBack, PldGraphView, PldTableView } from '../../styles/layouts/pld/PldView'
|
||||
import RenderIf from '../../utils/renderIf'
|
||||
|
||||
export default function region() {
|
||||
const router = useRouter()
|
||||
@ -36,7 +34,7 @@ export default function region() {
|
||||
function handleGreen(minimo, mi, ma, maximo) {
|
||||
if (minimo - mi >= 100 && minimo - mi < 200) {
|
||||
return 'green'
|
||||
} else if ( mi*2 >= 200 && mi*2 <250 ) {
|
||||
} else if ( mi*2 >= 200 && mi*2 < 250 ) {
|
||||
return'dullGreen'
|
||||
} else if ( (ma-mi)/2 >=250 && (ma-mi)/2 < 300 ) {
|
||||
return 'white'
|
||||
@ -56,8 +54,8 @@ export default function region() {
|
||||
</Head>
|
||||
<Header name='' />
|
||||
<RenderIf isTrue={page==='table'? true : false}>
|
||||
<Link href='/dashboard' >{'< voltar para visão geral'}</Link>
|
||||
<PageTitle title='Tabela de consumo Pld' subtitle=''/>
|
||||
<Link href='/dashboard' >{'< Voltar para Visão Geral'}</Link>
|
||||
<PageTitle title='Tabela de consumo PLD' subtitle=''/>
|
||||
<PldTableView>
|
||||
<table className="tg">
|
||||
<thead>
|
||||
@ -186,7 +184,7 @@ export default function region() {
|
||||
</table>
|
||||
<section>
|
||||
<article onClick={() => setPage('perMouth')}>
|
||||
<p>Valores Diarios</p>
|
||||
<p>Valores Diários</p>
|
||||
</article>
|
||||
<article onClick={() => setPage('perDate')}>
|
||||
<p>Valores Horários</p>
|
||||
@ -196,8 +194,8 @@ export default function region() {
|
||||
</RenderIf>
|
||||
|
||||
<RenderIf isTrue={page==='perMouth'? true : false}>
|
||||
<GoBack onClick={() => setPage('table')}>{'< voltar para tabela pld'}</GoBack>
|
||||
<PageTitle title='Consumo por mês' subtitle=''/>
|
||||
<GoBack onClick={() => setPage('table')}>{'< voltar para tabela PLD'}</GoBack>
|
||||
<PageTitle title='Resumo PLD - Diários' subtitle=''/>
|
||||
<PldGraphView>
|
||||
<section className='toolsbar'>
|
||||
<div className='select'>
|
||||
@ -209,26 +207,26 @@ export default function region() {
|
||||
width: '100%'
|
||||
}}
|
||||
>
|
||||
<MenuItem value={0}>Filial 3</MenuItem>
|
||||
<MenuItem value={10}>Filial 3</MenuItem>
|
||||
<MenuItem value={20}>Twenty</MenuItem>
|
||||
<MenuItem value={30}>Thirty</MenuItem>
|
||||
<MenuItem value={0}>Norte</MenuItem>
|
||||
<MenuItem value={10}>Nordeste</MenuItem>
|
||||
<MenuItem value={20}>Sul</MenuItem>
|
||||
<MenuItem value={30}>Sudeste</MenuItem>
|
||||
</Select>
|
||||
</div>
|
||||
<input type="date" data-date="" data-date-format="DD MMMM YYYY" value="2015-08-09"/>
|
||||
<BasicButton title='Download (csv)' />
|
||||
<BasicButton title='Download (csv)' onClick={() => console.log()}/>
|
||||
</section>
|
||||
<LineBarChart data1={EvolucaoPld.data} data3={EvolucaoPld.data1} dataset1={'Economia'} dataset2={'barra1'} dataset3={'2021'} label={EvolucaoPld.label} title='Evolução PLD (R$/MWh)' subtitle='' />
|
||||
</PldGraphView>
|
||||
</RenderIf>
|
||||
|
||||
<RenderIf isTrue={page==='perDate'? true : false}>
|
||||
<GoBack onClick={() => setPage('table')}>{'< voltar para tabela pld'}</GoBack>
|
||||
<GoBack onClick={() => setPage('table')}>{'< voltar para tabela PLD'}</GoBack>
|
||||
<PldGraphView>
|
||||
<PageTitle title='Consumo por dia' subtitle=''/>
|
||||
<PageTitle title='Resumo PLD - Horas' subtitle=''/>
|
||||
<section className='toolsbar'>
|
||||
<input type="date" data-date="" data-date-format="DD MMMM YYYY" value="2021-09-19"/>
|
||||
<BasicButton title='Download (csv)' />
|
||||
<BasicButton title='Download (csv)' onClick={() => console.log()}/>
|
||||
</section>
|
||||
<LineChart data1={EconomiaAcumulada.data3} data2={EconomiaAcumulada.data4} data3={EconomiaAcumulada.data5} data4={EconomiaAcumulada.data6} dataset1='NORDESTE' dataset2='NORTE' dataset3='SUDESTE' dataset4='SUL' title='PLD - 19/09/21' subtitle='' label={EconomiaAcumulada.label1} />
|
||||
</PldGraphView>
|
||||
|
||||
@ -1,22 +1,20 @@
|
||||
import Box from '@mui/material/Box';
|
||||
import FormControl from '@mui/material/FormControl';
|
||||
import InputLabel from '@mui/material/InputLabel';
|
||||
import MenuItem from '@mui/material/MenuItem';
|
||||
import Select, { SelectChangeEvent } from '@mui/material/Select';
|
||||
import Head from 'next/head';
|
||||
import React, { useEffect } from 'react';
|
||||
// import Teste from '../files/teste.csv';
|
||||
import { CSVDownload, CSVLink } from "react-csv";
|
||||
|
||||
import BasicButton from '../components/buttons/basicButton/BasicButton';
|
||||
import Header from '../components/header/Header';
|
||||
import PageTitle from '../components/pageTitle/PageTitle';
|
||||
import BasicButton from '../components/buttons/basicButton/BasicButton';
|
||||
import Sidebar from '../components/sidebar/Sidebar';
|
||||
// import { dados } from '../services/DadosTabelaResumoOperacao';
|
||||
import data from '../services/dados.json'
|
||||
import InputLabel from '@mui/material/InputLabel';
|
||||
import MenuItem from '@mui/material/MenuItem';
|
||||
import FormControl from '@mui/material/FormControl';
|
||||
import Select, { SelectChangeEvent } from '@mui/material/Select';
|
||||
import Box from '@mui/material/Box';
|
||||
// import Teste from '../files/teste.csv';
|
||||
import { CSVLink, CSVDownload } from "react-csv";
|
||||
|
||||
|
||||
|
||||
import { Pagination, TableView } from '../styles/layouts/ResumoOperacao/ResumoOperacaoView';
|
||||
import Head from 'next/head';
|
||||
|
||||
export default function ResumoOperacao() {
|
||||
const csvData = [
|
||||
@ -55,7 +53,6 @@ export default function ResumoOperacao() {
|
||||
console.log(data.unidades.filter((value, index)=> value.value.includes(unidade)))
|
||||
}, [month, unidade])
|
||||
|
||||
|
||||
return(
|
||||
<TableView>
|
||||
<Head>
|
||||
@ -65,52 +62,49 @@ export default function ResumoOperacao() {
|
||||
<PageTitle title='Resumo de Operaçoes' subtitle='Operações detalhadas' />
|
||||
|
||||
<h3>Seletor Mês</h3>
|
||||
<div className='select'>
|
||||
<div className='select'>
|
||||
<FormControl fullWidth >
|
||||
<InputLabel id="demo-simple-select-labels">Unidades</InputLabel>
|
||||
<Select
|
||||
labelId="demo-simple-select-label"
|
||||
id="demo-simple-select"
|
||||
value={unidade}
|
||||
label="Unidade"
|
||||
onChange={handleChangeUnidade}
|
||||
>
|
||||
<MenuItem key={1} value={''}></MenuItem>
|
||||
{
|
||||
data.unidades.map((value) => {
|
||||
return <MenuItem key={1} value={value.value}>{value.name}</MenuItem>
|
||||
})
|
||||
}
|
||||
</Select>
|
||||
</FormControl>
|
||||
|
||||
<FormControl fullWidth >
|
||||
<InputLabel id="demo-simple-select-labels">Unidades</InputLabel>
|
||||
<Select
|
||||
labelId="demo-simple-select-label"
|
||||
id="demo-simple-select"
|
||||
value={unidade}
|
||||
label="Unidade"
|
||||
onChange={handleChangeUnidade}
|
||||
>
|
||||
<MenuItem key={1} value={''}></MenuItem>
|
||||
{
|
||||
data.unidades.map((value) => {
|
||||
return <MenuItem key={1} value={value.value}>{value.name}</MenuItem>
|
||||
})
|
||||
}
|
||||
</Select>
|
||||
</FormControl>
|
||||
|
||||
|
||||
<FormControl fullWidth sx={{ml:1}} >
|
||||
|
||||
<InputLabel id="demo-simple-select-label">Mês</InputLabel>
|
||||
<Select
|
||||
labelId="demo-simple-select-label"
|
||||
id="demo-simple-select"
|
||||
value={month}
|
||||
label="Month"
|
||||
onChange={handleChangeMonth}
|
||||
>
|
||||
<MenuItem value={15}>Janeiro</MenuItem>
|
||||
<MenuItem value={20}>Fevereiro</MenuItem>
|
||||
<MenuItem value={30}>Março</MenuItem>
|
||||
<MenuItem value={30}>Abril</MenuItem>
|
||||
<MenuItem value={30}>Março</MenuItem>
|
||||
<MenuItem value={30}>Maio</MenuItem>
|
||||
<MenuItem value={30}>Junho</MenuItem>
|
||||
<MenuItem value={30}>Julho</MenuItem>
|
||||
<MenuItem value={30}>Agosto</MenuItem>
|
||||
<MenuItem value={30}>Setembro</MenuItem>
|
||||
<MenuItem value={30}>Outubro</MenuItem>
|
||||
<MenuItem value={30}>Novembro</MenuItem>
|
||||
<MenuItem value={30}>Dezembro</MenuItem>
|
||||
</Select>
|
||||
</FormControl>
|
||||
<FormControl fullWidth sx={{ml:1}} >
|
||||
<InputLabel id="demo-simple-select-label">Mês</InputLabel>
|
||||
<Select
|
||||
labelId="demo-simple-select-label"
|
||||
id="demo-simple-select"
|
||||
value={month}
|
||||
label="Month"
|
||||
onChange={handleChangeMonth}
|
||||
>
|
||||
<MenuItem value={15}>Janeiro</MenuItem>
|
||||
<MenuItem value={20}>Fevereiro</MenuItem>
|
||||
<MenuItem value={30}>Março</MenuItem>
|
||||
<MenuItem value={30}>Abril</MenuItem>
|
||||
<MenuItem value={30}>Março</MenuItem>
|
||||
<MenuItem value={30}>Maio</MenuItem>
|
||||
<MenuItem value={30}>Junho</MenuItem>
|
||||
<MenuItem value={30}>Julho</MenuItem>
|
||||
<MenuItem value={30}>Agosto</MenuItem>
|
||||
<MenuItem value={30}>Setembro</MenuItem>
|
||||
<MenuItem value={30}>Outubro</MenuItem>
|
||||
<MenuItem value={30}>Novembro</MenuItem>
|
||||
<MenuItem value={30}>Dezembro</MenuItem>
|
||||
</Select>
|
||||
</FormControl>
|
||||
</div>
|
||||
<table className="tg">
|
||||
<thead>
|
||||
@ -147,22 +141,14 @@ export default function ResumoOperacao() {
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
<div className='btn'>
|
||||
|
||||
{/* <a href={Teste} download="dowload.csv"> */}
|
||||
{/* <BasicButton title='Baixar PDF' /> */}
|
||||
{/* </a> */}
|
||||
|
||||
<CSVLink data={csvData} filename="Arquivo_Teste_Smart_Energia">
|
||||
|
||||
<BasicButton title='Baixar CSV' />
|
||||
<BasicButton title='Baixar CSV' onClick={() => console.log()}/>
|
||||
</CSVLink>
|
||||
|
||||
</div>
|
||||
|
||||
</TableView>
|
||||
)
|
||||
}
|
||||
|
||||
@ -56,12 +56,14 @@ export default function Telemetria() {
|
||||
fullWidth
|
||||
>
|
||||
<MenuItem value="">
|
||||
<em>None</em>
|
||||
<em>Nenhum</em>
|
||||
</MenuItem>
|
||||
<MenuItem value="">07/09/2021</MenuItem>
|
||||
<MenuItem value={10}>Filial 3</MenuItem>
|
||||
<MenuItem value={20}>Twenty</MenuItem>
|
||||
<MenuItem value={30}>Thirty</MenuItem>
|
||||
|
||||
<MenuItem value={10}>Unidade 1</MenuItem>
|
||||
<MenuItem value={20}>Unidade 2</MenuItem>
|
||||
<MenuItem value={30}>Unidade 3</MenuItem>
|
||||
<MenuItem value={30}>Unidade 4</MenuItem>
|
||||
<MenuItem value={30}>Unidade 5</MenuItem>
|
||||
</Select>
|
||||
</FormControl>
|
||||
</div>
|
||||
@ -79,12 +81,13 @@ export default function Telemetria() {
|
||||
fullWidth
|
||||
>
|
||||
<MenuItem value="">
|
||||
<em>None</em>
|
||||
<em>Nenhum</em>
|
||||
</MenuItem>
|
||||
<MenuItem value="">07/09/2021</MenuItem>
|
||||
<MenuItem value={10}>Filial 3</MenuItem>
|
||||
<MenuItem value={20}>Twenty</MenuItem>
|
||||
<MenuItem value={30}>Thirty</MenuItem>
|
||||
<MenuItem value={10}>20/05/2022</MenuItem>
|
||||
<MenuItem value={20}>10/06/2022</MenuItem>
|
||||
<MenuItem value={30}>05/06/2021</MenuItem>
|
||||
<MenuItem value={30}>05/06/2021</MenuItem>
|
||||
<MenuItem value={30}>05/06/2021</MenuItem>
|
||||
</Select>
|
||||
</FormControl>
|
||||
</div>
|
||||
@ -102,12 +105,13 @@ export default function Telemetria() {
|
||||
fullWidth
|
||||
>
|
||||
<MenuItem value="">
|
||||
<em>None</em>
|
||||
<em>Nenhum</em>
|
||||
</MenuItem>
|
||||
<MenuItem value="">07/09/2021</MenuItem>
|
||||
<MenuItem value={10}>Filial 3</MenuItem>
|
||||
<MenuItem value={20}>Twenty</MenuItem>
|
||||
<MenuItem value={30}>Thirty</MenuItem>
|
||||
<MenuItem value={10}>20/05/2022</MenuItem>
|
||||
<MenuItem value={20}>10/06/2022</MenuItem>
|
||||
<MenuItem value={30}>05/06/2021</MenuItem>
|
||||
<MenuItem value={30}>05/06/2021</MenuItem>
|
||||
<MenuItem value={30}>05/06/2021</MenuItem>
|
||||
</Select>
|
||||
</FormControl>
|
||||
</div>
|
||||
@ -125,7 +129,7 @@ export default function Telemetria() {
|
||||
fullWidth
|
||||
>
|
||||
<MenuItem value="">
|
||||
<em>None</em>
|
||||
<em>Nenhum</em>
|
||||
</MenuItem>
|
||||
<MenuItem value="">07/09/2021</MenuItem>
|
||||
<MenuItem value={10}>Filial 3</MenuItem>
|
||||
|
||||
3
src/services/api.ts
Normal file
3
src/services/api.ts
Normal file
@ -0,0 +1,3 @@
|
||||
import getAPIClient from "./ssrApi";
|
||||
|
||||
export const api = getAPIClient()
|
||||
79
src/services/auth.ts
Normal file
79
src/services/auth.ts
Normal file
@ -0,0 +1,79 @@
|
||||
import { api } from "./api";
|
||||
|
||||
export const TOKEN_KEY = "@smartAuth-token";
|
||||
|
||||
export const logout = () => {
|
||||
localStorage.removeItem(TOKEN_KEY);
|
||||
};
|
||||
|
||||
interface SignInRequestData {
|
||||
email: string,
|
||||
password: string
|
||||
}
|
||||
|
||||
type UserObjectType = {
|
||||
name: string;
|
||||
email: string;
|
||||
client_id: number
|
||||
id: number,
|
||||
role: number
|
||||
}
|
||||
|
||||
export async function signInRequest(data: SignInRequestData) {
|
||||
let user: UserObjectType, token: string, exception: any = null
|
||||
|
||||
await api.post('/auth/login', {
|
||||
"email": data.email,
|
||||
"password": data.password,
|
||||
"device_name": "test"
|
||||
}).then(res => {
|
||||
token = res.data.token
|
||||
user = {
|
||||
name: res.data.user.name,
|
||||
email: res.data.user.email,
|
||||
client_id: res.data.user.client_id,
|
||||
id: res.data.user.id,
|
||||
role: res.data.user.roles[0].pivot.role_id
|
||||
}
|
||||
}).catch(res => {
|
||||
exception = res
|
||||
})
|
||||
|
||||
return {
|
||||
token,
|
||||
user: {
|
||||
name: user?.name,
|
||||
email: user?.email,
|
||||
client_id: user?.client_id,
|
||||
id: user?.id,
|
||||
role: user?.role
|
||||
},
|
||||
exception
|
||||
}
|
||||
}
|
||||
|
||||
export default async function recoverUserInformation(id) {
|
||||
let user: UserObjectType
|
||||
|
||||
await api.get(`/user/${id}`).then(res => {
|
||||
console.log(res)
|
||||
user = {
|
||||
name: res.data.user.name,
|
||||
email: res.data.user.email,
|
||||
client_id: res.data.user.client_id,
|
||||
id: res.data.user.id,
|
||||
role: res.data.user.roles[0].pivot.role_id
|
||||
}
|
||||
}).catch(res => {
|
||||
console.log(res)
|
||||
})
|
||||
|
||||
return {
|
||||
user: {
|
||||
name: user?.name,
|
||||
email: user?.email,
|
||||
client_id: user?.client_id,
|
||||
id: user?.id
|
||||
}
|
||||
}
|
||||
}
|
||||
29
src/services/ssrApi.ts
Normal file
29
src/services/ssrApi.ts
Normal file
@ -0,0 +1,29 @@
|
||||
import axios, { AxiosRequestConfig } from "axios";
|
||||
import * as cookie from 'cookie';
|
||||
import * as express from 'express';
|
||||
import * as next from 'next';
|
||||
import { parseCookies } from "nookies";
|
||||
|
||||
export default function getAPIClient(ctx?: Pick<next.NextPageContext, 'req'> | {
|
||||
req: next.NextApiRequest;
|
||||
} | {
|
||||
req: express.Request;
|
||||
} | null | undefined) {
|
||||
|
||||
const { '@smartAuth-token': token } = parseCookies(ctx)
|
||||
|
||||
const api = axios.create({
|
||||
baseURL: "https://smart-energia-api.herokuapp.com/api",
|
||||
});
|
||||
|
||||
api.interceptors.request.use(config => {
|
||||
return config;
|
||||
},
|
||||
);
|
||||
|
||||
if (token) {
|
||||
api.defaults.headers['Authorization'] = `Bearer ${token}`
|
||||
}
|
||||
|
||||
return api
|
||||
}
|
||||
@ -10,6 +10,10 @@ export const GlobalStyle = createGlobalStyle`
|
||||
|
||||
main {
|
||||
padding: 2.5rem;
|
||||
|
||||
button {
|
||||
cursor: pointer
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
import styled from 'styled-components'
|
||||
|
||||
|
||||
export const TableView = styled.div`
|
||||
display: flex;
|
||||
padding: 2.5rem;
|
||||
@ -21,21 +20,16 @@ export const TableView = styled.div`
|
||||
.select{
|
||||
display: flex;
|
||||
|
||||
|
||||
margin-bottom: 25px;
|
||||
|
||||
width: 20rem;
|
||||
}
|
||||
.titleUnidade{
|
||||
|
||||
}
|
||||
|
||||
.tg{
|
||||
border-collapse:collapse;
|
||||
border-spacing:0;
|
||||
font-family:Poppins;
|
||||
width: 100%;
|
||||
|
||||
}
|
||||
|
||||
.tg td{
|
||||
@ -49,7 +43,6 @@ export const TableView = styled.div`
|
||||
word-break:normal;
|
||||
}
|
||||
|
||||
|
||||
.tg th{
|
||||
border-color:#DDDFE1;
|
||||
border-style:solid;
|
||||
@ -134,8 +127,27 @@ export const Pagination = styled.div`
|
||||
.numberColor{
|
||||
color: #ABAFB3;
|
||||
}
|
||||
`
|
||||
|
||||
export const NewTableLine = styled.section`
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
|
||||
flex-direction: column;
|
||||
|
||||
`;
|
||||
margin: 0 0 15px 0;
|
||||
|
||||
width: 100%;
|
||||
article {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
flex-direction: row;
|
||||
|
||||
width: 100%;
|
||||
|
||||
margin: 0 0 10px 0;
|
||||
}
|
||||
`
|
||||
|
||||
@ -1,12 +1,10 @@
|
||||
|
||||
import styled from 'styled-components';
|
||||
|
||||
|
||||
export const TelemetriaView = styled.main`
|
||||
padding: 20px ;
|
||||
width: 100%;
|
||||
|
||||
.title{
|
||||
.title {
|
||||
color: black;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
@ -14,7 +12,7 @@ export const TelemetriaView = styled.main`
|
||||
margin: 0 0 0 10px;
|
||||
}
|
||||
|
||||
span{
|
||||
span {
|
||||
font-family: 'Inter';
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
@ -23,14 +21,14 @@ export const TelemetriaView = styled.main`
|
||||
color: #667085;
|
||||
}
|
||||
|
||||
.titleMenuItem{
|
||||
.titleMenuItem {
|
||||
color: #667085;
|
||||
font-family: Inter;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.paragraph{
|
||||
.paragraph {
|
||||
color: #22d1f0;
|
||||
text-align: center;
|
||||
margin-top: 60px;
|
||||
@ -55,14 +53,27 @@ export const TelemetriaView = styled.main`
|
||||
|
||||
export const Buttons = styled.div`
|
||||
display: flex;
|
||||
min-width: 14rem;
|
||||
cursor: pointer;
|
||||
margin-top: 5rem;
|
||||
padding-left: 100px;
|
||||
padding-right: 100px;
|
||||
justify-content: space-evenly;
|
||||
flex-direction: row;
|
||||
|
||||
min-width: 14rem;
|
||||
height: 6rem;
|
||||
|
||||
margin-top: 5rem;
|
||||
|
||||
padding-left: 100px;
|
||||
padding-right: 100px;
|
||||
|
||||
`;
|
||||
|
||||
export const Uploads = styled.div`
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
|
||||
flex-direction: row;
|
||||
|
||||
padding-left: 100px;
|
||||
padding-right: 100px;
|
||||
`;
|
||||
|
||||
|
||||
|
||||
@ -4,29 +4,61 @@ export const ClientsView = styled.main`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
width: 100%;
|
||||
|
||||
section {
|
||||
display: flex;
|
||||
|
||||
width: 100%;
|
||||
|
||||
:nth-child(2) {
|
||||
:nth-child(3) {
|
||||
justify-content: space-between;
|
||||
|
||||
width: 18rem;
|
||||
|
||||
margin: 45px 0 22px 0;
|
||||
}
|
||||
}
|
||||
.btn2{
|
||||
background: #254F7F;
|
||||
border-radius: 8px;
|
||||
color: white;
|
||||
width: 164px;
|
||||
height: 48px;
|
||||
border: none;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.btn1{
|
||||
background:#FFBC10;
|
||||
border-radius: 8px;
|
||||
color: white;
|
||||
width: 164px;
|
||||
height: 48px;
|
||||
border: none;
|
||||
margin-top: 10px;
|
||||
margin-left: 4px;
|
||||
}
|
||||
.buttons{
|
||||
display: flex;
|
||||
margin-top: 40px;
|
||||
|
||||
:last-child {
|
||||
width: 50rem;
|
||||
height: 30rem;
|
||||
}
|
||||
}
|
||||
`
|
||||
|
||||
export const ClientsModalView = styled.main`
|
||||
display: grid;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
grid-template-columns: 100% 100%;
|
||||
grid-template-rows: 100% 100% 100% 100%;
|
||||
width: 70%;
|
||||
article {
|
||||
display: grid;
|
||||
|
||||
align-self: flex-start;
|
||||
width: 100%;
|
||||
|
||||
grid-template-columns: 80% 80%;
|
||||
grid-template-rows: 50% 50%;
|
||||
|
||||
margin-top: 70px
|
||||
}
|
||||
`
|
||||
|
||||
60
src/styles/layouts/clientsAdmin/clientsAdminView.ts
Normal file
60
src/styles/layouts/clientsAdmin/clientsAdminView.ts
Normal file
@ -0,0 +1,60 @@
|
||||
import styled from 'styled-components'
|
||||
|
||||
|
||||
|
||||
export const NotificationView = styled.nav`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
|
||||
|
||||
.btn{
|
||||
background: #254F7F;
|
||||
border-radius: 8px;
|
||||
color: white;
|
||||
width: 164px;
|
||||
height: 40px;
|
||||
border: none;
|
||||
|
||||
}
|
||||
.btn2{
|
||||
background: #FFBC10;
|
||||
border-radius: 8px;
|
||||
color: white;
|
||||
width: 164px;
|
||||
height: 40px;
|
||||
border: none;
|
||||
margin-left: 3px;
|
||||
}
|
||||
.buttons{
|
||||
display: flex;
|
||||
margin-top:50px ;
|
||||
justify-content: space-between;
|
||||
align-self:flex-start ;
|
||||
margin-left: 20px;
|
||||
}
|
||||
.title{
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-self:flex-start ;
|
||||
flex-direction: column;
|
||||
margin-left: 19px;
|
||||
}
|
||||
|
||||
/*
|
||||
.teste{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-left: 100px;
|
||||
} */
|
||||
.text1{
|
||||
margin-left: 70px;
|
||||
}
|
||||
.header{
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
|
||||
`
|
||||
@ -33,4 +33,40 @@ export const FaqView = styled.main`
|
||||
hr {
|
||||
border: 1px solid #DDDDDD;
|
||||
}
|
||||
|
||||
/* .modal{
|
||||
display: flex;
|
||||
justify-self: flex-end;
|
||||
align-self: center;
|
||||
margin-left: 100px;
|
||||
|
||||
} */
|
||||
.btn2{
|
||||
background: #254F7F;
|
||||
border-radius: 8px;
|
||||
color: white;
|
||||
width: 164px;
|
||||
height: 45px;
|
||||
border: none;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.btn1{
|
||||
background:#FFBC10;
|
||||
border-radius: 8px;
|
||||
color: white;
|
||||
width: 164px;
|
||||
height: 45px;
|
||||
border: none;
|
||||
margin-top: 10px;
|
||||
margin-left: 6px;
|
||||
}
|
||||
.buttons{
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-self: flex-start;
|
||||
margin-top: 45px;
|
||||
|
||||
}
|
||||
|
||||
|
||||
`
|
||||
|
||||
11
src/styles/layouts/general/GeneralView.tsx
Normal file
11
src/styles/layouts/general/GeneralView.tsx
Normal file
@ -0,0 +1,11 @@
|
||||
import styled from "styled-components";
|
||||
|
||||
export const GeneralView = styled.main`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
flex-direction: column;
|
||||
|
||||
width: 100%;
|
||||
`
|
||||
@ -12,7 +12,7 @@ export const IndustryInfoView = styled.main`
|
||||
button{
|
||||
height:60px;
|
||||
width: 22%;
|
||||
margin-top: 17rem;
|
||||
margin-top: 12rem;
|
||||
cursor: pointer;
|
||||
background: #254F7F;
|
||||
border-radius: 8px;
|
||||
|
||||
13
src/styles/layouts/modals/confirmModalView.ts
Normal file
13
src/styles/layouts/modals/confirmModalView.ts
Normal file
@ -0,0 +1,13 @@
|
||||
import styled from "styled-components";
|
||||
|
||||
export const ConfirmModalView = styled.main`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
`
|
||||
@ -3,6 +3,8 @@ import styled from "styled-components";
|
||||
export const NewsView = styled.main`
|
||||
width: 100%;
|
||||
|
||||
margin-bottom: 100px;
|
||||
|
||||
p {
|
||||
font-family: 'Poppins';
|
||||
font-style: normal;
|
||||
@ -22,20 +24,20 @@ export const NewsView = styled.main`
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
button{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: 10px;
|
||||
width: 140px;
|
||||
height: 45px;
|
||||
cursor: pointer;
|
||||
background: #254F7F;
|
||||
border-radius: 8px;
|
||||
border-style: none;
|
||||
font-family: 'Poppins';
|
||||
font-size: 90%;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: 10px;
|
||||
width: 140px;
|
||||
height: 45px;
|
||||
cursor: pointer;
|
||||
background: #254F7F;
|
||||
border-radius: 8px;
|
||||
border-style: none;
|
||||
font-family: 'Poppins';
|
||||
font-size: 90%;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
|
||||
section {
|
||||
@ -54,9 +56,8 @@ export const NewsView = styled.main`
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}`;
|
||||
}
|
||||
`;
|
||||
|
||||
export const Button = styled.div`
|
||||
display: flex;
|
||||
|
||||
@ -203,5 +203,28 @@ export const PldGraphView = styled.main`
|
||||
`
|
||||
|
||||
export const GoBack = styled.label`
|
||||
cursor: pointer
|
||||
cursor: pointer;
|
||||
`
|
||||
|
||||
export const NewTableLine = styled.section`
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
|
||||
flex-direction: column;
|
||||
|
||||
margin: 50px 0px 0px 0;
|
||||
|
||||
width: 100%;
|
||||
article {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
flex-direction: row;
|
||||
|
||||
width: 100%;
|
||||
|
||||
margin: 0 0 10px 0;
|
||||
}
|
||||
`
|
||||
|
||||
166
yarn.lock
166
yarn.lock
@ -1382,14 +1382,60 @@
|
||||
version "1.1.3"
|
||||
resolved "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.1.3.tgz"
|
||||
|
||||
"@tinymce/tinymce-react@^4.1.0":
|
||||
version "4.1.0"
|
||||
resolved "https://registry.yarnpkg.com/@tinymce/tinymce-react/-/tinymce-react-4.1.0.tgz#e2a5e289dc1af03837365bebe969b1a722bf6d99"
|
||||
dependencies:
|
||||
prop-types "^15.6.2"
|
||||
tinymce "^6.0.0 || ^5.5.1"
|
||||
|
||||
"@tootallnate/once@2":
|
||||
version "2.0.0"
|
||||
resolved "https://registry.yarnpkg.com/@tootallnate/once/-/once-2.0.0.tgz#f544a148d3ab35801c1f633a7441fd87c2e484bf"
|
||||
|
||||
"@types/body-parser@*":
|
||||
version "1.19.2"
|
||||
resolved "https://registry.yarnpkg.com/@types/body-parser/-/body-parser-1.19.2.tgz#aea2059e28b7658639081347ac4fab3de166e6f0"
|
||||
dependencies:
|
||||
"@types/connect" "*"
|
||||
"@types/node" "*"
|
||||
|
||||
"@types/chartjs@^0.0.31":
|
||||
version "0.0.31"
|
||||
resolved "https://registry.npmjs.org/@types/chartjs/-/chartjs-0.0.31.tgz"
|
||||
|
||||
"@types/connect@*":
|
||||
version "3.4.35"
|
||||
resolved "https://registry.yarnpkg.com/@types/connect/-/connect-3.4.35.tgz#5fcf6ae445e4021d1fc2219a4873cc73a3bb2ad1"
|
||||
dependencies:
|
||||
"@types/node" "*"
|
||||
|
||||
"@types/cookies@^0.7.7":
|
||||
version "0.7.7"
|
||||
resolved "https://registry.yarnpkg.com/@types/cookies/-/cookies-0.7.7.tgz#7a92453d1d16389c05a5301eef566f34946cfd81"
|
||||
dependencies:
|
||||
"@types/connect" "*"
|
||||
"@types/express" "*"
|
||||
"@types/keygrip" "*"
|
||||
"@types/node" "*"
|
||||
|
||||
"@types/express-serve-static-core@^4.17.18":
|
||||
version "4.17.28"
|
||||
resolved "https://registry.yarnpkg.com/@types/express-serve-static-core/-/express-serve-static-core-4.17.28.tgz#c47def9f34ec81dc6328d0b1b5303d1ec98d86b8"
|
||||
dependencies:
|
||||
"@types/node" "*"
|
||||
"@types/qs" "*"
|
||||
"@types/range-parser" "*"
|
||||
|
||||
"@types/express@*":
|
||||
version "4.17.13"
|
||||
resolved "https://registry.yarnpkg.com/@types/express/-/express-4.17.13.tgz#a76e2995728999bab51a33fabce1d705a3709034"
|
||||
dependencies:
|
||||
"@types/body-parser" "*"
|
||||
"@types/express-serve-static-core" "^4.17.18"
|
||||
"@types/qs" "*"
|
||||
"@types/serve-static" "*"
|
||||
|
||||
"@types/faker@5.5.3":
|
||||
version "5.5.3"
|
||||
resolved "https://registry.npmjs.org/@types/faker/-/faker-5.5.3.tgz"
|
||||
@ -1409,6 +1455,18 @@
|
||||
version "0.0.29"
|
||||
resolved "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz"
|
||||
|
||||
"@types/keygrip@*":
|
||||
version "1.0.2"
|
||||
resolved "https://registry.yarnpkg.com/@types/keygrip/-/keygrip-1.0.2.tgz#513abfd256d7ad0bf1ee1873606317b33b1b2a72"
|
||||
|
||||
"@types/mime@^1":
|
||||
version "1.3.2"
|
||||
resolved "https://registry.yarnpkg.com/@types/mime/-/mime-1.3.2.tgz#93e25bf9ee75fe0fd80b594bc4feb0e862111b5a"
|
||||
|
||||
"@types/node@*":
|
||||
version "17.0.42"
|
||||
resolved "https://registry.yarnpkg.com/@types/node/-/node-17.0.42.tgz#d7e8f22700efc94d125103075c074396b5f41f9b"
|
||||
|
||||
"@types/node@^17.0.31":
|
||||
version "17.0.31"
|
||||
resolved "https://registry.npmjs.org/@types/node/-/node-17.0.31.tgz"
|
||||
@ -1425,6 +1483,14 @@
|
||||
version "15.7.5"
|
||||
resolved "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz"
|
||||
|
||||
"@types/qs@*":
|
||||
version "6.9.7"
|
||||
resolved "https://registry.yarnpkg.com/@types/qs/-/qs-6.9.7.tgz#63bb7d067db107cc1e457c303bc25d511febf6cb"
|
||||
|
||||
"@types/range-parser@*":
|
||||
version "1.2.4"
|
||||
resolved "https://registry.yarnpkg.com/@types/range-parser/-/range-parser-1.2.4.tgz#cd667bcfdd025213aafb7ca5915a932590acdcdc"
|
||||
|
||||
"@types/react-csv@^1.1.2":
|
||||
version "1.1.2"
|
||||
resolved "https://registry.yarnpkg.com/@types/react-csv/-/react-csv-1.1.2.tgz#a5694d7e5cbf4bc1d4baa178a3fa7ac3466ea8c5"
|
||||
@ -1455,6 +1521,13 @@
|
||||
version "0.16.2"
|
||||
resolved "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz"
|
||||
|
||||
"@types/serve-static@*":
|
||||
version "1.13.10"
|
||||
resolved "https://registry.yarnpkg.com/@types/serve-static/-/serve-static-1.13.10.tgz#f5e0ce8797d2d7cc5ebeda48a52c96c4fa47a8d9"
|
||||
dependencies:
|
||||
"@types/mime" "^1"
|
||||
"@types/node" "*"
|
||||
|
||||
"@types/styled-components@^5.1.25":
|
||||
version "5.1.25"
|
||||
resolved "https://registry.npmjs.org/@types/styled-components/-/styled-components-5.1.25.tgz"
|
||||
@ -1681,10 +1754,21 @@ astral-regex@^2.0.0:
|
||||
version "2.0.0"
|
||||
resolved "https://registry.npmjs.org/astral-regex/-/astral-regex-2.0.0.tgz"
|
||||
|
||||
asynckit@^0.4.0:
|
||||
version "0.4.0"
|
||||
resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
|
||||
|
||||
axe-core@^4.3.5:
|
||||
version "4.4.1"
|
||||
resolved "https://registry.npmjs.org/axe-core/-/axe-core-4.4.1.tgz"
|
||||
|
||||
axios@^0.27.2:
|
||||
version "0.27.2"
|
||||
resolved "https://registry.yarnpkg.com/axios/-/axios-0.27.2.tgz#207658cc8621606e586c85db4b41a750e756d972"
|
||||
dependencies:
|
||||
follow-redirects "^1.14.9"
|
||||
form-data "^4.0.0"
|
||||
|
||||
axobject-query@^2.2.0:
|
||||
version "2.2.0"
|
||||
resolved "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz"
|
||||
@ -1910,7 +1994,7 @@ clone@^1.0.2:
|
||||
version "1.0.4"
|
||||
resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.4.tgz#da309cc263df15994c688ca902179ca3c7cd7c7e"
|
||||
|
||||
clsx@^1.0.4, clsx@^1.1.1:
|
||||
clsx@^1.0.4, clsx@^1.1.0, clsx@^1.1.1:
|
||||
version "1.1.1"
|
||||
resolved "https://registry.npmjs.org/clsx/-/clsx-1.1.1.tgz"
|
||||
|
||||
@ -1955,6 +2039,12 @@ columnify@^1.6.0:
|
||||
strip-ansi "^6.0.1"
|
||||
wcwidth "^1.0.0"
|
||||
|
||||
combined-stream@^1.0.8:
|
||||
version "1.0.8"
|
||||
resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.8.tgz#c3d45a8b34fd730631a110a8a2520682b31d5a7f"
|
||||
dependencies:
|
||||
delayed-stream "~1.0.0"
|
||||
|
||||
commander@^8.3.0:
|
||||
version "8.3.0"
|
||||
resolved "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz"
|
||||
@ -1977,6 +2067,10 @@ convert-source-map@^1.5.0, convert-source-map@^1.7.0:
|
||||
dependencies:
|
||||
safe-buffer "~5.1.1"
|
||||
|
||||
cookie@^0.4.1:
|
||||
version "0.4.2"
|
||||
resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.4.2.tgz#0e41f24de5ecf317947c82fc789e06a884824432"
|
||||
|
||||
core-js-compat@^3.21.0, core-js-compat@^3.22.1:
|
||||
version "3.22.5"
|
||||
resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.22.5.tgz#7fffa1d20cb18405bd22756ca1353c6f1a0e8614"
|
||||
@ -2076,6 +2170,10 @@ define-properties@^1.1.3, define-properties@^1.1.4:
|
||||
has-property-descriptors "^1.0.0"
|
||||
object-keys "^1.1.1"
|
||||
|
||||
delayed-stream@~1.0.0:
|
||||
version "1.0.0"
|
||||
resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
|
||||
|
||||
delegates@^1.0.0:
|
||||
version "1.0.0"
|
||||
resolved "https://registry.yarnpkg.com/delegates/-/delegates-1.0.0.tgz#84c6e159b81904fdca59a0ef44cd870d31250f9a"
|
||||
@ -2498,6 +2596,26 @@ flatted@^3.1.0:
|
||||
version "3.2.5"
|
||||
resolved "https://registry.npmjs.org/flatted/-/flatted-3.2.5.tgz"
|
||||
|
||||
follow-redirects@^1.14.9:
|
||||
version "1.15.1"
|
||||
resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.1.tgz#0ca6a452306c9b276e4d3127483e29575e207ad5"
|
||||
|
||||
form-data@^4.0.0:
|
||||
version "4.0.0"
|
||||
resolved "https://registry.yarnpkg.com/form-data/-/form-data-4.0.0.tgz#93919daeaf361ee529584b9b31664dc12c9fa452"
|
||||
dependencies:
|
||||
asynckit "^0.4.0"
|
||||
combined-stream "^1.0.8"
|
||||
mime-types "^2.1.12"
|
||||
|
||||
fs-extra@^10.1.0:
|
||||
version "10.1.0"
|
||||
resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-10.1.0.tgz#02873cfbc4084dde127eaa5f9905eef2325d1abf"
|
||||
dependencies:
|
||||
graceful-fs "^4.2.0"
|
||||
jsonfile "^6.0.1"
|
||||
universalify "^2.0.0"
|
||||
|
||||
fs-minipass@^2.0.0, fs-minipass@^2.1.0:
|
||||
version "2.1.0"
|
||||
resolved "https://registry.yarnpkg.com/fs-minipass/-/fs-minipass-2.1.0.tgz#7f5036fdbf12c63c169190cbe4199c852271f9fb"
|
||||
@ -2638,7 +2756,7 @@ globby@^11.0.4:
|
||||
merge2 "^1.4.1"
|
||||
slash "^3.0.0"
|
||||
|
||||
graceful-fs@^4.1.2, graceful-fs@^4.2.10, graceful-fs@^4.2.6:
|
||||
graceful-fs@^4.1.2, graceful-fs@^4.1.6, graceful-fs@^4.2.0, graceful-fs@^4.2.10, graceful-fs@^4.2.6:
|
||||
version "4.2.10"
|
||||
resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.10.tgz#147d3a006da4ca3ce14728c7aefc287c367d7a6c"
|
||||
|
||||
@ -2973,6 +3091,14 @@ json5@^2.2.1:
|
||||
version "2.2.1"
|
||||
resolved "https://registry.npmjs.org/json5/-/json5-2.2.1.tgz"
|
||||
|
||||
jsonfile@^6.0.1:
|
||||
version "6.1.0"
|
||||
resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-6.1.0.tgz#bc55b2634793c679ec6403094eb13698a6ec0aae"
|
||||
dependencies:
|
||||
universalify "^2.0.0"
|
||||
optionalDependencies:
|
||||
graceful-fs "^4.1.6"
|
||||
|
||||
jsonparse@^1.3.1:
|
||||
version "1.3.1"
|
||||
resolved "https://registry.yarnpkg.com/jsonparse/-/jsonparse-1.3.1.tgz#3f4dae4a91fac315f71062f8521cc239f1366280"
|
||||
@ -3299,6 +3425,16 @@ micromatch@^4.0.4:
|
||||
braces "^3.0.2"
|
||||
picomatch "^2.3.1"
|
||||
|
||||
mime-db@1.52.0:
|
||||
version "1.52.0"
|
||||
resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.52.0.tgz#bbabcdc02859f4987301c856e3387ce5ec43bf70"
|
||||
|
||||
mime-types@^2.1.12:
|
||||
version "2.1.35"
|
||||
resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.35.tgz#381a871b62a734450660ae3deee44813f70d959a"
|
||||
dependencies:
|
||||
mime-db "1.52.0"
|
||||
|
||||
mimic-fn@^2.1.0:
|
||||
version "2.1.0"
|
||||
resolved "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz"
|
||||
@ -3454,6 +3590,13 @@ node-releases@^2.0.3:
|
||||
version "2.0.4"
|
||||
resolved "https://registry.npmjs.org/node-releases/-/node-releases-2.0.4.tgz"
|
||||
|
||||
nookies@^2.5.2:
|
||||
version "2.5.2"
|
||||
resolved "https://registry.yarnpkg.com/nookies/-/nookies-2.5.2.tgz#cc55547efa982d013a21475bd0db0c02c1b35b27"
|
||||
dependencies:
|
||||
cookie "^0.4.1"
|
||||
set-cookie-parser "^2.4.6"
|
||||
|
||||
nopt@^5.0.0:
|
||||
version "5.0.0"
|
||||
resolved "https://registry.yarnpkg.com/nopt/-/nopt-5.0.0.tgz#530942bb58a512fccafe53fe210f13a25355dc88"
|
||||
@ -3473,6 +3616,13 @@ normalize-path@^3.0.0:
|
||||
version "3.0.0"
|
||||
resolved "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz"
|
||||
|
||||
notistack@^2.0.5:
|
||||
version "2.0.5"
|
||||
resolved "https://registry.yarnpkg.com/notistack/-/notistack-2.0.5.tgz#8eb53720453f6e02182cd0e6784ced630a7bb7e6"
|
||||
dependencies:
|
||||
clsx "^1.1.0"
|
||||
hoist-non-react-statics "^3.3.0"
|
||||
|
||||
npm-audit-report@^3.0.0:
|
||||
version "3.0.0"
|
||||
resolved "https://registry.yarnpkg.com/npm-audit-report/-/npm-audit-report-3.0.0.tgz#1bf3e531208b5f77347c8d00c3d9badf5be30cd6"
|
||||
@ -4144,6 +4294,10 @@ set-blocking@^2.0.0:
|
||||
version "2.0.0"
|
||||
resolved "https://registry.yarnpkg.com/set-blocking/-/set-blocking-2.0.0.tgz#045f9782d011ae9a6803ddd382b24392b3d890f7"
|
||||
|
||||
set-cookie-parser@^2.4.6:
|
||||
version "2.5.0"
|
||||
resolved "https://registry.yarnpkg.com/set-cookie-parser/-/set-cookie-parser-2.5.0.tgz#96b59525e1362c94335c3c761100bb6e8f2da4b0"
|
||||
|
||||
shallowequal@^1.1.0:
|
||||
version "1.1.0"
|
||||
resolved "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz"
|
||||
@ -4401,6 +4555,10 @@ tiny-warning@^1.0.2:
|
||||
version "1.0.3"
|
||||
resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754"
|
||||
|
||||
"tinymce@^6.0.0 || ^5.5.1", tinymce@^6.0.3:
|
||||
version "6.0.3"
|
||||
resolved "https://registry.yarnpkg.com/tinymce/-/tinymce-6.0.3.tgz#993db09afa473a764ad8b594cdaf744b2c7e2e74"
|
||||
|
||||
to-fast-properties@^2.0.0:
|
||||
version "2.0.0"
|
||||
resolved "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz"
|
||||
@ -4496,6 +4654,10 @@ unique-slug@^2.0.0:
|
||||
dependencies:
|
||||
imurmurhash "^0.1.4"
|
||||
|
||||
universalify@^2.0.0:
|
||||
version "2.0.0"
|
||||
resolved "https://registry.yarnpkg.com/universalify/-/universalify-2.0.0.tgz#75a4984efedc4b08975c5aeb73f530d02df25717"
|
||||
|
||||
uri-js@^4.2.2:
|
||||
version "4.4.1"
|
||||
resolved "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user