Remoção do botão de Select na aba Telemetria e carregamento de dados ao editar as datas.

package.json

@@ -2,6 +2,7 @@
   "name": "smart-energia-web",
   "version": "0.1.0",
   "private": true,
+  "packageManager": "yarn@1.22.22",
   "scripts": {
     "dev": "next dev --port=3444",
     "build": "next build",
@@ -47,7 +48,6 @@
     "next": "12.1.6",
     "nookies": "^2.5.2",
     "notistack": "^2.0.5",
-    "npm": "^8.10.0",
     "nprogress": "^0.2.0",
     "patternomaly": "^1.3.2",
     "react": "18.1.0",
@@ -60,7 +60,6 @@
     "react-input-mask": "^2.0.4",
     "react-loading": "^2.0.3",
     "react-pdf-thumbnail": "^0.1.0",
-    "sharp": "^0.30.7",
     "styled-components": "^5.3.5",
     "tinymce": "^6.0.3",
     "yup": "^0.32.11"

src/pages/telemetria/index.tsx

@@ -29,7 +29,6 @@ import TextField from '@mui/material/TextField'
 import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns'
 import { DesktopDatePicker } from '@mui/x-date-pickers/DesktopDatePicker'
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'
-import { format } from 'date-fns'
 import BasicButton from '../../components/buttons/basicButton/BasicButton'
 import { DiscretizedConsumptionChart } from '../../components/graph/DiscretizedConsumptionChart'
 import FatorPotenciaChart from '../../components/graph/fatorPotenciaChart'
@@ -62,10 +61,12 @@ const months = [
 
 export default function Telemetria({ userName, clients }: any) {
   const [unity, setUnity] = useState(clients?.[0]?.codigo_scde ?? 0)
-  const [startDate, setStartDate] = useState(new Date())
+  const today = new Date()
-  const [endDate, setEndDate] = useState(new Date())
+  const firstDayOfMonth = new Date(today.getFullYear(), today.getMonth(), 1)
-  const [month, setMonth] = useState(new Date().getMonth())
+  const [startDate, setStartDate] = useState(firstDayOfMonth)
-  const [endMonth, setEndMonth] = useState(new Date().getMonth() + 1)
+  const [endDate, setEndDate] = useState(today)
+  const [month, setMonth] = useState(today.getMonth())
+  const [endMonth, setEndMonth] = useState(today.getMonth() + 1)
   const [discretization, setDiscretization] = useState('1_hora')
 
   const [openSnackSuccess, setOpenSnackSuccess] = useState<boolean>(false)
@@ -89,16 +90,16 @@ export default function Telemetria({ userName, clients }: any) {
   const currencyBRL = (v: any) =>
     Number(v ?? 0)
       .toLocaleString('pt-BR', { style: 'currency', currency: 'BRL' })
-      .replace(/\u00A0/g, ' '); // remove NBSP
+      .replace(/\u00A0/g, ' ') // remove NBSP
 
   const numberBR = (v: any, min = 2, max = 2) =>
     Number(v ?? 0).toLocaleString('pt-BR', {
       minimumFractionDigits: min,
       maximumFractionDigits: max
-    });
+    })
 
   function downloadCSVFile(csv, filename) {
-    const BOM = '\uFEFF'; // Excel-friendly UTF-8 BOM
+    const BOM = '\uFEFF' // Excel-friendly UTF-8 BOM
     const csv_file = new Blob([BOM, csv.replace(/\u00A0/g, ' ')], {
       type: 'text/csv;charset=utf-8;'
     })
@@ -117,23 +118,23 @@ export default function Telemetria({ userName, clients }: any) {
   }
 
   function htmlToCSV(filename) {
-    const data = [];
+    const data = []
-    const rows = document.querySelectorAll('table tr');
+    const rows = document.querySelectorAll('table tr')
 
     for (let i = 0; i < rows.length; i++) {
       const row = [],
-        cols: any = rows[i].querySelectorAll('td, th');
+        cols: any = rows[i].querySelectorAll('td, th')
 
       for (let j = 0; j < cols.length; j++) {
         row.push(
           cols[j].innerText.replace(/\u00A0/g, ' ') // sanitize NBSP
-        );
+        )
       }
 
-      data.push(row.join(';'));
+      data.push(row.join(';'))
     }
 
-    downloadCSVFile(data.join('\n'), filename);
+    downloadCSVFile(data.join('\n'), filename)
   }
 
   const [tableData, setTableData] = useState(null)
@@ -155,45 +156,21 @@ export default function Telemetria({ userName, clients }: any) {
 
   const [fatorPotenciaData, setFatorPotenciaData] = useState([])
   const [demRegXDemCon, setDemRegXDemCon] = useState([])
-  const [discretizedConsumptionData, setDiscretizedConsumptionData] = useState(
+  const [discretizedConsumptionData, setDiscretizedConsumptionData] = useState([])
-    []
-  )
 
   useEffect(() => {
     setSend(false)
   }, [startDate, endDate])
 
+  // Auto-update discretization data when parameters change
   useEffect(() => {
-    const firstOfTheMonth = format(new Date(startDate).setDate(2), 'yyyy-MM-dd')
+    if (menu === 0 && unity) {
-    const lastOfTheMonth = format(
-      new Date(startDate.getFullYear(), startDate.getMonth() + 1, 0),
-      'yyyy-MM-dd'
-    )
-
-    setStartDate(new Date(firstOfTheMonth))
-
       setLoader(true)
-    getDiscretization(
+      getDiscretization(unity, startDate, endDate, discretization)
-      unity,
-      new Date(firstOfTheMonth),
-      new Date(lastOfTheMonth),
-      discretization
-    )
         .then((result) => {
           setDiscretizedConsumptionData(result)
           setSend(false)
           setLoader(false)
-      })
-      .catch(() => {
-        setSend(false)
-        setOpenSnackFields(true)
-        setLoader(false) // ensure the overlay doesn’t hide the table
-      })
-
-    getDemand(unity, startDate, endDate, discretization)
-      .then((result) => {
-        setDemRegXDemCon(result)
-        setSend(false)
           setTableData(result)
         })
         .catch(() => {
@@ -201,10 +178,36 @@ export default function Telemetria({ userName, clients }: any) {
           setOpenSnackFields(true)
           setLoader(false)
         })
+    }
+  }, [unity, startDate, endDate, discretization, menu])
 
+  // Auto-update demand data when parameters change
+  useEffect(() => {
+    if (menu === 1 && unity) {
+      setLoader(true)
+      getDemand(unity, startDate, endDate, discretization)
+        .then((result) => {
+          setDemRegXDemCon(result)
+          setSend(false)
+          setLoader(false)
+          setTableData(result)
+        })
+        .catch(() => {
+          setSend(false)
+          setOpenSnackFields(true)
+          setLoader(false)
+        })
+    }
+  }, [unity, startDate, endDate, discretization, menu])
+
+  // Auto-update power factor data when parameters change
+  useEffect(() => {
+    if (menu === 2 && unity) {
+      setLoader(true)
       getPowerFactorData(unity, startDate, endDate, discretization)
         .then((result) => {
           setFatorPotenciaData(result)
+          setTableData(result)
           setSend(false)
           setLoader(false)
         })
@@ -213,7 +216,8 @@ export default function Telemetria({ userName, clients }: any) {
           setOpenSnackFields(true)
           setLoader(false)
         })
-  }, [])
+    }
+  }, [unity, startDate, endDate, discretization, menu])
 
   return (
     <main style={{ width: '100%' }}>
@@ -484,26 +488,6 @@ export default function Telemetria({ userName, clients }: any) {
                   </div>
                 </LocalizationProvider>
               )}
-              <div className="select">
-                <BasicButton
-                  title="Selecionar!"
-                  onClick={() => {
-                    setLoader(true)
-                    getDiscretization(unity, startDate, endDate, discretization)
-                      .then((result) => {
-                        setDiscretizedConsumptionData(result)
-                        setSend(false)
-                        setLoader(false)
-                        setTableData(result)
-                      })
-                      .catch((exception) => {
-                        setSend(false)
-                        setOpenSnackFields(true)
-                        setLoader(false)
-                      })
-                  }}
-                />
-              </div>
             </ChartFilters>
 
             <DiscretizedConsumptionChart
@@ -623,26 +607,6 @@ export default function Telemetria({ userName, clients }: any) {
                   />
                 </div>
               </LocalizationProvider>
-              <div className="select">
-                <BasicButton
-                  title="Selecionar!"
-                  onClick={() => {
-                    setLoader(true)
-                    getDemand(unity, startDate, endDate, discretization)
-                      .then((result) => {
-                        setDemRegXDemCon(result)
-                        setSend(false)
-                        setLoader(false)
-                        setTableData(result)
-                      })
-                      .catch((exception) => {
-                        setSend(false)
-                        setOpenSnackFields(true)
-                        setLoader(false)
-                      })
-                  }}
-                />
-              </div>
             </ChartFilters>
             <DemRegXDemConChart
               data1={demRegXDemCon}
@@ -755,31 +719,6 @@ export default function Telemetria({ userName, clients }: any) {
                   />
                 </div>
               </LocalizationProvider>
-              <div className="select">
-                <BasicButton
-                  title="Selecionar!"
-                  onClick={() => {
-                    setLoader(true)
-                    getPowerFactorData(
-                      unity,
-                      startDate,
-                      endDate,
-                      discretization
-                    )
-                      .then((result) => {
-                        setFatorPotenciaData(result)
-                        setSend(false)
-                        setLoader(false)
-                        setTableData(result)
-                      })
-                      .catch((exception) => {
-                        setSend(false)
-                        setOpenSnackFields(true)
-                        setLoader(false)
-                      })
-                  }}
-                />
-              </div>
             </ChartFilters>
             <FatorPotenciaChart
               title="Fator de Potencia"
@@ -823,8 +762,8 @@ export default function Telemetria({ userName, clients }: any) {
               </tr>
             </thead>
             <tbody>
-              {Array.isArray(fatorPotenciaData) && fatorPotenciaData.length > 0 ? (
+              {Array.isArray(tableData) && tableData.length > 0 ? (
-                fatorPotenciaData.map((value, index) => (
+                tableData.map((value, index) => (
                   <tr key={index}>
                     <td className="tg-gceh">{unity}</td>
                     <td className="tg-gceh">{value?.ponto}</td>
@@ -833,17 +772,29 @@ export default function Telemetria({ userName, clients }: any) {
                     <td className="tg-gceh">{value?.hora}</td>
                     <td className="tg-gceh">{value?.minut}</td>
                     <td className="tg-gceh">{numberBR(value?.f_ref, 2, 2)}</td>
-                    <td className="tg-uulg">{numberBR(value?.consumo, 2, 5)}</td>
+                    <td className="tg-uulg">
-                    <td className="tg-gceh">{numberBR(value?.reativa, 2, 5)}</td>
+                      {numberBR(value?.consumo, 2, 5)}
+                    </td>
+                    <td className="tg-gceh">
+                      {numberBR(value?.reativa, 2, 5)}
+                    </td>
                     <td className="tg-gceh">{numberBR(value?.fp, 0, 5)}</td>
-                    <td className="tg-gceh">{numberBR(value?.dem_cont, 0, 0)}</td>
+                    <td className="tg-gceh">
-                    <td className="tg-gceh">{numberBR(value?.dem_reg, 0, 0)}</td>
+                      {numberBR(value?.dem_cont, 0, 0)}
-                    <td className="tg-gceh">{numberBR(value?.dem_tolerancia, 0, 0)}</td>
+                    </td>
+                    <td className="tg-gceh">
+                      {numberBR(value?.dem_reg, 0, 0)}
+                    </td>
+                    <td className="tg-gceh">
+                      {numberBR(value?.dem_tolerancia, 0, 0)}
+                    </td>
                   </tr>
                 ))
               ) : (
                 <tr>
-                  <td className="tg-gceh" colSpan={13}>Sem dados no período selecionado.</td>
+                  <td className="tg-gceh" colSpan={13}>
+                    Sem dados no período selecionado.
+                  </td>
                 </tr>
               )}
             </tbody>
@@ -872,7 +823,8 @@ export default function Telemetria({ userName, clients }: any) {
               green
               onClick={() => {
                 htmlToCSV(
-                  `${menu === 2
+                  `${
+                    menu === 2
                       ? 'fator_potencia'
                       : menu === 1
                       ? 'demanda'