Merge branch 'administativePages' of https://gitlab.com/kluppsoftware/smart-energia-web into administativePages
This commit is contained in:
Alex Santos
commit
e7d49ecf4d
@ -19,7 +19,7 @@ import Toolbar from '@mui/material/Toolbar';
|
|||||||
import Tooltip from '@mui/material/Tooltip';
|
import Tooltip from '@mui/material/Tooltip';
|
||||||
import Typography from '@mui/material/Typography';
|
import Typography from '@mui/material/Typography';
|
||||||
import { visuallyHidden } from '@mui/utils';
|
import { visuallyHidden } from '@mui/utils';
|
||||||
import React, { useState } from 'react';
|
import React, { useState, useEffect } from 'react';
|
||||||
|
|
||||||
import { ClientTableView, StyledStatus } from './ClientsTableView';
|
import { ClientTableView, StyledStatus } from './ClientsTableView';
|
||||||
|
|
||||||
@ -178,7 +178,12 @@ interface NotificationData {
|
|||||||
deleted_at: Date,
|
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 [order, setOrder] = useState<Order>('asc');
|
||||||
const [orderBy, setOrderBy] = useState<keyof Data | string>('status');
|
const [orderBy, setOrderBy] = useState<keyof Data | string>('status');
|
||||||
const [selected, setSelected] = useState<readonly string[]>([]);
|
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.
|
// 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;
|
const emptyRows = page > 0 ? Math.max(0, (1 + page) * rowsPerPage - notifications.length) : 0;
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
onChange(selected)
|
||||||
|
}, [selected])
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<ClientTableView>
|
<ClientTableView>
|
||||||
<Paper sx={{ width: '100%', mb: 2 }}>
|
<Paper sx={{ width: '100%', mb: 2 }}>
|
||||||
|
|||||||
@ -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>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@ -13,12 +13,10 @@ import FaqButton1 from '../../components/buttons/faqButton/FaqButton1';
|
|||||||
import FaqButton2 from '../../components/buttons/faqButton/FaqButton2';
|
import FaqButton2 from '../../components/buttons/faqButton/FaqButton2';
|
||||||
import Header from '../../components/header/Header'
|
import Header from '../../components/header/Header'
|
||||||
import InputUpload from '../../components/inputUplaod/inputUpload';
|
import InputUpload from '../../components/inputUplaod/inputUpload';
|
||||||
import { IconButton } from '@mui/material';
|
import { ClientsView } from '../../styles/layouts/clients/ClientsView';
|
||||||
import { ClientsView, ConfirmModalView } from '../../styles/layouts/clients/ClientsView';
|
|
||||||
import PageTitle from '../../components/pageTitle/PageTitle';
|
import PageTitle from '../../components/pageTitle/PageTitle';
|
||||||
import ConfirmModal from '../../components/modal/ConfirmModal';
|
import ConfirmModal from '../../components/modal/ConfirmModal';
|
||||||
|
import { ConfirmModalView } from '../../styles/layouts/modals/confirmModalView';
|
||||||
|
|
||||||
|
|
||||||
const style = {
|
const style = {
|
||||||
position: 'absolute' as const,
|
position: 'absolute' as const,
|
||||||
@ -34,8 +32,6 @@ const style = {
|
|||||||
overflowY: 'scroll'
|
overflowY: 'scroll'
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
export default function clients() {
|
export default function clients() {
|
||||||
const [open, setOpen] = React.useState(false);
|
const [open, setOpen] = React.useState(false);
|
||||||
const [openModalInativar, setOpenModalInativar] = useState(false)
|
const [openModalInativar, setOpenModalInativar] = useState(false)
|
||||||
@ -44,17 +40,13 @@ export default function clients() {
|
|||||||
|
|
||||||
const [openModal, setOpenModal] = useState(false)
|
const [openModal, setOpenModal] = useState(false)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div style={{display: 'flex', flexDirection: 'column', width: '100%'}}>
|
<div style={{display: 'flex', flexDirection: 'column', width: '100%'}}>
|
||||||
<ClientsView>
|
<ClientsView>
|
||||||
<Header name='' />
|
<Header name='' />
|
||||||
<PageTitle title='Clientes' subtitle='Clientes Smart Energia'/>
|
<PageTitle title='Clientes' subtitle='Clientes Smart Energia'/>
|
||||||
{/* <BasicButton title='Adicionar' onClick={handleOpen}/> */}
|
{/* <BasicButton title='Adicionar' onClick={handleOpen}/> */}
|
||||||
<div className='buttons'>
|
<div className='buttons'>
|
||||||
<button className='btn2' onClick={handleOpen}>Adicionar</button>
|
<button className='btn2' onClick={handleOpen}>Adicionar</button>
|
||||||
<button className='btn1' onClick={() => setOpenModalInativar(true)}>Inativar</button>
|
<button className='btn1' onClick={() => setOpenModalInativar(true)}>Inativar</button>
|
||||||
</div>
|
</div>
|
||||||
@ -91,7 +83,6 @@ export default function clients() {
|
|||||||
<BasicButton title='Cancelar' onClick={() => setOpenModalInativar(true)}/>
|
<BasicButton title='Cancelar' onClick={() => setOpenModalInativar(true)}/>
|
||||||
</ConfirmModalView>
|
</ConfirmModalView>
|
||||||
</ConfirmModal>
|
</ConfirmModal>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
@ -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>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@ -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>
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@ -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>
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@ -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>
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@ -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>
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@ -8,7 +8,7 @@ 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 Typography from '@mui/material/Typography';
|
||||||
import Head from 'next/head'
|
import Head from 'next/head'
|
||||||
import React, { useState } from 'react'
|
import React, { useEffect, useState } from 'react'
|
||||||
|
|
||||||
import NotificationsTable from '../../../components/administrativeTables/NotificationsTable'
|
import NotificationsTable from '../../../components/administrativeTables/NotificationsTable'
|
||||||
import FaqButton1 from '../../../components/buttons/faqButton/FaqButton1';
|
import FaqButton1 from '../../../components/buttons/faqButton/FaqButton1';
|
||||||
@ -24,9 +24,12 @@ import FormControlLabel from '@mui/material/FormControlLabel';
|
|||||||
import getAPIClient from '../../../services/ssrApi';
|
import getAPIClient from '../../../services/ssrApi';
|
||||||
import { GetServerSideProps } from 'next';
|
import { GetServerSideProps } from 'next';
|
||||||
import { parseCookies } from 'nookies';
|
import { parseCookies } from 'nookies';
|
||||||
import Notifications from '../../notifications';
|
|
||||||
import Snackbar from '@mui/material/Snackbar';
|
import Snackbar from '@mui/material/Snackbar';
|
||||||
import MuiAlert, { AlertProps } from '@mui/material/Alert';
|
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 = {
|
const style = {
|
||||||
position: 'absolute' as const,
|
position: 'absolute' as const,
|
||||||
@ -65,10 +68,14 @@ export default function notification({clients, notifications}) {
|
|||||||
body: '',
|
body: '',
|
||||||
users: []
|
users: []
|
||||||
})
|
})
|
||||||
|
const [selectedNotifications, setSelectedNotifications] = useState([])
|
||||||
|
|
||||||
const [open, setOpen] = useState<boolean>(false);
|
const [open, setOpen] = useState<boolean>(false);
|
||||||
|
const [openModalInativar, setOpenModalInativar] = useState<boolean>(false)
|
||||||
const [openSnackSuccess, setOpenSnackSuccess] = useState<boolean>(false);
|
const [openSnackSuccess, setOpenSnackSuccess] = useState<boolean>(false);
|
||||||
const [openSnackError, setOpenSnackError] = 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 [radiusValue, setRadiusValue] = useState<string>('all');
|
||||||
|
|
||||||
@ -81,8 +88,17 @@ export default function notification({clients, notifications}) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
setOpenSnackError(false);
|
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) {
|
async function handleRegisterNewNotification({title, body, users}: NotificationInterface) {
|
||||||
await api.post('/notification', {
|
await api.post('/notification', {
|
||||||
@ -91,6 +107,15 @@ export default function notification({clients, notifications}) {
|
|||||||
users
|
users
|
||||||
}).then(res => setOpenSnackSuccess(true)).catch(res => setOpenSnackError(true))
|
}).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 (
|
return (
|
||||||
<FaqView>
|
<FaqView>
|
||||||
@ -111,90 +136,109 @@ export default function notification({clients, notifications}) {
|
|||||||
</Alert>
|
</Alert>
|
||||||
</Snackbar>
|
</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'>
|
<div className='buttons'>
|
||||||
<button className='btn2' onClick={handleOpen}>Disparar nova</button>
|
<button className='btn2' onClick={handleOpen}>Disparar nova</button>
|
||||||
|
<button className='btn1' onClick={() => setOpenModalInativar(true)}>Inativar</button>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<Modal
|
<NotificationsTable notifications={notifications} onChange={(value) => setSelectedNotifications(value)}/>
|
||||||
|
<Modal
|
||||||
open={open}
|
open={open}
|
||||||
onClose={handleClose}
|
onClose={handleClose}
|
||||||
aria-labelledby="modal-modal-title"
|
aria-labelledby="modal-modal-title"
|
||||||
aria-describedby="modal-modal-description"
|
aria-describedby="modal-modal-description"
|
||||||
>
|
>
|
||||||
<Box sx={style}>
|
<Box sx={style}>
|
||||||
<h1>Disparar Notificações</h1>
|
<h1>Disparar Notificações</h1>
|
||||||
<Typography sx={{color:'gray', fontSize:12}}variant="h5" gutterBottom component="div">
|
<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>
|
Pode ser que todas as notificaçõs demorem alguns minutos para estarem disponíveis</Typography>
|
||||||
<br />
|
<br />
|
||||||
<TextField id="outlined-basic" label="Título" sx={{width:700, ml:8}} onChange={(value) => {
|
<TextField id="outlined-basic" label="Título" sx={{width:700, ml:8}} onChange={(value) => {
|
||||||
setNotification({
|
setNotification({
|
||||||
...notification,
|
...notification,
|
||||||
title: value.target.value
|
title: value.target.value
|
||||||
})
|
})
|
||||||
}} variant="outlined" /> <br /><br />
|
}} variant="outlined" /> <br /><br />
|
||||||
<TextField id="outlined-basic" label="Corpo/Conteúdo da notificação" sx={{width:700, ml:8}} onChange={(value) => {
|
<TextField id="outlined-basic" label="Corpo/Conteúdo da notificação" sx={{width:700, ml:8}} onChange={(value) => {
|
||||||
setNotification({
|
setNotification({
|
||||||
...notification,
|
...notification,
|
||||||
body: value.target.value
|
body: value.target.value
|
||||||
})
|
})
|
||||||
}} variant="outlined" /> <br /><br />
|
}} variant="outlined" /> <br /><br />
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<FormControl>
|
<FormControl>
|
||||||
<RadioGroup
|
<RadioGroup
|
||||||
aria-labelledby="demo-radio-buttons-group-label"
|
aria-labelledby="demo-radio-buttons-group-label"
|
||||||
defaultValue="female"
|
defaultValue="female"
|
||||||
name="radio-buttons-group"
|
name="radio-buttons-group"
|
||||||
>
|
>
|
||||||
<FormControlLabel value="all" control={<Radio />} checked={radiusValue==='all'? true : false}onChange={(value: React.ChangeEvent<HTMLInputElement>) => {
|
<FormControlLabel value="all" control={<Radio />} checked={radiusValue==='all'? true : false}onChange={(value: React.ChangeEvent<HTMLInputElement>) => {
|
||||||
setRadiusValue(value.target.value)
|
setRadiusValue(value.target.value)
|
||||||
}} label="Disparar para todos os clientes" />
|
}} label="Disparar para todos os clientes" />
|
||||||
<FormControlLabel value="some" control={<Radio />} checked={radiusValue==='some'? true : false} onChange={(value: React.ChangeEvent<HTMLInputElement>) => {
|
<FormControlLabel value="some" control={<Radio />} checked={radiusValue==='some'? true : false} onChange={(value: React.ChangeEvent<HTMLInputElement>) => {
|
||||||
setRadiusValue(value.target.value)
|
setRadiusValue(value.target.value)
|
||||||
}} label="Disparar somente para alguns clientes" />
|
}} label="Disparar somente para alguns clientes" />
|
||||||
</RadioGroup>
|
</RadioGroup>
|
||||||
</FormControl>
|
</FormControl>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{
|
{
|
||||||
radiusValue === 'some'?
|
radiusValue === 'some'?
|
||||||
<Autocomplete
|
<Autocomplete
|
||||||
multiple
|
multiple
|
||||||
id="checkboxes-tags-demo"
|
id="checkboxes-tags-demo"
|
||||||
options={clients}
|
options={clients}
|
||||||
disableCloseOnSelect
|
disableCloseOnSelect
|
||||||
onChange={(event: any, newValue: any) => {
|
onChange={(event: any, newValue: any) => {
|
||||||
setNotification({...notification, users: newValue.map((el) => {return {"user_id": el.id}})});
|
setNotification({...notification, users: newValue.map((el) => {return {"user_id": el.id}})});
|
||||||
}}
|
}}
|
||||||
getOptionLabel={(option) => option.name}
|
getOptionLabel={(option) => option.name}
|
||||||
renderOption={(props, option, { selected }) => (
|
renderOption={(props, option, { selected }) => (
|
||||||
<li {...props}>
|
<li {...props}>
|
||||||
<Checkbox
|
<Checkbox
|
||||||
icon={icon}
|
icon={icon}
|
||||||
checkedIcon={checkedIcon}
|
checkedIcon={checkedIcon}
|
||||||
style={{ marginRight: 8 }}
|
style={{ marginRight: 8 }}
|
||||||
checked={selected}
|
checked={selected}
|
||||||
value={option.name}
|
value={option.name}
|
||||||
/>
|
/>
|
||||||
{option.name}
|
{option.name}
|
||||||
</li>
|
</li>
|
||||||
)}
|
|
||||||
sx={{ml:8}}
|
|
||||||
style={{ width: 700 }}
|
|
||||||
renderInput={(params) => (
|
|
||||||
<TextField {...params} label="Clientes" placeholder="Selecionar clientes"/>
|
|
||||||
)}
|
)}
|
||||||
/> :
|
sx={{ml:8}}
|
||||||
null
|
style={{ width: 700 }}
|
||||||
}
|
renderInput={(params) => (
|
||||||
|
<TextField {...params} label="Clientes" placeholder="Selecionar clientes"/>
|
||||||
|
)}
|
||||||
|
/> :
|
||||||
|
null
|
||||||
|
}
|
||||||
|
|
||||||
<FaqButton1 title='Cancelar' onClick={() => {console.log()}} />
|
<FaqButton1 title='Cancelar' onClick={() => {setOpen(false)}} />
|
||||||
<FaqButton2 title='Salvar' onClick={() => {
|
<FaqButton2 title='Salvar' onClick={() => {
|
||||||
handleRegisterNewNotification(notification)
|
handleRegisterNewNotification(notification)}}
|
||||||
}} />
|
/>
|
||||||
</Box>
|
</Box>
|
||||||
</Modal>
|
</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>
|
</FaqView>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
@ -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>
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@ -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>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@ -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>
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@ -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>
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@ -62,17 +62,3 @@ export const ClientsModalView = styled.main`
|
|||||||
margin-top: 70px
|
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
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%;
|
||||||
|
`
|
||||||
Loading…
x
Reference in New Issue
Block a user