Merge branch 'administativePages' into 'dev'

Administative pages

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

.vscode/settings.json

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

next.config.js

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

package.json

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

src/components/banner/BannerView.ts

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

src/components/buttons/gradientButton/GradientButton.tsx

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

src/components/buttons/gradientButton/GradientButtonView.ts

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

src/components/graph/DemRegXDemConChart.tsx

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

src/components/graph/DiscretizedConsumptionChart.tsx

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

src/components/graph/DiscretizedConsumptionChartLine.tsx

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

src/components/graph/LineBarChart2.tsx

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

src/components/graph/SingleBar.tsx

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

src/components/graph/fatorPotenciaChart.tsx

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

src/components/graph/graphCard/ChartCard.tsx

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

src/components/graph/graphCard/ChartCardView.ts

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

src/components/header/Header.tsx

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

src/components/header/HeaderView.ts

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

src/components/sidebar/Sidebar.tsx

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

src/contexts/AuthContext.tsx

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

src/pages/aboutUs.tsx

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

src/pages/accumulatedSavings.tsx

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

src/pages/administrative/clients/index.tsx

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

src/pages/administrative/faq/index.tsx

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

src/pages/administrative/general.tsx

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

src/pages/administrative/industryInfo/index.tsx

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

src/pages/chartTelemetry.tsx

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

src/pages/costIndicator.tsx

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

src/pages/dashboard.tsx

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

src/pages/estimatedCost.tsx

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

src/pages/grossSavings.tsx

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

src/pages/index.tsx

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

src/pages/industryInfo.tsx

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

src/pages/news.tsx

@@ -12,44 +12,38 @@ import getAPIClient from '../services/ssrApi';
 import { Button, NewsView } from '../styles/layouts/news/NewsView'
 
 export default function aboutUs({userName, news}: any) {
-  console.log(news)
+  console.log(news.channel.item)
+
   return (
     <NewsView>
       <Head>
         <title>Smart Energia - Noticias</title>
       </Head>
-      <Header name={userName} />
+      {/* <Header name={userName} /> */}
-      <Banner title='Notícias' subtitle='Tudo de importante no setor de energia' imgSource='/assets/banners/news.png' />
+      <Banner title='Notícias' subtitle='Tudo de importante no setor de energia' imgSource='/assets/banners/news.png'/>
 
+      {
+        news.channel.item.map(data => {
+
+          return <>
             <section>
-        <h2>19 Abril 2022</h2>
+              <h2 dangerouslySetInnerHTML={{__html: data.pubDate}} />
+              <strong dangerouslySetInnerHTML={{__html: data.title}} />
               <strong>ANEEL APROVA REAJUSTE TARIFÁRIO ANUAL DA ENERGISA SERGIPE DE 16,46 % PARA O CONSUMIDOR RESIDENCIAL</strong>
               <br />
               <br />
-        <p>A Agência Nacional de Energia Elétrica (ANEEL) aprovou, nesta terça-feira (19/04) o reajuste tarifário anual da Energisa Sergipe – Distribuidora de Energia S.A (ESE).
+              {
-          As novas tarifas da empresa, que atende cerca de e 825 mil unidades consumidoras no Sergipe, entram em vigor nesta sexta, 22/04, com reajuste de 16,46 % para
+                <p dangerouslySetInnerHTML={{__html: data.description}} />
-          o consumidor residencial. <br />
+              }
-          Os itens que mais impactaram a correção foram os encargos setoriais, os custos de distribuição, a retirada dos componentes financeiros..</p>
-        <Button>
-        <fieldset>
-        <legend> <BasicButton title='Ver Mais...' onClick={() => console.log()}/></legend>
-        </fieldset>
-        </Button>
-
-          <h2>19 Abril 2022</h2>
-        <strong>NEEL APROVA REAJUSTE MÉDIO DE 20,36% NA TARIFA DE ENERGIA NO RN</strong>
-        <br />
-        <br />
-        <p>A Agência Nacional de Energia Elétrica (ANEEL) aprovou, nesta terça-feira (19/04) o reajuste tarifário anual da Energisa Sergipe – Distribuidora de Energia S.A (ESE).
-          As novas tarifas da empresa, que atende cerca de e 825 mil unidades consumidoras no Sergipe, entram em vigor nesta sexta, 22/04, com reajuste de 16,46 % para
-          o consumidor residencial. <br />
-          Os itens que mais impactaram a correção foram os encargos setoriais, os custos de distribuição, a retirada dos componentes financeiros..</p>
               <Button>
               <fieldset>
               <legend> <BasicButton title='Ver Mais...' onClick={() => console.log()}/></legend>
               </fieldset>
               </Button>
             </section>
+          </>
+        })
+      }
 
       <a href='https://www.energiasmart.com.br/noticias/'
       target={"_blank"}
@@ -63,10 +57,10 @@ export const getServerSideProps: GetServerSideProps = async (ctx) => {
   const { ['@smartAuth-token']: token } = parseCookies(ctx)
   const { ['user-name']: userName } = parseCookies(ctx)
 
-  let news;
+  let news = [];
 
-  await axios.get('https://www.energiasmart.com.br/noticias/feed/').then(res => {
+  await apiClient.get('/news').then(res => {
-    news = res.data
+    news = res.data.data
   }).catch(res => {
     console.log(res)
   })

src/pages/notifications.tsx

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

src/pages/pld/index.tsx

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

src/pages/resumoOperacao.tsx

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

src/pages/telemetria.tsx

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

src/services/auth.ts

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

src/styles/layouts/Telemetria/TelemetriaView.ts

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

src/styles/layouts/aboutUs/AboutUsView.ts

@@ -22,7 +22,6 @@ export const AboutUsView = styled.main`
     }
   }
 
-  section {
   article {
     display: flex;
     justify-content: flex-end;
@@ -38,7 +37,6 @@ export const AboutUsView = styled.main`
       flex-direction: column;
     }
   }
-  }
 
   @media (max-width: 1008px) {
     li {

src/styles/layouts/administerView/faq/faqView.ts

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

src/styles/layouts/administerView/notification/notificationView.ts

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

src/styles/layouts/industryInfo/IndustryInfoView.ts

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

src/styles/layouts/pld/PldView.ts

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

yarn.lock

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