From a3027ebb7fdb7bf6817575b61b468b182fa68564 Mon Sep 17 00:00:00 2001 From: Alex Santos Date: Tue, 7 Jun 2022 16:12:07 -0300 Subject: [PATCH 01/18] update faq, notification --- src/pages/administrative/faq/index.tsx | 39 +++++++++ .../administrative/notification/index.tsx | 82 +++++++++++++++++++ 2 files changed, 121 insertions(+) create mode 100644 src/pages/administrative/faq/index.tsx create mode 100644 src/pages/administrative/notification/index.tsx diff --git a/src/pages/administrative/faq/index.tsx b/src/pages/administrative/faq/index.tsx new file mode 100644 index 0000000..ed36e69 --- /dev/null +++ b/src/pages/administrative/faq/index.tsx @@ -0,0 +1,39 @@ +import Head from 'next/head' +import React from 'react' +import CommonQuestionsCard from '../../../components/faqQuestionsCard/FaqQuestionsCard' +import Header from '../../../components/header/Header' +import { FaqView } from '../../../styles/layouts/commonQuestions/FaqView' +import BasicButton from '../../../components/buttons/basicButton/BasicButton'; + +import TextField from '@mui/material/TextField'; + +export default function commonQuestions() { + return ( + + + Smart Energia - FAQ + +
+

Perguntas Frequentes

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+ + + +
+ + +
+ +
+ +
+ +
+ +
+ +
+
+ + ) +} diff --git a/src/pages/administrative/notification/index.tsx b/src/pages/administrative/notification/index.tsx new file mode 100644 index 0000000..7962c9f --- /dev/null +++ b/src/pages/administrative/notification/index.tsx @@ -0,0 +1,82 @@ +import Head from 'next/head' +import React from 'react' +import CommonQuestionsCard from '../../../components/faqQuestionsCard/FaqQuestionsCard' +import Header from '../../../components/header/Header' +import { FaqView } from '../../../styles/layouts/commonQuestions/FaqView' +import BasicButton from '../../../components/buttons/basicButton/BasicButton'; +import InputLabel from '@mui/material/InputLabel'; +import MenuItem from '@mui/material/MenuItem'; +import FormControl from '@mui/material/FormControl'; +import Select, { SelectChangeEvent } from '@mui/material/Select'; +import TextField from '@mui/material/TextField'; + + + + + + +export default function commonQuestions() { + + const [month, setMonth] = React.useState(''); + const [unidade, setUnidade] = React.useState(''); + + const handleChangeMonth = (event: SelectChangeEvent) => { + setMonth(event.target.value); + }; + const handleChangeUnidade = (event: SelectChangeEvent) => { + setUnidade(event.target.value); + }; + + + + return ( + + + Smart Energia - FAQ + +
+

Perguntas Frequentes

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+ + + +
+ + + + Clientes + + +
+ + +
+ +
+ +
+ +
+ +
+ +
+
+ + ) +} From b7084463d9a8c6f436bb513afc8f5d10a3c388ae Mon Sep 17 00:00:00 2001 From: joseCorte-exe Date: Thu, 9 Jun 2022 11:56:27 -0300 Subject: [PATCH 02/18] add some tables --- .../AdministrativeHeader.tsx | 74 ++++ .../AdministrativeHeaderView.ts | 72 ++++ .../administrativeTables/ClientsTable.tsx | 325 ++++++++++++++++++ .../administrativeTables/ClientsTableView.ts | 50 +++ .../administrativeTables/FaqTable.tsx | 315 +++++++++++++++++ src/components/modal/ConfirmModal.tsx | 50 +++ src/components/modal/Modal.tsx | 12 +- src/components/sidebar/Sidebar.tsx | 161 ++++++--- src/pages/accumulatedSavings.tsx | 4 +- src/pages/administrative/aboutUs/index.tsx | 64 ++++ .../accumulatedSavings/index.tsx | 39 +++ src/pages/administrative/clients.tsx | 99 +++--- .../administrative/costIndicator/index.tsx | 38 ++ .../administrative/estimatedCost/index.tsx | 39 +++ src/pages/administrative/faq/index.tsx | 37 +- .../administrative/grossSavings/index.tsx | 39 +++ src/pages/administrative/index.tsx | 93 ++++- .../administrative/industryInfo/index.tsx | 37 ++ src/pages/administrative/news/index.tsx | 58 ++++ .../administrative/notification/index.tsx | 82 ----- .../administrative/notifications/index.tsx | 79 +++++ src/pages/administrative/pld/index.tsx | 231 +++++++++++++ .../administrative/resumoOperacao/index.tsx | 161 +++++++++ src/pages/administrative/telemetria/index.tsx | 195 +++++++++++ src/pages/areaTest.tsx | 25 +- src/pages/news.tsx | 19 +- src/pages/pld/index.tsx | 22 +- src/pages/resumoOperacao.tsx | 118 +++---- .../ResumoOperacao/ResumoOperacaoView.ts | 28 +- .../layouts/Telemetria/TelemetriaView.ts | 33 +- src/styles/layouts/clients/ClientsView.ts | 34 +- .../layouts/industryInfo/IndustryInfoView.ts | 2 +- src/styles/layouts/news/NewsView.ts | 35 +- src/styles/layouts/pld/PldView.ts | 25 +- 34 files changed, 2340 insertions(+), 355 deletions(-) create mode 100644 src/components/administrativeHeader/AdministrativeHeader.tsx create mode 100644 src/components/administrativeHeader/AdministrativeHeaderView.ts create mode 100644 src/components/administrativeTables/ClientsTable.tsx create mode 100644 src/components/administrativeTables/ClientsTableView.ts create mode 100644 src/components/administrativeTables/FaqTable.tsx create mode 100644 src/components/modal/ConfirmModal.tsx create mode 100644 src/pages/administrative/aboutUs/index.tsx create mode 100644 src/pages/administrative/accumulatedSavings/index.tsx create mode 100644 src/pages/administrative/costIndicator/index.tsx create mode 100644 src/pages/administrative/estimatedCost/index.tsx create mode 100644 src/pages/administrative/grossSavings/index.tsx create mode 100644 src/pages/administrative/industryInfo/index.tsx create mode 100644 src/pages/administrative/news/index.tsx delete mode 100644 src/pages/administrative/notification/index.tsx create mode 100644 src/pages/administrative/notifications/index.tsx create mode 100644 src/pages/administrative/pld/index.tsx create mode 100644 src/pages/administrative/resumoOperacao/index.tsx create mode 100644 src/pages/administrative/telemetria/index.tsx diff --git a/src/components/administrativeHeader/AdministrativeHeader.tsx b/src/components/administrativeHeader/AdministrativeHeader.tsx new file mode 100644 index 0000000..d72e521 --- /dev/null +++ b/src/components/administrativeHeader/AdministrativeHeader.tsx @@ -0,0 +1,74 @@ +import Avatar from '@mui/material/Avatar' +import FormControl from '@mui/material/FormControl'; +import InputLabel from '@mui/material/InputLabel'; +import MenuItem from '@mui/material/MenuItem'; +import Select, { SelectChangeEvent } from '@mui/material/Select'; +import TextField from '@mui/material/TextField'; +import React, { useState } from 'react' + +import { AdministrativeHeaderView } from './AdministrativeHeaderView'; + +function stringToColor(string: string) { + let hash = 0; + let i; + + for (i = 0; i < string.length; i += 1) { + hash = string.charCodeAt(i) + ((hash << 5) - hash); + } + + let color = '#'; + + for (i = 0; i < 3; i += 1) { + const value = (hash >> (i * 8)) & 0xff; + color += `00${value.toString(16)}`.slice(-2); + } + + return color; +} + +function stringAvatar(name: string) { + return { + sx: { + bgcolor: stringToColor(name), + }, + children: `${name.split(' ')[0][0]}${name.split(' ')[1][0]}`, + }; +} + +export default function AdministrativeHeader() { + const [unity, setUnity] = useState(''); + + const handleChange = (event: SelectChangeEvent) => { + setUnity(event.target.value); + }; + + return ( + +
+ +
+
+ + + + +
+ + ) +} diff --git a/src/components/administrativeHeader/AdministrativeHeaderView.ts b/src/components/administrativeHeader/AdministrativeHeaderView.ts new file mode 100644 index 0000000..b3bfc7f --- /dev/null +++ b/src/components/administrativeHeader/AdministrativeHeaderView.ts @@ -0,0 +1,72 @@ +import styled from "styled-components"; + +export const AdministrativeHeaderView = styled.header` + display: flex; + justify-content: space-between; + align-items: flex-start; + + align-self: center; + + margin: 10px 0 20px 0; + + width: 95%; + + /* min-height: 80px; */ + + section { + width: 30%; + + :last-child { + display: flex; + justify-content: flex-end; + align-items: flex-start; + + height: fit-content; + } + } + + .icon { + position: relative; + + display: flex; + align-items: center; + justify-content: center; + + width: 150px; + height: 40px; + + border-radius: 8px; + + background-color: #254F7F; + color: white; + + transform: translateX(12%); + + ::after { + content: ""; + position: relative; + left: 2.5rem; + background-color: #fff; + width: 45px; + height: 45px; + border-radius: 50%; + } + } + + @media (max-width: 1020px) { + .icon { + display: none; + } + section { + width: 50%; + } + } + @media (max-width: 1640px) { + .icon { + transform: translateX(6%); + } + input { + height: 2rem; + } + } +` diff --git a/src/components/administrativeTables/ClientsTable.tsx b/src/components/administrativeTables/ClientsTable.tsx new file mode 100644 index 0000000..742d03a --- /dev/null +++ b/src/components/administrativeTables/ClientsTable.tsx @@ -0,0 +1,325 @@ +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 { + clientCode: number, + name: string, + unity: string, + status: string, +} + +function createData( + clientCode: number, + name: string, + unity: string, + status: string, +): Data { + return { + clientCode, + name, + unity, + status, + }; +} + +const rows = [ + createData(9500130, 'Copel', 'clique para ver unidades', 'ativo'), + createData(9500131, 'Copel', 'clique para ver unidades', 'ativo'), + createData(9500132, 'Copel', 'clique para ver unidades', 'ativo'), + createData(9500689, 'Copel', 'clique para ver unidades', 'pendente'), + createData(9500690, 'Copel', 'clique para ver unidades', 'inativo'), + createData(9500691, 'Copel', 'clique para ver unidades', 'inativo'), +]; + +function descendingComparator(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( + order: Order, + orderBy: Key, +): ( + a: { [key in Key]: number | string }, + b: { [key in Key]: number | string }, +) => number { + return order === 'desc' + ? (a, b) => descendingComparator(a, b, orderBy) + : (a, b) => -descendingComparator(a, b, orderBy); +} + +function stableSort(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: 'clientCode', + numeric: false, + disablePadding: true, + label: 'código do cliente', + }, + { + id: 'name', + numeric: true, + disablePadding: false, + label: 'name', + }, + { + id: 'unity', + numeric: true, + disablePadding: false, + label: 'unity', + }, + { + id: 'status', + numeric: true, + disablePadding: false, + label: 'status', + }, +]; + +interface EnhancedTableProps { + numSelected: number; + onRequestSort: (event: React.MouseEvent, property: keyof Data) => void; + onSelectAllClick: (event: React.ChangeEvent) => void; + order: Order; + orderBy: string; + rowCount: number; +} + +function EnhancedTableHead(props: EnhancedTableProps) { + const { onSelectAllClick, order, orderBy, numSelected, rowCount, onRequestSort } = + props; + const createSortHandler = + (property: keyof Data) => (event: React.MouseEvent) => { + onRequestSort(event, property); + }; + + return ( + + + + 0 && numSelected < rowCount} + checked={rowCount > 0 && numSelected === rowCount} + onChange={onSelectAllClick} + inputProps={{ + 'aria-label': 'select all desserts', + }} + /> + + {headCells.map((headCell) => ( + + + {headCell.label} + {orderBy === headCell.id ? ( + + {order === 'desc' ? 'sorted descending' : 'sorted ascending'} + + ) : null} + + + ))} + + + ); +} + +export default function ClientTable() { + const [order, setOrder] = useState('asc'); + const [orderBy, setOrderBy] = useState('status'); + const [selected, setSelected] = useState([]); + const [page, setPage] = useState(0); + const [dense, setDense] = useState(false); + const [rowsPerPage, setRowsPerPage] = useState(5); + + const handleRequestSort = ( + event: React.MouseEvent, + property: keyof Data, + ) => { + const isAsc = orderBy === property && order === 'asc'; + setOrder(isAsc ? 'desc' : 'asc'); + setOrderBy(property); + }; + + const handleSelectAllClick = (event: React.ChangeEvent) => { + if (event.target.checked) { + const newSelecteds = rows.map((n) => n.name); + setSelected(newSelecteds); + return; + } + setSelected([]); + }; + + const handleClick = (event: React.MouseEvent, 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) => { + 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 ( + + + + + + + {stableSort(rows, getComparator(order, orderBy)) + .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage) + .map((row, index) => { + const isItemSelected = isSelected(row.clientCode); + const labelId = `enhanced-table-checkbox-${index}`; + + return ( + handleClick(event, row.clientCode)} + role="checkbox" + aria-checked={isItemSelected} + tabIndex={-1} + key={row.clientCode} + selected={isItemSelected} + > + + + + + Unidade - {row.clientCode} + + {row.name} + {row.unity} + {row.status} + + ); + })} + {emptyRows > 0 && ( + + + + )} + +
+ + + + + ); +} diff --git a/src/components/administrativeTables/ClientsTableView.ts b/src/components/administrativeTables/ClientsTableView.ts new file mode 100644 index 0000000..4ad9b11 --- /dev/null +++ b/src/components/administrativeTables/ClientsTableView.ts @@ -0,0 +1,50 @@ +import styled from "styled-components"; + +export const ClientTableView = styled.main` + width: 100%; + + color: #6A707E; + + tbody { + tr { + th { + font-family: 'poppins'; + font-weight: 500; + font-size: 16px; + color: #6A707E; + } + + td { + :nth-child(3) { + font-family: 'poppins'; + font-weight: 500; + font-size: 16px; + color: #6A707E; + } + :nth-child(4) { + font-family: 'poppins'; + font-weight: 400; + font-size: 12px; + color: #828282; + text-decoration: underline; + } + } + } + } +` + +export const StyledStatus = styled.div<{status: string}>` + display: flex; + align-items: center; + justify-content: center; + + width: 72px; + height: 31px; + + border-radius: 8px; + + background-color: ${props => props.status == 'ativo'? '#F0FFF8' : props.status == 'pendente'? '#FEFFE5' : '#FFF0F0'}; + color: ${props => props.status == 'ativo'? '#18AB56' : props.status == 'pendente'? '#FFBC10' : '#EB5757'}; + + text-decoration: none!important;; +` diff --git a/src/components/administrativeTables/FaqTable.tsx b/src/components/administrativeTables/FaqTable.tsx new file mode 100644 index 0000000..103fe10 --- /dev/null +++ b/src/components/administrativeTables/FaqTable.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 { + question: string, + answer: string, + status: string, +} + +function createData( + question: string, + answer: string, + status: string, +): Data { + return { + question, + answer, + status, + }; +} + +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...', 'active'), + createData('Como usar o sistema?', 'Você deve usar assim... e assado...', 'active'), + createData('Como usar o sistema?', 'Você deve usar assim... e assado...', 'active'), + createData('Como usar o sistema?', 'Você deve usar assim... e assado...', 'active'), + createData('Como usar o sistema?', 'Você deve usar assim... e assado...', 'inactive'), +]; + +function descendingComparator(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( + order: Order, + orderBy: Key, +): ( + a: { [key in Key]: number | string }, + b: { [key in Key]: number | string }, +) => number { + return order === 'desc' + ? (a, b) => descendingComparator(a, b, orderBy) + : (a, b) => -descendingComparator(a, b, orderBy); +} + +function stableSort(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: 'question', + numeric: false, + disablePadding: true, + label: 'código do cliente', + }, + { + id: 'answer', + numeric: true, + disablePadding: false, + label: 'name', + }, + { + id: 'status', + numeric: true, + disablePadding: false, + label: 'status', + }, +]; + +interface EnhancedTableProps { + numSelected: number; + onRequestSort: (event: React.MouseEvent, property: keyof Data) => void; + onSelectAllClick: (event: React.ChangeEvent) => void; + order: Order; + orderBy: string; + rowCount: number; +} + +function EnhancedTableHead(props: EnhancedTableProps) { + const { onSelectAllClick, order, orderBy, numSelected, rowCount, onRequestSort } = + props; + const createSortHandler = + (property: keyof Data) => (event: React.MouseEvent) => { + onRequestSort(event, property); + }; + + return ( + + + + 0 && numSelected < rowCount} + checked={rowCount > 0 && numSelected === rowCount} + onChange={onSelectAllClick} + inputProps={{ + 'aria-label': 'select all desserts', + }} + /> + + {headCells.map((headCell) => ( + + + {headCell.label} + {orderBy === headCell.id ? ( + + {order === 'desc' ? 'sorted descending' : 'sorted ascending'} + + ) : null} + + + ))} + + + ); +} + +export default function ClientTable() { + const [order, setOrder] = useState('asc'); + const [orderBy, setOrderBy] = useState('status'); + const [selected, setSelected] = useState([]); + const [page, setPage] = useState(0); + const [dense, setDense] = useState(false); + const [rowsPerPage, setRowsPerPage] = useState(5); + + const handleRequestSort = ( + event: React.MouseEvent, + property: keyof Data, + ) => { + const isAsc = orderBy === property && order === 'asc'; + setOrder(isAsc ? 'desc' : 'asc'); + setOrderBy(property); + }; + + const handleSelectAllClick = (event: React.ChangeEvent) => { + if (event.target.checked) { + const newSelecteds = rows.map((n) => n.name); + setSelected(newSelecteds); + return; + } + setSelected([]); + }; + + const handleClick = (event: React.MouseEvent, 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) => { + 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 ( + + + + + + + {stableSort(rows, getComparator(order, orderBy)) + .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage) + .map((row, index) => { + const isItemSelected = isSelected(row.question); + const labelId = `enhanced-table-checkbox-${index}`; + + return ( + handleClick(event, row.question)} + role="checkbox" + aria-checked={isItemSelected} + tabIndex={-1} + key={row.question} + selected={isItemSelected} + > + + + + + {row.question} + + {row.answer} + {row.status} + + ); + })} + {emptyRows > 0 && ( + + + + )} + +
+ + + + + ); +} diff --git a/src/components/modal/ConfirmModal.tsx b/src/components/modal/ConfirmModal.tsx new file mode 100644 index 0000000..b38e561 --- /dev/null +++ b/src/components/modal/ConfirmModal.tsx @@ -0,0 +1,50 @@ +import { ReactJSXElement } from '@emotion/react/types/jsx-namespace'; +import Box from '@mui/material/Box'; +import Button from '@mui/material/Button'; +import Modal from '@mui/material/Modal'; +import Typography from '@mui/material/Typography'; +import * as React from 'react'; +import { useEffect } from 'react'; + +const style = { + // eslint-disable-next-line @typescript-eslint/prefer-as-const + position: 'absolute' as 'absolute', + top: '50%', + left: '50%', + transform: 'translate(-50%, -50%)', + width: '30%', + height: '30%', + bgcolor: 'background.paper', + border: '2px solid #254F7F', + boxShadow: 24, + p: 4, +}; + +interface ConfirmModalInterface{ + open: boolean, + handleIsClose: (value: any) => void, + children: React.ReactNode +} + +export default function ConfirmModal({open, handleIsClose, children}: ConfirmModalInterface) { + const [openState, setOpenState] = React.useState(false); + const handleOpen = () => setOpenState(true); + const handleClose = () => {setOpenState(false); handleIsClose(false)} + + useEffect(() => { + setOpenState(open) + }, [open, openState]) + + return ( + + + {children} + + + ); +} diff --git a/src/components/modal/Modal.tsx b/src/components/modal/Modal.tsx index 6362e9b..a6b7957 100644 --- a/src/components/modal/Modal.tsx +++ b/src/components/modal/Modal.tsx @@ -13,14 +13,20 @@ const style = { left: '50%', transform: 'translate(-50%, -50%)', width: '80%', - height: '80%', + height: '550px', bgcolor: 'background.paper', - border: '2px solid #000', + border: '2px solid #254F7F', boxShadow: 24, p: 4, }; -export default function BasicModal({open, handleIsClose, children}: {open: boolean, handleIsClose: (value: any) => void, children: React.ReactNode}) { +interface BasicModalInterface{ + open: boolean, + handleIsClose: (value: any) => void, + children: React.ReactNode +} + +export default function BasicModal({open, handleIsClose, children}: BasicModalInterface) { const [openState, setOpenState] = React.useState(false); const handleOpen = () => setOpenState(true); const handleClose = () => {setOpenState(false); handleIsClose(false)} diff --git a/src/components/sidebar/Sidebar.tsx b/src/components/sidebar/Sidebar.tsx index 02d42f8..407206c 100644 --- a/src/components/sidebar/Sidebar.tsx +++ b/src/components/sidebar/Sidebar.tsx @@ -1,15 +1,14 @@ -import React, { useState, useEffect } from 'react' -import { useRouter } from 'next/router' -import Image from 'next/image' -import Link from 'next/link' import Box from '@mui/material/Box'; import Button from '@mui/material/Button'; -import Typography from '@mui/material/Typography'; import Modal from '@mui/material/Modal'; import Stack from '@mui/material/Stack'; +import Typography from '@mui/material/Typography'; +import Image from 'next/image' +import Link from 'next/link' +import { useRouter } from 'next/router' +import React, { useEffect, useState } from 'react' - - +import RenderIf from '../../utils/renderIf'; import { SidebarView } from './SidebarView' const style = { @@ -35,56 +34,114 @@ export default function Sidebar() { const router = useRouter() + const user = { + role: 'admin' + } + useEffect(() => { setViewModal(false) }, [router.pathname]) return ( - -
setViewModal(!viewModal)} > - -
-
- -
-
    -
  • {'Visão Geral'}
    • -
  • setEconomiaDrawer(!economiaDrawer)} className={router.pathname=='/grossSavings' || router.pathname=='/accumulatedSavings' || router.pathname=='/estimatedCost' || router.pathname=='/costIndicator' ? 'actualPath' : null } >{'Economia >'}
    • -
    -
  • Economia Bruta
    • -
  • Economia Acumulada
    • -
  • Custo Estimado
    • -
  • Custo R/MWh
    • + <> + + +
    setViewModal(!viewModal)} > +
    -
  • {'Telemetria >'}
    • -
  • {'Resumo de Op. '}
    • -
  • {'Notícias >'}
    • -
  • {'PLD >'}
    • -
  • {'Info Setorial >'}
    • - {/*
  • {'Consumo'}
    • */} -
  • {'Notificações >'}

    25

    • -
  • {'Sobre Nós >'}
    • -
  • {'FAQ >'}
    • - - - - - Deseja realmente sair ? - - - - - -
- - +
+ +
+
    +
  • {'Visão Geral'}
    • + {/*
  • setEconomiaDrawer(!economiaDrawer)} className={router.pathname=='/grossSavings' || router.pathname=='/accumulatedSavings' || router.pathname=='/estimatedCost' || router.pathname=='/costIndicator' ? 'actualPath' : null } >{'Economia >'}
    • +
    +
  • Economia Bruta
    • +
  • Economia Acumulada
    • +
  • Custo Estimado
    • +
  • Custo R/MWh
    • +
    */} +
  • {'Clientes >'}
    • +
  • {'FAQ >'}
    • + {/*
  • {'Telemetria >'}
    • +
  • {'Resumo de Op. '}
    • +
  • {'Notícias >'}
    • +
  • {'PLD >'}
    • +
  • {'Info Setorial >'}
    • +
  • {'Consumo'}
    • +
  • {'Notificações >'}

    25

    • +
  • {'Sobre Nós >'}
    • +
  • {'FAQ >'}
    • */} + + + + + Deseja realmente sair ? + + + + + +
+ + + + + +
setViewModal(!viewModal)} > + +
+
+ +
+
    +
  • {'Visão Geral'}
    • +
  • setEconomiaDrawer(!economiaDrawer)} className={router.pathname=='/grossSavings' || router.pathname=='/accumulatedSavings' || router.pathname=='/estimatedCost' || router.pathname=='/costIndicator' ? 'actualPath' : null } >{'Economia >'}
    • +
    +
  • Economia Bruta
    • +
  • Economia Acumulada
    • +
  • Custo Estimado
    • +
  • Custo R/MWh
    • +
    +
  • {'Telemetria >'}
    • +
  • {'Resumo de Op. '}
    • +
  • {'Notícias >'}
    • +
  • {'PLD >'}
    • +
  • {'Info Setorial >'}
    • + {/*
  • {'Consumo'}
    • */} +
  • {'Notificações >'}

    25

    • +
  • {'Sobre Nós >'}
    • +
  • {'FAQ >'}
    • + + + + + Deseja realmente sair ? + + + + + +
+ + + + ) } diff --git a/src/pages/accumulatedSavings.tsx b/src/pages/accumulatedSavings.tsx index 52b0af1..1134f8f 100644 --- a/src/pages/accumulatedSavings.tsx +++ b/src/pages/accumulatedSavings.tsx @@ -7,7 +7,6 @@ import Header from '../components/header/Header' import PageTitle from '../components/pageTitle/PageTitle' import { EconomiaAcumulada } from '../services/economiaAcumulada' import { dataEconomiaBruta } from '../services/economiaBruta' - import { AccumulatedSavingsView } from '../styles/layouts/economy/accumulatedSavings/AccumulatedSavingsView' export default function AccumulatedSavings() { @@ -19,7 +18,8 @@ export default function AccumulatedSavings() {
- +
) diff --git a/src/pages/administrative/aboutUs/index.tsx b/src/pages/administrative/aboutUs/index.tsx new file mode 100644 index 0000000..ba84ee3 --- /dev/null +++ b/src/pages/administrative/aboutUs/index.tsx @@ -0,0 +1,64 @@ +import TextField from '@mui/material/TextField'; +import Head from 'next/head' +import Image from 'next/image' +import React from 'react' + +import AdministrativeHeader from '../../../components/administrativeHeader/AdministrativeHeader'; +import Banner from '../../../components/banner/Banner' +import Header from '../../../components/header/Header' +import { AboutUsView } from '../../../styles/layouts/aboutUs/AboutUsView' + +export default function aboutUs() { + return ( + + + Smart Energia - About Us + + + +
+

atualizar texto

+ +
+
+

A SMART ENERGIA é uma consultoria independente especializada em Gestão de Energia Elétrica, consolidada como uma das três maiores consultorias do Brasil. + Devido à grande experiência em operações na CCEE – Câmara de Comercialização de Energia Elétrica e ANEEL, entrega resultados que superam as expectativas.

+ +

Nasceu para gerenciar a compra de energia com inovação, transparência e imparcialidade sendo o elo forte e necessário entre os Consumidores e os + Vendedores de energia.

+ +

Baseada em sua experiência no setor elétrico adquirida desde 2001 e em mais de 900 unidades migradas, atua na negociação de contratos de compra e venda de + energia, na Gestão de Energia no Mercado Livre e criação de produtos diferenciados para atender as necessidades específicas dos consumidores.

+ +

Apoiada pela sólida experiência de seus gestores, conhecendo as premissas dos agentes de Comercialização e Geração para a compra e venda de energia, + aplicamos as mesmas premissas a favor dos Consumidores, disponibilizando assim um diferencial único para a tomada de decisão e elaboração das estratégias de + contratação de energia.

+
    +
  • {'Informação'}
    • +
  • {'Economia'}
    • +
  • {'Gestão de Energia'}
    • +
  • {'Imparcialidade'}
    • +
  • {'Previsão de Custos'}
    • +
  • {'Experiência'}
    • +
  • {'Relacionamento'}
    • +
+ +
+ +
+
+ + ) +} diff --git a/src/pages/administrative/accumulatedSavings/index.tsx b/src/pages/administrative/accumulatedSavings/index.tsx new file mode 100644 index 0000000..85a78d9 --- /dev/null +++ b/src/pages/administrative/accumulatedSavings/index.tsx @@ -0,0 +1,39 @@ +import Button from '@material-ui/core/Button' +import Head from 'next/head' +import React from 'react' + +import AdministrativeHeader from '../../../components/administrativeHeader/AdministrativeHeader' +import Chart from '../../../components/graph/Chart' +import { SingleBar } from '../../../components/graph/SingleBar' +import Header from '../../../components/header/Header' +import PageTitle from '../../../components/pageTitle/PageTitle' +import { EconomiaAcumulada } from '../../../services/economiaAcumulada' +import { dataEconomiaBruta } from '../../../services/economiaBruta' +import { AccumulatedSavingsView } from '../../../styles/layouts/economy/accumulatedSavings/AccumulatedSavingsView' + +export default function AccumulatedSavings() { + return ( + + + Smart Energia - Economia Acumulada + + + + +
+ +
+ + ) +} diff --git a/src/pages/administrative/clients.tsx b/src/pages/administrative/clients.tsx index 42972a7..c1712b3 100644 --- a/src/pages/administrative/clients.tsx +++ b/src/pages/administrative/clients.tsx @@ -3,87 +3,90 @@ import TextField from '@mui/material/TextField'; import { DataGrid, GridColDef, GridValueGetterParams } from '@mui/x-data-grid'; import React, { useState } from 'react' +import AdministrativeHeader from '../../components/administrativeHeader/AdministrativeHeader'; +import ClientsTable from '../../components/administrativeTables/ClientsTable'; import BasicButton from '../../components/buttons/basicButton/BasicButton' +import ConfirmModal from '../../components/modal/ConfirmModal'; import Modal from '../../components/modal/Modal'; import PageTitle from '../../components/pageTitle/PageTitle' -import { ClientsModalView, ClientsView } from '../../styles/layouts/clients/ClientsView' +import { ClientsModalView, ClientsView, ConfirmModalView } from '../../styles/layouts/clients/ClientsView' export default function clients() { const [openModal, setOpenModal] = useState(false) + const [openModalInativar, setOpenModalInativar] = useState(false) const rows = [ - { id: 1, lastName: 'Snow', firstName: 'Jon', age: 35 }, - { id: 2, lastName: 'Lannister', firstName: 'Cersei', age: 42 }, - { id: 3, lastName: 'Lannister', firstName: 'Jaime', age: 45 }, - { id: 4, lastName: 'Stark', firstName: 'Arya', age: 16 }, - { id: 5, lastName: 'Targaryen', firstName: 'Daenerys', age: null }, - { id: 6, lastName: 'Melisandre', firstName: null, age: 150 }, - { id: 7, lastName: 'Clifford', firstName: 'Ferrara', age: 44 }, - { id: 8, lastName: 'Frances', firstName: 'Rossini', age: 36 }, - { id: 9, lastName: 'Roxie', firstName: 'Harvey', age: 65 }, + { 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: 'id', headerName: 'ID', width: 70 }, - { field: 'firstName', headerName: 'First name', width: 130 }, - { field: 'lastName', headerName: 'Last name', width: 130 }, - { - field: 'age', - headerName: 'Age', - type: 'number', - width: 90, - }, - { - field: 'fullName', - headerName: 'Full name', - description: 'This column has a value getter and is not sortable.', - sortable: false, - width: 160, - valueGetter: (params: GridValueGetterParams) => - `${params.row.firstName || ''} ${params.row.lastName || ''}`, - }, + { 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 ( - <> +
+
setOpenModal(true)}/> - {throw new Error('fixing...')}}/> + setOpenModalInativar(true)}/>
- + /> */} +
{setOpenModal(value)}}> - - - - - - + +
+ + + + + console.log()}/> + +
- + + {setOpenModalInativar(value)}}> + + setOpenModalInativar(true)}/> + setOpenModalInativar(true)}/> + + +
) } diff --git a/src/pages/administrative/costIndicator/index.tsx b/src/pages/administrative/costIndicator/index.tsx new file mode 100644 index 0000000..f6ee0f3 --- /dev/null +++ b/src/pages/administrative/costIndicator/index.tsx @@ -0,0 +1,38 @@ +import Button from '@material-ui/core/Button' +import Head from 'next/head' +import React from 'react' + +import AdministrativeHeader from '../../../components/administrativeHeader/AdministrativeHeader' +import Chart from '../../../components/graph/Chart' +import { SingleBar } from '../../../components/graph/SingleBar' +import Header from '../../../components/header/Header' +import PageTitle from '../../../components/pageTitle/PageTitle' +import { dataEconomiaBruta } from '../../../services/economiaBruta' +import { dataEconomiaIndicador } from '../../../services/economiaIndicador' +import { CostIndicatorView } from '../../../styles/layouts/economy/costIndicator/CostIndicatorView' + +export default function CostIndicator() { + return ( + + + Smart Energia - Indicador de Custos + + + + +
+ +
+ + ) +} diff --git a/src/pages/administrative/estimatedCost/index.tsx b/src/pages/administrative/estimatedCost/index.tsx new file mode 100644 index 0000000..fbee31d --- /dev/null +++ b/src/pages/administrative/estimatedCost/index.tsx @@ -0,0 +1,39 @@ +import Button from '@material-ui/core/Button' +import Head from 'next/head' +import React from 'react' + +import AdministrativeHeader from '../../../components/administrativeHeader/AdministrativeHeader' +import Chart from '../../../components/graph/Chart' +import { LineBarChart } from '../../../components/graph/LineBarChart' +import Header from '../../../components/header/Header' +import PageTitle from '../../../components/pageTitle/PageTitle' +import { ConsumoEstimado } from '../../../services/consumoEstimado' +import { EstimatedCostView } from '../../../styles/layouts/economy/estimatedCost/EstimatedCostView' + +export default function EstimatedCost() { + return ( + <> + + Smart Energia - Custos Estimados + + + + + +
+ +
+ + + ) +} diff --git a/src/pages/administrative/faq/index.tsx b/src/pages/administrative/faq/index.tsx index ed36e69..4a41b98 100644 --- a/src/pages/administrative/faq/index.tsx +++ b/src/pages/administrative/faq/index.tsx @@ -1,39 +1,24 @@ +import TextField from '@mui/material/TextField'; import Head from 'next/head' import React from 'react' + +import AdministrativeHeader from '../../../components/administrativeHeader/AdministrativeHeader'; +import FaqTable from '../../../components/administrativeTables/FaqTable'; +import BasicButton from '../../../components/buttons/basicButton/BasicButton'; import CommonQuestionsCard from '../../../components/faqQuestionsCard/FaqQuestionsCard' import Header from '../../../components/header/Header' import { FaqView } from '../../../styles/layouts/commonQuestions/FaqView' -import BasicButton from '../../../components/buttons/basicButton/BasicButton'; - -import TextField from '@mui/material/TextField'; export default function commonQuestions() { return ( - + <> Smart Energia - FAQ -
-

Perguntas Frequentes

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

- - - -
- - -
- -
- -
- -
- -
- -
-
- + +
+ + + ) } diff --git a/src/pages/administrative/grossSavings/index.tsx b/src/pages/administrative/grossSavings/index.tsx new file mode 100644 index 0000000..5369c0d --- /dev/null +++ b/src/pages/administrative/grossSavings/index.tsx @@ -0,0 +1,39 @@ +import Button from '@material-ui/core/Button' +import Head from 'next/head' +import React from 'react' + +import AdministrativeHeader from '../../../components/administrativeHeader/AdministrativeHeader' +import Chart from '../../../components/graph/Chart' +import { SingleBar } from '../../../components/graph/SingleBar' +import Header from '../../../components/header/Header' +import PageTitle from '../../../components/pageTitle/PageTitle' +import { dataEconomiaBruta } from '../../../services/economiaBruta' +import { GrossSavingsView } from '../../../styles/layouts/economy/grossSavings/GrossSavings' + +export default function GrossSavings() { + return ( + <> + + Smart Energia - Economia Acumulada + + + + + +
+ +
+ + + ) +} diff --git a/src/pages/administrative/index.tsx b/src/pages/administrative/index.tsx index 90fbab8..5bb3c07 100644 --- a/src/pages/administrative/index.tsx +++ b/src/pages/administrative/index.tsx @@ -1,7 +1,94 @@ -import React from 'react' +import FormControl from '@mui/material/FormControl'; +import IconButton from '@mui/material/IconButton'; +import InputAdornment from '@mui/material/InputAdornment'; +import InputLabel from '@mui/material/InputLabel'; +import OutlinedInput from '@mui/material/OutlinedInput'; +import TextField from '@mui/material/TextField'; +import Head from 'next/head'; +import Image from 'next/image'; +import Link from 'next/link'; +import { useRouter } from 'next/router' +import React, { useState } from 'react' +import { AiOutlineEye, AiOutlineEyeInvisible } from 'react-icons/ai'; + +import LoginButton from '../../components/buttons/loginButton/LoginButton'; +import { LoginContainer, LoginView } from '../../styles/layouts/login/LoginView'; + +export default function Home() { + const [state, setstate]=useState(false); + + const [values, setValues] = React.useState({ + password: '', + showPassword: false, + }); + + const router = useRouter() + const rota = router.pathname + + const handleChange = (prop) => (event) => { + setValues({ ...values, [prop]: event.target.value }); + }; + + const handleClickShowPassword = () => { + setValues({ + ...values, + showPassword: !values.showPassword, + }); + }; + + const handleMouseDownPassword = (event) => { + event.preventDefault(); + }; -export default function index() { return ( -
index
+ + + Smart Energia + + +
+ +
+ + +

Bem-Vindo

+

Estratégias Inteligentes em
Gestão de Energia

+ + + + Password + + + {values.showPassword ? : } + + + } + label="Password" + /> + + Esqueceu a senha ? + + + +
+ Ou +
+ +

+55(41) 3012-5900
www.energiasmart.com.br

+ + + + ) } diff --git a/src/pages/administrative/industryInfo/index.tsx b/src/pages/administrative/industryInfo/index.tsx new file mode 100644 index 0000000..8ca5b64 --- /dev/null +++ b/src/pages/administrative/industryInfo/index.tsx @@ -0,0 +1,37 @@ +import Button from '@material-ui/core/Button' +import Head from 'next/head' +import React from 'react' + +import AdministrativeHeader from '../../../components/administrativeHeader/AdministrativeHeader' +import BasicButton from '../../../components/buttons/basicButton/BasicButton' +import Header from '../../../components/header/Header' +import PageTitle from '../../../components/pageTitle/PageTitle' +import { IndustryInfoView } from '../../../styles/layouts/industryInfo/IndustryInfoView' + +export default function industryInfo() { + return ( + <> + + Smart Energia - Info de Setor + + + +
+ +
+ + + + + ) +} diff --git a/src/pages/administrative/news/index.tsx b/src/pages/administrative/news/index.tsx new file mode 100644 index 0000000..a471f72 --- /dev/null +++ b/src/pages/administrative/news/index.tsx @@ -0,0 +1,58 @@ +import Head from 'next/head'; +import Link from 'next/link' +import React from 'react' + +import AdministrativeHeader from '../../../components/administrativeHeader/AdministrativeHeader'; +import Banner from '../../../components/banner/Banner' +import BasicButton from '../../../components/buttons/basicButton/BasicButton'; +import Header from '../../../components/header/Header' +import { Button, NewsView } from '../../../styles/layouts/news/NewsView' + +export default function index() { + return ( + <> + + Smart Energia - Noticias + + + + + +
+

19 Abril 2022

+ ANEEL APROVA REAJUSTE TARIFÁRIO ANUAL DA ENERGISA SERGIPE DE 16,46 % PARA O CONSUMIDOR RESIDENCIAL +
+
+

A Agência Nacional de Energia Elétrica (ANEEL) aprovou, nesta terça-feira (19/04) o reajuste tarifário anual da Energisa Sergipe – Distribuidora de Energia S.A (ESE). + As novas tarifas da empresa, que atende cerca de e 825 mil unidades consumidoras no Sergipe, entram em vigor nesta sexta, 22/04, com reajuste de 16,46 % para + o consumidor residencial.
+ Os itens que mais impactaram a correção foram os encargos setoriais, os custos de distribuição, a retirada dos componentes financeiros..

+ + +

19 Abril 2022

+ NEEL APROVA REAJUSTE MÉDIO DE 20,36% NA TARIFA DE ENERGIA NO RN +
+
+

A Agência Nacional de Energia Elétrica (ANEEL) aprovou, nesta terça-feira (19/04) o reajuste tarifário anual da Energisa Sergipe – Distribuidora de Energia S.A (ESE). + As novas tarifas da empresa, que atende cerca de e 825 mil unidades consumidoras no Sergipe, entram em vigor nesta sexta, 22/04, com reajuste de 16,46 % para + o consumidor residencial.
+ Os itens que mais impactaram a correção foram os encargos setoriais, os custos de distribuição, a retirada dos componentes financeiros..

+ + +
+ + console.log()}/> + + + ) +} diff --git a/src/pages/administrative/notification/index.tsx b/src/pages/administrative/notification/index.tsx deleted file mode 100644 index 7962c9f..0000000 --- a/src/pages/administrative/notification/index.tsx +++ /dev/null @@ -1,82 +0,0 @@ -import Head from 'next/head' -import React from 'react' -import CommonQuestionsCard from '../../../components/faqQuestionsCard/FaqQuestionsCard' -import Header from '../../../components/header/Header' -import { FaqView } from '../../../styles/layouts/commonQuestions/FaqView' -import BasicButton from '../../../components/buttons/basicButton/BasicButton'; -import InputLabel from '@mui/material/InputLabel'; -import MenuItem from '@mui/material/MenuItem'; -import FormControl from '@mui/material/FormControl'; -import Select, { SelectChangeEvent } from '@mui/material/Select'; -import TextField from '@mui/material/TextField'; - - - - - - -export default function commonQuestions() { - - const [month, setMonth] = React.useState(''); - const [unidade, setUnidade] = React.useState(''); - - const handleChangeMonth = (event: SelectChangeEvent) => { - setMonth(event.target.value); - }; - const handleChangeUnidade = (event: SelectChangeEvent) => { - setUnidade(event.target.value); - }; - - - - return ( - - - Smart Energia - FAQ - -
-

Perguntas Frequentes

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

- - - -
- - - - Clientes - - -
- - -
- -
- -
- -
- -
- -
-
- - ) -} diff --git a/src/pages/administrative/notifications/index.tsx b/src/pages/administrative/notifications/index.tsx new file mode 100644 index 0000000..f585fa2 --- /dev/null +++ b/src/pages/administrative/notifications/index.tsx @@ -0,0 +1,79 @@ +import FormControl from '@mui/material/FormControl'; +import InputLabel from '@mui/material/InputLabel'; +import MenuItem from '@mui/material/MenuItem'; +import Select, { SelectChangeEvent } from '@mui/material/Select'; +import TextField from '@mui/material/TextField'; +import Head from 'next/head' +import React from 'react' + +import AdministrativeHeader from '../../../components/administrativeHeader/AdministrativeHeader' +import BasicButton from '../../../components/buttons/basicButton/BasicButton'; +import CommonQuestionsCard from '../../../components/faqQuestionsCard/FaqQuestionsCard' +import Header from '../../../components/header/Header' +import { FaqView } from '../../../styles/layouts/commonQuestions/FaqView' + +export default function commonQuestions() { + + const [month, setMonth] = React.useState(''); + const [unidade, setUnidade] = React.useState(''); + + const handleChangeMonth = (event: SelectChangeEvent) => { + setMonth(event.target.value); + }; + const handleChangeUnidade = (event: SelectChangeEvent) => { + setUnidade(event.target.value); + }; + + return ( + <> + + Smart Energia - FAQ + + + +

Perguntas Frequentes

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+ + + +
+ + + + Clientes + + +
+ console.log()}/> + +
+ +
+ +
+ +
+ +
+ +
+
+ + + ) +} diff --git a/src/pages/administrative/pld/index.tsx b/src/pages/administrative/pld/index.tsx new file mode 100644 index 0000000..82c071b --- /dev/null +++ b/src/pages/administrative/pld/index.tsx @@ -0,0 +1,231 @@ +import MenuItem from '@mui/material/MenuItem'; +import Select, { SelectChangeEvent } from '@mui/material/Select'; +import TextField from '@mui/material/TextField'; +import Head from 'next/head'; +import Link from 'next/link'; +import { useRouter } from 'next/router' +import React, { useEffect, useState } from 'react' + +import AdministrativeHeader from '../../../components/administrativeHeader/AdministrativeHeader'; +import BasicButton from '../../../components/buttons/basicButton/BasicButton'; +import Chart from '../../../components/graph/Chart'; +import { LineBarChart } from '../../../components/graph/LineBarChart'; +import LineChart from '../../../components/graph/LineChart'; +import Header from '../../../components/header/Header' +import PageTitle from '../../../components/pageTitle/PageTitle'; +import { EconomiaAcumulada } from '../../../services/economiaAcumulada'; +import { EvolucaoPld } from '../../../services/evolucaoPld'; +import { GoBack, NewTableLine, PldGraphView, PldTableView } from '../../../styles/layouts/pld/PldView' +import RenderIf from '../../../utils/renderIf' + +export default function index() { + const [page, setPage] = useState('table') + const [age, setAge] = React.useState(''); + + const handleChange = (event: SelectChangeEvent) => { + setAge(event.target.value); + }; + + useEffect(() => { + console.log(page) + }, [page]) + + return ( +
+ + Smart Energia - PLD + + + + {'< voltar para visão geral'} + + +
+ + + + + +
+ console.log()}/> + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
MêsNordesteNorteSudesteSul
2101xxxxxxxxxxxxxxxx
2102xxxxxxxxxxxxxxxx
2103xxxxxxxxxxxxxxxx
2104xxxxxxxxxxxxxxxx
2105xxxxxxxxxxxxxxxx
2106xxxxxxxxxxxxxxxx
2107xxxxxxxxxxxxxxxx
2108xxxxxxxxxxxxxxxx
2109xxxxxxxxxxxxxxxx
2110xxxxxxxxxxxxxxxx
2111xxxxxxxxxxxxxxxx
2112xxxxxxxxxxxxxxxx
2021xxxxxxxxxxxxxxxx
Mínxxxxxxxxxxxxxxxx
Maxxxxxxxxxxxxxxxxx
Desv Padxxxxxxxxxxxxxxxx
+
+
setPage('perMouth')}> +

Valores Diarios

+
+
setPage('perDate')}> +

Valores Horários

+
+
+ + + + + setPage('table')}>{'< voltar para tabela pld'} + + +
+
+ +
+ + console.log()}/> +
+ + + + + + setPage('table')}>{'< voltar para tabela pld'} + + +
+ + console.log()}/> +
+ + + +
+ ) +} diff --git a/src/pages/administrative/resumoOperacao/index.tsx b/src/pages/administrative/resumoOperacao/index.tsx new file mode 100644 index 0000000..23a0258 --- /dev/null +++ b/src/pages/administrative/resumoOperacao/index.tsx @@ -0,0 +1,161 @@ +import TextField from '@material-ui/core/TextField'; +import Box from '@mui/material/Box'; +import FormControl from '@mui/material/FormControl'; +import InputLabel from '@mui/material/InputLabel'; +import MenuItem from '@mui/material/MenuItem'; +import Select, { SelectChangeEvent } from '@mui/material/Select'; +import Head from 'next/head'; +import React, { useEffect } from 'react'; +// import Teste from '../files/teste.csv'; +import { CSVDownload, CSVLink } from "react-csv"; + +import AdministrativeHeader from '../../../components/administrativeHeader/AdministrativeHeader'; +import BasicButton from '../../../components/buttons/basicButton/BasicButton'; +import Header from '../../../components/header/Header'; +import PageTitle from '../../../components/pageTitle/PageTitle'; +import Sidebar from '../../../components/sidebar/Sidebar'; +// import { dados } from '../services/DadosTabelaResumoOperacao'; +import data from '../../../services/dados.json' +import { NewTableLine, Pagination, TableView } from '../../../styles/layouts/ResumoOperacao/ResumoOperacaoView'; + +export default function index() { + const csvData = [ + // ["firstname", "lastname", "email"], + // ["Ahmed", "Tomi", "ah@smthing.co.com"], + // ["Raed", "Labes", "rl@smthing.co.com"], + // ["Yezzi", "Min l3b", "ymin@cocococo.com"], + + [ "value", "unidade1", "name", "Unidade-1", "operacao", "Compra", "montante", "130,00", "contraparte", "cOPEL COM I5", "preco", "234,67", "valorNF", "38.257,15" ], + [ "value", "unidade2", "name", "Unidade-2", "operacao", "Compra", "montante", "20,00", "contraparte", "EMEWE I5", "preco", "234,67", "valorNF", "38.257,15"], + [ "value", "unidade3", "name", "Unidade-3", "operacao", "Compra", "montante", "30,00", "contraparte", "EMEWE I5", "preco", "234,67", "valorNF", "38.257,15" ], + [ "value", "unidade4", "name", "Unidade-4", "operacao", "Compra", "montante", "40,00", "contraparte", "COPEL COM I5", "preco", "234,67", "valorNF", "38.257,15" ], + [ "value", "unidade5", "name", "Unidade-5", "operacao", "Compra", "montante", "500,00","contraparte", "COPEL COM I5", "preco", "234,67", "valorNF", "38.257,15" ], + [ "value", "unidade6", "name", "Unidade-6", "operacao", "Compra", "montante", "300,00", "contraparte", "COPEL COM I5", "preco","234,67", "valorNF", "965,95" ] + ]; + + const [month, setMonth] = React.useState(''); + const [unidade, setUnidade] = React.useState(''); + + const handleChangeMonth = (event: SelectChangeEvent) => { + setMonth(event.target.value); + }; + const handleChangeUnidade = (event: SelectChangeEvent) => { + setUnidade(event.target.value); + }; + + return( + <> + + + + Smart Energia - Resumo de Operação + + + +

Seletor Mês

+
+ + Unidades + + + + + Mês + + +
+ +
+ + + + + + +
+ console.log()}/> + + + + + + + + + + + + + + { + data.unidades.filter((value, index)=> value.value.includes(unidade)).map((value, index) => { + if (index%2===0) { + return + + + + + + + + } else { + return + + + + + + + + } + }) + } + +
Unidade OperaçãoMontante (MWh)ContrapartePreço(R$/MWh)ValorNF/Crédito(R$)
{value.name}{value.operacao}{value.montante}{value.contraparte}{value.preco}{value.valorNF}
{value.name}{value.operacao}{value.montante}{value.contraparte}{value.preco}{value.valorNF}
+
+ + {/* */} + {/* */} + {/* */} + + + console.log()}/> + + +
+ + + + ) +} diff --git a/src/pages/administrative/telemetria/index.tsx b/src/pages/administrative/telemetria/index.tsx new file mode 100644 index 0000000..f1e77c1 --- /dev/null +++ b/src/pages/administrative/telemetria/index.tsx @@ -0,0 +1,195 @@ +import Button from '@material-ui/core/Button'; +import FormControl from '@mui/material/FormControl'; +import InputLabel from '@mui/material/InputLabel'; +import MenuItem from '@mui/material/MenuItem'; +import Select, { SelectChangeEvent } from '@mui/material/Select'; +import Head from 'next/head'; +import Link from 'next/link'; +import { useRouter } from 'next/router' +import { start } from 'nprogress'; +import React from 'react'; + +import AdministrativeHeader from '../../../components/administrativeHeader/AdministrativeHeader'; +import Banner from '../../../components/banner/Banner'; +import GradientButton from '../../../components/buttons/gradientButton/GradientButton' +import LineChart from '../../../components/graph/LineChart'; +import Header from '../../../components/header/Header'; +import { FatorPotencia } from '../../../services/fatorPotencia'; +import { Buttons, TelemetriaView, Uploads } from '../../../styles/layouts/Telemetria/TelemetriaView'; +import RenderIf from '../../../utils/renderIf'; + +export default function index() { + const [unity, setUnity] = React.useState(''); + const [startDate, setStartDate] = React.useState(''); + const [endDate, setEndDate] = React.useState(''); + const [discretization, setDiscretization] = React.useState(''); + + const [showChart, setShowChart] = React.useState(false); + + const handleChange = (event: SelectChangeEvent) => { + // setAge(event.target.value); + }; + + return( + <> + + + + Smart Energia - Telemetria + + + +
+
+

Unidade

+ + Unidade + + +
+ +
+

Data inicial

+ + Data Inicial + + +
+ +
+

Data Final

+ + Data Final + + +
+ +
+

Discretização

+ + Discretização + + +
+
+ + + + + + + + + setShowChart(!showChart)} green /> + + + + + + +

+ + Fonte: Dados coletados do Sistema de Coleta de Dados + de Energia - SCDE da Câmara de Comercialização
+ Energia Elétrica – CCEE, sendo que as quantidades aqui + informadas são de responsabilidade
do agente de + medição - Distribuidora. + +

+ + + ) +} diff --git a/src/pages/areaTest.tsx b/src/pages/areaTest.tsx index 626b721..dcd051c 100644 --- a/src/pages/areaTest.tsx +++ b/src/pages/areaTest.tsx @@ -1,23 +1,24 @@ -import React from 'react' +import Box from '@mui/material/Box'; +import FilledInput from '@mui/material/FilledInput'; +import FormControl from '@mui/material/FormControl'; +import FormHelperText from '@mui/material/FormHelperText'; +import IconButton from '@mui/material/IconButton'; +import Input from '@mui/material/Input'; +import InputAdornment from '@mui/material/InputAdornment'; +import InputLabel from '@mui/material/InputLabel'; +import OutlinedInput from '@mui/material/OutlinedInput'; +import TextField from '@mui/material/TextField'; import Image from 'next/image' +import React from 'react' + import BasicButton from '../components/buttons/basicButton/BasicButton' import GradientButton from '../components/buttons/gradientButton/GradientButton' import Graph from '../components/graph/Chart' -import Box from '@mui/material/Box'; -import IconButton from '@mui/material/IconButton'; -import Input from '@mui/material/Input'; -import FilledInput from '@mui/material/FilledInput'; -import OutlinedInput from '@mui/material/OutlinedInput'; -import InputLabel from '@mui/material/InputLabel'; -import InputAdornment from '@mui/material/InputAdornment'; -import FormHelperText from '@mui/material/FormHelperText'; -import FormControl from '@mui/material/FormControl'; -import TextField from '@mui/material/TextField'; import LineChart from '../components/graph/LineChart' + // import Footer from '../components/footer/footer' export default function areaTest() { - const [values, setValues] = React.useState({ amount: '', password: '', diff --git a/src/pages/news.tsx b/src/pages/news.tsx index 8452cb2..6039ad3 100644 --- a/src/pages/news.tsx +++ b/src/pages/news.tsx @@ -1,10 +1,11 @@ -import React from 'react' -import Banner from '../components/banner/Banner' -import Header from '../components/header/Header' -import BasicButton from '../components/buttons/basicButton/BasicButton'; -import { NewsView, Button } from '../styles/layouts/news/NewsView' import Head from 'next/head'; import Link from 'next/link' +import React from 'react' + +import Banner from '../components/banner/Banner' +import BasicButton from '../components/buttons/basicButton/BasicButton'; +import Header from '../components/header/Header' +import { Button, NewsView } from '../styles/layouts/news/NewsView' export default function aboutUs() { return ( @@ -26,7 +27,7 @@ export default function aboutUs() { Os itens que mais impactaram a correção foram os encargos setoriais, os custos de distribuição, a retirada dos componentes financeiros..

@@ -40,15 +41,15 @@ export default function aboutUs() { Os itens que mais impactaram a correção foram os encargos setoriais, os custos de distribuição, a retirada dos componentes financeiros..

+ target={"_blank"} + rel={"noreferrer"}> console.log()}/> ) } diff --git a/src/pages/pld/index.tsx b/src/pages/pld/index.tsx index 5cf2ccc..5db0cd5 100644 --- a/src/pages/pld/index.tsx +++ b/src/pages/pld/index.tsx @@ -1,22 +1,20 @@ -import React, { useEffect, useState } from 'react' -import { useRouter } from 'next/router' - -import Header from '../../components/header/Header' import MenuItem from '@mui/material/MenuItem'; import Select, { SelectChangeEvent } from '@mui/material/Select'; +import Head from 'next/head'; +import Link from 'next/link'; +import { useRouter } from 'next/router' +import React, { useEffect, useState } from 'react' -import { GoBack, PldGraphView, PldTableView } from '../../styles/layouts/pld/PldView' - -import RenderIf from '../../utils/renderIf' import BasicButton from '../../components/buttons/basicButton/BasicButton'; import Chart from '../../components/graph/Chart'; -import PageTitle from '../../components/pageTitle/PageTitle'; -import Link from 'next/link'; -import LineChart from '../../components/graph/LineChart'; import { LineBarChart } from '../../components/graph/LineBarChart'; +import LineChart from '../../components/graph/LineChart'; +import Header from '../../components/header/Header' +import PageTitle from '../../components/pageTitle/PageTitle'; import { EconomiaAcumulada } from '../../services/economiaAcumulada'; import { EvolucaoPld } from '../../services/evolucaoPld'; -import Head from 'next/head'; +import { GoBack, PldGraphView, PldTableView } from '../../styles/layouts/pld/PldView' +import RenderIf from '../../utils/renderIf' export default function region() { const router = useRouter() @@ -216,7 +214,7 @@ export default function region() { - + console.log()}/> diff --git a/src/pages/resumoOperacao.tsx b/src/pages/resumoOperacao.tsx index 4c61655..bda8741 100644 --- a/src/pages/resumoOperacao.tsx +++ b/src/pages/resumoOperacao.tsx @@ -1,22 +1,20 @@ +import Box from '@mui/material/Box'; +import FormControl from '@mui/material/FormControl'; +import InputLabel from '@mui/material/InputLabel'; +import MenuItem from '@mui/material/MenuItem'; +import Select, { SelectChangeEvent } from '@mui/material/Select'; +import Head from 'next/head'; import React, { useEffect } from 'react'; +// import Teste from '../files/teste.csv'; +import { CSVDownload, CSVLink } from "react-csv"; + +import BasicButton from '../components/buttons/basicButton/BasicButton'; import Header from '../components/header/Header'; import PageTitle from '../components/pageTitle/PageTitle'; -import BasicButton from '../components/buttons/basicButton/BasicButton'; import Sidebar from '../components/sidebar/Sidebar'; // import { dados } from '../services/DadosTabelaResumoOperacao'; import data from '../services/dados.json' -import InputLabel from '@mui/material/InputLabel'; -import MenuItem from '@mui/material/MenuItem'; -import FormControl from '@mui/material/FormControl'; -import Select, { SelectChangeEvent } from '@mui/material/Select'; -import Box from '@mui/material/Box'; -// import Teste from '../files/teste.csv'; -import { CSVLink, CSVDownload } from "react-csv"; - - - import { Pagination, TableView } from '../styles/layouts/ResumoOperacao/ResumoOperacaoView'; -import Head from 'next/head'; export default function ResumoOperacao() { const csvData = [ @@ -55,7 +53,6 @@ export default function ResumoOperacao() { console.log(data.unidades.filter((value, index)=> value.value.includes(unidade))) }, [month, unidade]) - return( @@ -65,52 +62,49 @@ export default function ResumoOperacao() {

Seletor Mês

-
+
+ + Unidades + + - - Unidades - - - - - - - Mês - - + + Mês + +
@@ -147,22 +141,20 @@ export default function ResumoOperacao() { } }) } -
- {/* */} {/* */} {/* */} - + -
- ) } diff --git a/src/styles/layouts/ResumoOperacao/ResumoOperacaoView.ts b/src/styles/layouts/ResumoOperacao/ResumoOperacaoView.ts index 94a909a..c059741 100644 --- a/src/styles/layouts/ResumoOperacao/ResumoOperacaoView.ts +++ b/src/styles/layouts/ResumoOperacao/ResumoOperacaoView.ts @@ -1,6 +1,5 @@ import styled from 'styled-components' - export const TableView = styled.div` display: flex; padding: 2.5rem; @@ -21,21 +20,16 @@ export const TableView = styled.div` .select{ display: flex; - margin-bottom: 25px; width: 20rem; } - .titleUnidade{ - - } .tg{ border-collapse:collapse; border-spacing:0; font-family:Poppins; width: 100%; - } .tg td{ @@ -49,7 +43,6 @@ export const TableView = styled.div` word-break:normal; } - .tg th{ border-color:#DDDFE1; border-style:solid; @@ -134,8 +127,27 @@ export const Pagination = styled.div` .numberColor{ color: #ABAFB3; } +` +export const NewTableLine = styled.section` + display: flex; + justify-content: center; + align-items: flex-start; + flex-direction: column; -`; + margin: 0 0 15px 0; + width: 100%; + article { + display: flex; + justify-content: space-between; + align-items: center; + + flex-direction: row; + + width: 100%; + + margin: 0 0 10px 0; + } +` diff --git a/src/styles/layouts/Telemetria/TelemetriaView.ts b/src/styles/layouts/Telemetria/TelemetriaView.ts index f380774..b7ddc00 100644 --- a/src/styles/layouts/Telemetria/TelemetriaView.ts +++ b/src/styles/layouts/Telemetria/TelemetriaView.ts @@ -1,12 +1,10 @@ - import styled from 'styled-components'; - export const TelemetriaView = styled.main` padding: 20px ; width: 100%; - .title{ + .title { color: black; font-weight: 600; font-size: 14px; @@ -14,7 +12,7 @@ export const TelemetriaView = styled.main` margin: 0 0 0 10px; } - span{ + span { font-family: 'Inter'; font-style: normal; font-weight: 500; @@ -23,14 +21,14 @@ export const TelemetriaView = styled.main` color: #667085; } - .titleMenuItem{ + .titleMenuItem { color: #667085; font-family: Inter; font-size: 14px; font-weight: 600; } - .paragraph{ + .paragraph { color: #22d1f0; text-align: center; margin-top: 60px; @@ -55,14 +53,27 @@ export const TelemetriaView = styled.main` export const Buttons = styled.div` display: flex; - min-width: 14rem; - cursor: pointer; - margin-top: 5rem; - padding-left: 100px; - padding-right: 100px; justify-content: space-evenly; flex-direction: row; + + min-width: 14rem; height: 6rem; + + margin-top: 5rem; + + padding-left: 100px; + padding-right: 100px; + +`; + +export const Uploads = styled.div` + display: flex; + justify-content: space-evenly; + + flex-direction: row; + + padding-left: 100px; + padding-right: 100px; `; diff --git a/src/styles/layouts/clients/ClientsView.ts b/src/styles/layouts/clients/ClientsView.ts index 1faa23b..21ab268 100644 --- a/src/styles/layouts/clients/ClientsView.ts +++ b/src/styles/layouts/clients/ClientsView.ts @@ -4,6 +4,8 @@ export const ClientsView = styled.main` display: flex; flex-direction: column; + width: 100%; + section { display: flex; @@ -18,15 +20,37 @@ export const ClientsView = styled.main` } :last-child { - width: 50rem; - height: 30rem; + width: 100%; } } ` export const ClientsModalView = styled.main` - display: grid; + display: flex; + flex-direction: column; - grid-template-columns: 100% 100%; - grid-template-rows: 100% 100% 100% 100%; + width: 70%; + article { + display: grid; + + align-self: flex-start; + width: 100%; + + grid-template-columns: 80% 80%; + grid-template-rows: 50% 50%; + + margin-top: 70px + } +` + +export const ConfirmModalView = styled.main` + display: flex; + align-items: center; + justify-content: space-around; + + margin: 0; + padding: 0; + + width: 100%; + height: 100%; ` diff --git a/src/styles/layouts/industryInfo/IndustryInfoView.ts b/src/styles/layouts/industryInfo/IndustryInfoView.ts index c57df2b..e3bedb9 100644 --- a/src/styles/layouts/industryInfo/IndustryInfoView.ts +++ b/src/styles/layouts/industryInfo/IndustryInfoView.ts @@ -12,7 +12,7 @@ export const IndustryInfoView = styled.main` button{ height:60px; width: 22%; - margin-top: 17rem; + margin-top: 12rem; cursor: pointer; background: #254F7F; border-radius: 8px; diff --git a/src/styles/layouts/news/NewsView.ts b/src/styles/layouts/news/NewsView.ts index 74b35c5..992fc0b 100644 --- a/src/styles/layouts/news/NewsView.ts +++ b/src/styles/layouts/news/NewsView.ts @@ -3,6 +3,8 @@ import styled from "styled-components"; export const NewsView = styled.main` width: 100%; + margin-bottom: 100px; + p { font-family: 'Poppins'; font-style: normal; @@ -22,20 +24,20 @@ export const NewsView = styled.main` margin-bottom: 8px; } button{ - display: flex; - justify-content: center; - align-items: center; - margin-top: 10px; - width: 140px; - height: 45px; - cursor: pointer; - background: #254F7F; - border-radius: 8px; - border-style: none; - font-family: 'Poppins'; - font-size: 90%; - color: #FFFFFF; - } + display: flex; + justify-content: center; + align-items: center; + margin-top: 10px; + width: 140px; + height: 45px; + cursor: pointer; + background: #254F7F; + border-radius: 8px; + border-style: none; + font-family: 'Poppins'; + font-size: 90%; + color: #FFFFFF; + } } section { @@ -54,9 +56,8 @@ export const NewsView = styled.main` flex-direction: column; } } - - -}`; + } +`; export const Button = styled.div` display: flex; diff --git a/src/styles/layouts/pld/PldView.ts b/src/styles/layouts/pld/PldView.ts index 8997fdc..3b7def4 100644 --- a/src/styles/layouts/pld/PldView.ts +++ b/src/styles/layouts/pld/PldView.ts @@ -203,5 +203,28 @@ export const PldGraphView = styled.main` ` export const GoBack = styled.label` - cursor: pointer + cursor: pointer; +` + +export const NewTableLine = styled.section` + display: flex; + justify-content: center; + align-items: flex-start; + + flex-direction: column; + + margin: 50px 0px 0px 0; + + width: 100%; + article { + display: flex; + justify-content: space-between; + align-items: center; + + flex-direction: row; + + width: 100%; + + margin: 0 0 10px 0; + } ` From 41c4a07a6d227ab98cc2ab49d1952bc4f078a3ea Mon Sep 17 00:00:00 2001 From: Alex Santos Date: Thu, 9 Jun 2022 11:58:36 -0300 Subject: [PATCH 03/18] update Modal --- .../buttons/faqButton/FaqButton1.tsx | 14 ++ .../buttons/faqButton/FaqButton2.tsx | 14 ++ .../buttons/faqButton/FaqButtonView1.ts | 21 +++ .../buttons/faqButton/FaqButtonView2.ts | 22 +++ src/pages/administrative/clients.tsx | 120 ++++++------- src/pages/administrative/faq/faqView.ts | 54 ++++++ src/pages/administrative/faq/index.tsx | 99 +++++++---- .../administrative/notification/index.tsx | 161 ++++++++++++------ .../notification/notificationView.ts | 60 +++++++ src/styles/layouts/commonQuestions/FaqView.ts | 10 ++ 10 files changed, 433 insertions(+), 142 deletions(-) create mode 100644 src/components/buttons/faqButton/FaqButton1.tsx create mode 100644 src/components/buttons/faqButton/FaqButton2.tsx create mode 100644 src/components/buttons/faqButton/FaqButtonView1.ts create mode 100644 src/components/buttons/faqButton/FaqButtonView2.ts create mode 100644 src/pages/administrative/faq/faqView.ts create mode 100644 src/pages/administrative/notification/notificationView.ts diff --git a/src/components/buttons/faqButton/FaqButton1.tsx b/src/components/buttons/faqButton/FaqButton1.tsx new file mode 100644 index 0000000..2547ab8 --- /dev/null +++ b/src/components/buttons/faqButton/FaqButton1.tsx @@ -0,0 +1,14 @@ +import React from 'react' + +import { FaqButtonView1 } from './FaqButtonView1' + +interface FaqButtonInterface { + title: string + onClick: () => void +} + +export default function FaqButton1({title, onClick}: FaqButtonInterface) { + return ( + onClick()}>{title} + ) +} diff --git a/src/components/buttons/faqButton/FaqButton2.tsx b/src/components/buttons/faqButton/FaqButton2.tsx new file mode 100644 index 0000000..a160bd8 --- /dev/null +++ b/src/components/buttons/faqButton/FaqButton2.tsx @@ -0,0 +1,14 @@ +import React from 'react' + +import { FaqButtonView2 } from './FaqButtonView2' + +interface FaqButtonInterface { + title: string + onClick: () => void +} + +export default function FaqButton2({title, onClick}: FaqButtonInterface) { + return ( + onClick()}>{title} + ) +} diff --git a/src/components/buttons/faqButton/FaqButtonView1.ts b/src/components/buttons/faqButton/FaqButtonView1.ts new file mode 100644 index 0000000..31b8458 --- /dev/null +++ b/src/components/buttons/faqButton/FaqButtonView1.ts @@ -0,0 +1,21 @@ +import styled from 'styled-components' + +export const FaqButtonView1 = styled.button` + display: flex; + justify-content: center; + align-items: center; + margin-top: 10px; + margin-left: 65px; + width: 350px; + height: 45px; + cursor: pointer; + background: #DDDDDD; + border-radius: 8px; + border-style: none; + + font-family: 'Poppins'; + font-size: 90%; + + + color: #6A707E; +` diff --git a/src/components/buttons/faqButton/FaqButtonView2.ts b/src/components/buttons/faqButton/FaqButtonView2.ts new file mode 100644 index 0000000..24a26a7 --- /dev/null +++ b/src/components/buttons/faqButton/FaqButtonView2.ts @@ -0,0 +1,22 @@ +import styled from 'styled-components' + +export const FaqButtonView2 = styled.button` + display: flex; + justify-content: center; + align-items: center; + margin-top: -46px; + margin-left: 430px; + width: 350px; + height: 45px; + cursor: pointer; + background: #254F7F; + border-radius: 8px; + border-style: none; + + font-family: 'Poppins'; + font-size: 90%; + + + + color: #FFFFFF; +` diff --git a/src/pages/administrative/clients.tsx b/src/pages/administrative/clients.tsx index 42972a7..1497742 100644 --- a/src/pages/administrative/clients.tsx +++ b/src/pages/administrative/clients.tsx @@ -2,47 +2,39 @@ import Button from '@mui/material/Button'; import TextField from '@mui/material/TextField'; import { DataGrid, GridColDef, GridValueGetterParams } from '@mui/x-data-grid'; import React, { useState } from 'react' - +import Typography from '@mui/material/Typography'; import BasicButton from '../../components/buttons/basicButton/BasicButton' -import Modal from '../../components/modal/Modal'; +import Modal from '@mui/material/Modal'; import PageTitle from '../../components/pageTitle/PageTitle' import { ClientsModalView, ClientsView } from '../../styles/layouts/clients/ClientsView' +import Box from '@mui/material/Box'; +import FaqButton1 from '../../components/buttons/faqButton/FaqButton1'; +import FaqButton2 from '../../components/buttons/faqButton/FaqButton2'; + +const style = { + position: 'absolute' as const, + top: '50%', + left: '50%', + transform: 'translate(-50%, -50%)', + width: 900, + height: 500, + bgcolor: 'background.paper', + border: '2px solid #000', + boxShadow: 24, + p: 4, + overflowY: 'scroll' +}; + + export default function clients() { + const [open, setOpen] = React.useState(false); + const handleOpen = () => setOpen(true); + const handleClose = () => setOpen(false); + const [openModal, setOpenModal] = useState(false) - const rows = [ - { id: 1, lastName: 'Snow', firstName: 'Jon', age: 35 }, - { id: 2, lastName: 'Lannister', firstName: 'Cersei', age: 42 }, - { id: 3, lastName: 'Lannister', firstName: 'Jaime', age: 45 }, - { id: 4, lastName: 'Stark', firstName: 'Arya', age: 16 }, - { id: 5, lastName: 'Targaryen', firstName: 'Daenerys', age: null }, - { id: 6, lastName: 'Melisandre', firstName: null, age: 150 }, - { id: 7, lastName: 'Clifford', firstName: 'Ferrara', age: 44 }, - { id: 8, lastName: 'Frances', firstName: 'Rossini', age: 36 }, - { id: 9, lastName: 'Roxie', firstName: 'Harvey', age: 65 }, - ]; - const columns: GridColDef[] = [ - { field: 'id', headerName: 'ID', width: 70 }, - { field: 'firstName', headerName: 'First name', width: 130 }, - { field: 'lastName', headerName: 'Last name', width: 130 }, - { - field: 'age', - headerName: 'Age', - type: 'number', - width: 90, - }, - { - field: 'fullName', - headerName: 'Full name', - description: 'This column has a value getter and is not sortable.', - sortable: false, - width: 160, - valueGetter: (params: GridValueGetterParams) => - `${params.row.firstName || ''} ${params.row.lastName || ''}`, - }, - ]; return ( <> @@ -50,40 +42,40 @@ export default function clients() {
- setOpenModal(true)}/> - {throw new Error('fixing...')}}/> + +
-
- -
+ {/* */} + + +

Adicionar Cliente

+ + Adicionar Cliente Smart Energia +
+ + + + + + +

+ + + + + + + + + - {setOpenModal(value)}}> - - - - - - - - - - + ) } diff --git a/src/pages/administrative/faq/faqView.ts b/src/pages/administrative/faq/faqView.ts new file mode 100644 index 0000000..7680a37 --- /dev/null +++ b/src/pages/administrative/faq/faqView.ts @@ -0,0 +1,54 @@ +import styled from 'styled-components' + + + +export const FaqView = styled.nav` + display: flex; + align-items: center; + flex-direction: column; + width: 100%; + + + .btn{ + background: #254F7F; + border-radius: 8px; + color: white; + width: 164px; + height: 40px; + border: none; + + } + .btn2{ + background: #FFBC10; + border-radius: 8px; + color: white; + width: 164px; + height: 40px; + border: none; + margin-left: 3px; + } + .buttons{ + display: flex; + margin-top:50px ; + justify-content: space-between; + align-self:flex-start ; + margin-left: 20px; + } + .title{ + display: flex; + justify-content: flex-start; + align-self:flex-start ; + flex-direction: column; + margin-left: 19px; + } + +/* + .teste{ + display: flex; + justify-content: center; + align-items: center; + margin-left: 100px; + } */ + + +` diff --git a/src/pages/administrative/faq/index.tsx b/src/pages/administrative/faq/index.tsx index ed36e69..3b8f8eb 100644 --- a/src/pages/administrative/faq/index.tsx +++ b/src/pages/administrative/faq/index.tsx @@ -1,39 +1,78 @@ -import Head from 'next/head' -import React from 'react' -import CommonQuestionsCard from '../../../components/faqQuestionsCard/FaqQuestionsCard' -import Header from '../../../components/header/Header' -import { FaqView } from '../../../styles/layouts/commonQuestions/FaqView' -import BasicButton from '../../../components/buttons/basicButton/BasicButton'; - +import React, { useState, useEffect } from 'react' +import { useRouter } from 'next/router' +import Image from 'next/image' +import Link from 'next/link' +import Box from '@mui/material/Box'; +import Button from '@mui/material/Button'; +import Typography from '@mui/material/Typography'; +import Modal from '@mui/material/Modal'; +import Stack from '@mui/material/Stack'; import TextField from '@mui/material/TextField'; +import FaqButton1 from '../../../components/buttons/faqButton/FaqButton1'; +import FaqButton2 from '../../../components/buttons/faqButton/FaqButton2'; +import CommonQuestionsCard from '../../../components/faqQuestionsCard/FaqQuestionsCard' + + + +import { FaqView } from './faqView' + +const style = { + position: 'absolute' as const, + top: '50%', + left: '50%', + transform: 'translate(-50%, -50%)', + width: 900, + height: 500, + bgcolor: 'background.paper', + border: '2px solid #000', + boxShadow: 24, + p: 4, +}; + + + +export default function Sidebar() { + + const [open, setOpen] = React.useState(false); + const handleOpen = () => setOpen(true); + const handleClose = () => setOpen(false); + -export default function commonQuestions() { return ( - - Smart Energia - FAQ - -
-

Perguntas Frequentes

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+
+

Adicionar/Editar Pergunta

+ + Adicionar/Editar Pergunta + +
+
+ + + +
+ + +

Adicionar/Editar Pergunta

+ + Adicionar/Editar Pergunta + +
+

+ +

+ + + + + - - -
- -
- -
- -
- -
- -
- -
-
) } diff --git a/src/pages/administrative/notification/index.tsx b/src/pages/administrative/notification/index.tsx index 7962c9f..89daf0e 100644 --- a/src/pages/administrative/notification/index.tsx +++ b/src/pages/administrative/notification/index.tsx @@ -2,81 +2,146 @@ import Head from 'next/head' import React from 'react' import CommonQuestionsCard from '../../../components/faqQuestionsCard/FaqQuestionsCard' import Header from '../../../components/header/Header' -import { FaqView } from '../../../styles/layouts/commonQuestions/FaqView' +import { NotificationView } from './notificationView' import BasicButton from '../../../components/buttons/basicButton/BasicButton'; import InputLabel from '@mui/material/InputLabel'; import MenuItem from '@mui/material/MenuItem'; import FormControl from '@mui/material/FormControl'; import Select, { SelectChangeEvent } from '@mui/material/Select'; +import Checkbox from '@mui/material/Checkbox'; +import RadioButtonUncheckedIcon from '@mui/icons-material/RadioButtonUnchecked'; +import RadioButtonCheckedIcon from '@mui/icons-material/RadioButtonChecked'; + +import Typography from '@mui/material/Typography'; +import Modal from '@mui/material/Modal'; +import Box from '@mui/material/Box'; import TextField from '@mui/material/TextField'; +import FaqButton1 from '../../../components/buttons/faqButton/FaqButton1'; +import FaqButton2 from '../../../components/buttons/faqButton/FaqButton2'; +import Autocomplete from '@mui/material/Autocomplete'; +import CheckBoxOutlineBlankIcon from '@mui/icons-material/CheckBoxOutlineBlank'; +import CheckBoxIcon from '@mui/icons-material/CheckBox'; +const style = { + position: 'absolute' as const, + top: '50%', + left: '50%', + transform: 'translate(-50%, -50%)', + width: 900, + height: 500, + bgcolor: 'background.paper', + border: '2px solid #000', + boxShadow: 24, + p: 4, + overflowY: 'scroll' +}; +const icon = ; +const checkedIcon = ; export default function commonQuestions() { - const [month, setMonth] = React.useState(''); - const [unidade, setUnidade] = React.useState(''); - - const handleChangeMonth = (event: SelectChangeEvent) => { - setMonth(event.target.value); - }; - const handleChangeUnidade = (event: SelectChangeEvent) => { - setUnidade(event.target.value); - }; + const [open, setOpen] = React.useState(false); + const handleOpen = () => setOpen(true); + const handleClose = () => setOpen(false); return ( - + Smart Energia - FAQ -
+

Perguntas Frequentes

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

- -
- - - - Clientes - - -
- -
- -
- -
- -
- -
- -
-
- ) } + +const top100Films = [ + { title: 'The Shawshank Redemption', year: 1994 }, + { title: 'The Godfather', year: 1972 }, + { title: 'The Godfather: Part II', year: 1974 }, + { title: 'The Dark Knight', year: 2008 }, + { title: '12 Angry Men', year: 1957 }, + { title: "Schindler's List", year: 1993 }, + { title: 'Pulp Fiction', year: 1994 }, + { + title: 'The Lord of the Rings: The Return of the King', + year: 2003, + }, +]; diff --git a/src/pages/administrative/notification/notificationView.ts b/src/pages/administrative/notification/notificationView.ts new file mode 100644 index 0000000..f4ae876 --- /dev/null +++ b/src/pages/administrative/notification/notificationView.ts @@ -0,0 +1,60 @@ +import styled from 'styled-components' + + + +export const NotificationView = styled.nav` + display: flex; + align-items: center; + flex-direction: column; + width: 100%; + + + .btn{ + background: #254F7F; + border-radius: 8px; + color: white; + width: 164px; + height: 40px; + border: none; + + } + .btn2{ + background: #FFBC10; + border-radius: 8px; + color: white; + width: 164px; + height: 40px; + border: none; + margin-left: 3px; + } + .buttons{ + display: flex; + margin-top:50px ; + justify-content: space-between; + align-self:flex-start ; + margin-left: 20px; + } + .title{ + display: flex; + justify-content: flex-start; + align-self:flex-start ; + flex-direction: column; + margin-left: 19px; + } + +/* + .teste{ + display: flex; + justify-content: center; + align-items: center; + margin-left: 100px; + } */ + .text1{ + margin-left: 70px; + } + .header{ + margin-top: 8px; + } + + +` diff --git a/src/styles/layouts/commonQuestions/FaqView.ts b/src/styles/layouts/commonQuestions/FaqView.ts index 32d9b16..c78db7d 100644 --- a/src/styles/layouts/commonQuestions/FaqView.ts +++ b/src/styles/layouts/commonQuestions/FaqView.ts @@ -33,4 +33,14 @@ export const FaqView = styled.main` hr { border: 1px solid #DDDDDD; } + + /* .modal{ + display: flex; + justify-self: flex-end; + align-self: center; + margin-left: 100px; + + } */ + + ` From 9419703ab80baf58288539800e43170f96fe4d9c Mon Sep 17 00:00:00 2001 From: joseCorte-exe Date: Thu, 9 Jun 2022 14:38:46 -0300 Subject: [PATCH 04/18] add some tables --- .../administrativeTables/ClientsTable.tsx | 14 +- .../administrativeTables/ClientsTableView.ts | 2 +- .../administrativeTables/FaqTable.tsx | 26 +- .../NotificationsTable.tsx | 315 ++++++++++++++++++ src/components/sidebar/Sidebar.tsx | 1 + src/pages/administrative/clients.tsx | 22 +- .../administrative/notifications/index.tsx | 51 +-- src/styles/layouts/clients/ClientsView.ts | 6 +- 8 files changed, 346 insertions(+), 91 deletions(-) create mode 100644 src/components/administrativeTables/NotificationsTable.tsx diff --git a/src/components/administrativeTables/ClientsTable.tsx b/src/components/administrativeTables/ClientsTable.tsx index 742d03a..6cea371 100644 --- a/src/components/administrativeTables/ClientsTable.tsx +++ b/src/components/administrativeTables/ClientsTable.tsx @@ -67,7 +67,7 @@ type Order = 'asc' | 'desc'; function getComparator( 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) => { + (property: any) => (event: React.MouseEvent) => { onRequestSort(event, property); }; @@ -206,12 +206,12 @@ export default function ClientTable() { setSelected([]); }; - const handleClick = (event: React.MouseEvent, name: string) => { - const selectedIndex = selected.indexOf(name); + const handleClick = (event: React.MouseEvent, code: string) => { + 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 ( handleClick(event, row.clientCode)} + onClick={(event) => handleClick(event, row.clientCode.toString())} role="checkbox" aria-checked={isItemSelected} tabIndex={-1} diff --git a/src/components/administrativeTables/ClientsTableView.ts b/src/components/administrativeTables/ClientsTableView.ts index 4ad9b11..aa4aed0 100644 --- a/src/components/administrativeTables/ClientsTableView.ts +++ b/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; diff --git a/src/components/administrativeTables/FaqTable.tsx b/src/components/administrativeTables/FaqTable.tsx index 103fe10..7877191 100644 --- a/src/components/administrativeTables/FaqTable.tsx +++ b/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...', 'active'), - createData('Como usar o sistema?', 'Você deve usar assim... e assado...', 'active'), - createData('Como usar o sistema?', 'Você deve usar assim... e assado...', 'active'), - createData('Como usar o sistema?', 'Você deve usar assim... e assado...', 'active'), - createData('Como usar o sistema?', 'Você deve usar assim... e assado...', 'inactive'), + createData('Como usar o sistema?', 'Você deve usar assim... e assado...', 'ativo'), + createData('Como usar o sistema', 'Você deve usar assim... e assado...', 'ativo'), + createData('Como usar o sistema?', 'Você deve usar assim... e assado...', 'ativo'), + createData('Como usar o sistema?', 'Você deve usar assim... e assado...', 'ativo'), + createData('Como usar o sistema?', 'Você deve usar assim... e assado...', 'ativo'), + createData('Como usar o sistema?', 'Você deve usar assim... e assado...', 'inativo'), ]; function descendingComparator(a: T, b: T, orderBy: keyof T) { @@ -66,8 +66,8 @@ function getComparator( order: Order, orderBy: Key, ): ( - a: { [key in Key]: number | string }, - b: { [key in Key]: number | string }, + a: { [key in Key]: any }, + 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) => { + (property: any) => (event: React.MouseEvent) => { onRequestSort(event, property); }; @@ -171,7 +171,7 @@ function EnhancedTableHead(props: EnhancedTableProps) { ); } -export default function ClientTable() { +export default function FaqTable() { const [order, setOrder] = useState('asc'); const [orderBy, setOrderBy] = useState('status'); const [selected, setSelected] = useState([]); @@ -190,7 +190,7 @@ export default function ClientTable() { const handleSelectAllClick = (event: React.ChangeEvent) => { if (event.target.checked) { - const newSelecteds = rows.map((n) => n.name); + const newSelecteds = rows.map((n) => n.question); setSelected(newSelecteds); return; } diff --git a/src/components/administrativeTables/NotificationsTable.tsx b/src/components/administrativeTables/NotificationsTable.tsx new file mode 100644 index 0000000..e462c4f --- /dev/null +++ b/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(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( + 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(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, property: keyof Data) => void; + onSelectAllClick: (event: React.ChangeEvent) => 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) => { + onRequestSort(event, property); + }; + + return ( + + + + 0 && numSelected < rowCount} + checked={rowCount > 0 && numSelected === rowCount} + onChange={onSelectAllClick} + inputProps={{ + 'aria-label': 'select all desserts', + }} + /> + + {headCells.map((headCell) => ( + + + {headCell.label} + {orderBy === headCell.id ? ( + + {order === 'desc' ? 'sorted descending' : 'sorted ascending'} + + ) : null} + + + ))} + + + ); +} + +export default function ClientTable() { + const [order, setOrder] = useState('asc'); + const [orderBy, setOrderBy] = useState('status'); + const [selected, setSelected] = useState([]); + const [page, setPage] = useState(0); + const [dense, setDense] = useState(false); + const [rowsPerPage, setRowsPerPage] = useState(5); + + const handleRequestSort = ( + event: React.MouseEvent, + property: keyof Data, + ) => { + const isAsc = orderBy === property && order === 'asc'; + setOrder(isAsc ? 'desc' : 'asc'); + setOrderBy(property); + }; + + const handleSelectAllClick = (event: React.ChangeEvent) => { + if (event.target.checked) { + const newSelecteds = rows.map((n) => n.notification); + setSelected(newSelecteds); + return; + } + setSelected([]); + }; + + const handleClick = (event: React.MouseEvent, 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) => { + 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 ( + + + + + + + {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 ( + handleClick(event, row.notification.toString())} + role="checkbox" + aria-checked={isItemSelected} + tabIndex={-1} + key={row.notification} + selected={isItemSelected} + > + + + + + {row.notification} + + {row.client} + {row.status} + + ); + })} + {emptyRows > 0 && ( + + + + )} + +
+ + + + + ); +} diff --git a/src/components/sidebar/Sidebar.tsx b/src/components/sidebar/Sidebar.tsx index 407206c..bd1ec75 100644 --- a/src/components/sidebar/Sidebar.tsx +++ b/src/components/sidebar/Sidebar.tsx @@ -63,6 +63,7 @@ export default function Sidebar() {
*/}
  • {'Clientes >'}
  • {'FAQ >'}
    • +
  • {'Notificações >'}

    25

    • {/*
  • {'Telemetria >'}
  • {'Resumo de Op. '}
  • {'Notícias >'}
    • diff --git a/src/pages/administrative/clients.tsx b/src/pages/administrative/clients.tsx index c1712b3..17fa2cd 100644 --- a/src/pages/administrative/clients.tsx +++ b/src/pages/administrative/clients.tsx @@ -6,6 +6,7 @@ import React, { useState } from 'react' import AdministrativeHeader from '../../components/administrativeHeader/AdministrativeHeader'; import ClientsTable from '../../components/administrativeTables/ClientsTable'; import BasicButton from '../../components/buttons/basicButton/BasicButton' +import Header from '../../components/header/Header' import ConfirmModal from '../../components/modal/ConfirmModal'; import Modal from '../../components/modal/Modal'; import PageTitle from '../../components/pageTitle/PageTitle' @@ -15,29 +16,10 @@ export default function clients() { const [openModal, setOpenModal] = useState(false) 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 (
    - +
    diff --git a/src/pages/administrative/notifications/index.tsx b/src/pages/administrative/notifications/index.tsx index f585fa2..d398c8c 100644 --- a/src/pages/administrative/notifications/index.tsx +++ b/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 ( <> - - Smart Energia - FAQ - - -

    Perguntas Frequentes

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    + + Smart Energia - FAQ + +
    - - -
    - - - - Clientes - - -
    - console.log()}/> - -
    - -
    - -
    - -
    - -
    - -
    -
    + ) diff --git a/src/styles/layouts/clients/ClientsView.ts b/src/styles/layouts/clients/ClientsView.ts index 21ab268..7692ffe 100644 --- a/src/styles/layouts/clients/ClientsView.ts +++ b/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%; - } } ` From dbe96892ea093abac735723d7f1df0c9ad1d7e59 Mon Sep 17 00:00:00 2001 From: joseCorte-exe Date: Thu, 9 Jun 2022 15:02:30 -0300 Subject: [PATCH 05/18] add notification table --- package.json | 5 +- src/components/sidebar/Sidebar.tsx | 2 +- src/pages/administrative/index.tsx | 97 +++--------------------------- yarn.lock | 33 +++++++++- 4 files changed, 44 insertions(+), 93 deletions(-) diff --git a/package.json b/package.json index c097e23..2dea1c5 100644 --- a/package.json +++ b/package.json @@ -26,6 +26,7 @@ "@mui/material": "^5.6.4", "@mui/x-data-grid": "^5.11.0", "@mui/x-date-pickers": "^5.0.0-alpha.3", + "@tinymce/tinymce-react": "^4.1.0", "@types/react-csv": "^1.1.2", "@typescript-eslint/eslint-plugin": "^5.22.0", "@typescript-eslint/parser": "^5.22.0", @@ -34,6 +35,7 @@ "eslint-plugin-react": "^7.29.4", "eslit": "^6.0.0", "faker": "5.5.3", + "fs-extra": "^10.1.0", "install": "^0.13.0", "next": "12.1.6", "npm": "^8.10.0", @@ -45,7 +47,8 @@ "react-csv": "^2.2.2", "react-dom": "18.1.0", "react-icons": "^4.3.1", - "styled-components": "^5.3.5" + "styled-components": "^5.3.5", + "tinymce": "^6.0.3" }, "devDependencies": { "@babel/preset-env": "^7.17.10", diff --git a/src/components/sidebar/Sidebar.tsx b/src/components/sidebar/Sidebar.tsx index bd1ec75..97fcc8d 100644 --- a/src/components/sidebar/Sidebar.tsx +++ b/src/components/sidebar/Sidebar.tsx @@ -53,7 +53,7 @@ export default function Sidebar() {
      -
    • {'Visão Geral'}
      • +
    • {'Visão Geral'}
      • {/*
    • setEconomiaDrawer(!economiaDrawer)} className={router.pathname=='/grossSavings' || router.pathname=='/accumulatedSavings' || router.pathname=='/estimatedCost' || router.pathname=='/costIndicator' ? 'actualPath' : null } >{'Economia >'}
    • Economia Bruta
      • diff --git a/src/pages/administrative/index.tsx b/src/pages/administrative/index.tsx index 5bb3c07..6e5b4f7 100644 --- a/src/pages/administrative/index.tsx +++ b/src/pages/administrative/index.tsx @@ -1,94 +1,11 @@ -import FormControl from '@mui/material/FormControl'; -import IconButton from '@mui/material/IconButton'; -import InputAdornment from '@mui/material/InputAdornment'; -import InputLabel from '@mui/material/InputLabel'; -import OutlinedInput from '@mui/material/OutlinedInput'; -import TextField from '@mui/material/TextField'; -import Head from 'next/head'; -import Image from 'next/image'; -import Link from 'next/link'; -import { useRouter } from 'next/router' -import React, { useState } from 'react' -import { AiOutlineEye, AiOutlineEyeInvisible } from 'react-icons/ai'; - -import LoginButton from '../../components/buttons/loginButton/LoginButton'; -import { LoginContainer, LoginView } from '../../styles/layouts/login/LoginView'; - -export default function Home() { - const [state, setstate]=useState(false); - - const [values, setValues] = React.useState({ - password: '', - showPassword: false, - }); - - const router = useRouter() - const rota = router.pathname - - const handleChange = (prop) => (event) => { - setValues({ ...values, [prop]: event.target.value }); - }; - - const handleClickShowPassword = () => { - setValues({ - ...values, - showPassword: !values.showPassword, - }); - }; - - const handleMouseDownPassword = (event) => { - event.preventDefault(); - }; +import { Editor } from '@tinymce/tinymce-react' +import React from 'react' +export default function index() { return ( - - - Smart Energia - - -
      - -
      - - -

      Bem-Vindo

      -

      Estratégias Inteligentes em
      Gestão de Energia

      - - - - Password - - - {values.showPassword ? : } - - - } - label="Password" - /> - - Esqueceu a senha ? - - - -
      - Ou -
      - -

      +55(41) 3012-5900
      www.energiasmart.com.br

      - -       - -       + <> +
      Visão Geral
      + + ) } diff --git a/yarn.lock b/yarn.lock index a5e2773..40fa454 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1382,6 +1382,13 @@ version "1.1.3" resolved "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.1.3.tgz" +"@tinymce/tinymce-react@^4.1.0": + version "4.1.0" + resolved "https://registry.yarnpkg.com/@tinymce/tinymce-react/-/tinymce-react-4.1.0.tgz#e2a5e289dc1af03837365bebe969b1a722bf6d99" + dependencies: + prop-types "^15.6.2" + tinymce "^6.0.0 || ^5.5.1" + "@tootallnate/once@2": version "2.0.0" resolved "https://registry.yarnpkg.com/@tootallnate/once/-/once-2.0.0.tgz#f544a148d3ab35801c1f633a7441fd87c2e484bf" @@ -2498,6 +2505,14 @@ flatted@^3.1.0: version "3.2.5" resolved "https://registry.npmjs.org/flatted/-/flatted-3.2.5.tgz" +fs-extra@^10.1.0: + version "10.1.0" + resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-10.1.0.tgz#02873cfbc4084dde127eaa5f9905eef2325d1abf" + dependencies: + graceful-fs "^4.2.0" + jsonfile "^6.0.1" + universalify "^2.0.0" + fs-minipass@^2.0.0, fs-minipass@^2.1.0: version "2.1.0" resolved "https://registry.yarnpkg.com/fs-minipass/-/fs-minipass-2.1.0.tgz#7f5036fdbf12c63c169190cbe4199c852271f9fb" @@ -2638,7 +2653,7 @@ globby@^11.0.4: merge2 "^1.4.1" slash "^3.0.0" -graceful-fs@^4.1.2, graceful-fs@^4.2.10, graceful-fs@^4.2.6: +graceful-fs@^4.1.2, graceful-fs@^4.1.6, graceful-fs@^4.2.0, graceful-fs@^4.2.10, graceful-fs@^4.2.6: version "4.2.10" resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.10.tgz#147d3a006da4ca3ce14728c7aefc287c367d7a6c" @@ -2973,6 +2988,14 @@ json5@^2.2.1: version "2.2.1" resolved "https://registry.npmjs.org/json5/-/json5-2.2.1.tgz" +jsonfile@^6.0.1: + version "6.1.0" + resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-6.1.0.tgz#bc55b2634793c679ec6403094eb13698a6ec0aae" + dependencies: + universalify "^2.0.0" + optionalDependencies: + graceful-fs "^4.1.6" + jsonparse@^1.3.1: version "1.3.1" resolved "https://registry.yarnpkg.com/jsonparse/-/jsonparse-1.3.1.tgz#3f4dae4a91fac315f71062f8521cc239f1366280" @@ -4401,6 +4424,10 @@ tiny-warning@^1.0.2: version "1.0.3" resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754" +"tinymce@^6.0.0 || ^5.5.1", tinymce@^6.0.3: + version "6.0.3" + resolved "https://registry.yarnpkg.com/tinymce/-/tinymce-6.0.3.tgz#993db09afa473a764ad8b594cdaf744b2c7e2e74" + to-fast-properties@^2.0.0: version "2.0.0" resolved "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz" @@ -4496,6 +4523,10 @@ unique-slug@^2.0.0: dependencies: imurmurhash "^0.1.4" +universalify@^2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/universalify/-/universalify-2.0.0.tgz#75a4984efedc4b08975c5aeb73f530d02df25717" + uri-js@^4.2.2: version "4.4.1" resolved "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz" From d21a8bb6e1cbeddd6b4a998a733f50419bc2b92a Mon Sep 17 00:00:00 2001 From: Alex Santos Date: Thu, 9 Jun 2022 15:07:52 -0300 Subject: [PATCH 06/18] update modal5 --- src/pages/administrative/notification/index.tsx | 8 ++++++-- src/pages/administrative/notification/notificationView.ts | 7 +++++++ 2 files changed, 13 insertions(+), 2 deletions(-) diff --git a/src/pages/administrative/notification/index.tsx b/src/pages/administrative/notification/index.tsx index 6e12862..3fbe2f4 100644 --- a/src/pages/administrative/notification/index.tsx +++ b/src/pages/administrative/notification/index.tsx @@ -57,11 +57,15 @@ export default function commonQuestions() { Smart Energia - FAQ - +
      +
      +
      + + - +
      Date: Mon, 13 Jun 2022 09:14:43 -0300 Subject: [PATCH 07/18] update notification, faq, telemetria --- .../administrativeTables/ClientsTable.tsx | 2 +- src/components/sidebar/Sidebar.tsx | 2 +- src/pages/administrative/faq/index.tsx | 4 +-- .../administrative/notification/index.tsx | 28 ++++++++------- src/pages/telemetria.tsx | 36 ++++++++++--------- src/styles/layouts/clients/ClientsView.ts | 1 + 6 files changed, 41 insertions(+), 32 deletions(-) diff --git a/src/components/administrativeTables/ClientsTable.tsx b/src/components/administrativeTables/ClientsTable.tsx index 6cea371..748e87e 100644 --- a/src/components/administrativeTables/ClientsTable.tsx +++ b/src/components/administrativeTables/ClientsTable.tsx @@ -293,7 +293,7 @@ export default function ClientTable() { Unidade - {row.clientCode} {row.name} - {row.unity} + {row.unity}button {row.status} ); diff --git a/src/components/sidebar/Sidebar.tsx b/src/components/sidebar/Sidebar.tsx index 97fcc8d..d6e31fb 100644 --- a/src/components/sidebar/Sidebar.tsx +++ b/src/components/sidebar/Sidebar.tsx @@ -35,7 +35,7 @@ export default function Sidebar() { const router = useRouter() const user = { - role: 'admin' + role: 'client' } useEffect(() => { diff --git a/src/pages/administrative/faq/index.tsx b/src/pages/administrative/faq/index.tsx index 05c0084..bc66f58 100644 --- a/src/pages/administrative/faq/index.tsx +++ b/src/pages/administrative/faq/index.tsx @@ -59,8 +59,8 @@ export default function Sidebar() {
      - - + +
      + - Smart Energia - FAQ + Smart Energia - Notificações -
      - -
      + +
      + + + + +
      - - + +
      - - - - + - + + ) diff --git a/src/pages/telemetria.tsx b/src/pages/telemetria.tsx index eb351f6..c20530f 100644 --- a/src/pages/telemetria.tsx +++ b/src/pages/telemetria.tsx @@ -56,12 +56,14 @@ export default function Telemetria() { fullWidth > - None + Nenhum - 07/09/2021 - Filial 3 - Twenty - Thirty + + Unidade 1 + Unidade 2 + Unidade 3 + Unidade 4 + Unidade 5
      @@ -79,12 +81,13 @@ export default function Telemetria() { fullWidth > - None + Nenhum - 07/09/2021 - Filial 3 - Twenty - Thirty + 20/05/2022 + 10/06/2022 + 05/06/2021 + 05/06/2021 + 05/06/2021 @@ -102,12 +105,13 @@ export default function Telemetria() { fullWidth > - None + Nenhum - 07/09/2021 - Filial 3 - Twenty - Thirty + 20/05/2022 + 10/06/2022 + 05/06/2021 + 05/06/2021 + 05/06/2021 @@ -125,7 +129,7 @@ export default function Telemetria() { fullWidth > - None + Nenhum 07/09/2021 Filial 3 diff --git a/src/styles/layouts/clients/ClientsView.ts b/src/styles/layouts/clients/ClientsView.ts index 20d5674..63f98aa 100644 --- a/src/styles/layouts/clients/ClientsView.ts +++ b/src/styles/layouts/clients/ClientsView.ts @@ -40,6 +40,7 @@ export const ClientsView = styled.main` } .buttons{ display: flex; + margin-top: 40px; } ` From 4c7aeb9f4e926b77d8c87e6e0e04c6cb95c66b16 Mon Sep 17 00:00:00 2001 From: joseCorte-exe Date: Mon, 13 Jun 2022 09:24:26 -0300 Subject: [PATCH 08/18] finalizing admin pages design --- package.json | 1 + .../administrativeTables/ClientsTableView.ts | 12 +++ src/components/header/Header.tsx | 14 +-- src/components/header/HeaderView.ts | 42 ++------- src/components/sidebar/Sidebar.tsx | 10 +-- src/pages/administrative/clients.tsx | 74 ---------------- src/pages/administrative/general.tsx | 86 +++++++++++++++++++ src/pages/administrative/index.tsx | 77 +++++++++++++++-- .../administrative/notifications/index.tsx | 2 +- src/pages/estimatedCost.tsx | 3 +- src/pages/pld/index.tsx | 24 +++--- src/services/api.ts | 22 +++++ src/services/auth.ts | 10 +++ src/styles/layouts/general/GeneralView.tsx | 11 +++ yarn.lock | 43 ++++++++++ 15 files changed, 289 insertions(+), 142 deletions(-) delete mode 100644 src/pages/administrative/clients.tsx create mode 100644 src/pages/administrative/general.tsx create mode 100644 src/services/api.ts create mode 100644 src/services/auth.ts create mode 100644 src/styles/layouts/general/GeneralView.tsx diff --git a/package.json b/package.json index 2dea1c5..6eeb9a1 100644 --- a/package.json +++ b/package.json @@ -30,6 +30,7 @@ "@types/react-csv": "^1.1.2", "@typescript-eslint/eslint-plugin": "^5.22.0", "@typescript-eslint/parser": "^5.22.0", + "axios": "^0.27.2", "chart.js": "^3.7.1", "chartjs-plugin-datalabels": "^2.0.0", "eslint-plugin-react": "^7.29.4", diff --git a/src/components/administrativeTables/ClientsTableView.ts b/src/components/administrativeTables/ClientsTableView.ts index aa4aed0..08d8daf 100644 --- a/src/components/administrativeTables/ClientsTableView.ts +++ b/src/components/administrativeTables/ClientsTableView.ts @@ -5,7 +5,19 @@ export const ClientTableView = styled.main` color: #6A707E; + thead { + border-radius: 16px; + background-color: #f9f9f9; + + th { + font-size: 12px; + font-family: 'inter'; + font-weight: 800; + font-style: italic; + } + } tbody { + border-radius: 16px; tr { th { font-family: 'poppins'; diff --git a/src/components/header/Header.tsx b/src/components/header/Header.tsx index ad1ab95..22fa066 100644 --- a/src/components/header/Header.tsx +++ b/src/components/header/Header.tsx @@ -1,8 +1,7 @@ -import React from 'react' -import Image from 'next/image'; - -import TextField from '@mui/material/TextField'; import Avatar from '@mui/material/Avatar'; +import TextField from '@mui/material/TextField'; +import Image from 'next/image'; +import React from 'react' import { HeaderView } from './HeaderView' @@ -38,7 +37,6 @@ interface headerInterface { } export default function Header({ name }: headerInterface) { - return (
      @@ -53,9 +51,11 @@ export default function Header({ name }: headerInterface) {
      - olá, {'josé'} +

      + olá, {'josé'} +

      - +
      ) diff --git a/src/components/header/HeaderView.ts b/src/components/header/HeaderView.ts index 736f6b4..d123174 100644 --- a/src/components/header/HeaderView.ts +++ b/src/components/header/HeaderView.ts @@ -11,58 +11,32 @@ export const HeaderView = styled.header` section { width: 30%; - :last-child { display: flex; justify-content: flex-end; - align-items: flex-start; + align-items: center; height: fit-content; } } .icon { - position: relative; - display: flex; align-items: center; - justify-content: center; + justify-content: flex-start; - width: 150px; + min-width: 120px; height: 40px; - border-radius: 8px; + border-radius: 8px 0 0 8px; background-color: #254F7F; - color: white; - transform: translateX(12%); + transform: translateX(16px); - ::after { - content: ""; - position: relative; - left: 2.5rem; - background-color: #fff; - width: 45px; - height: 45px; - border-radius: 50%; - } - } - - @media (max-width: 1020px) { - .icon { - display: none; - } - section { - width: 50%; - } - } - @media (max-width: 1640px) { - .icon { - transform: translateX(6%); - } - input { - height: 2rem; + p{ + color: white; + margin-left: 15%; } } ` diff --git a/src/components/sidebar/Sidebar.tsx b/src/components/sidebar/Sidebar.tsx index 97fcc8d..f44a022 100644 --- a/src/components/sidebar/Sidebar.tsx +++ b/src/components/sidebar/Sidebar.tsx @@ -35,7 +35,7 @@ export default function Sidebar() { const router = useRouter() const user = { - role: 'admin' + role: 'client' } useEffect(() => { @@ -53,7 +53,10 @@ export default function Sidebar() {
        -
      • {'Visão Geral'}
        • +
      • {'Clientes >'}
        • +
      • {'Visão Geral'}
        • +
      • {'FAQ >'}
        • +
      • {'Notificações >'}

        25

        • {/*
      • setEconomiaDrawer(!economiaDrawer)} className={router.pathname=='/grossSavings' || router.pathname=='/accumulatedSavings' || router.pathname=='/estimatedCost' || router.pathname=='/costIndicator' ? 'actualPath' : null } >{'Economia >'}
      • Economia Bruta
        • @@ -61,9 +64,6 @@ export default function Sidebar() {
      • Custo Estimado
      • Custo R/MWh
        • */} -
      • {'Clientes >'}
        • -
      • {'FAQ >'}
        • -
      • {'Notificações >'}

        25

        • {/*
      • {'Telemetria >'}
      • {'Resumo de Op. '}
      • {'Notícias >'}
        • diff --git a/src/pages/administrative/clients.tsx b/src/pages/administrative/clients.tsx deleted file mode 100644 index 17fa2cd..0000000 --- a/src/pages/administrative/clients.tsx +++ /dev/null @@ -1,74 +0,0 @@ -import Button from '@mui/material/Button'; -import TextField from '@mui/material/TextField'; -import { DataGrid, GridColDef, GridValueGetterParams } from '@mui/x-data-grid'; -import React, { useState } from 'react' - -import AdministrativeHeader from '../../components/administrativeHeader/AdministrativeHeader'; -import ClientsTable from '../../components/administrativeTables/ClientsTable'; -import BasicButton from '../../components/buttons/basicButton/BasicButton' -import Header from '../../components/header/Header' -import ConfirmModal from '../../components/modal/ConfirmModal'; -import Modal from '../../components/modal/Modal'; -import PageTitle from '../../components/pageTitle/PageTitle' -import { ClientsModalView, ClientsView, ConfirmModalView } from '../../styles/layouts/clients/ClientsView' - -export default function clients() { - const [openModal, setOpenModal] = useState(false) - const [openModalInativar, setOpenModalInativar] = useState(false) - - return ( -
        - -
        - - -
        - setOpenModal(true)}/> - setOpenModalInativar(true)}/> -
        - -
        - {/* */} - -
        - - - {setOpenModal(value)}}> - - -
        - - - - - console.log()}/> - -
        -         -         - - {setOpenModalInativar(value)}}> - - setOpenModalInativar(true)}/> - setOpenModalInativar(true)}/> - - -
        - ) -} diff --git a/src/pages/administrative/general.tsx b/src/pages/administrative/general.tsx new file mode 100644 index 0000000..b45eead --- /dev/null +++ b/src/pages/administrative/general.tsx @@ -0,0 +1,86 @@ +import FormControl from '@mui/material/FormControl'; +import InputLabel from '@mui/material/InputLabel'; +import MenuItem from '@mui/material/MenuItem'; +import Select, { SelectChangeEvent } from '@mui/material/Select'; +import TextField from '@mui/material/TextField'; +import { Editor } from '@tinymce/tinymce-react' +import React, { useRef, useState } from 'react' + +import Header from '../../components/header/Header'; +import { GeneralView } from '../../styles/layouts/general/GeneralView' + +export default function index() { + const editorRef = useRef(null); + const [text, setText] = useState(''); + + const log = () => { + if (editorRef.current) { + console.log(editorRef.current.getContent()); + } + }; + + const handleChange = (event: SelectChangeEvent) => { + setText(event.target.value); + }; + + return ( + +
        +
        + + + +
        + editorRef.current = editor} + initialValue='

        A SMART ENERGIA é uma consultoria independente especializada em Gestão de Energia Elétrica, consolidada como uma das três maiores consultorias do Brasil. + Devido à grande experiência em operações na CCEE – Câmara de Comercialização de Energia Elétrica e ANEEL, entrega resultados que superam as expectativas.

        + +

        Nasceu para gerenciar a compra de energia com inovação, transparência e imparcialidade sendo o elo forte e necessário entre os Consumidores e os + Vendedores de energia.

        + +

        Baseada em sua experiência no setor elétrico adquirida desde 2001 e em mais de 900 unidades migradas, atua na negociação de contratos de compra e venda de + energia, na Gestão de Energia no Mercado Livre e criação de produtos diferenciados para atender as necessidades específicas dos consumidores.

        + +

        Apoiada pela sólida experiência de seus gestores, conhecendo as premissas dos agentes de Comercialização e Geração para a compra e venda de energia, + aplicamos as mesmas premissas a favor dos Consumidores, disponibilizando assim um diferencial único para a tomada de decisão e elaboração das estratégias de + contratação de energia.

        +
          +
        • Informação
          • +
        • Economia
          • +
        • Gestão de Energia
          • +
        • Imparcialidade
          • +
        • Previsão de Custos
          • +
        • Experiência
          • +
        • Relacionamento
          • +
        ' + init={{ + height: 500, + width: '100%', + menubar: false, + plugins: [ + 'advlist', 'autolink', 'lists', 'link', 'image', 'charmap', + 'anchor', 'searchreplace', 'visualblocks', 'code', 'fullscreen', + 'insertdatetime', 'media', 'table', 'preview', 'help', 'wordcount' + ], + toolbar: 'undo redo | blocks | ' + + 'bold italic forecolor | alignleft aligncenter ' + + 'alignright alignjustify | bullist numlist outdent indent | ' + + 'removeformat | help', + content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }' + }} + /> + + + ) +} diff --git a/src/pages/administrative/index.tsx b/src/pages/administrative/index.tsx index 6e5b4f7..17fa2cd 100644 --- a/src/pages/administrative/index.tsx +++ b/src/pages/administrative/index.tsx @@ -1,11 +1,74 @@ -import { Editor } from '@tinymce/tinymce-react' -import React from 'react' +import Button from '@mui/material/Button'; +import TextField from '@mui/material/TextField'; +import { DataGrid, GridColDef, GridValueGetterParams } from '@mui/x-data-grid'; +import React, { useState } from 'react' + +import AdministrativeHeader from '../../components/administrativeHeader/AdministrativeHeader'; +import ClientsTable from '../../components/administrativeTables/ClientsTable'; +import BasicButton from '../../components/buttons/basicButton/BasicButton' +import Header from '../../components/header/Header' +import ConfirmModal from '../../components/modal/ConfirmModal'; +import Modal from '../../components/modal/Modal'; +import PageTitle from '../../components/pageTitle/PageTitle' +import { ClientsModalView, ClientsView, ConfirmModalView } from '../../styles/layouts/clients/ClientsView' + +export default function clients() { + const [openModal, setOpenModal] = useState(false) + const [openModalInativar, setOpenModalInativar] = useState(false) -export default function index() { return ( - <> -
        Visão Geral
        - - +
        + +
        + + +
        + setOpenModal(true)}/> + setOpenModalInativar(true)}/> +
        + +
        + {/* */} + +
        + + + {setOpenModal(value)}}> + + +
        + + + + + console.log()}/> + +
        +         +         + + {setOpenModalInativar(value)}}> + + setOpenModalInativar(true)}/> + setOpenModalInativar(true)}/> + + +
        ) } diff --git a/src/pages/administrative/notifications/index.tsx b/src/pages/administrative/notifications/index.tsx index d398c8c..cfce39c 100644 --- a/src/pages/administrative/notifications/index.tsx +++ b/src/pages/administrative/notifications/index.tsx @@ -31,7 +31,7 @@ export default function commonQuestions() { Smart Energia - FAQ -
        +
        diff --git a/src/pages/estimatedCost.tsx b/src/pages/estimatedCost.tsx index 76326cc..614aa40 100644 --- a/src/pages/estimatedCost.tsx +++ b/src/pages/estimatedCost.tsx @@ -6,7 +6,6 @@ import { LineBarChart } from '../components/graph/LineBarChart' import Header from '../components/header/Header' import PageTitle from '../components/pageTitle/PageTitle' import { ConsumoEstimado } from '../services/consumoEstimado' - import { EstimatedCostView } from '../styles/layouts/economy/estimatedCost/EstimatedCostView' export default function EstimatedCost() { @@ -16,7 +15,7 @@ export default function EstimatedCost() { Smart Energia - Custos Estimados
        - +
        diff --git a/src/pages/pld/index.tsx b/src/pages/pld/index.tsx index 5db0cd5..ee633ef 100644 --- a/src/pages/pld/index.tsx +++ b/src/pages/pld/index.tsx @@ -54,8 +54,8 @@ export default function region() {
        - {'< voltar para visão geral'} - + {'< Voltar para Visão Geral'} + @@ -184,7 +184,7 @@ export default function region() {
        setPage('perMouth')}> -

        Valores Diarios

        +

        Valores Diários

        setPage('perDate')}>

        Valores Horários

        @@ -194,8 +194,8 @@ export default function region() { - setPage('table')}>{'< voltar para tabela pld'} - + setPage('table')}>{'< voltar para tabela PLD'} +
        @@ -207,10 +207,10 @@ export default function region() { width: '100%' }} > - Filial 3 - Filial 3 - Twenty - Thirty + Norte + Nordeste + Sul + Sudeste
        @@ -221,12 +221,12 @@ export default function region() { - setPage('table')}>{'< voltar para tabela pld'} + setPage('table')}>{'< voltar para tabela PLD'} - +
        - + console.log()}/>
        diff --git a/src/services/api.ts b/src/services/api.ts new file mode 100644 index 0000000..594b812 --- /dev/null +++ b/src/services/api.ts @@ -0,0 +1,22 @@ +import axios, { AxiosRequestConfig } from "axios"; +import { getToken } from "./auth"; + +const api = axios.create({ + // baseURL: "http://192.168.0.132:3000/", + baseURL: "http://localhost:3000/", + headers: { + 'Content-Type': 'application/x-www-form-urlencoded' + } +}); + +api.interceptors.request.use(config => { + const token = getToken(); + // console.log(token) + if (config.headers === undefined && token === undefined) { + config.headers = {Authorization: `Bearer ${token}`}; + } + return config; + }, +); + +export default api diff --git a/src/services/auth.ts b/src/services/auth.ts new file mode 100644 index 0000000..d9807a0 --- /dev/null +++ b/src/services/auth.ts @@ -0,0 +1,10 @@ +export const TOKEN_KEY = "@test"; +export const isAuthenticated = () => localStorage.getItem(TOKEN_KEY) !== null; +// export const isAuthenticated = true; +export const getToken = () => localStorage.getItem(TOKEN_KEY); +export const login = (token: any) => { + localStorage.setItem(TOKEN_KEY, token); +}; +export const logout = () => { + localStorage.removeItem(TOKEN_KEY); +}; \ No newline at end of file diff --git a/src/styles/layouts/general/GeneralView.tsx b/src/styles/layouts/general/GeneralView.tsx new file mode 100644 index 0000000..2c32b08 --- /dev/null +++ b/src/styles/layouts/general/GeneralView.tsx @@ -0,0 +1,11 @@ +import styled from "styled-components"; + +export const GeneralView = styled.main` + display: flex; + align-items: center; + justify-content: center; + + flex-direction: column; + + width: 100%; +` diff --git a/yarn.lock b/yarn.lock index 40fa454..6b0cb7f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1688,10 +1688,21 @@ astral-regex@^2.0.0: version "2.0.0" resolved "https://registry.npmjs.org/astral-regex/-/astral-regex-2.0.0.tgz" +asynckit@^0.4.0: + version "0.4.0" + resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79" + axe-core@^4.3.5: version "4.4.1" resolved "https://registry.npmjs.org/axe-core/-/axe-core-4.4.1.tgz" +axios@^0.27.2: + version "0.27.2" + resolved "https://registry.yarnpkg.com/axios/-/axios-0.27.2.tgz#207658cc8621606e586c85db4b41a750e756d972" + dependencies: + follow-redirects "^1.14.9" + form-data "^4.0.0" + axobject-query@^2.2.0: version "2.2.0" resolved "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz" @@ -1962,6 +1973,12 @@ columnify@^1.6.0: strip-ansi "^6.0.1" wcwidth "^1.0.0" +combined-stream@^1.0.8: + version "1.0.8" + resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.8.tgz#c3d45a8b34fd730631a110a8a2520682b31d5a7f" + dependencies: + delayed-stream "~1.0.0" + commander@^8.3.0: version "8.3.0" resolved "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz" @@ -2083,6 +2100,10 @@ define-properties@^1.1.3, define-properties@^1.1.4: has-property-descriptors "^1.0.0" object-keys "^1.1.1" +delayed-stream@~1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619" + delegates@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/delegates/-/delegates-1.0.0.tgz#84c6e159b81904fdca59a0ef44cd870d31250f9a" @@ -2505,6 +2526,18 @@ flatted@^3.1.0: version "3.2.5" resolved "https://registry.npmjs.org/flatted/-/flatted-3.2.5.tgz" +follow-redirects@^1.14.9: + version "1.15.1" + resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.1.tgz#0ca6a452306c9b276e4d3127483e29575e207ad5" + +form-data@^4.0.0: + version "4.0.0" + resolved "https://registry.yarnpkg.com/form-data/-/form-data-4.0.0.tgz#93919daeaf361ee529584b9b31664dc12c9fa452" + dependencies: + asynckit "^0.4.0" + combined-stream "^1.0.8" + mime-types "^2.1.12" + fs-extra@^10.1.0: version "10.1.0" resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-10.1.0.tgz#02873cfbc4084dde127eaa5f9905eef2325d1abf" @@ -3322,6 +3355,16 @@ micromatch@^4.0.4: braces "^3.0.2" picomatch "^2.3.1" +mime-db@1.52.0: + version "1.52.0" + resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.52.0.tgz#bbabcdc02859f4987301c856e3387ce5ec43bf70" + +mime-types@^2.1.12: + version "2.1.35" + resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.35.tgz#381a871b62a734450660ae3deee44813f70d959a" + dependencies: + mime-db "1.52.0" + mimic-fn@^2.1.0: version "2.1.0" resolved "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz" From 9852af47f7590d43d6819ffae27c49cd91679ac8 Mon Sep 17 00:00:00 2001 From: Alex Santos Date: Mon, 13 Jun 2022 19:43:19 -0300 Subject: [PATCH 09/18] input Upload --- src/components/inputUplaod/inputUpload.tsx | 50 ++++++++++++++++ src/components/inputUplaod/inputUploadView.ts | 57 +++++++++++++++++++ src/pages/administrative/clients.tsx | 12 +++- 3 files changed, 118 insertions(+), 1 deletion(-) create mode 100644 src/components/inputUplaod/inputUpload.tsx create mode 100644 src/components/inputUplaod/inputUploadView.ts diff --git a/src/components/inputUplaod/inputUpload.tsx b/src/components/inputUplaod/inputUpload.tsx new file mode 100644 index 0000000..257b836 --- /dev/null +++ b/src/components/inputUplaod/inputUpload.tsx @@ -0,0 +1,50 @@ +import React,{ useState, useEffect } from 'react' + +import { InputUploadView } from './inputUploadView' + + +export default function InputUpload() { + const [images, setImages] = useState([] as any); + const [imageURLS, setImageURLs] = useState([]); + + 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]); + console.log(e); + } + + + + + return ( + + +
        +
        + {imageURLS.map((imageSrc) => ( + not fount + ))} + +
        + + +
        + +
        +
        +
        + + +
        +
        +
        + +         + ) +} diff --git a/src/components/inputUplaod/inputUploadView.ts b/src/components/inputUplaod/inputUploadView.ts new file mode 100644 index 0000000..7a244d0 --- /dev/null +++ b/src/components/inputUplaod/inputUploadView.ts @@ -0,0 +1,57 @@ +import styled from 'styled-components' + +export const InputUploadView = styled.button` + width: 350px; + margin-left: 63px; + height: 58px; + + border-radius: 5px; + background-color: #fff; + border: 1px solid #adacac; + + + margin-top: 13px; + +.imgContainer{ + max-width: 40px; + height: 30px; +} + + input[type="file"] { + display: none; + + } + label { + width: 169px; + height: 30px; + border-radius: 4px; + background-color: #254F7F; + color: white; + margin-left: 3px; + font-size: 13px; + font-weight: 600; + text-transform: uppercase; + display: flex; + text-align: center; + cursor: pointer; + } + .image{ + width:30px; + } + + .text{ + margin-left: 60px; + } + .update{ + margin-left: 160px; + margin-top: -29px; + } + .TitleButton{ + margin-left: 9px; + margin-top: 6px; + font-family: 'Poppins'; + } + + + +` diff --git a/src/pages/administrative/clients.tsx b/src/pages/administrative/clients.tsx index faadc66..2c607ab 100644 --- a/src/pages/administrative/clients.tsx +++ b/src/pages/administrative/clients.tsx @@ -13,6 +13,9 @@ 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 { IconButton } from '@mui/material'; +import InputUpload from '../../components/inputUplaod/inputUpload' + const style = { @@ -41,6 +44,8 @@ export default function clients() { + + return (
        @@ -67,7 +72,12 @@ export default function clients() { - + + + + + +

        console.log()} /> console.log()}/> From cf3e6c484b7eee66b450dc22a3e1df04209e3df5 Mon Sep 17 00:00:00 2001 From: Alex Santos Date: Wed, 15 Jun 2022 09:46:27 -0300 Subject: [PATCH 10/18] consumption API --- .../administrativeTables/FaqTable.tsx | 21 +++--- src/contexts/AuthContext.tsx | 2 +- src/pages/administrative/faq/index.tsx | 70 +++++++++++++++++-- .../administrative/notification/index.tsx | 2 +- src/services/auth.ts | 2 +- src/services/ssrApi.ts | 2 +- 6 files changed, 80 insertions(+), 19 deletions(-) diff --git a/src/components/administrativeTables/FaqTable.tsx b/src/components/administrativeTables/FaqTable.tsx index 7877191..62e5955 100644 --- a/src/components/administrativeTables/FaqTable.tsx +++ b/src/components/administrativeTables/FaqTable.tsx @@ -19,7 +19,9 @@ import Toolbar from '@mui/material/Toolbar'; import Tooltip from '@mui/material/Tooltip'; import Typography from '@mui/material/Typography'; import { visuallyHidden } from '@mui/utils'; +import { GetServerSideProps } from 'next'; import React, { useState } from 'react'; +import getAPIClient from '../../services/ssrApi'; import { ClientTableView, StyledStatus } from './ClientsTableView'; @@ -171,7 +173,7 @@ function EnhancedTableHead(props: EnhancedTableProps) { ); } -export default function FaqTable() { +export default function FaqTable({questionData}: any) { const [order, setOrder] = useState('asc'); const [orderBy, setOrderBy] = useState('status'); const [selected, setSelected] = useState([]); @@ -179,6 +181,8 @@ export default function FaqTable() { const [dense, setDense] = useState(false); const [rowsPerPage, setRowsPerPage] = useState(5); + console.table(questionData) + console.table(rows) const handleRequestSort = ( event: React.MouseEvent, property: keyof Data, @@ -190,7 +194,7 @@ export default function FaqTable() { const handleSelectAllClick = (event: React.ChangeEvent) => { if (event.target.checked) { - const newSelecteds = rows.map((n) => n.question); + const newSelecteds = questionData.map((n) => n.questionData); setSelected(newSelecteds); return; } @@ -247,23 +251,23 @@ export default function FaqTable() { orderBy={orderBy} onSelectAllClick={handleSelectAllClick} onRequestSort={handleRequestSort} - rowCount={rows.length} + rowCount={questionData.length} /> - {stableSort(rows, getComparator(order, orderBy)) + {stableSort(questionData, getComparator(order, orderBy)) .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage) .map((row, index) => { - const isItemSelected = isSelected(row.question); + const isItemSelected = isSelected(row.id); const labelId = `enhanced-table-checkbox-${index}`; return ( handleClick(event, row.question)} + onClick={(event) => handleClick(event, row.id)} role="checkbox" aria-checked={isItemSelected} tabIndex={-1} - key={row.question} + key={row.id} selected={isItemSelected} > @@ -284,7 +288,7 @@ export default function FaqTable() { {row.question} {row.answer} - {row.status} + {row.deleted_at? 'ativo' : 'inativo'} ); })} @@ -313,3 +317,4 @@ export default function FaqTable() { ); } + diff --git a/src/contexts/AuthContext.tsx b/src/contexts/AuthContext.tsx index 00093ae..b0ae9d6 100644 --- a/src/contexts/AuthContext.tsx +++ b/src/contexts/AuthContext.tsx @@ -4,7 +4,7 @@ import Router from 'next/router' import { setCookie } from "nookies"; import { signInRequest } from "../services/auth"; -import api from "../services/api"; +import { api } from "../services/api"; type UserType = { name: string; diff --git a/src/pages/administrative/faq/index.tsx b/src/pages/administrative/faq/index.tsx index 91ae987..1dc6001 100644 --- a/src/pages/administrative/faq/index.tsx +++ b/src/pages/administrative/faq/index.tsx @@ -9,6 +9,8 @@ import Image from 'next/image' import Link from 'next/link' import { useRouter } from 'next/router' import React, { useEffect, useState } from 'react' +import { api } from '../../../services/api'; + import FaqTable from '../../../components/administrativeTables/FaqTable'; import BasicButton from '../../../components/buttons/basicButton/BasicButton'; @@ -17,6 +19,9 @@ import FaqButton2 from '../../../components/buttons/faqButton/FaqButton2'; import Header from '../../../components/header/Header' import PageTitle from '../../../components/pageTitle/PageTitle' import { FaqView } from '../../../styles/layouts/commonQuestions/FaqView' +import getAPIClient from '../../../services/ssrApi'; +import { GetServerSideProps } from 'next'; +import { parseCookies } from 'nookies'; const style = { position: 'absolute' as const, @@ -31,7 +36,27 @@ const style = { p: 4, }; -export default function Sidebar() { +type FaqInterface = { + question: string; + answer: string; + +} + + +export default function Sidebar({faqData}) { + async function handleRegisterNewFaq({question, answer}: FaqInterface) { + await api.post('/faq', { + "question": question, + "answer": answer, + + }).then(res => console.log(res.data)) + } + + const [faq, setFaq] = useState({ + question: '', + answer: '', + }) + const [open, setOpen] = React.useState(false); const handleOpen = () => setOpen(true); @@ -61,21 +86,52 @@ export default function Sidebar() { Adicionar/Editar Pergunta
        -

        - + + setFaq({...faq, question:value.target.value})} sx={{width:710, ml:8}} variant="outlined" />

        + setFaq({...faq, answer:value.target.value})} sx={{width:710, ml:8}} variant="outlined" /> +

        - + handleRegisterNewFaq(faq)} + /> - + ) } + +export const getServerSideProps: GetServerSideProps = async (ctx) => { + const apiClient = getAPIClient(ctx) + const { ['@smartAuth-token']: token } = parseCookies(ctx) + console.log('teste') + let faqData = []; + + +await apiClient.get('/faq').then(res => { + faqData = res.data +}).catch(res => { + console.log(res) +}) + console.table(faqData); + + if (!token) { + return { + redirect: { + destination: '/', + permanent: false + } + } + } + + return { + props: { + faqData + } + } +} diff --git a/src/pages/administrative/notification/index.tsx b/src/pages/administrative/notification/index.tsx index c608fe7..eb68a3e 100644 --- a/src/pages/administrative/notification/index.tsx +++ b/src/pages/administrative/notification/index.tsx @@ -21,7 +21,7 @@ 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 { api } from '../../../services/api'; import { FaqView } from '../../../styles/layouts/commonQuestions/FaqView' import { NotificationView } from './notificationView' diff --git a/src/services/auth.ts b/src/services/auth.ts index df78f49..3a36874 100644 --- a/src/services/auth.ts +++ b/src/services/auth.ts @@ -1,4 +1,4 @@ -import api from "./api"; +import { api } from "./api"; export const TOKEN_KEY = "@smartAuth-token"; diff --git a/src/services/ssrApi.ts b/src/services/ssrApi.ts index 4bad590..8a23c97 100644 --- a/src/services/ssrApi.ts +++ b/src/services/ssrApi.ts @@ -10,7 +10,7 @@ export default function getAPIClient(ctx?: Pick | { req: express.Request; } | null | undefined) { - const { '@smartAuth-token': token } = parseCookies() + const { '@smartAuth-token': token } = parseCookies(ctx) const api = axios.create({ baseURL: "https://smart-energia-api.herokuapp.com/api", From 95d33f1ccd72154eb92e65b16cff728988ade19b Mon Sep 17 00:00:00 2001 From: joseCorte-exe Date: Wed, 15 Jun 2022 10:34:15 -0300 Subject: [PATCH 11/18] add notification integration --- .../NotificationsTable.tsx | 32 ++- src/contexts/AuthContext.tsx | 4 +- .../administrative/notification/index.tsx | 222 ++++++++++++------ .../notification/notificationView.ts | 2 +- src/services/auth.ts | 27 +-- src/services/ssrApi.ts | 5 +- 6 files changed, 185 insertions(+), 107 deletions(-) diff --git a/src/components/administrativeTables/NotificationsTable.tsx b/src/components/administrativeTables/NotificationsTable.tsx index e462c4f..9610612 100644 --- a/src/components/administrativeTables/NotificationsTable.tsx +++ b/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('asc'); const [orderBy, setOrderBy] = useState('status'); const [selected, setSelected] = useState([]); @@ -190,7 +197,7 @@ export default function ClientTable() { const handleSelectAllClick = (event: React.ChangeEvent) => { 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 = - page > 0 ? Math.max(0, (1 + page) * rowsPerPage - rows.length) : 0; + const emptyRows = page > 0 ? Math.max(0, (1 + page) * rowsPerPage - notifications.length) : 0; return ( @@ -247,23 +253,23 @@ export default function ClientTable() { orderBy={orderBy} onSelectAllClick={handleSelectAllClick} onRequestSort={handleRequestSort} - rowCount={rows.length} + rowCount={notifications.length} /> - {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 ( 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} > @@ -281,10 +287,10 @@ export default function ClientTable() { scope="row" padding="none" > - {row.notification} + {row.title} - {row.client} - {row.status} + {'copel'} + {row.deleted_at===null? 'ativo' : 'inativo'} ); })} @@ -303,7 +309,7 @@ export default function ClientTable() { ; const checkedIcon = ; -export default function commonQuestions() { +interface NotificationInterface { + title: string, + body: string, + users: object[] +} + +export default function notification({clients, notifications}) { + + const [notification, setNotification] = useState({ + title: '', + body: '', + users: [] + }) + + const [open, setOpen] = useState(false); + const [openSnackSuccess, setOpenSnackSuccess] = useState(false); + const [openSnackError, setOpenSnackError] = useState(false); + + const [radiusValue, setRadiusValue] = useState('all'); - const [open, setOpen] = React.useState(false); const handleOpen = () => setOpen(true); const handleClose = () => setOpen(false); + async function handleRegisterNewNotification({title, body, users}: NotificationInterface) { + await api.post('/notification', { + title, + body, + users + }).then(res => setOpenSnackSuccess(true)).catch(res => setOpenSnackError(true)) + } + return ( @@ -61,79 +89,131 @@ export default function commonQuestions() {

        Disparar Notificações

        Pode ser que todas as notificaçõs demorem alguns minutos para estarem disponíveis
        -

        + { + setNotification({ + ...notification, + title: value.target.value + }) + }} variant="outlined" />

        + { + setNotification({ + ...notification, + body: value.target.value + }) + }} variant="outlined" />

        - option.title} - renderOption={(props, option, { selected }) => ( -
      • - - {option.title} -
        • - )} - sx={{ml:8}} - style={{ width: 700 }} - renderInput={(params) => ( - - )} - />
        - } - checkedIcon={} - /> - - Disparar para todos os clientes - } - checkedIcon={} - /> - - Disparar somente para alguns clientes + + + } checked={radiusValue==='all'? true : false}onChange={(value: React.ChangeEvent) => { + setRadiusValue(value.target.value) + }} label="Disparar para todos os clientes" /> + } checked={radiusValue==='some'? true : false} onChange={(value: React.ChangeEvent) => { + setRadiusValue(value.target.value) + }} label="Disparar somente para alguns clientes" /> + +
        - - + { + radiusValue === 'some'? + { + setNotification({...notification, users: newValue.map((el) => {return {"user_id": el.id}})}); + }} + getOptionLabel={(option) => option.name} + renderOption={(props, option, { selected }) => ( +
      • + + {option.name} +
        • + )} + sx={{ml:8}} + style={{ width: 700 }} + renderInput={(params) => ( + + )} + /> : + null + } + + {console.log()}} /> + { + handleRegisterNewNotification(notification) + }} />         - + + + + This is a success message! + + + + + This is a success message! + + ) } -const top100Films = [ - { title: 'The Shawshank Redemption', year: 1994 }, - { title: 'The Godfather', year: 1972 }, - { title: 'The Godfather: Part II', year: 1974 }, - { title: 'The Dark Knight', year: 2008 }, - { title: '12 Angry Men', year: 1957 }, - { title: "Schindler's List", year: 1993 }, - { title: 'Pulp Fiction', year: 1994 }, - { - title: 'The Lord of the Rings: The Return of the King', - year: 2003, - }, -]; +export const getServerSideProps: GetServerSideProps = async (ctx) => { + const apiClient = getAPIClient(ctx) + const { ['@smartAuth-token']: token } = parseCookies(ctx) + + let clients = []; + let notifications = []; + + await apiClient.get('/user').then(res => { + clients = res.data + }).catch(res => { + 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 + } + } +} diff --git a/src/pages/administrative/notification/notificationView.ts b/src/pages/administrative/notification/notificationView.ts index eef7f16..cc0aca2 100644 --- a/src/pages/administrative/notification/notificationView.ts +++ b/src/pages/administrative/notification/notificationView.ts @@ -3,7 +3,7 @@ import styled from 'styled-components' export const NotificationView = styled.nav` - display: flex; + display: flex; align-items: center; flex-direction: column; diff --git a/src/services/auth.ts b/src/services/auth.ts index df78f49..e2b196b 100644 --- a/src/services/auth.ts +++ b/src/services/auth.ts @@ -1,4 +1,4 @@ -import api from "./api"; +import { api } from "./api"; export const TOKEN_KEY = "@smartAuth-token"; @@ -15,7 +15,8 @@ type UserObjectType = { name: string; email: string; client_id: number - id: number + id: number, + role: number } export async function signInRequest(data: SignInRequestData) { @@ -30,7 +31,8 @@ export async function signInRequest(data: SignInRequestData) { 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.role_id } token = res.data.token }).catch(res => { @@ -38,13 +40,8 @@ export async function signInRequest(data: SignInRequestData) { }) return { - token: token, - user: { - name: user.name, - email: user.email, - client_id: user.client_id, - id: user.id - } + token, + user } } @@ -57,18 +54,14 @@ 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.role_id } }).catch(res => { console.log(res) }) return { - user: { - name: user?.name, - email: user?.email, - client_id: user?.client_id, - id: user?.id - } + user } } diff --git a/src/services/ssrApi.ts b/src/services/ssrApi.ts index 4bad590..0be3e3e 100644 --- a/src/services/ssrApi.ts +++ b/src/services/ssrApi.ts @@ -10,16 +10,13 @@ export default function getAPIClient(ctx?: Pick | { req: express.Request; } | null | undefined) { - const { '@smartAuth-token': token } = parseCookies() + const { '@smartAuth-token': token } = parseCookies(ctx) const api = axios.create({ baseURL: "https://smart-energia-api.herokuapp.com/api", }); api.interceptors.request.use(config => { - // console.log(config) - // config.headers = {Authorization: `Bearer ${token}`}; - return config; }, ); From 55a206bd3afadc75d44d0e90c412deca3538efbc Mon Sep 17 00:00:00 2001 From: joseCorte-exe Date: Wed, 15 Jun 2022 13:09:27 -0300 Subject: [PATCH 12/18] add auth and user role --- package.json | 1 + src/components/sidebar/Sidebar.tsx | 29 ++++--------- src/contexts/AuthContext.tsx | 2 +- .../administrative/notification/index.tsx | 41 +++++++++++++------ src/services/auth.ts | 22 +++++++--- yarn.lock | 9 +++- 6 files changed, 63 insertions(+), 41 deletions(-) diff --git a/package.json b/package.json index 6928e76..cf6bbec 100644 --- a/package.json +++ b/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", diff --git a/src/components/sidebar/Sidebar.tsx b/src/components/sidebar/Sidebar.tsx index 05c298d..1f08998 100644 --- a/src/components/sidebar/Sidebar.tsx +++ b/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 = { - role: 'admin' - } + const { ['user-role']: role } = parseCookies() + + console.log(role) useEffect(() => { setViewModal(false) @@ -44,7 +45,7 @@ export default function Sidebar() { return ( <> - +
        setViewModal(!viewModal)} > @@ -57,22 +58,6 @@ export default function Sidebar() {
      • {'Visão Geral'}
      • {'FAQ >'}
      • {'Notificações >'}

        25

        • - {/*
      • setEconomiaDrawer(!economiaDrawer)} className={router.pathname=='/grossSavings' || router.pathname=='/accumulatedSavings' || router.pathname=='/estimatedCost' || router.pathname=='/costIndicator' ? 'actualPath' : null } >{'Economia >'}
        • -
        -
      • Economia Bruta
        • -
      • Economia Acumulada
        • -
      • Custo Estimado
        • -
      • Custo R/MWh
        • -
        */} - {/*
      • {'Telemetria >'}
        • -
      • {'Resumo de Op. '}
        • -
      • {'Notícias >'}
        • -
      • {'PLD >'}
        • -
      • {'Info Setorial >'}
        • -
      • {'Consumo'}
        • -
      • {'Notificações >'}

        25

        • -
      • {'Sobre Nós >'}
        • -
      • {'FAQ >'}
        • */} - +
        setViewModal(!viewModal)} > diff --git a/src/contexts/AuthContext.tsx b/src/contexts/AuthContext.tsx index 6e34ac9..32e36b7 100644 --- a/src/contexts/AuthContext.tsx +++ b/src/contexts/AuthContext.tsx @@ -40,7 +40,7 @@ export function AuthProvider({children}: {children: React.ReactNode}) { maxAge: 60 * 60 * 1, // 1 hour }) - // setCookie(undefined, 'user-role', user.role) + setCookie(undefined, 'user-role', user.role) api.defaults.headers['Authorization'] = `Bearer ${token}` diff --git a/src/pages/administrative/notification/index.tsx b/src/pages/administrative/notification/index.tsx index 4b30dcc..021095f 100644 --- a/src/pages/administrative/notification/index.tsx +++ b/src/pages/administrative/notification/index.tsx @@ -25,8 +25,8 @@ import getAPIClient from '../../../services/ssrApi'; import { GetServerSideProps } from 'next'; import { parseCookies } from 'nookies'; import Notifications from '../../notifications'; -import Snackbar from '@mui/material/Snackbar/Snackbar'; -import Alert from '@mui/material/Alert/Alert'; +import Snackbar from '@mui/material/Snackbar'; +import MuiAlert, { AlertProps } from '@mui/material/Alert'; const style = { position: 'absolute' as const, @@ -42,6 +42,13 @@ const style = { overflowY: 'scroll' }; +const Alert = React.forwardRef(function Alert( + props, + ref, +) { + return ; +}); + const icon = ; const checkedIcon = ; @@ -68,6 +75,15 @@ export default function notification({clients, notifications}) { 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, @@ -84,6 +100,17 @@ export default function notification({clients, notifications}) {
        + + + notificação cadastrada com sucesso! + + + + + Notificação não cadastrada! + + +
        @@ -168,16 +195,6 @@ export default function notification({clients, notifications}) { - - - This is a success message! - - - - - This is a success message! - - ) } diff --git a/src/services/auth.ts b/src/services/auth.ts index e2b196b..0edd74e 100644 --- a/src/services/auth.ts +++ b/src/services/auth.ts @@ -27,12 +27,13 @@ export async function signInRequest(data: SignInRequestData) { "password": data.password, "device_name": "test" }).then(res => { + // console.log(res.data.user.roles.pivot.role_id) user = { name: res.data.user.name, email: res.data.user.email, client_id: res.data.user.client_id, id: res.data.user.id, - role: res.data.user.roles.role_id + role: res.data.user.roles[0].pivot.role_id } token = res.data.token }).catch(res => { @@ -40,8 +41,14 @@ export async function signInRequest(data: SignInRequestData) { }) return { - token, - user + token: token, + user: { + name: user?.name, + email: user?.email, + client_id: user?.client_id, + id: user?.id, + role: user?.role + } } } @@ -55,13 +62,18 @@ export default async function recoverUserInformation(id) { email: res.data.user.email, client_id: res.data.user.client_id, id: res.data.user.id, - role: res.data.user.roles.role_id + role: res.data.user.roles[0].pivot.role_id } }).catch(res => { console.log(res) }) return { - user + user: { + name: user?.name, + email: user?.email, + client_id: user?.client_id, + id: user?.id + } } } diff --git a/yarn.lock b/yarn.lock index f46ffc0..ed043f2 100644 --- a/yarn.lock +++ b/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" From e82bf612f9a306b96499c0a1f2962981c53ced8a Mon Sep 17 00:00:00 2001 From: joseCorte-exe Date: Wed, 15 Jun 2022 14:20:47 -0300 Subject: [PATCH 13/18] fix login --- src/contexts/AuthContext.tsx | 27 ++++++++++++++++++++------- src/pages/dashboard.tsx | 1 - src/services/auth.ts | 12 ++++++------ 3 files changed, 26 insertions(+), 14 deletions(-) diff --git a/src/contexts/AuthContext.tsx b/src/contexts/AuthContext.tsx index 32e36b7..c422e20 100644 --- a/src/contexts/AuthContext.tsx +++ b/src/contexts/AuthContext.tsx @@ -31,22 +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 }) - setCookie(undefined, '@smartAuth-token', token, { - maxAge: 60 * 60 * 1, // 1 hour - }) + if (token) { + setCookie(undefined, '@smartAuth-token', token, { + maxAge: 60 * 60 * 1, // 1 hour + }) + } - setCookie(undefined, 'user-role', user.role) + 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 ( diff --git a/src/pages/dashboard.tsx b/src/pages/dashboard.tsx index 1615fab..a5ff7c6 100644 --- a/src/pages/dashboard.tsx +++ b/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) { diff --git a/src/services/auth.ts b/src/services/auth.ts index 0edd74e..52640dc 100644 --- a/src/services/auth.ts +++ b/src/services/auth.ts @@ -20,14 +20,14 @@ type UserObjectType = { } 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 => { - // console.log(res.data.user.roles.pivot.role_id) + token = res.data.token user = { name: res.data.user.name, email: res.data.user.email, @@ -35,20 +35,20 @@ export async function signInRequest(data: SignInRequestData) { 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, email: user?.email, client_id: user?.client_id, id: user?.id, role: user?.role - } + }, + exception } } From 656f2a67f12714decea06ab2d77b5b631d07381b Mon Sep 17 00:00:00 2001 From: Alex Santos Date: Wed, 15 Jun 2022 14:47:55 -0300 Subject: [PATCH 14/18] update Faq --- .../administrativeTables/FaqTable.tsx | 5 +- .../faqQuestionsCard/FaqQuestionsCard.tsx | 15 ++++-- src/pages/administrative/faq/index.tsx | 3 +- src/pages/faq.tsx | 54 +++++++++++++++---- 4 files changed, 56 insertions(+), 21 deletions(-) diff --git a/src/components/administrativeTables/FaqTable.tsx b/src/components/administrativeTables/FaqTable.tsx index 62e5955..0b5878c 100644 --- a/src/components/administrativeTables/FaqTable.tsx +++ b/src/components/administrativeTables/FaqTable.tsx @@ -15,9 +15,6 @@ 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 { GetServerSideProps } from 'next'; import React, { useState } from 'react'; @@ -194,7 +191,7 @@ export default function FaqTable({questionData}: any) { const handleSelectAllClick = (event: React.ChangeEvent) => { if (event.target.checked) { - const newSelecteds = questionData.map((n) => n.questionData); + const newSelecteds = questionData.map((n) => n.id); setSelected(newSelecteds); return; } diff --git a/src/components/faqQuestionsCard/FaqQuestionsCard.tsx b/src/components/faqQuestionsCard/FaqQuestionsCard.tsx index 343e749..730fd19 100644 --- a/src/components/faqQuestionsCard/FaqQuestionsCard.tsx +++ b/src/components/faqQuestionsCard/FaqQuestionsCard.tsx @@ -1,21 +1,26 @@ import React, { useState } from 'react' import Image from 'next/image' - +import getAPIClient from '../../services/ssrApi'; import { FaqQuestionsCardBody, FaqQuestionsCardHeader, CommonQuestionsCardView } from './FaqQuestionsCardView' -export default function CommonsQuestionsCard() { +interface CommonsQuestionsCardInterface { + question: string, + answer: string, +} + +export default function CommonsQuestionsCard({question, answer}: CommonsQuestionsCardInterface) { const [ showCardBody, setShowCardBody ] = useState(false) return ( + -

        Lorem ipsum dolor sit amet, consectetur adipiscing elit?

        +

        {question}

        setShowCardBody(!showCardBody)} />

        - Lorem ipsum dolor sit amet, consectetur adipiscing elit. - Consequat porta faucibus elementum pharetra varius + {answer}

        diff --git a/src/pages/administrative/faq/index.tsx b/src/pages/administrative/faq/index.tsx index 1dc6001..d1874ad 100644 --- a/src/pages/administrative/faq/index.tsx +++ b/src/pages/administrative/faq/index.tsx @@ -70,7 +70,7 @@ export default function Sidebar({faqData}) {
        - +
        @@ -95,6 +95,7 @@ export default function Sidebar({faqData}) { throw new Error('Function not implemented.'); } } /> handleRegisterNewFaq(faq)} + /> diff --git a/src/pages/faq.tsx b/src/pages/faq.tsx index aecee8f..c1e3a41 100644 --- a/src/pages/faq.tsx +++ b/src/pages/faq.tsx @@ -1,10 +1,15 @@ +import { GetServerSideProps } from 'next' import Head from 'next/head' +import { parseCookies } from 'nookies' import React from 'react' import CommonQuestionsCard from '../components/faqQuestionsCard/FaqQuestionsCard' import Header from '../components/header/Header' +import { api } from '../services/api' +import getAPIClient from '../services/ssrApi' import { FaqView } from '../styles/layouts/commonQuestions/FaqView' -export default function commonQuestions() { + +export default function commonQuestions({faqData}) { return ( @@ -14,17 +19,44 @@ export default function commonQuestions() {

        Perguntas Frequentes

        Lorem ipsum dolor sit amet, consectetur adipiscing elit.

        - -
        - -
        - -
        - -
        - -
        + { + faqData.map((value, index ) => { + return <> + +
        + + }) + }
        ) } +export const getServerSideProps: GetServerSideProps = async (ctx) => { + const apiClient = getAPIClient(ctx) + const { ['@smartAuth-token']: token } = parseCookies(ctx) + console.log('teste') + let faqData = []; + + +await apiClient.get('/faq').then(res => { + faqData = res.data +}).catch(res => { + console.log(res) +}) + console.table(faqData); + + if (!token) { + return { + redirect: { + destination: '/', + permanent: false + } + } + } + + return { + props: { + faqData + } + } +} From ea0225d6392eba5b9667d22194485d3de4418b61 Mon Sep 17 00:00:00 2001 From: joseCorte-exe Date: Wed, 15 Jun 2022 15:54:42 -0300 Subject: [PATCH 15/18] add notification delete --- .../NotificationsTable.tsx | 13 +- .../accumulatedSavings/index.tsx | 39 --- src/pages/administrative/clients.tsx | 15 +- .../administrative/costIndicator/index.tsx | 38 --- .../administrative/estimatedCost/index.tsx | 39 --- .../administrative/grossSavings/index.tsx | 39 --- .../administrative/industryInfo/index.tsx | 37 --- src/pages/administrative/news/index.tsx | 58 ----- .../administrative/notification/index.tsx | 188 ++++++++------ .../administrative/notifications/index.tsx | 40 --- src/pages/administrative/pld/index.tsx | 231 ------------------ .../administrative/resumoOperacao/index.tsx | 161 ------------ src/pages/administrative/telemetria/index.tsx | 195 --------------- src/styles/layouts/clients/ClientsView.ts | 14 -- src/styles/layouts/modals/confirmModalView.ts | 13 + 15 files changed, 143 insertions(+), 977 deletions(-) delete mode 100644 src/pages/administrative/accumulatedSavings/index.tsx delete mode 100644 src/pages/administrative/costIndicator/index.tsx delete mode 100644 src/pages/administrative/estimatedCost/index.tsx delete mode 100644 src/pages/administrative/grossSavings/index.tsx delete mode 100644 src/pages/administrative/industryInfo/index.tsx delete mode 100644 src/pages/administrative/news/index.tsx delete mode 100644 src/pages/administrative/notifications/index.tsx delete mode 100644 src/pages/administrative/pld/index.tsx delete mode 100644 src/pages/administrative/resumoOperacao/index.tsx delete mode 100644 src/pages/administrative/telemetria/index.tsx create mode 100644 src/styles/layouts/modals/confirmModalView.ts diff --git a/src/components/administrativeTables/NotificationsTable.tsx b/src/components/administrativeTables/NotificationsTable.tsx index 9610612..284f730 100644 --- a/src/components/administrativeTables/NotificationsTable.tsx +++ b/src/components/administrativeTables/NotificationsTable.tsx @@ -19,7 +19,7 @@ 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 React, { useState, useEffect } from 'react'; import { ClientTableView, StyledStatus } from './ClientsTableView'; @@ -178,7 +178,12 @@ interface NotificationData { deleted_at: Date, } -export default function ClientTable({notifications}: any) { +interface NotificationsTableInterface{ + notifications: NotificationData[], + onChange: any +} + +export default function NotificationsTable({notifications, onChange}: NotificationsTableInterface) { const [order, setOrder] = useState('asc'); const [orderBy, setOrderBy] = useState('status'); const [selected, setSelected] = useState([]); @@ -238,6 +243,10 @@ export default function ClientTable({notifications}: any) { // Avoid a layout jump when reaching the last page with empty rows. const emptyRows = page > 0 ? Math.max(0, (1 + page) * rowsPerPage - notifications.length) : 0; + useEffect(() => { + onChange(selected) + }, [selected]) + return ( diff --git a/src/pages/administrative/accumulatedSavings/index.tsx b/src/pages/administrative/accumulatedSavings/index.tsx deleted file mode 100644 index 85a78d9..0000000 --- a/src/pages/administrative/accumulatedSavings/index.tsx +++ /dev/null @@ -1,39 +0,0 @@ -import Button from '@material-ui/core/Button' -import Head from 'next/head' -import React from 'react' - -import AdministrativeHeader from '../../../components/administrativeHeader/AdministrativeHeader' -import Chart from '../../../components/graph/Chart' -import { SingleBar } from '../../../components/graph/SingleBar' -import Header from '../../../components/header/Header' -import PageTitle from '../../../components/pageTitle/PageTitle' -import { EconomiaAcumulada } from '../../../services/economiaAcumulada' -import { dataEconomiaBruta } from '../../../services/economiaBruta' -import { AccumulatedSavingsView } from '../../../styles/layouts/economy/accumulatedSavings/AccumulatedSavingsView' - -export default function AccumulatedSavings() { - return ( - - - Smart Energia - Economia Acumulada - - - - -
        - -
        -         - ) -} diff --git a/src/pages/administrative/clients.tsx b/src/pages/administrative/clients.tsx index b9caf6f..e130a9a 100644 --- a/src/pages/administrative/clients.tsx +++ b/src/pages/administrative/clients.tsx @@ -13,12 +13,10 @@ import FaqButton1 from '../../components/buttons/faqButton/FaqButton1'; import FaqButton2 from '../../components/buttons/faqButton/FaqButton2'; import Header from '../../components/header/Header' import InputUpload from '../../components/inputUplaod/inputUpload'; -import { IconButton } from '@mui/material'; -import { ClientsView, ConfirmModalView } from '../../styles/layouts/clients/ClientsView'; +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'; const style = { position: 'absolute' as const, @@ -34,8 +32,6 @@ const style = { overflowY: 'scroll' }; - - export default function clients() { const [open, setOpen] = React.useState(false); const [openModalInativar, setOpenModalInativar] = useState(false) @@ -44,17 +40,13 @@ export default function clients() { const [openModal, setOpenModal] = useState(false) - - - - return (
        {/* */} -
        +
        @@ -91,7 +83,6 @@ export default function clients() { setOpenModalInativar(true)}/> -
        ) } diff --git a/src/pages/administrative/costIndicator/index.tsx b/src/pages/administrative/costIndicator/index.tsx deleted file mode 100644 index f6ee0f3..0000000 --- a/src/pages/administrative/costIndicator/index.tsx +++ /dev/null @@ -1,38 +0,0 @@ -import Button from '@material-ui/core/Button' -import Head from 'next/head' -import React from 'react' - -import AdministrativeHeader from '../../../components/administrativeHeader/AdministrativeHeader' -import Chart from '../../../components/graph/Chart' -import { SingleBar } from '../../../components/graph/SingleBar' -import Header from '../../../components/header/Header' -import PageTitle from '../../../components/pageTitle/PageTitle' -import { dataEconomiaBruta } from '../../../services/economiaBruta' -import { dataEconomiaIndicador } from '../../../services/economiaIndicador' -import { CostIndicatorView } from '../../../styles/layouts/economy/costIndicator/CostIndicatorView' - -export default function CostIndicator() { - return ( - - - Smart Energia - Indicador de Custos - - - - -
        - -
        -         - ) -} diff --git a/src/pages/administrative/estimatedCost/index.tsx b/src/pages/administrative/estimatedCost/index.tsx deleted file mode 100644 index fbee31d..0000000 --- a/src/pages/administrative/estimatedCost/index.tsx +++ /dev/null @@ -1,39 +0,0 @@ -import Button from '@material-ui/core/Button' -import Head from 'next/head' -import React from 'react' - -import AdministrativeHeader from '../../../components/administrativeHeader/AdministrativeHeader' -import Chart from '../../../components/graph/Chart' -import { LineBarChart } from '../../../components/graph/LineBarChart' -import Header from '../../../components/header/Header' -import PageTitle from '../../../components/pageTitle/PageTitle' -import { ConsumoEstimado } from '../../../services/consumoEstimado' -import { EstimatedCostView } from '../../../styles/layouts/economy/estimatedCost/EstimatedCostView' - -export default function EstimatedCost() { - return ( - <> - - Smart Energia - Custos Estimados - - - - - -
        - -
        -         - - ) -} diff --git a/src/pages/administrative/grossSavings/index.tsx b/src/pages/administrative/grossSavings/index.tsx deleted file mode 100644 index 5369c0d..0000000 --- a/src/pages/administrative/grossSavings/index.tsx +++ /dev/null @@ -1,39 +0,0 @@ -import Button from '@material-ui/core/Button' -import Head from 'next/head' -import React from 'react' - -import AdministrativeHeader from '../../../components/administrativeHeader/AdministrativeHeader' -import Chart from '../../../components/graph/Chart' -import { SingleBar } from '../../../components/graph/SingleBar' -import Header from '../../../components/header/Header' -import PageTitle from '../../../components/pageTitle/PageTitle' -import { dataEconomiaBruta } from '../../../services/economiaBruta' -import { GrossSavingsView } from '../../../styles/layouts/economy/grossSavings/GrossSavings' - -export default function GrossSavings() { - return ( - <> - - Smart Energia - Economia Acumulada - - - - - -
        - -
        -         - - ) -} diff --git a/src/pages/administrative/industryInfo/index.tsx b/src/pages/administrative/industryInfo/index.tsx deleted file mode 100644 index 8ca5b64..0000000 --- a/src/pages/administrative/industryInfo/index.tsx +++ /dev/null @@ -1,37 +0,0 @@ -import Button from '@material-ui/core/Button' -import Head from 'next/head' -import React from 'react' - -import AdministrativeHeader from '../../../components/administrativeHeader/AdministrativeHeader' -import BasicButton from '../../../components/buttons/basicButton/BasicButton' -import Header from '../../../components/header/Header' -import PageTitle from '../../../components/pageTitle/PageTitle' -import { IndustryInfoView } from '../../../styles/layouts/industryInfo/IndustryInfoView' - -export default function industryInfo() { - return ( - <> - - Smart Energia - Info de Setor - - - -
        - -
        - - -         - - ) -} diff --git a/src/pages/administrative/news/index.tsx b/src/pages/administrative/news/index.tsx deleted file mode 100644 index a471f72..0000000 --- a/src/pages/administrative/news/index.tsx +++ /dev/null @@ -1,58 +0,0 @@ -import Head from 'next/head'; -import Link from 'next/link' -import React from 'react' - -import AdministrativeHeader from '../../../components/administrativeHeader/AdministrativeHeader'; -import Banner from '../../../components/banner/Banner' -import BasicButton from '../../../components/buttons/basicButton/BasicButton'; -import Header from '../../../components/header/Header' -import { Button, NewsView } from '../../../styles/layouts/news/NewsView' - -export default function index() { - return ( - <> - - Smart Energia - Noticias - - - - - -
        -

        19 Abril 2022

        - ANEEL APROVA REAJUSTE TARIFÁRIO ANUAL DA ENERGISA SERGIPE DE 16,46 % PARA O CONSUMIDOR RESIDENCIAL -
        -
        -

        A Agência Nacional de Energia Elétrica (ANEEL) aprovou, nesta terça-feira (19/04) o reajuste tarifário anual da Energisa Sergipe – Distribuidora de Energia S.A (ESE). - As novas tarifas da empresa, que atende cerca de e 825 mil unidades consumidoras no Sergipe, entram em vigor nesta sexta, 22/04, com reajuste de 16,46 % para - o consumidor residencial.
        - Os itens que mais impactaram a correção foram os encargos setoriais, os custos de distribuição, a retirada dos componentes financeiros..

        - - -

        19 Abril 2022

        - NEEL APROVA REAJUSTE MÉDIO DE 20,36% NA TARIFA DE ENERGIA NO RN -
        -
        -

        A Agência Nacional de Energia Elétrica (ANEEL) aprovou, nesta terça-feira (19/04) o reajuste tarifário anual da Energisa Sergipe – Distribuidora de Energia S.A (ESE). - As novas tarifas da empresa, que atende cerca de e 825 mil unidades consumidoras no Sergipe, entram em vigor nesta sexta, 22/04, com reajuste de 16,46 % para - o consumidor residencial.
        - Os itens que mais impactaram a correção foram os encargos setoriais, os custos de distribuição, a retirada dos componentes financeiros..

        - - -
        - - console.log()}/> -         - - ) -} diff --git a/src/pages/administrative/notification/index.tsx b/src/pages/administrative/notification/index.tsx index d2631c1..dc142d6 100644 --- a/src/pages/administrative/notification/index.tsx +++ b/src/pages/administrative/notification/index.tsx @@ -8,7 +8,7 @@ import Modal from '@mui/material/Modal'; import TextField from '@mui/material/TextField'; import Typography from '@mui/material/Typography'; import Head from 'next/head' -import React, { useState } from 'react' +import React, { useEffect, useState } from 'react' import NotificationsTable from '../../../components/administrativeTables/NotificationsTable' import FaqButton1 from '../../../components/buttons/faqButton/FaqButton1'; @@ -24,9 +24,12 @@ 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'; +import BasicButton from '../../../components/buttons/basicButton/BasicButton'; +import { ConfirmModalView } from '../../../styles/layouts/modals/confirmModalView'; +import ConfirmModal from '../../../components/modal/ConfirmModal'; +import { JsxElement } from 'typescript'; const style = { position: 'absolute' as const, @@ -65,10 +68,14 @@ export default function notification({clients, notifications}) { body: '', users: [] }) + const [selectedNotifications, setSelectedNotifications] = useState([]) const [open, setOpen] = useState(false); + const [openModalInativar, setOpenModalInativar] = useState(false) const [openSnackSuccess, setOpenSnackSuccess] = useState(false); const [openSnackError, setOpenSnackError] = useState(false); + const [openSnackSuccessDelete, setOpenSnackSuccessDelete] = useState(false); + const [openSnackErrorDelete, setOpenSnackErrorDelete] = useState(false); const [radiusValue, setRadiusValue] = useState('all'); @@ -81,8 +88,17 @@ export default function notification({clients, notifications}) { } setOpenSnackError(false); + setOpenSnackSuccess(false); }; + const handleCloseSnackDelete = (event?: React.SyntheticEvent | Event, reason?: string) => { + if (reason === 'clickaway') { + return; + } + + setOpenSnackErrorDelete(false); + setOpenSnackSuccessDelete(false); + }; async function handleRegisterNewNotification({title, body, users}: NotificationInterface) { await api.post('/notification', { @@ -91,6 +107,15 @@ export default function notification({clients, notifications}) { users }).then(res => setOpenSnackSuccess(true)).catch(res => setOpenSnackError(true)) } + async function handleDeleteNotification(id: any) { + await id.map((value) => { + api.delete(`/notification/${value}`).then(res => { + setOpenSnackSuccessDelete(true) + setOpenModalInativar(false) + window.location.reload() + }).catch(res => setOpenSnackErrorDelete(true)) + }) + } return ( @@ -111,90 +136,109 @@ export default function notification({clients, notifications}) { + + + notificação excluida com sucesso! + + + + + Notificação não excluida! + + +
        +
        - setSelectedNotifications(value)}/> + - -

        Disparar Notificações

        - - Pode ser que todas as notificaçõs demorem alguns minutos para estarem disponíveis -
        - { - setNotification({ - ...notification, - title: value.target.value - }) - }} variant="outlined" />

        - { - setNotification({ - ...notification, - body: value.target.value - }) - }} variant="outlined" />

        + +

        Disparar Notificações

        + + Pode ser que todas as notificaçõs demorem alguns minutos para estarem disponíveis +
        + { + setNotification({ + ...notification, + title: value.target.value + }) + }} variant="outlined" />

        + { + setNotification({ + ...notification, + body: value.target.value + }) + }} variant="outlined" />

        -
        - - - } checked={radiusValue==='all'? true : false}onChange={(value: React.ChangeEvent) => { - setRadiusValue(value.target.value) - }} label="Disparar para todos os clientes" /> - } checked={radiusValue==='some'? true : false} onChange={(value: React.ChangeEvent) => { - setRadiusValue(value.target.value) - }} label="Disparar somente para alguns clientes" /> - - -
        +
        + + + } checked={radiusValue==='all'? true : false}onChange={(value: React.ChangeEvent) => { + setRadiusValue(value.target.value) + }} label="Disparar para todos os clientes" /> + } checked={radiusValue==='some'? true : false} onChange={(value: React.ChangeEvent) => { + setRadiusValue(value.target.value) + }} label="Disparar somente para alguns clientes" /> + + +
        - { - radiusValue === 'some'? - { - setNotification({...notification, users: newValue.map((el) => {return {"user_id": el.id}})}); - }} - getOptionLabel={(option) => option.name} - renderOption={(props, option, { selected }) => ( -
      • - - {option.name} -
        • - )} - sx={{ml:8}} - style={{ width: 700 }} - renderInput={(params) => ( - + { + radiusValue === 'some'? + { + setNotification({...notification, users: newValue.map((el) => {return {"user_id": el.id}})}); + }} + getOptionLabel={(option) => option.name} + renderOption={(props, option, { selected }) => ( +
      • + + {option.name} +
        • )} - /> : - null - } + sx={{ml:8}} + style={{ width: 700 }} + renderInput={(params) => ( + + )} + /> : + null + } - {console.log()}} /> - { - handleRegisterNewNotification(notification) - }} /> -         + {setOpen(false)}} /> + { + handleRegisterNewNotification(notification)}} + /> +         - + {setOpenModalInativar(value)}}> + + + handleDeleteNotification(selectedNotifications)}/> + setOpenModalInativar(false)}/> + +         ) } diff --git a/src/pages/administrative/notifications/index.tsx b/src/pages/administrative/notifications/index.tsx deleted file mode 100644 index cfce39c..0000000 --- a/src/pages/administrative/notifications/index.tsx +++ /dev/null @@ -1,40 +0,0 @@ -import FormControl from '@mui/material/FormControl'; -import InputLabel from '@mui/material/InputLabel'; -import MenuItem from '@mui/material/MenuItem'; -import Select, { SelectChangeEvent } from '@mui/material/Select'; -import TextField from '@mui/material/TextField'; -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' -import { FaqView } from '../../../styles/layouts/commonQuestions/FaqView' - -export default function commonQuestions() { - - const [month, setMonth] = React.useState(''); - const [unidade, setUnidade] = React.useState(''); - - const handleChangeMonth = (event: SelectChangeEvent) => { - setMonth(event.target.value); - }; - const handleChangeUnidade = (event: SelectChangeEvent) => { - setUnidade(event.target.value); - }; - - return ( - <> - - - Smart Energia - FAQ - -
        - - - - - ) -} diff --git a/src/pages/administrative/pld/index.tsx b/src/pages/administrative/pld/index.tsx deleted file mode 100644 index 82c071b..0000000 --- a/src/pages/administrative/pld/index.tsx +++ /dev/null @@ -1,231 +0,0 @@ -import MenuItem from '@mui/material/MenuItem'; -import Select, { SelectChangeEvent } from '@mui/material/Select'; -import TextField from '@mui/material/TextField'; -import Head from 'next/head'; -import Link from 'next/link'; -import { useRouter } from 'next/router' -import React, { useEffect, useState } from 'react' - -import AdministrativeHeader from '../../../components/administrativeHeader/AdministrativeHeader'; -import BasicButton from '../../../components/buttons/basicButton/BasicButton'; -import Chart from '../../../components/graph/Chart'; -import { LineBarChart } from '../../../components/graph/LineBarChart'; -import LineChart from '../../../components/graph/LineChart'; -import Header from '../../../components/header/Header' -import PageTitle from '../../../components/pageTitle/PageTitle'; -import { EconomiaAcumulada } from '../../../services/economiaAcumulada'; -import { EvolucaoPld } from '../../../services/evolucaoPld'; -import { GoBack, NewTableLine, PldGraphView, PldTableView } from '../../../styles/layouts/pld/PldView' -import RenderIf from '../../../utils/renderIf' - -export default function index() { - const [page, setPage] = useState('table') - const [age, setAge] = React.useState(''); - - const handleChange = (event: SelectChangeEvent) => { - setAge(event.target.value); - }; - - useEffect(() => { - console.log(page) - }, [page]) - - return ( -
        - - Smart Energia - PLD - - - - {'< voltar para visão geral'} - - -
        - - - - - -
        - console.log()}/> -         - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
        MêsNordesteNorteSudesteSul
        2101xxxxxxxxxxxxxxxx
        2102xxxxxxxxxxxxxxxx
        2103xxxxxxxxxxxxxxxx
        2104xxxxxxxxxxxxxxxx
        2105xxxxxxxxxxxxxxxx
        2106xxxxxxxxxxxxxxxx
        2107xxxxxxxxxxxxxxxx
        2108xxxxxxxxxxxxxxxx
        2109xxxxxxxxxxxxxxxx
        2110xxxxxxxxxxxxxxxx
        2111xxxxxxxxxxxxxxxx
        2112xxxxxxxxxxxxxxxx
        2021xxxxxxxxxxxxxxxx
        Mínxxxxxxxxxxxxxxxx
        Maxxxxxxxxxxxxxxxxx
        Desv Padxxxxxxxxxxxxxxxx
        -
        -
        setPage('perMouth')}> -

        Valores Diarios

        -
        -
        setPage('perDate')}> -

        Valores Horários

        -
        -
        -         -         - - - setPage('table')}>{'< voltar para tabela pld'} - - -
        -
        - -
        - - console.log()}/> -
        - -         -         - - - setPage('table')}>{'< voltar para tabela pld'} - - -
        - - console.log()}/> -
        - -         -         -
        - ) -} diff --git a/src/pages/administrative/resumoOperacao/index.tsx b/src/pages/administrative/resumoOperacao/index.tsx deleted file mode 100644 index 23a0258..0000000 --- a/src/pages/administrative/resumoOperacao/index.tsx +++ /dev/null @@ -1,161 +0,0 @@ -import TextField from '@material-ui/core/TextField'; -import Box from '@mui/material/Box'; -import FormControl from '@mui/material/FormControl'; -import InputLabel from '@mui/material/InputLabel'; -import MenuItem from '@mui/material/MenuItem'; -import Select, { SelectChangeEvent } from '@mui/material/Select'; -import Head from 'next/head'; -import React, { useEffect } from 'react'; -// import Teste from '../files/teste.csv'; -import { CSVDownload, CSVLink } from "react-csv"; - -import AdministrativeHeader from '../../../components/administrativeHeader/AdministrativeHeader'; -import BasicButton from '../../../components/buttons/basicButton/BasicButton'; -import Header from '../../../components/header/Header'; -import PageTitle from '../../../components/pageTitle/PageTitle'; -import Sidebar from '../../../components/sidebar/Sidebar'; -// import { dados } from '../services/DadosTabelaResumoOperacao'; -import data from '../../../services/dados.json' -import { NewTableLine, Pagination, TableView } from '../../../styles/layouts/ResumoOperacao/ResumoOperacaoView'; - -export default function index() { - const csvData = [ - // ["firstname", "lastname", "email"], - // ["Ahmed", "Tomi", "ah@smthing.co.com"], - // ["Raed", "Labes", "rl@smthing.co.com"], - // ["Yezzi", "Min l3b", "ymin@cocococo.com"], - - [ "value", "unidade1", "name", "Unidade-1", "operacao", "Compra", "montante", "130,00", "contraparte", "cOPEL COM I5", "preco", "234,67", "valorNF", "38.257,15" ], - [ "value", "unidade2", "name", "Unidade-2", "operacao", "Compra", "montante", "20,00", "contraparte", "EMEWE I5", "preco", "234,67", "valorNF", "38.257,15"], - [ "value", "unidade3", "name", "Unidade-3", "operacao", "Compra", "montante", "30,00", "contraparte", "EMEWE I5", "preco", "234,67", "valorNF", "38.257,15" ], - [ "value", "unidade4", "name", "Unidade-4", "operacao", "Compra", "montante", "40,00", "contraparte", "COPEL COM I5", "preco", "234,67", "valorNF", "38.257,15" ], - [ "value", "unidade5", "name", "Unidade-5", "operacao", "Compra", "montante", "500,00","contraparte", "COPEL COM I5", "preco", "234,67", "valorNF", "38.257,15" ], - [ "value", "unidade6", "name", "Unidade-6", "operacao", "Compra", "montante", "300,00", "contraparte", "COPEL COM I5", "preco","234,67", "valorNF", "965,95" ] - ]; - - const [month, setMonth] = React.useState(''); - const [unidade, setUnidade] = React.useState(''); - - const handleChangeMonth = (event: SelectChangeEvent) => { - setMonth(event.target.value); - }; - const handleChangeUnidade = (event: SelectChangeEvent) => { - setUnidade(event.target.value); - }; - - return( - <> - - - - Smart Energia - Resumo de Operação - - - -

        Seletor Mês

        -
        - - Unidades - - - - - Mês - - -
        - -
        - - - - - - -
        - console.log()}/> -         - - - - - - - - - - - - - { - data.unidades.filter((value, index)=> value.value.includes(unidade)).map((value, index) => { - if (index%2===0) { - return - - - - - - - - } else { - return - - - - - - - - } - }) - } - -
        Unidade OperaçãoMontante (MWh)ContrapartePreço(R$/MWh)ValorNF/Crédito(R$)
        {value.name}{value.operacao}{value.montante}{value.contraparte}{value.preco}{value.valorNF}
        {value.name}{value.operacao}{value.montante}{value.contraparte}{value.preco}{value.valorNF}
        -
        - - {/* */} - {/* */} - {/* */} - - - console.log()}/> - - -
        - -         - - ) -} diff --git a/src/pages/administrative/telemetria/index.tsx b/src/pages/administrative/telemetria/index.tsx deleted file mode 100644 index f1e77c1..0000000 --- a/src/pages/administrative/telemetria/index.tsx +++ /dev/null @@ -1,195 +0,0 @@ -import Button from '@material-ui/core/Button'; -import FormControl from '@mui/material/FormControl'; -import InputLabel from '@mui/material/InputLabel'; -import MenuItem from '@mui/material/MenuItem'; -import Select, { SelectChangeEvent } from '@mui/material/Select'; -import Head from 'next/head'; -import Link from 'next/link'; -import { useRouter } from 'next/router' -import { start } from 'nprogress'; -import React from 'react'; - -import AdministrativeHeader from '../../../components/administrativeHeader/AdministrativeHeader'; -import Banner from '../../../components/banner/Banner'; -import GradientButton from '../../../components/buttons/gradientButton/GradientButton' -import LineChart from '../../../components/graph/LineChart'; -import Header from '../../../components/header/Header'; -import { FatorPotencia } from '../../../services/fatorPotencia'; -import { Buttons, TelemetriaView, Uploads } from '../../../styles/layouts/Telemetria/TelemetriaView'; -import RenderIf from '../../../utils/renderIf'; - -export default function index() { - const [unity, setUnity] = React.useState(''); - const [startDate, setStartDate] = React.useState(''); - const [endDate, setEndDate] = React.useState(''); - const [discretization, setDiscretization] = React.useState(''); - - const [showChart, setShowChart] = React.useState(false); - - const handleChange = (event: SelectChangeEvent) => { - // setAge(event.target.value); - }; - - return( - <> - - - - Smart Energia - Telemetria - - - -
        -
        -

        Unidade

        - - Unidade - - -
        - -
        -

        Data inicial

        - - Data Inicial - - -
        - -
        -

        Data Final

        - - Data Final - - -
        - -
        -

        Discretização

        - - Discretização - - -
        -
        - - - - - - - - - setShowChart(!showChart)} green /> - - - - - - -

        - - Fonte: Dados coletados do Sistema de Coleta de Dados - de Energia - SCDE da Câmara de Comercialização
        - Energia Elétrica – CCEE, sendo que as quantidades aqui - informadas são de responsabilidade
        do agente de - medição - Distribuidora. -         -

        -         - - ) -} diff --git a/src/styles/layouts/clients/ClientsView.ts b/src/styles/layouts/clients/ClientsView.ts index 63f98aa..4d61b0b 100644 --- a/src/styles/layouts/clients/ClientsView.ts +++ b/src/styles/layouts/clients/ClientsView.ts @@ -62,17 +62,3 @@ export const ClientsModalView = styled.main` margin-top: 70px } ` - -export const ConfirmModalView = styled.main` - display: flex; - align-items: center; - justify-content: space-around; - - margin: 0; - padding: 0; - - width: 100%; - height: 100%; - - -` diff --git a/src/styles/layouts/modals/confirmModalView.ts b/src/styles/layouts/modals/confirmModalView.ts new file mode 100644 index 0000000..b3cea70 --- /dev/null +++ b/src/styles/layouts/modals/confirmModalView.ts @@ -0,0 +1,13 @@ +import styled from "styled-components"; + +export const ConfirmModalView = styled.main` + display: flex; + align-items: center; + justify-content: space-around; + + margin: 0; + padding: 0; + + width: 100%; + height: 100%; +` From 352c6224601ae5bf484bed8615e905538dd8b0e6 Mon Sep 17 00:00:00 2001 From: Alex Santos Date: Wed, 15 Jun 2022 15:58:49 -0300 Subject: [PATCH 16/18] update notificate --- .../NotificationQuestionsCard.tsx | 29 ++++++++++ .../NotificationQuestionsCardView.ts | 45 +++++++++++++++ .../faqQuestionsCard/FaqQuestionsCard.tsx | 1 + src/pages/notifications.tsx | 55 +++++++++++++++---- 4 files changed, 118 insertions(+), 12 deletions(-) create mode 100644 src/components/NotificationQuestionsCard/NotificationQuestionsCard.tsx create mode 100644 src/components/NotificationQuestionsCard/NotificationQuestionsCardView.ts diff --git a/src/components/NotificationQuestionsCard/NotificationQuestionsCard.tsx b/src/components/NotificationQuestionsCard/NotificationQuestionsCard.tsx new file mode 100644 index 0000000..b2e4438 --- /dev/null +++ b/src/components/NotificationQuestionsCard/NotificationQuestionsCard.tsx @@ -0,0 +1,29 @@ +import React, { useState } from 'react' +import Image from 'next/image' +import getAPIClient from '../../services/ssrApi'; +import { FaqQuestionsCardBody, FaqQuestionsCardHeader, CommonQuestionsCardView } from './NotificationQuestionsCardView' + +interface CommonsQuestionsCardInterface { + title: string, + body: string, + +} + +export default function NotificationQuestionsCard({title, body}: CommonsQuestionsCardInterface) { + const [ showCardBody, setShowCardBody ] = useState(false) + return ( + + + +

        {title}

        + setShowCardBody(!showCardBody)} /> +         + + +

        + {body} +

        +         +         + ) +} diff --git a/src/components/NotificationQuestionsCard/NotificationQuestionsCardView.ts b/src/components/NotificationQuestionsCard/NotificationQuestionsCardView.ts new file mode 100644 index 0000000..91d16dd --- /dev/null +++ b/src/components/NotificationQuestionsCard/NotificationQuestionsCardView.ts @@ -0,0 +1,45 @@ +import styled from "styled-components"; + +export const CommonQuestionsCardView = styled.article` +` + +export const FaqQuestionsCardHeader = styled.div` + display: flex; + justify-content: space-between; + align-items: center; + + flex-direction: row; + + margin-top: 53px; + + width: 100%; + + img { + cursor: pointer; + } +` +interface CardBodyInterface { + showCardBody: boolean; +} +export const FaqQuestionsCardBody = styled.div` + display: ${props => props.showCardBody? 'flex' : 'none'}; + + margin-bottom: 20px; + + p { + font-weight: 400; + font-size: 99%; + + letter-spacing: 0.5px; + + color: rgba(0, 0, 0, 0.6); + + text-align: left; + } + + @media (max-width: 1008px) { + p { + text-align: left; + } + } +` diff --git a/src/components/faqQuestionsCard/FaqQuestionsCard.tsx b/src/components/faqQuestionsCard/FaqQuestionsCard.tsx index 730fd19..5ceda20 100644 --- a/src/components/faqQuestionsCard/FaqQuestionsCard.tsx +++ b/src/components/faqQuestionsCard/FaqQuestionsCard.tsx @@ -6,6 +6,7 @@ import { FaqQuestionsCardBody, FaqQuestionsCardHeader, CommonQuestionsCardView } interface CommonsQuestionsCardInterface { question: string, answer: string, + } export default function CommonsQuestionsCard({question, answer}: CommonsQuestionsCardInterface) { diff --git a/src/pages/notifications.tsx b/src/pages/notifications.tsx index 64c81d6..2c1e8f7 100644 --- a/src/pages/notifications.tsx +++ b/src/pages/notifications.tsx @@ -1,11 +1,15 @@ +import { GetServerSideProps } from 'next' import Head from 'next/head' +import { parseCookies } from 'nookies' import React from 'react' -import CommonQuestionsCard from '../components/faqQuestionsCard/FaqQuestionsCard' +import NotificationQuestionsCard from '../components/NotificationQuestionsCard/NotificationQuestionsCard' 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' -export default function Notifications() { +export default function Notifications({notificationData}: any) { return ( @@ -15,17 +19,44 @@ export default function Notifications() {

        Lorem ipsum dolor sit amet, consectetur adipiscing elit.

        - -
        - -
        - -
        - -
        - -
        + { + notificationData.map((value, index ) => { + return <> + +
        + + }) + }
        ) } +export const getServerSideProps: GetServerSideProps = async (ctx) => { + const apiClient = getAPIClient(ctx) + const { ['@smartAuth-token']: token } = parseCookies(ctx) + console.log('teste') + let notificationData = []; + + +await apiClient.get('/notification').then(res => { + notificationData = res.data +}).catch(res => { + console.log(res) +}) + console.table(notificationData); + + if (!token) { + return { + redirect: { + destination: '/', + permanent: false + } + } + } + + return { + props: { + notificationData + } + } +} From 6ee7e2a3756a6f748111a833a64f57fdf4ca544c Mon Sep 17 00:00:00 2001 From: joseCorte-exe Date: Wed, 15 Jun 2022 16:11:52 -0300 Subject: [PATCH 17/18] preparing to release --- src/components/administrativeTables/NotificationsTable.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/administrativeTables/NotificationsTable.tsx b/src/components/administrativeTables/NotificationsTable.tsx index 284f730..084ff35 100644 --- a/src/components/administrativeTables/NotificationsTable.tsx +++ b/src/components/administrativeTables/NotificationsTable.tsx @@ -179,7 +179,7 @@ interface NotificationData { } interface NotificationsTableInterface{ - notifications: NotificationData[], + notifications: any, onChange: any } From d92285afe5df2ad3a82155d5cbec96e272c54bc1 Mon Sep 17 00:00:00 2001 From: joseCorte-exe Date: Wed, 15 Jun 2022 16:18:05 -0300 Subject: [PATCH 18/18] preparing to deploy --- src/pages/administrative/clients.tsx | 12 +++++++++++- src/pages/resumoOperacao.tsx | 8 +------- 2 files changed, 12 insertions(+), 8 deletions(-) diff --git a/src/pages/administrative/clients.tsx b/src/pages/administrative/clients.tsx index e130a9a..7d75f8c 100644 --- a/src/pages/administrative/clients.tsx +++ b/src/pages/administrative/clients.tsx @@ -17,6 +17,7 @@ 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'; const style = { position: 'absolute' as const, @@ -40,12 +41,21 @@ export default function clients() { const [openModal, setOpenModal] = useState(false) + function handleCreateClient() { + api.post('', { + "name": "Teste3", + "email": "teste3@gmail.com", + "password": "password", + "password_confirmation": "password", + "client_id": 222 + }) + } + return (
        - {/* */}
        diff --git a/src/pages/resumoOperacao.tsx b/src/pages/resumoOperacao.tsx index bda8741..a64cb7b 100644 --- a/src/pages/resumoOperacao.tsx +++ b/src/pages/resumoOperacao.tsx @@ -144,15 +144,9 @@ export default function ResumoOperacao() {
        - {/* */} - {/* */} - {/* */} - - + console.log()}/>