Merge branch 'administativePages' into 'dev'

Administative pages

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

src/components/administrativeTables/ClientsTable.tsx

@@ -1,12 +1,6 @@
-import DeleteIcon from '@mui/icons-material/Delete';
-import FilterListIcon from '@mui/icons-material/FilterList';
 import Box from '@mui/material/Box';
 import Checkbox from '@mui/material/Checkbox';
-import FormControlLabel from '@mui/material/FormControlLabel';
-import IconButton from '@mui/material/IconButton';
 import Paper from '@mui/material/Paper';
-import { alpha } from '@mui/material/styles';
-import Switch from '@mui/material/Switch';
 import Table from '@mui/material/Table';
 import TableBody from '@mui/material/TableBody';
 import TableCell from '@mui/material/TableCell';
@@ -15,13 +9,10 @@ import TableHead from '@mui/material/TableHead';
 import TablePagination from '@mui/material/TablePagination';
 import TableRow from '@mui/material/TableRow';
 import TableSortLabel from '@mui/material/TableSortLabel';
-import Toolbar from '@mui/material/Toolbar';
-import Tooltip from '@mui/material/Tooltip';
-import Typography from '@mui/material/Typography';
 import { visuallyHidden } from '@mui/utils';
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 
-import { ClientTableView, StyledStatus } from './ClientsTableView';
+import { TableView, StyledStatus } from './TableView';
 
 interface Data {
   clientCode: number,
@@ -30,29 +21,6 @@ interface Data {
   status: string,
 }
 
-function createData(
-  clientCode: number,
-  name: string,
-  unity: string,
-  status: string,
-): Data {
-  return {
-    clientCode,
-    name,
-    unity,
-    status,
-  };
-}
-
-const rows = [
-  createData(9500130, 'Copel', 'clique para ver unidades', 'ativo'),
-  createData(9500131, 'Copel', 'clique para ver unidades', 'ativo'),
-  createData(9500132, 'Copel', 'clique para ver unidades', 'ativo'),
-  createData(9500689, 'Copel', 'clique para ver unidades', 'pendente'),
-  createData(9500690, 'Copel', 'clique para ver unidades', 'inativo'),
-  createData(9500691, 'Copel', 'clique para ver unidades', 'inativo'),
-];
-
 function descendingComparator<T>(a: T, b: T, orderBy: keyof T) {
   if (b[orderBy] < a[orderBy]) {
     return -1;
@@ -77,7 +45,7 @@ function getComparator<Key extends keyof any>(
     : (a, b) => -descendingComparator(a, b, orderBy);
 }
 
-function stableSort<T>(array: readonly T[], comparator: (a: T, b: T) => number) {
+function stableSort<T>(array: any, comparator: (a: T, b: T) => number) {
   const stabilizedThis = array.map((el, index) => [el, index] as [T, number]);
   stabilizedThis.sort((a, b) => {
     const order = comparator(a[0], b[0]);
@@ -180,7 +148,12 @@ function EnhancedTableHead(props: EnhancedTableProps) {
   );
 }
 
-export default function ClientTable() {
+interface ClientsTableInterface {
+  clients: any,
+  onChange: any
+}
+
+export default function ClientTable({clients, onChange}: ClientsTableInterface) {
   const [order, setOrder] = useState<Order>('asc');
   const [orderBy, setOrderBy] = useState<keyof Data | string>('status');
   const [selected, setSelected] = useState<readonly string[]>([]);
@@ -199,7 +172,7 @@ export default function ClientTable() {
 
   const handleSelectAllClick = (event: React.ChangeEvent<HTMLInputElement>) => {
     if (event.target.checked) {
-      const newSelecteds = rows.map((n) => n.name);
+      const newSelecteds = clients.map((n) => n.name);
       setSelected(newSelecteds);
       return;
     }
@@ -237,12 +210,16 @@ export default function ClientTable() {
 
   const isSelected = (code: any) => selected.indexOf(code.toString()) !== -1;
 
+  useEffect(() => {
+    onChange(selected)
+  }, [selected])
+
   // 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 - clients.length) : 0;
 
   return (
-    <ClientTableView>
+    <TableView>
       <Paper sx={{ width: '100%', mb: 2 }}>
         <TableContainer>
           <Table
@@ -256,23 +233,23 @@ export default function ClientTable() {
               orderBy={orderBy}
               onSelectAllClick={handleSelectAllClick}
               onRequestSort={handleRequestSort}
-              rowCount={rows.length}
+              rowCount={clients.length}
             />
             <TableBody>
-              {stableSort(rows, getComparator(order, orderBy))
+              {stableSort(clients, getComparator(order, orderBy))
                 .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
                 .map((row, index) => {
-                  const isItemSelected = isSelected(row.clientCode);
+                  const isItemSelected = isSelected(row.id);
                   const labelId = `enhanced-table-checkbox-${index}`;
 
                   return (
                     <TableRow
                       hover
-                      onClick={(event) => handleClick(event, row.clientCode.toString())}
+                      onClick={(event) => handleClick(event, row.id.toString())}
                       role="checkbox"
                       aria-checked={isItemSelected}
                       tabIndex={-1}
-                      key={row.clientCode}
+                      key={row.id}
                       selected={isItemSelected}
                     >
                       <TableCell padding="checkbox">
@@ -290,11 +267,11 @@ export default function ClientTable() {
                         scope="row"
                         padding="none"
                       >
-                        Unidade - {row.clientCode}
+                        Client - {row.client_id}
                       </TableCell>
                       <TableCell align="left">{row.name}</TableCell>
-                      <TableCell align="left">{row.unity}button</TableCell>
+                      <TableCell align="left">clique aqui para ver as unidades</TableCell>
-                      <TableCell align="left"><StyledStatus status={row.status}>{row.status}</StyledStatus></TableCell>
+                      <TableCell align="left"><StyledStatus status={row.deleted_at? 'inativo' : 'ativo'}> {row.deleted_at? 'inativo' : 'ativo'}</StyledStatus></TableCell>
                     </TableRow>
                   );
                 })}
@@ -313,13 +290,13 @@ export default function ClientTable() {
         <TablePagination
           rowsPerPageOptions={[5, 10, 25]}
           component="div"
-          count={rows.length}
+          count={clients.length}
           rowsPerPage={rowsPerPage}
           page={page}
           onPageChange={handleChangePage}
           onRowsPerPageChange={handleChangeRowsPerPage}
         />
       </Paper>
-    </ClientTableView>
+    </TableView>
   );
 }

src/components/administrativeTables/FaqTable.tsx

@@ -17,10 +17,10 @@ import TableRow from '@mui/material/TableRow';
 import TableSortLabel from '@mui/material/TableSortLabel';
 import { visuallyHidden } from '@mui/utils';
 import { GetServerSideProps } from 'next';
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import getAPIClient from '../../services/ssrApi';
 
-import { ClientTableView, StyledStatus } from './ClientsTableView';
+import { TableView, StyledStatus } from './TableView';
 
 interface Data {
   question: string,
@@ -28,6 +28,11 @@ interface Data {
   status: string,
 }
 
+interface FaqTableInterface{
+  questionData: any,
+  onChange: any
+}
+
 function createData(
   question: string,
   answer: string,
@@ -170,7 +175,7 @@ function EnhancedTableHead(props: EnhancedTableProps) {
   );
 }
 
-export default function FaqTable({questionData}: any) {
+export default function FaqTable({questionData, onChange}: FaqTableInterface) {
   const [order, setOrder] = useState<Order>('asc');
   const [orderBy, setOrderBy] = useState<keyof Data | string>('status');
   const [selected, setSelected] = useState<readonly string[]>([]);
@@ -229,12 +234,16 @@ export default function FaqTable({questionData}: any) {
 
   const isSelected = (name: string) => selected.indexOf(name) !== -1;
 
+  useEffect(() => {
+    onChange(selected)
+  }, [selected])
+
   // 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;
 
   return (
-    <ClientTableView>
+    <TableView>
       <Paper sx={{ width: '100%', mb: 2 }}>
         <TableContainer>
           <Table
@@ -311,7 +320,7 @@ export default function FaqTable({questionData}: any) {
           onRowsPerPageChange={handleChangeRowsPerPage}
         />
       </Paper>
-    </ClientTableView>
+    </TableView>
   );
 }
 

src/components/administrativeTables/NotificationsTable.tsx

@@ -21,7 +21,7 @@ import Typography from '@mui/material/Typography';
 import { visuallyHidden } from '@mui/utils';
 import React, { useState, useEffect } from 'react';
 
-import { ClientTableView, StyledStatus } from './ClientsTableView';
+import { TableView, StyledStatus } from './TableView';
 
 interface Data {
   notification: string,
@@ -248,7 +248,7 @@ export default function NotificationsTable({notifications, onChange}: Notificati
   }, [selected])
 
   return (
-    <ClientTableView>
+    <TableView>
       <Paper sx={{ width: '100%', mb: 2 }}>
         <TableContainer>
           <Table
@@ -325,6 +325,6 @@ export default function NotificationsTable({notifications, onChange}: Notificati
           onRowsPerPageChange={handleChangeRowsPerPage}
         />
       </Paper>
-    </ClientTableView>
+    </TableView>
   );
 }

src/components/administrativeTables/TableView.ts

@@ -1,6 +1,6 @@
 import styled from "styled-components";
 
-export const ClientTableView = styled.main`
+export const TableView = styled.main`
   width: 100%;
 
   color: #6A707E;

src/components/graph/Chart.tsx

@@ -71,14 +71,14 @@ export default function Chart({ title, data1, data2, label, subtitle, dataset1,
     labels,
     datasets: [
       {
-        label: dataset1? dataset1 : '2020',
+        label: dataset1? dataset1 : '2021',
-        data: data1.map(value => value),
+        data: data1.map(value => value.custo_unit),
         backgroundColor: '#C2D5FB',
       },
       data2?
       {
-        label: dataset2? dataset2 : '2021',
+        label: dataset2? dataset2 : '2022',
-        data: data2.map(value => value),
+        data: data2.map(value => value.custo_unit),
         backgroundColor: '#255488',
       } : null
     ],

src/components/graph/LineBarChart.tsx

@@ -25,38 +25,38 @@ ChartJS.register(
   Tooltip
 );
 
-function triggerTooltip(chart: ChartJS | null) {
+// function triggerTooltip(chart: ChartJS | null) {
-  const tooltip = chart?.tooltip;
+//   const tooltip = chart?.tooltip;
 
-  if (!tooltip) {
+//   if (!tooltip) {
-    return;
+//     return;
-  }
+//   }
 
-  if (tooltip.getActiveElements().length > 0) {
+//   if (tooltip.getActiveElements().length > 0) {
-    tooltip.setActiveElements([], { x: 0, y: 0 });
+//     tooltip.setActiveElements([], { x: 0, y: 0 });
-  } else {
+//   } else {
-    const { chartArea } = chart;
+//     const { chartArea } = chart;
 
-    tooltip.setActiveElements(
+//     tooltip.setActiveElements(
-      [
+//       [
-        {
+//         {
-          datasetIndex: 0,
+//           datasetIndex: 0,
-          index: 2,
+//           index: 2,
-        },
+//         },
-        {
+//         {
-          datasetIndex: 1,
+//           datasetIndex: 1,
-          index: 2,
+//           index: 2,
-        },
+//         },
-      ],
+//       ],
-      {
+//       {
-        x: (chartArea.left + chartArea.right) / 2,
+//         x: (chartArea.left + chartArea.right) / 2,
-        y: (chartArea.top + chartArea.bottom) / 2,
+//         y: (chartArea.top + chartArea.bottom) / 2,
-      }
+//       }
-    );
+//     );
-  }
+//   }
 
-  chart.update();
+//   chart.update();
-}
+// }
 
 interface LineBarChartInterface {
   title: string,
@@ -119,7 +119,7 @@ export function LineBarChart({ title, subtitle, data1, data2, data3, label, red,
         },
         borderWidth: 2,
         fill: false,
-        data: data1.map(value => value),
+        data: data1.map(value => value.value),
       },
       {
         type: 'bar' as const,
@@ -127,7 +127,7 @@ export function LineBarChart({ title, subtitle, data1, data2, data3, label, red,
         backgroundColor: (value, ctx) => {
           return hashurado? parseInt(value.dataIndex+1) <= currentTime.getMonth()? '#C2D5FB' : pattern.draw('diagonal', '#C2D5FB') : '#C2D5FB'
         },
-        data: data3.map(value => value),
+        data: data3.map(value => value.value),
       },
       {
         type: 'bar' as const,
@@ -136,7 +136,7 @@ export function LineBarChart({ title, subtitle, data1, data2, data3, label, red,
         backgroundColor: (value, ctx) => {
           return hashurado? parseInt(value.dataIndex+1) <= currentTime.getMonth()? '#255488' : pattern.draw('diagonal', '#255488') : '#255488'
         },
-        data: data2.map(value => value),
+        data: data2.map(value => value.value),
       },
     ],
   } : {
@@ -149,13 +149,13 @@ export function LineBarChart({ title, subtitle, data1, data2, data3, label, red,
         '#f00' : '#0c9200',
         borderWidth: 2,
         fill: false,
-        data: data1.map(value => value),
+        data: data1.map(value => value.value),
       },
       {
         type: 'bar' as const,
         label: dataset3? dataset3 : 'Dataset 2',
         backgroundColor: '#255488',
-        data: data3.map(value => value),
+        data: data3.map(value => value.value),
       },
     ],
   };
@@ -163,7 +163,7 @@ export function LineBarChart({ title, subtitle, data1, data2, data3, label, red,
   useEffect(() => {
     const chart = chartRef.current;
 
-    triggerTooltip(chart);
+    // triggerTooltip(chart);
   }, []);
 
   return (

src/components/graph/LineBarChart2.tsx

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

src/components/graph/LineChart.tsx

@@ -75,25 +75,25 @@ export default function LineChart({ title, subtitle, data1, data2, data3, data4,
     datasets: [
       {
         label: dataset1? dataset1 : 'Dataset 1',
-        data: data1.map(value => value),
+        data: data1.map(value => value.value),
         borderColor: 'rgb(53, 162, 235)',
         backgroundColor: 'rgba(53, 162, 235, 0.5)',
       },
       {
         label: dataset2? dataset2 : '',
-        data: data2.map(value => value),
+        data: data2.map(value => value.value),
         borderColor: 'rgb(255, 114, 32)' ,
         backgroundColor: 'rgba(255, 145, 0, 0.5)' ,
       },
       {
         label: dataset3? dataset3 : '',
-        data: data3.map(value => value),
+        data: data3.map(value => value.value),
         borderColor: 'rgb(109, 109, 109)' ,
         backgroundColor: 'rgba(90, 90, 90, 0.5)',
       },
       {
         label: dataset4? dataset4 : '',
-        data: data4.map(value => value),
+        data: data4.map(value => value.value),
         borderColor: 'rgb(255, 166, 0)',
         backgroundColor: 'rgba(255, 187, 0, 0.5)',
       },
@@ -103,19 +103,19 @@ export default function LineChart({ title, subtitle, data1, data2, data3, data4,
     datasets: [
       {
         label: dataset1? dataset1 : 'Dataset 1',
-        data: data1.map(value => value),
+        data: data1.map(value => value.value),
         borderColor: 'rgb(53, 162, 235)',
         backgroundColor: 'rgba(53, 162, 235, 0.5)',
       },
       {
         label: dataset2? dataset2 : '',
-        data: data2.map(value => value),
+        data: data2.map(value => value.value),
         borderColor: 'rgb(255, 114, 32)' ,
         backgroundColor: 'rgba(255, 145, 0, 0.5)' ,
       },
       {
         label: dataset3? dataset3 : '',
-        data: data3.map(value => value),
+        data: data3.map(value => value.value),
         borderColor: 'rgb(109, 109, 109)' ,
         backgroundColor: 'rgba(90, 90, 90, 0)',
       },
@@ -125,13 +125,13 @@ export default function LineChart({ title, subtitle, data1, data2, data3, data4,
     datasets: [
       {
         label: dataset1? dataset1 : 'Dataset 1',
-        data: data1.map(value => value),
+        data: data1.map(value => value.value),
         borderColor: 'rgb(53, 162, 235)',
         backgroundColor: 'rgba(53, 162, 235, 0)',
       },
       {
         label: dataset2? dataset2 : '',
-        data: data2.map(value => value),
+        data: data2.map(value => value.value),
         borderColor: 'rgb(255, 114, 32)' ,
         backgroundColor: 'rgba(255, 145, 0, 0)' ,
       },
@@ -141,7 +141,7 @@ export default function LineChart({ title, subtitle, data1, data2, data3, data4,
     datasets: [
       {
         label: dataset1? dataset1 : 'Dataset 1',
-        data: data1.map(value => value),
+        data: data1.map(value => value.value),
         borderColor: 'rgb(53, 162, 235)',
         backgroundColor: 'rgba(53, 162, 235, 0)',
       },

src/components/graph/SingleBar.tsx

@@ -20,13 +20,16 @@ ChartJS.register(
 interface SingleBarInterface{
   title: string,
   subtitle: string,
-  dataProps: Array<number>,
+  dataProps: any,
   label: Array<string>,
   dataset: string,
   barLabel?: boolean | undefined,
   year?: boolean | undefined,
   month?: boolean | undefined,
   dataset1?: string,
+
+
+
 }
 
 export function SingleBar({ title, subtitle, dataProps, label, dataset, dataset1, barLabel, year, month }: SingleBarInterface) {
@@ -79,19 +82,14 @@ export function SingleBar({ title, subtitle, dataProps, label, dataset, dataset1
       {
         label: dataset,
         data: dataProps.map((value, index) => {
-          return year? label[index]<=currentTime.getFullYear().toString()? value : null : month? label.indexOf(label[index])>currentTime.getMonth()? null : value : null
+          return value.economia_acumulada
         }),
         backgroundColor: (value, ctx) => {
-          return year? label[value.dataIndex]<=currentTime.getFullYear().toString()? '#255488' : 'transparent' : month? label.indexOf(label[value.dataIndex])<=currentTime.getMonth()? '#255488' : 'transparent' : null// parseInt(label[value.dataIndex])<=currentTime.getMonth()? '#255488' : draw('diagonal', '#C2D5FB') : null
+          console.log(dataProps[value.dataIndex])
+          return dataProps[value.dataIndex].dad_estimado == false ? '#255488' : '#C2d5fb'
         },
       },
-      {
+
-        label: dataset1,
-        data: dataProps.map((value, index) => {
-          return year? label[index]>=currentTime.getFullYear().toString()? value : null : month? label.indexOf(label[index])<=currentTime.getMonth()? null : value : null
-        }),
-        backgroundColor: typeof window !== 'undefined'? draw('diagonal', '#C2D5FB') : null
-      }
     ],
   }
 

src/components/inputUplaod/inputUpload.tsx

@@ -16,7 +16,7 @@ export default function InputUpload() {
 
   function onImageChange(e: any) {
     setImages([...e.target.files]);
-    console.log(e);
+    // console.log(e);
   }
 
   return (

src/components/modal/ConfirmModal.tsx

@@ -12,8 +12,8 @@ const style = {
   top: '50%',
   left: '50%',
   transform: 'translate(-50%, -50%)',
-  width: '30%',
+  width: 600,
-  height: '30%',
+  height: 500,
   bgcolor: 'background.paper',
   border: '2px solid #254F7F',
   boxShadow: 24,

src/components/modal/Modal.tsx

@@ -13,7 +13,7 @@ const style = {
   left: '50%',
   transform: 'translate(-50%, -50%)',
   width: '80%',
-  height: '550px',
+  height: '200px',
   bgcolor: 'background.paper',
   border: '2px solid #254F7F',
   boxShadow: 24,

src/components/sidebar/Sidebar.tsx

@@ -37,7 +37,7 @@ export default function Sidebar() {
 
   const { ['user-role']: role } = parseCookies()
 
-  console.log(role)
+  // console.log(role)
 
   useEffect(() => {
     setViewModal(false)

src/pages/_app.tsx

@@ -59,7 +59,6 @@ function MyApp({ Component, pageProps }: AppProps) {
             <>
               <Sidebar />
               <Component {...pageProps} />
-
             </>
             :
             null

src/pages/accumulatedSavings.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,9 +9,10 @@ import Header from '../components/header/Header'
 import PageTitle from '../components/pageTitle/PageTitle'
 import { EconomiaAcumulada } from '../services/economiaAcumulada'
 import { dataEconomiaBruta } from '../services/economiaBruta'
+import getAPIClient from '../services/ssrApi'
 import { AccumulatedSavingsView } from '../styles/layouts/economy/accumulatedSavings/AccumulatedSavingsView'
 
-export default function AccumulatedSavings() {
+export default function AccumulatedSavings({graphData, years}: any) {
   return (
     <AccumulatedSavingsView>
       <Head>
@@ -19,8 +22,42 @@ export default function AccumulatedSavings() {
       <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'
-          dataset1='Estimada' label={EconomiaAcumulada.label}  dataProps={EconomiaAcumulada.data2} barLabel month/>
+          dataset1='Estimada' dataProps={graphData}
+          label={years} barLabel  month/>
       </section>
     </AccumulatedSavingsView>
   )
 }
+
+export const getServerSideProps: GetServerSideProps = async (ctx) => {
+  const apiClient = getAPIClient(ctx)
+  const { ['@smartAuth-token']: token } = parseCookies(ctx)
+
+  let graphData = [];
+
+  await apiClient.post('/economy/grossMonthly').then(res => {
+    graphData = res.data.data
+    console.log(graphData[0].mes)
+  }).catch(res => {
+    console.log(res)
+  })
+
+  const years = graphData.map((value) => value.mes)
+
+  if (!token) {
+    return {
+      redirect: {
+        destination: '/',
+        permanent: false
+      }
+    }
+  }
+
+
+  return {
+    props: {
+      graphData,
+      years,
+    }
+  }
+}

src/pages/administrative/clients.tsx

@@ -1,106 +0,0 @@
-import Box from '@mui/material/Box';
-import Button from '@mui/material/Button';
-import Modal from '@mui/material/Modal';
-import TextField from '@mui/material/TextField';
-import Typography from '@mui/material/Typography';
-import { DataGrid, GridColDef, GridValueGetterParams } from '@mui/x-data-grid';
-import React, { useState } from 'react'
-
-import AdministrativeHeader from '../../components/administrativeHeader/AdministrativeHeader';
-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 InputUpload from '../../components/inputUplaod/inputUpload';
-import { ClientsView } from '../../styles/layouts/clients/ClientsView';
-import PageTitle from '../../components/pageTitle/PageTitle';
-import ConfirmModal from '../../components/modal/ConfirmModal';
-import { ConfirmModalView } from '../../styles/layouts/modals/confirmModalView';
-import { api } from '../../services/api';
-
-const style = {
-  position: 'absolute' as const,
-  top: '50%',
-  left: '50%',
-  transform: 'translate(-50%, -50%)',
-  width: 900,
-  height: 500,
-  bgcolor: 'background.paper',
-  border: '2px solid #000',
-  boxShadow: 24,
-  p: 4,
-  overflowY: 'scroll'
-};
-
-export default function clients() {
-  const [client, setClient] = useState({
-    name: String,
-    email: String,
-    password: String,
-    password_confirmation: String,
-    client_id: Number
-  })
-
-  const [open, setOpen] = useState(false);
-  const [openModalInativar, setOpenModalInativar] = useState(false)
-  const handleOpen = () => setOpen(true);
-  const handleClose = () => setOpen(false);
-
-  const [openModal, setOpenModal] = useState(false)
-
-  function handleCreateClient({name, email, password, password_confirmation, client_id}) {
-    api.post('', {
-      name,
-      email,
-      password,
-      password_confirmation,
-      client_id
-    })
-  }
-
-  return (
-    <div style={{display: 'flex', flexDirection: 'column', width: '100%'}}>
-      <ClientsView>
-        <Header name='' />
-        <PageTitle title='Clientes' subtitle='Clientes Smart Energia'/>
-        <div className='buttons'>
-        <button className='btn2' onClick={handleOpen}>Adicionar</button>
-        <button className='btn1' onClick={() => setOpenModalInativar(true)}>Inativar</button>
-        </div>
-        <Modal
-        open={open}
-        onClose={handleClose}
-        aria-labelledby="modal-modal-title"
-        aria-describedby="modal-modal-description"
-        >
-        <Box sx={style}>
-          <h1>Adicionar Cliente</h1>
-          <Typography sx={{color:'gray', fontSize:12}}variant="h5" gutterBottom component="div">
-          Adicionar Cliente Smart Energia</Typography>
-          <br />
-          <TextField id="outlined-basic" label="Nome" sx={{width:350, ml:5}} variant="outlined" />
-          <TextField id="outlined-basic" label="E-mail/Usuário" sx={{width:350, ml:8}} variant="outlined" />
-          <TextField id="outlined-basic" label="Senha" sx={{width:350, ml:5, mt:2}} variant="outlined" />
-          <TextField id="outlined-basic" label="Confirma Senha" sx={{width:350, ml:8, mt:2}} variant="outlined" />
-          <TextField id="outlined-basic" label="Codigo do Cliente Smart Energia" sx={{width:350, ml:5, mt:2}} variant="outlined" />
-          <InputUpload />
-          <br /><br />
-        <FaqButton1  title='Cancelar' onClick={()=>console.log()} />
-        <FaqButton2  title='Salvar' onClick={()=>console.log()}/>
-        </Box>
-        </Modal>
-        <section>
-          <ClientsTable />
-        </section>
-      </ClientsView>
-
-      <ConfirmModal open={openModalInativar} handleIsClose={(value) => {setOpenModalInativar(value)}}>
-        <ConfirmModalView>
-          <BasicButton title='Confirmar' onClick={() => setOpenModalInativar(true)}/>
-          <BasicButton title='Cancelar' onClick={() => setOpenModalInativar(true)}/>
-        </ConfirmModalView>
-      </ConfirmModal>
-    </div>
-  )
-}

src/pages/administrative/clients/index.tsx

@@ -0,0 +1,237 @@
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import Modal from '@mui/material/Modal';
+import TextField from '@mui/material/TextField';
+import Typography from '@mui/material/Typography';
+import React, { useState } from 'react'
+
+import Snackbar from '@mui/material/Snackbar';
+import MuiAlert, { AlertProps } from '@mui/material/Alert';
+import ClientsTable from '../../../components/administrativeTables/ClientsTable';
+import 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 InputUpload from '../../../components/inputUplaod/inputUpload';
+import { ClientsView } from '../../../styles/layouts/clients/ClientsView';
+import PageTitle from '../../../components/pageTitle/PageTitle';
+import ConfirmModal from '../../../components/modal/ConfirmModal';
+import { ConfirmModalView } from '../../../styles/layouts/modals/confirmModalView';
+import { api } from '../../../services/api';
+import { parseCookies } from 'nookies';
+import { GetServerSideProps } from 'next';
+import getAPIClient from '../../../services/ssrApi';
+
+const style = {
+  position: 'absolute' as const,
+  top: '50%',
+  left: '50%',
+  transform: 'translate(-50%, -50%)',
+  width: 900,
+  height: 500,
+  bgcolor: 'background.paper',
+  border: '2px solid #000',
+  boxShadow: 24,
+  p: 4,
+  overflowY: 'scroll'
+};
+
+const Alert = React.forwardRef<HTMLDivElement, AlertProps>(function Alert(
+  props,
+  ref,
+) {
+  return <MuiAlert elevation={6} ref={ref} variant="filled" {...props} />;
+});
+
+export default function clients({clients}) {
+  const [client, setClient] = useState<any>({
+    name: String,
+    email: String,
+    password: String,
+    password_confirmation: String,
+    client_id: Number
+  })
+  const [selectedClients, setSelectedClients] = useState([])
+
+  const [open, setOpen] = useState(false);
+  const [openModalInativar, setOpenModalInativar] = useState(false)
+  const handleOpen = () => setOpen(true);
+  const handleClose = () => setOpen(false);
+
+  const [openModal, setOpenModal] = useState(false)
+
+  //
+  const [openSnackSuccess, setOpenSnackSuccess] = useState<boolean>(false);
+  const [openSnackError, setOpenSnackError] = useState<boolean>(false);
+  const [openSnackSuccessDelete, setOpenSnackSuccessDelete] = useState<boolean>(false);
+  const [openSnackErrorDelete, setOpenSnackErrorDelete] = useState<boolean>(false);
+
+  const handleCloseSnack = (event?: React.SyntheticEvent | Event, reason?: string) => {
+    if (reason === 'clickaway') {
+      return;
+    }
+
+    setOpenSnackError(false);
+    setOpenSnackSuccess(false);
+  };
+
+  const handleCloseSnackDelete = (event?: React.SyntheticEvent | Event, reason?: string) => {
+    if (reason === 'clickaway') {
+      return;
+    }
+
+    setOpenSnackErrorDelete(false);
+    setOpenSnackSuccessDelete(false);
+  };
+  //
+
+  function handleCreateClient({name, email, password, password_confirmation, client_id}) {
+    api.post('/user', {
+      name,
+      email,
+      password,
+      password_confirmation,
+      client_id
+    }).then(res => {
+      setOpenSnackSuccess(true)
+      setOpenModalInativar(false)
+      window.location.reload()
+    }).catch(res => {
+      setOpenSnackError(true)
+    })
+  }
+  async function handleDeleteClient(id: any) {
+    await id.map(client => {
+      api.delete(`/user/${client}`).then(res => {
+        setOpenSnackSuccessDelete(true)
+        setOpenModalInativar(false)
+        window.location.reload()
+      }).catch(res => setOpenSnackErrorDelete(true))
+    })
+  }
+
+  return (
+    <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!
+        </Alert>
+      </Snackbar>
+      <Snackbar open={openSnackError} autoHideDuration={4000} onClose={handleCloseSnack}>
+        <Alert onClose={handleCloseSnack} severity="error" sx={{ width: '100%' }}>
+          Notificação 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!
+        </Alert>
+      </Snackbar>
+      <Snackbar open={openSnackErrorDelete} autoHideDuration={4000} onClose={handleCloseSnackDelete}>
+        <Alert onClose={handleCloseSnackDelete} severity="error" sx={{ width: '100%' }}>
+          Notificação não excluida!
+        </Alert>
+      </Snackbar>
+
+      <ClientsView>
+        <Header name='' />
+        <PageTitle title='Clientes' subtitle='Clientes Smart Energia'/>
+        <div className='buttons'>
+        <button className='btn2' onClick={handleOpen}>Adicionar</button>
+        <button className='btn1' onClick={() => setOpenModalInativar(true)}>Inativar</button>
+        </div>
+        <section>
+          <ClientsTable clients={clients} onChange={value => {
+            setSelectedClients(value)
+          }}/>
+        </section>
+      </ClientsView>
+
+      <Modal
+      open={open}
+      onClose={handleClose}
+      aria-labelledby="modal-modal-title"
+      aria-describedby="modal-modal-description"
+      >
+      <Box sx={style}>
+        <h1>Adicionar Cliente</h1>
+        <Typography sx={{color:'gray', fontSize:12}}variant="h5" gutterBottom component="div">
+        Adicionar Cliente Smart Energia</Typography>
+        <br />
+        <TextField id="outlined-basic" label="Nome" sx={{width:350, ml:5}} onChange={(value) => {
+          setClient({
+            ...client,
+            name: value.target.value
+          })
+        }} variant="outlined" />
+        <TextField id="outlined-basic" label="E-mail/Usuário" sx={{width:350, ml:8}} onChange={(value) => {
+          setClient({
+            ...client,
+            email: value.target.value
+          })
+        }} variant="outlined" />
+        <TextField id="outlined-basic" label="Senha" sx={{width:350, ml:5, mt:2}} onChange={(value) => {
+          setClient({
+            ...client,
+            password: value.target.value
+          })
+        }} variant="outlined" />
+        <TextField id="outlined-basic" label="Confirma Senha" sx={{width:350, ml:8, mt:2}} onChange={(value) => {
+          setClient({
+            ...client,
+            password_confirmation: value.target.value
+          })
+        }} variant="outlined" />
+        <TextField id="outlined-basic" label="Codigo do Cliente Smart Energia" sx={{width:350, ml:5, mt:2}} onChange={(value) => {
+          setClient({
+            ...client,
+            client_id: value.target.value
+          })
+        }} variant="outlined" />
+        <InputUpload />
+        <br /><br />
+      <FaqButton1  title='Cancelar' onClick={() => console.log()} />
+      <FaqButton2  title='Salvar' onClick={() => handleCreateClient(client)}/>
+      </Box>
+      </Modal>
+      <ConfirmModal open={openModalInativar} handleIsClose={(value) => {setOpenModalInativar(value)}}>
+        <PageTitle title='Excluir Cliente' subtitle='deseja realmente excluir os clientes selecionadas?'/>
+        <ConfirmModalView>
+          <BasicButton title='Confirmar' onClick={() => handleDeleteClient(selectedClients)}/>
+          <BasicButton title='Cancelar' onClick={() => setOpenModalInativar(true)}/>
+        </ConfirmModalView>
+      </ConfirmModal>
+    </div>
+  )
+}
+
+export const getServerSideProps: GetServerSideProps = async (ctx) => {
+  const apiClient = getAPIClient(ctx)
+  const { ['@smartAuth-token']: token } = parseCookies(ctx)
+
+  let clients = [];
+
+  await apiClient.get('/user').then(res => {
+    console.log(res)
+    clients = res.data.data
+    console.log(clients)
+  }).catch(res => {
+    // console.log(res)
+  })
+
+  if (!token) {
+    return {
+      redirect: {
+        destination: '/',
+        permanent: false
+      }
+    }
+  }
+
+  return {
+    props: {
+      clients,
+    }
+  }
+}

src/pages/administrative/faq/index.tsx

@@ -10,7 +10,10 @@ import Link from 'next/link'
 import { useRouter } from 'next/router'
 import React, { useEffect, useState } from 'react'
 import { api } from '../../../services/api';
-
+import ConfirmModal from '../../../components/modal/ConfirmModal';
+import { ConfirmModalView } from '../../../styles/layouts/modals/confirmModalView';
+import Snackbar from '@mui/material/Snackbar';
+import MuiAlert, { AlertProps } from '@mui/material/Alert';
 
 import FaqTable from '../../../components/administrativeTables/FaqTable';
 import BasicButton from '../../../components/buttons/basicButton/BasicButton';
@@ -23,6 +26,7 @@ import getAPIClient from '../../../services/ssrApi';
 import { GetServerSideProps } from 'next';
 import { parseCookies } from 'nookies';
 
+
 const style = {
   position: 'absolute' as const,
   top: '50%',
@@ -36,13 +40,69 @@ const style = {
   p: 4,
 };
 
+const Alert = React.forwardRef<HTMLDivElement, AlertProps>(function Alert(
+  props,
+  ref,
+) {
+  return <MuiAlert elevation={6} ref={ref} variant="filled" {...props} />;
+});
+
+
 type FaqInterface = {
   question: string;
   answer: string;
 
 }
-
 export default function Sidebar({faqData} : any ) {
+
+
+  const [openModalInativar, setOpenModalInativar] = useState<boolean>(false)
+  const [openSnackSuccess, setOpenSnackSuccess] = useState<boolean>(false);
+  const [openSnackError, setOpenSnackError] = useState<boolean>(false);
+  const [openSnackSuccessDelete, setOpenSnackSuccessDelete] = useState<boolean>(false);
+  const [openSnackErrorDelete, setOpenSnackErrorDelete] = useState<boolean>(false);
+
+
+
+  const handleCloseSnack = (event?: React.SyntheticEvent | Event, reason?: string) => {
+    if (reason === 'clickaway') {
+      return;
+    }
+
+    setOpenSnackError(false);
+    setOpenSnackSuccess(false);
+  };
+
+
+  const handleCloseSnackDelete = (event?: React.SyntheticEvent | Event, reason?: string) => {
+    if (reason === 'clickaway') {
+      return;
+    }
+
+    setOpenSnackErrorDelete(false);
+    setOpenSnackSuccessDelete(false);
+  };
+
+  async function handleDeleteNotification(id: any) {
+    await id.map((value) => {
+      api.delete(`/faq/${value}`).then(res => {
+        setOpenSnackSuccessDelete(true)
+        setOpenModalInativar(false)
+        window.location.reload()
+      }).catch(res => setOpenSnackErrorDelete(true))
+    })
+  }
+
+
+
+  const [faq, setFaq] = useState<FaqInterface>({
+    question: '',
+    answer : '',
+
+  })
+
+  const [selectedfaq, setSelectedfaq] = useState([])
+
   async function handleRegisterNewFaq({question, answer}: FaqInterface) {
     await api.post('/faq', {
       "question": question,
@@ -51,10 +111,7 @@ export default function Sidebar({faqData}: any) {
     }).then(res => console.log(res.data))
   }
 
-  const [faq, setFaq] = useState<FaqInterface>({
+
-    question: '',
-    answer: '',
-  })
 
 
   const [open, setOpen] = React.useState(false);
@@ -68,9 +125,32 @@ export default function Sidebar({faqData}: any) {
 
       <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!
+        </Alert>
+      </Snackbar>
+      <Snackbar open={openSnackError} autoHideDuration={4000} onClose={handleCloseSnack}>
+        <Alert onClose={handleCloseSnack} severity="error" sx={{ width: '100%' }}>
+          Notificação 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!
+        </Alert>
+      </Snackbar>
+      <Snackbar open={openSnackErrorDelete} autoHideDuration={4000} onClose={handleCloseSnackDelete}>
+        <Alert onClose={handleCloseSnackDelete} severity="error" sx={{ width: '100%' }}>
+          Notificação não excluida!
+        </Alert>
+      </Snackbar>
+
       <div className='buttons'>
       <button className='btn2' value="Refresh Page"onClick={handleOpen} >Adicionar</button>
-      <button className='btn1' onClick={handleOpen}>Inativar</button>
+      <button className='btn1' onClick={() => setOpenModalInativar(true)}>Inativar</button>
+
 
       </div>
         <Modal
@@ -99,7 +179,15 @@ export default function Sidebar({faqData}: any) {
         </Box>
 
       </Modal>
-      <FaqTable questionData={faqData}/>
+      <FaqTable questionData={faqData} onChange={value => setSelectedfaq(value)}/>
+
+      <ConfirmModal open={openModalInativar} handleIsClose={(value) => {setOpenModalInativar(value)}}>
+        <PageTitle title='Excluir notificação' subtitle='deseja realmente excluir as notificações selecionadas?'/>
+        <ConfirmModalView>
+          <BasicButton title='Confirmar' onClick={() => handleDeleteNotification(selectedfaq)}/>
+          <BasicButton title='Cancelar' onClick={() => setOpenModalInativar(false)}/>
+        </ConfirmModalView>
+      </ConfirmModal>
 
     </FaqView>
     </>
@@ -109,16 +197,14 @@ export default function Sidebar({faqData}: any) {
 export const getServerSideProps: GetServerSideProps = async (ctx) => {
   const apiClient = getAPIClient(ctx)
   const { ['@smartAuth-token']: token } = parseCookies(ctx)
-  console.log('teste')
+
   let faqData = [];
 
-
   await apiClient.get('/faq').then(res => {
-  faqData = res.data
+    faqData = res.data.data
   }).catch(res => {
-  console.log(res)
+    // console.log(res)
   })
-  console.table(faqData);
 
   if (!token) {
     return {

src/pages/administrative/index.tsx

@@ -19,57 +19,6 @@ export default function clients() {
 
   return (
     <div style={{display: 'flex', flexDirection: 'column', width: '100%'}}>
-      <ClientsView>
-        <Header name='' />
-        <PageTitle title='Clientes' subtitle='Clientes Smart Energia'/>
-
-        <section>
-          <BasicButton title='Adicionar' onClick={() => setOpenModal(true)}/>
-          <BasicButton title='Inativar' onClick={() => setOpenModalInativar(true)}/>
-        </section>
-
-        <section>
-          {/* <DataGrid
-            rows={rows}
-            columns={columns}
-            pageSize={6}
-            rowsPerPageOptions={[6]}
-            checkboxSelection
-          /> */}
-          <ClientsTable />
-        </section>
-      </ClientsView>
-
-      <Modal open={openModal} handleIsClose={(value) => {setOpenModal(value)}}>
-        <ClientsModalView>
-          <PageTitle title='Adicionar Cliente' subtitle='Adicionar Cliente Smart Energia'/>
-          <article>
-            <TextField id="outlined-basic" label="Nome" variant="outlined" style={{width: '90%', marginRight: '20px'}}/>
-            <TextField id="outlined-basic" label="email" variant="outlined" style={{width: '90%', marginRight: '20px'}}/>
-            <TextField id="outlined-basic" label="senha" variant="outlined" style={{width: '90%', marginRight: '20px'}}/>
-            <TextField id="outlined-basic" label="código" variant="outlined" style={{width: '90%', marginRight: '20px'}}/>
-            <BasicButton title='Criar Cliente' onClick={() => console.log()}/>
-            <Button
-              variant="contained"
-              component="label"
-              style={{width: '300px'}}
-            >
-              Logo
-              <input
-                type="file"
-                hidden
-              />
-            </Button>
-          </article>
-        </ClientsModalView>
-      </Modal>
-
-      <ConfirmModal open={openModalInativar} handleIsClose={(value) => {setOpenModalInativar(value)}}>
-        <ConfirmModalView>
-          <BasicButton title='Confirmar' onClick={() => setOpenModalInativar(true)}/>
-          <BasicButton title='Cancelar' onClick={() => setOpenModalInativar(true)}/>
-        </ConfirmModalView>
-      </ConfirmModal>
     </div>
   )
 }

src/pages/administrative/notification/index.tsx

@@ -60,6 +60,7 @@ interface NotificationInterface {
   users: object[]
 }
 
+// teste
 export default function notification({clients, notifications}) {
 
   const [notification, setNotification] = useState<NotificationInterface>({
@@ -126,7 +127,7 @@ export default function notification({clients, notifications}) {
 
       <Snackbar open={openSnackSuccess} autoHideDuration={4000} onClose={handleCloseSnack}>
         <Alert onClose={handleCloseSnack} severity="success" sx={{ width: '100%' }}>
-          notificação cadastrada com sucesso!
+          Notificação cadastrada com sucesso!
         </Alert>
       </Snackbar>
       <Snackbar open={openSnackError} autoHideDuration={4000} onClose={handleCloseSnack}>
@@ -149,8 +150,8 @@ export default function notification({clients, notifications}) {
       <div className='buttons'>
         <button className='btn2' onClick={handleOpen}>Disparar nova</button>
         <button className='btn1' onClick={() => setOpenModalInativar(true)}>Inativar</button>
-
       </div>
+
       <NotificationsTable notifications={notifications} onChange={(value) => setSelectedNotifications(value)}/>
       <Modal
           open={open}
@@ -252,13 +253,13 @@ export const getServerSideProps: GetServerSideProps = async (ctx) => {
   await apiClient.get('/user').then(res => {
     clients = res.data
   }).catch(res => {
-    console.log(res)
+    // console.log(res)
   })
 
   await apiClient.get('/notification').then(res => {
-    notifications = res.data
+    notifications = res.data.data
   }).catch(res => {
-    console.log(res)
+    // console.log(res)
   })
 
   if (!token) {

src/pages/costIndicator.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,9 +9,23 @@ import Header from '../components/header/Header'
 import PageTitle from '../components/pageTitle/PageTitle'
 import { dataEconomiaBruta } from '../services/economiaBruta'
 import { dataEconomiaIndicador } from '../services/economiaIndicador'
+import getAPIClient from '../services/ssrApi'
 import { CostIndicatorView } from '../styles/layouts/economy/costIndicator/CostIndicatorView'
 
-export default function CostIndicator() {
+function addMissingMonths(data) {
+  console.log(data[0].mes.slice(1, 1))
+}
+
+function verifyDataByYear(data) {
+  if (data.length === 12)
+    return true
+  else
+    return false
+}
+
+export default function CostIndicator({graphData}: any) {
+  console.log(graphData.filter((value, index) => value.mes.slice(3, 7).includes('2021')).map(value => value.custo_unit))
+
   return (
     <CostIndicatorView>
       <Head>
@@ -18,8 +34,39 @@ export default function CostIndicator() {
       <Header name='' />
       <PageTitle title='Indicador de Custo' subtitle='Valores em R$/MWh'/>
       <section>
-        <Chart title='Indicador de Custo' subtitle='(Valores em R$/MWh)' data1={dataEconomiaIndicador.data1} data2={dataEconomiaIndicador.data2} label={dataEconomiaIndicador.labels} barLabel />
+        <Chart title='Indicador de Custo' subtitle='(Valores em R$/MWh)' data1={graphData.filter((value, index) => value.mes.slice(3, 7).includes('2021'))}
+        data2={graphData.filter((value, index) => value.mes.slice(3, 7).includes('2022'))}
+        label={['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'ago', 'set', 'out', 'nov', 'dez']} barLabel />
       </section>
     </CostIndicatorView>
   )
 }
+
+export const getServerSideProps: GetServerSideProps = async (ctx) => {
+  const apiClient = getAPIClient(ctx)
+  const { ['@smartAuth-token']: token } = parseCookies(ctx)
+
+  let graphData = [];
+
+  await apiClient.post('/economy/MWh').then(res => {
+    graphData = res.data.data
+    console.log(graphData[0].mes)
+  }).catch(res => {
+    console.log(res)
+  })
+
+  if (!token) {
+    return {
+      redirect: {
+        destination: '/',
+        permanent: false
+      }
+    }
+  }
+
+  return {
+    props: {
+      graphData,
+    }
+  }
+}

src/pages/dashboard.tsx

@@ -22,7 +22,7 @@ import { parseCookies } from 'nookies'
 import { GetServerSideProps } from 'next'
 import getAPIClient from '../services/ssrApi'
 
-export default function Dashboard() {
+export default function Dashboard({grossAnualGraph, grossAnualYears} : any) {
 
   return (
     <DashboardView>
@@ -44,7 +44,10 @@ export default function Dashboard() {
 
       <section className='dashboard'>
         <GraphCard title='Consumo' subtitle='Gráfico de Consumo'>
-          <SingleBar title='Economia Bruta' subtitle='(Valores em R$ mil)' label={dataEconomiaBruta.labels} dataset='Consolidada' dataset1='Estimada' dataProps={dataEconomiaBruta.data} barLabel year/>
+          <SingleBar title='Economia Bruta' subtitle='(Valores em R$ mil)'
+          dataset='Consolidada' dataset1='Estimada'
+          dataProps={grossAnualGraph}
+          label={grossAnualYears} barLabel year/>
         </GraphCard>
         <GraphCard title='Economia Acumulado' subtitle='Economia Acumulada' singleBar>
           <SingleBar title='Economia Bruta Estimada e Acumulada' subtitle='(Valores em R$)' dataset='Acumulada' dataset1='Estimado' label={EconomiaAcumulada.label}  dataProps={EconomiaAcumulada.data2} barLabel month/>
@@ -66,8 +69,24 @@ export default function Dashboard() {
 }
 
 export const getServerSideProps: GetServerSideProps = async (ctx) => {
+  const apiClient = getAPIClient(ctx)
   const { ['@smartAuth-token']: token } = parseCookies(ctx)
 
+  let grossAnualGraph = [];
+
+
+
+  await apiClient.post('/economy/grossAnnual').then(res => {
+    grossAnualGraph = res.data.data
+    console.log(grossAnualGraph[0])
+  }).catch(res => {
+    console.log(res)
+  })
+
+
+
+  const grossAnualYears = grossAnualGraph.map((value) => value.ano)
+
   if (!token) {
     return {
       redirect: {
@@ -77,7 +96,11 @@ export const getServerSideProps: GetServerSideProps = async (ctx) => {
     }
   }
 
+
   return {
-    props: {}
+    props: {
+      grossAnualGraph,
+      grossAnualYears,
+    }
   }
 }

src/pages/faq.tsx

@@ -34,16 +34,14 @@ export default function commonQuestions({faqData}) {
 export const getServerSideProps: GetServerSideProps = async (ctx) => {
   const apiClient = getAPIClient(ctx)
   const { ['@smartAuth-token']: token } = parseCookies(ctx)
-  console.log('teste')
   let faqData = [];
 
 
   await apiClient.get('/faq').then(res => {
     faqData = res.data
   }).catch(res => {
-  console.log(res)
+    // console.log(res)
   })
-  console.table(faqData);
 
   if (!token) {
     return {

src/pages/grossSavings.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'
@@ -6,10 +8,23 @@ import { SingleBar } from '../components/graph/SingleBar'
 import Header from '../components/header/Header'
 import PageTitle from '../components/pageTitle/PageTitle'
 import { dataEconomiaBruta } from '../services/economiaBruta'
+import getAPIClient from '../services/ssrApi'
 
 import { GrossSavingsView } from '../styles/layouts/economy/grossSavings/GrossSavings'
 
-export default function GrossSavings() {
+function addMissingMonths(data) {
+  console.log(data[0].mes.slice(1, 1))
+}
+
+function verifyDataByYear(data) {
+  if (data.length === 12)
+    return true
+  else
+    return false
+}
+
+
+export default function GrossSavings({graphData, years}: any) {
   return (
     <GrossSavingsView>
       <Head>
@@ -18,8 +33,45 @@ export default function GrossSavings() {
       <Header name='' />
       <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)' label={dataEconomiaBruta.labels} dataset='Consolidada' dataset1='Estimada' dataProps={dataEconomiaBruta.data} barLabel year/>
+        <SingleBar title='Economia Bruta' subtitle='(Valores em R$ mil)'
+        dataset='Consolidada' dataset1='Estimada'
+
+        dataProps={graphData}
+        label={years} barLabel year/>
+
       </section>
     </GrossSavingsView>
   )
 }
+export const getServerSideProps: GetServerSideProps = async (ctx) => {
+  const apiClient = getAPIClient(ctx)
+  const { ['@smartAuth-token']: token } = parseCookies(ctx)
+
+  let graphData = [];
+
+  await apiClient.post('/economy/grossAnnual').then(res => {
+    graphData = res.data.data
+    console.log(graphData[0])
+  }).catch(res => {
+    console.log(res)
+  })
+
+  const years = graphData.map((value) => value.ano)
+  console.log(years)
+  if (!token) {
+    return {
+      redirect: {
+        destination: '/',
+        permanent: false
+      }
+    }
+  }
+
+
+  return {
+    props: {
+      graphData,
+      years,
+    }
+  }
+}

src/pages/index.tsx

@@ -101,7 +101,6 @@ export default function Home() {
 
         <p><a href='tel:+55(41) 3012-5900' >+55(41) 3012-5900</a><br/><a href='https://www.energiasmart.com.br' target="_blank" rel="noreferrer" >www.energiasmart.com.br</a></p>
       </LoginContainer>
-
     </LoginView>
   )
 }

src/pages/notifications.tsx

@@ -34,16 +34,14 @@ export default function Notifications({notificationData}: any) {
 export const getServerSideProps: GetServerSideProps = async (ctx) => {
   const apiClient = getAPIClient(ctx)
   const { ['@smartAuth-token']: token } = parseCookies(ctx)
-  console.log('teste')
-  let notificationData = [];
 
+  let notificationData = [];
 
   await apiClient.get('/notification').then(res => {
     notificationData = res.data
   }).catch(res => {
-  console.log(res)
+    // console.log(res)
   })
-  console.table(notificationData);
 
   if (!token) {
     return {

src/pages/pld/index.tsx

@@ -1,37 +1,126 @@
 import MenuItem from '@mui/material/MenuItem';
 import Select, { SelectChangeEvent } from '@mui/material/Select';
+import { GetServerSideProps } from 'next';
 import Head from 'next/head';
 import Link from 'next/link';
 import { useRouter } from 'next/router'
+import { parseCookies } from 'nookies';
 import React, { useEffect, useState } from 'react'
 
 import BasicButton from '../../components/buttons/basicButton/BasicButton';
-import Chart from '../../components/graph/Chart';
 import { LineBarChart } from '../../components/graph/LineBarChart';
 import LineChart from '../../components/graph/LineChart';
 import Header from '../../components/header/Header'
 import PageTitle from '../../components/pageTitle/PageTitle';
+import { api } from '../../services/api';
 import { EconomiaAcumulada } from '../../services/economiaAcumulada';
 import { EvolucaoPld } from '../../services/evolucaoPld';
+import getAPIClient from '../../services/ssrApi';
 import { GoBack, PldGraphView, PldTableView } from '../../styles/layouts/pld/PldView'
 import RenderIf from '../../utils/renderIf'
 
-export default function region() {
+interface pldInterface {
+  tableData: any,
+  graphByHourData: any,
+  graphByMonthData: any
+}
+
+export default function pld({tableData, graphByHourData, graphByMonthData}: pldInterface) {
   const router = useRouter()
   const { region } = router.query
 
+  const [date, setDate] = useState('');
+  const [select, setSelect] = useState('NORDESTE');
   const [page, setPage] = useState<string>('table')
-  const [age, setAge] = React.useState('');
+  const [day, setDay] = useState<string>('2')
+
+  const [dataByDay, setDataByDay] = useState([])
+
+  const [sul, setSul] = useState([])
+  const [norte, setNorte] = useState([])
+  const [sudeste, setSudeste] = useState([])
+  const [nordeste, setNordeste] = useState([])
 
   const handleChange = (event: SelectChangeEvent) => {
-    setAge(event.target.value);
+    setSelect(event.target.value);
+  };
+  const handleChangeDay = (event: SelectChangeEvent) => {
+    setDay(event.target.value);
   };
 
-  useEffect(() => {
+  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']
-    console.log(page)
-  }, [page])
 
-  function handleGreen(minimo, mi, ma, maximo) {
+  function getDataByDay() {
+    api.post('/pld/daily', {
+      "limit": 20,
+      "offset": 0,
+      "filters": [
+          {"type" : "=", "field" : "mes_ref", "value": `${day}/2022`, "row": true},
+          {"type" : "=", "field" : "pld.submercado", "value": select}
+        ],
+      "order": [{ "field": "day_calc", "direction": "asc" }]
+    }).then(res => {
+      setDataByDay(res.data.data)
+    }).catch(exception => console.log(exception))
+  }
+
+  function getDataByHour() {
+    api.post('/pld/schedule', {
+      "limit": 20,
+      "offset": 0,
+      "filters": [
+          {"type" : "=", "field" : "dia_num", "value": date, "row": true},
+          {"type" : "=", "field" : "submercado", "value": "SUL"}
+        ],
+      "order": [{ "field": "hour", "direction": "asc" }]
+    }).then(res => {
+      setSul(res.data.data)
+    }).catch(exception => console.log(exception))
+
+    api.post('/pld/schedule', {
+      "limit": 20,
+      "offset": 0,
+      "filters": [
+          {"type" : "=", "field" : "dia_num", "value": date, "row": true},
+          {"type" : "=", "field" : "submercado", "value": "SUDESTE"}
+        ],
+      "order": [{ "field": "hour", "direction": "asc" }]
+    }).then(res => {
+      setSudeste(res.data.data)
+    }).catch(exception => console.log(exception))
+
+    api.post('/pld/schedule', {
+      "limit": 20,
+      "offset": 0,
+      "filters": [
+          {"type" : "=", "field" : "dia_num", "value": date, "row": true},
+          {"type" : "=", "field" : "submercado", "value": "NORTE"}
+        ],
+      "order": [{ "field": "hour", "direction": "asc" }]
+    }).then(res => {
+      setNorte(res.data.data)
+    }).catch(exception => console.log(exception))
+
+    api.post('/pld/schedule', {
+      "limit": 20,
+      "offset": 0,
+      "filters": [
+          {"type" : "=", "field" : "dia_num", "value": date, "row": true},
+          {"type" : "=", "field" : "submercado", "value": "NORDESTE"}
+        ],
+      "order": [{ "field": "hour", "direction": "asc" }]
+    }).then(res => {
+      setNordeste(res.data.data)
+    }).catch(exception => console.log(exception))
+  }
+
+  useEffect(() => {
+    getDataByHour()
+    getDataByDay()
+    console.log(dataByDay)
+  }, [date, day, select])
+
+  function handleCellColor(minimo, mi, ma, maximo) {
     if (minimo - mi >= 100 && minimo - mi < 200) {
       return 'green'
     } else if ( mi*2 >= 200 && mi*2 < 250 ) {
@@ -68,97 +157,19 @@ export default function region() {
               </tr>
             </thead>
             <tbody>
+              {
+                tableData.map(data => {
+                  return <>
                     <tr>
-                <td className='tg-gceh'>2101</td>
+                      <td className='tg-gceh'>{data.year_month_formatted}</td>
-                <td className='tg-uulg red'>xxxx</td>
+                      <td className='tg-uulg red'>{data.nordeste}</td>
-                <td className='tg-gceh dullRed'>xxxx</td>
+                      <td className='tg-gceh dullRed'>{data.norte}</td>
-                <td className='tg-gceh dullGreen'>xxxx</td>
+                      <td className='tg-gceh dullGreen'>{data.sudeste}</td>
-                <td className='tg-uulg red'>xxxx</td>
+                      <td className='tg-uulg red'>{data.sul}</td>
-              </tr>
-              <tr>
-                <td className='tg-hq65'>2102</td>
-                <td className='tg-0tzy dullGreen'>xxxx</td>
-                <td className='tg-hq65 dullRed'>xxxx</td>
-                <td className='tg-hq65 dullGreen'>xxxx</td>
-                <td className='tg-0tzy dullGreen'>xxxx</td>
-              </tr>
-              <tr>
-                <td className="tg-gceh">2103</td>
-                <td className="tg-uulg red">xxxx</td>
-                <td className="tg-gceh dullGreen">xxxx</td>
-                <td className="tg-gceh dullRed">xxxx</td>
-                <td className="tg-gceh dullGreen">xxxx</td>
-              </tr>
-              <tr>
-                <td className='tg-hq65'>2104</td>
-                <td className='tg-0tzy dullGreen'>xxxx</td>
-                <td className='tg-hq65 dullRed'>xxxx</td>
-                <td className='tg-hq65 dullRed'>xxxx</td>
-                <td className='tg-0tzy dullGreen'>xxxx</td>
-              </tr>
-              <tr>
-                <td className='tg-gceh'>2105</td>
-                <td className='tg-uulg red'>xxxx</td>
-                <td className='tg-gceh dullGreen'>xxxx</td>
-                <td className='tg-gceh dullGreen'>xxxx</td>
-                <td className='tg-uulg red'>xxxx</td>
-              </tr>
-              <tr>
-                <td className='tg-hq65'>2106</td>
-                <td className='tg-0tzy dullGreen'>xxxx</td>
-                <td className='tg-hq65 dullRed'>xxxx</td>
-                <td className='tg-hq65 red'>xxxx</td>
-                <td className='tg-0tzy green'>xxxx</td>
-              </tr>
-              <tr>
-                <td className='tg-gceh'>2107</td>
-                <td className='tg-uulg red'>xxxx</td>
-                <td className='tg-gceh green'>xxxx</td>
-                <td className='tg-gceh dullRed'>xxxx</td>
-                <td className='tg-uulg red'>xxxx</td>
-              </tr>
-              <tr>
-                <td className='tg-hq65'>2108</td>
-                <td className='tg-0tzy dullGreen'>xxxx</td>
-                <td className='tg-hq65 dullGreen'>xxxx</td>
-                <td className='tg-hq65 green'>xxxx</td>
-                <td className='tg-0tzy dullRed'>xxxx</td>
-              </tr>
-              <tr>
-                <td className='tg-gceh'>2109</td>
-                <td className='tg-uulg red'>xxxx</td>
-                <td className='tg-gceh green'>xxxx</td>
-                <td className='tg-gceh dullRed'>xxxx</td>
-                <td className='tg-uulg red'>xxxx</td>
-              </tr>
-              <tr>
-                <td className='tg-hq65'>2110</td>
-                <td className='tg-0tzy red'>xxxx</td>
-                <td className='tg-hq65 green'>xxxx</td>
-                <td className='tg-hq65 red'>xxxx</td>
-                <td className='tg-0tzy red'>xxxx</td>
-              </tr>
-              <tr>
-                <td className='tg-gceh'>2111</td>
-                <td className='tg-uulg red'>xxxx</td>
-                <td className='tg-gceh dullGreen'>xxxx</td>
-                <td className='tg-gceh green'>xxxx</td>
-                <td className='tg-uulg red'>xxxx</td>
-              </tr>
-              <tr>
-                <td className='tg-hq65'>2112</td>
-                <td className='tg-0tzy green'>xxxx</td>
-                <td className='tg-hq65 dullGreen'>xxxx</td>
-                <td className='tg-hq65 dullRed'>xxxx</td>
-                <td className='tg-0tzy dullGreen'>xxxx</td>
-              </tr>
-              <tr>
-                <td className='tg-gceh'>2021</td>
-                <td className='tg-uulg red'>xxxx</td>
-                <td className='tg-gceh dullRed'>xxxx</td>
-                <td className='tg-gceh dullGreen'>xxxx</td>
-                <td className='tg-uulg red'>xxxx</td>
                     </tr>
+                  </>
+                })
+              }
               <tr>
                 <td className='tg-gceh'>Mín</td>
                 <td className='tg-uulg'>xxxx</td>
@@ -200,23 +211,65 @@ export default function region() {
           <section className='toolsbar'>
             <div className='select'>
               <Select
-                value={age}
+                value={select}
                 onChange={handleChange}
                 displayEmpty
                 sx={{
                   width: '100%'
                 }}
               >
-                <MenuItem value={0}>Norte</MenuItem>
+                <MenuItem value={'NORTE'}>Norte</MenuItem>
-                <MenuItem value={10}>Nordeste</MenuItem>
+                <MenuItem value={'NORDESTE'}>Nordeste</MenuItem>
-                <MenuItem value={20}>Sul</MenuItem>
+                <MenuItem value={'SUL'}>Sul</MenuItem>
-                <MenuItem value={30}>Sudeste</MenuItem>
+                <MenuItem value={'SUDESTE'}>Sudeste</MenuItem>
               </Select>
             </div>
-            <input type="date" data-date="" data-date-format="DD MMMM YYYY" value="2015-08-09"/>
+            <Select
+                value={day}
+                onChange={handleChangeDay}
+                displayEmpty
+                sx={{
+                  width: '100%'
+                }}
+              >
+                <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>
             <BasicButton title='Download (csv)' onClick={() => console.log()}/>
           </section>
-          <LineBarChart data1={EvolucaoPld.data} data3={EvolucaoPld.data1} dataset1={'Economia'} dataset2={'barra1'} dataset3={'2021'} label={EvolucaoPld.label} title='Evolução PLD (R$/MWh)' subtitle='' />
+          <LineBarChart
+          data1={dataByDay} data3={dataByDay}
+          dataset1={'Economia'} dataset2={'barra1'} dataset3={'2021'}
+          label={EvolucaoPld.label}
+          title='Evolução PLD (R$/MWh)' subtitle='' />
         </PldGraphView>
       </RenderIf>
 
@@ -225,12 +278,43 @@ export default function region() {
         <PldGraphView>
           <PageTitle title='Resumo PLD - Horas' subtitle=''/>
           <section className='toolsbar'>
-            <input type="date" data-date="" data-date-format="DD MMMM YYYY" value="2021-09-19"/>
+            <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()}/>
           </section>
-          <LineChart data1={EconomiaAcumulada.data3} data2={EconomiaAcumulada.data4} data3={EconomiaAcumulada.data5} data4={EconomiaAcumulada.data6} dataset1='NORDESTE' dataset2='NORTE' dataset3='SUDESTE' dataset4='SUL' title='PLD - 19/09/21' subtitle='' label={EconomiaAcumulada.label1} />
+          <LineChart data1={nordeste} data2={norte} data3={sudeste} data4={sul}
+          dataset1='NORDESTE' dataset2='NORTE' dataset3='SUDESTE' dataset4='SUL'
+          title={`PLD - ${date}`}
+          subtitle='' label={['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24']} />
         </PldGraphView>
       </RenderIf>
     </main>
   )
 }
+
+export const getServerSideProps: GetServerSideProps = async (ctx) => {
+  const apiClient = getAPIClient(ctx)
+  const { ['@smartAuth-token']: token } = parseCookies(ctx)
+
+  let tableData = [];
+
+  await apiClient.post('/pld/list').then(res => {
+    tableData = res.data.data
+  }).catch(res => {
+    console.log(res)
+  })
+
+  if (!token) {
+    return {
+      redirect: {
+        destination: '/',
+        permanent: false
+      }
+    }
+  }
+
+  return {
+    props: {
+      tableData,
+    }
+  }
+}

src/pages/resumoOperacao.tsx

@@ -49,7 +49,7 @@ export default function ResumoOperacao() {
     // data.unidades.map((value) => {
     //   console.log(`olha o valor ${value.name}`)
     // })
-    console.log(unidade)
+    // console.log(unidade)
     console.log(data.unidades.filter((value, index)=> value.value.includes(unidade)))
   }, [month, unidade])
 

src/services/economiaAcumulada.js

@@ -10,6 +10,6 @@ export const EconomiaAcumulada = {
 
 
   label: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'ago', 'set', 'out', 'nov', 'dez'],
-  label1: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30'],
+  label1: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24'],
   label3: ['0', '2', '4', '6', '8', '0', '2', '4', '6', '8', '0', '2', '4', '6', '8', '0', '2', '4', '6', '8', '0', '2', '4', '6', '8', '0', '2', '4', '6', '8', '0', '2', '4', '6', '8', '0', '2', '4', '6', '8', '0', '2', '4', '6', '8', '0', '2', '4', '6', '8',]
 }