161 lines
6.6 KiB
TypeScript
161 lines
6.6 KiB
TypeScript
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 Sidebar from '../components/sidebar/Sidebar';
|
|
// import { dados } from '../services/DadosTabelaResumoOperacao';
|
|
import data from '../services/dados.json'
|
|
import { Pagination, TableView } from '../styles/layouts/ResumoOperacao/ResumoOperacaoView';
|
|
|
|
export default function ResumoOperacao() {
|
|
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);
|
|
};
|
|
|
|
useEffect(() => {
|
|
// console.log(data.unidades)
|
|
// data.unidades.map((value) => {
|
|
// console.log(`olha o valor ${value.name}`)
|
|
// })
|
|
console.log(unidade)
|
|
console.log(data.unidades.filter((value, index)=> value.value.includes(unidade)))
|
|
}, [month, unidade])
|
|
|
|
return(
|
|
<TableView>
|
|
<Head>
|
|
<title>Smart Energia - Resumo de Operação</title>
|
|
</Head>
|
|
<Header name='' />
|
|
<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 id="demo-simple-select-label">Mês</InputLabel>
|
|
<Select
|
|
labelId="demo-simple-select-label"
|
|
id="demo-simple-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>
|
|
<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={function (): void {
|
|
throw new Error('Function not implemented.');
|
|
}}/>
|
|
</CSVLink>
|
|
</div>
|
|
</TableView>
|
|
)
|
|
}
|