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

src/components/buttons/gradientButton/GradientButton.tsx

@@ -15,12 +15,12 @@ interface GradientButtonInterface {
 }
 
 export default function GradientButton({ title, description, orange, purple, green, onClick }: GradientButtonInterface) {
-  // function handleClick() {
+  function handleClick() {
-  //   onClick()
+    onClick()
-  // }
+  }
 
   return (
-    <GradientButtonView color={orange? 'orange' : purple? 'purple' : green? 'green' : 'orange' } >
+    <GradientButtonView color={orange? 'orange' : purple? 'purple' : green? 'green' : 'orange'} onClick={() => handleClick()}>
       <p>{title}</p>
       <p>{description}</p>
     </GradientButtonView>

src/components/graph/SingleBar.tsx

@@ -56,7 +56,7 @@ export function SingleBar({ title, subtitle, dataProps, label, dataset, barLabel
         offset: -40,
         align: "start",
         font: {
-          size: 10
+          size: 12
         }
       },
       legend: {

src/components/header/Header.tsx

@@ -29,7 +29,7 @@ export default function Header({name, admin}: headerInterface) {
         !admin && profile_picture?
         <Image src={profile_picture} height={50} width={75}/>
         :
-        null
+        <Image src='https://kluppdevelopment.s3.sa-east-1.amazonaws.com/avatars/zcgw6O0FxZgxRmIs97WMcUddKurQJcIqSxBLStSc.png' height={50} width={75}/>
       }
     </HeaderView>
   )

src/components/header/HeaderView.ts

@@ -6,6 +6,8 @@ export const HeaderView = styled.header`
 
   width: 100%;
 
+  margin-bottom: 40px;
+
   .icon {
     display: flex;
     align-items: center;

src/pages/chartTelemetry.tsx

@@ -53,22 +53,22 @@ export default function chartTelemetry({userName}) {
   const [openDemandaContratada, setOpenDemandaContratada] = useState(false);
   const handleCloseDemandaContratada = () => setOpenDemandaContratada(false);
 
-  const [fatorPotenciaData, setFatorPotenciaData] = useState([]);
+  const [fatorPotenciaData, setFatorPotenciaData] = useState(null);
-  const [demRegXDemCon, setDemRegXDemCon] = useState([]);
+  const [demRegXDemCon, setDemRegXDemCon] = useState(null);
-  const [discretizedConsumptionData, setDiscretizedConsumptionData] = useState([]);
+  const [discretizedConsumptionData, setDiscretizedConsumptionData] = useState(null);
-  const [discretizedConsumptionDataReativa, setDiscretizedConsumptionDataReativa] = useState([]);
+  const [discretizedConsumptionDataReativa, setDiscretizedConsumptionDataReativa] = useState(null);
 
   const { ['user-cod_client']: cod_client } = parseCookies()
 
   const router = useRouter()
 
-  const {startDate, endDate} = router.query
+  const {startDate, endDate, unity, discretization} = router.query
 
   async function getChartsData() {
     console.log(router.query)
     await api.post('/telemetry/powerFactor', {
       "filters": [
-        {"type" : "=", "field": "med_5min.ponto", "value": "RSZFNAENTR101P"},
+        {"type" : "=", "field": discretization, "value": unity},
         {"type" : "between", "field": "dia_num", "value": [startDate, endDate]}
       ]
     }).then(res => {
@@ -77,13 +77,14 @@ export default function chartTelemetry({userName}) {
       console.log(res)
     })
 
-    await api.post('/telemetry/demand', {
+    await api.post('/telemetry/discretization', {
+      "type": "5_min",
       "filters": [
-        {"type" : "=", "field": "med_5min.ponto", "value": "RSZFNAENTR101P"},
+          {"type" : "=", "field": discretization, "value": unity},
           {"type" : "between", "field": "dia_num", "value": [startDate, endDate]}
         ]
     }).then(res => {
-      setDemRegXDemCon(res.data.data)
+      setDiscretizedConsumptionDataReativa(res.data.data)
     }).catch(res => {
       console.log(res)
     })
@@ -91,7 +92,7 @@ export default function chartTelemetry({userName}) {
   await api.post('/telemetry/discretization', {
     "type": "5_min",
     "filters": [
-          {"type" : "=", "field": "med_5min.ponto", "value": "RSZFNAENTR101P"},
+        {"type" : "=", "field": discretization, "value": unity},
         {"type" : "between", "field": "dia_num", "value": [startDate, endDate]}
       ]
     }).then(res => {
@@ -100,14 +101,13 @@ export default function chartTelemetry({userName}) {
       console.log(res)
     })
 
-    await api.post('/telemetry/discretization', {
+  await api.post('/telemetry/demand', {
-      "type": "5_min",
     "filters": [
-          {"type" : "=", "field": "med_5min.ponto", "value": "RSZFNAENTR101P"},
+      {"type" : "=", "field": discretization, "value": unity},
-          {"type" : "between", "field": "dia_num", "value": ["2022-01-03", "2022-01-03"]}
+      {"type" : "between", "field": "dia_num", "value": [startDate, endDate]}
     ]
     }).then(res => {
-      setDiscretizedConsumptionDataReativa(res.data.data)
+      setDemRegXDemCon(res.data.data)
     }).catch(res => {
       console.log(res)
     })
@@ -115,6 +115,7 @@ export default function chartTelemetry({userName}) {
 
   useEffect(() => {
     getChartsData()
+    console.log(fatorPotenciaData)
   }, [])
 
   return (
@@ -125,8 +126,20 @@ export default function chartTelemetry({userName}) {
       <Header name={userName} />
       <PageTitle title='Telemetria - Graficos' subtitle='Gráficos' />
       <section className='chartContainer'>
+        {
+          demRegXDemCon==null?
+          <div id="preloader_1">
+            <span></span>
+            <span></span>
+            <span></span>
+            <span></span>
+            <span></span>
+          </div>
+          :
+          <>
             <div onClick={() => setOpenFatorPotencia(true)}>
-          <FatorPotenciaChart title='Fator de Potencia' subtitle='' data1={fatorPotenciaData} data2={fatorPotenciaData} dataset1='Fator de Potencia' dataset2='Fator ref' label={fatorPotenciaData.map(value => value.hora)} />
+            <FatorPotenciaChart title='Fator de Potencia' subtitle='' data1={fatorPotenciaData}
+              data2={fatorPotenciaData} dataset1='Fator de Potencia' dataset2='Fator ref' label={FatorPotencia.label1} />
             </div>
             <Modal
               open={openFatorPotencia}
@@ -135,7 +148,8 @@ export default function chartTelemetry({userName}) {
               aria-describedby="modal-modal-description"
             >
               <Box sx={style}>
-          <FatorPotenciaChart title='Fator de Potencia' subtitle='' data1={fatorPotenciaData} data2={fatorPotenciaData} 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={FatorPotencia.label1} />
               </Box>
             </Modal>
 
@@ -163,7 +177,7 @@ 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'}/>
+                <DiscretizedConsumptionChart title='Consumo discretizado em 5 minutos' subtitle='' dataProps={discretizedConsumptionData} label={discretizedConsumptionData.map(value => value.minut)} dataset={'Consumo'} dataset1='Estimado' month/>
               </Box>
             </Modal>
 
@@ -180,6 +194,8 @@ export default function chartTelemetry({userName}) {
                 <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>
     </ChatTelemetryView>
   )

src/pages/news.tsx

@@ -2,6 +2,7 @@ import axios from 'axios';
 import { GetServerSideProps } from 'next';
 import Head from 'next/head';
 import Link from 'next/link'
+import { Router } from 'next/router';
 import { parseCookies } from 'nookies';
 import React from 'react'
 
@@ -27,17 +28,17 @@ export default function aboutUs({userName, news}: any) {
 
           return <>
             <section>
-              <h2 dangerouslySetInnerHTML={{__html: data.pubDate}} />
+              <h2 dangerouslySetInnerHTML={{__html: data.pubDate.slice(0, -5)}} />
               <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 dangerouslySetInnerHTML={{__html: data.description}} />
+                <p dangerouslySetInnerHTML={{__html: data.description}} className='description'/>
               }
               <Button>
               <fieldset>
-              <legend> <BasicButton title='Ver Mais...' onClick={() => console.log()}/></legend>
+              <legend> <BasicButton title='Ver Mais...' onClick={() => window.open(data.guid)}/></legend>
               </fieldset>
               </Button>
             </section>

src/pages/resumoOperacao.tsx

@@ -86,8 +86,6 @@ export default function ResumoOperacao({tableData, clientsData, userName, client
     } else {
       setTableDataState(tableData)
     }
-
-    console.log(month)
   }, [month, unidade])
 
   return (
@@ -138,6 +136,7 @@ export default function ResumoOperacao({tableData, clientsData, userName, client
       <table className="tg">
         <thead>
           <tr>
+            <th className='tg-8oo6'>Mês </th>
             <th className='tg-8oo6'>Unidade </th>
             <th className='tg-8oo6'>Operação</th>
             <th className='tg-8oo6'>Montante (MWh)</th>
@@ -151,6 +150,7 @@ export default function ResumoOperacao({tableData, clientsData, userName, client
             tableDataState.map((value, index) => {
               return <>
                 <tr>
+                  <td key={index} className='tg-gceh'>{value.mes}</td>
                   <td key={index} className='tg-gceh'>{value.cod_smart_unidade}</td>
                   <td key={index} className='tg-uulg'>{value.operacao}</td>
                   <td key={index} className='tg-gceh'>{parseFloat(value.montante_nf).toLocaleString('pt-br')}</td>

src/pages/telemetria.tsx

@@ -1,5 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
-import router, { useRouter } from 'next/router'
 
 import Banner from '../components/banner/Banner';
 import { TelemetriaView, Buttons} from '../styles/layouts/Telemetria/TelemetriaView';
@@ -17,26 +16,154 @@ import { FatorPotencia } from '../services/fatorPotencia';
 import RenderIf from '../utils/renderIf';
 import { GetServerSideProps } from 'next';
 import { parseCookies } from 'nookies';
+import { api } from '../services/api';
+import Snackbar from '@mui/material/Snackbar'
+import MuiAlert, { AlertProps } from '@mui/material/Alert'
+import getAPIClient from '../services/ssrApi';
 
-export default function Telemetria({userName}: any) {
+const style = {
+  position: 'absolute' as const,
+  top: '50%',
+  left: '50%',
+  transform: 'translate(-50%, -50%)',
+  width: 400,
+  bgcolor: 'background.paper',
+  border: '2px solid #000',
+  boxShadow: 24,
+  p: 4,
+};
+
+const Alert = React.forwardRef<HTMLDivElement, AlertProps>(function Alert(
+  props,
+  ref
+) {
+  return <MuiAlert elevation={6} ref={ref} variant="filled" {...props} />
+})
+
+export default function Telemetria({userName, clients}: any) {
   const [unity, setUnity] = useState('');
   const [startDate, setStartDate] = useState('');
   const [endDate, setEndDate] = useState('');
   const [discretization, setDiscretization] = useState('');
 
+  const [openSnackSuccess, setOpenSnackSuccess] = useState<boolean>(false)
+  const [openSnackError, setOpenSnackError] = useState<boolean>(false)
+  const handleCloseSnack = (
+    event?: React.SyntheticEvent | Event,
+    reason?: string
+  ) => {
+    if (reason === 'clickaway') {
+      return
+    }
+
+    setOpenSnackError(false)
+    setOpenSnackSuccess(false)
+  }
+
+  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);
+  }
+
+  const [tableData, setTableData] = useState(null)
+
   const [date, setDate] = useState('');
 
   const [showChart, setShowChart] = useState(false);
 
-  const handleChange = (event: SelectChangeEvent) => {
+  const [exception, setException] = useState(false);
-    // setAge(event.target.value);
+  const [send, setSend] = useState(false);
-  };
+
+  const [open, setOpen] = useState(false);
+
+  async function getTableData() {
+    if (startDate!=='' && endDate!=='' && send)
+      setOpen(true)
+      await api.post('/telemetry/powerFactor', {
+        "type": "15_min",
+        "filters": [
+            {"type" : "=", "field": "med_5min.ponto", "value": "RSZFNAENTR101P"},
+            {"type" : "between", "field": "dia_num", "value": ["2022-01-03", "2022-01-03"]}
+          ]
+      }).then(res => {
+        setTableData(res.data.data)
+        setOpenSnackError(false)
+        setOpenSnackSuccess(true)
+        setOpen(false)
+      }).catch(res => {
+        setException(true)
+        setSend(false)
+        setOpenSnackError(true)
+        setOpenSnackSuccess(false)
+        console.log(res)
+      })
+  }
+
+  useEffect(() => {
+    setSend(false)
+  }, [startDate, endDate])
+
 
   return(
     <TelemetriaView>
       <Head>
         <title>Smart Energia - Telemetria</title>
       </Head>
+      <Snackbar
+        open={openSnackSuccess}
+        autoHideDuration={4000}
+        onClose={handleCloseSnack}
+      >
+        <Alert
+          onClose={handleCloseSnack}
+          severity="success"
+          sx={{ width: '100%' }}
+        >
+          Dados coletados com sucesso com Sucesso!
+        </Alert>
+      </Snackbar>
+      <Snackbar
+        open={openSnackError}
+        autoHideDuration={4000}
+        onClose={handleCloseSnack}
+      >
+        <Alert
+          onClose={handleCloseSnack}
+          severity="error"
+          sx={{ width: '100%' }}
+        >
+          Não foi possivel pegar os dados!
+        </Alert>
+      </Snackbar>
+
       <Header name={userName} />
       <Banner title ='Telemetria' subtitle='Dados Coletados do Sistema de Coleta de Dados de Energia -
       SCDE da Câmara de Comercialização de Energia Elétrica - CCEE,
@@ -59,24 +186,24 @@ export default function Telemetria({userName}: any) {
               <MenuItem value="">
                 <em>Nenhum</em>
               </MenuItem>
+              <MenuItem value="RSZFNAENTR101P">RSZFNAENTR101P</MenuItem>
 
-              <MenuItem value={10}>Unidade 1</MenuItem>
+              {
-              <MenuItem value={20}>Unidade 2</MenuItem>
+                clients.map((value) => {
-              <MenuItem value={30}>Unidade 3</MenuItem>
+                  return <MenuItem key={1} value={value.codigo_scde}>{value.codigo_scde}</MenuItem>
-              <MenuItem value={30}>Unidade 4</MenuItem>
+                })
-              <MenuItem value={30}>Unidade 5</MenuItem>
+              }
             </Select>
           </FormControl>
         </div>
 
         <div className='select'>
           <p className='title' >Data inicial</p>
-          <input type="date" data-date="" data-date-format="DD MMMM YYYY" value={startDate} onChange={(value) => setStartDate(value.target.value)}/>
+          <input type="date" data-date="" data-date-format="DD MMMM YYYY" value={startDate} onChange={(value) => setStartDate(value.target.value)} onSelect={value => console.log(value)}/>
         </div>
 
         <div className='select'>
           <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>
 
@@ -95,11 +222,66 @@ export default function Telemetria({userName}: any) {
               <MenuItem value="">
                 <em>Nenhum</em>
               </MenuItem>
+              <MenuItem value="5_min">5 minutos</MenuItem>
+              <MenuItem value="15_min">15 minutos</MenuItem>
+              <MenuItem value="1_hora">1 hora</MenuItem>
+              <MenuItem value="1_dia">1 dia</MenuItem>
             </Select>
           </FormControl>
         </div>
+      <button className='sendButton' onClick={() => {
+        setSend(true)
+        getTableData()
+      }}>Enviar!</button>
       </section>
 
+      <RenderIf isTrue={startDate!=='' && endDate!=='' && tableData===null && exception === false && send}>
+        <div className='modal'>
+          <div id="preloader_1">
+            <span></span>
+            <span></span>
+            <span></span>
+            <span></span>
+            <span></span>
+          </div>
+        </div>
+      </RenderIf>
+      <RenderIf isTrue={startDate!=='' && endDate!=='' && tableData!==null}>
+        <table className="tg">
+          <thead>
+            <tr>
+              <th className='tg-8oo6'>Ponto</th>
+              <th className='tg-8oo6'>Numero do dia</th>
+              <th className='tg-8oo6'>Dia formatado</th>
+              <th className='tg-8oo6'>Hora</th>
+              <th className='tg-8oo6'>Minuto</th>
+              <th className='tg-8oo6'>Consumo</th>
+              <th className='tg-8oo6'>Reativa</th>
+            </tr>
+          </thead>
+          <tbody>
+            {
+              tableData!==null?
+              tableData?.map((value, index) => {
+                return <>
+                  <tr>
+                    <td key={index} className='tg-gceh'>{value.ponto}</td>
+                    <td key={index} className='tg-gceh'>{parseFloat(value.dia_num)}</td>
+                    <td key={index} className='tg-uulg'>{value.day_formatted}</td>
+                    <td key={index} className='tg-gceh'>{value.hora}</td>
+                    <td key={index} className='tg-gceh'>{value.minut}</td>
+                    <td key={index} className='tg-uulg'>{parseFloat(value.consumo).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2})}</td>
+                    <td key={index} className='tg-gceh'>{parseFloat(value.reativa).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2})}</td>
+                  </tr>
+                </>
+              })
+              :
+              null
+            }
+          </tbody>
+        </table>
+      </RenderIf>
+
       <RenderIf isTrue={showChart}>
         <LineChart title='Fator de Potencia' subtitle='' data1={FatorPotencia.data} data2={FatorPotencia.data2} dataset1='Fator de Potencia' dataset2='Fator ref.' label={FatorPotencia.label1} />
       </RenderIf>
@@ -110,17 +292,20 @@ export default function Telemetria({userName}: any) {
           query: {
             startDate,
             endDate,
-            discretization
+            discretization: discretization==='5_min'? 'med_5min.ponto' : discretization==='15_min'? '15min.ponto' : discretization==='1_hora'? 'med_1hora.ponto' : discretization==='1_dia'? 'med_1dia.ponto' : 'med_5min.ponto',
+            unity
           },
         }} >
-          {/* <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 onClick={() => {
-        <GradientButton title='DOWNLOADS' description='DADOS BRUTOS SELECIONADOS' purple />
+          const html = document.querySelector("table").outerHTML;
+          htmlToCSV(html, "telemetria.csv");
+          console.log('clicando')
+        }}/>
         <GradientButton title='DADOS' description='hORÁRIOS DO MÊS ATUAL' onClick={() => setShowChart(!showChart)} green />
       </Buttons>
       <p className='paragraph'>
@@ -132,6 +317,7 @@ export default function Telemetria({userName}: any) {
           medição - Distribuidora.
         </i>
       </p>
+
     </TelemetriaView>
   )
 }
@@ -139,6 +325,22 @@ export default function Telemetria({userName}: any) {
 export const getServerSideProps: GetServerSideProps = async (ctx) => {
   const { ['@smartAuth-token']: token } = parseCookies(ctx)
   const { ['user-name']: userName } = parseCookies(ctx)
+  const { ['user-client_id']: id } = parseCookies(ctx)
+  const apiClient = getAPIClient(ctx)
+
+  let clients = []
+
+  await apiClient.post('/units', {
+		"filters": [
+			{"type" : "=", "field": "dados_cadastrais.cod_smart_cliente", "value": id}
+		],
+		"fields": ["cod_smart_unidade", "codigo_scde"],
+		"distinct": true
+  }).then(res => {
+    clients = res.data.data
+  }).catch(res => {
+    console.log(res)
+  })
 
   if (!token) {
     return {
@@ -151,7 +353,8 @@ export const getServerSideProps: GetServerSideProps = async (ctx) => {
 
   return {
     props: {
-      userName
+      userName,
+      clients
     }
   }
 }

src/styles/Home.module.css

@@ -19,106 +19,3 @@
   align-items: center;
   font-family: 'Poppins';
 }
-
-.footer {
-  display: flex;
-  flex: 1;
-  padding: 2rem 0;
-  border-top: 1px solid #eaeaea;
-  justify-content: center;
-  align-items: center;
-}
-
-.footer a {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-grow: 1;
-}
-
-.title a {
-  color: #0070f3;
-  text-decoration: none;
-}
-
-.title a:hover,
-.title a:focus,
-.title a:active {
-  text-decoration: underline;
-}
-
-.title {
-  margin: 0;
-  line-height: 1.15;
-  font-size: 4rem;
-}
-
-.title,
-.description {
-  text-align: center;
-}
-
-.description {
-  margin: 4rem 0;
-  line-height: 1.5;
-  font-size: 1.5rem;
-}
-
-.code {
-  background: #fafafa;
-  border-radius: 5px;
-  padding: 0.75rem;
-  font-size: 1.1rem;
-  font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
-    Bitstream Vera Sans Mono, Courier New, monospace;
-}
-
-.grid {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-wrap: wrap;
-  max-width: 800px;
-}
-
-.card {
-  margin: 1rem;
-  padding: 1.5rem;
-  text-align: left;
-  color: inherit;
-  text-decoration: none;
-  border: 1px solid #eaeaea;
-  border-radius: 10px;
-  transition: color 0.15s ease, border-color 0.15s ease;
-  max-width: 300px;
-}
-
-.card:hover,
-.card:focus,
-.card:active {
-  color: #0070f3;
-  border-color: #0070f3;
-}
-
-.card h2 {
-  margin: 0 0 1rem 0;
-  font-size: 1.5rem;
-}
-
-.card p {
-  margin: 0;
-  font-size: 1.25rem;
-  line-height: 1.5;
-}
-
-.logo {
-  height: 1em;
-  margin-left: 0.5rem;
-}
-
-@media (max-width: 600px) {
-  .grid {
-    width: 100%;
-    flex-direction: column;
-  }
-}

src/styles/layouts/ChatTelemetry/ChatTelemetryView.ts

@@ -2,14 +2,14 @@ import styled from "styled-components";
 
 export const ChatTelemetryView = styled.main`
   display: flex;
-  justify-content: center;
+  justify-content: flex-start;
   align-items: center;
 
   flex-direction: column;
 
   width: 100%;
 
-  padding-top: 0px!important;
+  padding-top: 40px!important;
 
   .chartContainer {
     display: flex;
@@ -18,4 +18,43 @@ export const ChatTelemetryView = styled.main`
 
     width: 100%;
   }
+
+  #preloader_1{
+    position:absolute;
+    top: 50%;
+    left: 50%;
+  }
+  #preloader_1 span{
+    display:block;
+    bottom:0px;
+    width: 9px;
+    height: 5px;
+    background:#254F7F;
+    position:absolute;
+    animation: preloader_1 1.5s  infinite ease-in-out;
+  }
+
+  #preloader_1 span:nth-child(2){
+    left:11px;
+    animation-delay: .2s;
+
+  }
+  #preloader_1 span:nth-child(3){
+    left:22px;
+    animation-delay: .4s;
+  }
+  #preloader_1 span:nth-child(4){
+    left:33px;
+    animation-delay: .6s;
+  }
+  #preloader_1 span:nth-child(5){
+    left:44px;
+    animation-delay: .8s;
+  }
+  @keyframes preloader_1 {
+    0% {height:5px;transform:translateY(0px);background:rgb(1,138,138);}
+    25% {height:30px;transform:translateY(15px);background:#254F7F;}
+    50% {height:5px;transform:translateY(0px);background:rgb(231,153,47);}
+    100% {height:5px;transform:translateY(0px);background:rgb(1,138,138);}
+  }
 `

src/styles/layouts/Telemetria/TelemetriaView.ts

@@ -4,6 +4,64 @@ export const TelemetriaView = styled.main`
   padding: 20px;
   width: 100%;
 
+  .modal {
+    position: absolute;
+
+    background: rgba( 255, 255, 255, 0.25 );
+    box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
+    backdrop-filter: blur( 4px );
+    -webkit-backdrop-filter: blur( 4px );
+    border-radius: 10px;
+    border: 1px solid rgba( 255, 255, 255, 0.18 );
+
+    top: 0;
+    left: 0;
+
+    width: 100%;
+    height: 100vh;
+
+    z-index: 999;
+  }
+
+  #preloader_1{
+    position:absolute;
+    top: 50%;
+    left: 50%;
+  }
+  #preloader_1 span{
+    display:block;
+    bottom:0px;
+    width: 9px;
+    height: 5px;
+    background:#254F7F;
+    position:absolute;
+    animation: preloader_1 1.5s  infinite ease-in-out;
+  }
+
+  #preloader_1 span:nth-child(2){
+    left:11px;
+    animation-delay: .2s;
+
+  }
+  #preloader_1 span:nth-child(3){
+    left:22px;
+    animation-delay: .4s;
+  }
+  #preloader_1 span:nth-child(4){
+    left:33px;
+    animation-delay: .6s;
+  }
+  #preloader_1 span:nth-child(5){
+    left:44px;
+    animation-delay: .8s;
+  }
+  @keyframes preloader_1 {
+    0% {height:5px;transform:translateY(0px);background:rgb(1,138,138);}
+    25% {height:30px;transform:translateY(15px);background:#254F7F;}
+    50% {height:5px;transform:translateY(0px);background:rgb(231,153,47);}
+    100% {height:5px;transform:translateY(0px);background:rgb(1,138,138);}
+  }
+
   .title {
     color: black;
     font-weight: 600;
@@ -12,6 +70,105 @@ export const TelemetriaView = styled.main`
     margin: 0 0 0 10px;
   }
 
+  .sendButton {
+    width: 60px;
+    height: 40px;
+
+    background:#254F7F;
+    color: white;
+
+    border: none;
+    border-radius: 8px;
+
+    font-family: 'Poppins';
+    font-size: 14px;
+
+    color: #FFFFFF;
+
+    margin-top: 20px;
+  }
+
+  table {
+    display: none;
+  }
+
+  .tg{
+    border-collapse:collapse;
+    border-spacing:0;
+    font-family:Poppins;
+    width: 100%;
+  }
+
+  .tg td{
+    border-color:#DDDFE1;
+    border-style:solid;
+    border-width:1px;
+    font-family:Poppins;
+    font-size: 10px;
+    overflow:hidden;
+    padding:17px 30px;
+    word-break:normal;
+  }
+
+  .tg th{
+    border-color:#DDDFE1;
+    border-style:solid;
+    border-width:1px;
+    font-family:Poppins;
+    font-size:10px;
+    font-weight:500;
+    overflow:hidden;
+    padding:10px 5px;
+    word-break:normal;
+  }
+  .tg .tg-8oo6{
+    color:#464a53;
+    font-size:13px;
+    text-align:center;
+    vertical-align:top;
+    padding: 10px 18px;
+    text-align: center;
+  }
+  .tg .tg-uulg{
+    background-color:#efefef;
+    color:#abafb3;
+    font-size:14px;
+    text-align:center;
+    vertical-align:top
+  }
+  .tg .tg-gceh{
+    background-color:#efefef;
+    color:#6a707e;
+    font-size:14px;
+    text-align:center;
+    vertical-align:top
+  }
+  .tg .tg-0tzy{
+    color:#abafb3;
+    font-size:14px;
+    text-align:center;
+    vertical-align:top
+  }
+  .tg .tg-hq65{color:#6a707e;
+    font-size:14px;
+    text-align:center;
+    vertical-align:top
+  }
+
+  .tg .tg-baqh{
+    text-align:center;
+    vertical-align:top
+  }
+  .tg .tg-0lax{
+    text-align:left;
+    vertical-align:top
+  }
+  .tg .tg-womg{
+    background-color:#dddfe1;
+    text-align:center;
+    vertical-align:top
+  }
+
   input {
     width: 15rem;
     height: 2.5rem;
@@ -132,6 +289,57 @@ export const Buttons = styled.div`
     }
   }
 
+  #preloader_1{
+    position:absolute;
+    top: 50%;
+    left: 50%;
+  }
+  #preloader_1 span{
+    display:block;
+    bottom:0px;
+    width: 9px;
+    height: 5px;
+    background:#254F7F;
+    position:absolute;
+    animation: preloader_1 1.5s  infinite ease-in-out;
+  }
+
+  #preloader_1 span:nth-child(2){
+    left:11px;
+    animation-delay: .2s;
+
+  }
+  #preloader_1 span:nth-child(3){
+    left:22px;
+    animation-delay: .4s;
+  }
+  #preloader_1 span:nth-child(4){
+    left:33px;
+    animation-delay: .6s;
+  }
+  #preloader_1 span:nth-child(5){
+    left:44px;
+    animation-delay: .8s;
+  }
+  @keyframes preloader_1 {
+    0% {height:5px;transform:translateY(0px);background:rgb(1,138,138);}
+    25% {height:30px;transform:translateY(15px);background:#254F7F;}
+    50% {height:5px;transform:translateY(0px);background:rgb(231,153,47);}
+    100% {height:5px;transform:translateY(0px);background:rgb(1,138,138);}
+  }
+
+  .loadingTable {
+    position: relative;
+    top: 50%;
+    left: 50%;
+    width: 100%;
+    height: 100%;
+
+    z-index: 9999999;
+
+    background-color: #FFFFFF;
+  }
+
   @media (max-width: 942px) {
     align-items: center;
     justify-content: center;

src/styles/layouts/news/NewsView.ts

@@ -5,6 +5,20 @@ export const NewsView = styled.main`
 
   margin-bottom: 100px;
 
+  .description {
+    a {
+      display: none;
+    }
+    p {
+      :last-child {
+        display: none;
+      }
+    }
+    .read-more {
+      display: none;
+    }
+  }
+
   p {
     font-family: 'Poppins';
     font-style: normal;