Table Operation Sumary
This commit is contained in:
Alex Santos
parent
30f016c60b
commit
bbf0080761
@ -1,13 +1,40 @@
|
|||||||
import React from 'react';
|
import React, { useEffect } from 'react';
|
||||||
import Header from '../components/header/Header';
|
import Header from '../components/header/Header';
|
||||||
import PageTitle from '../components/pageTitle/PageTitle';
|
import PageTitle from '../components/pageTitle/PageTitle';
|
||||||
import BasicButton from '../components/buttons/basicButton/BasicButton';
|
import BasicButton from '../components/buttons/basicButton/BasicButton';
|
||||||
import Sidebar from '../components/sidebar/Sidebar';
|
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 { Pagination, TableView } from '../styles/layouts/ResumoOperacao/ResumoOperacaoView';
|
import { Pagination, TableView } from '../styles/layouts/ResumoOperacao/ResumoOperacaoView';
|
||||||
import Head from 'next/head';
|
import Head from 'next/head';
|
||||||
|
|
||||||
export default function ResumoOperacao() {
|
export default function ResumoOperacao() {
|
||||||
|
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(
|
return(
|
||||||
<TableView>
|
<TableView>
|
||||||
<Head>
|
<Head>
|
||||||
@ -17,6 +44,53 @@ export default function ResumoOperacao() {
|
|||||||
<PageTitle title='Resumo de Operaçoes' subtitle='Operações detalhadas' />
|
<PageTitle title='Resumo de Operaçoes' subtitle='Operações detalhadas' />
|
||||||
|
|
||||||
<h3>Seletor Mês</h3>
|
<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 >
|
||||||
|
|
||||||
|
<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">
|
<table className="tg">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
@ -29,15 +103,36 @@ export default function ResumoOperacao() {
|
|||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
{
|
||||||
<td className='tg-gceh'>Unidade - 9500130</td>
|
data.unidades.filter((value, index)=> value.value.includes(unidade)).map((value, index) => {
|
||||||
<td className='tg-uulg'>Compra</td>
|
if (index%2===0) {
|
||||||
<td className='tg-gceh'>122,269</td>
|
return <tr key={index}>
|
||||||
<td className='tg-gceh'>COPEL COM I5</td>
|
<td key={index} className='tg-gceh'>{value.name}</td>
|
||||||
<td className='tg-uulg'>234,67</td>
|
<td key={index} className='tg-uulg'>{value.operacao}</td>
|
||||||
<td className='tg-gceh'>38.257,15</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>
|
</tr>
|
||||||
<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>
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
{/* <td className='tg-gceh'>{data.unidades.unidade1.name}</td>
|
||||||
|
<td className='tg-uulg'>{data.unidades.unidade1.operacao}</td>
|
||||||
|
<td className='tg-gceh'>{data.unidades.unidade1.montante}</td>
|
||||||
|
<td className='tg-gceh'>{data.unidades.unidade1.contraparte}</td>
|
||||||
|
<td className='tg-uulg'>{data.unidades.unidade1.preco}</td>
|
||||||
|
<td className='tg-gceh'>{data.unidades.unidade1.valorNF}</td> */}
|
||||||
|
{/* <tr>
|
||||||
<td className='tg-hq65'>Unidade - 9500130</td>
|
<td className='tg-hq65'>Unidade - 9500130</td>
|
||||||
<td className='tg-0tzy'>Compra</td>
|
<td className='tg-0tzy'>Compra</td>
|
||||||
<td className='tg-hq65'>110,348</td>
|
<td className='tg-hq65'>110,348</td>
|
||||||
@ -76,7 +171,7 @@ export default function ResumoOperacao() {
|
|||||||
<td className='tg-hq65'>PACTO COMERCIALIZADORA I5</td>
|
<td className='tg-hq65'>PACTO COMERCIALIZADORA I5</td>
|
||||||
<td className='tg-0tzy'>300,36</td>
|
<td className='tg-0tzy'>300,36</td>
|
||||||
<td className='tg-hq65'>5.965,95</td>
|
<td className='tg-hq65'>5.965,95</td>
|
||||||
</tr>
|
</tr> */}
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
<BasicButton title='Baixar PDF' />
|
<BasicButton title='Baixar PDF' />
|
||||||
|
|||||||
16
src/services/DadosTabelaResumoOperacao.js
Normal file
16
src/services/DadosTabelaResumoOperacao.js
Normal file
@ -0,0 +1,16 @@
|
|||||||
|
{}
|
||||||
|
unidades: {
|
||||||
|
unidade1: { name: 'Unidade-2555', operacao: 'Compra', montante: '130,00', contraparte: 'cOPEL COM I5', preco: '234,67', valorNF: '38.257,15' },
|
||||||
|
unidade2: { name: 'Unidade-2', operacao: 'Compra', montante: '20,00', contraparte: 'EMEWE I5', preco: '234,67', valorNF: '38.257,15' },
|
||||||
|
unidade3: { name: 'Unidade-3', operacao: 'Compra', montante: '30,00', contraparte: 'EMEWE I5', preco: '234,67', valorNF: '38.257,15' },
|
||||||
|
unidade4: { name: 'Unidade-4', operacao: 'Compra', montante: '40,00', contraparte: 'COPEL COM I5', preco: '234,67', valorNF: '38.257,15' },
|
||||||
|
unidade5: { name: 'Unidade-5', operacao: 'Compra', montante: '500,00',contraparte: 'COPEL COM I5', preco: '234,67', valorNF: '38.257,15' },
|
||||||
|
unidade6: { name: 'Unidade-6', operacao: 'Compra', montante: '300,00', contraparte: 'COPEL COM I5', preco: '234,67', valorNF: '.965,95' }
|
||||||
|
},
|
||||||
|
]
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
10
src/services/dados.json
Normal file
10
src/services/dados.json
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
{
|
||||||
|
"unidades": [
|
||||||
|
{ "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" }
|
||||||
|
]
|
||||||
|
}
|
||||||
@ -10,6 +10,17 @@ export const TableView = styled.div`
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
||||||
|
.select{
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
|
||||||
|
margin-bottom: 25px;
|
||||||
|
|
||||||
|
width: 20rem;
|
||||||
|
}
|
||||||
|
.titleUnidade{
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
.tg{
|
.tg{
|
||||||
border-collapse:collapse;
|
border-collapse:collapse;
|
||||||
@ -97,6 +108,10 @@ export const TableView = styled.div`
|
|||||||
|
|
||||||
color: #254F7F;
|
color: #254F7F;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.teste {
|
||||||
|
width: 10rem;
|
||||||
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
export const Pagination = styled.div`
|
export const Pagination = styled.div`
|
||||||
@ -112,5 +127,7 @@ export const Pagination = styled.div`
|
|||||||
color: #ABAFB3;
|
color: #ABAFB3;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user