218 lines
8.0 KiB
TypeScript
218 lines
8.0 KiB
TypeScript
import React, { useEffect, useState } from 'react'
|
|
import Image from 'next/Image'
|
|
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 { 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';
|
|
|
|
export default function region() {
|
|
const router = useRouter()
|
|
const { region } = router.query
|
|
|
|
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%',
|
|
}}>
|
|
<Header name='' />
|
|
<RenderIf isTrue={page==='table'? true : false}>
|
|
<Link href='/dashboard' >{'< voltar para visão geral'}</Link>
|
|
<PageTitle title='Tabela de consumo Pld' subtitle=''/>
|
|
<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'>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-hq65'>2102</td>
|
|
<td className='tg-0tzy'>xxxx</td>
|
|
<td className='tg-hq65'>xxxx</td>
|
|
<td className='tg-hq65'>xxxx</td>
|
|
<td className='tg-0tzy'>xxxx</td>
|
|
</tr>
|
|
<tr>
|
|
<td className="tg-gceh">2103</td>
|
|
<td className="tg-uulg">xxxx</td>
|
|
<td className="tg-gceh">xxxx</td>
|
|
<td className="tg-gceh">xxxx</td>
|
|
<td className="tg-gceh">xxxx</td>
|
|
</tr>
|
|
<tr>
|
|
<td className='tg-hq65'>2104</td>
|
|
<td className='tg-0tzy'>xxxx</td>
|
|
<td className='tg-hq65'>xxxx</td>
|
|
<td className='tg-hq65'>xxxx</td>
|
|
<td className='tg-0tzy'>xxxx</td>
|
|
</tr>
|
|
<tr>
|
|
<td className='tg-gceh'>2105</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-hq65'>2106</td>
|
|
<td className='tg-0tzy'>xxxx</td>
|
|
<td className='tg-hq65'>xxxx</td>
|
|
<td className='tg-hq65'>xxxx</td>
|
|
<td className='tg-0tzy'>xxxx</td>
|
|
</tr>
|
|
<tr>
|
|
<td className='tg-gceh'>2107</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-hq65'>2108</td>
|
|
<td className='tg-0tzy'>xxxx</td>
|
|
<td className='tg-hq65'>xxxx</td>
|
|
<td className='tg-hq65'>xxxx</td>
|
|
<td className='tg-0tzy'>xxxx</td>
|
|
</tr>
|
|
<tr>
|
|
<td className='tg-gceh'>2109</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-hq65'>2110</td>
|
|
<td className='tg-0tzy'>xxxx</td>
|
|
<td className='tg-hq65'>xxxx</td>
|
|
<td className='tg-hq65'>xxxx</td>
|
|
<td className='tg-0tzy'>xxxx</td>
|
|
</tr>
|
|
<tr>
|
|
<td className='tg-gceh'>2111</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-hq65'>2112</td>
|
|
<td className='tg-0tzy'>xxxx</td>
|
|
<td className='tg-hq65'>xxxx</td>
|
|
<td className='tg-hq65'>xxxx</td>
|
|
<td className='tg-0tzy'>xxxx</td>
|
|
</tr>
|
|
<tr>
|
|
<td className='tg-gceh'>2021</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'>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: R$100,00</p>
|
|
</article>
|
|
<article onClick={() => setPage('perDate')}>
|
|
<p>Valores Horários: R$100,00</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)' />
|
|
</section>
|
|
<Chart title='' />
|
|
</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="2015-08-09"/>
|
|
<BasicButton title='Download (csv)' />
|
|
</section>
|
|
<Chart title='' />
|
|
</PldGraphView>
|
|
</RenderIf>
|
|
</main>
|
|
)
|
|
}
|