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

Merge branch 'administativePages' into 'dev'

Browse Source 
Administative pages

See merge request kluppsoftware/smart-energia-web!81
This commit is contained in:
José Corte 2022-06-28 12:49:43 +00:00
commit 8f231d114b
44 changed files with 1429 additions and 487 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.vscode/settings.json vendored Normal file
View File

@ -0,0 +1,3 @@
{
"cSpell.language": "pt-BR,en"
}

4
next.config.js
View File

@ -4,6 +4,10 @@ const nextConfig = {
compiler: {
styledComponents: true,
},
images: {
domains: ["kluppdevelopment.s3.sa-east-1.amazonaws.com"]
}
}
module.exports = nextConfig

2
package.json
View File

@ -27,6 +27,7 @@
"@mui/material": "^5.6.4",
"@mui/x-data-grid": "^5.11.0",
"@mui/x-date-pickers": "^5.0.0-alpha.3",
"@react-pdf-viewer/core": "^3.5.0",
"@tinymce/tinymce-react": "^4.1.0",
"@types/react-csv": "^1.1.2",
"@types/yup": "^0.29.14",
@ -54,6 +55,7 @@
"react-hook-form": "^7.32.2",
"react-icons": "^4.3.1",
"react-input-mask": "^2.0.4",
"react-pdf-thumbnail": "^0.1.0",
"styled-components": "^5.3.5",
"tinymce": "^6.0.3",
"yup": "^0.32.11"

7
src/components/banner/BannerView.ts
View File

@ -8,6 +8,7 @@ export const BannerView = styled.div`
width: 100%;
height: 20%;
max-height: 200px;
margin-bottom: 30px;
@ -23,9 +24,11 @@ export const BannerView = styled.div`
}
h1 {
font-size: 18px;
font-size: 1.3em;
}
.text {
position: relative;
margin: 0 0 0 20px;
@ -42,7 +45,7 @@ export const BannerView = styled.div`
text-overflow: ellipsis;
p {
font-size: 70%;
font-size: 19px;
/* height: 43px; */
text-overflow: ellipsis;

12
src/components/buttons/gradientButton/GradientButton.tsx
View File

@ -14,15 +14,13 @@ interface GradientButtonInterface {
onClick?: () => void
}
export default function GradientButton({ title, description, orange, purple, green, link, onClick }: GradientButtonInterface) {
const router = useRouter()
function handleClick() {
onClick()
}
export default function GradientButton({ title, description, orange, purple, green, onClick }: GradientButtonInterface) {
// function handleClick() {
// onClick()
// }
return (
<GradientButtonView color={orange? 'orange' : purple? 'purple' : green? 'green' : 'orange' } onClick={() => link? router.push('/chartTelemetry') : handleClick()} >
<GradientButtonView color={orange? 'orange' : purple? 'purple' : green? 'green' : 'orange' } >
<p>{title}</p>
<p>{description}</p>
</GradientButtonView>

2
src/components/buttons/gradientButton/GradientButtonView.ts
View File

@ -32,8 +32,6 @@ export const GradientButtonView = styled.button`
border-style: none;
cursor: pointer;
* {
margin: 0;
padding: 0;

154
src/components/graph/DemRegXDemConChart.tsx Normal file
View File

@ -0,0 +1,154 @@
import React, { useRef, useEffect } from 'react';
import {
Chart as ChartJS,
LinearScale,
CategoryScale,
BarElement,
PointElement,
LineElement,
Legend,
Tooltip,
} from 'chart.js';
import { Chart } from 'react-chartjs-2';
import faker from 'faker';
import { ChartView } from './ChartView';
import ChartTitle from './ChartTitle';
import pattern from 'patternomaly'
ChartJS.register(
LinearScale,
CategoryScale,
BarElement,
PointElement,
LineElement,
Legend,
Tooltip
);
// function triggerTooltip(chart: ChartJS | null) {
// const tooltip = chart?.tooltip;
// if (!tooltip) {
// return;
// }
// if (tooltip.getActiveElements().length > 0) {
// tooltip.setActiveElements([], { x: 0, y: 0 });
// } else {
// const { chartArea } = chart;
// tooltip.setActiveElements(
// [
// {
// datasetIndex: 0,
// index: 2,
// },
// {
// datasetIndex: 1,
// index: 2,
// },
// ],
// {
// x: (chartArea.left + chartArea.right) / 2,
// y: (chartArea.top + chartArea.bottom) / 2,
// }
// );
// }
// chart.update();
// }
interface LineBarChartInterface {
title: string,
subtitle: string,
data1: any,
data2?: any,
red?: any,
label: any,
dataset1?: string,
dataset2?: string,
dataset3?: string,
barLabel?: boolean | undefined,
hashurado?: boolean | undefined,
reais?: boolean | undefined
}
export function DemRegXDemConChart({
title,
subtitle,
data1,
data2,
label,
red,
dataset1,
dataset2,
dataset3,
barLabel
}: LineBarChartInterface) {
const chartRef = useRef<ChartJS>(null);
const currentTime = new Date();
const labels = label
const options: any = {
responsive: true,
plugins: {
datalabels: {
display: true,
color: barLabel? 'black' : "rgba(255, 255, 255, 0)",
// backgroundColor: '#255488',
formatter: Math.round,
anchor: "end",
offset: -20,
align: "start",
font: {
size: 12
}
},
legend: {
position: 'bottom' as const,
},
title: {
display: true,
text: '',
},
},
};
const data = {
labels,
datasets: [
{
type: 'line' as const,
label: 'Demanda Contratada',
borderColor: red?
'#f00' : '#0c9200',
borderWidth: 2,
fill: false,
data: data1.map(value => value.dem_cont),
},
{
type: 'bar' as const,
label: 'Demanda Registrada',
backgroundColor: '#255488',
data: data2.map(value => value.dem_reg),
},
],
};
useEffect(() => {
const chart = chartRef.current;
// triggerTooltip(chart);
}, []);
return (
<ChartView>
<ChartTitle title={title} subtitle={subtitle}/>
<div>
<Chart ref={chartRef} type='bar' options={options} data={data} />
</div>
</ChartView>
)
}

93
src/components/graph/DiscretizedConsumptionChart.tsx Normal file
View File

@ -0,0 +1,93 @@
import { BarElement, CategoryScale, Chart as ChartJS, Legend, LinearScale, Title, Tooltip } from 'chart.js';
import ChartDataLabels from 'chartjs-plugin-datalabels';
import { draw, generate } from 'patternomaly'
import React from 'react';
import { Bar } from 'react-chartjs-2';
import ChartTitle from './ChartTitle';
import { ChartView } from './ChartView';
ChartJS.register(
CategoryScale,
LinearScale,
BarElement,
Title,
Tooltip,
Legend,
ChartDataLabels
);
interface SingleBarInterface{
title: string,
subtitle: string,
dataProps: any,
label: Array<string>,
dataset: string,
barLabel?: boolean | undefined,
year?: boolean | undefined,
month?: boolean | undefined,
dataset1?: string,
}
export function DiscretizedConsumptionChart({ title, subtitle, dataProps, label, dataset, barLabel, year, month }: SingleBarInterface) {
const currentTime = new Date();
const options: object = {
responsive: true,
series: {
downsample: {
threshold: 1000
}
},
plugins: {
datalabels: {
formatter: (value, ctx) => {
let sum = 0;
const dataArr = ctx.chart.data.datasets[0].data;
dataArr.map(data => {
sum += data;
});
const percentage = (dataProps[ctx.dataIndex].econ_percentual*100).toFixed(0)+"%";
const result = `${parseFloat(value).toFixed(0)}\n ${percentage}`
return value==null? null : result
},
display: true,
color: barLabel? 'black' : "rgba(255, 255, 255, 0)",
anchor: "end",
offset: -40,
align: "start",
font: {
size: 10
}
},
legend: {
position: 'bottom' as const,
},
title: {
display: false,
text: '',
},
},
};
const labels = label;
const data: any = {
labels,
datasets: [
{
label: dataset,
data: dataProps.map(value => value.consumo),
backgroundColor: '#255488'
},
],
}
return (
<ChartView>
<ChartTitle title={title} subtitle={subtitle} />
<Bar options={options} data={data} />
</ChartView>
)
}

91
src/components/graph/DiscretizedConsumptionChartLine.tsx Normal file
View File

@ -0,0 +1,91 @@
import React, { useState, useEffect } from 'react'
import { Bar, Line } from 'react-chartjs-2';
import { ChartView } from './ChartView';
import {
Chart as ChartJS,
CategoryScale,
LinearScale,
PointElement,
LineElement,
Title,
Tooltip,
Legend,
ScatterDataPoint,
} from 'chart.js';
import ChartTitle from './ChartTitle';
ChartJS.register(
CategoryScale,
LinearScale,
PointElement,
LineElement,
Title,
Tooltip,
Legend
);
interface ChartInterface {
title: string,
subtitle: string,
data1: any,
data2?: any,
data3?: any,
data4?: any,
label: any,
dataset1?: string,
dataset2?: string,
dataset3?: string,
dataset4?: string,
barLabel?: boolean | undefined
}
export default function DiscretizedConsumptionChartLine({ title, subtitle, data1, data2, data3, data4, label, dataset1, dataset2, dataset3, dataset4, barLabel }: ChartInterface) {
const options: any = {
responsive: true,
plugins: {
datalabels: {
display: true,
color: barLabel? 'black' : "rgba(255, 255, 255, 0)",
formatter: Math.round,
anchor: "end",
offset: -20,
align: "start",
font: {
size: 12
}
},
legend: {
position: 'bottom' as const,
},
title: {
display: true,
text: '',
},
},
};
const labels = label;
const data = {
labels,
datasets: [
{
label: dataset1,
data: data1.map(value => value.reativa),
borderColor: 'rgb(53, 162, 235)',
backgroundColor: 'rgba(53, 162, 235, 0)',
},
],
}
return (
<ChartView>
<ChartTitle title={title} subtitle={subtitle} />
<Line options={options} data={data} />
</ChartView>
)
}

4
src/components/graph/LineBarChart2.tsx
View File

@ -125,7 +125,7 @@ export function LineBarChart2({ title, subtitle, data1, data2, data3, label, red
type: 'bar' as const,
label: dataset2? dataset2 : 'Dataset 2',
backgroundColor: (value, ctx) => {
return hashurado? data1[value.dataIndex].dad_estimado == false? '#C2D5FB' : pattern.draw('diagonal', '#C2D5FB') : '#C2D5FB'
return hashurado? data1[value.dataIndex]?.dad_estimado == false? '#C2D5FB' : pattern.draw('diagonal', '#C2D5FB') : '#C2D5FB'
},
data: data3.map(value => value.custo_cativo),
},
@ -134,7 +134,7 @@ export function LineBarChart2({ title, subtitle, data1, data2, data3, label, red
label: dataset3? dataset3 : 'Dataset 2',
// backgroundColor: '#255488',
backgroundColor: (value, ctx) => {
return hashurado? data1[value.dataIndex].dad_estimado == false? '#255488' : pattern.draw('diagonal', '#255488') : '#255488'
return hashurado? data1[value.dataIndex]?.dad_estimado == false? '#255488' : pattern.draw('diagonal', '#255488') : '#255488'
},
data: data2.map(value => value.custo_livre),
},

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

@ -24,15 +24,10 @@ interface SingleBarInterface{
label: Array<string>,
dataset: string,
barLabel?: boolean | undefined,
year?: boolean | undefined,
month?: boolean | undefined,
dataset1?: string,
brutoAnual?: boolean | undefined,
}
export function SingleBar({ title, subtitle, dataProps, label, dataset, dataset1, barLabel, year, month }: SingleBarInterface) {
export function SingleBar({ title, subtitle, dataProps, label, dataset, barLabel, brutoAnual }: SingleBarInterface) {
const currentTime = new Date();
const options: object = {
@ -79,16 +74,28 @@ export function SingleBar({ title, subtitle, dataProps, label, dataset, dataset1
const data: any = {
labels,
datasets: [
{
label: 'Estimado',
data: [],
backgroundColor: '#C2d5fb',
},
{
label: dataset,
data: dataProps.map((value, index) => {
return parseFloat(value.economia_acumulada).toFixed(2)
}),
backgroundColor: (value, ctx) => {
return dataProps[value.dataIndex].dad_estimado == false ? '#255488' : '#C2d5fb'
return dataProps[value.dataIndex]?.dad_estimado == false ? '#255488' : '#C2d5fb'
},
},
{
label: '',
data: [dataProps[0]?.economia_acumulada?dataProps[0].economia_acumulada*1.1:1],
backgroundColor: 'transparent',
datalabels: {
display: false
}
},
],
}

97
src/components/graph/fatorPotenciaChart.tsx Normal file
View File

@ -0,0 +1,97 @@
import React, { useState, useEffect } from 'react'
import { Bar, Line } from 'react-chartjs-2';
import { ChartView } from './ChartView';
import {
Chart as ChartJS,
CategoryScale,
LinearScale,
PointElement,
LineElement,
Title,
Tooltip,
Legend,
ScatterDataPoint,
} from 'chart.js';
import ChartTitle from './ChartTitle';
ChartJS.register(
CategoryScale,
LinearScale,
PointElement,
LineElement,
Title,
Tooltip,
Legend
);
interface ChartInterface {
title: string,
subtitle: string,
data1: any,
data2?: any,
data3?: any,
data4?: any,
label: any,
dataset1?: string,
dataset2?: string,
dataset3?: string,
dataset4?: string,
barLabel?: boolean | undefined
}
export default function FatorPotenciaChart({ title, subtitle, data1, data2, label, dataset1, dataset2, dataset3, dataset4, barLabel }: ChartInterface) {
const options: any = {
responsive: true,
plugins: {
datalabels: {
display: true,
color: barLabel? 'black' : "rgba(255, 255, 255, 0)",
formatter: Math.round,
anchor: "end",
offset: -20,
align: "start",
font: {
size: 12
}
},
legend: {
position: 'bottom' as const,
},
title: {
display: true,
text: '',
},
},
};
const labels = label;
const data = {
labels,
datasets: [
{
label: dataset1? dataset1 : 'Dataset 1',
data: data1.map(value => value.fp),
borderColor: 'rgb(53, 162, 235)',
backgroundColor: 'rgba(53, 162, 235, 0)',
},
{
label: dataset2? dataset2 : '',
data: data2.map(value => value.f_ref),
borderColor: 'rgb(0, 0, 0)' ,
backgroundColor: 'rgba(255, 145, 0, 0)' ,
},
],
}
return (
<ChartView>
<ChartTitle title={title} subtitle={subtitle} />
<Line options={options} data={data} />
</ChartView>
)
}

2
src/components/graph/graphCard/ChartCard.tsx
View File

@ -70,7 +70,7 @@ export default function ChartCard({ title, subtitle, consumption, className, lin
<div className='header'>
<div>
<h2>{title}</h2>
<span>{subtitle}</span>
<span style={{display:'block'}}>{subtitle}</span>
</div>
{/* <ButtonGroup /> */}
</div>

5
src/components/graph/graphCard/ChartCardView.ts
View File

@ -37,6 +37,11 @@ export const ChartCardView = styled.article`
color: #2F4CDD;
}
span{
display:block;
font-size: 12.8px;
}
.statusDot {
max-width: 11px;
max-height: 11px;

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

@ -6,58 +6,64 @@ import TextField from '@mui/material/TextField';
import { HeaderView } from './HeaderView'
import { parseCookies } from 'nookies';
function stringToColor(string: string) {
let hash = 0;
let i;
for (i = 0; i < string.length; i += 1) {
hash = string.charCodeAt(i) + ((hash << 5) - hash);
}
let color = '#';
for (i = 0; i < 3; i += 1) {
const value = (hash >> (i * 8)) & 0xff;
color += `00${value.toString(16)}`.slice(-2);
}
return color;
}
function stringAvatar(name: string) {
return {
sx: {
bgcolor: stringToColor(name),
},
children: `${name.split(' ')[0][0]}`,
};
}
import { GetServerSideProps } from 'next';
import getAPIClient from '../../services/ssrApi';
interface headerInterface {
name: string,
admin?: boolean | undefined
logo?: string
}
export default function Header({ name, admin }: headerInterface) {
export default function Header({name, admin}: headerInterface) {
const { ['user-profile_picture']: profile_picture } = parseCookies()
return (
<HeaderView>
<section>
</section>
<section>
{/* {
!admin?
<Image src='/assets/png/copel.png' width={170} height={50} />
:
null
} */}
<div className='icon' >
<p>
olá, {name}
</p>
</div>
<Avatar {...stringAvatar(name)} style={{border: 'white solid 4px', width: '47px', height: '47px'}}/>
</section>
<div className='icon' >
<p>
olá, {name}
</p>
</div>
{
!admin && profile_picture?
<Image src={profile_picture} height={50} width={75}/>
:
null
}
</HeaderView>
)
}
export const getServerSideProps: GetServerSideProps = async (ctx) => {
const apiClient = getAPIClient(ctx)
const { ['@smartAuth-token']: token } = parseCookies(ctx)
const { ['user-name']: userName } = parseCookies(ctx)
const { ['user-profile_picture']: profile_picture } = parseCookies()
let userData = [];
await apiClient.get('/user').then(res => {
userData = res.data.data
}).catch(res => {
// console.log(res)
})
if (!token) {
return {
redirect: {
destination: '/',
permanent: false
}
}
}
return {
props: {
userData,
userName,
profile_picture
}
}
}

20
src/components/header/HeaderView.ts
View File

@ -2,24 +2,10 @@ import styled from "styled-components";
export const HeaderView = styled.header`
display: flex;
justify-content: space-between;
margin: 0 0 75px 0;
justify-content: flex-end;
width: 100%;
section {
width: 30%;
:last-child {
display: flex;
justify-content: flex-end;
align-items: center;
height: fit-content;
}
}
.icon {
display: flex;
align-items: center;
@ -28,11 +14,11 @@ export const HeaderView = styled.header`
min-width: 120px;
height: 40px;
border-radius: 8px 0 0 8px;
border-radius: 8px;
background-color: #254F7F;
transform: translateX(16px);
margin-right: 20px;
p{
color: white;

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

@ -67,7 +67,7 @@ export default function Sidebar() {
<Link href='/administrative/general'><li className={router.pathname=='/administrative/general'? 'actualPath' : null} ><Image src='/assets/sidebar/aboutUs.svg' width={25} height={25} />{'Sobre Nós'}</li></Link>
<Link href='/administrative/faq'><li className={router.pathname=='/administrative/faq' ? 'actualPath' : null } ><Image src='/assets/sidebar/saqIcon.svg' width={25} height={25} />{'FAQ >'}</li></Link>
<Link href='/administrative/notification'><li className={router.pathname=='/administrative/notification'? 'actualPath' : null}><Image src='/assets/sidebar/notificationsIcon.svg' width={25} height={25} />{'Notificações >'}</li></Link>
<Link href='/administrative/industryInfo'><li className={router.pathname=='/administrative/general'? 'actualPath' : null} ><Image src='/assets/sidebar/aboutUs.svg' width={25} height={25} />{'Info Setorial'}</li></Link>
<Link href='/administrative/industryInfo'><li className={router.pathname=='/administrative/industryInfo'? 'actualPath' : null} ><Image src='/assets/sidebar/aboutUs.svg' width={25} height={25} />{'Info Setorial'}</li></Link>
<button onClick={handleOpen}><Image src='/assets/logout.svg' width={25} height={25} />{'Sair'}</button>
<Modal
open={open}
@ -79,7 +79,7 @@ export default function Sidebar() {
<Typography id="modal-modal-title" variant="h6" component="h2">
Deseja realmente sair ?
</Typography>
<Link href='/'><Button variant="contained" sx={{mt:5}}>Sim</Button></Link>
<Link href='/'><Button variant="contained" sx={{mt:5}} onClick={() => signOut()}>Sim</Button></Link>
<Button variant="contained" onClick={handleClose} color="error" sx={{mt:5 ,ml:1}}>Não</Button>
</Box>
</Modal>
@ -90,6 +90,7 @@ export default function Sidebar() {
</aside>
</SidebarView>
</RenderIf>
<RenderIf isTrue={role === '2'}>
<SidebarView economiaDrawer={economiaDrawer} modalOpen={viewModal} >
<div className='hamburger' onClick={() => setViewModal(!viewModal)} >

23
src/contexts/AuthContext.tsx
View File

@ -31,7 +31,17 @@ export function AuthProvider({children}: {children: React.ReactNode}) {
const isAuthenticated = !!user
function signOut() {
destroyCookie(null, 'user-client_id')
destroyCookie(null, 'user-name')
destroyCookie(null, 'user-role')
destroyCookie(null, 'user-id')
destroyCookie(null, '@smartAuth-token')
}
async function signIn({email, password}: SignInData) {
await signOut()
const { token, user, exception }: any = await signInRequest({
email,
password
@ -51,6 +61,12 @@ export function AuthProvider({children}: {children: React.ReactNode}) {
if (user.name)
setCookie(undefined, 'user-name', user.name)
if (user.client_id)
setCookie(undefined, 'user-client_id', user.client_id)
if (user.profile_picture)
setCookie(undefined, 'user-profile_picture', user.profile_picture)
api.defaults.headers['Authorization'] = `Bearer ${token}`
if (!exception) {
@ -65,13 +81,6 @@ export function AuthProvider({children}: {children: React.ReactNode}) {
}
}
function signOut() {
destroyCookie(null, 'user-name')
destroyCookie(null, 'user-role')
destroyCookie(null, 'user-id')
destroyCookie(null, '@smartAuth-token')
}
return (
<AuthContext.Provider value={{ user, isAuthenticated, signIn, signOut }}>
{children}

61
src/pages/aboutUs.tsx
View File

@ -5,58 +5,46 @@ import { parseCookies } from 'nookies'
import React from 'react'
import Banner from '../components/banner/Banner'
import Header from '../components/header/Header'
import getAPIClient from '../services/ssrApi'
import { AboutUsView } from '../styles/layouts/aboutUs/AboutUsView'
export default function aboutUs({userName}) {
export default function aboutUs({userName, text}) {
return (
<AboutUsView>
<Head>
<title>Smart Energia - About Us</title>
</Head>
<Header name={userName} />
{/* <Header name={userName}/> */}
<Banner title='Quem Somos' subtitle='Soluções inteligentes em Gestão de Energia' imgSource='/assets/banners/aboutUsBanner.png' />
<section>
<p>A <strong>SMART ENERGIA</strong> é uma consultoria independente especializada em Gestão de Energia Elétrica, consolidada como uma das três maiores consultorias do Brasil.
Devido à grande experiência em operações na CCEE – Câmara de Comercialização de Energia Elétrica e ANEEL, entrega resultados que superam as expectativas.</p>
<p>Nasceu para gerenciar a compra de energia com inovação, transparência e imparcialidade sendo o elo forte e necessário entre os Consumidores e os
Vendedores de energia. </p>
<p>Baseada em sua experiência no setor elétrico adquirida desde 2001 e em mais de 900 unidades migradas, atua na negociação de contratos de compra e venda de
energia, na Gestão de Energia no Mercado Livre e criação de produtos diferenciados para atender as necessidades específicas dos consumidores.</p>
<p>Apoiada pela sólida experiência de seus gestores, conhecendo as premissas dos agentes de Comercialização e Geração para a compra e venda de energia,
aplicamos as mesmas premissas a favor dos Consumidores, disponibilizando assim um diferencial único para a tomada de decisão e elaboração das estratégias de
contratação de energia.</p>
<ul>
<li><Image src='/assets/listIcon.svg' width={25} height={25} />{'Informação'}</li>
<li><Image src='/assets/listIcon.svg' width={25} height={25} />{'Economia'}</li>
<li><Image src='/assets/listIcon.svg' width={25} height={25} />{'Gestão de Energia'}</li>
<li><Image src='/assets/listIcon.svg' width={25} height={25} />{'Imparcialidade'}</li>
<li><Image src='/assets/listIcon.svg' width={25} height={25} />{'Previsão de Custos'}</li>
<li><Image src='/assets/listIcon.svg' width={25} height={25} />{'Experiência'}</li>
<li><Image src='/assets/listIcon.svg' width={25} height={25} />{'Relacionamento'}</li>
</ul>
<article>
<aside>
<h2>Apoio a projetos sociais</h2>
<div>
<Image src='/assets/stamps/whiteStamp.png' width={200} height={200} />
<Image src='/assets/stamps/blueStamp.png' width={200} height={200} />
</div>
</aside>
</article>
</section>
<section dangerouslySetInnerHTML={{__html: text[0].about}}/>
<article>
<aside style={{alignSelf: 'flex-end'}}>
<h2>Apoio a projetos sociais</h2>
<div>
<Image src='/assets/stamps/whiteStamp.png' width={200} height={200} />
<Image src='/assets/stamps/blueStamp.png' width={200} height={200} />
</div>
</aside>
</article>
</AboutUsView>
)
}
export const getServerSideProps: GetServerSideProps = async (ctx) => {
const apiClient = getAPIClient(ctx)
const { ['@smartAuth-token']: token } = parseCookies(ctx)
const { ['user-name']: userName } = parseCookies(ctx)
let text = []
await apiClient.get('/aboutUs').then(res => {
text = res.data.data
}).catch(res => {
console.log(res)
})
if (!token) {
return {
redirect: {
@ -68,7 +56,8 @@ export const getServerSideProps: GetServerSideProps = async (ctx) => {
return {
props: {
userName
userName,
text
}
}
}

13
src/pages/accumulatedSavings.tsx
View File

@ -19,11 +19,16 @@ export default function AccumulatedSavings({graphData, years, userName}: any) {
<title>Smart Energia - Economia Bruta Mensal</title>
</Head>
<Header name={userName} />
<PageTitle title='Economia Bruta Mensal' subtitle='Economia Bruta Estimada e Acumulada mensal (Valores em R$ mil)' />
<PageTitle title='Economia Bruta Mensal' subtitle='Economia Bruta Estimada e Acumulada mensal - Valores em R$ mil' />
<section>
<SingleBar title='Economia Bruta Estimada e Acumulada' subtitle='(Valores em R$ mil)' dataset='Consolidada'
dataset1='Estimada' dataProps={graphData}
label={years} barLabel month/>
<SingleBar title='' subtitle='' dataset='Consolidada'
dataProps={graphData.sort((a, b) => {
if (parseFloat(a.mes.slice(0,2)) > parseFloat(b.mes.slice(1,2))) return 1
if (parseFloat(a.mes.slice(0,2)) < parseFloat(b.mes.slice(1,2))) return -1
return 0
})}
label={years} barLabel/>
</section>
</AccumulatedSavingsView>
)

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

@ -1,28 +1,29 @@
import Box from '@mui/material/Box';
import Modal from '@mui/material/Modal';
import TextField from '@mui/material/TextField';
import Typography from '@mui/material/Typography';
import React, { useState } from 'react'
import Snackbar from '@mui/material/Snackbar';
import MuiAlert, { AlertProps } from '@mui/material/Alert';
import ClientsTable from '../../../components/administrativeTables/ClientsTable';
import Box from '@mui/material/Box'
import Modal from '@mui/material/Modal'
import TextField from '@mui/material/TextField'
import Typography from '@mui/material/Typography'
import React, { useState, useEffect } from 'react'
import Image from 'next/image'
import Snackbar from '@mui/material/Snackbar'
import MuiAlert, { AlertProps } from '@mui/material/Alert'
import ClientsTable from '../../../components/administrativeTables/ClientsTable'
import BasicButton from '../../../components/buttons/basicButton/BasicButton'
import FaqButton1 from '../../../components/buttons/faqButton/FaqButton1';
import FaqButton2 from '../../../components/buttons/faqButton/FaqButton2';
import FaqButton1 from '../../../components/buttons/faqButton/FaqButton1'
import FaqButton2 from '../../../components/buttons/faqButton/FaqButton2'
import Header from '../../../components/header/Header'
import InputUploadImg from '../../../components/inputUploadImg/inputUpload';
import { ClientsView } from '../../../styles/layouts/clients/ClientsView';
import PageTitle from '../../../components/pageTitle/PageTitle';
import ConfirmModal from '../../../components/modal/ConfirmModal';
import { ConfirmModalView } from '../../../styles/layouts/modals/confirmModalView';
import { api } from '../../../services/api';
import { parseCookies } from 'nookies';
import { GetServerSideProps } from 'next';
import getAPIClient from '../../../services/ssrApi';
import FormData from 'form-data';
import { InputUploadView } from '../../../components/inputUploadImg/inputUploadView';
import { ClientsView } from '../../../styles/layouts/clients/ClientsView'
import PageTitle from '../../../components/pageTitle/PageTitle'
import ConfirmModal from '../../../components/modal/ConfirmModal'
import { ConfirmModalView } from '../../../styles/layouts/modals/confirmModalView'
import { api } from '../../../services/api'
import { parseCookies } from 'nookies'
import { GetServerSideProps } from 'next'
import getAPIClient from '../../../services/ssrApi'
import FormData from 'form-data'
import { InputUploadView } from '../../../components/inputUploadImg/inputUploadView'
import { FormControl, InputLabel, MenuItem, Select } from '@mui/material'
const style = {
position: 'absolute' as const,
@ -36,17 +37,17 @@ const style = {
boxShadow: 24,
p: 4,
overflowY: 'scroll'
};
}
const Alert = React.forwardRef<HTMLDivElement, AlertProps>(function Alert(
props,
ref,
ref
) {
return <MuiAlert elevation={6} ref={ref} variant="filled" {...props} />;
});
return <MuiAlert elevation={6} ref={ref} variant="filled" {...props} />
})
export default function clients({clients, userName}) {
const formData = new FormData();
export default function clients({ clients, userName }) {
const formData = new FormData()
const [client, setClient] = useState<any>({
name: String,
@ -55,179 +56,341 @@ export default function clients({clients, userName}) {
password_confirmation: String,
client_id: Number
})
const [logo, setLogo] = useState(false);
const [logo, setLogo] = useState(false)
const [selectedClients, setSelectedClients] = useState([])
const [open, setOpen] = useState(false);
const [imageURLS, setImageURLs] = useState([])
const [images, setImages] = useState([] as any)
const [open, setOpen] = useState(false)
const [openModalInativar, setOpenModalInativar] = useState(false)
const handleOpen = () => setOpen(true);
const handleClose = () => setOpen(false);
const handleOpen = () => setOpen(true)
const handleClose = () => setOpen(false)
const [openModal, setOpenModal] = useState(false)
const [nivelAcess, setnivelAcess] = useState<any>(2);
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 [openSnackSuccess, setOpenSnackSuccess] = useState<boolean>(false);
const [openSnackError, setOpenSnackError] = useState<boolean>(false);
const [openSnackSuccessDelete, setOpenSnackSuccessDelete] = useState<boolean>(false);
const [openSnackErrorDelete, setOpenSnackErrorDelete] = useState<boolean>(false);
const handleCloseSnack = (event?: React.SyntheticEvent | Event, reason?: string) => {
const handleCloseSnack = (
event?: React.SyntheticEvent | Event,
reason?: string
) => {
if (reason === 'clickaway') {
return;
return
}
setOpenSnackError(false);
setOpenSnackSuccess(false);
};
setOpenSnackError(false)
setOpenSnackSuccess(false)
}
const handleCloseSnackDelete = (event?: React.SyntheticEvent | Event, reason?: string) => {
const handleCloseSnackDelete = (
event?: React.SyntheticEvent | Event,
reason?: string
) => {
if (reason === 'clickaway') {
return;
return
}
setOpenSnackErrorDelete(false);
setOpenSnackSuccessDelete(false);
};
setOpenSnackErrorDelete(false)
setOpenSnackSuccessDelete(false)
}
function onChange(e) {
setLogo(e.target.files[0])
}
function handleCreateClient({name, email, password, password_confirmation, client_id}) {
function handleCreateClient({
name,
email,
password,
password_confirmation,
client_id
}) {
formData.append('name', name)
formData.append('email', email)
formData.append('password', password)
formData.append('password_confirmation', password_confirmation)
formData.append('client_id', client_id)
formData.append('profile_picture', logo)
formData.append('role', nivelAcess)
api.post('/user', formData).then(res => {
setOpenSnackSuccess(true)
setOpenModalInativar(false)
window.location.reload()
}).catch(res => {
setOpenSnackError(true)
})
}
async function handleDeleteClient(id: any) {
await id.map(client => {
api.delete(`/user/${client}`).then(res => {
setOpenSnackSuccessDelete(true)
api.post('/user', formData)
.then((res) => {
setOpenSnackSuccess(true)
setOpenModalInativar(false)
window.location.reload()
}).catch(res => setOpenSnackErrorDelete(true))
})
.catch((res) => {
setOpenSnackError(true)
})
}
async function handleDeleteClient(id: any) {
await id.map((client) => {
api
.delete(`/user/${client}`)
.then((res) => {
setOpenSnackSuccessDelete(true)
setOpenModalInativar(false)
window.location.reload()
})
.catch((res) => setOpenSnackErrorDelete(true))
})
}
useEffect(() => {
if (images.length < 1) return
const newImageUrls: any = []
images.forEach((image: any) =>
newImageUrls.push(URL.createObjectURL(image))
)
setImageURLs(newImageUrls)
}, [images])
function onImageChange(e: any) {
setImages([...e.target.files])
setLogo(e.target.files[0])
// console.log(e);
}
return (
<div style={{display: 'flex', flexDirection: 'column', width: '100%'}}>
<Snackbar open={openSnackSuccess} autoHideDuration={4000} onClose={handleCloseSnack}>
<Alert onClose={handleCloseSnack} severity="success" sx={{ width: '100%' }}>
<div style={{ display: 'flex', flexDirection: 'column', width: '100%' }}>
<Snackbar
open={openSnackSuccess}
autoHideDuration={4000}
onClose={handleCloseSnack}
>
<Alert
onClose={handleCloseSnack}
severity="success"
sx={{ width: '100%' }}
>
Cliente cadastrada com Sucesso!
</Alert>
</Snackbar>
<Snackbar open={openSnackError} autoHideDuration={4000} onClose={handleCloseSnack}>
<Alert onClose={handleCloseSnack} severity="error" sx={{ width: '100%' }}>
<Snackbar
open={openSnackError}
autoHideDuration={4000}
onClose={handleCloseSnack}
>
<Alert
onClose={handleCloseSnack}
severity="error"
sx={{ width: '100%' }}
>
Cliente não cadastrado!
</Alert>
</Snackbar>
<Snackbar open={openSnackSuccessDelete} autoHideDuration={4000} onClose={handleCloseSnackDelete}>
<Alert onClose={handleCloseSnackDelete} severity="success" sx={{ width: '100%' }}>
<Snackbar
open={openSnackSuccessDelete}
autoHideDuration={4000}
onClose={handleCloseSnackDelete}
>
<Alert
onClose={handleCloseSnackDelete}
severity="success"
sx={{ width: '100%' }}
>
Cliente excluido com sucesso!
</Alert>
</Snackbar>
<Snackbar open={openSnackErrorDelete} autoHideDuration={4000} onClose={handleCloseSnackDelete}>
<Alert onClose={handleCloseSnackDelete} severity="error" sx={{ width: '100%' }}>
<Snackbar
open={openSnackErrorDelete}
autoHideDuration={4000}
onClose={handleCloseSnackDelete}
>
<Alert
onClose={handleCloseSnackDelete}
severity="error"
sx={{ width: '100%' }}
>
Cliente não excluido!
</Alert>
</Snackbar>
<ClientsView>
<Header name={userName} admin/>
<PageTitle title='Clientes' subtitle='Clientes Smart Energia'/>
<div className='buttons'>
<button className='btn2' onClick={handleOpen}>Adicionar</button>
<button className='btn1' onClick={() => setOpenModalInativar(true)}>Inativar</button>
<Header name={userName} admin />
<PageTitle title="Clientes" subtitle="Clientes Smart Energia" />
<div className="buttons">
<button className="btn2" onClick={handleOpen}>
Adicionar
</button>
<button className="btn1" onClick={() => setOpenModalInativar(true)}>
Inativar
</button>
</div>
<section>
<ClientsTable clients={clients} onChange={value => {
setSelectedClients(value)
}}/>
<ClientsTable
clients={clients}
onChange={(value) => {
setSelectedClients(value)
}}
/>
</section>
</ClientsView>
<Modal
open={open}
onClose={handleClose}
aria-labelledby="modal-modal-title"
aria-describedby="modal-modal-description"
open={open}
onClose={handleClose}
aria-labelledby="modal-modal-title"
aria-describedby="modal-modal-description"
>
<Box sx={style}>
<h1>Adicionar Cliente</h1>
<Typography sx={{color:'gray', fontSize:12}}variant="h5" gutterBottom component="div">
Adicionar Cliente Smart Energia</Typography>
<br />
<TextField id="outlined-basic" label="Nome" sx={{width:350, ml:5}} onChange={(value) => {
setClient({
...client,
name: value.target.value
})
}} variant="outlined" />
<TextField id="outlined-basic" label="E-mail/Usuário" value={client.email} sx={{width:350, ml:8}} onChange={(value) => {
setClient({
...client,
email: value.target.value.toLowerCase()
})
}} variant="outlined" />
<TextField id="outlined-basic" label="Senha" sx={{width:350, ml:5, mt:2}} onChange={(value) => {
setClient({
...client,
password: value.target.value
})
}} variant="outlined" />
<TextField id="outlined-basic" label="Confirma Senha" sx={{width:350, ml:8, mt:2}} onChange={(value) => {
setClient({
...client,
password_confirmation: value.target.value
})
}} variant="outlined" />
<TextField id="outlined-basic" label="Codigo do Cliente Smart Energia" sx={{width:350, ml:5, mt:2}} onChange={(value) => {
setClient({
...client,
client_id: value.target.value
})
}} variant="outlined" />
<InputUploadView>
<Box sx={style}>
<h1>Adicionar Cliente</h1>
<Typography
sx={{ color: 'gray', fontSize: 12 }}
variant="h5"
gutterBottom
component="div"
>
Adicionar Cliente Smart Energia
</Typography>
<br />
<TextField
id="outlined-basic"
label="Nome"
sx={{ width: 350, ml: 5 }}
onChange={(value) => {
setClient({
...client,
name: value.target.value
})
}}
variant="outlined"
/>
<TextField
id="outlined-basic"
label="E-mail/Usuário"
value={client.email}
sx={{ width: 350, ml: 8 }}
onChange={(value) => {
setClient({
...client,
email: value.target.value.toLowerCase()
})
}}
variant="outlined"
/>
<TextField
id="outlined-basic"
label="Senha"
sx={{ width: 350, ml: 5, mt: 2 }}
onChange={(value) => {
setClient({
...client,
password: value.target.value
})
}}
variant="outlined"
/>
<TextField
id="outlined-basic"
label="Confirma Senha"
sx={{ width: 350, ml: 8, mt: 2 }}
onChange={(value) => {
setClient({
...client,
password_confirmation: value.target.value
})
}}
variant="outlined"
/>
<TextField
id="outlined-basic"
label="Codigo do Cliente Smart Energia"
sx={{ width: 350, ml: 5, mt: 2 }}
onChange={(value) => {
setClient({
...client,
client_id: value.target.value
})
}}
variant="outlined"
/>
<InputUploadView>
<div className="imgContainer">
<article>
{imageURLS.map((imageSrc, index) => (
<Image
src={imageSrc}
key={index}
width={30}
height={30}
className="image"
/>
))}
</article>
</div>
<div className="update">
<form action="">
<div>
<label htmlFor="arquivo">
{' '}
<p className="TitleButton"> Enviar foto de Perfil </p>{' '}
</label>
<input
type="file"
name="arquivo"
id="arquivo"
onChange={onImageChange}
/>
</div>
</form>
</div>
</InputUploadView>
<div className='imgContainer'>
<article>
</article>
<div className='select'>
</div>
<FormControl sx={{ width: 350, ml: 5, mt: 2 }}>
<InputLabel id="demo-select-small">Nivel de acesso</InputLabel>
<Select
labelId="demo-select-small"
id="demo-select-small"
value={nivelAcess}
label="Unidade"
onChange={value => setnivelAcess(value.target.value)}
fullWidth
>
<MenuItem value={1}>Administrador</MenuItem>
<MenuItem value={2}>Cliente</MenuItem>
<div className="update">
</Select>
</FormControl>
</div>
<form action="">
<div >
<label htmlFor="arquivo"> <p className='TitleButton'> Enviar foto de Perfil </p> </label>
<input type="file" name='arquivo' id='arquivo' onChange={onChange} />
</div>
</form>
</div>
</InputUploadView>
<br /><br />
<FaqButton1 title='Cancelar' onClick={() => setOpen(false)} />
<FaqButton2 title='Salvar' onClick={() => handleCreateClient(client)}/>
</Box>
<FaqButton1 title="Cancelar" onClick={() => setOpen(false)} />
<FaqButton2
title="Salvar"
onClick={() => handleCreateClient(client)}
/>
</Box>
</Modal>
<ConfirmModal open={openModalInativar} handleIsClose={(value) => {setOpenModalInativar(value)}}>
<PageTitle title='Inativar Cliente(s)' subtitle='deseja realmente inativar os clientes selecionadas?'/>
<ConfirmModal
open={openModalInativar}
handleIsClose={(value) => {
setOpenModalInativar(value)
}}
>
<PageTitle
title="Inativar Cliente(s)"
subtitle="deseja realmente inativar os clientes selecionadas?"
/>
<ConfirmModalView>
<BasicButton title='Confirmar' onClick={() => handleDeleteClient(selectedClients)}/>
<BasicButton title='Cancelar' onClick={() => setOpenModalInativar(false)}/>
<BasicButton
title="Confirmar"
onClick={() => handleDeleteClient(selectedClients)}
/>
<BasicButton
title="Cancelar"
onClick={() => setOpenModalInativar(false)}
/>
</ConfirmModalView>
</ConfirmModal>
</div>
@ -238,15 +401,18 @@ export const getServerSideProps: GetServerSideProps = async (ctx) => {
const apiClient = getAPIClient(ctx)
const { ['@smartAuth-token']: token } = parseCookies(ctx)
const { ['user-name']: userName } = parseCookies(ctx)
let clients = [];
let clients = []
await apiClient.get('/user').then(res => {
// console.log(res)
clients = res.data.data
// console.log(clients)
}).catch(res => {
// console.log(res)
})
await apiClient
.get('/user')
.then((res) => {
// console.log(res)
clients = res.data.data
// console.log(clients)
})
.catch((res) => {
// console.log(res)
})
if (!token) {
return {

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

@ -66,7 +66,6 @@ export default function Sidebar({faqData, userName} : any ) {
if (reason === 'clickaway') {
return;
}
setOpenSnackError(false);
setOpenSnackSuccess(false);
};
@ -76,14 +75,13 @@ export default function Sidebar({faqData, userName} : any ) {
if (reason === 'clickaway') {
return;
}
setOpenSnackErrorDelete(false);
setOpenSnackSuccessDelete(false);
};
async function handleDeleteNotification(id: any) {
await id.map((value) => {
api.delete(`/faq/${value.id}`).then(res => {
api.delete(`/faq/${value}`).then(res => {
setOpenSnackSuccessDelete(true)
setOpenModalInativar(false)
window.location.reload()

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

@ -1,21 +1,30 @@
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 { SelectChangeEvent } from '@mui/material/Select';
import { Editor } from '@tinymce/tinymce-react'
import { GetServerSideProps } from 'next';
import { parseCookies } from 'nookies';
import React, { useRef, useState } from 'react'
import BasicButton from '../../components/buttons/basicButton/BasicButton';
import Header from '../../components/header/Header';
import PageTitle from '../../components/pageTitle/PageTitle';
import { api } from '../../services/api';
import { GeneralView } from '../../styles/layouts/general/GeneralView'
import MuiAlert, { AlertProps } from '@mui/material/Alert'
import Snackbar from '@mui/material/Snackbar';
const Alert = React.forwardRef<HTMLDivElement, AlertProps>(function Alert(
props,
ref
) {
return <MuiAlert elevation={6} ref={ref} variant="filled" {...props} />
})
export default function index({userName}: any) {
const editorRef = useRef(null);
const [text, setText] = useState('');
const [openSnackSuccess, setOpenSnackSuccess] = useState<boolean>(false)
const [openSnackError, setOpenSnackError] = useState<boolean>(false)
const log = () => {
if (editorRef.current) {
console.log(editorRef.current.getContent());
@ -26,13 +35,65 @@ export default function index({userName}: any) {
setText(event.target.value);
};
const handleCloseSnack = (
event?: React.SyntheticEvent | Event,
reason?: string
) => {
if (reason === 'clickaway') {
return
}
setOpenSnackError(false)
setOpenSnackSuccess(false)
}
async function handleRegisterAboutUs() {
await api.post('/aboutUs', {
about: text
})
.then(res => setOpenSnackSuccess(true))
.catch(res => setOpenSnackError(false))
}
return (
<GeneralView>
<Snackbar
open={openSnackSuccess}
autoHideDuration={4000}
onClose={handleCloseSnack}
>
<Alert
onClose={handleCloseSnack}
severity="success"
sx={{ width: '100%' }}
>
Cadastrado com Sucesso!
</Alert>
</Snackbar>
<Snackbar
open={openSnackError}
autoHideDuration={4000}
onClose={handleCloseSnack}
>
<Alert
onClose={handleCloseSnack}
severity="error"
sx={{ width: '100%' }}
>
Não cadastrado!
</Alert>
</Snackbar>
<Header name={userName} admin/>
<PageTitle title='Sobre nós' subtitle='Alterar texto de sobre nós'/>
<div style={{width: '100%', display: 'flex', justifyContent: 'flex-start', alignItems: 'flex-start', marginTop: '30px', marginBottom: '10px'}}>
<BasicButton title='Salvar Texto' onClick={() => handleRegisterAboutUs()}/>
</div>
<br />
<Editor
onInit={(evt, editor) => editorRef.current = editor}
onChange={value => console.log(value)}
onEditorChange={(newText) => setText(newText)}
initialValue=' <p>A <strong>SMART ENERGIA</strong> é uma consultoria independente especializada em Gestão de Energia Elétrica, consolidada como uma das três maiores consultorias do Brasil.
Devido à grande experiência em operações na CCEE – Câmara de Comercialização de Energia Elétrica e ANEEL, entrega resultados que superam as expectativas.</p>
@ -70,6 +131,8 @@ export default function index({userName}: any) {
content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'
}}
/>
</GeneralView>
)
}

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

@ -8,6 +8,7 @@ import PageTitle from '../../../components/pageTitle/PageTitle'
import { IndustryInfoView } from '../../../styles/layouts/industryInfo/IndustryInfoView'
import InputUploadPdf from '../../../components/inputUploadPdf/inputUpload';
import { api } from '../../../services/api'
import PdfThumbnail from 'react-pdf-thumbnail';
import FormData from 'form-data';
@ -28,6 +29,7 @@ export default function industryInfo({userName}: any) {
const [pdf, setPdf] = useState<any>();
function onChange(e) {
setPdf(e.target.files[0])
console.log(pdf)
}
const [openSnackSuccess, setOpenSnackSuccess] = useState<boolean>(false);
@ -70,17 +72,10 @@ export default function industryInfo({userName}: any) {
<Header name={userName} />
<div className='title'>
<PageTitle title='Info Setorial' subtitle='Realize o upload da última versão de info setorial' />
<InputUploadView>
<div className="update">
<form action="">
<div className='testess'>
<label htmlFor="arquivo"> <p className='TitleButton'> Enviar PDF </p> </label>
<input type="file" name='arquivo' id='arquivo' onChange={onChange} />
</div>
</form>
</div>
</InputUploadView>
{/* <InputUploadPdf/> */}
<form action="">
<label htmlFor="">Escolher arquivo</label>
<input type="file" name='arquivo' id='arquivo' onChange={onChange}/>
</form>
</div>
<BasicButton onClick={() => handleCreateClient()} title='Atualizar'/>

114
src/pages/chartTelemetry.tsx
View File

@ -1,7 +1,7 @@
import React, { useState } from 'react'
import React, { useEffect, useState } from 'react'
import { SingleBar } from '../components/graph/SingleBar'
import { ChatTelemetryView } from '../styles/layouts/ChatTelemetry/ChatTelemetryView'
import { useRouter } from 'next/router'
// import router, { useRouter } from 'next/router'
import { FatorPotencia } from '../services/fatorPotencia'
import { ConsumoDecretizadoBar } from '../services/consumoDiscretizadoBar'
@ -18,6 +18,14 @@ import Typography from '@mui/material/Typography';
import Modal from '@mui/material/Modal';
import { GetServerSideProps } from 'next'
import { parseCookies } from 'nookies'
import getAPIClient from '../services/ssrApi'
import { api } from '../services/api'
import FatorPotenciaChart from '../components/graph/fatorPotenciaChart'
// import { DemRegXDemConChart } from '../components/graph/demRegXDemConChart'
import { DiscretizedConsumptionChart } from '../components/graph/DiscretizedConsumptionChart'
import DiscretizedConsumptionChartLine from '../components/graph/DiscretizedConsumptionChartLine'
import router, { useRouter } from 'next/router'
import { DemRegXDemConChart } from '../components/graph/DemRegXDemConChart'
const style = {
display: 'flex',
@ -45,6 +53,70 @@ export default function chartTelemetry({userName}) {
const [openDemandaContratada, setOpenDemandaContratada] = useState(false);
const handleCloseDemandaContratada = () => setOpenDemandaContratada(false);
const [fatorPotenciaData, setFatorPotenciaData] = useState([]);
const [demRegXDemCon, setDemRegXDemCon] = useState([]);
const [discretizedConsumptionData, setDiscretizedConsumptionData] = useState([]);
const [discretizedConsumptionDataReativa, setDiscretizedConsumptionDataReativa] = useState([]);
const { ['user-cod_client']: cod_client } = parseCookies()
const router = useRouter()
const {startDate, endDate} = router.query
async function getChartsData() {
console.log(router.query)
await api.post('/telemetry/powerFactor', {
"filters": [
{"type" : "=", "field": "med_5min.ponto", "value": "RSZFNAENTR101P"},
{"type" : "between", "field": "dia_num", "value": [startDate, endDate]}
]
}).then(res => {
setFatorPotenciaData(res.data.data)
}).catch(res => {
console.log(res)
})
await api.post('/telemetry/demand', {
"filters": [
{"type" : "=", "field": "med_5min.ponto", "value": "RSZFNAENTR101P"},
{"type" : "between", "field": "dia_num", "value": [startDate, endDate]}
]
}).then(res => {
setDemRegXDemCon(res.data.data)
}).catch(res => {
console.log(res)
})
await api.post('/telemetry/discretization', {
"type": "5_min",
"filters": [
{"type" : "=", "field": "med_5min.ponto", "value": "RSZFNAENTR101P"},
{"type" : "between", "field": "dia_num", "value": [startDate, endDate]}
]
}).then(res => {
setDiscretizedConsumptionData(res.data.data)
}).catch(res => {
console.log(res)
})
await api.post('/telemetry/discretization', {
"type": "5_min",
"filters": [
{"type" : "=", "field": "med_5min.ponto", "value": "RSZFNAENTR101P"},
{"type" : "between", "field": "dia_num", "value": ["2022-01-03", "2022-01-03"]}
]
}).then(res => {
setDiscretizedConsumptionDataReativa(res.data.data)
}).catch(res => {
console.log(res)
})
}
useEffect(() => {
getChartsData()
}, [])
return (
<ChatTelemetryView>
<Head>
@ -54,7 +126,7 @@ export default function chartTelemetry({userName}) {
<PageTitle title='Telemetria - Graficos' subtitle='Gráficos' />
<section className='chartContainer'>
<div onClick={() => setOpenFatorPotencia(true)}>
<LineChart title='Fator de Potencia' subtitle='' data1={FatorPotencia.data} data2={FatorPotencia.data2} dataset1='Fator de Potencia' dataset2='Fator ref.' label={FatorPotencia.label1} />
<FatorPotenciaChart title='Fator de Potencia' subtitle='' data1={fatorPotenciaData} data2={fatorPotenciaData} dataset1='Fator de Potencia' dataset2='Fator ref' label={fatorPotenciaData.map(value => value.hora)} />
</div>
<Modal
open={openFatorPotencia}
@ -63,12 +135,12 @@ export default function chartTelemetry({userName}) {
aria-describedby="modal-modal-description"
>
<Box sx={style}>
<LineChart title='Fator de Potencia' subtitle='' data1={FatorPotencia.data} data2={FatorPotencia.data4} data3={[]} data4={[]} dataset1='Fator de Potencia' label={FatorPotencia.label1} />
<FatorPotenciaChart title='Fator de Potencia' subtitle='' data1={fatorPotenciaData} data2={fatorPotenciaData} dataset1='Fator de Potencia' dataset2='Fator ref' label={FatorPotencia.label1} />
</Box>
</Modal>
<div onClick={() => setOpenConsumoDiscretizado1(true)}>
<LineChart title='Consumo discretizado em 1 hora' subtitle='' data1={ConsumoDecretizadoLine.data} data2={[]} data3={[]} data4={[]} dataset1='Demanda registrada' label={ConsumoDecretizadoLine.label1} />
<DiscretizedConsumptionChartLine title='Consumo discretizado em 1 hora' subtitle='' data1={discretizedConsumptionDataReativa} dataset1='Demanda registrada' label={discretizedConsumptionDataReativa.map(data => parseFloat(data.reativa).toFixed(3))} />
</div>
<Modal
open={openConsumoDiscretizado1}
@ -77,12 +149,12 @@ export default function chartTelemetry({userName}) {
aria-describedby="modal-modal-description"
>
<Box sx={style}>
<LineChart title='Consumo discretizado em 1 hora' subtitle='' data1={ConsumoDecretizadoLine.data} data2={[]} data3={[]} data4={[]} dataset1='Demanda registrada' label={ConsumoDecretizadoLine.label1} />
<DiscretizedConsumptionChartLine title='Consumo discretizado em 1 hora' subtitle='' data1={discretizedConsumptionDataReativa} dataset1='Demanda registrada' label={discretizedConsumptionDataReativa.map(data => data.reativa)} />
</Box>
</Modal>
<div onClick={() => setOpenConsumoDiscretizado2(true)}>
<SingleBar title='Consumo discretizado em 1 hora' subtitle='' dataProps={ConsumoDecretizadoBar.data} label={ConsumoDecretizadoBar.label} dataset={'Consumo'} dataset1='Estimado' month/>
<DiscretizedConsumptionChart title='Consumo discretizado em 5 minutos' subtitle='' dataProps={discretizedConsumptionData} label={discretizedConsumptionData.map(value => value.minut)} dataset={'Consumo'} dataset1='Estimado' month/>
</div>
<Modal
open={openConsumoDiscretizado2}
@ -91,12 +163,12 @@ export default function chartTelemetry({userName}) {
aria-describedby="modal-modal-description"
>
<Box sx={style}>
<SingleBar title='Consumo discretizado em 1 hora' subtitle='' dataProps={ConsumoDecretizadoBar.data} label={ConsumoDecretizadoBar.label} dataset={'Consumo'} dataset1='Estimado' month/>
<SingleBar title='Consumo discretizado em 1 hora' subtitle='' dataProps={ConsumoDecretizadoBar.data} label={ConsumoDecretizadoBar.label} dataset={'Consumo'}/>
</Box>
</Modal>
<div onClick={() => setOpenDemandaContratada(true)}>
<LineBarChart data1={ConsumoDecretizadoLine.data1} data3={ConsumoDecretizadoLine.data} dataset1={'Demanda contratada + 5%'} dataset2={'barra1'} dataset3={'Demanda Registrada'} label={ConsumoDecretizadoLine.label1} title='Demanda Contratada X Registrada' subtitle='' red/>
<DemRegXDemConChart data1={demRegXDemCon} data2={demRegXDemCon} dataset1={'Demanda contratada + 5%'} dataset2={'barra1'} dataset3={'Demanda Registrada'} label={demRegXDemCon.map(value => value.hora)} title='Demanda Contratada X Registrada' subtitle='' red/>
</div>
<Modal
open={openDemandaContratada}
@ -105,7 +177,7 @@ export default function chartTelemetry({userName}) {
aria-describedby="modal-modal-description"
>
<Box sx={style}>
<LineBarChart data1={ConsumoDecretizadoLine.data1} data3={ConsumoDecretizadoLine.data} dataset1={'Demanda contratada + 5%'} dataset2={'barra1'} dataset3={'2021'} label={ConsumoDecretizadoLine.label1} title='Demanda Contratada X Registrada' subtitle='' red/>
<DemRegXDemConChart data1={demRegXDemCon} data2={demRegXDemCon} dataset1={'Demanda contratada + 5%'} dataset2={'barra1'} dataset3={'Demanda Registrada'} label={demRegXDemCon.map(value => value.hora)} title='Demanda Contratada X Registrada' subtitle='' red/>
</Box>
</Modal>
</section>
@ -114,8 +186,26 @@ export default function chartTelemetry({userName}) {
}
export const getServerSideProps: GetServerSideProps = async (ctx) => {
const apiClient = getAPIClient(ctx)
const { ['@smartAuth-token']: token } = parseCookies(ctx)
const { ['user-name']: userName } = parseCookies(ctx)
const { ['user-cod_client']: cod_client } = parseCookies(ctx)
const fatorPotenciaChart = []
console.log('olha os query ai', ctx.query)
// await apiClient.post('/telemetry/powerFactor', {
// "filters": [
// {"type" : "=", "field": "med_5min.ponto", "value": cod_client},
// {"type" : "between", "field": "dia_num", "value": ["2022-01-03", "2022-01-03"]}
// ]
// }).then(res => {
// fatorPotenciaChart = res.data
// }).catch(res => {
// console.log(res)
// })
if (!token) {
return {
@ -128,8 +218,8 @@ export const getServerSideProps: GetServerSideProps = async (ctx) => {
return {
props: {
userName
userName,
fatorPotenciaChart
}
}
}

33
src/pages/costIndicator.tsx
View File

@ -4,50 +4,21 @@ import { parseCookies } from 'nookies'
import React from 'react'
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 getAPIClient from '../services/ssrApi'
import { CostIndicatorView } from '../styles/layouts/economy/costIndicator/CostIndicatorView'
function verifyDataByYear(data) {
const currentYear = []
const currentYearAux = data.filter(value => value.mes.slice(3, 7).includes('2021'))
console.log(currentYear.length)
console.log(currentYearAux.length)
currentYearAux.sort((a, b) => {
if (parseFloat(a.mes.slice(0,2)) > parseFloat(b.mes.slice(1,2))) return 1
if (parseFloat(a.mes.slice(0,2)) < parseFloat(b.mes.slice(1,2))) return -1
return 0
})
// for (let i=0; currentYear.length <= currentYearAux.length; i++) {
// console.log(i, 'dentro do for')
// // console.log(currentYearAux.length, 'tamanho aux')
// if (currentYearAux[i].mes.slice(1,2)==i) {
// currentYear.push(currentYearAux[i])
// console.log(currentYear.length, 'tamanho')
// }
// }
console.log(currentYearAux)
}
export default function CostIndicator({graphData, userName}: any) {
// console.log(graphData.filter((value, index) => value.mes.slice(3, 7).includes('2021')).map(value => value.custo_unit))
return (
<CostIndicatorView>
<Head>
<title>Smart Energia - Indicador de Custos</title>
</Head>
<Header name={userName} />
<PageTitle title='Indicador de Custo' subtitle='Valores em R$/MWh'/>
<PageTitle title='Indicador de Custo' subtitle='Indicador de Custo - Valores em R$/MWh'/>
<section>
<Chart title='Indicador de Custo' subtitle='(Valores em R$/MWh)'
<Chart title='' subtitle=''
data1={graphData.filter((value, index) => value.mes.slice(3, 7).includes('2021')).sort((a, b) => {
if (parseFloat(a.mes.slice(0,2)) > parseFloat(b.mes.slice(1,2))) return 1
if (parseFloat(a.mes.slice(0,2)) < parseFloat(b.mes.slice(1,2))) return -1

22
src/pages/dashboard.tsx
View File

@ -44,29 +44,29 @@ export default function Dashboard({grossAnualGraph, grossAnualYears, grossMensal
</Link>
<section className='dashboard'>
<GraphCard title='Economia Bruta Anual' subtitle='Economia Bruta Estimada e Acumulada anual'>
<SingleBar title='Economia Bruta' subtitle='(Valores em R$ mil)'
dataset='Consolidada' dataset1='Estimada'
<GraphCard title='Economia Bruta Anual' subtitle='Economia Bruta Estimada e Acumulada anual - (Valores em R$ mil)'>
<SingleBar title='' subtitle=''
dataset='Consolidada'
dataProps={grossAnualGraph}
label={grossAnualYears} barLabel year/>
label={grossAnualYears} barLabel/>
</GraphCard>
<GraphCard title='Economia Bruta Mensal' subtitle='Economia Bruta Estimada e Acumulada mensal' singleBar>
<SingleBar title='Economia Bruta Estimada e Acumulada' subtitle='(Valores em R$)'
dataset='Acumulada' dataset1='Estimado'
<GraphCard title='Economia Bruta Mensal' subtitle='Economia Bruta Estimada e Acumulada mensal - (Valores em R$)' singleBar>
<SingleBar title='' subtitle=''
dataset='Acumulada'
dataProps={grossMensalGraph}
label={grossMensalYears}
barLabel month/>
barLabel/>
</GraphCard>
<GraphCard title='Cativo x Livre mensal' subtitle='Comparativo de Custo Estimado' singleBar>
<GraphCard title='Cativo x Livre mensal' subtitle='Comparativo de Custo Estimado - (Valores em R$/MWh)' singleBar>
<LineBarChart2 data1={acumulatedGraph} data2={acumulatedGraph} data3={acumulatedGraph}
label={ConsumoEstimado.label} dataset1='Custo' dataset2='Cativo' dataset3='Livre'
title='Custo Estimado' subtitle='(Valores em R$/MWh)' barLabel hashurado/>
title='' subtitle='' barLabel hashurado/>
</GraphCard>
<GraphCard title='Indicador de Custo' subtitle='Valores em R$/ MWh'>
<Chart title='Indicador de Custo' subtitle='(Valores em R$/MWh)'
<Chart title='' subtitle=''
data1={costIndicator.filter((value, index) => value.mes.slice(3, 7).includes('2021')).sort((a, b) => {
if (parseFloat(a.mes.slice(0,2)) > parseFloat(b.mes.slice(1,2))) return 1
if (parseFloat(a.mes.slice(0,2)) < parseFloat(b.mes.slice(1,2))) return -1

4
src/pages/estimatedCost.tsx
View File

@ -19,11 +19,11 @@ export default function EstimatedCost({graphData, userName}: any) {
<title>Smart Energia - Custos Estimados</title>
</Head>
<Header name={userName} />
<PageTitle title='Cativo x Livre mensal' subtitle='Comparativo de Custo Estimado' />
<PageTitle title='Cativo x Livre mensal' subtitle='Comparativo de custo Estimado - Valores em R$' />
<section>
<LineBarChart2 data1={graphData} data2={graphData} data3={graphData}
dataset1="Economia (R$)" dataset2='Cativo' dataset3='Livre'
label={ConsumoEstimado.label} title='Cativo x Livre mensal' subtitle='' barLabel hashurado />
label={ConsumoEstimado.label} title='' subtitle='' barLabel hashurado />
</section>
</EstimatedCostView>
)

8
src/pages/grossSavings.tsx
View File

@ -19,13 +19,13 @@ export default function GrossSavings({graphData, years, userName}: any) {
<title>Smart Energia - Economia Acumulada</title>
</Head>
<Header name={userName} />
<PageTitle title='Economia Bruta Anual' subtitle='Economia Bruta Estimada e Acumulada anual (Valores em R$ mil)' />
<PageTitle title='Economia Bruta Anual' subtitle='Economia Bruta Estimada e Acumulada anual - Valores em R$ mil' />
<section>
<SingleBar title='Economia Bruta' subtitle='(Valores em R$ mil)'
dataset='Consolidada' dataset1='Estimada'
<SingleBar title='' subtitle=''
dataset='Consolidada'
dataProps={graphData}
label={years} barLabel year/>
label={years} barLabel/>
</section>
</GrossSavingsView>

6
src/pages/index.tsx
View File

@ -36,10 +36,10 @@ export default function Home() {
const [state, setstate] = useState(false);
const [values, setValues] = useState({
password: null,
showPassword: false,
});
const [email, setEmail] = useState<string>("")
const [password, setPassword] = useState<string>()
@ -128,7 +128,7 @@ export default function Home() {
setEmail(value.target.value.toLowerCase())
}}/>
<FormControl sx={{ m: 1, width: '90%' }} variant="outlined">
<InputLabel htmlFor="outlined-adornment-password">Password</InputLabel>
<InputLabel htmlFor="outlined-adornment-password">Senha</InputLabel>
<OutlinedInput
id="outlined-adornment-password"
type={values.showPassword ? 'text' : 'password'}
@ -146,7 +146,7 @@ export default function Home() {
</IconButton>
</InputAdornment>
}
label="Password"
label="Senha"
/>
</FormControl>
<Link href='verifyEmail'>Esqueceu a senha ?</Link>

2
src/pages/industryInfo.tsx
View File

@ -35,7 +35,7 @@ export default function industryInfo({userName}: any) {
function handleDownloadPdf() {
api.get('/download').then(res => {
router.replace(res.data.path);
window.open(res.data.path);
console.log(res.data);
setOpenSnackSuccess(true)
}).catch(res => {

62
src/pages/news.tsx
View File

@ -12,44 +12,38 @@ import getAPIClient from '../services/ssrApi';
import { Button, NewsView } from '../styles/layouts/news/NewsView'
export default function aboutUs({userName, news}: any) {
console.log(news)
console.log(news.channel.item)
return (
<NewsView>
<Head>
<title>Smart Energia - Noticias</title>
</Head>
<Header name={userName} />
<Banner title='Notícias' subtitle='Tudo de importante no setor de energia' imgSource='/assets/banners/news.png' />
{/* <Header name={userName} /> */}
<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>
{
news.channel.item.map(data => {
<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>
return <>
<section>
<h2 dangerouslySetInnerHTML={{__html: data.pubDate}} />
<strong dangerouslySetInnerHTML={{__html: data.title}} />
<strong>ANEEL APROVA REAJUSTE TARIFÁRIO ANUAL DA ENERGISA SERGIPE DE 16,46 % PARA O CONSUMIDOR RESIDENCIAL</strong>
<br />
<br />
{
<p dangerouslySetInnerHTML={{__html: data.description}} />
}
<Button>
<fieldset>
<legend> <BasicButton title='Ver Mais...' onClick={() => console.log()}/></legend>
</fieldset>
</Button>
</section>
</>
})
}
<a href='https://www.energiasmart.com.br/noticias/'
target={"_blank"}
@ -63,10 +57,10 @@ export const getServerSideProps: GetServerSideProps = async (ctx) => {
const { ['@smartAuth-token']: token } = parseCookies(ctx)
const { ['user-name']: userName } = parseCookies(ctx)
let news;
let news = [];
await axios.get('https://www.energiasmart.com.br/noticias/feed/').then(res => {
news = res.data
await apiClient.get('/news').then(res => {
news = res.data.data
}).catch(res => {
console.log(res)
})

5
src/pages/notifications.tsx
View File

@ -16,15 +16,18 @@ export default function Notifications({notificationData, userName}: any) {
<title>Smart Energia - Notificações</title>
</Head>
<Header name={userName} />
<PageTitle title='Notificações' subtitle='Aqui estão as notificaões publicadas para voce!' />
<PageTitle title='Notificações' subtitle='Aqui estão as notificações publicadas para você!' />
<section className='CommonQuestionsSection' >
{
notificationData?
notificationData.map((value, index ) => {
return <>
<NotificationQuestionsCard key={index} title={value.title} body={value.body}/>
<hr />
</>
})
:
<p style={{alignSelf: 'center'}}>Você não tem notificações!</p>
}
</section>
</FaqView>

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

@ -10,6 +10,7 @@ import { parseCookies } from 'nookies';
import React, { useEffect, useState } from 'react'
import BasicButton from '../../components/buttons/basicButton/BasicButton';
import { BasicButtonView } from '../../components/buttons/basicButton/BasicButtonView';
import { LineBarChart } from '../../components/graph/LineBarChart';
import LineChart from '../../components/graph/LineChart';
import Header from '../../components/header/Header'
@ -127,6 +128,41 @@ export default function pld({tableData, graphByHourData, graphByMonthData, userN
return 'dullRed'
}
const dateFormated = new Date()
function downloadCSVFile(csv, filename) {
const csv_file = new Blob([csv], {type: "text/csv"});
const download_link = document.createElement("a");
download_link.download = filename;
download_link.href = window.URL.createObjectURL(csv_file);
download_link.style.display = "none";
document.body.appendChild(download_link);
download_link.click();
}
function htmlToCSV(html, filename) {
const data = [];
const rows = document.querySelectorAll("table tr");
for (let i = 0; i < rows.length; i++) {
const row = [], cols: any = rows[i].querySelectorAll("td, th");
for (let j = 0; j < cols.length; j++) {
row.push(cols[j].innerText);
}
data.push(row.join(","));
}
downloadCSVFile(data.join("\n"), filename);
}
useEffect(() => {
getDataByHour()
getDataByDay()
@ -157,7 +193,12 @@ export default function pld({tableData, graphByHourData, graphByMonthData, userN
</thead>
<tbody>
{
tableData.data.map(data => {
tableData.data.sort((a, b) => {
if (parseFloat(a.year_month_formatted.slice(0,2)) > parseFloat(b.year_month_formatted.slice(1,2))) return 1
if (parseFloat(a.year_month_formatted.slice(0,2)) < parseFloat(b.year_month_formatted.slice(1,2))) return -1
return 0
}).map(data => {
return <>
<tr>
<td className='tg-gceh'>{data.year_month_formatted}</td>
@ -174,7 +215,7 @@ export default function pld({tableData, graphByHourData, graphByMonthData, userN
if (index === 0) {
return <>
<tr>
<td className='tg-gceh'>Max</td>
<td className='tg-gceh'>Máximo</td>
<td className='tg-uulg'>{parseFloat(data.nordeste_max).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2})}</td>
<td className='tg-gceh'>{parseFloat(data.norte_max).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2})}</td>
<td className='tg-gceh'>{parseFloat(data.sudeste_max).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2})}</td>
@ -184,7 +225,7 @@ export default function pld({tableData, graphByHourData, graphByMonthData, userN
} else if (index===1) {
return <>
<tr>
<td className='tg-gceh'>Min</td>
<td className='tg-gceh'>Mínimo</td>
<td className='tg-uulg'>{parseFloat(data.nordeste_min).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2})}</td>
<td className='tg-gceh'>{parseFloat(data.norte_min).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2})}</td>
<td className='tg-gceh'>{parseFloat(data.sudeste_min).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2})}</td>
@ -206,7 +247,14 @@ export default function pld({tableData, graphByHourData, graphByMonthData, userN
}
</tbody>
</table>
<div className='btnDownload'>
<BasicButton onClick={() => {
const html = document.querySelector("table").outerHTML;
htmlToCSV(html, "tabela_PLD.csv");
}} title='Download'/>
</div>
<section>
<article onClick={() => setPage('perMouth')}>
<p>Valores Diários</p>
</article>
@ -244,9 +292,9 @@ export default function pld({tableData, graphByHourData, graphByMonthData, userN
</FormControl>
</div>
<FormControl sx={{
width: '22%',
ml: 1
}}>
width: '22%',
ml: 1
}}>
<InputLabel id="demo-simple-select-label">Mês</InputLabel>
<Select
value={day}
@ -254,7 +302,6 @@ export default function pld({tableData, graphByHourData, graphByMonthData, userN
displayEmpty
placeholder='dia'
label="Age"
>
<MenuItem value={'0'}>Nenhum</MenuItem>
{
@ -288,7 +335,8 @@ export default function pld({tableData, graphByHourData, graphByMonthData, userN
</section>
<LineChart data1={nordeste} data2={norte} data3={sudeste} data4={sul}
dataset1='NORDESTE' dataset2='NORTE' dataset3='SUDESTE' dataset4='SUL'
title={`Período - ${date}`}
title={new Date(date).toLocaleString('pt-br').split(" ")[0]!='Invalid' && new Date(date).toLocaleString('pt-br').split(" ")[0]!='NaN'
? 'Período - ' + new Date(date).toLocaleString('pt-br').split(" ")[0] : 'Período - '}
subtitle='' label={['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24']} />
</PldGraphView>
</RenderIf>

6
src/pages/resumoOperacao.tsx
View File

@ -105,9 +105,9 @@ export default function ResumoOperacao({tableData, clientsData, userName, client
<title>Smart Energia - Resumo de Operação</title>
</Head>
<Header name={userName} />
<PageTitle title='Resumo de Operaçoes' subtitle='Operações detalhadas' />
<PageTitle title='Resumo de Operações' subtitle='Operações detalhadas' />
<h3>Seletor Mês</h3>
<h3>Filtrar por Unidade e/ou Mês</h3>
<div className='select'>
<FormControl fullWidth>
<InputLabel id="demo-simple-select-labels">Unidades</InputLabel>
@ -163,7 +163,7 @@ export default function ResumoOperacao({tableData, clientsData, userName, client
<tr>
<td key={index} className='tg-gceh'>{value.cod_smart_unidade}</td>
<td key={index} className='tg-uulg'>{value.operacao}</td>
<td key={index} className='tg-gceh'>{value.montante_nf}</td>
<td key={index} className='tg-gceh'>{parseFloat(value.montante_nf).toLocaleString('pt-br')}</td>
<td key={index} className='tg-gceh'>{value.contraparte}</td>
<td key={index} className='tg-uulg'>{parseFloat(value.nf_c_icms).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2})}</td>
<td key={index} className='tg-gceh'>{parseFloat(value.preco_nf).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2})}</td>

84
src/pages/telemetria.tsx
View File

@ -1,5 +1,5 @@
import React from 'react';
import { useRouter } from 'next/router'
import React, { useState } from 'react';
import router, { useRouter } from 'next/router'
import Banner from '../components/banner/Banner';
import { TelemetriaView, Buttons} from '../styles/layouts/Telemetria/TelemetriaView';
@ -18,16 +18,15 @@ import RenderIf from '../utils/renderIf';
import { GetServerSideProps } from 'next';
import { parseCookies } from 'nookies';
export default function Telemetria({userName}: any) {
const [unity, setUnity] = React.useState('');
const [startDate, setStartDate] = React.useState('');
const [endDate, setEndDate] = React.useState('');
const [discretization, setDiscretization] = React.useState('');
const [unity, setUnity] = useState('');
const [startDate, setStartDate] = useState('');
const [endDate, setEndDate] = useState('');
const [discretization, setDiscretization] = useState('');
const [showChart, setShowChart] = React.useState(false);
const [date, setDate] = useState('');
const [showChart, setShowChart] = useState(false);
const handleChange = (event: SelectChangeEvent) => {
// setAge(event.target.value);
@ -72,50 +71,13 @@ export default function Telemetria({userName}: any) {
<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>Nenhum</em>
</MenuItem>
<MenuItem value={10}>20/05/2022</MenuItem>
<MenuItem value={20}>10/06/2022</MenuItem>
<MenuItem value={30}>05/06/2021</MenuItem>
<MenuItem value={30}>05/06/2021</MenuItem>
<MenuItem value={30}>05/06/2021</MenuItem>
</Select>
</FormControl>
<input type="date" data-date="" data-date-format="DD MMMM YYYY" value={startDate} onChange={(value) => setStartDate(value.target.value)}/>
</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>Nenhum</em>
</MenuItem>
<MenuItem value={10}>20/05/2022</MenuItem>
<MenuItem value={20}>10/06/2022</MenuItem>
<MenuItem value={30}>05/06/2021</MenuItem>
<MenuItem value={30}>05/06/2021</MenuItem>
<MenuItem value={30}>05/06/2021</MenuItem>
</Select>
</FormControl>
<p className='title' >Data final</p>
<input type="date" data-date="" data-date-format="DD MMMM YYYY" value={endDate} onChange={(value) => setEndDate(value.target.value)}/>
</div>
<div className='select'>
@ -133,10 +95,6 @@ export default function Telemetria({userName}: any) {
<MenuItem value="">
<em>Nenhum</em>
</MenuItem>
<MenuItem value="">07/09/2021</MenuItem>
<MenuItem value={10}>Filial 3</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
</FormControl>
</div>
@ -147,7 +105,21 @@ export default function Telemetria({userName}: any) {
</RenderIf>
<Buttons>
<GradientButton title='GRÁFICO' description='Gerar gráficos com os dados selecionados' orange link />
<Link href={{
pathname: '/chartTelemetry',
query: {
startDate,
endDate,
discretization
},
}} >
{/* <GradientButton title='GRÁFICO' description='Gerar gráficos com os dados selecionados' orange/> */}
<button>
<p>GRÁFICO</p>
<p>Gerar gráficos com os dados selecionados</p>
</button>
</Link>
{/* <GradientButton title='GRÁFICO' description='Gerar gráficos com os dados selecionados' orange onClick={() => router.replace('/chartTelemetry')}/> */}
<GradientButton title='DOWNLOADS' description='DADOS BRUTOS SELECIONADOS' purple />
<GradientButton title='DADOS' description='hORÁRIOS DO MÊS ATUAL' onClick={() => setShowChart(!showChart)} green />
</Buttons>

19
src/services/auth.ts
View File

@ -14,9 +14,10 @@ interface SignInRequestData {
type UserObjectType = {
name: string;
email: string;
client_id: number
id: number,
role: number
client_id: number;
id: number;
role: number;
profile_picture?: string
}
export async function signInRequest(data: SignInRequestData) {
@ -33,7 +34,8 @@ export async function signInRequest(data: SignInRequestData) {
email: res.data.user.email,
client_id: res.data.user.client_id,
id: res.data.user.id,
role: res.data.user.roles[0].pivot.role_id
role: res.data.user.roles[0].pivot.role_id,
profile_picture: res.data.user.profile_picture
}
}).catch(res => {
exception = res
@ -46,7 +48,8 @@ export async function signInRequest(data: SignInRequestData) {
email: user?.email,
client_id: user?.client_id,
id: user?.id,
role: user?.role
role: user?.role,
profile_picture: user?.profile_picture
},
exception
}
@ -62,7 +65,8 @@ export default async function recoverUserInformation(id) {
email: res.data.user.email,
client_id: res.data.user.client_id,
id: res.data.user.id,
role: res.data.user.roles[0].pivot.role_id
role: res.data.user.roles[0].pivot.role_id,
profile_picture: res.data.user.profile_picture
}
}).catch(res => {
console.log(res)
@ -73,7 +77,8 @@ export default async function recoverUserInformation(id) {
name: user?.name,
email: user?.email,
client_id: user?.client_id,
id: user?.id
id: user?.id,
profile_picture: user?.profile_picture
}
}
}

67
src/styles/layouts/Telemetria/TelemetriaView.ts
View File

@ -12,6 +12,21 @@ export const TelemetriaView = styled.main`
margin: 0 0 0 10px;
}
input {
width: 15rem;
height: 2.5rem;
padding: 14px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
font-weight: 400;
border-radius: 6px;
border: solid gray 1px;
background-color: #F9F9F9;
}
span {
font-family: 'Inter';
font-style: normal;
@ -65,6 +80,58 @@ export const Buttons = styled.div`
padding-left: 100px;
padding-right: 100px;
button {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
border-radius: 2px;
width: 30%;
min-width: 240px;
height: 110px;
min-height: 110px;
margin-bottom: 25px;
font-family: 'Poppins';
font-size: 10px;
color: #FFFFFF;
:first-child {
background: linear-gradient(200.86deg, #F48665 8.03%, #F48665 91.97%), #FFFFFF;
}
box-shadow: 0.5px 3px 10px rgba(119, 119, 119, 0.1);
border-style: none;
* {
margin: 0;
padding: 0;
}
p {
:first-child {
font-family: 'Poppins';
font-style: normal;
font-weight: 700;
font-size: calc(20px);
text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}
:last-child {
font-family: 'Poppins';
font-style: normal;
font-weight: 700;
font-size: 12;
text-transform: uppercase;
}
}
}
@media (max-width: 942px) {
align-items: center;
justify-content: center;

20
src/styles/layouts/aboutUs/AboutUsView.ts
View File

@ -22,21 +22,19 @@ export const AboutUsView = styled.main`
}
}
section {
article {
article {
display: flex;
justify-content: flex-end;
align-items: center;
aside {
display: flex;
justify-content: flex-end;
justify-content: center;
align-items: center;
aside {
display: flex;
justify-content: center;
align-items: center;
width: fit-content;
width: fit-content;
flex-direction: column;
}
flex-direction: column;
}
}

17
src/styles/layouts/administerView/faq/faqView.ts
View File

@ -42,6 +42,23 @@ export const FaqView = styled.nav`
margin-left: 19px;
}
.MuiBox-root .css-4y2i0o {
:-webkit-scrollbar {
width: 15px!important;
}
:-webkit-scrollbar-track {
background-color: #EFEFEF!important;
}
:-webkit-scrollbar-thumb {
background-color: rgb(37,79,127)!important;
border: 3px solid #EFEFEF!important;
border-radius: 10px!important
}
:-webkit-scrollbar-thumb:hover {
background-color: #1d3e63!important;
}
}
/*
.teste{
display: flex;

18
src/styles/layouts/administerView/notification/notificationView.ts
View File

@ -77,7 +77,21 @@ export const NotificationView = styled.nav`
margin-left: 16px;
}
.MuiBox-root .css-4y2i0o {
:-webkit-scrollbar {
width: 15px!important;
}
:-webkit-scrollbar-track {
background-color: #EFEFEF!important;
}
:-webkit-scrollbar-thumb {
background-color: rgb(37,79,127)!important;
border: 3px solid #EFEFEF!important;
border-radius: 10px!important
}
:-webkit-scrollbar-thumb:hover {
background-color: #1d3e63!important;
}
}
`

56
src/styles/layouts/industryInfo/IndustryInfoView.ts
View File

@ -26,4 +26,60 @@ export const IndustryInfoView = styled.main`
color: #FFFFFF;
}
form {
label {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
width: 150px;
margin-left: 10px;
transform: translateY(20px);
background-color: #254F7F;
color: white;
border-radius: 8px;
}
}
input[type="file"] {
padding-top: 20px;
padding-left: 41px;
width: 350px;
height: 60px;
border: 1px solid black;
border-radius: 6px;
}
label {
}
/* .inputTeste{
display: flex;
align-items: center;
width: 50%;
height: 50px;
background: white;
border-radius:10px;
}
input[type="file"] {
display: block;
}
label {
display: flex;
justify-content: flex-start;
padding: 2px 10px;
width: 200px;
background-color: #333;
color: #FFF;
text-transform: uppercase;
text-align: center;
display: block;
margin-top: 10px;
cursor: pointer;
} */
`

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

@ -149,6 +149,10 @@ export const PldTableView = styled.main`
margin: 20px;
}
}
.btnDownload{
margin-top:6px;
}
`
export const PldGraphView = styled.main`

30
yarn.lock
View File

@ -1390,6 +1390,11 @@
version "2.11.5"
resolved "https://registry.npmjs.org/@popperjs/core/-/core-2.11.5.tgz"
"@react-pdf-viewer/core@^3.5.0":
version "3.5.0"
resolved "https://registry.yarnpkg.com/@react-pdf-viewer/core/-/core-3.5.0.tgz#bb18b87330bfd01d5c31980b820ef58dc1c50a19"
integrity sha512-fu9vi8lzpFtQQqu8XUzSzp5aQYD5YxmJQ0CxOuRrANU7z1kft+TbdyiDOpWoeX2VC0/oyclBxUwleVYv+g1f1w==
"@rushstack/eslint-patch@^1.1.3":
version "1.1.3"
resolved "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.1.3.tgz"
@ -2240,6 +2245,11 @@ dom-helpers@^5.0.1:
"@babel/runtime" "^7.8.7"
csstype "^3.0.2"
dommatrix@^1.0.1:
version "1.0.3"
resolved "https://registry.yarnpkg.com/dommatrix/-/dommatrix-1.0.3.tgz#e7c18e8d6f3abdd1fef3dd4aa74c4d2e620a0525"
integrity sha512-l32Xp/TLgWb8ReqbVJAFIvXmY7go4nTxxlWiAFyhoQw9RKEOHBZNnyGvJWqDVSPmq3Y9HlM4npqF/T6VMOXhww==
eastasianwidth@^0.2.0:
version "0.2.0"
resolved "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz"
@ -4001,6 +4011,14 @@ patternomaly@^1.3.2:
version "1.3.2"
resolved "https://registry.yarnpkg.com/patternomaly/-/patternomaly-1.3.2.tgz#70b8db17d7318ab1471cc43f94011bb866c54d09"
pdfjs-dist@^2.7.570:
version "2.14.305"
resolved "https://registry.yarnpkg.com/pdfjs-dist/-/pdfjs-dist-2.14.305.tgz#ed2ecb439ff8af5446c90a310ebd30bc1a91df62"
integrity sha512-5f7i25J1dKIBczhgfxEgNxfYNIxXEdxqo6Qb4ehY7Ja+p6AI4uUmk/OcVGXfRGm2ys5iaJJhJUwBFwv6Jl/Qww==
dependencies:
dommatrix "^1.0.1"
web-streams-polyfill "^3.2.1"
picocolors@^1.0.0:
version "1.0.0"
resolved "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz"
@ -4140,6 +4158,13 @@ react-is@^16.13.1, react-is@^16.7.0:
version "17.0.2"
resolved "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz"
react-pdf-thumbnail@^0.1.0:
version "0.1.0"
resolved "https://registry.yarnpkg.com/react-pdf-thumbnail/-/react-pdf-thumbnail-0.1.0.tgz#6b8ddf861252acb2b137dfd42007f545fde52ef9"
integrity sha512-VzkGUmgAheqxQsMTcUjOFrATtEdG2C9YRkMb0GFkf9JyfTDdBjkyu1/gVLk9CYVKWkgyNID34/G0TTX60XJuyA==
dependencies:
pdfjs-dist "^2.7.570"
react-transition-group@^4.4.0, react-transition-group@^4.4.2:
version "4.4.2"
resolved "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.2.tgz"
@ -4764,6 +4789,11 @@ wcwidth@^1.0.0:
dependencies:
defaults "^1.0.3"
web-streams-polyfill@^3.2.1:
version "3.2.1"
resolved "https://registry.yarnpkg.com/web-streams-polyfill/-/web-streams-polyfill-3.2.1.tgz#71c2718c52b45fd49dbeee88634b3a60ceab42a6"
integrity sha512-e0MO3wdXWKrLbL0DgGnUV7WHVuw9OUvL4hjgnPkIeEvESk74gAITi5G606JtZPp39cd8HA9VQzCIvA49LpPN5Q==
which-boxed-primitive@^1.0.2:
version "1.0.2"
resolved "https://registry.npmjs.org/which-boxed-primitive/-/which-boxed-primitive-1.0.2.tgz"