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

Merge branch 'administativePages' of https://gitlab.com/kluppsoftware/smart-energia-web into administativePages

Browse Source
This commit is contained in:
Alex Santos 2022-06-15 15:59:05 -03:00
commit e7d49ecf4d
15 changed files with 143 additions and 977 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/components/administrativeTables/NotificationsTable.tsx
View File

@ -19,7 +19,7 @@ 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 React, { useState, useEffect } from 'react';
import { ClientTableView, StyledStatus } from './ClientsTableView';
@ -178,7 +178,12 @@ interface NotificationData {
deleted_at: Date,
}
export default function ClientTable({notifications}: any) {
interface NotificationsTableInterface{
notifications: NotificationData[],
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[]>([]);
@ -238,6 +243,10 @@ export default function ClientTable({notifications}: any) {
// 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 }}>

39
src/pages/administrative/accumulatedSavings/index.tsx
View File

@ -1,39 +0,0 @@
import Button from '@material-ui/core/Button'
import Head from 'next/head'
import React from 'react'
import AdministrativeHeader from '../../../components/administrativeHeader/AdministrativeHeader'
import Chart from '../../../components/graph/Chart'
import { SingleBar } from '../../../components/graph/SingleBar'
import Header from '../../../components/header/Header'
import PageTitle from '../../../components/pageTitle/PageTitle'
import { EconomiaAcumulada } from '../../../services/economiaAcumulada'
import { dataEconomiaBruta } from '../../../services/economiaBruta'
import { AccumulatedSavingsView } from '../../../styles/layouts/economy/accumulatedSavings/AccumulatedSavingsView'
export default function AccumulatedSavings() {
return (
<AccumulatedSavingsView>
<Head>
<title>Smart Energia - Economia Acumulada</title>
</Head>
<AdministrativeHeader />
<PageTitle title='Economia Acumulada' subtitle='Economia Bruta Estimada e Acumulada anual (Valores em R$ mil)' />
<Button
variant="contained"
component="label"
style={{width: '300px', margin: '30px'}}
>
Upload de dados
<input
type="file"
hidden
/>
</Button>
<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/>
</section>
</AccumulatedSavingsView>
)
}

15
src/pages/administrative/clients.tsx
View File

@ -13,12 +13,10 @@ import FaqButton1 from '../../components/buttons/faqButton/FaqButton1';
import FaqButton2 from '../../components/buttons/faqButton/FaqButton2';
import Header from '../../components/header/Header'
import InputUpload from '../../components/inputUplaod/inputUpload';
import { IconButton } from '@mui/material';
import { ClientsView, ConfirmModalView } from '../../styles/layouts/clients/ClientsView';
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';
const style = {
position: 'absolute' as const,
@ -34,8 +32,6 @@ const style = {
overflowY: 'scroll'
};
export default function clients() {
const [open, setOpen] = React.useState(false);
const [openModalInativar, setOpenModalInativar] = useState(false)
@ -44,17 +40,13 @@ export default function clients() {
const [openModal, setOpenModal] = useState(false)
return (
<div style={{display: 'flex', flexDirection: 'column', width: '100%'}}>
<ClientsView>
<Header name='' />
<PageTitle title='Clientes' subtitle='Clientes Smart Energia'/>
{/* <BasicButton title='Adicionar' onClick={handleOpen}/> */}
<div className='buttons'>
<div className='buttons'>
<button className='btn2' onClick={handleOpen}>Adicionar</button>
<button className='btn1' onClick={() => setOpenModalInativar(true)}>Inativar</button>
</div>
@ -91,7 +83,6 @@ export default function clients() {
<BasicButton title='Cancelar' onClick={() => setOpenModalInativar(true)}/>
</ConfirmModalView>
</ConfirmModal>
</div>
)
}

38
src/pages/administrative/costIndicator/index.tsx
View File

@ -1,38 +0,0 @@
import Button from '@material-ui/core/Button'
import Head from 'next/head'
import React from 'react'
import AdministrativeHeader from '../../../components/administrativeHeader/AdministrativeHeader'
import Chart from '../../../components/graph/Chart'
import { SingleBar } from '../../../components/graph/SingleBar'
import Header from '../../../components/header/Header'
import PageTitle from '../../../components/pageTitle/PageTitle'
import { dataEconomiaBruta } from '../../../services/economiaBruta'
import { dataEconomiaIndicador } from '../../../services/economiaIndicador'
import { CostIndicatorView } from '../../../styles/layouts/economy/costIndicator/CostIndicatorView'
export default function CostIndicator() {
return (
<CostIndicatorView>
<Head>
<title>Smart Energia - Indicador de Custos</title>
</Head>
<AdministrativeHeader />
<PageTitle title='Indicador de Custo' subtitle='Valores em R$/MWh'/>
<Button
variant="contained"
component="label"
style={{width: '300px', margin: '30px'}}
>
Upload de dados
<input
type="file"
hidden
/>
</Button>
<section>
<Chart title='Indicador de Custo' subtitle='(Valores em R$/MWh)' data1={dataEconomiaIndicador.data1} data2={dataEconomiaIndicador.data2} label={dataEconomiaIndicador.labels} barLabel />
</section>
</CostIndicatorView>
)
}

39
src/pages/administrative/estimatedCost/index.tsx
View File

@ -1,39 +0,0 @@
import Button from '@material-ui/core/Button'
import Head from 'next/head'
import React from 'react'
import AdministrativeHeader from '../../../components/administrativeHeader/AdministrativeHeader'
import Chart from '../../../components/graph/Chart'
import { LineBarChart } from '../../../components/graph/LineBarChart'
import Header from '../../../components/header/Header'
import PageTitle from '../../../components/pageTitle/PageTitle'
import { ConsumoEstimado } from '../../../services/consumoEstimado'
import { EstimatedCostView } from '../../../styles/layouts/economy/estimatedCost/EstimatedCostView'
export default function EstimatedCost() {
return (
<>
<Head>
<title>Smart Energia - Custos Estimados</title>
</Head>
<AdministrativeHeader />
<EstimatedCostView>
<PageTitle title='Custos Estimados' subtitle='Comparativo de Custo Estimado' />
<Button
variant="contained"
component="label"
style={{width: '300px', margin: '30px'}}
>
Upload de dados
<input
type="file"
hidden
/>
</Button>
<section>
<LineBarChart data1={ConsumoEstimado.data2} data2={ConsumoEstimado.data} data3={ConsumoEstimado.data1} dataset1="Economia (R$)" dataset2='Cativo' dataset3='Livre' label={ConsumoEstimado.label} title='Custo Estimado' subtitle='' barLabel hashurado />
</section>
</EstimatedCostView>
</>
)
}

39
src/pages/administrative/grossSavings/index.tsx
View File

@ -1,39 +0,0 @@
import Button from '@material-ui/core/Button'
import Head from 'next/head'
import React from 'react'
import AdministrativeHeader from '../../../components/administrativeHeader/AdministrativeHeader'
import Chart from '../../../components/graph/Chart'
import { SingleBar } from '../../../components/graph/SingleBar'
import Header from '../../../components/header/Header'
import PageTitle from '../../../components/pageTitle/PageTitle'
import { dataEconomiaBruta } from '../../../services/economiaBruta'
import { GrossSavingsView } from '../../../styles/layouts/economy/grossSavings/GrossSavings'
export default function GrossSavings() {
return (
<>
<Head>
<title>Smart Energia - Economia Acumulada</title>
</Head>
<AdministrativeHeader />
<GrossSavingsView>
<PageTitle title='Economia Bruta' subtitle='Economia Bruta Estimada e Acumulada anual (Valores em R$ mil)' />
<Button
variant="contained"
component="label"
style={{width: '300px', margin: '30px'}}
>
Upload de dados
<input
type="file"
hidden
/>
</Button>
<section>
<SingleBar title='Economia Bruta' subtitle='(Valores em R$ mil)' label={dataEconomiaBruta.labels} dataset='Consolidada' dataset1='Estimada' dataProps={dataEconomiaBruta.data} barLabel year/>
</section>
</GrossSavingsView>
</>
)
}

37
src/pages/administrative/industryInfo/index.tsx
View File

@ -1,37 +0,0 @@
import Button from '@material-ui/core/Button'
import Head from 'next/head'
import React from 'react'
import AdministrativeHeader from '../../../components/administrativeHeader/AdministrativeHeader'
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() {
return (
<>
<Head>
<title>Smart Energia - Info de Setor</title>
</Head>
<AdministrativeHeader />
<IndustryInfoView>
<div className='title'>
<PageTitle title='Info Setorial' subtitle='info setorial' />
</div>
<Button
variant="contained"
component="label"
style={{width: '300px', margin: '30px'}}
>
Upload de dados
<input
type="file"
hidden
/>
</Button>
<button>Baixar PDF</button>
</IndustryInfoView>
</>
)
}

58
src/pages/administrative/news/index.tsx
View File

@ -1,58 +0,0 @@
import Head from 'next/head';
import Link from 'next/link'
import React from 'react'
import AdministrativeHeader from '../../../components/administrativeHeader/AdministrativeHeader';
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 index() {
return (
<>
<Head>
<title>Smart Energia - Noticias</title>
</Head>
<AdministrativeHeader />
<NewsView>
<Banner title='Notícias' subtitle='Tudo de importante no setor de energia' imgSource='/assets/banners/news.png' />
<section>
<h2>19 Abril 2022</h2>
<strong>ANEEL APROVA REAJUSTE TARIFÁRIO ANUAL DA ENERGISA SERGIPE DE 16,46 % PARA O CONSUMIDOR RESIDENCIAL</strong>
<br />
<br />
<p>A Agência Nacional de Energia Elétrica (ANEEL) aprovou, nesta terça-feira (19/04) o reajuste tarifário anual da Energisa Sergipe – Distribuidora de Energia S.A (ESE).
As novas tarifas da empresa, que atende cerca de e 825 mil unidades consumidoras no Sergipe, entram em vigor nesta sexta, 22/04, com reajuste de 16,46 % para
o consumidor residencial. <br />
Os itens que mais impactaram a correção foram os encargos setoriais, os custos de distribuição, a retirada dos componentes financeiros..</p>
<Button>
<fieldset>
<legend> <BasicButton title='Ver Mais...' onClick={() => console.log()}/></legend>
</fieldset>
</Button>
<h2>19 Abril 2022</h2>
<strong>NEEL APROVA REAJUSTE MÉDIO DE 20,36% NA TARIFA DE ENERGIA NO RN</strong>
<br />
<br />
<p>A Agência Nacional de Energia Elétrica (ANEEL) aprovou, nesta terça-feira (19/04) o reajuste tarifário anual da Energisa Sergipe – Distribuidora de Energia S.A (ESE).
As novas tarifas da empresa, que atende cerca de e 825 mil unidades consumidoras no Sergipe, entram em vigor nesta sexta, 22/04, com reajuste de 16,46 % para
o consumidor residencial. <br />
Os itens que mais impactaram a correção foram os encargos setoriais, os custos de distribuição, a retirada dos componentes financeiros..</p>
<Button>
<fieldset>
<legend> <BasicButton title='Ver Mais...' onClick={() => console.log()}/></legend>
</fieldset>
</Button>
</section>
<a href='https://www.energiasmart.com.br/noticias/'
target={"_blank"}
rel={"noreferrer"}><BasicButton title='Noticias Atualizadas' onClick={() => console.log()}/></a>
</NewsView>
</>
)
}

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

@ -8,7 +8,7 @@ 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, { useState } from 'react'
import React, { useEffect, useState } from 'react'
import NotificationsTable from '../../../components/administrativeTables/NotificationsTable'
import FaqButton1 from '../../../components/buttons/faqButton/FaqButton1';
@ -24,9 +24,12 @@ import FormControlLabel from '@mui/material/FormControlLabel';
import getAPIClient from '../../../services/ssrApi';
import { GetServerSideProps } from 'next';
import { parseCookies } from 'nookies';
import Notifications from '../../notifications';
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,
@ -65,10 +68,14 @@ export default function notification({clients, notifications}) {
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');
@ -81,8 +88,17 @@ export default function notification({clients, notifications}) {
}
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', {
@ -91,6 +107,15 @@ export default function notification({clients, notifications}) {
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>
@ -111,90 +136,109 @@ export default function notification({clients, notifications}) {
</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>
<Modal
<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 />
<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>
<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"/>
{
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>
)}
/> :
null
}
sx={{ml:8}}
style={{ width: 700 }}
renderInput={(params) => (
<TextField {...params} label="Clientes" placeholder="Selecionar clientes"/>
)}
/> :
null
}
<FaqButton1 title='Cancelar' onClick={() => {console.log()}} />
<FaqButton2 title='Salvar' onClick={() => {
handleRegisterNewNotification(notification)
}} />
</Box>
<FaqButton1 title='Cancelar' onClick={() => {setOpen(false)}} />
<FaqButton2 title='Salvar' onClick={() => {
handleRegisterNewNotification(notification)}}
/>
</Box>
</Modal>
<NotificationsTable notifications={notifications}/>
<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>
)
}

40
src/pages/administrative/notifications/index.tsx
View File

@ -1,40 +0,0 @@
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 Head from 'next/head'
import React from 'react'
import AdministrativeHeader from '../../../components/administrativeHeader/AdministrativeHeader'
import NotificationsTable from '../../../components/administrativeTables/NotificationsTable';
import BasicButton from '../../../components/buttons/basicButton/BasicButton';
import CommonQuestionsCard from '../../../components/faqQuestionsCard/FaqQuestionsCard'
import Header from '../../../components/header/Header'
import { FaqView } from '../../../styles/layouts/commonQuestions/FaqView'
export default function commonQuestions() {
const [month, setMonth] = React.useState('');
const [unidade, setUnidade] = React.useState('');
const handleChangeMonth = (event: SelectChangeEvent) => {
setMonth(event.target.value);
};
const handleChangeUnidade = (event: SelectChangeEvent) => {
setUnidade(event.target.value);
};
return (
<>
<FaqView>
<Head>
<title>Smart Energia - FAQ</title>
</Head>
<Header name=''/>
<NotificationsTable />
</FaqView>
</>
)
}

231
src/pages/administrative/pld/index.tsx
View File

@ -1,231 +0,0 @@
import MenuItem from '@mui/material/MenuItem';
import Select, { SelectChangeEvent } from '@mui/material/Select';
import TextField from '@mui/material/TextField';
import Head from 'next/head';
import Link from 'next/link';
import { useRouter } from 'next/router'
import React, { useEffect, useState } from 'react'
import AdministrativeHeader from '../../../components/administrativeHeader/AdministrativeHeader';
import BasicButton from '../../../components/buttons/basicButton/BasicButton';
import Chart from '../../../components/graph/Chart';
import { LineBarChart } from '../../../components/graph/LineBarChart';
import LineChart from '../../../components/graph/LineChart';
import Header from '../../../components/header/Header'
import PageTitle from '../../../components/pageTitle/PageTitle';
import { EconomiaAcumulada } from '../../../services/economiaAcumulada';
import { EvolucaoPld } from '../../../services/evolucaoPld';
import { GoBack, NewTableLine, PldGraphView, PldTableView } from '../../../styles/layouts/pld/PldView'
import RenderIf from '../../../utils/renderIf'
export default function index() {
const [page, setPage] = useState<string>('table')
const [age, setAge] = React.useState('');
const handleChange = (event: SelectChangeEvent) => {
setAge(event.target.value);
};
useEffect(() => {
console.log(page)
}, [page])
return (
<main style={{
width: '100%',
}}>
<Head>
<title>Smart Energia - PLD</title>
</Head>
<AdministrativeHeader />
<RenderIf isTrue={page==='table'? true : false}>
<Link href='/dashboard' >{'< voltar para visão geral'}</Link>
<PageTitle title='Tabela de consumo Pld' subtitle=''/>
<NewTableLine>
<article>
<TextField label="Mês" variant="standard" style={{width: '15%'}}/>
<TextField label="Nordeste" variant="standard" style={{width: '15%'}}/>
<TextField label="Nort" variant="standard" style={{width: '15%'}}/>
<TextField label="Sudeste" variant="standard" style={{width: '15%'}}/>
<TextField label="Sul" variant="standard" style={{width: '15%'}}/>
</article>
<BasicButton title='Adicionar' onClick={() => console.log()}/>
</NewTableLine>
<PldTableView>
<table className="tg">
<thead>
<tr>
<th className='tg-8oo6'>Mês</th>
<th className='tg-8oo6'>Nordeste</th>
<th className='tg-8oo6'>Norte</th>
<th className='tg-8oo6'>Sudeste</th>
<th className='tg-8oo6'>Sul</th>
</tr>
</thead>
<tbody>
<tr>
<td className='tg-gceh'>2101</td>
<td className='tg-uulg red'>xxxx</td>
<td className='tg-gceh dullRed'>xxxx</td>
<td className='tg-gceh dullGreen'>xxxx</td>
<td className='tg-uulg red'>xxxx</td>
</tr>
<tr>
<td className='tg-hq65'>2102</td>
<td className='tg-0tzy dullGreen'>xxxx</td>
<td className='tg-hq65 dullRed'>xxxx</td>
<td className='tg-hq65 dullGreen'>xxxx</td>
<td className='tg-0tzy dullGreen'>xxxx</td>
</tr>
<tr>
<td className="tg-gceh">2103</td>
<td className="tg-uulg red">xxxx</td>
<td className="tg-gceh dullGreen">xxxx</td>
<td className="tg-gceh dullRed">xxxx</td>
<td className="tg-gceh dullGreen">xxxx</td>
</tr>
<tr>
<td className='tg-hq65'>2104</td>
<td className='tg-0tzy dullGreen'>xxxx</td>
<td className='tg-hq65 dullRed'>xxxx</td>
<td className='tg-hq65 dullRed'>xxxx</td>
<td className='tg-0tzy dullGreen'>xxxx</td>
</tr>
<tr>
<td className='tg-gceh'>2105</td>
<td className='tg-uulg red'>xxxx</td>
<td className='tg-gceh dullGreen'>xxxx</td>
<td className='tg-gceh dullGreen'>xxxx</td>
<td className='tg-uulg red'>xxxx</td>
</tr>
<tr>
<td className='tg-hq65'>2106</td>
<td className='tg-0tzy dullGreen'>xxxx</td>
<td className='tg-hq65 dullRed'>xxxx</td>
<td className='tg-hq65 red'>xxxx</td>
<td className='tg-0tzy green'>xxxx</td>
</tr>
<tr>
<td className='tg-gceh'>2107</td>
<td className='tg-uulg red'>xxxx</td>
<td className='tg-gceh green'>xxxx</td>
<td className='tg-gceh dullRed'>xxxx</td>
<td className='tg-uulg red'>xxxx</td>
</tr>
<tr>
<td className='tg-hq65'>2108</td>
<td className='tg-0tzy dullGreen'>xxxx</td>
<td className='tg-hq65 dullGreen'>xxxx</td>
<td className='tg-hq65 green'>xxxx</td>
<td className='tg-0tzy dullRed'>xxxx</td>
</tr>
<tr>
<td className='tg-gceh'>2109</td>
<td className='tg-uulg red'>xxxx</td>
<td className='tg-gceh green'>xxxx</td>
<td className='tg-gceh dullRed'>xxxx</td>
<td className='tg-uulg red'>xxxx</td>
</tr>
<tr>
<td className='tg-hq65'>2110</td>
<td className='tg-0tzy red'>xxxx</td>
<td className='tg-hq65 green'>xxxx</td>
<td className='tg-hq65 red'>xxxx</td>
<td className='tg-0tzy red'>xxxx</td>
</tr>
<tr>
<td className='tg-gceh'>2111</td>
<td className='tg-uulg red'>xxxx</td>
<td className='tg-gceh dullGreen'>xxxx</td>
<td className='tg-gceh green'>xxxx</td>
<td className='tg-uulg red'>xxxx</td>
</tr>
<tr>
<td className='tg-hq65'>2112</td>
<td className='tg-0tzy green'>xxxx</td>
<td className='tg-hq65 dullGreen'>xxxx</td>
<td className='tg-hq65 dullRed'>xxxx</td>
<td className='tg-0tzy dullGreen'>xxxx</td>
</tr>
<tr>
<td className='tg-gceh'>2021</td>
<td className='tg-uulg red'>xxxx</td>
<td className='tg-gceh dullRed'>xxxx</td>
<td className='tg-gceh dullGreen'>xxxx</td>
<td className='tg-uulg red'>xxxx</td>
</tr>
<tr>
<td className='tg-gceh'>Mín</td>
<td className='tg-uulg'>xxxx</td>
<td className='tg-gceh'>xxxx</td>
<td className='tg-gceh'>xxxx</td>
<td className='tg-uulg'>xxxx</td>
</tr>
<tr>
<td className='tg-gceh'>Max</td>
<td className='tg-uulg'>xxxx</td>
<td className='tg-gceh'>xxxx</td>
<td className='tg-gceh'>xxxx</td>
<td className='tg-uulg'>xxxx</td>
</tr>
<tr>
<td className='tg-gceh'>Desv Pad</td>
<td className='tg-uulg'>xxxx</td>
<td className='tg-gceh'>xxxx</td>
<td className='tg-gceh'>xxxx</td>
<td className='tg-uulg'>xxxx</td>
</tr>
</tbody>
</table>
<section>
<article onClick={() => setPage('perMouth')}>
<p>Valores Diarios</p>
</article>
<article onClick={() => setPage('perDate')}>
<p>Valores Horários</p>
</article>
</section>
</PldTableView>
</RenderIf>
<RenderIf isTrue={page==='perMouth'? true : false}>
<GoBack onClick={() => setPage('table')}>{'< voltar para tabela pld'}</GoBack>
<PageTitle title='Consumo por mês' subtitle=''/>
<PldGraphView>
<section className='toolsbar'>
<div className='select'>
<Select
value={age}
onChange={handleChange}
displayEmpty
sx={{
width: '100%'
}}
>
<MenuItem value={0}>Filial 3</MenuItem>
<MenuItem value={10}>Filial 3</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
</div>
<input type="date" data-date="" data-date-format="DD MMMM YYYY" value="2015-08-09"/>
<BasicButton title='Download (csv)' onClick={() => console.log()}/>
</section>
<LineBarChart data1={EvolucaoPld.data} data3={EvolucaoPld.data1} dataset1={'Economia'} dataset2={'barra1'} dataset3={'2021'} label={EvolucaoPld.label} title='Evolução PLD (R$/MWh)' subtitle='' />
</PldGraphView>
</RenderIf>
<RenderIf isTrue={page==='perDate'? true : false}>
<GoBack onClick={() => setPage('table')}>{'< voltar para tabela pld'}</GoBack>
<PldGraphView>
<PageTitle title='Consumo por dia' subtitle=''/>
<section className='toolsbar'>
<input type="date" data-date="" data-date-format="DD MMMM YYYY" value="2021-09-19"/>
<BasicButton title='Download (csv)' onClick={() => console.log()}/>
</section>
<LineChart data1={EconomiaAcumulada.data3} data2={EconomiaAcumulada.data4} data3={EconomiaAcumulada.data5} data4={EconomiaAcumulada.data6} dataset1='NORDESTE' dataset2='NORTE' dataset3='SUDESTE' dataset4='SUL' title='PLD - 19/09/21' subtitle='' label={EconomiaAcumulada.label1} />
</PldGraphView>
</RenderIf>
</main>
)
}

161
src/pages/administrative/resumoOperacao/index.tsx
View File

@ -1,161 +0,0 @@
import TextField from '@material-ui/core/TextField';
import Box from '@mui/material/Box';
import FormControl from '@mui/material/FormControl';
import InputLabel from '@mui/material/InputLabel';
import MenuItem from '@mui/material/MenuItem';
import Select, { SelectChangeEvent } from '@mui/material/Select';
import Head from 'next/head';
import React, { useEffect } from 'react';
// import Teste from '../files/teste.csv';
import { CSVDownload, CSVLink } from "react-csv";
import AdministrativeHeader from '../../../components/administrativeHeader/AdministrativeHeader';
import BasicButton from '../../../components/buttons/basicButton/BasicButton';
import Header from '../../../components/header/Header';
import PageTitle from '../../../components/pageTitle/PageTitle';
import Sidebar from '../../../components/sidebar/Sidebar';
// import { dados } from '../services/DadosTabelaResumoOperacao';
import data from '../../../services/dados.json'
import { NewTableLine, Pagination, TableView } from '../../../styles/layouts/ResumoOperacao/ResumoOperacaoView';
export default function index() {
const csvData = [
// ["firstname", "lastname", "email"],
// ["Ahmed", "Tomi", "ah@smthing.co.com"],
// ["Raed", "Labes", "rl@smthing.co.com"],
// ["Yezzi", "Min l3b", "ymin@cocococo.com"],
[ "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" ]
];
const [month, setMonth] = React.useState('');
const [unidade, setUnidade] = React.useState('');
const handleChangeMonth = (event: SelectChangeEvent) => {
setMonth(event.target.value);
};
const handleChangeUnidade = (event: SelectChangeEvent) => {
setUnidade(event.target.value);
};
return(
<>
<AdministrativeHeader />
<TableView>
<Head>
<title>Smart Energia - Resumo de Operação</title>
</Head>
<PageTitle title='Resumo de Operaçoes' subtitle='Operações detalhadas' />
<h3>Seletor Mês</h3>
<div className='select'>
<FormControl fullWidth >
<InputLabel id="demo-simple-select-labels">Unidades</InputLabel>
<Select
labelId="demo-simple-select-label"
id="demo-simple-select"
value={unidade}
label="Unidade"
onChange={handleChangeUnidade}
>
<MenuItem key={1} value={''}></MenuItem>
{
data.unidades.map((value) => {
return <MenuItem key={1} value={value.value}>{value.name}</MenuItem>
})
}
</Select>
</FormControl>
<FormControl fullWidth sx={{ml:1}} >
<InputLabel>Mês</InputLabel>
<Select
value={month}
label="Month"
onChange={handleChangeMonth}
>
<MenuItem value={15}>Janeiro</MenuItem>
<MenuItem value={20}>Fevereiro</MenuItem>
<MenuItem value={30}>Março</MenuItem>
<MenuItem value={30}>Abril</MenuItem>
<MenuItem value={30}>Março</MenuItem>
<MenuItem value={30}>Maio</MenuItem>
<MenuItem value={30}>Junho</MenuItem>
<MenuItem value={30}>Julho</MenuItem>
<MenuItem value={30}>Agosto</MenuItem>
<MenuItem value={30}>Setembro</MenuItem>
<MenuItem value={30}>Outubro</MenuItem>
<MenuItem value={30}>Novembro</MenuItem>
<MenuItem value={30}>Dezembro</MenuItem>
</Select>
</FormControl>
</div>
<NewTableLine>
<article>
<TextField label="Unidade" variant="standard" style={{width: '150px'}}/>
<TextField label="Operação" variant="standard" style={{width: '150px'}}/>
<TextField label="Montante (MWh)" variant="standard" style={{width: '150px'}}/>
<TextField label="Contraparte" variant="standard" style={{width: '150px'}}/>
<TextField label="Preço(R$/MWh)" variant="standard" style={{width: '150px'}}/>
<TextField label="ValorNF/Crédito(R$)" variant="standard" style={{width: '150px'}}/>
</article>
<BasicButton title='Adicionar' onClick={() => console.log()}/>
</NewTableLine>
<table className="tg">
<thead>
<tr>
<th className='tg-8oo6'>Unidade </th>
<th className='tg-8oo6'>Operação</th>
<th className='tg-8oo6'>Montante (MWh)</th>
<th className='tg-8oo6'>Contraparte</th>
<th className='tg-8oo6'>Preço(R$/MWh)</th>
<th className='tg-8oo6'>ValorNF/Crédito(R$)</th>
</tr>
</thead>
<tbody>
{
data.unidades.filter((value, index)=> value.value.includes(unidade)).map((value, index) => {
if (index%2===0) {
return <tr key={index}>
<td key={index} className='tg-gceh'>{value.name}</td>
<td key={index} className='tg-uulg'>{value.operacao}</td>
<td key={index} className='tg-gceh'>{value.montante}</td>
<td key={index} className='tg-gceh'>{value.contraparte}</td>
<td key={index} className='tg-uulg'>{value.preco}</td>
<td key={index} className='tg-gceh'>{value.valorNF}</td>
</tr>
} else {
return <tr key={index}>
<td key={index} className='tg-hq65'>{value.name}</td>
<td key={index} className='tg-0tzy'>{value.operacao}</td>
<td key={index} className='tg-hq65'>{value.montante}</td>
<td key={index} className='tg-hq65'>{value.contraparte}</td>
<td key={index} className='tg-0tzy'>{value.preco}</td>
<td key={index} className='tg-hq65'>{value.valorNF}</td>
</tr>
}
})
}
</tbody>
</table>
<div className='btn'>
{/* <a href={Teste} download="dowload.csv"> */}
{/* <BasicButton title='Baixar PDF' /> */}
{/* </a> */}
<CSVLink data={csvData} filename="Arquivo_Teste_Smart_Energia">
<BasicButton title='Baixar CSV' onClick={() => console.log()}/>
</CSVLink>
</div>
</TableView>
</>
)
}

195
src/pages/administrative/telemetria/index.tsx
View File

@ -1,195 +0,0 @@
import Button from '@material-ui/core/Button';
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 Link from 'next/link';
import { useRouter } from 'next/router'
import { start } from 'nprogress';
import React from 'react';
import AdministrativeHeader from '../../../components/administrativeHeader/AdministrativeHeader';
import Banner from '../../../components/banner/Banner';
import GradientButton from '../../../components/buttons/gradientButton/GradientButton'
import LineChart from '../../../components/graph/LineChart';
import Header from '../../../components/header/Header';
import { FatorPotencia } from '../../../services/fatorPotencia';
import { Buttons, TelemetriaView, Uploads } from '../../../styles/layouts/Telemetria/TelemetriaView';
import RenderIf from '../../../utils/renderIf';
export default function index() {
const [unity, setUnity] = React.useState('');
const [startDate, setStartDate] = React.useState('');
const [endDate, setEndDate] = React.useState('');
const [discretization, setDiscretization] = React.useState('');
const [showChart, setShowChart] = React.useState(false);
const handleChange = (event: SelectChangeEvent) => {
// setAge(event.target.value);
};
return(
<>
<AdministrativeHeader />
<TelemetriaView>
<Head>
<title>Smart Energia - Telemetria</title>
</Head>
<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
- Distribuidora.' imgSource='/assets/graphical.png' />
<section>
<div className='select'>
<p className='title' >Unidade</p>
<FormControl sx={{ m: 1, minWidth: 120, width: 200 }} size="small">
<InputLabel id="demo-select-small">Unidade</InputLabel>
<Select
labelId="demo-select-small"
id="demo-select-small"
value={unity}
label="Unidade"
onChange={value => setUnity(value.target.value)}
fullWidth
>
<MenuItem value="">
<em>None</em>
</MenuItem>
<MenuItem value="">07/09/2021</MenuItem>
<MenuItem value={10}>Filial 3</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
</FormControl>
</div>
<div className='select'>
<p className='title' >Data inicial</p>
<FormControl sx={{ m: 1, minWidth: 120, width: 200 }} size="small">
<InputLabel id="demo-select-small">Data Inicial</InputLabel>
<Select
labelId="demo-select-small"
id="demo-select-small"
value={startDate}
label="Unidade"
onChange={value => setStartDate(value.target.value)}
fullWidth
>
<MenuItem value="">
<em>None</em>
</MenuItem>
<MenuItem value="">07/09/2021</MenuItem>
<MenuItem value={10}>Filial 3</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
</FormControl>
</div>
<div className='select'>
<p className='title' >Data Final</p>
<FormControl sx={{ m: 1, minWidth: 120, width: 200 }} size="small">
<InputLabel id="demo-select-small">Data Final</InputLabel>
<Select
labelId="demo-select-small"
id="demo-select-small"
value={endDate}
label="Unidade"
onChange={value => setEndDate(value.target.value)}
fullWidth
>
<MenuItem value="">
<em>None</em>
</MenuItem>
<MenuItem value="">07/09/2021</MenuItem>
<MenuItem value={10}>Filial 3</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
</FormControl>
</div>
<div className='select'>
<p className='title' >Discretização</p>
<FormControl sx={{ m: 1, minWidth: 120, width: 200 }} size="small">
<InputLabel id="demo-select-small">Discretização</InputLabel>
<Select
labelId="demo-select-small"
id="demo-select-small"
value={discretization}
label="Unidade"
onChange={value => setDiscretization(value.target.value)}
fullWidth
>
<MenuItem value="">
<em>None</em>
</MenuItem>
<MenuItem value="">07/09/2021</MenuItem>
<MenuItem value={10}>Filial 3</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
</FormControl>
</div>
</section>
<RenderIf isTrue={showChart}>
<LineChart title='Fator de Potencia' subtitle='' data1={FatorPotencia.data} data2={FatorPotencia.data2} dataset1='Fator de Potencia' dataset2='Fator ref.' label={FatorPotencia.label1} />
</RenderIf>
<Buttons>
<GradientButton title='GRÁFICO' description='Gerar gráficos com os dados selecionados' orange link />
<GradientButton title='DOWNLOADS' description='DADOS BRUTOS SELECIONADOS' purple />
<GradientButton title='DADOS' description='hORÁRIOS DO MÊS ATUAL' onClick={() => setShowChart(!showChart)} green />
</Buttons>
<Uploads>
<Button
variant="contained"
component="label"
style={{width: '200px', margin: '30px'}}
>
Upload de dados
<input
type="file"
hidden
/>
</Button>
<Button
variant="contained"
component="label"
style={{width: '200px', margin: '30px'}}
>
Upload de dados
<input
type="file"
hidden
/>
</Button>
<Button
variant="contained"
component="label"
style={{width: '200px', margin: '30px'}}
>
Upload de dados
<input
type="file"
hidden
/>
</Button>
</Uploads>
<p className='paragraph'>
<i>
Fonte: Dados coletados do Sistema de Coleta de Dados
de Energia - SCDE da Câmara de Comercialização <br/>
Energia Elétrica – CCEE, sendo que as quantidades aqui
informadas são de responsabilidade <br/>do agente de
medição - Distribuidora.
</i>
</p>
</TelemetriaView>
</>
)
}

14
src/styles/layouts/clients/ClientsView.ts
View File

@ -62,17 +62,3 @@ export const ClientsModalView = styled.main`
margin-top: 70px
}
`
export const ConfirmModalView = styled.main`
display: flex;
align-items: center;
justify-content: space-around;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
`

13
src/styles/layouts/modals/confirmModalView.ts Normal file
View 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%;
`