Merge branch 'administativePages' into 'dev'

Administative pages See merge request kluppsoftware/smart-energia-web!81
2022-06-28 12:49:43 +00:00 · 2022-06-28 12:49:43 +00:00 · 8f231d114b
commit 8f231d114b
parent f573b6f269 0ba6332e41
44 changed files with 1429 additions and 487 deletions
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@ -0,0 +1,3 @@
+{
+  "cSpell.language": "pt-BR,en"
+}
--- a/next.config.js
+++ b/next.config.js
@ -4,6 +4,10 @@ const nextConfig = {
  compiler: {
    styledComponents: true,
  },
+  images: {
+    domains: ["kluppdevelopment.s3.sa-east-1.amazonaws.com"]
+ }
 }

 module.exports = nextConfig
+
--- a/package.json
+++ b/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"
--- a/src/components/banner/BannerView.ts
+++ b/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;
--- a/src/components/buttons/gradientButton/GradientButton.tsx
+++ b/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) {
-  const router = useRouter()
-
-  function handleClick() {
-    onClick()
-  }
+export default function GradientButton({ title, description, orange, purple, green, onClick }: GradientButtonInterface) {
+  // function handleClick() {
+  //   onClick()
+  // }

  return (
-    <GradientButtonView color={orange? 'orange' : purple? 'purple' : green? 'green' : 'orange' } onClick={() => link? router.push('/chartTelemetry') : handleClick()} >
+    <GradientButtonView color={orange? 'orange' : purple? 'purple' : green? 'green' : 'orange' } >
      <p>{title}</p>
      <p>{description}</p>
    </GradientButtonView>
--- a/src/components/buttons/gradientButton/GradientButtonView.ts
+++ b/src/components/buttons/gradientButton/GradientButtonView.ts
@ -32,8 +32,6 @@ export const GradientButtonView = styled.button`

  border-style: none;

-  cursor: pointer;
-
  * {
    margin: 0;
    padding: 0;
--- a/src/components/graph/DemRegXDemConChart.tsx
+++ b/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>
+  )
+}
--- a/src/components/graph/DiscretizedConsumptionChart.tsx
+++ b/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>
+  )
+}
--- a/src/components/graph/DiscretizedConsumptionChartLine.tsx
+++ b/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>
+  )
+}
--- a/src/components/graph/LineBarChart2.tsx
+++ b/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),
      },
--- a/src/components/graph/SingleBar.tsx
+++ b/src/components/graph/SingleBar.tsx
@ -24,15 +24,10 @@ interface SingleBarInterface{
  label: Array<string>,
  dataset: string,
  barLabel?: boolean | undefined,
-  year?: boolean | undefined,
-  month?: boolean | undefined,
-  dataset1?: string,
-
-
-
+  brutoAnual?: boolean | undefined,
 }

-export function SingleBar({ title, subtitle, dataProps, label, dataset, dataset1, barLabel, year, month }: SingleBarInterface) {
+export function SingleBar({ title, subtitle, dataProps, label, dataset, barLabel, brutoAnual }: SingleBarInterface) {
  const currentTime = new Date();

  const options: object = {
@ -79,16 +74,28 @@ export function SingleBar({ title, subtitle, dataProps, label, dataset, dataset1
  const data: any = {
    labels,
    datasets: [
+      {
+        label: 'Estimado',
+        data: [],
+        backgroundColor: '#C2d5fb',
+      },
      {
        label: dataset,
        data: dataProps.map((value, index) => {
          return parseFloat(value.economia_acumulada).toFixed(2)
        }),
        backgroundColor: (value, ctx) => {
-          return dataProps[value.dataIndex].dad_estimado == false ? '#255488' : '#C2d5fb'
+          return dataProps[value.dataIndex]?.dad_estimado == false ? '#255488' : '#C2d5fb'
        },
      },
-
+      {
+        label: '',
+        data: [dataProps[0]?.economia_acumulada?dataProps[0].economia_acumulada*1.1:1],
+        backgroundColor: 'transparent',
+        datalabels: {
+          display: false
+        }
+      },
    ],
  }

--- a/src/components/graph/fatorPotenciaChart.tsx
+++ b/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>
+  )
+}
--- a/src/components/graph/graphCard/ChartCard.tsx
+++ b/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>
--- a/src/components/graph/graphCard/ChartCardView.ts
+++ b/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;
--- a/src/components/header/Header.tsx
+++ b/src/components/header/Header.tsx
@ -6,58 +6,64 @@ import TextField from '@mui/material/TextField';

 import { HeaderView } from './HeaderView'
 import { parseCookies } from 'nookies';
-
-function stringToColor(string: string) {
-  let hash = 0;
-  let i;
-
-  for (i = 0; i < string.length; i += 1) {
-    hash = string.charCodeAt(i) + ((hash << 5) - hash);
-  }
-
-  let color = '#';
-
-  for (i = 0; i < 3; i += 1) {
-    const value = (hash >> (i * 8)) & 0xff;
-    color += `00${value.toString(16)}`.slice(-2);
-  }
-
-  return color;
-}
-
-function stringAvatar(name: string) {
-  return {
-    sx: {
-      bgcolor: stringToColor(name),
-    },
-    children: `${name.split(' ')[0][0]}`,
-  };
-}
+import { GetServerSideProps } from 'next';
+import getAPIClient from '../../services/ssrApi';

 interface headerInterface {
  name: string,
  admin?: boolean | undefined
+  logo?: string
 }

 export default function Header({name, admin}: headerInterface) {
+  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
+    }
+  }
+}
+
--- a/src/components/header/HeaderView.ts
+++ b/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;
-
-  margin: 0 0 75px 0;
+  justify-content: flex-end;

  width: 100%;

-  section {
-    width: 30%;
-
-    :last-child {
-      display: flex;
-      justify-content: flex-end;
-      align-items: center;
-
-      height: fit-content;
-    }
-  }
-
  .icon {
    display: flex;
    align-items: center;
@ -28,11 +14,11 @@ export const HeaderView = styled.header`
    min-width: 120px;
    height: 40px;

-    border-radius: 8px 0 0 8px;
+    border-radius: 8px;

    background-color: #254F7F;

-    transform: translateX(16px);
+    margin-right: 20px;

    p{
      color: white;
--- a/src/components/sidebar/Sidebar.tsx
+++ b/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)} >
--- a/src/contexts/AuthContext.tsx
+++ b/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}
--- a/src/pages/aboutUs.tsx
+++ b/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>
-        <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>
-
+      <section dangerouslySetInnerHTML={{__html: text[0].about}}/>
      <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
    }
  }
 }
--- a/src/pages/accumulatedSavings.tsx
+++ b/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'
-          dataset1='Estimada' dataProps={graphData}
-          label={years} barLabel  month/>
+        <SingleBar title='' subtitle='' dataset='Consolidada'
+          dataProps={graphData.sort((a, b) => {
+            if (parseFloat(a.mes.slice(0,2)) > parseFloat(b.mes.slice(1,2))) return 1
+            if (parseFloat(a.mes.slice(0,2)) < parseFloat(b.mes.slice(1,2))) return -1
+
+            return 0
+          })}
+          label={years} barLabel/>
      </section>
    </AccumulatedSavingsView>
  )
--- a/src/pages/administrative/clients/index.tsx
+++ b/src/pages/administrative/clients/index.tsx
@ -1,28 +1,29 @@
-import Box from '@mui/material/Box';
-import Modal from '@mui/material/Modal';
-import TextField from '@mui/material/TextField';
-import Typography from '@mui/material/Typography';
-import React, { useState } from 'react'
-
-import Snackbar from '@mui/material/Snackbar';
-import MuiAlert, { AlertProps } from '@mui/material/Alert';
-import ClientsTable from '../../../components/administrativeTables/ClientsTable';
+import Box from '@mui/material/Box'
+import Modal from '@mui/material/Modal'
+import TextField from '@mui/material/TextField'
+import Typography from '@mui/material/Typography'
+import React, { useState, useEffect } from 'react'
+import Image from 'next/image'
+import Snackbar from '@mui/material/Snackbar'
+import MuiAlert, { AlertProps } from '@mui/material/Alert'
+import ClientsTable from '../../../components/administrativeTables/ClientsTable'
 import BasicButton from '../../../components/buttons/basicButton/BasicButton'
-import FaqButton1 from '../../../components/buttons/faqButton/FaqButton1';
-import FaqButton2 from '../../../components/buttons/faqButton/FaqButton2';
+import FaqButton1 from '../../../components/buttons/faqButton/FaqButton1'
+import FaqButton2 from '../../../components/buttons/faqButton/FaqButton2'
 import Header from '../../../components/header/Header'
-import InputUploadImg from '../../../components/inputUploadImg/inputUpload';
-import { ClientsView } from '../../../styles/layouts/clients/ClientsView';
-import PageTitle from '../../../components/pageTitle/PageTitle';
-import ConfirmModal from '../../../components/modal/ConfirmModal';
-import { ConfirmModalView } from '../../../styles/layouts/modals/confirmModalView';
-import { api } from '../../../services/api';
-import { parseCookies } from 'nookies';
-import { GetServerSideProps } from 'next';
-import getAPIClient from '../../../services/ssrApi';

-import FormData from 'form-data';
-import { InputUploadView } from '../../../components/inputUploadImg/inputUploadView';
+import { ClientsView } from '../../../styles/layouts/clients/ClientsView'
+import PageTitle from '../../../components/pageTitle/PageTitle'
+import ConfirmModal from '../../../components/modal/ConfirmModal'
+import { ConfirmModalView } from '../../../styles/layouts/modals/confirmModalView'
+import { api } from '../../../services/api'
+import { parseCookies } from 'nookies'
+import { GetServerSideProps } from 'next'
+import getAPIClient from '../../../services/ssrApi'
+
+import FormData from 'form-data'
+import { InputUploadView } from '../../../components/inputUploadImg/inputUploadView'
+import { FormControl, InputLabel, MenuItem, Select } from '@mui/material'

 const style = {
  position: 'absolute' as const,
@ -36,17 +37,17 @@ const style = {
  boxShadow: 24,
  p: 4,
  overflowY: 'scroll'
-};
+}

 const Alert = React.forwardRef<HTMLDivElement, AlertProps>(function Alert(
  props,
-  ref,
+  ref
 ) {
-  return <MuiAlert elevation={6} ref={ref} variant="filled" {...props} />;
-});
+  return <MuiAlert elevation={6} ref={ref} variant="filled" {...props} />
+})

 export default function clients({ clients, userName }) {
-  const formData = new FormData();
+  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 handleClose = () => setOpen(false);
+  const handleOpen = () => setOpen(true)
+  const handleClose = () => setOpen(false)

  const [openModal, setOpenModal] = useState(false)
+  const [nivelAcess, setnivelAcess] = useState<any>(2);
+  const [openSnackSuccess, setOpenSnackSuccess] = useState<boolean>(false)
+  const [openSnackError, setOpenSnackError] = useState<boolean>(false)
+  const [openSnackSuccessDelete, setOpenSnackSuccessDelete] =
+    useState<boolean>(false)
+  const [openSnackErrorDelete, setOpenSnackErrorDelete] =
+    useState<boolean>(false)

-  const [openSnackSuccess, setOpenSnackSuccess] = useState<boolean>(false);
-  const [openSnackError, setOpenSnackError] = useState<boolean>(false);
-  const [openSnackSuccessDelete, setOpenSnackSuccessDelete] = useState<boolean>(false);
-  const [openSnackErrorDelete, setOpenSnackErrorDelete] = useState<boolean>(false);
-
-  const handleCloseSnack = (event?: React.SyntheticEvent | Event, reason?: string) => {
+  const handleCloseSnack = (
+    event?: React.SyntheticEvent | Event,
+    reason?: string
+  ) => {
    if (reason === 'clickaway') {
-      return;
+      return
    }

-    setOpenSnackError(false);
-    setOpenSnackSuccess(false);
-  };
-
-  const handleCloseSnackDelete = (event?: React.SyntheticEvent | Event, reason?: string) => {
-    if (reason === 'clickaway') {
-      return;
+    setOpenSnackError(false)
+    setOpenSnackSuccess(false)
  }

-    setOpenSnackErrorDelete(false);
-    setOpenSnackSuccessDelete(false);
-  };
+  const handleCloseSnackDelete = (
+    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 => {
-      api.delete(`/user/${client}`).then(res => {
+    await id.map((client) => {
+      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%' }}>
-      <Snackbar open={openSnackSuccess} autoHideDuration={4000} onClose={handleCloseSnack}>
-        <Alert onClose={handleCloseSnack} severity="success" sx={{ width: '100%' }}>
+      <Snackbar
+        open={openSnackSuccess}
+        autoHideDuration={4000}
+        onClose={handleCloseSnack}
+      >
+        <Alert
+          onClose={handleCloseSnack}
+          severity="success"
+          sx={{ width: '100%' }}
+        >
          Cliente cadastrada com Sucesso!
        </Alert>
      </Snackbar>
-      <Snackbar open={openSnackError} autoHideDuration={4000} onClose={handleCloseSnack}>
-        <Alert onClose={handleCloseSnack} severity="error" sx={{ width: '100%' }}>
+      <Snackbar
+        open={openSnackError}
+        autoHideDuration={4000}
+        onClose={handleCloseSnack}
+      >
+        <Alert
+          onClose={handleCloseSnack}
+          severity="error"
+          sx={{ width: '100%' }}
+        >
          Cliente não cadastrado!
        </Alert>
      </Snackbar>

-      <Snackbar open={openSnackSuccessDelete} autoHideDuration={4000} onClose={handleCloseSnackDelete}>
-        <Alert onClose={handleCloseSnackDelete} severity="success" sx={{ width: '100%' }}>
+      <Snackbar
+        open={openSnackSuccessDelete}
+        autoHideDuration={4000}
+        onClose={handleCloseSnackDelete}
+      >
+        <Alert
+          onClose={handleCloseSnackDelete}
+          severity="success"
+          sx={{ width: '100%' }}
+        >
          Cliente excluido com sucesso!
        </Alert>
      </Snackbar>
-      <Snackbar open={openSnackErrorDelete} autoHideDuration={4000} onClose={handleCloseSnackDelete}>
-        <Alert onClose={handleCloseSnackDelete} severity="error" sx={{ width: '100%' }}>
+      <Snackbar
+        open={openSnackErrorDelete}
+        autoHideDuration={4000}
+        onClose={handleCloseSnackDelete}
+      >
+        <Alert
+          onClose={handleCloseSnackDelete}
+          severity="error"
+          sx={{ width: '100%' }}
+        >
          Cliente não excluido!
        </Alert>
      </Snackbar>

      <ClientsView>
        <Header name={userName} admin />
-        <PageTitle title='Clientes' subtitle='Clientes Smart Energia'/>
-        <div className='buttons'>
-        <button className='btn2' onClick={handleOpen}>Adicionar</button>
-        <button className='btn1' onClick={() => setOpenModalInativar(true)}>Inativar</button>
+        <PageTitle title="Clientes" subtitle="Clientes Smart Energia" />
+        <div className="buttons">
+          <button className="btn2" onClick={handleOpen}>
+            Adicionar
+          </button>
+          <button className="btn1" onClick={() => setOpenModalInativar(true)}>
+            Inativar
+          </button>
        </div>
        <section>
-          <ClientsTable clients={clients} onChange={value => {
+          <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">
-        Adicionar Cliente Smart Energia</Typography>
+          <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>
-            <label  htmlFor="arquivo"> <p className='TitleButton'> Enviar foto de Perfil </p>   </label>
-            <input  type="file" name='arquivo' id='arquivo' onChange={onChange} />
+                  <label htmlFor="arquivo">
+                    {' '}
+                    <p className="TitleButton"> Enviar foto de Perfil </p>{' '}
+                  </label>
+                  <input
+                    type="file"
+                    name="arquivo"
+                    id="arquivo"
+                    onChange={onImageChange}
+                  />
                </div>
              </form>
            </div>
-
          </InputUploadView>
-        <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)}}>
-        <PageTitle title='Inativar Cliente(s)' subtitle='deseja realmente inativar os clientes selecionadas?'/>
+      <ConfirmModal
+        open={openModalInativar}
+        handleIsClose={(value) => {
+          setOpenModalInativar(value)
+        }}
+      >
+        <PageTitle
+          title="Inativar Cliente(s)"
+          subtitle="deseja realmente inativar os clientes selecionadas?"
+        />
        <ConfirmModalView>
-          <BasicButton title='Confirmar' onClick={() => handleDeleteClient(selectedClients)}/>
-          <BasicButton title='Cancelar' onClick={() => setOpenModalInativar(false)}/>
+          <BasicButton
+            title="Confirmar"
+            onClick={() => handleDeleteClient(selectedClients)}
+          />
+          <BasicButton
+            title="Cancelar"
+            onClick={() => setOpenModalInativar(false)}
+          />
        </ConfirmModalView>
      </ConfirmModal>
    </div>
@ -238,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)
    })

--- a/src/pages/administrative/faq/index.tsx
+++ b/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()
--- a/src/pages/administrative/general.tsx
+++ b/src/pages/administrative/general.tsx
@ -1,21 +1,30 @@
-import FormControl from '@mui/material/FormControl';
-import InputLabel from '@mui/material/InputLabel';
-import MenuItem from '@mui/material/MenuItem';
-import Select, { SelectChangeEvent } from '@mui/material/Select';
-import TextField from '@mui/material/TextField';
+import { SelectChangeEvent } from '@mui/material/Select';
 import { Editor } from '@tinymce/tinymce-react'
 import { GetServerSideProps } from 'next';
 import { parseCookies } from 'nookies';
 import React, { useRef, useState } from 'react'
-
+import BasicButton from '../../components/buttons/basicButton/BasicButton';
 import Header from '../../components/header/Header';
 import PageTitle from '../../components/pageTitle/PageTitle';
+import { api } from '../../services/api';
 import { GeneralView } from '../../styles/layouts/general/GeneralView'
+import MuiAlert, { AlertProps } from '@mui/material/Alert'
+import Snackbar from '@mui/material/Snackbar';
+
+const Alert = React.forwardRef<HTMLDivElement, AlertProps>(function Alert(
+  props,
+  ref
+) {
+  return <MuiAlert elevation={6} ref={ref} variant="filled" {...props} />
+})

 export default function index({userName}: any) {
  const editorRef = useRef(null);
  const [text, setText] = useState('');

+  const [openSnackSuccess, setOpenSnackSuccess] = useState<boolean>(false)
+  const [openSnackError, setOpenSnackError] = useState<boolean>(false)
+
  const log = () => {
    if (editorRef.current) {
      console.log(editorRef.current.getContent());
@ -26,13 +35,65 @@ export default function index({userName}: any) {
    setText(event.target.value);
  };

+  const handleCloseSnack = (
+    event?: React.SyntheticEvent | Event,
+    reason?: string
+  ) => {
+    if (reason === 'clickaway') {
+      return
+    }
+
+    setOpenSnackError(false)
+    setOpenSnackSuccess(false)
+  }
+
+  async function handleRegisterAboutUs() {
+    await api.post('/aboutUs', {
+      about: text
+    })
+    .then(res => setOpenSnackSuccess(true))
+    .catch(res => setOpenSnackError(false))
+  }
+
  return (
    <GeneralView>
+      <Snackbar
+        open={openSnackSuccess}
+        autoHideDuration={4000}
+        onClose={handleCloseSnack}
+      >
+        <Alert
+          onClose={handleCloseSnack}
+          severity="success"
+          sx={{ width: '100%' }}
+        >
+          Cadastrado com Sucesso!
+        </Alert>
+      </Snackbar>
+      <Snackbar
+        open={openSnackError}
+        autoHideDuration={4000}
+        onClose={handleCloseSnack}
+      >
+        <Alert
+          onClose={handleCloseSnack}
+          severity="error"
+          sx={{ width: '100%' }}
+        >
+          Não cadastrado!
+        </Alert>
+      </Snackbar>
      <Header name={userName} admin/>
      <PageTitle title='Sobre nós' subtitle='Alterar texto de sobre nós'/>
+      <div style={{width: '100%', display: 'flex', justifyContent: 'flex-start', alignItems: 'flex-start', marginTop: '30px', marginBottom: '10px'}}>
+        <BasicButton title='Salvar Texto' onClick={() => handleRegisterAboutUs()}/>
+      </div>
+
      <br />
      <Editor
        onInit={(evt, editor) => editorRef.current = editor}
+        onChange={value => console.log(value)}
+        onEditorChange={(newText) => setText(newText)}
        initialValue='        <p>A <strong>SMART ENERGIA</strong> é uma consultoria independente especializada em Gestão de Energia Elétrica, consolidada como uma das três maiores consultorias do Brasil.
          Devido à grande experiência em operações na CCEE – Câmara de Comercialização de Energia Elétrica e ANEEL, entrega resultados que superam as expectativas.</p>

@ -70,6 +131,8 @@ export default function index({userName}: any) {
          content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'
        }}
      />
+
+
    </GeneralView>
  )
 }
--- a/src/pages/administrative/industryInfo/index.tsx
+++ b/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="arquivo"> <p className='TitleButton'> Enviar PDF </p>   </label>
+          <label htmlFor="">Escolher arquivo</label>
          <input type="file" name='arquivo' id='arquivo' onChange={onChange}/>
-            </div>
        </form>
      </div>
-        </InputUploadView>
-        {/* <InputUploadPdf/> */}
-      </div>

      <BasicButton onClick={() => handleCreateClient()} title='Atualizar'/>

--- a/src/pages/chartTelemetry.tsx
+++ b/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
    }
  }
 }
-
--- a/src/pages/costIndicator.tsx
+++ b/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
--- a/src/pages/dashboard.tsx
+++ b/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'>
-          <SingleBar title='Economia Bruta' subtitle='(Valores em R$ mil)'
-          dataset='Consolidada' dataset1='Estimada'
+        <GraphCard title='Economia Bruta Anual' subtitle='Economia Bruta Estimada e Acumulada anual - (Valores em R$ mil)'>
+          <SingleBar title='' subtitle=''
+          dataset='Consolidada'
          dataProps={grossAnualGraph}
-          label={grossAnualYears} barLabel year/>
+          label={grossAnualYears} barLabel/>
        </GraphCard>

-        <GraphCard title='Economia Bruta Mensal' subtitle='Economia Bruta Estimada e Acumulada mensal' singleBar>
-          <SingleBar title='Economia Bruta Estimada e Acumulada' subtitle='(Valores em R$)'
-          dataset='Acumulada' dataset1='Estimado'
+        <GraphCard title='Economia Bruta Mensal' subtitle='Economia Bruta Estimada e Acumulada mensal - (Valores em R$)' singleBar>
+          <SingleBar title='' subtitle=''
+          dataset='Acumulada'
          dataProps={grossMensalGraph}
          label={grossMensalYears}
-          barLabel month/>
+          barLabel/>
        </GraphCard>

-        <GraphCard title='Cativo x Livre mensal' subtitle='Comparativo de Custo Estimado' singleBar>
+        <GraphCard title='Cativo x Livre mensal' subtitle='Comparativo de Custo Estimado - (Valores em R$/MWh)' singleBar>
          <LineBarChart2 data1={acumulatedGraph} data2={acumulatedGraph} data3={acumulatedGraph}
          label={ConsumoEstimado.label} dataset1='Custo' dataset2='Cativo' dataset3='Livre'
-          title='Custo Estimado' subtitle='(Valores em R$/MWh)' barLabel hashurado/>
+          title='' subtitle='' barLabel hashurado/>
        </GraphCard>

        <GraphCard title='Indicador de Custo' subtitle='Valores em R$/ MWh'>
-        <Chart title='Indicador de Custo' subtitle='(Valores em R$/MWh)'
+        <Chart title='' subtitle=''
        data1={costIndicator.filter((value, index) => value.mes.slice(3, 7).includes('2021')).sort((a, b) => {
          if (parseFloat(a.mes.slice(0,2)) > parseFloat(b.mes.slice(1,2))) return 1
          if (parseFloat(a.mes.slice(0,2)) < parseFloat(b.mes.slice(1,2))) return -1
--- a/src/pages/estimatedCost.tsx
+++ b/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>
  )
--- a/src/pages/grossSavings.tsx
+++ b/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)'
-        dataset='Consolidada' dataset1='Estimada'
+        <SingleBar title='' subtitle=''
+        dataset='Consolidada'

        dataProps={graphData}
-        label={years} barLabel year/>
+        label={years} barLabel/>

      </section>
    </GrossSavingsView>
--- a/src/pages/index.tsx
+++ b/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>
--- a/src/pages/industryInfo.tsx
+++ b/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 => {
--- a/src/pages/news.tsx
+++ b/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'/>

+      {
+        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
-          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>
+              {
+                <p dangerouslySetInnerHTML={{__html: data.description}} />
+              }
              <Button>
              <fieldset>
              <legend> <BasicButton title='Ver Mais...' onClick={() => console.log()}/></legend>
              </fieldset>
              </Button>
            </section>
+          </>
+        })
+      }

      <a href='https://www.energiasmart.com.br/noticias/'
      target={"_blank"}
@ -63,10 +57,10 @@ export const getServerSideProps: GetServerSideProps = async (ctx) => {
  const { ['@smartAuth-token']: token } = parseCookies(ctx)
  const { ['user-name']: userName } = parseCookies(ctx)

-  let news;
+  let news = [];

-  await axios.get('https://www.energiasmart.com.br/noticias/feed/').then(res => {
-    news = res.data
+  await apiClient.get('/news').then(res => {
+    news = res.data.data
  }).catch(res => {
    console.log(res)
  })
--- a/src/pages/notifications.tsx
+++ b/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>
--- a/src/pages/pld/index.tsx
+++ b/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>
--- a/src/pages/resumoOperacao.tsx
+++ b/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>
--- a/src/pages/telemetria.tsx
+++ b/src/pages/telemetria.tsx
@ -1,5 +1,5 @@
-import React from 'react';
-import { useRouter } from 'next/router'
+import React, { useState } from 'react';
+import router, { useRouter } from 'next/router'

 import Banner from '../components/banner/Banner';
 import { TelemetriaView, Buttons} from '../styles/layouts/Telemetria/TelemetriaView';
@ -18,16 +18,15 @@ import RenderIf from '../utils/renderIf';
 import { GetServerSideProps } from 'next';
 import { parseCookies } from 'nookies';

-
-
-
 export default function Telemetria({userName}: any) {
-  const [unity, setUnity] = React.useState('');
-  const [startDate, setStartDate] = React.useState('');
-  const [endDate, setEndDate] = React.useState('');
-  const [discretization, setDiscretization] = React.useState('');
+  const [unity, setUnity] = useState('');
+  const [startDate, setStartDate] = useState('');
+  const [endDate, setEndDate] = useState('');
+  const [discretization, setDiscretization] = useState('');

-  const [showChart, setShowChart] = React.useState(false);
+  const [date, setDate] = useState('');
+
+  const [showChart, setShowChart] = useState(false);

  const handleChange = (event: SelectChangeEvent) => {
    // setAge(event.target.value);
@ -72,50 +71,13 @@ export default function Telemetria({userName}: any) {

        <div className='select'>
          <p className='title' >Data inicial</p>
-          <FormControl sx={{ m: 1, minWidth: 120, width: 200 }} size="small">
-            <InputLabel id="demo-select-small">Data Inicial</InputLabel>
-            <Select
-              labelId="demo-select-small"
-              id="demo-select-small"
-              value={startDate}
-              label="Unidade"
-              onChange={value => setStartDate(value.target.value)}
-              fullWidth
-            >
-              <MenuItem value="">
-                <em>Nenhum</em>
-              </MenuItem>
-              <MenuItem value={10}>20/05/2022</MenuItem>
-              <MenuItem value={20}>10/06/2022</MenuItem>
-              <MenuItem value={30}>05/06/2021</MenuItem>
-              <MenuItem value={30}>05/06/2021</MenuItem>
-              <MenuItem value={30}>05/06/2021</MenuItem>
-            </Select>
-          </FormControl>
+          <input type="date" data-date="" data-date-format="DD MMMM YYYY" value={startDate} onChange={(value) => setStartDate(value.target.value)}/>
        </div>

        <div className='select'>
-          <p className='title' >Data Final</p>
-          <FormControl sx={{ m: 1, minWidth: 120, width: 200 }} size="small">
-            <InputLabel id="demo-select-small">Data Final</InputLabel>
-            <Select
-              labelId="demo-select-small"
-              id="demo-select-small"
-              value={endDate}
-              label="Unidade"
-              onChange={value => setEndDate(value.target.value)}
-              fullWidth
-            >
-              <MenuItem value="">
-                <em>Nenhum</em>
-              </MenuItem>
-              <MenuItem value={10}>20/05/2022</MenuItem>
-              <MenuItem value={20}>10/06/2022</MenuItem>
-              <MenuItem value={30}>05/06/2021</MenuItem>
-              <MenuItem value={30}>05/06/2021</MenuItem>
-              <MenuItem value={30}>05/06/2021</MenuItem>
-            </Select>
-          </FormControl>
+        <p className='title' >Data final</p>
+
+          <input type="date" data-date="" data-date-format="DD MMMM YYYY" value={endDate} onChange={(value) => setEndDate(value.target.value)}/>
        </div>

        <div className='select'>
@ -133,10 +95,6 @@ export default function Telemetria({userName}: any) {
              <MenuItem value="">
                <em>Nenhum</em>
              </MenuItem>
-              <MenuItem value="">07/09/2021</MenuItem>
-              <MenuItem value={10}>Filial 3</MenuItem>
-              <MenuItem value={20}>Twenty</MenuItem>
-              <MenuItem value={30}>Thirty</MenuItem>
            </Select>
          </FormControl>
        </div>
@ -147,7 +105,21 @@ export default function Telemetria({userName}: any) {
      </RenderIf>

      <Buttons>
-        <GradientButton title='GRÁFICO' description='Gerar gráficos com os dados selecionados' orange link />
+        <Link href={{
+          pathname: '/chartTelemetry',
+          query: {
+            startDate,
+            endDate,
+            discretization
+          },
+        }} >
+          {/* <GradientButton title='GRÁFICO' description='Gerar gráficos com os dados selecionados' orange/> */}
+          <button>
+            <p>GRÁFICO</p>
+            <p>Gerar gráficos com os dados selecionados</p>
+          </button>
+        </Link>
+        {/* <GradientButton title='GRÁFICO' description='Gerar gráficos com os dados selecionados' orange onClick={() => router.replace('/chartTelemetry')}/> */}
        <GradientButton title='DOWNLOADS' description='DADOS BRUTOS SELECIONADOS' purple />
        <GradientButton title='DADOS' description='hORÁRIOS DO MÊS ATUAL' onClick={() => setShowChart(!showChart)} green />
      </Buttons>
--- a/src/services/auth.ts
+++ b/src/services/auth.ts
@ -14,9 +14,10 @@ interface SignInRequestData {
 type UserObjectType = {
  name: string;
  email: string;
-  client_id: number
-  id: number,
-  role: number
+  client_id: number;
+  id: number;
+  role: number;
+  profile_picture?: string
 }

 export async function signInRequest(data: SignInRequestData) {
@ -33,7 +34,8 @@ export async function signInRequest(data: SignInRequestData) {
      email: res.data.user.email,
      client_id: res.data.user.client_id,
      id: res.data.user.id,
-      role: res.data.user.roles[0].pivot.role_id
+      role: res.data.user.roles[0].pivot.role_id,
+      profile_picture: res.data.user.profile_picture
    }
  }).catch(res => {
    exception = res
@ -46,7 +48,8 @@ export async function signInRequest(data: SignInRequestData) {
      email: user?.email,
      client_id: user?.client_id,
      id: user?.id,
-      role: user?.role
+      role: user?.role,
+      profile_picture: user?.profile_picture
    },
    exception
  }
@ -62,7 +65,8 @@ export default async function recoverUserInformation(id) {
      email: res.data.user.email,
      client_id: res.data.user.client_id,
      id: res.data.user.id,
-      role: res.data.user.roles[0].pivot.role_id
+      role: res.data.user.roles[0].pivot.role_id,
+      profile_picture: res.data.user.profile_picture
    }
  }).catch(res => {
    console.log(res)
@ -73,7 +77,8 @@ export default async function recoverUserInformation(id) {
      name: user?.name,
      email: user?.email,
      client_id: user?.client_id,
-      id: user?.id
+      id: user?.id,
+      profile_picture: user?.profile_picture
    }
  }
 }
--- a/src/styles/layouts/Telemetria/TelemetriaView.ts
+++ b/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;
--- a/src/styles/layouts/aboutUs/AboutUsView.ts
+++ b/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 {
--- a/src/styles/layouts/administerView/faq/faqView.ts
+++ b/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;
--- a/src/styles/layouts/administerView/notification/notificationView.ts
+++ b/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;
+    }
+  }

 `
--- a/src/styles/layouts/industryInfo/IndustryInfoView.ts
+++ b/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;
+  } */
+
+
+
 `
--- a/src/styles/layouts/pld/PldView.ts
+++ b/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`
--- a/yarn.lock
+++ b/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"