parent
14074e921c
commit
c2edebb99a
@ -0,0 +1,2 @@ |
|||||||
|
REACT_APP_ENVIRONMENT=development |
||||||
|
REACT_APP_API=https://localhost:5041/api |
||||||
@ -0,0 +1,2 @@ |
|||||||
|
REACT_APP_ENVIRONMENT=production |
||||||
|
REACT_APP_API=https://www.gemcousa.mx/CORRESPONSALBackend/api |
||||||
@ -0,0 +1,2 @@ |
|||||||
|
REACT_APP_ENVIRONMENT=qa |
||||||
|
REACT_APP_API=https://www.gemcousa.solutions/CORRESPONSALBackend/api |
||||||
@ -1,9 +0,0 @@ |
|||||||
import React from 'react'; |
|
||||||
import { render, screen } from '@testing-library/react'; |
|
||||||
import App from './App'; |
|
||||||
|
|
||||||
test('renders learn react link', () => { |
|
||||||
render(<App />); |
|
||||||
const linkElement = screen.getByText(/learn react/i); |
|
||||||
expect(linkElement).toBeInTheDocument(); |
|
||||||
}); |
|
||||||
@ -1,26 +1,121 @@ |
|||||||
import React from 'react'; |
import React, { useEffect, useState } from 'react' |
||||||
import logo from './logo.svg'; |
import { Outlet, useNavigate } from 'react-router-dom' |
||||||
import './App.css'; |
import { Container, Form, Nav, Navbar, NavDropdown } from 'react-bootstrap' |
||||||
|
import ItemMenu from './Interfaces/Catalogos/IItemMenu' |
||||||
|
import 'ag-grid-community/styles/ag-grid.css' |
||||||
|
import 'ag-grid-community/styles/ag-theme-alpine.css' |
||||||
|
import usuariosServices from './Services/Catalogos/Usuarios.Services' |
||||||
|
import { logued } from './store/features/userStatusSlice/userStatusSlice' |
||||||
|
import { useSelector, useDispatch } from 'react-redux' |
||||||
|
import { RootState } from './store/store' |
||||||
|
import { MsgInformativo } from './Components/Utils/Toast/msgInformativo' |
||||||
|
import { IconContext } from 'react-icons' |
||||||
|
import { BsPersonCircle } from 'react-icons/bs' |
||||||
|
import Submenu from './Components/Submenu/Submenu' |
||||||
|
|
||||||
function App() { |
function App() { |
||||||
|
const navigate = useNavigate() |
||||||
|
const dispatch = useDispatch() |
||||||
|
let _menu: ItemMenu[] = [] |
||||||
|
const [mainMenu, setMainMenu] = useState(_menu) |
||||||
|
const userLogued = useSelector((state: RootState) => state.userStatus.value) |
||||||
|
const [show, setShow] = useState(false) |
||||||
|
const [msg, setMsg] = useState('') |
||||||
|
const [header, setHeader] = useState('') |
||||||
|
const msgColor = 'primary' |
||||||
|
const menu = localStorage.getItem('menu') ? localStorage.getItem('menu') : '' |
||||||
|
const User = () => { |
||||||
|
const stickyValue = window.localStorage.getItem('User') |
||||||
|
return stickyValue !== null ? JSON.parse(stickyValue) : '' |
||||||
|
} |
||||||
|
const [Depto, setDepto] = useState(() => { |
||||||
|
const stickyValue = window.localStorage.getItem('Departamento') |
||||||
|
return stickyValue !== null |
||||||
|
? JSON.parse(stickyValue).substring(0, 4) + '.' |
||||||
|
: '' |
||||||
|
}) |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
if (menu && userLogued) { |
||||||
|
setMainMenu(JSON.parse(menu)) |
||||||
|
} else { |
||||||
|
setMainMenu([]) |
||||||
|
} |
||||||
|
}, [menu, userLogued]) |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
usuariosServices |
||||||
|
.validate() |
||||||
|
.then((response) => { |
||||||
|
if (response.status === 200) { |
||||||
|
dispatch(logued(true)) |
||||||
|
} |
||||||
|
}) |
||||||
|
.catch((e: Error) => { |
||||||
|
if (!window.location.href.indexOf('login')) { |
||||||
|
localStorage.setItem('menu', '') |
||||||
|
localStorage.setItem('token', '') |
||||||
|
setHeader('Informativo') |
||||||
|
setMsg('Su session ha expirado, necesita volver a loguerse') |
||||||
|
setShow(true) |
||||||
|
navigate('/') |
||||||
|
} |
||||||
|
}) |
||||||
|
}, [dispatch, navigate]) |
||||||
|
|
||||||
return ( |
return ( |
||||||
<div className="App"> |
<div className="App"> |
||||||
<header className="App-header"> |
<Navbar className="custom-theme" bg="light" expand="lg"> |
||||||
<img src={logo} className="App-logo" alt="logo" /> |
<Container> |
||||||
<p> |
<Navbar.Brand href="/" style={{ color: '#FFFFFF' }}> |
||||||
Edit <code>src/App.tsx</code> and save to reload. |
GEMCO |
||||||
</p> |
</Navbar.Brand> |
||||||
<a |
<Navbar.Toggle aria-controls="basic-navbar-nav" /> |
||||||
className="App-link" |
<Navbar.Collapse id="basic-navbar-nav"> |
||||||
href="https://reactjs.org" |
<Nav className="me-auto"> |
||||||
target="_blank" |
{mainMenu |
||||||
rel="noopener noreferrer" |
? mainMenu.map((itemMenu, index) => { |
||||||
> |
if (itemMenu.padreId === 0) { |
||||||
Learn React |
return ( |
||||||
</a> |
<> |
||||||
</header> |
<Submenu |
||||||
|
descripcion={itemMenu.descripcion} |
||||||
|
key={itemMenu.id} |
||||||
|
allItems={mainMenu} |
||||||
|
submenu={mainMenu.filter(function (item) { |
||||||
|
return item.padreId === itemMenu.id |
||||||
|
})} |
||||||
|
/> |
||||||
|
</> |
||||||
|
) |
||||||
|
} |
||||||
|
}) |
||||||
|
: ''} |
||||||
|
</Nav> |
||||||
|
<Form className="d-flex"> |
||||||
|
{!userLogued ? ( |
||||||
|
<> |
||||||
|
<Nav.Link href="/#/login">login</Nav.Link> |
||||||
|
<Nav.Link href="/#/reset">reset</Nav.Link> |
||||||
|
</> |
||||||
|
) : ( |
||||||
|
<> |
||||||
|
<Nav.Link href="/#/logout">Logout</Nav.Link> |
||||||
|
<div style={{ paddingTop: '5px' }}></div> |
||||||
|
<IconContext.Provider value={{ size: '25px' }}> |
||||||
|
<BsPersonCircle /> |
||||||
|
</IconContext.Provider> |
||||||
|
<div style={{ paddingTop: '5px' }}>{Depto} </div> |
||||||
|
</> |
||||||
|
)} |
||||||
|
</Form> |
||||||
|
</Navbar.Collapse> |
||||||
|
</Container> |
||||||
|
</Navbar> |
||||||
|
<Outlet /> |
||||||
</div> |
</div> |
||||||
); |
) |
||||||
} |
} |
||||||
|
|
||||||
export default App; |
export default App |
||||||
|
|
||||||
|
|||||||
@ -0,0 +1,181 @@ |
|||||||
|
import ICorresponsalTrafico from "../../Interfaces/Corresponsales/ICorresponsalTrafico"; |
||||||
|
|
||||||
|
export default class CCorresponsalesTrafico implements ICorresponsalTrafico { |
||||||
|
id: number=0 |
||||||
|
folioGemco: string
|
||||||
|
fechaRegistro?: string
|
||||||
|
idUsuario: number=0
|
||||||
|
idCliente: number=0
|
||||||
|
tipoOperacion: number=0 |
||||||
|
opEntrada: number=0
|
||||||
|
opSalida: number=0
|
||||||
|
idCorresponsal: number=0
|
||||||
|
bultos?: number
|
||||||
|
kilos?: number
|
||||||
|
estatus?: number
|
||||||
|
trafico?: string
|
||||||
|
aduana?: number
|
||||||
|
patente?: number
|
||||||
|
pedimento?: number
|
||||||
|
clave?: string
|
||||||
|
fechaPago?: string
|
||||||
|
tipoCambio?: number
|
||||||
|
valorAduanaMN?: number
|
||||||
|
totalPagado?: number
|
||||||
|
valorFacturaMN?: number
|
||||||
|
cantidadFracciones?: number
|
||||||
|
buque?: string
|
||||||
|
valorFacturaDls?: number
|
||||||
|
descripcionMercancia?: string
|
||||||
|
observaciones?: string
|
||||||
|
fechaDesaduanamiento: string |
||||||
|
semaforoFiscal?: number
|
||||||
|
noCuenta?: string
|
||||||
|
fechaCuenta?: string
|
||||||
|
tipoMercancia?: number
|
||||||
|
ultimaActualizacion?: string |
||||||
|
zipgemco?: string;
|
||||||
|
zipCorresponsales?: string; |
||||||
|
proceso: number; |
||||||
|
rechazado: number; |
||||||
|
idTabulador: number; |
||||||
|
noRecti: number; |
||||||
|
estatusCode: number; |
||||||
|
activo?: number
|
||||||
|
|
||||||
|
constructor() { |
||||||
|
this.id=0
|
||||||
|
this.folioGemco='' |
||||||
|
this.fechaRegistro='' |
||||||
|
this.idUsuario=0
|
||||||
|
this.idCliente=0
|
||||||
|
this.tipoOperacion=0 |
||||||
|
this.opEntrada=0
|
||||||
|
this.opSalida=0
|
||||||
|
this.idCorresponsal=0
|
||||||
|
this.bultos=0
|
||||||
|
this.kilos=0
|
||||||
|
this.estatus=0
|
||||||
|
this.trafico=''
|
||||||
|
this.aduana=0
|
||||||
|
this.patente=0
|
||||||
|
this.pedimento=0
|
||||||
|
this.clave=''
|
||||||
|
this.fechaPago=''
|
||||||
|
this.tipoCambio=0
|
||||||
|
this.valorAduanaMN=0 |
||||||
|
this.totalPagado=0
|
||||||
|
this.valorFacturaMN=0
|
||||||
|
this.cantidadFracciones=0
|
||||||
|
this.buque='' |
||||||
|
this.valorFacturaDls=0
|
||||||
|
this.descripcionMercancia=''
|
||||||
|
this.observaciones=''
|
||||||
|
this.fechaDesaduanamiento='' |
||||||
|
this.semaforoFiscal=0
|
||||||
|
this.noCuenta=''
|
||||||
|
this.fechaCuenta=''
|
||||||
|
this.tipoMercancia=0
|
||||||
|
this.ultimaActualizacion='' |
||||||
|
this.zipgemco=''
|
||||||
|
this.zipCorresponsales='' |
||||||
|
this.proceso=1 |
||||||
|
this.rechazado=1 |
||||||
|
this.idTabulador=0 |
||||||
|
this.noRecti=0; |
||||||
|
this.estatusCode=0; |
||||||
|
this.activo=1
|
||||||
|
} |
||||||
|
|
||||||
|
public getEmptyObject(): ICorresponsalTrafico { |
||||||
|
return { |
||||||
|
id: 0,
|
||||||
|
folioGemco:'', |
||||||
|
fechaRegistro: '', |
||||||
|
idUsuario :0,
|
||||||
|
idCliente :0,
|
||||||
|
tipoOperacion :0, |
||||||
|
opEntrada :0,
|
||||||
|
opSalida:0, |
||||||
|
idCorresponsal :0,
|
||||||
|
bultos :0,
|
||||||
|
kilos :0,
|
||||||
|
estatus :0,
|
||||||
|
trafico :'',
|
||||||
|
aduana :0,
|
||||||
|
patente :0,
|
||||||
|
pedimento :0,
|
||||||
|
clave :'',
|
||||||
|
fechaPago :'',
|
||||||
|
tipoCambio :0,
|
||||||
|
valorAduanaMN :0, |
||||||
|
totalPagado :0,
|
||||||
|
valorFacturaMN :0,
|
||||||
|
cantidadFracciones :0,
|
||||||
|
buque :'', |
||||||
|
valorFacturaDls :0,
|
||||||
|
descripcionMercancia :'',
|
||||||
|
observaciones :'',
|
||||||
|
fechaDesaduanamiento :'', |
||||||
|
semaforoFiscal :0,
|
||||||
|
noCuenta :'',
|
||||||
|
fechaCuenta :'',
|
||||||
|
tipoMercancia :0,
|
||||||
|
ultimaActualizacion :'',
|
||||||
|
zipgemco:'',
|
||||||
|
zipCorresponsales:'', |
||||||
|
proceso:1, |
||||||
|
rechazado:1, |
||||||
|
idTabulador:0, |
||||||
|
noRecti:0, |
||||||
|
estatusCode:0, |
||||||
|
activo :1
|
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
public setObject(data: ICorresponsalTrafico): ICorresponsalTrafico { |
||||||
|
return { |
||||||
|
id: data.id,
|
||||||
|
folioGemco: data.folioGemco, |
||||||
|
fechaRegistro: data.fechaRegistro, |
||||||
|
idUsuario : data.idUsuario,
|
||||||
|
idCliente :data.idCliente,
|
||||||
|
tipoOperacion :data.tipoOperacion, |
||||||
|
opEntrada : data.opEntrada,
|
||||||
|
opSalida: data.opSalida, |
||||||
|
idCorresponsal : data.idCorresponsal,
|
||||||
|
bultos :data.bultos,
|
||||||
|
kilos : data.kilos,
|
||||||
|
estatus : data.estatus,
|
||||||
|
trafico : data.trafico,
|
||||||
|
aduana : data.aduana,
|
||||||
|
patente : data.patente,
|
||||||
|
pedimento : data.pedimento,
|
||||||
|
clave : data.clave,
|
||||||
|
fechaPago : data.fechaPago,
|
||||||
|
tipoCambio : data.tipoCambio,
|
||||||
|
valorAduanaMN : data.valorAduanaMN, |
||||||
|
totalPagado : data.totalPagado,
|
||||||
|
valorFacturaMN : data.valorFacturaMN,
|
||||||
|
cantidadFracciones : data.cantidadFracciones,
|
||||||
|
buque : data.buque, |
||||||
|
valorFacturaDls : data.valorFacturaDls,
|
||||||
|
descripcionMercancia : data.descripcionMercancia,
|
||||||
|
observaciones : data.observaciones,
|
||||||
|
fechaDesaduanamiento : data.fechaDesaduanamiento, |
||||||
|
semaforoFiscal : data.semaforoFiscal,
|
||||||
|
noCuenta : data.noCuenta,
|
||||||
|
fechaCuenta : data.fechaCuenta,
|
||||||
|
tipoMercancia : data.tipoMercancia,
|
||||||
|
ultimaActualizacion : data.ultimaActualizacion,
|
||||||
|
zipgemco: data.zipgemco, |
||||||
|
zipCorresponsales: data.zipCorresponsales, |
||||||
|
proceso: data.proceso, |
||||||
|
rechazado: data.rechazado, |
||||||
|
idTabulador: data.idTabulador, |
||||||
|
noRecti: data.noRecti, |
||||||
|
estatusCode: data.estatusCode, |
||||||
|
activo : data.activo
|
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,375 @@ |
|||||||
|
import React, { FC, useEffect, useState } from 'react' |
||||||
|
import { Alert, Button, Card, Col, Form, Modal, Row } from 'react-bootstrap' |
||||||
|
import { IconContext } from 'react-icons' |
||||||
|
import ICatCorresponsales from '../../../Interfaces/Catalogos/ICatCorresponsales' |
||||||
|
import CorresponsalesDataService from '../../../Services/Catalogos/Corresponsales.Services' |
||||||
|
import { MsgInformativo } from '../../Utils/Toast/msgInformativo' |
||||||
|
import { useDispatch, useSelector } from 'react-redux' |
||||||
|
import { |
||||||
|
addCatCorresponsales, |
||||||
|
deleteCatCorresponsales, |
||||||
|
} from '../../../store/features/CatCorresponsales/CatCorresponsalesSlice' |
||||||
|
import { RootState } from '../../../store/store' |
||||||
|
import DataTable from 'react-data-table-component' |
||||||
|
import { ControlledInput } from './ControlledInput/ControlledInput' |
||||||
|
import { FaEraser, FaTimesCircle } from 'react-icons/fa' |
||||||
|
import * as CurrencyFormat from 'react-currency-format' |
||||||
|
|
||||||
|
interface IProps { |
||||||
|
canDelete: boolean |
||||||
|
} |
||||||
|
|
||||||
|
export const CatCorresponsales: FC<IProps> = (props) => { |
||||||
|
const dispatch = useDispatch() |
||||||
|
const [Depto, setDepto] = useState(() => { |
||||||
|
const stickyValue = window.localStorage.getItem('Departamento') |
||||||
|
return stickyValue !== null ? JSON.parse(stickyValue) : '' |
||||||
|
}) |
||||||
|
const [filteredData, setFilteredData] = useState<ICatCorresponsales[]>([]) |
||||||
|
const mCorresponsales = useSelector((state: RootState) => state.CatCorresponsales.CatCorresponsales) |
||||||
|
// const gridRef = React.useRef<any>(null)
|
||||||
|
const [header, setHeader] = useState('') |
||||||
|
const [msgColor, setMsgColor] = React.useState('primary') |
||||||
|
const [show, setShowMsg] = useState(false) |
||||||
|
const [msg, setMsg] = useState('') |
||||||
|
const [id, setId] = useState(0) |
||||||
|
const [msgDialog, setMsgDialog] = useState(false) |
||||||
|
// const [IDCorresponsal, setIDCorresponsal] = useState(0)
|
||||||
|
const [Nombre, setNombre] = useState('') |
||||||
|
const [Patente, setPatente] = useState(0) |
||||||
|
const [Aduana, setAduana] = useState(0) |
||||||
|
const [Correos, setCorreos] = useState('') |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
CorresponsalesDataService.getAll() |
||||||
|
.then((response) => { |
||||||
|
setFilteredData(response.data) |
||||||
|
console.log(response.data) |
||||||
|
}) |
||||||
|
.catch((e: Error) => { |
||||||
|
setHeader('Error') |
||||||
|
setMsg('Ocurrio un error: ' + e) |
||||||
|
setShowMsg(true) |
||||||
|
return |
||||||
|
}) |
||||||
|
}, []) |
||||||
|
|
||||||
|
const columnsCorresponsales = [ |
||||||
|
{ |
||||||
|
name: 'id', |
||||||
|
width: '5%', |
||||||
|
selector: (row: ICatCorresponsales) => row.id, |
||||||
|
sortable: true, |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: 'Corresponsal ...................................................................................................................................... Patente ...... Aduana ...... Correos', |
||||||
|
width: '90%', |
||||||
|
cell: (row: ICatCorresponsales) => <ControlledInput record={row} />, |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: 'Elimina', |
||||||
|
width: '5%', |
||||||
|
cell: (row: ICatCorresponsales) => ( |
||||||
|
<div |
||||||
|
style={{ textAlign: 'center', cursor: 'pointer' }} |
||||||
|
onClick={() => { |
||||||
|
setId(row.id) |
||||||
|
setNombre(row.nombre) |
||||||
|
setPatente(row.patente) |
||||||
|
setAduana(row.aduana) |
||||||
|
setCorreos(row.correos) |
||||||
|
setMsgDialog(true) |
||||||
|
}} |
||||||
|
> |
||||||
|
<IconContext.Provider value={{ color: 'red', size: '25px' }}> |
||||||
|
<FaTimesCircle /> |
||||||
|
</IconContext.Provider> |
||||||
|
</div> |
||||||
|
), |
||||||
|
}, |
||||||
|
] |
||||||
|
|
||||||
|
function deleteRow(row: ICatCorresponsales) { |
||||||
|
setId(row.id) |
||||||
|
setNombre(row.nombre) |
||||||
|
setPatente(row.patente) |
||||||
|
setAduana(row.aduana) |
||||||
|
setMsgDialog(true) |
||||||
|
} |
||||||
|
|
||||||
|
const loadRow = (data: ICatCorresponsales) => { |
||||||
|
setId(data.id) |
||||||
|
setNombre(data.nombre) |
||||||
|
setPatente(data.patente) |
||||||
|
setAduana(data.aduana) |
||||||
|
setCorreos(data.correos) |
||||||
|
} |
||||||
|
|
||||||
|
function Guardar() { |
||||||
|
if (Patente < 999) { |
||||||
|
setHeader('Error!') |
||||||
|
setMsgColor('danger') |
||||||
|
setMsg('La patente debe tener 4 digitos') |
||||||
|
setShowMsg(true) |
||||||
|
return false |
||||||
|
} |
||||||
|
if (Aduana < 99) { |
||||||
|
setHeader('Error!') |
||||||
|
setMsgColor('danger') |
||||||
|
setMsg('La aduana debe tener 3 digitos') |
||||||
|
setShowMsg(true) |
||||||
|
return false |
||||||
|
} |
||||||
|
const data: ICatCorresponsales = { |
||||||
|
id: id, |
||||||
|
nombre: Nombre, |
||||||
|
aduana: Aduana, |
||||||
|
patente: Patente, |
||||||
|
correos: Correos, |
||||||
|
} |
||||||
|
CorresponsalesDataService.Append(data) |
||||||
|
.then((response) => { |
||||||
|
if (response.status == 200) { |
||||||
|
dispatch(addCatCorresponsales(response.data)) |
||||||
|
setMsgColor('primary') |
||||||
|
setHeader('Confirmacion') |
||||||
|
setMsg('La informacion se guardo exitosamente') |
||||||
|
setShowMsg(true) |
||||||
|
} |
||||||
|
}) |
||||||
|
.catch((e: Error) => { |
||||||
|
setHeader('Error') |
||||||
|
setMsg('Ocurrio un error: ' + e) |
||||||
|
setShowMsg(true) |
||||||
|
return |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
function cleanForm() { |
||||||
|
setId(0) |
||||||
|
setNombre('') |
||||||
|
setPatente(0) |
||||||
|
setAduana(0) |
||||||
|
} |
||||||
|
|
||||||
|
const deleteItem = () => { |
||||||
|
setMsgDialog(false) |
||||||
|
CorresponsalesDataService.Delete(id) |
||||||
|
.then((response) => { |
||||||
|
if (response.status == 200) { |
||||||
|
dispatch(deleteCatCorresponsales(id)) |
||||||
|
cleanForm() |
||||||
|
} |
||||||
|
}) |
||||||
|
.catch((e: Error) => { |
||||||
|
setHeader('Error') |
||||||
|
setMsg('Ocurrio un error: ' + e) |
||||||
|
setShowMsg(true) |
||||||
|
return |
||||||
|
}) |
||||||
|
|
||||||
|
setNombre('') |
||||||
|
setId(0) |
||||||
|
} |
||||||
|
|
||||||
|
return ( |
||||||
|
<div> |
||||||
|
<Card className='labelSize13px'> |
||||||
|
<Card.Body> |
||||||
|
<Row |
||||||
|
style={{ |
||||||
|
visibility: props.canDelete ? 'visible' : 'hidden', |
||||||
|
height: props.canDelete ? '' : '0px', |
||||||
|
}} |
||||||
|
> |
||||||
|
<Col xs={1}> |
||||||
|
<Form.Label>Corresponsal</Form.Label> |
||||||
|
</Col> |
||||||
|
<Col xs={5}> |
||||||
|
{/* <Form.Control |
||||||
|
type='text' |
||||||
|
id='Nombre' |
||||||
|
size='sm' |
||||||
|
value={Nombre} |
||||||
|
pattern='[a-zA-Z ]*' |
||||||
|
onChange={(e) => setNombre((v) => (e.target.validity.valid ? e.target.value : v))} |
||||||
|
/> */} |
||||||
|
<input |
||||||
|
type='text' |
||||||
|
className='form-control genericSelect' |
||||||
|
name='Nombre' |
||||||
|
id='Nombre' |
||||||
|
style={{ height: '30px' }} |
||||||
|
value={Nombre} |
||||||
|
placeholder='Proporcione el nombre del corresponsal' |
||||||
|
onChange={(e) => { |
||||||
|
setNombre(e.target.value) |
||||||
|
}} |
||||||
|
/* onKeyDown={(e) => handleKeyDown(e)} */ |
||||||
|
/> |
||||||
|
</Col> |
||||||
|
<Col xs={1}> |
||||||
|
<Form.Label>Correos</Form.Label> |
||||||
|
</Col> |
||||||
|
<Col xs={5}> |
||||||
|
<Form.Control |
||||||
|
type='text' |
||||||
|
id='Correos' |
||||||
|
size='sm' |
||||||
|
value={Correos} |
||||||
|
onChange={(e) => setCorreos((v) => e.target.value)} |
||||||
|
/> |
||||||
|
</Col> |
||||||
|
</Row> |
||||||
|
<Row |
||||||
|
style={{ |
||||||
|
paddingTop: 5, |
||||||
|
visibility: props.canDelete ? 'visible' : 'hidden', |
||||||
|
height: props.canDelete ? '' : '0px', |
||||||
|
}} |
||||||
|
> |
||||||
|
<Col |
||||||
|
xs={1} |
||||||
|
style={{ textAlign: 'right', paddingTop: '5px', cursor: 'pointer' }} |
||||||
|
onClick={() => { |
||||||
|
cleanForm() |
||||||
|
}} |
||||||
|
> |
||||||
|
<IconContext.Provider value={{ color: 'orange', size: '25px' }}> |
||||||
|
<FaEraser /> |
||||||
|
</IconContext.Provider> |
||||||
|
</Col> |
||||||
|
<Col xs={2}> </Col> |
||||||
|
<Col> |
||||||
|
<Form.Label>Patente</Form.Label> |
||||||
|
</Col> |
||||||
|
<Col> |
||||||
|
<CurrencyFormat |
||||||
|
value={Patente} |
||||||
|
displayType={Depto === 'Corresponsalias' ? 'input' : 'text'} |
||||||
|
onValueChange={(values: any) => { |
||||||
|
const { formattedValue, value } = values |
||||||
|
setPatente(value) |
||||||
|
}} |
||||||
|
style={ |
||||||
|
Depto === 'Corresponsalias' |
||||||
|
? { |
||||||
|
fontSize: '18px', |
||||||
|
backgroundColor: '#F5FFED', |
||||||
|
border: '2px solid #25D05B', |
||||||
|
width: '80px', |
||||||
|
textAlign: 'right', |
||||||
|
borderRadius: '10px', |
||||||
|
} |
||||||
|
: { |
||||||
|
fontSize: '18px', |
||||||
|
backgroundColor: '#F5FFED', |
||||||
|
border: '2px solid #25D05B', |
||||||
|
width: '80px', |
||||||
|
textAlign: 'right', |
||||||
|
borderRadius: '10px', |
||||||
|
paddingRight: '5px', |
||||||
|
paddingLeft: '5px', |
||||||
|
} |
||||||
|
} |
||||||
|
/> |
||||||
|
</Col> |
||||||
|
<Col> </Col> |
||||||
|
<Col> |
||||||
|
<Form.Label>Aduana</Form.Label> |
||||||
|
</Col> |
||||||
|
<Col> |
||||||
|
<CurrencyFormat |
||||||
|
value={Aduana} |
||||||
|
displayType={Depto === 'Corresponsalias' ? 'input' : 'text'} |
||||||
|
onValueChange={(values: any) => { |
||||||
|
const { formattedValue, value } = values |
||||||
|
setAduana(value) |
||||||
|
}} |
||||||
|
style={ |
||||||
|
Depto === 'Corresponsalias' |
||||||
|
? { |
||||||
|
fontSize: '18px', |
||||||
|
backgroundColor: '#F5FFED', |
||||||
|
border: '2px solid #25D05B', |
||||||
|
width: '60px', |
||||||
|
textAlign: 'right', |
||||||
|
borderRadius: '10px', |
||||||
|
} |
||||||
|
: { |
||||||
|
fontSize: '18px', |
||||||
|
backgroundColor: '#F5FFED', |
||||||
|
border: '2px solid #25D05B', |
||||||
|
width: '60px', |
||||||
|
textAlign: 'right', |
||||||
|
borderRadius: '10px', |
||||||
|
paddingRight: '5px', |
||||||
|
paddingLeft: '5px', |
||||||
|
} |
||||||
|
} |
||||||
|
/> |
||||||
|
</Col> |
||||||
|
<Col xs={2}></Col> |
||||||
|
<Col md='auto'> |
||||||
|
<Button |
||||||
|
variant='primary' |
||||||
|
size='sm' |
||||||
|
onClick={() => { |
||||||
|
Guardar() |
||||||
|
}} |
||||||
|
> |
||||||
|
Guardar |
||||||
|
</Button> |
||||||
|
</Col> |
||||||
|
</Row> |
||||||
|
<Row style={{ paddingTop: 5 }}> |
||||||
|
<DataTable |
||||||
|
noHeader |
||||||
|
defaultSortFieldId={'id'} |
||||||
|
defaultSortAsc={true} |
||||||
|
pagination |
||||||
|
highlightOnHover |
||||||
|
columns={columnsCorresponsales} |
||||||
|
data={mCorresponsales} |
||||||
|
/> |
||||||
|
<Col></Col> |
||||||
|
</Row> |
||||||
|
</Card.Body> |
||||||
|
</Card> |
||||||
|
<Modal show={msgDialog} onHide={() => setMsgDialog(false)} size='sm'> |
||||||
|
<Modal.Body> |
||||||
|
<Alert variant='primary'> |
||||||
|
<b>¿Esta seguro de eliminar?</b> |
||||||
|
<br /> |
||||||
|
<h5> |
||||||
|
{Nombre} | Patente: {Patente} | Aduana {Aduana} |
||||||
|
</h5> |
||||||
|
</Alert> |
||||||
|
</Modal.Body> |
||||||
|
<Modal.Footer> |
||||||
|
<Row> |
||||||
|
<Col xs={6}> |
||||||
|
<Button variant='secondary' onClick={() => setMsgDialog(false)} size='sm'> |
||||||
|
Cerrar |
||||||
|
</Button> |
||||||
|
</Col> |
||||||
|
<Col xs={6}> |
||||||
|
<Button variant='primary' onClick={deleteItem} size='sm'> |
||||||
|
Si |
||||||
|
</Button> |
||||||
|
</Col> |
||||||
|
</Row> |
||||||
|
</Modal.Footer> |
||||||
|
</Modal> |
||||||
|
<MsgInformativo |
||||||
|
show={show} |
||||||
|
msg={msg} |
||||||
|
header={header} |
||||||
|
msgColor={msgColor} |
||||||
|
closeToast={() => { |
||||||
|
setShowMsg(false) |
||||||
|
}} |
||||||
|
/> |
||||||
|
</div> |
||||||
|
) |
||||||
|
} |
||||||
@ -0,0 +1,114 @@ |
|||||||
|
import React, { FC, useState } from 'react' |
||||||
|
import { useDispatch } from 'react-redux' |
||||||
|
import ICatCorresponsales from '../../../../Interfaces/Catalogos/ICatCorresponsales' |
||||||
|
import CorDataService from '../../../../Services/Catalogos/Corresponsales.Services' |
||||||
|
import { updateCatCorresponsales } from '../../../../store/features/CatCorresponsales/CatCorresponsalesSlice' |
||||||
|
import { MsgInformativo } from '../../../Utils/Toast/msgInformativo' |
||||||
|
|
||||||
|
interface IProps { |
||||||
|
record: ICatCorresponsales |
||||||
|
} |
||||||
|
|
||||||
|
export const ControlledInput: FC<IProps> = (props) => { |
||||||
|
const dispatch = useDispatch() |
||||||
|
const [IDCorresponsal, setIDCorresponsal] = useState(props.record.id) |
||||||
|
const [Corresponsal, setCorresponsal] = useState(props.record.nombre) |
||||||
|
const [Patente, setPatente] = useState(props.record.patente) |
||||||
|
const [Aduana, setAduana] = useState(props.record.aduana) |
||||||
|
const [Correos, setCorreos] = useState(props.record.correos) |
||||||
|
const [header, setHeader] = useState('') |
||||||
|
const [msgColor, setMsgColor] = React.useState('primary') |
||||||
|
const [show, setShowMsg] = useState(false) |
||||||
|
const [msg, setMsg] = useState('') |
||||||
|
|
||||||
|
const onChangeCor = (event: any) => { |
||||||
|
setCorresponsal(event.target.value) |
||||||
|
} |
||||||
|
|
||||||
|
const onChangeAd = (event: any) => { |
||||||
|
setAduana(event.target.value) |
||||||
|
} |
||||||
|
const onChangePat = (event: any) => { |
||||||
|
setPatente(event.target.value) |
||||||
|
} |
||||||
|
const onChangeEmail = (event: any) => { |
||||||
|
setCorreos(event.target.value) |
||||||
|
} |
||||||
|
|
||||||
|
const handleKeyDown = (event: any, mode: number) => { |
||||||
|
if (event.key === 'Enter') { |
||||||
|
if (isNaN(event.target.value) && mode === 1) { |
||||||
|
alert('Valor no valido!') |
||||||
|
return |
||||||
|
} |
||||||
|
const data: ICatCorresponsales = { |
||||||
|
id: props.record.id, |
||||||
|
nombre: Corresponsal, |
||||||
|
patente: Patente, |
||||||
|
aduana: Aduana, |
||||||
|
correos: Correos, |
||||||
|
} |
||||||
|
CorDataService.Append(data) |
||||||
|
.then((response) => { |
||||||
|
if (response.status == 200) { |
||||||
|
dispatch(updateCatCorresponsales(response.data)) |
||||||
|
setHeader('Informativo') |
||||||
|
setMsg('La informacion se guardo exitosamente') |
||||||
|
setShowMsg(true) |
||||||
|
return |
||||||
|
} |
||||||
|
}) |
||||||
|
.catch((e: Error) => { |
||||||
|
setHeader('Error') |
||||||
|
setMsg('Ocurrio un error: ' + e) |
||||||
|
setShowMsg(true) |
||||||
|
return |
||||||
|
}) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
return ( |
||||||
|
<div> |
||||||
|
<input |
||||||
|
value={Corresponsal} |
||||||
|
onChange={onChangeCor} |
||||||
|
disabled={false} |
||||||
|
onKeyDown={(e) => handleKeyDown(e, 2)} |
||||||
|
style={{ width: '450px', textAlign: 'left' }} |
||||||
|
/> |
||||||
|
|
||||||
|
<input |
||||||
|
value={Patente} |
||||||
|
onChange={onChangePat} |
||||||
|
disabled={false} |
||||||
|
onKeyDown={(e) => handleKeyDown(e, 1)} |
||||||
|
style={{ width: '50px', textAlign: 'right' }} |
||||||
|
/> |
||||||
|
|
||||||
|
<input |
||||||
|
value={Aduana} |
||||||
|
onChange={onChangeAd} |
||||||
|
disabled={false} |
||||||
|
onKeyDown={(e) => handleKeyDown(e, 1)} |
||||||
|
style={{ width: '30px', textAlign: 'right' }} |
||||||
|
/> |
||||||
|
|
||||||
|
<input |
||||||
|
value={Correos} |
||||||
|
onChange={onChangeEmail} |
||||||
|
disabled={false} |
||||||
|
onKeyDown={(e) => handleKeyDown(e, 2)} |
||||||
|
style={{ width: '650px', textAlign: 'left' }} |
||||||
|
/> |
||||||
|
<MsgInformativo |
||||||
|
show={show} |
||||||
|
msg={msg} |
||||||
|
header={header} |
||||||
|
msgColor={msgColor} |
||||||
|
closeToast={() => { |
||||||
|
setShowMsg(false) |
||||||
|
}} |
||||||
|
/> |
||||||
|
</div> |
||||||
|
) |
||||||
|
} |
||||||
@ -0,0 +1,501 @@ |
|||||||
|
import React, { FC, useEffect, useState } from 'react' |
||||||
|
|
||||||
|
import ITabulador from '../../../Interfaces/Catalogos/ITabulador' |
||||||
|
import ITabuladorConceptos from '../../../Interfaces/Catalogos/ITabuladorConceptos' |
||||||
|
import DTOConceptos from '../../../DTO/Utils/DTOConceptos' |
||||||
|
|
||||||
|
import CTabDataService from '../../../Services/Corresponsalias/Corresponsales.Tabuladores.Services' |
||||||
|
import CTabDetDataService from '../../../Services/Corresponsalias/Corresponsales.Tabuladores.Detalle.Sevices' |
||||||
|
import ClientesDataService from '../../../Services/Catalogos/Clientes.Services' |
||||||
|
|
||||||
|
import { MsgInformativo } from '../../Utils/Toast/msgInformativo' |
||||||
|
import { ControlledInput } from '../../Utils/ControlledInput/ControlledInput' |
||||||
|
import DataTable from 'react-data-table-component' |
||||||
|
import { Alert, Button, Card, Col, Container, Form, Modal, Row } from 'react-bootstrap' |
||||||
|
import { IconContext } from 'react-icons' |
||||||
|
import 'react-data-table-component-extensions/dist/index.css' |
||||||
|
import { BsPlusSquareFill } from 'react-icons/bs' |
||||||
|
import IClientes from '../../../Interfaces/Catalogos/IClientes' |
||||||
|
import { FcTimeline } from 'react-icons/fc' |
||||||
|
import { FaEraser, FaTimesCircle } from 'react-icons/fa' |
||||||
|
|
||||||
|
interface IProps {} |
||||||
|
|
||||||
|
interface IselectedRows { |
||||||
|
allSelected: boolean |
||||||
|
selectedCount: number |
||||||
|
selectedRows: any |
||||||
|
} |
||||||
|
|
||||||
|
export default function CatTabuladores (props: IProps) { |
||||||
|
const [UserId, setUserId] = useState(() => { |
||||||
|
const stickyValue = window.localStorage.getItem('UserId') |
||||||
|
return stickyValue !== null ? JSON.parse(stickyValue) : 0 |
||||||
|
}) |
||||||
|
const [Tabulador, setTabulador] = useState(0) |
||||||
|
const [Concepto, setConcepto] = useState(0) |
||||||
|
const [Cliente, setCliente] = useState(0) |
||||||
|
const [Clientes, setClientes] = useState<Array<IClientes>>() |
||||||
|
const [NombreTabulador, setNombreTabulador] = useState('') |
||||||
|
const [DetalleConceptos, setDetalleConceptos] = useState<ITabuladorConceptos[]>([]) |
||||||
|
const [CatConceptos, setCatConceptos] = useState<DTOConceptos[]>([]) |
||||||
|
const [Tabuladores, setTabuladores] = useState<ITabulador[]>([]) |
||||||
|
const [AllTabuladores, setAllTabuladores] = useState<ITabulador[]>([]) |
||||||
|
const [Costo, setCosto] = useState('') |
||||||
|
const [header, setHeader] = useState('') |
||||||
|
const [msgColor, setMsgColor] = React.useState('primary') |
||||||
|
const [show, setShowMsg] = useState(false) |
||||||
|
const [msg, setMsg] = useState('') |
||||||
|
const [DialogTabs, setDialogTabs] = useState(false) |
||||||
|
|
||||||
|
const columnsConcepts = [ |
||||||
|
{ |
||||||
|
name: 'id', |
||||||
|
selector: (row: ITabuladorConceptos) => row.id, |
||||||
|
sortable: true, |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: 'Concepto', |
||||||
|
width: '70%', |
||||||
|
selector: (row: ITabuladorConceptos) => row.concepto, |
||||||
|
sortable: true, |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: 'Costo', |
||||||
|
cell: (row: ITabuladorConceptos) => ( |
||||||
|
<ControlledInput |
||||||
|
id={row.id} |
||||||
|
value={row.costo} |
||||||
|
postCost={(id, value) => { |
||||||
|
postCost(id, value) |
||||||
|
}} |
||||||
|
/> |
||||||
|
), |
||||||
|
}, |
||||||
|
] |
||||||
|
|
||||||
|
const columnsTabs = [ |
||||||
|
{ |
||||||
|
name: 'id', |
||||||
|
selector: (row: ITabulador) => row.id, |
||||||
|
sortable: true, |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: 'Nombre', |
||||||
|
width: '70%', |
||||||
|
cell: (row: ITabulador) => ( |
||||||
|
<div |
||||||
|
style={{ width: '450px', cursor: 'pointer' }} |
||||||
|
onClick={() => { |
||||||
|
setTabulador(row.id) |
||||||
|
setNombreTabulador(row.nombre) |
||||||
|
}} |
||||||
|
> |
||||||
|
{row.nombre} |
||||||
|
</div> |
||||||
|
), |
||||||
|
sortable: true, |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: 'Elimina', |
||||||
|
cell: (row: ITabulador) => ( |
||||||
|
<div |
||||||
|
style={{ textAlign: 'center', cursor: 'pointer' }} |
||||||
|
onClick={() => { |
||||||
|
setTabulador(row.id) |
||||||
|
setNombreTabulador(row.nombre) |
||||||
|
setDialogTabs(true) |
||||||
|
}} |
||||||
|
> |
||||||
|
<IconContext.Provider value={{ color: 'red', size: '25px' }}> |
||||||
|
<FaTimesCircle /> |
||||||
|
</IconContext.Provider> |
||||||
|
</div> |
||||||
|
), |
||||||
|
}, |
||||||
|
] |
||||||
|
|
||||||
|
const postCost = (id: number, Cost: number) => { |
||||||
|
const data: ITabuladorConceptos = { |
||||||
|
id: id, |
||||||
|
idTabulador: Tabulador, |
||||||
|
idConcepto: Concepto, |
||||||
|
concepto: '', |
||||||
|
costo: Cost, |
||||||
|
activo: 1, |
||||||
|
} |
||||||
|
CTabDetDataService.Append(data) |
||||||
|
.then((response) => { |
||||||
|
setDetalleConceptos(response.data) |
||||||
|
setHeader('Confirmacion') |
||||||
|
setMsg('La informacion se guardo corrctamente') |
||||||
|
setShowMsg(true) |
||||||
|
}) |
||||||
|
.catch((e: Error) => { |
||||||
|
setHeader('Error') |
||||||
|
setMsg('Ocurrio un error: ' + e) |
||||||
|
setShowMsg(true) |
||||||
|
return |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
const deleteTabulador = () => { |
||||||
|
CTabDataService.Delete(Tabulador) |
||||||
|
.then((response) => { |
||||||
|
if (response.status === 200) { |
||||||
|
setHeader('Informativo') |
||||||
|
setMsg(response.data.respuesta) |
||||||
|
setShowMsg(true) |
||||||
|
setDialogTabs(false) |
||||||
|
setTabuladores(Tabuladores.filter((data) => data.id != Tabulador)) |
||||||
|
setAllTabuladores(Tabuladores) |
||||||
|
return |
||||||
|
} |
||||||
|
}) |
||||||
|
.catch((e: Error) => { |
||||||
|
setHeader('Error') |
||||||
|
setMsg('Ocurrio un error: ' + e) |
||||||
|
setShowMsg(true) |
||||||
|
return |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
CTabDetDataService.getAllConcepts() |
||||||
|
.then((response) => { |
||||||
|
setCatConceptos(response.data) |
||||||
|
}) |
||||||
|
.catch((e: Error) => { |
||||||
|
setHeader('Error') |
||||||
|
setMsg('Ocurrio un error: ' + e) |
||||||
|
setShowMsg(true) |
||||||
|
return |
||||||
|
}) |
||||||
|
ClientesDataService.getAllClientes(UserId) |
||||||
|
.then((response) => { |
||||||
|
setClientes(response.data) |
||||||
|
}) |
||||||
|
.catch((e: Error) => { |
||||||
|
setHeader('Error') |
||||||
|
setMsg('Ocurrio un error: ' + e) |
||||||
|
setShowMsg(true) |
||||||
|
return |
||||||
|
}) |
||||||
|
}, []) |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
CTabDetDataService.GetDetailByIdTab(Tabulador) |
||||||
|
.then((response) => { |
||||||
|
setDetalleConceptos(response.data) |
||||||
|
}) |
||||||
|
.catch((e: Error) => { |
||||||
|
setHeader('Error') |
||||||
|
setMsg('Ocurrio un error: ' + e) |
||||||
|
setShowMsg(true) |
||||||
|
return |
||||||
|
}) |
||||||
|
console.log(Tabulador) |
||||||
|
}, [Tabulador]) |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
if (Cliente > 0) { |
||||||
|
setNombreTabulador('') |
||||||
|
setTabuladores([]) |
||||||
|
setDetalleConceptos([]) |
||||||
|
CTabDataService.GetByCustomer(Cliente) |
||||||
|
.then((response) => { |
||||||
|
setTabuladores(response.data) |
||||||
|
}) |
||||||
|
.catch((e: Error) => { |
||||||
|
setHeader('Error') |
||||||
|
setMsg('Ocurrio un error: ' + e) |
||||||
|
setShowMsg(true) |
||||||
|
return |
||||||
|
}) |
||||||
|
} |
||||||
|
}, [Cliente]) |
||||||
|
|
||||||
|
const filtraTabulador = (e: any) => { |
||||||
|
if (e.target.value !== '') { |
||||||
|
setTabuladores( |
||||||
|
AllTabuladores.filter(function (el) { |
||||||
|
return el.nombre.toLocaleLowerCase().includes(e.target.value.toLocaleLowerCase()) |
||||||
|
}) |
||||||
|
) |
||||||
|
} else { |
||||||
|
setTabuladores(AllTabuladores) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
const saveForm = () => { |
||||||
|
const data: ITabulador = { |
||||||
|
id: Tabulador, |
||||||
|
idCliente: Cliente, |
||||||
|
nombre: NombreTabulador, |
||||||
|
} |
||||||
|
CTabDataService.Append(data) |
||||||
|
.then((response) => { |
||||||
|
if (response.status === 200) { |
||||||
|
setHeader('Informativo') |
||||||
|
setMsg('La informacion se guardo correctamente') |
||||||
|
setShowMsg(true) |
||||||
|
if (Tabulador > 0) { |
||||||
|
let tmp = Tabuladores |
||||||
|
let idx = tmp.findIndex((obj) => obj.id == Tabulador) |
||||||
|
tmp[idx].nombre = NombreTabulador |
||||||
|
setTabuladores(tmp) |
||||||
|
setAllTabuladores(tmp) |
||||||
|
} else { |
||||||
|
setTabulador(response.data.id) |
||||||
|
const tmp = [...Tabuladores, response.data] |
||||||
|
setTabuladores(tmp) |
||||||
|
setAllTabuladores(tmp) |
||||||
|
} |
||||||
|
return |
||||||
|
} |
||||||
|
}) |
||||||
|
.catch((e: Error) => { |
||||||
|
setHeader('Error') |
||||||
|
setMsg('Ocurrio un error: ' + e) |
||||||
|
setShowMsg(true) |
||||||
|
return |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
const addConcept = () => { |
||||||
|
if (Tabulador === 0) { |
||||||
|
setHeader('Error') |
||||||
|
setMsg('Por favor, primero seleccione el tabulador') |
||||||
|
setShowMsg(true) |
||||||
|
return |
||||||
|
} |
||||||
|
if (Concepto === 0) { |
||||||
|
setHeader('Error') |
||||||
|
setMsg('Por favor, primero seleccione el concepto') |
||||||
|
setShowMsg(true) |
||||||
|
return |
||||||
|
} |
||||||
|
postCost(0, 0) |
||||||
|
} |
||||||
|
|
||||||
|
return ( |
||||||
|
<div> |
||||||
|
<Card> |
||||||
|
<Card.Body> |
||||||
|
<Card style={{ height: '100%' }}> |
||||||
|
<Card.Header as='h4'>Tabuladores</Card.Header> |
||||||
|
<Card.Body> |
||||||
|
<Container fluid> |
||||||
|
<Alert variant='primary'> |
||||||
|
<Row> |
||||||
|
<Col xs={1} style={{ paddingTop: '5px' }}> |
||||||
|
<h5>Cliente: </h5> |
||||||
|
</Col> |
||||||
|
<Col xs={5}> |
||||||
|
<h4> |
||||||
|
<Form.Control |
||||||
|
as='select' |
||||||
|
onChange={(e) => { |
||||||
|
setCliente(parseInt(e.target.value)) |
||||||
|
}} |
||||||
|
className='form-select form-select-sm' |
||||||
|
style={{ fontSize: '18px' }} |
||||||
|
> |
||||||
|
<option value='0'>-SELECCIONE-</option> |
||||||
|
{Clientes |
||||||
|
? Clientes.map((c) => { |
||||||
|
return ( |
||||||
|
<option value={c.sClave} key={c.sClave}> |
||||||
|
{c.sRazonSocial} |
||||||
|
</option> |
||||||
|
) |
||||||
|
}) |
||||||
|
: null} |
||||||
|
</Form.Control> |
||||||
|
</h4> |
||||||
|
</Col> |
||||||
|
<Col |
||||||
|
xs={1} |
||||||
|
style={{ textAlign: 'right', paddingTop: '5px', cursor: 'pointer' }} |
||||||
|
onClick={() => { |
||||||
|
setTabulador(0) |
||||||
|
setNombreTabulador('') |
||||||
|
}} |
||||||
|
> |
||||||
|
<IconContext.Provider value={{ color: 'orange', size: '25px' }}> |
||||||
|
<FaEraser /> |
||||||
|
</IconContext.Provider> |
||||||
|
</Col> |
||||||
|
<Col xs={1} style={{ paddingTop: '5px' }}> |
||||||
|
<div> |
||||||
|
<h5>Tabulador</h5> |
||||||
|
</div> |
||||||
|
</Col> |
||||||
|
<Col xs={3}> |
||||||
|
<h4> |
||||||
|
<Form.Control |
||||||
|
type='text' |
||||||
|
id='NombreTabulador' |
||||||
|
size='sm' |
||||||
|
value={NombreTabulador} |
||||||
|
onChange={(e) => { |
||||||
|
setNombreTabulador(e.target.value) |
||||||
|
}} |
||||||
|
placeholder='Nombre del tabulador' |
||||||
|
style={{ fontSize: '18px' }} |
||||||
|
/> |
||||||
|
</h4> |
||||||
|
</Col> |
||||||
|
<Col> |
||||||
|
<Button |
||||||
|
variant='primary' |
||||||
|
size='sm' |
||||||
|
style={{ paddingLeft: '10px', paddingRight: '10px' }} |
||||||
|
onClick={() => saveForm()} |
||||||
|
> |
||||||
|
Guardar |
||||||
|
</Button> |
||||||
|
</Col> |
||||||
|
</Row> |
||||||
|
</Alert> |
||||||
|
<Row> |
||||||
|
<Col xs={6}> |
||||||
|
<Card style={{}}> |
||||||
|
<Card.Body> |
||||||
|
<Card.Subtitle className='mb-2 text-muted'> |
||||||
|
<Row> |
||||||
|
<Col xs={2} style={{ paddingTop: '8px' }}> |
||||||
|
Tabulador |
||||||
|
</Col> |
||||||
|
<Col xs={10}> |
||||||
|
<Form.Control |
||||||
|
type='text' |
||||||
|
size='sm' |
||||||
|
placeholder='Busqueda de tabulador...' |
||||||
|
onChange={(e) => { |
||||||
|
filtraTabulador(e) |
||||||
|
}} |
||||||
|
/> |
||||||
|
</Col> |
||||||
|
</Row> |
||||||
|
</Card.Subtitle> |
||||||
|
<DataTable |
||||||
|
noHeader |
||||||
|
defaultSortFieldId={'id'} |
||||||
|
defaultSortAsc={true} |
||||||
|
pagination |
||||||
|
highlightOnHover |
||||||
|
columns={columnsTabs} |
||||||
|
data={Tabuladores} |
||||||
|
/> |
||||||
|
</Card.Body> |
||||||
|
</Card> |
||||||
|
</Col> |
||||||
|
<Col xs={6}> |
||||||
|
<Card style={{}}> |
||||||
|
<Card.Body> |
||||||
|
<Card.Subtitle className='mb-2 text-muted'> |
||||||
|
<Row> |
||||||
|
<Col xs={2} style={{ paddingTop: '8px' }}> |
||||||
|
Conceptos |
||||||
|
</Col> |
||||||
|
<Col xs={9}> |
||||||
|
<Form.Control |
||||||
|
as='select' |
||||||
|
onChange={(e) => setConcepto(parseInt(e.target.value))} |
||||||
|
className='form-select form-select-sm' |
||||||
|
style={{ fontSize: '17px' }} |
||||||
|
> |
||||||
|
<option value='0'>- Seleccione -</option> |
||||||
|
{CatConceptos |
||||||
|
? CatConceptos.map((c) => { |
||||||
|
return ( |
||||||
|
<option value={c.id} key={c.id}> |
||||||
|
{c.concepto} |
||||||
|
</option> |
||||||
|
) |
||||||
|
}) |
||||||
|
: null} |
||||||
|
</Form.Control> |
||||||
|
</Col> |
||||||
|
<Col style={{ paddingTop: '5px' }}> |
||||||
|
<Form.Label |
||||||
|
onClick={() => { |
||||||
|
addConcept() |
||||||
|
}} |
||||||
|
style={{ cursor: 'pointer' }} |
||||||
|
> |
||||||
|
<IconContext.Provider value={{ color: 'green', size: '30px' }}> |
||||||
|
<BsPlusSquareFill /> |
||||||
|
</IconContext.Provider> |
||||||
|
</Form.Label> |
||||||
|
</Col> |
||||||
|
</Row> |
||||||
|
</Card.Subtitle> |
||||||
|
<DataTable |
||||||
|
noHeader |
||||||
|
defaultSortFieldId={'id'} |
||||||
|
defaultSortAsc={true} |
||||||
|
pagination |
||||||
|
highlightOnHover |
||||||
|
columns={columnsConcepts} |
||||||
|
data={DetalleConceptos} |
||||||
|
/> |
||||||
|
</Card.Body> |
||||||
|
</Card> |
||||||
|
</Col> |
||||||
|
</Row> |
||||||
|
</Container> |
||||||
|
</Card.Body> |
||||||
|
</Card> |
||||||
|
</Card.Body> |
||||||
|
</Card> |
||||||
|
<Modal |
||||||
|
show={DialogTabs} |
||||||
|
onHide={() => { |
||||||
|
setDialogTabs(false) |
||||||
|
}} |
||||||
|
size='sm' |
||||||
|
> |
||||||
|
<Modal.Body> |
||||||
|
¿Esta seguro de eliminar: |
||||||
|
<br /> {NombreTabulador}? |
||||||
|
</Modal.Body> |
||||||
|
<Modal.Footer> |
||||||
|
<Row> |
||||||
|
<Col xs={6} style={{ textAlign: 'left', paddingRight: '100px' }}> |
||||||
|
<Button |
||||||
|
variant='danger' |
||||||
|
onClick={deleteTabulador} |
||||||
|
size='sm' |
||||||
|
style={{ paddingRight: '20px', paddingLeft: '20px' }} |
||||||
|
> |
||||||
|
Si |
||||||
|
</Button> |
||||||
|
</Col> |
||||||
|
<Col xs={6} style={{ textAlign: 'right' }}> |
||||||
|
<Button |
||||||
|
variant='secondary' |
||||||
|
onClick={() => { |
||||||
|
setDialogTabs(false) |
||||||
|
}} |
||||||
|
size='sm' |
||||||
|
> |
||||||
|
Cerrar |
||||||
|
</Button> |
||||||
|
</Col> |
||||||
|
</Row> |
||||||
|
</Modal.Footer> |
||||||
|
</Modal> |
||||||
|
<MsgInformativo |
||||||
|
show={show} |
||||||
|
msg={msg} |
||||||
|
header={header} |
||||||
|
msgColor={msgColor} |
||||||
|
closeToast={() => { |
||||||
|
setShowMsg(false) |
||||||
|
}} |
||||||
|
/> |
||||||
|
</div> |
||||||
|
) |
||||||
|
} |
||||||
@ -0,0 +1,614 @@ |
|||||||
|
import React, { FC, useEffect, useState } from 'react' |
||||||
|
import { Alert, Button, Col, Container, Form, Modal, Row } from 'react-bootstrap' |
||||||
|
import { IconContext } from 'react-icons' |
||||||
|
import { |
||||||
|
BsCash, |
||||||
|
BsCheckCircle, |
||||||
|
BsCheckCircleFill, |
||||||
|
BsEraserFill, |
||||||
|
BsFileEarmarkPdf, |
||||||
|
BsFillXCircleFill, |
||||||
|
BsPencilFill, |
||||||
|
BsQuestionOctagonFill, |
||||||
|
} from 'react-icons/bs' |
||||||
|
import { MsgInformativo } from '../../Utils/Toast/msgInformativo' |
||||||
|
import 'react-flexy-table/dist/index.css' |
||||||
|
import DTOItems from '../../../DTO/Corresponsales/DTOItems' |
||||||
|
import CAnticiposDataService from '../../../Services/Corresponsalias/Corresponsales.Anticipos.Services' |
||||||
|
|
||||||
|
import { |
||||||
|
populateCorresponsalesAnticipos, |
||||||
|
addCorresponsalesAnticipos, |
||||||
|
deleteCorresponsalesAnticipos, |
||||||
|
updateCorresponsalesAnticipos, |
||||||
|
} from '../../../store/features/Corresponsales/CorresponsalesAnticiposSlice' |
||||||
|
import ICorresponsalAnticipos from '../../../Interfaces/Corresponsales/ICorresponsalAnticipos' |
||||||
|
import { useDispatch, useSelector } from 'react-redux' |
||||||
|
import { RootState } from '../../../store/store' |
||||||
|
import { AgGridReact } from 'ag-grid-react' |
||||||
|
import { RowClickedEvent } from 'ag-grid-community' |
||||||
|
import { BiCoinStack } from 'react-icons/bi' |
||||||
|
import * as CurrencyFormat from 'react-currency-format' |
||||||
|
import FileManager from '../../Utils/FileManager/FileManager' |
||||||
|
import DTOAnticiposAutoriza from '../../../DTO/Corresponsales/DTOAnticiposAutoriza' |
||||||
|
|
||||||
|
interface ItemList { |
||||||
|
id: number |
||||||
|
item: string |
||||||
|
} |
||||||
|
|
||||||
|
interface IProps { |
||||||
|
IDTrafico: number |
||||||
|
closeCRUDItems: (arg: boolean) => void |
||||||
|
canDelete: boolean |
||||||
|
} |
||||||
|
|
||||||
|
export const Anticipos: FC<IProps> = (props) => { |
||||||
|
const [UserId, setUserId] = useState(() => { |
||||||
|
const stickyValue = window.localStorage.getItem('UserId') |
||||||
|
return stickyValue !== null ? JSON.parse(stickyValue) : 0 |
||||||
|
}) |
||||||
|
const [Depto, setDept] = useState(() => { |
||||||
|
const Depto = window.localStorage.getItem('Departamento') |
||||||
|
return Depto !== null ? JSON.parse(Depto) : '' |
||||||
|
}) |
||||||
|
const mCAnticipos = useSelector((state: RootState) => state.CAnticipos.CorresponsalesAnticipos) |
||||||
|
const [allItems, setAllItems] = useState<DTOItems[]>([]) |
||||||
|
const [filteredData, setFilteredData] = useState<ICorresponsalAnticipos[]>([]) |
||||||
|
const [IdAnticipo, setIdAnticipo] = useState(0) |
||||||
|
const [Anticipo, setAnticipo] = useState(0) |
||||||
|
const [Moneda, setMoneda] = useState(2) |
||||||
|
const [Financiado, setFinanciado] = useState(0) |
||||||
|
const [Concepto, setConcepto] = useState('') |
||||||
|
const [header, setHeader] = useState('') |
||||||
|
const [msgColor, setMsgColor] = React.useState('primary') |
||||||
|
const [show, setShowMsg] = useState(false) |
||||||
|
const [msg, setMsg] = useState('') |
||||||
|
const [msgDialog, setMsgDialog] = useState(false) |
||||||
|
const [MsgDialogFileManager, setMsgDialogFileManager] = useState(false) |
||||||
|
const [msgDialogFileManagerConta, setMsgDialogFileManagerConta] = useState(false) |
||||||
|
const gridRef = React.useRef<any>(null) |
||||||
|
const [deleteFile, setDeleteFile] = useState(false) |
||||||
|
const [columnDefs] = useState([ |
||||||
|
Depto === 'Corresponsalias' |
||||||
|
? { |
||||||
|
field: 'id', |
||||||
|
headerName: 'Acciones', |
||||||
|
width: 110, |
||||||
|
sortable: true, |
||||||
|
filter: true, |
||||||
|
cellRenderer: (params: any) => { |
||||||
|
return ( |
||||||
|
<div> |
||||||
|
<IconContext.Provider value={{ color: 'blue', size: '18px' }}> |
||||||
|
<BsPencilFill |
||||||
|
onClick={() => { |
||||||
|
loadRow(params.data.id) |
||||||
|
}} |
||||||
|
style={{ cursor: 'pointer' }} |
||||||
|
/> |
||||||
|
</IconContext.Provider> |
||||||
|
|
||||||
|
<IconContext.Provider value={{ color: 'red', size: '20px' }}> |
||||||
|
<BsFileEarmarkPdf |
||||||
|
onClick={() => { |
||||||
|
viewDoc(params.value) |
||||||
|
//getFileContent(params.value)
|
||||||
|
}} |
||||||
|
style={{ cursor: 'pointer' }} |
||||||
|
/> |
||||||
|
</IconContext.Provider> |
||||||
|
</div> |
||||||
|
) |
||||||
|
}, |
||||||
|
} |
||||||
|
: { |
||||||
|
field: 'id', |
||||||
|
headerName: 'id', |
||||||
|
width: 60, |
||||||
|
sortable: false, |
||||||
|
filter: false, |
||||||
|
visible: false, |
||||||
|
}, |
||||||
|
{ |
||||||
|
field: 'anticipo', |
||||||
|
headerName: 'Anticipo', |
||||||
|
width: 120, |
||||||
|
sortable: true, |
||||||
|
filter: true, |
||||||
|
cellRenderer: (params: any) => { |
||||||
|
return ( |
||||||
|
<CurrencyFormat |
||||||
|
value={params.value} |
||||||
|
displayType={'text'} |
||||||
|
thousandSeparator={true} |
||||||
|
prefix={'$'} |
||||||
|
decimalScale={2} |
||||||
|
fixedDecimalScale={true} |
||||||
|
/> |
||||||
|
) |
||||||
|
}, |
||||||
|
}, |
||||||
|
{ |
||||||
|
field: 'moneda', |
||||||
|
headerName: 'Moneda', |
||||||
|
width: 105, |
||||||
|
sortable: true, |
||||||
|
filter: true, |
||||||
|
cellRenderer: (params: any) => { |
||||||
|
if (params.value === 1) { |
||||||
|
return ( |
||||||
|
<IconContext.Provider value={{ color: '#E5E041', size: '18px' }}> |
||||||
|
<BiCoinStack /> Pesos |
||||||
|
</IconContext.Provider> |
||||||
|
) |
||||||
|
} else if (params.value === 2) { |
||||||
|
return ( |
||||||
|
<IconContext.Provider value={{ color: 'green', size: '18px' }}> |
||||||
|
<BsCash /> Dollar |
||||||
|
</IconContext.Provider> |
||||||
|
) |
||||||
|
} else return '?' |
||||||
|
}, |
||||||
|
}, |
||||||
|
{ |
||||||
|
field: 'financiado', |
||||||
|
headerName: '¿Financiado?', |
||||||
|
width: 135, |
||||||
|
sortable: true, |
||||||
|
filter: true, |
||||||
|
cellRenderer: (params: any) => { |
||||||
|
if (params.value === 1) |
||||||
|
return ( |
||||||
|
<div style={{ paddingLeft: '30px' }}> |
||||||
|
<IconContext.Provider value={{ color: 'green', size: '20px' }}> |
||||||
|
<BsCheckCircleFill /> |
||||||
|
</IconContext.Provider> |
||||||
|
</div> |
||||||
|
) |
||||||
|
else |
||||||
|
return ( |
||||||
|
<div style={{ paddingLeft: '30px' }}> |
||||||
|
<IconContext.Provider value={{ color: 'red', size: '20px' }}> |
||||||
|
<BsFillXCircleFill /> |
||||||
|
</IconContext.Provider> |
||||||
|
</div> |
||||||
|
) |
||||||
|
}, |
||||||
|
}, |
||||||
|
{ |
||||||
|
field: 'id', |
||||||
|
headerName: 'Autorizado', |
||||||
|
width: 130, |
||||||
|
sortable: true, |
||||||
|
filter: true, |
||||||
|
cellRenderer: (params: any) => { |
||||||
|
if (params.data.autoriza === 0) |
||||||
|
return ( |
||||||
|
<div style={{ paddingLeft: '30px' }}> |
||||||
|
<IconContext.Provider value={{ color: 'red', size: '18px' }}> |
||||||
|
<BsQuestionOctagonFill |
||||||
|
onClick={() => { |
||||||
|
return Depto === 'Contabilidad' ? viewDocConta(params.value) : '#' |
||||||
|
}} |
||||||
|
style={{ cursor: 'pointer' }} |
||||||
|
/> |
||||||
|
</IconContext.Provider> |
||||||
|
</div> |
||||||
|
) |
||||||
|
else |
||||||
|
return ( |
||||||
|
<div style={{ paddingLeft: '30px' }}> |
||||||
|
<IconContext.Provider value={{ color: 'green', size: '18px' }}> |
||||||
|
<BsCheckCircleFill |
||||||
|
onClick={() => { |
||||||
|
viewDocConta(params.value) |
||||||
|
}} |
||||||
|
style={{ cursor: 'pointer' }} |
||||||
|
/> |
||||||
|
</IconContext.Provider> |
||||||
|
</div> |
||||||
|
) |
||||||
|
}, |
||||||
|
}, |
||||||
|
{ field: 'concepto', headerName: 'Concepto', width: 350, sortable: true, filter: true }, |
||||||
|
{ field: 'sSolicita', headerName: 'Solicita', width: 150, sortable: true, filter: true }, |
||||||
|
{ |
||||||
|
field: 'fhSolicita', |
||||||
|
headerName: 'Fecha solicitud', |
||||||
|
width: 200, |
||||||
|
sortable: true, |
||||||
|
filter: true, |
||||||
|
cellRenderer: (params: any) => { |
||||||
|
if (params.value !== null) { |
||||||
|
return params.value.substring(0, 16) |
||||||
|
} |
||||||
|
}, |
||||||
|
}, |
||||||
|
{ field: 'sAutoriza', headerName: 'Authoriza', width: 150, sortable: true, filter: true }, |
||||||
|
{ field: 'fhAutoriza', headerName: 'Fecha autorizacion', width: 200, sortable: true, filter: true }, |
||||||
|
]) |
||||||
|
const dispatch = useDispatch() |
||||||
|
|
||||||
|
const cleanForm = () => { |
||||||
|
setIdAnticipo(0) |
||||||
|
setAnticipo(0) |
||||||
|
setMoneda(2) |
||||||
|
setConcepto('') |
||||||
|
} |
||||||
|
|
||||||
|
const saveForm = () => { |
||||||
|
if (Concepto.length < 5) { |
||||||
|
setHeader('Error') |
||||||
|
setMsg('Para poder guardar la informacion, proporcione el concepto') |
||||||
|
setShowMsg(true) |
||||||
|
return |
||||||
|
} |
||||||
|
if (Anticipo === 0) { |
||||||
|
setHeader('Error') |
||||||
|
setMsg('Para poder guardar la informacion, proporcione el monto del anticipo') |
||||||
|
setShowMsg(true) |
||||||
|
return |
||||||
|
} |
||||||
|
const data: ICorresponsalAnticipos = { |
||||||
|
id: IdAnticipo, |
||||||
|
idTrafico: props.IDTrafico, |
||||||
|
anticipo: Anticipo, |
||||||
|
moneda: Moneda, |
||||||
|
concepto: Concepto, |
||||||
|
solicita: UserId, |
||||||
|
fhSolicita: '', |
||||||
|
financiado: Financiado, |
||||||
|
} |
||||||
|
CAnticiposDataService.Append(data) |
||||||
|
.then((response) => { |
||||||
|
if (response.status === 200) { |
||||||
|
setHeader('Informativo') |
||||||
|
setMsg('La informcion se guardo correctamente') |
||||||
|
setShowMsg(true) |
||||||
|
if (IdAnticipo === 0) dispatch(addCorresponsalesAnticipos(response.data)) |
||||||
|
else dispatch(updateCorresponsalesAnticipos(response.data)) |
||||||
|
} |
||||||
|
}) |
||||||
|
.catch((e: Error) => { |
||||||
|
setHeader('Error') |
||||||
|
setMsg('Ocurrio un error: ' + e) |
||||||
|
setShowMsg(true) |
||||||
|
return |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
const loadRow = (idRow: number) => { |
||||||
|
var tmpArray = mCAnticipos.filter(function (item) { |
||||||
|
return item.id === idRow |
||||||
|
}) |
||||||
|
setIdAnticipo(tmpArray[0].id) |
||||||
|
setAnticipo(tmpArray[0].anticipo) |
||||||
|
setConcepto(tmpArray[0].concepto) |
||||||
|
setMoneda(tmpArray[0].moneda) |
||||||
|
} |
||||||
|
|
||||||
|
const viewDoc = (idRow: number) => { |
||||||
|
loadRow(idRow) |
||||||
|
setMsgDialogFileManager(true) |
||||||
|
} |
||||||
|
|
||||||
|
const viewDocConta = (idRow: number) => { |
||||||
|
loadRow(idRow) |
||||||
|
setMsgDialogFileManagerConta(true) |
||||||
|
} |
||||||
|
|
||||||
|
const authorizeItem = (id: number) => { |
||||||
|
loadRow(id) |
||||||
|
setMsgDialog(true) |
||||||
|
} |
||||||
|
|
||||||
|
const authorizeAmount = () => { |
||||||
|
const data: DTOAnticiposAutoriza = { |
||||||
|
id: IdAnticipo, |
||||||
|
idUsuario: UserId, |
||||||
|
} |
||||||
|
CAnticiposDataService.Autoriza(data) |
||||||
|
.then((response) => { |
||||||
|
if (response.status == 200) { |
||||||
|
dispatch(updateCorresponsalesAnticipos(response.data)) |
||||||
|
setMsgDialog(false) |
||||||
|
} |
||||||
|
}) |
||||||
|
.catch((e: Error) => { |
||||||
|
setHeader('Error') |
||||||
|
setMsg('Ocurrio un error: ' + e) |
||||||
|
setShowMsg(true) |
||||||
|
return |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
const deleteItem = () => { |
||||||
|
CAnticiposDataService.Delete(IdAnticipo) |
||||||
|
.then((response) => { |
||||||
|
if (response.status == 200) { |
||||||
|
dispatch(deleteCorresponsalesAnticipos(IdAnticipo)) |
||||||
|
setMsgDialog(false) |
||||||
|
} |
||||||
|
}) |
||||||
|
.catch((e: Error) => { |
||||||
|
setHeader('Error') |
||||||
|
setMsg('Ocurrio un error: ' + e) |
||||||
|
setShowMsg(true) |
||||||
|
return |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
CAnticiposDataService.getAll(props.IDTrafico) |
||||||
|
.then((response) => { |
||||||
|
dispatch(populateCorresponsalesAnticipos(response.data)) |
||||||
|
setFilteredData(mCAnticipos) |
||||||
|
}) |
||||||
|
.catch((e: Error) => { |
||||||
|
setHeader('Error') |
||||||
|
setMsg('Ocurrio un error: ' + e) |
||||||
|
setShowMsg(true) |
||||||
|
return |
||||||
|
}) |
||||||
|
}, [props.IDTrafico]) |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
const result = mCAnticipos.filter((row) => row.id > 0 && row.idTrafico === props.IDTrafico) |
||||||
|
}, [mCAnticipos]) |
||||||
|
|
||||||
|
return ( |
||||||
|
<div> |
||||||
|
<Container className='labelSize13px'> |
||||||
|
<Row className={props.canDelete ? 'visible' : 'invisible heightZero'}> |
||||||
|
<Col xs='12'> |
||||||
|
<input |
||||||
|
type='text' |
||||||
|
className='form-control genericSelect' |
||||||
|
name='Concepto' |
||||||
|
id='Concepto' |
||||||
|
style={{ height: '30px' }} |
||||||
|
value={Concepto} |
||||||
|
placeholder='Proporcione el concepto' |
||||||
|
onChange={(e) => { |
||||||
|
setConcepto(e.target.value) |
||||||
|
}} |
||||||
|
/> |
||||||
|
</Col> |
||||||
|
</Row> |
||||||
|
<Row |
||||||
|
style={{ paddingBottom: '5', paddingTop: '15' }} |
||||||
|
className={props.canDelete ? 'visible' : 'invisible heightZero'} |
||||||
|
> |
||||||
|
<Col md='auto' xs={1}> |
||||||
|
<Button |
||||||
|
variant='warning' |
||||||
|
size='sm' |
||||||
|
onClick={() => { |
||||||
|
cleanForm() |
||||||
|
}} |
||||||
|
> |
||||||
|
<BsEraserFill /> |
||||||
|
Limpiar |
||||||
|
</Button> |
||||||
|
</Col> |
||||||
|
<Col xs={3}> |
||||||
|
<Form.Control type='hidden' id='IdAnticipo' size='sm' value={IdAnticipo} placeholder='id' disabled={true} /> |
||||||
|
</Col> |
||||||
|
<Col xs={2}> |
||||||
|
<CurrencyFormat |
||||||
|
value={Anticipo} |
||||||
|
displayType={'input'} |
||||||
|
thousandSeparator={true} |
||||||
|
prefix={'$'} |
||||||
|
onValueChange={(values: any) => { |
||||||
|
const { formattedValue, value } = values |
||||||
|
setAnticipo(value) |
||||||
|
}} |
||||||
|
style={{ |
||||||
|
fontSize: '18px', |
||||||
|
backgroundColor: '#F5FFED', |
||||||
|
border: '2px solid #25D05B', |
||||||
|
width: '150px', |
||||||
|
textAlign: 'right', |
||||||
|
borderRadius: '10px', |
||||||
|
}} |
||||||
|
/> |
||||||
|
</Col> |
||||||
|
<Col xs={1}> |
||||||
|
<Form.Control |
||||||
|
as='select' |
||||||
|
className='form-select form-select-sm' |
||||||
|
value={Moneda} |
||||||
|
onChange={(e) => { |
||||||
|
setMoneda(parseInt(e.target.value)) |
||||||
|
}} |
||||||
|
> |
||||||
|
<option value='1'>Pesos</option> |
||||||
|
<option value='2'>Dolares</option> |
||||||
|
</Form.Control> |
||||||
|
</Col> |
||||||
|
<Col xs={2}> |
||||||
|
<Form.Control |
||||||
|
as='select' |
||||||
|
className='form-select form-select-sm' |
||||||
|
value={Financiado} |
||||||
|
onChange={(e) => { |
||||||
|
setFinanciado(parseInt(e.target.value)) |
||||||
|
}} |
||||||
|
> |
||||||
|
<option value='0'>No financiado</option> |
||||||
|
<option value='1'>Financiado</option> |
||||||
|
</Form.Control> |
||||||
|
</Col> |
||||||
|
<Col xs={2}></Col> |
||||||
|
<Col xs={1}> |
||||||
|
<Button |
||||||
|
variant='primary' |
||||||
|
size='sm' |
||||||
|
onClick={() => { |
||||||
|
saveForm() |
||||||
|
}} |
||||||
|
> |
||||||
|
<BsCheckCircle /> |
||||||
|
Guardar |
||||||
|
</Button> |
||||||
|
</Col> |
||||||
|
</Row> |
||||||
|
<Row style={{ paddingBottom: 5 }}> |
||||||
|
<Col xs={12}> |
||||||
|
<div className='ag-theme-alpine' style={{ height: 500, width: '100%' }}> |
||||||
|
<AgGridReact |
||||||
|
rowData={mCAnticipos.filter((p) => p.id !== 0)} |
||||||
|
columnDefs={columnDefs} |
||||||
|
pagination={true} |
||||||
|
paginationAutoPageSize={true} |
||||||
|
ref={gridRef} |
||||||
|
rowSelection={'single'} |
||||||
|
rowMultiSelectWithClick={true} |
||||||
|
/* onRowClicked={(e) => getParams(e)} */ |
||||||
|
></AgGridReact> |
||||||
|
</div> |
||||||
|
</Col> |
||||||
|
</Row> |
||||||
|
</Container> |
||||||
|
<MsgInformativo |
||||||
|
show={show} |
||||||
|
msg={msg} |
||||||
|
header={header} |
||||||
|
msgColor={msgColor} |
||||||
|
closeToast={() => { |
||||||
|
setShowMsg(false) |
||||||
|
}} |
||||||
|
></MsgInformativo> |
||||||
|
<Modal show={msgDialog} onHide={() => setMsgDialog(false)} size='lg'> |
||||||
|
<Modal.Body> |
||||||
|
<Alert variant='primary'> |
||||||
|
¿Esta seguro de eliminar ?: ' |
||||||
|
<br /> <p>{Concepto}</p> |
||||||
|
Por el monto de: |
||||||
|
<span style={{ backgroundColor: 'red', color: 'yellow', fontWeight: 'bold', fontSize: '20px' }}> |
||||||
|
<CurrencyFormat |
||||||
|
value={Anticipo} |
||||||
|
displayType={'text'} |
||||||
|
thousandSeparator={true} |
||||||
|
prefix={'$'} |
||||||
|
decimalScale={2} |
||||||
|
fixedDecimalScale={true} |
||||||
|
/>{' '} |
||||||
|
{Moneda === 1 ? 'Pesos' : 'Dolares'} |
||||||
|
</span> |
||||||
|
</Alert> |
||||||
|
</Modal.Body> |
||||||
|
<Modal.Footer> |
||||||
|
<Row> |
||||||
|
<Col xs={1}> |
||||||
|
<Button variant='secondary' onClick={() => setMsgDialog(false)} size='sm'> |
||||||
|
Cerrar |
||||||
|
</Button> |
||||||
|
</Col> |
||||||
|
<Col xs={5} style={{ paddingLeft: '550px', paddingRight: '0px' }}> |
||||||
|
|
||||||
|
</Col> |
||||||
|
<Col xs={1}> |
||||||
|
<Button variant='primary' onClick={deleteItem} size='sm'> |
||||||
|
Si |
||||||
|
</Button> |
||||||
|
</Col> |
||||||
|
</Row> |
||||||
|
</Modal.Footer> |
||||||
|
</Modal> |
||||||
|
<Modal show={msgDialog} onHide={() => setMsgDialog(false)} size='lg'> |
||||||
|
<Modal.Body> |
||||||
|
<Alert variant='primary'> |
||||||
|
¿Esta seguro de autorizar? |
||||||
|
<br /> <p>{Concepto}</p> |
||||||
|
Por el monto de: |
||||||
|
<span style={{ backgroundColor: 'red', color: 'yellow', fontWeight: 'bold', fontSize: '20px' }}> |
||||||
|
<CurrencyFormat |
||||||
|
value={Anticipo} |
||||||
|
displayType={'text'} |
||||||
|
thousandSeparator={true} |
||||||
|
prefix={'$'} |
||||||
|
decimalScale={2} |
||||||
|
fixedDecimalScale={true} |
||||||
|
/>{' '} |
||||||
|
{Moneda === 1 ? 'Pesos' : 'Dolares'} |
||||||
|
</span> |
||||||
|
</Alert> |
||||||
|
</Modal.Body> |
||||||
|
<Modal.Footer> |
||||||
|
<Row> |
||||||
|
<Col xs={1}> |
||||||
|
<Button variant='secondary' onClick={() => setMsgDialog(false)} size='sm'> |
||||||
|
Cerrar |
||||||
|
</Button> |
||||||
|
</Col> |
||||||
|
<Col xs={5} style={{ paddingLeft: '550px', paddingRight: '0px' }}> |
||||||
|
|
||||||
|
</Col> |
||||||
|
<Col xs={1}> |
||||||
|
<Button variant='danger' onClick={authorizeAmount} size='sm'> |
||||||
|
Autorizar |
||||||
|
</Button> |
||||||
|
</Col> |
||||||
|
</Row> |
||||||
|
</Modal.Footer> |
||||||
|
</Modal> |
||||||
|
<Modal show={MsgDialogFileManager} onHide={() => setMsgDialogFileManager(false)} size='lg'> |
||||||
|
<Modal.Body> |
||||||
|
<FileManager |
||||||
|
width={750} |
||||||
|
height={200} |
||||||
|
IDProcess={1} |
||||||
|
IdFile={IdAnticipo} |
||||||
|
IDUser={UserId} |
||||||
|
FileName={''} |
||||||
|
canDelete={Depto === 'Contabilidad'} |
||||||
|
FileType={['pdf']} |
||||||
|
Leyenda={'Seleccione el archivo, arrastrelo hasta aqui y sueltelo para subirlo al servidor..'} |
||||||
|
onAppendFM={function (idFile: number): void {}} |
||||||
|
/> |
||||||
|
</Modal.Body> |
||||||
|
<Modal.Footer> |
||||||
|
<Row> |
||||||
|
<Col xs={11}> </Col> |
||||||
|
<Col xs={1}> |
||||||
|
<Button variant='secondary' onClick={() => setMsgDialogFileManager(false)} size='sm'> |
||||||
|
Cerrar |
||||||
|
</Button> |
||||||
|
</Col> |
||||||
|
</Row> |
||||||
|
</Modal.Footer> |
||||||
|
</Modal> |
||||||
|
<Modal show={msgDialogFileManagerConta} onHide={() => setMsgDialogFileManagerConta(false)} size='lg'> |
||||||
|
<Modal.Body> |
||||||
|
<FileManager |
||||||
|
width={750} |
||||||
|
height={200} |
||||||
|
IDProcess={4} |
||||||
|
IdFile={IdAnticipo} |
||||||
|
IDUser={UserId} |
||||||
|
FileName={''} |
||||||
|
canDelete={false} |
||||||
|
FileType={['pdf']} |
||||||
|
Leyenda={'Seleccione el archivo, arrastrelo hasta aqui y sueltelo para subirlo al servidor...'} |
||||||
|
onAppendFM={function (idFile: number): void { |
||||||
|
authorizeAmount() |
||||||
|
}} |
||||||
|
/> |
||||||
|
</Modal.Body> |
||||||
|
<Modal.Footer> |
||||||
|
<Row> |
||||||
|
<Col xs={11}> </Col> |
||||||
|
<Col xs={1}> |
||||||
|
<Button variant='secondary' onClick={() => setMsgDialogFileManagerConta(false)} size='sm'> |
||||||
|
Cerrar |
||||||
|
</Button> |
||||||
|
</Col> |
||||||
|
</Row> |
||||||
|
</Modal.Footer> |
||||||
|
</Modal> |
||||||
|
</div> |
||||||
|
) |
||||||
|
} |
||||||
@ -0,0 +1,269 @@ |
|||||||
|
import { RowClickedEvent } from 'ag-grid-community' |
||||||
|
import { AgGridReact } from 'ag-grid-react' |
||||||
|
import React, { FC, useEffect, useState } from 'react' |
||||||
|
import { Alert, Button, Card, Col, Form, Modal, Row } from 'react-bootstrap' |
||||||
|
import DataTable from 'react-data-table-component' |
||||||
|
import { IconContext } from 'react-icons' |
||||||
|
import { FaEraser, FaTimesCircle } from 'react-icons/fa' |
||||||
|
import { useDispatch, useSelector } from 'react-redux' |
||||||
|
import ICatProveedores from '../../../Interfaces/Catalogos/ICatProveedores' |
||||||
|
import ProveedoresDataService from '../../../Services/Catalogos/Proveedores.Services' |
||||||
|
import { |
||||||
|
addCatProveedores, |
||||||
|
deleteCatProveedores, |
||||||
|
populateCatProveedores, |
||||||
|
} from '../../../store/features/CatProveedores/CatProveedoresSlice' |
||||||
|
import { RootState } from '../../../store/store' |
||||||
|
import { MsgInformativo } from '../../Utils/Toast/msgInformativo' |
||||||
|
import { ControlledInput } from './ControlledInput/ControlledInput' |
||||||
|
|
||||||
|
interface IProps { |
||||||
|
canDelete: boolean |
||||||
|
clasificacion: number |
||||||
|
} |
||||||
|
|
||||||
|
export const CatProveedores: FC<IProps> = (props) => { |
||||||
|
const dispatch = useDispatch() |
||||||
|
const mProveedores = useSelector((state: RootState) => state.CatProveedores.CatalogoProveedores) |
||||||
|
const [DTData, setDTData] = useState<ICatProveedores[]>([]) |
||||||
|
const [Proveedor, setProveedor] = useState('') |
||||||
|
const [IDProveedor, setIDProveedor] = useState(0) |
||||||
|
const [header, setHeader] = useState('') |
||||||
|
const [msgColor, setMsgColor] = React.useState('primary') |
||||||
|
const [show, setShowMsg] = useState(false) |
||||||
|
const [msg, setMsg] = useState('') |
||||||
|
const [MsgTime, setMsgTime] = useState(3000) |
||||||
|
const [DialogTabs, setDialogTabs] = useState(false) |
||||||
|
|
||||||
|
const columnsProveedores = [ |
||||||
|
{ |
||||||
|
name: 'id', |
||||||
|
width: '10%', |
||||||
|
selector: (row: ICatProveedores) => row.id, |
||||||
|
sortable: true, |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: 'Proveedor', |
||||||
|
width: '75%', |
||||||
|
cell: (row: ICatProveedores) => { |
||||||
|
return ( |
||||||
|
<ControlledInput |
||||||
|
id={row.id} |
||||||
|
value={row.nombre} |
||||||
|
disabled={false} |
||||||
|
mode={2} |
||||||
|
clasificacion={props.clasificacion} |
||||||
|
/> |
||||||
|
) |
||||||
|
}, |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: 'Elimina', |
||||||
|
cell: (row: ICatProveedores) => ( |
||||||
|
<div |
||||||
|
style={{ textAlign: 'center', cursor: 'pointer' }} |
||||||
|
onClick={() => { |
||||||
|
setIDProveedor(row.id) |
||||||
|
setProveedor(row.nombre) |
||||||
|
setDialogTabs(true) |
||||||
|
}} |
||||||
|
> |
||||||
|
<IconContext.Provider value={{ color: 'red', size: '25px' }}> |
||||||
|
<FaTimesCircle /> |
||||||
|
</IconContext.Provider> |
||||||
|
</div> |
||||||
|
), |
||||||
|
}, |
||||||
|
] |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
ProveedoresDataService.getAll(props.clasificacion) |
||||||
|
.then((response) => { |
||||||
|
//setDTData(response.data)
|
||||||
|
dispatch(populateCatProveedores(response.data)) |
||||||
|
}) |
||||||
|
.catch((e: Error) => { |
||||||
|
setHeader('Error') |
||||||
|
setMsg('Ocurrio un error: ' + e) |
||||||
|
setShowMsg(true) |
||||||
|
return |
||||||
|
}) |
||||||
|
}, []) |
||||||
|
|
||||||
|
const cleanForm = () => { |
||||||
|
setIDProveedor(0) |
||||||
|
setProveedor('') |
||||||
|
} |
||||||
|
|
||||||
|
const saveForm = () => { |
||||||
|
const data: ICatProveedores = { |
||||||
|
id: IDProveedor, |
||||||
|
nombre: Proveedor, |
||||||
|
clasificacion: props.clasificacion, |
||||||
|
} |
||||||
|
ProveedoresDataService.Append(data) |
||||||
|
.then((response) => { |
||||||
|
if (response.status == 200) { |
||||||
|
setHeader('Informativo') |
||||||
|
setMsg('El proveedor se agrego exitosamente') |
||||||
|
setShowMsg(true) |
||||||
|
setDialogTabs(false) |
||||||
|
if (data.id === 0) dispatch(addCatProveedores(response.data)) |
||||||
|
} |
||||||
|
}) |
||||||
|
.catch((e: Error) => { |
||||||
|
setHeader('Error') |
||||||
|
setMsg('Ocurrio un error: ' + e) |
||||||
|
setShowMsg(true) |
||||||
|
return |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
const deleteItem = () => { |
||||||
|
ProveedoresDataService.Delete(IDProveedor) |
||||||
|
.then((response) => { |
||||||
|
if (response.status === 200) { |
||||||
|
setHeader('Informativo') |
||||||
|
setMsg('El provedor se ha eliminado') |
||||||
|
setShowMsg(true) |
||||||
|
setDialogTabs(false) |
||||||
|
dispatch(deleteCatProveedores(IDProveedor)) |
||||||
|
return |
||||||
|
} |
||||||
|
}) |
||||||
|
.catch((e: Error) => { |
||||||
|
setHeader('Error') |
||||||
|
setMsg('Ocurrio un error: ' + e) |
||||||
|
setShowMsg(true) |
||||||
|
return |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
return ( |
||||||
|
<div> |
||||||
|
<Card style={{}}> |
||||||
|
<Card.Body> |
||||||
|
<Card.Subtitle className='mb-2 text-muted'> |
||||||
|
<Row |
||||||
|
style={{ paddingBottom: '5', paddingTop: '15' }} |
||||||
|
className={props.canDelete ? 'visible' : 'invisible heightZero'} |
||||||
|
> |
||||||
|
<Col |
||||||
|
xs={1} |
||||||
|
style={{ textAlign: 'right', paddingTop: '5px', cursor: 'pointer' }} |
||||||
|
onClick={() => { |
||||||
|
cleanForm() |
||||||
|
}} |
||||||
|
> |
||||||
|
<IconContext.Provider value={{ color: 'orange', size: '25px' }}> |
||||||
|
<FaEraser /> |
||||||
|
</IconContext.Provider> |
||||||
|
</Col> |
||||||
|
<Col> |
||||||
|
<Form.Control type='hidden' id='IdItem' size='sm' value={IDProveedor} disabled={true} /> |
||||||
|
</Col> |
||||||
|
<Col xs={1}></Col> |
||||||
|
<Col xs={6}> |
||||||
|
{/* <Form.Control |
||||||
|
type='text' |
||||||
|
id='FacturaTerceros' |
||||||
|
size='sm' |
||||||
|
value={Proveedor} |
||||||
|
placeholder='Proveedor' |
||||||
|
pattern='[a-zA-Z-0-9 ]*' |
||||||
|
onChange={(e) => setProveedor((v) => (e.target.validity.valid ? e.target.value : v))} |
||||||
|
/> */} |
||||||
|
<input |
||||||
|
type='text' |
||||||
|
className='form-control genericSelect' |
||||||
|
name='Proveedor' |
||||||
|
id='Proveedor' |
||||||
|
style={{ height: '30px' }} |
||||||
|
value={Proveedor} |
||||||
|
placeholder='Proporcione el nombre del proveedor' |
||||||
|
onChange={(e) => { |
||||||
|
setProveedor(e.target.value) |
||||||
|
}} |
||||||
|
/> |
||||||
|
</Col> |
||||||
|
<Col xs={1}></Col> |
||||||
|
<Col xs={1}> |
||||||
|
<Button |
||||||
|
variant='primary' |
||||||
|
size='sm' |
||||||
|
onClick={() => { |
||||||
|
saveForm() |
||||||
|
}} |
||||||
|
> |
||||||
|
Agregar |
||||||
|
</Button> |
||||||
|
</Col> |
||||||
|
<Col> </Col> |
||||||
|
</Row> |
||||||
|
</Card.Subtitle> |
||||||
|
<DataTable |
||||||
|
noHeader |
||||||
|
defaultSortFieldId={'id'} |
||||||
|
defaultSortAsc={true} |
||||||
|
pagination |
||||||
|
highlightOnHover |
||||||
|
columns={columnsProveedores} |
||||||
|
data={mProveedores.filter(function (el) { |
||||||
|
return el.id > 0 |
||||||
|
})} |
||||||
|
/> |
||||||
|
</Card.Body> |
||||||
|
</Card> |
||||||
|
<MsgInformativo |
||||||
|
show={show} |
||||||
|
msg={msg} |
||||||
|
header={header} |
||||||
|
msgColor={msgColor} |
||||||
|
time={MsgTime} |
||||||
|
closeToast={() => { |
||||||
|
setShowMsg(false) |
||||||
|
}} |
||||||
|
/> |
||||||
|
<Modal |
||||||
|
show={DialogTabs} |
||||||
|
onHide={() => { |
||||||
|
setDialogTabs(false) |
||||||
|
}} |
||||||
|
size='sm' |
||||||
|
> |
||||||
|
<Modal.Body> |
||||||
|
<Alert variant='primary'> |
||||||
|
<b>¿Esta seguro de eliminar?</b> |
||||||
|
<br /> |
||||||
|
<h5> {Proveedor} </h5> |
||||||
|
</Alert> |
||||||
|
</Modal.Body> |
||||||
|
<Modal.Footer> |
||||||
|
<Row> |
||||||
|
<Col xs={6} style={{ textAlign: 'left', paddingRight: '100px' }}> |
||||||
|
<Button |
||||||
|
variant='danger' |
||||||
|
onClick={deleteItem} |
||||||
|
size='sm' |
||||||
|
style={{ paddingRight: '20px', paddingLeft: '20px' }} |
||||||
|
> |
||||||
|
Si |
||||||
|
</Button> |
||||||
|
</Col> |
||||||
|
<Col xs={6} style={{ textAlign: 'right' }}> |
||||||
|
<Button |
||||||
|
variant='secondary' |
||||||
|
onClick={() => { |
||||||
|
setDialogTabs(false) |
||||||
|
}} |
||||||
|
size='sm' |
||||||
|
> |
||||||
|
Cerrar |
||||||
|
</Button> |
||||||
|
</Col> |
||||||
|
</Row> |
||||||
|
</Modal.Footer> |
||||||
|
</Modal> |
||||||
|
</div> |
||||||
|
) |
||||||
|
} |
||||||
@ -0,0 +1,77 @@ |
|||||||
|
import React, { FC, useState } from 'react' |
||||||
|
import { MsgInformativo } from '../../../Utils/Toast/msgInformativo' |
||||||
|
import ProvDataService from '../../../../Services/Catalogos/Proveedores.Services' |
||||||
|
import { useDispatch } from 'react-redux' |
||||||
|
import ICatProveedores from '../../../../Interfaces/Catalogos/ICatProveedores' |
||||||
|
import { updateCatProveedores } from '../../../../store/features/CatProveedores/CatProveedoresSlice' |
||||||
|
|
||||||
|
interface IProps { |
||||||
|
id: number |
||||||
|
value: any |
||||||
|
disabled?: boolean |
||||||
|
mode: number // 1: Number, 2: String
|
||||||
|
clasificacion: number |
||||||
|
} |
||||||
|
|
||||||
|
export const ControlledInput: FC<IProps> = (props) => { |
||||||
|
const dispatch = useDispatch() |
||||||
|
const [id, setid] = useState(props.id) |
||||||
|
const [value, setValue] = useState(props.value) |
||||||
|
const [header, setHeader] = useState('') |
||||||
|
const [msgColor, setMsgColor] = React.useState('primary') |
||||||
|
const [show, setShowMsg] = useState(false) |
||||||
|
const [msg, setMsg] = useState('') |
||||||
|
|
||||||
|
const onChange = (event: any) => { |
||||||
|
setValue(event.target.value) |
||||||
|
} |
||||||
|
const handleKeyDown = (event: any) => { |
||||||
|
if (event.key === 'Enter') { |
||||||
|
if (isNaN(event.target.value) && props.mode === 1) { |
||||||
|
alert('Valor no valido!') |
||||||
|
return |
||||||
|
} |
||||||
|
const data: ICatProveedores = { |
||||||
|
id: id, |
||||||
|
nombre: value, |
||||||
|
clasificacion: props.clasificacion, |
||||||
|
} |
||||||
|
ProvDataService.Append(data) |
||||||
|
.then((response) => { |
||||||
|
if (response.status == 200) { |
||||||
|
dispatch(updateCatProveedores(response.data)) |
||||||
|
setHeader('Informativo') |
||||||
|
setMsg('La informacion se guardo exitosamente') |
||||||
|
setShowMsg(true) |
||||||
|
return |
||||||
|
} |
||||||
|
}) |
||||||
|
.catch((e: Error) => { |
||||||
|
setHeader('Error') |
||||||
|
setMsg('Ocurrio un error: ' + e) |
||||||
|
setShowMsg(true) |
||||||
|
return |
||||||
|
}) |
||||||
|
} |
||||||
|
} |
||||||
|
return ( |
||||||
|
<> |
||||||
|
<input |
||||||
|
value={value} |
||||||
|
onChange={onChange} |
||||||
|
disabled={false} |
||||||
|
onKeyDown={(e) => handleKeyDown(e)} |
||||||
|
style={{ width: '75%' }} |
||||||
|
/> |
||||||
|
<MsgInformativo |
||||||
|
show={show} |
||||||
|
msg={msg} |
||||||
|
header={header} |
||||||
|
msgColor={msgColor} |
||||||
|
closeToast={() => { |
||||||
|
setShowMsg(false) |
||||||
|
}} |
||||||
|
/> |
||||||
|
</> |
||||||
|
) |
||||||
|
} |
||||||
@ -0,0 +1,252 @@ |
|||||||
|
import React, { FC, useEffect, useState } from 'react' |
||||||
|
import { Button, Card, Col, Form, Row } from 'react-bootstrap' |
||||||
|
import DataTable from 'react-data-table-component' |
||||||
|
import { IconContext } from 'react-icons' |
||||||
|
import { FaEraser, FaTimesCircle } from 'react-icons/fa' |
||||||
|
import { useDispatch, useSelector } from 'react-redux' |
||||||
|
import ICorresponsalContenedores from '../../../Interfaces/Corresponsales/ICorresponsalContenedores' |
||||||
|
import CConDataService from '../../../Services/Corresponsalias/Corresponsales.Contenedores.Services' |
||||||
|
import { RootState } from '../../../store/store' |
||||||
|
import { MsgInformativo } from '../../Utils/Toast/msgInformativo' |
||||||
|
import CContDataService from '../../../Services/Corresponsalias/Corresponsales.Contenedores.Services' |
||||||
|
import { |
||||||
|
addCorresponsalesContenedores, |
||||||
|
deleteCorresponsalesContenedores, |
||||||
|
} from '../../../store/features/Corresponsales/CorresponsalesContenedoresSlice' |
||||||
|
import { ControlledInput } from './ControlledInput/ControlledInput' |
||||||
|
|
||||||
|
interface IProps { |
||||||
|
IDTrafico: number |
||||||
|
canDelete: boolean |
||||||
|
} |
||||||
|
|
||||||
|
export const Contenedores: FC<IProps> = (props) => { |
||||||
|
const dispatch = useDispatch() |
||||||
|
const mCContenedores = useSelector((state: RootState) => state.CCData.CorresponsalesContenedores) |
||||||
|
const [DTData, setDTData] = useState<ICorresponsalContenedores[]>([]) |
||||||
|
const [Contenedor, setContenedor] = useState('') |
||||||
|
const [IDContenedor, setIDContenedor] = useState(0) |
||||||
|
const [header, setHeader] = useState('') |
||||||
|
const [msgColor, setMsgColor] = React.useState('primary') |
||||||
|
const [show, setShowMsg] = useState(false) |
||||||
|
const [msg, setMsg] = useState('') |
||||||
|
const [DialogTabs, setDialogTabs] = useState(false) |
||||||
|
|
||||||
|
const columnsConcepts = [ |
||||||
|
{ |
||||||
|
name: 'id', |
||||||
|
width: '10%', |
||||||
|
selector: (row: ICorresponsalContenedores) => row.id, |
||||||
|
sortable: true, |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: 'Contenedor', |
||||||
|
width: '75%', |
||||||
|
cell: (row: ICorresponsalContenedores) => { |
||||||
|
return ( |
||||||
|
<ControlledInput id={row.id} value={row.contenedor} disabled={false} mode={2} IDTrafico={props.IDTrafico} /> |
||||||
|
) |
||||||
|
}, |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: 'Elimina', |
||||||
|
cell: (row: ICorresponsalContenedores) => ( |
||||||
|
<div |
||||||
|
style={{ textAlign: 'center', cursor: 'pointer' }} |
||||||
|
onClick={() => { |
||||||
|
setIDContenedor(row.id) |
||||||
|
setContenedor(row.contenedor) |
||||||
|
setDialogTabs(true) |
||||||
|
}} |
||||||
|
> |
||||||
|
<IconContext.Provider value={{ color: 'red', size: '25px' }}> |
||||||
|
<FaTimesCircle /> |
||||||
|
</IconContext.Provider> |
||||||
|
</div> |
||||||
|
), |
||||||
|
}, |
||||||
|
] |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
CConDataService.getAll(props.IDTrafico) |
||||||
|
.then((response) => { |
||||||
|
setDTData(response.data) |
||||||
|
}) |
||||||
|
.catch((e: Error) => { |
||||||
|
setHeader('Error') |
||||||
|
setMsg('Ocurrio un error: ' + e) |
||||||
|
setShowMsg(true) |
||||||
|
return |
||||||
|
}) |
||||||
|
}, []) |
||||||
|
|
||||||
|
const saveForm = () => { |
||||||
|
const data: ICorresponsalContenedores = { |
||||||
|
id: IDContenedor, |
||||||
|
contenedor: Contenedor, |
||||||
|
idTrafico: props.IDTrafico, |
||||||
|
fSemaforo: '', |
||||||
|
semaforo: 0, |
||||||
|
} |
||||||
|
CContDataService.Append(data) |
||||||
|
.then((response) => { |
||||||
|
if (response.status == 200) { |
||||||
|
if (data.id === 0) dispatch(addCorresponsalesContenedores(response.data)) |
||||||
|
} |
||||||
|
}) |
||||||
|
.catch((e: Error) => { |
||||||
|
setHeader('Error') |
||||||
|
setMsg('Ocurrio un error: ' + e) |
||||||
|
setShowMsg(true) |
||||||
|
return |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
const deleteItem = () => { |
||||||
|
CConDataService.Delete(IDContenedor) |
||||||
|
.then((response) => { |
||||||
|
if (response.status === 200) { |
||||||
|
setHeader('Informativo') |
||||||
|
setMsg(response.data.respuesta) |
||||||
|
setShowMsg(true) |
||||||
|
setDialogTabs(false) |
||||||
|
dispatch(deleteCorresponsalesContenedores(IDContenedor)) |
||||||
|
return |
||||||
|
} |
||||||
|
}) |
||||||
|
.catch((e: Error) => { |
||||||
|
setHeader('Error') |
||||||
|
setMsg('Ocurrio un error: ' + e) |
||||||
|
setShowMsg(true) |
||||||
|
return |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
const cleanForm = () => { |
||||||
|
setContenedor('') |
||||||
|
setIDContenedor(0) |
||||||
|
} |
||||||
|
|
||||||
|
return ( |
||||||
|
<div> |
||||||
|
<Card style={{}}> |
||||||
|
<Card.Body> |
||||||
|
<Card.Subtitle className='mb-2 text-muted'> |
||||||
|
<Row |
||||||
|
style={{ paddingBottom: '5', paddingTop: '15' }} |
||||||
|
className={props.canDelete ? 'visible' : 'invisible heightZero'} |
||||||
|
> |
||||||
|
<Col |
||||||
|
xs={1} |
||||||
|
style={{ textAlign: 'right', paddingTop: '5px', cursor: 'pointer' }} |
||||||
|
onClick={() => { |
||||||
|
cleanForm() |
||||||
|
}} |
||||||
|
> |
||||||
|
<IconContext.Provider value={{ color: 'orange', size: '25px' }}> |
||||||
|
<FaEraser /> |
||||||
|
</IconContext.Provider> |
||||||
|
</Col> |
||||||
|
<Col> |
||||||
|
<Form.Control |
||||||
|
type='hidden' |
||||||
|
id='IdItem' |
||||||
|
size='sm' |
||||||
|
value={IDContenedor} |
||||||
|
placeholder='Contenedor' |
||||||
|
disabled={true} |
||||||
|
/> |
||||||
|
</Col> |
||||||
|
<Col xs={1}></Col> |
||||||
|
<Col xs={6}> |
||||||
|
<Form.Control |
||||||
|
type='text' |
||||||
|
id='Contenedor' |
||||||
|
size='sm' |
||||||
|
value={Contenedor} |
||||||
|
placeholder='Contenedor' |
||||||
|
pattern='[a-zA-Z-0-9 ]*' |
||||||
|
onChange={(e) => setContenedor((v) => (e.target.validity.valid ? e.target.value : v))} |
||||||
|
/> |
||||||
|
</Col> |
||||||
|
<Col xs={1}></Col> |
||||||
|
<Col xs={1}> |
||||||
|
<Button |
||||||
|
variant='primary' |
||||||
|
size='sm' |
||||||
|
onClick={() => { |
||||||
|
saveForm() |
||||||
|
}} |
||||||
|
> |
||||||
|
Agregar |
||||||
|
</Button> |
||||||
|
</Col> |
||||||
|
<Col> </Col> |
||||||
|
</Row> |
||||||
|
</Card.Subtitle> |
||||||
|
<DataTable |
||||||
|
noHeader |
||||||
|
defaultSortFieldId={'id'} |
||||||
|
defaultSortAsc={true} |
||||||
|
pagination |
||||||
|
highlightOnHover |
||||||
|
columns={columnsConcepts} |
||||||
|
data={mCContenedores.filter(function (el) { |
||||||
|
return el.id > 0 |
||||||
|
})} |
||||||
|
/> |
||||||
|
</Card.Body> |
||||||
|
</Card> |
||||||
|
<MsgInformativo |
||||||
|
show={show} |
||||||
|
msg={msg} |
||||||
|
header={header} |
||||||
|
msgColor={msgColor} |
||||||
|
time={2000} |
||||||
|
closeToast={() => { |
||||||
|
setShowMsg(false) |
||||||
|
}} |
||||||
|
/> |
||||||
|
{/* <Modal |
||||||
|
show={DialogTabs} |
||||||
|
onHide={() => { |
||||||
|
setDialogTabs(false) |
||||||
|
}} |
||||||
|
size='sm' |
||||||
|
> |
||||||
|
<Modal.Body> |
||||||
|
<Alert variant='primary'> |
||||||
|
<b>¿Esta seguro de eliminar?</b> |
||||||
|
<br /> |
||||||
|
<h5> {Contenedor} </h5> |
||||||
|
</Alert> |
||||||
|
</Modal.Body> |
||||||
|
<Modal.Footer> |
||||||
|
<Row> |
||||||
|
<Col xs={6} style={{ textAlign: 'left', paddingRight: '100px' }}> |
||||||
|
<Button |
||||||
|
variant='danger' |
||||||
|
onClick={deleteItem} |
||||||
|
size='sm' |
||||||
|
style={{ paddingRight: '20px', paddingLeft: '20px' }} |
||||||
|
> |
||||||
|
Si |
||||||
|
</Button> |
||||||
|
</Col> |
||||||
|
<Col xs={6} style={{ textAlign: 'right' }}> |
||||||
|
<Button |
||||||
|
variant='secondary' |
||||||
|
onClick={() => { |
||||||
|
setDialogTabs(false) |
||||||
|
}} |
||||||
|
size='sm' |
||||||
|
> |
||||||
|
Cerrar |
||||||
|
</Button> |
||||||
|
</Col> |
||||||
|
</Row> |
||||||
|
</Modal.Footer> |
||||||
|
</Modal> */} |
||||||
|
</div> |
||||||
|
) |
||||||
|
} |
||||||
@ -0,0 +1,79 @@ |
|||||||
|
import React, { FC, useState } from 'react' |
||||||
|
import ICorresponsalContenedores from '../../../../Interfaces/Corresponsales/ICorresponsalContenedores' |
||||||
|
import { MsgInformativo } from '../../../Utils/Toast/msgInformativo' |
||||||
|
import CContDataService from '../../../../Services/Corresponsalias/Corresponsales.Contenedores.Services' |
||||||
|
import { updateCorresponsalesContenedores } from '../../../../store/features/Corresponsales/CorresponsalesContenedoresSlice' |
||||||
|
import { useDispatch } from 'react-redux' |
||||||
|
|
||||||
|
interface IProps { |
||||||
|
id: number |
||||||
|
value: any |
||||||
|
disabled?: boolean |
||||||
|
mode: number // 1: Number, 2: String
|
||||||
|
IDTrafico: number |
||||||
|
} |
||||||
|
|
||||||
|
export const ControlledInput: FC<IProps> = (props) => { |
||||||
|
const dispatch = useDispatch() |
||||||
|
const [id, setid] = useState(props.id) |
||||||
|
const [value, setValue] = useState(props.value) |
||||||
|
const [header, setHeader] = useState('') |
||||||
|
const [msgColor, setMsgColor] = React.useState('primary') |
||||||
|
const [show, setShowMsg] = useState(false) |
||||||
|
const [msg, setMsg] = useState('') |
||||||
|
|
||||||
|
const onChange = (event: any) => { |
||||||
|
setValue(event.target.value) |
||||||
|
} |
||||||
|
const handleKeyDown = (event: any) => { |
||||||
|
if (event.key === 'Enter') { |
||||||
|
if (isNaN(event.target.value) && props.mode === 1) { |
||||||
|
alert('Valor no valido!') |
||||||
|
return |
||||||
|
} |
||||||
|
const data: ICorresponsalContenedores = { |
||||||
|
id: id, |
||||||
|
contenedor: value, |
||||||
|
idTrafico: props.IDTrafico, |
||||||
|
fSemaforo: '', |
||||||
|
semaforo: 0, |
||||||
|
} |
||||||
|
CContDataService.Append(data) |
||||||
|
.then((response) => { |
||||||
|
if (response.status == 200) { |
||||||
|
dispatch(updateCorresponsalesContenedores(response.data)) |
||||||
|
setHeader('Informativo') |
||||||
|
setMsg('La informacion se guardo exitosamente') |
||||||
|
setShowMsg(true) |
||||||
|
return |
||||||
|
} |
||||||
|
}) |
||||||
|
.catch((e: Error) => { |
||||||
|
setHeader('Error') |
||||||
|
setMsg('Ocurrio un error: ' + e) |
||||||
|
setShowMsg(true) |
||||||
|
return |
||||||
|
}) |
||||||
|
} |
||||||
|
} |
||||||
|
return ( |
||||||
|
<> |
||||||
|
<input |
||||||
|
value={value} |
||||||
|
onChange={onChange} |
||||||
|
disabled={props.disabled} |
||||||
|
onKeyDown={(e) => handleKeyDown(e)} |
||||||
|
style={{ width: '75%' }} |
||||||
|
/> |
||||||
|
<MsgInformativo |
||||||
|
show={show} |
||||||
|
msg={msg} |
||||||
|
header={header} |
||||||
|
msgColor={msgColor} |
||||||
|
closeToast={() => { |
||||||
|
setShowMsg(false) |
||||||
|
}} |
||||||
|
/> |
||||||
|
</> |
||||||
|
) |
||||||
|
} |
||||||
@ -0,0 +1,326 @@ |
|||||||
|
import { FC, useEffect, useState } from 'react' |
||||||
|
import { useDispatch, useSelector } from 'react-redux' |
||||||
|
import { RootState } from '../../../store/store' |
||||||
|
import CContDataService from '../../../Services/Corresponsalias/Corresponsales.Contenedores.Services' |
||||||
|
import ICorresponsalContenedores from '../../../Interfaces/Corresponsales/ICorresponsalContenedores' |
||||||
|
import { IconContext } from 'react-icons' |
||||||
|
import { BsFillCalendarCheckFill, BsFillCalendarDayFill, BsFillRecordFill, BsFillXCircleFill } from 'react-icons/bs' |
||||||
|
import { |
||||||
|
deleteCorresponsalesContenedores, |
||||||
|
updateCorresponsalesContenedores, |
||||||
|
} from '../../../store/features/Corresponsales/CorresponsalesContenedoresSlice' |
||||||
|
import { Alert, Button, Col, Form, Modal, Row } from 'react-bootstrap' |
||||||
|
import DatePicker from 'react-datepicker' |
||||||
|
import 'react-datepicker/dist/react-datepicker.css' |
||||||
|
import { isTypeNode } from 'typescript' |
||||||
|
|
||||||
|
interface IProps { |
||||||
|
IDTrafico: number |
||||||
|
Editable: boolean |
||||||
|
} |
||||||
|
|
||||||
|
export const SelectContainer: FC<IProps> = (props) => { |
||||||
|
const dispatch = useDispatch() |
||||||
|
const [toggleSelect, setToggleSelect] = useState(false) |
||||||
|
const mCContenedores = useSelector((state: RootState) => state.CCData.CorresponsalesContenedores) |
||||||
|
const [Contenedor, setContenedor] = useState('') |
||||||
|
const [IDContenedor, setIDContenedor] = useState(0) |
||||||
|
const [Placeholder, setPlaceholder] = useState('') |
||||||
|
const [DialogTabs, setDialogTabs] = useState(false) |
||||||
|
const [DialogAddDate, setDialogAddDate] = useState(false) |
||||||
|
const [FSemaforo, setFSemaforo] = useState<Date | null>() |
||||||
|
const [Semaforo, setSemaforo] = useState(0) |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
setPlaceholder('(' + mCContenedores.filter((item) => item.id > 0).length + ') Contenedores') |
||||||
|
}, [mCContenedores]) |
||||||
|
|
||||||
|
const loadInfo = (data: ICorresponsalContenedores) => { |
||||||
|
setIDContenedor(data.id) |
||||||
|
setContenedor(data.contenedor) |
||||||
|
} |
||||||
|
|
||||||
|
const handleKeyDown = (event: any) => { |
||||||
|
if (event.key === 'Enter') { |
||||||
|
const data: ICorresponsalContenedores = { |
||||||
|
id: IDContenedor, |
||||||
|
contenedor: Contenedor, |
||||||
|
idTrafico: props.IDTrafico, |
||||||
|
fSemaforo: FSemaforo ? adjustTimeZone(FSemaforo.toISOString()) : '', |
||||||
|
semaforo: Semaforo, |
||||||
|
} |
||||||
|
CContDataService.Append(data) |
||||||
|
.then((response) => { |
||||||
|
if (response.status === 200) { |
||||||
|
dispatch(updateCorresponsalesContenedores(response.data)) |
||||||
|
setContenedor('') |
||||||
|
setToggleSelect(true) |
||||||
|
} |
||||||
|
}) |
||||||
|
.catch((e: Error) => { |
||||||
|
return |
||||||
|
}) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
const adjustTimeZone = (str: string): string => { |
||||||
|
if (str) { |
||||||
|
const original: any = new Date(str) |
||||||
|
const real = new Date(original - original.getTimezoneOffset() * 60 * 1000) |
||||||
|
return real.toISOString() |
||||||
|
} else return '' |
||||||
|
} |
||||||
|
|
||||||
|
const updateItem = () => { |
||||||
|
const data: ICorresponsalContenedores = { |
||||||
|
id: IDContenedor, |
||||||
|
contenedor: Contenedor, |
||||||
|
idTrafico: props.IDTrafico, |
||||||
|
fSemaforo: FSemaforo ? adjustTimeZone(FSemaforo.toISOString()) : '', |
||||||
|
semaforo: Semaforo, |
||||||
|
} |
||||||
|
// console.log(JSON.stringify(data))
|
||||||
|
CContDataService.Append(data) |
||||||
|
.then((response) => { |
||||||
|
if (response.status === 200) { |
||||||
|
setIDContenedor(0) |
||||||
|
setContenedor('') |
||||||
|
setDialogTabs(false) |
||||||
|
dispatch(updateCorresponsalesContenedores(response.data)) |
||||||
|
return |
||||||
|
} |
||||||
|
}) |
||||||
|
.catch((e: Error) => { |
||||||
|
return |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
const StrtoDate = (str: string): Date | null => { |
||||||
|
if (str) { |
||||||
|
const original: any = new Date(str) |
||||||
|
return original |
||||||
|
} else return null |
||||||
|
} |
||||||
|
|
||||||
|
return ( |
||||||
|
<div> |
||||||
|
<div className='form-group'> |
||||||
|
<div className='col-sm-12 parent'> |
||||||
|
<div className='input-group'> |
||||||
|
<input type='hidden' className='form-control' name='IDContenedor' id='IDContenedor' value={IDContenedor} /> |
||||||
|
<span className='input-group-addon sorroundImage'> |
||||||
|
<img |
||||||
|
src='http://reportes.gemcousa.com/images/Clean.png' |
||||||
|
width='28' |
||||||
|
height='28' |
||||||
|
style={{ cursor: 'pointer' }} |
||||||
|
alt='' |
||||||
|
onClick={() => { |
||||||
|
setIDContenedor(0) |
||||||
|
setContenedor('') |
||||||
|
}} |
||||||
|
/> |
||||||
|
</span> |
||||||
|
<input |
||||||
|
type='text' |
||||||
|
className='form-control genericSelect' |
||||||
|
name='Contenedor' |
||||||
|
id='Contenedor' |
||||||
|
style={{ height: '30px' }} |
||||||
|
value={Contenedor} |
||||||
|
placeholder={Placeholder} |
||||||
|
disabled={!props.Editable} |
||||||
|
onChange={(e) => { |
||||||
|
setContenedor(e.target.value) |
||||||
|
}} |
||||||
|
onKeyDown={(e) => handleKeyDown(e)} |
||||||
|
/> |
||||||
|
<span className='input-group-addon sorroundImage'> |
||||||
|
<img |
||||||
|
src='http://reportes.gemcousa.com/images/caret.png' |
||||||
|
width='28' |
||||||
|
height='28' |
||||||
|
style={{ cursor: 'pointer' }} |
||||||
|
alt='' |
||||||
|
onClick={() => { |
||||||
|
setToggleSelect(!toggleSelect) |
||||||
|
}} |
||||||
|
/> |
||||||
|
</span> |
||||||
|
<div className='child' style={toggleSelect ? { visibility: 'visible' } : { visibility: 'hidden' }}> |
||||||
|
<ul className='cleanLi'> |
||||||
|
{mCContenedores |
||||||
|
? mCContenedores |
||||||
|
.map((item, index) => { |
||||||
|
return item.id > 0 ? ( |
||||||
|
<li key={item.id} onClick={() => loadInfo(item)}> |
||||||
|
<span |
||||||
|
onClick={() => { |
||||||
|
setDialogTabs(true) |
||||||
|
}} |
||||||
|
> |
||||||
|
<IconContext.Provider value={{ color: 'red', size: '15px' }}> |
||||||
|
<BsFillXCircleFill /> |
||||||
|
</IconContext.Provider> |
||||||
|
</span> |
||||||
|
<span style={{ paddingLeft: '10px' }}>{item.contenedor}</span> |
||||||
|
<span |
||||||
|
onClick={() => { |
||||||
|
setFSemaforo(StrtoDate(item.fSemaforo)) |
||||||
|
setSemaforo(item.semaforo) |
||||||
|
setDialogAddDate(true) |
||||||
|
}} |
||||||
|
> |
||||||
|
| {item.fSemaforo} |{' '} |
||||||
|
{item.fSemaforo ? ( |
||||||
|
item.semaforo === 1 ? ( |
||||||
|
<IconContext.Provider value={{ color: 'red', size: '20px' }}> |
||||||
|
<BsFillRecordFill /> |
||||||
|
</IconContext.Provider> |
||||||
|
) : ( |
||||||
|
<IconContext.Provider value={{ color: '#4BFF59', size: '20px' }}> |
||||||
|
<BsFillRecordFill /> |
||||||
|
</IconContext.Provider> |
||||||
|
) |
||||||
|
) : ( |
||||||
|
'' |
||||||
|
)} |
||||||
|
<span |
||||||
|
style={{ |
||||||
|
paddingLeft: '20px', |
||||||
|
visibility: props.Editable && toggleSelect ? 'visible' : 'hidden', |
||||||
|
}} |
||||||
|
> |
||||||
|
<IconContext.Provider value={{ color: 'green', size: '15px' }}> |
||||||
|
<BsFillCalendarCheckFill /> |
||||||
|
</IconContext.Provider> |
||||||
|
</span> |
||||||
|
</span> |
||||||
|
</li> |
||||||
|
) : ( |
||||||
|
'' |
||||||
|
) |
||||||
|
}) |
||||||
|
.reverse() |
||||||
|
: ''} |
||||||
|
</ul> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<Modal |
||||||
|
show={DialogTabs} |
||||||
|
onHide={() => { |
||||||
|
setDialogTabs(false) |
||||||
|
}} |
||||||
|
size='sm' |
||||||
|
> |
||||||
|
<Modal.Body> |
||||||
|
<Alert variant='primary'> |
||||||
|
<b>¿Esta seguro de eliminar?</b> |
||||||
|
<br /> |
||||||
|
<h5> {Contenedor} </h5> |
||||||
|
</Alert> |
||||||
|
</Modal.Body> |
||||||
|
<Modal.Footer> |
||||||
|
<Row> |
||||||
|
<Col xs={6} style={{ textAlign: 'left', paddingRight: '100px' }}> |
||||||
|
<Button |
||||||
|
variant='danger' |
||||||
|
onClick={updateItem} |
||||||
|
size='sm' |
||||||
|
style={{ paddingRight: '20px', paddingLeft: '20px' }} |
||||||
|
> |
||||||
|
Si |
||||||
|
</Button> |
||||||
|
</Col> |
||||||
|
<Col xs={6} style={{ textAlign: 'right' }}> |
||||||
|
<Button |
||||||
|
variant='secondary' |
||||||
|
onClick={() => { |
||||||
|
setDialogTabs(false) |
||||||
|
}} |
||||||
|
size='sm' |
||||||
|
> |
||||||
|
Cerrar |
||||||
|
</Button> |
||||||
|
</Col> |
||||||
|
</Row> |
||||||
|
</Modal.Footer> |
||||||
|
</Modal> |
||||||
|
|
||||||
|
<Modal |
||||||
|
show={DialogAddDate} |
||||||
|
onHide={() => { |
||||||
|
setDialogTabs(false) |
||||||
|
}} |
||||||
|
/* size='sm' */ |
||||||
|
> |
||||||
|
<Modal.Body> |
||||||
|
<Alert variant='primary'> |
||||||
|
<Row> |
||||||
|
<Col xs={12}> |
||||||
|
<b>¿Esta seguro de agregar fecha al contenedor: {Contenedor}?</b> |
||||||
|
</Col> |
||||||
|
</Row> |
||||||
|
<Row style={{ paddingTop: '10px' }}> |
||||||
|
<Col xs={4}></Col> |
||||||
|
<Col xs={2}>Fecha</Col> |
||||||
|
<Col xs={6}> |
||||||
|
<DatePicker |
||||||
|
selected={FSemaforo} |
||||||
|
onChange={(date: any) => setFSemaforo(date)} |
||||||
|
showTimeSelect |
||||||
|
dateFormat='MM/dd/yyyy HH:mm:ss' |
||||||
|
placeholderText='No definido' |
||||||
|
isClearable |
||||||
|
/> |
||||||
|
</Col> |
||||||
|
</Row> |
||||||
|
<Row style={{ paddingTop: '10px' }}> |
||||||
|
<Col xs={5}></Col> |
||||||
|
<Col xs={2}>Semaforo</Col> |
||||||
|
<Col xs={5}> |
||||||
|
<Form.Control |
||||||
|
as='select' |
||||||
|
onChange={(e) => { |
||||||
|
setSemaforo(parseInt(e.target.value)) |
||||||
|
}} |
||||||
|
value={Semaforo} |
||||||
|
className='form-select form-select-sm' |
||||||
|
> |
||||||
|
<option value='0'>-SELECCIONE-</option> |
||||||
|
<option value='1'>Rojo</option> |
||||||
|
<option value='2'>Verde</option> |
||||||
|
</Form.Control> |
||||||
|
</Col> |
||||||
|
</Row> |
||||||
|
</Alert> |
||||||
|
<Row> |
||||||
|
<Col xs={6} style={{ textAlign: 'left', paddingRight: '100px' }}> |
||||||
|
<Button |
||||||
|
variant='primary' |
||||||
|
onClick={updateItem} |
||||||
|
size='sm' |
||||||
|
style={{ paddingRight: '20px', paddingLeft: '20px' }} |
||||||
|
> |
||||||
|
Guardar |
||||||
|
</Button> |
||||||
|
</Col> |
||||||
|
<Col xs={6} style={{ textAlign: 'right' }}> |
||||||
|
<Button |
||||||
|
variant='secondary' |
||||||
|
onClick={() => { |
||||||
|
setDialogAddDate(false) |
||||||
|
}} |
||||||
|
size='sm' |
||||||
|
> |
||||||
|
Cerrar |
||||||
|
</Button> |
||||||
|
</Col> |
||||||
|
</Row> |
||||||
|
</Modal.Body> |
||||||
|
</Modal> |
||||||
|
</div> |
||||||
|
) |
||||||
|
} |
||||||
@ -0,0 +1,569 @@ |
|||||||
|
import React, { FC, useEffect, useState } from 'react' |
||||||
|
import { Alert, Card, Col, FloatingLabel, Form, Modal, Row } from 'react-bootstrap' |
||||||
|
import { IconContext } from 'react-icons' |
||||||
|
import { BsCloudArrowUpFill, BsFillPlusCircleFill } from 'react-icons/bs' |
||||||
|
import FileManager from '../../Utils/FileManager/FileManager' |
||||||
|
import CuentasComplementariasDS from '../../../Services/Corresponsalias/Corresponsales.CuentasComplementarias.Services' |
||||||
|
import MFileManagerDataService from '../../../Services/Utils/MFileManager.Service' |
||||||
|
import ICorresponsalCuentasComplementarias from '../../../Interfaces/Corresponsales/ICorresponsalCuentasComplementarias' |
||||||
|
import { MsgInformativo } from '../../Utils/Toast/msgInformativo' |
||||||
|
import DataTable from 'react-data-table-component' |
||||||
|
import DTOCorresponsalCuentaComplementaria from '../../../DTO/Corresponsales/DTOCuentaComplementaria' |
||||||
|
import { SelectEstatus } from './SelectEstatus/SelectEstatus' |
||||||
|
import { FcAbout } from 'react-icons/fc' |
||||||
|
import DTOLogCorresponsalComplementariaEstatus from '../../../DTO/Corresponsales/DTOLogCorresponsalComplementariaEstatus' |
||||||
|
import FileManagerDS from '../../../Services/Utils/FileManager.Services' |
||||||
|
import { AiOutlineClose } from 'react-icons/ai' |
||||||
|
import { MdCloudUpload, MdOutlineInventory, MdOutlineSave } from 'react-icons/md' |
||||||
|
import { useDispatch, useSelector } from 'react-redux' |
||||||
|
import { RootState } from '../../../store/store' |
||||||
|
import { FiSave } from 'react-icons/fi' |
||||||
|
import ICorresponsalCuentaComplementariaStatus from '../../../Interfaces/Corresponsales/ICorresponsalCuentaComplementariaEstatus' |
||||||
|
import { updateCorresponsalesCuentasComplementariasEstatus } from '../../../store/features/Corresponsales/CorresponsalesCuentasComplementariasEstatusSlice' |
||||||
|
|
||||||
|
interface IProps { |
||||||
|
IDTrafico: number |
||||||
|
UserId: number |
||||||
|
} |
||||||
|
|
||||||
|
export const CuentasComplementarias: FC<IProps> = (props) => { |
||||||
|
const dispatch = useDispatch() |
||||||
|
const [Depto, setDepto] = useState(() => { |
||||||
|
const stickyValue = window.localStorage.getItem('Departamento') |
||||||
|
return stickyValue !== null ? JSON.parse(stickyValue) : '' |
||||||
|
}) |
||||||
|
const mCCCEstatus = useSelector( |
||||||
|
(state: RootState) => state.CCueCompEstatus.CorresponsalesCuentasComplementariasEstatus |
||||||
|
) |
||||||
|
const [showModal, setShowModal] = useState(false) |
||||||
|
const [showModalLog, setShowModalLog] = useState(false) |
||||||
|
const [showModalCatalogo, setShowModalCatalogo] = useState(false) |
||||||
|
const [DTData, setDTData] = useState<ICorresponsalCuentasComplementarias[]>([]) |
||||||
|
const [CuentaComplementaria, setCuentaComplementaria] = useState<ICorresponsalCuentasComplementarias[]>([]) |
||||||
|
const [HistorialEstatus, setHistoriaEstatus] = useState<DTOLogCorresponsalComplementariaEstatus[]>([]) |
||||||
|
const [IDCuentaComplementaria, setIdCuentaComplementarias] = useState(0) |
||||||
|
const [IDPDF, setIDPDF] = useState(0) |
||||||
|
const [IDXML, setIDXML] = useState(0) |
||||||
|
const [IDEstatus, setIDEstatus] = useState(0) |
||||||
|
const [Estatus, setEstatus] = useState('') |
||||||
|
const [header, setHeader] = useState('') |
||||||
|
const [msgColor, setMsgColor] = React.useState('primary') |
||||||
|
const [show, setShowMsg] = useState(false) |
||||||
|
const [msg, setMsg] = useState('') |
||||||
|
const [MsgTime, setMsgTime] = useState(3000) |
||||||
|
|
||||||
|
const colCuentasComplementarias = [ |
||||||
|
{ |
||||||
|
name: 'id', |
||||||
|
width: '60px', |
||||||
|
selector: (row: ICorresponsalCuentasComplementarias) => row.id, |
||||||
|
sortable: true, |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: '', |
||||||
|
width: '20px', |
||||||
|
cell: (row: ICorresponsalCuentasComplementarias) => { |
||||||
|
return row.archivoXML ? ( |
||||||
|
<div |
||||||
|
style={{ |
||||||
|
cursor: 'pointer', |
||||||
|
visibility: Depto === 'Corresponsalias' && row.estatus !== 7 ? 'visible' : 'hidden', |
||||||
|
}} |
||||||
|
onClick={() => { |
||||||
|
clearFile(row.id, 1, row.idXML) |
||||||
|
}} |
||||||
|
> |
||||||
|
<IconContext.Provider value={{ color: 'red', size: '15px' }}> |
||||||
|
<AiOutlineClose /> |
||||||
|
</IconContext.Provider> |
||||||
|
</div> |
||||||
|
) : ( |
||||||
|
<div |
||||||
|
style={{ cursor: 'pointer' }} |
||||||
|
onClick={() => { |
||||||
|
setPreloader(row.id) |
||||||
|
}} |
||||||
|
> |
||||||
|
<IconContext.Provider value={{ color: 'blue', size: '25px' }}> |
||||||
|
<MdCloudUpload /> |
||||||
|
</IconContext.Provider> |
||||||
|
</div> |
||||||
|
) |
||||||
|
}, |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: 'XML', |
||||||
|
width: '300px', |
||||||
|
cell: (row: ICorresponsalCuentasComplementarias) => { |
||||||
|
return ( |
||||||
|
<div |
||||||
|
style={{ cursor: 'pointer' }} |
||||||
|
onClick={() => { |
||||||
|
getFileContent(row.idXML, 22, row.archivoXML) |
||||||
|
}} |
||||||
|
> |
||||||
|
{row.archivoXML} |
||||||
|
</div> |
||||||
|
) |
||||||
|
}, |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: '', |
||||||
|
width: '20px', |
||||||
|
cell: (row: ICorresponsalCuentasComplementarias) => { |
||||||
|
return row.archivoPDF ? ( |
||||||
|
<div |
||||||
|
style={{ |
||||||
|
cursor: 'pointer', |
||||||
|
visibility: Depto === 'Corresponsalias' && row.estatus !== 7 ? 'visible' : 'hidden', |
||||||
|
}} |
||||||
|
onClick={() => { |
||||||
|
clearFile(row.id, 2, row.idPDF) |
||||||
|
}} |
||||||
|
> |
||||||
|
<IconContext.Provider value={{ color: 'red', size: '15px' }}> |
||||||
|
<AiOutlineClose /> |
||||||
|
</IconContext.Provider> |
||||||
|
</div> |
||||||
|
) : ( |
||||||
|
<div |
||||||
|
style={{ cursor: 'pointer' }} |
||||||
|
onClick={() => { |
||||||
|
setPreloader(row.id) |
||||||
|
}} |
||||||
|
> |
||||||
|
<IconContext.Provider value={{ color: 'blue', size: '25px' }}> |
||||||
|
<MdCloudUpload /> |
||||||
|
</IconContext.Provider> |
||||||
|
</div> |
||||||
|
) |
||||||
|
}, |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: 'PDF', |
||||||
|
width: '300px', |
||||||
|
cell: (row: ICorresponsalCuentasComplementarias) => { |
||||||
|
return ( |
||||||
|
<div |
||||||
|
style={{ cursor: 'pointer' }} |
||||||
|
onClick={() => { |
||||||
|
getFileContent(row.idPDF, 21, row.archivoPDF) |
||||||
|
}} |
||||||
|
> |
||||||
|
{row.archivoPDF} |
||||||
|
</div> |
||||||
|
) |
||||||
|
}, |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: 'Estatus', |
||||||
|
width: '400px', |
||||||
|
cell: (row: ICorresponsalCuentasComplementarias) => { |
||||||
|
return <SelectEstatus IDEstatus={row.estatus} IDCuenta={row.id} Enabled={row.estatus === 7} /> |
||||||
|
}, |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: 'Historico', |
||||||
|
width: '110px', |
||||||
|
cell: (row: ICorresponsalCuentasComplementarias) => ( |
||||||
|
<div |
||||||
|
style={{ textAlign: 'center', cursor: 'pointer' }} |
||||||
|
onClick={() => { |
||||||
|
showHistoricoEstatus(row.id) |
||||||
|
}} |
||||||
|
> |
||||||
|
<IconContext.Provider value={{ color: 'red', size: '25px' }}> |
||||||
|
<FcAbout /> |
||||||
|
</IconContext.Provider> |
||||||
|
</div> |
||||||
|
), |
||||||
|
}, |
||||||
|
] |
||||||
|
|
||||||
|
const setPreloader = (id: number) => { |
||||||
|
setIdCuentaComplementarias(id) |
||||||
|
setIDPDF(0) |
||||||
|
setIDXML(0) |
||||||
|
setShowModal(true) |
||||||
|
} |
||||||
|
|
||||||
|
const clearFile = (IDCuenta: number, witchFile: number, idFile: number) => { |
||||||
|
CuentasComplementariasDS.ClearFile(IDCuenta, witchFile) |
||||||
|
.then((response) => { |
||||||
|
FileManagerDS.DeleteFile(idFile) |
||||||
|
.then((response) => { |
||||||
|
loadCuentaComplementaria() |
||||||
|
}) |
||||||
|
.catch((e: Error) => { |
||||||
|
setHeader('Error') |
||||||
|
setMsg('Ocurrio un error: ' + e) |
||||||
|
setShowMsg(true) |
||||||
|
return |
||||||
|
}) |
||||||
|
}) |
||||||
|
.catch((e: Error) => { |
||||||
|
setHeader('Error') |
||||||
|
setMsg('Ocurrio un error: ' + e) |
||||||
|
setShowMsg(true) |
||||||
|
return |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
const createCuentaComplementaria = () => { |
||||||
|
const data: DTOCorresponsalCuentaComplementaria = { |
||||||
|
id: 0, |
||||||
|
idTrafico: props.IDTrafico, |
||||||
|
idFile: 0, |
||||||
|
} |
||||||
|
CuentasComplementariasDS.Append(data) |
||||||
|
.then((response) => { |
||||||
|
// setCuentaComplementaria(response.data)
|
||||||
|
setIdCuentaComplementarias(response.data.id) |
||||||
|
setIDPDF(response.data.idPDF) |
||||||
|
setIDXML(response.data.idXML) |
||||||
|
setShowModal(true) |
||||||
|
}) |
||||||
|
.catch((e: Error) => { |
||||||
|
setHeader('Error') |
||||||
|
setMsg('Ocurrio un error: ' + e) |
||||||
|
setShowMsg(true) |
||||||
|
return |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
const loadCuentaComplementaria = () => { |
||||||
|
CuentasComplementariasDS.Get(props.IDTrafico) |
||||||
|
.then((response) => { |
||||||
|
setDTData(response.data) |
||||||
|
setIDPDF(0) |
||||||
|
setIDXML(0) |
||||||
|
}) |
||||||
|
.catch((e: Error) => { |
||||||
|
setHeader('Error') |
||||||
|
setMsg('Ocurrio un error: ' + e) |
||||||
|
setShowMsg(true) |
||||||
|
return |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
setIDPDF(0) |
||||||
|
setIDXML(0) |
||||||
|
}, [IDCuentaComplementaria]) |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
loadCuentaComplementaria() |
||||||
|
}, []) |
||||||
|
|
||||||
|
const showHistoricoEstatus = (id: number) => { |
||||||
|
CuentasComplementariasDS.GetLogEstatus(id) |
||||||
|
.then((response) => { |
||||||
|
setHistoriaEstatus(response.data) |
||||||
|
setShowModalLog(true) |
||||||
|
}) |
||||||
|
.catch((e: Error) => { |
||||||
|
setHeader('Error') |
||||||
|
setMsg('Ocurrio un error: ' + e) |
||||||
|
setShowMsg(true) |
||||||
|
return |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
const updateFile = (idFile: number) => { |
||||||
|
if (IDCuentaComplementaria === 0) { |
||||||
|
setHeader('Error') |
||||||
|
setMsg('Para proceder, es necesario que cree una cuenta complementaria o seleccione una existente') |
||||||
|
setShowMsg(true) |
||||||
|
return |
||||||
|
} |
||||||
|
const data: DTOCorresponsalCuentaComplementaria = { |
||||||
|
id: IDCuentaComplementaria, |
||||||
|
idFile: idFile, |
||||||
|
idTrafico: props.IDTrafico, |
||||||
|
} |
||||||
|
CuentasComplementariasDS.Append(data) |
||||||
|
.then((response) => { |
||||||
|
loadCuentaComplementaria() |
||||||
|
}) |
||||||
|
.catch((e: Error) => { |
||||||
|
setHeader('Error') |
||||||
|
setMsg('Ocurrio un error: ' + e) |
||||||
|
setShowMsg(true) |
||||||
|
return |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
const getFileContent = (id: number, proceso: number, archivo: string) => { |
||||||
|
if (id > 0) { |
||||||
|
MFileManagerDataService.getFileContentById(id, proceso) |
||||||
|
.then((response: any) => { |
||||||
|
if (response.status === 200) { |
||||||
|
if (archivo.toLowerCase().endsWith('.pdf')) { |
||||||
|
console.log(response.data) |
||||||
|
const blob = new Blob([response.data], { type: 'application/pdf' }) |
||||||
|
const url = window.URL.createObjectURL(blob) |
||||||
|
window.open(url) |
||||||
|
} else if (archivo.toLowerCase().endsWith('.xml')) { |
||||||
|
console.log(response.data) |
||||||
|
const blob = new Blob([response.data], { type: 'application/xml' }) |
||||||
|
const url = window.URL.createObjectURL(blob) |
||||||
|
window.open(url) |
||||||
|
} |
||||||
|
} else { |
||||||
|
setHeader('Error') |
||||||
|
setMsg('No existe ningun archivo asignado') |
||||||
|
setShowMsg(true) |
||||||
|
return |
||||||
|
} |
||||||
|
}) |
||||||
|
.catch((e: Error) => { |
||||||
|
setHeader('Error') |
||||||
|
setMsg('A este concepto no se le ha anexado archivo') |
||||||
|
setShowMsg(true) |
||||||
|
return |
||||||
|
}) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
const saveEstatus = () => { |
||||||
|
const data: ICorresponsalCuentaComplementariaStatus = { |
||||||
|
id: IDEstatus, |
||||||
|
estatus: Estatus, |
||||||
|
} |
||||||
|
CuentasComplementariasDS.AppendEstatus(data) |
||||||
|
.then((response) => { |
||||||
|
dispatch(updateCorresponsalesCuentasComplementariasEstatus(response.data)) |
||||||
|
setIDEstatus(0) |
||||||
|
setEstatus('') |
||||||
|
}) |
||||||
|
.catch((e: Error) => { |
||||||
|
setHeader('Error') |
||||||
|
setMsg('Ocurrio un error: ' + e) |
||||||
|
setShowMsg(true) |
||||||
|
return |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
return ( |
||||||
|
<div> |
||||||
|
<Row> |
||||||
|
<Col style={{ textAlign: 'right', visibility: Depto === 'Contabilidad' ? 'visible' : 'hidden' }}> |
||||||
|
<div |
||||||
|
style={{ cursor: 'pointer' }} |
||||||
|
onClick={() => { |
||||||
|
setShowModalCatalogo(true) |
||||||
|
}} |
||||||
|
title='De un click aqui para agregar abrir el catalogo de conceptos de rechazo' |
||||||
|
> |
||||||
|
<IconContext.Provider value={{ color: 'green', size: '35px' }}> |
||||||
|
<MdOutlineInventory /> |
||||||
|
</IconContext.Provider> |
||||||
|
</div> |
||||||
|
</Col> |
||||||
|
<Col xs={10}></Col> |
||||||
|
<Col style={{ visibility: Depto !== 'Contabilidad' ? 'visible' : 'hidden' }}> |
||||||
|
<div |
||||||
|
style={{ cursor: 'pointer' }} |
||||||
|
onClick={() => { |
||||||
|
createCuentaComplementaria() |
||||||
|
}} |
||||||
|
title='De un click aqui para agregar una nueva cuenta complementaria' |
||||||
|
> |
||||||
|
<IconContext.Provider value={{ color: 'green', size: '35px' }}> |
||||||
|
<BsFillPlusCircleFill /> |
||||||
|
</IconContext.Provider> |
||||||
|
</div> |
||||||
|
</Col> |
||||||
|
</Row> |
||||||
|
<Row style={{ paddingTop: '10px' }}> |
||||||
|
<Card> |
||||||
|
<Col xs={12}> |
||||||
|
<DataTable |
||||||
|
noHeader |
||||||
|
defaultSortFieldId={'id'} |
||||||
|
defaultSortAsc={true} |
||||||
|
pagination |
||||||
|
highlightOnHover |
||||||
|
columns={colCuentasComplementarias} |
||||||
|
data={DTData} |
||||||
|
/> |
||||||
|
</Col> |
||||||
|
</Card> |
||||||
|
</Row> |
||||||
|
<Modal |
||||||
|
show={showModal} |
||||||
|
onHide={() => { |
||||||
|
setShowModal(false) |
||||||
|
}} |
||||||
|
size={'sm'} |
||||||
|
dialogClassName={'modal-50w'} |
||||||
|
> |
||||||
|
<Modal.Body> |
||||||
|
<Row> |
||||||
|
<Col xs={6}> |
||||||
|
<FileManager |
||||||
|
IDUser={props.UserId} |
||||||
|
width={350} |
||||||
|
height={200} |
||||||
|
IDProcess={22} |
||||||
|
IdFile={IDCuentaComplementaria} |
||||||
|
FileName={''} |
||||||
|
canDelete={true} |
||||||
|
FileType={['xml']} |
||||||
|
Leyenda={'Seleccione el archivo XML, arrastrelo hasta aqui y sueltelo para subirlo al servidor...'} |
||||||
|
onAppendFM={function (idFile: number): void { |
||||||
|
setIDXML(idFile) |
||||||
|
updateFile(idFile) |
||||||
|
}} |
||||||
|
/> |
||||||
|
</Col> |
||||||
|
<Col xs={6}> |
||||||
|
<FileManager |
||||||
|
IDUser={props.UserId} |
||||||
|
width={350} |
||||||
|
height={200} |
||||||
|
IDProcess={21} |
||||||
|
IdFile={IDCuentaComplementaria} |
||||||
|
FileName={''} |
||||||
|
canDelete={true} |
||||||
|
FileType={['pdf']} |
||||||
|
Leyenda={'Seleccione el archivo PDF, arrastrelo hasta aqui y sueltelo para subirlo al servidor...'} |
||||||
|
onAppendFM={function (idFile: number): void { |
||||||
|
setIDPDF(idFile) |
||||||
|
updateFile(idFile) |
||||||
|
}} |
||||||
|
/> |
||||||
|
</Col> |
||||||
|
</Row> |
||||||
|
</Modal.Body> |
||||||
|
</Modal> |
||||||
|
|
||||||
|
<Modal |
||||||
|
show={showModalLog} |
||||||
|
onHide={() => { |
||||||
|
setShowModalLog(false) |
||||||
|
}} |
||||||
|
size={'sm'} |
||||||
|
dialogClassName={'modal-50w'} |
||||||
|
> |
||||||
|
<Modal.Body> |
||||||
|
{HistorialEstatus.length > 0 ? ( |
||||||
|
<Card> |
||||||
|
<table> |
||||||
|
<tr> |
||||||
|
<td>Registrado</td> |
||||||
|
<td>Estatus</td> |
||||||
|
</tr> |
||||||
|
{HistorialEstatus |
||||||
|
? HistorialEstatus.map((item, index) => { |
||||||
|
return ( |
||||||
|
<tr key={item.estatus}> |
||||||
|
<td>{item.fCreacion}</td> |
||||||
|
<td>{item.sEstatus}</td> |
||||||
|
</tr> |
||||||
|
) |
||||||
|
}) |
||||||
|
: ''} |
||||||
|
</table> |
||||||
|
</Card> |
||||||
|
) : ( |
||||||
|
<Alert variant='primary'> |
||||||
|
<Alert.Heading style={{ textAlign: 'center' }}>No hay informacion al respecto</Alert.Heading> |
||||||
|
</Alert> |
||||||
|
)} |
||||||
|
</Modal.Body> |
||||||
|
</Modal> |
||||||
|
|
||||||
|
<Modal |
||||||
|
show={showModalCatalogo} |
||||||
|
onHide={() => { |
||||||
|
setShowModalCatalogo(false) |
||||||
|
}} |
||||||
|
size={'sm'} |
||||||
|
dialogClassName={'modal-50w'} |
||||||
|
> |
||||||
|
<Modal.Body> |
||||||
|
{mCCCEstatus.length > 0 ? ( |
||||||
|
<> |
||||||
|
<Card> |
||||||
|
<Row> |
||||||
|
<Col xs={1}> |
||||||
|
<FloatingLabel controlId='IdEstatus' label='id' className='mb-3'> |
||||||
|
<Form.Control type='text' placeholder='id' value={IDEstatus} disabled={true} /> |
||||||
|
</FloatingLabel> |
||||||
|
</Col> |
||||||
|
<Col xs={10}> |
||||||
|
<FloatingLabel controlId='IdEstatus' label='Estatus' className='mb-3'> |
||||||
|
<Form.Control |
||||||
|
type='text' |
||||||
|
placeholder='Estatus' |
||||||
|
value={Estatus} |
||||||
|
onChange={(e) => { |
||||||
|
setEstatus(e.target.value) |
||||||
|
}} |
||||||
|
/> |
||||||
|
</FloatingLabel> |
||||||
|
</Col> |
||||||
|
<Col xs={1} style={{ paddingTop: '10px', paddingRight: '50px', cursor: 'pointer' }}> |
||||||
|
<div |
||||||
|
onClick={() => { |
||||||
|
saveEstatus() |
||||||
|
}} |
||||||
|
> |
||||||
|
<IconContext.Provider value={{ color: 'blue', size: '35px' }}> |
||||||
|
<FiSave /> |
||||||
|
</IconContext.Provider> |
||||||
|
</div> |
||||||
|
</Col> |
||||||
|
</Row> |
||||||
|
</Card> |
||||||
|
<Card> |
||||||
|
<Row style={{ fontWeight: 'bold' }}> |
||||||
|
<Col xs={1}>id</Col> |
||||||
|
<Col xs={10}>Estatus</Col> |
||||||
|
<Col xs={1}></Col> |
||||||
|
</Row> |
||||||
|
{mCCCEstatus |
||||||
|
? mCCCEstatus |
||||||
|
.filter((item) => { |
||||||
|
return item.id > 1 |
||||||
|
}) |
||||||
|
.map((item, index) => { |
||||||
|
return ( |
||||||
|
<Row |
||||||
|
key={item.estatus} |
||||||
|
onClick={() => { |
||||||
|
setIDEstatus(item.id) |
||||||
|
setEstatus(item.estatus) |
||||||
|
}} |
||||||
|
> |
||||||
|
<Col xs={1}>{item.id}</Col> |
||||||
|
<Col xs={10}>{item.estatus}</Col> |
||||||
|
<Col xs={1}></Col> |
||||||
|
</Row> |
||||||
|
) |
||||||
|
}) |
||||||
|
: ''} |
||||||
|
</Card> |
||||||
|
</> |
||||||
|
) : ( |
||||||
|
<Alert variant='primary'> |
||||||
|
<Alert.Heading style={{ textAlign: 'center' }}>No hay informacion al respecto</Alert.Heading> |
||||||
|
</Alert> |
||||||
|
)} |
||||||
|
</Modal.Body> |
||||||
|
</Modal> |
||||||
|
|
||||||
|
<MsgInformativo |
||||||
|
show={show} |
||||||
|
msg={msg} |
||||||
|
header={header} |
||||||
|
msgColor={msgColor} |
||||||
|
time={MsgTime} |
||||||
|
closeToast={() => { |
||||||
|
setShowMsg(false) |
||||||
|
}} |
||||||
|
/> |
||||||
|
</div> |
||||||
|
) |
||||||
|
} |
||||||
@ -0,0 +1,85 @@ |
|||||||
|
import React, { FC, useState } from 'react' |
||||||
|
import { Form } from 'react-bootstrap' |
||||||
|
import { useSelector } from 'react-redux' |
||||||
|
import { RootState } from '../../../../store/store' |
||||||
|
import CuentasComplementariasDS from '../../../../Services/Corresponsalias/Corresponsales.CuentasComplementarias.Services' |
||||||
|
import DTOCuentaComplementariaEstatus from '../../../../DTO/Corresponsales/DTOCuentaComplementariaEstatus' |
||||||
|
import { MsgInformativo } from '../../../Utils/Toast/msgInformativo' |
||||||
|
|
||||||
|
interface IProps { |
||||||
|
IDEstatus: number |
||||||
|
IDCuenta: number |
||||||
|
Enabled: boolean |
||||||
|
} |
||||||
|
|
||||||
|
export const SelectEstatus: FC<IProps> = (props) => { |
||||||
|
const [Depto, setDepto] = useState(() => { |
||||||
|
const stickyValue = window.localStorage.getItem('Departamento') |
||||||
|
return stickyValue !== null ? JSON.parse(stickyValue) : '' |
||||||
|
}) |
||||||
|
const [header, setHeader] = useState('') |
||||||
|
const [msgColor, setMsgColor] = React.useState('primary') |
||||||
|
const [show, setShowMsg] = useState(false) |
||||||
|
const [msg, setMsg] = useState('') |
||||||
|
const [MsgTime, setMsgTime] = useState(3000) |
||||||
|
const mCCCEstatus = useSelector( |
||||||
|
(state: RootState) => state.CCueCompEstatus.CorresponsalesCuentasComplementariasEstatus |
||||||
|
) |
||||||
|
const [IDEstatus, setIDEstatus] = useState(props.IDEstatus) |
||||||
|
|
||||||
|
const changeStatus = (nuevoEstatus: number) => { |
||||||
|
setIDEstatus(nuevoEstatus) |
||||||
|
const data: DTOCuentaComplementariaEstatus = { |
||||||
|
id: props.IDCuenta, |
||||||
|
estatus: nuevoEstatus, |
||||||
|
} |
||||||
|
CuentasComplementariasDS.ChangeStatus(data) |
||||||
|
.then((response) => { |
||||||
|
setHeader('Confirmacion') |
||||||
|
setMsg('Se ha cambiado el estatus de la cuenta') |
||||||
|
setShowMsg(true) |
||||||
|
return |
||||||
|
}) |
||||||
|
.catch((e: Error) => { |
||||||
|
setHeader('Error') |
||||||
|
setMsg('Ocurrio un error: ' + e) |
||||||
|
setShowMsg(true) |
||||||
|
return |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
return ( |
||||||
|
<div> |
||||||
|
<Form.Control |
||||||
|
as='select' |
||||||
|
onChange={(e) => { |
||||||
|
changeStatus(parseInt(e.target.value)) |
||||||
|
}} |
||||||
|
className='form-select form-select-sm' |
||||||
|
style={{ width: '350px' }} |
||||||
|
disabled={Depto !== 'Contabilidad' || props.Enabled} |
||||||
|
value={IDEstatus} |
||||||
|
> |
||||||
|
{mCCCEstatus |
||||||
|
? mCCCEstatus.map((item, index) => { |
||||||
|
return ( |
||||||
|
<option key={item.id} value={item.id}> |
||||||
|
{item.estatus} |
||||||
|
</option> |
||||||
|
) |
||||||
|
}) |
||||||
|
: ''} |
||||||
|
</Form.Control> |
||||||
|
<MsgInformativo |
||||||
|
show={show} |
||||||
|
msg={msg} |
||||||
|
header={header} |
||||||
|
msgColor={msgColor} |
||||||
|
time={MsgTime} |
||||||
|
closeToast={() => { |
||||||
|
setShowMsg(false) |
||||||
|
}} |
||||||
|
/> |
||||||
|
</div> |
||||||
|
) |
||||||
|
} |
||||||
@ -0,0 +1,190 @@ |
|||||||
|
import { FC, useEffect, useState } from 'react' |
||||||
|
import { useDispatch, useSelector } from 'react-redux' |
||||||
|
import { RootState } from '../../../store/store' |
||||||
|
import CGuiasDataService from '../../../Services/Corresponsalias/Corresponsales.Guias.Services' |
||||||
|
import ICorresponsalesGuias from '../../../Interfaces/Corresponsales/ICorresponsalesGuias' |
||||||
|
import { IconContext } from 'react-icons' |
||||||
|
import { BsFillXCircleFill } from 'react-icons/bs' |
||||||
|
import { Alert, Button, Col, Modal, Row } from 'react-bootstrap' |
||||||
|
import { |
||||||
|
deleteCorresponsalesGuias, |
||||||
|
updateCorresponsalesGuias, |
||||||
|
} from '../../../store/features/Corresponsales/CorresponsalesGuiasSlice' |
||||||
|
|
||||||
|
interface IProps { |
||||||
|
IDTrafico: number |
||||||
|
Editable: boolean |
||||||
|
} |
||||||
|
|
||||||
|
export const SelectGuias: FC<IProps> = (props) => { |
||||||
|
const dispatch = useDispatch() |
||||||
|
const [toggleSelect, setToggleSelect] = useState(false) |
||||||
|
const mCGuias = useSelector((state: RootState) => state.CGuias.CorresponsalesGuias) |
||||||
|
const [Guia, setGuia] = useState('') |
||||||
|
const [IDGuia, setIDGuia] = useState(0) |
||||||
|
const [Placeholder, setPlaceholder] = useState('') |
||||||
|
const [DialogTabs, setDialogTabs] = useState(false) |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
setPlaceholder('(' + mCGuias.filter((item) => item.id > 0).length + ') Guias') |
||||||
|
}, [mCGuias]) |
||||||
|
|
||||||
|
const loadInfo = (data: ICorresponsalesGuias) => { |
||||||
|
setIDGuia(data.id) |
||||||
|
setGuia(data.guia) |
||||||
|
} |
||||||
|
|
||||||
|
const handleKeyDown = (event: any) => { |
||||||
|
if (event.key === 'Enter') { |
||||||
|
const data: ICorresponsalesGuias = { |
||||||
|
id: IDGuia, |
||||||
|
guia: Guia, |
||||||
|
idTrafico: props.IDTrafico, |
||||||
|
} |
||||||
|
CGuiasDataService.Append(data) |
||||||
|
.then((response) => { |
||||||
|
if (response.status === 200) { |
||||||
|
dispatch(updateCorresponsalesGuias(response.data)) |
||||||
|
setGuia('') |
||||||
|
setToggleSelect(true) |
||||||
|
} |
||||||
|
}) |
||||||
|
.catch((e: Error) => { |
||||||
|
return |
||||||
|
}) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
const deleteItem = () => { |
||||||
|
CGuiasDataService.Delete(IDGuia) |
||||||
|
.then((response) => { |
||||||
|
if (response.status === 200) { |
||||||
|
setIDGuia(0) |
||||||
|
setGuia('') |
||||||
|
setDialogTabs(false) |
||||||
|
dispatch(deleteCorresponsalesGuias(IDGuia)) |
||||||
|
return |
||||||
|
} |
||||||
|
}) |
||||||
|
.catch((e: Error) => { |
||||||
|
return |
||||||
|
}) |
||||||
|
} |
||||||
|
return ( |
||||||
|
<div> |
||||||
|
{' '} |
||||||
|
<div className='form-group'> |
||||||
|
<div className='col-sm-12 parent'> |
||||||
|
<div className='input-group'> |
||||||
|
<input type='hidden' className='form-control' name='IDGuia' id='IDGuia' value={IDGuia} /> |
||||||
|
<span className='input-group-addon sorroundImage'> |
||||||
|
<img |
||||||
|
src='http://reportes.gemcousa.com/images/Clean.png' |
||||||
|
width='28' |
||||||
|
height='28' |
||||||
|
style={{ cursor: 'pointer' }} |
||||||
|
alt='' |
||||||
|
onClick={() => { |
||||||
|
setIDGuia(0) |
||||||
|
setGuia('') |
||||||
|
}} |
||||||
|
/> |
||||||
|
</span> |
||||||
|
<input |
||||||
|
type='text' |
||||||
|
className='form-control genericSelect' |
||||||
|
name='Guia' |
||||||
|
id='Guia' |
||||||
|
style={{ height: '30px' }} |
||||||
|
value={Guia} |
||||||
|
placeholder={Placeholder} |
||||||
|
disabled={!props.Editable} |
||||||
|
onChange={(e) => { |
||||||
|
setGuia(e.target.value) |
||||||
|
}} |
||||||
|
onKeyDown={(e) => handleKeyDown(e)} |
||||||
|
/> |
||||||
|
<span className='input-group-addon sorroundImage'> |
||||||
|
<img |
||||||
|
src='http://reportes.gemcousa.com/images/caret.png' |
||||||
|
width='28' |
||||||
|
height='28' |
||||||
|
style={{ cursor: 'pointer' }} |
||||||
|
alt='' |
||||||
|
onClick={() => { |
||||||
|
setToggleSelect(!toggleSelect) |
||||||
|
}} |
||||||
|
/> |
||||||
|
</span> |
||||||
|
<div className='child' style={toggleSelect ? { visibility: 'visible' } : { visibility: 'hidden' }}> |
||||||
|
<ul className='cleanLi'> |
||||||
|
{mCGuias |
||||||
|
? mCGuias |
||||||
|
.map((item, index) => { |
||||||
|
return item.id > 0 ? ( |
||||||
|
<li key={item.id} onClick={() => loadInfo(item)}> |
||||||
|
<span |
||||||
|
onClick={() => { |
||||||
|
setDialogTabs(true) |
||||||
|
}} |
||||||
|
> |
||||||
|
<IconContext.Provider value={{ color: 'red', size: '15px' }}> |
||||||
|
<BsFillXCircleFill /> |
||||||
|
</IconContext.Provider> |
||||||
|
</span> |
||||||
|
<span style={{ paddingLeft: '10px' }}>{item.guia}</span> |
||||||
|
</li> |
||||||
|
) : ( |
||||||
|
'' |
||||||
|
) |
||||||
|
}) |
||||||
|
.reverse() |
||||||
|
: ''} |
||||||
|
</ul> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<Modal |
||||||
|
show={DialogTabs} |
||||||
|
onHide={() => { |
||||||
|
setDialogTabs(false) |
||||||
|
}} |
||||||
|
size='sm' |
||||||
|
> |
||||||
|
<Modal.Body> |
||||||
|
<Alert variant='primary'> |
||||||
|
<b>¿Esta seguro de eliminar?</b> |
||||||
|
<br /> |
||||||
|
<h5> {Guia} </h5> |
||||||
|
</Alert> |
||||||
|
</Modal.Body> |
||||||
|
<Modal.Footer> |
||||||
|
<Row> |
||||||
|
<Col xs={6} style={{ textAlign: 'left', paddingRight: '100px' }}> |
||||||
|
<Button |
||||||
|
variant='danger' |
||||||
|
onClick={deleteItem} |
||||||
|
size='sm' |
||||||
|
style={{ paddingRight: '20px', paddingLeft: '20px' }} |
||||||
|
> |
||||||
|
Si |
||||||
|
</Button> |
||||||
|
</Col> |
||||||
|
<Col xs={6} style={{ textAlign: 'right' }}> |
||||||
|
<Button |
||||||
|
variant='secondary' |
||||||
|
onClick={() => { |
||||||
|
setDialogTabs(false) |
||||||
|
}} |
||||||
|
size='sm' |
||||||
|
> |
||||||
|
Cerrar |
||||||
|
</Button> |
||||||
|
</Col> |
||||||
|
</Row> |
||||||
|
</Modal.Footer> |
||||||
|
</Modal> |
||||||
|
</div> |
||||||
|
) |
||||||
|
} |
||||||
@ -0,0 +1,110 @@ |
|||||||
|
import React, { FC, useEffect, useState } from 'react' |
||||||
|
import { MsgInformativo } from '../../../Utils/Toast/msgInformativo' |
||||||
|
import CFac3DataService from '../../../../Services/Corresponsalias/Corresponsales.FacturasTerceros.services' |
||||||
|
import { useDispatch, useSelector } from 'react-redux' |
||||||
|
import ICorresponsalTerceros from '../../../../Interfaces/Corresponsales/ICorresponsalFacturasTerceros' |
||||||
|
import { updateCorresponsalesFacturasTerceros } from '../../../../store/features/Corresponsales/CorresponsalesFacturasTercerosSlice' |
||||||
|
import { Form } from 'react-bootstrap' |
||||||
|
import { RootState } from '../../../../store/store' |
||||||
|
|
||||||
|
interface IProps { |
||||||
|
row: ICorresponsalTerceros |
||||||
|
disabled?: boolean |
||||||
|
mode: number // 1: Number, 2: String
|
||||||
|
} |
||||||
|
|
||||||
|
export const ControlledInput: FC<IProps> = (props) => { |
||||||
|
const dispatch = useDispatch() |
||||||
|
const mProveedores = useSelector((state: RootState) => state.CatProveedores.CatalogoProveedores) |
||||||
|
const [id, setid] = useState(props.row.id) |
||||||
|
const [value, setValue] = useState(props.row.factura) |
||||||
|
const [IDProveedor, setIDProveedor] = useState(props.row.idProveedor) |
||||||
|
const [ClasificacionProveedor, setClasificacionProveedor] = useState(1) |
||||||
|
const [header, setHeader] = useState('') |
||||||
|
const [msgColor, setMsgColor] = React.useState('primary') |
||||||
|
const [show, setShowMsg] = useState(false) |
||||||
|
const [msg, setMsg] = useState('') |
||||||
|
|
||||||
|
const onChange = (event: any) => { |
||||||
|
setValue(event.target.value) |
||||||
|
} |
||||||
|
|
||||||
|
const handleKeyDown = (event: any) => { |
||||||
|
if (event.key === 'Enter') { |
||||||
|
if (isNaN(event.target.value) && props.mode === 1) { |
||||||
|
alert('Valor no valido!') |
||||||
|
return |
||||||
|
} |
||||||
|
const data: ICorresponsalTerceros = { |
||||||
|
id: id, |
||||||
|
factura: value, |
||||||
|
idTrafico: props.row.idTrafico, |
||||||
|
idProveedor: IDProveedor, |
||||||
|
} |
||||||
|
CFac3DataService.Append(data) |
||||||
|
.then((response) => { |
||||||
|
if (response.status === 200) { |
||||||
|
dispatch(updateCorresponsalesFacturasTerceros(response.data.registro)) |
||||||
|
setHeader('Informativo') |
||||||
|
setMsg('La informacion se guardo exitosamente') |
||||||
|
setShowMsg(true) |
||||||
|
return |
||||||
|
} |
||||||
|
}) |
||||||
|
.catch((e: Error) => { |
||||||
|
setHeader('Error') |
||||||
|
setMsg('Ocurrio un error: ' + e) |
||||||
|
setShowMsg(true) |
||||||
|
return |
||||||
|
}) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
console.log('El proveedor es:............................' + JSON.stringify(props.row)) |
||||||
|
}, []) |
||||||
|
|
||||||
|
return ( |
||||||
|
<> |
||||||
|
<input |
||||||
|
value={value} |
||||||
|
onChange={onChange} |
||||||
|
disabled={props.disabled} |
||||||
|
onKeyDown={(e) => handleKeyDown(e)} |
||||||
|
style={{ width: '120px' }} |
||||||
|
/> |
||||||
|
|
||||||
|
<Form.Control |
||||||
|
as='select' |
||||||
|
onChange={(f) => { |
||||||
|
setIDProveedor(parseInt(f.target.value)) |
||||||
|
}} |
||||||
|
value={IDProveedor} |
||||||
|
className='form-select form-select-sm' |
||||||
|
> |
||||||
|
{mProveedores |
||||||
|
? mProveedores |
||||||
|
.filter(function (row) { |
||||||
|
return row.clasificacion === ClasificacionProveedor |
||||||
|
}) |
||||||
|
.map((p) => { |
||||||
|
return ( |
||||||
|
<option value={p.id} key={p.id}> |
||||||
|
{p.nombre} |
||||||
|
</option> |
||||||
|
) |
||||||
|
}) |
||||||
|
: null} |
||||||
|
</Form.Control> |
||||||
|
<MsgInformativo |
||||||
|
show={show} |
||||||
|
msg={msg} |
||||||
|
header={header} |
||||||
|
msgColor={msgColor} |
||||||
|
closeToast={() => { |
||||||
|
setShowMsg(false) |
||||||
|
}} |
||||||
|
/> |
||||||
|
</> |
||||||
|
) |
||||||
|
} |
||||||
@ -0,0 +1,365 @@ |
|||||||
|
import React, { FC, useEffect, useState } from 'react'; |
||||||
|
import { Alert, Button, Card, Col, Form, Modal, Row } from 'react-bootstrap'; |
||||||
|
import DataTable from 'react-data-table-component'; |
||||||
|
import { IconContext } from 'react-icons'; |
||||||
|
import { FaEraser, FaTimesCircle } from 'react-icons/fa'; |
||||||
|
import { useDispatch, useSelector } from 'react-redux'; |
||||||
|
import ICorresponsalTerceros from '../../../Interfaces/Corresponsales/ICorresponsalFacturasTerceros'; |
||||||
|
import { RootState } from '../../../store/store'; |
||||||
|
import { MsgInformativo } from '../../Utils/Toast/msgInformativo'; |
||||||
|
import CFac3DataService from '../../../Services/Corresponsalias/Corresponsales.FacturasTerceros.services'; |
||||||
|
import { ControlledInput } from './ControlledInput/ControlledInput'; |
||||||
|
import { |
||||||
|
addCorresponsalesFacturasTerceros, |
||||||
|
deleteCorresponsalesFacturasTerceros, |
||||||
|
} from '../../../store/features/Corresponsales/CorresponsalesFacturasTercerosSlice'; |
||||||
|
import { CatProveedores } from '../CatProveedores/CatProveedores'; |
||||||
|
import { FcManager } from 'react-icons/fc'; |
||||||
|
import { resourceUsage } from 'process'; |
||||||
|
|
||||||
|
interface IProps { |
||||||
|
IDTrafico: number; |
||||||
|
IDCorresponsal: number; |
||||||
|
canDelete: boolean; |
||||||
|
} |
||||||
|
|
||||||
|
export const PagosTerceros: FC<IProps> = (props) => { |
||||||
|
const dispatch = useDispatch(); |
||||||
|
const mCFacturas3 = useSelector( |
||||||
|
(state: RootState) => state.CF3rosData.CorresponsalesFacturasTerceros |
||||||
|
); |
||||||
|
const mProveedores = useSelector( |
||||||
|
(state: RootState) => state.CatProveedores.CatalogoProveedores |
||||||
|
); |
||||||
|
const [IDProveedor, setIDProveedor] = useState(-1); |
||||||
|
const [DTData, setDTData] = useState<ICorresponsalTerceros[]>([]); |
||||||
|
const [ShowModal, setShowModal] = useState(false); |
||||||
|
const [Factura, setFactura] = useState(''); |
||||||
|
const [IDFactura, setIDFactura] = useState(0); |
||||||
|
const [header, setHeader] = useState(''); |
||||||
|
const [msgColor, setMsgColor] = React.useState('primary'); |
||||||
|
const [show, setShowMsg] = useState(false); |
||||||
|
const [msg, setMsg] = useState(''); |
||||||
|
const [MsgTime, setMsgTime] = useState(4000); |
||||||
|
const [DialogTabs, setDialogTabs] = useState(false); |
||||||
|
const [msgDialog, setMsgDialog] = useState(false); |
||||||
|
const [ClasificacionProveedor, setClasificacionProveedor] = useState(1); |
||||||
|
|
||||||
|
const columnsFacturas3 = [ |
||||||
|
{ |
||||||
|
name: 'id', |
||||||
|
width: '10%', |
||||||
|
selector: (row: ICorresponsalTerceros) => row.id, |
||||||
|
sortable: true, |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: 'Factura', |
||||||
|
width: '75%', |
||||||
|
cell: (row: ICorresponsalTerceros) => { |
||||||
|
return <ControlledInput row={row} disabled={false} mode={2} />; |
||||||
|
}, |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: 'Elimina', |
||||||
|
cell: (row: ICorresponsalTerceros) => ( |
||||||
|
<div |
||||||
|
style={{ |
||||||
|
textAlign: 'center', |
||||||
|
cursor: 'pointer', |
||||||
|
visibility: props.canDelete ? 'visible' : 'hidden', |
||||||
|
}} |
||||||
|
onClick={() => { |
||||||
|
setIDFactura(row.id); |
||||||
|
setFactura(row.factura); |
||||||
|
setDialogTabs(true); |
||||||
|
}} |
||||||
|
> |
||||||
|
<IconContext.Provider value={{ color: 'red', size: '25px' }}> |
||||||
|
<FaTimesCircle /> |
||||||
|
</IconContext.Provider> |
||||||
|
</div> |
||||||
|
), |
||||||
|
}, |
||||||
|
]; |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
CFac3DataService.getAll(props.IDTrafico) |
||||||
|
.then((response) => { |
||||||
|
setDTData(response.data); |
||||||
|
}) |
||||||
|
.catch((e: Error) => { |
||||||
|
setHeader('Error'); |
||||||
|
setMsg('Ocurrio un error: ' + e); |
||||||
|
setShowMsg(true); |
||||||
|
return; |
||||||
|
}); |
||||||
|
mProveedores.length > 0 |
||||||
|
? setIDProveedor(mProveedores[0].id) |
||||||
|
: setIDProveedor(0); |
||||||
|
}, []); |
||||||
|
|
||||||
|
const saveForm = () => { |
||||||
|
if (IDProveedor === 0) { |
||||||
|
setHeader('Error'); |
||||||
|
setMsg('Para poder continuar, por favor, seleccione el proveedor'); |
||||||
|
setShowMsg(true); |
||||||
|
return false; |
||||||
|
} |
||||||
|
if (Factura.length === 0) { |
||||||
|
setHeader('Error'); |
||||||
|
setMsg('Para poder continuar, por favor, proporcione la factura'); |
||||||
|
setShowMsg(true); |
||||||
|
return false; |
||||||
|
} |
||||||
|
const data: ICorresponsalTerceros = { |
||||||
|
id: IDFactura, |
||||||
|
factura: Factura, |
||||||
|
idTrafico: props.IDTrafico, |
||||||
|
idProveedor: IDProveedor, |
||||||
|
}; |
||||||
|
CFac3DataService.Append(data) |
||||||
|
.then((response) => { |
||||||
|
if (response.status === 200) { |
||||||
|
setHeader('Informativo'); |
||||||
|
setMsg(response.data.respuesta); |
||||||
|
setShowMsg(true); |
||||||
|
setDialogTabs(false); |
||||||
|
if (data.id === 0) |
||||||
|
dispatch(addCorresponsalesFacturasTerceros(response.data.registro)); |
||||||
|
} |
||||||
|
}) |
||||||
|
.catch((error: any) => { |
||||||
|
if (error.response) { |
||||||
|
setHeader('Error: No se permite duplicidad'); |
||||||
|
setMsgColor('warning'); |
||||||
|
setMsgTime(10000); |
||||||
|
setMsg( |
||||||
|
error.response.data.respuesta + |
||||||
|
' en la factura: ' + |
||||||
|
error.response.data.registro.factura + |
||||||
|
' en el trafico: CG' + |
||||||
|
error.response.data.registro.idTrafico |
||||||
|
); |
||||||
|
setShowMsg(true); |
||||||
|
return; |
||||||
|
} |
||||||
|
}); |
||||||
|
}; |
||||||
|
|
||||||
|
const deleteItem = () => { |
||||||
|
CFac3DataService.Delete(IDFactura) |
||||||
|
.then((response) => { |
||||||
|
if (response.status === 200) { |
||||||
|
setHeader('Informativo'); |
||||||
|
setMsg(response.data.respuesta); |
||||||
|
setShowMsg(true); |
||||||
|
setDialogTabs(false); |
||||||
|
dispatch(deleteCorresponsalesFacturasTerceros(IDFactura)); |
||||||
|
return; |
||||||
|
} |
||||||
|
}) |
||||||
|
.catch((e: Error) => { |
||||||
|
setHeader('Error'); |
||||||
|
setMsg('Ocurrio un error: ' + e); |
||||||
|
setShowMsg(true); |
||||||
|
return; |
||||||
|
}); |
||||||
|
}; |
||||||
|
|
||||||
|
const cleanForm = () => { |
||||||
|
setFactura(''); |
||||||
|
setIDFactura(0); |
||||||
|
}; |
||||||
|
|
||||||
|
return ( |
||||||
|
<div> |
||||||
|
<Card style={{}}> |
||||||
|
<Card.Body> |
||||||
|
<Card.Subtitle className='mb-2 text-muted'> |
||||||
|
<Row |
||||||
|
style={{ paddingBottom: '5', paddingTop: '15' }} |
||||||
|
className={props.canDelete ? 'visible' : 'invisible heightZero'} |
||||||
|
> |
||||||
|
<Col |
||||||
|
xs={1} |
||||||
|
style={{ |
||||||
|
textAlign: 'right', |
||||||
|
paddingTop: '5px', |
||||||
|
cursor: 'pointer', |
||||||
|
}} |
||||||
|
onClick={() => { |
||||||
|
cleanForm(); |
||||||
|
}} |
||||||
|
> |
||||||
|
<IconContext.Provider value={{ color: 'orange', size: '25px' }}> |
||||||
|
<FaEraser /> |
||||||
|
</IconContext.Provider> |
||||||
|
</Col> |
||||||
|
<Col> |
||||||
|
<Form.Control |
||||||
|
type='hidden' |
||||||
|
id='IdItem' |
||||||
|
size='sm' |
||||||
|
value={IDFactura} |
||||||
|
placeholder='Contenedor' |
||||||
|
disabled={true} |
||||||
|
/> |
||||||
|
</Col> |
||||||
|
<Col xs={2}> |
||||||
|
{/* <Form.Control |
||||||
|
type='text' |
||||||
|
id='FacturaTerceros' |
||||||
|
size='sm' |
||||||
|
value={Factura} |
||||||
|
placeholder='Factura 3ros' |
||||||
|
pattern='[a-zA-Z-0-9 ]*' |
||||||
|
onChange={(e) => setFactura((v) => (e.target.validity.valid ? e.target.value : v))} |
||||||
|
/> */} |
||||||
|
<input |
||||||
|
type='text' |
||||||
|
className='form-control genericSelect' |
||||||
|
name='Factura' |
||||||
|
id='Factura' |
||||||
|
style={{ height: '30px' }} |
||||||
|
value={Factura} |
||||||
|
placeholder='Factura' |
||||||
|
onChange={(e) => { |
||||||
|
setFactura(e.target.value); |
||||||
|
}} |
||||||
|
/> |
||||||
|
</Col> |
||||||
|
<Col xs={5}> |
||||||
|
<Form.Control |
||||||
|
as='select' |
||||||
|
id='CmbIDProveedor' |
||||||
|
onChange={(e) => { |
||||||
|
setIDProveedor(parseInt(e.target.value)); |
||||||
|
}} |
||||||
|
className='form-select form-select-sm' |
||||||
|
value={IDProveedor} |
||||||
|
> |
||||||
|
{mProveedores |
||||||
|
? mProveedores |
||||||
|
.filter(function (row) { |
||||||
|
return ( |
||||||
|
row.clasificacion === ClasificacionProveedor || |
||||||
|
row.id === 0 |
||||||
|
); |
||||||
|
}) |
||||||
|
.map((item, index) => { |
||||||
|
return ( |
||||||
|
<option value={item.id} key={item.id}> |
||||||
|
{item.nombre} |
||||||
|
</option> |
||||||
|
); |
||||||
|
}) |
||||||
|
: ''} |
||||||
|
</Form.Control> |
||||||
|
</Col> |
||||||
|
<Col xs={1} style={{ cursor: 'pointer' }}> |
||||||
|
<Button |
||||||
|
variant='primary' |
||||||
|
size='sm' |
||||||
|
onClick={() => { |
||||||
|
setShowModal(true); |
||||||
|
}} |
||||||
|
> |
||||||
|
<IconContext.Provider value={{ color: 'blue', size: '25px' }}> |
||||||
|
<FcManager /> |
||||||
|
</IconContext.Provider> |
||||||
|
</Button> |
||||||
|
</Col> |
||||||
|
<Col xs={1}></Col> |
||||||
|
<Col xs={1}> |
||||||
|
<Button |
||||||
|
id='BtnSave' |
||||||
|
variant='primary' |
||||||
|
size='sm' |
||||||
|
onClick={() => { |
||||||
|
saveForm(); |
||||||
|
}} |
||||||
|
> |
||||||
|
Agregar |
||||||
|
</Button> |
||||||
|
</Col> |
||||||
|
<Col> </Col> |
||||||
|
</Row> |
||||||
|
</Card.Subtitle> |
||||||
|
<DataTable |
||||||
|
noHeader |
||||||
|
defaultSortFieldId={'id'} |
||||||
|
defaultSortAsc={true} |
||||||
|
pagination |
||||||
|
highlightOnHover |
||||||
|
columns={columnsFacturas3} |
||||||
|
data={mCFacturas3.filter(function (el) { |
||||||
|
return el.id > 0 && el.idTrafico === props.IDTrafico; |
||||||
|
})} |
||||||
|
/> |
||||||
|
</Card.Body> |
||||||
|
</Card> |
||||||
|
<MsgInformativo |
||||||
|
show={show} |
||||||
|
msg={msg} |
||||||
|
header={header} |
||||||
|
msgColor={msgColor} |
||||||
|
time={MsgTime} |
||||||
|
closeToast={() => { |
||||||
|
setShowMsg(false); |
||||||
|
}} |
||||||
|
/> |
||||||
|
<Modal |
||||||
|
show={DialogTabs} |
||||||
|
onHide={() => { |
||||||
|
setDialogTabs(false); |
||||||
|
}} |
||||||
|
size='sm' |
||||||
|
> |
||||||
|
<Modal.Body> |
||||||
|
<Alert variant='primary'> |
||||||
|
<b>¿Esta seguro de eliminar?</b> |
||||||
|
<br /> |
||||||
|
<h5> {Factura} </h5> |
||||||
|
</Alert> |
||||||
|
</Modal.Body> |
||||||
|
<Modal.Footer> |
||||||
|
<Row> |
||||||
|
<Col xs={6} style={{ textAlign: 'left', paddingRight: '100px' }}> |
||||||
|
<Button |
||||||
|
variant='danger' |
||||||
|
onClick={deleteItem} |
||||||
|
size='sm' |
||||||
|
style={{ paddingRight: '20px', paddingLeft: '20px' }} |
||||||
|
> |
||||||
|
Si |
||||||
|
</Button> |
||||||
|
</Col> |
||||||
|
<Col xs={6} style={{ textAlign: 'right' }}> |
||||||
|
<Button |
||||||
|
variant='secondary' |
||||||
|
onClick={() => { |
||||||
|
setDialogTabs(false); |
||||||
|
}} |
||||||
|
size='sm' |
||||||
|
> |
||||||
|
Cerrar |
||||||
|
</Button> |
||||||
|
</Col> |
||||||
|
</Row> |
||||||
|
</Modal.Footer> |
||||||
|
</Modal> |
||||||
|
<Modal |
||||||
|
show={ShowModal} |
||||||
|
onHide={() => { |
||||||
|
setShowModal(false); |
||||||
|
}} |
||||||
|
size='sm' |
||||||
|
dialogClassName='modal-50w' |
||||||
|
> |
||||||
|
<Modal.Body> |
||||||
|
<CatProveedores canDelete={true} clasificacion={1} /> |
||||||
|
</Modal.Body> |
||||||
|
</Modal> |
||||||
|
</div> |
||||||
|
); |
||||||
|
}; |
||||||
@ -0,0 +1,308 @@ |
|||||||
|
import React, { FC, useEffect, useState } from "react"; |
||||||
|
import { Button, Card, Col, Container, Form, Row } from "react-bootstrap"; |
||||||
|
import * as CurrencyFormat from "react-currency-format"; |
||||||
|
import ICorresponsalPartidas from "../../../../Interfaces/Corresponsales/ICorresponsalPedimentoPartidas"; |
||||||
|
import { MsgInformativo } from "../../../Utils/Toast/msgInformativo"; |
||||||
|
import CPartidasService from "../../../../Services/Corresponsalias/Corresponsales.Trafico.Pedimento.Partidas.Services"; |
||||||
|
import { useDispatch, useSelector } from "react-redux"; |
||||||
|
import { updateCorresponsalesPartidas } from "../../../../store/features/Corresponsales/CorresponsalesPartidasSlice"; |
||||||
|
import { RootState } from "../../../../store/store"; |
||||||
|
|
||||||
|
interface IProps { |
||||||
|
IDTrafico: number; |
||||||
|
IDPartida: number; |
||||||
|
} |
||||||
|
|
||||||
|
export const DialogBox: FC<IProps> = (props) => { |
||||||
|
const dispatch = useDispatch(); |
||||||
|
const mCFacturas = useSelector( |
||||||
|
(state: RootState) => state.CFData.CorresponsalesFacturas |
||||||
|
); |
||||||
|
const mCatProveedores = useSelector( |
||||||
|
(state: RootState) => state.CatProveedores.CatalogoProveedores |
||||||
|
); |
||||||
|
const mCPartidas = useSelector( |
||||||
|
(state: RootState) => state.CPartidas.CorresponsalesPartidas |
||||||
|
); |
||||||
|
const [Factura, setFactura] = useState(""); |
||||||
|
const [IDFactura, setIDFactura] = useState(0); |
||||||
|
const [IDPartida, setIDPartida] = useState(0); |
||||||
|
const [Proveedor, setProveedor] = useState(""); |
||||||
|
const [IDProveedor, setIDProveedor] = useState(0); |
||||||
|
const [DescripcionMaterial, setDescripcionMaterial] = useState(""); |
||||||
|
const [FraccionArancelaria, setFraccionArancelaria] = useState(""); |
||||||
|
const [ValorAduana, setValorAduana] = useState(0); |
||||||
|
const [DTA, setDTA] = useState(0); |
||||||
|
const [IGI, setIGI] = useState(0); |
||||||
|
const [IEPS, setIEPS] = useState(0); |
||||||
|
const [header, setHeader] = useState(""); |
||||||
|
// const [msgColor, setMsgColor] = React.useState('primary')
|
||||||
|
const [show, setShowMsg] = useState(false); |
||||||
|
const [msg, setMsg] = useState(""); |
||||||
|
const msgColor = "primary"; |
||||||
|
|
||||||
|
const saveForm = () => { |
||||||
|
const data: ICorresponsalPartidas = { |
||||||
|
id: IDPartida, |
||||||
|
idTrafico: props.IDTrafico, |
||||||
|
partida: 0, |
||||||
|
idFactura: IDFactura, |
||||||
|
factura: Factura, |
||||||
|
proveedor: Proveedor, |
||||||
|
descripcionMaterial: DescripcionMaterial, |
||||||
|
fraccionArancelaria: FraccionArancelaria, |
||||||
|
valorAduana: ValorAduana, |
||||||
|
dta: DTA, |
||||||
|
igi: IGI, |
||||||
|
ieps: IEPS, |
||||||
|
activo: 1, |
||||||
|
}; |
||||||
|
if (Factura.length < 4) { |
||||||
|
setHeader("Error"); |
||||||
|
setMsg("Proporcione la factura"); |
||||||
|
setShowMsg(true); |
||||||
|
return; |
||||||
|
} |
||||||
|
if (Proveedor.length < 4) { |
||||||
|
setHeader("Error"); |
||||||
|
setMsg("Proporcione el proveedor"); |
||||||
|
setShowMsg(true); |
||||||
|
return; |
||||||
|
} |
||||||
|
if (DescripcionMaterial.length < 4) { |
||||||
|
setHeader("Error"); |
||||||
|
setMsg("Proporcione la descripcion del material"); |
||||||
|
setShowMsg(true); |
||||||
|
return; |
||||||
|
} |
||||||
|
if (FraccionArancelaria.length < 4) { |
||||||
|
setHeader("Error"); |
||||||
|
setMsg("Proporcione la fraccion arancelaria"); |
||||||
|
setShowMsg(true); |
||||||
|
return; |
||||||
|
} |
||||||
|
if (ValorAduana === 0) { |
||||||
|
setHeader("Error"); |
||||||
|
setMsg("Proporcione el valor aduana"); |
||||||
|
setShowMsg(true); |
||||||
|
return; |
||||||
|
} |
||||||
|
console.log(JSON.stringify(data)); |
||||||
|
CPartidasService.Append(data) |
||||||
|
.then((response) => { |
||||||
|
dispatch(updateCorresponsalesPartidas(response.data)); |
||||||
|
setHeader("Informativo"); |
||||||
|
setMsg("El registro se guardado exitosamente!"); |
||||||
|
setShowMsg(true); |
||||||
|
}) |
||||||
|
.catch((e: Error) => { |
||||||
|
setHeader("Error"); |
||||||
|
setMsg("Ocurrio un error: " + e); |
||||||
|
setShowMsg(true); |
||||||
|
return; |
||||||
|
}); |
||||||
|
}; |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
const dataFactura = mCFacturas.filter((item) => item.id === IDFactura); |
||||||
|
setFactura(dataFactura[0].factura); |
||||||
|
setIDProveedor(dataFactura[0].proveedor); |
||||||
|
const dataProveedor = mCatProveedores.filter( |
||||||
|
(item) => item.id === dataFactura[0].proveedor |
||||||
|
); |
||||||
|
setProveedor(dataProveedor[0].nombre); |
||||||
|
}, [IDFactura, mCFacturas, mCatProveedores]); |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
const data = mCPartidas.filter((item) => item.id === props.IDPartida); |
||||||
|
if (data[0]) { |
||||||
|
setIDPartida(data[0].id); |
||||||
|
setIDFactura(data[0].idFactura); |
||||||
|
setFactura(data[0].factura); |
||||||
|
setDescripcionMaterial(data[0].descripcionMaterial); |
||||||
|
setProveedor(data[0].proveedor); |
||||||
|
setDTA(data[0].dta); |
||||||
|
setIGI(data[0].igi); |
||||||
|
setIEPS(data[0].ieps); |
||||||
|
setFraccionArancelaria(data[0].fraccionArancelaria); |
||||||
|
setValorAduana(data[0].valorAduana); |
||||||
|
} |
||||||
|
}, [props.IDPartida, mCPartidas]); |
||||||
|
|
||||||
|
return ( |
||||||
|
<div> |
||||||
|
<Card |
||||||
|
style={{ |
||||||
|
backgroundColor: "#F1F9FE", |
||||||
|
paddingLeft: "10px", |
||||||
|
paddingRight: "10px", |
||||||
|
paddingTop: "5px", |
||||||
|
paddingBottom: "5px", |
||||||
|
}} |
||||||
|
> |
||||||
|
<Container fluid="md"> |
||||||
|
<Row style={{ paddingTop: "15px" }}> |
||||||
|
<Col xs={2}>Factura</Col> |
||||||
|
<Col xs={3}> |
||||||
|
{/* <Form.Control |
||||||
|
type='text' |
||||||
|
id='Factura' |
||||||
|
size='sm' |
||||||
|
value={Factura} |
||||||
|
onChange={(e) => { |
||||||
|
setFactura(e.target.value) |
||||||
|
}} |
||||||
|
/> */} |
||||||
|
<Form.Control |
||||||
|
id="CmbFacturas" |
||||||
|
as="select" |
||||||
|
onChange={(e) => { |
||||||
|
setIDFactura(parseInt(e.target.value)); |
||||||
|
}} |
||||||
|
value={IDFactura} |
||||||
|
className="form-select form-select-sm" |
||||||
|
> |
||||||
|
{mCFacturas |
||||||
|
? mCFacturas.map((item, index) => { |
||||||
|
return item.idTrafico === props.IDTrafico ? ( |
||||||
|
<option value={item.id}>{item.factura}</option> |
||||||
|
) : ( |
||||||
|
<option value="0">-Seleccione-</option> |
||||||
|
); |
||||||
|
}) |
||||||
|
: ""} |
||||||
|
</Form.Control> |
||||||
|
</Col> |
||||||
|
<Col xs={5}></Col> |
||||||
|
<Col> |
||||||
|
<Button |
||||||
|
id="BtnSavePartida" |
||||||
|
variant="primary" |
||||||
|
onClick={() => { |
||||||
|
saveForm(); |
||||||
|
}} |
||||||
|
> |
||||||
|
Guardar |
||||||
|
</Button> |
||||||
|
</Col> |
||||||
|
</Row> |
||||||
|
<Row style={{ paddingTop: "15px" }}> |
||||||
|
<Col xs={2}>Proveedor</Col> |
||||||
|
<Col xs={10}> |
||||||
|
<Form.Control |
||||||
|
type="text" |
||||||
|
id="Proveedor" |
||||||
|
size="sm" |
||||||
|
value={Proveedor} |
||||||
|
onChange={(e) => { |
||||||
|
setProveedor(e.target.value); |
||||||
|
}} |
||||||
|
disabled={true} |
||||||
|
/> |
||||||
|
</Col> |
||||||
|
</Row> |
||||||
|
<Row style={{ paddingTop: "15px" }}> |
||||||
|
<Col xs={2}>Descripcion del material</Col> |
||||||
|
<Col> |
||||||
|
<Form.Control |
||||||
|
rows={4} |
||||||
|
as="textarea" |
||||||
|
id="DescripcionMaterial" |
||||||
|
value={DescripcionMaterial} |
||||||
|
size="sm" |
||||||
|
onChange={(e) => { |
||||||
|
setDescripcionMaterial(e.target.value); |
||||||
|
}} |
||||||
|
/> |
||||||
|
</Col> |
||||||
|
</Row> |
||||||
|
<Row style={{ paddingTop: "15px" }}> |
||||||
|
<Col xs={3}>Fraccion arancelaria</Col> |
||||||
|
<Col xs={3}> |
||||||
|
<Form.Control |
||||||
|
type="text" |
||||||
|
id="FraccionArancelaria" |
||||||
|
size="sm" |
||||||
|
value={FraccionArancelaria} |
||||||
|
onChange={(e) => { |
||||||
|
setFraccionArancelaria(e.target.value); |
||||||
|
}} |
||||||
|
/> |
||||||
|
</Col> |
||||||
|
<Col xs={2}>Valor aduana</Col> |
||||||
|
<Col xs={3}> |
||||||
|
<CurrencyFormat |
||||||
|
id="ValorAduana" |
||||||
|
value={ValorAduana} |
||||||
|
thousandSeparator={true} |
||||||
|
placeholder="ValorAduana" |
||||||
|
onValueChange={(values: any) => { |
||||||
|
const { value } = values; |
||||||
|
setValorAduana(value); |
||||||
|
}} |
||||||
|
/> |
||||||
|
</Col> |
||||||
|
</Row> |
||||||
|
<Row style={{ paddingTop: "15px" }}> |
||||||
|
<Col xs={1} style={{ textAlign: "right" }}> |
||||||
|
DTA |
||||||
|
</Col> |
||||||
|
<Col xs={2}> |
||||||
|
<CurrencyFormat |
||||||
|
id="CDTA" |
||||||
|
placeholder="DTA" |
||||||
|
value={DTA} |
||||||
|
thousandSeparator={true} |
||||||
|
onValueChange={(values: any) => { |
||||||
|
const { value } = values; |
||||||
|
setDTA(value.length === 0 ? 0 : value); |
||||||
|
}} |
||||||
|
/> |
||||||
|
</Col> |
||||||
|
<Col xs={1}> </Col> |
||||||
|
<Col xs={1} style={{ textAlign: "right" }}> |
||||||
|
IGI |
||||||
|
</Col> |
||||||
|
<Col xs={2}> |
||||||
|
<CurrencyFormat |
||||||
|
id="CIGI" |
||||||
|
value={IGI} |
||||||
|
thousandSeparator={true} |
||||||
|
placeholder="IGI" |
||||||
|
onValueChange={(values: any) => { |
||||||
|
const { value } = values; |
||||||
|
setIGI(value); |
||||||
|
}} |
||||||
|
/> |
||||||
|
</Col> |
||||||
|
<Col xs={1}> </Col> |
||||||
|
<Col xs={1} style={{ textAlign: "right" }}> |
||||||
|
IEPS |
||||||
|
</Col> |
||||||
|
<Col xs={2}> |
||||||
|
<CurrencyFormat |
||||||
|
id="CIEPS" |
||||||
|
value={IEPS} |
||||||
|
thousandSeparator={true} |
||||||
|
placeholder="IEPS" |
||||||
|
onValueChange={(values: any) => { |
||||||
|
const { value } = values; |
||||||
|
setIEPS(value); |
||||||
|
}} |
||||||
|
/> |
||||||
|
</Col> |
||||||
|
</Row> |
||||||
|
</Container> |
||||||
|
</Card> |
||||||
|
<MsgInformativo |
||||||
|
show={show} |
||||||
|
msg={msg} |
||||||
|
header={header} |
||||||
|
msgColor={msgColor} |
||||||
|
closeToast={() => { |
||||||
|
setShowMsg(false); |
||||||
|
}} |
||||||
|
/> |
||||||
|
</div> |
||||||
|
); |
||||||
|
}; |
||||||
@ -0,0 +1,269 @@ |
|||||||
|
import React, { FC, useState } from 'react' |
||||||
|
import { Alert, Button, Card, Col, Modal, Row } from 'react-bootstrap' |
||||||
|
import ICorresponsalPartidas from '../../../Interfaces/Corresponsales/ICorresponsalPedimentoPartidas' |
||||||
|
import { MsgInformativo } from '../../Utils/Toast/msgInformativo' |
||||||
|
import CPartidasService from '../../../Services/Corresponsalias/Corresponsales.Trafico.Pedimento.Partidas.Services' |
||||||
|
import { useDispatch, useSelector } from 'react-redux' |
||||||
|
import DataTable from 'react-data-table-component' |
||||||
|
import { IconContext } from 'react-icons' |
||||||
|
import { BsFillPencilFill, BsFillTrashFill } from 'react-icons/bs' |
||||||
|
import { RootState } from '../../../store/store' |
||||||
|
import { DialogBox } from './Dialog/DialogBox' |
||||||
|
import { deleteCorresponsalesPartidas } from '../../../store/features/Corresponsales/CorresponsalesPartidasSlice' |
||||||
|
|
||||||
|
interface IProps { |
||||||
|
IDTrafico: number |
||||||
|
canEdit: boolean |
||||||
|
} |
||||||
|
|
||||||
|
export const Partidas: FC<IProps> = (props) => { |
||||||
|
const dispatch = useDispatch() |
||||||
|
const [Depto, setDepto] = useState(() => { |
||||||
|
const stickyValue = window.localStorage.getItem('Departamento') |
||||||
|
return stickyValue !== null ? JSON.parse(stickyValue) : '' |
||||||
|
}) |
||||||
|
const [ShowModal, setShowModal] = useState(false) |
||||||
|
const [MsgDialogDelete, setMsgDialogDelete] = useState(false) |
||||||
|
const [IDPartida, setIDPartida] = useState(0) |
||||||
|
const [Factura, setFactura] = useState('') |
||||||
|
const [Descripcion, setDescripcion] = useState('') |
||||||
|
const [header, setHeader] = useState('') |
||||||
|
const [show, setShowMsg] = useState(false) |
||||||
|
const [msg, setMsg] = useState('') |
||||||
|
// const [Info, setInfo] = useState<ICorresponsalPartidas>()
|
||||||
|
const mCPartidas = useSelector( |
||||||
|
(state: RootState) => state.CPartidas.CorresponsalesPartidas |
||||||
|
) |
||||||
|
const msgColor = 'primary' |
||||||
|
const dataColPartidas = [ |
||||||
|
{ |
||||||
|
name: 'Partida', |
||||||
|
width: '90px', |
||||||
|
selector: (row: ICorresponsalPartidas) => row.partida, |
||||||
|
sortable: true |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: 'Factura', |
||||||
|
width: '100px', |
||||||
|
selector: (row: ICorresponsalPartidas) => row.factura, |
||||||
|
sortable: true |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: 'Proveedor', |
||||||
|
center: true, |
||||||
|
width: '450px', |
||||||
|
selector: (row: ICorresponsalPartidas) => row.proveedor |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: 'Descripcion de material', |
||||||
|
center: true, |
||||||
|
width: '450px', |
||||||
|
selector: (row: ICorresponsalPartidas) => row.descripcionMaterial |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: 'Frac arancelaria', |
||||||
|
center: true, |
||||||
|
width: '120px', |
||||||
|
selector: (row: ICorresponsalPartidas) => row.fraccionArancelaria |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: 'Val aduana', |
||||||
|
center: true, |
||||||
|
width: '100px', |
||||||
|
selector: (row: ICorresponsalPartidas) => row.valorAduana |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: 'DTA', |
||||||
|
center: true, |
||||||
|
width: '70px', |
||||||
|
selector: (row: ICorresponsalPartidas) => row.dta |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: 'IGI', |
||||||
|
center: true, |
||||||
|
width: '70px', |
||||||
|
selector: (row: ICorresponsalPartidas) => row.igi |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: 'IEPS', |
||||||
|
center: true, |
||||||
|
width: '70px', |
||||||
|
selector: (row: ICorresponsalPartidas) => row.ieps |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: '', |
||||||
|
width: '130px', |
||||||
|
cell: (row: ICorresponsalPartidas) => ( |
||||||
|
<Row> |
||||||
|
<Col> |
||||||
|
<div |
||||||
|
style={{ |
||||||
|
textAlign: 'center', |
||||||
|
cursor: 'pointer', |
||||||
|
visibility: props.canEdit ? 'visible' : 'hidden' |
||||||
|
}} |
||||||
|
onClick={() => { |
||||||
|
loadData(row) |
||||||
|
}} |
||||||
|
> |
||||||
|
<IconContext.Provider value={{ color: 'blue', size: '20px' }}> |
||||||
|
<BsFillPencilFill /> |
||||||
|
</IconContext.Provider> |
||||||
|
</div> |
||||||
|
</Col> |
||||||
|
<Col> </Col> |
||||||
|
<Col> |
||||||
|
<div |
||||||
|
style={{ |
||||||
|
textAlign: 'center', |
||||||
|
cursor: 'pointer', |
||||||
|
visibility: props.canEdit ? 'visible' : 'hidden' |
||||||
|
}} |
||||||
|
onClick={() => { |
||||||
|
confirmDelete(row) |
||||||
|
}} |
||||||
|
> |
||||||
|
<IconContext.Provider value={{ color: 'red', size: '20px' }}> |
||||||
|
<BsFillTrashFill /> |
||||||
|
</IconContext.Provider> |
||||||
|
</div> |
||||||
|
</Col> |
||||||
|
</Row> |
||||||
|
) |
||||||
|
} |
||||||
|
] |
||||||
|
|
||||||
|
const loadData = (row: ICorresponsalPartidas) => { |
||||||
|
setIDPartida(row.id) |
||||||
|
setShowModal(true) |
||||||
|
} |
||||||
|
|
||||||
|
const confirmDelete = (row: ICorresponsalPartidas) => { |
||||||
|
setIDPartida(row.id) |
||||||
|
setFactura(row.factura) |
||||||
|
setDescripcion(row.descripcionMaterial) |
||||||
|
setMsgDialogDelete(true) |
||||||
|
} |
||||||
|
|
||||||
|
const deleteItem = () => { |
||||||
|
CPartidasService.Delete(IDPartida) |
||||||
|
.then((response) => { |
||||||
|
if (response.status === 200) { |
||||||
|
dispatch(deleteCorresponsalesPartidas(IDPartida)) |
||||||
|
setMsgDialogDelete(false) |
||||||
|
} |
||||||
|
}) |
||||||
|
.catch((e: Error) => { |
||||||
|
setHeader('Error') |
||||||
|
setMsg('Ocurrio un error: ' + e) |
||||||
|
setShowMsg(true) |
||||||
|
return |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
return ( |
||||||
|
<div> |
||||||
|
<Card |
||||||
|
style={{ |
||||||
|
backgroundColor: '#F1F9FE', |
||||||
|
paddingLeft: '10px', |
||||||
|
paddingRight: '10px', |
||||||
|
paddingTop: '5px', |
||||||
|
paddingBottom: '5px' |
||||||
|
}} |
||||||
|
> |
||||||
|
<Card.Title> |
||||||
|
<Row> |
||||||
|
<Col xs={11}> Partidas</Col> |
||||||
|
<Col> |
||||||
|
<Button |
||||||
|
style={{ |
||||||
|
visibility: Depto === 'Corresponsalias' ? 'visible' : 'hidden' |
||||||
|
}} |
||||||
|
variant="primary" |
||||||
|
onClick={() => { |
||||||
|
setIDPartida(0) |
||||||
|
setShowModal(true) |
||||||
|
}} |
||||||
|
> |
||||||
|
Agregar |
||||||
|
</Button> |
||||||
|
</Col> |
||||||
|
</Row> |
||||||
|
</Card.Title> |
||||||
|
<DataTable |
||||||
|
defaultSortFieldId={'id'} |
||||||
|
defaultSortAsc={true} |
||||||
|
pagination |
||||||
|
highlightOnHover |
||||||
|
columns={dataColPartidas} |
||||||
|
data={mCPartidas.filter((a) => { |
||||||
|
if (a.idTrafico === props.IDTrafico) { |
||||||
|
return a |
||||||
|
} |
||||||
|
})} |
||||||
|
/> |
||||||
|
</Card> |
||||||
|
<Modal |
||||||
|
show={ShowModal} |
||||||
|
onHide={() => { |
||||||
|
setShowModal(false) |
||||||
|
}} |
||||||
|
size={'sm'} |
||||||
|
dialogClassName={'modal-50w'} |
||||||
|
> |
||||||
|
<Modal.Body> |
||||||
|
<div style={{ height: '400px', overflow: 'scroll' }}> |
||||||
|
<DialogBox IDTrafico={props.IDTrafico} IDPartida={IDPartida} /> |
||||||
|
</div> |
||||||
|
</Modal.Body> |
||||||
|
</Modal> |
||||||
|
<Modal |
||||||
|
show={MsgDialogDelete} |
||||||
|
onHide={() => setMsgDialogDelete(false)} |
||||||
|
size="lg" |
||||||
|
> |
||||||
|
<Modal.Body> |
||||||
|
<Alert variant="primary"> |
||||||
|
<h5> |
||||||
|
Favor de confirmar |
||||||
|
<br /> |
||||||
|
<br /> |
||||||
|
¿Esta seguro de eliminar la factura: {Factura} : {Descripcion}? |
||||||
|
</h5> |
||||||
|
</Alert> |
||||||
|
</Modal.Body> |
||||||
|
<Modal.Footer> |
||||||
|
<Row> |
||||||
|
<Col xs={1}> |
||||||
|
<Button |
||||||
|
variant="secondary" |
||||||
|
onClick={() => setMsgDialogDelete(false)} |
||||||
|
size="sm" |
||||||
|
> |
||||||
|
Cerrar |
||||||
|
</Button> |
||||||
|
</Col> |
||||||
|
<Col xs={5} style={{ paddingLeft: '550px', paddingRight: '0px' }}> |
||||||
|
|
||||||
|
</Col> |
||||||
|
<Col xs={1}> |
||||||
|
<Button variant="danger" onClick={() => deleteItem()} size="sm"> |
||||||
|
Eliminar |
||||||
|
</Button> |
||||||
|
</Col> |
||||||
|
</Row> |
||||||
|
</Modal.Footer> |
||||||
|
</Modal> |
||||||
|
<MsgInformativo |
||||||
|
show={show} |
||||||
|
msg={msg} |
||||||
|
header={header} |
||||||
|
msgColor={msgColor} |
||||||
|
closeToast={() => { |
||||||
|
setShowMsg(false) |
||||||
|
}} |
||||||
|
/> |
||||||
|
</div> |
||||||
|
) |
||||||
|
} |
||||||
@ -0,0 +1,148 @@ |
|||||||
|
import React, { FC, useEffect, useState } from 'react'; |
||||||
|
import { MsgInformativo } from '../../../Utils/Toast/msgInformativo'; |
||||||
|
import { useDispatch, useSelector } from 'react-redux'; |
||||||
|
import { updateCorresponsalesFacturas } from '../../../../store/features/Corresponsales/CorresponsalesFacturasSlice'; |
||||||
|
import ICorresponsalFacturas from '../../../../Interfaces/Corresponsales/ICorresponsalFacturas'; |
||||||
|
import CorFacDataService from '../../../../Services/Corresponsalias/Corresponsales.Facturas.Services'; |
||||||
|
import { RootState } from '../../../../store/store'; |
||||||
|
import { Form } from 'react-bootstrap'; |
||||||
|
|
||||||
|
interface IProps { |
||||||
|
record: ICorresponsalFacturas; |
||||||
|
disabled?: boolean; |
||||||
|
mode: number; // 1: Number, 2: String
|
||||||
|
} |
||||||
|
|
||||||
|
export const ControlledInput: FC<IProps> = (props) => { |
||||||
|
const dispatch = useDispatch(); |
||||||
|
const mProveedores = useSelector( |
||||||
|
(state: RootState) => state.CatProveedores.CatalogoProveedores |
||||||
|
); |
||||||
|
const [id, setid] = useState(props.record.id); |
||||||
|
const [value, setValue] = useState(props.record.factura); |
||||||
|
const [IDProveedor, setIDProveedor] = useState(props.record.proveedor); |
||||||
|
const [ValorFacturaDls, setValorFacturaDls] = useState( |
||||||
|
props.record.valorFacturaDls |
||||||
|
); |
||||||
|
const [Pedido, setPedido] = useState(props.record.pedido); |
||||||
|
const [header, setHeader] = useState(''); |
||||||
|
const [msgColor, setMsgColor] = React.useState('primary'); |
||||||
|
const [show, setShowMsg] = useState(false); |
||||||
|
const [msg, setMsg] = useState(''); |
||||||
|
const [ClasificacionProveedor, setClasificacionProveedor] = useState(2); |
||||||
|
|
||||||
|
const onChangeFac = (event: any) => { |
||||||
|
setValue(event.target.value); |
||||||
|
}; |
||||||
|
|
||||||
|
const onChangeDls = (event: any) => { |
||||||
|
setValorFacturaDls(event.target.value); |
||||||
|
}; |
||||||
|
|
||||||
|
const onChangePed = (event: any) => { |
||||||
|
setPedido(event.target.value); |
||||||
|
}; |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
console.log(mProveedores); |
||||||
|
}, [mProveedores]); |
||||||
|
|
||||||
|
const handleKeyDown = (event: any, mode: number) => { |
||||||
|
if (event.key === 'Enter') { |
||||||
|
if (isNaN(event.target.value) && mode === 1) { |
||||||
|
alert('Valor no valido!'); |
||||||
|
return; |
||||||
|
} |
||||||
|
const data: ICorresponsalFacturas = { |
||||||
|
id: id, |
||||||
|
factura: value, |
||||||
|
idTrafico: props.record.idTrafico, |
||||||
|
valorFacturaDls: ValorFacturaDls, |
||||||
|
proveedor: IDProveedor, |
||||||
|
corresponsal: props.record.corresponsal, |
||||||
|
pedido: Pedido, |
||||||
|
code: 0, |
||||||
|
folioGEMCO: '', |
||||||
|
}; |
||||||
|
CorFacDataService.Append(data) |
||||||
|
.then((response) => { |
||||||
|
if (response.status == 200) { |
||||||
|
dispatch(updateCorresponsalesFacturas(response.data)); |
||||||
|
setHeader('Informativo'); |
||||||
|
setMsg('La informacion se guardo exitosamente'); |
||||||
|
setShowMsg(true); |
||||||
|
return; |
||||||
|
} |
||||||
|
}) |
||||||
|
.catch((e: Error) => { |
||||||
|
setHeader('Error'); |
||||||
|
setMsg('Ocurrio un error: ' + e); |
||||||
|
setShowMsg(true); |
||||||
|
return; |
||||||
|
}); |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
function changeValue(val: number) { |
||||||
|
setIDProveedor(val); |
||||||
|
} |
||||||
|
return ( |
||||||
|
<> |
||||||
|
<input |
||||||
|
value={value} |
||||||
|
onChange={onChangeFac} |
||||||
|
disabled={false} |
||||||
|
onKeyDown={(e) => handleKeyDown(e, 2)} |
||||||
|
style={{ width: '25%', textAlign: 'right' }} |
||||||
|
/> |
||||||
|
|
||||||
|
<input |
||||||
|
value={ValorFacturaDls} |
||||||
|
onChange={onChangeDls} |
||||||
|
disabled={false} |
||||||
|
onKeyDown={(e) => handleKeyDown(e, 1)} |
||||||
|
style={{ width: '20%', textAlign: 'right' }} |
||||||
|
/> |
||||||
|
|
||||||
|
<input |
||||||
|
value={Pedido} |
||||||
|
onChange={onChangePed} |
||||||
|
disabled={false} |
||||||
|
onKeyDown={(e) => handleKeyDown(e, 2)} |
||||||
|
style={{ width: '20%', textAlign: 'right' }} |
||||||
|
/> |
||||||
|
|
||||||
|
<Form.Control |
||||||
|
as='select' |
||||||
|
onChange={(f) => { |
||||||
|
changeValue(parseInt(f.target.value)); |
||||||
|
}} |
||||||
|
value={IDProveedor} |
||||||
|
className='form-select form-select-sm' |
||||||
|
> |
||||||
|
{mProveedores |
||||||
|
? mProveedores |
||||||
|
.filter(function (row) { |
||||||
|
return row.clasificacion === ClasificacionProveedor; |
||||||
|
}) |
||||||
|
.map((p) => { |
||||||
|
return ( |
||||||
|
<option value={p.id} key={p.id}> |
||||||
|
{p.nombre} |
||||||
|
</option> |
||||||
|
); |
||||||
|
}) |
||||||
|
: null} |
||||||
|
</Form.Control> |
||||||
|
<MsgInformativo |
||||||
|
show={show} |
||||||
|
msg={msg} |
||||||
|
header={header} |
||||||
|
msgColor={msgColor} |
||||||
|
closeToast={() => { |
||||||
|
setShowMsg(false); |
||||||
|
}} |
||||||
|
/> |
||||||
|
</> |
||||||
|
); |
||||||
|
}; |
||||||
@ -0,0 +1,426 @@ |
|||||||
|
import React, { FC, useEffect, useState } from 'react'; |
||||||
|
import { Alert, Button, Card, Col, Form, Modal, Row } from 'react-bootstrap'; |
||||||
|
import { IconContext } from 'react-icons'; |
||||||
|
import 'react-flexy-table/dist/index.css'; |
||||||
|
import FacDataService from '../../../Services/Corresponsalias/Corresponsales.Facturas.Services'; |
||||||
|
import { RootState } from '../../../store/store'; |
||||||
|
import { useDispatch, useSelector } from 'react-redux'; |
||||||
|
import { FcManager } from 'react-icons/fc'; |
||||||
|
import ICorresponsalFacturas from '../../../Interfaces/Corresponsales/ICorresponsalFacturas'; |
||||||
|
import { |
||||||
|
addCorresponsalesFacturas, |
||||||
|
deleteCorresponsalesFacturas, |
||||||
|
populateCorresponsalesFacturas, |
||||||
|
} from '../../../store/features/Corresponsales/CorresponsalesFacturasSlice'; |
||||||
|
import '../../../css/react-flexy-table.css'; |
||||||
|
import { MsgInformativo } from '../../Utils/Toast/msgInformativo'; |
||||||
|
import * as CurrencyFormat from 'react-currency-format'; |
||||||
|
import { CatProveedores } from '../CatProveedores/CatProveedores'; |
||||||
|
import { FaEraser, FaTimesCircle } from 'react-icons/fa'; |
||||||
|
import DataTable from 'react-data-table-component'; |
||||||
|
import { ControlledInput } from './ControlledInput/ControlledInput'; |
||||||
|
|
||||||
|
interface IProps { |
||||||
|
IDTrafico: number; |
||||||
|
IDCorresponsal: number; |
||||||
|
canDelete: boolean; |
||||||
|
} |
||||||
|
|
||||||
|
export const ProveedorFactura: FC<IProps> = (props) => { |
||||||
|
const mCFacturas = useSelector( |
||||||
|
(state: RootState) => state.CFData.CorresponsalesFacturas |
||||||
|
); |
||||||
|
const mProveedores = useSelector( |
||||||
|
(state: RootState) => state.CatProveedores.CatalogoProveedores |
||||||
|
); |
||||||
|
const dispatch = useDispatch(); |
||||||
|
const [ShowModal, setShowModal] = useState(false); |
||||||
|
const [IDFactura, setIDFactura] = useState(0); |
||||||
|
const [Factura, setFactura] = useState(''); |
||||||
|
const [ValorFacturaDls, setValorFacturaDls] = useState<number>(0); |
||||||
|
const [Pedido, setPedido] = useState(''); |
||||||
|
const [header, setHeader] = useState(''); |
||||||
|
const [show, setShowMsg] = useState(false); |
||||||
|
const [msg, setMsg] = useState(''); |
||||||
|
const [DialogTabs, setDialogTabs] = useState(false); |
||||||
|
const [IDProveedor, setIDProveedor] = useState(0); |
||||||
|
const MsgTime = 2000; |
||||||
|
const msgColor = 'primary'; |
||||||
|
const ClasificacionProveedor = 2; |
||||||
|
|
||||||
|
const TblHeader: React.FC = () => ( |
||||||
|
<table> |
||||||
|
<tr |
||||||
|
style={{ |
||||||
|
fontSize: '15px', |
||||||
|
fontWeight: 'bold', |
||||||
|
backgroundColor: '#FFFFFF', |
||||||
|
}} |
||||||
|
> |
||||||
|
<td width='140px' style={{ textAlign: 'center' }}> |
||||||
|
Factura |
||||||
|
</td> |
||||||
|
<td width='120px' style={{ textAlign: 'center' }}> |
||||||
|
Valor Dls |
||||||
|
</td> |
||||||
|
<td width='120px' style={{ textAlign: 'center' }}> |
||||||
|
Pedido |
||||||
|
</td> |
||||||
|
<td width='560px' style={{ textAlign: 'center' }}> |
||||||
|
Proveedor |
||||||
|
</td> |
||||||
|
</tr> |
||||||
|
</table> |
||||||
|
); |
||||||
|
|
||||||
|
const columnsFacturas = [ |
||||||
|
{ |
||||||
|
name: 'id', |
||||||
|
width: '10%', |
||||||
|
selector: (row: ICorresponsalFacturas) => row.id, |
||||||
|
sortable: true, |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: <TblHeader />, |
||||||
|
width: '75%', |
||||||
|
cell: (row: ICorresponsalFacturas) => { |
||||||
|
return <ControlledInput record={row} disabled={false} mode={2} />; |
||||||
|
}, |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: 'Elimina', |
||||||
|
cell: (row: ICorresponsalFacturas) => ( |
||||||
|
<div |
||||||
|
style={{ |
||||||
|
textAlign: 'center', |
||||||
|
cursor: 'pointer', |
||||||
|
visibility: props.canDelete ? 'visible' : 'hidden', |
||||||
|
}} |
||||||
|
onClick={() => { |
||||||
|
setIDFactura(row.id); |
||||||
|
setFactura(row.factura); |
||||||
|
setDialogTabs(true); |
||||||
|
}} |
||||||
|
> |
||||||
|
<IconContext.Provider value={{ color: 'red', size: '25px' }}> |
||||||
|
<FaTimesCircle /> |
||||||
|
</IconContext.Provider> |
||||||
|
</div> |
||||||
|
), |
||||||
|
}, |
||||||
|
]; |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
FacDataService.getAll(props.IDTrafico) |
||||||
|
.then((response) => { |
||||||
|
dispatch(populateCorresponsalesFacturas(response.data)); |
||||||
|
}) |
||||||
|
.catch((e: Error) => { |
||||||
|
setHeader('Error'); |
||||||
|
setMsg('Ocurrio un error: ' + e); |
||||||
|
setShowMsg(true); |
||||||
|
return; |
||||||
|
}); |
||||||
|
}, [props.IDTrafico, dispatch]); |
||||||
|
|
||||||
|
const cleanForm = () => { |
||||||
|
setFactura(''); |
||||||
|
setIDFactura(0); |
||||||
|
setIDProveedor(0); |
||||||
|
setValorFacturaDls(0); |
||||||
|
}; |
||||||
|
|
||||||
|
const saveForm = () => { |
||||||
|
if (Factura.length <= 3) { |
||||||
|
setHeader('Error'); |
||||||
|
setMsg('Proporcione la factura para poder continuar'); |
||||||
|
setShowMsg(true); |
||||||
|
setDialogTabs(false); |
||||||
|
return false; |
||||||
|
} |
||||||
|
if (ValorFacturaDls === 0) { |
||||||
|
setHeader('Error'); |
||||||
|
setMsg('Proporcione el valor en dlls de la factura para poder continuar'); |
||||||
|
setShowMsg(true); |
||||||
|
setDialogTabs(false); |
||||||
|
return false; |
||||||
|
} |
||||||
|
if (IDProveedor === 0) { |
||||||
|
setHeader('Error'); |
||||||
|
setMsg('Seleccione un proveedor para poder continuar'); |
||||||
|
setShowMsg(true); |
||||||
|
setDialogTabs(false); |
||||||
|
return false; |
||||||
|
} |
||||||
|
const data: ICorresponsalFacturas = { |
||||||
|
id: 0, |
||||||
|
factura: Factura, |
||||||
|
idTrafico: props.IDTrafico, |
||||||
|
valorFacturaDls: ValorFacturaDls, |
||||||
|
proveedor: IDProveedor, |
||||||
|
corresponsal: props.IDCorresponsal, |
||||||
|
pedido: Pedido, |
||||||
|
code: 0, |
||||||
|
folioGEMCO: '', |
||||||
|
}; |
||||||
|
FacDataService.Append(data) |
||||||
|
.then((response) => { |
||||||
|
if (response.status === 200) { |
||||||
|
setHeader('Informativo'); |
||||||
|
const respuesta: ICorresponsalFacturas = response.data; |
||||||
|
console.log(respuesta); |
||||||
|
if (respuesta.code && typeof respuesta.code === 'number') { |
||||||
|
const result = respuesta.code; |
||||||
|
if (result === 409) |
||||||
|
setMsg( |
||||||
|
`La factura [${response.data.factura}] de ese proveedor ya se han registrado previamente en el año en curso, lo encuentra en el folio [${response.data.folioGEMCO}]` |
||||||
|
); |
||||||
|
else { |
||||||
|
setMsg('La factura se agrego exitosamente '); |
||||||
|
if (data.id === 0) |
||||||
|
dispatch(addCorresponsalesFacturas(response.data)); |
||||||
|
} |
||||||
|
} |
||||||
|
setShowMsg(true); |
||||||
|
setDialogTabs(false); |
||||||
|
} |
||||||
|
}) |
||||||
|
.catch((e: Error) => { |
||||||
|
setHeader('Error'); |
||||||
|
setMsg('Ocurrio un error: ' + e); |
||||||
|
setShowMsg(true); |
||||||
|
return; |
||||||
|
}); |
||||||
|
}; |
||||||
|
|
||||||
|
const deleteItem = () => { |
||||||
|
FacDataService.Delete(IDFactura) |
||||||
|
.then((response) => { |
||||||
|
if (response.status === 200) { |
||||||
|
setHeader('Informativo'); |
||||||
|
setMsg('La factura se ha eliminado'); |
||||||
|
setShowMsg(true); |
||||||
|
setDialogTabs(false); |
||||||
|
dispatch(deleteCorresponsalesFacturas(IDFactura)); |
||||||
|
return; |
||||||
|
} |
||||||
|
}) |
||||||
|
.catch((e: Error) => { |
||||||
|
setHeader('Error'); |
||||||
|
setMsg('Ocurrio un error: ' + e); |
||||||
|
setShowMsg(true); |
||||||
|
return; |
||||||
|
}); |
||||||
|
}; |
||||||
|
|
||||||
|
return ( |
||||||
|
<div> |
||||||
|
<Card style={{}}> |
||||||
|
<Card.Body> |
||||||
|
<Card.Subtitle className='mb-2 text-muted'> |
||||||
|
<Row |
||||||
|
style={{ paddingBottom: '5', paddingTop: '15' }} |
||||||
|
className={props.canDelete ? 'visible' : 'invisible heightZero'} |
||||||
|
> |
||||||
|
<Col |
||||||
|
xs={1} |
||||||
|
style={{ |
||||||
|
textAlign: 'right', |
||||||
|
paddingTop: '5px', |
||||||
|
cursor: 'pointer', |
||||||
|
}} |
||||||
|
onClick={() => { |
||||||
|
cleanForm(); |
||||||
|
}} |
||||||
|
> |
||||||
|
<IconContext.Provider value={{ color: 'orange', size: '25px' }}> |
||||||
|
<FaEraser /> |
||||||
|
</IconContext.Provider> |
||||||
|
</Col> |
||||||
|
<Col xs='1'> |
||||||
|
<Form.Control |
||||||
|
type='text' |
||||||
|
id='Factura' |
||||||
|
size='sm' |
||||||
|
value={Factura} |
||||||
|
placeholder='Factura' |
||||||
|
pattern='[a-zA-Z-0-9 ]*' |
||||||
|
onChange={(e) => |
||||||
|
setFactura((v) => |
||||||
|
e.target.validity.valid ? e.target.value : v |
||||||
|
) |
||||||
|
} |
||||||
|
/> |
||||||
|
</Col> |
||||||
|
<Col xs='1'> |
||||||
|
<CurrencyFormat |
||||||
|
id='ValorFacturaDls' |
||||||
|
value={ValorFacturaDls} |
||||||
|
prefix={'$'} |
||||||
|
displayType={'input'} |
||||||
|
thousandSeparator={true} |
||||||
|
onValueChange={(values: any) => { |
||||||
|
const { value } = values; |
||||||
|
setValorFacturaDls(value); |
||||||
|
}} |
||||||
|
style={{ |
||||||
|
fontSize: '18px', |
||||||
|
backgroundColor: '#F5FFED', |
||||||
|
border: '2px solid #25D05B', |
||||||
|
width: '100px', |
||||||
|
textAlign: 'right', |
||||||
|
borderRadius: '10px', |
||||||
|
}} |
||||||
|
/> |
||||||
|
</Col> |
||||||
|
<Col xs={1}> |
||||||
|
<Form.Control |
||||||
|
type='text' |
||||||
|
id='Pedido' |
||||||
|
size='sm' |
||||||
|
value={Pedido} |
||||||
|
placeholder='Pedido' |
||||||
|
onChange={(e) => setPedido(e.target.value)} |
||||||
|
/> |
||||||
|
</Col> |
||||||
|
<Col xs={5}> |
||||||
|
<Form.Control |
||||||
|
id='IDProveedor' |
||||||
|
as='select' |
||||||
|
onChange={(e) => { |
||||||
|
setIDProveedor(parseInt(e.target.value)); |
||||||
|
}} |
||||||
|
className='form-select form-select-sm' |
||||||
|
value={IDProveedor} |
||||||
|
> |
||||||
|
<option>-Seleccione-</option> |
||||||
|
{mProveedores |
||||||
|
? mProveedores |
||||||
|
.filter(function (row) { |
||||||
|
return row.clasificacion === ClasificacionProveedor; |
||||||
|
}) |
||||||
|
.map((item, index) => { |
||||||
|
return ( |
||||||
|
<option value={item.id} key={item.id}> |
||||||
|
{item.nombre} |
||||||
|
</option> |
||||||
|
); |
||||||
|
}) |
||||||
|
: ''} |
||||||
|
</Form.Control> |
||||||
|
</Col> |
||||||
|
<Col xs={1} style={{ cursor: 'pointer' }}> |
||||||
|
<Button |
||||||
|
variant='primary' |
||||||
|
size='sm' |
||||||
|
onClick={() => { |
||||||
|
setShowModal(true); |
||||||
|
}} |
||||||
|
> |
||||||
|
<IconContext.Provider value={{ color: 'blue', size: '25px' }}> |
||||||
|
<FcManager /> |
||||||
|
</IconContext.Provider> |
||||||
|
</Button> |
||||||
|
</Col> |
||||||
|
<Col xs={1}></Col> |
||||||
|
<Col xs={1}> |
||||||
|
<Button |
||||||
|
id='BtnSave' |
||||||
|
variant='primary' |
||||||
|
size='sm' |
||||||
|
onClick={() => { |
||||||
|
saveForm(); |
||||||
|
}} |
||||||
|
> |
||||||
|
Agregar |
||||||
|
</Button> |
||||||
|
</Col> |
||||||
|
<Col> </Col> |
||||||
|
</Row> |
||||||
|
</Card.Subtitle> |
||||||
|
<DataTable |
||||||
|
/* noHeader */ |
||||||
|
fixedHeader={true} |
||||||
|
defaultSortFieldId={'id'} |
||||||
|
defaultSortAsc={true} |
||||||
|
fixedHeaderScrollHeight='400px' |
||||||
|
persistTableHead |
||||||
|
striped |
||||||
|
dense |
||||||
|
paginationPerPage={7} |
||||||
|
paginationRowsPerPageOptions={[7, 10, 14, 20, 21]} |
||||||
|
responsive |
||||||
|
pagination |
||||||
|
highlightOnHover |
||||||
|
columns={columnsFacturas} |
||||||
|
data={mCFacturas.filter(function (el) { |
||||||
|
return el.id > 0; |
||||||
|
})} |
||||||
|
/> |
||||||
|
</Card.Body> |
||||||
|
</Card> |
||||||
|
<MsgInformativo |
||||||
|
show={show} |
||||||
|
msg={msg} |
||||||
|
header={header} |
||||||
|
msgColor={msgColor} |
||||||
|
time={MsgTime} |
||||||
|
closeToast={() => { |
||||||
|
setShowMsg(false); |
||||||
|
}} |
||||||
|
/> |
||||||
|
<Modal |
||||||
|
show={DialogTabs} |
||||||
|
onHide={() => { |
||||||
|
setDialogTabs(false); |
||||||
|
}} |
||||||
|
size='sm' |
||||||
|
> |
||||||
|
<Modal.Body> |
||||||
|
<Alert variant='primary'> |
||||||
|
<b>¿Esta seguro de eliminar?</b> |
||||||
|
<br /> |
||||||
|
<h5> {Factura} </h5> |
||||||
|
</Alert> |
||||||
|
</Modal.Body> |
||||||
|
<Modal.Footer> |
||||||
|
<Row> |
||||||
|
<Col xs={6} style={{ textAlign: 'left', paddingRight: '100px' }}> |
||||||
|
<Button |
||||||
|
variant='danger' |
||||||
|
onClick={deleteItem} |
||||||
|
size='sm' |
||||||
|
style={{ paddingRight: '20px', paddingLeft: '20px' }} |
||||||
|
> |
||||||
|
Si |
||||||
|
</Button> |
||||||
|
</Col> |
||||||
|
<Col xs={6} style={{ textAlign: 'right' }}> |
||||||
|
<Button |
||||||
|
variant='secondary' |
||||||
|
onClick={() => { |
||||||
|
setDialogTabs(false); |
||||||
|
}} |
||||||
|
size='sm' |
||||||
|
> |
||||||
|
Cerrar |
||||||
|
</Button> |
||||||
|
</Col> |
||||||
|
</Row> |
||||||
|
</Modal.Footer> |
||||||
|
</Modal> |
||||||
|
<Modal |
||||||
|
show={ShowModal} |
||||||
|
onHide={() => { |
||||||
|
setShowModal(false); |
||||||
|
}} |
||||||
|
size='sm' |
||||||
|
dialogClassName='modal-50w' |
||||||
|
> |
||||||
|
<Modal.Body> |
||||||
|
<CatProveedores canDelete={true} clasificacion={2} /> |
||||||
|
</Modal.Body> |
||||||
|
</Modal> |
||||||
|
</div> |
||||||
|
); |
||||||
|
}; |
||||||
@ -0,0 +1,180 @@ |
|||||||
|
import React, { FC, useEffect, useState } from 'react' |
||||||
|
import { Alert, Button, Col, Modal, Row } from 'react-bootstrap' |
||||||
|
import DataTable from 'react-data-table-component' |
||||||
|
import { IconContext } from 'react-icons' |
||||||
|
import { FaCopy } from 'react-icons/fa' |
||||||
|
import ICorresponsalesRectificaciones from '../../../Interfaces/Corresponsales/ICorresponsalesRectificaciones' |
||||||
|
import RectiDataService from '../../../Services/Corresponsalias/Corresponsales.Trafico.Services' |
||||||
|
import { MsgInformativo } from '../../Utils/Toast/msgInformativo' |
||||||
|
|
||||||
|
interface IProps { |
||||||
|
IDTrafico: number |
||||||
|
changeIdTrafico: (newId: number) => void |
||||||
|
} |
||||||
|
|
||||||
|
export const Rectificaciones: FC<IProps> = (props) => { |
||||||
|
const [DTData, setDTData] = useState<ICorresponsalesRectificaciones[]>([]) |
||||||
|
const [id, setId] = useState(0) |
||||||
|
const [FolioGEMCO, setFolioGEMCO] = useState('') |
||||||
|
const [header, setHeader] = useState('') |
||||||
|
const [msgColor, setMsgColor] = React.useState('primary') |
||||||
|
const [show, setShowMsg] = useState(false) |
||||||
|
const [msg, setMsg] = useState('') |
||||||
|
const [DialogClone, setDialogClone] = useState(false) |
||||||
|
const [MsgTime, setMsgTime] = useState(3000) |
||||||
|
const dataColumns = [ |
||||||
|
{ |
||||||
|
name: 'id', |
||||||
|
left: true, |
||||||
|
width: '10%', |
||||||
|
selector: (row: ICorresponsalesRectificaciones) => row.id, |
||||||
|
cell: (row: ICorresponsalesRectificaciones) => ( |
||||||
|
<div |
||||||
|
onClick={() => { |
||||||
|
props.changeIdTrafico(row.id) |
||||||
|
}} |
||||||
|
> |
||||||
|
{row.id} |
||||||
|
</div> |
||||||
|
), |
||||||
|
sortable: true, |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: 'Folio', |
||||||
|
width: '20%', |
||||||
|
selector: (row: ICorresponsalesRectificaciones) => row.folioGemco, |
||||||
|
sortable: true, |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: 'Creado', |
||||||
|
width: '14%', |
||||||
|
selector: (row: ICorresponsalesRectificaciones) => row.fechaRegistro.substring(0, 10), |
||||||
|
sortable: true, |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: 'Prev', |
||||||
|
center: true, |
||||||
|
width: '20%', |
||||||
|
selector: (row: ICorresponsalesRectificaciones) => row.prevRecti, |
||||||
|
cell: (row: ICorresponsalesRectificaciones) => <div>{row.prevRecti}</div>, |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: 'Next', |
||||||
|
center: true, |
||||||
|
width: '20%', |
||||||
|
selector: (row: ICorresponsalesRectificaciones) => row.nextRecti, |
||||||
|
cell: (row: ICorresponsalesRectificaciones) => |
||||||
|
row.nextRecti === 0 ? ( |
||||||
|
<div |
||||||
|
style={{ textAlign: 'center', cursor: 'pointer' }} |
||||||
|
onClick={() => { |
||||||
|
setId(row.id) |
||||||
|
setFolioGEMCO(row.folioGemco) |
||||||
|
setDialogClone(true) |
||||||
|
}} |
||||||
|
> |
||||||
|
<IconContext.Provider value={{ color: 'blue', size: '25px' }}> |
||||||
|
<FaCopy /> |
||||||
|
</IconContext.Provider> |
||||||
|
</div> |
||||||
|
) : ( |
||||||
|
<div>{row.nextRecti}</div> |
||||||
|
), |
||||||
|
}, |
||||||
|
] |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
RectiDataService.GetRectificaciones(props.IDTrafico) |
||||||
|
.then((response) => { |
||||||
|
setDTData(response.data) |
||||||
|
console.log(JSON.stringify(response.data)) |
||||||
|
}) |
||||||
|
.catch((e: Error) => { |
||||||
|
setHeader('Error') |
||||||
|
setMsg('Ocurrio un error: ' + e) |
||||||
|
setShowMsg(true) |
||||||
|
return |
||||||
|
}) |
||||||
|
}, [props.IDTrafico]) |
||||||
|
|
||||||
|
const clonItem = () => { |
||||||
|
RectiDataService.AddRectificacion(id) |
||||||
|
.then((response) => { |
||||||
|
if (response.status == 200) { |
||||||
|
setHeader('Informativo') |
||||||
|
setMsg('La rectificacion se agrego exitosamente') |
||||||
|
setShowMsg(true) |
||||||
|
setDialogClone(false) |
||||||
|
//if (data.id === 0) dispatch(addCorresponsalesFacturas(response.data))
|
||||||
|
} |
||||||
|
}) |
||||||
|
.catch((e: Error) => { |
||||||
|
setHeader('Error') |
||||||
|
setMsg('Ocurrio un error: ' + e) |
||||||
|
setShowMsg(true) |
||||||
|
return |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
return ( |
||||||
|
<div> |
||||||
|
<DataTable |
||||||
|
title='Historial de rectificaciones' |
||||||
|
defaultSortFieldId={'id'} |
||||||
|
defaultSortAsc={true} |
||||||
|
pagination |
||||||
|
highlightOnHover |
||||||
|
columns={dataColumns} |
||||||
|
data={DTData ? DTData : []} |
||||||
|
/> |
||||||
|
<MsgInformativo |
||||||
|
show={show} |
||||||
|
msg={msg} |
||||||
|
header={header} |
||||||
|
msgColor={msgColor} |
||||||
|
time={MsgTime} |
||||||
|
closeToast={() => { |
||||||
|
setShowMsg(false) |
||||||
|
}} |
||||||
|
/> |
||||||
|
<Modal |
||||||
|
show={DialogClone} |
||||||
|
onHide={() => { |
||||||
|
setDialogClone(false) |
||||||
|
}} |
||||||
|
size='sm' |
||||||
|
> |
||||||
|
<Modal.Body> |
||||||
|
<Alert variant='primary'> |
||||||
|
<b>¿Esta seguro de realizar una rectificacion sobre este trafico: [ {FolioGEMCO} ]?</b> |
||||||
|
</Alert> |
||||||
|
</Modal.Body> |
||||||
|
<Modal.Footer> |
||||||
|
<Row> |
||||||
|
<Col xs={6} style={{ textAlign: 'left', paddingRight: '100px' }}> |
||||||
|
<Button |
||||||
|
variant='danger' |
||||||
|
onClick={clonItem} |
||||||
|
size='sm' |
||||||
|
style={{ paddingRight: '20px', paddingLeft: '20px' }} |
||||||
|
> |
||||||
|
Si |
||||||
|
</Button> |
||||||
|
</Col> |
||||||
|
<Col xs={6} style={{ textAlign: 'right' }}> |
||||||
|
<Button |
||||||
|
variant='secondary' |
||||||
|
onClick={() => { |
||||||
|
setDialogClone(false) |
||||||
|
}} |
||||||
|
size='sm' |
||||||
|
> |
||||||
|
Cerrar |
||||||
|
</Button> |
||||||
|
</Col> |
||||||
|
</Row> |
||||||
|
</Modal.Footer> |
||||||
|
</Modal> |
||||||
|
</div> |
||||||
|
) |
||||||
|
} |
||||||
@ -0,0 +1,314 @@ |
|||||||
|
import React, { FC, useEffect, useState } from 'react' |
||||||
|
import { Alert, Button, Card, Col, Container, Form, Row } from 'react-bootstrap' |
||||||
|
import ITabulador from '../../../Interfaces/Catalogos/ITabulador' |
||||||
|
import CTabDataService from '../../../Services/Corresponsalias/Corresponsales.Tabuladores.Services' |
||||||
|
import CTabPreDataService from '../../../Services/Corresponsalias/Corresponsales.Precuenta.Services' |
||||||
|
import CTabDetDataService from '../../../Services/Corresponsalias/Corresponsales.Tabuladores.Detalle.Sevices' |
||||||
|
import { MsgInformativo } from '../../Utils/Toast/msgInformativo' |
||||||
|
import DTOConceptos from '../../../DTO/Utils/DTOConceptos' |
||||||
|
import DataTable from 'react-data-table-component' |
||||||
|
import 'react-data-table-component-extensions/dist/index.css' |
||||||
|
import ITabuladorConceptos from '../../../Interfaces/Catalogos/ITabuladorConceptos' |
||||||
|
import { ControlledInput } from '../../Utils/ControlledInput/ControlledInput' |
||||||
|
|
||||||
|
interface IProps { |
||||||
|
IDCliente: number |
||||||
|
IDTabulador: number |
||||||
|
IDTrafico: number |
||||||
|
NombreCliente: string |
||||||
|
closeTabulador: (arg: boolean) => void |
||||||
|
cambiaPrecuenta: (IDPrecuenta: number) => void |
||||||
|
} |
||||||
|
|
||||||
|
interface IselectedRows { |
||||||
|
allSelected: boolean |
||||||
|
selectedCount: number |
||||||
|
selectedRows: any |
||||||
|
} |
||||||
|
|
||||||
|
export const Tabulador: FC<IProps> = (props) => { |
||||||
|
const [IDTabulador, setIDTabulador] = useState(props.IDTabulador) |
||||||
|
const [Concepto, setConcepto] = useState(0) |
||||||
|
const [DetalleConceptos, setDetalleConceptos] = useState<ITabuladorConceptos[]>([]) |
||||||
|
const [CatConceptos, setCatConceptos] = useState<DTOConceptos[]>([]) |
||||||
|
const [Tabuladores, setTabuladores] = useState<ITabulador[]>([]) |
||||||
|
const [AllTabuladores, setAllTabuladores] = useState<ITabulador[]>([]) |
||||||
|
const [Costo, setCosto] = useState('') |
||||||
|
const [header, setHeader] = useState('') |
||||||
|
const [msgColor, setMsgColor] = React.useState('primary') |
||||||
|
const [show, setShowMsg] = useState(false) |
||||||
|
const [msg, setMsg] = useState('') |
||||||
|
|
||||||
|
const columnsConcepts = [ |
||||||
|
{ |
||||||
|
name: 'id', |
||||||
|
width: '10%', |
||||||
|
selector: (row: ITabuladorConceptos) => row.id, |
||||||
|
sortable: true, |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: 'Concepto', |
||||||
|
width: '65%', |
||||||
|
selector: (row: ITabuladorConceptos) => row.concepto, |
||||||
|
sortable: true, |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: 'Costo', |
||||||
|
width: '15%', |
||||||
|
cell: (row: ITabuladorConceptos) => { |
||||||
|
return row.activo === 1 ? ( |
||||||
|
<ControlledInput id={row.id} value={row.costo} disabled={true} postCost={(id, value) => {}} /> |
||||||
|
) : ( |
||||||
|
<ControlledInput id={row.id} value={0} disabled={true} postCost={(id, value) => {}} /> |
||||||
|
) |
||||||
|
}, |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: 'Activo', |
||||||
|
width: '10%', |
||||||
|
cell: (row: ITabuladorConceptos) => { |
||||||
|
return ( |
||||||
|
<Form.Group controlId='formBasicCheckbox' style={{ textAlign: 'center' }}> |
||||||
|
<Form.Check |
||||||
|
type='checkbox' |
||||||
|
label='' |
||||||
|
checked={row.activo === 1 ? true : false} |
||||||
|
onClick={() => { |
||||||
|
switchConcept(row.id, 1) |
||||||
|
}} |
||||||
|
/> |
||||||
|
</Form.Group> |
||||||
|
) |
||||||
|
}, |
||||||
|
}, |
||||||
|
] |
||||||
|
|
||||||
|
const columnsTabs = [ |
||||||
|
{ |
||||||
|
name: 'id', |
||||||
|
selector: (row: ITabulador) => row.id, |
||||||
|
sortable: true, |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: 'Nombre', |
||||||
|
width: '70%', |
||||||
|
// selector: (row: ITabulador) => row.nombre,
|
||||||
|
cell: (row: ITabulador) => ( |
||||||
|
<div |
||||||
|
style={{ width: '450px', cursor: 'pointer' }} |
||||||
|
onClick={() => { |
||||||
|
setIDTabulador(row.id) |
||||||
|
}} |
||||||
|
> |
||||||
|
{row.nombre} |
||||||
|
</div> |
||||||
|
), |
||||||
|
sortable: true, |
||||||
|
}, |
||||||
|
] |
||||||
|
|
||||||
|
const switchConcept = (id: number, status: number) => { |
||||||
|
CTabPreDataService.ChangeStatus(id) |
||||||
|
.then((response) => { |
||||||
|
if (response.status === 200) { |
||||||
|
let tmp = DetalleConceptos |
||||||
|
let idx = tmp.findIndex((obj) => obj.id == id) |
||||||
|
tmp[idx].activo = status === 1 ? 0 : 1 |
||||||
|
setDetalleConceptos(tmp) |
||||||
|
setHeader('Confirmacion') |
||||||
|
setMsg(response.data.respuesta) |
||||||
|
setShowMsg(true) |
||||||
|
} |
||||||
|
}) |
||||||
|
.catch((e: Error) => { |
||||||
|
setHeader('Error') |
||||||
|
setMsg('Ocurrio un error: ' + e) |
||||||
|
setShowMsg(true) |
||||||
|
return |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
// const postCost = (id: number, Cost: number) => {}
|
||||||
|
|
||||||
|
const GetAllTabs = () => { |
||||||
|
CTabDataService.GetByCustomer(props.IDCliente) |
||||||
|
.then((response) => { |
||||||
|
setTabuladores(response.data) |
||||||
|
}) |
||||||
|
.catch((e: Error) => { |
||||||
|
setHeader('Error') |
||||||
|
setMsg('Ocurrio un error: ' + e) |
||||||
|
setShowMsg(true) |
||||||
|
return |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
GetAllTabs() |
||||||
|
}, []) |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
CTabPreDataService.GetAll(0, props.IDTrafico) |
||||||
|
.then((response) => { |
||||||
|
console.log('conceptos cargados debido a el tabulador guardado ' + JSON.stringify(response.data)) |
||||||
|
setDetalleConceptos(response.data) |
||||||
|
}) |
||||||
|
.catch((e: Error) => { |
||||||
|
setHeader('Error') |
||||||
|
setMsg('Ocurrio un error: ' + e) |
||||||
|
setShowMsg(true) |
||||||
|
return |
||||||
|
}) |
||||||
|
// console.log(Tabulador)
|
||||||
|
}, [IDTabulador, props]) |
||||||
|
|
||||||
|
const filtraTabulador = (e: any) => { |
||||||
|
if (e.target.value !== '') { |
||||||
|
setTabuladores( |
||||||
|
AllTabuladores.filter(function (el) { |
||||||
|
return el.nombre.toLocaleLowerCase().includes(e.target.value.toLocaleLowerCase()) |
||||||
|
}) |
||||||
|
) |
||||||
|
} else { |
||||||
|
setTabuladores(AllTabuladores) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
const saveForm = () => { |
||||||
|
// alert(IDTabulador)
|
||||||
|
CTabPreDataService.Append(IDTabulador, props.IDTrafico) |
||||||
|
.then((response) => { |
||||||
|
setDetalleConceptos(response.data) |
||||||
|
props.cambiaPrecuenta(IDTabulador) |
||||||
|
}) |
||||||
|
.catch((e: Error) => { |
||||||
|
setHeader('Error') |
||||||
|
setMsg('Ocurrio un error: ' + e) |
||||||
|
setShowMsg(true) |
||||||
|
return |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
const addConcept = () => { |
||||||
|
if (IDTabulador === 0) { |
||||||
|
setHeader('Error') |
||||||
|
setMsg('Por favor, primero seleccione el tabulador') |
||||||
|
setShowMsg(true) |
||||||
|
return |
||||||
|
} |
||||||
|
if (Concepto === 0) { |
||||||
|
setHeader('Error') |
||||||
|
setMsg('Por favor, primero seleccione el concepto') |
||||||
|
setShowMsg(true) |
||||||
|
return |
||||||
|
} |
||||||
|
// postCost(0, 0)
|
||||||
|
} |
||||||
|
|
||||||
|
return ( |
||||||
|
<div> |
||||||
|
<Container fluid> |
||||||
|
<Alert variant='primary'> |
||||||
|
<Row> |
||||||
|
<Col xs={2} style={{ paddingTop: '5px' }}> |
||||||
|
<h5>Cliente: </h5> |
||||||
|
</Col> |
||||||
|
<Col xs={10} style={{ textAlign: 'center' }}> |
||||||
|
<h4>{props.NombreCliente}</h4> |
||||||
|
</Col> |
||||||
|
</Row> |
||||||
|
<Row> |
||||||
|
<Col xs={3}> |
||||||
|
<h6>Tabulador asignado: </h6> |
||||||
|
</Col> |
||||||
|
<Col xs={7}> |
||||||
|
<Form.Control |
||||||
|
as='select' |
||||||
|
value={IDTabulador} |
||||||
|
onChange={(e) => setIDTabulador(parseInt(e.target.value))} |
||||||
|
className='form-select form-select-sm' |
||||||
|
style={{ fontSize: '15px' }} |
||||||
|
> |
||||||
|
<option value='0'>- No tiene tabulador asignado -</option> |
||||||
|
{Tabuladores |
||||||
|
? Tabuladores.map((c) => { |
||||||
|
return <option value={c.id}>{c.nombre}</option> |
||||||
|
}) |
||||||
|
: null} |
||||||
|
</Form.Control> |
||||||
|
</Col> |
||||||
|
<Col xs={1}> |
||||||
|
<Button |
||||||
|
variant='primary' |
||||||
|
size='sm' |
||||||
|
style={{ paddingLeft: '10px', paddingRight: '10px' }} |
||||||
|
onClick={() => saveForm()} |
||||||
|
> |
||||||
|
Guardar |
||||||
|
</Button> |
||||||
|
</Col> |
||||||
|
</Row> |
||||||
|
</Alert> |
||||||
|
<Row> |
||||||
|
{/* <Col xs={6}> |
||||||
|
<Card style={{}}> |
||||||
|
<Card.Body> |
||||||
|
<Card.Subtitle className='mb-2 text-muted'> |
||||||
|
<Row> |
||||||
|
<Col xs={2} style={{ paddingTop: '8px' }}> |
||||||
|
Tabulador |
||||||
|
</Col> |
||||||
|
<Col xs={10}> |
||||||
|
<Form.Control |
||||||
|
type='text' |
||||||
|
size='sm' |
||||||
|
placeholder='Busqueda de tabulador...' |
||||||
|
onChange={(e) => { |
||||||
|
filtraTabulador(e) |
||||||
|
}} |
||||||
|
/> |
||||||
|
</Col> |
||||||
|
</Row> |
||||||
|
</Card.Subtitle> |
||||||
|
<DataTable |
||||||
|
noHeader |
||||||
|
defaultSortFieldId={'id'} |
||||||
|
defaultSortAsc={true} |
||||||
|
pagination |
||||||
|
highlightOnHover |
||||||
|
columns={columnsTabs} |
||||||
|
data={Tabuladores} |
||||||
|
/> |
||||||
|
</Card.Body> |
||||||
|
</Card> |
||||||
|
</Col> */} |
||||||
|
<Col xs={12}> |
||||||
|
<Card style={{}}> |
||||||
|
<Card.Body> |
||||||
|
<Card.Subtitle className='mb-2 text-muted'></Card.Subtitle> |
||||||
|
<DataTable |
||||||
|
noHeader |
||||||
|
defaultSortFieldId={'id'} |
||||||
|
defaultSortAsc={true} |
||||||
|
pagination |
||||||
|
highlightOnHover |
||||||
|
columns={columnsConcepts} |
||||||
|
data={DetalleConceptos} |
||||||
|
/> |
||||||
|
</Card.Body> |
||||||
|
</Card> |
||||||
|
</Col> |
||||||
|
</Row> |
||||||
|
</Container> |
||||||
|
<MsgInformativo |
||||||
|
show={show} |
||||||
|
msg={msg} |
||||||
|
header={header} |
||||||
|
msgColor={msgColor} |
||||||
|
closeToast={() => { |
||||||
|
setShowMsg(false) |
||||||
|
}} |
||||||
|
/> |
||||||
|
</div> |
||||||
|
) |
||||||
|
} |
||||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,47 @@ |
|||||||
|
import React, { FC, useEffect, useState } from 'react' |
||||||
|
import DashboardCorresponsales from './DashboardCorresponsales' |
||||||
|
import { DashboardContabilidad } from './DashboardContabilidad' |
||||||
|
import { Col, Container, Row } from 'react-bootstrap' |
||||||
|
import { DashboardFacturacion } from './DashboardFacturacion' |
||||||
|
import { DashboardClasificacion } from './DashboardClasificacion' |
||||||
|
import DashboardTrafico from './DashboardTrafico' |
||||||
|
|
||||||
|
interface IProps {} |
||||||
|
|
||||||
|
export default function Dashboard(props: IProps) { |
||||||
|
const [Depto, setDepto] = useState(() => { |
||||||
|
const stickyValue = window.localStorage.getItem('Departamento') |
||||||
|
return stickyValue !== null ? JSON.parse(stickyValue) : 0 |
||||||
|
}) |
||||||
|
const [User, setUser] = useState(() => { |
||||||
|
const stickyValue = window.localStorage.getItem('User') |
||||||
|
return stickyValue !== null ? JSON.parse(stickyValue) : 0 |
||||||
|
}) |
||||||
|
|
||||||
|
return ( |
||||||
|
<div> |
||||||
|
<br /> |
||||||
|
<Container> |
||||||
|
<Row xs={1} md={3} className='g-4'> |
||||||
|
{[['Direcccion', 'Sistemas', 'Corresponsalias'].includes(Depto) ? <DashboardCorresponsales /> : ''].map( |
||||||
|
(item) => { |
||||||
|
return <React.Fragment>{item}</React.Fragment> |
||||||
|
} |
||||||
|
)} |
||||||
|
{[['Direcccion', 'Sistemas', 'Contabilidad'].includes(Depto) ? <DashboardContabilidad /> : ''].map((item) => { |
||||||
|
return <React.Fragment>{item}</React.Fragment> |
||||||
|
})} |
||||||
|
{[['Direcccion', 'Sistemas', 'Facturacion'].includes(Depto) ? <DashboardFacturacion /> : ''].map((item) => { |
||||||
|
return <React.Fragment>{item}</React.Fragment> |
||||||
|
})} |
||||||
|
{[['Direcccion', 'Sistemas', 'Operaciones', 'Clasificacion'].includes(Depto) ? <DashboardClasificacion /> : ''].map((item) => { |
||||||
|
return <React.Fragment>{item}</React.Fragment> |
||||||
|
})} |
||||||
|
{[['Direcccion', 'Sistemas', 'Operaciones', 'Trafico'].includes(Depto) ? <DashboardTrafico /> : ''].map((item) => { |
||||||
|
return <React.Fragment>{item}</React.Fragment> |
||||||
|
})} |
||||||
|
</Row> |
||||||
|
</Container> |
||||||
|
</div> |
||||||
|
) |
||||||
|
} |
||||||
@ -0,0 +1,122 @@ |
|||||||
|
import { useEffect, useState } from 'react' |
||||||
|
import { Card, Col, ProgressBar, Row } from 'react-bootstrap' |
||||||
|
import { IconContext } from 'react-icons' |
||||||
|
import { FaAmazon } from 'react-icons/fa' |
||||||
|
import { Link } from 'react-router-dom' |
||||||
|
import DashboardDataService from '../../Services/Dashboard/Dashboard.Clasificacion.Services' |
||||||
|
|
||||||
|
export interface IDashboardClasificacionProps {} |
||||||
|
|
||||||
|
export function DashboardClasificacion(props: IDashboardClasificacionProps) { |
||||||
|
const [Terminadas, setTerminadas] = useState(0) |
||||||
|
const [Pendientes, setPendientes] = useState(0) |
||||||
|
const [PendientesRespuesta, setPendientesRespuesta] = useState(0) |
||||||
|
const [Total, setTotal] = useState(0) |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
DashboardDataService.DashboardInvoices(1) |
||||||
|
.then((response) => { |
||||||
|
setPendientes(response.data.total) |
||||||
|
}) |
||||||
|
.catch((e: Error) => { |
||||||
|
return |
||||||
|
}) |
||||||
|
DashboardDataService.DashboardInvoices(2) |
||||||
|
.then((response) => { |
||||||
|
setTerminadas(response.data.total) |
||||||
|
}) |
||||||
|
.catch((e: Error) => { |
||||||
|
return |
||||||
|
}) |
||||||
|
DashboardDataService.DashboardInvoices(-1) |
||||||
|
.then((response) => { |
||||||
|
setPendientesRespuesta(response.data.total) |
||||||
|
}) |
||||||
|
.catch((e: Error) => { |
||||||
|
return |
||||||
|
})
|
||||||
|
}, []) |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
setTotal(Pendientes + Terminadas) |
||||||
|
}, [Pendientes, Terminadas]) |
||||||
|
|
||||||
|
return ( |
||||||
|
<> |
||||||
|
<Col> |
||||||
|
<Card style={{ width: '18rem' }} className='dashboardComponentFont'> |
||||||
|
<Card.Header>Clasificación</Card.Header> |
||||||
|
<Card.Body> |
||||||
|
<Card.Title> |
||||||
|
Facturas {' '} |
||||||
|
<IconContext.Provider value={{ color: '#F6C34F', size:'20%' }}> |
||||||
|
<FaAmazon /> |
||||||
|
</IconContext.Provider> |
||||||
|
</Card.Title> |
||||||
|
<Row> |
||||||
|
<Col xs={6} style={{}}> |
||||||
|
<Link |
||||||
|
to="../RptAmazonFinishedClasificationInvoices" |
||||||
|
style={{ |
||||||
|
textDecoration: 'none', |
||||||
|
float: 'left', |
||||||
|
paddingRight: '10px' |
||||||
|
}} |
||||||
|
> |
||||||
|
Terminadas |
||||||
|
</Link> |
||||||
|
</Col> |
||||||
|
<Col xs={6} className="text-center"> |
||||||
|
<Link |
||||||
|
to="../RptAmazonPendingClasificationInvoices" |
||||||
|
style={{ |
||||||
|
textDecoration: 'none', |
||||||
|
float: 'right', |
||||||
|
paddingRight: '10px' |
||||||
|
}} |
||||||
|
> |
||||||
|
Pendientes |
||||||
|
</Link> |
||||||
|
</Col> |
||||||
|
</Row> |
||||||
|
<Row> |
||||||
|
<Col xs={12}> |
||||||
|
<ProgressBar style={{ height: '10px' }}> |
||||||
|
<ProgressBar |
||||||
|
striped |
||||||
|
animated |
||||||
|
variant="success" |
||||||
|
now={(Terminadas / Total) * 100} |
||||||
|
key={1} |
||||||
|
/> |
||||||
|
<ProgressBar |
||||||
|
striped |
||||||
|
variant="warning" |
||||||
|
now={(Pendientes / Total) * 100} |
||||||
|
key={2} |
||||||
|
/> |
||||||
|
</ProgressBar> |
||||||
|
</Col> |
||||||
|
</Row> |
||||||
|
<Row> |
||||||
|
<Col xs={6} style={{ fontSize: '4em' }} className="text-center"> |
||||||
|
{Terminadas} |
||||||
|
</Col> |
||||||
|
<Col xs={6} style={{ fontSize: '4em' }} className="text-center"> |
||||||
|
{Pendientes} |
||||||
|
</Col> |
||||||
|
</Row> |
||||||
|
<Row> |
||||||
|
<Col xs={12}><Link |
||||||
|
to='../RptPendingAnswerFromAmazon' |
||||||
|
style={{ textDecoration: 'none', float: 'left' }} |
||||||
|
> |
||||||
|
Facturas con excepciones <span style={{fontSize:'50px', color: 'red'}}>({PendientesRespuesta})</span> |
||||||
|
</Link></Col> |
||||||
|
</Row> |
||||||
|
</Card.Body> |
||||||
|
</Card> |
||||||
|
</Col> |
||||||
|
</> |
||||||
|
) |
||||||
|
} |
||||||
@ -0,0 +1,116 @@ |
|||||||
|
import React, { FC, useEffect, useState } from 'react' |
||||||
|
import { Card, Col, Container, Row } from 'react-bootstrap' |
||||||
|
import { IconContext } from 'react-icons' |
||||||
|
import { BsQuestionOctagonFill } from 'react-icons/bs' |
||||||
|
import { FaCcMastercard, FaFileInvoiceDollar } from 'react-icons/fa' |
||||||
|
import { FcSurvey } from 'react-icons/fc' |
||||||
|
import { Link } from 'react-router-dom' |
||||||
|
import DashboardDataService from '../../Services/Dashboard/Dashboard.Contabilidad.Service' |
||||||
|
|
||||||
|
interface IProps {} |
||||||
|
|
||||||
|
export const DashboardContabilidad: FC<IProps> = (props) => { |
||||||
|
const [CTCTotal, setCTCTotal] = useState(0) // Corresponsales: Traficos terminados listos para contabilidad
|
||||||
|
const [CAPATotal, setCAPATotal] = useState(0) // Corresponsales anticipos pendientes de autorizar
|
||||||
|
const [CuentasComplementariasPedientes, setCuentasComplementariasPendientes] = useState(0) // Corresponsales anticipos pendientes de autorizar
|
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
DashboardDataService.getTotalTraficosPendientesAutorizar(4) |
||||||
|
.then((response) => { |
||||||
|
setCTCTotal(response.data.total) |
||||||
|
}) |
||||||
|
.catch((e: Error) => { |
||||||
|
return |
||||||
|
}) |
||||||
|
DashboardDataService.getTotalAnticiposPendientes() |
||||||
|
.then((response) => { |
||||||
|
setCAPATotal(response.data.total) |
||||||
|
}) |
||||||
|
.catch((e: Error) => { |
||||||
|
return |
||||||
|
}) |
||||||
|
DashboardDataService.getTotalCuentasComplementariasPedientes() |
||||||
|
.then((response) => { |
||||||
|
setCuentasComplementariasPendientes(response.data.total) |
||||||
|
}) |
||||||
|
.catch((e: Error) => { |
||||||
|
return |
||||||
|
}) |
||||||
|
}, []) |
||||||
|
|
||||||
|
return ( |
||||||
|
<> |
||||||
|
<Col> |
||||||
|
<Card style={{ width: '18rem' }} className='dashboardComponentFont'> |
||||||
|
<Card.Header>Contabilidad</Card.Header> |
||||||
|
<Card.Body style={{ paddingBottom: '50px' }}> |
||||||
|
<Card.Title> |
||||||
|
Traficos pendientes |
||||||
|
<br /> |
||||||
|
<br /> |
||||||
|
</Card.Title> |
||||||
|
<Card.Img variant='top' src='' onClick={() => {}} /> |
||||||
|
<div style={{ fontSize: '6em' }} className='text-center'> |
||||||
|
<FcSurvey /> |
||||||
|
{CTCTotal} |
||||||
|
</div> |
||||||
|
</Card.Body> |
||||||
|
<Card.Footer style={{ paddingRight: '5px' }}> |
||||||
|
<Link |
||||||
|
to='../RptCorresponsalesTraficos?proc=2&modo=1' |
||||||
|
style={{ textDecoration: 'none', float: 'right', paddingRight: '10px' }} |
||||||
|
> |
||||||
|
Ver mas... |
||||||
|
</Link> |
||||||
|
</Card.Footer> |
||||||
|
</Card> |
||||||
|
</Col> |
||||||
|
<Col> |
||||||
|
<Card style={{ width: '18rem' }} className='dashboardComponentFont'> |
||||||
|
<Card.Header>Contabilidad </Card.Header> |
||||||
|
<Card.Body style={{ paddingBottom: '50px' }}> |
||||||
|
<Card.Title> Anticipos pendientes de autorizar</Card.Title> |
||||||
|
<Card.Img variant='top' src='' onClick={() => {}} /> |
||||||
|
<div style={{ fontSize: '6em' }} className='text-center'> |
||||||
|
<IconContext.Provider value={{ color: 'orange' }}> |
||||||
|
<FaCcMastercard /> |
||||||
|
</IconContext.Provider> |
||||||
|
{CAPATotal} |
||||||
|
</div> |
||||||
|
</Card.Body> |
||||||
|
<Card.Footer style={{ paddingRight: '5px' }}> |
||||||
|
<Link |
||||||
|
to='../RptCorresponsalesTraficos?proc=2&modo=2' |
||||||
|
style={{ textDecoration: 'none', float: 'right', paddingRight: '10px' }} |
||||||
|
> |
||||||
|
Ver mas... |
||||||
|
</Link> |
||||||
|
</Card.Footer> |
||||||
|
</Card> |
||||||
|
</Col> |
||||||
|
<Col> |
||||||
|
<Card style={{ width: '18rem' }} className='dashboardComponentFont'> |
||||||
|
<Card.Header>Contabilidad </Card.Header> |
||||||
|
<Card.Body style={{ paddingBottom: '50px' }}> |
||||||
|
<Card.Title> Cuentas complementarias pendientes</Card.Title> |
||||||
|
<Card.Img variant='top' src='' onClick={() => {}} /> |
||||||
|
<div style={{ fontSize: '6em' }} className='text-center'> |
||||||
|
<IconContext.Provider value={{ color: '#AAF866' }}> |
||||||
|
<FaFileInvoiceDollar /> |
||||||
|
</IconContext.Provider> |
||||||
|
{CuentasComplementariasPedientes} |
||||||
|
</div> |
||||||
|
</Card.Body> |
||||||
|
<Card.Footer style={{ paddingRight: '5px' }}> |
||||||
|
<Link |
||||||
|
to='../RptCorresponsalesTraficos?proc=2&modo=3' |
||||||
|
style={{ textDecoration: 'none', float: 'right', paddingRight: '10px' }} |
||||||
|
> |
||||||
|
Ver mas... |
||||||
|
</Link> |
||||||
|
</Card.Footer> |
||||||
|
</Card> |
||||||
|
</Col> |
||||||
|
</> |
||||||
|
) |
||||||
|
} |
||||||
@ -0,0 +1,150 @@ |
|||||||
|
import { FC, useEffect, useState } from 'react'; |
||||||
|
import { Card, Col, Row } from 'react-bootstrap'; |
||||||
|
import { Link } from 'react-router-dom'; |
||||||
|
import DashboardDataService from '../../Services/Dashboard/Dashboard.Corresponsales.Services'; |
||||||
|
import { useNavigate } from 'react-router-dom'; |
||||||
|
import ReactApexChart from 'react-apexcharts'; |
||||||
|
import { ApexOptions } from 'apexcharts'; |
||||||
|
|
||||||
|
interface IProps {} |
||||||
|
|
||||||
|
export default function DashboardCorresponsales(props: IProps) { |
||||||
|
let navigate = useNavigate(); |
||||||
|
const [TotalCorresponsales, setTotalCorresponsales] = useState(0); |
||||||
|
const [labels, setlabels] = useState<string[]>([]); |
||||||
|
const [series, setseries] = useState<number[]>([]); |
||||||
|
//const [TipoCambio, setTipoCambio] = useState(0)
|
||||||
|
const [CircleOptions, setCirleOpcions] = useState<ApexOptions>({ |
||||||
|
labels: [ |
||||||
|
'(2) Rechazos para el corresponsal', |
||||||
|
' (0) Rechazados x Contabilidad', |
||||||
|
'(10) Pendientes por terminar', |
||||||
|
], |
||||||
|
colors: ['#EB984E', '#E52626', '#ABEB4E', '#2288D3'], |
||||||
|
legend: { position: 'bottom' }, |
||||||
|
plotOptions: { |
||||||
|
pie: { |
||||||
|
donut: { |
||||||
|
size: '55%', |
||||||
|
}, |
||||||
|
}, |
||||||
|
}, |
||||||
|
}); |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
DashboardDataService.getCorresponsales() |
||||||
|
.then((response) => { |
||||||
|
console.log(response.data); |
||||||
|
let labels: string[] = []; |
||||||
|
let series: number[] = []; |
||||||
|
response.data.forEach((element) => { |
||||||
|
if (element.descripcion.indexOf('Total') === -1) { |
||||||
|
labels.push('(' + element.total + ') : ' + element.descripcion); |
||||||
|
series.push(element.total); |
||||||
|
} else { |
||||||
|
setTotalCorresponsales(element.total); |
||||||
|
} |
||||||
|
}); |
||||||
|
setlabels(labels); |
||||||
|
setseries(series); |
||||||
|
|
||||||
|
setCirleOpcions({ |
||||||
|
labels: labels, |
||||||
|
colors: ['#EB984E', '#E52626', '#ABEB4E'], |
||||||
|
legend: { position: 'bottom' }, |
||||||
|
plotOptions: { |
||||||
|
pie: { |
||||||
|
donut: { |
||||||
|
size: '55%', |
||||||
|
labels: { |
||||||
|
show: true, |
||||||
|
total: { |
||||||
|
showAlways: true, |
||||||
|
show: true, |
||||||
|
fontSize: '15px', |
||||||
|
}, |
||||||
|
value: { |
||||||
|
show: true, |
||||||
|
fontSize: '43px', |
||||||
|
fontWeight: 'bold', |
||||||
|
}, |
||||||
|
}, |
||||||
|
}, |
||||||
|
}, |
||||||
|
}, |
||||||
|
}); |
||||||
|
}) |
||||||
|
.catch((e: Error) => { |
||||||
|
return; |
||||||
|
}); |
||||||
|
//getTipoCambio(currentDate())
|
||||||
|
}, []); |
||||||
|
|
||||||
|
function ConvertStringToHex(str: string) { |
||||||
|
var arr = []; |
||||||
|
for (var i = 0; i < str.length; i++) { |
||||||
|
arr[i] = ('00' + str.charCodeAt(i).toString(16)).slice(-4); |
||||||
|
} |
||||||
|
return '\\u' + arr.join('\\u'); |
||||||
|
} |
||||||
|
|
||||||
|
function currentDate(): string { |
||||||
|
var today = new Date(); |
||||||
|
var dd = String(today.getDate()).padStart(2, '0'); |
||||||
|
var mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0!
|
||||||
|
var yyyy = today.getFullYear(); |
||||||
|
return yyyy + '-' + mm + '-' + dd; |
||||||
|
} |
||||||
|
|
||||||
|
return ( |
||||||
|
<> |
||||||
|
<Col> |
||||||
|
<Card style={{ width: '19rem' }} className='dashboardComponentFont'> |
||||||
|
<Card.Header> |
||||||
|
<b>Corresponsales:</b> Traficos pendientes |
||||||
|
</Card.Header> |
||||||
|
<Card.Body style={{ paddingBottom: '10px', paddingTop: '0px' }}> |
||||||
|
<Card.Img variant='top' src='' onClick={() => {}} /> |
||||||
|
{labels ? ( |
||||||
|
<ReactApexChart |
||||||
|
type='donut' |
||||||
|
options={CircleOptions} |
||||||
|
series={series} |
||||||
|
width={250} |
||||||
|
height={500} |
||||||
|
/> |
||||||
|
) : ( |
||||||
|
'' |
||||||
|
)} |
||||||
|
</Card.Body> |
||||||
|
<Card.Footer> |
||||||
|
<Row> |
||||||
|
<Col xs={6} style={{ paddingRight: '5px' }}> |
||||||
|
{/* <Link |
||||||
|
to={`../RptCorresponsalesTraficosHst?proc=0&status=0`} |
||||||
|
style={{ textDecoration: 'none', float: 'right', paddingRight: '10px' }} |
||||||
|
> |
||||||
|
Buscar |
||||||
|
</Link> */} |
||||||
|
{/* <span style={{ fontWeight: 'bold' }}>Tipo cambio: ${TipoCambio}</span> */} |
||||||
|
</Col> |
||||||
|
{/* <Col xs={3}></Col> */} |
||||||
|
<Col xs={6} style={{ paddingRight: '5px' }}> |
||||||
|
<Link |
||||||
|
to={`../RptCorresponsalesTraficos/proc=1/modo=1`} |
||||||
|
style={{ |
||||||
|
textDecoration: 'none', |
||||||
|
float: 'right', |
||||||
|
paddingRight: '10px', |
||||||
|
}} |
||||||
|
> |
||||||
|
Ver mas... |
||||||
|
</Link> |
||||||
|
</Col> |
||||||
|
</Row> |
||||||
|
</Card.Footer> |
||||||
|
</Card> |
||||||
|
</Col> |
||||||
|
</> |
||||||
|
); |
||||||
|
}; |
||||||
@ -0,0 +1,56 @@ |
|||||||
|
import React, { FC, useEffect, useState } from 'react' |
||||||
|
import { Card, Col, Container, Row } from 'react-bootstrap' |
||||||
|
import { IconContext } from 'react-icons' |
||||||
|
import { BsCashCoin } from 'react-icons/bs' |
||||||
|
import { Link } from 'react-router-dom' |
||||||
|
import DashboardDataService from '../../Services/Dashboard/Dashboard.Contabilidad.Service' |
||||||
|
|
||||||
|
interface IProps {} |
||||||
|
|
||||||
|
export const DashboardFacturacion: FC<IProps> = (props) => { |
||||||
|
const [CTCTotal, setCTCTotal] = useState(0) // Corresponsales: Traficos terminados listos para contabilidad
|
||||||
|
const [CAPATotal, setCAPATotal] = useState(0) // Corresponsales anticipos pendientes de autorizar
|
||||||
|
const [CuentasComplementariasPedientes, setCuentasComplementariasPendientes] = useState(0) // Corresponsales anticipos pendientes de autorizar
|
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
DashboardDataService.getTotalTraficosPendientesAutorizar(5) |
||||||
|
.then((response) => { |
||||||
|
setCTCTotal(response.data.total) |
||||||
|
}) |
||||||
|
.catch((e: Error) => { |
||||||
|
return |
||||||
|
}) |
||||||
|
}, []) |
||||||
|
|
||||||
|
return ( |
||||||
|
<> |
||||||
|
<Col> |
||||||
|
<Card style={{ width: '18rem' }} className='dashboardComponentFont'> |
||||||
|
<Card.Header>Facturacion</Card.Header> |
||||||
|
<Card.Body style={{ paddingBottom: '50px' }}> |
||||||
|
<Card.Title> |
||||||
|
Traficos pendientes |
||||||
|
<br /> |
||||||
|
<br /> |
||||||
|
</Card.Title> |
||||||
|
<Card.Img variant='top' src='' onClick={() => {}} /> |
||||||
|
<div style={{ fontSize: '6em' }} className='text-center'> |
||||||
|
<IconContext.Provider value={{ color: 'green', size: '35%' }}> |
||||||
|
<BsCashCoin /> |
||||||
|
</IconContext.Provider> |
||||||
|
{CTCTotal} |
||||||
|
</div> |
||||||
|
</Card.Body> |
||||||
|
<Card.Footer style={{ paddingRight: '5px' }}> |
||||||
|
<Link |
||||||
|
to='../RptCorresponsalesTraficos?proc=3&modo=1' |
||||||
|
style={{ textDecoration: 'none', float: 'right', paddingRight: '10px' }} |
||||||
|
> |
||||||
|
Ver mas... |
||||||
|
</Link> |
||||||
|
</Card.Footer> |
||||||
|
</Card> |
||||||
|
</Col> |
||||||
|
</> |
||||||
|
) |
||||||
|
} |
||||||
@ -0,0 +1,113 @@ |
|||||||
|
import * as React from 'react' |
||||||
|
import { useEffect, useState } from 'react' |
||||||
|
import { Card, Col, ProgressBar, Row } from 'react-bootstrap' |
||||||
|
import { IconContext } from 'react-icons' |
||||||
|
import { FaAmazon } from 'react-icons/fa' |
||||||
|
import { Link } from 'react-router-dom' |
||||||
|
import '../../css/generic01.css' |
||||||
|
import DashboardDataService from '../../Services/Dashboard/Dashboard.Clasificacion.Services' |
||||||
|
|
||||||
|
export interface IDashboardTraficoProps { |
||||||
|
} |
||||||
|
|
||||||
|
export default function DashboardTrafico (props: IDashboardTraficoProps) { |
||||||
|
const [Terminadas, setTerminadas] = useState(0) |
||||||
|
const [Pendientes, setPendientes] = useState(0) |
||||||
|
const [Total, setTotal] = useState(0) |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
DashboardDataService.DashboardInvoices(3) |
||||||
|
.then((response) => { |
||||||
|
setPendientes(response.data.total) |
||||||
|
}) |
||||||
|
.catch((e: Error) => { |
||||||
|
return |
||||||
|
}) |
||||||
|
DashboardDataService.DashboardInvoices(4) |
||||||
|
.then((response) => { |
||||||
|
setTerminadas(response.data.total) |
||||||
|
}) |
||||||
|
.catch((e: Error) => { |
||||||
|
return |
||||||
|
}) |
||||||
|
}, []) |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
setTotal(Pendientes + Terminadas) |
||||||
|
}, [Pendientes, Terminadas]) |
||||||
|
|
||||||
|
return ( |
||||||
|
<> |
||||||
|
<Col> |
||||||
|
<Card style={{ width: '18rem' }} className='blueCardBorder dashboardComponentFont'> |
||||||
|
<Card.Header style={{backgroundColor: '#1D6DC2', color: '#ffffff'}}>Trafico</Card.Header> |
||||||
|
<Card.Body> |
||||||
|
<Card.Title> |
||||||
|
Facturas {' '} |
||||||
|
<IconContext.Provider value={{ color: '#F6C34F', size:'30%' }}> |
||||||
|
<FaAmazon /> |
||||||
|
</IconContext.Provider> |
||||||
|
</Card.Title> |
||||||
|
<Row > |
||||||
|
<Col xs={6} style={{}}> |
||||||
|
<Link |
||||||
|
to="../RptAmazonLinkInvoice2Traffic" |
||||||
|
style={{ |
||||||
|
textDecoration: 'none', |
||||||
|
float: 'left', |
||||||
|
paddingRight: '10px' |
||||||
|
}} |
||||||
|
> |
||||||
|
Terminadas |
||||||
|
</Link> |
||||||
|
</Col> |
||||||
|
<Col xs={6} className="text-center"> |
||||||
|
<Link |
||||||
|
to="../RptAmazonPendingTraficInvoice" |
||||||
|
style={{ |
||||||
|
textDecoration: 'none', |
||||||
|
float: 'right', |
||||||
|
paddingRight: '10px' |
||||||
|
}} |
||||||
|
> |
||||||
|
Pendientes |
||||||
|
</Link> |
||||||
|
</Col> |
||||||
|
</Row> |
||||||
|
<Row> |
||||||
|
<Col xs={12}> |
||||||
|
<ProgressBar style={{ height: '25px' }}> |
||||||
|
<ProgressBar |
||||||
|
striped |
||||||
|
animated |
||||||
|
variant="success" |
||||||
|
now={(Terminadas / Total) * 100} |
||||||
|
key={1} |
||||||
|
/> |
||||||
|
<ProgressBar |
||||||
|
striped |
||||||
|
variant="warning" |
||||||
|
now={(Pendientes / Total) * 100} |
||||||
|
key={2} |
||||||
|
/> |
||||||
|
</ProgressBar> |
||||||
|
</Col> |
||||||
|
</Row> |
||||||
|
<Row> |
||||||
|
<Col xs={6} style={{ fontSize: '6em' }} className="text-center"> |
||||||
|
{Terminadas} |
||||||
|
</Col> |
||||||
|
<Col xs={6} style={{ fontSize: '6em' }} className="text-center"> |
||||||
|
{Pendientes} |
||||||
|
</Col> |
||||||
|
</Row> |
||||||
|
</Card.Body> |
||||||
|
<Card.Footer |
||||||
|
style={{ paddingRight: '5px', paddingBottom: '5px' }} |
||||||
|
></Card.Footer> |
||||||
|
</Card> |
||||||
|
</Col> |
||||||
|
</> |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
@ -0,0 +1,77 @@ |
|||||||
|
import React, { useEffect, useState } from 'react' |
||||||
|
import { Container, Form, Nav, Navbar, NavDropdown } from 'react-bootstrap' |
||||||
|
import ItemMenu from '../../Interfaces/Catalogos/IItemMenu' |
||||||
|
import '../../css/generic01.css' |
||||||
|
|
||||||
|
interface Isubmenu { |
||||||
|
menu: ItemMenu[] |
||||||
|
descripcion: string |
||||||
|
} |
||||||
|
|
||||||
|
function Submenu({ descripcion, menu }: Isubmenu) { |
||||||
|
return ( |
||||||
|
<div> |
||||||
|
<NavDropdown title={descripcion} id='basic-nav-dropdown'> |
||||||
|
{menu.map((item, index) => { |
||||||
|
return ( |
||||||
|
<NavDropdown.Item href={item.url} key={item.id}> |
||||||
|
{item.descripcion} |
||||||
|
</NavDropdown.Item> |
||||||
|
) |
||||||
|
})} |
||||||
|
</NavDropdown> |
||||||
|
</div> |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
export const Home: React.FC<{}> = (props) => { |
||||||
|
let _menu: ItemMenu[] = [] |
||||||
|
let mn: string = '' |
||||||
|
const [menu, setMenu] = useState( |
||||||
|
localStorage.getItem('menu') ? localStorage.getItem('menu') : '' |
||||||
|
) |
||||||
|
const [mainMenu, setMainMenu] = useState(_menu) |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
if (menu) { |
||||||
|
setMainMenu(JSON.parse(menu)) |
||||||
|
} |
||||||
|
}, [menu]) |
||||||
|
|
||||||
|
return ( |
||||||
|
<div className='areaImprimible'> |
||||||
|
<Navbar bg='light' expand='lg'> |
||||||
|
<Container> |
||||||
|
<Navbar.Brand href='#home'>GEMCO</Navbar.Brand> |
||||||
|
<Navbar.Toggle aria-controls='basic-navbar-nav' /> |
||||||
|
<Navbar.Collapse id='basic-navbar-nav'> |
||||||
|
<Nav className='me-auto'> |
||||||
|
{mainMenu |
||||||
|
? mainMenu.map((itemMenu, index) => { |
||||||
|
if (itemMenu.padreId === 0) { |
||||||
|
return ( |
||||||
|
<> |
||||||
|
<Submenu |
||||||
|
descripcion={itemMenu.descripcion} |
||||||
|
key={itemMenu.id} |
||||||
|
menu={mainMenu.filter(function (item) { |
||||||
|
return item.padreId === itemMenu.id |
||||||
|
})} |
||||||
|
/> |
||||||
|
</> |
||||||
|
) |
||||||
|
} |
||||||
|
}) |
||||||
|
: ''} |
||||||
|
</Nav> |
||||||
|
<Form className='d-flex'> |
||||||
|
<Nav.Link href='login'>Login</Nav.Link> |
||||||
|
<Nav.Link href='logout'>Logout</Nav.Link> |
||||||
|
<Nav.Link href='reset'>Reset</Nav.Link> |
||||||
|
</Form> |
||||||
|
</Navbar.Collapse> |
||||||
|
</Container> |
||||||
|
</Navbar> |
||||||
|
</div> |
||||||
|
) |
||||||
|
} |
||||||
@ -0,0 +1,163 @@ |
|||||||
|
import * as React from 'react' |
||||||
|
import { useNavigate } from 'react-router-dom' |
||||||
|
import { Formik, Form, Field } from 'formik' |
||||||
|
import { useSelector, useDispatch } from 'react-redux' |
||||||
|
//import { RootState } from '../../store/store'
|
||||||
|
import { logued } from '../../store/features/userStatusSlice/userStatusSlice' |
||||||
|
import ILogin from '../../Interfaces/Ilogin' |
||||||
|
import authDataService from '../../Services/Auth/Auth.Service' |
||||||
|
import '../../css/login.css' |
||||||
|
import jwt_decode from 'jwt-decode' |
||||||
|
import IjwtStructure from '../../Interfaces/IjwtStructure' |
||||||
|
import { RootState } from '../../store/store' |
||||||
|
import { AxiosError } from 'axios' |
||||||
|
import { MsgInformativo } from '../Utils/Toast/msgInformativo' |
||||||
|
import logo from '../../images/GEMCO_mini.png' |
||||||
|
import Dashboard from '../Dashboard/Dashboard' |
||||||
|
import { Alert, Card } from 'react-bootstrap' |
||||||
|
|
||||||
|
export const Login: React.FC<{}> = () => { |
||||||
|
const dispatch = useDispatch() |
||||||
|
const navigate = useNavigate() |
||||||
|
const userLogued = useSelector((state: RootState) => state.userStatus.value) |
||||||
|
const [show, setShow] = React.useState(false) |
||||||
|
const [msg, setMsg] = React.useState('') |
||||||
|
const [header, setHeader] = React.useState('') |
||||||
|
const [msgColor, setMsgColor] = React.useState('primary') |
||||||
|
const initialValues: ILogin = { Usuario: '', Contrasena: '' } |
||||||
|
|
||||||
|
return ( |
||||||
|
<div> |
||||||
|
{!userLogued ? ( |
||||||
|
<div> |
||||||
|
{/* <div> <Alert variant="warning"> |
||||||
|
<Alert.Heading>Aviso importante!</Alert.Heading> |
||||||
|
<p> |
||||||
|
Proximanate esteremos reunicando el contenido de este servidor de aplicaciones, al nuevo dominio de aplicaciones: https://www.gemcousa.mx
|
||||||
|
</p> |
||||||
|
</Alert></div> */} |
||||||
|
<div id='login'> |
||||||
|
<div className='container'> |
||||||
|
<div |
||||||
|
id='login-row' |
||||||
|
className='row justify-content-center align-items-center' |
||||||
|
> |
||||||
|
<div id='login-column' className='col-md-4'> |
||||||
|
<div id='login-box' className='col-md-12'> |
||||||
|
<Formik |
||||||
|
initialValues={initialValues} |
||||||
|
onSubmit={(values: any, actions: any) => { |
||||||
|
authDataService |
||||||
|
.create(values) |
||||||
|
.then((response: any) => { |
||||||
|
localStorage.setItem( |
||||||
|
'menu', |
||||||
|
JSON.stringify(response.data.menu) |
||||||
|
) |
||||||
|
localStorage.setItem('token', response.data.token) |
||||||
|
localStorage.setItem( |
||||||
|
'tokenInfo', |
||||||
|
JSON.stringify(jwt_decode(response.data.token)) |
||||||
|
) |
||||||
|
var values: IjwtStructure = jwt_decode( |
||||||
|
response.data.token |
||||||
|
) |
||||||
|
localStorage.setItem( |
||||||
|
'UserId', |
||||||
|
JSON.stringify(values.UserId) |
||||||
|
) |
||||||
|
localStorage.setItem( |
||||||
|
'User', |
||||||
|
JSON.stringify(values.Usuario) |
||||||
|
) |
||||||
|
localStorage.setItem( |
||||||
|
'Departamento', |
||||||
|
JSON.stringify(values.Departamento) |
||||||
|
) |
||||||
|
localStorage.setItem( |
||||||
|
'UserType', |
||||||
|
JSON.stringify(values.UserType) |
||||||
|
) |
||||||
|
localStorage.setItem( |
||||||
|
'Perfil', |
||||||
|
JSON.stringify(values.Perfil) |
||||||
|
) |
||||||
|
dispatch(logued(true)) |
||||||
|
}) |
||||||
|
.catch((e: AxiosError) => { |
||||||
|
localStorage.setItem('menu', '') |
||||||
|
localStorage.setItem('token', '') |
||||||
|
setHeader('Error') |
||||||
|
if (e.message.includes('400')) { |
||||||
|
setMsg('Credenciales invalidas!') |
||||||
|
} else if (e.message.includes('401')) { |
||||||
|
setMsg( |
||||||
|
'Debere cambiar la contraseña, para poder entrar a este sitio' |
||||||
|
) |
||||||
|
} |
||||||
|
setShow(true) |
||||||
|
}) |
||||||
|
}} |
||||||
|
> |
||||||
|
<Form id='login-form' className='form'> |
||||||
|
<div className='text-center'> |
||||||
|
<img |
||||||
|
src={logo} |
||||||
|
alt='GEMCO' |
||||||
|
width='150px' |
||||||
|
height='150px' |
||||||
|
></img> |
||||||
|
</div> |
||||||
|
<br /> |
||||||
|
<h3 className='text-center text-info'>Bienvenido</h3> |
||||||
|
<div className='form-group'> |
||||||
|
<label htmlFor='username'>Usuario</label> |
||||||
|
<Field |
||||||
|
id='Usuario' |
||||||
|
name='Usuario' |
||||||
|
className='form-control' |
||||||
|
placeholder='Usuario' |
||||||
|
/> |
||||||
|
</div> |
||||||
|
<div className='form-group'> |
||||||
|
<label htmlFor='password'>Contraseña</label> |
||||||
|
<Field |
||||||
|
id='Contrasena' |
||||||
|
name='Contrasena' |
||||||
|
className='form-control' |
||||||
|
placeholder='Contraseña' |
||||||
|
type='password' |
||||||
|
/> |
||||||
|
</div> |
||||||
|
<br /> |
||||||
|
<div className='text-center'> |
||||||
|
<button |
||||||
|
type='submit' |
||||||
|
className='btn btn-primary btn-lg btn-block' |
||||||
|
> |
||||||
|
login |
||||||
|
</button> |
||||||
|
</div> |
||||||
|
</Form> |
||||||
|
</Formik> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<MsgInformativo |
||||||
|
show={show} |
||||||
|
msg={msg} |
||||||
|
header={header} |
||||||
|
msgColor={msgColor} |
||||||
|
closeToast={function (arg: boolean): void { |
||||||
|
setShow(false) |
||||||
|
}} |
||||||
|
/> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
) : ( |
||||||
|
<div><Dashboard/></div> |
||||||
|
)} |
||||||
|
</div> |
||||||
|
) |
||||||
|
} |
||||||
@ -0,0 +1,21 @@ |
|||||||
|
import { FC, useEffect } from 'react' |
||||||
|
import { useNavigate } from 'react-router-dom' |
||||||
|
import { useDispatch } from 'react-redux' |
||||||
|
import { logued } from '../../store/features/userStatusSlice/userStatusSlice' |
||||||
|
|
||||||
|
interface IProps {} |
||||||
|
|
||||||
|
const Logout: FC<IProps> = (props) => { |
||||||
|
const dispatch = useDispatch() |
||||||
|
let navigate = useNavigate() |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
window.localStorage.clear() |
||||||
|
dispatch(logued(false)) |
||||||
|
navigate('/') |
||||||
|
}) |
||||||
|
|
||||||
|
return <div></div> |
||||||
|
} |
||||||
|
|
||||||
|
export default Logout |
||||||
@ -0,0 +1,37 @@ |
|||||||
|
import { FC } from 'react' |
||||||
|
import { NavDropdown } from 'react-bootstrap' |
||||||
|
import IUsuariosPerfilesMenu from '../../Interfaces/IPerfilesMenu' |
||||||
|
|
||||||
|
interface IProps { |
||||||
|
menu: IUsuariosPerfilesMenu[] | undefined |
||||||
|
} |
||||||
|
|
||||||
|
const MenuUsuario: FC<IProps> = (props) => { |
||||||
|
return ( |
||||||
|
<div> |
||||||
|
{props.menu |
||||||
|
? props.menu.map((mainMenu) => { |
||||||
|
return mainMenu.padreId === 0 ? ( |
||||||
|
<NavDropdown title={mainMenu.descripcion} id='basic-nav-dropdown'> |
||||||
|
{props.menu |
||||||
|
? props.menu.map((item) => { |
||||||
|
return item.padreId === mainMenu.itemMenu ? ( |
||||||
|
<NavDropdown.Item key={item.id} href={item.url}> |
||||||
|
{item.descripcion} |
||||||
|
</NavDropdown.Item> |
||||||
|
) : ( |
||||||
|
'' |
||||||
|
) |
||||||
|
}) |
||||||
|
: null} |
||||||
|
</NavDropdown> |
||||||
|
) : ( |
||||||
|
'' |
||||||
|
) |
||||||
|
}) |
||||||
|
: null} |
||||||
|
</div> |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
export default MenuUsuario |
||||||
@ -0,0 +1,276 @@ |
|||||||
|
import React, { FC, useEffect, useState } from 'react' |
||||||
|
import { Alert, Button, Col, Form, Modal, Row, Table } from 'react-bootstrap' |
||||||
|
import DataTable from 'react-data-table-component' |
||||||
|
import { IRegister } from '../../../Interfaces/IRegister' |
||||||
|
import usuariosServices from '../../../Services/Catalogos/Usuarios.Services' |
||||||
|
import PerfilesServices from '../../../Services/Catalogos/PerfilesMenu.Services' |
||||||
|
import { IPerfil } from '../../../Interfaces/Catalogos/IPerfiles' |
||||||
|
import { IconContext } from 'react-icons' |
||||||
|
import { |
||||||
|
BsCheckCircleFill, |
||||||
|
BsCheckLg, |
||||||
|
BsFillPersonCheckFill, |
||||||
|
BsFillPersonDashFill |
||||||
|
} from 'react-icons/bs' |
||||||
|
|
||||||
|
interface IProps { |
||||||
|
show: boolean |
||||||
|
CloseModal: (arg: boolean) => void |
||||||
|
GetUserInfo: (arg: IRegister) => void |
||||||
|
} |
||||||
|
|
||||||
|
export const UserList: React.FC<IProps> = (props) => { |
||||||
|
const [sDialog, setsDialog] = React.useState(true) |
||||||
|
const [Usuarios, setUsuarios] = React.useState<IRegister[]>() |
||||||
|
const [Data, setData] = useState<IRegister[]>([]) |
||||||
|
const [DataPerfiles, setDataPerfiles] = useState<IPerfil[]>([]) |
||||||
|
const [DataOriginal, setDataOriginal] = useState<IRegister[]>([]) |
||||||
|
const [filtro, setFiltro] = useState('') |
||||||
|
const columnsConcepts = [ |
||||||
|
{ |
||||||
|
name: 'id', |
||||||
|
width: '70px', |
||||||
|
cell: (row: IRegister) => ( |
||||||
|
<div |
||||||
|
style={{ width: '100%' }} |
||||||
|
onClick={() => { |
||||||
|
props.GetUserInfo(row) |
||||||
|
}} |
||||||
|
> |
||||||
|
{row.id} |
||||||
|
</div> |
||||||
|
), |
||||||
|
sortable: true |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: 'Usuario', |
||||||
|
width: '200px', |
||||||
|
cell: (row: IRegister) => ( |
||||||
|
<div |
||||||
|
style={{ width: '100%' }} |
||||||
|
onClick={() => { |
||||||
|
props.GetUserInfo(row) |
||||||
|
}} |
||||||
|
> |
||||||
|
{row.usuario} |
||||||
|
</div> |
||||||
|
), |
||||||
|
sortable: true |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: 'Nombre', |
||||||
|
width: '250px', |
||||||
|
cell: (row: IRegister) => ( |
||||||
|
<div |
||||||
|
style={{ width: '100%' }} |
||||||
|
onClick={() => { |
||||||
|
props.GetUserInfo(row) |
||||||
|
}} |
||||||
|
> |
||||||
|
{row.nombre} |
||||||
|
</div> |
||||||
|
), |
||||||
|
sortable: true |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: 'Correo', |
||||||
|
width: '250px', |
||||||
|
cell: (row: IRegister) => ( |
||||||
|
<div |
||||||
|
style={{ width: '100%' }} |
||||||
|
onClick={() => { |
||||||
|
props.GetUserInfo(row) |
||||||
|
}} |
||||||
|
> |
||||||
|
{row.correo} |
||||||
|
</div> |
||||||
|
), |
||||||
|
sortable: true |
||||||
|
}, |
||||||
|
/* { |
||||||
|
name: 'Ultima visita', |
||||||
|
width: '125px', |
||||||
|
cell: (row: IRegister) => ( |
||||||
|
<div |
||||||
|
style={{ width: '100%' }} |
||||||
|
onClick={() => { |
||||||
|
props.GetUserInfo(row) |
||||||
|
}} |
||||||
|
> |
||||||
|
{row.fechaUltimaVisita} |
||||||
|
</div> |
||||||
|
), |
||||||
|
sortable: true |
||||||
|
}, */ |
||||||
|
{ |
||||||
|
name: 'Perfil', |
||||||
|
width: '250px', |
||||||
|
cell: (row: IRegister) => ( |
||||||
|
<div |
||||||
|
style={{ width: '100%' }} |
||||||
|
onClick={() => { |
||||||
|
props.GetUserInfo(row) |
||||||
|
}} |
||||||
|
> |
||||||
|
{getProfile(row.idPerfil)} |
||||||
|
</div> |
||||||
|
), |
||||||
|
sortable: true |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: 'Estatus', |
||||||
|
width: '90px', |
||||||
|
cell: (row: IRegister) => ( |
||||||
|
<div |
||||||
|
style={{ width: '100%', textAlign:'center' }} |
||||||
|
onClick={() => { |
||||||
|
props.GetUserInfo(row) |
||||||
|
}} |
||||||
|
> |
||||||
|
{row.activo == 1 ? ( |
||||||
|
<IconContext.Provider value={{ color: 'green', size: '20px' }}> |
||||||
|
<BsCheckCircleFill /> |
||||||
|
</IconContext.Provider> |
||||||
|
) : ( |
||||||
|
<IconContext.Provider value={{ color: 'red', size: '20px' }}> |
||||||
|
<BsFillPersonDashFill /> |
||||||
|
</IconContext.Provider> |
||||||
|
)} |
||||||
|
</div> |
||||||
|
), |
||||||
|
sortable: true |
||||||
|
} |
||||||
|
] |
||||||
|
|
||||||
|
const getProfile = (Id: number) => { |
||||||
|
const NoAsignado = ' - NO ASIGNADO -' |
||||||
|
if (Id === 0) return NoAsignado |
||||||
|
else if (DataPerfiles) { |
||||||
|
const Profile = DataPerfiles.filter((item) => item.id === Id) |
||||||
|
return Profile[0].perfil ? Profile[0].perfil : NoAsignado |
||||||
|
} |
||||||
|
return NoAsignado |
||||||
|
} |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
usuariosServices |
||||||
|
.getAllUsuarios() |
||||||
|
.then((response) => { |
||||||
|
setData(response.data) |
||||||
|
setDataOriginal(response.data) |
||||||
|
}) |
||||||
|
.catch((e: Error) => { |
||||||
|
console.log(e) |
||||||
|
}) |
||||||
|
PerfilesServices.getAllPerfiles() |
||||||
|
.then((response) => { |
||||||
|
setDataPerfiles(response.data) |
||||||
|
}) |
||||||
|
.catch((e: Error) => { |
||||||
|
console.log(e) |
||||||
|
}) |
||||||
|
}, [props.show]) |
||||||
|
|
||||||
|
const filtraReporte = (e: any) => { |
||||||
|
setFiltro(e.target.value) |
||||||
|
if (e.target.value.length > 0) { |
||||||
|
setData( |
||||||
|
Data.filter(function (row) { |
||||||
|
return ( |
||||||
|
row.id.toString().includes(e.target.value) || |
||||||
|
row.usuario.toLowerCase().includes(e.target.value) || |
||||||
|
row.nombre.toLowerCase().includes(e.target.value) || |
||||||
|
row.correo.toLowerCase().includes(e.target.value) |
||||||
|
) |
||||||
|
}) |
||||||
|
) |
||||||
|
} else { |
||||||
|
setData(DataOriginal) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
return props.show ? ( |
||||||
|
<Modal |
||||||
|
{...props} |
||||||
|
size="lg" |
||||||
|
aria-labelledby="contained-modal-title-vcenter" |
||||||
|
centered |
||||||
|
dialogClassName={'modal-70w'} |
||||||
|
> |
||||||
|
<Modal.Header> |
||||||
|
<Modal.Title id="contained-modal-title-vcenter"></Modal.Title> |
||||||
|
</Modal.Header> |
||||||
|
<Alert> |
||||||
|
<Row> |
||||||
|
<Col xs={2}> |
||||||
|
<h5>Lista de usuarios</h5> |
||||||
|
</Col> |
||||||
|
<Col xs={10}> |
||||||
|
<Form.Control |
||||||
|
type="text" |
||||||
|
size="sm" |
||||||
|
placeholder="Search..." |
||||||
|
onChange={(e) => { |
||||||
|
filtraReporte(e) |
||||||
|
}} |
||||||
|
/> |
||||||
|
</Col> |
||||||
|
</Row> |
||||||
|
</Alert> |
||||||
|
<Modal.Body> |
||||||
|
<DataTable |
||||||
|
noHeader |
||||||
|
defaultSortFieldId={'id'} |
||||||
|
defaultSortAsc={true} |
||||||
|
striped={true} |
||||||
|
dense={true} |
||||||
|
paginationPerPage={10} |
||||||
|
pagination |
||||||
|
highlightOnHover |
||||||
|
columns={columnsConcepts} |
||||||
|
data={Data} |
||||||
|
pointerOnHover |
||||||
|
/> |
||||||
|
{/* <Table striped bordered hover> |
||||||
|
<thead> |
||||||
|
<tr> |
||||||
|
<th>id</th> |
||||||
|
<th>Usuario</th> |
||||||
|
<th>Nombre</th> |
||||||
|
<th>Correo</th> |
||||||
|
<th>Ultima visita</th> |
||||||
|
<th>Activo</th> |
||||||
|
</tr> |
||||||
|
</thead> |
||||||
|
<tbody> |
||||||
|
{Usuarios |
||||||
|
? Usuarios.map((rec, index) => ( |
||||||
|
<tr |
||||||
|
onClick={() => { |
||||||
|
props.GetUserInfo(rec) |
||||||
|
}} |
||||||
|
> |
||||||
|
<td>{rec.id}</td> |
||||||
|
<td>{rec.usuario}</td> |
||||||
|
<td>{rec.nombre}</td> |
||||||
|
<td>{rec.correo}</td> |
||||||
|
<td>{rec.fechaUltimaVisita}</td> |
||||||
|
<td>{rec.activo == 0 ? 'Inactivo' : 'Activo'}</td> |
||||||
|
</tr> |
||||||
|
)) |
||||||
|
: null} |
||||||
|
</tbody> |
||||||
|
</Table> */} |
||||||
|
</Modal.Body> |
||||||
|
<Modal.Footer> |
||||||
|
<Button |
||||||
|
onClick={() => { |
||||||
|
props.CloseModal(false) |
||||||
|
}} |
||||||
|
> |
||||||
|
Close |
||||||
|
</Button> |
||||||
|
</Modal.Footer> |
||||||
|
</Modal> |
||||||
|
) : null |
||||||
|
} |
||||||
@ -0,0 +1,258 @@ |
|||||||
|
import React, { FC, useEffect } from 'react' |
||||||
|
import { Button, Modal, Table } from 'react-bootstrap' |
||||||
|
import IPerfilesMenu from '../../../Interfaces/IPerfilesMenu' |
||||||
|
import perfilesMenuServices from '../../../Services/Catalogos/PerfilesMenu.Services' |
||||||
|
import { IPerfil } from '../../../Interfaces/Catalogos/IPerfiles' |
||||||
|
import { NuevoPerfil } from './nuevoPerfil/NuevoPerfil' |
||||||
|
import '../../../css/menu2.css' |
||||||
|
import '../../../css/generic01.css' |
||||||
|
import DTOItemMenuPerfil from '../../../DTO/DTOItemMenuPerfil' |
||||||
|
import { NuevoItemMenu } from './nuevoItemMenu/NuevoItemMenu' |
||||||
|
|
||||||
|
interface IProps { |
||||||
|
show: boolean |
||||||
|
CloseModal: (arg: boolean) => void |
||||||
|
// GetUserInfo: (arg: IRegister) => void;
|
||||||
|
CloseModalPerfiles: (arg: boolean) => void |
||||||
|
} |
||||||
|
|
||||||
|
interface IPropsChild { |
||||||
|
item: IPerfilesMenu |
||||||
|
menu: IPerfilesMenu[] |
||||||
|
IdPerfil: number |
||||||
|
} |
||||||
|
|
||||||
|
const MenuChild: React.FC<IPropsChild> = (props) => { |
||||||
|
const [DialogNewItemMenu, setDialogNewItemMenu] = React.useState(false) |
||||||
|
const [ItemMenu, setItemMenu] = React.useState(0) |
||||||
|
function addItemMenu(id: number, e: any) { |
||||||
|
const data: DTOItemMenuPerfil = { |
||||||
|
IdPerfil: props.IdPerfil, |
||||||
|
itemMenu: id, |
||||||
|
asignado: e.currentTarget.checked |
||||||
|
} |
||||||
|
console.log(data) |
||||||
|
perfilesMenuServices |
||||||
|
.toggleItemMenu(data) |
||||||
|
.then((response) => {}) |
||||||
|
.catch((e: Error) => { |
||||||
|
console.log(e) |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
const createItemMenu = (value: boolean): void => { |
||||||
|
alert('crea item menu') |
||||||
|
} |
||||||
|
|
||||||
|
const CloseModalItemMenu = (show: boolean): void => { |
||||||
|
setDialogNewItemMenu(false) |
||||||
|
} |
||||||
|
|
||||||
|
return ( |
||||||
|
<> |
||||||
|
<li> |
||||||
|
<input |
||||||
|
className="form-check-input" |
||||||
|
type="checkbox" |
||||||
|
value="" |
||||||
|
defaultChecked={props.item.agrupado == 1 ? true : false} |
||||||
|
id={'Chk' + props.item.id} |
||||||
|
onClick={(e) => { |
||||||
|
addItemMenu(props.item.id, e) |
||||||
|
}} |
||||||
|
/> |
||||||
|
|
||||||
|
<a href="javascript:;"> |
||||||
|
{props.item.descripcion} |
||||||
|
<span |
||||||
|
onClick={() => { |
||||||
|
setItemMenu(props.item.id) |
||||||
|
setDialogNewItemMenu(true) |
||||||
|
}} |
||||||
|
> |
||||||
|
... + |
||||||
|
</span> |
||||||
|
</a> |
||||||
|
<ul> |
||||||
|
{props.menu.map((m, index) => |
||||||
|
m.padreId === props.item.id ? ( |
||||||
|
<li> |
||||||
|
<input |
||||||
|
className="form-check-input" |
||||||
|
type="checkbox" |
||||||
|
value="" |
||||||
|
defaultChecked={m.agrupado == 1 ? true : false} |
||||||
|
id={'Chk' + m.id} |
||||||
|
onClick={(e) => { |
||||||
|
addItemMenu(m.id, e) |
||||||
|
}} |
||||||
|
/> |
||||||
|
|
||||||
|
<a href="javascript:;"> |
||||||
|
{m.descripcion} |
||||||
|
<span |
||||||
|
onClick={() => { |
||||||
|
setItemMenu(m.id) |
||||||
|
setDialogNewItemMenu(true) |
||||||
|
}} |
||||||
|
> |
||||||
|
... ++ |
||||||
|
</span> |
||||||
|
</a> |
||||||
|
<ul> |
||||||
|
{props.menu |
||||||
|
.filter((m2) => m2.padreId === m.id) |
||||||
|
.map((m2, index) => ( |
||||||
|
<li> |
||||||
|
<input |
||||||
|
className="form-check-input" |
||||||
|
type="checkbox" |
||||||
|
value="" |
||||||
|
defaultChecked={m2.agrupado == 1 ? true : false} |
||||||
|
id={'Chk_lv2' + m2.id} |
||||||
|
onClick={(e) => { |
||||||
|
addItemMenu(m2.id, e) |
||||||
|
}} |
||||||
|
/> |
||||||
|
|
||||||
|
<a href="">{m2.descripcion}</a> |
||||||
|
</li> |
||||||
|
))} |
||||||
|
</ul> |
||||||
|
</li> |
||||||
|
) : ( |
||||||
|
'' |
||||||
|
) |
||||||
|
)} |
||||||
|
</ul> |
||||||
|
</li> |
||||||
|
<NuevoItemMenu |
||||||
|
show={DialogNewItemMenu} |
||||||
|
ItemMenu={ItemMenu} |
||||||
|
CloseModalPerfiles={CloseModalItemMenu} |
||||||
|
/> |
||||||
|
</> |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
export const AdmonPerfiles: React.FC<IProps> = (props) => { |
||||||
|
const [sDialog, setsDialog] = React.useState(true) |
||||||
|
const [DialogNewProfile, setDialogNewProfile] = React.useState(false) |
||||||
|
const [Menu, setMenu] = React.useState<IPerfilesMenu[]>() |
||||||
|
const [IdPerfil, setIdPerfil] = React.useState(0) |
||||||
|
const [Perfiles, setPerfiles] = React.useState<IPerfil[]>() |
||||||
|
useEffect(() => { |
||||||
|
perfilesMenuServices |
||||||
|
.getAllPerfiles() |
||||||
|
.then((response) => { |
||||||
|
setPerfiles(response.data) |
||||||
|
console.log(response.data) |
||||||
|
}) |
||||||
|
.catch((e: Error) => { |
||||||
|
console.log(e) |
||||||
|
}) |
||||||
|
loadPerfil(0) |
||||||
|
}, [props.show]) |
||||||
|
|
||||||
|
function loadPerfil(id: number) { |
||||||
|
setMenu([]) |
||||||
|
perfilesMenuServices |
||||||
|
.getPerfilMenuById(id) |
||||||
|
.then((response) => { |
||||||
|
setMenu(response.data) |
||||||
|
}) |
||||||
|
.catch((e: Error) => { |
||||||
|
console.log(e) |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
const createProfile = (value: boolean): void => { |
||||||
|
alert('crea nuevo perfil') |
||||||
|
} |
||||||
|
|
||||||
|
const CloseModalPerfiles = (show: boolean): void => { |
||||||
|
setDialogNewProfile(false) |
||||||
|
} |
||||||
|
|
||||||
|
const onChangePerfil = (e: any): void => { |
||||||
|
setIdPerfil(e.currentTarget.value) |
||||||
|
loadPerfil(e.currentTarget.value) |
||||||
|
} |
||||||
|
|
||||||
|
return props.show ? ( |
||||||
|
<> |
||||||
|
<Modal |
||||||
|
{...props} |
||||||
|
size="lg" |
||||||
|
aria-labelledby="contained-modal-title-vcenter" |
||||||
|
centered |
||||||
|
contentClassName="" |
||||||
|
> |
||||||
|
<Modal.Header> |
||||||
|
<Modal.Title id="contained-modal-title-vcenter"> |
||||||
|
<div className="container"> |
||||||
|
<div className="row">Administrador de perfiles</div> |
||||||
|
<div className="row"> |
||||||
|
<div className="col-auto"> |
||||||
|
<select |
||||||
|
className="form-select" |
||||||
|
aria-label="Perfiles" |
||||||
|
onChange={onChangePerfil} |
||||||
|
> |
||||||
|
{Perfiles?.map((p) => { |
||||||
|
return <option value={p.id}>{p.perfil}</option> |
||||||
|
})} |
||||||
|
</select> |
||||||
|
</div> |
||||||
|
<div className="col"></div> |
||||||
|
<div className="col-auto"> |
||||||
|
<button |
||||||
|
type="button" |
||||||
|
className="btn btn-primary" |
||||||
|
onClick={() => { |
||||||
|
setDialogNewProfile(true) |
||||||
|
}} |
||||||
|
> |
||||||
|
Nuevo |
||||||
|
</button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</Modal.Title> |
||||||
|
</Modal.Header> |
||||||
|
<Modal.Body className="divPerfiles"> |
||||||
|
<div className="tree" style={{ backgroundColor: '#FFFFFF' }}> |
||||||
|
<ul> |
||||||
|
<li> |
||||||
|
<a href="#">Menu</a> |
||||||
|
<ul> |
||||||
|
{Menu?.map((item, index) => |
||||||
|
item.padreId === 0 ? ( |
||||||
|
<MenuChild menu={Menu} item={item} IdPerfil={IdPerfil} /> |
||||||
|
) : ( |
||||||
|
'' |
||||||
|
) |
||||||
|
)} |
||||||
|
</ul> |
||||||
|
</li> |
||||||
|
</ul> |
||||||
|
</div> |
||||||
|
</Modal.Body> |
||||||
|
<Modal.Footer> |
||||||
|
<Button |
||||||
|
onClick={() => { |
||||||
|
props.CloseModal(false) |
||||||
|
}} |
||||||
|
> |
||||||
|
Close |
||||||
|
</Button> |
||||||
|
</Modal.Footer> |
||||||
|
</Modal> |
||||||
|
<NuevoPerfil |
||||||
|
show={DialogNewProfile} |
||||||
|
createProfile={createProfile} |
||||||
|
CloseModalPerfiles={CloseModalPerfiles} |
||||||
|
/> |
||||||
|
</> |
||||||
|
) : null |
||||||
|
} |
||||||
@ -0,0 +1,193 @@ |
|||||||
|
import React, { FC, useEffect } from 'react' |
||||||
|
import { Button, Modal, Toast, ToastContainer } from 'react-bootstrap' |
||||||
|
import { propTypes } from 'react-bootstrap/esm/Image' |
||||||
|
import { IPerfil } from '../../../../Interfaces/Catalogos/IPerfiles' |
||||||
|
import perfilesMenuServices from '../../../../Services/Catalogos/PerfilesMenu.Services' |
||||||
|
import DTOPerfilCreate from '../../../../DTO/DTOPerfilCreate' |
||||||
|
import IPerfilesMenu from '../../../../Interfaces/IPerfilesMenu' |
||||||
|
import IItemMenu from '../../../../Interfaces/Catalogos/IItemMenu' |
||||||
|
|
||||||
|
interface IProps { |
||||||
|
show: boolean |
||||||
|
ItemMenu: number |
||||||
|
CloseModalPerfiles: (arg: boolean) => void |
||||||
|
} |
||||||
|
|
||||||
|
export const NuevoItemMenu: FC<IProps> = (props) => { |
||||||
|
const [ItemMenu, setItemMenu] = React.useState(props.ItemMenu) |
||||||
|
const [descripcion, setDescripcion] = React.useState('') |
||||||
|
const [posicion, setPosicion] = React.useState(1) |
||||||
|
const [url, setUrl] = React.useState('') |
||||||
|
const [MenuItems, setMenuItems] = React.useState<IPerfilesMenu[]>() |
||||||
|
const [msgError, setMsgError] = React.useState('') |
||||||
|
const [msgDialog, setMsgDialog] = React.useState(false) |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
console.log('props=' + JSON.stringify(props)) |
||||||
|
}, [props]) |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
perfilesMenuServices |
||||||
|
.getMenu() |
||||||
|
.then((response) => { |
||||||
|
setMenuItems(response.data) |
||||||
|
console.log(response.data) |
||||||
|
}) |
||||||
|
.catch((e: Error) => { |
||||||
|
console.log(e) |
||||||
|
}) |
||||||
|
setItemMenu(props.ItemMenu) |
||||||
|
}, [props.show]) |
||||||
|
|
||||||
|
function validatePerfil() { |
||||||
|
var msg = 'Proporcione: ' |
||||||
|
if (!descripcion.length) msg += 'la descripcion / ' |
||||||
|
if (!url.length) msg += 'la URL' |
||||||
|
if (msg != 'Proporcione: ') { |
||||||
|
setMsgError(msg) |
||||||
|
setMsgDialog(true) |
||||||
|
} |
||||||
|
const data: IItemMenu = { |
||||||
|
id: 0, |
||||||
|
padreId: ItemMenu, |
||||||
|
posicion: posicion, |
||||||
|
descripcion: descripcion, |
||||||
|
url: url, |
||||||
|
} |
||||||
|
|
||||||
|
perfilesMenuServices |
||||||
|
.createItemMenu(data) |
||||||
|
.then((response) => { |
||||||
|
if (response.status == 200) |
||||||
|
alert('El item de menu se creo existosamente!') |
||||||
|
console.log(response.data) |
||||||
|
}) |
||||||
|
.catch((e: Error) => { |
||||||
|
console.log(e) |
||||||
|
}) |
||||||
|
console.log(ItemMenu + ' ' + descripcion + ' ' + posicion + ' ' + url) |
||||||
|
} |
||||||
|
|
||||||
|
const onChangeItem = (e: any): void => { |
||||||
|
//value: number = e.currentTarget.value;
|
||||||
|
setItemMenu(e.currentTarget.value) |
||||||
|
} |
||||||
|
|
||||||
|
return ( |
||||||
|
<Modal show={props.show}> |
||||||
|
<Modal.Header> |
||||||
|
<Modal.Title>Nuevo item de menu</Modal.Title> |
||||||
|
</Modal.Header> |
||||||
|
<Modal.Body> |
||||||
|
<div className='row'> |
||||||
|
<form> |
||||||
|
<div className='mb-3'> |
||||||
|
<label className='form-label'>El item sera hijo de:</label> |
||||||
|
<select |
||||||
|
className='form-select' |
||||||
|
aria-label='Perfiles' |
||||||
|
defaultValue={ItemMenu} |
||||||
|
onChange={onChangeItem} |
||||||
|
value={ItemMenu} |
||||||
|
> |
||||||
|
<option value='0'>Menu</option> |
||||||
|
{MenuItems?.map((m) => { |
||||||
|
return m.id === props.ItemMenu ? ( |
||||||
|
<option value={m.id}>{m.descripcion}</option> |
||||||
|
) : null |
||||||
|
})} |
||||||
|
</select> |
||||||
|
</div> |
||||||
|
<div className='mb-3'> |
||||||
|
<label className='form-label'>Descripcion</label> |
||||||
|
<input |
||||||
|
className='form-control' |
||||||
|
id='Descripcion' |
||||||
|
aria-describedby='Descripcion' |
||||||
|
onChange={(e) => { |
||||||
|
setDescripcion(e.currentTarget.value) |
||||||
|
}} |
||||||
|
/> |
||||||
|
</div> |
||||||
|
<div className='mb-3'> |
||||||
|
<label className='form-label'>Posicion</label> |
||||||
|
<select |
||||||
|
className='form-select' |
||||||
|
aria-label='Perfiles' |
||||||
|
onChange={(e) => { |
||||||
|
setPosicion(parseInt(e.currentTarget.value)) |
||||||
|
}} |
||||||
|
> |
||||||
|
{[...Array(41)].map((x, i) => |
||||||
|
i > 0 ? <option value={i}>{i}</option> : null |
||||||
|
)} |
||||||
|
</select> |
||||||
|
</div> |
||||||
|
<div className='mb-3'> |
||||||
|
<label className='form-label'>Url</label> |
||||||
|
<input |
||||||
|
className='form-control' |
||||||
|
id='url' |
||||||
|
aria-describedby='url' |
||||||
|
onChange={(e) => { |
||||||
|
setUrl(e.target.value) |
||||||
|
}} |
||||||
|
/> |
||||||
|
</div> |
||||||
|
</form> |
||||||
|
</div> |
||||||
|
</Modal.Body> |
||||||
|
<Modal.Footer> |
||||||
|
<div className='row'> |
||||||
|
<div className='col'> |
||||||
|
<Button |
||||||
|
variant='secondary' |
||||||
|
onClick={() => { |
||||||
|
props.CloseModalPerfiles(false) |
||||||
|
}} |
||||||
|
> |
||||||
|
Cerrar |
||||||
|
</Button> |
||||||
|
</div> |
||||||
|
<div className='col'></div> |
||||||
|
<div className='col'></div> |
||||||
|
<div className='col'></div> |
||||||
|
<div className='col'></div> |
||||||
|
<div className='col'></div> |
||||||
|
<div className='col'></div> |
||||||
|
<div className='col'></div> |
||||||
|
<div className='col'></div> |
||||||
|
<div className='col'></div> |
||||||
|
<div className='col'></div> |
||||||
|
<div className='col'> |
||||||
|
<Button |
||||||
|
variant='primary' |
||||||
|
onClick={() => { |
||||||
|
//props.createProfile(true);
|
||||||
|
validatePerfil() |
||||||
|
}} |
||||||
|
> |
||||||
|
Guardar |
||||||
|
</Button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</Modal.Footer> |
||||||
|
<ToastContainer position={'middle-center'}> |
||||||
|
<Toast |
||||||
|
onClose={() => setMsgDialog(false)} |
||||||
|
show={msgDialog} |
||||||
|
delay={3000} |
||||||
|
bg='dark' |
||||||
|
autohide |
||||||
|
> |
||||||
|
<Toast.Header> |
||||||
|
<strong className='me-auto'>Error!</strong> |
||||||
|
</Toast.Header> |
||||||
|
<Toast.Body style={{ backgroundColor: '#F8F9F9' }}> |
||||||
|
{msgError} |
||||||
|
</Toast.Body> |
||||||
|
</Toast> |
||||||
|
</ToastContainer> |
||||||
|
</Modal> |
||||||
|
) |
||||||
|
} |
||||||
@ -0,0 +1,125 @@ |
|||||||
|
import React, { FC, useEffect } from 'react' |
||||||
|
import { Button, Modal } from 'react-bootstrap' |
||||||
|
import { propTypes } from 'react-bootstrap/esm/Image' |
||||||
|
import { IPerfil } from '../../../../Interfaces/Catalogos/IPerfiles' |
||||||
|
import perfilesMenuServices from '../../../../Services/Catalogos/PerfilesMenu.Services' |
||||||
|
import DTOPerfilCreate from '../../../../DTO/DTOPerfilCreate' |
||||||
|
|
||||||
|
interface IProps { |
||||||
|
show: boolean |
||||||
|
CloseModalPerfiles: (arg: boolean) => void |
||||||
|
createProfile: (value: true) => void |
||||||
|
} |
||||||
|
|
||||||
|
export const NuevoPerfil: FC<IProps> = (props) => { |
||||||
|
const [IdPerfil, setIdPerfil] = React.useState(0) |
||||||
|
const [nombrePerfil, setnombrePerfil] = React.useState('') |
||||||
|
const [Perfiles, setPerfiles] = React.useState<IPerfil[]>() |
||||||
|
useEffect(() => { |
||||||
|
perfilesMenuServices |
||||||
|
.getAllPerfiles() |
||||||
|
.then((response) => { |
||||||
|
setPerfiles(response.data) |
||||||
|
console.log(response.data) |
||||||
|
}) |
||||||
|
.catch((e: Error) => { |
||||||
|
console.log(e) |
||||||
|
}) |
||||||
|
}, [props.show]) |
||||||
|
|
||||||
|
function validatePerfil() { |
||||||
|
if (!nombrePerfil.length) alert('Proporcione el nombre del perfil') |
||||||
|
const data: DTOPerfilCreate = { |
||||||
|
Perfil: nombrePerfil, |
||||||
|
IdPerfilClonado: IdPerfil, |
||||||
|
} |
||||||
|
perfilesMenuServices |
||||||
|
.createPerfil(data) |
||||||
|
.then((response) => { |
||||||
|
if (response.status == 200) alert('El perfil se creo existosamente') |
||||||
|
console.log(response.data) |
||||||
|
}) |
||||||
|
.catch((e: Error) => { |
||||||
|
console.log(e) |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
const onChangePerfil = (e: any): void => { |
||||||
|
setIdPerfil(e.currentTarget.value) |
||||||
|
} |
||||||
|
|
||||||
|
return ( |
||||||
|
<Modal show={props.show}> |
||||||
|
<Modal.Header> |
||||||
|
<Modal.Title>Nuevo perfil</Modal.Title> |
||||||
|
</Modal.Header> |
||||||
|
<Modal.Body> |
||||||
|
<div className='row'> |
||||||
|
<form> |
||||||
|
<div className='mb-3'> |
||||||
|
<label className='form-label'> |
||||||
|
Clona informacion del perfil: |
||||||
|
</label> |
||||||
|
<select |
||||||
|
className='form-select' |
||||||
|
aria-label='Perfiles' |
||||||
|
onChange={onChangePerfil} |
||||||
|
> |
||||||
|
{Perfiles?.map((p) => { |
||||||
|
return <option value={p.id}>{p.perfil}</option> |
||||||
|
})} |
||||||
|
</select> |
||||||
|
</div> |
||||||
|
<div className='mb-3'> |
||||||
|
<label className='form-label'>Nombre</label> |
||||||
|
<input |
||||||
|
type='email' |
||||||
|
className='form-control' |
||||||
|
id='exampleInputEmail1' |
||||||
|
aria-describedby='emailHelp' |
||||||
|
onChange={(e) => { |
||||||
|
setnombrePerfil(e.currentTarget.value) |
||||||
|
}} |
||||||
|
/> |
||||||
|
</div> |
||||||
|
</form> |
||||||
|
</div> |
||||||
|
</Modal.Body> |
||||||
|
<Modal.Footer> |
||||||
|
<div className='row'> |
||||||
|
<div className='col'> |
||||||
|
<Button |
||||||
|
variant='secondary' |
||||||
|
onClick={() => { |
||||||
|
props.CloseModalPerfiles(false) |
||||||
|
}} |
||||||
|
> |
||||||
|
Cerrar |
||||||
|
</Button> |
||||||
|
</div> |
||||||
|
<div className='col'></div> |
||||||
|
<div className='col'></div> |
||||||
|
<div className='col'></div> |
||||||
|
<div className='col'></div> |
||||||
|
<div className='col'></div> |
||||||
|
<div className='col'></div> |
||||||
|
<div className='col'></div> |
||||||
|
<div className='col'></div> |
||||||
|
<div className='col'></div> |
||||||
|
<div className='col'></div> |
||||||
|
<div className='col'> |
||||||
|
<Button |
||||||
|
variant='primary' |
||||||
|
onClick={() => { |
||||||
|
//props.createProfile(true);
|
||||||
|
validatePerfil() |
||||||
|
}} |
||||||
|
> |
||||||
|
Guardar |
||||||
|
</Button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</Modal.Footer> |
||||||
|
</Modal> |
||||||
|
) |
||||||
|
} |
||||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,525 @@ |
|||||||
|
import { RowClickedEvent } from 'ag-grid-community' |
||||||
|
import { AgGridReact } from 'ag-grid-react' |
||||||
|
import React, { FC, useEffect, useState } from 'react' |
||||||
|
import { Button, Card, Form, Modal } from 'react-bootstrap' |
||||||
|
import ICorresponsalTrafico from '../../Interfaces/Corresponsales/ICorresponsalTrafico' |
||||||
|
import ClientesDataService from '../../Services/Catalogos/Clientes.Services' |
||||||
|
import { MsgInformativo } from '../Utils/Toast/msgInformativo' |
||||||
|
import IClientes from '../../Interfaces/Catalogos/IClientes' |
||||||
|
import { BsPlusLg, BsFileEarmarkExcel, BsSearch, BsFillXCircleFill, BsCheckCircleFill } from 'react-icons/bs' |
||||||
|
import * as XLSX from 'xlsx' |
||||||
|
import TraficoCorresponsales from '../Corresponsales/TraficoCorresponsales' |
||||||
|
import ICatCorresponsales from '../../Interfaces/Catalogos/ICatCorresponsales' |
||||||
|
import CorresponsalesDataService from '../../Services/Catalogos/Corresponsales.Services' |
||||||
|
import reportesServices from '../../Services/Reportes/reportes.services' |
||||||
|
import moment from 'moment' |
||||||
|
import DTORptCorresponsalesTraficos from '../../DTO/Corresponsales/DTORptCorresponsalesTraficos' |
||||||
|
import { InitCorresponsalesFacturas } from '../../store/features/Corresponsales/CorresponsalesFacturasSlice' |
||||||
|
import { InitCorresponsalesFacturasTerceros } from '../../store/features/Corresponsales/CorresponsalesFacturasTercerosSlice' |
||||||
|
import { InitCorresponsalesContenedores } from '../../store/features/Corresponsales/CorresponsalesContenedoresSlice' |
||||||
|
import { useDispatch } from 'react-redux' |
||||||
|
import { IconContext } from 'react-icons' |
||||||
|
import { ProgressBar } from './customCells/progressBar' |
||||||
|
import { useParams } from 'react-router-dom' |
||||||
|
import { FaHandSparkles } from 'react-icons/fa' |
||||||
|
|
||||||
|
interface IProps {} |
||||||
|
|
||||||
|
export default function RptCorresponsalesTraficos (props: IProps) { |
||||||
|
const { proc, modo } = useParams() |
||||||
|
const [UserId, setUserId] = useState(() => { |
||||||
|
const stickyValue = window.localStorage.getItem('UserId') |
||||||
|
return stickyValue !== null ? JSON.parse(stickyValue) : 0 |
||||||
|
}) |
||||||
|
const [Depto, setDepto] = useState(() => { |
||||||
|
const stickyValue = window.localStorage.getItem('Departamento') |
||||||
|
return stickyValue !== null ? JSON.parse(stickyValue) : '' |
||||||
|
}) |
||||||
|
const queryParams = new URLSearchParams(window.location.search) |
||||||
|
const status = queryParams.get('status') |
||||||
|
const [StatusAnticipos, setStatusAnticipos] = useState(status ? parseInt(status) : 0) |
||||||
|
const dispatch = useDispatch() |
||||||
|
const [IDTrafico, setIDTrafico] = useState(0) |
||||||
|
const [Data, setData] = useState<ICorresponsalTrafico[]>([]) |
||||||
|
const [filteredData, setFilteredData] = useState<ICorresponsalTrafico[]>([]) |
||||||
|
const [show, setShowMsg] = useState(false) |
||||||
|
const [ShowModal, setShowModal] = useState(false) |
||||||
|
const [header, setHeader] = useState('') |
||||||
|
const [msg, setMsg] = useState('') |
||||||
|
const [Inicio, setInicio] = useState(currentDate(-365)) |
||||||
|
const [Fin, setFin] = useState(currentDate(0)) |
||||||
|
const [TipoOperacion, setTipoOperacion] = useState(0) |
||||||
|
const [Cliente, setCliente] = useState(0) |
||||||
|
const [Corresponsal, setCorresponsal] = useState(0) |
||||||
|
const [Clientes, setClientes] = useState<Array<IClientes>>() |
||||||
|
const [filtro, setFiltro] = useState('') |
||||||
|
const gridRef = React.useRef<any>(null) |
||||||
|
const [DataCorresponsales, setDataCorresponsales] = useState<ICatCorresponsales[]>([]) |
||||||
|
const [columnDefs] = useState([ |
||||||
|
{ field: 'id', headerName: 'id', width: 70, sortable: true, filter: true }, |
||||||
|
{ |
||||||
|
field: 'proceso', |
||||||
|
headerName: 'Status', |
||||||
|
width: 90, |
||||||
|
center: true, |
||||||
|
sortable: true, |
||||||
|
filter: true, |
||||||
|
cellRenderer: ProgressBar, |
||||||
|
}, |
||||||
|
{ |
||||||
|
field: 'folio', |
||||||
|
headerName: 'Trafico', |
||||||
|
width: 140, |
||||||
|
sortable: true, |
||||||
|
filter: true, |
||||||
|
cellRenderer: (params: any) => { |
||||||
|
return params.data.folio |
||||||
|
}, |
||||||
|
}, |
||||||
|
{ |
||||||
|
field: 'fechaRegistro', |
||||||
|
sortable: true, |
||||||
|
filter: true, |
||||||
|
cellRenderer: (params: any) => { |
||||||
|
return params.value.substring(0, 10) |
||||||
|
}, |
||||||
|
}, |
||||||
|
{ field: 'sUsuario', headerName: 'Usuario', sortable: true, filter: true }, |
||||||
|
{ |
||||||
|
field: 'sCliente', |
||||||
|
headerName: 'Cliente', |
||||||
|
sortable: true, |
||||||
|
filter: true, |
||||||
|
}, |
||||||
|
{ field: 'sTipoOperacion', headerName: 'Tipo operacion', sortable: true, filter: true }, |
||||||
|
{ field: 'sOpEntrada', headerName: 'Op Entrada', sortable: true, filter: true }, |
||||||
|
{ field: 'sOpSalida', headerName: 'Op Salida', sortable: true, filter: true }, |
||||||
|
{ field: 'sCorresponsal', headerName: 'Corresponsal', sortable: true, filter: true }, |
||||||
|
{ field: 'patente', sortable: true, filter: true }, |
||||||
|
{ field: 'aduana', sortable: true, filter: true }, |
||||||
|
{ field: 'pedimento', sortable: true, filter: true }, |
||||||
|
{ |
||||||
|
field: 'fechaPago', |
||||||
|
sortable: true, |
||||||
|
filter: true, |
||||||
|
cellRenderer: (params: any) => { |
||||||
|
if (params.value) return params.value.substring(0, 10) |
||||||
|
else return '' |
||||||
|
}, |
||||||
|
}, |
||||||
|
{ |
||||||
|
field: 'fechaDesaduanamiento', |
||||||
|
sortable: true, |
||||||
|
filter: true, |
||||||
|
cellRenderer: (params: any) => { |
||||||
|
if (params.value) return params.value.substring(0, 10) |
||||||
|
else return '' |
||||||
|
}, |
||||||
|
}, |
||||||
|
{ |
||||||
|
field: 'zipgemco', |
||||||
|
headerName: 'Zip GEMCO', |
||||||
|
sortable: true, |
||||||
|
filter: true, |
||||||
|
cellRenderer: (params: any) => { |
||||||
|
if (params.value === 'No') |
||||||
|
return ( |
||||||
|
<div style={{ paddingLeft: '20px' }}> |
||||||
|
<IconContext.Provider value={{ color: 'red', size: '25px' }}> |
||||||
|
<BsFillXCircleFill /> |
||||||
|
</IconContext.Provider> |
||||||
|
</div> |
||||||
|
) |
||||||
|
else |
||||||
|
return ( |
||||||
|
<div style={{ paddingLeft: '20px' }}> |
||||||
|
<IconContext.Provider value={{ color: 'green', size: '25px' }}> |
||||||
|
<BsCheckCircleFill /> |
||||||
|
</IconContext.Provider> |
||||||
|
</div> |
||||||
|
) |
||||||
|
}, |
||||||
|
}, |
||||||
|
{ |
||||||
|
field: 'zipCorresponsal', |
||||||
|
headerName: 'Zip Corresponsal', |
||||||
|
sortable: true, |
||||||
|
filter: true, |
||||||
|
cellRenderer: (params: any) => { |
||||||
|
if (params.value === 'No') |
||||||
|
return ( |
||||||
|
<div style={{ paddingLeft: '35px' }}> |
||||||
|
<IconContext.Provider value={{ color: 'red', size: '25px' }}> |
||||||
|
<BsFillXCircleFill /> |
||||||
|
</IconContext.Provider> |
||||||
|
</div> |
||||||
|
) |
||||||
|
else |
||||||
|
return ( |
||||||
|
<div style={{ paddingLeft: '35px' }}> |
||||||
|
<IconContext.Provider value={{ color: 'green', size: '25px' }}> |
||||||
|
<BsCheckCircleFill /> |
||||||
|
</IconContext.Provider> |
||||||
|
</div> |
||||||
|
) |
||||||
|
}, |
||||||
|
}, |
||||||
|
{ field: 'ultimaActualizacion', sortable: true, filter: true }, |
||||||
|
]) |
||||||
|
const [msgColor, setMsgColor] = useState('primary') |
||||||
|
|
||||||
|
function ConvertHexToString(str: string) { |
||||||
|
return unescape(str.replace(/\\/g, '%')) |
||||||
|
} |
||||||
|
|
||||||
|
function currentDate(days: number): string { |
||||||
|
var today = new Date() |
||||||
|
today.setDate(today.getDate() + days) |
||||||
|
var dd = String(today.getDate()).padStart(2, '0') |
||||||
|
var mm = String(today.getMonth() + 1).padStart(2, '0') |
||||||
|
var yyyy = today.getFullYear() |
||||||
|
return yyyy + '-' + mm + '-' + dd |
||||||
|
} |
||||||
|
|
||||||
|
/* useEffect(() => { |
||||||
|
if (proc && modo) { |
||||||
|
if (status) { |
||||||
|
setStatusAnticipos(parseInt(status)) |
||||||
|
} else setStatusAnticipos(0) |
||||||
|
const data: DTORptCorresponsalesTraficos = { |
||||||
|
Inicio: '', |
||||||
|
Fin: '', |
||||||
|
TipoOperacion: 0, |
||||||
|
NoCliente: 0, |
||||||
|
IdCorresponsal: Corresponsal, |
||||||
|
Proceso: proc ? parseInt(proc.replace('proc=','')) : 0, |
||||||
|
Modo: modo ? parseInt(modo.replace('modo=','')) : 0, |
||||||
|
} |
||||||
|
reportesServices |
||||||
|
.getRptCorresponsalesTraficos(data) |
||||||
|
.then((response) => { |
||||||
|
setData(response.data) |
||||||
|
setFilteredData(response.data) |
||||||
|
}) |
||||||
|
.catch((e: Error) => { |
||||||
|
setHeader('Error') |
||||||
|
setMsg('Ocurrio un error: ' + e) |
||||||
|
setShowMsg(true) |
||||||
|
return |
||||||
|
}) |
||||||
|
} |
||||||
|
}, [proc, modo]) */ |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
ClientesDataService.getAllClientes(UserId) |
||||||
|
.then((response) => { |
||||||
|
setClientes(response.data) |
||||||
|
}) |
||||||
|
.catch((e: Error) => { |
||||||
|
setHeader('Error') |
||||||
|
setMsg('Ocurrio un error: ' + e) |
||||||
|
setShowMsg(true) |
||||||
|
return |
||||||
|
}) |
||||||
|
|
||||||
|
CorresponsalesDataService.getAll() |
||||||
|
.then((response) => { |
||||||
|
setDataCorresponsales(response.data) |
||||||
|
}) |
||||||
|
.catch((e: Error) => { |
||||||
|
setHeader('Error') |
||||||
|
setMsg('Ocurrio un error: ' + e) |
||||||
|
setShowMsg(true) |
||||||
|
return |
||||||
|
}) |
||||||
|
generaReporte() |
||||||
|
}, []) |
||||||
|
|
||||||
|
function getParams(e: RowClickedEvent) { |
||||||
|
AbreTrafico(e.data.id) |
||||||
|
} |
||||||
|
|
||||||
|
function AbreTrafico(id: number) { |
||||||
|
dispatch(InitCorresponsalesFacturas(IDTrafico)) |
||||||
|
dispatch(InitCorresponsalesFacturasTerceros(IDTrafico)) |
||||||
|
dispatch(InitCorresponsalesContenedores(IDTrafico)) |
||||||
|
setIDTrafico(id) |
||||||
|
setShowModal(true) |
||||||
|
} |
||||||
|
|
||||||
|
const generaReporte = () => { |
||||||
|
if (proc && modo) { |
||||||
|
const data: DTORptCorresponsalesTraficos = { |
||||||
|
Inicio: moment(Inicio).format('YYYY-MM-DD'), |
||||||
|
Fin: moment(Fin).format('YYYY-MM-DD'), |
||||||
|
TipoOperacion: TipoOperacion, |
||||||
|
NoCliente: Cliente, |
||||||
|
IdCorresponsal: Corresponsal, |
||||||
|
Proceso: proc ? parseInt(proc.replace('proc=','')) : 0, |
||||||
|
Modo: modo ? parseInt(modo.replace('modo=','')) : 0, |
||||||
|
} |
||||||
|
reportesServices |
||||||
|
.getRptCorresponsalesTraficos(data) |
||||||
|
.then((response) => { |
||||||
|
setData(response.data) |
||||||
|
setFilteredData(response.data) |
||||||
|
console.log(response.data) |
||||||
|
}) |
||||||
|
.catch((e: Error) => { |
||||||
|
setHeader('Error') |
||||||
|
setMsg('Ocurrio un error: ' + e) |
||||||
|
setShowMsg(true) |
||||||
|
return |
||||||
|
}) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
const filtraReporte = (e: any) => { |
||||||
|
setFiltro(e.target.value) |
||||||
|
gridRef.current.api.setQuickFilter(e.target.value) |
||||||
|
} |
||||||
|
|
||||||
|
const downloadExcel = () => { |
||||||
|
exportExcel(Data, 'Traficos de corresponsales') |
||||||
|
} |
||||||
|
|
||||||
|
function exportExcel(jsonData: any[], fileName: string): void { |
||||||
|
let Heading = [ |
||||||
|
[ |
||||||
|
{ title: 'Aduana Seccion Despacho', style: { font: { sz: '18', bold: true } } }, |
||||||
|
'Patente', |
||||||
|
'Referencia', |
||||||
|
'Pedimento', |
||||||
|
'Fecha Pago', |
||||||
|
'Fecha Entrada Presentacion', |
||||||
|
'Clave Docto', |
||||||
|
'Es rectificacion', |
||||||
|
'Tipo Cambio', |
||||||
|
'Valor Dls', |
||||||
|
'Valor Aduana', |
||||||
|
'Numero Factura', |
||||||
|
'Fecha Factura', |
||||||
|
'Proveedor Factura', |
||||||
|
'Incrementables Fact', |
||||||
|
'Fraccion', |
||||||
|
'Subdiv NICO', |
||||||
|
'Descripcion', |
||||||
|
'Pais Origen', |
||||||
|
'Pais Vendedor', |
||||||
|
'Tasa DTA', |
||||||
|
'Tasa IGI', |
||||||
|
'Numero Parte', |
||||||
|
'Cantidad Comercial', |
||||||
|
'TL Pais', |
||||||
|
'Tipo Tasa', |
||||||
|
'Unidad Comercial', |
||||||
|
'Valor Factura Item', |
||||||
|
'Valor Comercial Ped', |
||||||
|
'Valor Factura Item MN', |
||||||
|
], |
||||||
|
] |
||||||
|
const wb = XLSX.utils.book_new() |
||||||
|
const ws: XLSX.WorkSheet = XLSX.utils.json_to_sheet([]) |
||||||
|
XLSX.utils.sheet_add_aoa(ws, Heading) |
||||||
|
XLSX.utils.sheet_add_json(ws, jsonData, { origin: 'A2', skipHeader: true }) |
||||||
|
XLSX.utils.book_append_sheet(wb, ws, 'Sheet1') |
||||||
|
|
||||||
|
XLSX.writeFile(wb, fileName + '.xlsx') |
||||||
|
var range = XLSX.utils.decode_range(ws['!ref?']) |
||||||
|
for (var C = range.s.c; C <= range.e.c; ++C) { |
||||||
|
var address = XLSX.utils.encode_col(C) + '1' // <-- first row, column number C
|
||||||
|
if (!ws[address]) continue |
||||||
|
ws[address].v = ws[address].v.toUpperCase() |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
return ( |
||||||
|
<div> |
||||||
|
<Card> |
||||||
|
<Card.Body> |
||||||
|
<div className='row'> |
||||||
|
<div className='col-md-2'> |
||||||
|
<Form.Control |
||||||
|
defaultValue={Inicio} |
||||||
|
type='date' |
||||||
|
name='Inicio' |
||||||
|
placeholder='Inicio' |
||||||
|
title='Inicio' |
||||||
|
alt='Inicio' |
||||||
|
data-date-format='YYYY-mm-dd' |
||||||
|
onChange={(e) => setInicio(e.target.value)} |
||||||
|
size='sm' |
||||||
|
/> |
||||||
|
</div> |
||||||
|
<div className='col-md-2'> |
||||||
|
<Form.Control |
||||||
|
defaultValue={Fin} |
||||||
|
type='date' |
||||||
|
name='Fin' |
||||||
|
placeholder='Fin' |
||||||
|
title='Fin' |
||||||
|
alt='Fin' |
||||||
|
onChange={(e) => setFin(e.target.value)} |
||||||
|
size='sm' |
||||||
|
/> |
||||||
|
</div> |
||||||
|
<div className='col-md-1 right-label'> |
||||||
|
<Form.Label>Tipo oper</Form.Label> |
||||||
|
</div> |
||||||
|
<div className='col-md-1'> |
||||||
|
<Form.Control |
||||||
|
as='select' |
||||||
|
onChange={(e) => setTipoOperacion(parseInt(e.target.value))} |
||||||
|
className='form-select form-select-sm' |
||||||
|
> |
||||||
|
<option value='0'>-SELECCIONE-</option> |
||||||
|
<option value='1'>Importacion</option> |
||||||
|
<option value='2'>Exportacion</option> |
||||||
|
</Form.Control> |
||||||
|
</div> |
||||||
|
<div className='col-md-1 right-label'> |
||||||
|
<Form.Label>Cliente</Form.Label> |
||||||
|
</div> |
||||||
|
<div className='col-md-4'> |
||||||
|
<Form.Control |
||||||
|
as='select' |
||||||
|
onChange={(e) => { |
||||||
|
setCliente(parseInt(e.target.value)) |
||||||
|
}} |
||||||
|
className='form-select form-select-sm' |
||||||
|
> |
||||||
|
<option value='0'>-SELECCIONE-</option> |
||||||
|
{Clientes |
||||||
|
? Clientes.map((c) => { |
||||||
|
return ( |
||||||
|
<option value={c.sClave} key={c.sClave}> |
||||||
|
{c.sRazonSocial} |
||||||
|
</option> |
||||||
|
) |
||||||
|
}) |
||||||
|
: null} |
||||||
|
</Form.Control> |
||||||
|
</div> |
||||||
|
<div className='col-md-1 right-label'> |
||||||
|
<Button |
||||||
|
variant='primary' |
||||||
|
size='sm' |
||||||
|
onClick={() => { |
||||||
|
generaReporte() |
||||||
|
}} |
||||||
|
> |
||||||
|
<BsSearch /> |
||||||
|
Buscar |
||||||
|
</Button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div className='row' style={{ paddingTop: 5 }}> |
||||||
|
<div className='col'> |
||||||
|
{Depto === 'Corresponsalias' ? ( |
||||||
|
<Button |
||||||
|
size='sm' |
||||||
|
variant='primary' |
||||||
|
onClick={() => { |
||||||
|
AbreTrafico(0) |
||||||
|
}} |
||||||
|
> |
||||||
|
<BsPlusLg /> |
||||||
|
Nuevo |
||||||
|
</Button> |
||||||
|
) : ( |
||||||
|
'' |
||||||
|
)} |
||||||
|
</div> |
||||||
|
<div className='col-4'> |
||||||
|
<Form.Control |
||||||
|
type='text' |
||||||
|
size='sm' |
||||||
|
placeholder='Search...' |
||||||
|
onChange={(e) => { |
||||||
|
filtraReporte(e) |
||||||
|
}} |
||||||
|
/> |
||||||
|
</div> |
||||||
|
<div className='col'> |
||||||
|
<Button |
||||||
|
size='sm' |
||||||
|
variant='success' |
||||||
|
onClick={() => { |
||||||
|
downloadExcel() |
||||||
|
}} |
||||||
|
> |
||||||
|
<BsFileEarmarkExcel /> |
||||||
|
Excel |
||||||
|
</Button> |
||||||
|
</div> |
||||||
|
<div className='col'>Corresponsal</div> |
||||||
|
<div className='col-4'> |
||||||
|
<Form.Control |
||||||
|
as='select' |
||||||
|
onChange={(e) => { |
||||||
|
setCorresponsal(parseInt(e.target.value)) |
||||||
|
}} |
||||||
|
className='form-select form-select-sm' |
||||||
|
> |
||||||
|
<option value='0'>-SELECCIONE-</option> |
||||||
|
{DataCorresponsales |
||||||
|
? DataCorresponsales.map((c) => { |
||||||
|
return ( |
||||||
|
<option value={c.id} key={c.id}> |
||||||
|
{c.nombre} |
||||||
|
</option> |
||||||
|
) |
||||||
|
}) |
||||||
|
: null} |
||||||
|
</Form.Control> |
||||||
|
</div> |
||||||
|
<div className='col'></div> |
||||||
|
</div> |
||||||
|
</Card.Body> |
||||||
|
</Card> |
||||||
|
<br /> |
||||||
|
<div className='ag-theme-alpine' style={{ height: 500, width: '100%' }}> |
||||||
|
<AgGridReact |
||||||
|
rowData={filteredData} |
||||||
|
columnDefs={columnDefs} |
||||||
|
pagination={true} |
||||||
|
paginationAutoPageSize={true} |
||||||
|
ref={gridRef} |
||||||
|
rowSelection={'multiple'} |
||||||
|
rowMultiSelectWithClick={true} |
||||||
|
onRowClicked={(e) => getParams(e)} |
||||||
|
></AgGridReact> |
||||||
|
</div> |
||||||
|
<MsgInformativo |
||||||
|
show={show} |
||||||
|
msg={msg} |
||||||
|
header={header} |
||||||
|
msgColor={msgColor} |
||||||
|
closeToast={() => { |
||||||
|
setShowMsg(false) |
||||||
|
}} |
||||||
|
/> |
||||||
|
<Modal |
||||||
|
show={ShowModal} |
||||||
|
/* onHide={() => setShowModal(false)} */ |
||||||
|
size='sm' |
||||||
|
dialogClassName='modal-90w modal-innerDiv' |
||||||
|
disableEscapeKeyDown={true} |
||||||
|
> |
||||||
|
<Modal.Body style={{ |
||||||
|
maxHeight: 'calc(100vh)', |
||||||
|
overflowY: 'auto' |
||||||
|
}}> |
||||||
|
<div> |
||||||
|
<TraficoCorresponsales |
||||||
|
IDTrafico={IDTrafico} |
||||||
|
onClose={function (val: boolean): void { |
||||||
|
setShowModal(false) |
||||||
|
}} |
||||||
|
/> |
||||||
|
</div> |
||||||
|
</Modal.Body> |
||||||
|
</Modal> |
||||||
|
</div> |
||||||
|
) |
||||||
|
} |
||||||
@ -0,0 +1,519 @@ |
|||||||
|
import { RowClickedEvent } from 'ag-grid-community' |
||||||
|
import { AgGridReact } from 'ag-grid-react' |
||||||
|
import React, { FC, useEffect, useState } from 'react' |
||||||
|
import { Button, Card, Form, Modal } from 'react-bootstrap' |
||||||
|
import ICorresponsalTrafico from '../../Interfaces/Corresponsales/ICorresponsalTrafico' |
||||||
|
import ClientesDataService from '../../Services/Catalogos/Clientes.Services' |
||||||
|
import { MsgInformativo } from '../Utils/Toast/msgInformativo' |
||||||
|
import IClientes from '../../Interfaces/Catalogos/IClientes' |
||||||
|
import { BsPlusLg, BsFileEarmarkExcel, BsSearch, BsFillXCircleFill, BsCheckCircleFill } from 'react-icons/bs' |
||||||
|
import * as XLSX from 'xlsx' |
||||||
|
import TraficoCorresponsales from '../Corresponsales/TraficoCorresponsales' |
||||||
|
import ICatCorresponsales from '../../Interfaces/Catalogos/ICatCorresponsales' |
||||||
|
import CorresponsalesDataService from '../../Services/Catalogos/Corresponsales.Services' |
||||||
|
import reportesServices from '../../Services/Reportes/reportes.services' |
||||||
|
import moment from 'moment' |
||||||
|
import DTORptCorresponsalesTraficos from '../../DTO/Corresponsales/DTORptCorresponsalesTraficos' |
||||||
|
import { InitCorresponsalesFacturas } from '../../store/features/Corresponsales/CorresponsalesFacturasSlice' |
||||||
|
import { InitCorresponsalesFacturasTerceros } from '../../store/features/Corresponsales/CorresponsalesFacturasTercerosSlice' |
||||||
|
import { InitCorresponsalesContenedores } from '../../store/features/Corresponsales/CorresponsalesContenedoresSlice' |
||||||
|
import { useDispatch } from 'react-redux' |
||||||
|
import { IconContext } from 'react-icons' |
||||||
|
import { ProgressBar } from './customCells/progressBar' |
||||||
|
import { ProcessStatus } from './customCells/ProcessStatus' |
||||||
|
|
||||||
|
interface IProps {} |
||||||
|
|
||||||
|
export default function RptCorresponsalesTraficosHst (props: IProps) { |
||||||
|
const [UserId, setUserId] = useState(() => { |
||||||
|
const stickyValue = window.localStorage.getItem('UserId') |
||||||
|
return stickyValue !== null ? JSON.parse(stickyValue) : 0 |
||||||
|
}) |
||||||
|
const [Depto, setDepto] = useState(() => { |
||||||
|
const stickyValue = window.localStorage.getItem('Departamento') |
||||||
|
return stickyValue !== null ? JSON.parse(stickyValue) : '' |
||||||
|
}) |
||||||
|
const queryParams = new URLSearchParams(window.location.search) |
||||||
|
const proc = queryParams.get('proc') |
||||||
|
const status = queryParams.get('status') |
||||||
|
const Modo = queryParams.get('Modo') |
||||||
|
//const [Mode, setMode] = useState(parseInt(window.location.search.replace('?proc=', '0')))
|
||||||
|
const [StatusAnticipos, setStatusAnticipos] = useState(status ? parseInt(status) : 0) |
||||||
|
const dispatch = useDispatch() |
||||||
|
const [IDTrafico, setIDTrafico] = useState(0) |
||||||
|
const [Data, setData] = useState<ICorresponsalTrafico[]>([]) |
||||||
|
const [filteredData, setFilteredData] = useState<ICorresponsalTrafico[]>([]) |
||||||
|
const [show, setShowMsg] = useState(false) |
||||||
|
const [ShowModal, setShowModal] = useState(false) |
||||||
|
const [header, setHeader] = useState('') |
||||||
|
const [msg, setMsg] = useState('') |
||||||
|
const [Inicio, setInicio] = useState(currentDate(-365)) |
||||||
|
const [Fin, setFin] = useState(currentDate(0)) |
||||||
|
const [TipoOperacion, setTipoOperacion] = useState(0) |
||||||
|
const [Cliente, setCliente] = useState(0) |
||||||
|
const [Corresponsal, setCorresponsal] = useState(0) |
||||||
|
const [Clientes, setClientes] = useState<Array<IClientes>>() |
||||||
|
const [filtro, setFiltro] = useState('') |
||||||
|
const gridRef = React.useRef<any>(null) |
||||||
|
const [DataCorresponsales, setDataCorresponsales] = useState<ICatCorresponsales[]>([]) |
||||||
|
const [columnDefs] = useState([ |
||||||
|
{ field: 'id', headerName: 'id', width: 70, sortable: true, filter: true }, |
||||||
|
{ |
||||||
|
field: 'proceso', |
||||||
|
headerName: 'Status', |
||||||
|
width: 90, |
||||||
|
center: true, |
||||||
|
sortable: true, |
||||||
|
filter: true, |
||||||
|
cellRenderer: ProcessStatus, |
||||||
|
}, |
||||||
|
{ |
||||||
|
field: 'folio', |
||||||
|
headerName: 'Folio', |
||||||
|
width: 120, |
||||||
|
sortable: true, |
||||||
|
filter: true, |
||||||
|
cellRenderer: (params: any) => { |
||||||
|
return params.data.folio |
||||||
|
}, |
||||||
|
}, |
||||||
|
{ |
||||||
|
field: 'fechaRegistro', |
||||||
|
sortable: true, |
||||||
|
filter: true, |
||||||
|
cellRenderer: (params: any) => { |
||||||
|
return params.value.substring(0, 10) |
||||||
|
}, |
||||||
|
}, |
||||||
|
{ field: 'sUsuario', headerName: 'Usuario', sortable: true, filter: true }, |
||||||
|
{ |
||||||
|
field: 'sCliente', |
||||||
|
headerName: 'Cliente', |
||||||
|
sortable: true, |
||||||
|
filter: true, |
||||||
|
}, |
||||||
|
{ field: 'sTipoOperacion', headerName: 'Tipo operacion', sortable: true, filter: true }, |
||||||
|
{ field: 'sOpEntrada', headerName: 'Op Entrada', sortable: true, filter: true }, |
||||||
|
{ field: 'sOpSalida', headerName: 'Op Salida', sortable: true, filter: true }, |
||||||
|
{ field: 'sCorresponsal', headerName: 'Corresponsal', sortable: true, filter: true }, |
||||||
|
{ field: 'patente', sortable: true, filter: true }, |
||||||
|
{ field: 'aduana', sortable: true, filter: true }, |
||||||
|
{ field: 'pedimento', sortable: true, filter: true }, |
||||||
|
{ |
||||||
|
field: 'fechaPago', |
||||||
|
sortable: true, |
||||||
|
filter: true, |
||||||
|
cellRenderer: (params: any) => { |
||||||
|
if (params.value) return params.value.substring(0, 10) |
||||||
|
else return '' |
||||||
|
}, |
||||||
|
}, |
||||||
|
{ |
||||||
|
field: 'fechaDesaduanamiento', |
||||||
|
sortable: true, |
||||||
|
filter: true, |
||||||
|
cellRenderer: (params: any) => { |
||||||
|
if (params.value) return params.value.substring(0, 10) |
||||||
|
else return '' |
||||||
|
}, |
||||||
|
}, |
||||||
|
{ |
||||||
|
field: 'zipgemco', |
||||||
|
headerName: 'Zip GEMCO', |
||||||
|
sortable: true, |
||||||
|
filter: true, |
||||||
|
cellRenderer: (params: any) => { |
||||||
|
if (params.value === 'No') |
||||||
|
return ( |
||||||
|
<div style={{ paddingLeft: '20px' }}> |
||||||
|
<IconContext.Provider value={{ color: 'red', size: '25px' }}> |
||||||
|
<BsFillXCircleFill /> |
||||||
|
</IconContext.Provider> |
||||||
|
</div> |
||||||
|
) |
||||||
|
else |
||||||
|
return ( |
||||||
|
<div style={{ paddingLeft: '20px' }}> |
||||||
|
<IconContext.Provider value={{ color: 'green', size: '25px' }}> |
||||||
|
<BsCheckCircleFill /> |
||||||
|
</IconContext.Provider> |
||||||
|
</div> |
||||||
|
) |
||||||
|
}, |
||||||
|
}, |
||||||
|
{ |
||||||
|
field: 'zipCorresponsal', |
||||||
|
headerName: 'Zip Corresponsal', |
||||||
|
sortable: true, |
||||||
|
filter: true, |
||||||
|
cellRenderer: (params: any) => { |
||||||
|
if (params.value === 'No') |
||||||
|
return ( |
||||||
|
<div style={{ paddingLeft: '35px' }}> |
||||||
|
<IconContext.Provider value={{ color: 'red', size: '25px' }}> |
||||||
|
<BsFillXCircleFill /> |
||||||
|
</IconContext.Provider> |
||||||
|
</div> |
||||||
|
) |
||||||
|
else |
||||||
|
return ( |
||||||
|
<div style={{ paddingLeft: '35px' }}> |
||||||
|
<IconContext.Provider value={{ color: 'green', size: '25px' }}> |
||||||
|
<BsCheckCircleFill /> |
||||||
|
</IconContext.Provider> |
||||||
|
</div> |
||||||
|
) |
||||||
|
}, |
||||||
|
}, |
||||||
|
{ field: 'ultimaActualizacion', sortable: true, filter: true }, |
||||||
|
]) |
||||||
|
const [msgColor, setMsgColor] = useState('primary') |
||||||
|
|
||||||
|
function ConvertHexToString(str: string) { |
||||||
|
return unescape(str.replace(/\\/g, '%')) |
||||||
|
} |
||||||
|
|
||||||
|
function currentDate(days: number): string { |
||||||
|
var today = new Date() |
||||||
|
today.setDate(today.getDate() + days) |
||||||
|
var dd = String(today.getDate()).padStart(2, '0') |
||||||
|
var mm = String(today.getMonth() + 1).padStart(2, '0') |
||||||
|
var yyyy = today.getFullYear() |
||||||
|
return yyyy + '-' + mm + '-' + dd |
||||||
|
} |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
// if (proc) setMode(parseInt(proc))
|
||||||
|
if (status) { |
||||||
|
setStatusAnticipos(parseInt(status)) |
||||||
|
} else setStatusAnticipos(0) |
||||||
|
const data: DTORptCorresponsalesTraficos = { |
||||||
|
Inicio: '', |
||||||
|
Fin: '', |
||||||
|
TipoOperacion: 0, |
||||||
|
NoCliente: 0, |
||||||
|
IdCorresponsal: Corresponsal, |
||||||
|
Proceso: proc ? parseInt(proc) : 0, |
||||||
|
Modo: Modo ? parseInt(Modo) : 0, |
||||||
|
} |
||||||
|
reportesServices |
||||||
|
.getRptCorresponsalesTraficos(data) |
||||||
|
.then((response) => { |
||||||
|
setData(response.data) |
||||||
|
setFilteredData(response.data) |
||||||
|
}) |
||||||
|
.catch((e: Error) => { |
||||||
|
setHeader('Error') |
||||||
|
setMsg('Ocurrio un error: ' + e) |
||||||
|
setShowMsg(true) |
||||||
|
return |
||||||
|
}) |
||||||
|
}, [proc, status]) |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
ClientesDataService.getAllClientes(UserId) |
||||||
|
.then((response) => { |
||||||
|
setClientes(response.data) |
||||||
|
}) |
||||||
|
.catch((e: Error) => { |
||||||
|
setHeader('Error') |
||||||
|
setMsg('Ocurrio un error: ' + e) |
||||||
|
setShowMsg(true) |
||||||
|
return |
||||||
|
}) |
||||||
|
|
||||||
|
CorresponsalesDataService.getAll() |
||||||
|
.then((response) => { |
||||||
|
setDataCorresponsales(response.data) |
||||||
|
}) |
||||||
|
.catch((e: Error) => { |
||||||
|
setHeader('Error') |
||||||
|
setMsg('Ocurrio un error: ' + e) |
||||||
|
setShowMsg(true) |
||||||
|
return |
||||||
|
}) |
||||||
|
}, []) |
||||||
|
|
||||||
|
function getParams(e: RowClickedEvent) { |
||||||
|
AbreTrafico(e.data.id) |
||||||
|
} |
||||||
|
|
||||||
|
function AbreTrafico(id: number) { |
||||||
|
dispatch(InitCorresponsalesFacturas(IDTrafico)) |
||||||
|
dispatch(InitCorresponsalesFacturasTerceros(IDTrafico)) |
||||||
|
dispatch(InitCorresponsalesContenedores(IDTrafico)) |
||||||
|
setIDTrafico(id) |
||||||
|
setShowModal(true) |
||||||
|
} |
||||||
|
|
||||||
|
const generaReporte = () => { |
||||||
|
const data: DTORptCorresponsalesTraficos = { |
||||||
|
Inicio: moment(Inicio).format('YYYY-MM-DD'), |
||||||
|
Fin: moment(Fin).format('YYYY-MM-DD'), |
||||||
|
TipoOperacion: TipoOperacion, |
||||||
|
NoCliente: Cliente, |
||||||
|
IdCorresponsal: Corresponsal, |
||||||
|
Proceso: proc ? parseInt(proc) : 0, |
||||||
|
Modo: Modo ? parseInt(Modo) : 0, |
||||||
|
} |
||||||
|
reportesServices |
||||||
|
.getRptCorresponsalesTraficos(data) |
||||||
|
.then((response) => { |
||||||
|
setData(response.data) |
||||||
|
setFilteredData(response.data) |
||||||
|
console.log(response.data) |
||||||
|
}) |
||||||
|
.catch((e: Error) => { |
||||||
|
setHeader('Error') |
||||||
|
setMsg('Ocurrio un error: ' + e) |
||||||
|
setShowMsg(true) |
||||||
|
return |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
const filtraReporte = (e: any) => { |
||||||
|
setFiltro(e.target.value) |
||||||
|
gridRef.current.api.setQuickFilter(e.target.value) |
||||||
|
} |
||||||
|
|
||||||
|
const downloadExcel = () => { |
||||||
|
exportExcel(Data, 'Traficos de corresponsales') |
||||||
|
} |
||||||
|
|
||||||
|
function exportExcel(jsonData: any[], fileName: string): void { |
||||||
|
let Heading = [ |
||||||
|
[ |
||||||
|
{ title: 'Aduana Seccion Despacho', style: { font: { sz: '18', bold: true } } }, |
||||||
|
'Patente', |
||||||
|
'Referencia', |
||||||
|
'Pedimento', |
||||||
|
'Fecha Pago', |
||||||
|
'Fecha Entrada Presentacion', |
||||||
|
'Clave Docto', |
||||||
|
'Es rectificacion', |
||||||
|
'Tipo Cambio', |
||||||
|
'Valor Dls', |
||||||
|
'Valor Aduana', |
||||||
|
'Numero Factura', |
||||||
|
'Fecha Factura', |
||||||
|
'Proveedor Factura', |
||||||
|
'Incrementables Fact', |
||||||
|
'Fraccion', |
||||||
|
'Subdiv NICO', |
||||||
|
'Descripcion', |
||||||
|
'Pais Origen', |
||||||
|
'Pais Vendedor', |
||||||
|
'Tasa DTA', |
||||||
|
'Tasa IGI', |
||||||
|
'Numero Parte', |
||||||
|
'Cantidad Comercial', |
||||||
|
'TL Pais', |
||||||
|
'Tipo Tasa', |
||||||
|
'Unidad Comercial', |
||||||
|
'Valor Factura Item', |
||||||
|
'Valor Comercial Ped', |
||||||
|
'Valor Factura Item MN', |
||||||
|
], |
||||||
|
] |
||||||
|
const wb = XLSX.utils.book_new() |
||||||
|
const ws: XLSX.WorkSheet = XLSX.utils.json_to_sheet([]) |
||||||
|
XLSX.utils.sheet_add_aoa(ws, Heading) |
||||||
|
XLSX.utils.sheet_add_json(ws, jsonData, { origin: 'A2', skipHeader: true }) |
||||||
|
XLSX.utils.book_append_sheet(wb, ws, 'Sheet1') |
||||||
|
|
||||||
|
XLSX.writeFile(wb, fileName + '.xlsx') |
||||||
|
var range = XLSX.utils.decode_range(ws['!ref?']) |
||||||
|
for (var C = range.s.c; C <= range.e.c; ++C) { |
||||||
|
var address = XLSX.utils.encode_col(C) + '1' // <-- first row, column number C
|
||||||
|
if (!ws[address]) continue |
||||||
|
ws[address].v = ws[address].v.toUpperCase() |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
return ( |
||||||
|
<div> |
||||||
|
<Card> |
||||||
|
<Card.Body> |
||||||
|
<div className='row'> |
||||||
|
<div className='col-md-2'> |
||||||
|
<Form.Control |
||||||
|
defaultValue={Inicio} |
||||||
|
type='date' |
||||||
|
name='Inicio' |
||||||
|
placeholder='Inicio' |
||||||
|
title='Inicio' |
||||||
|
alt='Inicio' |
||||||
|
data-date-format='YYYY-mm-dd' |
||||||
|
onChange={(e) => setInicio(e.target.value)} |
||||||
|
size='sm' |
||||||
|
/> |
||||||
|
</div> |
||||||
|
<div className='col-md-2'> |
||||||
|
<Form.Control |
||||||
|
defaultValue={Fin} |
||||||
|
type='date' |
||||||
|
name='Fin' |
||||||
|
placeholder='Fin' |
||||||
|
title='Fin' |
||||||
|
alt='Fin' |
||||||
|
onChange={(e) => setFin(e.target.value)} |
||||||
|
size='sm' |
||||||
|
/> |
||||||
|
</div> |
||||||
|
<div className='col-md-1 right-label'> |
||||||
|
<Form.Label>Tipo oper</Form.Label> |
||||||
|
</div> |
||||||
|
<div className='col-md-1'> |
||||||
|
<Form.Control |
||||||
|
as='select' |
||||||
|
onChange={(e) => setTipoOperacion(parseInt(e.target.value))} |
||||||
|
className='form-select form-select-sm' |
||||||
|
> |
||||||
|
<option value='0'>-SELECCIONE-</option> |
||||||
|
<option value='1'>Importacion</option> |
||||||
|
<option value='2'>Exportacion</option> |
||||||
|
</Form.Control> |
||||||
|
</div> |
||||||
|
<div className='col-md-1 right-label'> |
||||||
|
<Form.Label>Cliente</Form.Label> |
||||||
|
</div> |
||||||
|
<div className='col-md-4'> |
||||||
|
<Form.Control |
||||||
|
as='select' |
||||||
|
onChange={(e) => { |
||||||
|
setCliente(parseInt(e.target.value)) |
||||||
|
}} |
||||||
|
className='form-select form-select-sm' |
||||||
|
> |
||||||
|
<option value='0'>-SELECCIONE-</option> |
||||||
|
{Clientes |
||||||
|
? Clientes.map((c) => { |
||||||
|
return ( |
||||||
|
<option value={c.sClave} key={c.sClave}> |
||||||
|
{c.sRazonSocial} |
||||||
|
</option> |
||||||
|
) |
||||||
|
}) |
||||||
|
: null} |
||||||
|
</Form.Control> |
||||||
|
</div> |
||||||
|
<div className='col-md-1 right-label'> |
||||||
|
<Button |
||||||
|
variant='primary' |
||||||
|
size='sm' |
||||||
|
onClick={() => { |
||||||
|
generaReporte() |
||||||
|
}} |
||||||
|
> |
||||||
|
<BsSearch /> |
||||||
|
Buscar |
||||||
|
</Button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div className='row' style={{ paddingTop: 5 }}> |
||||||
|
<div className='col'> |
||||||
|
{Depto === 'Corresponsalias' ? ( |
||||||
|
<Button |
||||||
|
size='sm' |
||||||
|
variant='primary' |
||||||
|
onClick={() => { |
||||||
|
AbreTrafico(0) |
||||||
|
}} |
||||||
|
> |
||||||
|
<BsPlusLg /> |
||||||
|
Nuevo |
||||||
|
</Button> |
||||||
|
) : ( |
||||||
|
'' |
||||||
|
)} |
||||||
|
</div> |
||||||
|
<div className='col-4'> |
||||||
|
<Form.Control |
||||||
|
type='text' |
||||||
|
size='sm' |
||||||
|
placeholder='Search...' |
||||||
|
onChange={(e) => { |
||||||
|
filtraReporte(e) |
||||||
|
}} |
||||||
|
/> |
||||||
|
</div> |
||||||
|
<div className='col'> |
||||||
|
<Button |
||||||
|
size='sm' |
||||||
|
variant='success' |
||||||
|
onClick={() => { |
||||||
|
downloadExcel() |
||||||
|
}} |
||||||
|
> |
||||||
|
<BsFileEarmarkExcel /> |
||||||
|
Excel |
||||||
|
</Button> |
||||||
|
</div> |
||||||
|
<div className='col'>Corresponsal</div> |
||||||
|
<div className='col-4'> |
||||||
|
<Form.Control |
||||||
|
as='select' |
||||||
|
onChange={(e) => { |
||||||
|
setCorresponsal(parseInt(e.target.value)) |
||||||
|
}} |
||||||
|
className='form-select form-select-sm' |
||||||
|
> |
||||||
|
<option value='0'>-SELECCIONE-</option> |
||||||
|
{DataCorresponsales |
||||||
|
? DataCorresponsales.map((c) => { |
||||||
|
return ( |
||||||
|
<option value={c.id} key={c.id}> |
||||||
|
{c.nombre} |
||||||
|
</option> |
||||||
|
) |
||||||
|
}) |
||||||
|
: null} |
||||||
|
</Form.Control> |
||||||
|
</div> |
||||||
|
<div className='col'></div> |
||||||
|
</div> |
||||||
|
</Card.Body> |
||||||
|
</Card> |
||||||
|
<br /> |
||||||
|
<div className='ag-theme-alpine' style={{ height: 500, width: '100%' }}> |
||||||
|
<AgGridReact |
||||||
|
rowData={filteredData} |
||||||
|
columnDefs={columnDefs} |
||||||
|
pagination={true} |
||||||
|
paginationAutoPageSize={true} |
||||||
|
ref={gridRef} |
||||||
|
rowSelection={'single'} |
||||||
|
rowMultiSelectWithClick={true} |
||||||
|
onRowClicked={(e) => getParams(e)} |
||||||
|
></AgGridReact> |
||||||
|
</div> |
||||||
|
<MsgInformativo |
||||||
|
show={show} |
||||||
|
msg={msg} |
||||||
|
header={header} |
||||||
|
msgColor={msgColor} |
||||||
|
closeToast={() => { |
||||||
|
setShowMsg(false) |
||||||
|
}} |
||||||
|
/> |
||||||
|
<Modal |
||||||
|
show={ShowModal} |
||||||
|
/* onHide={() => setShowModal(false)} */ |
||||||
|
size='sm' |
||||||
|
dialogClassName='modal-90w modal-innerDiv' |
||||||
|
disableEscapeKeyDown={true} |
||||||
|
> |
||||||
|
<Modal.Body> |
||||||
|
<div> |
||||||
|
<TraficoCorresponsales |
||||||
|
IDTrafico={IDTrafico} |
||||||
|
onClose={function (val: boolean): void { |
||||||
|
setShowModal(false) |
||||||
|
}} |
||||||
|
/> |
||||||
|
</div> |
||||||
|
</Modal.Body> |
||||||
|
</Modal> |
||||||
|
</div> |
||||||
|
) |
||||||
|
} |
||||||
@ -0,0 +1,36 @@ |
|||||||
|
import { ICellRendererParams } from 'ag-grid-community' |
||||||
|
import { FC, useEffect, useState } from 'react' |
||||||
|
import { ProgressBar } from 'react-bootstrap' |
||||||
|
|
||||||
|
interface IProps { |
||||||
|
value: number |
||||||
|
} |
||||||
|
|
||||||
|
export const ProcessStatus: FC<ICellRendererParams> = (props: ICellRendererParams) => { |
||||||
|
const [Proceso1, setProceso1] = useState(props.value >= 2 ? 100 : 0) |
||||||
|
// const [Proceso2, setProceso2] = useState(props.value >= 3 ? 100 : 0)
|
||||||
|
// const [Proceso3, setProceso3] = useState(props.value >= 4 ? 100 : 0)
|
||||||
|
const [Color, setColor] = useState('progress-bar bg-CORRESPONSAL_NORMAL') |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
if (props.data.proceso === 0) setColor('progress-bar bg-RECHAZOS_PARA_CORRESPONSAL') |
||||||
|
if (props.data.proceso === 1) { |
||||||
|
if (props.data.rechazado > 0) setColor('progress-bar bg-RECHAZOS_POR_CONTABILIDAD') |
||||||
|
else setColor('progress-bar bg-CORRESPONSAL_NORMAL') |
||||||
|
} |
||||||
|
}, [props]) |
||||||
|
|
||||||
|
return ( |
||||||
|
<div style={{ paddingTop: '20%' }}> |
||||||
|
<ProgressBar> |
||||||
|
<ProgressBar variant={props.value >= 0 ? 'primary' : 'light'} now={23} key={1} /> |
||||||
|
<ProgressBar variant='white' now={2} key={2} /> |
||||||
|
<ProgressBar variant={props.value >= 1 ? 'success' : 'light'} now={23} key={3} /> |
||||||
|
<ProgressBar variant='white' now={2} key={4} /> |
||||||
|
<ProgressBar variant={props.value >= 2 ? 'warning' : 'light'} now={24} key={5} /> |
||||||
|
<ProgressBar variant='white' now={1} key={6} /> |
||||||
|
<ProgressBar variant={props.value === 3 ? 'info' : 'light'} now={25} key={7} /> |
||||||
|
</ProgressBar> |
||||||
|
</div> |
||||||
|
) |
||||||
|
} |
||||||
@ -0,0 +1,31 @@ |
|||||||
|
import { ICellRendererParams } from 'ag-grid-community' |
||||||
|
import { FC, useEffect, useState } from 'react' |
||||||
|
|
||||||
|
interface IProps { |
||||||
|
value: number |
||||||
|
} |
||||||
|
|
||||||
|
export const ProgressBar: FC<ICellRendererParams> = (props: ICellRendererParams) => { |
||||||
|
const [Proceso1, setProceso1] = useState(props.value >= 2 ? 100 : 0) |
||||||
|
// const [Proceso2, setProceso2] = useState(props.value >= 3 ? 100 : 0)
|
||||||
|
// const [Proceso3, setProceso3] = useState(props.value >= 4 ? 100 : 0)
|
||||||
|
const [Color, setColor] = useState('progress-bar bg-CORRESPONSAL_NORMAL') |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
if (props.data.proceso === 0) setColor('progress-bar bg-RECHAZOS_PARA_CORRESPONSAL') |
||||||
|
if (props.data.proceso === 1) { |
||||||
|
if (props.data.rechazado > 0) setColor('progress-bar bg-RECHAZOS_POR_CONTABILIDAD') |
||||||
|
else setColor('progress-bar bg-CORRESPONSAL_NORMAL') |
||||||
|
} |
||||||
|
}, [props]) |
||||||
|
|
||||||
|
return ( |
||||||
|
<div> |
||||||
|
<div style={{ paddingTop: '20%' }}> |
||||||
|
<div className='progress' style={{ maxWidth: '80%' }}> |
||||||
|
<div className={Color} style={{ width: '100%' }}></div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
) |
||||||
|
} |
||||||
@ -0,0 +1,18 @@ |
|||||||
|
import React, { FC } from 'react' |
||||||
|
import { Button } from 'react-bootstrap' |
||||||
|
|
||||||
|
interface IProps {} |
||||||
|
|
||||||
|
export const verPDF: FC<IProps> = (props) => { |
||||||
|
const showPDF = () => {} |
||||||
|
|
||||||
|
return ( |
||||||
|
<div> |
||||||
|
<span> |
||||||
|
<Button onClick={() => showPDF()} variant='primary'> |
||||||
|
ver Pedimento |
||||||
|
</Button> |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
) |
||||||
|
} |
||||||
@ -0,0 +1,62 @@ |
|||||||
|
import * as React from 'react' |
||||||
|
import { NavDropdown } from 'react-bootstrap' |
||||||
|
import ItemMenu from '../../Interfaces/Catalogos/IItemMenu' |
||||||
|
|
||||||
|
interface ISubmenuProps { |
||||||
|
submenu: ItemMenu[] |
||||||
|
descripcion: string |
||||||
|
allItems: ItemMenu[] |
||||||
|
} |
||||||
|
|
||||||
|
const Submenu: React.FunctionComponent<ISubmenuProps> = (props) => { |
||||||
|
const esPadre = (ItemSubmenu: ItemMenu, allItems: ItemMenu[]) => { |
||||||
|
var arrHijos = allItems.filter(function (item) { |
||||||
|
return ItemSubmenu.id === item.padreId |
||||||
|
}) |
||||||
|
if (arrHijos.length) return true |
||||||
|
else return false |
||||||
|
} |
||||||
|
|
||||||
|
return ( |
||||||
|
<div> |
||||||
|
{ |
||||||
|
<> |
||||||
|
<NavDropdown title={props.descripcion} id="basic-nav-dropdown"> |
||||||
|
{props.submenu.map((item, index) => { |
||||||
|
return !esPadre(item, props.allItems) ? ( |
||||||
|
<> |
||||||
|
<NavDropdown.Item key={item.id} href={'/#/' + item.url}> |
||||||
|
{item.descripcion} |
||||||
|
</NavDropdown.Item> |
||||||
|
</> |
||||||
|
) : ( |
||||||
|
<> |
||||||
|
<NavDropdown |
||||||
|
title={item.descripcion} |
||||||
|
id="secondlevel" |
||||||
|
className="" |
||||||
|
drop="end" |
||||||
|
> |
||||||
|
{props.allItems |
||||||
|
.filter(function (row) { |
||||||
|
return row.padreId === item.id |
||||||
|
}) |
||||||
|
.map((row, index) => { |
||||||
|
return ( |
||||||
|
<NavDropdown.Item key={row.id} href={'/#/' + row.url}> |
||||||
|
{row.descripcion} |
||||||
|
</NavDropdown.Item> |
||||||
|
) |
||||||
|
})} |
||||||
|
</NavDropdown> |
||||||
|
</> |
||||||
|
) |
||||||
|
})} |
||||||
|
</NavDropdown> |
||||||
|
</> |
||||||
|
} |
||||||
|
</div> |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
export default Submenu |
||||||
@ -0,0 +1,51 @@ |
|||||||
|
import React, { FC, useState } from 'react' |
||||||
|
import { MsgInformativo } from '../Toast/msgInformativo' |
||||||
|
|
||||||
|
interface IProps { |
||||||
|
id: number |
||||||
|
value: number |
||||||
|
disabled?: boolean |
||||||
|
postCost: (id: number, value: number) => void |
||||||
|
} |
||||||
|
|
||||||
|
export const ControlledInput: FC<IProps> = (props) => { |
||||||
|
const [id, setid] = useState(props.id) |
||||||
|
const [value, setValue] = useState(props.value) |
||||||
|
const [header, setHeader] = useState('') |
||||||
|
const [msgColor, setMsgColor] = React.useState('primary') |
||||||
|
const [show, setShowMsg] = useState(false) |
||||||
|
const [msg, setMsg] = useState('') |
||||||
|
|
||||||
|
const onChange = (event: any) => { |
||||||
|
setValue(event.target.value) |
||||||
|
} |
||||||
|
const handleKeyDown = (event: any) => { |
||||||
|
if (event.key === 'Enter') { |
||||||
|
if (isNaN(event.target.value)) { |
||||||
|
alert('Valor no valido!') |
||||||
|
return |
||||||
|
} |
||||||
|
props.postCost(id, event.target.value) |
||||||
|
} |
||||||
|
} |
||||||
|
return ( |
||||||
|
<> |
||||||
|
<input |
||||||
|
value={value} |
||||||
|
onChange={onChange} |
||||||
|
disabled={props.disabled} |
||||||
|
onKeyDown={(e) => handleKeyDown(e)} |
||||||
|
style={{ width: '70px' }} |
||||||
|
/> |
||||||
|
<MsgInformativo |
||||||
|
show={show} |
||||||
|
msg={msg} |
||||||
|
header={header} |
||||||
|
msgColor={msgColor} |
||||||
|
closeToast={() => { |
||||||
|
setShowMsg(false) |
||||||
|
}} |
||||||
|
/> |
||||||
|
</> |
||||||
|
) |
||||||
|
} |
||||||
@ -0,0 +1,245 @@ |
|||||||
|
import axios from 'axios' |
||||||
|
import React, { FC, useCallback, useEffect, useState } from 'react' |
||||||
|
import { useDropzone } from 'react-dropzone' |
||||||
|
import '../../../css/generic01.css' |
||||||
|
import FileManagerDataService from '../../../Services/Utils/FileManager.Services' |
||||||
|
import { TargetURL } from '../../../Constants/TargetURL' |
||||||
|
import { Alert, Col, Container, Row } from 'react-bootstrap' |
||||||
|
import { IconContext } from 'react-icons' |
||||||
|
import { BsFillXCircleFill } from 'react-icons/bs' |
||||||
|
import IFileManager from '../../../Interfaces/Utils/IFileManager' |
||||||
|
import { MsgInformativo } from '../Toast/msgInformativo' |
||||||
|
|
||||||
|
interface IProps { |
||||||
|
IDProcess: number |
||||||
|
IDUser: number |
||||||
|
IdFile: number |
||||||
|
FileName: string |
||||||
|
Prefijo?: string |
||||||
|
Leyenda: string |
||||||
|
canDelete: boolean |
||||||
|
FileType: string[] |
||||||
|
width: number |
||||||
|
height: number |
||||||
|
onDelete?: (val: boolean) => void |
||||||
|
setBackgroundColor?: number |
||||||
|
onAppendFM: (idFile: number) => void |
||||||
|
} |
||||||
|
|
||||||
|
export const FileManager: FC<IProps> = (props) => { |
||||||
|
const [Archivo, setArchivo] = useState<IFileManager>() |
||||||
|
const [UserId, setUserId] = useState(() => { |
||||||
|
const stickyValue = window.localStorage.getItem('UserId') |
||||||
|
return stickyValue !== null ? JSON.parse(stickyValue) : 0 |
||||||
|
}) |
||||||
|
// const [BackgroundColor, setBackgroundColor] = useState('#000000')
|
||||||
|
const [header, setHeader] = useState('') |
||||||
|
//const [msgColor, setMsgColor] = React.useState('primary')
|
||||||
|
const [show, setShowMsg] = useState(false) |
||||||
|
const [msg, setMsg] = useState('') |
||||||
|
const URL = new TargetURL() |
||||||
|
const msgColor = 'primary' |
||||||
|
|
||||||
|
const onDrop = useCallback( |
||||||
|
(acceptedFiles: any) => { |
||||||
|
acceptedFiles.forEach((file: File) => { |
||||||
|
/* if (!file.name.toLowerCase().endsWith(props.FileType)) { |
||||||
|
return false |
||||||
|
} */ |
||||||
|
var ext = file.name.substr(file.name.lastIndexOf('.') + 1) |
||||||
|
if (!props.FileType.includes(ext)) { |
||||||
|
return false |
||||||
|
} |
||||||
|
const reader = new FileReader() |
||||||
|
reader.onabort = () => console.log('file reading was aborted') |
||||||
|
reader.onerror = () => console.log('file reading has failed') |
||||||
|
reader.onload = () => { |
||||||
|
// Do whatever you want with the file contents
|
||||||
|
const binaryStr = reader.result |
||||||
|
console.log(binaryStr) |
||||||
|
if (binaryStr) { |
||||||
|
const formData = new FormData() |
||||||
|
formData.append('name', file.name) |
||||||
|
formData.append('file', file) |
||||||
|
axios |
||||||
|
.post( |
||||||
|
URL.get() + |
||||||
|
`/FileManager/AppendFileByProcess?IdUsuario=${props.IDUser}&Proceso=${props.IDProcess}&Tags=${props.IdFile}&crud=1`, |
||||||
|
formData |
||||||
|
) |
||||||
|
.then((res) => { |
||||||
|
if (res.data.id > 0) { |
||||||
|
setArchivo(res.data) |
||||||
|
props.onAppendFM(res.data.id) |
||||||
|
} else { |
||||||
|
setHeader('Error') |
||||||
|
setMsg('No se guardo el archivo, favor de verificar que no este vacio') |
||||||
|
setShowMsg(true) |
||||||
|
return |
||||||
|
} |
||||||
|
}) |
||||||
|
.catch((err) => alert('File Upload Error ' + err)) |
||||||
|
console.log(JSON.stringify(file)) |
||||||
|
} |
||||||
|
} |
||||||
|
reader.readAsArrayBuffer(file) |
||||||
|
// }
|
||||||
|
}) |
||||||
|
}, |
||||||
|
[props] |
||||||
|
) |
||||||
|
const { getRootProps, getInputProps } = useDropzone({ onDrop }) |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
if (props.IdFile > 0) { |
||||||
|
FileManagerDataService.getFileInfoFromProcess(props.IdFile, props.IDProcess) |
||||||
|
.then((response) => { |
||||||
|
setArchivo(response.data) |
||||||
|
//console.log(JSON.stringify(response.data) + ' ' + props.IdFile)
|
||||||
|
}) |
||||||
|
.catch((e: Error) => { |
||||||
|
setHeader('Error') |
||||||
|
setMsg('Ocurrio un error: ' + e) |
||||||
|
setShowMsg(true) |
||||||
|
return |
||||||
|
}) |
||||||
|
} |
||||||
|
}, [props]) |
||||||
|
|
||||||
|
const getFileContent = () => { |
||||||
|
/* let Empty: IFileManager = { |
||||||
|
id: 0, |
||||||
|
idUsuario: props.IDUser, |
||||||
|
proceso: props.IDProcess, |
||||||
|
nombreArchivo: '', |
||||||
|
fechaRegistro: '', |
||||||
|
tags: '', |
||||||
|
size: 0, |
||||||
|
} */ |
||||||
|
FileManagerDataService.getFileContent(props.IdFile, props.IDProcess) |
||||||
|
.then((response: any) => { |
||||||
|
if (response.status === 200) { |
||||||
|
if (Archivo?.nombreArchivo.toLowerCase().endsWith('.pdf')) { |
||||||
|
console.log(response.data) |
||||||
|
const blob = new Blob([response.data], { type: 'application/pdf' }) |
||||||
|
const url = window.URL.createObjectURL(blob) |
||||||
|
window.open(url) |
||||||
|
} else if (Archivo?.nombreArchivo.toLowerCase().endsWith('.pdf')) { |
||||||
|
console.log(response.data) |
||||||
|
const blob = new Blob([response.data], { type: 'application/pdf' }) |
||||||
|
const url = window.URL.createObjectURL(blob) |
||||||
|
window.open(url) |
||||||
|
} else { |
||||||
|
const url = window.URL.createObjectURL(new Blob([response.data])) |
||||||
|
const link = document.createElement('a') |
||||||
|
link.href = url |
||||||
|
link.setAttribute('download', Archivo?.nombreArchivo ? Archivo?.nombreArchivo : 'Archivo.zip') |
||||||
|
document.body.appendChild(link) |
||||||
|
link.click() |
||||||
|
} |
||||||
|
} else { |
||||||
|
setHeader('Error') |
||||||
|
setMsg('A este concepto no se le ha anexado archivo') |
||||||
|
setShowMsg(true) |
||||||
|
return |
||||||
|
} |
||||||
|
}) |
||||||
|
.catch((e: Error) => { |
||||||
|
setHeader('Error') |
||||||
|
setMsg('A este concepto no se le ha anexado archivo') |
||||||
|
setShowMsg(true) |
||||||
|
return |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
const deleteFile = () => { |
||||||
|
let id = Archivo?.id ? Archivo?.id : 0 |
||||||
|
FileManagerDataService.DeleteFile(id) |
||||||
|
.then((response: any) => { |
||||||
|
if (response.status === 200) { |
||||||
|
setArchivo({ id: 0, idUsuario: 0, proceso: 0, nombreArchivo: '', fechaRegistro: '', tags: '', size: 0 }) |
||||||
|
setHeader('Informativo') |
||||||
|
setMsg(response.data.respuesta) |
||||||
|
setShowMsg(true) |
||||||
|
} else { |
||||||
|
setHeader('Error') |
||||||
|
setMsg('Algo sucedio, no se pudo eliminar el archivo!') |
||||||
|
setShowMsg(true) |
||||||
|
return |
||||||
|
} |
||||||
|
}) |
||||||
|
.catch((e: Error) => {}) |
||||||
|
} |
||||||
|
|
||||||
|
const getRGB = (color: number) => { |
||||||
|
const base = 255 - color * 1 |
||||||
|
// const baseR = 255 - base * 0
|
||||||
|
const baseG = 255 - base * 2 |
||||||
|
// const baseB = 255 - base * 5
|
||||||
|
// const R = baseR.toString(16)
|
||||||
|
const G = baseG.toString(16) |
||||||
|
// const B = baseB.toString(16)
|
||||||
|
const newBackcolor = '#F1' + G.padStart(2, '0').replace('-', '').substring(0, 2) + 'FE' |
||||||
|
return newBackcolor.replace('-', '').substring(0, 7) |
||||||
|
} |
||||||
|
|
||||||
|
return ( |
||||||
|
<> |
||||||
|
<div> |
||||||
|
<div |
||||||
|
{...getRootProps()} |
||||||
|
className={Archivo?.nombreArchivo ? 'hideDiv' : 'dropzoneFileManager'} |
||||||
|
style={{ |
||||||
|
width: props.width, |
||||||
|
backgroundColor: props.setBackgroundColor ? getRGB(props.setBackgroundColor) : '#D2F9FC', |
||||||
|
}} |
||||||
|
> |
||||||
|
<input {...getInputProps()} /> |
||||||
|
<p>{!Archivo?.nombreArchivo ? props.Leyenda : ''}</p> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<Container className='labelSize13px'> |
||||||
|
{Archivo?.nombreArchivo ? ( |
||||||
|
<Alert variant='primary'> |
||||||
|
<Row> |
||||||
|
<Col xs={11}> |
||||||
|
<span style={{ fontWeight: 'bold' }}>{props.Prefijo ? props.Prefijo : 'Archivo'}</span> : |
||||||
|
<a |
||||||
|
href='#' |
||||||
|
onClick={() => { |
||||||
|
getFileContent() |
||||||
|
}} |
||||||
|
> |
||||||
|
{Archivo?.nombreArchivo} |
||||||
|
</a> |
||||||
|
</Col> |
||||||
|
<Col xs={1} style={{ visibility: props.canDelete ? 'visible' : 'hidden' }}> |
||||||
|
<IconContext.Provider value={{ color: 'red', size: '20px' }}> |
||||||
|
<BsFillXCircleFill |
||||||
|
onClick={() => { |
||||||
|
deleteFile() |
||||||
|
}} |
||||||
|
style={{ cursor: 'pointer' }} |
||||||
|
/> |
||||||
|
</IconContext.Provider> |
||||||
|
</Col> |
||||||
|
</Row> |
||||||
|
</Alert> |
||||||
|
) : ( |
||||||
|
'' |
||||||
|
)} |
||||||
|
</Container> |
||||||
|
<MsgInformativo |
||||||
|
show={show} |
||||||
|
msg={msg} |
||||||
|
header={header} |
||||||
|
msgColor={msgColor} |
||||||
|
closeToast={() => { |
||||||
|
setShowMsg(false) |
||||||
|
}} |
||||||
|
></MsgInformativo> |
||||||
|
</> |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
export default FileManager |
||||||
@ -0,0 +1,335 @@ |
|||||||
|
import React, { FC, useEffect, useState } from 'react' |
||||||
|
import MFileManagerDS from '../../../Services/Utils/MFileManager.Service' |
||||||
|
import IFileManager from '../../../Interfaces/Utils/IFileManager' |
||||||
|
import { Alert, Button, Card, Col, ListGroup, Modal, Row } from 'react-bootstrap' |
||||||
|
import { IconContext } from 'react-icons' |
||||||
|
import { BsFillXCircleFill } from 'react-icons/bs' |
||||||
|
import { MsgInformativo } from '../Toast/msgInformativo' |
||||||
|
import { TargetURL } from '../../../Constants/TargetURL' |
||||||
|
|
||||||
|
interface IProps { |
||||||
|
IDTrafico: number |
||||||
|
Proceso: number |
||||||
|
Leyenda?: string |
||||||
|
showPreview: number |
||||||
|
canEdit: boolean |
||||||
|
} |
||||||
|
|
||||||
|
export const MFileManager: FC<IProps> = (props) => { |
||||||
|
const [UserId, setUserId] = useState(() => { |
||||||
|
const stickyValue = window.localStorage.getItem('UserId') |
||||||
|
return stickyValue !== null ? JSON.parse(stickyValue) : 0 |
||||||
|
}) |
||||||
|
const [IDTrafico, setIDTrafico] = useState<number>(props.IDTrafico ? props.IDTrafico : 0) |
||||||
|
const [Proceso, setProceso] = useState<number>(props.Proceso ? props.Proceso : 0) |
||||||
|
const [ListaArchivos, setListaArchivos] = useState<IFileManager[]>() |
||||||
|
const [NombreArchivo, setNombreArchivo] = useState('') |
||||||
|
const [MsgDialogDelete, setMsgDialogDelete] = useState(false) |
||||||
|
const [IDArchivo, setIDArchivo] = useState(0) |
||||||
|
const [header, setHeader] = useState('') |
||||||
|
const [show, setShowMsg] = useState(false) |
||||||
|
const [msg, setMsg] = useState('') |
||||||
|
const URL = new TargetURL() |
||||||
|
const msgColor = 'primary' |
||||||
|
|
||||||
|
const selectedFiles = (selectorFiles: any) => { |
||||||
|
var formData = new FormData() |
||||||
|
for (let i = 0; i < selectorFiles.files.length; i++) { |
||||||
|
formData.append('FileList', selectorFiles.files[i]) |
||||||
|
} |
||||||
|
MFileManagerDS.Append(formData, IDTrafico, Proceso, UserId) |
||||||
|
.then((response) => { |
||||||
|
setListaArchivos(response.data) |
||||||
|
}) |
||||||
|
.catch((e: Error) => { |
||||||
|
alert('Ocurrio un error: ' + e) |
||||||
|
return |
||||||
|
}) |
||||||
|
return false |
||||||
|
} |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
setIDTrafico(props.IDTrafico) |
||||||
|
setProceso(props.Proceso) |
||||||
|
MFileManagerDS.Get(props.IDTrafico, props.Proceso) |
||||||
|
.then((response) => { |
||||||
|
setListaArchivos(response.data) |
||||||
|
}) |
||||||
|
.catch((e: Error) => { |
||||||
|
alert('Ocurrio un error: ' + e) |
||||||
|
return |
||||||
|
}) |
||||||
|
}, [props.IDTrafico, props.Proceso]) |
||||||
|
|
||||||
|
const confirmDelete = (row: IFileManager) => { |
||||||
|
setIDArchivo(row.id) |
||||||
|
setNombreArchivo(row.nombreArchivo) |
||||||
|
setMsgDialogDelete(true) |
||||||
|
} |
||||||
|
|
||||||
|
const deleteItem = () => { |
||||||
|
MFileManagerDS.DeleteFile(IDArchivo) |
||||||
|
.then((response) => { |
||||||
|
var arrArchivos = ListaArchivos!.filter(function (el) { |
||||||
|
return el.id !== IDArchivo |
||||||
|
}) |
||||||
|
setListaArchivos(arrArchivos) |
||||||
|
setHeader('Informtivo') |
||||||
|
setMsg(response.data.respuesta) |
||||||
|
setMsgDialogDelete(false) |
||||||
|
setShowMsg(false) |
||||||
|
return |
||||||
|
}) |
||||||
|
.catch((e: Error) => { |
||||||
|
setHeader('Error') |
||||||
|
setMsg('Ocurrio un error, no se elimino el archivo') |
||||||
|
setMsgDialogDelete(false) |
||||||
|
setShowMsg(false) |
||||||
|
return |
||||||
|
}) |
||||||
|
return false |
||||||
|
} |
||||||
|
|
||||||
|
const getFileContent = (row: IFileManager) => { |
||||||
|
MFileManagerDS.getFileContentById(row.id, row.proceso) |
||||||
|
.then((response: any) => { |
||||||
|
if (response.status === 200) { |
||||||
|
if (row.nombreArchivo.toLowerCase().endsWith('.pdf')) { |
||||||
|
// console.log(response.data)
|
||||||
|
const blob = new Blob([response.data], { type: 'application/pdf' }) |
||||||
|
const url = window.URL.createObjectURL(blob) |
||||||
|
window.open(url) |
||||||
|
} else if ( |
||||||
|
row.nombreArchivo.toLowerCase().endsWith('.png') || |
||||||
|
row.nombreArchivo.toLowerCase().endsWith('.jpg') |
||||||
|
) { |
||||||
|
const blob = new Blob([response.data], { type: 'image/png' }) |
||||||
|
const url = window.URL.createObjectURL(blob) |
||||||
|
window.open(url) |
||||||
|
} else if (row.nombreArchivo.toLowerCase().endsWith('.xlsx')) { |
||||||
|
const blob = new Blob([response.data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' }) |
||||||
|
const url = window.URL.createObjectURL(blob) |
||||||
|
window.open(url) |
||||||
|
} else if ( |
||||||
|
row.nombreArchivo.toLowerCase().endsWith('.xls')) { |
||||||
|
const blob = new Blob([response.data], { type: 'application/vnd.ms-excel' }) |
||||||
|
const url = window.URL.createObjectURL(blob) |
||||||
|
window.open(url) |
||||||
|
} else { |
||||||
|
const url = window.URL.createObjectURL(new Blob([response.data])) |
||||||
|
const link = document.createElement('a') |
||||||
|
link.href = url |
||||||
|
link.setAttribute('download', NombreArchivo ? NombreArchivo : 'Archivo.zip') |
||||||
|
document.body.appendChild(link) |
||||||
|
link.click() |
||||||
|
} |
||||||
|
} else { |
||||||
|
setHeader('Error') |
||||||
|
setMsg('A este concepto no se le ha anexado PDF') |
||||||
|
setShowMsg(true) |
||||||
|
return |
||||||
|
} |
||||||
|
}) |
||||||
|
.catch((e: Error) => { |
||||||
|
setHeader('Error') |
||||||
|
setMsg('A este concepto no se le ha anexado PDF') |
||||||
|
setShowMsg(true) |
||||||
|
return |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
return ( |
||||||
|
<div> |
||||||
|
<br /> |
||||||
|
<Card> |
||||||
|
<Card.Body> |
||||||
|
<Card.Title style={{ fontSize: '15px' }}> |
||||||
|
{props.Leyenda ? props.Leyenda : ''} |
||||||
|
{props.canEdit ? ( |
||||||
|
<input type='file' multiple name='FileList' onChange={(e) => selectedFiles(e.target)} /> |
||||||
|
) : ( |
||||||
|
'' |
||||||
|
)} |
||||||
|
</Card.Title> |
||||||
|
{ListaArchivos && props.showPreview === 1 ? ( |
||||||
|
<div> |
||||||
|
<Row xs={1} md={3} className='g-1'> |
||||||
|
{ListaArchivos |
||||||
|
? ListaArchivos.map((rec) => { |
||||||
|
return ( |
||||||
|
<Col key={rec.id}> |
||||||
|
<Card style={{ width: '28rem', textAlign: 'center' }}> |
||||||
|
<Card.Body> |
||||||
|
<Row> |
||||||
|
<Col xs={3}></Col> |
||||||
|
<Col xs={5}> |
||||||
|
<img |
||||||
|
src={`${URL.get()}/Utils/MFileManager/GetFileContentById?id=${rec.id}&Proceso=${ |
||||||
|
rec.proceso |
||||||
|
}`}
|
||||||
|
width={150} |
||||||
|
height={200} |
||||||
|
alt={'Imagen'} |
||||||
|
onClick={() => { |
||||||
|
getFileContent(rec) |
||||||
|
}} |
||||||
|
/> |
||||||
|
</Col> |
||||||
|
<Col |
||||||
|
xs={1} |
||||||
|
alt='De un click aqui para eliminar' |
||||||
|
style={{ visibility: props.canEdit ? 'visible' : 'hidden' }} |
||||||
|
> |
||||||
|
<IconContext.Provider value={{ color: 'red', size: '20px' }}> |
||||||
|
<BsFillXCircleFill |
||||||
|
onClick={() => { |
||||||
|
confirmDelete(rec) |
||||||
|
}} |
||||||
|
style={{ cursor: 'pointer' }} |
||||||
|
/> |
||||||
|
</IconContext.Provider> |
||||||
|
</Col> |
||||||
|
<Col xs={3}></Col> |
||||||
|
</Row> |
||||||
|
<Row> |
||||||
|
<Col xs={12}> </Col> |
||||||
|
</Row> |
||||||
|
<Row> |
||||||
|
<Col xs={12}>{rec.nombreArchivo}</Col> |
||||||
|
</Row> |
||||||
|
</Card.Body> |
||||||
|
</Card> |
||||||
|
</Col> |
||||||
|
) |
||||||
|
}) |
||||||
|
: ''} |
||||||
|
</Row> |
||||||
|
</div> |
||||||
|
) : ListaArchivos && props.showPreview === 2 ? ( |
||||||
|
<div> |
||||||
|
<Row xs={1} md={3} className='g-1'> |
||||||
|
{ListaArchivos |
||||||
|
? ListaArchivos.map((rec) => { |
||||||
|
return ( |
||||||
|
<Col key={rec.id}> |
||||||
|
<Card style={{ width: '28rem', textAlign: 'center' }}> |
||||||
|
<Card.Body> |
||||||
|
<Alert variant='primary'> |
||||||
|
<Row> |
||||||
|
<Col xs={11}>{rec.nombreArchivo}</Col> |
||||||
|
<Col |
||||||
|
xs={1} |
||||||
|
alt='De un click aqui para eliminar' |
||||||
|
style={{ visibility: props.canEdit ? 'visible' : 'hidden' }} |
||||||
|
> |
||||||
|
<IconContext.Provider value={{ color: 'red', size: '20px' }}> |
||||||
|
<BsFillXCircleFill |
||||||
|
onClick={() => { |
||||||
|
confirmDelete(rec) |
||||||
|
}} |
||||||
|
style={{ cursor: 'pointer' }} |
||||||
|
/> |
||||||
|
</IconContext.Provider> |
||||||
|
</Col> |
||||||
|
</Row> |
||||||
|
</Alert> |
||||||
|
</Card.Body> |
||||||
|
</Card> |
||||||
|
</Col> |
||||||
|
) |
||||||
|
}) |
||||||
|
: ''} |
||||||
|
</Row> |
||||||
|
</div> |
||||||
|
) : ListaArchivos && props.showPreview === 3 ? ( |
||||||
|
<div> |
||||||
|
{ListaArchivos |
||||||
|
? ListaArchivos.map((rec) => { |
||||||
|
return ( |
||||||
|
<ListGroup style={{ width: '100%' }}> |
||||||
|
<ListGroup.Item |
||||||
|
key={rec.id} |
||||||
|
style={{ |
||||||
|
paddingLeft: '5px', |
||||||
|
backgroundColor: '#CFE2FF', |
||||||
|
color: '#314EFA', |
||||||
|
}} |
||||||
|
> |
||||||
|
<Row> |
||||||
|
<Col> |
||||||
|
<span |
||||||
|
style={{ cursor: 'pointer' }} |
||||||
|
onClick={() => { |
||||||
|
getFileContent(rec) |
||||||
|
}} |
||||||
|
> |
||||||
|
{rec.nombreArchivo} |
||||||
|
</span> |
||||||
|
</Col> |
||||||
|
<Col xs={1} style={{ visibility: props.canEdit ? 'visible' : 'hidden' }}> |
||||||
|
<span> |
||||||
|
<IconContext.Provider value={{ color: 'red', size: '20px' }}> |
||||||
|
<BsFillXCircleFill |
||||||
|
onClick={() => { |
||||||
|
confirmDelete(rec) |
||||||
|
}} |
||||||
|
style={{ cursor: 'pointer' }} |
||||||
|
/> |
||||||
|
</IconContext.Provider> |
||||||
|
</span> |
||||||
|
</Col> |
||||||
|
</Row> |
||||||
|
</ListGroup.Item> |
||||||
|
</ListGroup> |
||||||
|
) |
||||||
|
}) |
||||||
|
: ''} |
||||||
|
</div> |
||||||
|
) : ( |
||||||
|
'' |
||||||
|
)} |
||||||
|
</Card.Body> |
||||||
|
</Card> |
||||||
|
<Modal show={MsgDialogDelete} onHide={() => setMsgDialogDelete(false)} size='lg'> |
||||||
|
<Modal.Body> |
||||||
|
<h5> |
||||||
|
Favor de confirmar |
||||||
|
<Row> |
||||||
|
<Col xs={12}> </Col> |
||||||
|
</Row> |
||||||
|
<Alert variant='primary'> |
||||||
|
¿Esta seguro de eliminar el archivo: <br /> |
||||||
|
<br /> {NombreArchivo}? |
||||||
|
</Alert> |
||||||
|
</h5> |
||||||
|
</Modal.Body> |
||||||
|
<Modal.Footer> |
||||||
|
<Row> |
||||||
|
<Col xs={1}> |
||||||
|
<Button variant='secondary' onClick={() => setMsgDialogDelete(false)} size='sm'> |
||||||
|
Cerrar |
||||||
|
</Button> |
||||||
|
</Col> |
||||||
|
<Col xs={5} style={{ paddingLeft: '550px', paddingRight: '0px' }}> |
||||||
|
|
||||||
|
</Col> |
||||||
|
<Col xs={1}> |
||||||
|
<Button variant='danger' onClick={() => deleteItem()} size='sm'> |
||||||
|
Eliminar |
||||||
|
</Button> |
||||||
|
</Col> |
||||||
|
</Row> |
||||||
|
</Modal.Footer> |
||||||
|
</Modal> |
||||||
|
<MsgInformativo |
||||||
|
show={show} |
||||||
|
msg={msg} |
||||||
|
header={header} |
||||||
|
msgColor={msgColor} |
||||||
|
closeToast={() => { |
||||||
|
setShowMsg(false) |
||||||
|
}} |
||||||
|
/> |
||||||
|
</div> |
||||||
|
) |
||||||
|
} |
||||||
@ -0,0 +1,51 @@ |
|||||||
|
import React, { FC } from 'react' |
||||||
|
import { Toast, ToastContainer } from 'react-bootstrap' |
||||||
|
import { IconContext } from 'react-icons' |
||||||
|
import { BsFillExclamationSquareFill, BsXOctagonFill } from 'react-icons/bs' |
||||||
|
|
||||||
|
interface IProps { |
||||||
|
show: boolean |
||||||
|
msg: string |
||||||
|
header: string |
||||||
|
msgColor: string |
||||||
|
time?: number |
||||||
|
closeToast: (arg: boolean) => void |
||||||
|
} |
||||||
|
|
||||||
|
export const MsgInformativo: FC<IProps> = (props) => { |
||||||
|
return ( |
||||||
|
<div> |
||||||
|
<ToastContainer position={'middle-center'}> |
||||||
|
<Toast |
||||||
|
show={props.show} |
||||||
|
delay={props.time} |
||||||
|
bg={props.msgColor} |
||||||
|
autohide |
||||||
|
onClose={() => { |
||||||
|
props.closeToast(false) |
||||||
|
}} |
||||||
|
> |
||||||
|
<Toast.Header> |
||||||
|
<strong className='me-auto'> |
||||||
|
{props.header.toString().includes('Error') ? ( |
||||||
|
<IconContext.Provider value={{ color: 'red', size: '20px' }}> |
||||||
|
<BsXOctagonFill /> |
||||||
|
</IconContext.Provider> |
||||||
|
) : null} |
||||||
|
{props.header.toString().includes('Informativo') ? ( |
||||||
|
<IconContext.Provider value={{ color: 'blue', size: '20px' }}> |
||||||
|
<BsFillExclamationSquareFill /> |
||||||
|
</IconContext.Provider> |
||||||
|
) : null} |
||||||
|
|
||||||
|
<span style={{ color: props.header == 'Error' ? 'red' : '' }}>{props.header}</span> |
||||||
|
</strong> |
||||||
|
</Toast.Header> |
||||||
|
<Toast.Body style={{ backgroundColor: '#FFFFFF' }}> |
||||||
|
<div className={props.msgColor == 'warning' ? 'alert alert-warning' : ''}>{props.msg}</div> |
||||||
|
</Toast.Body> |
||||||
|
</Toast> |
||||||
|
</ToastContainer> |
||||||
|
</div> |
||||||
|
) |
||||||
|
} |
||||||
@ -0,0 +1,43 @@ |
|||||||
|
import React, { FC, useState } from 'react' |
||||||
|
import '../../css/login.css' |
||||||
|
import DropdownButton from 'react-bootstrap/DropdownButton' |
||||||
|
import Dropdown from 'react-bootstrap/Dropdown' |
||||||
|
|
||||||
|
interface IProps {} |
||||||
|
|
||||||
|
const AsignacionPerfil: FC<IProps> = (props) => { |
||||||
|
const [value, setValue] = useState('') |
||||||
|
const handleSelect = (e: any) => { |
||||||
|
console.log(e) |
||||||
|
setValue(e) |
||||||
|
} |
||||||
|
return ( |
||||||
|
<div> |
||||||
|
<div id='login'> |
||||||
|
<div className='container'> |
||||||
|
<div id='login-row' className='row justify-content-center align-items-center'> |
||||||
|
<div id='login-column' className='col-md-4'> |
||||||
|
<div id='login-box' className='col-md-12'> |
||||||
|
<h3 className='text-center text-info'>Register</h3> |
||||||
|
<div className='form-group'> |
||||||
|
<label className='text-info' htmlFor='ID'> |
||||||
|
ID |
||||||
|
</label> |
||||||
|
<DropdownButton title='Dropdown right' id='dropdown-menu-align-right' onSelect={handleSelect}> |
||||||
|
<Dropdown.Item eventKey='option-1'>option-1</Dropdown.Item> |
||||||
|
<Dropdown.Item eventKey='option-2'>option-2</Dropdown.Item> |
||||||
|
<Dropdown.Item eventKey='option-3'>option 3</Dropdown.Item> |
||||||
|
<Dropdown.Divider /> |
||||||
|
<Dropdown.Item eventKey='some link'>some link</Dropdown.Item> |
||||||
|
</DropdownButton> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
export default AsignacionPerfil |
||||||
@ -0,0 +1,127 @@ |
|||||||
|
import * as React from 'react' |
||||||
|
import { Formik, FormikHelpers, FormikProps, Form, Field, useField, FieldProps, ErrorMessage } from 'formik' |
||||||
|
import * as Yup from 'yup' |
||||||
|
import { IregistroPermisoClientes } from '../../Interfaces/registroPermisoClientes' |
||||||
|
import '../../css/login.css' |
||||||
|
|
||||||
|
interface IProps {} |
||||||
|
|
||||||
|
const SignupSchema = Yup.object().shape({ |
||||||
|
ModuloCliente: Yup.string().required('Requerido'), |
||||||
|
IoE: Yup.string().required('Requerido'), |
||||||
|
}) |
||||||
|
|
||||||
|
export default function RegisterPermisoClientes(props: IProps) { |
||||||
|
const initialValues: IregistroPermisoClientes = { |
||||||
|
id: 1, |
||||||
|
IdUsuario: 1, |
||||||
|
ModuloCliente: 0, |
||||||
|
IoE: 0, |
||||||
|
Aduana: 0, |
||||||
|
Patente: 0, |
||||||
|
} |
||||||
|
|
||||||
|
const validateForm = (values: IregistroPermisoClientes) => { |
||||||
|
const errors = { ModuloCliente: '', IoE: '', Aduana: '', Patente: '' } |
||||||
|
// console.log(errors);
|
||||||
|
if (!values.ModuloCliente) { |
||||||
|
errors.ModuloCliente = 'Campo requerido' |
||||||
|
} else if (values.ModuloCliente == 0) { |
||||||
|
errors.ModuloCliente = 'Debe seleccionar el modulo' |
||||||
|
} |
||||||
|
if (!values.IoE) { |
||||||
|
errors.IoE = 'Campo requerido' |
||||||
|
} else if (values.IoE == 0) { |
||||||
|
errors.IoE = 'Debe seleccionar si es Importacion e Exportacion' |
||||||
|
} |
||||||
|
return errors |
||||||
|
} |
||||||
|
|
||||||
|
return ( |
||||||
|
<div id='login'> |
||||||
|
<div className='container'> |
||||||
|
<div id='login-row' className='row justify-content-center align-items-center'> |
||||||
|
<div id='login-column' className='col-md-4'> |
||||||
|
<div id='login-box' className='col-md-12'> |
||||||
|
<Formik |
||||||
|
initialValues={initialValues} |
||||||
|
validationSchema={SignupSchema} |
||||||
|
onSubmit={(values) => { |
||||||
|
console.log(values) |
||||||
|
}} |
||||||
|
validate={validateForm} |
||||||
|
> |
||||||
|
{(formik) => { |
||||||
|
const { errors, touched, isValid, dirty, handleSubmit } = formik |
||||||
|
return ( |
||||||
|
<Form id='login-form' className='form' onSubmit={handleSubmit}> |
||||||
|
<h3 className='text-center text-info'>Permisos</h3> |
||||||
|
<div className='form-group'> |
||||||
|
<label className='text-info' htmlFor='ID'> |
||||||
|
ID |
||||||
|
</label> |
||||||
|
<Field id='ID' name='ID' className='form-control' placeholder='' disabled='disabled' /> |
||||||
|
</div> |
||||||
|
<div className='form-group'> |
||||||
|
<label className='text-info' htmlFor='IdUsuario'> |
||||||
|
ID Usuario |
||||||
|
</label> |
||||||
|
<Field |
||||||
|
id='IdUsuario' |
||||||
|
name='IdUsuario' |
||||||
|
className='form-control' |
||||||
|
placeholder='' |
||||||
|
disabled='disabled' |
||||||
|
/> |
||||||
|
</div> |
||||||
|
<div className='form-group'> |
||||||
|
<label className='text-info' htmlFor='ModuloCliente'> |
||||||
|
Modulo cliente |
||||||
|
</label> |
||||||
|
<Field id='ModuloCliente' name='ModuloCliente' className='form-control' placeholder='0' /> |
||||||
|
{errors.ModuloCliente && touched.ModuloCliente ? ( |
||||||
|
<div> |
||||||
|
{' '} |
||||||
|
<span style={{ color: '#FF3346' }}> * {errors.ModuloCliente} </span>{' '} |
||||||
|
</div> |
||||||
|
) : null} |
||||||
|
</div> |
||||||
|
<div className='form-group'> |
||||||
|
<label className='text-info' htmlFor='IoE'> |
||||||
|
Importacion / Exportacion |
||||||
|
</label> |
||||||
|
<Field id='IoE' name='IoE' className='form-control' placeholder='IoE' /> |
||||||
|
{errors.IoE && touched.IoE ? ( |
||||||
|
<div> |
||||||
|
{' '} |
||||||
|
<span style={{ color: '#FF3346' }}> * {errors.IoE} </span>{' '} |
||||||
|
</div> |
||||||
|
) : null} |
||||||
|
</div> |
||||||
|
<div className='form-group'> |
||||||
|
<label className='text-info' htmlFor='Aduana'> |
||||||
|
Aduana |
||||||
|
</label> |
||||||
|
<Field id='Aduana' name='Aduana' className='form-control' placeholder='Aduana' /> |
||||||
|
</div> |
||||||
|
<div className='form-group'> |
||||||
|
<label className='text-info' htmlFor='Patente'> |
||||||
|
Patente |
||||||
|
</label> |
||||||
|
<Field id='Patente' name='Patente' className='form-control' placeholder='Patente' /> |
||||||
|
</div> |
||||||
|
<br /> |
||||||
|
<button type='submit' className='btn btn-primary btn-lg btn-block'> |
||||||
|
login |
||||||
|
</button> |
||||||
|
</Form> |
||||||
|
) |
||||||
|
}} |
||||||
|
</Formik> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
) |
||||||
|
} |
||||||
@ -0,0 +1,99 @@ |
|||||||
|
import React, { FC } from 'react' |
||||||
|
import { Button, Form, Toast, ToastContainer } from 'react-bootstrap' |
||||||
|
import { MsgInformativo } from '../Utils/Toast/msgInformativo' |
||||||
|
import DTOUsuario from '../../DTO/DTOUsuario' |
||||||
|
import usuariosServices from '../../Services/Catalogos/Usuarios.Services' |
||||||
|
|
||||||
|
interface IProps {} |
||||||
|
|
||||||
|
export default function ResetCredentials(props: IProps) { |
||||||
|
const [header, setHerader] = React.useState('Error!') |
||||||
|
const [msgColor, setMsgColor] = React.useState('Primary') |
||||||
|
const [showMsg, setShowMsg] = React.useState(false) |
||||||
|
const [msg, setMsg] = React.useState('') |
||||||
|
const [usuario, setUsuario] = React.useState('') |
||||||
|
const [contrasena, setContrasena] = React.useState('') |
||||||
|
const [confirmaContrasena, setConfirmaContrasena] = React.useState('') |
||||||
|
|
||||||
|
const validaFormulario = () => { |
||||||
|
if (contrasena != confirmaContrasena) { |
||||||
|
setMsg('Contrasena no coincide con su confirmacion!') |
||||||
|
setShowMsg(true) |
||||||
|
return |
||||||
|
} |
||||||
|
|
||||||
|
const data: DTOUsuario = { |
||||||
|
Usuario: usuario, |
||||||
|
Contrasena: contrasena, |
||||||
|
} |
||||||
|
|
||||||
|
usuariosServices |
||||||
|
.resetPassword(data) |
||||||
|
.then((response) => { |
||||||
|
if (response.status == 200) alert('La contrasena se reseteo exisosamente') |
||||||
|
if (response.status == 204) alert('Usuario no existe') |
||||||
|
|
||||||
|
console.log(response.data) |
||||||
|
}) |
||||||
|
.catch((e: Error) => { |
||||||
|
console.log(e) |
||||||
|
//alert(e);
|
||||||
|
let message = e.message |
||||||
|
setMsg(message) |
||||||
|
if (message.includes('400')) setMsg('Usuario no encontrado') |
||||||
|
setShowMsg(true) |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
const closeToast = (show: boolean): void => { |
||||||
|
setShowMsg(false) |
||||||
|
} |
||||||
|
|
||||||
|
return ( |
||||||
|
<div> |
||||||
|
{' '} |
||||||
|
<div id='login'> |
||||||
|
<div className='container'> |
||||||
|
<div id='login-row' className='row justify-content-center align-items-center'> |
||||||
|
<div id='login-column' className='col-md-4'> |
||||||
|
<div id='login-box' className='col-md-12'> |
||||||
|
<Form id='login-form' className='form'> |
||||||
|
<h3 className='text-center text-info'>Olvido su contraseña</h3> |
||||||
|
<Form.Group className='mb-3 control-label' controlId='formBasicEmail'> |
||||||
|
<Form.Label>Usuario</Form.Label> |
||||||
|
<Form.Control placeholder='Usuario' onChange={(e) => setUsuario(e.currentTarget.value)} /> |
||||||
|
</Form.Group> |
||||||
|
<Form.Group className='mb-3 control-label' controlId='formBasicPassword'> |
||||||
|
<Form.Label>Nueva contraseña</Form.Label> |
||||||
|
<Form.Control |
||||||
|
type='password' |
||||||
|
placeholder='Contraseña' |
||||||
|
onChange={(e) => setContrasena(e.currentTarget.value)} |
||||||
|
/> |
||||||
|
</Form.Group> |
||||||
|
<Form.Group className='mb-3 control-label' controlId='formBasicPassword'> |
||||||
|
<Form.Label>Confirme su nueva contraseña</Form.Label> |
||||||
|
<Form.Control |
||||||
|
type='password' |
||||||
|
placeholder='Confirme su contraseña' |
||||||
|
onChange={(e) => setConfirmaContrasena(e.currentTarget.value)} |
||||||
|
/> |
||||||
|
</Form.Group> |
||||||
|
<Button |
||||||
|
variant='primary' |
||||||
|
onClick={() => { |
||||||
|
validaFormulario() |
||||||
|
}} |
||||||
|
> |
||||||
|
Submit |
||||||
|
</Button> |
||||||
|
</Form> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<MsgInformativo show={showMsg} msg={msg} header={header} msgColor={msgColor} closeToast={closeToast} /> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
) |
||||||
|
} |
||||||
@ -0,0 +1,11 @@ |
|||||||
|
export class TargetURL { |
||||||
|
get() { |
||||||
|
/* return !process.env.NODE_ENV || process.env.NODE_ENV === 'development' |
||||||
|
? 'https://gemcousa.solutions/GEMCOBackend/api' |
||||||
|
'https://localhost:5001/api' |
||||||
|
: "http://reportes.gemcousa.com:5000/api"; |
||||||
|
'https://www.gemcousa.mx/GEMCOBackend/api' |
||||||
|
'https://gemcousa.solutions/GEMCOBackend/api' */ |
||||||
|
return process.env.REACT_APP_API |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,4 @@ |
|||||||
|
export default interface DTO325AduanasPedidos { |
||||||
|
id: number, |
||||||
|
value: string |
||||||
|
} |
||||||
@ -0,0 +1,14 @@ |
|||||||
|
export default interface DTO325UpdateFromWeb { |
||||||
|
id: number, |
||||||
|
ComentarioGEMCO: string, |
||||||
|
FechaCompromiso: string, |
||||||
|
FechaCruce: string, |
||||||
|
Factura: string, |
||||||
|
MedidaCaja: string, |
||||||
|
Sello1: string, |
||||||
|
Sello2: string, |
||||||
|
UUID: string, |
||||||
|
Trafico: string, |
||||||
|
Pedimento: string, |
||||||
|
Patente: string |
||||||
|
} |
||||||
@ -0,0 +1,5 @@ |
|||||||
|
export default interface DTORptPedidos { |
||||||
|
Inicio: string, |
||||||
|
Fin: string, |
||||||
|
Aduana: string |
||||||
|
} |
||||||
@ -0,0 +1,4 @@ |
|||||||
|
export default interface DTOAnticiposAutoriza { |
||||||
|
id: number, |
||||||
|
idUsuario: number |
||||||
|
} |
||||||
@ -0,0 +1,7 @@ |
|||||||
|
export default interface DTOCorresponsalFacturaProveedor { |
||||||
|
id: number; |
||||||
|
proveedor: string;
|
||||||
|
factura: string; |
||||||
|
trafico: number; |
||||||
|
valorFacturaDls: number; |
||||||
|
} |
||||||
@ -0,0 +1,6 @@ |
|||||||
|
import ICorresponsalTerceros from "../../Interfaces/Corresponsales/ICorresponsalFacturasTerceros"; |
||||||
|
|
||||||
|
export default interface DTOCorresponsalFacturasTerceros { |
||||||
|
registro: ICorresponsalTerceros, |
||||||
|
respuesta: string |
||||||
|
} |
||||||
@ -0,0 +1,40 @@ |
|||||||
|
export default interface DTOCorresponsalTrafico { |
||||||
|
id: number |
||||||
|
fechaRegistro?: string |
||||||
|
idUsuario: number |
||||||
|
sUsuario?: string |
||||||
|
idCliente: number |
||||||
|
sCliente?: string |
||||||
|
tipoOperacion: number |
||||||
|
sTipoOperacion?: string |
||||||
|
tipoEmbarque: number |
||||||
|
sTipoEmbarque?: string |
||||||
|
idCorresponsal: number |
||||||
|
sCorresponsal?: string |
||||||
|
bultos?: number |
||||||
|
kilos?: number |
||||||
|
estatus?: number |
||||||
|
sEstatus?: string |
||||||
|
trafico?: string |
||||||
|
aduana?: number |
||||||
|
patente?: number |
||||||
|
pedimento?: number |
||||||
|
clave?: string |
||||||
|
fechaPago?: string |
||||||
|
tipoCambio?: number |
||||||
|
valorAduanaMN?: number |
||||||
|
totalPagado?: number |
||||||
|
valorFacturaMN?: number |
||||||
|
cantidadFracciones?: number |
||||||
|
buque?: string |
||||||
|
valorFacturaDls?: number |
||||||
|
descripcionMercancia?: string |
||||||
|
observaciones?: string |
||||||
|
fechaDesaduanamiento?: string |
||||||
|
semaforoFiscal?: number |
||||||
|
noCuenta?: string |
||||||
|
fechaCuenta?: string |
||||||
|
tipoMercancia?: number |
||||||
|
ultimaActualizacion?: string |
||||||
|
activo?: number |
||||||
|
} |
||||||
@ -0,0 +1,5 @@ |
|||||||
|
export default interface DTOCorresponsalCuentaComplementaria { |
||||||
|
id: number, |
||||||
|
idTrafico: number, |
||||||
|
idFile: number |
||||||
|
} |
||||||
@ -0,0 +1,4 @@ |
|||||||
|
export default interface DTOCuentaComplementariaEstatus { |
||||||
|
id: number, |
||||||
|
estatus: number |
||||||
|
} |
||||||
@ -0,0 +1,4 @@ |
|||||||
|
export default interface DTOItems { |
||||||
|
id: number; |
||||||
|
item: string; |
||||||
|
} |
||||||
@ -0,0 +1,5 @@ |
|||||||
|
export default interface DTOLogCorresponsalComplementariaEstatus { |
||||||
|
estatus: number, |
||||||
|
fCreacion: string, |
||||||
|
sEstatus: string |
||||||
|
} |
||||||
@ -0,0 +1,4 @@ |
|||||||
|
export default interface DTORectificacionHistorico { |
||||||
|
IdTrafico: number, |
||||||
|
IdUsuario: number |
||||||
|
} |
||||||
@ -0,0 +1,9 @@ |
|||||||
|
export default interface DTORptCorresponsalesTraficos { |
||||||
|
Inicio: string; |
||||||
|
Fin: string; |
||||||
|
TipoOperacion: number; |
||||||
|
NoCliente: number;
|
||||||
|
IdCorresponsal: number; |
||||||
|
Proceso: number; |
||||||
|
Modo: number; |
||||||
|
} |
||||||
@ -0,0 +1,6 @@ |
|||||||
|
export default interface DTOTraficoCompleto { |
||||||
|
id: number, |
||||||
|
idUsuario: number, |
||||||
|
estatus: number, |
||||||
|
comentarios: string |
||||||
|
}
|
||||||
@ -0,0 +1,7 @@ |
|||||||
|
export default interface DTOAEPeriodo { |
||||||
|
Anio: number; |
||||||
|
Mes: number; |
||||||
|
NoCliente: number; |
||||||
|
TipoOperacion: number; |
||||||
|
Referencias?: string[]; |
||||||
|
} |
||||||
@ -0,0 +1,5 @@ |
|||||||
|
export default interface DTOClienteTransportista { |
||||||
|
IdUsuario:number; |
||||||
|
sClave: string; |
||||||
|
asignado: boolean; |
||||||
|
}
|
||||||
@ -0,0 +1,4 @@ |
|||||||
|
export default interface DTOClonarUsuario { |
||||||
|
idUsuarioOrigen: number; |
||||||
|
idUsuarioDestino: number; |
||||||
|
} |
||||||
@ -0,0 +1,5 @@ |
|||||||
|
export default interface DTPItemMenuPerfil { |
||||||
|
IdPerfil: number; |
||||||
|
itemMenu: number; |
||||||
|
asignado: boolean; |
||||||
|
} |
||||||
@ -0,0 +1,4 @@ |
|||||||
|
export default interface DTOPerfilCreate { |
||||||
|
Perfil: string; |
||||||
|
IdPerfilClonado: number; |
||||||
|
} |
||||||
@ -0,0 +1,7 @@ |
|||||||
|
export default interface DTOReporte { |
||||||
|
Inicio: string; |
||||||
|
Fin: string; |
||||||
|
TipoOperacion: number; |
||||||
|
NoCliente: number;
|
||||||
|
IdUsuario: number; |
||||||
|
} |
||||||
@ -0,0 +1,4 @@ |
|||||||
|
export default interface DTOUsuario { |
||||||
|
Usuario: string; |
||||||
|
Contrasena : string; |
||||||
|
} |
||||||
@ -0,0 +1,5 @@ |
|||||||
|
export default interface IDTOUsuarioCliente { |
||||||
|
sClave: number; |
||||||
|
IdUsuario: number; |
||||||
|
agregar: boolean; |
||||||
|
} |
||||||
@ -0,0 +1,4 @@ |
|||||||
|
export default interface DTOUsuariosShort { |
||||||
|
id: number; |
||||||
|
usuario: string; |
||||||
|
} |
||||||
@ -0,0 +1,6 @@ |
|||||||
|
export default interface DTOasignaClienteProveedor { |
||||||
|
IdUsuario: number; |
||||||
|
sClaveCliente: string; |
||||||
|
sClave: string; |
||||||
|
asignado: boolean; |
||||||
|
} |
||||||
@ -0,0 +1,8 @@ |
|||||||
|
export default interface DTOgetArchivosPorReferencia { |
||||||
|
Referencia: string |
||||||
|
PedimentoLargo: string |
||||||
|
NoCliente: number |
||||||
|
IdUsuario: number |
||||||
|
Archivo: string |
||||||
|
Archivos: string[] |
||||||
|
} |
||||||
@ -0,0 +1,8 @@ |
|||||||
|
export default interface DTOgetThesePedimentos { |
||||||
|
Inicio: string; |
||||||
|
Fin: string; |
||||||
|
NoCliente: number; |
||||||
|
IdUsuario: number; |
||||||
|
TipoOperacion: number; |
||||||
|
Pedimentos: string[]; |
||||||
|
} |
||||||
@ -0,0 +1,3 @@ |
|||||||
|
export default interface DTOid { |
||||||
|
id: number |
||||||
|
} |
||||||
@ -0,0 +1,7 @@ |
|||||||
|
export default interface DTOAnexoFacturacionAlen { |
||||||
|
sReferencia: string |
||||||
|
nHonorarios: number |
||||||
|
nValidacion: number |
||||||
|
nPrevalidacion: number |
||||||
|
nCoordinacion: number |
||||||
|
} |
||||||
@ -0,0 +1,8 @@ |
|||||||
|
export default interface DTOAnexoFacturacionMission { |
||||||
|
sReferencia: string, |
||||||
|
cordCruce: number, |
||||||
|
cordFlete: number, |
||||||
|
nServicio: number, |
||||||
|
nContraprestacion: number, |
||||||
|
nHonorario: number
|
||||||
|
} |
||||||
@ -0,0 +1,4 @@ |
|||||||
|
export default interface DTOConceptos { |
||||||
|
id: number, |
||||||
|
concepto: string |
||||||
|
} |
||||||
@ -0,0 +1,5 @@ |
|||||||
|
export default interface DTONotificacionesContactoGrupo { |
||||||
|
idgrupo: number, |
||||||
|
accion: number, |
||||||
|
contactos: number[] |
||||||
|
} |
||||||
@ -0,0 +1,7 @@ |
|||||||
|
export default interface ICatCorresponsales { |
||||||
|
id: number; |
||||||
|
nombre: string; |
||||||
|
patente: number, |
||||||
|
aduana: number; |
||||||
|
correos: string |
||||||
|
} |
||||||
@ -0,0 +1,5 @@ |
|||||||
|
export default interface ICatProveedores { |
||||||
|
id: number; |
||||||
|
nombre: string; |
||||||
|
clasificacion: number; |
||||||
|
} |
||||||
@ -0,0 +1,5 @@ |
|||||||
|
export default interface IClientes { |
||||||
|
sClave: number; |
||||||
|
agrupado: number; |
||||||
|
sRazonSocial : string; |
||||||
|
} |
||||||
@ -0,0 +1,7 @@ |
|||||||
|
export default interface ItemMenuData { |
||||||
|
id: number; |
||||||
|
padreId: number; |
||||||
|
posicion: number; |
||||||
|
descripcion: string; |
||||||
|
url: string; |
||||||
|
} |
||||||
@ -0,0 +1,4 @@ |
|||||||
|
export interface IPerfil { |
||||||
|
id: number; |
||||||
|
perfil: string; |
||||||
|
} |
||||||
@ -0,0 +1,8 @@ |
|||||||
|
export default interface IProveedores { |
||||||
|
idUsuario: number; |
||||||
|
sClaveCliente: string; |
||||||
|
sClave: string; |
||||||
|
sRazonSocial: string; |
||||||
|
direccion: string; |
||||||
|
asignado: number; |
||||||
|
}
|
||||||
@ -0,0 +1,5 @@ |
|||||||
|
export default interface ITabulador { |
||||||
|
id: number, |
||||||
|
idCliente: number |
||||||
|
nombre: string |
||||||
|
} |
||||||
@ -0,0 +1,8 @@ |
|||||||
|
export default interface ITabuladorConceptos { |
||||||
|
id: number, |
||||||
|
idTabulador: number, |
||||||
|
idConcepto: number, |
||||||
|
concepto: string, |
||||||
|
costo: number, |
||||||
|
activo: number |
||||||
|
} |
||||||
@ -0,0 +1,7 @@ |
|||||||
|
export default interface ITransportistas { |
||||||
|
id: number; |
||||||
|
IdUsuario: number; |
||||||
|
sClave: string; |
||||||
|
sRazonSocial: string; |
||||||
|
asignado : number; |
||||||
|
}
|
||||||
@ -0,0 +1,11 @@ |
|||||||
|
export default interface IUsuarios { |
||||||
|
id: number; |
||||||
|
Usuario: string; |
||||||
|
Nombre: string; |
||||||
|
Contrasena: string; |
||||||
|
Correo: string; |
||||||
|
TipoUsuario : number; |
||||||
|
Activo: number; |
||||||
|
FechaAlta: string; |
||||||
|
UsuarioAlta: string; |
||||||
|
} |
||||||
@ -0,0 +1,15 @@ |
|||||||
|
export default interface ICorresponsalAnticipos { |
||||||
|
id: number, |
||||||
|
idTrafico: number, |
||||||
|
anticipo: number, |
||||||
|
moneda: number, |
||||||
|
concepto: string, |
||||||
|
solicita?: number, |
||||||
|
ssolicita?: string, |
||||||
|
fhSolicita?: string, |
||||||
|
autoriza?: number, |
||||||
|
sAutoriza?: string, |
||||||
|
fhAutoriza?: string, |
||||||
|
financiado: number, |
||||||
|
activo?: boolean |
||||||
|
} |
||||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue