Merge branch 'administativePages' into 'dev'
Administative pages See merge request kluppsoftware/smart-energia-web!58
This commit is contained in:
José Corte
commit
3853d8ceb6
231
package-lock.json
generated
231
package-lock.json
generated
@ -4595,6 +4595,171 @@
|
|||||||
"engines": {
|
"engines": {
|
||||||
"node": ">= 6"
|
"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": {
|
"dependencies": {
|
||||||
@ -7417,6 +7582,72 @@
|
|||||||
"yaml": {
|
"yaml": {
|
||||||
"version": "1.10.2",
|
"version": "1.10.2",
|
||||||
"resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz"
|
"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/material": "^5.6.4",
|
||||||
"@mui/x-data-grid": "^5.11.0",
|
"@mui/x-data-grid": "^5.11.0",
|
||||||
"@mui/x-date-pickers": "^5.0.0-alpha.3",
|
"@mui/x-date-pickers": "^5.0.0-alpha.3",
|
||||||
|
"@tinymce/tinymce-react": "^4.1.0",
|
||||||
"@types/react-csv": "^1.1.2",
|
"@types/react-csv": "^1.1.2",
|
||||||
"@typescript-eslint/eslint-plugin": "^5.22.0",
|
"@typescript-eslint/eslint-plugin": "^5.22.0",
|
||||||
"@typescript-eslint/parser": "^5.22.0",
|
"@typescript-eslint/parser": "^5.22.0",
|
||||||
|
"axios": "^0.27.2",
|
||||||
"chart.js": "^3.7.1",
|
"chart.js": "^3.7.1",
|
||||||
"chartjs-plugin-datalabels": "^2.0.0",
|
"chartjs-plugin-datalabels": "^2.0.0",
|
||||||
"eslint-plugin-react": "^7.29.4",
|
"eslint-plugin-react": "^7.29.4",
|
||||||
"eslit": "^6.0.0",
|
"eslit": "^6.0.0",
|
||||||
"faker": "5.5.3",
|
"faker": "5.5.3",
|
||||||
|
"fs-extra": "^10.1.0",
|
||||||
"install": "^0.13.0",
|
"install": "^0.13.0",
|
||||||
"next": "12.1.6",
|
"next": "12.1.6",
|
||||||
|
"nookies": "^2.5.2",
|
||||||
|
"notistack": "^2.0.5",
|
||||||
"npm": "^8.10.0",
|
"npm": "^8.10.0",
|
||||||
"nprogress": "^0.2.0",
|
"nprogress": "^0.2.0",
|
||||||
"patternomaly": "^1.3.2",
|
"patternomaly": "^1.3.2",
|
||||||
@ -45,11 +50,13 @@
|
|||||||
"react-csv": "^2.2.2",
|
"react-csv": "^2.2.2",
|
||||||
"react-dom": "18.1.0",
|
"react-dom": "18.1.0",
|
||||||
"react-icons": "^4.3.1",
|
"react-icons": "^4.3.1",
|
||||||
"styled-components": "^5.3.5"
|
"styled-components": "^5.3.5",
|
||||||
|
"tinymce": "^6.0.3"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@babel/preset-env": "^7.17.10",
|
"@babel/preset-env": "^7.17.10",
|
||||||
"@types/chartjs": "^0.0.31",
|
"@types/chartjs": "^0.0.31",
|
||||||
|
"@types/cookies": "^0.7.7",
|
||||||
"@types/faker": "5.5.3",
|
"@types/faker": "5.5.3",
|
||||||
"@types/node": "^17.0.31",
|
"@types/node": "^17.0.31",
|
||||||
"@types/nprogress": "^0.2.0",
|
"@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 Link from 'next/link'
|
||||||
|
import React from 'react'
|
||||||
|
|
||||||
import RenderIf from '../../../utils/renderIf'
|
import RenderIf from '../../../utils/renderIf'
|
||||||
import { LoginButtonView } from './LoginButtonView'
|
import { LoginButtonView } from './LoginButtonView'
|
||||||
|
|
||||||
interface LoginButtonInterface {
|
interface LoginButtonInterface {
|
||||||
title: string,
|
title: string,
|
||||||
link?: boolean | undefined,
|
link?: boolean | undefined,
|
||||||
onClick?: () => void
|
onClick: () => void
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function LoginButton({ title, link, onClick }: LoginButtonInterface) {
|
export default function LoginButton({ title, link, onClick }: LoginButtonInterface) {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<RenderIf isTrue={link? true : false}>
|
<RenderIf isTrue={link? true : false}>
|
||||||
<Link href='/dashboard' >
|
<Link href='/dashboard'>
|
||||||
<LoginButtonView>
|
<LoginButtonView onClick={() => onClick()}>
|
||||||
{title}
|
{title}
|
||||||
</LoginButtonView>
|
</LoginButtonView>
|
||||||
</Link>
|
</Link>
|
||||||
|
|||||||
@ -1,21 +1,27 @@
|
|||||||
import React, { useState } from 'react'
|
import React, { useState } from 'react'
|
||||||
import Image from 'next/image'
|
import Image from 'next/image'
|
||||||
|
import getAPIClient from '../../services/ssrApi';
|
||||||
import { FaqQuestionsCardBody, FaqQuestionsCardHeader, CommonQuestionsCardView } from './FaqQuestionsCardView'
|
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)
|
const [ showCardBody, setShowCardBody ] = useState<boolean>(false)
|
||||||
return (
|
return (
|
||||||
|
|
||||||
<CommonQuestionsCardView>
|
<CommonQuestionsCardView>
|
||||||
<FaqQuestionsCardHeader>
|
<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)} />
|
<Image src={showCardBody? '/assets/less-icon.svg' : '/assets/plus-icon.svg' } width={32} height={32} onClick={() => setShowCardBody(!showCardBody)} />
|
||||||
</FaqQuestionsCardHeader>
|
</FaqQuestionsCardHeader>
|
||||||
|
|
||||||
<FaqQuestionsCardBody showCardBody={showCardBody} >
|
<FaqQuestionsCardBody showCardBody={showCardBody} >
|
||||||
<p>
|
<p>
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
{answer}
|
||||||
Consequat porta faucibus elementum pharetra varius
|
|
||||||
</p>
|
</p>
|
||||||
</FaqQuestionsCardBody>
|
</FaqQuestionsCardBody>
|
||||||
</CommonQuestionsCardView>
|
</CommonQuestionsCardView>
|
||||||
|
|||||||
@ -1,18 +1,11 @@
|
|||||||
import React from 'react';
|
import { BarElement, CategoryScale, Chart as ChartJS, Legend, LinearScale, Title, Tooltip } from 'chart.js';
|
||||||
import {
|
|
||||||
Chart as ChartJS,
|
|
||||||
CategoryScale,
|
|
||||||
LinearScale,
|
|
||||||
BarElement,
|
|
||||||
Title,
|
|
||||||
Tooltip,
|
|
||||||
Legend,
|
|
||||||
} from 'chart.js';
|
|
||||||
import { Bar } from 'react-chartjs-2';
|
|
||||||
import ChartDataLabels from 'chartjs-plugin-datalabels';
|
import ChartDataLabels from 'chartjs-plugin-datalabels';
|
||||||
import { ChartView } from './ChartView';
|
|
||||||
import ChartTitle from './ChartTitle';
|
|
||||||
import { draw, generate } from 'patternomaly'
|
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(
|
ChartJS.register(
|
||||||
CategoryScale,
|
CategoryScale,
|
||||||
@ -57,8 +50,6 @@ export function SingleBar({ title, subtitle, dataProps, label, dataset, dataset1
|
|||||||
const percentage = (value*100 / sum).toFixed(0)+"%";
|
const percentage = (value*100 / sum).toFixed(0)+"%";
|
||||||
const result = `${value}\n ${percentage}`
|
const result = `${value}\n ${percentage}`
|
||||||
|
|
||||||
console.log(value)
|
|
||||||
|
|
||||||
return value==null? null : result
|
return value==null? null : result
|
||||||
},
|
},
|
||||||
display: true,
|
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 Avatar from '@mui/material/Avatar';
|
||||||
|
import TextField from '@mui/material/TextField';
|
||||||
|
import Image from 'next/image';
|
||||||
|
import React from 'react'
|
||||||
|
|
||||||
import { HeaderView } from './HeaderView'
|
import { HeaderView } from './HeaderView'
|
||||||
|
|
||||||
@ -38,7 +37,6 @@ interface headerInterface {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export default function Header({ name }: headerInterface) {
|
export default function Header({ name }: headerInterface) {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<HeaderView>
|
<HeaderView>
|
||||||
<section>
|
<section>
|
||||||
@ -53,9 +51,11 @@ export default function Header({ name }: headerInterface) {
|
|||||||
<section>
|
<section>
|
||||||
<Image src='/assets/png/copel.png' width={170} height={50} />
|
<Image src='/assets/png/copel.png' width={170} height={50} />
|
||||||
<div className='icon' >
|
<div className='icon' >
|
||||||
|
<p>
|
||||||
olá, {'josé'}
|
olá, {'josé'}
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<Avatar {...stringAvatar('José Corte')} />
|
<Avatar {...stringAvatar('José Corte')} style={{border: 'white solid 4px', width: '47px', height: '47px'}}/>
|
||||||
</section>
|
</section>
|
||||||
</HeaderView>
|
</HeaderView>
|
||||||
)
|
)
|
||||||
|
|||||||
@ -11,58 +11,32 @@ export const HeaderView = styled.header`
|
|||||||
section {
|
section {
|
||||||
width: 30%;
|
width: 30%;
|
||||||
|
|
||||||
|
|
||||||
:last-child {
|
:last-child {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
align-items: flex-start;
|
align-items: center;
|
||||||
|
|
||||||
height: fit-content;
|
height: fit-content;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon {
|
.icon {
|
||||||
position: relative;
|
|
||||||
|
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: flex-start;
|
||||||
|
|
||||||
width: 150px;
|
min-width: 120px;
|
||||||
height: 40px;
|
height: 40px;
|
||||||
|
|
||||||
border-radius: 8px;
|
border-radius: 8px 0 0 8px;
|
||||||
|
|
||||||
background-color: #254F7F;
|
background-color: #254F7F;
|
||||||
|
|
||||||
|
transform: translateX(16px);
|
||||||
|
|
||||||
|
p{
|
||||||
color: white;
|
color: white;
|
||||||
|
margin-left: 15%;
|
||||||
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;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
`
|
`
|
||||||
|
|||||||
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%',
|
left: '50%',
|
||||||
transform: 'translate(-50%, -50%)',
|
transform: 'translate(-50%, -50%)',
|
||||||
width: '80%',
|
width: '80%',
|
||||||
height: '80%',
|
height: '550px',
|
||||||
bgcolor: 'background.paper',
|
bgcolor: 'background.paper',
|
||||||
border: '2px solid #000',
|
border: '2px solid #254F7F',
|
||||||
boxShadow: 24,
|
boxShadow: 24,
|
||||||
p: 4,
|
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 [openState, setOpenState] = React.useState(false);
|
||||||
const handleOpen = () => setOpenState(true);
|
const handleOpen = () => setOpenState(true);
|
||||||
const handleClose = () => {setOpenState(false); handleIsClose(false)}
|
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 Box from '@mui/material/Box';
|
||||||
import Button from '@mui/material/Button';
|
import Button from '@mui/material/Button';
|
||||||
import Typography from '@mui/material/Typography';
|
|
||||||
import Modal from '@mui/material/Modal';
|
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'
|
import { SidebarView } from './SidebarView'
|
||||||
|
|
||||||
const style = {
|
const style = {
|
||||||
@ -35,11 +35,52 @@ export default function Sidebar() {
|
|||||||
|
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
|
|
||||||
|
const { ['user-role']: role } = parseCookies()
|
||||||
|
|
||||||
|
console.log(role)
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
setViewModal(false)
|
setViewModal(false)
|
||||||
}, [router.pathname])
|
}, [router.pathname])
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
<>
|
||||||
|
<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>
|
||||||
|
<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} >
|
<SidebarView economiaDrawer={economiaDrawer} modalOpen={viewModal} >
|
||||||
<div className='hamburger' onClick={() => setViewModal(!viewModal)} >
|
<div className='hamburger' onClick={() => setViewModal(!viewModal)} >
|
||||||
<Image src='/assets/hamburgerModal.svg' width={60} height={60} />
|
<Image src='/assets/hamburgerModal.svg' width={60} height={60} />
|
||||||
@ -86,5 +127,7 @@ export default function Sidebar() {
|
|||||||
<div><h3>+55(41) 3012-5900</h3></div>
|
<div><h3>+55(41) 3012-5900</h3></div>
|
||||||
</aside>
|
</aside>
|
||||||
</SidebarView>
|
</SidebarView>
|
||||||
|
</RenderIf>
|
||||||
|
</>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
@ -182,7 +182,7 @@ export const SidebarView = styled.nav<SidebarViewInterface>`
|
|||||||
|
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
|
|
||||||
height: 5rem;
|
height: 3.5rem;
|
||||||
}
|
}
|
||||||
.imageNext {
|
.imageNext {
|
||||||
display: none;
|
display: none;
|
||||||
@ -194,8 +194,8 @@ export const SidebarView = styled.nav<SidebarViewInterface>`
|
|||||||
background-color: #FFF;
|
background-color: #FFF;
|
||||||
|
|
||||||
li {
|
li {
|
||||||
height: 7rem;
|
height: 5rem;
|
||||||
font-size: 170%;
|
font-size: 150%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
aside {
|
aside {
|
||||||
@ -207,15 +207,17 @@ export const SidebarView = styled.nav<SidebarViewInterface>`
|
|||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
ul {
|
ul {
|
||||||
li {
|
li {
|
||||||
height: 2rem;
|
height: 3rem;
|
||||||
|
font-size: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@media (max-width: 1008px) {
|
@media (max-width: 1008px) {
|
||||||
font-size: 14px;
|
font-size: 26px;
|
||||||
ul {
|
ul {
|
||||||
li {
|
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 { AppProps } from 'next/app'
|
||||||
|
import Head from 'next/head'
|
||||||
|
import { useRouter } from 'next/router'
|
||||||
import NProgress from 'nprogress'
|
import NProgress from 'nprogress'
|
||||||
|
import React, { useContext, useEffect, useState } from 'react'
|
||||||
// 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 Home from '.'
|
import Home from '.'
|
||||||
import Head from 'next/head'
|
// import Footer from '../components/footer/Footer'
|
||||||
import VerifyEmail from './verifyEmail'
|
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 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) {
|
function MyApp({ Component, pageProps }: AppProps) {
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
@ -40,7 +44,7 @@ function MyApp({ Component, pageProps }: AppProps) {
|
|||||||
}, [router])
|
}, [router])
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<AuthProvider>
|
||||||
<AppView>
|
<AppView>
|
||||||
<Head>
|
<Head>
|
||||||
<link rel="icon" type="imagem/png" href="/assets/logose.png" />
|
<link rel="icon" type="imagem/png" href="/assets/logose.png" />
|
||||||
@ -61,8 +65,7 @@ function MyApp({ Component, pageProps }: AppProps) {
|
|||||||
null
|
null
|
||||||
}
|
}
|
||||||
</AppView>
|
</AppView>
|
||||||
{/* <Footer /> */}
|
</AuthProvider>
|
||||||
</>
|
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -7,7 +7,6 @@ import Header from '../components/header/Header'
|
|||||||
import PageTitle from '../components/pageTitle/PageTitle'
|
import PageTitle from '../components/pageTitle/PageTitle'
|
||||||
import { EconomiaAcumulada } from '../services/economiaAcumulada'
|
import { EconomiaAcumulada } from '../services/economiaAcumulada'
|
||||||
import { dataEconomiaBruta } from '../services/economiaBruta'
|
import { dataEconomiaBruta } from '../services/economiaBruta'
|
||||||
|
|
||||||
import { AccumulatedSavingsView } from '../styles/layouts/economy/accumulatedSavings/AccumulatedSavingsView'
|
import { AccumulatedSavingsView } from '../styles/layouts/economy/accumulatedSavings/AccumulatedSavingsView'
|
||||||
|
|
||||||
export default function AccumulatedSavings() {
|
export default function AccumulatedSavings() {
|
||||||
@ -19,7 +18,8 @@ export default function AccumulatedSavings() {
|
|||||||
<Header name='' />
|
<Header name='' />
|
||||||
<PageTitle title='Economia Acumulada' subtitle='Economia Bruta Estimada e Acumulada anual (Valores em R$ mil)' />
|
<PageTitle title='Economia Acumulada' subtitle='Economia Bruta Estimada e Acumulada anual (Valores em R$ mil)' />
|
||||||
<section>
|
<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>
|
</section>
|
||||||
</AccumulatedSavingsView>
|
</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 Button from '@mui/material/Button';
|
||||||
|
import Modal from '@mui/material/Modal';
|
||||||
import TextField from '@mui/material/TextField';
|
import TextField from '@mui/material/TextField';
|
||||||
|
import Typography from '@mui/material/Typography';
|
||||||
import { DataGrid, GridColDef, GridValueGetterParams } from '@mui/x-data-grid';
|
import { DataGrid, GridColDef, GridValueGetterParams } from '@mui/x-data-grid';
|
||||||
import React, { useState } from 'react'
|
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 BasicButton from '../../components/buttons/basicButton/BasicButton'
|
||||||
import Modal from '../../components/modal/Modal';
|
import FaqButton1 from '../../components/buttons/faqButton/FaqButton1';
|
||||||
import PageTitle from '../../components/pageTitle/PageTitle'
|
import FaqButton2 from '../../components/buttons/faqButton/FaqButton2';
|
||||||
import { ClientsModalView, ClientsView } from '../../styles/layouts/clients/ClientsView'
|
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() {
|
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 [openModal, setOpenModal] = useState(false)
|
||||||
|
|
||||||
const rows = [
|
function handleCreateClient() {
|
||||||
{ id: 1, lastName: 'Snow', firstName: 'Jon', age: 35 },
|
api.post('', {
|
||||||
{ id: 2, lastName: 'Lannister', firstName: 'Cersei', age: 42 },
|
"name": "Teste3",
|
||||||
{ id: 3, lastName: 'Lannister', firstName: 'Jaime', age: 45 },
|
"email": "teste3@gmail.com",
|
||||||
{ id: 4, lastName: 'Stark', firstName: 'Arya', age: 16 },
|
"password": "password",
|
||||||
{ id: 5, lastName: 'Targaryen', firstName: 'Daenerys', age: null },
|
"password_confirmation": "password",
|
||||||
{ id: 6, lastName: 'Melisandre', firstName: null, age: 150 },
|
"client_id": 222
|
||||||
{ 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 || ''}`,
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<div style={{display: 'flex', flexDirection: 'column', width: '100%'}}>
|
||||||
<ClientsView>
|
<ClientsView>
|
||||||
|
<Header name='' />
|
||||||
<PageTitle title='Clientes' subtitle='Clientes Smart Energia'/>
|
<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>
|
<section>
|
||||||
<BasicButton title='Adicionar' onClick={() => setOpenModal(true)}/>
|
<ClientsTable />
|
||||||
<BasicButton title='Inativar' onClick={() => {throw new Error('fixing...')}}/>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section>
|
|
||||||
<DataGrid
|
|
||||||
rows={rows}
|
|
||||||
columns={columns}
|
|
||||||
pageSize={6}
|
|
||||||
rowsPerPageOptions={[6]}
|
|
||||||
checkboxSelection
|
|
||||||
/>
|
|
||||||
</section>
|
</section>
|
||||||
</ClientsView>
|
</ClientsView>
|
||||||
|
|
||||||
<Modal open={openModal} handleIsClose={(value) => {setOpenModal(value)}}>
|
<ConfirmModal open={openModalInativar} handleIsClose={(value) => {setOpenModalInativar(value)}}>
|
||||||
<ClientsModalView>
|
<ConfirmModalView>
|
||||||
<TextField id="outlined-basic" label="Outlined" variant="outlined" style={{width: '300px'}}/>
|
<BasicButton title='Confirmar' onClick={() => setOpenModalInativar(true)}/>
|
||||||
<TextField id="outlined-basic" label="Outlined" variant="outlined" style={{width: '300px'}}/>
|
<BasicButton title='Cancelar' onClick={() => setOpenModalInativar(true)}/>
|
||||||
<TextField id="outlined-basic" label="Outlined" variant="outlined" style={{width: '300px'}}/>
|
</ConfirmModalView>
|
||||||
<TextField id="outlined-basic" label="Outlined" variant="outlined" style={{width: '300px'}}/>
|
</ConfirmModal>
|
||||||
<TextField id="outlined-basic" label="Outlined" variant="outlined" style={{width: '300px'}}/>
|
</div>
|
||||||
<Button
|
|
||||||
variant="contained"
|
|
||||||
component="label"
|
|
||||||
>
|
|
||||||
Upload File
|
|
||||||
<input
|
|
||||||
type="file"
|
|
||||||
hidden
|
|
||||||
/>
|
|
||||||
</Button>
|
|
||||||
</ClientsModalView>
|
|
||||||
</Modal>
|
|
||||||
</>
|
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
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 (
|
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 Image from 'next/image'
|
||||||
|
import React from 'react'
|
||||||
|
|
||||||
import BasicButton from '../components/buttons/basicButton/BasicButton'
|
import BasicButton from '../components/buttons/basicButton/BasicButton'
|
||||||
import GradientButton from '../components/buttons/gradientButton/GradientButton'
|
import GradientButton from '../components/buttons/gradientButton/GradientButton'
|
||||||
import Graph from '../components/graph/Chart'
|
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 LineChart from '../components/graph/LineChart'
|
||||||
|
|
||||||
// import Footer from '../components/footer/footer'
|
// import Footer from '../components/footer/footer'
|
||||||
|
|
||||||
export default function areaTest() {
|
export default function areaTest() {
|
||||||
|
|
||||||
const [values, setValues] = React.useState({
|
const [values, setValues] = React.useState({
|
||||||
amount: '',
|
amount: '',
|
||||||
password: '',
|
password: '',
|
||||||
|
|||||||
@ -17,6 +17,10 @@ import Chart from '../components/graph/Chart'
|
|||||||
import { LineBarChart } from '../components/graph/LineBarChart'
|
import { LineBarChart } from '../components/graph/LineBarChart'
|
||||||
import { ConsumoEstimado } from '../services/consumoEstimado'
|
import { ConsumoEstimado } from '../services/consumoEstimado'
|
||||||
import Head from 'next/head'
|
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() {
|
export default function Dashboard() {
|
||||||
|
|
||||||
@ -53,9 +57,27 @@ export default function Dashboard() {
|
|||||||
</GraphCard>
|
</GraphCard>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
<button onClick={() => {
|
||||||
|
const id = 1
|
||||||
|
console.log(recoverUserInformation(id))
|
||||||
|
}}></button>
|
||||||
</DashboardView>
|
</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 Header from '../components/header/Header'
|
||||||
import PageTitle from '../components/pageTitle/PageTitle'
|
import PageTitle from '../components/pageTitle/PageTitle'
|
||||||
import { ConsumoEstimado } from '../services/consumoEstimado'
|
import { ConsumoEstimado } from '../services/consumoEstimado'
|
||||||
|
|
||||||
import { EstimatedCostView } from '../styles/layouts/economy/estimatedCost/EstimatedCostView'
|
import { EstimatedCostView } from '../styles/layouts/economy/estimatedCost/EstimatedCostView'
|
||||||
|
|
||||||
export default function EstimatedCost() {
|
export default function EstimatedCost() {
|
||||||
@ -16,7 +15,7 @@ export default function EstimatedCost() {
|
|||||||
<title>Smart Energia - Custos Estimados</title>
|
<title>Smart Energia - Custos Estimados</title>
|
||||||
</Head>
|
</Head>
|
||||||
<Header name='' />
|
<Header name='' />
|
||||||
<PageTitle title='Custos Estimados' subtitle='Comparativo de Custo Estimado' />
|
<PageTitle title='Cativo x Livre mensal' subtitle='Comparativo de Custo Estimado' />
|
||||||
<section>
|
<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 />
|
<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>
|
</section>
|
||||||
|
|||||||
@ -1,10 +1,15 @@
|
|||||||
|
import { GetServerSideProps } from 'next'
|
||||||
import Head from 'next/head'
|
import Head from 'next/head'
|
||||||
|
import { parseCookies } from 'nookies'
|
||||||
import React from 'react'
|
import React from 'react'
|
||||||
import CommonQuestionsCard from '../components/faqQuestionsCard/FaqQuestionsCard'
|
import CommonQuestionsCard from '../components/faqQuestionsCard/FaqQuestionsCard'
|
||||||
import Header from '../components/header/Header'
|
import Header from '../components/header/Header'
|
||||||
|
import { api } from '../services/api'
|
||||||
|
import getAPIClient from '../services/ssrApi'
|
||||||
import { FaqView } from '../styles/layouts/commonQuestions/FaqView'
|
import { FaqView } from '../styles/layouts/commonQuestions/FaqView'
|
||||||
|
|
||||||
export default function commonQuestions() {
|
|
||||||
|
export default function commonQuestions({faqData}) {
|
||||||
return (
|
return (
|
||||||
<FaqView>
|
<FaqView>
|
||||||
<Head>
|
<Head>
|
||||||
@ -14,17 +19,44 @@ export default function commonQuestions() {
|
|||||||
<h1>Perguntas Frequentes</h1>
|
<h1>Perguntas Frequentes</h1>
|
||||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
|
||||||
<section className='CommonQuestionsSection' >
|
<section className='CommonQuestionsSection' >
|
||||||
<CommonQuestionsCard />
|
{
|
||||||
<hr />
|
faqData.map((value, index ) => {
|
||||||
<CommonQuestionsCard />
|
return <>
|
||||||
<hr />
|
<CommonQuestionsCard key={index} question={value.question} answer={value.answer}/>
|
||||||
<CommonQuestionsCard />
|
|
||||||
<hr />
|
|
||||||
<CommonQuestionsCard />
|
|
||||||
<hr />
|
|
||||||
<CommonQuestionsCard />
|
|
||||||
<hr />
|
<hr />
|
||||||
|
</>
|
||||||
|
})
|
||||||
|
}
|
||||||
</section>
|
</section>
|
||||||
</FaqView>
|
</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 Image from 'next/image';
|
||||||
import Link from 'next/link';
|
import Link from 'next/link';
|
||||||
import { useRouter } from 'next/router'
|
import { useRouter } from 'next/router'
|
||||||
import OutlinedInput from '@mui/material/OutlinedInput';
|
import React, { useContext, useState } from 'react'
|
||||||
import InputLabel from '@mui/material/InputLabel';
|
import { AiOutlineEye, AiOutlineEyeInvisible } from 'react-icons/ai';
|
||||||
import InputAdornment from '@mui/material/InputAdornment';
|
|
||||||
import LoginButton from '../components/buttons/loginButton/LoginButton';
|
import LoginButton from '../components/buttons/loginButton/LoginButton';
|
||||||
import FormControl from '@mui/material/FormControl';
|
import { AuthContext } from '../contexts/AuthContext';
|
||||||
import IconButton from '@mui/material/IconButton';
|
import { api } from '../services/api';
|
||||||
import TextField from '@mui/material/TextField';
|
import { LoginContainer, LoginView } from '../styles/layouts/login/LoginView';
|
||||||
|
import Dashboard from './dashboard';
|
||||||
import {AiOutlineEyeInvisible, AiOutlineEye} from 'react-icons/ai';
|
|
||||||
|
|
||||||
import { LoginView, LoginContainer } from '../styles/layouts/login/LoginView';
|
|
||||||
import Head from 'next/head';
|
|
||||||
|
|
||||||
export default function Home() {
|
export default function Home() {
|
||||||
const [state, setstate]=useState(false);
|
const [state, setstate] = useState(false);
|
||||||
|
|
||||||
const [values, setValues] = React.useState({
|
const [values, setValues] = useState({
|
||||||
password: '',
|
password: '',
|
||||||
showPassword: false,
|
showPassword: false,
|
||||||
});
|
});
|
||||||
|
const [email, setEmail] = useState<string>()
|
||||||
|
const [password, setPassword] = useState<string>()
|
||||||
|
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
const rota = router.pathname
|
const rota = router.pathname
|
||||||
|
|
||||||
const handleChange = (prop) => (event) => {
|
const handleChange = (prop) => (event) => {
|
||||||
setValues({ ...values, [prop]: event.target.value });
|
setValues({ ...values, [prop]: event.target.value });
|
||||||
|
setPassword(event.target.value);
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleClickShowPassword = () => {
|
const handleClickShowPassword = () => {
|
||||||
@ -41,6 +46,12 @@ export default function Home() {
|
|||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const { signIn } = useContext(AuthContext)
|
||||||
|
|
||||||
|
async function handleSignIn() {
|
||||||
|
await signIn({email, password})
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<LoginView auth={rota} >
|
<LoginView auth={rota} >
|
||||||
<Head>
|
<Head>
|
||||||
@ -55,7 +66,9 @@ export default function Home() {
|
|||||||
<h1>Bem-Vindo</h1>
|
<h1>Bem-Vindo</h1>
|
||||||
<h2>Estratégias Inteligentes em<br /> Gestão de Energia</h2>
|
<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">
|
<FormControl sx={{ m: 1, width: '90%' }} variant="outlined">
|
||||||
<InputLabel htmlFor="outlined-adornment-password">Password</InputLabel>
|
<InputLabel htmlFor="outlined-adornment-password">Password</InputLabel>
|
||||||
<OutlinedInput
|
<OutlinedInput
|
||||||
@ -80,14 +93,13 @@ export default function Home() {
|
|||||||
</FormControl>
|
</FormControl>
|
||||||
<Link href='verifyEmail' >Esqueceu a senha ?</Link>
|
<Link href='verifyEmail' >Esqueceu a senha ?</Link>
|
||||||
|
|
||||||
<LoginButton title='ENTRAR' link />
|
<LoginButton title='ENTRAR' onClick={() => handleSignIn()}/>
|
||||||
|
|
||||||
<fieldset className="line">
|
<fieldset className="line">
|
||||||
<legend className="text">Ou</legend>
|
<legend className="text">Ou</legend>
|
||||||
</fieldset>
|
</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>
|
<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>
|
</LoginContainer>
|
||||||
|
|
||||||
</LoginView>
|
</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 Head from 'next/head';
|
||||||
import Link from 'next/link'
|
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() {
|
export default function aboutUs() {
|
||||||
return (
|
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>
|
Os itens que mais impactaram a correção foram os encargos setoriais, os custos de distribuição, a retirada dos componentes financeiros..</p>
|
||||||
<Button>
|
<Button>
|
||||||
<fieldset>
|
<fieldset>
|
||||||
<legend> <BasicButton title='Ver Mais...' /></legend>
|
<legend> <BasicButton title='Ver Mais...' onClick={() => console.log()}/></legend>
|
||||||
</fieldset>
|
</fieldset>
|
||||||
</Button>
|
</Button>
|
||||||
|
|
||||||
@ -40,7 +41,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>
|
Os itens que mais impactaram a correção foram os encargos setoriais, os custos de distribuição, a retirada dos componentes financeiros..</p>
|
||||||
<Button>
|
<Button>
|
||||||
<fieldset>
|
<fieldset>
|
||||||
<legend> <BasicButton title='Ver Mais...' /></legend>
|
<legend> <BasicButton title='Ver Mais...' onClick={() => console.log()}/></legend>
|
||||||
</fieldset>
|
</fieldset>
|
||||||
</Button>
|
</Button>
|
||||||
|
|
||||||
@ -48,7 +49,7 @@ export default function aboutUs() {
|
|||||||
|
|
||||||
<a href='https://www.energiasmart.com.br/noticias/'
|
<a href='https://www.energiasmart.com.br/noticias/'
|
||||||
target={"_blank"}
|
target={"_blank"}
|
||||||
rel={"noreferrer"}><BasicButton title='Noticias Atualizadas' /></a>
|
rel={"noreferrer"}><BasicButton title='Noticias Atualizadas' onClick={() => console.log()}/></a>
|
||||||
</NewsView>
|
</NewsView>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,11 +1,15 @@
|
|||||||
|
import { GetServerSideProps } from 'next'
|
||||||
import Head from 'next/head'
|
import Head from 'next/head'
|
||||||
|
import { parseCookies } from 'nookies'
|
||||||
import React from 'react'
|
import React from 'react'
|
||||||
import CommonQuestionsCard from '../components/faqQuestionsCard/FaqQuestionsCard'
|
import NotificationQuestionsCard from '../components/NotificationQuestionsCard/NotificationQuestionsCard'
|
||||||
import Header from '../components/header/Header'
|
import Header from '../components/header/Header'
|
||||||
import PageTitle from '../components/pageTitle/PageTitle'
|
import PageTitle from '../components/pageTitle/PageTitle'
|
||||||
|
import { api } from '../services/api'
|
||||||
|
import getAPIClient from '../services/ssrApi'
|
||||||
import { FaqView } from '../styles/layouts/commonQuestions/FaqView'
|
import { FaqView } from '../styles/layouts/commonQuestions/FaqView'
|
||||||
|
|
||||||
export default function Notifications() {
|
export default function Notifications({notificationData}: any) {
|
||||||
return (
|
return (
|
||||||
<FaqView>
|
<FaqView>
|
||||||
<Head>
|
<Head>
|
||||||
@ -15,17 +19,44 @@ export default function Notifications() {
|
|||||||
<PageTitle title='Notifications' subtitle='' />
|
<PageTitle title='Notifications' subtitle='' />
|
||||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
|
||||||
<section className='CommonQuestionsSection' >
|
<section className='CommonQuestionsSection' >
|
||||||
<CommonQuestionsCard />
|
{
|
||||||
<hr />
|
notificationData.map((value, index ) => {
|
||||||
<CommonQuestionsCard />
|
return <>
|
||||||
<hr />
|
<NotificationQuestionsCard key={index} title={value.title} body={value.body}/>
|
||||||
<CommonQuestionsCard />
|
|
||||||
<hr />
|
|
||||||
<CommonQuestionsCard />
|
|
||||||
<hr />
|
|
||||||
<CommonQuestionsCard />
|
|
||||||
<hr />
|
<hr />
|
||||||
|
</>
|
||||||
|
})
|
||||||
|
}
|
||||||
</section>
|
</section>
|
||||||
</FaqView>
|
</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 MenuItem from '@mui/material/MenuItem';
|
||||||
import Select, { SelectChangeEvent } from '@mui/material/Select';
|
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 BasicButton from '../../components/buttons/basicButton/BasicButton';
|
||||||
import Chart from '../../components/graph/Chart';
|
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 { 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 { EconomiaAcumulada } from '../../services/economiaAcumulada';
|
||||||
import { EvolucaoPld } from '../../services/evolucaoPld';
|
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() {
|
export default function region() {
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
@ -36,7 +34,7 @@ export default function region() {
|
|||||||
function handleGreen(minimo, mi, ma, maximo) {
|
function handleGreen(minimo, mi, ma, maximo) {
|
||||||
if (minimo - mi >= 100 && minimo - mi < 200) {
|
if (minimo - mi >= 100 && minimo - mi < 200) {
|
||||||
return 'green'
|
return 'green'
|
||||||
} else if ( mi*2 >= 200 && mi*2 <250 ) {
|
} else if ( mi*2 >= 200 && mi*2 < 250 ) {
|
||||||
return'dullGreen'
|
return'dullGreen'
|
||||||
} else if ( (ma-mi)/2 >=250 && (ma-mi)/2 < 300 ) {
|
} else if ( (ma-mi)/2 >=250 && (ma-mi)/2 < 300 ) {
|
||||||
return 'white'
|
return 'white'
|
||||||
@ -56,8 +54,8 @@ export default function region() {
|
|||||||
</Head>
|
</Head>
|
||||||
<Header name='' />
|
<Header name='' />
|
||||||
<RenderIf isTrue={page==='table'? true : false}>
|
<RenderIf isTrue={page==='table'? true : false}>
|
||||||
<Link href='/dashboard' >{'< voltar para visão geral'}</Link>
|
<Link href='/dashboard' >{'< Voltar para Visão Geral'}</Link>
|
||||||
<PageTitle title='Tabela de consumo Pld' subtitle=''/>
|
<PageTitle title='Tabela de consumo PLD' subtitle=''/>
|
||||||
<PldTableView>
|
<PldTableView>
|
||||||
<table className="tg">
|
<table className="tg">
|
||||||
<thead>
|
<thead>
|
||||||
@ -186,7 +184,7 @@ export default function region() {
|
|||||||
</table>
|
</table>
|
||||||
<section>
|
<section>
|
||||||
<article onClick={() => setPage('perMouth')}>
|
<article onClick={() => setPage('perMouth')}>
|
||||||
<p>Valores Diarios</p>
|
<p>Valores Diários</p>
|
||||||
</article>
|
</article>
|
||||||
<article onClick={() => setPage('perDate')}>
|
<article onClick={() => setPage('perDate')}>
|
||||||
<p>Valores Horários</p>
|
<p>Valores Horários</p>
|
||||||
@ -196,8 +194,8 @@ export default function region() {
|
|||||||
</RenderIf>
|
</RenderIf>
|
||||||
|
|
||||||
<RenderIf isTrue={page==='perMouth'? true : false}>
|
<RenderIf isTrue={page==='perMouth'? true : false}>
|
||||||
<GoBack onClick={() => setPage('table')}>{'< voltar para tabela pld'}</GoBack>
|
<GoBack onClick={() => setPage('table')}>{'< voltar para tabela PLD'}</GoBack>
|
||||||
<PageTitle title='Consumo por mês' subtitle=''/>
|
<PageTitle title='Resumo PLD - Diários' subtitle=''/>
|
||||||
<PldGraphView>
|
<PldGraphView>
|
||||||
<section className='toolsbar'>
|
<section className='toolsbar'>
|
||||||
<div className='select'>
|
<div className='select'>
|
||||||
@ -209,26 +207,26 @@ export default function region() {
|
|||||||
width: '100%'
|
width: '100%'
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<MenuItem value={0}>Filial 3</MenuItem>
|
<MenuItem value={0}>Norte</MenuItem>
|
||||||
<MenuItem value={10}>Filial 3</MenuItem>
|
<MenuItem value={10}>Nordeste</MenuItem>
|
||||||
<MenuItem value={20}>Twenty</MenuItem>
|
<MenuItem value={20}>Sul</MenuItem>
|
||||||
<MenuItem value={30}>Thirty</MenuItem>
|
<MenuItem value={30}>Sudeste</MenuItem>
|
||||||
</Select>
|
</Select>
|
||||||
</div>
|
</div>
|
||||||
<input type="date" data-date="" data-date-format="DD MMMM YYYY" value="2015-08-09"/>
|
<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>
|
</section>
|
||||||
<LineBarChart data1={EvolucaoPld.data} data3={EvolucaoPld.data1} dataset1={'Economia'} dataset2={'barra1'} dataset3={'2021'} label={EvolucaoPld.label} title='Evolução PLD (R$/MWh)' subtitle='' />
|
<LineBarChart data1={EvolucaoPld.data} data3={EvolucaoPld.data1} dataset1={'Economia'} dataset2={'barra1'} dataset3={'2021'} label={EvolucaoPld.label} title='Evolução PLD (R$/MWh)' subtitle='' />
|
||||||
</PldGraphView>
|
</PldGraphView>
|
||||||
</RenderIf>
|
</RenderIf>
|
||||||
|
|
||||||
<RenderIf isTrue={page==='perDate'? true : false}>
|
<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>
|
<PldGraphView>
|
||||||
<PageTitle title='Consumo por dia' subtitle=''/>
|
<PageTitle title='Resumo PLD - Horas' subtitle=''/>
|
||||||
<section className='toolsbar'>
|
<section className='toolsbar'>
|
||||||
<input type="date" data-date="" data-date-format="DD MMMM YYYY" value="2021-09-19"/>
|
<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>
|
</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} />
|
<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>
|
</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 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 Header from '../components/header/Header';
|
||||||
import PageTitle from '../components/pageTitle/PageTitle';
|
import PageTitle from '../components/pageTitle/PageTitle';
|
||||||
import BasicButton from '../components/buttons/basicButton/BasicButton';
|
|
||||||
import Sidebar from '../components/sidebar/Sidebar';
|
import Sidebar from '../components/sidebar/Sidebar';
|
||||||
// import { dados } from '../services/DadosTabelaResumoOperacao';
|
// import { dados } from '../services/DadosTabelaResumoOperacao';
|
||||||
import data from '../services/dados.json'
|
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 { Pagination, TableView } from '../styles/layouts/ResumoOperacao/ResumoOperacaoView';
|
||||||
import Head from 'next/head';
|
|
||||||
|
|
||||||
export default function ResumoOperacao() {
|
export default function ResumoOperacao() {
|
||||||
const csvData = [
|
const csvData = [
|
||||||
@ -55,7 +53,6 @@ export default function ResumoOperacao() {
|
|||||||
console.log(data.unidades.filter((value, index)=> value.value.includes(unidade)))
|
console.log(data.unidades.filter((value, index)=> value.value.includes(unidade)))
|
||||||
}, [month, unidade])
|
}, [month, unidade])
|
||||||
|
|
||||||
|
|
||||||
return(
|
return(
|
||||||
<TableView>
|
<TableView>
|
||||||
<Head>
|
<Head>
|
||||||
@ -66,7 +63,6 @@ export default function ResumoOperacao() {
|
|||||||
|
|
||||||
<h3>Seletor Mês</h3>
|
<h3>Seletor Mês</h3>
|
||||||
<div className='select'>
|
<div className='select'>
|
||||||
|
|
||||||
<FormControl fullWidth >
|
<FormControl fullWidth >
|
||||||
<InputLabel id="demo-simple-select-labels">Unidades</InputLabel>
|
<InputLabel id="demo-simple-select-labels">Unidades</InputLabel>
|
||||||
<Select
|
<Select
|
||||||
@ -85,9 +81,7 @@ export default function ResumoOperacao() {
|
|||||||
</Select>
|
</Select>
|
||||||
</FormControl>
|
</FormControl>
|
||||||
|
|
||||||
|
|
||||||
<FormControl fullWidth sx={{ml:1}} >
|
<FormControl fullWidth sx={{ml:1}} >
|
||||||
|
|
||||||
<InputLabel id="demo-simple-select-label">Mês</InputLabel>
|
<InputLabel id="demo-simple-select-label">Mês</InputLabel>
|
||||||
<Select
|
<Select
|
||||||
labelId="demo-simple-select-label"
|
labelId="demo-simple-select-label"
|
||||||
@ -147,22 +141,14 @@ export default function ResumoOperacao() {
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
<div className='btn'>
|
<div className='btn'>
|
||||||
|
|
||||||
{/* <a href={Teste} download="dowload.csv"> */}
|
|
||||||
{/* <BasicButton title='Baixar PDF' /> */}
|
|
||||||
{/* </a> */}
|
|
||||||
|
|
||||||
<CSVLink data={csvData} filename="Arquivo_Teste_Smart_Energia">
|
<CSVLink data={csvData} filename="Arquivo_Teste_Smart_Energia">
|
||||||
|
|
||||||
<BasicButton title='Baixar CSV' />
|
<BasicButton title='Baixar CSV' onClick={() => console.log()}/>
|
||||||
</CSVLink>
|
</CSVLink>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</TableView>
|
</TableView>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
@ -56,12 +56,14 @@ export default function Telemetria() {
|
|||||||
fullWidth
|
fullWidth
|
||||||
>
|
>
|
||||||
<MenuItem value="">
|
<MenuItem value="">
|
||||||
<em>None</em>
|
<em>Nenhum</em>
|
||||||
</MenuItem>
|
</MenuItem>
|
||||||
<MenuItem value="">07/09/2021</MenuItem>
|
|
||||||
<MenuItem value={10}>Filial 3</MenuItem>
|
<MenuItem value={10}>Unidade 1</MenuItem>
|
||||||
<MenuItem value={20}>Twenty</MenuItem>
|
<MenuItem value={20}>Unidade 2</MenuItem>
|
||||||
<MenuItem value={30}>Thirty</MenuItem>
|
<MenuItem value={30}>Unidade 3</MenuItem>
|
||||||
|
<MenuItem value={30}>Unidade 4</MenuItem>
|
||||||
|
<MenuItem value={30}>Unidade 5</MenuItem>
|
||||||
</Select>
|
</Select>
|
||||||
</FormControl>
|
</FormControl>
|
||||||
</div>
|
</div>
|
||||||
@ -79,12 +81,13 @@ export default function Telemetria() {
|
|||||||
fullWidth
|
fullWidth
|
||||||
>
|
>
|
||||||
<MenuItem value="">
|
<MenuItem value="">
|
||||||
<em>None</em>
|
<em>Nenhum</em>
|
||||||
</MenuItem>
|
</MenuItem>
|
||||||
<MenuItem value="">07/09/2021</MenuItem>
|
<MenuItem value={10}>20/05/2022</MenuItem>
|
||||||
<MenuItem value={10}>Filial 3</MenuItem>
|
<MenuItem value={20}>10/06/2022</MenuItem>
|
||||||
<MenuItem value={20}>Twenty</MenuItem>
|
<MenuItem value={30}>05/06/2021</MenuItem>
|
||||||
<MenuItem value={30}>Thirty</MenuItem>
|
<MenuItem value={30}>05/06/2021</MenuItem>
|
||||||
|
<MenuItem value={30}>05/06/2021</MenuItem>
|
||||||
</Select>
|
</Select>
|
||||||
</FormControl>
|
</FormControl>
|
||||||
</div>
|
</div>
|
||||||
@ -102,12 +105,13 @@ export default function Telemetria() {
|
|||||||
fullWidth
|
fullWidth
|
||||||
>
|
>
|
||||||
<MenuItem value="">
|
<MenuItem value="">
|
||||||
<em>None</em>
|
<em>Nenhum</em>
|
||||||
</MenuItem>
|
</MenuItem>
|
||||||
<MenuItem value="">07/09/2021</MenuItem>
|
<MenuItem value={10}>20/05/2022</MenuItem>
|
||||||
<MenuItem value={10}>Filial 3</MenuItem>
|
<MenuItem value={20}>10/06/2022</MenuItem>
|
||||||
<MenuItem value={20}>Twenty</MenuItem>
|
<MenuItem value={30}>05/06/2021</MenuItem>
|
||||||
<MenuItem value={30}>Thirty</MenuItem>
|
<MenuItem value={30}>05/06/2021</MenuItem>
|
||||||
|
<MenuItem value={30}>05/06/2021</MenuItem>
|
||||||
</Select>
|
</Select>
|
||||||
</FormControl>
|
</FormControl>
|
||||||
</div>
|
</div>
|
||||||
@ -125,7 +129,7 @@ export default function Telemetria() {
|
|||||||
fullWidth
|
fullWidth
|
||||||
>
|
>
|
||||||
<MenuItem value="">
|
<MenuItem value="">
|
||||||
<em>None</em>
|
<em>Nenhum</em>
|
||||||
</MenuItem>
|
</MenuItem>
|
||||||
<MenuItem value="">07/09/2021</MenuItem>
|
<MenuItem value="">07/09/2021</MenuItem>
|
||||||
<MenuItem value={10}>Filial 3</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 {
|
main {
|
||||||
padding: 2.5rem;
|
padding: 2.5rem;
|
||||||
|
|
||||||
|
button {
|
||||||
|
cursor: pointer
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
|
|||||||
@ -1,6 +1,5 @@
|
|||||||
import styled from 'styled-components'
|
import styled from 'styled-components'
|
||||||
|
|
||||||
|
|
||||||
export const TableView = styled.div`
|
export const TableView = styled.div`
|
||||||
display: flex;
|
display: flex;
|
||||||
padding: 2.5rem;
|
padding: 2.5rem;
|
||||||
@ -21,21 +20,16 @@ export const TableView = styled.div`
|
|||||||
.select{
|
.select{
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
||||||
|
|
||||||
margin-bottom: 25px;
|
margin-bottom: 25px;
|
||||||
|
|
||||||
width: 20rem;
|
width: 20rem;
|
||||||
}
|
}
|
||||||
.titleUnidade{
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.tg{
|
.tg{
|
||||||
border-collapse:collapse;
|
border-collapse:collapse;
|
||||||
border-spacing:0;
|
border-spacing:0;
|
||||||
font-family:Poppins;
|
font-family:Poppins;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.tg td{
|
.tg td{
|
||||||
@ -49,7 +43,6 @@ export const TableView = styled.div`
|
|||||||
word-break:normal;
|
word-break:normal;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.tg th{
|
.tg th{
|
||||||
border-color:#DDDFE1;
|
border-color:#DDDFE1;
|
||||||
border-style:solid;
|
border-style:solid;
|
||||||
@ -134,8 +127,27 @@ export const Pagination = styled.div`
|
|||||||
.numberColor{
|
.numberColor{
|
||||||
color: #ABAFB3;
|
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';
|
import styled from 'styled-components';
|
||||||
|
|
||||||
|
|
||||||
export const TelemetriaView = styled.main`
|
export const TelemetriaView = styled.main`
|
||||||
padding: 20px ;
|
padding: 20px ;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
.title{
|
.title {
|
||||||
color: black;
|
color: black;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
@ -14,7 +12,7 @@ export const TelemetriaView = styled.main`
|
|||||||
margin: 0 0 0 10px;
|
margin: 0 0 0 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
span{
|
span {
|
||||||
font-family: 'Inter';
|
font-family: 'Inter';
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
@ -23,14 +21,14 @@ export const TelemetriaView = styled.main`
|
|||||||
color: #667085;
|
color: #667085;
|
||||||
}
|
}
|
||||||
|
|
||||||
.titleMenuItem{
|
.titleMenuItem {
|
||||||
color: #667085;
|
color: #667085;
|
||||||
font-family: Inter;
|
font-family: Inter;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
.paragraph{
|
.paragraph {
|
||||||
color: #22d1f0;
|
color: #22d1f0;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin-top: 60px;
|
margin-top: 60px;
|
||||||
@ -55,14 +53,27 @@ export const TelemetriaView = styled.main`
|
|||||||
|
|
||||||
export const Buttons = styled.div`
|
export const Buttons = styled.div`
|
||||||
display: flex;
|
display: flex;
|
||||||
min-width: 14rem;
|
|
||||||
cursor: pointer;
|
|
||||||
margin-top: 5rem;
|
|
||||||
padding-left: 100px;
|
|
||||||
padding-right: 100px;
|
|
||||||
justify-content: space-evenly;
|
justify-content: space-evenly;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
|
|
||||||
|
min-width: 14rem;
|
||||||
height: 6rem;
|
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;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
section {
|
section {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
:nth-child(2) {
|
:nth-child(3) {
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
|
||||||
width: 18rem;
|
width: 18rem;
|
||||||
|
|
||||||
margin: 45px 0 22px 0;
|
margin: 45px 0 22px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
:last-child {
|
|
||||||
width: 50rem;
|
|
||||||
height: 30rem;
|
|
||||||
}
|
}
|
||||||
|
.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;
|
||||||
|
|
||||||
}
|
}
|
||||||
`
|
`
|
||||||
|
|
||||||
export const ClientsModalView = styled.main`
|
export const ClientsModalView = styled.main`
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
width: 70%;
|
||||||
|
article {
|
||||||
display: grid;
|
display: grid;
|
||||||
|
|
||||||
grid-template-columns: 100% 100%;
|
align-self: flex-start;
|
||||||
grid-template-rows: 100% 100% 100% 100%;
|
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 {
|
hr {
|
||||||
border: 1px solid #DDDDDD;
|
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{
|
button{
|
||||||
height:60px;
|
height:60px;
|
||||||
width: 22%;
|
width: 22%;
|
||||||
margin-top: 17rem;
|
margin-top: 12rem;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
background: #254F7F;
|
background: #254F7F;
|
||||||
border-radius: 8px;
|
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`
|
export const NewsView = styled.main`
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
|
margin-bottom: 100px;
|
||||||
|
|
||||||
p {
|
p {
|
||||||
font-family: 'Poppins';
|
font-family: 'Poppins';
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
@ -54,9 +56,8 @@ export const NewsView = styled.main`
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
`;
|
||||||
}`;
|
|
||||||
|
|
||||||
export const Button = styled.div`
|
export const Button = styled.div`
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|||||||
@ -203,5 +203,28 @@ export const PldGraphView = styled.main`
|
|||||||
`
|
`
|
||||||
|
|
||||||
export const GoBack = styled.label`
|
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"
|
version "1.1.3"
|
||||||
resolved "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.1.3.tgz"
|
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":
|
"@tootallnate/once@2":
|
||||||
version "2.0.0"
|
version "2.0.0"
|
||||||
resolved "https://registry.yarnpkg.com/@tootallnate/once/-/once-2.0.0.tgz#f544a148d3ab35801c1f633a7441fd87c2e484bf"
|
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":
|
"@types/chartjs@^0.0.31":
|
||||||
version "0.0.31"
|
version "0.0.31"
|
||||||
resolved "https://registry.npmjs.org/@types/chartjs/-/chartjs-0.0.31.tgz"
|
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":
|
"@types/faker@5.5.3":
|
||||||
version "5.5.3"
|
version "5.5.3"
|
||||||
resolved "https://registry.npmjs.org/@types/faker/-/faker-5.5.3.tgz"
|
resolved "https://registry.npmjs.org/@types/faker/-/faker-5.5.3.tgz"
|
||||||
@ -1409,6 +1455,18 @@
|
|||||||
version "0.0.29"
|
version "0.0.29"
|
||||||
resolved "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz"
|
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":
|
"@types/node@^17.0.31":
|
||||||
version "17.0.31"
|
version "17.0.31"
|
||||||
resolved "https://registry.npmjs.org/@types/node/-/node-17.0.31.tgz"
|
resolved "https://registry.npmjs.org/@types/node/-/node-17.0.31.tgz"
|
||||||
@ -1425,6 +1483,14 @@
|
|||||||
version "15.7.5"
|
version "15.7.5"
|
||||||
resolved "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz"
|
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":
|
"@types/react-csv@^1.1.2":
|
||||||
version "1.1.2"
|
version "1.1.2"
|
||||||
resolved "https://registry.yarnpkg.com/@types/react-csv/-/react-csv-1.1.2.tgz#a5694d7e5cbf4bc1d4baa178a3fa7ac3466ea8c5"
|
resolved "https://registry.yarnpkg.com/@types/react-csv/-/react-csv-1.1.2.tgz#a5694d7e5cbf4bc1d4baa178a3fa7ac3466ea8c5"
|
||||||
@ -1455,6 +1521,13 @@
|
|||||||
version "0.16.2"
|
version "0.16.2"
|
||||||
resolved "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz"
|
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":
|
"@types/styled-components@^5.1.25":
|
||||||
version "5.1.25"
|
version "5.1.25"
|
||||||
resolved "https://registry.npmjs.org/@types/styled-components/-/styled-components-5.1.25.tgz"
|
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"
|
version "2.0.0"
|
||||||
resolved "https://registry.npmjs.org/astral-regex/-/astral-regex-2.0.0.tgz"
|
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:
|
axe-core@^4.3.5:
|
||||||
version "4.4.1"
|
version "4.4.1"
|
||||||
resolved "https://registry.npmjs.org/axe-core/-/axe-core-4.4.1.tgz"
|
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:
|
axobject-query@^2.2.0:
|
||||||
version "2.2.0"
|
version "2.2.0"
|
||||||
resolved "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz"
|
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"
|
version "1.0.4"
|
||||||
resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.4.tgz#da309cc263df15994c688ca902179ca3c7cd7c7e"
|
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"
|
version "1.1.1"
|
||||||
resolved "https://registry.npmjs.org/clsx/-/clsx-1.1.1.tgz"
|
resolved "https://registry.npmjs.org/clsx/-/clsx-1.1.1.tgz"
|
||||||
|
|
||||||
@ -1955,6 +2039,12 @@ columnify@^1.6.0:
|
|||||||
strip-ansi "^6.0.1"
|
strip-ansi "^6.0.1"
|
||||||
wcwidth "^1.0.0"
|
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:
|
commander@^8.3.0:
|
||||||
version "8.3.0"
|
version "8.3.0"
|
||||||
resolved "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz"
|
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:
|
dependencies:
|
||||||
safe-buffer "~5.1.1"
|
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:
|
core-js-compat@^3.21.0, core-js-compat@^3.22.1:
|
||||||
version "3.22.5"
|
version "3.22.5"
|
||||||
resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.22.5.tgz#7fffa1d20cb18405bd22756ca1353c6f1a0e8614"
|
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"
|
has-property-descriptors "^1.0.0"
|
||||||
object-keys "^1.1.1"
|
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:
|
delegates@^1.0.0:
|
||||||
version "1.0.0"
|
version "1.0.0"
|
||||||
resolved "https://registry.yarnpkg.com/delegates/-/delegates-1.0.0.tgz#84c6e159b81904fdca59a0ef44cd870d31250f9a"
|
resolved "https://registry.yarnpkg.com/delegates/-/delegates-1.0.0.tgz#84c6e159b81904fdca59a0ef44cd870d31250f9a"
|
||||||
@ -2498,6 +2596,26 @@ flatted@^3.1.0:
|
|||||||
version "3.2.5"
|
version "3.2.5"
|
||||||
resolved "https://registry.npmjs.org/flatted/-/flatted-3.2.5.tgz"
|
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:
|
fs-minipass@^2.0.0, fs-minipass@^2.1.0:
|
||||||
version "2.1.0"
|
version "2.1.0"
|
||||||
resolved "https://registry.yarnpkg.com/fs-minipass/-/fs-minipass-2.1.0.tgz#7f5036fdbf12c63c169190cbe4199c852271f9fb"
|
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"
|
merge2 "^1.4.1"
|
||||||
slash "^3.0.0"
|
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"
|
version "4.2.10"
|
||||||
resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.10.tgz#147d3a006da4ca3ce14728c7aefc287c367d7a6c"
|
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"
|
version "2.2.1"
|
||||||
resolved "https://registry.npmjs.org/json5/-/json5-2.2.1.tgz"
|
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:
|
jsonparse@^1.3.1:
|
||||||
version "1.3.1"
|
version "1.3.1"
|
||||||
resolved "https://registry.yarnpkg.com/jsonparse/-/jsonparse-1.3.1.tgz#3f4dae4a91fac315f71062f8521cc239f1366280"
|
resolved "https://registry.yarnpkg.com/jsonparse/-/jsonparse-1.3.1.tgz#3f4dae4a91fac315f71062f8521cc239f1366280"
|
||||||
@ -3299,6 +3425,16 @@ micromatch@^4.0.4:
|
|||||||
braces "^3.0.2"
|
braces "^3.0.2"
|
||||||
picomatch "^2.3.1"
|
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:
|
mimic-fn@^2.1.0:
|
||||||
version "2.1.0"
|
version "2.1.0"
|
||||||
resolved "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz"
|
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"
|
version "2.0.4"
|
||||||
resolved "https://registry.npmjs.org/node-releases/-/node-releases-2.0.4.tgz"
|
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:
|
nopt@^5.0.0:
|
||||||
version "5.0.0"
|
version "5.0.0"
|
||||||
resolved "https://registry.yarnpkg.com/nopt/-/nopt-5.0.0.tgz#530942bb58a512fccafe53fe210f13a25355dc88"
|
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"
|
version "3.0.0"
|
||||||
resolved "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz"
|
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:
|
npm-audit-report@^3.0.0:
|
||||||
version "3.0.0"
|
version "3.0.0"
|
||||||
resolved "https://registry.yarnpkg.com/npm-audit-report/-/npm-audit-report-3.0.0.tgz#1bf3e531208b5f77347c8d00c3d9badf5be30cd6"
|
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"
|
version "2.0.0"
|
||||||
resolved "https://registry.yarnpkg.com/set-blocking/-/set-blocking-2.0.0.tgz#045f9782d011ae9a6803ddd382b24392b3d890f7"
|
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:
|
shallowequal@^1.1.0:
|
||||||
version "1.1.0"
|
version "1.1.0"
|
||||||
resolved "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz"
|
resolved "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz"
|
||||||
@ -4401,6 +4555,10 @@ tiny-warning@^1.0.2:
|
|||||||
version "1.0.3"
|
version "1.0.3"
|
||||||
resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754"
|
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:
|
to-fast-properties@^2.0.0:
|
||||||
version "2.0.0"
|
version "2.0.0"
|
||||||
resolved "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz"
|
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:
|
dependencies:
|
||||||
imurmurhash "^0.1.4"
|
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:
|
uri-js@^4.2.2:
|
||||||
version "4.4.1"
|
version "4.4.1"
|
||||||
resolved "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz"
|
resolved "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz"
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user