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

src/components/administrativeTables/ClientsTable.tsx

@@ -10,16 +10,23 @@ import TablePagination from '@mui/material/TablePagination';
 import TableRow from '@mui/material/TableRow';
 import TableSortLabel from '@mui/material/TableSortLabel';
 import { visuallyHidden } from '@mui/utils';
-import React, { useState, useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
+
+import Image from 'next/image';
 
-import Snackbar from '@mui/material/Snackbar';
 import MuiAlert, { AlertProps } from '@mui/material/Alert';
+import Snackbar from '@mui/material/Snackbar';
 
 import Modal from '@mui/material/Modal';
 
+import { FormControl, InputLabel, MenuItem, Select, TextField, Typography } from '@mui/material';
+import FormData from 'form-data';
+import { InputUploadView } from '../inputUploadImg/inputUploadView';
 
-import { TableView, StyledStatus } from './TableView';
 import { api } from '../../services/api';
+import FaqButton1 from '../buttons/faqButton/FaqButton1';
+import FaqButton2 from '../buttons/faqButton/FaqButton2';
+import { StyledStatus, TableView } from './TableView';
 
 const style = {
   position: 'absolute' as const,
@@ -100,19 +107,19 @@ const headCells: readonly HeadCell[] = [
   },
   {
     id: 'name',
-    numeric: true,
+    numeric: false,
     disablePadding: false,
     label: 'name',
   },
   {
     id: 'unity',
-    numeric: true,
+    numeric: false,
     disablePadding: false,
     label: 'unity',
   },
   {
     id: 'status',
-    numeric: true,
+    numeric: false,
     disablePadding: false,
     label: 'status',
   },
@@ -182,7 +189,7 @@ interface ClientsTableInterface {
 
 export default function ClientTable({ clients, onChange }: ClientsTableInterface) {
   const [order, setOrder] = useState<Order>('asc');
-  const [orderBy, setOrderBy] = useState<keyof Data | string>('status');
+  const [orderBy, setOrderBy] = useState<keyof Data | string>('asc');
   const [selected, setSelected] = useState<readonly string[]>([]);
   const [page, setPage] = useState<number>(0);
   const [dense, setDense] = useState<boolean>(false);
@@ -195,7 +202,6 @@ export default function ClientTable({clients, onChange}: ClientsTableInterface)
   const handleOpen = () => setOpen(true);
   const handleClose = () => setOpen(false);
 
-  const [cod_client, setCod_client] = useState()
   const [units, setUnits] = useState([])
 
   function getClientUnits(client_id: number) {
@@ -276,6 +282,60 @@ export default function ClientTable({clients, onChange}: ClientsTableInterface)
   const emptyRows =
     page > 0 ? Math.max(0, (1 + page) * rowsPerPage - clients.length) : 0;
 
+  const formData = new FormData()
+
+  const [clientEdit, setClientEdit] = useState<any>({})
+  const [logo, setLogo] = useState(false)
+  const [imageURLS, setImageURLs] = useState([])
+  const [images, setImages] = useState([] as any)
+  const [nivelAcess, setnivelAcess] = useState<any>(2);
+  const [openEditUserModal, setOpenEditUserModal] = useState<any>(false);
+
+  const [selectedClient, setSelectedClient] = useState<any>(2);
+  const [search, setSearch] = useState('')
+
+  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])
+  }
+
+  const [openSnackSuccess, setOpenSnackSuccess] = useState<boolean>(false)
+
+  function handleUpdateClient({
+    name,
+    email,
+    password,
+    password_confirmation,
+    client_id
+  }, 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.put(`/user/${id}`, formData)
+      .then((res) => {
+        setOpenSnackSuccess(true)
+        setOpenModalInativar(false)
+        // window.location.reload()
+      })
+      .catch((res) => {
+        setOpenSnackError(true)
+      })
+  }
+
   return (
     <TableView>
       <Snackbar open={openSnackError} autoHideDuration={4000} onClose={handleCloseSnack}>
@@ -283,6 +343,7 @@ export default function ClientTable({clients, onChange}: ClientsTableInterface)
           Não foi possivel encontrar unidades do client!
         </Alert>
       </Snackbar>
+      <TextField onChange={(e) => setSearch(e.target.value)} placeholder='persquisar por nome:' />
       <Paper sx={{ width: '100%', mb: 2 }}>
         <TableContainer>
           <Table
@@ -300,6 +361,7 @@ export default function ClientTable({clients, onChange}: ClientsTableInterface)
             />
             <TableBody>
               {stableSort(clients, getComparator(order, orderBy))
+                .filter(client => client.name.toLowerCase().includes(search.toLowerCase()))
                 .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
                 .map((row, index) => {
                   const isItemSelected = isSelected(row.id);
@@ -332,10 +394,15 @@ export default function ClientTable({clients, onChange}: ClientsTableInterface)
                       >
                         Client - {row.client_id}
                       </TableCell>
-                      <TableCell align="left">{row.name}</TableCell>
+                      <TableCell align="left" style={{ cursor: 'pointer' }} onClick={() => {
+                        setOpenEditUserModal(true)
+                        setSelectedClient(row)
+                        setClientEdit(row)
+                      }}>{row.name}</TableCell>
                       <TableCell align="left" style={{ cursor: 'pointer' }} onClick={() => {
                         setOpen(true)
                         getClientUnits(row.client_id)
+                        setSelectedClient(row)
                       }}>clique aqui para ver as unidades</TableCell>
                       <TableCell align="left"><StyledStatus status={row.deleted_at ? 'inativo' : 'ativo'}> {row.deleted_at ? 'inativo' : 'ativo'}</StyledStatus></TableCell>
                     </TableRow>
@@ -363,6 +430,143 @@ export default function ClientTable({clients, onChange}: ClientsTableInterface)
           onRowsPerPageChange={handleChangeRowsPerPage}
         />
       </Paper>
+      <Modal
+        open={openEditUserModal}
+        onClose={() => setOpenEditUserModal(false)}
+        aria-labelledby="modal-modal-title"
+        aria-describedby="modal-modal-description"
+      >
+        <Box sx={style}>
+          <h1>Editar Cliente - {selectedClient.name}</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) => {
+              setClientEdit({
+                ...clientEdit,
+                name: value.target.value
+              })
+            }}
+            variant="outlined"
+          />
+          <TextField
+            id="outlined-basic"
+            label="E-mail/Usuário"
+            value={clientEdit.email}
+            sx={{ width: 350, ml: 8 }}
+            onChange={(value) => {
+              setClientEdit({
+                ...clientEdit,
+                email: value.target.value.toLowerCase()
+              })
+            }}
+            variant="outlined"
+          />
+          <TextField
+            id="outlined-basic"
+            label="Senha"
+            sx={{ width: 350, ml: 5, mt: 2 }}
+            onChange={(value) => {
+              setClientEdit({
+                ...clientEdit,
+                password: value.target.value
+              })
+            }}
+            variant="outlined"
+          />
+          <TextField
+            id="outlined-basic"
+            label="Confirma Senha"
+            sx={{ width: 350, ml: 8, mt: 2 }}
+            onChange={(value) => {
+              setClientEdit({
+                ...clientEdit,
+                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) => {
+              setClientEdit({
+                ...clientEdit,
+                client_id: value.target.value
+              })
+            }}
+            variant="outlined"
+          />
+          <InputUploadView>
+            <div className="imgContainer">
+              <article>
+                {imageURLS.map((imageSrc, index) => {
+                  return <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='select'>
+
+            <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>
+
+              </Select>
+            </FormControl>
+          </div>
+
+          <FaqButton1 title="Cancelar" onClick={() => setOpenEditUserModal(false)} />
+          <FaqButton2
+            title="Salvar"
+            onClick={() => handleUpdateClient(clientEdit, selectedClient.id)}
+          />
+        </Box>
+      </Modal>
+
       <Modal
         open={open}
         onClose={handleClose}

src/components/graph/costIndicatorChart/index.tsx

@@ -1,21 +1,20 @@
-import React from 'react'
 
-import { draw } from 'patternomaly'
+import { draw } from 'patternomaly';
 
-import { Bar } from 'react-chartjs-2';
 import {
-  Chart as ChartJS,
-  CategoryScale,
-  LinearScale,
   BarElement,
+  CategoryScale,
+  Chart as ChartJS,
+  Legend,
+  LinearScale,
   Title,
-  Tooltip,
+  Tooltip
-  Legend
+} from 'chart.js';
-} from 'chart.js'
+import { Bar } from 'react-chartjs-2';
 
-import { CostIndicatorChartView } from './CostIndicatorChartView';
 import ChartTitle from '../ChartTitle';
 import { config } from '../config';
+import { CostIndicatorChartView } from './CostIndicatorChartView';
 
 ChartJS.register(
   CategoryScale,
@@ -34,19 +33,22 @@ interface ChartInterface {
   single?: any
   label: any,
   miniature?: boolean | undefined
+  years?: string[]
 }
 
-export default function CostIndicatorChart({ title, data1, data2, label, subtitle, miniature }: ChartInterface) {
+export default function CostIndicatorChart({ title, data1, data2, label, subtitle, miniature, years }: ChartInterface) {
 
   const labels = label;
 
   const options: any = config(miniature)
 
+  console.log(new Date().getFullYear())
+
   const data = {
     labels,
     datasets: [
       {
-        label: '2021',
+        label: years[0],
         data: data1?.map(value => value),
         skipNull: data2?.map(value => value)?.includes(null),
         borderRadius: 8,
@@ -64,7 +66,7 @@ export default function CostIndicatorChart({ title, data1, data2, label, subtitl
         },
       },
       {
-        label: '2022',
+        label: years[1],
         data: data2?.map(value => value),
         skipNull: data1?.map(value => value)?.includes(null),
         borderRadius: 8,

src/components/graph/grossAnualChart/GrossAnualChart.tsx

@@ -1,12 +1,11 @@
 import { BarElement, CategoryScale, Chart as ChartJS, Legend, LinearScale, Title, Tooltip } from 'chart.js';
 import ChartDataLabels from 'chartjs-plugin-datalabels';
-import { draw } from 'patternomaly'
-import React, { useEffect } from 'react';
-import { Chart } from 'react-chartjs-2';
 import 'chartjs-plugin-style';
+import { draw } from 'patternomaly';
+import { Chart } from 'react-chartjs-2';
 
-import { GrossAnualChartView } from './GrossAnualChartView';
 import ChartTitle from '../ChartTitle';
+import { GrossAnualChartView } from './GrossAnualChartView';
 
 ChartJS.register(
   CategoryScale,
@@ -106,7 +105,7 @@ export function GrossAnualChart({ title, subtitle, dataProps=[], label, dataset,
     },
   };
 
-  const labels: string[] = label.filter(function(item, pos) {
+  const labels: string[] = label.filter((item, pos) => {
     return label.indexOf(item) == pos;
   });
 
@@ -141,11 +140,8 @@ export function GrossAnualChart({ title, subtitle, dataProps=[], label, dataset,
             return 0
           })
         },
-        data: [null].concat(dataProps.filter(value => value.dad_estimado === true).map((value, index) => {
+        data: [].concat(dataProps.filter(value => value.dad_estimado === true).slice(0, 7).map((value, index) => {
-          if (value.dad_estimado)
+          return parseFloat(value?.economia_acumulada)
-            return parseFloat(value.economia_acumulada)
-          else
-            return 0
         })),
         borderRadius: 10,
         backgroundColor: draw('diagonal-right-left', '#C2d5fb'),

src/components/graph/grossMensalChart/GrossMensalChart.tsx

@@ -1,65 +1,120 @@
-import React, { useEffect, useState } from 'react'
+import { useEffect, useState } from 'react'
 
-import { Bar, Line, Chart as ChartJs } from 'react-chartjs-2';
 import {
-  Chart as ChartJS,
+  BarElement, CategoryScale, Chart as ChartJS, Legend, LinearScale, Title,
-  CategoryScale,
+  Tooltip
-  LinearScale,
-  BarElement,
-  Title,
-  Tooltip,
-  Legend
 } from 'chart.js'
+import { Chart as ChartJs } from 'react-chartjs-2'
 
-import document from 'next/document';
 
-import { draw, generate } from 'patternomaly'
+import { draw } from 'patternomaly'
 
-import { GrossMensalChartView } from './GrossMensalChartView';
+import ChartTitle from '../ChartTitle'
-import ChartTitle from '../ChartTitle';
+import { GrossMensalChartView } from './GrossMensalChartView'
-import { config } from '../config';
 // import { data } from './LineBarChart';
 
-ChartJS.register(
+ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend)
-  CategoryScale,
-  LinearScale,
-  BarElement,
-  Title,
-  Tooltip,
-  Legend
-)
 
 interface ChartInterface {
-  title: string,
+  title: string
-  subtitle: string,
+  subtitle: string
 
-  data1: any,
+  data1: any
-  data2: any,
+  data2: any
 
   single?: any
-  label: any,
+  label: any
 
   miniature?: boolean | undefined
 }
 
-export default function GrossMensalChart({ title, data1, data2, label, subtitle, miniature }: ChartInterface) {
+export default function GrossMensalChart({
-  function spacement(string) {
+  title,
-    const spaces = string.length===1?'' : string.length===2? '' : string.length===3? ' ' : string.length===4? '  ' : string.length===5? '   ' : ''
+  data1,
-    return spaces
+  data2,
-  }
+  label,
-
+  subtitle,
+  miniature
+}: ChartInterface) {
   const [lastDataS, setLastData] = useState('')
   useEffect(() => {
     let lastData = '0'
     let index = 0
     while (index < data1.length) {
-      data1[index].dad_estimado? lastData=data1[index].economia_acumulada : null
+      data1[index].dad_estimado
+        ? (lastData = data1[index].economia_acumulada)
+        : null
       index++
-      setLastData(`economia acumulada: R$ ${parseFloat(lastData).toLocaleString('pt-br', {minimumFractionDigits: 2})}`)
+      setLastData(
+        `economia acumulada: R$ ${parseFloat(lastData).toLocaleString('pt-br', {
+          minimumFractionDigits: 2
+        })}`
+      )
     }
   }, [data1])
 
-  const options: any = config(miniature)
+  const options: any = {
+    responsive: true,
+    scales: {
+      x: {
+        stacked: true,
+        grid: {
+          display: false
+        },
+        ticks: {
+          font: {
+            size: !miniature ? window.innerWidth / 90 : window.innerWidth / 125
+          }
+        }
+      },
+      y: {
+        stacked: true,
+        grid: {
+          display: false
+        },
+        ticks: {
+          font: {
+            size: !miniature ? window.innerWidth / 90 : window.innerWidth / 125
+          }
+        }
+      }
+    },
+    plugins: {
+      datalabels: {
+        display: true,
+        color: '#255488',
+        formatter: (value, ctx) => {
+          let sum = 0
+          const dataArr = ctx.chart.data.datasets[0].data
+          const percentage =
+            (data1[ctx?.dataIndex]?.econ_percentual * 100).toFixed(0) + '%'
+
+          console.log(percentage)
+          dataArr.map((data) => {
+            sum += data
+          })
+          const result = `${percentage}\n${parseFloat(
+            parseFloat(value).toLocaleString('pt-br')
+          )}`
+
+          return value == null ? null : result
+        },
+        anchor: 'end',
+        align: 'end',
+        font: {
+          weight: 'bold',
+          size: !miniature ? window.innerWidth / 80 : window.innerWidth / 125
+        }
+      },
+      legend: {
+        position: 'bottom' as const
+      },
+      title: {
+        display: true,
+        text: ''
+      }
+    }
+  }
 
   const data: any = {
     labels: label,
@@ -67,7 +122,9 @@ export default function GrossMensalChart({ title, data1, data2, label, subtitle,
       {
         type: 'bar',
         label: 'Consolidado',
-        data: data1.map(value => !value.dad_estimado? value?.economia_acumulada : null),
+        data: data1.map((value) =>
+          !value.dad_estimado ? value?.economia_acumulada : null
+        ),
         skipNull: true,
         borderRadius: 8,
         backgroundColor: '#255488',
@@ -76,21 +133,21 @@ export default function GrossMensalChart({ title, data1, data2, label, subtitle,
       {
         type: 'bar',
         label: 'Estimado',
-        data: data2.map(value => value.dad_estimado? value?.economia_acumulada : null),
+        data: data2.map((value) =>
+          value.dad_estimado ? value?.economia_acumulada : null
+        ),
         skipNull: true,
         borderRadius: 8,
         backgroundColor: draw('diagonal-right-left', '#C2d5fb'),
         stack: '0'
-      },
+      }
-    ],
+    ]
   }
 
   return (
     <GrossMensalChartView>
       <ChartTitle title={title} subtitle={subtitle} />
-      <ChartJs
+      <ChartJs options={options} data={data} type={'bar'} height={'156'} />
-        options={options}
-        data={data} type={'bar'} height={'156'}/>
     </GrossMensalChartView>
   )
 }

src/pages/administrative/clients/index.tsx

@@ -1,29 +1,29 @@
+import MuiAlert, { AlertProps } from '@mui/material/Alert'
 import Box from '@mui/material/Box'
 import Modal from '@mui/material/Modal'
+import Snackbar from '@mui/material/Snackbar'
 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 React, { useEffect, useState } from 'react'
-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 Header from '../../../components/header/Header'
 
-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 { parseCookies } from 'nookies'
+import ConfirmModal from '../../../components/modal/ConfirmModal'
+import PageTitle from '../../../components/pageTitle/PageTitle'
+import { api } from '../../../services/api'
 import getAPIClient from '../../../services/ssrApi'
+import { ClientsView } from '../../../styles/layouts/clients/ClientsView'
+import { ConfirmModalView } from '../../../styles/layouts/modals/confirmModalView'
 
+import { FormControl, InputLabel, MenuItem, Select } from '@mui/material'
 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,
@@ -70,6 +70,7 @@ export default function clients({ clients, userName }) {
   const [nivelAcess, setnivelAcess] = useState<any>(2);
   const [openSnackSuccess, setOpenSnackSuccess] = useState<boolean>(false)
   const [openSnackError, setOpenSnackError] = useState<boolean>(false)
+  const [openSnackWarning, setOpenSnackWarning] = useState<boolean>(false)
   const [openSnackSuccessDelete, setOpenSnackSuccessDelete] =
     useState<boolean>(false)
   const [openSnackErrorDelete, setOpenSnackErrorDelete] =
@@ -114,6 +115,9 @@ export default function clients({ clients, userName }) {
     formData.append('profile_picture', logo)
     formData.append('role', nivelAcess)
 
+    if (!name.length || !email.length || !password.length || !password_confirmation.length || !client_id.length || !logo || !nivelAcess.length)
+      setOpenSnackWarning(true)
+
     api.post('/user', formData)
       .then((res) => {
         setOpenSnackSuccess(true)
@@ -152,6 +156,7 @@ export default function clients({ clients, userName }) {
     setLogo(e.target.files[0])
   }
 
+
   return (
     <div style={{ display: 'flex', flexDirection: 'column', width: '100%' }}>
       <Snackbar
@@ -180,6 +185,19 @@ export default function clients({ clients, userName }) {
           Cliente não cadastrado!
         </Alert>
       </Snackbar>
+      <Snackbar
+        open={openSnackWarning}
+        autoHideDuration={4000}
+        onClose={handleCloseSnack}
+      >
+        <Alert
+          onClose={handleCloseSnack}
+          severity="warning"
+          sx={{ width: '100%' }}
+        >
+          Preencha todos os campos!
+        </Alert>
+      </Snackbar>
 
       <Snackbar
         open={openSnackSuccessDelete}
@@ -339,7 +357,6 @@ export default function clients({ clients, userName }) {
             </div>
           </InputUploadView>
 
-
           <div className='select'>
 
             <FormControl sx={{ width: 350, ml: 5, mt: 2 }}>

src/pages/dashboard/index.tsx

@@ -1,31 +1,28 @@
-import React, { useEffect, useState } from 'react'
+import { useEffect, useState } from 'react'
 
 import { DashboardView } from '../../styles/layouts/dashboard/DashboardView'
 
-import MapCard from '../../components/mapCard/MapCard'
+import Link from 'next/link'
 import GraphCard from '../../components/graph/graphCard/ChartCard'
 import Header from '../../components/header/Header'
+import MapCard from '../../components/mapCard/MapCard'
 import PageTitle from '../../components/pageTitle/PageTitle'
-import Link from 'next/link'
 
-import { parseCookies, setCookie } from 'nookies'
-import { GetServerSideProps } from 'next'
-import getAPIClient from '../../services/ssrApi'
-import { GrossAnualChart } from '../../components/graph/grossAnualChart/GrossAnualChart'
-import CostIndicatorChart from '../../components/graph/costIndicatorChart'
-import { CativoXLivreChart } from '../../components/graph/cativoXLivreChart'
-import GrossMensalChart from '../../components/graph/grossMensalChart/GrossMensalChart'
-import Head from 'next/head'
-import AccumulatedEconomyTitle from '../../components/accumulatedEconomyTitle/AccumulatedEconomyTitle'
 import { format } from 'date-fns'
+import { GetServerSideProps } from 'next'
+import Head from 'next/head'
+import { parseCookies, setCookie } from 'nookies'
+import AccumulatedEconomyTitle from '../../components/accumulatedEconomyTitle/AccumulatedEconomyTitle'
+import { CativoXLivreChart } from '../../components/graph/cativoXLivreChart'
+import CostIndicatorChart from '../../components/graph/costIndicatorChart'
+import { GrossAnualChart } from '../../components/graph/grossAnualChart/GrossAnualChart'
+import GrossMensalChart from '../../components/graph/grossMensalChart/GrossMensalChart'
+import getAPIClient from '../../services/ssrApi'
 
-import Box from '@mui/material/Box';
+import Box from '@mui/material/Box'
-import Button from '@mui/material/Button';
+import Modal from '@mui/material/Modal'
-import Typography from '@mui/material/Typography';
+import Typography from '@mui/material/Typography'
-import Modal from '@mui/material/Modal';
-import RenderIf from '../../utils/renderIf'
 import BasicButton from '../../components/buttons/basicButton/BasicButton'
-import ConfirmModal from '../../components/modal/ConfirmModal'
 
 const style = {
   position: 'absolute' as const,
@@ -39,7 +36,9 @@ const style = {
   boxShadow: 24,
   p: 4,
 
-  borderRadius: 3
+  borderRadius: 3,
+
+  overflow: 'scroll'
 };
 
 export default function Dashboard({ grossAnualGraph, grossAnualYears, grossMensalGraph, grossMensalYears, acumulatedGraph, mapsInfo, userName, costIndicator }: any) {
@@ -60,6 +59,9 @@ export default function Dashboard({grossAnualGraph, grossAnualYears, grossMensal
 
   const { ['terms']: terms } = parseCookies()
 
+  const currentYear = new Date().getUTCFullYear()
+  const previousYear = new Date().getUTCFullYear() - 1
+
   const [lastDataBrutaMensalS, setLastDataBrutaMensal] = useState('')
   const [lastDataBrutaAnualS, setLastDataBrutaAnual] = useState('')
 
@@ -137,8 +139,10 @@ export default function Dashboard({grossAnualGraph, grossAnualYears, grossMensal
 
               <GraphCard title='Indicador de Custo' subtitle='Indicador de Custo - Valores em R$/MWh'>
                 <CostIndicatorChart title='' subtitle=''
-                data1={costIndicator?.filter((value, index) => value?.mes.slice(0, 4).includes('2021')).map(value => value?.custo_unit && !!parseInt(value?.custo_unit)? value.custo_unit : null)}
+                  data1={costIndicator?.filter((value, index) => value?.mes.slice(0, 4).includes(costIndicator[0].mes.slice(0, 4))).map(value => value?.custo_unit && !!parseInt(value?.custo_unit) ? value.custo_unit : null)}
-                data2={costIndicator?.filter((value, index) => value?.mes.slice(0, 4).includes('2022')).map(value => value?.custo_unit && !!parseInt(value?.custo_unit)? value.custo_unit : null)}
+                  data2={costIndicator?.filter((value, index) => value?.mes.slice(0, 4).includes(costIndicator[costIndicator.length - 1].mes.slice(0, 4))).map(value => value?.custo_unit && !!parseInt(value?.custo_unit) ? value.custo_unit : null)}
+                  // years={[costIndicator[0].mes.slice(0, 4), costIndicator[costIndicator.length - 1].mes.slice(0, 4)]}
+                  years={[previousYear, currentYear]}
                   label={months}
                   miniature
                 />
@@ -153,8 +157,45 @@ export default function Dashboard({grossAnualGraph, grossAnualYears, grossMensal
                 <Typography id="modal-modal-title" variant="h6" component="h2">
                   Termos de uso
                 </Typography>
+                <img src='assets/smart-energia-terms-image.png' style={{ maxWidth: '100%' }} />
                 <Typography id="modal-modal-description" sx={{ mt: 2 }}>
                   <p>
+                    Bem-vindo ao Smart Energy View, a Plataforma Web da SMART ENERGIA!
+                  </p>
+
+                  <p>
+                    Agora você terá a Gestão da sua Energia na palma da sua mão!!!!
+                  </p>
+
+                  <p>
+                    Visualize os principais indicadores, dados de economia, resumo de operações, PLD, notícias além de acompanhar o consumo de energia em intervalos mínimos de 5 minutos.
+                  </p>
+
+                  <p>
+                    Estamos na última fase de testes da plataforma e em breve também iremos disponibilizar os aplicativos para seu celular, nos sistemas operacionais IOS e Android.
+                  </p>
+
+                  <p>
+                    Encontrando qualquer dificuldade, eventuais inconsistências ou dúvidas, nos contate!
+                  </p>
+
+                  <p>
+                    Lembrando que conforme nosso contrato de serviços vigente, todas as informações entregues são estritamente privadas, sendo seu sigilo protegido por lei, não podendo ser compartilhadas com terceiros sendo destinadas a seu uso exclusivo.
+                  </p>
+
+                  <p>
+                    A divulgação não autorizada das informações adquiridas nesta plataforma (ou seu uso), de forma integral ou parcial, é proibida, não sendo permitido o compartilhamento dos acessos e senhas ou qualquer informação que tiver acesso junto a esta plataforma, sendo que o acesso a esta plataforma é restrito e individual.
+                  </p>
+
+                  <p>
+                    Destacamos que os resultados informados são meramente indicativos, não vinculantes a resultados e que as premissas disponibilizadas na plataforma são as mesmas utilizadas nos Energys Reports e estudos encaminhados.
+                  </p>
+
+
+                  <p>
+                    <strong>Aproveite essa nova ferramenta de acompanhar sua Gestão de Energia!</strong>
+                  </p>
+                  {/* <p>
                             Bem-vindo a Plataforma Web – SMART ENERGIA!
                           </p>
                           <p>
@@ -168,7 +209,7 @@ export default function Dashboard({grossAnualGraph, grossAnualYears, grossMensal
                           </p>
                           <p>
                             Ressaltamos que os resultados informados são meramente indicativos.
-                </p>
+                          </p> */}
                   <BasicButton title="Aceito os termos" onClick={() => {
                     setCookie(undefined, 'terms', 'true')
                     setOpen(false)
@@ -195,9 +236,9 @@ export const getServerSideProps: GetServerSideProps = async (ctx) => {
 
   await apiClient.post('/economy/grossAnnual').then(res => {
     grossAnualGraph = res.data.data
-  }).catch(res => {
-    // console.log(res)
   })
+    .then(console.log)
+    .catch(console.log)
 
   await apiClient.post('/economy/grossMonthly').then(res => {
     grossMensalGraph = res.data.data

src/pages/economy/index.tsx

@@ -5,25 +5,25 @@ import Select from '@mui/material/Select';
 import { GetServerSideProps } from 'next';
 import Head from 'next/head';
 import { parseCookies } from 'nookies';
-import React, { useContext, useEffect, useState } from 'react'
+import { useContext, useEffect, useState } from 'react';
 
-import Header from '../../components/header/Header'
+import Header from '../../components/header/Header';
 import PageTitle from '../../components/pageTitle/PageTitle';
 import { api } from '../../services/api';
 import getAPIClient from '../../services/ssrApi';
-import { TableHeader } from '../../styles/layouts/pld/PldView'
+import { TableHeader } from '../../styles/layouts/pld/PldView';
-import RenderIf from '../../utils/renderIf'
+import RenderIf from '../../utils/renderIf';
 
-import Tabs from '@mui/material/Tabs';
 import Tab from '@mui/material/Tab';
+import Tabs from '@mui/material/Tabs';
 
-import { MenuContext } from '../../contexts/menu/MenuContext';
+import AccumulatedEconomyTitle from '../../components/accumulatedEconomyTitle/AccumulatedEconomyTitle';
-import { GrossAnualChart } from '../../components/graph/grossAnualChart/GrossAnualChart';
-import GrossMensalChart from '../../components/graph/grossMensalChart/GrossMensalChart';
 import { CativoXLivreChart } from '../../components/graph/cativoXLivreChart';
 import CostIndicatorChart from '../../components/graph/costIndicatorChart';
+import { GrossAnualChart } from '../../components/graph/grossAnualChart/GrossAnualChart';
+import GrossMensalChart from '../../components/graph/grossMensalChart/GrossMensalChart';
+import { MenuContext } from '../../contexts/menu/MenuContext';
 import { EconomyView } from '../../styles/layouts/economy/economy';
-import AccumulatedEconomyTitle from '../../components/accumulatedEconomyTitle/AccumulatedEconomyTitle';
 
 export default function economy({ userName, anual, years, brutaMensal, catLiv, clients, indicatorCost }: any) {
   const { economyMenu, setEconomyMenu } = useContext(MenuContext)
@@ -70,6 +70,9 @@ export default function economy({userName, anual, years, brutaMensal, catLiv, cl
     }
     setLastDataBruta(`${parseFloat(lastData).toFixed(3)}`)
   }, [economyMenu])
+  useEffect(() => {
+    console.log(indicatorDataState)
+  }, [indicatorDataState])
 
   async function getChartsWithUnity() {
     await api.post('/economy/estimates', unity !== '' ? {
@@ -208,6 +211,7 @@ export default function economy({userName, anual, years, brutaMensal, catLiv, cl
                   <CostIndicatorChart title='' subtitle=''
                     data1={indicatorDataState?.filter(value => value?.mes.slice(0, 4).includes(previousYear)).map(value => value?.custo_unit && !!parseInt(value?.custo_unit) ? value.custo_unit : null)}
                     data2={indicatorDataState?.filter(value => value?.mes.slice(0, 4).includes(currentYear)).map(value => value?.custo_unit && !!parseInt(value?.custo_unit) ? value.custo_unit : null)}
+                    years={[previousYear, currentYear]}
                     label={months}
                   />
                 </section>

src/pages/pld/index.tsx

@@ -76,7 +76,7 @@ export default function pld({tableData, userName, clientMonth}: pldInterface) {
   function getDataByDay() {
     api.post('/pld/daily', {
       "filters": [
-          {"type" : "=", "field" : "year_month_formatted", "value": month},
+          {"type" : "=", "field" : "year_month_formatted", "value": month, "row": true},
           {"type" : "=", "field" : "submarket", "value": select}
         ],
       "order": [{ "field": "day_calc", "direction": "asc" }]

src/pages/telemetria/index.tsx

@@ -1,39 +1,37 @@
 import React, { useEffect, useState } from 'react';
 
-import Banner from '../../components/banner/Banner';
-import { TelemetriaView, Buttons, TableHeader, ChartFilters} from '../../styles/layouts/Telemetria/TelemetriaView';
-import GradientButton from '../../components/buttons/gradientButton/GradientButton'
-import Header from '../../components/header/Header';
-import MenuItem from '@mui/material/MenuItem';
-import InputLabel from '@mui/material/InputLabel';
 import FormControl from '@mui/material/FormControl';
-import Select, { SelectChangeEvent } from '@mui/material/Select';
+import InputLabel from '@mui/material/InputLabel';
+import MenuItem from '@mui/material/MenuItem';
+import Select from '@mui/material/Select';
 import Head from 'next/head';
+import GradientButton from '../../components/buttons/gradientButton/GradientButton';
+import Header from '../../components/header/Header';
+import { Buttons, ChartFilters, TableHeader, TelemetriaView } from '../../styles/layouts/Telemetria/TelemetriaView';
 
-import RenderIf from '../../utils/renderIf';
+import MuiAlert, { AlertProps } from '@mui/material/Alert';
+import Snackbar from '@mui/material/Snackbar';
 import { GetServerSideProps } from 'next';
 import { parseCookies } from 'nookies';
-import { api } from '../../services/api';
-import Snackbar from '@mui/material/Snackbar'
-import MuiAlert, { AlertProps } from '@mui/material/Alert'
-import getAPIClient from '../../services/ssrApi';
 import { DemRegXDemConChart } from '../../components/graph/DemRegXDemConChart';
+import getAPIClient from '../../services/ssrApi';
+import RenderIf from '../../utils/renderIf';
 
-import Tabs from '@mui/material/Tabs';
 import Tab from '@mui/material/Tab';
+import Tabs from '@mui/material/Tabs';
 
 import TextField from '@mui/material/TextField';
-import { DesktopDatePicker } from '@mui/x-date-pickers/DesktopDatePicker';
 import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
+import { DesktopDatePicker } from '@mui/x-date-pickers/DesktopDatePicker';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { format } from 'date-fns';
 import BasicButton from '../../components/buttons/basicButton/BasicButton';
 import { DiscretizedConsumptionChart } from '../../components/graph/DiscretizedConsumptionChart';
 import FatorPotenciaChart from '../../components/graph/fatorPotenciaChart';
+import PageTitle from '../../components/pageTitle/PageTitle';
+import { getDemand } from '../../services/charts/telemetry/getDemand';
 import { getDiscretization } from '../../services/charts/telemetry/getDiscretization';
 import { getPowerFactorData } from '../../services/charts/telemetry/getPowerFactor';
-import { getDemand } from '../../services/charts/telemetry/getDemand';
-import PageTitle from '../../components/pageTitle/PageTitle';
-import { format } from 'date-fns';
 
 const Alert = React.forwardRef<HTMLDivElement, AlertProps>(function Alert(
   props,
@@ -43,10 +41,11 @@ const Alert = React.forwardRef<HTMLDivElement, AlertProps>(function Alert(
 })
 
 export default function Telemetria({ userName, clients }: any) {
-  const [unity, setUnity] = useState(clients[0].codigo_scde);
+  const [unity, setUnity] = useState(clients[0]?.codigo_scde);
   const [startDate, setStartDate] = useState(new Date());
   const [endDate, setEndDate] = useState(new Date());
-  const [month, setMonth] = useState(new Date().getMonth()+1);
+  const [month, setMonth] = useState(new Date().getMonth());
+  const [endMonth, setEndMonth] = useState(new Date().getMonth() + 1);
   const [discretization, setDiscretization] = useState('1_hora');
 
   const [openSnackSuccess, setOpenSnackSuccess] = useState<boolean>(false)
@@ -281,6 +280,7 @@ export default function Telemetria({userName, clients}: any) {
                   </div>
                   {
                     discretization === '1_mes' ?
+                      <>
                         <FormControl sx={{ minWidth: 120, width: 200, ml: 1, mr: 1 }} size="small">
                           <InputLabel>Discretização</InputLabel>
                           <Select
@@ -291,9 +291,7 @@ export default function Telemetria({userName, clients}: any) {
                             onChange={value => {
                               setMonth(value.target.value as number)
                               const firstOfTheMonth: Date = new Date(startDate.getFullYear(), (value.target.value as number) - 1, 1)
-                        const lastOfTheMonth: Date = new Date(startDate.getFullYear(), firstOfTheMonth.getMonth() + 1, 0)
                               setStartDate(firstOfTheMonth)
-                        setEndDate(lastOfTheMonth)
                             }}
                             sx={{ height: 63, mb: 2 }}
                             fullWidth
@@ -308,6 +306,33 @@ export default function Telemetria({userName, clients}: any) {
                             }
                           </Select>
                         </FormControl>
+                        {discretization === '1_mes' && <FormControl sx={{ minWidth: 120, width: 200, ml: 1, mr: 1 }} size="small">
+                          <InputLabel>Discretização</InputLabel>
+                          <Select
+                            labelId="demo-select-small"
+                            id="demo-select-small"
+                            value={endMonth}
+                            label="Mês"
+                            onChange={value => {
+                              setEndMonth(value.target.value as number)
+                              const firstOfTheMonth: Date = new Date(startDate.getFullYear(), (value.target.value as number) - 1, 1)
+                              const lastOfTheMonth: Date = new Date(startDate.getFullYear(), firstOfTheMonth.getMonth() + 1, 0)
+                              setEndDate(lastOfTheMonth)
+                            }}
+                            sx={{ height: 63, mb: 2 }}
+                            fullWidth
+                          >
+                            <MenuItem value="">
+                              <em>Nenhum</em>
+                            </MenuItem>
+                            {
+                              months.slice(0, new Date().getUTCMonth() + 1).map(value => {
+                                return <MenuItem key={value} value={months.indexOf(value) + 1 as number}>{value}</MenuItem>
+                              })
+                            }
+                          </Select>
+                        </FormControl>}
+                      </>
                       :
                       <LocalizationProvider dateAdapter={AdapterDateFns}>
                         <div className='datePicker'>
@@ -555,18 +580,22 @@ export default function Telemetria({userName, clients}: any) {
               </div>
             </RenderIf>
 
-        <RenderIf isTrue={menu===2}>
             <table className="tg">
               <thead>
                 <tr>
+                  <th className='tg-8oo6'>Unidade</th>
                   <th className='tg-8oo6'>Ponto</th>
                   <th className='tg-8oo6'>Numero do dia</th>
                   <th className='tg-8oo6'>Dia formatado</th>
                   <th className='tg-8oo6'>Hora</th>
+                  <th className='tg-8oo6'>Minuto</th>
                   <th className='tg-8oo6'>f_ref</th>
                   <th className='tg-8oo6'>Consumo</th>
                   <th className='tg-8oo6'>Reativa</th>
                   <th className='tg-8oo6'>fp</th>
+                  <th className='tg-8oo6'>dem contratada</th>
+                  <th className='tg-8oo6'>dem registrada</th>
+                  <th className='tg-8oo6'>dem tolerancia</th>
                 </tr>
               </thead>
               <tbody>
@@ -575,90 +604,19 @@ export default function Telemetria({userName, clients}: any) {
                     fatorPotenciaData?.map((value, index) => {
                       return <>
                         <tr>
-                      <td key={index} className='tg-gceh'>{value.ponto}</td>
+                          <td key={index} className='tg-gceh'>{unity}</td>
-                      <td key={index} className='tg-gceh'>{parseFloat(value.dia_num)}</td>
+                          <td key={index} className='tg-gceh'>{value?.ponto}</td>
-                      <td key={index} className='tg-uulg'>{value.day_formatted}</td>
+                          <td key={index} className='tg-gceh'>{parseFloat(value?.dia_num)}</td>
-                      <td key={index} className='tg-gceh'>{value.hora}</td>
+                          <td key={index} className='tg-uulg'>{value?.day_formatted}</td>
-                      <td key={index} className='tg-gceh'>{value.f_ref}</td>
+                          <td key={index} className='tg-gceh'>{value?.hora}</td>
-                      <td key={index} className='tg-uulg'>{parseFloat(value.consumo).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2})}</td>
-                      <td key={index} className='tg-gceh'>{parseFloat(value.reativa).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2})}</td>
-                      <td key={index} className='tg-gceh'>{parseFloat(value.fp)}</td>
-                    </tr>
-                  </>
-                })
-                :
-                null
-              }
-            </tbody>
-          </table>
-        </RenderIf>
-        <RenderIf isTrue={menu===1}>
-          <table className="tg">
-            <thead>
-              <tr>
-                <th className='tg-8oo6'>Ponto</th>
-                <th className='tg-8oo6'>Numero do dia</th>
-                <th className='tg-8oo6'>Dia formatado</th>
-                <th className='tg-8oo6'>Hora</th>
-                {/* <th className='tg-8oo6'>Minuto</th> não temos */}
-                <th className='tg-8oo6'>Consumo</th>
-                <th className='tg-8oo6'>Reativa</th>
-                <th className='tg-8oo6'>dem contratada</th>
-                <th className='tg-8oo6'>dem registrada</th>
-                <th className='tg-8oo6'>dem tolerancia</th>
-              </tr>
-            </thead>
-            <tbody>
-              {
-                demRegXDemCon!==null?
-                demRegXDemCon?.map((value, index) => {
-                  return <>
-                    <tr>
-                      <td key={index} className='tg-gceh'>{value.ponto}</td>
-                      <td key={index} className='tg-gceh'>{parseFloat(value.dia_num)}</td>
-                      <td key={index} className='tg-uulg'>{value.day_formatted}</td>
-                      <td key={index} className='tg-gceh'>{value.hora}</td>
-                      {/* <td key={index} className='tg-gceh'>{value.minut}</td> */}
-                      <td key={index} className='tg-uulg'>{parseFloat(value.consumo).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2})}</td>
-                      <td key={index} className='tg-gceh'>{parseFloat(value.reativa).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2})}</td>
-                      <td key={index} className='tg-gceh'>{value.dem_cont}</td>
-                      <td key={index} className='tg-gceh'>{value.dem_reg}</td>
-                      <td key={index} className='tg-gceh'>{value.dem_tolerancia}</td>
-                    </tr>
-                  </>
-                })
-                :
-                null
-              }
-            </tbody>
-          </table>
-        </RenderIf>
-        <RenderIf isTrue={menu===0}>
-          <table className="tg">
-            <thead>
-              <tr>
-                <th className='tg-8oo6'>Ponto</th>
-                <th className='tg-8oo6'>Numero do dia</th>
-                <th className='tg-8oo6'>Dia formatado</th>
-                <th className='tg-8oo6'>Hora</th>
-                <th className='tg-8oo6'>Minuto</th>
-                <th className='tg-8oo6'>Consumo</th>
-                <th className='tg-8oo6'>Reativa</th>
-              </tr>
-            </thead>
-            <tbody>
-              {
-                discretizedConsumptionData!==null?
-                discretizedConsumptionData?.map((value, index) => {
-                  return <>
-                    <tr>
-                      <td key={index} className='tg-gceh'>{value.ponto}</td>
-                      <td key={index} className='tg-gceh'>{parseFloat(value.dia_num)}</td>
-                      <td key={index} className='tg-uulg'>{value.day_formatted}</td>
-                      <td key={index} className='tg-gceh'>{value.hora}</td>
                           <td key={index} className='tg-gceh'>{value.minut}</td>
-                      <td key={index} className='tg-uulg'>{parseFloat(value.consumo).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2})}</td>
+                          <td key={index} className='tg-gceh'>{value?.f_ref}</td>
-                      <td key={index} className='tg-gceh'>{parseFloat(value.reativa).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2})}</td>
+                          <td key={index} className='tg-uulg'>{parseFloat(value?.consumo).toLocaleString('pt-br', { style: 'currency', currency: 'BRL', minimumFractionDigits: 2 })}</td>
+                          <td key={index} className='tg-gceh'>{parseFloat(value?.reativa).toLocaleString('pt-br', { style: 'currency', currency: 'BRL', minimumFractionDigits: 2 })}</td>
+                          <td key={index} className='tg-gceh'>{parseFloat(value?.fp)}</td>
+                          <td key={index} className='tg-gceh'>{value?.dem_cont}</td>
+                          <td key={index} className='tg-gceh'>{value?.dem_reg}</td>
+                          <td key={index} className='tg-gceh'>{value?.dem_tolerancia}</td>
                         </tr>
                       </>
                     })
@@ -667,7 +625,6 @@ export default function Telemetria({userName, clients}: any) {
                 }
               </tbody>
             </table>
-        </RenderIf>
 
             <RenderIf isTrue={showChart}>
               <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 />

src/services/ssrApi.ts

@@ -1,5 +1,4 @@
-import axios, { AxiosRequestConfig } from "axios";
+import axios from "axios";
-import * as cookie from 'cookie';
 import * as express from 'express';
 import * as next from 'next';
 import { parseCookies } from "nookies";
@@ -13,7 +12,8 @@ export default function getAPIClient(ctx?: Pick<next.NextPageContext, 'req'> | {
   const { '@smartAuth-token': token } = parseCookies(ctx)
 
   const api = axios.create({
-    baseURL: "https://api.energiasmart.com.br/api",
+    // baseURL: "https://api.energiasmart.com.br/api",
+    baseURL: "https://api.energiasmart.klupp.com.br/api",
   });
 
   api.interceptors.request.use(config => {