Merge branch 'administativePages' into 'dev'
Administative pages See merge request kluppsoftware/smart-energia-web!64
This commit is contained in:
José Corte
commit
b1e7b322e7
@ -1,12 +1,6 @@
|
||||
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';
|
||||
@ -15,13 +9,10 @@ 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 React, { useState, useEffect } from 'react';
|
||||
|
||||
import { ClientTableView, StyledStatus } from './ClientsTableView';
|
||||
import { TableView, StyledStatus } from './TableView';
|
||||
|
||||
interface Data {
|
||||
clientCode: number,
|
||||
@ -30,29 +21,6 @@ interface Data {
|
||||
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;
|
||||
@ -77,7 +45,7 @@ function getComparator<Key extends keyof any>(
|
||||
: (a, b) => -descendingComparator(a, b, orderBy);
|
||||
}
|
||||
|
||||
function stableSort<T>(array: readonly T[], comparator: (a: T, b: T) => number) {
|
||||
function stableSort<T>(array: any, 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]);
|
||||
@ -180,7 +148,12 @@ function EnhancedTableHead(props: EnhancedTableProps) {
|
||||
);
|
||||
}
|
||||
|
||||
export default function ClientTable() {
|
||||
interface ClientsTableInterface {
|
||||
clients: any,
|
||||
onChange: any
|
||||
}
|
||||
|
||||
export default function ClientTable({clients, onChange}: ClientsTableInterface) {
|
||||
const [order, setOrder] = useState<Order>('asc');
|
||||
const [orderBy, setOrderBy] = useState<keyof Data | string>('status');
|
||||
const [selected, setSelected] = useState<readonly string[]>([]);
|
||||
@ -199,7 +172,7 @@ export default function ClientTable() {
|
||||
|
||||
const handleSelectAllClick = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
if (event.target.checked) {
|
||||
const newSelecteds = rows.map((n) => n.name);
|
||||
const newSelecteds = clients.map((n) => n.name);
|
||||
setSelected(newSelecteds);
|
||||
return;
|
||||
}
|
||||
@ -237,12 +210,16 @@ export default function ClientTable() {
|
||||
|
||||
const isSelected = (code: any) => selected.indexOf(code.toString()) !== -1;
|
||||
|
||||
useEffect(() => {
|
||||
onChange(selected)
|
||||
}, [selected])
|
||||
|
||||
// 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;
|
||||
page > 0 ? Math.max(0, (1 + page) * rowsPerPage - clients.length) : 0;
|
||||
|
||||
return (
|
||||
<ClientTableView>
|
||||
<TableView>
|
||||
<Paper sx={{ width: '100%', mb: 2 }}>
|
||||
<TableContainer>
|
||||
<Table
|
||||
@ -256,23 +233,23 @@ export default function ClientTable() {
|
||||
orderBy={orderBy}
|
||||
onSelectAllClick={handleSelectAllClick}
|
||||
onRequestSort={handleRequestSort}
|
||||
rowCount={rows.length}
|
||||
rowCount={clients.length}
|
||||
/>
|
||||
<TableBody>
|
||||
{stableSort(rows, getComparator(order, orderBy))
|
||||
{stableSort(clients, getComparator(order, orderBy))
|
||||
.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
|
||||
.map((row, index) => {
|
||||
const isItemSelected = isSelected(row.clientCode);
|
||||
const isItemSelected = isSelected(row.id);
|
||||
const labelId = `enhanced-table-checkbox-${index}`;
|
||||
|
||||
return (
|
||||
<TableRow
|
||||
hover
|
||||
onClick={(event) => handleClick(event, row.clientCode.toString())}
|
||||
onClick={(event) => handleClick(event, row.id.toString())}
|
||||
role="checkbox"
|
||||
aria-checked={isItemSelected}
|
||||
tabIndex={-1}
|
||||
key={row.clientCode}
|
||||
key={row.id}
|
||||
selected={isItemSelected}
|
||||
>
|
||||
<TableCell padding="checkbox">
|
||||
@ -290,11 +267,11 @@ export default function ClientTable() {
|
||||
scope="row"
|
||||
padding="none"
|
||||
>
|
||||
Unidade - {row.clientCode}
|
||||
Client - {row.client_id}
|
||||
</TableCell>
|
||||
<TableCell align="left">{row.name}</TableCell>
|
||||
<TableCell align="left">{row.unity}button</TableCell>
|
||||
<TableCell align="left"><StyledStatus status={row.status}>{row.status}</StyledStatus></TableCell>
|
||||
<TableCell align="left">clique aqui para ver as unidades</TableCell>
|
||||
<TableCell align="left"><StyledStatus status={row.deleted_at? 'inativo' : 'ativo'}> {row.deleted_at? 'inativo' : 'ativo'}</StyledStatus></TableCell>
|
||||
</TableRow>
|
||||
);
|
||||
})}
|
||||
@ -313,13 +290,13 @@ export default function ClientTable() {
|
||||
<TablePagination
|
||||
rowsPerPageOptions={[5, 10, 25]}
|
||||
component="div"
|
||||
count={rows.length}
|
||||
count={clients.length}
|
||||
rowsPerPage={rowsPerPage}
|
||||
page={page}
|
||||
onPageChange={handleChangePage}
|
||||
onRowsPerPageChange={handleChangeRowsPerPage}
|
||||
/>
|
||||
</Paper>
|
||||
</ClientTableView>
|
||||
</TableView>
|
||||
);
|
||||
}
|
||||
|
||||
@ -17,10 +17,10 @@ import TableRow from '@mui/material/TableRow';
|
||||
import TableSortLabel from '@mui/material/TableSortLabel';
|
||||
import { visuallyHidden } from '@mui/utils';
|
||||
import { GetServerSideProps } from 'next';
|
||||
import React, { useState } from 'react';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import getAPIClient from '../../services/ssrApi';
|
||||
|
||||
import { ClientTableView, StyledStatus } from './ClientsTableView';
|
||||
import { TableView, StyledStatus } from './TableView';
|
||||
|
||||
interface Data {
|
||||
question: string,
|
||||
@ -28,6 +28,11 @@ interface Data {
|
||||
status: string,
|
||||
}
|
||||
|
||||
interface FaqTableInterface{
|
||||
questionData: any,
|
||||
onChange: any
|
||||
}
|
||||
|
||||
function createData(
|
||||
question: string,
|
||||
answer: string,
|
||||
@ -170,7 +175,7 @@ function EnhancedTableHead(props: EnhancedTableProps) {
|
||||
);
|
||||
}
|
||||
|
||||
export default function FaqTable({questionData}: any) {
|
||||
export default function FaqTable({questionData, onChange}: FaqTableInterface) {
|
||||
const [order, setOrder] = useState<Order>('asc');
|
||||
const [orderBy, setOrderBy] = useState<keyof Data | string>('status');
|
||||
const [selected, setSelected] = useState<readonly string[]>([]);
|
||||
@ -229,12 +234,16 @@ export default function FaqTable({questionData}: any) {
|
||||
|
||||
const isSelected = (name: string) => selected.indexOf(name) !== -1;
|
||||
|
||||
useEffect(() => {
|
||||
onChange(selected)
|
||||
}, [selected])
|
||||
|
||||
// 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>
|
||||
<TableView>
|
||||
<Paper sx={{ width: '100%', mb: 2 }}>
|
||||
<TableContainer>
|
||||
<Table
|
||||
@ -311,7 +320,7 @@ export default function FaqTable({questionData}: any) {
|
||||
onRowsPerPageChange={handleChangeRowsPerPage}
|
||||
/>
|
||||
</Paper>
|
||||
</ClientTableView>
|
||||
</TableView>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@ -21,7 +21,7 @@ import Typography from '@mui/material/Typography';
|
||||
import { visuallyHidden } from '@mui/utils';
|
||||
import React, { useState, useEffect } from 'react';
|
||||
|
||||
import { ClientTableView, StyledStatus } from './ClientsTableView';
|
||||
import { TableView, StyledStatus } from './TableView';
|
||||
|
||||
interface Data {
|
||||
notification: string,
|
||||
@ -248,7 +248,7 @@ export default function NotificationsTable({notifications, onChange}: Notificati
|
||||
}, [selected])
|
||||
|
||||
return (
|
||||
<ClientTableView>
|
||||
<TableView>
|
||||
<Paper sx={{ width: '100%', mb: 2 }}>
|
||||
<TableContainer>
|
||||
<Table
|
||||
@ -325,6 +325,6 @@ export default function NotificationsTable({notifications, onChange}: Notificati
|
||||
onRowsPerPageChange={handleChangeRowsPerPage}
|
||||
/>
|
||||
</Paper>
|
||||
</ClientTableView>
|
||||
</TableView>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import styled from "styled-components";
|
||||
|
||||
export const ClientTableView = styled.main`
|
||||
export const TableView = styled.main`
|
||||
width: 100%;
|
||||
|
||||
color: #6A707E;
|
||||
@ -71,14 +71,14 @@ export default function Chart({ title, data1, data2, label, subtitle, dataset1,
|
||||
labels,
|
||||
datasets: [
|
||||
{
|
||||
label: dataset1? dataset1 : '2020',
|
||||
data: data1.map(value => value),
|
||||
label: dataset1? dataset1 : '2021',
|
||||
data: data1.map(value => value.custo_unit),
|
||||
backgroundColor: '#C2D5FB',
|
||||
},
|
||||
data2?
|
||||
{
|
||||
label: dataset2? dataset2 : '2021',
|
||||
data: data2.map(value => value),
|
||||
label: dataset2? dataset2 : '2022',
|
||||
data: data2.map(value => value.custo_unit),
|
||||
backgroundColor: '#255488',
|
||||
} : null
|
||||
],
|
||||
|
||||
@ -25,38 +25,38 @@ ChartJS.register(
|
||||
Tooltip
|
||||
);
|
||||
|
||||
function triggerTooltip(chart: ChartJS | null) {
|
||||
const tooltip = chart?.tooltip;
|
||||
// function triggerTooltip(chart: ChartJS | null) {
|
||||
// const tooltip = chart?.tooltip;
|
||||
|
||||
if (!tooltip) {
|
||||
return;
|
||||
}
|
||||
// if (!tooltip) {
|
||||
// return;
|
||||
// }
|
||||
|
||||
if (tooltip.getActiveElements().length > 0) {
|
||||
tooltip.setActiveElements([], { x: 0, y: 0 });
|
||||
} else {
|
||||
const { chartArea } = chart;
|
||||
// if (tooltip.getActiveElements().length > 0) {
|
||||
// tooltip.setActiveElements([], { x: 0, y: 0 });
|
||||
// } else {
|
||||
// const { chartArea } = chart;
|
||||
|
||||
tooltip.setActiveElements(
|
||||
[
|
||||
{
|
||||
datasetIndex: 0,
|
||||
index: 2,
|
||||
},
|
||||
{
|
||||
datasetIndex: 1,
|
||||
index: 2,
|
||||
},
|
||||
],
|
||||
{
|
||||
x: (chartArea.left + chartArea.right) / 2,
|
||||
y: (chartArea.top + chartArea.bottom) / 2,
|
||||
}
|
||||
);
|
||||
}
|
||||
// tooltip.setActiveElements(
|
||||
// [
|
||||
// {
|
||||
// datasetIndex: 0,
|
||||
// index: 2,
|
||||
// },
|
||||
// {
|
||||
// datasetIndex: 1,
|
||||
// index: 2,
|
||||
// },
|
||||
// ],
|
||||
// {
|
||||
// x: (chartArea.left + chartArea.right) / 2,
|
||||
// y: (chartArea.top + chartArea.bottom) / 2,
|
||||
// }
|
||||
// );
|
||||
// }
|
||||
|
||||
chart.update();
|
||||
}
|
||||
// chart.update();
|
||||
// }
|
||||
|
||||
interface LineBarChartInterface {
|
||||
title: string,
|
||||
@ -119,7 +119,7 @@ export function LineBarChart({ title, subtitle, data1, data2, data3, label, red,
|
||||
},
|
||||
borderWidth: 2,
|
||||
fill: false,
|
||||
data: data1.map(value => value),
|
||||
data: data1.map(value => value.value),
|
||||
},
|
||||
{
|
||||
type: 'bar' as const,
|
||||
@ -127,7 +127,7 @@ export function LineBarChart({ title, subtitle, data1, data2, data3, label, red,
|
||||
backgroundColor: (value, ctx) => {
|
||||
return hashurado? parseInt(value.dataIndex+1) <= currentTime.getMonth()? '#C2D5FB' : pattern.draw('diagonal', '#C2D5FB') : '#C2D5FB'
|
||||
},
|
||||
data: data3.map(value => value),
|
||||
data: data3.map(value => value.value),
|
||||
},
|
||||
{
|
||||
type: 'bar' as const,
|
||||
@ -136,7 +136,7 @@ export function LineBarChart({ title, subtitle, data1, data2, data3, label, red,
|
||||
backgroundColor: (value, ctx) => {
|
||||
return hashurado? parseInt(value.dataIndex+1) <= currentTime.getMonth()? '#255488' : pattern.draw('diagonal', '#255488') : '#255488'
|
||||
},
|
||||
data: data2.map(value => value),
|
||||
data: data2.map(value => value.value),
|
||||
},
|
||||
],
|
||||
} : {
|
||||
@ -149,13 +149,13 @@ export function LineBarChart({ title, subtitle, data1, data2, data3, label, red,
|
||||
'#f00' : '#0c9200',
|
||||
borderWidth: 2,
|
||||
fill: false,
|
||||
data: data1.map(value => value),
|
||||
data: data1.map(value => value.value),
|
||||
},
|
||||
{
|
||||
type: 'bar' as const,
|
||||
label: dataset3? dataset3 : 'Dataset 2',
|
||||
backgroundColor: '#255488',
|
||||
data: data3.map(value => value),
|
||||
data: data3.map(value => value.value),
|
||||
},
|
||||
],
|
||||
};
|
||||
@ -163,7 +163,7 @@ export function LineBarChart({ title, subtitle, data1, data2, data3, label, red,
|
||||
useEffect(() => {
|
||||
const chart = chartRef.current;
|
||||
|
||||
triggerTooltip(chart);
|
||||
// triggerTooltip(chart);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
|
||||
177
src/components/graph/LineBarChart2.tsx
Normal file
177
src/components/graph/LineBarChart2.tsx
Normal file
@ -0,0 +1,177 @@
|
||||
import React, { useRef, useEffect } from 'react';
|
||||
import {
|
||||
Chart as ChartJS,
|
||||
LinearScale,
|
||||
CategoryScale,
|
||||
BarElement,
|
||||
PointElement,
|
||||
LineElement,
|
||||
Legend,
|
||||
Tooltip,
|
||||
} from 'chart.js';
|
||||
import { Chart } from 'react-chartjs-2';
|
||||
import faker from 'faker';
|
||||
import { ChartView } from './ChartView';
|
||||
import ChartTitle from './ChartTitle';
|
||||
import pattern from 'patternomaly'
|
||||
|
||||
ChartJS.register(
|
||||
LinearScale,
|
||||
CategoryScale,
|
||||
BarElement,
|
||||
PointElement,
|
||||
LineElement,
|
||||
Legend,
|
||||
Tooltip
|
||||
);
|
||||
|
||||
// function triggerTooltip(chart: ChartJS | null) {
|
||||
// const tooltip = chart?.tooltip;
|
||||
|
||||
// if (!tooltip) {
|
||||
// return;
|
||||
// }
|
||||
|
||||
// if (tooltip.getActiveElements().length > 0) {
|
||||
// tooltip.setActiveElements([], { x: 0, y: 0 });
|
||||
// } else {
|
||||
// const { chartArea } = chart;
|
||||
|
||||
// tooltip.setActiveElements(
|
||||
// [
|
||||
// {
|
||||
// datasetIndex: 0,
|
||||
// index: 2,
|
||||
// },
|
||||
// {
|
||||
// datasetIndex: 1,
|
||||
// index: 2,
|
||||
// },
|
||||
// ],
|
||||
// {
|
||||
// x: (chartArea.left + chartArea.right) / 2,
|
||||
// y: (chartArea.top + chartArea.bottom) / 2,
|
||||
// }
|
||||
// );
|
||||
// }
|
||||
|
||||
// chart.update();
|
||||
// }
|
||||
|
||||
interface LineBarChartInterface {
|
||||
title: string,
|
||||
subtitle: string,
|
||||
data1: any,
|
||||
data2?: any,
|
||||
data3: any,
|
||||
red?: any,
|
||||
label: any,
|
||||
dataset1?: string,
|
||||
dataset2?: string,
|
||||
dataset3?: string,
|
||||
barLabel?: boolean | undefined,
|
||||
hashurado?: boolean | undefined,
|
||||
}
|
||||
|
||||
export function LineBarChart2({ title, subtitle, data1, data2, data3, label, red, dataset1, dataset2, dataset3, barLabel, hashurado }: LineBarChartInterface) {
|
||||
const chartRef = useRef<ChartJS>(null);
|
||||
|
||||
const currentTime = new Date();
|
||||
|
||||
|
||||
const labels = label
|
||||
|
||||
const options: any = {
|
||||
responsive: true,
|
||||
plugins: {
|
||||
datalabels: {
|
||||
display: true,
|
||||
color: barLabel? 'black' : "rgba(255, 255, 255, 0)",
|
||||
// backgroundColor: '#255488',
|
||||
formatter: Math.round,
|
||||
anchor: "end",
|
||||
offset: -20,
|
||||
align: "start",
|
||||
font: {
|
||||
size: 16
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
position: 'bottom' as const,
|
||||
},
|
||||
title: {
|
||||
display: true,
|
||||
text: '',
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const data = data2? {
|
||||
labels,
|
||||
datasets: [
|
||||
{
|
||||
type: 'line' as const,
|
||||
label: dataset1? dataset1 : 'Dataset 1',
|
||||
borderColor: red?
|
||||
'#f00' : '#0c9200',
|
||||
datalabels: {
|
||||
backgroundColor: 'white'
|
||||
},
|
||||
borderWidth: 2,
|
||||
fill: false,
|
||||
data: data1.map(value => value),
|
||||
},
|
||||
{
|
||||
type: 'bar' as const,
|
||||
label: dataset2? dataset2 : 'Dataset 2',
|
||||
backgroundColor: (value, ctx) => {
|
||||
return hashurado? parseInt(value.dataIndex+1) <= currentTime.getMonth()? '#C2D5FB' : pattern.draw('diagonal', '#C2D5FB') : '#C2D5FB'
|
||||
},
|
||||
data: data3.map(value => value),
|
||||
},
|
||||
{
|
||||
type: 'bar' as const,
|
||||
label: dataset3? dataset3 : 'Dataset 2',
|
||||
// backgroundColor: '#255488',
|
||||
backgroundColor: (value, ctx) => {
|
||||
return hashurado? parseInt(value.dataIndex+1) <= currentTime.getMonth()? '#255488' : pattern.draw('diagonal', '#255488') : '#255488'
|
||||
},
|
||||
data: data2.map(value => value),
|
||||
},
|
||||
],
|
||||
} : {
|
||||
labels,
|
||||
datasets: [
|
||||
{
|
||||
type: 'line' as const,
|
||||
label: dataset1? dataset1 : 'Dataset 1',
|
||||
borderColor: red?
|
||||
'#f00' : '#0c9200',
|
||||
borderWidth: 2,
|
||||
fill: false,
|
||||
data: data1.map(value => value),
|
||||
},
|
||||
{
|
||||
type: 'bar' as const,
|
||||
label: dataset3? dataset3 : 'Dataset 2',
|
||||
backgroundColor: '#255488',
|
||||
data: data3.map(value => value),
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const chart = chartRef.current;
|
||||
|
||||
// triggerTooltip(chart);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<ChartView>
|
||||
<ChartTitle title={title} subtitle={subtitle}/>
|
||||
<div>
|
||||
<Chart ref={chartRef} type='bar' options={options} data={data} />
|
||||
</div>
|
||||
</ChartView>
|
||||
)
|
||||
}
|
||||
@ -75,25 +75,25 @@ export default function LineChart({ title, subtitle, data1, data2, data3, data4,
|
||||
datasets: [
|
||||
{
|
||||
label: dataset1? dataset1 : 'Dataset 1',
|
||||
data: data1.map(value => value),
|
||||
data: data1.map(value => value.value),
|
||||
borderColor: 'rgb(53, 162, 235)',
|
||||
backgroundColor: 'rgba(53, 162, 235, 0.5)',
|
||||
},
|
||||
{
|
||||
label: dataset2? dataset2 : '',
|
||||
data: data2.map(value => value),
|
||||
data: data2.map(value => value.value),
|
||||
borderColor: 'rgb(255, 114, 32)' ,
|
||||
backgroundColor: 'rgba(255, 145, 0, 0.5)' ,
|
||||
},
|
||||
{
|
||||
label: dataset3? dataset3 : '',
|
||||
data: data3.map(value => value),
|
||||
data: data3.map(value => value.value),
|
||||
borderColor: 'rgb(109, 109, 109)' ,
|
||||
backgroundColor: 'rgba(90, 90, 90, 0.5)',
|
||||
},
|
||||
{
|
||||
label: dataset4? dataset4 : '',
|
||||
data: data4.map(value => value),
|
||||
data: data4.map(value => value.value),
|
||||
borderColor: 'rgb(255, 166, 0)',
|
||||
backgroundColor: 'rgba(255, 187, 0, 0.5)',
|
||||
},
|
||||
@ -103,19 +103,19 @@ export default function LineChart({ title, subtitle, data1, data2, data3, data4,
|
||||
datasets: [
|
||||
{
|
||||
label: dataset1? dataset1 : 'Dataset 1',
|
||||
data: data1.map(value => value),
|
||||
data: data1.map(value => value.value),
|
||||
borderColor: 'rgb(53, 162, 235)',
|
||||
backgroundColor: 'rgba(53, 162, 235, 0.5)',
|
||||
},
|
||||
{
|
||||
label: dataset2? dataset2 : '',
|
||||
data: data2.map(value => value),
|
||||
data: data2.map(value => value.value),
|
||||
borderColor: 'rgb(255, 114, 32)' ,
|
||||
backgroundColor: 'rgba(255, 145, 0, 0.5)' ,
|
||||
},
|
||||
{
|
||||
label: dataset3? dataset3 : '',
|
||||
data: data3.map(value => value),
|
||||
data: data3.map(value => value.value),
|
||||
borderColor: 'rgb(109, 109, 109)' ,
|
||||
backgroundColor: 'rgba(90, 90, 90, 0)',
|
||||
},
|
||||
@ -125,13 +125,13 @@ export default function LineChart({ title, subtitle, data1, data2, data3, data4,
|
||||
datasets: [
|
||||
{
|
||||
label: dataset1? dataset1 : 'Dataset 1',
|
||||
data: data1.map(value => value),
|
||||
data: data1.map(value => value.value),
|
||||
borderColor: 'rgb(53, 162, 235)',
|
||||
backgroundColor: 'rgba(53, 162, 235, 0)',
|
||||
},
|
||||
{
|
||||
label: dataset2? dataset2 : '',
|
||||
data: data2.map(value => value),
|
||||
data: data2.map(value => value.value),
|
||||
borderColor: 'rgb(255, 114, 32)' ,
|
||||
backgroundColor: 'rgba(255, 145, 0, 0)' ,
|
||||
},
|
||||
@ -141,7 +141,7 @@ export default function LineChart({ title, subtitle, data1, data2, data3, data4,
|
||||
datasets: [
|
||||
{
|
||||
label: dataset1? dataset1 : 'Dataset 1',
|
||||
data: data1.map(value => value),
|
||||
data: data1.map(value => value.value),
|
||||
borderColor: 'rgb(53, 162, 235)',
|
||||
backgroundColor: 'rgba(53, 162, 235, 0)',
|
||||
},
|
||||
|
||||
@ -20,13 +20,16 @@ ChartJS.register(
|
||||
interface SingleBarInterface{
|
||||
title: string,
|
||||
subtitle: string,
|
||||
dataProps: Array<number>,
|
||||
dataProps: any,
|
||||
label: Array<string>,
|
||||
dataset: string,
|
||||
barLabel?: boolean | undefined,
|
||||
year?: boolean | undefined,
|
||||
month?: boolean | undefined,
|
||||
dataset1?: string,
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
export function SingleBar({ title, subtitle, dataProps, label, dataset, dataset1, barLabel, year, month }: SingleBarInterface) {
|
||||
@ -79,19 +82,14 @@ export function SingleBar({ title, subtitle, dataProps, label, dataset, dataset1
|
||||
{
|
||||
label: dataset,
|
||||
data: dataProps.map((value, index) => {
|
||||
return year? label[index]<=currentTime.getFullYear().toString()? value : null : month? label.indexOf(label[index])>currentTime.getMonth()? null : value : null
|
||||
return value.economia_acumulada
|
||||
}),
|
||||
backgroundColor: (value, ctx) => {
|
||||
return year? label[value.dataIndex]<=currentTime.getFullYear().toString()? '#255488' : 'transparent' : month? label.indexOf(label[value.dataIndex])<=currentTime.getMonth()? '#255488' : 'transparent' : null// parseInt(label[value.dataIndex])<=currentTime.getMonth()? '#255488' : draw('diagonal', '#C2D5FB') : null
|
||||
console.log(dataProps[value.dataIndex])
|
||||
return dataProps[value.dataIndex].dad_estimado == false ? '#255488' : '#C2d5fb'
|
||||
},
|
||||
},
|
||||
{
|
||||
label: dataset1,
|
||||
data: dataProps.map((value, index) => {
|
||||
return year? label[index]>=currentTime.getFullYear().toString()? value : null : month? label.indexOf(label[index])<=currentTime.getMonth()? null : value : null
|
||||
}),
|
||||
backgroundColor: typeof window !== 'undefined'? draw('diagonal', '#C2D5FB') : null
|
||||
}
|
||||
|
||||
],
|
||||
}
|
||||
|
||||
|
||||
@ -16,7 +16,7 @@ export default function InputUpload() {
|
||||
|
||||
function onImageChange(e: any) {
|
||||
setImages([...e.target.files]);
|
||||
console.log(e);
|
||||
// console.log(e);
|
||||
}
|
||||
|
||||
return (
|
||||
|
||||
@ -12,8 +12,8 @@ const style = {
|
||||
top: '50%',
|
||||
left: '50%',
|
||||
transform: 'translate(-50%, -50%)',
|
||||
width: '30%',
|
||||
height: '30%',
|
||||
width: 600,
|
||||
height: 500,
|
||||
bgcolor: 'background.paper',
|
||||
border: '2px solid #254F7F',
|
||||
boxShadow: 24,
|
||||
|
||||
@ -13,7 +13,7 @@ const style = {
|
||||
left: '50%',
|
||||
transform: 'translate(-50%, -50%)',
|
||||
width: '80%',
|
||||
height: '550px',
|
||||
height: '200px',
|
||||
bgcolor: 'background.paper',
|
||||
border: '2px solid #254F7F',
|
||||
boxShadow: 24,
|
||||
|
||||
@ -37,7 +37,7 @@ export default function Sidebar() {
|
||||
|
||||
const { ['user-role']: role } = parseCookies()
|
||||
|
||||
console.log(role)
|
||||
// console.log(role)
|
||||
|
||||
useEffect(() => {
|
||||
setViewModal(false)
|
||||
|
||||
@ -59,7 +59,6 @@ function MyApp({ Component, pageProps }: AppProps) {
|
||||
<>
|
||||
<Sidebar />
|
||||
<Component {...pageProps} />
|
||||
|
||||
</>
|
||||
:
|
||||
null
|
||||
|
||||
@ -1,4 +1,6 @@
|
||||
import { GetServerSideProps } from 'next'
|
||||
import Head from 'next/head'
|
||||
import { parseCookies } from 'nookies'
|
||||
import React from 'react'
|
||||
|
||||
import Chart from '../components/graph/Chart'
|
||||
@ -7,9 +9,10 @@ import Header from '../components/header/Header'
|
||||
import PageTitle from '../components/pageTitle/PageTitle'
|
||||
import { EconomiaAcumulada } from '../services/economiaAcumulada'
|
||||
import { dataEconomiaBruta } from '../services/economiaBruta'
|
||||
import getAPIClient from '../services/ssrApi'
|
||||
import { AccumulatedSavingsView } from '../styles/layouts/economy/accumulatedSavings/AccumulatedSavingsView'
|
||||
|
||||
export default function AccumulatedSavings() {
|
||||
export default function AccumulatedSavings({graphData, years}: any) {
|
||||
return (
|
||||
<AccumulatedSavingsView>
|
||||
<Head>
|
||||
@ -19,8 +22,42 @@ export default function AccumulatedSavings() {
|
||||
<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/>
|
||||
dataset1='Estimada' dataProps={graphData}
|
||||
label={years} barLabel month/>
|
||||
</section>
|
||||
</AccumulatedSavingsView>
|
||||
)
|
||||
}
|
||||
|
||||
export const getServerSideProps: GetServerSideProps = async (ctx) => {
|
||||
const apiClient = getAPIClient(ctx)
|
||||
const { ['@smartAuth-token']: token } = parseCookies(ctx)
|
||||
|
||||
let graphData = [];
|
||||
|
||||
await apiClient.post('/economy/grossMonthly').then(res => {
|
||||
graphData = res.data.data
|
||||
console.log(graphData[0].mes)
|
||||
}).catch(res => {
|
||||
console.log(res)
|
||||
})
|
||||
|
||||
const years = graphData.map((value) => value.mes)
|
||||
|
||||
if (!token) {
|
||||
return {
|
||||
redirect: {
|
||||
destination: '/',
|
||||
permanent: false
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
return {
|
||||
props: {
|
||||
graphData,
|
||||
years,
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,106 +0,0 @@
|
||||
import Box from '@mui/material/Box';
|
||||
import Button from '@mui/material/Button';
|
||||
import Modal from '@mui/material/Modal';
|
||||
import TextField from '@mui/material/TextField';
|
||||
import Typography from '@mui/material/Typography';
|
||||
import { DataGrid, GridColDef, GridValueGetterParams } from '@mui/x-data-grid';
|
||||
import React, { useState } from 'react'
|
||||
|
||||
import AdministrativeHeader from '../../components/administrativeHeader/AdministrativeHeader';
|
||||
import ClientsTable from '../../components/administrativeTables/ClientsTable';
|
||||
import BasicButton from '../../components/buttons/basicButton/BasicButton'
|
||||
import FaqButton1 from '../../components/buttons/faqButton/FaqButton1';
|
||||
import FaqButton2 from '../../components/buttons/faqButton/FaqButton2';
|
||||
import Header from '../../components/header/Header'
|
||||
import InputUpload from '../../components/inputUplaod/inputUpload';
|
||||
import { ClientsView } from '../../styles/layouts/clients/ClientsView';
|
||||
import PageTitle from '../../components/pageTitle/PageTitle';
|
||||
import ConfirmModal from '../../components/modal/ConfirmModal';
|
||||
import { ConfirmModalView } from '../../styles/layouts/modals/confirmModalView';
|
||||
import { api } from '../../services/api';
|
||||
|
||||
const style = {
|
||||
position: 'absolute' as const,
|
||||
top: '50%',
|
||||
left: '50%',
|
||||
transform: 'translate(-50%, -50%)',
|
||||
width: 900,
|
||||
height: 500,
|
||||
bgcolor: 'background.paper',
|
||||
border: '2px solid #000',
|
||||
boxShadow: 24,
|
||||
p: 4,
|
||||
overflowY: 'scroll'
|
||||
};
|
||||
|
||||
export default function clients() {
|
||||
const [client, setClient] = useState({
|
||||
name: String,
|
||||
email: String,
|
||||
password: String,
|
||||
password_confirmation: String,
|
||||
client_id: Number
|
||||
})
|
||||
|
||||
const [open, setOpen] = useState(false);
|
||||
const [openModalInativar, setOpenModalInativar] = useState(false)
|
||||
const handleOpen = () => setOpen(true);
|
||||
const handleClose = () => setOpen(false);
|
||||
|
||||
const [openModal, setOpenModal] = useState(false)
|
||||
|
||||
function handleCreateClient({name, email, password, password_confirmation, client_id}) {
|
||||
api.post('', {
|
||||
name,
|
||||
email,
|
||||
password,
|
||||
password_confirmation,
|
||||
client_id
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<div style={{display: 'flex', flexDirection: 'column', width: '100%'}}>
|
||||
<ClientsView>
|
||||
<Header name='' />
|
||||
<PageTitle title='Clientes' subtitle='Clientes Smart Energia'/>
|
||||
<div className='buttons'>
|
||||
<button className='btn2' onClick={handleOpen}>Adicionar</button>
|
||||
<button className='btn1' onClick={() => setOpenModalInativar(true)}>Inativar</button>
|
||||
</div>
|
||||
<Modal
|
||||
open={open}
|
||||
onClose={handleClose}
|
||||
aria-labelledby="modal-modal-title"
|
||||
aria-describedby="modal-modal-description"
|
||||
>
|
||||
<Box sx={style}>
|
||||
<h1>Adicionar Cliente</h1>
|
||||
<Typography sx={{color:'gray', fontSize:12}}variant="h5" gutterBottom component="div">
|
||||
Adicionar Cliente Smart Energia</Typography>
|
||||
<br />
|
||||
<TextField id="outlined-basic" label="Nome" sx={{width:350, ml:5}} variant="outlined" />
|
||||
<TextField id="outlined-basic" label="E-mail/Usuário" sx={{width:350, ml:8}} variant="outlined" />
|
||||
<TextField id="outlined-basic" label="Senha" sx={{width:350, ml:5, mt:2}} variant="outlined" />
|
||||
<TextField id="outlined-basic" label="Confirma Senha" sx={{width:350, ml:8, mt:2}} variant="outlined" />
|
||||
<TextField id="outlined-basic" label="Codigo do Cliente Smart Energia" sx={{width:350, ml:5, mt:2}} variant="outlined" />
|
||||
<InputUpload />
|
||||
<br /><br />
|
||||
<FaqButton1 title='Cancelar' onClick={()=>console.log()} />
|
||||
<FaqButton2 title='Salvar' onClick={()=>console.log()}/>
|
||||
</Box>
|
||||
</Modal>
|
||||
<section>
|
||||
<ClientsTable />
|
||||
</section>
|
||||
</ClientsView>
|
||||
|
||||
<ConfirmModal open={openModalInativar} handleIsClose={(value) => {setOpenModalInativar(value)}}>
|
||||
<ConfirmModalView>
|
||||
<BasicButton title='Confirmar' onClick={() => setOpenModalInativar(true)}/>
|
||||
<BasicButton title='Cancelar' onClick={() => setOpenModalInativar(true)}/>
|
||||
</ConfirmModalView>
|
||||
</ConfirmModal>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
237
src/pages/administrative/clients/index.tsx
Normal file
237
src/pages/administrative/clients/index.tsx
Normal file
@ -0,0 +1,237 @@
|
||||
import Box from '@mui/material/Box';
|
||||
import Button from '@mui/material/Button';
|
||||
import Modal from '@mui/material/Modal';
|
||||
import TextField from '@mui/material/TextField';
|
||||
import Typography from '@mui/material/Typography';
|
||||
import React, { useState } from 'react'
|
||||
|
||||
import Snackbar from '@mui/material/Snackbar';
|
||||
import MuiAlert, { AlertProps } from '@mui/material/Alert';
|
||||
import ClientsTable from '../../../components/administrativeTables/ClientsTable';
|
||||
import BasicButton from '../../../components/buttons/basicButton/BasicButton'
|
||||
import FaqButton1 from '../../../components/buttons/faqButton/FaqButton1';
|
||||
import FaqButton2 from '../../../components/buttons/faqButton/FaqButton2';
|
||||
import Header from '../../../components/header/Header'
|
||||
import InputUpload from '../../../components/inputUplaod/inputUpload';
|
||||
import { ClientsView } from '../../../styles/layouts/clients/ClientsView';
|
||||
import PageTitle from '../../../components/pageTitle/PageTitle';
|
||||
import ConfirmModal from '../../../components/modal/ConfirmModal';
|
||||
import { ConfirmModalView } from '../../../styles/layouts/modals/confirmModalView';
|
||||
import { api } from '../../../services/api';
|
||||
import { parseCookies } from 'nookies';
|
||||
import { GetServerSideProps } from 'next';
|
||||
import getAPIClient from '../../../services/ssrApi';
|
||||
|
||||
const style = {
|
||||
position: 'absolute' as const,
|
||||
top: '50%',
|
||||
left: '50%',
|
||||
transform: 'translate(-50%, -50%)',
|
||||
width: 900,
|
||||
height: 500,
|
||||
bgcolor: 'background.paper',
|
||||
border: '2px solid #000',
|
||||
boxShadow: 24,
|
||||
p: 4,
|
||||
overflowY: 'scroll'
|
||||
};
|
||||
|
||||
const Alert = React.forwardRef<HTMLDivElement, AlertProps>(function Alert(
|
||||
props,
|
||||
ref,
|
||||
) {
|
||||
return <MuiAlert elevation={6} ref={ref} variant="filled" {...props} />;
|
||||
});
|
||||
|
||||
export default function clients({clients}) {
|
||||
const [client, setClient] = useState<any>({
|
||||
name: String,
|
||||
email: String,
|
||||
password: String,
|
||||
password_confirmation: String,
|
||||
client_id: Number
|
||||
})
|
||||
const [selectedClients, setSelectedClients] = useState([])
|
||||
|
||||
const [open, setOpen] = useState(false);
|
||||
const [openModalInativar, setOpenModalInativar] = useState(false)
|
||||
const handleOpen = () => setOpen(true);
|
||||
const handleClose = () => setOpen(false);
|
||||
|
||||
const [openModal, setOpenModal] = useState(false)
|
||||
|
||||
//
|
||||
const [openSnackSuccess, setOpenSnackSuccess] = useState<boolean>(false);
|
||||
const [openSnackError, setOpenSnackError] = useState<boolean>(false);
|
||||
const [openSnackSuccessDelete, setOpenSnackSuccessDelete] = useState<boolean>(false);
|
||||
const [openSnackErrorDelete, setOpenSnackErrorDelete] = useState<boolean>(false);
|
||||
|
||||
const handleCloseSnack = (event?: React.SyntheticEvent | Event, reason?: string) => {
|
||||
if (reason === 'clickaway') {
|
||||
return;
|
||||
}
|
||||
|
||||
setOpenSnackError(false);
|
||||
setOpenSnackSuccess(false);
|
||||
};
|
||||
|
||||
const handleCloseSnackDelete = (event?: React.SyntheticEvent | Event, reason?: string) => {
|
||||
if (reason === 'clickaway') {
|
||||
return;
|
||||
}
|
||||
|
||||
setOpenSnackErrorDelete(false);
|
||||
setOpenSnackSuccessDelete(false);
|
||||
};
|
||||
//
|
||||
|
||||
function handleCreateClient({name, email, password, password_confirmation, client_id}) {
|
||||
api.post('/user', {
|
||||
name,
|
||||
email,
|
||||
password,
|
||||
password_confirmation,
|
||||
client_id
|
||||
}).then(res => {
|
||||
setOpenSnackSuccess(true)
|
||||
setOpenModalInativar(false)
|
||||
window.location.reload()
|
||||
}).catch(res => {
|
||||
setOpenSnackError(true)
|
||||
})
|
||||
}
|
||||
async function handleDeleteClient(id: any) {
|
||||
await id.map(client => {
|
||||
api.delete(`/user/${client}`).then(res => {
|
||||
setOpenSnackSuccessDelete(true)
|
||||
setOpenModalInativar(false)
|
||||
window.location.reload()
|
||||
}).catch(res => setOpenSnackErrorDelete(true))
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<div style={{display: 'flex', flexDirection: 'column', width: '100%'}}>
|
||||
<Snackbar open={openSnackSuccess} autoHideDuration={4000} onClose={handleCloseSnack}>
|
||||
<Alert onClose={handleCloseSnack} severity="success" sx={{ width: '100%' }}>
|
||||
notificação cadastrada com sucesso!
|
||||
</Alert>
|
||||
</Snackbar>
|
||||
<Snackbar open={openSnackError} autoHideDuration={4000} onClose={handleCloseSnack}>
|
||||
<Alert onClose={handleCloseSnack} severity="error" sx={{ width: '100%' }}>
|
||||
Notificação não cadastrada!
|
||||
</Alert>
|
||||
</Snackbar>
|
||||
|
||||
<Snackbar open={openSnackSuccessDelete} autoHideDuration={4000} onClose={handleCloseSnackDelete}>
|
||||
<Alert onClose={handleCloseSnackDelete} severity="success" sx={{ width: '100%' }}>
|
||||
notificação excluida com sucesso!
|
||||
</Alert>
|
||||
</Snackbar>
|
||||
<Snackbar open={openSnackErrorDelete} autoHideDuration={4000} onClose={handleCloseSnackDelete}>
|
||||
<Alert onClose={handleCloseSnackDelete} severity="error" sx={{ width: '100%' }}>
|
||||
Notificação não excluida!
|
||||
</Alert>
|
||||
</Snackbar>
|
||||
|
||||
<ClientsView>
|
||||
<Header name='' />
|
||||
<PageTitle title='Clientes' subtitle='Clientes Smart Energia'/>
|
||||
<div className='buttons'>
|
||||
<button className='btn2' onClick={handleOpen}>Adicionar</button>
|
||||
<button className='btn1' onClick={() => setOpenModalInativar(true)}>Inativar</button>
|
||||
</div>
|
||||
<section>
|
||||
<ClientsTable clients={clients} onChange={value => {
|
||||
setSelectedClients(value)
|
||||
}}/>
|
||||
</section>
|
||||
</ClientsView>
|
||||
|
||||
<Modal
|
||||
open={open}
|
||||
onClose={handleClose}
|
||||
aria-labelledby="modal-modal-title"
|
||||
aria-describedby="modal-modal-description"
|
||||
>
|
||||
<Box sx={style}>
|
||||
<h1>Adicionar Cliente</h1>
|
||||
<Typography sx={{color:'gray', fontSize:12}}variant="h5" gutterBottom component="div">
|
||||
Adicionar Cliente Smart Energia</Typography>
|
||||
<br />
|
||||
<TextField id="outlined-basic" label="Nome" sx={{width:350, ml:5}} onChange={(value) => {
|
||||
setClient({
|
||||
...client,
|
||||
name: value.target.value
|
||||
})
|
||||
}} variant="outlined" />
|
||||
<TextField id="outlined-basic" label="E-mail/Usuário" sx={{width:350, ml:8}} onChange={(value) => {
|
||||
setClient({
|
||||
...client,
|
||||
email: value.target.value
|
||||
})
|
||||
}} variant="outlined" />
|
||||
<TextField id="outlined-basic" label="Senha" sx={{width:350, ml:5, mt:2}} onChange={(value) => {
|
||||
setClient({
|
||||
...client,
|
||||
password: value.target.value
|
||||
})
|
||||
}} variant="outlined" />
|
||||
<TextField id="outlined-basic" label="Confirma Senha" sx={{width:350, ml:8, mt:2}} onChange={(value) => {
|
||||
setClient({
|
||||
...client,
|
||||
password_confirmation: value.target.value
|
||||
})
|
||||
}} variant="outlined" />
|
||||
<TextField id="outlined-basic" label="Codigo do Cliente Smart Energia" sx={{width:350, ml:5, mt:2}} onChange={(value) => {
|
||||
setClient({
|
||||
...client,
|
||||
client_id: value.target.value
|
||||
})
|
||||
}} variant="outlined" />
|
||||
<InputUpload />
|
||||
<br /><br />
|
||||
<FaqButton1 title='Cancelar' onClick={() => console.log()} />
|
||||
<FaqButton2 title='Salvar' onClick={() => handleCreateClient(client)}/>
|
||||
</Box>
|
||||
</Modal>
|
||||
<ConfirmModal open={openModalInativar} handleIsClose={(value) => {setOpenModalInativar(value)}}>
|
||||
<PageTitle title='Excluir Cliente' subtitle='deseja realmente excluir os clientes selecionadas?'/>
|
||||
<ConfirmModalView>
|
||||
<BasicButton title='Confirmar' onClick={() => handleDeleteClient(selectedClients)}/>
|
||||
<BasicButton title='Cancelar' onClick={() => setOpenModalInativar(true)}/>
|
||||
</ConfirmModalView>
|
||||
</ConfirmModal>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export const getServerSideProps: GetServerSideProps = async (ctx) => {
|
||||
const apiClient = getAPIClient(ctx)
|
||||
const { ['@smartAuth-token']: token } = parseCookies(ctx)
|
||||
|
||||
let clients = [];
|
||||
|
||||
await apiClient.get('/user').then(res => {
|
||||
console.log(res)
|
||||
clients = res.data.data
|
||||
console.log(clients)
|
||||
}).catch(res => {
|
||||
// console.log(res)
|
||||
})
|
||||
|
||||
if (!token) {
|
||||
return {
|
||||
redirect: {
|
||||
destination: '/',
|
||||
permanent: false
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
props: {
|
||||
clients,
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -10,7 +10,10 @@ import Link from 'next/link'
|
||||
import { useRouter } from 'next/router'
|
||||
import React, { useEffect, useState } from 'react'
|
||||
import { api } from '../../../services/api';
|
||||
|
||||
import ConfirmModal from '../../../components/modal/ConfirmModal';
|
||||
import { ConfirmModalView } from '../../../styles/layouts/modals/confirmModalView';
|
||||
import Snackbar from '@mui/material/Snackbar';
|
||||
import MuiAlert, { AlertProps } from '@mui/material/Alert';
|
||||
|
||||
import FaqTable from '../../../components/administrativeTables/FaqTable';
|
||||
import BasicButton from '../../../components/buttons/basicButton/BasicButton';
|
||||
@ -23,6 +26,7 @@ import getAPIClient from '../../../services/ssrApi';
|
||||
import { GetServerSideProps } from 'next';
|
||||
import { parseCookies } from 'nookies';
|
||||
|
||||
|
||||
const style = {
|
||||
position: 'absolute' as const,
|
||||
top: '50%',
|
||||
@ -36,13 +40,69 @@ const style = {
|
||||
p: 4,
|
||||
};
|
||||
|
||||
const Alert = React.forwardRef<HTMLDivElement, AlertProps>(function Alert(
|
||||
props,
|
||||
ref,
|
||||
) {
|
||||
return <MuiAlert elevation={6} ref={ref} variant="filled" {...props} />;
|
||||
});
|
||||
|
||||
|
||||
type FaqInterface = {
|
||||
question: string;
|
||||
answer: string;
|
||||
|
||||
}
|
||||
export default function Sidebar({faqData} : any ) {
|
||||
|
||||
|
||||
const [openModalInativar, setOpenModalInativar] = useState<boolean>(false)
|
||||
const [openSnackSuccess, setOpenSnackSuccess] = useState<boolean>(false);
|
||||
const [openSnackError, setOpenSnackError] = useState<boolean>(false);
|
||||
const [openSnackSuccessDelete, setOpenSnackSuccessDelete] = useState<boolean>(false);
|
||||
const [openSnackErrorDelete, setOpenSnackErrorDelete] = useState<boolean>(false);
|
||||
|
||||
|
||||
|
||||
const handleCloseSnack = (event?: React.SyntheticEvent | Event, reason?: string) => {
|
||||
if (reason === 'clickaway') {
|
||||
return;
|
||||
}
|
||||
|
||||
setOpenSnackError(false);
|
||||
setOpenSnackSuccess(false);
|
||||
};
|
||||
|
||||
|
||||
const handleCloseSnackDelete = (event?: React.SyntheticEvent | Event, reason?: string) => {
|
||||
if (reason === 'clickaway') {
|
||||
return;
|
||||
}
|
||||
|
||||
setOpenSnackErrorDelete(false);
|
||||
setOpenSnackSuccessDelete(false);
|
||||
};
|
||||
|
||||
async function handleDeleteNotification(id: any) {
|
||||
await id.map((value) => {
|
||||
api.delete(`/faq/${value}`).then(res => {
|
||||
setOpenSnackSuccessDelete(true)
|
||||
setOpenModalInativar(false)
|
||||
window.location.reload()
|
||||
}).catch(res => setOpenSnackErrorDelete(true))
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
|
||||
const [faq, setFaq] = useState<FaqInterface>({
|
||||
question: '',
|
||||
answer : '',
|
||||
|
||||
})
|
||||
|
||||
const [selectedfaq, setSelectedfaq] = useState([])
|
||||
|
||||
export default function Sidebar({faqData}: any) {
|
||||
async function handleRegisterNewFaq({question, answer}: FaqInterface) {
|
||||
await api.post('/faq', {
|
||||
"question": question,
|
||||
@ -51,10 +111,7 @@ export default function Sidebar({faqData}: any) {
|
||||
}).then(res => console.log(res.data))
|
||||
}
|
||||
|
||||
const [faq, setFaq] = useState<FaqInterface>({
|
||||
question: '',
|
||||
answer: '',
|
||||
})
|
||||
|
||||
|
||||
|
||||
const [open, setOpen] = React.useState(false);
|
||||
@ -68,9 +125,32 @@ export default function Sidebar({faqData}: any) {
|
||||
|
||||
<PageTitle title='Perguntas Frequentes' subtitle='Perguntas Frequentes'/>
|
||||
|
||||
<Snackbar open={openSnackSuccess} autoHideDuration={4000} onClose={handleCloseSnack}>
|
||||
<Alert onClose={handleCloseSnack} severity="success" sx={{ width: '100%' }}>
|
||||
Notificação cadastrada com sucesso!
|
||||
</Alert>
|
||||
</Snackbar>
|
||||
<Snackbar open={openSnackError} autoHideDuration={4000} onClose={handleCloseSnack}>
|
||||
<Alert onClose={handleCloseSnack} severity="error" sx={{ width: '100%' }}>
|
||||
Notificação não cadastrada!
|
||||
</Alert>
|
||||
</Snackbar>
|
||||
|
||||
<Snackbar open={openSnackSuccessDelete} autoHideDuration={4000} onClose={handleCloseSnackDelete}>
|
||||
<Alert onClose={handleCloseSnackDelete} severity="success" sx={{ width: '100%' }}>
|
||||
notificação excluida com sucesso!
|
||||
</Alert>
|
||||
</Snackbar>
|
||||
<Snackbar open={openSnackErrorDelete} autoHideDuration={4000} onClose={handleCloseSnackDelete}>
|
||||
<Alert onClose={handleCloseSnackDelete} severity="error" sx={{ width: '100%' }}>
|
||||
Notificação não excluida!
|
||||
</Alert>
|
||||
</Snackbar>
|
||||
|
||||
<div className='buttons'>
|
||||
<button className='btn2' value="Refresh Page"onClick={handleOpen} >Adicionar</button>
|
||||
<button className='btn1' onClick={handleOpen}>Inativar</button>
|
||||
<button className='btn1' onClick={() => setOpenModalInativar(true)}>Inativar</button>
|
||||
|
||||
|
||||
</div>
|
||||
<Modal
|
||||
@ -99,7 +179,15 @@ export default function Sidebar({faqData}: any) {
|
||||
</Box>
|
||||
|
||||
</Modal>
|
||||
<FaqTable questionData={faqData}/>
|
||||
<FaqTable questionData={faqData} onChange={value => setSelectedfaq(value)}/>
|
||||
|
||||
<ConfirmModal open={openModalInativar} handleIsClose={(value) => {setOpenModalInativar(value)}}>
|
||||
<PageTitle title='Excluir notificação' subtitle='deseja realmente excluir as notificações selecionadas?'/>
|
||||
<ConfirmModalView>
|
||||
<BasicButton title='Confirmar' onClick={() => handleDeleteNotification(selectedfaq)}/>
|
||||
<BasicButton title='Cancelar' onClick={() => setOpenModalInativar(false)}/>
|
||||
</ConfirmModalView>
|
||||
</ConfirmModal>
|
||||
|
||||
</FaqView>
|
||||
</>
|
||||
@ -109,16 +197,14 @@ export default function Sidebar({faqData}: any) {
|
||||
export const getServerSideProps: GetServerSideProps = async (ctx) => {
|
||||
const apiClient = getAPIClient(ctx)
|
||||
const { ['@smartAuth-token']: token } = parseCookies(ctx)
|
||||
console.log('teste')
|
||||
|
||||
let faqData = [];
|
||||
|
||||
|
||||
await apiClient.get('/faq').then(res => {
|
||||
faqData = res.data
|
||||
}).catch(res => {
|
||||
console.log(res)
|
||||
})
|
||||
console.table(faqData);
|
||||
await apiClient.get('/faq').then(res => {
|
||||
faqData = res.data.data
|
||||
}).catch(res => {
|
||||
// console.log(res)
|
||||
})
|
||||
|
||||
if (!token) {
|
||||
return {
|
||||
|
||||
@ -19,57 +19,6 @@ export default function clients() {
|
||||
|
||||
return (
|
||||
<div style={{display: 'flex', flexDirection: 'column', width: '100%'}}>
|
||||
<ClientsView>
|
||||
<Header name='' />
|
||||
<PageTitle title='Clientes' subtitle='Clientes Smart Energia'/>
|
||||
|
||||
<section>
|
||||
<BasicButton title='Adicionar' onClick={() => setOpenModal(true)}/>
|
||||
<BasicButton title='Inativar' onClick={() => setOpenModalInativar(true)}/>
|
||||
</section>
|
||||
|
||||
<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>
|
||||
)
|
||||
}
|
||||
|
||||
@ -60,6 +60,7 @@ interface NotificationInterface {
|
||||
users: object[]
|
||||
}
|
||||
|
||||
// teste
|
||||
export default function notification({clients, notifications}) {
|
||||
|
||||
const [notification, setNotification] = useState<NotificationInterface>({
|
||||
@ -126,7 +127,7 @@ export default function notification({clients, notifications}) {
|
||||
|
||||
<Snackbar open={openSnackSuccess} autoHideDuration={4000} onClose={handleCloseSnack}>
|
||||
<Alert onClose={handleCloseSnack} severity="success" sx={{ width: '100%' }}>
|
||||
notificação cadastrada com sucesso!
|
||||
Notificação cadastrada com sucesso!
|
||||
</Alert>
|
||||
</Snackbar>
|
||||
<Snackbar open={openSnackError} autoHideDuration={4000} onClose={handleCloseSnack}>
|
||||
@ -147,10 +148,10 @@ export default function notification({clients, notifications}) {
|
||||
</Snackbar>
|
||||
|
||||
<div className='buttons'>
|
||||
<button className='btn2' onClick={handleOpen}>Disparar nova</button>
|
||||
<button className='btn1' onClick={() => setOpenModalInativar(true)}>Inativar</button>
|
||||
|
||||
<button className='btn2' onClick={handleOpen}>Disparar nova</button>
|
||||
<button className='btn1' onClick={() => setOpenModalInativar(true)}>Inativar</button>
|
||||
</div>
|
||||
|
||||
<NotificationsTable notifications={notifications} onChange={(value) => setSelectedNotifications(value)}/>
|
||||
<Modal
|
||||
open={open}
|
||||
@ -252,13 +253,13 @@ export const getServerSideProps: GetServerSideProps = async (ctx) => {
|
||||
await apiClient.get('/user').then(res => {
|
||||
clients = res.data
|
||||
}).catch(res => {
|
||||
console.log(res)
|
||||
// console.log(res)
|
||||
})
|
||||
|
||||
await apiClient.get('/notification').then(res => {
|
||||
notifications = res.data
|
||||
notifications = res.data.data
|
||||
}).catch(res => {
|
||||
console.log(res)
|
||||
// console.log(res)
|
||||
})
|
||||
|
||||
if (!token) {
|
||||
|
||||
@ -1,4 +1,6 @@
|
||||
import { GetServerSideProps } from 'next'
|
||||
import Head from 'next/head'
|
||||
import { parseCookies } from 'nookies'
|
||||
import React from 'react'
|
||||
|
||||
import Chart from '../components/graph/Chart'
|
||||
@ -7,9 +9,23 @@ import Header from '../components/header/Header'
|
||||
import PageTitle from '../components/pageTitle/PageTitle'
|
||||
import { dataEconomiaBruta } from '../services/economiaBruta'
|
||||
import { dataEconomiaIndicador } from '../services/economiaIndicador'
|
||||
import getAPIClient from '../services/ssrApi'
|
||||
import { CostIndicatorView } from '../styles/layouts/economy/costIndicator/CostIndicatorView'
|
||||
|
||||
export default function CostIndicator() {
|
||||
function addMissingMonths(data) {
|
||||
console.log(data[0].mes.slice(1, 1))
|
||||
}
|
||||
|
||||
function verifyDataByYear(data) {
|
||||
if (data.length === 12)
|
||||
return true
|
||||
else
|
||||
return false
|
||||
}
|
||||
|
||||
export default function CostIndicator({graphData}: any) {
|
||||
console.log(graphData.filter((value, index) => value.mes.slice(3, 7).includes('2021')).map(value => value.custo_unit))
|
||||
|
||||
return (
|
||||
<CostIndicatorView>
|
||||
<Head>
|
||||
@ -18,8 +34,39 @@ export default function CostIndicator() {
|
||||
<Header name='' />
|
||||
<PageTitle title='Indicador de Custo' subtitle='Valores em R$/MWh'/>
|
||||
<section>
|
||||
<Chart title='Indicador de Custo' subtitle='(Valores em R$/MWh)' data1={dataEconomiaIndicador.data1} data2={dataEconomiaIndicador.data2} label={dataEconomiaIndicador.labels} barLabel />
|
||||
<Chart title='Indicador de Custo' subtitle='(Valores em R$/MWh)' data1={graphData.filter((value, index) => value.mes.slice(3, 7).includes('2021'))}
|
||||
data2={graphData.filter((value, index) => value.mes.slice(3, 7).includes('2022'))}
|
||||
label={['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'ago', 'set', 'out', 'nov', 'dez']} barLabel />
|
||||
</section>
|
||||
</CostIndicatorView>
|
||||
)
|
||||
}
|
||||
|
||||
export const getServerSideProps: GetServerSideProps = async (ctx) => {
|
||||
const apiClient = getAPIClient(ctx)
|
||||
const { ['@smartAuth-token']: token } = parseCookies(ctx)
|
||||
|
||||
let graphData = [];
|
||||
|
||||
await apiClient.post('/economy/MWh').then(res => {
|
||||
graphData = res.data.data
|
||||
console.log(graphData[0].mes)
|
||||
}).catch(res => {
|
||||
console.log(res)
|
||||
})
|
||||
|
||||
if (!token) {
|
||||
return {
|
||||
redirect: {
|
||||
destination: '/',
|
||||
permanent: false
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
props: {
|
||||
graphData,
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -22,7 +22,7 @@ import { parseCookies } from 'nookies'
|
||||
import { GetServerSideProps } from 'next'
|
||||
import getAPIClient from '../services/ssrApi'
|
||||
|
||||
export default function Dashboard() {
|
||||
export default function Dashboard({grossAnualGraph, grossAnualYears} : any) {
|
||||
|
||||
return (
|
||||
<DashboardView>
|
||||
@ -44,7 +44,10 @@ export default function Dashboard() {
|
||||
|
||||
<section className='dashboard'>
|
||||
<GraphCard title='Consumo' subtitle='Gráfico de Consumo'>
|
||||
<SingleBar title='Economia Bruta' subtitle='(Valores em R$ mil)' label={dataEconomiaBruta.labels} dataset='Consolidada' dataset1='Estimada' dataProps={dataEconomiaBruta.data} barLabel year/>
|
||||
<SingleBar title='Economia Bruta' subtitle='(Valores em R$ mil)'
|
||||
dataset='Consolidada' dataset1='Estimada'
|
||||
dataProps={grossAnualGraph}
|
||||
label={grossAnualYears} barLabel year/>
|
||||
</GraphCard>
|
||||
<GraphCard title='Economia Acumulado' subtitle='Economia Acumulada' singleBar>
|
||||
<SingleBar title='Economia Bruta Estimada e Acumulada' subtitle='(Valores em R$)' dataset='Acumulada' dataset1='Estimado' label={EconomiaAcumulada.label} dataProps={EconomiaAcumulada.data2} barLabel month/>
|
||||
@ -66,8 +69,24 @@ export default function Dashboard() {
|
||||
}
|
||||
|
||||
export const getServerSideProps: GetServerSideProps = async (ctx) => {
|
||||
const apiClient = getAPIClient(ctx)
|
||||
const { ['@smartAuth-token']: token } = parseCookies(ctx)
|
||||
|
||||
let grossAnualGraph = [];
|
||||
|
||||
|
||||
|
||||
await apiClient.post('/economy/grossAnnual').then(res => {
|
||||
grossAnualGraph = res.data.data
|
||||
console.log(grossAnualGraph[0])
|
||||
}).catch(res => {
|
||||
console.log(res)
|
||||
})
|
||||
|
||||
|
||||
|
||||
const grossAnualYears = grossAnualGraph.map((value) => value.ano)
|
||||
|
||||
if (!token) {
|
||||
return {
|
||||
redirect: {
|
||||
@ -77,7 +96,11 @@ export const getServerSideProps: GetServerSideProps = async (ctx) => {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
return {
|
||||
props: {}
|
||||
props: {
|
||||
grossAnualGraph,
|
||||
grossAnualYears,
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -34,16 +34,14 @@ export default function commonQuestions({faqData}) {
|
||||
export const getServerSideProps: GetServerSideProps = async (ctx) => {
|
||||
const apiClient = getAPIClient(ctx)
|
||||
const { ['@smartAuth-token']: token } = parseCookies(ctx)
|
||||
console.log('teste')
|
||||
let faqData = [];
|
||||
|
||||
|
||||
await apiClient.get('/faq').then(res => {
|
||||
faqData = res.data
|
||||
}).catch(res => {
|
||||
console.log(res)
|
||||
})
|
||||
console.table(faqData);
|
||||
await apiClient.get('/faq').then(res => {
|
||||
faqData = res.data
|
||||
}).catch(res => {
|
||||
// console.log(res)
|
||||
})
|
||||
|
||||
if (!token) {
|
||||
return {
|
||||
|
||||
@ -1,4 +1,6 @@
|
||||
import { GetServerSideProps } from 'next'
|
||||
import Head from 'next/head'
|
||||
import { parseCookies } from 'nookies'
|
||||
import React from 'react'
|
||||
|
||||
import Chart from '../components/graph/Chart'
|
||||
@ -6,10 +8,23 @@ import { SingleBar } from '../components/graph/SingleBar'
|
||||
import Header from '../components/header/Header'
|
||||
import PageTitle from '../components/pageTitle/PageTitle'
|
||||
import { dataEconomiaBruta } from '../services/economiaBruta'
|
||||
import getAPIClient from '../services/ssrApi'
|
||||
|
||||
import { GrossSavingsView } from '../styles/layouts/economy/grossSavings/GrossSavings'
|
||||
|
||||
export default function GrossSavings() {
|
||||
function addMissingMonths(data) {
|
||||
console.log(data[0].mes.slice(1, 1))
|
||||
}
|
||||
|
||||
function verifyDataByYear(data) {
|
||||
if (data.length === 12)
|
||||
return true
|
||||
else
|
||||
return false
|
||||
}
|
||||
|
||||
|
||||
export default function GrossSavings({graphData, years}: any) {
|
||||
return (
|
||||
<GrossSavingsView>
|
||||
<Head>
|
||||
@ -18,8 +33,45 @@ export default function GrossSavings() {
|
||||
<Header name='' />
|
||||
<PageTitle title='Economia Bruta' subtitle='Economia Bruta Estimada e Acumulada anual (Valores em R$ mil)' />
|
||||
<section>
|
||||
<SingleBar title='Economia Bruta' subtitle='(Valores em R$ mil)' label={dataEconomiaBruta.labels} dataset='Consolidada' dataset1='Estimada' dataProps={dataEconomiaBruta.data} barLabel year/>
|
||||
<SingleBar title='Economia Bruta' subtitle='(Valores em R$ mil)'
|
||||
dataset='Consolidada' dataset1='Estimada'
|
||||
|
||||
dataProps={graphData}
|
||||
label={years} barLabel year/>
|
||||
|
||||
</section>
|
||||
</GrossSavingsView>
|
||||
)
|
||||
}
|
||||
export const getServerSideProps: GetServerSideProps = async (ctx) => {
|
||||
const apiClient = getAPIClient(ctx)
|
||||
const { ['@smartAuth-token']: token } = parseCookies(ctx)
|
||||
|
||||
let graphData = [];
|
||||
|
||||
await apiClient.post('/economy/grossAnnual').then(res => {
|
||||
graphData = res.data.data
|
||||
console.log(graphData[0])
|
||||
}).catch(res => {
|
||||
console.log(res)
|
||||
})
|
||||
|
||||
const years = graphData.map((value) => value.ano)
|
||||
console.log(years)
|
||||
if (!token) {
|
||||
return {
|
||||
redirect: {
|
||||
destination: '/',
|
||||
permanent: false
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
return {
|
||||
props: {
|
||||
graphData,
|
||||
years,
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -101,7 +101,6 @@ export default function Home() {
|
||||
|
||||
<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>
|
||||
)
|
||||
}
|
||||
|
||||
@ -34,16 +34,14 @@ export default function Notifications({notificationData}: any) {
|
||||
export const getServerSideProps: GetServerSideProps = async (ctx) => {
|
||||
const apiClient = getAPIClient(ctx)
|
||||
const { ['@smartAuth-token']: token } = parseCookies(ctx)
|
||||
console.log('teste')
|
||||
|
||||
let notificationData = [];
|
||||
|
||||
|
||||
await apiClient.get('/notification').then(res => {
|
||||
notificationData = res.data
|
||||
}).catch(res => {
|
||||
console.log(res)
|
||||
})
|
||||
console.table(notificationData);
|
||||
await apiClient.get('/notification').then(res => {
|
||||
notificationData = res.data
|
||||
}).catch(res => {
|
||||
// console.log(res)
|
||||
})
|
||||
|
||||
if (!token) {
|
||||
return {
|
||||
|
||||
@ -1,37 +1,126 @@
|
||||
import MenuItem from '@mui/material/MenuItem';
|
||||
import Select, { SelectChangeEvent } from '@mui/material/Select';
|
||||
import { GetServerSideProps } from 'next';
|
||||
import Head from 'next/head';
|
||||
import Link from 'next/link';
|
||||
import { useRouter } from 'next/router'
|
||||
import { parseCookies } from 'nookies';
|
||||
import React, { useEffect, useState } from 'react'
|
||||
|
||||
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 { api } from '../../services/api';
|
||||
import { EconomiaAcumulada } from '../../services/economiaAcumulada';
|
||||
import { EvolucaoPld } from '../../services/evolucaoPld';
|
||||
import getAPIClient from '../../services/ssrApi';
|
||||
import { GoBack, PldGraphView, PldTableView } from '../../styles/layouts/pld/PldView'
|
||||
import RenderIf from '../../utils/renderIf'
|
||||
|
||||
export default function region() {
|
||||
interface pldInterface {
|
||||
tableData: any,
|
||||
graphByHourData: any,
|
||||
graphByMonthData: any
|
||||
}
|
||||
|
||||
export default function pld({tableData, graphByHourData, graphByMonthData}: pldInterface) {
|
||||
const router = useRouter()
|
||||
const { region } = router.query
|
||||
|
||||
const [date, setDate] = useState('');
|
||||
const [select, setSelect] = useState('NORDESTE');
|
||||
const [page, setPage] = useState<string>('table')
|
||||
const [age, setAge] = React.useState('');
|
||||
const [day, setDay] = useState<string>('2')
|
||||
|
||||
const [dataByDay, setDataByDay] = useState([])
|
||||
|
||||
const [sul, setSul] = useState([])
|
||||
const [norte, setNorte] = useState([])
|
||||
const [sudeste, setSudeste] = useState([])
|
||||
const [nordeste, setNordeste] = useState([])
|
||||
|
||||
const handleChange = (event: SelectChangeEvent) => {
|
||||
setAge(event.target.value);
|
||||
setSelect(event.target.value);
|
||||
};
|
||||
const handleChangeDay = (event: SelectChangeEvent) => {
|
||||
setDay(event.target.value);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
console.log(page)
|
||||
}, [page])
|
||||
const label = ['1', '2', '3', '4', '5', '6', '7', '8', '8', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30']
|
||||
|
||||
function handleGreen(minimo, mi, ma, maximo) {
|
||||
function getDataByDay() {
|
||||
api.post('/pld/daily', {
|
||||
"limit": 20,
|
||||
"offset": 0,
|
||||
"filters": [
|
||||
{"type" : "=", "field" : "mes_ref", "value": `${day}/2022`, "row": true},
|
||||
{"type" : "=", "field" : "pld.submercado", "value": select}
|
||||
],
|
||||
"order": [{ "field": "day_calc", "direction": "asc" }]
|
||||
}).then(res => {
|
||||
setDataByDay(res.data.data)
|
||||
}).catch(exception => console.log(exception))
|
||||
}
|
||||
|
||||
function getDataByHour() {
|
||||
api.post('/pld/schedule', {
|
||||
"limit": 20,
|
||||
"offset": 0,
|
||||
"filters": [
|
||||
{"type" : "=", "field" : "dia_num", "value": date, "row": true},
|
||||
{"type" : "=", "field" : "submercado", "value": "SUL"}
|
||||
],
|
||||
"order": [{ "field": "hour", "direction": "asc" }]
|
||||
}).then(res => {
|
||||
setSul(res.data.data)
|
||||
}).catch(exception => console.log(exception))
|
||||
|
||||
api.post('/pld/schedule', {
|
||||
"limit": 20,
|
||||
"offset": 0,
|
||||
"filters": [
|
||||
{"type" : "=", "field" : "dia_num", "value": date, "row": true},
|
||||
{"type" : "=", "field" : "submercado", "value": "SUDESTE"}
|
||||
],
|
||||
"order": [{ "field": "hour", "direction": "asc" }]
|
||||
}).then(res => {
|
||||
setSudeste(res.data.data)
|
||||
}).catch(exception => console.log(exception))
|
||||
|
||||
api.post('/pld/schedule', {
|
||||
"limit": 20,
|
||||
"offset": 0,
|
||||
"filters": [
|
||||
{"type" : "=", "field" : "dia_num", "value": date, "row": true},
|
||||
{"type" : "=", "field" : "submercado", "value": "NORTE"}
|
||||
],
|
||||
"order": [{ "field": "hour", "direction": "asc" }]
|
||||
}).then(res => {
|
||||
setNorte(res.data.data)
|
||||
}).catch(exception => console.log(exception))
|
||||
|
||||
api.post('/pld/schedule', {
|
||||
"limit": 20,
|
||||
"offset": 0,
|
||||
"filters": [
|
||||
{"type" : "=", "field" : "dia_num", "value": date, "row": true},
|
||||
{"type" : "=", "field" : "submercado", "value": "NORDESTE"}
|
||||
],
|
||||
"order": [{ "field": "hour", "direction": "asc" }]
|
||||
}).then(res => {
|
||||
setNordeste(res.data.data)
|
||||
}).catch(exception => console.log(exception))
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
getDataByHour()
|
||||
getDataByDay()
|
||||
console.log(dataByDay)
|
||||
}, [date, day, select])
|
||||
|
||||
function handleCellColor(minimo, mi, ma, maximo) {
|
||||
if (minimo - mi >= 100 && minimo - mi < 200) {
|
||||
return 'green'
|
||||
} else if ( mi*2 >= 200 && mi*2 < 250 ) {
|
||||
@ -68,97 +157,19 @@ export default function region() {
|
||||
</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>
|
||||
{
|
||||
tableData.map(data => {
|
||||
return <>
|
||||
<tr>
|
||||
<td className='tg-gceh'>{data.year_month_formatted}</td>
|
||||
<td className='tg-uulg red'>{data.nordeste}</td>
|
||||
<td className='tg-gceh dullRed'>{data.norte}</td>
|
||||
<td className='tg-gceh dullGreen'>{data.sudeste}</td>
|
||||
<td className='tg-uulg red'>{data.sul}</td>
|
||||
</tr>
|
||||
</>
|
||||
})
|
||||
}
|
||||
<tr>
|
||||
<td className='tg-gceh'>Mín</td>
|
||||
<td className='tg-uulg'>xxxx</td>
|
||||
@ -200,23 +211,65 @@ export default function region() {
|
||||
<section className='toolsbar'>
|
||||
<div className='select'>
|
||||
<Select
|
||||
value={age}
|
||||
value={select}
|
||||
onChange={handleChange}
|
||||
displayEmpty
|
||||
sx={{
|
||||
width: '100%'
|
||||
}}
|
||||
>
|
||||
<MenuItem value={0}>Norte</MenuItem>
|
||||
<MenuItem value={10}>Nordeste</MenuItem>
|
||||
<MenuItem value={20}>Sul</MenuItem>
|
||||
<MenuItem value={30}>Sudeste</MenuItem>
|
||||
<MenuItem value={'NORTE'}>Norte</MenuItem>
|
||||
<MenuItem value={'NORDESTE'}>Nordeste</MenuItem>
|
||||
<MenuItem value={'SUL'}>Sul</MenuItem>
|
||||
<MenuItem value={'SUDESTE'}>Sudeste</MenuItem>
|
||||
</Select>
|
||||
</div>
|
||||
<input type="date" data-date="" data-date-format="DD MMMM YYYY" value="2015-08-09"/>
|
||||
<Select
|
||||
value={day}
|
||||
onChange={handleChangeDay}
|
||||
displayEmpty
|
||||
sx={{
|
||||
width: '100%'
|
||||
}}
|
||||
>
|
||||
<MenuItem value={'01'}>01</MenuItem>
|
||||
<MenuItem value={'02'}>02</MenuItem>
|
||||
<MenuItem value={'03'}>03</MenuItem>
|
||||
<MenuItem value={'04'}>04</MenuItem>
|
||||
<MenuItem value={'05'}>05</MenuItem>
|
||||
<MenuItem value={'06'}>06</MenuItem>
|
||||
<MenuItem value={'07'}>07</MenuItem>
|
||||
<MenuItem value={'08'}>08</MenuItem>
|
||||
<MenuItem value={'09'}>09</MenuItem>
|
||||
<MenuItem value={'10'}>10</MenuItem>
|
||||
<MenuItem value={'11'}>11</MenuItem>
|
||||
<MenuItem value={'12'}>12</MenuItem>
|
||||
<MenuItem value={'13'}>13</MenuItem>
|
||||
<MenuItem value={'14'}>14</MenuItem>
|
||||
<MenuItem value={'15'}>15</MenuItem>
|
||||
<MenuItem value={'16'}>16</MenuItem>
|
||||
<MenuItem value={'17'}>17</MenuItem>
|
||||
<MenuItem value={'18'}>18</MenuItem>
|
||||
<MenuItem value={'19'}>19</MenuItem>
|
||||
<MenuItem value={'20'}>20</MenuItem>
|
||||
<MenuItem value={'21'}>21</MenuItem>
|
||||
<MenuItem value={'22'}>22</MenuItem>
|
||||
<MenuItem value={'23'}>23</MenuItem>
|
||||
<MenuItem value={'24'}>24</MenuItem>
|
||||
<MenuItem value={'25'}>25</MenuItem>
|
||||
<MenuItem value={'26'}>26</MenuItem>
|
||||
<MenuItem value={'27'}>27</MenuItem>
|
||||
<MenuItem value={'28'}>28</MenuItem>
|
||||
<MenuItem value={'29'}>29</MenuItem>
|
||||
<MenuItem value={'30'}>30</MenuItem>
|
||||
</Select>
|
||||
<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='' />
|
||||
<LineBarChart
|
||||
data1={dataByDay} data3={dataByDay}
|
||||
dataset1={'Economia'} dataset2={'barra1'} dataset3={'2021'}
|
||||
label={EvolucaoPld.label}
|
||||
title='Evolução PLD (R$/MWh)' subtitle='' />
|
||||
</PldGraphView>
|
||||
</RenderIf>
|
||||
|
||||
@ -225,12 +278,43 @@ export default function region() {
|
||||
<PldGraphView>
|
||||
<PageTitle title='Resumo PLD - Horas' subtitle=''/>
|
||||
<section className='toolsbar'>
|
||||
<input type="date" data-date="" data-date-format="DD MMMM YYYY" value="2021-09-19"/>
|
||||
<input type="date" data-date="" data-date-format="DD MMMM YYYY" value={date} onChange={(value) => setDate(value.target.value)}/>
|
||||
<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} />
|
||||
<LineChart data1={nordeste} data2={norte} data3={sudeste} data4={sul}
|
||||
dataset1='NORDESTE' dataset2='NORTE' dataset3='SUDESTE' dataset4='SUL'
|
||||
title={`PLD - ${date}`}
|
||||
subtitle='' label={['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24']} />
|
||||
</PldGraphView>
|
||||
</RenderIf>
|
||||
</main>
|
||||
)
|
||||
}
|
||||
|
||||
export const getServerSideProps: GetServerSideProps = async (ctx) => {
|
||||
const apiClient = getAPIClient(ctx)
|
||||
const { ['@smartAuth-token']: token } = parseCookies(ctx)
|
||||
|
||||
let tableData = [];
|
||||
|
||||
await apiClient.post('/pld/list').then(res => {
|
||||
tableData = res.data.data
|
||||
}).catch(res => {
|
||||
console.log(res)
|
||||
})
|
||||
|
||||
if (!token) {
|
||||
return {
|
||||
redirect: {
|
||||
destination: '/',
|
||||
permanent: false
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
props: {
|
||||
tableData,
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -49,7 +49,7 @@ export default function ResumoOperacao() {
|
||||
// data.unidades.map((value) => {
|
||||
// console.log(`olha o valor ${value.name}`)
|
||||
// })
|
||||
console.log(unidade)
|
||||
// console.log(unidade)
|
||||
console.log(data.unidades.filter((value, index)=> value.value.includes(unidade)))
|
||||
}, [month, unidade])
|
||||
|
||||
|
||||
@ -10,6 +10,6 @@ export const EconomiaAcumulada = {
|
||||
|
||||
|
||||
label: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'ago', 'set', 'out', 'nov', 'dez'],
|
||||
label1: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30'],
|
||||
label1: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24'],
|
||||
label3: ['0', '2', '4', '6', '8', '0', '2', '4', '6', '8', '0', '2', '4', '6', '8', '0', '2', '4', '6', '8', '0', '2', '4', '6', '8', '0', '2', '4', '6', '8', '0', '2', '4', '6', '8', '0', '2', '4', '6', '8', '0', '2', '4', '6', '8', '0', '2', '4', '6', '8',]
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user