finalizing admin pages design
This commit is contained in:
joseCorte-exe
parent
dbe96892ea
commit
4c7aeb9f4e
@ -30,6 +30,7 @@
|
||||
"@types/react-csv": "^1.1.2",
|
||||
"@typescript-eslint/eslint-plugin": "^5.22.0",
|
||||
"@typescript-eslint/parser": "^5.22.0",
|
||||
"axios": "^0.27.2",
|
||||
"chart.js": "^3.7.1",
|
||||
"chartjs-plugin-datalabels": "^2.0.0",
|
||||
"eslint-plugin-react": "^7.29.4",
|
||||
|
||||
@ -5,7 +5,19 @@ export const ClientTableView = styled.main`
|
||||
|
||||
color: #6A707E;
|
||||
|
||||
thead {
|
||||
border-radius: 16px;
|
||||
background-color: #f9f9f9;
|
||||
|
||||
th {
|
||||
font-size: 12px;
|
||||
font-family: 'inter';
|
||||
font-weight: 800;
|
||||
font-style: italic;
|
||||
}
|
||||
}
|
||||
tbody {
|
||||
border-radius: 16px;
|
||||
tr {
|
||||
th {
|
||||
font-family: 'poppins';
|
||||
|
||||
@ -1,8 +1,7 @@
|
||||
import React from 'react'
|
||||
import Image from 'next/image';
|
||||
|
||||
import TextField from '@mui/material/TextField';
|
||||
import Avatar from '@mui/material/Avatar';
|
||||
import TextField from '@mui/material/TextField';
|
||||
import Image from 'next/image';
|
||||
import React from 'react'
|
||||
|
||||
import { HeaderView } from './HeaderView'
|
||||
|
||||
@ -38,7 +37,6 @@ interface headerInterface {
|
||||
}
|
||||
|
||||
export default function Header({ name }: headerInterface) {
|
||||
|
||||
return (
|
||||
<HeaderView>
|
||||
<section>
|
||||
@ -53,9 +51,11 @@ export default function Header({ name }: headerInterface) {
|
||||
<section>
|
||||
<Image src='/assets/png/copel.png' width={170} height={50} />
|
||||
<div className='icon' >
|
||||
<p>
|
||||
olá, {'josé'}
|
||||
</p>
|
||||
</div>
|
||||
<Avatar {...stringAvatar('José Corte')} />
|
||||
<Avatar {...stringAvatar('José Corte')} style={{border: 'white solid 4px', width: '47px', height: '47px'}}/>
|
||||
</section>
|
||||
</HeaderView>
|
||||
)
|
||||
|
||||
@ -11,58 +11,32 @@ export const HeaderView = styled.header`
|
||||
section {
|
||||
width: 30%;
|
||||
|
||||
|
||||
:last-child {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: flex-start;
|
||||
align-items: center;
|
||||
|
||||
height: fit-content;
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
position: relative;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
justify-content: flex-start;
|
||||
|
||||
width: 150px;
|
||||
min-width: 120px;
|
||||
height: 40px;
|
||||
|
||||
border-radius: 8px;
|
||||
border-radius: 8px 0 0 8px;
|
||||
|
||||
background-color: #254F7F;
|
||||
|
||||
transform: translateX(16px);
|
||||
|
||||
p{
|
||||
color: white;
|
||||
|
||||
transform: translateX(12%);
|
||||
|
||||
::after {
|
||||
content: "";
|
||||
position: relative;
|
||||
left: 2.5rem;
|
||||
background-color: #fff;
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1020px) {
|
||||
.icon {
|
||||
display: none;
|
||||
}
|
||||
section {
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1640px) {
|
||||
.icon {
|
||||
transform: translateX(6%);
|
||||
}
|
||||
input {
|
||||
height: 2rem;
|
||||
margin-left: 15%;
|
||||
}
|
||||
}
|
||||
`
|
||||
|
||||
@ -35,7 +35,7 @@ export default function Sidebar() {
|
||||
const router = useRouter()
|
||||
|
||||
const user = {
|
||||
role: 'admin'
|
||||
role: 'client'
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
@ -53,7 +53,10 @@ export default function Sidebar() {
|
||||
<Image src='/assets/logo.svg' width={100} height={100} />
|
||||
</div>
|
||||
<ul>
|
||||
<Link href='/administrative'><li className={router.pathname=='/administrative'? 'actualPath' : null} ><Image src='/assets/sidebar/dashboardIcon.svg' width={25} height={25} />{'Visão Geral'}</li></Link>
|
||||
<Link href='/administrative'><li className={router.pathname=='/administrative' ? 'actualPath' : null } ><Image src='/assets/sidebar/economyIcon.svg' width={25} height={25} />{'Clientes >'}</li></Link>
|
||||
<Link href='/administrative/general'><li className={router.pathname=='/administrative/general'? 'actualPath' : null} ><Image src='/assets/sidebar/dashboardIcon.svg' width={25} height={25} />{'Visão Geral'}</li></Link>
|
||||
<Link href='/administrative/faq'><li className={router.pathname=='/administrative/faq' ? 'actualPath' : null } ><Image src='/assets/sidebar/saqIcon.svg' width={25} height={25} />{'FAQ >'}</li></Link>
|
||||
<Link href='/administrative/notifications'><li className={router.pathname=='/administrative/notifications'? 'actualPath' : null}><Image src='/assets/sidebar/notificationsIcon.svg' width={25} height={25} />{'Notificações >'}<div className='notification'><p>25</p></div></li></Link>
|
||||
{/* <li onClick={() => setEconomiaDrawer(!economiaDrawer)} className={router.pathname=='/grossSavings' || router.pathname=='/accumulatedSavings' || router.pathname=='/estimatedCost' || router.pathname=='/costIndicator' ? 'actualPath' : null } ><Image src='/assets/sidebar/economyIcon.svg' width={25} height={25} />{'Economia >'}</li>
|
||||
<div className='economiaDrawer drawer' >
|
||||
<Link href='/administrative/grossSavings'><li className={router.pathname=='/grossSavings'? 'actualPathDrawer' : null}>Economia Bruta</li></Link>
|
||||
@ -61,9 +64,6 @@ export default function Sidebar() {
|
||||
<Link href='/administrative/estimatedCost'><li className={router.pathname=='/estimatedCost'? 'actualPathDrawer' : null}>Custo Estimado</li></Link>
|
||||
<Link href='/administrative/costIndicator'><li className={router.pathname=='/costIndicator'? 'actualPathDrawer' : null}>Custo R/MWh</li></Link>
|
||||
</div> */}
|
||||
<Link href='/administrative/clients'><li className={router.pathname=='/administrative/clients' ? 'actualPath' : null } ><Image src='/assets/sidebar/economyIcon.svg' width={25} height={25} />{'Clientes >'}</li></Link>
|
||||
<Link href='/administrative/faq'><li className={router.pathname=='/administrative/faq' ? 'actualPath' : null } ><Image src='/assets/sidebar/saqIcon.svg' width={25} height={25} />{'FAQ >'}</li></Link>
|
||||
<Link href='/administrative/notifications'><li className={router.pathname=='/administrative/notifications'? 'actualPath' : null}><Image src='/assets/sidebar/notificationsIcon.svg' width={25} height={25} />{'Notificações >'}<div className='notification'><p>25</p></div></li></Link>
|
||||
{/* <Link href='/administrative/telemetria'><li className={router.pathname=='/telemetria'? 'actualPath' : null}><Image src='/assets/sidebar/telemetryIcon.svg' width={25} height={25} />{'Telemetria >'}</li></Link>
|
||||
<Link href='/administrative/resumoOperacao'><li className={router.pathname=='/resumoOperacao'? 'actualPath' : null} ><Image src='/assets/sidebar/summaryOperationsIcon.svg' width={25} height={25} />{'Resumo de Op. '}</li></Link>
|
||||
<Link href='/administrative/news'><li className={router.pathname=='/news'? 'actualPath' : null}><Image src='/assets/sidebar/newsIcon.svg' width={25} height={25} />{'Notícias >'}</li></Link>
|
||||
|
||||
@ -1,74 +0,0 @@
|
||||
import Button from '@mui/material/Button';
|
||||
import TextField from '@mui/material/TextField';
|
||||
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 Header from '../../components/header/Header'
|
||||
import ConfirmModal from '../../components/modal/ConfirmModal';
|
||||
import Modal from '../../components/modal/Modal';
|
||||
import PageTitle from '../../components/pageTitle/PageTitle'
|
||||
import { ClientsModalView, ClientsView, ConfirmModalView } from '../../styles/layouts/clients/ClientsView'
|
||||
|
||||
export default function clients() {
|
||||
const [openModal, setOpenModal] = useState(false)
|
||||
const [openModalInativar, setOpenModalInativar] = useState(false)
|
||||
|
||||
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>
|
||||
)
|
||||
}
|
||||
86
src/pages/administrative/general.tsx
Normal file
86
src/pages/administrative/general.tsx
Normal file
@ -0,0 +1,86 @@
|
||||
import FormControl from '@mui/material/FormControl';
|
||||
import InputLabel from '@mui/material/InputLabel';
|
||||
import MenuItem from '@mui/material/MenuItem';
|
||||
import Select, { SelectChangeEvent } from '@mui/material/Select';
|
||||
import TextField from '@mui/material/TextField';
|
||||
import { Editor } from '@tinymce/tinymce-react'
|
||||
import React, { useRef, useState } from 'react'
|
||||
|
||||
import Header from '../../components/header/Header';
|
||||
import { GeneralView } from '../../styles/layouts/general/GeneralView'
|
||||
|
||||
export default function index() {
|
||||
const editorRef = useRef(null);
|
||||
const [text, setText] = useState('');
|
||||
|
||||
const log = () => {
|
||||
if (editorRef.current) {
|
||||
console.log(editorRef.current.getContent());
|
||||
}
|
||||
};
|
||||
|
||||
const handleChange = (event: SelectChangeEvent) => {
|
||||
setText(event.target.value);
|
||||
};
|
||||
|
||||
return (
|
||||
<GeneralView>
|
||||
<Header name=''/>
|
||||
<section>
|
||||
<FormControl sx={{mr: '20px', minWidth: 180, minHeight: '80px'}}>
|
||||
<Select
|
||||
value={text}
|
||||
onChange={handleChange}
|
||||
displayEmpty
|
||||
inputProps={{ 'aria-label': 'Without label' }}
|
||||
>
|
||||
<MenuItem value={0}>Sobre Nós</MenuItem>
|
||||
<MenuItem value={10}>Copel</MenuItem>
|
||||
<MenuItem value={20}>Cliente 1</MenuItem>
|
||||
<MenuItem value={30}>Cliente 2</MenuItem>
|
||||
</Select>
|
||||
</FormControl>
|
||||
</section>
|
||||
<Editor
|
||||
onInit={(evt, editor) => editorRef.current = editor}
|
||||
initialValue=' <p>A <strong>SMART ENERGIA</strong> é uma consultoria independente especializada em Gestão de Energia Elétrica, consolidada como uma das três maiores consultorias do Brasil.
|
||||
Devido à grande experiência em operações na CCEE – Câmara de Comercialização de Energia Elétrica e ANEEL, entrega resultados que superam as expectativas.</p>
|
||||
|
||||
<p>Nasceu para gerenciar a compra de energia com inovação, transparência e imparcialidade sendo o elo forte e necessário entre os Consumidores e os
|
||||
Vendedores de energia. </p>
|
||||
|
||||
<p>Baseada em sua experiência no setor elétrico adquirida desde 2001 e em mais de 900 unidades migradas, atua na negociação de contratos de compra e venda de
|
||||
energia, na Gestão de Energia no Mercado Livre e criação de produtos diferenciados para atender as necessidades específicas dos consumidores.</p>
|
||||
|
||||
<p>Apoiada pela sólida experiência de seus gestores, conhecendo as premissas dos agentes de Comercialização e Geração para a compra e venda de energia,
|
||||
aplicamos as mesmas premissas a favor dos Consumidores, disponibilizando assim um diferencial único para a tomada de decisão e elaboração das estratégias de
|
||||
contratação de energia.</p>
|
||||
<ul>
|
||||
<li>Informação</li>
|
||||
<li>Economia</li>
|
||||
<li>Gestão de Energia</li>
|
||||
<li>Imparcialidade</li>
|
||||
<li>Previsão de Custos</li>
|
||||
<li>Experiência</li>
|
||||
<li>Relacionamento</li>
|
||||
</ul>'
|
||||
init={{
|
||||
height: 500,
|
||||
width: '100%',
|
||||
menubar: false,
|
||||
plugins: [
|
||||
'advlist', 'autolink', 'lists', 'link', 'image', 'charmap',
|
||||
'anchor', 'searchreplace', 'visualblocks', 'code', 'fullscreen',
|
||||
'insertdatetime', 'media', 'table', 'preview', 'help', 'wordcount'
|
||||
],
|
||||
toolbar: 'undo redo | blocks | ' +
|
||||
'bold italic forecolor | alignleft aligncenter ' +
|
||||
'alignright alignjustify | bullist numlist outdent indent | ' +
|
||||
'removeformat | help',
|
||||
content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'
|
||||
}}
|
||||
/>
|
||||
<button onClick={log}>Log editor content</button>
|
||||
</GeneralView>
|
||||
)
|
||||
}
|
||||
@ -1,11 +1,74 @@
|
||||
import { Editor } from '@tinymce/tinymce-react'
|
||||
import React from 'react'
|
||||
import Button from '@mui/material/Button';
|
||||
import TextField from '@mui/material/TextField';
|
||||
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 Header from '../../components/header/Header'
|
||||
import ConfirmModal from '../../components/modal/ConfirmModal';
|
||||
import Modal from '../../components/modal/Modal';
|
||||
import PageTitle from '../../components/pageTitle/PageTitle'
|
||||
import { ClientsModalView, ClientsView, ConfirmModalView } from '../../styles/layouts/clients/ClientsView'
|
||||
|
||||
export default function clients() {
|
||||
const [openModal, setOpenModal] = useState(false)
|
||||
const [openModalInativar, setOpenModalInativar] = useState(false)
|
||||
|
||||
export default function index() {
|
||||
return (
|
||||
<>
|
||||
<div>Visão Geral</div>
|
||||
<Editor />
|
||||
</>
|
||||
<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>
|
||||
)
|
||||
}
|
||||
|
||||
@ -31,7 +31,7 @@ export default function commonQuestions() {
|
||||
<Head>
|
||||
<title>Smart Energia - FAQ</title>
|
||||
</Head>
|
||||
<Header />
|
||||
<Header name=''/>
|
||||
|
||||
<NotificationsTable />
|
||||
</FaqView>
|
||||
|
||||
@ -6,7 +6,6 @@ import { LineBarChart } from '../components/graph/LineBarChart'
|
||||
import Header from '../components/header/Header'
|
||||
import PageTitle from '../components/pageTitle/PageTitle'
|
||||
import { ConsumoEstimado } from '../services/consumoEstimado'
|
||||
|
||||
import { EstimatedCostView } from '../styles/layouts/economy/estimatedCost/EstimatedCostView'
|
||||
|
||||
export default function EstimatedCost() {
|
||||
@ -16,7 +15,7 @@ export default function EstimatedCost() {
|
||||
<title>Smart Energia - Custos Estimados</title>
|
||||
</Head>
|
||||
<Header name='' />
|
||||
<PageTitle title='Custos Estimados' subtitle='Comparativo de Custo Estimado' />
|
||||
<PageTitle title='Cativo x Livre mensal' subtitle='Comparativo de Custo Estimado' />
|
||||
<section>
|
||||
<LineBarChart data1={ConsumoEstimado.data2} data2={ConsumoEstimado.data} data3={ConsumoEstimado.data1} dataset1="Economia (R$)" dataset2='Cativo' dataset3='Livre' label={ConsumoEstimado.label} title='Custo Estimado' subtitle='' barLabel hashurado />
|
||||
</section>
|
||||
|
||||
@ -54,8 +54,8 @@ export default function region() {
|
||||
</Head>
|
||||
<Header name='' />
|
||||
<RenderIf isTrue={page==='table'? true : false}>
|
||||
<Link href='/dashboard' >{'< voltar para visão geral'}</Link>
|
||||
<PageTitle title='Tabela de consumo Pld' subtitle=''/>
|
||||
<Link href='/dashboard' >{'< Voltar para Visão Geral'}</Link>
|
||||
<PageTitle title='Tabela de consumo PLD' subtitle=''/>
|
||||
<PldTableView>
|
||||
<table className="tg">
|
||||
<thead>
|
||||
@ -184,7 +184,7 @@ export default function region() {
|
||||
</table>
|
||||
<section>
|
||||
<article onClick={() => setPage('perMouth')}>
|
||||
<p>Valores Diarios</p>
|
||||
<p>Valores Diários</p>
|
||||
</article>
|
||||
<article onClick={() => setPage('perDate')}>
|
||||
<p>Valores Horários</p>
|
||||
@ -194,8 +194,8 @@ export default function region() {
|
||||
</RenderIf>
|
||||
|
||||
<RenderIf isTrue={page==='perMouth'? true : false}>
|
||||
<GoBack onClick={() => setPage('table')}>{'< voltar para tabela pld'}</GoBack>
|
||||
<PageTitle title='Consumo por mês' subtitle=''/>
|
||||
<GoBack onClick={() => setPage('table')}>{'< voltar para tabela PLD'}</GoBack>
|
||||
<PageTitle title='Resumo PLD - Mensal' subtitle=''/>
|
||||
<PldGraphView>
|
||||
<section className='toolsbar'>
|
||||
<div className='select'>
|
||||
@ -207,10 +207,10 @@ export default function region() {
|
||||
width: '100%'
|
||||
}}
|
||||
>
|
||||
<MenuItem value={0}>Filial 3</MenuItem>
|
||||
<MenuItem value={10}>Filial 3</MenuItem>
|
||||
<MenuItem value={20}>Twenty</MenuItem>
|
||||
<MenuItem value={30}>Thirty</MenuItem>
|
||||
<MenuItem value={0}>Norte</MenuItem>
|
||||
<MenuItem value={10}>Nordeste</MenuItem>
|
||||
<MenuItem value={20}>Sul</MenuItem>
|
||||
<MenuItem value={30}>Sudeste</MenuItem>
|
||||
</Select>
|
||||
</div>
|
||||
<input type="date" data-date="" data-date-format="DD MMMM YYYY" value="2015-08-09"/>
|
||||
@ -221,12 +221,12 @@ export default function region() {
|
||||
</RenderIf>
|
||||
|
||||
<RenderIf isTrue={page==='perDate'? true : false}>
|
||||
<GoBack onClick={() => setPage('table')}>{'< voltar para tabela pld'}</GoBack>
|
||||
<GoBack onClick={() => setPage('table')}>{'< voltar para tabela PLD'}</GoBack>
|
||||
<PldGraphView>
|
||||
<PageTitle title='Consumo por dia' subtitle=''/>
|
||||
<PageTitle title='Resumo PLD - Horas' subtitle=''/>
|
||||
<section className='toolsbar'>
|
||||
<input type="date" data-date="" data-date-format="DD MMMM YYYY" value="2021-09-19"/>
|
||||
<BasicButton title='Download (csv)' />
|
||||
<BasicButton title='Download (csv)' onClick={() => console.log()}/>
|
||||
</section>
|
||||
<LineChart data1={EconomiaAcumulada.data3} data2={EconomiaAcumulada.data4} data3={EconomiaAcumulada.data5} data4={EconomiaAcumulada.data6} dataset1='NORDESTE' dataset2='NORTE' dataset3='SUDESTE' dataset4='SUL' title='PLD - 19/09/21' subtitle='' label={EconomiaAcumulada.label1} />
|
||||
</PldGraphView>
|
||||
|
||||
22
src/services/api.ts
Normal file
22
src/services/api.ts
Normal file
@ -0,0 +1,22 @@
|
||||
import axios, { AxiosRequestConfig } from "axios";
|
||||
import { getToken } from "./auth";
|
||||
|
||||
const api = axios.create({
|
||||
// baseURL: "http://192.168.0.132:3000/",
|
||||
baseURL: "http://localhost:3000/",
|
||||
headers: {
|
||||
'Content-Type': 'application/x-www-form-urlencoded'
|
||||
}
|
||||
});
|
||||
|
||||
api.interceptors.request.use(config => {
|
||||
const token = getToken();
|
||||
// console.log(token)
|
||||
if (config.headers === undefined && token === undefined) {
|
||||
config.headers = {Authorization: `Bearer ${token}`};
|
||||
}
|
||||
return config;
|
||||
},
|
||||
);
|
||||
|
||||
export default api
|
||||
10
src/services/auth.ts
Normal file
10
src/services/auth.ts
Normal file
@ -0,0 +1,10 @@
|
||||
export const TOKEN_KEY = "@test";
|
||||
export const isAuthenticated = () => localStorage.getItem(TOKEN_KEY) !== null;
|
||||
// export const isAuthenticated = true;
|
||||
export const getToken = () => localStorage.getItem(TOKEN_KEY);
|
||||
export const login = (token: any) => {
|
||||
localStorage.setItem(TOKEN_KEY, token);
|
||||
};
|
||||
export const logout = () => {
|
||||
localStorage.removeItem(TOKEN_KEY);
|
||||
};
|
||||
11
src/styles/layouts/general/GeneralView.tsx
Normal file
11
src/styles/layouts/general/GeneralView.tsx
Normal file
@ -0,0 +1,11 @@
|
||||
import styled from "styled-components";
|
||||
|
||||
export const GeneralView = styled.main`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
flex-direction: column;
|
||||
|
||||
width: 100%;
|
||||
`
|
||||
43
yarn.lock
43
yarn.lock
@ -1688,10 +1688,21 @@ astral-regex@^2.0.0:
|
||||
version "2.0.0"
|
||||
resolved "https://registry.npmjs.org/astral-regex/-/astral-regex-2.0.0.tgz"
|
||||
|
||||
asynckit@^0.4.0:
|
||||
version "0.4.0"
|
||||
resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
|
||||
|
||||
axe-core@^4.3.5:
|
||||
version "4.4.1"
|
||||
resolved "https://registry.npmjs.org/axe-core/-/axe-core-4.4.1.tgz"
|
||||
|
||||
axios@^0.27.2:
|
||||
version "0.27.2"
|
||||
resolved "https://registry.yarnpkg.com/axios/-/axios-0.27.2.tgz#207658cc8621606e586c85db4b41a750e756d972"
|
||||
dependencies:
|
||||
follow-redirects "^1.14.9"
|
||||
form-data "^4.0.0"
|
||||
|
||||
axobject-query@^2.2.0:
|
||||
version "2.2.0"
|
||||
resolved "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz"
|
||||
@ -1962,6 +1973,12 @@ columnify@^1.6.0:
|
||||
strip-ansi "^6.0.1"
|
||||
wcwidth "^1.0.0"
|
||||
|
||||
combined-stream@^1.0.8:
|
||||
version "1.0.8"
|
||||
resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.8.tgz#c3d45a8b34fd730631a110a8a2520682b31d5a7f"
|
||||
dependencies:
|
||||
delayed-stream "~1.0.0"
|
||||
|
||||
commander@^8.3.0:
|
||||
version "8.3.0"
|
||||
resolved "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz"
|
||||
@ -2083,6 +2100,10 @@ define-properties@^1.1.3, define-properties@^1.1.4:
|
||||
has-property-descriptors "^1.0.0"
|
||||
object-keys "^1.1.1"
|
||||
|
||||
delayed-stream@~1.0.0:
|
||||
version "1.0.0"
|
||||
resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
|
||||
|
||||
delegates@^1.0.0:
|
||||
version "1.0.0"
|
||||
resolved "https://registry.yarnpkg.com/delegates/-/delegates-1.0.0.tgz#84c6e159b81904fdca59a0ef44cd870d31250f9a"
|
||||
@ -2505,6 +2526,18 @@ flatted@^3.1.0:
|
||||
version "3.2.5"
|
||||
resolved "https://registry.npmjs.org/flatted/-/flatted-3.2.5.tgz"
|
||||
|
||||
follow-redirects@^1.14.9:
|
||||
version "1.15.1"
|
||||
resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.1.tgz#0ca6a452306c9b276e4d3127483e29575e207ad5"
|
||||
|
||||
form-data@^4.0.0:
|
||||
version "4.0.0"
|
||||
resolved "https://registry.yarnpkg.com/form-data/-/form-data-4.0.0.tgz#93919daeaf361ee529584b9b31664dc12c9fa452"
|
||||
dependencies:
|
||||
asynckit "^0.4.0"
|
||||
combined-stream "^1.0.8"
|
||||
mime-types "^2.1.12"
|
||||
|
||||
fs-extra@^10.1.0:
|
||||
version "10.1.0"
|
||||
resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-10.1.0.tgz#02873cfbc4084dde127eaa5f9905eef2325d1abf"
|
||||
@ -3322,6 +3355,16 @@ micromatch@^4.0.4:
|
||||
braces "^3.0.2"
|
||||
picomatch "^2.3.1"
|
||||
|
||||
mime-db@1.52.0:
|
||||
version "1.52.0"
|
||||
resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.52.0.tgz#bbabcdc02859f4987301c856e3387ce5ec43bf70"
|
||||
|
||||
mime-types@^2.1.12:
|
||||
version "2.1.35"
|
||||
resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.35.tgz#381a871b62a734450660ae3deee44813f70d959a"
|
||||
dependencies:
|
||||
mime-db "1.52.0"
|
||||
|
||||
mimic-fn@^2.1.0:
|
||||
version "2.1.0"
|
||||
resolved "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user