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

package.json

@@ -40,6 +40,7 @@
     "install": "^0.13.0",
     "next": "12.1.6",
     "nookies": "^2.5.2",
+    "notistack": "^2.0.5",
     "npm": "^8.10.0",
     "nprogress": "^0.2.0",
     "patternomaly": "^1.3.2",

src/components/administrativeTables/NotificationsTable.tsx

@@ -171,7 +171,14 @@ function EnhancedTableHead(props: EnhancedTableProps) {
   );
 }
 
-export default function ClientTable() {
+interface NotificationData {
+  title: string,
+  body: string,
+  users: string
+  deleted_at: Date,
+}
+
+export default function ClientTable({notifications}: any) {
   const [order, setOrder] = useState<Order>('asc');
   const [orderBy, setOrderBy] = useState<keyof Data | string>('status');
   const [selected, setSelected] = useState<readonly string[]>([]);
@@ -190,7 +197,7 @@ export default function ClientTable() {
 
   const handleSelectAllClick = (event: React.ChangeEvent<HTMLInputElement>) => {
     if (event.target.checked) {
-      const newSelecteds = rows.map((n) => n.notification);
+      const newSelecteds = notifications.map((n) => n.id.toString());
       setSelected(newSelecteds);
       return;
     }
@@ -229,8 +236,7 @@ export default function ClientTable() {
   const isSelected = (name: string) => selected.indexOf(name) !== -1;
 
   // Avoid a layout jump when reaching the last page with empty rows.
-  const emptyRows =
+  const emptyRows = page > 0 ? Math.max(0, (1 + page) * rowsPerPage - notifications.length) : 0;
-    page > 0 ? Math.max(0, (1 + page) * rowsPerPage - rows.length) : 0;
 
   return (
     <ClientTableView>
@@ -247,23 +253,23 @@ export default function ClientTable() {
               orderBy={orderBy}
               onSelectAllClick={handleSelectAllClick}
               onRequestSort={handleRequestSort}
-              rowCount={rows.length}
+              rowCount={notifications.length}
             />
             <TableBody>
-              {stableSort(rows, getComparator(order, orderBy))
+              {stableSort(notifications, getComparator(order, orderBy))
                 .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
                 .map((row, index) => {
-                  const isItemSelected = isSelected(row.notification.toString());
+                  const isItemSelected = isSelected(row.id.toString());
                   const labelId = `enhanced-table-checkbox-${index}`;
 
                   return (
                     <TableRow
                       hover
-                      onClick={(event) => handleClick(event, row.notification.toString())}
+                      onClick={(event) => handleClick(event, row.id.toString())}
                       role="checkbox"
                       aria-checked={isItemSelected}
                       tabIndex={-1}
-                      key={row.notification}
+                      key={index}
                       selected={isItemSelected}
                     >
                       <TableCell padding="checkbox">
@@ -281,10 +287,10 @@ export default function ClientTable() {
                         scope="row"
                         padding="none"
                       >
-                        {row.notification}
+                        {row.title}
                       </TableCell>
-                      <TableCell align="left">{row.client}</TableCell>
+                      <TableCell align="left">{'copel'}</TableCell>
-                      <TableCell align="left"><StyledStatus status={row.status==='enviada'? 'ativo' : row.status==='falhou'? 'inativo' : 'pendente'}>{row.status}</StyledStatus></TableCell>
+                      <TableCell align="left"><StyledStatus status={row.deleted_at===null? 'ativo' : 'inativo'}>{row.deleted_at===null? 'ativo' : 'inativo'}</StyledStatus></TableCell>
                     </TableRow>
                   );
                 })}
@@ -303,7 +309,7 @@ export default function ClientTable() {
         <TablePagination
           rowsPerPageOptions={[5, 10, 25]}
           component="div"
-          count={rows.length}
+          count={notifications.length}
           rowsPerPage={rowsPerPage}
           page={page}
           onPageChange={handleChangePage}

src/components/sidebar/Sidebar.tsx

@@ -1,11 +1,12 @@
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
 import Modal from '@mui/material/Modal';
-import Stack from '@mui/material/Stack';
 import Typography from '@mui/material/Typography';
+import { GetServerSideProps } from 'next';
 import Image from 'next/image'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
+import { parseCookies } from 'nookies';
 import React, { useEffect, useState } from 'react'
 
 import RenderIf from '../../utils/renderIf';
@@ -34,9 +35,9 @@ export default function Sidebar() {
 
   const router = useRouter()
 
-  const user = {
+  const { ['user-role']: role } = parseCookies()
-    role: 'admin'
+
-  }
+  console.log(role)
 
   useEffect(() => {
     setViewModal(false)
@@ -44,7 +45,7 @@ export default function Sidebar() {
 
   return (
     <>
-      <RenderIf isTrue={user.role === 'admin'}>
+      <RenderIf isTrue={role === '1'}>
         <SidebarView economiaDrawer={economiaDrawer} modalOpen={viewModal} >
           <div className='hamburger' onClick={() => setViewModal(!viewModal)} >
             <Image src='/assets/hamburgerModal.svg' width={60} height={60} />
@@ -57,22 +58,6 @@ export default function Sidebar() {
             <Link href='/administrative/general'><li className={router.pathname=='/administrative/general'? 'actualPath' : null} ><Image src='/assets/sidebar/dashboardIcon.svg' width={25} height={25} />{'Visão Geral'}</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/notifications'? 'actualPath' : null}><Image src='/assets/sidebar/notificationsIcon.svg' width={25} height={25} />{'Notificações >'}<div className='notification'><p>25</p></div></li></Link>
-            {/* <li onClick={() => setEconomiaDrawer(!economiaDrawer)} className={router.pathname=='/grossSavings' || router.pathname=='/accumulatedSavings' || router.pathname=='/estimatedCost' || router.pathname=='/costIndicator' ? 'actualPath' : null } ><Image src='/assets/sidebar/economyIcon.svg' width={25} height={25} />{'Economia >'}</li>
-              <div className='economiaDrawer drawer' >
-                <Link href='/administrative/grossSavings'><li className={router.pathname=='/grossSavings'? 'actualPathDrawer' : null}>Economia Bruta</li></Link>
-                <Link href='/administrative/accumulatedSavings'><li className={router.pathname=='/accumulatedSavings'? 'actualPathDrawer' : null}>Economia Acumulada</li></Link>
-                <Link href='/administrative/estimatedCost'><li className={router.pathname=='/estimatedCost'? 'actualPathDrawer' : null}>Custo Estimado</li></Link>
-                <Link href='/administrative/costIndicator'><li className={router.pathname=='/costIndicator'? 'actualPathDrawer' : null}>Custo R/MWh</li></Link>
-              </div> */}
-            {/* <Link href='/administrative/telemetria'><li className={router.pathname=='/telemetria'? 'actualPath' : null}><Image src='/assets/sidebar/telemetryIcon.svg' width={25} height={25} />{'Telemetria >'}</li></Link>
-            <Link href='/administrative/resumoOperacao'><li className={router.pathname=='/resumoOperacao'? 'actualPath' : null} ><Image src='/assets/sidebar/summaryOperationsIcon.svg' width={25} height={25} />{'Resumo de Op. '}</li></Link>
-            <Link href='/administrative/news'><li className={router.pathname=='/news'? 'actualPath' : null}><Image src='/assets/sidebar/newsIcon.svg' width={25} height={25} />{'Notícias >'}</li></Link>
-            <Link href='/administrative/pld'><li className={router.pathname=='/pld'? 'actualPath' : null}><Image src='/assets/sidebar/newsIcon.svg' width={25} height={25} />{'PLD >'}</li></Link>
-            <Link href='/administrative/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='/administrative/notifications'><li className={router.pathname=='/notifications'? 'actualPath' : null}><Image src='/assets/sidebar/notificationsIcon.svg' width={25} height={25} />{'Notificações >'}<div className='notification'><p>25</p></div></li></Link>
-            <Link href='/administrative/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='/administrative/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>
             <Modal
             open={open}
@@ -95,7 +80,7 @@ export default function Sidebar() {
           </aside>
         </SidebarView>
       </RenderIf>
-      <RenderIf isTrue={user.role === 'client'}>
+      <RenderIf isTrue={role === '2'}>
         <SidebarView economiaDrawer={economiaDrawer} modalOpen={viewModal} >
           <div className='hamburger' onClick={() => setViewModal(!viewModal)} >
             <Image src='/assets/hamburgerModal.svg' width={60} height={60} />

src/contexts/AuthContext.tsx

@@ -31,20 +31,35 @@ export function AuthProvider({children}: {children: React.ReactNode}) {
   const isAuthenticated = !!user
 
   async function signIn({email, password}: SignInData) {
-    const { token, user }: any = await signInRequest({
+    const { token, user, exception }: any = await signInRequest({
       email,
       password
     })
 
+    if (token) {
       setCookie(undefined, '@smartAuth-token', token, {
         maxAge: 60 * 60 * 1, // 1 hour
       })
+    }
+
+    if (user.role) {
+      setCookie(undefined, 'user-role', user.role)
+    }
+
+    if (!exception) {
+      if (user.role == 2) {
+        Router.push('/dashboard')
+      } else {
+        Router.push('administrative/clients')
+      }
+      return;
+    } else {
+      return
+    }
 
     api.defaults.headers['Authorization'] = `Bearer ${token}`
 
     setUser(user)
-
-    Router.push('/dashboard')
   }
 
   return (

src/pages/administrative/notification/index.tsx

@@ -1,29 +1,32 @@
 import CheckBoxIcon from '@mui/icons-material/CheckBox';
 import CheckBoxOutlineBlankIcon from '@mui/icons-material/CheckBoxOutlineBlank';
-import RadioButtonCheckedIcon from '@mui/icons-material/RadioButtonChecked';
-import RadioButtonUncheckedIcon from '@mui/icons-material/RadioButtonUnchecked';
 import Autocomplete from '@mui/material/Autocomplete';
 import Box from '@mui/material/Box';
 import Checkbox from '@mui/material/Checkbox';
 import FormControl from '@mui/material/FormControl';
-import InputLabel from '@mui/material/InputLabel';
-import MenuItem from '@mui/material/MenuItem';
 import Modal from '@mui/material/Modal';
-import Select, { SelectChangeEvent } from '@mui/material/Select';
 import TextField from '@mui/material/TextField';
 import Typography from '@mui/material/Typography';
 import Head from 'next/head'
-import React from 'react'
+import React, { useState } from 'react'
 
 import NotificationsTable from '../../../components/administrativeTables/NotificationsTable'
-import BasicButton from '../../../components/buttons/basicButton/BasicButton';
 import FaqButton1 from '../../../components/buttons/faqButton/FaqButton1';
 import FaqButton2 from '../../../components/buttons/faqButton/FaqButton2';
 import Header from '../../../components/header/Header'
 import PageTitle from '../../../components/pageTitle/PageTitle'
 import { api }  from '../../../services/api';
 import { FaqView } from '../../../styles/layouts/commonQuestions/FaqView'
-import { NotificationView } from './notificationView'
+
+import Radio from '@mui/material/Radio';
+import RadioGroup from '@mui/material/RadioGroup';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import getAPIClient from '../../../services/ssrApi';
+import { GetServerSideProps } from 'next';
+import { parseCookies } from 'nookies';
+import Notifications from '../../notifications';
+import Snackbar from '@mui/material/Snackbar';
+import MuiAlert, { AlertProps } from '@mui/material/Alert';
 
 const style = {
   position: 'absolute' as const,
@@ -39,15 +42,56 @@ const style = {
   overflowY: 'scroll'
 };
 
+const Alert = React.forwardRef<HTMLDivElement, AlertProps>(function Alert(
+  props,
+  ref,
+) {
+  return <MuiAlert elevation={6} ref={ref} variant="filled" {...props} />;
+});
+
 const icon = <CheckBoxOutlineBlankIcon fontSize="small" />;
 const checkedIcon = <CheckBoxIcon fontSize="small" />;
 
-export default function commonQuestions() {
+interface NotificationInterface {
+  title: string,
+  body: string,
+  users: object[]
+}
+
+export default function notification({clients, notifications}) {
+
+  const [notification, setNotification] = useState<NotificationInterface>({
+    title: '',
+    body: '',
+    users: []
+  })
+
+  const [open, setOpen] = useState<boolean>(false);
+  const [openSnackSuccess, setOpenSnackSuccess] = useState<boolean>(false);
+  const [openSnackError, setOpenSnackError] = useState<boolean>(false);
+
+  const [radiusValue, setRadiusValue] = useState<string>('all');
 
-  const [open, setOpen] = React.useState(false);
   const handleOpen = () => setOpen(true);
   const handleClose = () => setOpen(false);
 
+  const handleCloseSnack = (event?: React.SyntheticEvent | Event, reason?: string) => {
+    if (reason === 'clickaway') {
+      return;
+    }
+
+    setOpenSnackError(false);
+  };
+
+
+  async function handleRegisterNewNotification({title, body, users}: NotificationInterface) {
+    await api.post('/notification', {
+      title,
+      body,
+      users
+    }).then(res => setOpenSnackSuccess(true)).catch(res => setOpenSnackError(true))
+  }
+
   return (
     <FaqView>
       <Head>
@@ -56,6 +100,17 @@ export default function commonQuestions() {
       <Header name=''/>
       <PageTitle title='Notificações' subtitle='Notificações'/>
 
+      <Snackbar open={openSnackSuccess} autoHideDuration={4000} onClose={handleCloseSnack}>
+        <Alert onClose={handleCloseSnack} severity="success" sx={{ width: '100%' }}>
+          notificação cadastrada com sucesso!
+        </Alert>
+      </Snackbar>
+      <Snackbar open={openSnackError} autoHideDuration={4000} onClose={handleCloseSnack}>
+        <Alert onClose={handleCloseSnack} severity="error" sx={{ width: '100%' }}>
+          Notificação não cadastrada!
+        </Alert>
+      </Snackbar>
+
       <div className='buttons'>
       <button className='btn2' onClick={handleOpen}>Disparar nova</button>
 
@@ -71,14 +126,47 @@ export default function commonQuestions() {
         <Typography sx={{color:'gray', fontSize:12}}variant="h5" gutterBottom component="div">
         Pode ser que todas as notificaçõs demorem alguns minutos para estarem disponíveis</Typography>
         <br />
-        <TextField id="outlined-basic" label="Título" sx={{width:700, ml:8}} variant="outlined" /> <br /><br />
+        <TextField id="outlined-basic" label="Título" sx={{width:700, ml:8}} onChange={(value) => {
+          setNotification({
+            ...notification,
+            title: value.target.value
+          })
+        }} variant="outlined" /> <br /><br />
+        <TextField id="outlined-basic" label="Corpo/Conteúdo da notificação" sx={{width:700, ml:8}} onChange={(value) => {
+          setNotification({
+            ...notification,
+            body: value.target.value
+          })
+        }} variant="outlined" /> <br /><br />
 
+          <div>
+            <FormControl>
+              <RadioGroup
+                aria-labelledby="demo-radio-buttons-group-label"
+                defaultValue="female"
+                name="radio-buttons-group"
+              >
+                <FormControlLabel value="all" control={<Radio />} checked={radiusValue==='all'? true : false}onChange={(value: React.ChangeEvent<HTMLInputElement>) => {
+                  setRadiusValue(value.target.value)
+                }} label="Disparar para todos os clientes" />
+                <FormControlLabel value="some" control={<Radio />} checked={radiusValue==='some'? true : false} onChange={(value: React.ChangeEvent<HTMLInputElement>) => {
+                  setRadiusValue(value.target.value)
+                }} label="Disparar somente para alguns clientes" />
+              </RadioGroup>
+            </FormControl>
+          </div>
+
+          {
+            radiusValue === 'some'?
             <Autocomplete
             multiple
             id="checkboxes-tags-demo"
-          options={top100Films}
+            options={clients}
             disableCloseOnSelect
-          getOptionLabel={(option) => option.title}
+            onChange={(event: any, newValue: any) => {
+              setNotification({...notification, users: newValue.map((el) => {return {"user_id": el.id}})});
+            }}
+            getOptionLabel={(option) => option.name}
             renderOption={(props, option, { selected }) => (
               <li {...props}>
               <Checkbox
@@ -86,54 +174,63 @@ export default function commonQuestions() {
                 checkedIcon={checkedIcon}
                 style={{ marginRight: 8 }}
                 checked={selected}
+                value={option.name}
               />
-                {option.title}
+                {option.name}
               </li>
               )}
               sx={{ml:8}}
               style={{ width: 700 }}
               renderInput={(params) => (
-              <TextField {...params} label="Corpo/Conteúdo da notificação" placeholder="Corpo/Conteúdo da notificação" />
+                <TextField {...params} label="Clientes" placeholder="Selecionar clientes"/>
                 )}
-          />
+            /> :
-          <div>
+            null
-            <Checkbox sx={{ml:7}}
+          }
-            icon={<RadioButtonUncheckedIcon />}
-            checkedIcon={<RadioButtonCheckedIcon />}
-            />
-              <Typography sx={{color:'#1976D2', fontSize:12, ml:12, mt:-3.7}} >
-              Disparar para todos os clientes</Typography>
-              <Checkbox sx={{ml:7}}
-            icon={<RadioButtonUncheckedIcon />}
-            checkedIcon={<RadioButtonCheckedIcon />}
-            />
-            <Typography sx={{color:'#1976D2', fontSize:12, ml:12, mt:-3.7}} >
-            Disparar somente para alguns clientes</Typography>
-          </div>
 
-          <FaqButton1  title='Cancelar' onClick={function (): void {
+          <FaqButton1  title='Cancelar' onClick={() => {console.log()}} />
-              throw new Error('Function not implemented.');
+          <FaqButton2  title='Salvar' onClick={() => {
-            } } />
+            handleRegisterNewNotification(notification)
-          <FaqButton2  title='Salvar' onClick={function (): void {
-              throw new Error('Function not implemented.');
           }} />
         </Box>
       </Modal>
-      <NotificationsTable />
+      <NotificationsTable notifications={notifications}/>
     </FaqView>
   )
 }
 
-const top100Films = [
+export const getServerSideProps: GetServerSideProps = async (ctx) => {
-  { title: 'The Shawshank Redemption', year: 1994 },
+  const apiClient = getAPIClient(ctx)
-  { title: 'The Godfather', year: 1972 },
+  const { ['@smartAuth-token']: token } = parseCookies(ctx)
-  { title: 'The Godfather: Part II', year: 1974 },
+
-  { title: 'The Dark Knight', year: 2008 },
+  let clients = [];
-  { title: '12 Angry Men', year: 1957 },
+  let notifications = [];
-  { title: "Schindler's List", year: 1993 },
+
-  { title: 'Pulp Fiction', year: 1994 },
+  await apiClient.get('/user').then(res => {
-  {
+    clients = res.data
-    title: 'The Lord of the Rings: The Return of the King',
+  }).catch(res => {
-    year: 2003,
+    console.log(res)
-  },
+  })
-];
+
+  await apiClient.get('/notification').then(res => {
+    notifications = res.data
+  }).catch(res => {
+    console.log(res)
+  })
+
+  if (!token) {
+    return {
+      redirect: {
+        destination: '/',
+        permanent: false
+      }
+    }
+  }
+
+  return {
+    props: {
+      clients,
+      notifications
+    }
+  }
+}

src/pages/dashboard.tsx

@@ -66,7 +66,6 @@ export default function Dashboard() {
 }
 
 export const getServerSideProps: GetServerSideProps = async (ctx) => {
-  const apiClient = getAPIClient(ctx)
   const { ['@smartAuth-token']: token } = parseCookies(ctx)
 
   if (!token) {

src/services/auth.ts

@@ -15,36 +15,40 @@ type UserObjectType = {
   name: string;
   email: string;
   client_id: number
-  id: number
+  id: number,
+  role: number
 }
 
 export async function signInRequest(data: SignInRequestData) {
-  let user: UserObjectType, token: string
+  let user: UserObjectType, token: string, exception: any = null
 
   await api.post('/auth/login', {
     "email": data.email,
     "password": data.password,
     "device_name": "test"
   }).then(res => {
+    token = res.data.token
     user = {
       name: res.data.user.name,
       email: res.data.user.email,
       client_id: res.data.user.client_id,
-      id: res.data.user.id
+      id: res.data.user.id,
+      role: res.data.user.roles[0].pivot.role_id
     }
-    token = res.data.token
   }).catch(res => {
-    console.log(res)
+    exception = res
   })
 
   return {
-    token: token,
+    token,
     user: {
-      name: user.name,
+      name: user?.name,
-      email: user.email,
+      email: user?.email,
-      client_id: user.client_id,
+      client_id: user?.client_id,
-      id: user.id
+      id: user?.id,
-    }
+      role: user?.role
+    },
+    exception
   }
 }
 
@@ -57,7 +61,8 @@ export default async function recoverUserInformation(id) {
       name: res.data.user.name,
       email: res.data.user.email,
       client_id: res.data.user.client_id,
-      id: res.data.user.id
+      id: res.data.user.id,
+      role: res.data.user.roles[0].pivot.role_id
     }
   }).catch(res => {
     console.log(res)

src/services/ssrApi.ts

@@ -17,9 +17,6 @@ export default function getAPIClient(ctx?: Pick<next.NextPageContext, 'req'> | {
   });
 
   api.interceptors.request.use(config => {
-      // console.log(config)
-      // config.headers = {Authorization: `Bearer ${token}`};
-
       return config;
     },
   );

yarn.lock

@@ -1994,7 +1994,7 @@ clone@^1.0.2:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.4.tgz#da309cc263df15994c688ca902179ca3c7cd7c7e"
 
-clsx@^1.0.4, clsx@^1.1.1:
+clsx@^1.0.4, clsx@^1.1.0, clsx@^1.1.1:
   version "1.1.1"
   resolved "https://registry.npmjs.org/clsx/-/clsx-1.1.1.tgz"
 
@@ -3616,6 +3616,13 @@ normalize-path@^3.0.0:
   version "3.0.0"
   resolved "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz"
 
+notistack@^2.0.5:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/notistack/-/notistack-2.0.5.tgz#8eb53720453f6e02182cd0e6784ced630a7bb7e6"
+  dependencies:
+    clsx "^1.1.0"
+    hoist-non-react-statics "^3.3.0"
+
 npm-audit-report@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/npm-audit-report/-/npm-audit-report-3.0.0.tgz#1bf3e531208b5f77347c8d00c3d9badf5be30cd6"