Merge branch 'administativePages' into 'dev'

Administative pages

See merge request kluppsoftware/smart-energia-web!68

src/components/administrativeTables/FaqTable.tsx

@@ -45,15 +45,6 @@ function createData(
   };
 }
 
-const rows = [
-  createData('Como usar o sistema?', 'Você deve usar assim... e assado...', 'ativo'),
-  createData('Como usar o sistema', 'Você deve usar assim... e assado...', 'ativo'),
-  createData('Como usar o sistema?', 'Você deve usar assim... e assado...', 'ativo'),
-  createData('Como usar o sistema?', 'Você deve usar assim... e assado...', 'ativo'),
-  createData('Como usar o sistema?', 'Você deve usar assim... e assado...', 'ativo'),
-  createData('Como usar o sistema?', 'Você deve usar assim... e assado...', 'inativo'),
-];
-
 function descendingComparator<T>(a: T, b: T, orderBy: keyof T) {
   if (b[orderBy] < a[orderBy]) {
     return -1;
@@ -183,8 +174,6 @@ export default function FaqTable({questionData, onChange}: FaqTableInterface) {
   const [dense, setDense] = useState<boolean>(false);
   const [rowsPerPage, setRowsPerPage] = useState<number>(5);
 
-  console.table(questionData)
-  console.table(rows)
   const handleRequestSort = (
     event: React.MouseEvent<unknown>,
     property: keyof Data,
@@ -240,7 +229,7 @@ export default function FaqTable({questionData, onChange}: FaqTableInterface) {
 
   // Avoid a layout jump when reaching the last page with empty rows.
   const emptyRows =
-    page > 0 ? Math.max(0, (1 + page) * rowsPerPage - rows.length) : 0;
+    page > 0 ? Math.max(0, (1 + page) * rowsPerPage - questionData.length) : 0;
 
   return (
     <TableView>
@@ -313,7 +302,7 @@ export default function FaqTable({questionData, onChange}: FaqTableInterface) {
         <TablePagination
           rowsPerPageOptions={[5, 10, 25]}
           component="div"
-          count={rows.length}
+          count={questionData.length}
           rowsPerPage={rowsPerPage}
           page={page}
           onPageChange={handleChangePage}

src/components/graph/LineBarChart2.tsx

@@ -119,24 +119,24 @@ export function LineBarChart2({ title, subtitle, data1, data2, data3, label, red
         },
         borderWidth: 2,
         fill: false,
-        data: data1.map(value => value),
+        data: data1.map(value => value.economia_mensal),
       },
       {
         type: 'bar' as const,
         label: dataset2? dataset2 : 'Dataset 2',
         backgroundColor: (value, ctx) => {
-          return hashurado? parseInt(value.dataIndex+1) <= currentTime.getMonth()? '#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),
+        data: data3.map(value => value.custo_cativo),
       },
       {
         type: 'bar' as const,
         label: dataset3? dataset3 : 'Dataset 2',
         // backgroundColor: '#255488',
         backgroundColor: (value, ctx) => {
-          return hashurado? parseInt(value.dataIndex+1) <= currentTime.getMonth()? '#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),
+        data: data2.map(value => value.custo_livre),
       },
     ],
   } : {

src/components/graph/SingleBar.tsx

@@ -50,8 +50,8 @@ export function SingleBar({ title, subtitle, dataProps, label, dataset, dataset1
           dataArr.map(data => {
               sum += data;
           });
-          const percentage = (value*100 / sum).toFixed(0)+"%";
+          const percentage = (dataProps[ctx.dataIndex].econ_percentual*100).toFixed(0)+"%";
-          const result = `${value}\n ${percentage}`
+          const result = `${value}\n    ${percentage}`
 
           return value==null? null : result
         },
@@ -82,10 +82,9 @@ export function SingleBar({ title, subtitle, dataProps, label, dataset, dataset1
       {
         label: dataset,
         data: dataProps.map((value, index) => {
-          return value.economia_acumulada
+          return parseFloat(value.economia_acumulada).toFixed(2)
         }),
         backgroundColor: (value, ctx) => {
-          console.log(dataProps[value.dataIndex])
           return dataProps[value.dataIndex].dad_estimado == false ? '#255488' : '#C2d5fb'
         },
       },

src/components/header/Header.tsx

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

src/components/mapCard/MapCard.tsx

@@ -15,9 +15,11 @@ export default function MapCard({ title, subtitle, statistic, imgSource, date }:
 
   return (
       <MapCardView statistic={statistic} >
-        <Image src={imgSource} width={90} height={90}/>
+        <Image src={subtitle==='SUL'? '/SUL.svg' : subtitle==='NORTE'? '/norte.svg' : subtitle==='NORDESTE'? '/nordeste.svg' : subtitle==='SUDESTE'? '/mapSample.svg' : imgSource} width={90} height={90}/>
         <div>
-          <h4>{title}</h4>
+          <h4>{
+            subtitle==='SUL'? 'S' : subtitle==='NORTE'? 'N' : subtitle==='NORDESTE'? 'NE' : subtitle==='SUDESTE'? 'SE/CO' : title
+          }</h4>
           <span className='footer' >{subtitle}</span>
           {
             date?

src/components/sidebar/Sidebar.tsx

@@ -55,7 +55,7 @@ export default function Sidebar() {
           </div>
           <ul>
             <Link href='/administrative/clients'><li className={router.pathname=='/administrative' ? 'actualPath' : null } ><Image src='/assets/sidebar/economyIcon.svg' width={25} height={25} />{'Clientes >'}</li></Link>
-            <Link href='/administrative/general'><li className={router.pathname=='/administrative/general'? 'actualPath' : null} ><Image src='/assets/sidebar/dashboardIcon.svg' width={25} height={25} />{'Visão Geral'}</li></Link>
+            <Link href='/administrative/general'><li className={router.pathname=='/administrative/general'? 'actualPath' : null} ><Image src='/assets/sidebar/aboutUs.svg' width={25} height={25} />{'Sobre Nós'}</li></Link>
             <Link href='/administrative/faq'><li className={router.pathname=='/administrative/faq' ? 'actualPath' : null } ><Image src='/assets/sidebar/saqIcon.svg' width={25} height={25} />{'FAQ >'}</li></Link>
             <Link href='/administrative/notification'><li className={router.pathname=='/administrative/notifications'? 'actualPath' : null}><Image src='/assets/sidebar/notificationsIcon.svg' width={25} height={25} />{'Notificações >'}<div className='notification'><p>25</p></div></li></Link>
             <button onClick={handleOpen}><Image src='/assets/logout.svg' width={25} height={25} />{'Sair'}</button>

src/contexts/AuthContext.tsx

@@ -36,15 +36,21 @@ export function AuthProvider({children}: {children: React.ReactNode}) {
       password
     })
 
-    if (token) {
+    if (token)
       setCookie(undefined, '@smartAuth-token', token, {
         maxAge: 60 * 60 * 1, // 1 hour
       })
-    }
 
-    if (user.role) {
+    if (user.role)
       setCookie(undefined, 'user-role', user.role)
-    }
+
+    if (user.id)
+      setCookie(undefined, 'user-id', user.id)
+
+    if (user.name)
+      setCookie(undefined, 'user-name', user.name)
+
+    api.defaults.headers['Authorization'] = `Bearer ${token}`
 
     if (!exception) {
       if (user.role == 2) {
@@ -56,10 +62,6 @@ export function AuthProvider({children}: {children: React.ReactNode}) {
     } else {
       return
     }
-
-    api.defaults.headers['Authorization'] = `Bearer ${token}`
-
-    setUser(user)
   }
 
   return (

src/pages/aboutUs.tsx

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

src/pages/accumulatedSavings.tsx

@@ -12,13 +12,13 @@ import { dataEconomiaBruta } from '../services/economiaBruta'
 import getAPIClient from '../services/ssrApi'
 import { AccumulatedSavingsView } from '../styles/layouts/economy/accumulatedSavings/AccumulatedSavingsView'
 
-export default function AccumulatedSavings({graphData, years}: any) {
+export default function AccumulatedSavings({graphData, years, userName}: any) {
   return (
     <AccumulatedSavingsView>
       <Head>
         <title>Smart Energia - Economia Acumulada</title>
       </Head>
-      <Header name='' />
+      <Header name={userName} />
       <PageTitle title='Economia Acumulada' subtitle='Economia Bruta Estimada e Acumulada anual (Valores em R$ mil)' />
       <section>
         <SingleBar title='Economia Bruta Estimada e Acumulada' subtitle='(Valores em R$ mil)' dataset='Consolidada'
@@ -32,12 +32,14 @@ export default function AccumulatedSavings({graphData, years}: any) {
 export const getServerSideProps: GetServerSideProps = async (ctx) => {
   const apiClient = getAPIClient(ctx)
   const { ['@smartAuth-token']: token } = parseCookies(ctx)
+  const { ['user-name']: userName } = parseCookies(ctx)
+
 
   let graphData = [];
 
   await apiClient.post('/economy/grossMonthly').then(res => {
     graphData = res.data.data
-    console.log(graphData[0].mes)
+    // console.log(graphData[0].mes)
   }).catch(res => {
     console.log(res)
   })
@@ -53,11 +55,11 @@ export const getServerSideProps: GetServerSideProps = async (ctx) => {
     }
   }
 
-
   return {
     props: {
       graphData,
       years,
+      userName
     }
   }
 }

src/pages/administrative/clients/index.tsx

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

src/pages/administrative/faq/index.tsx

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

src/pages/administrative/general.tsx

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

src/pages/administrative/notification/index.tsx

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

src/pages/chartTelemetry.tsx

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

src/pages/consumption.tsx

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

src/pages/costIndicator.tsx

@@ -13,7 +13,7 @@ import getAPIClient from '../services/ssrApi'
 import { CostIndicatorView } from '../styles/layouts/economy/costIndicator/CostIndicatorView'
 
 function addMissingMonths(data) {
-  console.log(data[0].mes.slice(1, 1))
+  // console.log(data[0].mes.slice(1, 1))
 }
 
 function verifyDataByYear(data) {
@@ -23,15 +23,15 @@ function verifyDataByYear(data) {
     return false
 }
 
-export default function CostIndicator({graphData}: any) {
+export default function CostIndicator({graphData, userName}: any) {
-  console.log(graphData.filter((value, index) => value.mes.slice(3, 7).includes('2021')).map(value => value.custo_unit))
+  // 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='' />
+      <Header name={userName} />
       <PageTitle title='Indicador de Custo' subtitle='Valores em R$/MWh'/>
       <section>
         <Chart title='Indicador de Custo' subtitle='(Valores em R$/MWh)' data1={graphData.filter((value, index) => value.mes.slice(3, 7).includes('2021'))}
@@ -45,6 +45,7 @@ export default function CostIndicator({graphData}: any) {
 export const getServerSideProps: GetServerSideProps = async (ctx) => {
   const apiClient = getAPIClient(ctx)
   const { ['@smartAuth-token']: token } = parseCookies(ctx)
+  const { ['user-name']: userName } = parseCookies(ctx)
 
   let graphData = [];
 
@@ -67,6 +68,7 @@ export const getServerSideProps: GetServerSideProps = async (ctx) => {
   return {
     props: {
       graphData,
+      userName
     }
   }
 }

src/pages/dashboard.tsx

@@ -23,23 +23,23 @@ import { parseCookies } from 'nookies'
 import { GetServerSideProps } from 'next'
 import getAPIClient from '../services/ssrApi'
 
-export default function Dashboard({grossAnualGraph, grossAnualYears, grossMensalGraph, grossMensalYears} : any) {
+export default function Dashboard({grossAnualGraph, grossAnualYears, grossMensalGraph, grossMensalYears, acumulatedGraph, mapsInfo, userName} : any) {
-
   return (
     <DashboardView>
       <Head>
         <title>Smart Energia - Dashboard</title>
       </Head>
-      <Header name='' />
+      <Header name={userName} />
 
       <PageTitle title='Visão Geral' subtitle='Bem Vindo a Smart Energia' />
       <Link href='pld'>
         <section className="cardsSection" >
           <MapCard title='R$/MWh' subtitle='abril / 22' date='até 10/10' statistic='' imgSource='/moneyIcon.svg' />
-          <MapCard title='SE/CO' subtitle='Sudeste' statistic='R$ 273,54' imgSource='/mapSample.svg' />
+          {
-          <MapCard title='S' subtitle='Sul' statistic='R$ 273,54' imgSource='/SUL.svg' />
+            mapsInfo.map(value => {
-          <MapCard title='NE' subtitle='Nordeste' statistic='R$ 273,54' imgSource='/nordeste.svg' />
+              return <MapCard key={value.submarket} title='S' subtitle={value.submarket} statistic={parseFloat(value.value).toFixed(2)} imgSource='/SUL.svg' />
-          <MapCard title='N' subtitle='Norte' statistic='R$ 273,54' imgSource='/norte.svg' />
+            })
+          }
         </section>
       </Link>
 
@@ -60,17 +60,19 @@ export default function Dashboard({grossAnualGraph, grossAnualYears, grossMensal
         </GraphCard>
 
         <GraphCard title='Custos Estimados' subtitle='Custos Estimados em R$/MWh' singleBar>
-          <LineBarChart2 data1={ConsumoEstimado.data2} data2={ConsumoEstimado.data} data3={ConsumoEstimado.data1} label={ConsumoEstimado.label} dataset1='Custo' dataset2='Cativo' dataset3='Livre' title='Custo Estimado' subtitle='(Valores em R$/MWh)' barLabel hashurado/>
+          <LineBarChart2 data1={acumulatedGraph} data2={acumulatedGraph} data3={acumulatedGraph}
-        </GraphCard>
+          label={ConsumoEstimado.label} dataset1='Custo' dataset2='Cativo' dataset3='Livre'
-        <GraphCard title='Indicador de Custo' subtitle='Valores em R$/ MWh'>
+          title='Custo Estimado' subtitle='(Valores em R$/MWh)' barLabel hashurado/>
-          <Chart title='Indicador de Custo' subtitle='(Valores em R$/MWh)' data1={dataEconomiaIndicador.data1} data2={dataEconomiaIndicador.data2} label={dataEconomiaIndicador.labels} barLabel/>
         </GraphCard>
 
+        <GraphCard title='Indicador de Custo' subtitle='Valores em R$/ MWh'>
+          <Chart title='Indicador de Custo' subtitle='(Valores em R$/MWh)' data1={dataEconomiaIndicador.data1} data2={dataEconomiaIndicador.data2}
+          label={dataEconomiaIndicador.labels} barLabel/>
+        </GraphCard>
       </section>
 
       <button onClick={() => {
         const id = 1
-        console.log(recoverUserInformation(id))
       }}></button>
     </DashboardView>
   )
@@ -79,26 +81,36 @@ export default function Dashboard({grossAnualGraph, grossAnualYears, grossMensal
 export const getServerSideProps: GetServerSideProps = async (ctx) => {
   const apiClient = getAPIClient(ctx)
   const { ['@smartAuth-token']: token } = parseCookies(ctx)
+  const { ['user-name']: userName } = parseCookies(ctx)
 
   let grossAnualGraph = [];
   let grossMensalGraph = [];
-
+  let acumulatedGraph = [];
-
+  let mapsInfo = [];
 
   await apiClient.post('/economy/grossAnnual').then(res => {
     grossAnualGraph = res.data.data
-    console.log(grossAnualGraph[0])
   }).catch(res => {
     console.log(res)
   })
 
   await apiClient.post('/economy/grossMonthly').then(res => {
     grossMensalGraph = res.data.data
-
   }).catch(res => {
     console.log(res)
   })
 
+  await apiClient.post('/economy/estimates').then(res => {
+    acumulatedGraph = res.data.data
+  }).catch(res => {
+    console.log(res)
+  })
+
+  await apiClient.post('/pld/overview').then(res => {
+    mapsInfo = res.data.data
+  }).catch(res => {
+    console.log(res)
+  })
 
   const grossMensalYears = grossMensalGraph.map((value) => value.mes)
   const grossAnualYears = grossAnualGraph.map((value) => value.ano)
@@ -112,13 +124,16 @@ export const getServerSideProps: GetServerSideProps = async (ctx) => {
     }
   }
 
-
   return {
     props: {
       grossAnualGraph,
       grossAnualYears,
       grossMensalYears,
       grossMensalGraph,
+      acumulatedGraph,
+      mapsInfo,
+
+      userName
     }
   }
 }

src/pages/estimatedCost.tsx

@@ -1,4 +1,6 @@
+import { GetServerSideProps } from 'next'
 import Head from 'next/head'
+import { parseCookies } from 'nookies'
 import React from 'react'
 
 import Chart from '../components/graph/Chart'
@@ -7,19 +9,53 @@ import { LineBarChart2 } from '../components/graph/LineBarChart2'
 import Header from '../components/header/Header'
 import PageTitle from '../components/pageTitle/PageTitle'
 import { ConsumoEstimado } from '../services/consumoEstimado'
+import getAPIClient from '../services/ssrApi'
 import { EstimatedCostView } from '../styles/layouts/economy/estimatedCost/EstimatedCostView'
 
-export default function EstimatedCost() {
+export default function EstimatedCost({graphData, userName}: any) {
   return (
     <EstimatedCostView>
       <Head>
         <title>Smart Energia - Custos Estimados</title>
       </Head>
-      <Header name='' />
+      <Header name={userName} />
       <PageTitle title='Cativo x Livre mensal' subtitle='Comparativo de Custo Estimado' />
       <section>
-        <LineBarChart2 data1={ConsumoEstimado.data2} data2={ConsumoEstimado.data} data3={ConsumoEstimado.data1} dataset1="Economia (R$)" dataset2='Cativo' dataset3='Livre' label={ConsumoEstimado.label} title='Custo Estimado' subtitle='' barLabel hashurado />
+        <LineBarChart2 data1={graphData} data2={graphData} data3={graphData}
+        dataset1="Economia (R$)" dataset2='Cativo' dataset3='Livre'
+        label={ConsumoEstimado.label} title='Custo Estimado' subtitle='' barLabel hashurado />
       </section>
     </EstimatedCostView>
   )
 }
+
+export const getServerSideProps: GetServerSideProps = async (ctx) => {
+  const apiClient = getAPIClient(ctx)
+  const { ['@smartAuth-token']: token } = parseCookies(ctx)
+  const { ['user-name']: userName } = parseCookies(ctx)
+
+  let graphData = [];
+
+  await apiClient.post('/economy/estimates').then(res => {
+    graphData = res.data.data
+    console.log(graphData)
+  }).catch(res => {
+    console.log(res)
+  })
+
+  if (!token) {
+    return {
+      redirect: {
+        destination: '/',
+        permanent: false
+      }
+    }
+  }
+
+  return {
+    props: {
+      graphData,
+      userName
+    }
+  }
+}

src/pages/faq.tsx

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

src/pages/grossSavings.tsx

@@ -13,7 +13,7 @@ import getAPIClient from '../services/ssrApi'
 import { GrossSavingsView } from '../styles/layouts/economy/grossSavings/GrossSavings'
 
 function addMissingMonths(data) {
-  console.log(data[0].mes.slice(1, 1))
+  // console.log(data[0].mes.slice(1, 1))
 }
 
 function verifyDataByYear(data) {
@@ -24,13 +24,13 @@ function verifyDataByYear(data) {
 }
 
 
-export default function GrossSavings({graphData, years}: any) {
+export default function GrossSavings({graphData, years, userName}: any) {
   return (
     <GrossSavingsView>
       <Head>
         <title>Smart Energia - Economia Acumulada</title>
       </Head>
-      <Header name='' />
+      <Header name={userName} />
       <PageTitle title='Economia Bruta' subtitle='Economia Bruta Estimada e Acumulada anual (Valores em R$ mil)' />
       <section>
         <SingleBar title='Economia Bruta' subtitle='(Valores em R$ mil)'
@@ -46,12 +46,13 @@ export default function GrossSavings({graphData, years}: any) {
 export const getServerSideProps: GetServerSideProps = async (ctx) => {
   const apiClient = getAPIClient(ctx)
   const { ['@smartAuth-token']: token } = parseCookies(ctx)
+  const { ['user-name']: userName } = parseCookies(ctx)
 
   let graphData = [];
 
   await apiClient.post('/economy/grossAnnual').then(res => {
     graphData = res.data.data
-    console.log(graphData[0])
+    // console.log(graphData[0])
   }).catch(res => {
     console.log(res)
   })
@@ -72,6 +73,7 @@ export const getServerSideProps: GetServerSideProps = async (ctx) => {
     props: {
       graphData,
       years,
+      userName
     }
   }
 }

src/pages/industryInfo.tsx

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

src/pages/news.tsx

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

src/pages/notifications.tsx

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

src/pages/pld/index.tsx

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

src/pages/resumoOperacao.tsx

@@ -3,8 +3,10 @@ import FormControl from '@mui/material/FormControl';
 import InputLabel from '@mui/material/InputLabel';
 import MenuItem from '@mui/material/MenuItem';
 import Select, { SelectChangeEvent } from '@mui/material/Select';
+import { GetServerSideProps } from 'next';
 import Head from 'next/head';
-import React, { useEffect } from 'react';
+import { parseCookies } from 'nookies';
+import React, { useEffect, useState } from 'react';
 // import Teste from '../files/teste.csv';
 import { CSVDownload, CSVLink } from "react-csv";
 
@@ -12,30 +14,18 @@ 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 { api } from '../services/api';
 // import { dados } from '../services/DadosTabelaResumoOperacao';
 import data from '../services/dados.json'
+import getAPIClient from '../services/ssrApi';
 import { Pagination, TableView } from '../styles/layouts/ResumoOperacao/ResumoOperacaoView';
 
-export default function ResumoOperacao() {
+export default function ResumoOperacao({tableData, userName}: any) {
-  const csvData = [
+  const csvData = tableData;
-    // ["firstname", "lastname", "email"],
-    // ["Ahmed", "Tomi", "ah@smthing.co.com"],
-    // ["Raed", "Labes", "rl@smthing.co.com"],
-    // ["Yezzi", "Min l3b", "ymin@cocococo.com"],
 
-
+  const [month, setMonth] = useState('');
-
+  const [unidade, setUnidade] = useState('');
-      [ "value", "unidade1", "name", "Unidade-1",  "operacao", "Compra", "montante", "130,00", "contraparte", "cOPEL COM I5", "preco", "234,67", "valorNF", "38.257,15" ],
+  const [tableDataState, setTableDataState] = useState<any>([]);
-      [ "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);
@@ -45,20 +35,29 @@ export default function ResumoOperacao() {
   };
 
   useEffect(() => {
-    // console.log(data.unidades)
+    if (unidade!=='' || month!==''){
-    // data.unidades.map((value) => {
+      api.post('/operation', {
-    //   console.log(`olha o valor ${value.name}`)
+        "filters": [
-    // })
+            {"type" : "=", "field": "mes", "value": `${month}/2022`},
-    // console.log(unidade)
+            {"type" : "=", "field": "dados_te.cod_smart_unidade", "value": unidade}
-    console.log(data.unidades.filter((value, index)=> value.value.includes(unidade)))
+          ]
+      }).then(res => {
+        setTableDataState(res.data.data)
+      }).catch(res => {
+        console.log(res)
+      })
+    } else {
+      setTableDataState(tableData)
+    }
+
   }, [month, unidade])
 
-  return(
+  return (
     <TableView>
       <Head>
         <title>Smart Energia - Resumo de Operação</title>
       </Head>
-      <Header name='' />
+      <Header name={userName} />
       <PageTitle title='Resumo de Operaçoes' subtitle='Operações detalhadas' />
 
       <h3>Seletor Mês</h3>
@@ -72,10 +71,10 @@ export default function ResumoOperacao() {
             label="Unidade"
             onChange={handleChangeUnidade}
           >
-            <MenuItem key={1} value={''}></MenuItem>
+            <MenuItem key={1} value={''}>Nenhum</MenuItem>
             {
-              data.unidades.map((value) => {
+              tableData.map((value) => {
-                return <MenuItem key={1} value={value.value}>{value.name}</MenuItem>
+                return <MenuItem key={1} value={value.cod_smart_unidade}>{value.cod_smart_unidade}</MenuItem>
               })
             }
           </Select>
@@ -90,19 +89,19 @@ export default function ResumoOperacao() {
             label="Month"
             onChange={handleChangeMonth}
           >
-            <MenuItem value={15}>Janeiro</MenuItem>
+            <MenuItem value={''}>Nenhum</MenuItem>
-            <MenuItem value={20}>Fevereiro</MenuItem>
+            <MenuItem value={'01'}>Janeiro</MenuItem>
-            <MenuItem value={30}>Março</MenuItem>
+            <MenuItem value={'02'}>Fevereiro</MenuItem>
-            <MenuItem value={30}>Abril</MenuItem>
+            <MenuItem value={'03'}>Março</MenuItem>
-            <MenuItem value={30}>Março</MenuItem>
+            <MenuItem value={'04'}>Abril</MenuItem>
-            <MenuItem value={30}>Maio</MenuItem>
+            <MenuItem value={'05'}>Maio</MenuItem>
-            <MenuItem value={30}>Junho</MenuItem>
+            <MenuItem value={'06'}>Junho</MenuItem>
-            <MenuItem value={30}>Julho</MenuItem>
+            <MenuItem value={'07'}>Julho</MenuItem>
-            <MenuItem value={30}>Agosto</MenuItem>
+            <MenuItem value={'08'}>Agosto</MenuItem>
-            <MenuItem value={30}>Setembro</MenuItem>
+            <MenuItem value={'09'}>Setembro</MenuItem>
-            <MenuItem value={30}>Outubro</MenuItem>
+            <MenuItem value={'10'}>Outubro</MenuItem>
-            <MenuItem value={30}>Novembro</MenuItem>
+            <MenuItem value={'11'}>Novembro</MenuItem>
-            <MenuItem value={30}>Dezembro</MenuItem>
+            <MenuItem value={'12'}>Dezembro</MenuItem>
           </Select>
         </FormControl>
       </div>
@@ -119,26 +118,17 @@ export default function ResumoOperacao() {
         </thead>
         <tbody>
           {
-            data.unidades.filter((value, index)=> value.value.includes(unidade)).map((value, index) => {
+            tableDataState.map((value, index) => {
-              if (index%2===0) {
+              return <>
-                return <tr key={index}>
+                <tr>
-                    <td key={index} className='tg-gceh'>{value.name}</td>
+                  <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-uulg'>{value.operacao}</td>
-                    <td key={index} className='tg-gceh'>{value.montante}</td>
+                  <td key={index} className='tg-gceh'>{value.montante_nf}</td>
-                    <td key={index} className='tg-gceh'>{value.contraparte}</td>
+                  <td key={index} className='tg-gceh'>{value.contraparte}</td>
-                    <td key={index} className='tg-uulg'>{value.preco}</td>
+                  <td key={index} className='tg-uulg'>{value.nf_c_icms}</td>
-                    <td key={index} className='tg-gceh'>{value.valorNF}</td>
+                  <td key={index} className='tg-gceh'>{value.preco_nf}</td>
-                  </tr>
+                </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>
@@ -152,3 +142,39 @@ export default function ResumoOperacao() {
     </TableView>
   )
 }
+
+export const getServerSideProps: GetServerSideProps = async (ctx) => {
+  const apiClient = getAPIClient(ctx)
+  const { ['@smartAuth-token']: token } = parseCookies(ctx)
+  const { ['user-id']: id } = parseCookies(ctx)
+  const { ['user-name']: userName } = parseCookies(ctx)
+
+  let tableData = [];
+
+  await apiClient.post('/operation', {
+    "filters": []
+  }).then(res => {
+    console.log(res.data.data)
+    tableData = res.data.data
+  }).catch(res => {
+    console.log(res)
+  })
+
+  console.log(tableData)
+
+  if (!token) {
+    return {
+      redirect: {
+        destination: '/',
+        permanent: false
+      }
+    }
+  }
+
+  return {
+    props: {
+      tableData,
+      userName
+    }
+  }
+}

src/pages/telemetria.tsx

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

src/styles/layouts/pld/PldView.ts

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