update

src/components/administrativeTables/ClientsTable.tsx

@@ -67,7 +67,7 @@ type Order = 'asc' | 'desc';
 
 function getComparator<Key extends keyof any>(
   order: Order,
-  orderBy: Key,
+  orderBy: any,
 ): (
   a: { [key in Key]: number | string },
   b: { [key in Key]: number | string },
@@ -136,7 +136,7 @@ function EnhancedTableHead(props: EnhancedTableProps) {
   const { onSelectAllClick, order, orderBy, numSelected, rowCount, onRequestSort } =
     props;
   const createSortHandler =
-    (property: keyof Data) => (event: React.MouseEvent<unknown>) => {
+    (property: any) => (event: React.MouseEvent<unknown>) => {
       onRequestSort(event, property);
     };
 
@@ -206,12 +206,12 @@ export default function ClientTable() {
     setSelected([]);
   };
 
-  const handleClick = (event: React.MouseEvent<unknown>, name: string) => {
+  const handleClick = (event: React.MouseEvent<unknown>, code: string) => {
-    const selectedIndex = selected.indexOf(name);
+    const selectedIndex = selected.indexOf(code);
     let newSelected: readonly string[] = [];
 
     if (selectedIndex === -1) {
-      newSelected = newSelected.concat(selected, name);
+      newSelected = newSelected.concat(selected, code);
     } else if (selectedIndex === 0) {
       newSelected = newSelected.concat(selected.slice(1));
     } else if (selectedIndex === selected.length - 1) {
@@ -235,7 +235,7 @@ export default function ClientTable() {
     setPage(0);
   };
 
-  const isSelected = (name: string) => selected.indexOf(name) !== -1;
+  const isSelected = (code: any) => selected.indexOf(code.toString()) !== -1;
 
   // Avoid a layout jump when reaching the last page with empty rows.
   const emptyRows =
@@ -268,7 +268,7 @@ export default function ClientTable() {
                   return (
                     <TableRow
                       hover
-                      onClick={(event) => handleClick(event, row.clientCode)}
+                      onClick={(event) => handleClick(event, row.clientCode.toString())}
                       role="checkbox"
                       aria-checked={isItemSelected}
                       tabIndex={-1}

src/components/administrativeTables/ClientsTableView.ts

@@ -33,7 +33,7 @@ export const ClientTableView = styled.main`
   }
 `
 
-export const StyledStatus = styled.div<{status: string}>`
+export const StyledStatus = styled.div<{status: any}>`
   display: flex;
   align-items: center;
   justify-content: center;

src/components/administrativeTables/FaqTable.tsx

@@ -42,12 +42,12 @@ function createData(
 }
 
 const rows = [
-  createData('Como usar o sistema?', 'Você deve usar assim... e assado...', 'Active'),
+  createData('Como usar o sistema?', 'Você deve usar assim... e assado...', 'ativo'),
-  createData('Como usar o sistema', 'Você deve usar assim... e assado...', 'active'),
+  createData('Como usar o sistema', 'Você deve usar assim... e assado...', 'ativo'),
-  createData('Como usar o sistema?', 'Você deve usar assim... e assado...', 'active'),
+  createData('Como usar o sistema?', 'Você deve usar assim... e assado...', 'ativo'),
-  createData('Como usar o sistema?', 'Você deve usar assim... e assado...', 'active'),
+  createData('Como usar o sistema?', 'Você deve usar assim... e assado...', 'ativo'),
-  createData('Como usar o sistema?', 'Você deve usar assim... e assado...', 'active'),
+  createData('Como usar o sistema?', 'Você deve usar assim... e assado...', 'ativo'),
-  createData('Como usar o sistema?', 'Você deve usar assim... e assado...', 'inactive'),
+  createData('Como usar o sistema?', 'Você deve usar assim... e assado...', 'inativo'),
 ];
 
 function descendingComparator<T>(a: T, b: T, orderBy: keyof T) {
@@ -66,8 +66,8 @@ function getComparator<Key extends keyof any>(
   order: Order,
   orderBy: Key,
 ): (
-  a: { [key in Key]: number | string },
+  a: { [key in Key]: any },
-  b: { [key in Key]: number | string },
+  b: { [key in Key]: any },
 ) => number {
   return order === 'desc'
     ? (a, b) => descendingComparator(a, b, orderBy)
@@ -98,13 +98,13 @@ const headCells: readonly HeadCell[] = [
     id: 'question',
     numeric: false,
     disablePadding: true,
-    label: 'código do cliente',
+    label: 'Pergunta',
   },
   {
     id: 'answer',
     numeric: true,
     disablePadding: false,
-    label: 'name',
+    label: 'Resposta',
   },
   {
     id: 'status',
@@ -127,7 +127,7 @@ function EnhancedTableHead(props: EnhancedTableProps) {
   const { onSelectAllClick, order, orderBy, numSelected, rowCount, onRequestSort } =
     props;
   const createSortHandler =
-    (property: keyof Data) => (event: React.MouseEvent<unknown>) => {
+    (property: any) => (event: React.MouseEvent<unknown>) => {
       onRequestSort(event, property);
     };
 
@@ -171,7 +171,7 @@ function EnhancedTableHead(props: EnhancedTableProps) {
   );
 }
 
-export default function ClientTable() {
+export default function FaqTable() {
   const [order, setOrder] = useState<Order>('asc');
   const [orderBy, setOrderBy] = useState<keyof Data | string>('status');
   const [selected, setSelected] = useState<readonly string[]>([]);
@@ -190,7 +190,7 @@ export default function ClientTable() {
 
   const handleSelectAllClick = (event: React.ChangeEvent<HTMLInputElement>) => {
     if (event.target.checked) {
-      const newSelecteds = rows.map((n) => n.name);
+      const newSelecteds = rows.map((n) => n.question);
       setSelected(newSelecteds);
       return;
     }

src/components/administrativeTables/NotificationsTable.tsx

@@ -0,0 +1,315 @@
+import DeleteIcon from '@mui/icons-material/Delete';
+import FilterListIcon from '@mui/icons-material/FilterList';
+import Box from '@mui/material/Box';
+import Checkbox from '@mui/material/Checkbox';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import IconButton from '@mui/material/IconButton';
+import Paper from '@mui/material/Paper';
+import { alpha } from '@mui/material/styles';
+import Switch from '@mui/material/Switch';
+import Table from '@mui/material/Table';
+import TableBody from '@mui/material/TableBody';
+import TableCell from '@mui/material/TableCell';
+import TableContainer from '@mui/material/TableContainer';
+import TableHead from '@mui/material/TableHead';
+import TablePagination from '@mui/material/TablePagination';
+import TableRow from '@mui/material/TableRow';
+import TableSortLabel from '@mui/material/TableSortLabel';
+import Toolbar from '@mui/material/Toolbar';
+import Tooltip from '@mui/material/Tooltip';
+import Typography from '@mui/material/Typography';
+import { visuallyHidden } from '@mui/utils';
+import React, { useState } from 'react';
+
+import { ClientTableView, StyledStatus } from './ClientsTableView';
+
+interface Data {
+  notification: string,
+  client: string,
+  status: string,
+}
+
+function createData(
+  notification: string,
+  client: string,
+  status: string,
+): Data {
+  return {
+    notification,
+    client,
+    status,
+  };
+}
+
+const rows = [
+  createData('Confira tal coisa - Texto da notificação', 'Copel', 'enviada'),
+  createData('Confira tal coisa - Texto da notificação', 'Copel', 'enviada'),
+  createData('Confira tal coisa - Texto da notificação', 'Copel', 'enviada'),
+  createData('Confira tal coisa - Texto da notificação', 'Copel', 'falhou'),
+  createData('Confira tal coisa - Texto da notificação', 'Copel', 'pendente'),
+  createData('Confira tal coisa - Texto da notificação', 'Copel', 'enviada'),
+];
+
+function descendingComparator<T>(a: T, b: T, orderBy: keyof T) {
+  if (b[orderBy] < a[orderBy]) {
+    return -1;
+  }
+  if (b[orderBy] > a[orderBy]) {
+    return 1;
+  }
+  return 0;
+}
+
+type Order = 'asc' | 'desc';
+
+function getComparator<Key extends keyof any>(
+  order: Order,
+  orderBy: Key,
+): (
+  a: { [key in Key]: any },
+  b: { [key in Key]: any },
+) => number {
+  return order === 'desc'
+    ? (a, b) => descendingComparator(a, b, orderBy)
+    : (a, b) => -descendingComparator(a, b, orderBy);
+}
+
+function stableSort<T>(array: readonly T[], comparator: (a: T, b: T) => number) {
+  const stabilizedThis = array.map((el, index) => [el, index] as [T, number]);
+  stabilizedThis.sort((a, b) => {
+    const order = comparator(a[0], b[0]);
+    if (order !== 0) {
+      return order;
+    }
+    return a[1] - b[1];
+  });
+  return stabilizedThis.map((el) => el[0]);
+}
+
+interface HeadCell {
+  disablePadding: boolean;
+  id: keyof Data | string;
+  label: string;
+  numeric: boolean;
+}
+
+const headCells: readonly HeadCell[] = [
+  {
+    id: 'notification',
+    numeric: false,
+    disablePadding: true,
+    label: 'notificação',
+  },
+  {
+    id: 'client',
+    numeric: true,
+    disablePadding: false,
+    label: 'cliente',
+  },
+  {
+    id: 'status',
+    numeric: true,
+    disablePadding: false,
+    label: 'status',
+  },
+];
+
+interface EnhancedTableProps {
+  numSelected: number;
+  onRequestSort: (event: React.MouseEvent<unknown>, property: keyof Data) => void;
+  onSelectAllClick: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  order: Order;
+  orderBy: string;
+  rowCount: number;
+}
+
+function EnhancedTableHead(props: EnhancedTableProps) {
+  const { onSelectAllClick, order, orderBy, numSelected, rowCount, onRequestSort } =
+    props;
+  const createSortHandler =
+    (property: any) => (event: React.MouseEvent<unknown>) => {
+      onRequestSort(event, property);
+    };
+
+  return (
+    <TableHead>
+      <TableRow>
+        <TableCell padding="checkbox">
+          <Checkbox
+            color="primary"
+            indeterminate={numSelected > 0 && numSelected < rowCount}
+            checked={rowCount > 0 && numSelected === rowCount}
+            onChange={onSelectAllClick}
+            inputProps={{
+              'aria-label': 'select all desserts',
+            }}
+          />
+        </TableCell>
+        {headCells.map((headCell) => (
+          <TableCell
+            key={headCell.id}
+            align='left'
+            padding={headCell.disablePadding ? 'none' : 'normal'}
+            sortDirection={orderBy === headCell.id ? order : false}
+          >
+            <TableSortLabel
+              active={orderBy === headCell.id}
+              direction={orderBy === headCell.id ? order : 'asc'}
+              onClick={createSortHandler(headCell.id)}
+            >
+              {headCell.label}
+              {orderBy === headCell.id ? (
+                <Box component="span" sx={visuallyHidden}>
+                  {order === 'desc' ? 'sorted descending' : 'sorted ascending'}
+                </Box>
+              ) : null}
+            </TableSortLabel>
+          </TableCell>
+        ))}
+      </TableRow>
+    </TableHead>
+  );
+}
+
+export default function ClientTable() {
+  const [order, setOrder] = useState<Order>('asc');
+  const [orderBy, setOrderBy] = useState<keyof Data | string>('status');
+  const [selected, setSelected] = useState<readonly string[]>([]);
+  const [page, setPage] = useState<number>(0);
+  const [dense, setDense] = useState<boolean>(false);
+  const [rowsPerPage, setRowsPerPage] = useState<number>(5);
+
+  const handleRequestSort = (
+    event: React.MouseEvent<unknown>,
+    property: keyof Data,
+  ) => {
+    const isAsc = orderBy === property && order === 'asc';
+    setOrder(isAsc ? 'desc' : 'asc');
+    setOrderBy(property);
+  };
+
+  const handleSelectAllClick = (event: React.ChangeEvent<HTMLInputElement>) => {
+    if (event.target.checked) {
+      const newSelecteds = rows.map((n) => n.notification);
+      setSelected(newSelecteds);
+      return;
+    }
+    setSelected([]);
+  };
+
+  const handleClick = (event: React.MouseEvent<unknown>, name: string) => {
+    const selectedIndex = selected.indexOf(name);
+    let newSelected: readonly string[] = [];
+
+    if (selectedIndex === -1) {
+      newSelected = newSelected.concat(selected, name);
+    } else if (selectedIndex === 0) {
+      newSelected = newSelected.concat(selected.slice(1));
+    } else if (selectedIndex === selected.length - 1) {
+      newSelected = newSelected.concat(selected.slice(0, -1));
+    } else if (selectedIndex > 0) {
+      newSelected = newSelected.concat(
+        selected.slice(0, selectedIndex),
+        selected.slice(selectedIndex + 1),
+      );
+    }
+
+    setSelected(newSelected);
+  };
+
+  const handleChangePage = (event: unknown, newPage: number) => {
+    setPage(newPage);
+  };
+
+  const handleChangeRowsPerPage = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setRowsPerPage(parseInt(event.target.value, 10));
+    setPage(0);
+  };
+
+  const isSelected = (name: string) => selected.indexOf(name) !== -1;
+
+  // Avoid a layout jump when reaching the last page with empty rows.
+  const emptyRows =
+    page > 0 ? Math.max(0, (1 + page) * rowsPerPage - rows.length) : 0;
+
+  return (
+    <ClientTableView>
+      <Paper sx={{ width: '100%', mb: 2 }}>
+        <TableContainer>
+          <Table
+            sx={{ minWidth: 750 }}
+            aria-labelledby="tableTitle"
+            size={dense ? 'small' : 'medium'}
+          >
+            <EnhancedTableHead
+              numSelected={selected.length}
+              order={order}
+              orderBy={orderBy}
+              onSelectAllClick={handleSelectAllClick}
+              onRequestSort={handleRequestSort}
+              rowCount={rows.length}
+            />
+            <TableBody>
+              {stableSort(rows, getComparator(order, orderBy))
+                .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
+                .map((row, index) => {
+                  const isItemSelected = isSelected(row.notification.toString());
+                  const labelId = `enhanced-table-checkbox-${index}`;
+
+                  return (
+                    <TableRow
+                      hover
+                      onClick={(event) => handleClick(event, row.notification.toString())}
+                      role="checkbox"
+                      aria-checked={isItemSelected}
+                      tabIndex={-1}
+                      key={row.notification}
+                      selected={isItemSelected}
+                    >
+                      <TableCell padding="checkbox">
+                        <Checkbox
+                          color="primary"
+                          checked={isItemSelected}
+                          inputProps={{
+                            'aria-labelledby': labelId,
+                          }}
+                        />
+                      </TableCell>
+                      <TableCell
+                        component="th"
+                        id={labelId}
+                        scope="row"
+                        padding="none"
+                      >
+                        {row.notification}
+                      </TableCell>
+                      <TableCell align="left">{row.client}</TableCell>
+                      <TableCell align="left"><StyledStatus status={row.status==='enviada'? 'ativo' : row.status==='falhou'? 'inativo' : 'pendente'}>{row.status}</StyledStatus></TableCell>
+                    </TableRow>
+                  );
+                })}
+              {emptyRows > 0 && (
+                <TableRow
+                  style={{
+                    height: (dense ? 33 : 53) * emptyRows,
+                  }}
+                >
+                  <TableCell colSpan={6} />
+                </TableRow>
+              )}
+            </TableBody>
+          </Table>
+        </TableContainer>
+        <TablePagination
+          rowsPerPageOptions={[5, 10, 25]}
+          component="div"
+          count={rows.length}
+          rowsPerPage={rowsPerPage}
+          page={page}
+          onPageChange={handleChangePage}
+          onRowsPerPageChange={handleChangeRowsPerPage}
+        />
+      </Paper>
+    </ClientTableView>
+  );
+}

src/components/sidebar/Sidebar.tsx

@@ -63,6 +63,7 @@ export default function Sidebar() {
               </div> */}
             <Link href='/administrative/clients'><li className={router.pathname=='/administrative/clients' ? 'actualPath' : null } ><Image src='/assets/sidebar/economyIcon.svg' width={25} height={25} />{'Clientes >'}</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/notifications'><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>
             {/* <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>

src/pages/administrative/clients.tsx

@@ -12,8 +12,8 @@ import FaqButton1 from '../../components/buttons/faqButton/FaqButton1';
 import FaqButton2 from '../../components/buttons/faqButton/FaqButton2';
 import AdministrativeHeader from '../../components/administrativeHeader/AdministrativeHeader';
 import ClientsTable from '../../components/administrativeTables/ClientsTable';
+import Header from '../../components/header/Header'
 
-import ConfirmModal from '../../components/modal/ConfirmModal';
 
 const style = {
   position: 'absolute' as const,
@@ -40,33 +40,15 @@ export default function clients() {
   const [openModalInativar, setOpenModalInativar] = useState(false)
 
 
-  const rows = [
-    { id: 1, codigoCliente: 'Unidade - 9500130', clientName: 'Copel', units: 'clique para ver unidades', age: 'ativo' },
-    { id: 2, codigoCliente: 'Unidade - 9500130', clientName: 'Copel', units: 'clique para ver unidades', age: 'ativo' },
-    { id: 3, codigoCliente: 'Unidade - 9500130', clientName: 'Copel', units: 'clique para ver unidades', age: 'ativo' },
-    { id: 4, codigoCliente: 'Unidade - 9500689', clientName: 'Copel', units: 'clique para ver unidades', age: 'ativo' },
-    { id: 5, codigoCliente: 'Unidade - 9500689', clientName: 'Copel', units: 'clique para ver unidades', age: 'ativo' },
-    { id: 6, codigoCliente: 'Unidade - 9500689', clientName: 'Copel', units: 'clique para ver unidades', age: 'ativo' },
-    { id: 7, codigoCliente: 'Unidade - 9500130', clientName: 'Copel', units: 'clique para ver unidades', age: 'ativo' },
-    { id: 8, codigoCliente: 'Unidade - 9500130', clientName: 'FraCopelnces', units: 'clique para ver unidades', age: 'ativo' },
-    { id: 9, codigoCliente: 'Unidade - 9500130', clientName: 'Copel', units: 'clique para ver unidades', age: 'ativo' },
-  ];
-
-  const columns: GridColDef[] = [
-    { field: 'codigoCliente', headerName: 'Código Cliente', width: 180 },
-    { field: 'clientName', headerName: 'Nome do cliente', width: 130 },
-    { field: 'units', headerName: 'Unidade', width: 130 },
-    { field: 'status', headerName: 'Status', width: 90 },
-  ];
 
   return (
     <div style={{display: 'flex', flexDirection: 'column', width: '100%'}}>
-      <AdministrativeHeader />
       <ClientsView>
+        <Header name='' />
         <PageTitle title='Clientes' subtitle='Clientes Smart Energia'/>
           {/* <BasicButton title='Adicionar' onClick={handleOpen}/> */}
           <div className='buttons'>
-        <button className='btn2' onClick={handleOpen}>Open modal</button>
+        <button className='btn2' onClick={handleOpen}>Adicionar</button>
         <button className='btn1' onClick={handleOpen}>Inativar</button>
         </div>
         <Modal
@@ -87,8 +69,8 @@ export default function clients() {
          <TextField id="outlined-basic" label="Codigo do Cliente Smart Energia" sx={{width:350, ml:5, mt:2}} variant="outlined" />
          <TextField id="outlined-basic" label="Imagem/Logotipo" sx={{width:350, ml:8, mt:2}} variant="outlined" />
           <br /><br />
-         <FaqButton1  title='Cancelar' />
+        <FaqButton1  title='Cancelar' onClick={()=>console.log()} />
-          <FaqButton2  title='Salvar' />
+        <FaqButton2  title='Salvar' onClick={()=>console.log()}/>
         </Box>
         </Modal>
         <section>

src/pages/administrative/notifications/index.tsx

@@ -7,6 +7,7 @@ import Head from 'next/head'
 import React from 'react'
 
 import AdministrativeHeader from '../../../components/administrativeHeader/AdministrativeHeader'
+import NotificationsTable from '../../../components/administrativeTables/NotificationsTable';
 import BasicButton from '../../../components/buttons/basicButton/BasicButton';
 import CommonQuestionsCard from '../../../components/faqQuestionsCard/FaqQuestionsCard'
 import Header from '../../../components/header/Header'
@@ -26,53 +27,13 @@ export default function commonQuestions() {
 
   return (
     <>
+      <FaqView>
         <Head>
           <title>Smart Energia - FAQ</title>
         </Head>
-      <AdministrativeHeader />
+        <Header />
-      <FaqView>
-        <h1>Perguntas Frequentes</h1>
-        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
 
-        <TextField id="standard-basic" label="Mensagem" sx={{width:700}} variant="standard" />
+        <NotificationsTable />
-
-        <br />
-
-        <FormControl size='small' fullWidth sx={{ width: 135}} >
-
-          <InputLabel id="demo-simple-select-label">Clientes</InputLabel>
-          <Select
-            labelId="demo-simple-select-label"
-            id="demo-simple-select"
-            value={month}
-            label="Month"
-            onChange={handleChangeMonth}
-          >
-            <MenuItem value={15}>Cliente 1</MenuItem>
-            <MenuItem value={20}>Cliente 2</MenuItem>
-            <MenuItem value={30}>Cliente 3</MenuItem>
-            <MenuItem value={30}>Cliente 4</MenuItem>
-            <MenuItem value={30}>Cliente 5</MenuItem>
-            <MenuItem value={30}>Cliente 6</MenuItem>
-            <MenuItem value={30}>Cliente 7</MenuItem>
-
-          </Select>
-        </FormControl>
-  <br />
-        <BasicButton title='Enviar' onClick={() => console.log()}/>
-
-        <section className='CommonQuestionsSection' >
-          <CommonQuestionsCard />
-          <hr />
-          <CommonQuestionsCard />
-          <hr />
-          <CommonQuestionsCard />
-          <hr />
-          <CommonQuestionsCard />
-          <hr />
-          <CommonQuestionsCard />
-          <hr />
-        </section>
       </FaqView>
     </>
   )

src/styles/layouts/clients/ClientsView.ts

@@ -11,17 +11,13 @@ export const ClientsView = styled.main`
 
     width: 100%;
 
-    :nth-child(2) {
+    :nth-child(3) {
       justify-content: space-between;
 
       width: 18rem;
 
       margin: 45px 0 22px 0;
     }
-
-    :last-child {
-      width: 100%;
-    }
   }
   .btn2{
       background: #254F7F;