update Consumption

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",

src/components/banner/BannerView.ts

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

src/pages/administrative/clients/index.tsx

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

src/pages/administrative/general.tsx

@@ -8,10 +8,13 @@ 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'
 
+
 export default function index({userName}: any) {
   const editorRef = useRef(null);
   const [text, setText] = useState('');
@@ -22,14 +25,28 @@ export default function index({userName}: any) {
     }
   };
 
+
+
   const handleChange = (event: SelectChangeEvent) => {
     setText(event.target.value);
   };
 
+
+  async function handleRegisterAboutUs() {
+    await api.post('/aboutUs', {
+      about: editorRef.current.value
+    }).then(res => {
+      console.log(res)
+
+    }).catch(res => console.log(res))
+  }
+
   return (
     <GeneralView>
       <Header name={userName} admin/>
       <PageTitle title='Sobre nós' subtitle='Alterar texto de sobre nós'/>
+
+      <BasicButton onClick={() => handleRegisterAboutUs(editorRef)} title='Enviar'/>
       <br />
       <Editor
         onInit={(evt, editor) => editorRef.current = editor}
@@ -70,6 +87,8 @@ export default function index({userName}: any) {
           content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'
         }}
       />
+
+
     </GeneralView>
   )
 }

src/pages/administrative/industryInfo/index.tsx

@@ -8,9 +8,12 @@ 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 { Viewer } from '@react-pdf-viewer/core';
+import '@react-pdf-viewer/core/lib/styles/index.css';
 import FormData from 'form-data';
 
+
+
 import Snackbar from '@mui/material/Snackbar';
 import MuiAlert, { AlertProps } from '@mui/material/Alert';
 import { InputUploadView } from '../../../components/inputUploadPdf/inputUploadView'
@@ -23,12 +26,12 @@ const Alert = React.forwardRef<HTMLDivElement, AlertProps>(function Alert(
 });
 
 export default function industryInfo({userName}: any) {
-  const formData = new FormData();
+  const [url, setUrl] = React.useState('');
 
-  const [pdf, setPdf] = useState<any>();
+  const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-  function onChange(e) {
+      const files = e.target.files;
-    setPdf(e.target.files[0])
+      files.length > 0 && setUrl(URL.createObjectURL(files[0]));
-  }
+  };
 
   const [openSnackSuccess, setOpenSnackSuccess] = useState<boolean>(false);
   const [openSnackError, setOpenSnackError] = useState<boolean>(false);
@@ -75,7 +78,8 @@ export default function industryInfo({userName}: any) {
           <form action="">
             <div className='testess'>
               <label  htmlFor="arquivo"> <p className='TitleButton'> Enviar PDF </p>   </label>
-              <input  type="file" name='arquivo' id='arquivo' onChange={onChange} />
+              {/* <input  type="file" name='arquivo' id='arquivo' onChange={onChange} /> */}
+              <input type="file" name='arquivo' id='arquivo' accept=".pdf" onChange={onChange} />
             </div>
           </form>
           </div>
@@ -83,6 +87,15 @@ export default function industryInfo({userName}: any) {
         {/* <InputUploadPdf/> */}
       </div>
 
+      <div className="update">
+          <form action="">
+            <div className='testess'>
+            <label  htmlFor="arquivo"> <p className='TitleButton'> Enviar PDF </p>   </label>
+            <input type="file" accept=".pdf" onChange={onChange} />
+            </div>
+          </form>
+          </div>
+
       <BasicButton onClick={() => handleCreateClient()} title='Atualizar'/>
 
     </IndustryInfoView>

src/pages/industryInfo.tsx

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

src/pages/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'
@@ -206,7 +207,11 @@ export default function pld({tableData, graphByHourData, graphByMonthData, userN
               }
             </tbody>
           </table>
+          <div className='btnDownload'>
+          <BasicButton onClick={''} title='Download'/>
+          </div>
           <section>
+
             <article onClick={() => setPage('perMouth')}>
               <p>Valores Diários</p>
             </article>

src/styles/layouts/pld/PldView.ts

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

yarn.lock

@@ -1390,6 +1390,11 @@
   version "2.11.5"
   resolved "https://registry.npmjs.org/@popperjs/core/-/core-2.11.5.tgz"
 
+"@react-pdf-viewer/core@^3.5.0":
+  version "3.5.0"
+  resolved "https://registry.yarnpkg.com/@react-pdf-viewer/core/-/core-3.5.0.tgz#bb18b87330bfd01d5c31980b820ef58dc1c50a19"
+  integrity sha512-fu9vi8lzpFtQQqu8XUzSzp5aQYD5YxmJQ0CxOuRrANU7z1kft+TbdyiDOpWoeX2VC0/oyclBxUwleVYv+g1f1w==
+
 "@rushstack/eslint-patch@^1.1.3":
   version "1.1.3"
   resolved "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.1.3.tgz"