update modal
This commit is contained in:
Alex Santos
commit
751953f0e2
74
src/components/administrativeHeader/AdministrativeHeader.tsx
Normal file
74
src/components/administrativeHeader/AdministrativeHeader.tsx
Normal file
@ -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 (
|
||||
<AdministrativeHeaderView>
|
||||
<section>
|
||||
<TextField
|
||||
id="outlined-textarea"
|
||||
label="Encontre na Página"
|
||||
placeholder="Encontre na Página"
|
||||
multiline
|
||||
fullWidth
|
||||
/>
|
||||
</section>
|
||||
<section>
|
||||
<FormControl sx={{mr: '20px', minWidth: 180, minHeight: '80px'}}>
|
||||
<Select
|
||||
value={unity}
|
||||
onChange={handleChange}
|
||||
displayEmpty
|
||||
inputProps={{ 'aria-label': 'Without label' }}
|
||||
>
|
||||
<MenuItem value="">Administrativo</MenuItem>
|
||||
<MenuItem value={10}>Copel</MenuItem>
|
||||
<MenuItem value={20}>Cliente 1</MenuItem>
|
||||
<MenuItem value={30}>Cliente 2</MenuItem>
|
||||
</Select>
|
||||
</FormControl>
|
||||
<Avatar {...stringAvatar('José Corte')} />
|
||||
</section>
|
||||
</AdministrativeHeaderView>
|
||||
)
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
`
|
||||
325
src/components/administrativeTables/ClientsTable.tsx
Normal file
325
src/components/administrativeTables/ClientsTable.tsx
Normal file
@ -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<T>(a: T, b: T, orderBy: keyof T) {
|
||||
if (b[orderBy] < a[orderBy]) {
|
||||
return -1;
|
||||
}
|
||||
if (b[orderBy] > a[orderBy]) {
|
||||
return 1;
|
||||
}
|
||||
return 0;
|
||||
}
|
||||
|
||||
type Order = 'asc' | 'desc';
|
||||
|
||||
function getComparator<Key extends keyof any>(
|
||||
order: Order,
|
||||
orderBy: Key,
|
||||
): (
|
||||
a: { [key in Key]: 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<T>(array: readonly T[], comparator: (a: T, b: T) => number) {
|
||||
const stabilizedThis = array.map((el, index) => [el, index] as [T, number]);
|
||||
stabilizedThis.sort((a, b) => {
|
||||
const order = comparator(a[0], b[0]);
|
||||
if (order !== 0) {
|
||||
return order;
|
||||
}
|
||||
return a[1] - b[1];
|
||||
});
|
||||
return stabilizedThis.map((el) => el[0]);
|
||||
}
|
||||
|
||||
interface HeadCell {
|
||||
disablePadding: boolean;
|
||||
id: keyof Data | string;
|
||||
label: string;
|
||||
numeric: boolean;
|
||||
}
|
||||
|
||||
const headCells: readonly HeadCell[] = [
|
||||
{
|
||||
id: '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<unknown>, property: keyof Data) => void;
|
||||
onSelectAllClick: (event: React.ChangeEvent<HTMLInputElement>) => void;
|
||||
order: Order;
|
||||
orderBy: string;
|
||||
rowCount: number;
|
||||
}
|
||||
|
||||
function EnhancedTableHead(props: EnhancedTableProps) {
|
||||
const { onSelectAllClick, order, orderBy, numSelected, rowCount, onRequestSort } =
|
||||
props;
|
||||
const createSortHandler =
|
||||
(property: keyof Data) => (event: React.MouseEvent<unknown>) => {
|
||||
onRequestSort(event, property);
|
||||
};
|
||||
|
||||
return (
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<TableCell padding="checkbox">
|
||||
<Checkbox
|
||||
color="primary"
|
||||
indeterminate={numSelected > 0 && numSelected < rowCount}
|
||||
checked={rowCount > 0 && numSelected === rowCount}
|
||||
onChange={onSelectAllClick}
|
||||
inputProps={{
|
||||
'aria-label': 'select all desserts',
|
||||
}}
|
||||
/>
|
||||
</TableCell>
|
||||
{headCells.map((headCell) => (
|
||||
<TableCell
|
||||
key={headCell.id}
|
||||
align='left'
|
||||
padding={headCell.disablePadding ? 'none' : 'normal'}
|
||||
sortDirection={orderBy === headCell.id ? order : false}
|
||||
>
|
||||
<TableSortLabel
|
||||
active={orderBy === headCell.id}
|
||||
direction={orderBy === headCell.id ? order : 'asc'}
|
||||
onClick={createSortHandler(headCell.id)}
|
||||
>
|
||||
{headCell.label}
|
||||
{orderBy === headCell.id ? (
|
||||
<Box component="span" sx={visuallyHidden}>
|
||||
{order === 'desc' ? 'sorted descending' : 'sorted ascending'}
|
||||
</Box>
|
||||
) : null}
|
||||
</TableSortLabel>
|
||||
</TableCell>
|
||||
))}
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
);
|
||||
}
|
||||
|
||||
export default function ClientTable() {
|
||||
const [order, setOrder] = useState<Order>('asc');
|
||||
const [orderBy, setOrderBy] = useState<keyof Data | string>('status');
|
||||
const [selected, setSelected] = useState<readonly string[]>([]);
|
||||
const [page, setPage] = useState<number>(0);
|
||||
const [dense, setDense] = useState<boolean>(false);
|
||||
const [rowsPerPage, setRowsPerPage] = useState<number>(5);
|
||||
|
||||
const handleRequestSort = (
|
||||
event: React.MouseEvent<unknown>,
|
||||
property: keyof Data,
|
||||
) => {
|
||||
const isAsc = orderBy === property && order === 'asc';
|
||||
setOrder(isAsc ? 'desc' : 'asc');
|
||||
setOrderBy(property);
|
||||
};
|
||||
|
||||
const handleSelectAllClick = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
if (event.target.checked) {
|
||||
const newSelecteds = rows.map((n) => n.name);
|
||||
setSelected(newSelecteds);
|
||||
return;
|
||||
}
|
||||
setSelected([]);
|
||||
};
|
||||
|
||||
const handleClick = (event: React.MouseEvent<unknown>, name: string) => {
|
||||
const selectedIndex = selected.indexOf(name);
|
||||
let newSelected: readonly string[] = [];
|
||||
|
||||
if (selectedIndex === -1) {
|
||||
newSelected = newSelected.concat(selected, name);
|
||||
} else if (selectedIndex === 0) {
|
||||
newSelected = newSelected.concat(selected.slice(1));
|
||||
} else if (selectedIndex === selected.length - 1) {
|
||||
newSelected = newSelected.concat(selected.slice(0, -1));
|
||||
} else if (selectedIndex > 0) {
|
||||
newSelected = newSelected.concat(
|
||||
selected.slice(0, selectedIndex),
|
||||
selected.slice(selectedIndex + 1),
|
||||
);
|
||||
}
|
||||
|
||||
setSelected(newSelected);
|
||||
};
|
||||
|
||||
const handleChangePage = (event: unknown, newPage: number) => {
|
||||
setPage(newPage);
|
||||
};
|
||||
|
||||
const handleChangeRowsPerPage = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setRowsPerPage(parseInt(event.target.value, 10));
|
||||
setPage(0);
|
||||
};
|
||||
|
||||
const isSelected = (name: string) => selected.indexOf(name) !== -1;
|
||||
|
||||
// Avoid a layout jump when reaching the last page with empty rows.
|
||||
const emptyRows =
|
||||
page > 0 ? Math.max(0, (1 + page) * rowsPerPage - rows.length) : 0;
|
||||
|
||||
return (
|
||||
<ClientTableView>
|
||||
<Paper sx={{ width: '100%', mb: 2 }}>
|
||||
<TableContainer>
|
||||
<Table
|
||||
sx={{ minWidth: 750 }}
|
||||
aria-labelledby="tableTitle"
|
||||
size={dense ? 'small' : 'medium'}
|
||||
>
|
||||
<EnhancedTableHead
|
||||
numSelected={selected.length}
|
||||
order={order}
|
||||
orderBy={orderBy}
|
||||
onSelectAllClick={handleSelectAllClick}
|
||||
onRequestSort={handleRequestSort}
|
||||
rowCount={rows.length}
|
||||
/>
|
||||
<TableBody>
|
||||
{stableSort(rows, getComparator(order, orderBy))
|
||||
.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
|
||||
.map((row, index) => {
|
||||
const isItemSelected = isSelected(row.clientCode);
|
||||
const labelId = `enhanced-table-checkbox-${index}`;
|
||||
|
||||
return (
|
||||
<TableRow
|
||||
hover
|
||||
onClick={(event) => handleClick(event, row.clientCode)}
|
||||
role="checkbox"
|
||||
aria-checked={isItemSelected}
|
||||
tabIndex={-1}
|
||||
key={row.clientCode}
|
||||
selected={isItemSelected}
|
||||
>
|
||||
<TableCell padding="checkbox">
|
||||
<Checkbox
|
||||
color="primary"
|
||||
checked={isItemSelected}
|
||||
inputProps={{
|
||||
'aria-labelledby': labelId,
|
||||
}}
|
||||
/>
|
||||
</TableCell>
|
||||
<TableCell
|
||||
component="th"
|
||||
id={labelId}
|
||||
scope="row"
|
||||
padding="none"
|
||||
>
|
||||
Unidade - {row.clientCode}
|
||||
</TableCell>
|
||||
<TableCell align="left">{row.name}</TableCell>
|
||||
<TableCell align="left">{row.unity}</TableCell>
|
||||
<TableCell align="left"><StyledStatus status={row.status}>{row.status}</StyledStatus></TableCell>
|
||||
</TableRow>
|
||||
);
|
||||
})}
|
||||
{emptyRows > 0 && (
|
||||
<TableRow
|
||||
style={{
|
||||
height: (dense ? 33 : 53) * emptyRows,
|
||||
}}
|
||||
>
|
||||
<TableCell colSpan={6} />
|
||||
</TableRow>
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
<TablePagination
|
||||
rowsPerPageOptions={[5, 10, 25]}
|
||||
component="div"
|
||||
count={rows.length}
|
||||
rowsPerPage={rowsPerPage}
|
||||
page={page}
|
||||
onPageChange={handleChangePage}
|
||||
onRowsPerPageChange={handleChangeRowsPerPage}
|
||||
/>
|
||||
</Paper>
|
||||
</ClientTableView>
|
||||
);
|
||||
}
|
||||
50
src/components/administrativeTables/ClientsTableView.ts
Normal file
50
src/components/administrativeTables/ClientsTableView.ts
Normal file
@ -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;;
|
||||
`
|
||||
315
src/components/administrativeTables/FaqTable.tsx
Normal file
315
src/components/administrativeTables/FaqTable.tsx
Normal file
@ -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<T>(a: T, b: T, orderBy: keyof T) {
|
||||
if (b[orderBy] < a[orderBy]) {
|
||||
return -1;
|
||||
}
|
||||
if (b[orderBy] > a[orderBy]) {
|
||||
return 1;
|
||||
}
|
||||
return 0;
|
||||
}
|
||||
|
||||
type Order = 'asc' | 'desc';
|
||||
|
||||
function getComparator<Key extends keyof any>(
|
||||
order: Order,
|
||||
orderBy: Key,
|
||||
): (
|
||||
a: { [key in Key]: 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<T>(array: readonly T[], comparator: (a: T, b: T) => number) {
|
||||
const stabilizedThis = array.map((el, index) => [el, index] as [T, number]);
|
||||
stabilizedThis.sort((a, b) => {
|
||||
const order = comparator(a[0], b[0]);
|
||||
if (order !== 0) {
|
||||
return order;
|
||||
}
|
||||
return a[1] - b[1];
|
||||
});
|
||||
return stabilizedThis.map((el) => el[0]);
|
||||
}
|
||||
|
||||
interface HeadCell {
|
||||
disablePadding: boolean;
|
||||
id: keyof Data | string;
|
||||
label: string;
|
||||
numeric: boolean;
|
||||
}
|
||||
|
||||
const headCells: readonly HeadCell[] = [
|
||||
{
|
||||
id: '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<unknown>, property: keyof Data) => void;
|
||||
onSelectAllClick: (event: React.ChangeEvent<HTMLInputElement>) => void;
|
||||
order: Order;
|
||||
orderBy: string;
|
||||
rowCount: number;
|
||||
}
|
||||
|
||||
function EnhancedTableHead(props: EnhancedTableProps) {
|
||||
const { onSelectAllClick, order, orderBy, numSelected, rowCount, onRequestSort } =
|
||||
props;
|
||||
const createSortHandler =
|
||||
(property: keyof Data) => (event: React.MouseEvent<unknown>) => {
|
||||
onRequestSort(event, property);
|
||||
};
|
||||
|
||||
return (
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<TableCell padding="checkbox">
|
||||
<Checkbox
|
||||
color="primary"
|
||||
indeterminate={numSelected > 0 && numSelected < rowCount}
|
||||
checked={rowCount > 0 && numSelected === rowCount}
|
||||
onChange={onSelectAllClick}
|
||||
inputProps={{
|
||||
'aria-label': 'select all desserts',
|
||||
}}
|
||||
/>
|
||||
</TableCell>
|
||||
{headCells.map((headCell) => (
|
||||
<TableCell
|
||||
key={headCell.id}
|
||||
align='left'
|
||||
padding={headCell.disablePadding ? 'none' : 'normal'}
|
||||
sortDirection={orderBy === headCell.id ? order : false}
|
||||
>
|
||||
<TableSortLabel
|
||||
active={orderBy === headCell.id}
|
||||
direction={orderBy === headCell.id ? order : 'asc'}
|
||||
onClick={createSortHandler(headCell.id)}
|
||||
>
|
||||
{headCell.label}
|
||||
{orderBy === headCell.id ? (
|
||||
<Box component="span" sx={visuallyHidden}>
|
||||
{order === 'desc' ? 'sorted descending' : 'sorted ascending'}
|
||||
</Box>
|
||||
) : null}
|
||||
</TableSortLabel>
|
||||
</TableCell>
|
||||
))}
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
);
|
||||
}
|
||||
|
||||
export default function ClientTable() {
|
||||
const [order, setOrder] = useState<Order>('asc');
|
||||
const [orderBy, setOrderBy] = useState<keyof Data | string>('status');
|
||||
const [selected, setSelected] = useState<readonly string[]>([]);
|
||||
const [page, setPage] = useState<number>(0);
|
||||
const [dense, setDense] = useState<boolean>(false);
|
||||
const [rowsPerPage, setRowsPerPage] = useState<number>(5);
|
||||
|
||||
const handleRequestSort = (
|
||||
event: React.MouseEvent<unknown>,
|
||||
property: keyof Data,
|
||||
) => {
|
||||
const isAsc = orderBy === property && order === 'asc';
|
||||
setOrder(isAsc ? 'desc' : 'asc');
|
||||
setOrderBy(property);
|
||||
};
|
||||
|
||||
const handleSelectAllClick = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
if (event.target.checked) {
|
||||
const newSelecteds = rows.map((n) => n.name);
|
||||
setSelected(newSelecteds);
|
||||
return;
|
||||
}
|
||||
setSelected([]);
|
||||
};
|
||||
|
||||
const handleClick = (event: React.MouseEvent<unknown>, name: string) => {
|
||||
const selectedIndex = selected.indexOf(name);
|
||||
let newSelected: readonly string[] = [];
|
||||
|
||||
if (selectedIndex === -1) {
|
||||
newSelected = newSelected.concat(selected, name);
|
||||
} else if (selectedIndex === 0) {
|
||||
newSelected = newSelected.concat(selected.slice(1));
|
||||
} else if (selectedIndex === selected.length - 1) {
|
||||
newSelected = newSelected.concat(selected.slice(0, -1));
|
||||
} else if (selectedIndex > 0) {
|
||||
newSelected = newSelected.concat(
|
||||
selected.slice(0, selectedIndex),
|
||||
selected.slice(selectedIndex + 1),
|
||||
);
|
||||
}
|
||||
|
||||
setSelected(newSelected);
|
||||
};
|
||||
|
||||
const handleChangePage = (event: unknown, newPage: number) => {
|
||||
setPage(newPage);
|
||||
};
|
||||
|
||||
const handleChangeRowsPerPage = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setRowsPerPage(parseInt(event.target.value, 10));
|
||||
setPage(0);
|
||||
};
|
||||
|
||||
const isSelected = (name: string) => selected.indexOf(name) !== -1;
|
||||
|
||||
// Avoid a layout jump when reaching the last page with empty rows.
|
||||
const emptyRows =
|
||||
page > 0 ? Math.max(0, (1 + page) * rowsPerPage - rows.length) : 0;
|
||||
|
||||
return (
|
||||
<ClientTableView>
|
||||
<Paper sx={{ width: '100%', mb: 2 }}>
|
||||
<TableContainer>
|
||||
<Table
|
||||
sx={{ minWidth: 750 }}
|
||||
aria-labelledby="tableTitle"
|
||||
size={dense ? 'small' : 'medium'}
|
||||
>
|
||||
<EnhancedTableHead
|
||||
numSelected={selected.length}
|
||||
order={order}
|
||||
orderBy={orderBy}
|
||||
onSelectAllClick={handleSelectAllClick}
|
||||
onRequestSort={handleRequestSort}
|
||||
rowCount={rows.length}
|
||||
/>
|
||||
<TableBody>
|
||||
{stableSort(rows, getComparator(order, orderBy))
|
||||
.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
|
||||
.map((row, index) => {
|
||||
const isItemSelected = isSelected(row.question);
|
||||
const labelId = `enhanced-table-checkbox-${index}`;
|
||||
|
||||
return (
|
||||
<TableRow
|
||||
hover
|
||||
onClick={(event) => handleClick(event, row.question)}
|
||||
role="checkbox"
|
||||
aria-checked={isItemSelected}
|
||||
tabIndex={-1}
|
||||
key={row.question}
|
||||
selected={isItemSelected}
|
||||
>
|
||||
<TableCell padding="checkbox">
|
||||
<Checkbox
|
||||
color="primary"
|
||||
checked={isItemSelected}
|
||||
inputProps={{
|
||||
'aria-labelledby': labelId,
|
||||
}}
|
||||
/>
|
||||
</TableCell>
|
||||
<TableCell
|
||||
component="th"
|
||||
id={labelId}
|
||||
scope="row"
|
||||
padding="none"
|
||||
>
|
||||
{row.question}
|
||||
</TableCell>
|
||||
<TableCell align="left">{row.answer}</TableCell>
|
||||
<TableCell align="left"><StyledStatus status={row.status}>{row.status}</StyledStatus></TableCell>
|
||||
</TableRow>
|
||||
);
|
||||
})}
|
||||
{emptyRows > 0 && (
|
||||
<TableRow
|
||||
style={{
|
||||
height: (dense ? 33 : 53) * emptyRows,
|
||||
}}
|
||||
>
|
||||
<TableCell colSpan={6} />
|
||||
</TableRow>
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
<TablePagination
|
||||
rowsPerPageOptions={[5, 10, 25]}
|
||||
component="div"
|
||||
count={rows.length}
|
||||
rowsPerPage={rowsPerPage}
|
||||
page={page}
|
||||
onPageChange={handleChangePage}
|
||||
onRowsPerPageChange={handleChangeRowsPerPage}
|
||||
/>
|
||||
</Paper>
|
||||
</ClientTableView>
|
||||
);
|
||||
}
|
||||
50
src/components/modal/ConfirmModal.tsx
Normal file
50
src/components/modal/ConfirmModal.tsx
Normal file
@ -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 (
|
||||
<Modal
|
||||
open={openState}
|
||||
onClose={handleClose}
|
||||
aria-labelledby="modal-modal-title"
|
||||
aria-describedby="modal-modal-description"
|
||||
>
|
||||
<Box sx={style}>
|
||||
{children}
|
||||
</Box>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
@ -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)}
|
||||
|
||||
@ -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,11 +34,67 @@ export default function Sidebar() {
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
const user = {
|
||||
role: 'admin'
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
setViewModal(false)
|
||||
}, [router.pathname])
|
||||
|
||||
return (
|
||||
<>
|
||||
<RenderIf isTrue={user.role === 'admin'}>
|
||||
<SidebarView economiaDrawer={economiaDrawer} modalOpen={viewModal} >
|
||||
<div className='hamburger' onClick={() => setViewModal(!viewModal)} >
|
||||
<Image src='/assets/hamburgerModal.svg' width={60} height={60} />
|
||||
</div>
|
||||
<div className='imageNext'>
|
||||
<Image src='/assets/logo.svg' width={100} height={100} />
|
||||
</div>
|
||||
<ul>
|
||||
<Link href='/administrative/dashboard'><li className={router.pathname=='/dashboard'? 'actualPath' : null} ><Image src='/assets/sidebar/dashboardIcon.svg' width={25} height={25} />{'Visão Geral'}</li></Link>
|
||||
{/* <li onClick={() => setEconomiaDrawer(!economiaDrawer)} className={router.pathname=='/grossSavings' || router.pathname=='/accumulatedSavings' || router.pathname=='/estimatedCost' || router.pathname=='/costIndicator' ? 'actualPath' : null } ><Image src='/assets/sidebar/economyIcon.svg' width={25} height={25} />{'Economia >'}</li>
|
||||
<div className='economiaDrawer drawer' >
|
||||
<Link href='/administrative/grossSavings'><li className={router.pathname=='/grossSavings'? 'actualPathDrawer' : null}>Economia Bruta</li></Link>
|
||||
<Link href='/administrative/accumulatedSavings'><li className={router.pathname=='/accumulatedSavings'? 'actualPathDrawer' : null}>Economia Acumulada</li></Link>
|
||||
<Link href='/administrative/estimatedCost'><li className={router.pathname=='/estimatedCost'? 'actualPathDrawer' : null}>Custo Estimado</li></Link>
|
||||
<Link href='/administrative/costIndicator'><li className={router.pathname=='/costIndicator'? 'actualPathDrawer' : null}>Custo R/MWh</li></Link>
|
||||
</div> */}
|
||||
<Link href='/administrative/clients'><li className={router.pathname=='/administrative/clients' ? 'actualPath' : null } ><Image src='/assets/sidebar/economyIcon.svg' width={25} height={25} />{'Clientes >'}</li></Link>
|
||||
<Link href='/administrative/faq'><li className={router.pathname=='/administrative/faq' ? 'actualPath' : null } ><Image src='/assets/sidebar/saqIcon.svg' width={25} height={25} />{'FAQ >'}</li></Link>
|
||||
{/* <Link href='/administrative/telemetria'><li className={router.pathname=='/telemetria'? 'actualPath' : null}><Image src='/assets/sidebar/telemetryIcon.svg' width={25} height={25} />{'Telemetria >'}</li></Link>
|
||||
<Link href='/administrative/resumoOperacao'><li className={router.pathname=='/resumoOperacao'? 'actualPath' : null} ><Image src='/assets/sidebar/summaryOperationsIcon.svg' width={25} height={25} />{'Resumo de Op. '}</li></Link>
|
||||
<Link href='/administrative/news'><li className={router.pathname=='/news'? 'actualPath' : null}><Image src='/assets/sidebar/newsIcon.svg' width={25} height={25} />{'Notícias >'}</li></Link>
|
||||
<Link href='/administrative/pld'><li className={router.pathname=='/pld'? 'actualPath' : null}><Image src='/assets/sidebar/newsIcon.svg' width={25} height={25} />{'PLD >'}</li></Link>
|
||||
<Link href='/administrative/industryInfo'><li className={router.pathname=='/industryInfo'? 'actualPath' : null}><Image src='/assets/sidebar/sectorialInfoIcon.svg' width={25} height={25} />{'Info Setorial >'}</li></Link>
|
||||
<Link href='/consumption'><li className={router.pathname=='/consumption'? 'actualPath' : null} ><Image src='/assets/sidebar/consumptionIcon.svg' width={25} height={25} />{'Consumo'}</li></Link>
|
||||
<Link href='/administrative/notifications'><li className={router.pathname=='/notifications'? 'actualPath' : null}><Image src='/assets/sidebar/notificationsIcon.svg' width={25} height={25} />{'Notificações >'}<div className='notification'><p>25</p></div></li></Link>
|
||||
<Link href='/administrative/aboutUs'><li className={router.pathname=='/aboutUs'? 'actualPath' : null}><Image src='/assets/sidebar/aboutUs.svg' width={25} height={25} />{'Sobre Nós >'}</li></Link>
|
||||
<Link href='/administrative/faq'><li className={router.pathname=='/faq'? 'actualPath' : null}><Image src='/assets/sidebar/saqIcon.svg' width={25} height={25} />{'FAQ >'}</li></Link> */}
|
||||
<button onClick={handleOpen}><Image src='/assets/logout.svg' width={25} height={25} />{'Sair'}</button>
|
||||
<Modal
|
||||
open={open}
|
||||
onClose={handleClose}
|
||||
aria-labelledby="modal-modal-title"
|
||||
aria-describedby="modal-modal-description"
|
||||
>
|
||||
<Box sx={style}>
|
||||
<Typography id="modal-modal-title" variant="h6" component="h2">
|
||||
Deseja realmente sair ?
|
||||
</Typography>
|
||||
<Link href='/'><Button variant="contained" sx={{mt:5}}>Sim</Button></Link>
|
||||
<Button variant="contained" onClick={handleClose} color="error" sx={{mt:5 ,ml:1}}>Não</Button>
|
||||
</Box>
|
||||
</Modal>
|
||||
</ul>
|
||||
<aside>
|
||||
<p>Nossos Gerentes estão prontos para atendê-los</p>
|
||||
<div><h3>+55(41) 3012-5900</h3></div>
|
||||
</aside>
|
||||
</SidebarView>
|
||||
</RenderIf>
|
||||
<RenderIf isTrue={user.role === 'client'}>
|
||||
<SidebarView economiaDrawer={economiaDrawer} modalOpen={viewModal} >
|
||||
<div className='hamburger' onClick={() => setViewModal(!viewModal)} >
|
||||
<Image src='/assets/hamburgerModal.svg' width={60} height={60} />
|
||||
@ -86,5 +141,7 @@ export default function Sidebar() {
|
||||
<div><h3>+55(41) 3012-5900</h3></div>
|
||||
</aside>
|
||||
</SidebarView>
|
||||
</RenderIf>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
@ -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() {
|
||||
<Header name='' />
|
||||
<PageTitle title='Economia Acumulada' subtitle='Economia Bruta Estimada e Acumulada anual (Valores em R$ mil)' />
|
||||
<section>
|
||||
<SingleBar title='Economia Bruta Estimada e Acumulada' subtitle='(Valores em R$ mil)' dataset='Consolidada' dataset1='Estimada' label={EconomiaAcumulada.label} dataProps={EconomiaAcumulada.data2} barLabel month/>
|
||||
<SingleBar title='Economia Bruta Estimada e Acumulada' subtitle='(Valores em R$ mil)' dataset='Consolidada'
|
||||
dataset1='Estimada' label={EconomiaAcumulada.label} dataProps={EconomiaAcumulada.data2} barLabel month/>
|
||||
</section>
|
||||
</AccumulatedSavingsView>
|
||||
)
|
||||
|
||||
64
src/pages/administrative/aboutUs/index.tsx
Normal file
64
src/pages/administrative/aboutUs/index.tsx
Normal file
@ -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 (
|
||||
<AboutUsView>
|
||||
<Head>
|
||||
<title>Smart Energia - About Us</title>
|
||||
</Head>
|
||||
<AdministrativeHeader />
|
||||
<Banner title='Quem Somos' subtitle='Soluções inteligentes em Gestão de Energia' imgSource='/assets/banners/aboutUsBanner.png' />
|
||||
<div>
|
||||
<h4>atualizar texto</h4>
|
||||
<TextField
|
||||
id="outlined-textarea"
|
||||
label="Sobre nós"
|
||||
placeholder="Placeholder"
|
||||
multiline
|
||||
fullWidth
|
||||
/>
|
||||
</div>
|
||||
<section>
|
||||
<p>A <strong>SMART ENERGIA</strong> é 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.</p>
|
||||
|
||||
<p>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. </p>
|
||||
|
||||
<p>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.</p>
|
||||
|
||||
<p>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.</p>
|
||||
<ul>
|
||||
<li><Image src='/assets/listIcon.svg' width={25} height={25} />{'Informação'}</li>
|
||||
<li><Image src='/assets/listIcon.svg' width={25} height={25} />{'Economia'}</li>
|
||||
<li><Image src='/assets/listIcon.svg' width={25} height={25} />{'Gestão de Energia'}</li>
|
||||
<li><Image src='/assets/listIcon.svg' width={25} height={25} />{'Imparcialidade'}</li>
|
||||
<li><Image src='/assets/listIcon.svg' width={25} height={25} />{'Previsão de Custos'}</li>
|
||||
<li><Image src='/assets/listIcon.svg' width={25} height={25} />{'Experiência'}</li>
|
||||
<li><Image src='/assets/listIcon.svg' width={25} height={25} />{'Relacionamento'}</li>
|
||||
</ul>
|
||||
|
||||
<article>
|
||||
<aside>
|
||||
<h2>Apoio a projetos sociais</h2>
|
||||
<div>
|
||||
<Image src='/assets/stamps/whiteStamp.png' width={200} height={200} />
|
||||
<Image src='/assets/stamps/blueStamp.png' width={200} height={200} />
|
||||
</div>
|
||||
</aside>
|
||||
</article>
|
||||
</section>
|
||||
</AboutUsView>
|
||||
)
|
||||
}
|
||||
39
src/pages/administrative/accumulatedSavings/index.tsx
Normal file
39
src/pages/administrative/accumulatedSavings/index.tsx
Normal file
@ -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 (
|
||||
<AccumulatedSavingsView>
|
||||
<Head>
|
||||
<title>Smart Energia - Economia Acumulada</title>
|
||||
</Head>
|
||||
<AdministrativeHeader />
|
||||
<PageTitle title='Economia Acumulada' subtitle='Economia Bruta Estimada e Acumulada anual (Valores em R$ mil)' />
|
||||
<Button
|
||||
variant="contained"
|
||||
component="label"
|
||||
style={{width: '300px', margin: '30px'}}
|
||||
>
|
||||
Upload de dados
|
||||
<input
|
||||
type="file"
|
||||
hidden
|
||||
/>
|
||||
</Button>
|
||||
<section>
|
||||
<SingleBar title='Economia Bruta Estimada e Acumulada' subtitle='(Valores em R$ mil)' dataset='Consolidada'
|
||||
dataset1='Estimada' label={EconomiaAcumulada.label} dataProps={EconomiaAcumulada.data2} barLabel month/>
|
||||
</section>
|
||||
</AccumulatedSavingsView>
|
||||
)
|
||||
}
|
||||
@ -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 (
|
||||
<>
|
||||
<div style={{display: 'flex', flexDirection: 'column', width: '100%'}}>
|
||||
<AdministrativeHeader />
|
||||
<ClientsView>
|
||||
<PageTitle title='Clientes' subtitle='Clientes Smart Energia'/>
|
||||
|
||||
<section>
|
||||
<BasicButton title='Adicionar' onClick={handleOpen}/>
|
||||
|
||||
</section>
|
||||
|
||||
{/* <button className='btn2' onClick={handleOpen}>Open modal</button> */}
|
||||
{/* <BasicButton title='Adicionar' onClick={handleOpen}/> */}
|
||||
<div className='buttons'>
|
||||
<button className='btn2' onClick={handleOpen}>Open modal</button>
|
||||
<button className='btn1' onClick={handleOpen}>Inativar</button>
|
||||
</div>
|
||||
<Modal
|
||||
open={open}
|
||||
onClose={handleClose}
|
||||
@ -67,15 +89,50 @@ export default function clients() {
|
||||
<br /><br />
|
||||
<FaqButton1 title='Cancelar' />
|
||||
<FaqButton2 title='Salvar' />
|
||||
|
||||
|
||||
|
||||
</Box>
|
||||
|
||||
</Modal>
|
||||
|
||||
<section>
|
||||
{/* <DataGrid
|
||||
rows={rows}
|
||||
columns={columns}
|
||||
pageSize={6}
|
||||
rowsPerPageOptions={[6]}
|
||||
checkboxSelection
|
||||
/> */}
|
||||
<ClientsTable />
|
||||
</section>
|
||||
</ClientsView>
|
||||
{/* <Modal open={openModal} handleIsClose={(value) => {setOpenModal(value)}}>
|
||||
<ClientsModalView>
|
||||
<PageTitle title='Adicionar Cliente' subtitle='Adicionar Cliente Smart Energia'/>
|
||||
<article>
|
||||
<TextField id="outlined-basic" label="Nome" variant="outlined" style={{width: '90%', marginRight: '20px'}}/>
|
||||
<TextField id="outlined-basic" label="email" variant="outlined" style={{width: '90%', marginRight: '20px'}}/>
|
||||
<TextField id="outlined-basic" label="senha" variant="outlined" style={{width: '90%', marginRight: '20px'}}/>
|
||||
<TextField id="outlined-basic" label="código" variant="outlined" style={{width: '90%', marginRight: '20px'}}/>
|
||||
<BasicButton title='Criar Cliente' onClick={() => console.log()}/>
|
||||
<Button
|
||||
variant="contained"
|
||||
component="label"
|
||||
style={{width: '300px'}}
|
||||
>
|
||||
Logo
|
||||
<input
|
||||
type="file"
|
||||
hidden
|
||||
/>
|
||||
</Button>
|
||||
</article>
|
||||
</ClientsModalView>
|
||||
</Modal> */}
|
||||
|
||||
</>
|
||||
{/* <ConfirmModal open={openModalInativar} handleIsClose={(value) => {setOpenModalInativar(value)}}>
|
||||
<ConfirmModalView>
|
||||
<BasicButton title='Confirmar' onClick={() => setOpenModalInativar(true)}/>
|
||||
<BasicButton title='Cancelar' onClick={() => setOpenModalInativar(true)}/>
|
||||
</ConfirmModalView>
|
||||
</ConfirmModal> */}
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
38
src/pages/administrative/costIndicator/index.tsx
Normal file
38
src/pages/administrative/costIndicator/index.tsx
Normal file
@ -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 (
|
||||
<CostIndicatorView>
|
||||
<Head>
|
||||
<title>Smart Energia - Indicador de Custos</title>
|
||||
</Head>
|
||||
<AdministrativeHeader />
|
||||
<PageTitle title='Indicador de Custo' subtitle='Valores em R$/MWh'/>
|
||||
<Button
|
||||
variant="contained"
|
||||
component="label"
|
||||
style={{width: '300px', margin: '30px'}}
|
||||
>
|
||||
Upload de dados
|
||||
<input
|
||||
type="file"
|
||||
hidden
|
||||
/>
|
||||
</Button>
|
||||
<section>
|
||||
<Chart title='Indicador de Custo' subtitle='(Valores em R$/MWh)' data1={dataEconomiaIndicador.data1} data2={dataEconomiaIndicador.data2} label={dataEconomiaIndicador.labels} barLabel />
|
||||
</section>
|
||||
</CostIndicatorView>
|
||||
)
|
||||
}
|
||||
39
src/pages/administrative/estimatedCost/index.tsx
Normal file
39
src/pages/administrative/estimatedCost/index.tsx
Normal file
@ -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 (
|
||||
<>
|
||||
<Head>
|
||||
<title>Smart Energia - Custos Estimados</title>
|
||||
</Head>
|
||||
<AdministrativeHeader />
|
||||
<EstimatedCostView>
|
||||
<PageTitle title='Custos Estimados' subtitle='Comparativo de Custo Estimado' />
|
||||
<Button
|
||||
variant="contained"
|
||||
component="label"
|
||||
style={{width: '300px', margin: '30px'}}
|
||||
>
|
||||
Upload de dados
|
||||
<input
|
||||
type="file"
|
||||
hidden
|
||||
/>
|
||||
</Button>
|
||||
<section>
|
||||
<LineBarChart data1={ConsumoEstimado.data2} data2={ConsumoEstimado.data} data3={ConsumoEstimado.data1} dataset1="Economia (R$)" dataset2='Cativo' dataset3='Livre' label={ConsumoEstimado.label} title='Custo Estimado' subtitle='' barLabel hashurado />
|
||||
</section>
|
||||
</EstimatedCostView>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@ -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 (
|
||||
<FaqView>
|
||||
<div className='title'>
|
||||
<h1>Adicionar/Editar Pergunta</h1>
|
||||
<Typography sx={{color:'gray', fontSize:12}}variant="h5" gutterBottom component="div">
|
||||
Adicionar/Editar Pergunta
|
||||
</Typography>
|
||||
</div>
|
||||
<div className='buttons'>
|
||||
|
||||
<button className='btn' onClick={handleOpen}>Open modal</button>
|
||||
return (
|
||||
<>
|
||||
|
||||
<FaqView>
|
||||
<Header name=''/>
|
||||
|
||||
<PageTitle title='Perguntas Frequentes' subtitle='Perguntas Frequentes'/>
|
||||
|
||||
|
||||
|
||||
<div className='buttons'>
|
||||
<button className='btn2' onClick={handleOpen}>Open modal</button>
|
||||
<button className='btn1' onClick={handleOpen}>Open modal</button>
|
||||
|
||||
</div>
|
||||
<Modal
|
||||
open={open}
|
||||
@ -71,8 +83,9 @@ export default function Sidebar() {
|
||||
</Box>
|
||||
|
||||
</Modal>
|
||||
|
||||
<FaqTable />
|
||||
|
||||
</FaqView>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
39
src/pages/administrative/grossSavings/index.tsx
Normal file
39
src/pages/administrative/grossSavings/index.tsx
Normal file
@ -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 (
|
||||
<>
|
||||
<Head>
|
||||
<title>Smart Energia - Economia Acumulada</title>
|
||||
</Head>
|
||||
<AdministrativeHeader />
|
||||
<GrossSavingsView>
|
||||
<PageTitle title='Economia Bruta' subtitle='Economia Bruta Estimada e Acumulada anual (Valores em R$ mil)' />
|
||||
<Button
|
||||
variant="contained"
|
||||
component="label"
|
||||
style={{width: '300px', margin: '30px'}}
|
||||
>
|
||||
Upload de dados
|
||||
<input
|
||||
type="file"
|
||||
hidden
|
||||
/>
|
||||
</Button>
|
||||
<section>
|
||||
<SingleBar title='Economia Bruta' subtitle='(Valores em R$ mil)' label={dataEconomiaBruta.labels} dataset='Consolidada' dataset1='Estimada' dataProps={dataEconomiaBruta.data} barLabel year/>
|
||||
</section>
|
||||
</GrossSavingsView>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@ -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 (
|
||||
<div>index</div>
|
||||
<LoginView auth={rota} >
|
||||
<Head>
|
||||
<title>Smart Energia</title>
|
||||
</Head>
|
||||
|
||||
<div>
|
||||
<Image src='/assets/marca1.svg' width={520} height={350} />
|
||||
</div>
|
||||
|
||||
<LoginContainer>
|
||||
<h1>Bem-Vindo</h1>
|
||||
<h2>Estratégias Inteligentes em<br /> Gestão de Energia</h2>
|
||||
|
||||
<TextField id="outlined-basic" sx={{ m: 1, width: '90%' }}label="Login" variant="outlined" />
|
||||
<FormControl sx={{ m: 1, width: '90%' }} variant="outlined">
|
||||
<InputLabel htmlFor="outlined-adornment-password">Password</InputLabel>
|
||||
<OutlinedInput
|
||||
id="outlined-adornment-password"
|
||||
type={values.showPassword ? 'text' : 'password'}
|
||||
value={values.password}
|
||||
onChange={handleChange('password')}
|
||||
endAdornment={
|
||||
<InputAdornment position="end">
|
||||
<IconButton
|
||||
aria-label="toggle password visibility"
|
||||
onClick={handleClickShowPassword}
|
||||
onMouseDown={handleMouseDownPassword}
|
||||
edge="end"
|
||||
>
|
||||
{values.showPassword ? <AiOutlineEye /> : <AiOutlineEyeInvisible />}
|
||||
</IconButton>
|
||||
</InputAdornment>
|
||||
}
|
||||
label="Password"
|
||||
/>
|
||||
</FormControl>
|
||||
<Link href='verifyEmail' >Esqueceu a senha ?</Link>
|
||||
|
||||
<LoginButton title='ENTRAR' link />
|
||||
|
||||
<fieldset className="line">
|
||||
<legend className="text">Ou</legend>
|
||||
</fieldset>
|
||||
|
||||
<p><a href='tel:+55(41) 3012-5900' >+55(41) 3012-5900</a><br/><a href='https://www.energiasmart.com.br' target="_blank" rel="noreferrer" >www.energiasmart.com.br</a></p>
|
||||
|
||||
</LoginContainer>
|
||||
|
||||
</LoginView>
|
||||
)
|
||||
}
|
||||
|
||||
37
src/pages/administrative/industryInfo/index.tsx
Normal file
37
src/pages/administrative/industryInfo/index.tsx
Normal file
@ -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 (
|
||||
<>
|
||||
<Head>
|
||||
<title>Smart Energia - Info de Setor</title>
|
||||
</Head>
|
||||
<AdministrativeHeader />
|
||||
<IndustryInfoView>
|
||||
<div className='title'>
|
||||
<PageTitle title='Info Setorial' subtitle='info setorial' />
|
||||
</div>
|
||||
<Button
|
||||
variant="contained"
|
||||
component="label"
|
||||
style={{width: '300px', margin: '30px'}}
|
||||
>
|
||||
Upload de dados
|
||||
<input
|
||||
type="file"
|
||||
hidden
|
||||
/>
|
||||
</Button>
|
||||
<button>Baixar PDF</button>
|
||||
</IndustryInfoView>
|
||||
</>
|
||||
)
|
||||
}
|
||||
58
src/pages/administrative/news/index.tsx
Normal file
58
src/pages/administrative/news/index.tsx
Normal file
@ -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 (
|
||||
<>
|
||||
<Head>
|
||||
<title>Smart Energia - Noticias</title>
|
||||
</Head>
|
||||
<AdministrativeHeader />
|
||||
<NewsView>
|
||||
<Banner title='Notícias' subtitle='Tudo de importante no setor de energia' imgSource='/assets/banners/news.png' />
|
||||
|
||||
<section>
|
||||
<h2>19 Abril 2022</h2>
|
||||
<strong>ANEEL APROVA REAJUSTE TARIFÁRIO ANUAL DA ENERGISA SERGIPE DE 16,46 % PARA O CONSUMIDOR RESIDENCIAL</strong>
|
||||
<br />
|
||||
<br />
|
||||
<p>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. <br />
|
||||
Os itens que mais impactaram a correção foram os encargos setoriais, os custos de distribuição, a retirada dos componentes financeiros..</p>
|
||||
<Button>
|
||||
<fieldset>
|
||||
<legend> <BasicButton title='Ver Mais...' onClick={() => console.log()}/></legend>
|
||||
</fieldset>
|
||||
</Button>
|
||||
|
||||
<h2>19 Abril 2022</h2>
|
||||
<strong>NEEL APROVA REAJUSTE MÉDIO DE 20,36% NA TARIFA DE ENERGIA NO RN</strong>
|
||||
<br />
|
||||
<br />
|
||||
<p>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. <br />
|
||||
Os itens que mais impactaram a correção foram os encargos setoriais, os custos de distribuição, a retirada dos componentes financeiros..</p>
|
||||
<Button>
|
||||
<fieldset>
|
||||
<legend> <BasicButton title='Ver Mais...' onClick={() => console.log()}/></legend>
|
||||
</fieldset>
|
||||
</Button>
|
||||
|
||||
</section>
|
||||
|
||||
<a href='https://www.energiasmart.com.br/noticias/'
|
||||
target={"_blank"}
|
||||
rel={"noreferrer"}><BasicButton title='Noticias Atualizadas' onClick={() => console.log()}/></a>
|
||||
</NewsView>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@ -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 (
|
||||
<NotificationView>
|
||||
|
||||
<Head>
|
||||
<title>Smart Energia - FAQ</title>
|
||||
</Head>
|
||||
<Header name='' />
|
||||
<h1>Perguntas Frequentes</h1>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
|
||||
|
||||
<PageTitle title='Perguntas Frequentes' subtitle='Perguntas Frequentes'/>
|
||||
|
||||
|
||||
<button className='btn2' onClick={handleOpen}>Open modal</button>
|
||||
|
||||
@ -5,56 +5,72 @@ 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;
|
||||
}
|
||||
|
||||
.btn{
|
||||
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;
|
||||
justify-self: flex-end;
|
||||
align-self: center;
|
||||
margin-left: 100px;
|
||||
|
||||
} */
|
||||
.btn2{
|
||||
background: #254F7F;
|
||||
border-radius: 8px;
|
||||
color: white;
|
||||
width: 164px;
|
||||
height: 40px;
|
||||
height: 45px;
|
||||
border: none;
|
||||
|
||||
margin-top: 10px;
|
||||
}
|
||||
.btn2{
|
||||
.btn1{
|
||||
background:#FFBC10;
|
||||
border-radius: 8px;
|
||||
color: white;
|
||||
width: 164px;
|
||||
height: 40px;
|
||||
height: 45px;
|
||||
border: none;
|
||||
margin-left: 3px;
|
||||
margin-top: 10px;
|
||||
margin-left: 6px;
|
||||
}
|
||||
.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;
|
||||
margin-top: 45px;
|
||||
|
||||
}
|
||||
|
||||
/*
|
||||
.teste{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-left: 100px;
|
||||
} */
|
||||
.text1{
|
||||
margin-left: 70px;
|
||||
}
|
||||
.header{
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
`
|
||||
|
||||
79
src/pages/administrative/notifications/index.tsx
Normal file
79
src/pages/administrative/notifications/index.tsx
Normal file
@ -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 (
|
||||
<>
|
||||
<Head>
|
||||
<title>Smart Energia - FAQ</title>
|
||||
</Head>
|
||||
<AdministrativeHeader />
|
||||
<FaqView>
|
||||
<h1>Perguntas Frequentes</h1>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
|
||||
|
||||
<TextField id="standard-basic" label="Mensagem" sx={{width:700}} variant="standard" />
|
||||
|
||||
<br />
|
||||
|
||||
<FormControl size='small' fullWidth sx={{ width: 135}} >
|
||||
|
||||
<InputLabel id="demo-simple-select-label">Clientes</InputLabel>
|
||||
<Select
|
||||
labelId="demo-simple-select-label"
|
||||
id="demo-simple-select"
|
||||
value={month}
|
||||
label="Month"
|
||||
onChange={handleChangeMonth}
|
||||
>
|
||||
<MenuItem value={15}>Cliente 1</MenuItem>
|
||||
<MenuItem value={20}>Cliente 2</MenuItem>
|
||||
<MenuItem value={30}>Cliente 3</MenuItem>
|
||||
<MenuItem value={30}>Cliente 4</MenuItem>
|
||||
<MenuItem value={30}>Cliente 5</MenuItem>
|
||||
<MenuItem value={30}>Cliente 6</MenuItem>
|
||||
<MenuItem value={30}>Cliente 7</MenuItem>
|
||||
|
||||
</Select>
|
||||
</FormControl>
|
||||
<br />
|
||||
<BasicButton title='Enviar' onClick={() => console.log()}/>
|
||||
|
||||
<section className='CommonQuestionsSection' >
|
||||
<CommonQuestionsCard />
|
||||
<hr />
|
||||
<CommonQuestionsCard />
|
||||
<hr />
|
||||
<CommonQuestionsCard />
|
||||
<hr />
|
||||
<CommonQuestionsCard />
|
||||
<hr />
|
||||
<CommonQuestionsCard />
|
||||
<hr />
|
||||
</section>
|
||||
</FaqView>
|
||||
</>
|
||||
)
|
||||
}
|
||||
231
src/pages/administrative/pld/index.tsx
Normal file
231
src/pages/administrative/pld/index.tsx
Normal file
@ -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<string>('table')
|
||||
const [age, setAge] = React.useState('');
|
||||
|
||||
const handleChange = (event: SelectChangeEvent) => {
|
||||
setAge(event.target.value);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
console.log(page)
|
||||
}, [page])
|
||||
|
||||
return (
|
||||
<main style={{
|
||||
width: '100%',
|
||||
}}>
|
||||
<Head>
|
||||
<title>Smart Energia - PLD</title>
|
||||
</Head>
|
||||
<AdministrativeHeader />
|
||||
<RenderIf isTrue={page==='table'? true : false}>
|
||||
<Link href='/dashboard' >{'< voltar para visão geral'}</Link>
|
||||
<PageTitle title='Tabela de consumo Pld' subtitle=''/>
|
||||
<NewTableLine>
|
||||
<article>
|
||||
<TextField label="Mês" variant="standard" style={{width: '15%'}}/>
|
||||
<TextField label="Nordeste" variant="standard" style={{width: '15%'}}/>
|
||||
<TextField label="Nort" variant="standard" style={{width: '15%'}}/>
|
||||
<TextField label="Sudeste" variant="standard" style={{width: '15%'}}/>
|
||||
<TextField label="Sul" variant="standard" style={{width: '15%'}}/>
|
||||
</article>
|
||||
<BasicButton title='Adicionar' onClick={() => console.log()}/>
|
||||
</NewTableLine>
|
||||
<PldTableView>
|
||||
<table className="tg">
|
||||
<thead>
|
||||
<tr>
|
||||
<th className='tg-8oo6'>Mês</th>
|
||||
<th className='tg-8oo6'>Nordeste</th>
|
||||
<th className='tg-8oo6'>Norte</th>
|
||||
<th className='tg-8oo6'>Sudeste</th>
|
||||
<th className='tg-8oo6'>Sul</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td className='tg-gceh'>2101</td>
|
||||
<td className='tg-uulg red'>xxxx</td>
|
||||
<td className='tg-gceh dullRed'>xxxx</td>
|
||||
<td className='tg-gceh dullGreen'>xxxx</td>
|
||||
<td className='tg-uulg red'>xxxx</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className='tg-hq65'>2102</td>
|
||||
<td className='tg-0tzy dullGreen'>xxxx</td>
|
||||
<td className='tg-hq65 dullRed'>xxxx</td>
|
||||
<td className='tg-hq65 dullGreen'>xxxx</td>
|
||||
<td className='tg-0tzy dullGreen'>xxxx</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="tg-gceh">2103</td>
|
||||
<td className="tg-uulg red">xxxx</td>
|
||||
<td className="tg-gceh dullGreen">xxxx</td>
|
||||
<td className="tg-gceh dullRed">xxxx</td>
|
||||
<td className="tg-gceh dullGreen">xxxx</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className='tg-hq65'>2104</td>
|
||||
<td className='tg-0tzy dullGreen'>xxxx</td>
|
||||
<td className='tg-hq65 dullRed'>xxxx</td>
|
||||
<td className='tg-hq65 dullRed'>xxxx</td>
|
||||
<td className='tg-0tzy dullGreen'>xxxx</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className='tg-gceh'>2105</td>
|
||||
<td className='tg-uulg red'>xxxx</td>
|
||||
<td className='tg-gceh dullGreen'>xxxx</td>
|
||||
<td className='tg-gceh dullGreen'>xxxx</td>
|
||||
<td className='tg-uulg red'>xxxx</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className='tg-hq65'>2106</td>
|
||||
<td className='tg-0tzy dullGreen'>xxxx</td>
|
||||
<td className='tg-hq65 dullRed'>xxxx</td>
|
||||
<td className='tg-hq65 red'>xxxx</td>
|
||||
<td className='tg-0tzy green'>xxxx</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className='tg-gceh'>2107</td>
|
||||
<td className='tg-uulg red'>xxxx</td>
|
||||
<td className='tg-gceh green'>xxxx</td>
|
||||
<td className='tg-gceh dullRed'>xxxx</td>
|
||||
<td className='tg-uulg red'>xxxx</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className='tg-hq65'>2108</td>
|
||||
<td className='tg-0tzy dullGreen'>xxxx</td>
|
||||
<td className='tg-hq65 dullGreen'>xxxx</td>
|
||||
<td className='tg-hq65 green'>xxxx</td>
|
||||
<td className='tg-0tzy dullRed'>xxxx</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className='tg-gceh'>2109</td>
|
||||
<td className='tg-uulg red'>xxxx</td>
|
||||
<td className='tg-gceh green'>xxxx</td>
|
||||
<td className='tg-gceh dullRed'>xxxx</td>
|
||||
<td className='tg-uulg red'>xxxx</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className='tg-hq65'>2110</td>
|
||||
<td className='tg-0tzy red'>xxxx</td>
|
||||
<td className='tg-hq65 green'>xxxx</td>
|
||||
<td className='tg-hq65 red'>xxxx</td>
|
||||
<td className='tg-0tzy red'>xxxx</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className='tg-gceh'>2111</td>
|
||||
<td className='tg-uulg red'>xxxx</td>
|
||||
<td className='tg-gceh dullGreen'>xxxx</td>
|
||||
<td className='tg-gceh green'>xxxx</td>
|
||||
<td className='tg-uulg red'>xxxx</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className='tg-hq65'>2112</td>
|
||||
<td className='tg-0tzy green'>xxxx</td>
|
||||
<td className='tg-hq65 dullGreen'>xxxx</td>
|
||||
<td className='tg-hq65 dullRed'>xxxx</td>
|
||||
<td className='tg-0tzy dullGreen'>xxxx</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className='tg-gceh'>2021</td>
|
||||
<td className='tg-uulg red'>xxxx</td>
|
||||
<td className='tg-gceh dullRed'>xxxx</td>
|
||||
<td className='tg-gceh dullGreen'>xxxx</td>
|
||||
<td className='tg-uulg red'>xxxx</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className='tg-gceh'>Mín</td>
|
||||
<td className='tg-uulg'>xxxx</td>
|
||||
<td className='tg-gceh'>xxxx</td>
|
||||
<td className='tg-gceh'>xxxx</td>
|
||||
<td className='tg-uulg'>xxxx</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className='tg-gceh'>Max</td>
|
||||
<td className='tg-uulg'>xxxx</td>
|
||||
<td className='tg-gceh'>xxxx</td>
|
||||
<td className='tg-gceh'>xxxx</td>
|
||||
<td className='tg-uulg'>xxxx</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className='tg-gceh'>Desv Pad</td>
|
||||
<td className='tg-uulg'>xxxx</td>
|
||||
<td className='tg-gceh'>xxxx</td>
|
||||
<td className='tg-gceh'>xxxx</td>
|
||||
<td className='tg-uulg'>xxxx</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<section>
|
||||
<article onClick={() => setPage('perMouth')}>
|
||||
<p>Valores Diarios</p>
|
||||
</article>
|
||||
<article onClick={() => setPage('perDate')}>
|
||||
<p>Valores Horários</p>
|
||||
</article>
|
||||
</section>
|
||||
</PldTableView>
|
||||
</RenderIf>
|
||||
|
||||
<RenderIf isTrue={page==='perMouth'? true : false}>
|
||||
<GoBack onClick={() => setPage('table')}>{'< voltar para tabela pld'}</GoBack>
|
||||
<PageTitle title='Consumo por mês' subtitle=''/>
|
||||
<PldGraphView>
|
||||
<section className='toolsbar'>
|
||||
<div className='select'>
|
||||
<Select
|
||||
value={age}
|
||||
onChange={handleChange}
|
||||
displayEmpty
|
||||
sx={{
|
||||
width: '100%'
|
||||
}}
|
||||
>
|
||||
<MenuItem value={0}>Filial 3</MenuItem>
|
||||
<MenuItem value={10}>Filial 3</MenuItem>
|
||||
<MenuItem value={20}>Twenty</MenuItem>
|
||||
<MenuItem value={30}>Thirty</MenuItem>
|
||||
</Select>
|
||||
</div>
|
||||
<input type="date" data-date="" data-date-format="DD MMMM YYYY" value="2015-08-09"/>
|
||||
<BasicButton title='Download (csv)' onClick={() => console.log()}/>
|
||||
</section>
|
||||
<LineBarChart data1={EvolucaoPld.data} data3={EvolucaoPld.data1} dataset1={'Economia'} dataset2={'barra1'} dataset3={'2021'} label={EvolucaoPld.label} title='Evolução PLD (R$/MWh)' subtitle='' />
|
||||
</PldGraphView>
|
||||
</RenderIf>
|
||||
|
||||
<RenderIf isTrue={page==='perDate'? true : false}>
|
||||
<GoBack onClick={() => setPage('table')}>{'< voltar para tabela pld'}</GoBack>
|
||||
<PldGraphView>
|
||||
<PageTitle title='Consumo por dia' subtitle=''/>
|
||||
<section className='toolsbar'>
|
||||
<input type="date" data-date="" data-date-format="DD MMMM YYYY" value="2021-09-19"/>
|
||||
<BasicButton title='Download (csv)' onClick={() => console.log()}/>
|
||||
</section>
|
||||
<LineChart data1={EconomiaAcumulada.data3} data2={EconomiaAcumulada.data4} data3={EconomiaAcumulada.data5} data4={EconomiaAcumulada.data6} dataset1='NORDESTE' dataset2='NORTE' dataset3='SUDESTE' dataset4='SUL' title='PLD - 19/09/21' subtitle='' label={EconomiaAcumulada.label1} />
|
||||
</PldGraphView>
|
||||
</RenderIf>
|
||||
</main>
|
||||
)
|
||||
}
|
||||
161
src/pages/administrative/resumoOperacao/index.tsx
Normal file
161
src/pages/administrative/resumoOperacao/index.tsx
Normal file
@ -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(
|
||||
<>
|
||||
<AdministrativeHeader />
|
||||
<TableView>
|
||||
<Head>
|
||||
<title>Smart Energia - Resumo de Operação</title>
|
||||
</Head>
|
||||
<PageTitle title='Resumo de Operaçoes' subtitle='Operações detalhadas' />
|
||||
|
||||
<h3>Seletor Mês</h3>
|
||||
<div className='select'>
|
||||
<FormControl fullWidth >
|
||||
<InputLabel id="demo-simple-select-labels">Unidades</InputLabel>
|
||||
<Select
|
||||
labelId="demo-simple-select-label"
|
||||
id="demo-simple-select"
|
||||
value={unidade}
|
||||
label="Unidade"
|
||||
onChange={handleChangeUnidade}
|
||||
>
|
||||
<MenuItem key={1} value={''}></MenuItem>
|
||||
{
|
||||
data.unidades.map((value) => {
|
||||
return <MenuItem key={1} value={value.value}>{value.name}</MenuItem>
|
||||
})
|
||||
}
|
||||
</Select>
|
||||
</FormControl>
|
||||
|
||||
<FormControl fullWidth sx={{ml:1}} >
|
||||
<InputLabel>Mês</InputLabel>
|
||||
<Select
|
||||
value={month}
|
||||
label="Month"
|
||||
onChange={handleChangeMonth}
|
||||
>
|
||||
<MenuItem value={15}>Janeiro</MenuItem>
|
||||
<MenuItem value={20}>Fevereiro</MenuItem>
|
||||
<MenuItem value={30}>Março</MenuItem>
|
||||
<MenuItem value={30}>Abril</MenuItem>
|
||||
<MenuItem value={30}>Março</MenuItem>
|
||||
<MenuItem value={30}>Maio</MenuItem>
|
||||
<MenuItem value={30}>Junho</MenuItem>
|
||||
<MenuItem value={30}>Julho</MenuItem>
|
||||
<MenuItem value={30}>Agosto</MenuItem>
|
||||
<MenuItem value={30}>Setembro</MenuItem>
|
||||
<MenuItem value={30}>Outubro</MenuItem>
|
||||
<MenuItem value={30}>Novembro</MenuItem>
|
||||
<MenuItem value={30}>Dezembro</MenuItem>
|
||||
</Select>
|
||||
</FormControl>
|
||||
</div>
|
||||
<NewTableLine>
|
||||
<article>
|
||||
<TextField label="Unidade" variant="standard" style={{width: '150px'}}/>
|
||||
<TextField label="Operação" variant="standard" style={{width: '150px'}}/>
|
||||
<TextField label="Montante (MWh)" variant="standard" style={{width: '150px'}}/>
|
||||
<TextField label="Contraparte" variant="standard" style={{width: '150px'}}/>
|
||||
<TextField label="Preço(R$/MWh)" variant="standard" style={{width: '150px'}}/>
|
||||
<TextField label="ValorNF/Crédito(R$)" variant="standard" style={{width: '150px'}}/>
|
||||
</article>
|
||||
<BasicButton title='Adicionar' onClick={() => console.log()}/>
|
||||
</NewTableLine>
|
||||
<table className="tg">
|
||||
<thead>
|
||||
<tr>
|
||||
<th className='tg-8oo6'>Unidade </th>
|
||||
<th className='tg-8oo6'>Operação</th>
|
||||
<th className='tg-8oo6'>Montante (MWh)</th>
|
||||
<th className='tg-8oo6'>Contraparte</th>
|
||||
<th className='tg-8oo6'>Preço(R$/MWh)</th>
|
||||
<th className='tg-8oo6'>ValorNF/Crédito(R$)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{
|
||||
data.unidades.filter((value, index)=> value.value.includes(unidade)).map((value, index) => {
|
||||
if (index%2===0) {
|
||||
return <tr key={index}>
|
||||
<td key={index} className='tg-gceh'>{value.name}</td>
|
||||
<td key={index} className='tg-uulg'>{value.operacao}</td>
|
||||
<td key={index} className='tg-gceh'>{value.montante}</td>
|
||||
<td key={index} className='tg-gceh'>{value.contraparte}</td>
|
||||
<td key={index} className='tg-uulg'>{value.preco}</td>
|
||||
<td key={index} className='tg-gceh'>{value.valorNF}</td>
|
||||
</tr>
|
||||
} else {
|
||||
return <tr key={index}>
|
||||
<td key={index} className='tg-hq65'>{value.name}</td>
|
||||
<td key={index} className='tg-0tzy'>{value.operacao}</td>
|
||||
<td key={index} className='tg-hq65'>{value.montante}</td>
|
||||
<td key={index} className='tg-hq65'>{value.contraparte}</td>
|
||||
<td key={index} className='tg-0tzy'>{value.preco}</td>
|
||||
<td key={index} className='tg-hq65'>{value.valorNF}</td>
|
||||
</tr>
|
||||
}
|
||||
})
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
<div className='btn'>
|
||||
|
||||
{/* <a href={Teste} download="dowload.csv"> */}
|
||||
{/* <BasicButton title='Baixar PDF' /> */}
|
||||
{/* </a> */}
|
||||
|
||||
<CSVLink data={csvData} filename="Arquivo_Teste_Smart_Energia">
|
||||
<BasicButton title='Baixar CSV' onClick={() => console.log()}/>
|
||||
</CSVLink>
|
||||
|
||||
</div>
|
||||
|
||||
</TableView>
|
||||
</>
|
||||
)
|
||||
}
|
||||
195
src/pages/administrative/telemetria/index.tsx
Normal file
195
src/pages/administrative/telemetria/index.tsx
Normal file
@ -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(
|
||||
<>
|
||||
<AdministrativeHeader />
|
||||
<TelemetriaView>
|
||||
<Head>
|
||||
<title>Smart Energia - Telemetria</title>
|
||||
</Head>
|
||||
<Banner title ='Telemetria' subtitle='Dados Coletados do Sistema de Coleta de Dados de Energia -
|
||||
SCDE da Câmara de Comercialização de Energia Elétrica - CCEE,
|
||||
sendo que as quantidades aqui informadas são de responsabilidade do agente de medição
|
||||
- Distribuidora.' imgSource='/assets/graphical.png' />
|
||||
|
||||
<section>
|
||||
<div className='select'>
|
||||
<p className='title' >Unidade</p>
|
||||
<FormControl sx={{ m: 1, minWidth: 120, width: 200 }} size="small">
|
||||
<InputLabel id="demo-select-small">Unidade</InputLabel>
|
||||
<Select
|
||||
labelId="demo-select-small"
|
||||
id="demo-select-small"
|
||||
value={unity}
|
||||
label="Unidade"
|
||||
onChange={value => setUnity(value.target.value)}
|
||||
fullWidth
|
||||
>
|
||||
<MenuItem value="">
|
||||
<em>None</em>
|
||||
</MenuItem>
|
||||
<MenuItem value="">07/09/2021</MenuItem>
|
||||
<MenuItem value={10}>Filial 3</MenuItem>
|
||||
<MenuItem value={20}>Twenty</MenuItem>
|
||||
<MenuItem value={30}>Thirty</MenuItem>
|
||||
</Select>
|
||||
</FormControl>
|
||||
</div>
|
||||
|
||||
<div className='select'>
|
||||
<p className='title' >Data inicial</p>
|
||||
<FormControl sx={{ m: 1, minWidth: 120, width: 200 }} size="small">
|
||||
<InputLabel id="demo-select-small">Data Inicial</InputLabel>
|
||||
<Select
|
||||
labelId="demo-select-small"
|
||||
id="demo-select-small"
|
||||
value={startDate}
|
||||
label="Unidade"
|
||||
onChange={value => setStartDate(value.target.value)}
|
||||
fullWidth
|
||||
>
|
||||
<MenuItem value="">
|
||||
<em>None</em>
|
||||
</MenuItem>
|
||||
<MenuItem value="">07/09/2021</MenuItem>
|
||||
<MenuItem value={10}>Filial 3</MenuItem>
|
||||
<MenuItem value={20}>Twenty</MenuItem>
|
||||
<MenuItem value={30}>Thirty</MenuItem>
|
||||
</Select>
|
||||
</FormControl>
|
||||
</div>
|
||||
|
||||
<div className='select'>
|
||||
<p className='title' >Data Final</p>
|
||||
<FormControl sx={{ m: 1, minWidth: 120, width: 200 }} size="small">
|
||||
<InputLabel id="demo-select-small">Data Final</InputLabel>
|
||||
<Select
|
||||
labelId="demo-select-small"
|
||||
id="demo-select-small"
|
||||
value={endDate}
|
||||
label="Unidade"
|
||||
onChange={value => setEndDate(value.target.value)}
|
||||
fullWidth
|
||||
>
|
||||
<MenuItem value="">
|
||||
<em>None</em>
|
||||
</MenuItem>
|
||||
<MenuItem value="">07/09/2021</MenuItem>
|
||||
<MenuItem value={10}>Filial 3</MenuItem>
|
||||
<MenuItem value={20}>Twenty</MenuItem>
|
||||
<MenuItem value={30}>Thirty</MenuItem>
|
||||
</Select>
|
||||
</FormControl>
|
||||
</div>
|
||||
|
||||
<div className='select'>
|
||||
<p className='title' >Discretização</p>
|
||||
<FormControl sx={{ m: 1, minWidth: 120, width: 200 }} size="small">
|
||||
<InputLabel id="demo-select-small">Discretização</InputLabel>
|
||||
<Select
|
||||
labelId="demo-select-small"
|
||||
id="demo-select-small"
|
||||
value={discretization}
|
||||
label="Unidade"
|
||||
onChange={value => setDiscretization(value.target.value)}
|
||||
fullWidth
|
||||
>
|
||||
<MenuItem value="">
|
||||
<em>None</em>
|
||||
</MenuItem>
|
||||
<MenuItem value="">07/09/2021</MenuItem>
|
||||
<MenuItem value={10}>Filial 3</MenuItem>
|
||||
<MenuItem value={20}>Twenty</MenuItem>
|
||||
<MenuItem value={30}>Thirty</MenuItem>
|
||||
</Select>
|
||||
</FormControl>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<RenderIf isTrue={showChart}>
|
||||
<LineChart title='Fator de Potencia' subtitle='' data1={FatorPotencia.data} data2={FatorPotencia.data2} dataset1='Fator de Potencia' dataset2='Fator ref.' label={FatorPotencia.label1} />
|
||||
</RenderIf>
|
||||
|
||||
<Buttons>
|
||||
<GradientButton title='GRÁFICO' description='Gerar gráficos com os dados selecionados' orange link />
|
||||
<GradientButton title='DOWNLOADS' description='DADOS BRUTOS SELECIONADOS' purple />
|
||||
<GradientButton title='DADOS' description='hORÁRIOS DO MÊS ATUAL' onClick={() => setShowChart(!showChart)} green />
|
||||
</Buttons>
|
||||
<Uploads>
|
||||
<Button
|
||||
variant="contained"
|
||||
component="label"
|
||||
style={{width: '200px', margin: '30px'}}
|
||||
>
|
||||
Upload de dados
|
||||
<input
|
||||
type="file"
|
||||
hidden
|
||||
/>
|
||||
</Button>
|
||||
<Button
|
||||
variant="contained"
|
||||
component="label"
|
||||
style={{width: '200px', margin: '30px'}}
|
||||
>
|
||||
Upload de dados
|
||||
<input
|
||||
type="file"
|
||||
hidden
|
||||
/>
|
||||
</Button>
|
||||
<Button
|
||||
variant="contained"
|
||||
component="label"
|
||||
style={{width: '200px', margin: '30px'}}
|
||||
>
|
||||
Upload de dados
|
||||
<input
|
||||
type="file"
|
||||
hidden
|
||||
/>
|
||||
</Button>
|
||||
</Uploads>
|
||||
<p className='paragraph'>
|
||||
<i>
|
||||
Fonte: Dados coletados do Sistema de Coleta de Dados
|
||||
de Energia - SCDE da Câmara de Comercialização <br/>
|
||||
Energia Elétrica – CCEE, sendo que as quantidades aqui
|
||||
informadas são de responsabilidade <br/>do agente de
|
||||
medição - Distribuidora.
|
||||
</i>
|
||||
</p>
|
||||
</TelemetriaView>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@ -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: '',
|
||||
|
||||
@ -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..</p>
|
||||
<Button>
|
||||
<fieldset>
|
||||
<legend> <BasicButton title='Ver Mais...' /></legend>
|
||||
<legend> <BasicButton title='Ver Mais...' onClick={() => console.log()}/></legend>
|
||||
</fieldset>
|
||||
</Button>
|
||||
|
||||
@ -40,7 +41,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..</p>
|
||||
<Button>
|
||||
<fieldset>
|
||||
<legend> <BasicButton title='Ver Mais...' /></legend>
|
||||
<legend> <BasicButton title='Ver Mais...' onClick={() => console.log()}/></legend>
|
||||
</fieldset>
|
||||
</Button>
|
||||
|
||||
@ -48,7 +49,7 @@ export default function aboutUs() {
|
||||
|
||||
<a href='https://www.energiasmart.com.br/noticias/'
|
||||
target={"_blank"}
|
||||
rel={"noreferrer"}><BasicButton title='Noticias Atualizadas' /></a>
|
||||
rel={"noreferrer"}><BasicButton title='Noticias Atualizadas' onClick={() => console.log()}/></a>
|
||||
</NewsView>
|
||||
)
|
||||
}
|
||||
|
||||
@ -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() {
|
||||
</Select>
|
||||
</div>
|
||||
<input type="date" data-date="" data-date-format="DD MMMM YYYY" value="2015-08-09"/>
|
||||
<BasicButton title='Download (csv)' />
|
||||
<BasicButton title='Download (csv)' onClick={() => console.log()}/>
|
||||
</section>
|
||||
<LineBarChart data1={EvolucaoPld.data} data3={EvolucaoPld.data1} dataset1={'Economia'} dataset2={'barra1'} dataset3={'2021'} label={EvolucaoPld.label} title='Evolução PLD (R$/MWh)' subtitle='' />
|
||||
</PldGraphView>
|
||||
|
||||
@ -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(
|
||||
<TableView>
|
||||
<Head>
|
||||
@ -66,7 +63,6 @@ export default function ResumoOperacao() {
|
||||
|
||||
<h3>Seletor Mês</h3>
|
||||
<div className='select'>
|
||||
|
||||
<FormControl fullWidth >
|
||||
<InputLabel id="demo-simple-select-labels">Unidades</InputLabel>
|
||||
<Select
|
||||
@ -85,9 +81,7 @@ export default function ResumoOperacao() {
|
||||
</Select>
|
||||
</FormControl>
|
||||
|
||||
|
||||
<FormControl fullWidth sx={{ml:1}} >
|
||||
|
||||
<InputLabel id="demo-simple-select-label">Mês</InputLabel>
|
||||
<Select
|
||||
labelId="demo-simple-select-label"
|
||||
@ -147,22 +141,20 @@ export default function ResumoOperacao() {
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
<div className='btn'>
|
||||
|
||||
{/* <a href={Teste} download="dowload.csv"> */}
|
||||
{/* <BasicButton title='Baixar PDF' /> */}
|
||||
{/* </a> */}
|
||||
|
||||
<CSVLink data={csvData} filename="Arquivo_Teste_Smart_Energia">
|
||||
|
||||
<BasicButton title='Baixar CSV' />
|
||||
<BasicButton title='Baixar CSV' onClick={function (): void {
|
||||
throw new Error('Function not implemented.');
|
||||
}}/>
|
||||
</CSVLink>
|
||||
|
||||
</div>
|
||||
|
||||
</TableView>
|
||||
)
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
`
|
||||
|
||||
@ -1,7 +1,5 @@
|
||||
|
||||
import styled from 'styled-components';
|
||||
|
||||
|
||||
export const TelemetriaView = styled.main`
|
||||
padding: 20px ;
|
||||
width: 100%;
|
||||
@ -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;
|
||||
`;
|
||||
|
||||
|
||||
|
||||
@ -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: flex;
|
||||
flex-direction: column;
|
||||
|
||||
width: 70%;
|
||||
article {
|
||||
display: grid;
|
||||
|
||||
grid-template-columns: 100% 100%;
|
||||
grid-template-rows: 100% 100% 100% 100%;
|
||||
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%;
|
||||
|
||||
|
||||
`
|
||||
|
||||
60
src/styles/layouts/clientsAdmin/clientsAdminView.ts
Normal file
60
src/styles/layouts/clientsAdmin/clientsAdminView.ts
Normal file
@ -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;
|
||||
}
|
||||
|
||||
|
||||
`
|
||||
@ -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;
|
||||
|
||||
}
|
||||
|
||||
|
||||
`
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
@ -54,9 +56,8 @@ export const NewsView = styled.main`
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}`;
|
||||
}
|
||||
`;
|
||||
|
||||
export const Button = styled.div`
|
||||
display: flex;
|
||||
|
||||
@ -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;
|
||||
}
|
||||
`
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user