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 1497742..a76685f 100644 --- a/src/pages/administrative/clients.tsx +++ b/src/pages/administrative/clients.tsx @@ -6,10 +6,14 @@ import Typography from '@mui/material/Typography'; import BasicButton from '../../components/buttons/basicButton/BasicButton' import Modal from '@mui/material/Modal'; import PageTitle from '../../components/pageTitle/PageTitle' -import { ClientsModalView, ClientsView } from '../../styles/layouts/clients/ClientsView' +import { 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'; +import AdministrativeHeader from '../../components/administrativeHeader/AdministrativeHeader'; +import ClientsTable from '../../components/administrativeTables/ClientsTable'; + +import ConfirmModal from '../../components/modal/ConfirmModal'; const style = { position: 'absolute' as const, @@ -33,20 +37,38 @@ export default function clients() { const handleClose = () => setOpen(false); 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 ( - <> +
+ - -
- - -
- - {/* */} + {/* */} +
+ + +

- - - - - +
+ {/* */} + +
+ {/* {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 3b8f8eb..05c0084 100644 --- a/src/pages/administrative/faq/index.tsx +++ b/src/pages/administrative/faq/index.tsx @@ -7,14 +7,23 @@ 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 PageTitle from '../../../components/pageTitle/PageTitle' + import FaqButton1 from '../../../components/buttons/faqButton/FaqButton1'; import FaqButton2 from '../../../components/buttons/faqButton/FaqButton2'; -import CommonQuestionsCard from '../../../components/faqQuestionsCard/FaqQuestionsCard' + +import TextField from '@mui/material/TextField'; +import Head from 'next/head' + + + +import FaqTable from '../../../components/administrativeTables/FaqTable'; +import BasicButton from '../../../components/buttons/basicButton/BasicButton'; +import Header from '../../../components/header/Header' +import { FaqView } from '../../../styles/layouts/commonQuestions/FaqView' -import { FaqView } from './faqView' const style = { position: 'absolute' as const, @@ -38,18 +47,21 @@ export default function Sidebar() { const handleClose = () => setOpen(false); - return ( - -
-

Adicionar/Editar Pergunta

- - Adicionar/Editar Pergunta - -
-
- + return ( + <> + + +
+ + + + + +
+ +
- + + ) } 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 index 89daf0e..6e12862 100644 --- a/src/pages/administrative/notification/index.tsx +++ b/src/pages/administrative/notification/index.tsx @@ -1,6 +1,6 @@ import Head from 'next/head' import React from 'react' -import CommonQuestionsCard from '../../../components/faqQuestionsCard/FaqQuestionsCard' + import Header from '../../../components/header/Header' import { NotificationView } from './notificationView' import BasicButton from '../../../components/buttons/basicButton/BasicButton'; @@ -11,6 +11,7 @@ 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 PageTitle from '../../../components/pageTitle/PageTitle' import Typography from '@mui/material/Typography'; import Modal from '@mui/material/Modal'; @@ -52,12 +53,12 @@ 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/notificationView.ts b/src/pages/administrative/notification/notificationView.ts index f4ae876..a9ce8de 100644 --- a/src/pages/administrative/notification/notificationView.ts +++ b/src/pages/administrative/notification/notificationView.ts @@ -3,58 +3,74 @@ import styled from 'styled-components' export const NotificationView = styled.nav` + display: flex; + align-items: center; + + flex-direction: column; + + width: 100%; + + h1 { + font-weight: 700; + font-size: calc(90% + 2rem); + line-height: 72px; + text-align: center; + letter-spacing: 0.5px; + } + + p { + font-weight: 400; + font-size: 99.98%; + line-height: 21px; + text-align: center; + letter-spacing: 0.5px; + + color: #AAAAAA; + } + + .CommonQuestionsSection { + width: 80%; + } + + hr { + border: 1px solid #DDDDDD; + } + + /* .modal{ display: flex; - align-items: center; - flex-direction: column; - width: 100%; + justify-self: flex-end; + align-self: center; + margin-left: 100px; - - .btn{ + } */ + .btn2{ background: #254F7F; border-radius: 8px; color: white; width: 164px; - height: 40px; + height: 45px; border: none; - - } - .btn2{ - background: #FFBC10; + margin-top: 10px; + } + .btn1{ + background:#FFBC10; border-radius: 8px; color: white; width: 164px; - height: 40px; + height: 45px; 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{ + margin-top: 10px; + margin-left: 6px; + } + .buttons{ display: flex; - justify-content: center; - align-items: center; - margin-left: 100px; - } */ - .text1{ - margin-left: 70px; - } - .header{ - margin-top: 8px; + justify-content: flex-start; + align-self: flex-start; + margin-top: 45px; + } + + ` 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..4258102 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,62 @@ export const ClientsView = styled.main` } :last-child { - width: 50rem; - height: 30rem; + width: 100%; } } + .btn2{ + background: #254F7F; + border-radius: 8px; + color: white; + width: 164px; + height: 48px; + border: none; + margin-top: 10px; + } + .btn1{ + background:#FFBC10; + border-radius: 8px; + color: white; + width: 164px; + height: 48px; + border: none; + margin-top: 10px; + margin-left: 4px; + } + .buttons{ + display: flex; + + } ` export const ClientsModalView = styled.main` - display: grid; + display: flex; + flex-direction: column; + + 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%; + - grid-template-columns: 100% 100%; - grid-template-rows: 100% 100% 100% 100%; ` diff --git a/src/styles/layouts/clientsAdmin/clientsAdminView.ts b/src/styles/layouts/clientsAdmin/clientsAdminView.ts new file mode 100644 index 0000000..f4ae876 --- /dev/null +++ b/src/styles/layouts/clientsAdmin/clientsAdminView.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 c78db7d..b4975b6 100644 --- a/src/styles/layouts/commonQuestions/FaqView.ts +++ b/src/styles/layouts/commonQuestions/FaqView.ts @@ -41,6 +41,32 @@ export const FaqView = styled.main` margin-left: 100px; } */ + .btn2{ + background: #254F7F; + border-radius: 8px; + color: white; + width: 164px; + height: 45px; + border: none; + margin-top: 10px; + } + .btn1{ + background:#FFBC10; + border-radius: 8px; + color: white; + width: 164px; + height: 45px; + border: none; + margin-top: 10px; + margin-left: 6px; + } + .buttons{ + display: flex; + justify-content: flex-start; + align-self: flex-start; + margin-top: 45px; + + } ` 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; + } `