139 lines
6.2 KiB
TypeScript
139 lines
6.2 KiB
TypeScript
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 Typography from '@mui/material/Typography';
|
|
import BasicButton from '../../components/buttons/basicButton/BasicButton'
|
|
import Modal from '@mui/material/Modal';
|
|
import PageTitle from '../../components/pageTitle/PageTitle'
|
|
import { ClientsView } from '../../styles/layouts/clients/ClientsView'
|
|
import Box from '@mui/material/Box';
|
|
import FaqButton1 from '../../components/buttons/faqButton/FaqButton1';
|
|
import FaqButton2 from '../../components/buttons/faqButton/FaqButton2';
|
|
import AdministrativeHeader from '../../components/administrativeHeader/AdministrativeHeader';
|
|
import ClientsTable from '../../components/administrativeTables/ClientsTable';
|
|
|
|
import ConfirmModal from '../../components/modal/ConfirmModal';
|
|
|
|
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 [open, setOpen] = React.useState(false);
|
|
const handleOpen = () => setOpen(true);
|
|
const handleClose = () => setOpen(false);
|
|
|
|
const [openModal, setOpenModal] = useState(false)
|
|
const [openModalInativar, setOpenModalInativar] = useState(false)
|
|
|
|
|
|
const rows = [
|
|
{ id: 1, codigoCliente: 'Unidade - 9500130', clientName: 'Copel', units: 'clique para ver unidades', age: 'ativo' },
|
|
{ id: 2, codigoCliente: 'Unidade - 9500130', clientName: 'Copel', units: 'clique para ver unidades', age: 'ativo' },
|
|
{ id: 3, codigoCliente: 'Unidade - 9500130', clientName: 'Copel', units: 'clique para ver unidades', age: 'ativo' },
|
|
{ id: 4, codigoCliente: 'Unidade - 9500689', clientName: 'Copel', units: 'clique para ver unidades', age: 'ativo' },
|
|
{ id: 5, codigoCliente: 'Unidade - 9500689', clientName: 'Copel', units: 'clique para ver unidades', age: 'ativo' },
|
|
{ id: 6, codigoCliente: 'Unidade - 9500689', clientName: 'Copel', units: 'clique para ver unidades', age: 'ativo' },
|
|
{ id: 7, codigoCliente: 'Unidade - 9500130', clientName: 'Copel', units: 'clique para ver unidades', age: 'ativo' },
|
|
{ id: 8, codigoCliente: 'Unidade - 9500130', clientName: 'FraCopelnces', units: 'clique para ver unidades', age: 'ativo' },
|
|
{ id: 9, codigoCliente: 'Unidade - 9500130', clientName: 'Copel', units: 'clique para ver unidades', age: 'ativo' },
|
|
];
|
|
|
|
const columns: GridColDef[] = [
|
|
{ field: 'codigoCliente', headerName: 'Código Cliente', width: 180 },
|
|
{ field: 'clientName', headerName: 'Nome do cliente', width: 130 },
|
|
{ field: 'units', headerName: 'Unidade', width: 130 },
|
|
{ field: 'status', headerName: 'Status', width: 90 },
|
|
];
|
|
|
|
return (
|
|
<div style={{display: 'flex', flexDirection: 'column', width: '100%'}}>
|
|
<AdministrativeHeader />
|
|
<ClientsView>
|
|
<PageTitle title='Clientes' subtitle='Clientes Smart Energia'/>
|
|
{/* <BasicButton title='Adicionar' onClick={handleOpen}/> */}
|
|
<div className='buttons'>
|
|
<button className='btn2' onClick={handleOpen}>Open modal</button>
|
|
<button className='btn1' onClick={handleOpen}>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" />
|
|
<TextField id="outlined-basic" label="Imagem/Logotipo" sx={{width:350, ml:8, mt:2}} variant="outlined" />
|
|
<br /><br />
|
|
<FaqButton1 title='Cancelar' />
|
|
<FaqButton2 title='Salvar' />
|
|
</Box>
|
|
</Modal>
|
|
<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>
|
|
)
|
|
}
|