Smart/smartEnergyView-frontend
2
0
Fork 0
Code Issues 7 Pull Requests Actions Packages Projects Releases Wiki Activity

fixing issues pointed out in list

Browse Source
This commit is contained in:
joseCorte-exe 2022-06-20 19:11:22 -03:00
parent 51ccc268a1
commit ce4ade1e95
25 changed files with 366 additions and 182 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/components/administrativeTables/FaqTable.tsx
View File

@ -45,15 +45,6 @@ function createData(
};
}
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;
@ -183,8 +174,6 @@ export default function FaqTable({questionData, onChange}: FaqTableInterface) {
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,
@ -240,7 +229,7 @@ export default function FaqTable({questionData, onChange}: FaqTableInterface) {
// 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;
page > 0 ? Math.max(0, (1 + page) * rowsPerPage - questionData.length) : 0;
return (
<TableView>
@ -313,7 +302,7 @@ export default function FaqTable({questionData, onChange}: FaqTableInterface) {
<TablePagination
rowsPerPageOptions={[5, 10, 25]}
component="div"
count={rows.length}
count={questionData.length}
rowsPerPage={rowsPerPage}
page={page}
onPageChange={handleChangePage}

2
src/components/graph/SingleBar.tsx
View File

@ -51,7 +51,7 @@ export function SingleBar({ title, subtitle, dataProps, label, dataset, dataset1
sum += data;
});
const percentage = (dataProps[ctx.dataIndex].econ_percentual*100).toFixed(0)+"%";
const result = `${value}\n ${percentage}`
const result = `${value}\n ${percentage}`
return value==null? null : result
},

12
src/components/header/Header.tsx
View File

@ -1,9 +1,11 @@
import React, { useContext, useEffect, useState } from 'react'
import Image from 'next/image';
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 { parseCookies } from 'nookies';
function stringToColor(string: string) {
let hash = 0;
@ -28,7 +30,7 @@ function stringAvatar(name: string) {
sx: {
bgcolor: stringToColor(name),
},
children: `${name.split(' ')[0][0]}${name.split(' ')[1][0]}`,
children: `${name.split(' ')[0][0]}`,
};
}
@ -52,10 +54,10 @@ export default function Header({ name }: headerInterface) {
<Image src='/assets/png/copel.png' width={170} height={50} />
<div className='icon' >
<p>
olá, {'josé'}
olá, {name}
</p>
</div>
<Avatar {...stringAvatar('José Corte')} style={{border: 'white solid 4px', width: '47px', height: '47px'}}/>
<Avatar {...stringAvatar(name)} style={{border: 'white solid 4px', width: '47px', height: '47px'}}/>
</section>
</HeaderView>
)

2
src/components/sidebar/Sidebar.tsx
View File

@ -55,7 +55,7 @@ export default function Sidebar() {
</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/general'><li className={router.pathname=='/administrative/general'? 'actualPath' : null} ><Image src='/assets/sidebar/aboutUs.svg' width={25} height={25} />{'Sobre Nós'}</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>

9
src/contexts/AuthContext.tsx
View File

@ -47,7 +47,10 @@ export function AuthProvider({children}: {children: React.ReactNode}) {
if (user.id)
setCookie(undefined, 'user-id', user.id)
console.log(user)
if (user.name)
setCookie(undefined, 'user-name', user.name)
api.defaults.headers['Authorization'] = `Bearer ${token}`
if (!exception) {
if (user.role == 2) {
@ -59,10 +62,6 @@ export function AuthProvider({children}: {children: React.ReactNode}) {
} else {
return
}
api.defaults.headers['Authorization'] = `Bearer ${token}`
setUser(user)
}
return (

27
src/pages/aboutUs.tsx
View File

@ -1,17 +1,19 @@
import { GetServerSideProps } from 'next'
import Head from 'next/head'
import Image from 'next/image'
import { parseCookies } from 'nookies'
import React from 'react'
import Banner from '../components/banner/Banner'
import Header from '../components/header/Header'
import { AboutUsView } from '../styles/layouts/aboutUs/AboutUsView'
export default function aboutUs() {
export default function aboutUs({userName}) {
return (
<AboutUsView>
<Head>
<title>Smart Energia - About Us</title>
</Head>
<Header name='' />
<Header name={userName} />
<Banner title='Quem Somos' subtitle='Soluções inteligentes em Gestão de Energia' imgSource='/assets/banners/aboutUsBanner.png' />
<section>
@ -50,3 +52,24 @@ export default function aboutUs() {
</AboutUsView>
)
}
export const getServerSideProps: GetServerSideProps = async (ctx) => {
const { ['@smartAuth-token']: token } = parseCookies(ctx)
const { ['user-name']: userName } = parseCookies(ctx)
if (!token) {
return {
redirect: {
destination: '/',
permanent: false
}
}
}
return {
props: {
userName
}
}
}

7
src/pages/accumulatedSavings.tsx
View File

@ -12,13 +12,13 @@ import { dataEconomiaBruta } from '../services/economiaBruta'
import getAPIClient from '../services/ssrApi'
import { AccumulatedSavingsView } from '../styles/layouts/economy/accumulatedSavings/AccumulatedSavingsView'
export default function AccumulatedSavings({graphData, years}: any) {
export default function AccumulatedSavings({graphData, years, userName}: any) {
return (
<AccumulatedSavingsView>
<Head>
<title>Smart Energia - Economia Acumulada</title>
</Head>
<Header name='' />
<Header name={userName} />
<PageTitle title='Economia Acumulada' subtitle='Economia Bruta Estimada e Acumulada anual (Valores em R$ mil)' />
<section>
<SingleBar title='Economia Bruta Estimada e Acumulada' subtitle='(Valores em R$ mil)' dataset='Consolidada'
@ -32,6 +32,8 @@ export default function AccumulatedSavings({graphData, years}: any) {
export const getServerSideProps: GetServerSideProps = async (ctx) => {
const apiClient = getAPIClient(ctx)
const { ['@smartAuth-token']: token } = parseCookies(ctx)
const { ['user-name']: userName } = parseCookies(ctx)
let graphData = [];
@ -57,6 +59,7 @@ export const getServerSideProps: GetServerSideProps = async (ctx) => {
props: {
graphData,
years,
userName
}
}
}

14
src/pages/administrative/clients/index.tsx
View File

@ -43,7 +43,7 @@ const Alert = React.forwardRef<HTMLDivElement, AlertProps>(function Alert(
return <MuiAlert elevation={6} ref={ref} variant="filled" {...props} />;
});
export default function clients({clients}) {
export default function clients({clients, userName}) {
const [client, setClient] = useState<any>({
name: String,
email: String,
@ -114,28 +114,28 @@ export default function clients({clients}) {
<div style={{display: 'flex', flexDirection: 'column', width: '100%'}}>
<Snackbar open={openSnackSuccess} autoHideDuration={4000} onClose={handleCloseSnack}>
<Alert onClose={handleCloseSnack} severity="success" sx={{ width: '100%' }}>
notificação cadastrada com sucesso!
Usuario 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!
Usuario 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!
Usuario 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!
Usuario não excluida!
</Alert>
</Snackbar>
<ClientsView>
<Header name='' />
<Header name={userName} />
<PageTitle title='Clientes' subtitle='Clientes Smart Energia'/>
<div className='buttons'>
<button className='btn2' onClick={handleOpen}>Adicionar</button>
@ -209,6 +209,7 @@ export default function clients({clients}) {
export const getServerSideProps: GetServerSideProps = async (ctx) => {
const apiClient = getAPIClient(ctx)
const { ['@smartAuth-token']: token } = parseCookies(ctx)
const { ['user-name']: userName } = parseCookies(ctx)
let clients = [];
@ -232,6 +233,7 @@ export const getServerSideProps: GetServerSideProps = async (ctx) => {
return {
props: {
clients,
userName
}
}
}

32
src/pages/administrative/faq/index.tsx
View File

@ -51,11 +51,9 @@ const Alert = React.forwardRef<HTMLDivElement, AlertProps>(function Alert(
type FaqInterface = {
question: string;
answer: string;
}
export default function Sidebar({faqData} : any ) {
export default function Sidebar({faqData, userName} : any ) {
const [openModalInativar, setOpenModalInativar] = useState<boolean>(false)
const [openSnackSuccess, setOpenSnackSuccess] = useState<boolean>(false);
const [openSnackError, setOpenSnackError] = useState<boolean>(false);
@ -85,7 +83,7 @@ export default function Sidebar({faqData} : any ) {
async function handleDeleteNotification(id: any) {
await id.map((value) => {
api.delete(`/faq/${value}`).then(res => {
api.delete(`/faq/${value.id}`).then(res => {
setOpenSnackSuccessDelete(true)
setOpenModalInativar(false)
window.location.reload()
@ -93,12 +91,9 @@ export default function Sidebar({faqData} : any ) {
})
}
const [faq, setFaq] = useState<FaqInterface>({
question: '',
answer : '',
})
const [selectedfaq, setSelectedfaq] = useState([])
@ -107,13 +102,12 @@ export default function Sidebar({faqData} : any ) {
await api.post('/faq', {
"question": question,
"answer": answer,
}).then(res => console.log(res.data))
}).then(res => {
setOpenSnackSuccess(true)
window.location.reload()
}).catch(res => setOpenSnackError(true))
}
const [open, setOpen] = React.useState(false);
const handleOpen = () => setOpen(true);
const handleClose = () => setOpen(false);
@ -121,29 +115,29 @@ export default function Sidebar({faqData} : any ) {
return (
<>
<FaqView>
<Header name=''/>
<Header name={userName}/>
<PageTitle title='Perguntas Frequentes' subtitle='Perguntas Frequentes'/>
<Snackbar open={openSnackSuccess} autoHideDuration={4000} onClose={handleCloseSnack}>
<Alert onClose={handleCloseSnack} severity="success" sx={{ width: '100%' }}>
Notificação cadastrada com sucesso!
Pergunta 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!
Pergunta 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!
Pergunta 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!
Pergunta não excluida!
</Alert>
</Snackbar>
@ -197,6 +191,7 @@ export default function Sidebar({faqData} : any ) {
export const getServerSideProps: GetServerSideProps = async (ctx) => {
const apiClient = getAPIClient(ctx)
const { ['@smartAuth-token']: token } = parseCookies(ctx)
const { ['user-name']: userName } = parseCookies(ctx)
let faqData = [];
@ -217,7 +212,8 @@ export const getServerSideProps: GetServerSideProps = async (ctx) => {
return {
props: {
faqData
faqData,
userName
}
}
}

28
src/pages/administrative/general.tsx
View File

@ -4,12 +4,15 @@ 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 { GetServerSideProps } from 'next';
import { parseCookies } from 'nookies';
import React, { useRef, useState } from 'react'
import Header from '../../components/header/Header';
import PageTitle from '../../components/pageTitle/PageTitle';
import { GeneralView } from '../../styles/layouts/general/GeneralView'
export default function index() {
export default function index({userName}: any) {
const editorRef = useRef(null);
const [text, setText] = useState('');
@ -25,7 +28,8 @@ export default function index() {
return (
<GeneralView>
<Header name=''/>
<Header name={userName}/>
<PageTitle title='Sobre nós' subtitle='alterar texto de sobre nós'/>
<section>
<FormControl sx={{mr: '20px', minWidth: 180, minHeight: '80px'}}>
<Select
@ -84,3 +88,23 @@ export default function index() {
</GeneralView>
)
}
export const getServerSideProps: GetServerSideProps = async (ctx) => {
const { ['@smartAuth-token']: token } = parseCookies(ctx)
const { ['user-name']: userName } = parseCookies(ctx)
if (!token) {
return {
redirect: {
destination: '/',
permanent: false
}
}
}
return {
props: {
userName
}
}
}

10
src/pages/administrative/notification/index.tsx
View File

@ -61,7 +61,7 @@ interface NotificationInterface {
}
// teste
export default function notification({clients, notifications}) {
export default function notification({clients, notifications, userName}: any) {
const [notification, setNotification] = useState<NotificationInterface>({
title: '',
@ -122,7 +122,7 @@ export default function notification({clients, notifications}) {
<Head>
<title>Smart Energia - Notificações</title>
</Head>
<Header name=''/>
<Header name={userName}/>
<PageTitle title='Notificações' subtitle='Notificações'/>
<Snackbar open={openSnackSuccess} autoHideDuration={4000} onClose={handleCloseSnack}>
@ -246,12 +246,13 @@ export default function notification({clients, notifications}) {
export const getServerSideProps: GetServerSideProps = async (ctx) => {
const apiClient = getAPIClient(ctx)
const { ['@smartAuth-token']: token } = parseCookies(ctx)
const { ['user-name']: userName } = parseCookies(ctx)
let clients = [];
let notifications = [];
await apiClient.get('/user').then(res => {
clients = res.data
clients = res.data.data
}).catch(res => {
// console.log(res)
})
@ -274,7 +275,8 @@ export const getServerSideProps: GetServerSideProps = async (ctx) => {
return {
props: {
clients,
notifications
notifications,
userName
}
}
}

27
src/pages/chartTelemetry.tsx
View File

@ -16,6 +16,8 @@ import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import Typography from '@mui/material/Typography';
import Modal from '@mui/material/Modal';
import { GetServerSideProps } from 'next'
import { parseCookies } from 'nookies'
const style = {
display: 'flex',
@ -30,7 +32,7 @@ const style = {
p: 5,
};
export default function chartTelemetry() {
export default function chartTelemetry({userName}) {
const [openFatorPotencia, setOpenFatorPotencia] = useState(false);
const handleCloseFatorPotencia = () => setOpenFatorPotencia(false);
@ -48,7 +50,7 @@ export default function chartTelemetry() {
<Head>
<title>Smart Energia - Graficos Telemetria</title>
</Head>
<Header name='' />
<Header name={userName} />
<PageTitle title='Telemetria - Graficos' subtitle='Gráficos' />
<section className='chartContainer'>
<div onClick={() => setOpenFatorPotencia(true)}>
@ -110,3 +112,24 @@ export default function chartTelemetry() {
</ChatTelemetryView>
)
}
export const getServerSideProps: GetServerSideProps = async (ctx) => {
const { ['@smartAuth-token']: token } = parseCookies(ctx)
const { ['user-name']: userName } = parseCookies(ctx)
if (!token) {
return {
redirect: {
destination: '/',
permanent: false
}
}
}
return {
props: {
userName
}
}
}

27
src/pages/consumption.tsx
View File

@ -1,4 +1,6 @@
import { GetServerSideProps } from 'next'
import Head from 'next/head'
import { parseCookies } from 'nookies'
import React from 'react'
import Chart from '../components/graph/Chart'
import Header from '../components/header/Header'
@ -6,13 +8,13 @@ import PageTitle from '../components/pageTitle/PageTitle'
import { dataEconomiaIndicador } from '../services/economiaIndicador'
import { ConsumptionView } from '../styles/layouts/consumption/ConsumptionView'
export default function Consumption() {
export default function Consumption({userName}: any) {
return (
<ConsumptionView>
<Head>
<title>Smart Energia - Consumo</title>
</Head>
<Header name='' />
<Header name={userName} />
<PageTitle title='Consumo' subtitle='Análise de Consumo'/>
<section>
<Chart title='Indicador de Custo' subtitle='(Valores em R$/MWh)' data1={dataEconomiaIndicador.data1} data2={dataEconomiaIndicador.data2} label={dataEconomiaIndicador.labels} />
@ -20,3 +22,24 @@ export default function Consumption() {
</ConsumptionView>
)
}
export const getServerSideProps: GetServerSideProps = async (ctx) => {
const { ['@smartAuth-token']: token } = parseCookies(ctx)
const { ['user-name']: userName } = parseCookies(ctx)
if (!token) {
return {
redirect: {
destination: '/',
permanent: false
}
}
}
return {
props: {
userName
}
}
}

6
src/pages/costIndicator.tsx
View File

@ -23,7 +23,7 @@ function verifyDataByYear(data) {
return false
}
export default function CostIndicator({graphData}: any) {
export default function CostIndicator({graphData, userName}: any) {
// console.log(graphData.filter((value, index) => value.mes.slice(3, 7).includes('2021')).map(value => value.custo_unit))
return (
@ -31,7 +31,7 @@ export default function CostIndicator({graphData}: any) {
<Head>
<title>Smart Energia - Indicador de Custos</title>
</Head>
<Header name='' />
<Header name={userName} />
<PageTitle title='Indicador de Custo' subtitle='Valores em R$/MWh'/>
<section>
<Chart title='Indicador de Custo' subtitle='(Valores em R$/MWh)' data1={graphData.filter((value, index) => value.mes.slice(3, 7).includes('2021'))}
@ -45,6 +45,7 @@ export default function CostIndicator({graphData}: any) {
export const getServerSideProps: GetServerSideProps = async (ctx) => {
const apiClient = getAPIClient(ctx)
const { ['@smartAuth-token']: token } = parseCookies(ctx)
const { ['user-name']: userName } = parseCookies(ctx)
let graphData = [];
@ -67,6 +68,7 @@ export const getServerSideProps: GetServerSideProps = async (ctx) => {
return {
props: {
graphData,
userName
}
}
}

13
src/pages/dashboard.tsx
View File

@ -23,13 +23,13 @@ import { parseCookies } from 'nookies'
import { GetServerSideProps } from 'next'
import getAPIClient from '../services/ssrApi'
export default function Dashboard({grossAnualGraph, grossAnualYears, grossMensalGraph, grossMensalYears, acumulatedGraph, mapsInfo} : any) {
export default function Dashboard({grossAnualGraph, grossAnualYears, grossMensalGraph, grossMensalYears, acumulatedGraph, mapsInfo, userName} : any) {
return (
<DashboardView>
<Head>
<title>Smart Energia - Dashboard</title>
</Head>
<Header name='' />
<Header name={userName} />
<PageTitle title='Visão Geral' subtitle='Bem Vindo a Smart Energia' />
<Link href='pld'>
@ -40,10 +40,6 @@ export default function Dashboard({grossAnualGraph, grossAnualYears, grossMensal
return <MapCard key={value.submarket} title='S' subtitle={value.submarket} statistic={parseFloat(value.value).toFixed(2)} imgSource='/SUL.svg' />
})
}
{/* <MapCard title='SE/CO' subtitle='Sudeste' statistic='R$ 273,54' imgSource='/mapSample.svg' />
<MapCard title='S' subtitle='Sul' statistic='R$ 273,54' imgSource='/SUL.svg' />
<MapCard title='NE' subtitle='Nordeste' statistic='R$ 273,54' imgSource='/nordeste.svg' />
<MapCard title='N' subtitle='Norte' statistic='R$ 273,54' imgSource='/norte.svg' /> */}
</section>
</Link>
@ -85,6 +81,7 @@ export default function Dashboard({grossAnualGraph, grossAnualYears, grossMensal
export const getServerSideProps: GetServerSideProps = async (ctx) => {
const apiClient = getAPIClient(ctx)
const { ['@smartAuth-token']: token } = parseCookies(ctx)
const { ['user-name']: userName } = parseCookies(ctx)
let grossAnualGraph = [];
let grossMensalGraph = [];
@ -134,7 +131,9 @@ export const getServerSideProps: GetServerSideProps = async (ctx) => {
grossMensalYears,
grossMensalGraph,
acumulatedGraph,
mapsInfo
mapsInfo,
userName
}
}
}

6
src/pages/estimatedCost.tsx
View File

@ -12,13 +12,13 @@ import { ConsumoEstimado } from '../services/consumoEstimado'
import getAPIClient from '../services/ssrApi'
import { EstimatedCostView } from '../styles/layouts/economy/estimatedCost/EstimatedCostView'
export default function EstimatedCost({graphData}: any) {
export default function EstimatedCost({graphData, userName}: any) {
return (
<EstimatedCostView>
<Head>
<title>Smart Energia - Custos Estimados</title>
</Head>
<Header name='' />
<Header name={userName} />
<PageTitle title='Cativo x Livre mensal' subtitle='Comparativo de Custo Estimado' />
<section>
<LineBarChart2 data1={graphData} data2={graphData} data3={graphData}
@ -32,6 +32,7 @@ export default function EstimatedCost({graphData}: any) {
export const getServerSideProps: GetServerSideProps = async (ctx) => {
const apiClient = getAPIClient(ctx)
const { ['@smartAuth-token']: token } = parseCookies(ctx)
const { ['user-name']: userName } = parseCookies(ctx)
let graphData = [];
@ -54,6 +55,7 @@ export const getServerSideProps: GetServerSideProps = async (ctx) => {
return {
props: {
graphData,
userName
}
}
}

12
src/pages/faq.tsx
View File

@ -9,15 +9,15 @@ import getAPIClient from '../services/ssrApi'
import { FaqView } from '../styles/layouts/commonQuestions/FaqView'
export default function commonQuestions({faqData}) {
export default function commonQuestions({faqData, userName}) {
return (
<FaqView>
<Head>
<title>Smart Energia - FAQ</title>
</Head>
<Header name='' />
<Header name={userName} />
<h1>Perguntas Frequentes</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Aqui estão algumas das perguntas que mais recebemos!</p>
<section className='CommonQuestionsSection' >
{
faqData.map((value, index ) => {
@ -34,8 +34,9 @@ export default function commonQuestions({faqData}) {
export const getServerSideProps: GetServerSideProps = async (ctx) => {
const apiClient = getAPIClient(ctx)
const { ['@smartAuth-token']: token } = parseCookies(ctx)
let faqData = [];
const { ['user-name']: userName } = parseCookies(ctx)
let faqData = [];
await apiClient.get('/faq').then(res => {
faqData = res.data.data
@ -54,7 +55,8 @@ export const getServerSideProps: GetServerSideProps = async (ctx) => {
return {
props: {
faqData
faqData,
userName
}
}
}

6
src/pages/grossSavings.tsx
View File

@ -24,13 +24,13 @@ function verifyDataByYear(data) {
}
export default function GrossSavings({graphData, years}: any) {
export default function GrossSavings({graphData, years, userName}: any) {
return (
<GrossSavingsView>
<Head>
<title>Smart Energia - Economia Acumulada</title>
</Head>
<Header name='' />
<Header name={userName} />
<PageTitle title='Economia Bruta' subtitle='Economia Bruta Estimada e Acumulada anual (Valores em R$ mil)' />
<section>
<SingleBar title='Economia Bruta' subtitle='(Valores em R$ mil)'
@ -46,6 +46,7 @@ export default function GrossSavings({graphData, years}: any) {
export const getServerSideProps: GetServerSideProps = async (ctx) => {
const apiClient = getAPIClient(ctx)
const { ['@smartAuth-token']: token } = parseCookies(ctx)
const { ['user-name']: userName } = parseCookies(ctx)
let graphData = [];
@ -72,6 +73,7 @@ export const getServerSideProps: GetServerSideProps = async (ctx) => {
props: {
graphData,
years,
userName
}
}
}

27
src/pages/industryInfo.tsx
View File

@ -1,17 +1,19 @@
import { GetServerSideProps } from 'next'
import Head from 'next/head'
import { parseCookies } from 'nookies'
import React from 'react'
import BasicButton from '../components/buttons/basicButton/BasicButton'
import Header from '../components/header/Header'
import PageTitle from '../components/pageTitle/PageTitle'
import { IndustryInfoView } from '../styles/layouts/industryInfo/IndustryInfoView'
export default function industryInfo() {
export default function industryInfo({userName}: any) {
return (
<IndustryInfoView>
<Head>
<title>Smart Energia - Info de Setor</title>
</Head>
<Header name='' />
<Header name={userName} />
<div className='title'>
<PageTitle title='Info Setorial' subtitle='info setorial' />
</div>
@ -19,3 +21,24 @@ export default function industryInfo() {
</IndustryInfoView>
)
}
export const getServerSideProps: GetServerSideProps = async (ctx) => {
const { ['@smartAuth-token']: token } = parseCookies(ctx)
const { ['user-name']: userName } = parseCookies(ctx)
if (!token) {
return {
redirect: {
destination: '/',
permanent: false
}
}
}
return {
props: {
userName
}
}
}

27
src/pages/news.tsx
View File

@ -1,5 +1,7 @@
import { GetServerSideProps } from 'next';
import Head from 'next/head';
import Link from 'next/link'
import { parseCookies } from 'nookies';
import React from 'react'
import Banner from '../components/banner/Banner'
@ -7,13 +9,13 @@ 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({userName}: any) {
return (
<NewsView>
<Head>
<title>Smart Energia - Noticias</title>
</Head>
<Header name='' />
<Header name={userName} />
<Banner title='Notícias' subtitle='Tudo de importante no setor de energia' imgSource='/assets/banners/news.png' />
<section>
@ -53,3 +55,24 @@ export default function aboutUs() {
</NewsView>
)
}
export const getServerSideProps: GetServerSideProps = async (ctx) => {
const { ['@smartAuth-token']: token } = parseCookies(ctx)
const { ['user-name']: userName } = parseCookies(ctx)
if (!token) {
return {
redirect: {
destination: '/',
permanent: false
}
}
}
return {
props: {
userName
}
}
}

11
src/pages/notifications.tsx
View File

@ -9,15 +9,15 @@ import { api } from '../services/api'
import getAPIClient from '../services/ssrApi'
import { FaqView } from '../styles/layouts/commonQuestions/FaqView'
export default function Notifications({notificationData}: any) {
export default function Notifications({notificationData, userName}: any) {
return (
<FaqView>
<Head>
<title>Smart Energia - Notificações</title>
</Head>
<Header name='' />
<Header name={userName} />
<PageTitle title='Notifications' subtitle='' />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Aqui estão as notificaões publicadas para voce!</p>
<section className='CommonQuestionsSection' >
{
notificationData.map((value, index ) => {
@ -31,9 +31,11 @@ export default function Notifications({notificationData}: any) {
</FaqView>
)
}
export const getServerSideProps: GetServerSideProps = async (ctx) => {
const apiClient = getAPIClient(ctx)
const { ['@smartAuth-token']: token } = parseCookies(ctx)
const { ['user-name']: userName } = parseCookies(ctx)
let notificationData = [];
@ -55,7 +57,8 @@ export const getServerSideProps: GetServerSideProps = async (ctx) => {
return {
props: {
notificationData
notificationData,
userName
}
}
}

135
src/pages/pld/index.tsx
View File

@ -1,3 +1,5 @@
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 { GetServerSideProps } from 'next';
@ -23,16 +25,17 @@ interface pldInterface {
tableData: any,
graphByHourData: any,
graphByMonthData: any
userName: string,
}
export default function pld({tableData, graphByHourData, graphByMonthData}: pldInterface) {
export default function pld({tableData, graphByHourData, graphByMonthData, userName}: pldInterface) {
const router = useRouter()
const { region } = router.query
const [date, setDate] = useState('');
const [select, setSelect] = useState('NORDESTE');
const [page, setPage] = useState<string>('table')
const [day, setDay] = useState<string>('2')
const [day, setDay] = useState<string>(null)
const [dataByDay, setDataByDay] = useState([])
@ -48,8 +51,6 @@ export default function pld({tableData, graphByHourData, graphByMonthData}: pldI
setDay(event.target.value);
};
const label = ['1', '2', '3', '4', '5', '6', '7', '8', '8', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30']
function getDataByDay() {
api.post('/pld/daily', {
"limit": 20,
@ -141,7 +142,7 @@ export default function pld({tableData, graphByHourData, graphByMonthData}: pldI
<Head>
<title>Smart Energia - PLD</title>
</Head>
<Header name='' />
<Header name={userName} />
<RenderIf isTrue={page==='table'? true : false}>
<Link href='/dashboard' >{'< Voltar para Visão Geral'}</Link>
<PageTitle title='Tabela de consumo PLD' subtitle=''/>
@ -205,65 +206,76 @@ export default function pld({tableData, graphByHourData, graphByMonthData}: pldI
</RenderIf>
<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='Resumo PLD - Diários' subtitle=''/>
<PldGraphView>
<section className='toolsbar'>
<div className='select'>
<Select
value={select}
onChange={handleChange}
displayEmpty
sx={{
width: '100%'
}}
>
<MenuItem value={'NORTE'}>Norte</MenuItem>
<MenuItem value={'NORDESTE'}>Nordeste</MenuItem>
<MenuItem value={'SUL'}>Sul</MenuItem>
<MenuItem value={'SUDESTE'}>Sudeste</MenuItem>
</Select>
<FormControl sx={{
width: '100%'
}}>
<InputLabel id="demo-simple-select-label">Região</InputLabel>
<Select
value={select}
onChange={handleChange}
displayEmpty
label='Região'
sx={{
width: '100%'
}}
>
<MenuItem value={'NORTE'}>Norte</MenuItem>
<MenuItem value={'NORDESTE'}>Nordeste</MenuItem>
<MenuItem value={'SUL'}>Sul</MenuItem>
<MenuItem value={'SUDESTE'}>Sudeste</MenuItem>
</Select>
</FormControl>
</div>
<Select
value={day}
onChange={handleChangeDay}
displayEmpty
sx={{
width: '100%'
}}
>
<MenuItem value={'01'}>01</MenuItem>
<MenuItem value={'02'}>02</MenuItem>
<MenuItem value={'03'}>03</MenuItem>
<MenuItem value={'04'}>04</MenuItem>
<MenuItem value={'05'}>05</MenuItem>
<MenuItem value={'06'}>06</MenuItem>
<MenuItem value={'07'}>07</MenuItem>
<MenuItem value={'08'}>08</MenuItem>
<MenuItem value={'09'}>09</MenuItem>
<MenuItem value={'10'}>10</MenuItem>
<MenuItem value={'11'}>11</MenuItem>
<MenuItem value={'12'}>12</MenuItem>
<MenuItem value={'13'}>13</MenuItem>
<MenuItem value={'14'}>14</MenuItem>
<MenuItem value={'15'}>15</MenuItem>
<MenuItem value={'16'}>16</MenuItem>
<MenuItem value={'17'}>17</MenuItem>
<MenuItem value={'18'}>18</MenuItem>
<MenuItem value={'19'}>19</MenuItem>
<MenuItem value={'20'}>20</MenuItem>
<MenuItem value={'21'}>21</MenuItem>
<MenuItem value={'22'}>22</MenuItem>
<MenuItem value={'23'}>23</MenuItem>
<MenuItem value={'24'}>24</MenuItem>
<MenuItem value={'25'}>25</MenuItem>
<MenuItem value={'26'}>26</MenuItem>
<MenuItem value={'27'}>27</MenuItem>
<MenuItem value={'28'}>28</MenuItem>
<MenuItem value={'29'}>29</MenuItem>
<MenuItem value={'30'}>30</MenuItem>
</Select>
<FormControl sx={{
width: '22%',
ml: 1
}}>
<InputLabel id="demo-simple-select-label">Dia</InputLabel>
<Select
value={day}
onChange={handleChangeDay}
displayEmpty
placeholder='dia'
label="Age"
>
<MenuItem value={'01'}>01</MenuItem>
<MenuItem value={'02'}>02</MenuItem>
<MenuItem value={'03'}>03</MenuItem>
<MenuItem value={'04'}>04</MenuItem>
<MenuItem value={'05'}>05</MenuItem>
<MenuItem value={'06'}>06</MenuItem>
<MenuItem value={'07'}>07</MenuItem>
<MenuItem value={'08'}>08</MenuItem>
<MenuItem value={'09'}>09</MenuItem>
<MenuItem value={'10'}>10</MenuItem>
<MenuItem value={'11'}>11</MenuItem>
<MenuItem value={'12'}>12</MenuItem>
<MenuItem value={'13'}>13</MenuItem>
<MenuItem value={'14'}>14</MenuItem>
<MenuItem value={'15'}>15</MenuItem>
<MenuItem value={'16'}>16</MenuItem>
<MenuItem value={'17'}>17</MenuItem>
<MenuItem value={'18'}>18</MenuItem>
<MenuItem value={'19'}>19</MenuItem>
<MenuItem value={'20'}>20</MenuItem>
<MenuItem value={'21'}>21</MenuItem>
<MenuItem value={'22'}>22</MenuItem>
<MenuItem value={'23'}>23</MenuItem>
<MenuItem value={'24'}>24</MenuItem>
<MenuItem value={'25'}>25</MenuItem>
<MenuItem value={'26'}>26</MenuItem>
<MenuItem value={'27'}>27</MenuItem>
<MenuItem value={'28'}>28</MenuItem>
<MenuItem value={'29'}>29</MenuItem>
<MenuItem value={'30'}>30</MenuItem>
</Select>
</FormControl>
</section>
<LineBarChart
data1={dataByDay} data3={dataByDay}
@ -274,12 +286,12 @@ export default function pld({tableData, graphByHourData, graphByMonthData}: pldI
</RenderIf>
<RenderIf isTrue={page==='perDate'? true : false}>
<GoBack onClick={() => setPage('table')}>{'< voltar para tabela PLD'}</GoBack>
<GoBack onClick={() => setPage('table')}>{'< Voltar para tabela PLD'}</GoBack>
<PldGraphView>
<PageTitle title='Resumo PLD - Horas' subtitle=''/>
<section className='toolsbar'>
<input type="date" data-date="" data-date-format="DD MMMM YYYY" value={date} onChange={(value) => setDate(value.target.value)}/>
<BasicButton title='Download (csv)' onClick={() => console.log()}/>
{/* <BasicButton title='Download (csv)' onClick={() => console.log()}/> */}
</section>
<LineChart data1={nordeste} data2={norte} data3={sudeste} data4={sul}
dataset1='NORDESTE' dataset2='NORTE' dataset3='SUDESTE' dataset4='SUL'
@ -294,6 +306,8 @@ export default function pld({tableData, graphByHourData, graphByMonthData}: pldI
export const getServerSideProps: GetServerSideProps = async (ctx) => {
const apiClient = getAPIClient(ctx)
const { ['@smartAuth-token']: token } = parseCookies(ctx)
const { ['user-name']: userName } = parseCookies(ctx)
let tableData = [];
@ -315,6 +329,7 @@ export const getServerSideProps: GetServerSideProps = async (ctx) => {
return {
props: {
tableData,
userName
}
}
}

63
src/pages/resumoOperacao.tsx
View File

@ -20,19 +20,12 @@ import data from '../services/dados.json'
import getAPIClient from '../services/ssrApi';
import { Pagination, TableView } from '../styles/layouts/ResumoOperacao/ResumoOperacaoView';
export default function ResumoOperacao() {
const csvData = [
[ "value", "unidade1", "name", "Unidade-1", "operacao", "Compra", "montante", "130,00", "contraparte", "cOPEL COM I5", "preco", "234,67", "valorNF", "38.257,15" ],
[ "value", "unidade2", "name", "Unidade-2", "operacao", "Compra", "montante", "20,00", "contraparte", "EMEWE I5", "preco", "234,67", "valorNF", "38.257,15"],
[ "value", "unidade3", "name", "Unidade-3", "operacao", "Compra", "montante", "30,00", "contraparte", "EMEWE I5", "preco", "234,67", "valorNF", "38.257,15" ],
[ "value", "unidade4", "name", "Unidade-4", "operacao", "Compra", "montante", "40,00", "contraparte", "COPEL COM I5", "preco", "234,67", "valorNF", "38.257,15" ],
[ "value", "unidade5", "name", "Unidade-5", "operacao", "Compra", "montante", "500,00","contraparte", "COPEL COM I5", "preco", "234,67", "valorNF", "38.257,15" ],
[ "value", "unidade6", "name", "Unidade-6", "operacao", "Compra", "montante", "300,00", "contraparte", "COPEL COM I5", "preco","234,67", "valorNF", "965,95" ]
];
export default function ResumoOperacao({tableData, userName}: any) {
const csvData = tableData;
const [month, setMonth] = useState('');
const [unidade, setUnidade] = useState('');
const [tableData, setTableData] = useState<any>([]);
const [tableDataState, setTableDataState] = useState<any>([]);
const handleChangeMonth = (event: SelectChangeEvent) => {
setMonth(event.target.value);
@ -42,26 +35,29 @@ export default function ResumoOperacao() {
};
useEffect(() => {
api.post('/operation', {
"filters": [
{"type" : "=", "field": "mes", "value": `${month}/2022`},
{"type" : "=", "field": "dados_te.cod_smart_unidade", "value": 180103211002}
]
}).then(res => {
setTableData(res.data.data)
console.log(tableData)
}).catch(res => {
console.log(res)
})
console.log(tableData)
if (unidade!=='' || month!==''){
api.post('/operation', {
"filters": [
{"type" : "=", "field": "mes", "value": `${month}/2022`},
{"type" : "=", "field": "dados_te.cod_smart_unidade", "value": unidade}
]
}).then(res => {
setTableDataState(res.data.data)
}).catch(res => {
console.log(res)
})
} else {
setTableDataState(tableData)
}
}, [month, unidade])
return(
return (
<TableView>
<Head>
<title>Smart Energia - Resumo de Operação</title>
</Head>
<Header name='' />
<Header name={userName} />
<PageTitle title='Resumo de Operaçoes' subtitle='Operações detalhadas' />
<h3>Seletor Mês</h3>
@ -75,10 +71,10 @@ export default function ResumoOperacao() {
label="Unidade"
onChange={handleChangeUnidade}
>
<MenuItem key={1} value={''}></MenuItem>
<MenuItem key={1} value={''}>Nenhum</MenuItem>
{
data.unidades.map((value) => {
return <MenuItem key={1} value={value.value}>{value.name}</MenuItem>
tableData.map((value) => {
return <MenuItem key={1} value={value.cod_smart_unidade}>{value.cod_smart_unidade}</MenuItem>
})
}
</Select>
@ -93,6 +89,7 @@ export default function ResumoOperacao() {
label="Month"
onChange={handleChangeMonth}
>
<MenuItem value={''}>Nenhum</MenuItem>
<MenuItem value={'01'}>Janeiro</MenuItem>
<MenuItem value={'02'}>Fevereiro</MenuItem>
<MenuItem value={'03'}>Março</MenuItem>
@ -121,7 +118,7 @@ export default function ResumoOperacao() {
</thead>
<tbody>
{
tableData.map((value, index) => {
tableDataState.map((value, index) => {
return <>
<tr>
<td key={index} className='tg-gceh'>{value.cod_smart_unidade}</td>
@ -150,16 +147,21 @@ export const getServerSideProps: GetServerSideProps = async (ctx) => {
const apiClient = getAPIClient(ctx)
const { ['@smartAuth-token']: token } = parseCookies(ctx)
const { ['user-id']: id } = parseCookies(ctx)
const { ['user-name']: userName } = parseCookies(ctx)
let tableData = [];
await apiClient.post(`/user/${id}`).then(res => {
await apiClient.post('/operation', {
"filters": []
}).then(res => {
console.log(res.data.data)
tableData = res.data.data
console.log(tableData)
}).catch(res => {
console.log(res)
})
console.log(tableData)
if (!token) {
return {
redirect: {
@ -172,6 +174,7 @@ export const getServerSideProps: GetServerSideProps = async (ctx) => {
return {
props: {
tableData,
userName
}
}
}

27
src/pages/telemetria.tsx
View File

@ -15,11 +15,13 @@ import { start } from 'nprogress';
import LineChart from '../components/graph/LineChart';
import { FatorPotencia } from '../services/fatorPotencia';
import RenderIf from '../utils/renderIf';
import { GetServerSideProps } from 'next';
import { parseCookies } from 'nookies';
export default function Telemetria() {
export default function Telemetria({userName}: any) {
const [unity, setUnity] = React.useState('');
const [startDate, setStartDate] = React.useState('');
const [endDate, setEndDate] = React.useState('');
@ -36,7 +38,7 @@ export default function Telemetria() {
<Head>
<title>Smart Energia - Telemetria</title>
</Head>
<Header name='' />
<Header name={userName} />
<Banner title ='Telemetria' subtitle='Dados Coletados do Sistema de Coleta de Dados de Energia -
SCDE da Câmara de Comercialização de Energia Elétrica - CCEE,
sendo que as quantidades aqui informadas são de responsabilidade do agente de medição
@ -161,3 +163,24 @@ export default function Telemetria() {
</TelemetriaView>
)
}
export const getServerSideProps: GetServerSideProps = async (ctx) => {
const { ['@smartAuth-token']: token } = parseCookies(ctx)
const { ['user-name']: userName } = parseCookies(ctx)
if (!token) {
return {
redirect: {
destination: '/',
permanent: false
}
}
}
return {
props: {
userName
}
}
}

3
src/styles/layouts/pld/PldView.ts
View File

@ -183,7 +183,8 @@ export const PldGraphView = styled.main`
flex-wrap: wrap;
:first-child {
justify-content: space-around;
justify-content: flex-start;
align-items: center;
}
:nth-child(2) {
margin-top: 50px;