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

src/components/banner/BannerView.ts

@@ -39,8 +39,13 @@ export const BannerView = styled.div`
 
     overflow: hidden;
 
+    text-overflow: ellipsis;
+
     p {
       font-size: 70%;
+      /* height: 43px; */
+
+      text-overflow: ellipsis;
     }
 
     * {

src/components/buttons/gradientButton/GradientButtonView.ts

@@ -9,7 +9,9 @@ export const GradientButtonView = styled.button`
   border-radius: 2px;
 
   width: 30%;
+  min-width: 240px;
   height: 110px;
+  min-height: 110px;
   margin-bottom: 25px;
 
   font-family: 'Poppins';

src/components/sidebar/Sidebar.tsx

@@ -34,7 +34,7 @@ export default function Sidebar() {
   const { signOut } = useContext(AuthContext)
 
   const [ economiaDrawer, setEconomiaDrawer ] = useState(false)
-  const [ notificationsCount, setNotificationsCount ] = useState()
+  const [ notificationsCount, setNotificationsCount ] = useState<number>(0)
 
   const [ viewModal, setViewModal ] = useState(false)
 
@@ -105,7 +105,7 @@ export default function Sidebar() {
                 <Link href='/grossSavings'><li className={router.pathname=='/grossSavings'? 'actualPathDrawer' : null}>Economia Bruta Anual</li></Link>
                 <Link href='/accumulatedSavings'><li className={router.pathname=='/accumulatedSavings'? 'actualPathDrawer' : null}>Economia Bruta Mensal</li></Link>
                 <Link href='/estimatedCost'><li className={router.pathname=='/estimatedCost'? 'actualPathDrawer' : null}>Cativo x Livre mensal</li></Link>
-                <Link href='/costIndicator'><li className={router.pathname=='/costIndicator'? 'actualPathDrawer' : null}>Custo R/MWh</li></Link>
+                <Link href='/costIndicator'><li className={router.pathname=='/costIndicator'? 'actualPathDrawer' : null}>Custo R$/MWh</li></Link>
               </div>
             <Link href='/telemetria'><li className={router.pathname=='/telemetria'? 'actualPath' : null}><Image src='/assets/sidebar/telemetryIcon.svg' width={25} height={25} />{'Telemetria >'}</li></Link>
             <Link href='/resumoOperacao'><li className={router.pathname=='/resumoOperacao'? 'actualPath' : null} ><Image src='/assets/sidebar/summaryOperationsIcon.svg' width={25} height={25} />{'Resumo de Op. '}</li></Link>
@@ -113,7 +113,7 @@ export default function Sidebar() {
             <Link href='/pld'><li className={router.pathname=='/pld'? 'actualPath' : null}><Image src='/assets/sidebar/newsIcon.svg' width={25} height={25} />{'PLD >'}</li></Link>
             <Link href='/industryInfo'><li className={router.pathname=='/industryInfo'? 'actualPath' : null}><Image src='/assets/sidebar/sectorialInfoIcon.svg' width={25} height={25} />{'Info Setorial >'}</li></Link>
             {/* <Link href='/consumption'><li className={router.pathname=='/consumption'? 'actualPath' : null} ><Image src='/assets/sidebar/consumptionIcon.svg' width={25} height={25} />{'Consumo'}</li></Link> */}
-            <Link href='/notifications'><li className={router.pathname=='/notifications'? 'actualPath' : null}><Image src='/assets/sidebar/notificationsIcon.svg' width={25} height={25} />{'Notificações >'}<div className='notification'><p>{notificationsCount}</p></div></li></Link>
+            <Link href='/notifications'><li className={router.pathname=='/notifications'? 'actualPath' : null}><Image src='/assets/sidebar/notificationsIcon.svg' width={25} height={25} />{'Notificações >'}<div className='notification' style={{display: notificationsCount<=0||notificationsCount===undefined? 'none' : 'inherit'}}><p>{notificationsCount}</p></div></li></Link>
             <Link href='/aboutUs'><li className={router.pathname=='/aboutUs'? 'actualPath' : null}><Image src='/assets/sidebar/aboutUs.svg' width={25} height={25} />{'Sobre Nós >'}</li></Link>
             <Link href='/faq'><li className={router.pathname=='/faq'? 'actualPath' : null}><Image src='/assets/sidebar/saqIcon.svg' width={25} height={25} />{'FAQ >'}</li></Link>
             <button onClick={handleOpen}><Image src='/assets/logout.svg' width={25} height={25} />{'Sair'}</button>

src/components/sidebar/SidebarView.ts

@@ -80,6 +80,13 @@ export const SidebarView = styled.nav<SidebarViewInterface>`
       cursor: pointer;
 
       padding-left: 40px;
+
+      transition: all 350ms ease-in;
+
+      :hover {
+        color: rgb(37, 79, 127);
+        border-left: 8px solid rgb(37, 79, 127);
+      }
     }
 
     .economiaDrawer {
@@ -162,6 +169,13 @@ export const SidebarView = styled.nav<SidebarViewInterface>`
     color: #f00;
 
     cursor: pointer;
+
+    transition: all 350ms ease-in;
+
+    :hover {
+      opacity: 0.9;
+      box-shadow: rgb(0, 0, 0, 0.2) 0px 2px 4px -1px;
+    }
   }
 
   @media (max-width: 1008px) {

src/pages/_app.tsx

@@ -14,6 +14,7 @@ import ForgotPassword from './forgotPassword'
 import VerifyEmail from './verifyEmail'
 
 import '../styles/globals.ts'
+import '../styles/Home.module.css'
 import '../styles/nprogress/nprogress.css'
 import { GetServerSideProps } from 'next'
 import { parseCookies } from 'nookies'

src/pages/administrative/clients/index.tsx

@@ -173,10 +173,10 @@ export default function clients({clients, userName}) {
             name: value.target.value
           })
         }} variant="outlined" />
-        <TextField id="outlined-basic" label="E-mail/Usuário" sx={{width:350, ml:8}} onChange={(value) => {
+        <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
+            email: value.target.value.toLowerCase()
           })
         }} variant="outlined" />
         <TextField id="outlined-basic" label="Senha" sx={{width:350, ml:5, mt:2}} onChange={(value) => {

src/pages/dashboard.tsx

@@ -34,7 +34,7 @@ export default function Dashboard({grossAnualGraph, grossAnualYears, grossMensal
       <PageTitle title='Visão Geral' subtitle='Bem Vindo a Smart Energia' />
       <Link href='pld'>
         <section className="cardsSection" >
-          <MapCard title='R$/MWh' subtitle='' date='periodo' statistic='' imgSource='/moneyIcon.svg' />
+          <MapCard title='R$/MWh' subtitle='' date='período' statistic='' imgSource='/moneyIcon.svg' />
           {
             mapsInfo.map(value => {
               return <MapCard key={value.submarket} title='S' subtitle={value.submarket} statistic={parseFloat(value.value).toFixed(2)} imgSource='/SUL.svg' />
@@ -82,10 +82,6 @@ export default function Dashboard({grossAnualGraph, grossAnualYears, grossMensal
         }).map(value => value.mes)} barLabel />
         </GraphCard>
       </section>
-
-      <button onClick={() => {
-        const id = 1
-      }}></button>
     </DashboardView>
   )
 }

src/pages/faq.tsx

@@ -4,6 +4,7 @@ import { parseCookies } from 'nookies'
 import React from 'react'
 import CommonQuestionsCard from '../components/faqQuestionsCard/FaqQuestionsCard'
 import Header from '../components/header/Header'
+import PageTitle from '../components/pageTitle/PageTitle'
 import { api } from '../services/api'
 import getAPIClient from '../services/ssrApi'
 import { FaqView } from '../styles/layouts/commonQuestions/FaqView'
@@ -16,8 +17,9 @@ export default function commonQuestions({faqData, userName}) {
         <title>Smart Energia - FAQ</title>
       </Head>
       <Header name={userName} />
-      <h1>Perguntas Frequentes</h1>
+      <PageTitle title='Perguntas Frequentes' subtitle='Aqui estão algumas das perguntas que mais recebemos!' />
-      <p>Aqui estão algumas das perguntas que mais recebemos!</p>
+      {/* <h1>Perguntas Frequentes</h1>
+      <p>Aqui estão algumas das perguntas que mais recebemos!</p> */}
       <section className='CommonQuestionsSection' >
       {
         faqData.map((value, index ) => {
@@ -31,6 +33,7 @@ export default function commonQuestions({faqData, userName}) {
     </FaqView>
   )
 }
+
 export const getServerSideProps: GetServerSideProps = async (ctx) => {
   const apiClient = getAPIClient(ctx)
   const { ['@smartAuth-token']: token } = parseCookies(ctx)

src/pages/grossSavings.tsx

@@ -47,6 +47,7 @@ export const getServerSideProps: GetServerSideProps = async (ctx) => {
   })
 
   const years = graphData.map((value) => value.ano)
+
   console.log(years)
   if (!token) {
     return {
@@ -57,7 +58,6 @@ export const getServerSideProps: GetServerSideProps = async (ctx) => {
     }
   }
 
-
   return {
     props: {
       graphData,

src/pages/index.tsx

@@ -58,7 +58,6 @@ export default function Home() {
     });
   };
 
-
   const handleMouseDownPassword = (event) => {
     event.preventDefault();
   };
@@ -113,16 +112,6 @@ export default function Home() {
           Prencha os Campos corretamente!
         </Alert>
       </Snackbar>
-      {/* <Snackbar open={openSnackSuccessDelete} autoHideDuration={4000} onClose={handleCloseSnackDelete}>
-        <Alert onClose={handleCloseSnackDelete} severity="success" sx={{ width: '100%' }}>
-          notificação excluida com sucesso!
-        </Alert>
-      </Snackbar> */}
-      {/* <Snackbar open={openSnackErrorDelete} autoHideDuration={4000} onClose={handleCloseSnackDelete}>
-        <Alert onClose={handleCloseSnackDelete} severity="error" sx={{ width: '100%' }}>
-          Notificação não excluida!
-        </Alert>
-      </Snackbar> */}
 
       <div>
         <Image src='/assets/marca1.png' width={500} height={340} />
@@ -136,7 +125,7 @@ export default function Home() {
         <TextField id="outlined-basic"
         sx={{ m: 1, width: '90%' }} label="Login" value={email} variant="outlined"
         onChange={value => {
-        setEmail(value.target.value)
+        setEmail(value.target.value.toLowerCase())
         }}/>
         <FormControl sx={{ m: 1, width: '90%' }} variant="outlined">
           <InputLabel htmlFor="outlined-adornment-password">Senha</InputLabel>

src/pages/industryInfo.tsx

@@ -10,6 +10,7 @@ import { IndustryInfoView } from '../styles/layouts/industryInfo/IndustryInfoVie
 
 import Snackbar from '@mui/material/Snackbar';
 import MuiAlert, { AlertProps } from '@mui/material/Alert';
+import { useRouter } from 'next/router'
 
 const Alert = React.forwardRef<HTMLDivElement, AlertProps>(function Alert(
   props,
@@ -22,19 +23,23 @@ export default function industryInfo({userName}: any) {
   const [openSnackSuccess, setOpenSnackSuccess] = useState<boolean>(false);
   const [openSnackError, setOpenSnackError] = useState<boolean>(false);
 
+  const router = useRouter()
+
   const handleCloseSnack = (event?: React.SyntheticEvent | Event, reason?: string) => {
     if (reason === 'clickaway') {
       return;
     }
-
     setOpenSnackError(false);
     setOpenSnackSuccess(false);
   };
 
   function handleDownloadPdf() {
     api.get('/download').then(res => {
+      router.replace(res.data.path);
+      console.log(res.data);
       setOpenSnackSuccess(true)
     }).catch(res => {
+      console.log(res)
       setOpenSnackError(true)
     })
   }
@@ -43,12 +48,12 @@ export default function industryInfo({userName}: any) {
     <IndustryInfoView>
       <Snackbar open={openSnackSuccess} autoHideDuration={4000} onClose={handleCloseSnack}>
         <Alert onClose={handleCloseSnack} severity="success" sx={{ width: '100%' }}>
-          Cliente cadastrada com Sucesso!
+          Pdf baixado Sucesso!
         </Alert>
       </Snackbar>
       <Snackbar open={openSnackError} autoHideDuration={4000} onClose={handleCloseSnack}>
         <Alert onClose={handleCloseSnack} severity="error" sx={{ width: '100%' }}>
-          Cliente não cadastrado!
+        Pdf não baixado!
         </Alert>
       </Snackbar>
       <Head>

src/pages/news.tsx

@@ -1,3 +1,4 @@
+import axios from 'axios';
 import { GetServerSideProps } from 'next';
 import Head from 'next/head';
 import Link from 'next/link'
@@ -7,9 +8,11 @@ import React from 'react'
 import Banner from '../components/banner/Banner'
 import BasicButton from '../components/buttons/basicButton/BasicButton';
 import Header from '../components/header/Header'
+import getAPIClient from '../services/ssrApi';
 import { Button, NewsView } from '../styles/layouts/news/NewsView'
 
-export default function aboutUs({userName}: any) {
+export default function aboutUs({userName, news}: any) {
+  console.log(news)
   return (
     <NewsView>
       <Head>
@@ -46,7 +49,6 @@ export default function aboutUs({userName}: any) {
         <legend> <BasicButton title='Ver Mais...' onClick={() => console.log()}/></legend>
         </fieldset>
         </Button>
-
       </section>
 
       <a href='https://www.energiasmart.com.br/noticias/'
@@ -57,9 +59,18 @@ export default function aboutUs({userName}: any) {
 }
 
 export const getServerSideProps: GetServerSideProps = async (ctx) => {
+  const apiClient = getAPIClient(ctx)
   const { ['@smartAuth-token']: token } = parseCookies(ctx)
   const { ['user-name']: userName } = parseCookies(ctx)
 
+  let news;
+
+  await axios.get('https://www.energiasmart.com.br/noticias/feed/').then(res => {
+    news = res.data
+  }).catch(res => {
+    console.log(res)
+  })
+
   if (!token) {
     return {
       redirect: {
@@ -71,8 +82,8 @@ export const getServerSideProps: GetServerSideProps = async (ctx) => {
 
   return {
     props: {
-      userName
+      userName,
+      news
     }
   }
 }
-

src/pages/notifications.tsx

@@ -16,8 +16,7 @@ export default function Notifications({notificationData, userName}: any) {
         <title>Smart Energia - Notificações</title>
       </Head>
       <Header name={userName} />
-      <PageTitle title='Notifications' subtitle='' />
+      <PageTitle title='Notificações' subtitle='Aqui estão as notificaões publicadas para voce!' />
-      <p>Aqui estão as notificaões publicadas para voce!</p>
       <section className='CommonQuestionsSection' >
       {
         notificationData.map((value, index ) => {

src/pages/resumoOperacao.tsx

@@ -71,12 +71,23 @@ export default function ResumoOperacao({tableData, clientsData, userName, client
 
   useEffect(() => {
     if (unidade!=='' || month!==''){
-      api.post('/operation/summary', {
+      api.post('/operation/summary', month && !unidade? {
+        "filters": [
+          {"type" : "=", "field": "mes", "value": month}
+        ]
+      } :
+      !month && unidade? {
         "filters": [
-            {"type" : "=", "field": "mes", "value": `${month}/2022`},
           {"type" : "=", "field": "dados_te.cod_smart_unidade", "value": unidade}
         ]
-      }).then(res => {
+      } :
+      month && unidade? {
+        "filters": [
+          {"type" : "=", "field": "mes", "value": month},
+          {"type" : "=", "field": "dados_te.cod_smart_unidade", "value": unidade}
+        ]
+      } : {}
+      ).then(res => {
         setTableDataState(res.data.data)
       }).catch(res => {
         console.log(res)
@@ -128,7 +139,7 @@ export default function ResumoOperacao({tableData, clientsData, userName, client
             <MenuItem value={''}>Nenhum</MenuItem>
             {
               clientMonth.map((value) => {
-                return <MenuItem key={1} value={value.mes.slice(2, 4)}>{monthLabels[parseFloat(value.mes.slice(3, 4))-1]}</MenuItem>
+                return <MenuItem key={1} value={value.mes}>{monthLabels[parseFloat(value.mes.slice(3, 4))-1]}</MenuItem>
               })
             }
           </Select>

src/styles/Home.module.css

@@ -1,3 +1,10 @@
+.someCSSModulesClass :global .any-global-class {
+  margin: 0;
+  padding: 0;
+  font-family: 'Poppins';
+  background-color: #f9f9f9;
+}
+
 .container {
   padding: 0 2rem;
 }
@@ -10,6 +17,7 @@
   flex-direction: column;
   justify-content: center;
   align-items: center;
+  font-family: 'Poppins';
 }
 
 .footer {

src/styles/globals.ts

@@ -1,6 +1,21 @@
 import { createGlobalStyle } from 'styled-components'
 
 export const GlobalStyle = createGlobalStyle`
+  body::-webkit-scrollbar {
+    width: 15px;
+  }
+  body::-webkit-scrollbar-track {
+    background-color: #EFEFEF;
+  }
+  body::-webkit-scrollbar-thumb {
+    background-color: rgb(37,79,127);
+    border: 3px solid #EFEFEF;
+    border-radius: 10px;
+  }
+  body::-webkit-scrollbar-thumb:hover {
+    background-color: #1d3e63;
+  }
+
   body {
     margin: 0;
     padding: 0;

src/styles/layouts/ChatTelemetry/ChatTelemetryView.ts

@@ -12,9 +12,9 @@ export const ChatTelemetryView = styled.main`
   padding-top: 0px!important;
 
   .chartContainer {
-    display: grid;
+    display: flex;
 
-    grid-template-columns: 50% 50%;
+    flex-direction: column;
 
     width: 100%;
   }

src/styles/layouts/Telemetria/TelemetriaView.ts

@@ -36,17 +36,18 @@ export const TelemetriaView = styled.main`
 
   section {
     display: flex;
+
     justify-content: center;
     align-items: center;
 
+    flex-wrap: wrap;
+
     .select {
       display: flex;
       justify-content: center;
       align-items: flex-start;
 
       flex-direction: column;
-
-      /* margin-top: 10px; */
     }
   }
 `;
@@ -54,16 +55,22 @@ export const TelemetriaView = styled.main`
 export const Buttons = styled.div`
   display: flex;
   justify-content: space-evenly;
-  flex-direction: row;
 
-  min-width: 14rem;
+  flex-wrap: wrap;
-  height: 6rem;
+
+  max-width: 100%;
 
   margin-top: 5rem;
 
   padding-left: 100px;
   padding-right: 100px;
 
+  @media (max-width: 942px) {
+    align-items: center;
+    justify-content: center;
+
+    flex-direction: column;
+  }
 `;
 
 export const Uploads = styled.div`

src/styles/layouts/industryInfo/IndustryInfoView.ts

@@ -9,19 +9,21 @@ export const IndustryInfoView = styled.main`
   .title {
     margin-bottom: 50px;
   }
+
   button{
-  height:60px;
+    height: 70px;
-  width: 22%;
+    width: 30%;
-  margin-top: 12rem;
+
     cursor: pointer;
+
     background: #254F7F;
+
     border-radius: 8px;
     border-style: none;
 
     font-family: 'Poppins';
     font-size: 90%;
 
-
     color: #FFFFFF;
   }
 `