Compare commits
No commits in common. 'main' and 'AmazonRelease1.1' have entirely different histories.
main
...
AmazonRelease1.1
@ -1,3 +0,0 @@ |
|||||||
{ |
|
||||||
"workbench.colorTheme": "Infinity Dark Theme Eye Friendly Colors" |
|
||||||
} |
|
||||||
File diff suppressed because it is too large
Load Diff
@ -1,575 +0,0 @@ |
|||||||
import React, { FC, useEffect, useState } from 'react' |
|
||||||
import { Alert, Button, Card, Col, Form, Modal, Row } from 'react-bootstrap' |
|
||||||
import { IconContext } from 'react-icons' |
|
||||||
import ICatFraccionesVulnerables from '../../../Interfaces/Catalogos/ICatFraccionesVulnerables' |
|
||||||
import FraccionesVulnerables from '../../../Services/Catalogos/FraccionesVulnerables' |
|
||||||
import { useDispatch, useSelector } from 'react-redux' |
|
||||||
import { BsFileEarmarkExcel, BsFillPencilFill, BsSearch } from 'react-icons/bs' |
|
||||||
import DataTable from 'react-data-table-component' |
|
||||||
import * as XLSX from 'xlsx' |
|
||||||
import { FaEraser } from 'react-icons/fa' |
|
||||||
import { FormControl } from 'react-bootstrap' |
|
||||||
import { AiFillCloseCircle } from 'react-icons/ai' |
|
||||||
import { AiOutlineSave } from 'react-icons/ai' |
|
||||||
import { MsgInformativo } from '../../Utils/Toast/msgInformativo' |
|
||||||
|
|
||||||
// import { kMaxLength } from 'buffer'
|
|
||||||
// import { isNull, set } from 'cypress/types/lodash'
|
|
||||||
// import { number } from 'yup'
|
|
||||||
// import { parse } from 'path'
|
|
||||||
|
|
||||||
// Define types for the component props and table row data
|
|
||||||
interface IProps {} |
|
||||||
|
|
||||||
export default function CatFraccionesVulnerables(props: IProps) { |
|
||||||
const [UserType, setUserType] = useState(() => { |
|
||||||
const stickyValue = window.localStorage.getItem('UserType') |
|
||||||
return stickyValue !== null ? JSON.parse(stickyValue) : '' |
|
||||||
}) |
|
||||||
const dispatch = useDispatch() |
|
||||||
const [Data, setData] = useState<ICatFraccionesVulnerables[]>([]) |
|
||||||
|
|
||||||
const [tipoReporte, setTipoReporte] = useState(0) |
|
||||||
// const [filtro, setFiltro] = useState('')
|
|
||||||
const [DataOriginal, setDataOriginal] = useState<ICatFraccionesVulnerables[]>( |
|
||||||
[] |
|
||||||
) |
|
||||||
// const mFraccionesVulnerables = useSelector((state: RootState) => state.CatFraccionesVulnerables.CatFraccionesVulnerables);
|
|
||||||
const [header, setHeader] = useState<string>('') // Specify the type of 'header'
|
|
||||||
// const [msgColor, setMsgColor] = useState<string>('primary'); // Specify the type of 'msgColor'
|
|
||||||
const [show, setShowMsg] = useState(false) // Specify the type of 'show'
|
|
||||||
const [msg, setMsg] = useState<string>('') // Specify the type of 'msg'
|
|
||||||
const [id, setId] = useState<number>(0) // Specify the type of 'id'
|
|
||||||
const [Fraccion, setFraccion] = useState<number>(0) // Specify the type of 'Fraccion'
|
|
||||||
const [Nico, setNico] = useState<string>('0') // Specify the type of 'Nico'
|
|
||||||
const [Activo, setActivo] = useState<number>(0) // Specify the type of 'Activo'
|
|
||||||
const [showModal, setShowModal] = useState<boolean>(false) |
|
||||||
const [editMode, setEditMode] = useState(false) // Nuevo estado para controlar el modo de edición
|
|
||||||
const [selectedRow, setSelectedRow] = |
|
||||||
useState<ICatFraccionesVulnerables | null>(null) // Nuevo estado para almacenar la fila seleccionada
|
|
||||||
// const [fraccionesVulnerables, setFraccionesVulnerables] = useState([]);
|
|
||||||
const [modalFileManager, setModalFileManager] = useState(false) |
|
||||||
const msgColor = 'primary' |
|
||||||
|
|
||||||
const columnsFraccionesVulnerables = [ |
|
||||||
{ |
|
||||||
name: 'Id', |
|
||||||
width: '14%', |
|
||||||
selector: (row: ICatFraccionesVulnerables) => row.id, |
|
||||||
sortable: true |
|
||||||
}, |
|
||||||
{ |
|
||||||
name: 'Fraccion', |
|
||||||
width: '20%', |
|
||||||
|
|
||||||
selector: (row: ICatFraccionesVulnerables) => row.fraccion, |
|
||||||
sortable: true |
|
||||||
}, |
|
||||||
{ |
|
||||||
name: 'Nico', |
|
||||||
width: '15%', |
|
||||||
|
|
||||||
selector: (row: ICatFraccionesVulnerables) => row.nico, |
|
||||||
sortable: true |
|
||||||
}, |
|
||||||
{ |
|
||||||
name: 'Activo', |
|
||||||
width: '15%', |
|
||||||
selector: (row: ICatFraccionesVulnerables) => |
|
||||||
row.activo === 1 ? 'Sí' : 'No', |
|
||||||
sortable: true |
|
||||||
}, |
|
||||||
{ |
|
||||||
name: 'Edita', |
|
||||||
width: '15%', |
|
||||||
|
|
||||||
cell: (row: ICatFraccionesVulnerables) => ( |
|
||||||
<Button |
|
||||||
size="sm" |
|
||||||
variant="light" |
|
||||||
style={{ |
|
||||||
textAlign: 'right', |
|
||||||
visibility: UserType === '4' ? 'hidden' : 'visible' |
|
||||||
}} |
|
||||||
onClick={() => loadRow(row)} // Cambia esta línea para pasar el objeto 'row' a la función 'loadRow'
|
|
||||||
> |
|
||||||
<IconContext.Provider value={{ color: 'blue', size: '20px' }}> |
|
||||||
<BsFillPencilFill /> |
|
||||||
</IconContext.Provider>{' '} |
|
||||||
</Button> |
|
||||||
) |
|
||||||
}, |
|
||||||
{ |
|
||||||
name: 'Elimina', |
|
||||||
width: '15%', |
|
||||||
cell: (row: ICatFraccionesVulnerables) => ( |
|
||||||
<Button |
|
||||||
size="sm" |
|
||||||
variant="light" |
|
||||||
style={{ |
|
||||||
textAlign: 'right', |
|
||||||
visibility: UserType === '4' ? 'hidden' : 'visible' |
|
||||||
}} |
|
||||||
onClick={() => deleteRow(row.id)} // Llama a la función deleteRow pasando el ID de la fila
|
|
||||||
> |
|
||||||
<IconContext.Provider value={{ color: 'red', size: '20px' }}> |
|
||||||
<AiFillCloseCircle /> |
|
||||||
</IconContext.Provider>{' '} |
|
||||||
</Button> |
|
||||||
) |
|
||||||
} |
|
||||||
] |
|
||||||
|
|
||||||
const loadRow = (data: ICatFraccionesVulnerables): void => { |
|
||||||
setSelectedRow(data) // Al hacer clic en el botón de edición, establecemos la fila seleccionada en el estado
|
|
||||||
setEditMode(true) // Cambiamos a modo de edición
|
|
||||||
setId(data.id) // Establecemos el id de la fila seleccionada
|
|
||||||
setFraccion(data.fraccion) // Cargamos los valores de fracción y nico para edición
|
|
||||||
setNico(data.nico) |
|
||||||
} |
|
||||||
|
|
||||||
// const truncatedValue = inputValue.substring(0, 8)
|
|
||||||
// setFraccion(truncatedValue)
|
|
||||||
|
|
||||||
const generaReporte = () => { |
|
||||||
setTipoReporte(0) |
|
||||||
FraccionesVulnerables.getAll() |
|
||||||
.then((response) => { |
|
||||||
setData(response.data) |
|
||||||
setDataOriginal(response.data) |
|
||||||
// uploadAllRows(response.data)
|
|
||||||
|
|
||||||
setHeader('Informativo') |
|
||||||
setMsg('Se encontro la siguiente informacion...') |
|
||||||
setShowMsg(true) |
|
||||||
}) |
|
||||||
.catch((e: Error) => { |
|
||||||
setHeader('Error') |
|
||||||
setMsg('Ocurrio un error: ' + e) |
|
||||||
setShowMsg(true) |
|
||||||
return |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
const uploadAllRows = (data: ICatFraccionesVulnerables[]) => { |
|
||||||
// Iteramos sobre los datos y realizamos la petición para cada fila
|
|
||||||
data.forEach((row) => { |
|
||||||
uploadFile(row) |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
useEffect(() => { |
|
||||||
// console.log(id) // Esto imprimirá el valor actualizado de id después de que cambie
|
|
||||||
}, [id]) |
|
||||||
|
|
||||||
const handleCreateNewRecord = () => { |
|
||||||
// console.log('se han borrod los texbox ')
|
|
||||||
|
|
||||||
setSelectedRow(null) |
|
||||||
setFraccion(0) |
|
||||||
setNico('0') |
|
||||||
setActivo(0) // Establecer a 0 (No)
|
|
||||||
setEditMode(true) |
|
||||||
setId(0) |
|
||||||
setShowModal(false) |
|
||||||
} |
|
||||||
|
|
||||||
function deleteRow(id: number): void { |
|
||||||
FraccionesVulnerables.Delete(id) |
|
||||||
.then((response) => { |
|
||||||
setData((prevData) => |
|
||||||
prevData.map((item) => |
|
||||||
item.id === id ? { ...item, activo: 0 } : item |
|
||||||
) |
|
||||||
) |
|
||||||
|
|
||||||
console.log(response.data) |
|
||||||
}) |
|
||||||
.catch((e: Error) => { |
|
||||||
setHeader('Error') |
|
||||||
setMsg('Ocurrió un error: ' + e) |
|
||||||
|
|
||||||
return |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
const uploadFile = (data: ICatFraccionesVulnerables): Promise<any> => { |
|
||||||
return new Promise((resolve, reject) => { |
|
||||||
FraccionesVulnerables.Append(data) |
|
||||||
.then((response) => { |
|
||||||
// console.log(response.data) // Mensaje de éxito
|
|
||||||
resolve(response.data) |
|
||||||
}) |
|
||||||
.catch((e: Error) => { |
|
||||||
console.error('Error durante la inserción:', e) // Mensaje de error
|
|
||||||
reject(e) |
|
||||||
}) |
|
||||||
}) |
|
||||||
} |
|
||||||
//Aqui agregamos la validacion de los digitos de las fracciones -------------------------------------------------------
|
|
||||||
const handleFraccionKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => { |
|
||||||
const fraccionAsString = Fraccion.toString() |
|
||||||
if (e.key.length === 1 && fraccionAsString.length >= 8) { |
|
||||||
e.preventDefault() // Evitar agregar más caracteres si ya hay 8
|
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
const handleFraccionBlur = (e: React.FocusEvent<HTMLInputElement>) => { |
|
||||||
const fraccionAsString = Fraccion.toString() |
|
||||||
if (fraccionAsString.length !== 8) { |
|
||||||
console.log('La fracción debe tener 8 dígitos.') |
|
||||||
|
|
||||||
e.currentTarget.focus() // Mantener el foco en el campo
|
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
// aqui agregamos las validaciones de los digitos del nico---------------------------------------------------------
|
|
||||||
|
|
||||||
const handleNicoChange = (e: React.ChangeEvent<HTMLInputElement>) => { |
|
||||||
const value = e.target.value |
|
||||||
if (value.length <= 2) { |
|
||||||
setNico(value) |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
const handleNicoKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => { |
|
||||||
if (e.key.length === 1 && Nico.length >= 2) { |
|
||||||
e.preventDefault() // Evitar agregar más caracteres si ya hay 2
|
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
const handleNicoBlur = (e: React.FocusEvent<HTMLInputElement>) => { |
|
||||||
if (Nico.length !== 2) { |
|
||||||
console.log('El Nico debe tener 2 dígitos.') |
|
||||||
e.currentTarget.focus() // Mantener el foco en el campo
|
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
// Guardar --------------------------------------------------------------
|
|
||||||
|
|
||||||
const handleSaveChanges = async () => { |
|
||||||
if (id === 0) { |
|
||||||
const fraccionAsString = Fraccion.toString() |
|
||||||
|
|
||||||
if (fraccionAsString.length !== 8 || Nico.length !== 2) { |
|
||||||
setHeader('Error') |
|
||||||
|
|
||||||
if (fraccionAsString.length !== 8 && Nico.length !== 2) { |
|
||||||
setMsg( |
|
||||||
'La fraccion debe tener 8 dígitos y el nico debe tener 2 dígitos.' |
|
||||||
) |
|
||||||
} else if (fraccionAsString.length !== 8) { |
|
||||||
setMsg('La fracción debe tener 8 dígitos.') |
|
||||||
} else { |
|
||||||
setMsg('El nico debe tener 2 dígitos.') |
|
||||||
} |
|
||||||
|
|
||||||
setShowMsg(true) |
|
||||||
return // Esto podría ser necesario para evitar una ejecución adicional
|
|
||||||
} |
|
||||||
|
|
||||||
const newRecord = { |
|
||||||
id: id, |
|
||||||
fraccion: Fraccion, |
|
||||||
nico: Nico, |
|
||||||
activo: Activo |
|
||||||
} |
|
||||||
|
|
||||||
try { |
|
||||||
const response = await uploadFile(newRecord) |
|
||||||
const newId = response.id |
|
||||||
|
|
||||||
// Actualizar el estado local con el nuevo registro que incluye el nuevo ID
|
|
||||||
const updatedRecord = { ...newRecord, id: newId } |
|
||||||
setData((prevData) => [...prevData, updatedRecord]) |
|
||||||
|
|
||||||
// console.log('este el newId' + newId)
|
|
||||||
// console.log('este el id normal ' + id)
|
|
||||||
|
|
||||||
// Restablecer valores de los campos
|
|
||||||
handleCreateNewRecord() |
|
||||||
} catch (error) { |
|
||||||
console.error('Error durante la inserción:', error) |
|
||||||
} |
|
||||||
} else { |
|
||||||
// Aquí actualizamos el registro existente
|
|
||||||
|
|
||||||
const fraccionAsString = Fraccion.toString() |
|
||||||
|
|
||||||
if (fraccionAsString.length !== 8) { |
|
||||||
setHeader('Error') |
|
||||||
setMsg('La fraccion debe tener 8 digitos.') |
|
||||||
setShowMsg(true) |
|
||||||
return |
|
||||||
} |
|
||||||
|
|
||||||
if (Nico.length !== 2) { |
|
||||||
setHeader('Error') |
|
||||||
setMsg('El Nico debe tener 2 digitos.') |
|
||||||
setShowMsg(true) |
|
||||||
return |
|
||||||
} |
|
||||||
|
|
||||||
const updatedData = Data.map((row) => |
|
||||||
row.id === selectedRow?.id |
|
||||||
? { ...row, fraccion: Fraccion, nico: Nico, activo: Activo } |
|
||||||
: row |
|
||||||
) |
|
||||||
|
|
||||||
setData(updatedData) |
|
||||||
const updatedRow = updatedData.find((row) => row.id === selectedRow?.id) |
|
||||||
if (updatedRow) { |
|
||||||
uploadFile(updatedRow) // Llamada a uploadFile para actualizar el registro
|
|
||||||
} |
|
||||||
setEditMode(false) |
|
||||||
setShowModal(false) |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
const downloadExcel = () => { |
|
||||||
exportExcel(Data, 'Fracciones Vulnerables') |
|
||||||
} |
|
||||||
|
|
||||||
function exportExcel( |
|
||||||
jsonData: ICatFraccionesVulnerables[], |
|
||||||
fileName: string |
|
||||||
): void { |
|
||||||
let Heading = [['Id', 'Fraccion', 'Nico', 'Activo']] |
|
||||||
const wb = XLSX.utils.book_new() |
|
||||||
const ws: XLSX.WorkSheet = XLSX.utils.json_to_sheet([]) |
|
||||||
XLSX.utils.sheet_add_aoa(ws, Heading) |
|
||||||
|
|
||||||
// Transformar los valores de 'activo' en 'Si' o 'No' antes de agregarlos a la hoja de cálculo
|
|
||||||
const transformedData = jsonData.map((row) => ({ |
|
||||||
...row, |
|
||||||
activo: row.activo === 1 ? 'Si' : 'No' |
|
||||||
})) |
|
||||||
|
|
||||||
XLSX.utils.sheet_add_json(ws, transformedData, { |
|
||||||
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' |
|
||||||
if (!ws[address]) continue |
|
||||||
ws[address].v = ws[address].v.toUpperCase() |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
const handleFraccionChange = (e: React.ChangeEvent<HTMLInputElement>) => { |
|
||||||
const value = parseFloat(e.target.value) |
|
||||||
setFraccion(isNaN(value) ? 0 : value) |
|
||||||
} |
|
||||||
|
|
||||||
// Función para manejar el cambio en el campo de entrada de la fracción
|
|
||||||
|
|
||||||
return ( |
|
||||||
<div className="mt-2"> |
|
||||||
<Card> |
|
||||||
<Card.Body> |
|
||||||
<div className="container"> |
|
||||||
<div |
|
||||||
className="row mb-4 " |
|
||||||
style={{ |
|
||||||
display: 'flex', |
|
||||||
justifyContent: 'center', |
|
||||||
alignItems: 'center', |
|
||||||
minHeight: '1vh' |
|
||||||
}} |
|
||||||
> |
|
||||||
<Card |
|
||||||
style={{ |
|
||||||
paddingTop: '10px', |
|
||||||
paddingBottom: '5px', |
|
||||||
width: '900px', |
|
||||||
height: '50px' |
|
||||||
}} |
|
||||||
> |
|
||||||
<Row> |
|
||||||
<Col xs={12}></Col> |
|
||||||
<Col xs={12}> |
|
||||||
<Row className="align-items-center"> |
|
||||||
<Col xs={1}> |
|
||||||
<Form.Label className="mb-0">Fracción</Form.Label> |
|
||||||
</Col> |
|
||||||
<Col xs={1}> |
|
||||||
<FormControl |
|
||||||
type="text" |
|
||||||
value={Fraccion} |
|
||||||
onChange={handleFraccionChange} |
|
||||||
onKeyDown={handleFraccionKeyDown} |
|
||||||
onBlur={handleFraccionBlur} |
|
||||||
inputMode="numeric" |
|
||||||
className="orm-select mx-2" |
|
||||||
maxLength={8} |
|
||||||
minLength={8} |
|
||||||
style={{ |
|
||||||
backgroundColor: 'white', |
|
||||||
color: 'black', |
|
||||||
padding: '4px', |
|
||||||
width: '80px', |
|
||||||
height: '30px' |
|
||||||
}} |
|
||||||
/> |
|
||||||
</Col> |
|
||||||
<Col |
|
||||||
xs={1} |
|
||||||
style={{ textAlign: 'right', width: '100px' }} |
|
||||||
> |
|
||||||
<Form.Label className="mb-0 ">Nico</Form.Label> |
|
||||||
</Col> |
|
||||||
<Col xs={1}> |
|
||||||
<FormControl |
|
||||||
type="text" |
|
||||||
value={Nico} |
|
||||||
// onChange={(e) => setNico(e.target.value)}
|
|
||||||
onChange={handleNicoChange} |
|
||||||
onKeyDown={handleNicoKeyDown} |
|
||||||
onBlur={handleNicoBlur} |
|
||||||
// inputMode="numeric"
|
|
||||||
className="orm-select mx-2" |
|
||||||
maxLength={2} |
|
||||||
minLength={2} |
|
||||||
style={{ |
|
||||||
backgroundColor: 'white', |
|
||||||
color: 'black', |
|
||||||
padding: '4px', |
|
||||||
width: '30px', |
|
||||||
height: '30px' |
|
||||||
}} |
|
||||||
/> |
|
||||||
</Col> |
|
||||||
<Col xs={2} style={{ textAlign: 'right', width: '50px' }}> |
|
||||||
<Form.Label className="mb-0">Activo</Form.Label> |
|
||||||
</Col> |
|
||||||
<Col xs={2}> |
|
||||||
<Form.Select |
|
||||||
value={Activo} |
|
||||||
onChange={(e) => setActivo(Number(e.target.value))} |
|
||||||
className="form-select mx-2" |
|
||||||
style={{ |
|
||||||
backgroundColor: 'white', |
|
||||||
color: 'black', |
|
||||||
padding: '4px', |
|
||||||
width: '60px', |
|
||||||
height: '30px' |
|
||||||
}} |
|
||||||
> |
|
||||||
<option value={1}>Si</option> |
|
||||||
<option value={0}>No</option> |
|
||||||
</Form.Select> |
|
||||||
</Col> |
|
||||||
<Col xs={0} style={{ width: '100px' }}> |
|
||||||
<Button |
|
||||||
size="sm" |
|
||||||
variant="light" |
|
||||||
onClick={handleCreateNewRecord} |
|
||||||
style={{ |
|
||||||
backgroundColor: 'orange', |
|
||||||
color: 'white', |
|
||||||
padding: '4px', |
|
||||||
width: '50px', |
|
||||||
height: '32px' |
|
||||||
}} |
|
||||||
> |
|
||||||
<FaEraser /> |
|
||||||
</Button> |
|
||||||
</Col> |
|
||||||
|
|
||||||
<Col xs={0} style={{ width: '110px' }}> |
|
||||||
<Button |
|
||||||
style={{ |
|
||||||
backgroundColor: 'blue', |
|
||||||
color: 'white', |
|
||||||
padding: '2px', |
|
||||||
width: '55px', |
|
||||||
height: '30px' |
|
||||||
}} |
|
||||||
variant="primary" |
|
||||||
size="sm" |
|
||||||
onClick={() => { |
|
||||||
generaReporte() |
|
||||||
}} |
|
||||||
> |
|
||||||
<BsSearch /> |
|
||||||
</Button> |
|
||||||
</Col> |
|
||||||
<Col xs={0} style={{ width: '110px' }}> |
|
||||||
<Button |
|
||||||
style={{ |
|
||||||
backgroundColor: 'blue', |
|
||||||
color: 'white', |
|
||||||
padding: '0px', |
|
||||||
width: '55px', |
|
||||||
height: '30px' |
|
||||||
}} |
|
||||||
variant="primary" |
|
||||||
onClick={handleSaveChanges} |
|
||||||
> |
|
||||||
<AiOutlineSave /> |
|
||||||
</Button> |
|
||||||
</Col> |
|
||||||
<Col xs={0} style={{ width: '110px' }}> |
|
||||||
<Button |
|
||||||
size="sm" |
|
||||||
variant="success" |
|
||||||
onClick={() => { |
|
||||||
downloadExcel() |
|
||||||
}} |
|
||||||
style={{ |
|
||||||
backgroundColor: 'green', |
|
||||||
color: 'white', |
|
||||||
padding: '1px', |
|
||||||
width: '55px', |
|
||||||
height: '30px' |
|
||||||
}} |
|
||||||
> |
|
||||||
<BsFileEarmarkExcel /> |
|
||||||
</Button> |
|
||||||
</Col> |
|
||||||
</Row> |
|
||||||
</Col> |
|
||||||
<Col xs={1}></Col> |
|
||||||
</Row> |
|
||||||
</Card> |
|
||||||
</div> |
|
||||||
<Row> |
|
||||||
<Col xs={3}></Col> |
|
||||||
<Col xs={6}> |
|
||||||
<Card> |
|
||||||
<DataTable |
|
||||||
noHeader |
|
||||||
defaultSortFieldId={'id'} |
|
||||||
defaultSortAsc={true} |
|
||||||
striped={true} |
|
||||||
dense={true} |
|
||||||
paginationPerPage={10} |
|
||||||
pagination |
|
||||||
highlightOnHover |
|
||||||
columns={columnsFraccionesVulnerables} |
|
||||||
data={Data} |
|
||||||
pointerOnHover |
|
||||||
/> |
|
||||||
</Card> |
|
||||||
</Col> |
|
||||||
<Col xs={1}></Col> |
|
||||||
</Row> |
|
||||||
</div> |
|
||||||
</Card.Body> |
|
||||||
</Card> |
|
||||||
<MsgInformativo |
|
||||||
show={show} |
|
||||||
msg={msg} |
|
||||||
header={header} |
|
||||||
msgColor={msgColor} |
|
||||||
closeToast={() => { |
|
||||||
setShowMsg(false) |
|
||||||
}} |
|
||||||
/> |
|
||||||
</div> |
|
||||||
) |
|
||||||
} |
|
||||||
@ -1,501 +0,0 @@ |
|||||||
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 AmazonSrvDataService from '../Services/Amazon.Services' |
|
||||||
|
|
||||||
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, |
|
||||||
FloatingLabel, |
|
||||||
Form, |
|
||||||
Modal, |
|
||||||
Row |
|
||||||
} from 'react-bootstrap' |
|
||||||
import { IconContext } from 'react-icons' |
|
||||||
import 'react-data-table-component-extensions/dist/index.css' |
|
||||||
import { |
|
||||||
BsCheckCircleFill, |
|
||||||
BsPlusSquareFill, |
|
||||||
BsXCircleFill |
|
||||||
} from 'react-icons/bs' |
|
||||||
import IClientes from '../../../../Interfaces/Catalogos/IClientes' |
|
||||||
import { FcTimeline } from 'react-icons/fc' |
|
||||||
import { FaEraser, FaTimesCircle } from 'react-icons/fa' |
|
||||||
import ICat2096CatConceptosConsulta from '../Interfaces/I2096CatConceptosConsulta' |
|
||||||
import { populateCatConcetosConsultas, updateCatConcetosConsulta } from '../../../../store/features/Clientes/2096/AmazonCatConceptosConsulta' |
|
||||||
import { useDispatch } from 'react-redux' |
|
||||||
|
|
||||||
export interface ICatConceptosConsultaProps {} |
|
||||||
|
|
||||||
export default function CatConceptosConsulta( |
|
||||||
props: ICatConceptosConsultaProps |
|
||||||
) { |
|
||||||
const [UserId, setUserId] = useState(() => { |
|
||||||
const stickyValue = window.localStorage.getItem('UserId') |
|
||||||
return stickyValue !== null ? JSON.parse(stickyValue) : 0 |
|
||||||
}) |
|
||||||
const dispatch = useDispatch() |
|
||||||
const [Tabulador, setTabulador] = useState(0) |
|
||||||
const [Id, setId] = useState(0) |
|
||||||
const [Concepto, setConcepto] = useState(0) |
|
||||||
const [Cliente, setCliente] = useState(0) |
|
||||||
const [Activo, setActivo] = useState(0) |
|
||||||
const [Clientes, setClientes] = useState<Array<IClientes>>() |
|
||||||
const [Siglas, setSiglas] = useState('') |
|
||||||
const [ShortDescription, setShortDescription] = useState('') |
|
||||||
const [SpanishDescription, setSpanishDescription] = useState('') |
|
||||||
const [SpanishDescriptionWide, setSpanishDescriptionWide] = useState('') |
|
||||||
const [DetalleConceptos, setDetalleConceptos] = useState< |
|
||||||
ITabuladorConceptos[] |
|
||||||
>([]) |
|
||||||
const [CatConceptos, setCatConceptos] = useState< |
|
||||||
ICat2096CatConceptosConsulta[] |
|
||||||
>([]) |
|
||||||
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 colConcepts = [ |
|
||||||
{ |
|
||||||
name: 'Activo', |
|
||||||
width: '80px', |
|
||||||
cell: (row: ICat2096CatConceptosConsulta) => ( |
|
||||||
<div |
|
||||||
onClick={() => { |
|
||||||
loadData(row) |
|
||||||
}} |
|
||||||
> |
|
||||||
<IconContext.Provider |
|
||||||
value={{ color: row.activo ? 'green' : 'red', size: '20px' }} |
|
||||||
> |
|
||||||
{row.activo ? <BsCheckCircleFill /> : <BsXCircleFill />} |
|
||||||
</IconContext.Provider> |
|
||||||
</div> |
|
||||||
) |
|
||||||
}, |
|
||||||
{ |
|
||||||
name: 'Siglas', |
|
||||||
width: '80px', |
|
||||||
selector: (row: ICat2096CatConceptosConsulta) => row.siglas, |
|
||||||
sortable: true |
|
||||||
}, |
|
||||||
{ |
|
||||||
name: 'Descripcion corta', |
|
||||||
width: '300px', |
|
||||||
selector: (row: ICat2096CatConceptosConsulta) => row.shortDescription, |
|
||||||
wrap: true, |
|
||||||
sortable: true |
|
||||||
}, |
|
||||||
{ |
|
||||||
name: 'Descripcion español', |
|
||||||
width: '450px', |
|
||||||
selector: (row: ICat2096CatConceptosConsulta) => row.spanishDescription, |
|
||||||
wrap: true, |
|
||||||
sortable: true |
|
||||||
}, |
|
||||||
{ |
|
||||||
name: 'Descripcion amplia', |
|
||||||
width: '450px', |
|
||||||
selector: (row: ICat2096CatConceptosConsulta) => |
|
||||||
row.spanishDescriptionWide, |
|
||||||
wrap: true, |
|
||||||
sortable: true |
|
||||||
} |
|
||||||
] |
|
||||||
|
|
||||||
const loadData = (data: ICat2096CatConceptosConsulta) => { |
|
||||||
setId(data.id) |
|
||||||
setSiglas(data.siglas) |
|
||||||
setShortDescription(data.shortDescription) |
|
||||||
setSpanishDescription(data.spanishDescription) |
|
||||||
setSpanishDescriptionWide(data.spanishDescriptionWide) |
|
||||||
setActivo(data.activo ? 1 : 0) |
|
||||||
} |
|
||||||
|
|
||||||
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 |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
const loadCatalog = () => { |
|
||||||
AmazonSrvDataService.CatConceptosConsultaGET() |
|
||||||
.then((response) => { |
|
||||||
dispatch(populateCatConcetosConsultas(response.data)) |
|
||||||
setCatConceptos(response.data) |
|
||||||
}) |
|
||||||
.catch((e: Error) => { |
|
||||||
setHeader('Error') |
|
||||||
setMsg('Ocurrio un error: ' + e) |
|
||||||
setShowMsg(true) |
|
||||||
return |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
useEffect(() => { |
|
||||||
loadCatalog() |
|
||||||
}, []) |
|
||||||
|
|
||||||
useEffect(() => { |
|
||||||
if (Cliente > 0) { |
|
||||||
setSiglas('') |
|
||||||
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 save = () => { |
|
||||||
const data: ICat2096CatConceptosConsulta = { |
|
||||||
id: Id, |
|
||||||
siglas: Siglas, |
|
||||||
shortDescription: ShortDescription, |
|
||||||
spanishDescription: SpanishDescription, |
|
||||||
spanishDescriptionWide: SpanishDescriptionWide, |
|
||||||
activo: Activo==1 |
|
||||||
} |
|
||||||
AmazonSrvDataService.CatConceptosConsultaAppend(data) |
|
||||||
.then((response) => { |
|
||||||
if (response.status === 200) { |
|
||||||
loadCatalog() |
|
||||||
setHeader('Informativo') |
|
||||||
setMsg('La informacion se guardo correctamente') |
|
||||||
setShowMsg(true) |
|
||||||
return |
|
||||||
} |
|
||||||
}) |
|
||||||
.catch((e: Error) => { |
|
||||||
setHeader('Error') |
|
||||||
setMsg('Ocurrio un error: ' + e) |
|
||||||
setShowMsg(true) |
|
||||||
return |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
return ( |
|
||||||
<div> |
|
||||||
<Card> |
|
||||||
<Card.Body> |
|
||||||
<Card style={{ height: '100%' }}> |
|
||||||
<Card.Header as="h4">Catalogo de consultas para Amazon</Card.Header> |
|
||||||
<Card.Body> |
|
||||||
<Container fluid> |
|
||||||
<Alert variant="primary"> |
|
||||||
<Row> |
|
||||||
<Col xs={1}> |
|
||||||
<FloatingLabel |
|
||||||
controlId="floatingInput" |
|
||||||
label="Siglas" |
|
||||||
className="mb-3" |
|
||||||
> |
|
||||||
<Form.Control |
|
||||||
type="text" |
|
||||||
placeholder="" |
|
||||||
value={Siglas} |
|
||||||
maxLength={4} |
|
||||||
onChange={(e) => { |
|
||||||
setSiglas(e.target.value) |
|
||||||
}} |
|
||||||
/> |
|
||||||
</FloatingLabel> |
|
||||||
</Col> |
|
||||||
<Col xs={8}> |
|
||||||
<FloatingLabel |
|
||||||
controlId="floatingInput" |
|
||||||
label="Descripcion corta" |
|
||||||
className="mb-3" |
|
||||||
> |
|
||||||
<Form.Control |
|
||||||
type="text" |
|
||||||
placeholder="Descripcion corta" |
|
||||||
value={ShortDescription} |
|
||||||
onChange={(e) => { |
|
||||||
setShortDescription(e.target.value) |
|
||||||
}} |
|
||||||
/> |
|
||||||
</FloatingLabel> |
|
||||||
</Col> |
|
||||||
<Col |
|
||||||
xs={1} |
|
||||||
style={{ |
|
||||||
textAlign: 'left', |
|
||||||
paddingTop: '5px', |
|
||||||
cursor: 'pointer', |
|
||||||
paddingLeft: '0px' |
|
||||||
}} |
|
||||||
onClick={() => { |
|
||||||
setTabulador(0) |
|
||||||
setSiglas('') |
|
||||||
}} |
|
||||||
> |
|
||||||
<IconContext.Provider |
|
||||||
value={{ color: 'orange', size: '25px' }} |
|
||||||
> |
|
||||||
<FaEraser /> |
|
||||||
</IconContext.Provider> |
|
||||||
</Col> |
|
||||||
<Col></Col> |
|
||||||
<Col style={{ paddingTop: '20px' }}> |
|
||||||
<Button |
|
||||||
variant="primary" |
|
||||||
size="sm" |
|
||||||
style={{ paddingLeft: '10px', paddingRight: '10px' }} |
|
||||||
onClick={() => save()} |
|
||||||
> |
|
||||||
Guardar |
|
||||||
</Button> |
|
||||||
</Col> |
|
||||||
</Row> |
|
||||||
<Row> |
|
||||||
<Col xs={5}> |
|
||||||
<FloatingLabel |
|
||||||
controlId="floatingInput" |
|
||||||
label="Descripcion en español" |
|
||||||
className="mb-3" |
|
||||||
> |
|
||||||
<Form.Control |
|
||||||
as="textarea" |
|
||||||
placeholder="" |
|
||||||
style={{ height: '100px' }} |
|
||||||
value={SpanishDescription} |
|
||||||
onChange={(e) => { |
|
||||||
setSpanishDescription(e.target.value) |
|
||||||
}} |
|
||||||
/> |
|
||||||
</FloatingLabel> |
|
||||||
</Col> |
|
||||||
<Col xs={5}> |
|
||||||
<FloatingLabel |
|
||||||
controlId="floatingInput" |
|
||||||
label="Descripcion amplia" |
|
||||||
className="mb-3" |
|
||||||
> |
|
||||||
<Form.Control |
|
||||||
as="textarea" |
|
||||||
placeholder="Descripcion amplia" |
|
||||||
style={{ height: '100px' }} |
|
||||||
value={SpanishDescriptionWide} |
|
||||||
onChange={(e) => { |
|
||||||
setSpanishDescriptionWide(e.target.value) |
|
||||||
}} |
|
||||||
/> |
|
||||||
</FloatingLabel> |
|
||||||
</Col> |
|
||||||
<Col style={{ paddingTop: '20px' }}> |
|
||||||
<FloatingLabel controlId="floatingSelect" label="Activo"> |
|
||||||
<Form.Select |
|
||||||
aria-label="Activo" |
|
||||||
value={Activo} |
|
||||||
onChange={(e) => { |
|
||||||
setActivo(parseInt(e.target.value)) |
|
||||||
}} |
|
||||||
> |
|
||||||
<option value="1">Si</option> |
|
||||||
<option value="0">No</option> |
|
||||||
</Form.Select> |
|
||||||
</FloatingLabel> |
|
||||||
</Col> |
|
||||||
<Col></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> |
|
||||||
|
|
||||||
</Card.Body> |
|
||||||
</Card> |
|
||||||
</Col> */} |
|
||||||
<Col xs={12}> |
|
||||||
<Card style={{}}> |
|
||||||
<Card.Body> |
|
||||||
<Card.Subtitle className="mb-2 text-muted"> |
|
||||||
<Row> |
|
||||||
<Col xs={12} style={{ paddingTop: '8px' }}> |
|
||||||
<DataTable |
|
||||||
noHeader |
|
||||||
defaultSortFieldId={'id'} |
|
||||||
defaultSortAsc={true} |
|
||||||
pagination |
|
||||||
highlightOnHover |
|
||||||
columns={colConcepts} |
|
||||||
data={CatConceptos} |
|
||||||
/> |
|
||||||
</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 /> {Siglas}? |
|
||||||
</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> |
|
||||||
) |
|
||||||
} |
|
||||||
@ -1,7 +0,0 @@ |
|||||||
export default interface DTODataTraficoConsulta { |
|
||||||
id: number, |
|
||||||
swConsulta: boolean, |
|
||||||
grupoRegulatorio: number, |
|
||||||
regulacionConsulta: string,
|
|
||||||
comentariosConsulta: string |
|
||||||
} |
|
||||||
@ -1,13 +0,0 @@ |
|||||||
export default interface DTO2096RptFacturasPagadas { |
|
||||||
|
|
||||||
factura: string, |
|
||||||
pedimento: string, |
|
||||||
fechaPago: string, |
|
||||||
clave: string, |
|
||||||
tipoOp: string, |
|
||||||
valorDolares: string, |
|
||||||
valorAduana: string, |
|
||||||
razonSocial: string, |
|
||||||
aduana: string,
|
|
||||||
piezas: string |
|
||||||
} |
|
||||||
@ -1,24 +0,0 @@ |
|||||||
export default interface DTO2096TraficoConsultaAmazonDetail { |
|
||||||
id: number |
|
||||||
idHeader: number, |
|
||||||
amazonShipmentReferenceId: string |
|
||||||
partida: number |
|
||||||
itemId: string |
|
||||||
itemDescription: string |
|
||||||
fraccionGEMCO: string |
|
||||||
descripcionGEMCO: string |
|
||||||
countryOfOrigin: string |
|
||||||
productGroup: string |
|
||||||
brand: string |
|
||||||
model: string |
|
||||||
itemQuantityUnitOfMeasure: string |
|
||||||
quantity: number |
|
||||||
weightValue: string |
|
||||||
netWeightUnitOfMeasure: string |
|
||||||
actualUnitCostMonetaryAmount: string |
|
||||||
totalUnitValueMonetaryAmount: string |
|
||||||
swConsulta: boolean |
|
||||||
grupoRegulatorio: number, |
|
||||||
regulacionConsulta: string |
|
||||||
comentariosConsulta: string |
|
||||||
} |
|
||||||
@ -1,20 +0,0 @@ |
|||||||
import DTO2096TraficoConsultaAmazonDetail from "./DTO2096TraficoConsultaAmazonDetail"; |
|
||||||
|
|
||||||
export default interface DTO2096TraficoConsultaAmazonHeader { |
|
||||||
id: number, |
|
||||||
referencia: string, |
|
||||||
commercialInvoiceDate: string, |
|
||||||
invoiceNumber: string, |
|
||||||
incoterms: string, |
|
||||||
hawb: string, |
|
||||||
totalInvoiceQuantityUnitOfMeasure: string, |
|
||||||
totalInvoiceQuantity: number, |
|
||||||
totalInvoiceWeightUnitOfMeasure: string, |
|
||||||
totalInvoiceWeight: string, |
|
||||||
totalInvoiceValueChargeOrAllowance: string, |
|
||||||
totalInvoiceValueCurrencyISOCode: string, |
|
||||||
totalInvoiceValueMonetaryAmount: string, |
|
||||||
name: string, |
|
||||||
max: boolean, |
|
||||||
detail: DTO2096TraficoConsultaAmazonDetail[] |
|
||||||
} |
|
||||||
@ -1,10 +0,0 @@ |
|||||||
export default interface DTOAmazonSegragacion { |
|
||||||
vrid: string, |
|
||||||
asin: string, |
|
||||||
quantity: number, |
|
||||||
descripcion: string, |
|
||||||
motivo: string, |
|
||||||
fSegregacion: string, |
|
||||||
valorMercancia: string, |
|
||||||
|
|
||||||
} |
|
||||||
@ -1,8 +0,0 @@ |
|||||||
export default interface ICat2096CatConceptosConsulta { |
|
||||||
id: number, |
|
||||||
siglas: string, |
|
||||||
shortDescription: string, |
|
||||||
spanishDescription: string, |
|
||||||
spanishDescriptionWide: string, |
|
||||||
activo: boolean |
|
||||||
} |
|
||||||
@ -1,4 +0,0 @@ |
|||||||
export default interface I2096CatGrupoRegulatorio { |
|
||||||
id: number, |
|
||||||
descripcion: string |
|
||||||
} |
|
||||||
@ -1,556 +0,0 @@ |
|||||||
import { useEffect, useState } from 'react' |
|
||||||
import { |
|
||||||
Alert, |
|
||||||
Button, |
|
||||||
Card, |
|
||||||
Col, |
|
||||||
Form, |
|
||||||
Modal, |
|
||||||
Row, |
|
||||||
Table |
|
||||||
} from 'react-bootstrap' |
|
||||||
import { IconContext } from 'react-icons' |
|
||||||
import { BsChevronDown, BsChevronRight, BsFilePdfFill } from 'react-icons/bs' |
|
||||||
import { FaAmazon } from 'react-icons/fa' |
|
||||||
import DSAmazon from '../../Services/Amazon.Services' |
|
||||||
import { MsgInformativo } from '../../../../Utils/Toast/msgInformativo' |
|
||||||
import { RootState } from '../../../../../store/store' |
|
||||||
|
|
||||||
// Redux
|
|
||||||
import { useDispatch, useSelector } from 'react-redux' |
|
||||||
import { AiFillFileExcel } from 'react-icons/ai' |
|
||||||
import RptConsultaTraficoDetalle from './RptConsultaTraficoDetalle' |
|
||||||
import loadingImg from '../../../../../images/ajaxloader.gif' |
|
||||||
import * as XLSX from 'xlsx' |
|
||||||
import DTO2096TraficoConsultaAmazonHeader from '../../DTO/DTO2096TraficoConsultaAmazonHeader' |
|
||||||
import { |
|
||||||
initializeTraficoConsulta, |
|
||||||
populateTraficoConsulta, |
|
||||||
updateTraficoConsulta |
|
||||||
} from '../../../../../store/features/Clientes/2096/AmazonTraficoConsulta' |
|
||||||
import {SiMicrosoftexcel} from 'react-icons/si' |
|
||||||
import I2096CatGrupoRegulatorio from '../../Interfaces/I2096CatGrupoRegulatorio' |
|
||||||
|
|
||||||
export interface IRptConsultaTraficoProps {} |
|
||||||
|
|
||||||
export default function RptConsultaTrafico(props: IRptConsultaTraficoProps) { |
|
||||||
const dispatch = useDispatch() |
|
||||||
const mInvoices = useSelector( |
|
||||||
(state: RootState) => state.AmazonTraficoConsulta.Consulta |
|
||||||
) |
|
||||||
const [header, setHeader] = useState('') |
|
||||||
const [Referencia, setReferencia] = useState('') |
|
||||||
const [show, setShowMsg] = useState(false) |
|
||||||
const [ShowModal, setShowModal] = useState(false) |
|
||||||
const [ShowModalUnlink, setShowModalUnlink] = useState(false) |
|
||||||
const [WaitingDialog, setWaitingDialog] = useState(false) |
|
||||||
const [WaitingMessage, setWaitingMessage] = useState('') |
|
||||||
const [msg, setMsg] = useState('') |
|
||||||
const [Invoices, setInvoices] = useState<number[]>([]) |
|
||||||
const [Data, setData] = useState<DTO2096TraficoConsultaAmazonHeader[]>([]) |
|
||||||
const [CatGrupoRegulario, setCatGrupoRegulatorio] = useState<I2096CatGrupoRegulatorio[]>([]) |
|
||||||
const msgColor = 'primary' |
|
||||||
|
|
||||||
const loadReport = () => { |
|
||||||
DSAmazon.TransporteConsultaAmazon() |
|
||||||
.then((response) => { |
|
||||||
dispatch(initializeTraficoConsulta([])) |
|
||||||
dispatch(populateTraficoConsulta(response.data)) |
|
||||||
}) |
|
||||||
.catch((e: Error) => { |
|
||||||
alert('Ocurrio un error' + e.message.toString()) |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
const loadCatalogos = () => { |
|
||||||
DSAmazon.CatGrupoRegulatorioGET() |
|
||||||
.then((response) => { |
|
||||||
setCatGrupoRegulatorio(response.data) |
|
||||||
console.log(response.data) |
|
||||||
}) |
|
||||||
.catch((e: Error) => { |
|
||||||
alert('Ocurrio un error' + e.message.toString()) |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
const downloadExcel = (id: number, Invoice: string) => { |
|
||||||
DSAmazon.TraficoConsultasAmazonGenerateExcel(id) |
|
||||||
.then((response: any) => { |
|
||||||
if (response.status === 200) { |
|
||||||
const url = window.URL.createObjectURL(new Blob([response.data])) |
|
||||||
const link = document.createElement('a') |
|
||||||
link.href = url |
|
||||||
link.setAttribute('download', 'Broker File '+Invoice+'.xls') |
|
||||||
document.body.appendChild(link) |
|
||||||
link.click() |
|
||||||
} |
|
||||||
}) |
|
||||||
.catch((e: Error) => { |
|
||||||
setHeader('Error') |
|
||||||
setMsg('Ocurrio un error') |
|
||||||
setShowMsg(true) |
|
||||||
return |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
useEffect(() => { |
|
||||||
loadCatalogos() |
|
||||||
loadReport() |
|
||||||
}, []) |
|
||||||
|
|
||||||
const changeToggle = (row: DTO2096TraficoConsultaAmazonHeader) => { |
|
||||||
let Invoice: DTO2096TraficoConsultaAmazonHeader[] = mInvoices.filter( |
|
||||||
(item) => item.id === row.id |
|
||||||
) |
|
||||||
const Obj = { ...Invoice[0] } |
|
||||||
Obj.max = !Obj.max |
|
||||||
dispatch(updateTraficoConsulta(Obj)) |
|
||||||
} |
|
||||||
|
|
||||||
const check4Updates = (IDInvoice: number) => { |
|
||||||
DSAmazon.TraficoConsultasAmazonById(IDInvoice) |
|
||||||
.then((response) => { |
|
||||||
DSAmazon.TraficoConsultasAmazonById(IDInvoice) |
|
||||||
.then((response) => { |
|
||||||
dispatch(updateTraficoConsulta(response.data)) |
|
||||||
console.log(response.data) |
|
||||||
/* let Invoice: DTO2096TraficoConsultaAmazonHeader[] = response.data.filter( |
|
||||||
(item) => item.id === IDInvoice |
|
||||||
) |
|
||||||
const Obj = { ...Invoice[0] } |
|
||||||
Obj.max = !Obj.max |
|
||||||
dispatch(updateTraficoConsulta(Obj)) */ |
|
||||||
}) |
|
||||||
.catch((e: Error) => { |
|
||||||
setHeader('Error') |
|
||||||
setMsg('Ocurrio un error') |
|
||||||
return |
|
||||||
}) |
|
||||||
}) |
|
||||||
.catch((e: Error) => { |
|
||||||
setHeader('Error') |
|
||||||
setMsg('Ocurrio un error') |
|
||||||
return |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
const updateDataGrid = (IDInvoice: number) => { |
|
||||||
/* let Invoice: DTO2096TraficoConsultaAmazonHeader[] = mInvoices.filter( |
|
||||||
(item) => item.id === IDInvoice |
|
||||||
) |
|
||||||
const Obj = { ...Invoice[0] } |
|
||||||
Obj.max = !Obj.max |
|
||||||
dispatch(updateTraficoConsulta(Obj)) |
|
||||||
if (Obj.max) */ check4Updates(IDInvoice) |
|
||||||
} |
|
||||||
|
|
||||||
function getReceiver(Cadena: string, char1: string[1], char2: string[1]) { |
|
||||||
return Cadena.slice(Cadena.indexOf(char1) + 1, Cadena.lastIndexOf(char2)) |
|
||||||
} |
|
||||||
|
|
||||||
return ( |
|
||||||
<div> |
|
||||||
<Card> |
|
||||||
<Card.Body> |
|
||||||
<Row> |
|
||||||
<Col xs={6}> |
|
||||||
<Card.Title> |
|
||||||
<IconContext.Provider value={{ color: '#F6C34F', size: '8%' }}> |
|
||||||
<FaAmazon /> |
|
||||||
</IconContext.Provider>{' '} |
|
||||||
TRAFICO : Consulta Amazon |
|
||||||
</Card.Title> |
|
||||||
</Col> |
|
||||||
<Col></Col> |
|
||||||
<Col></Col> |
|
||||||
<Col></Col> |
|
||||||
<Col></Col> |
|
||||||
<Col></Col> |
|
||||||
</Row> |
|
||||||
</Card.Body> |
|
||||||
</Card> |
|
||||||
|
|
||||||
<Card> |
|
||||||
<Card.Body> |
|
||||||
<div className="MDcontainer"> |
|
||||||
<Table className="MDTable" hover> |
|
||||||
<thead style={{ position: 'sticky', top: '0' }}> |
|
||||||
<tr> |
|
||||||
<th></th> |
|
||||||
<th style={{ width: '50px' }}>id</th> |
|
||||||
<th style={{ width: '50px' }}></th> |
|
||||||
<th style={{ width: '100px' }}>Referencia</th> |
|
||||||
<th style={{ width: '80px' }}>Commercial Invoice Date</th> |
|
||||||
<th style={{ width: '250px' }}>Invoice Number</th> |
|
||||||
<th style={{ width: '100px' }}>Receiver</th> |
|
||||||
<th style={{ width: '100px' }}>Incoterms</th> |
|
||||||
<th style={{ textAlign: 'center' }}>HAWB</th> |
|
||||||
<th>Qty Unit of measure</th> |
|
||||||
<th>Tot Qty</th> |
|
||||||
<th>Weight unit of measure</th> |
|
||||||
<th>Tot weight</th> |
|
||||||
<th>Tot Charge or allowance</th> |
|
||||||
<th>Tot currency ISO code</th> |
|
||||||
<th>Tot Monetary amount</th> |
|
||||||
<th>Total de partidas</th> |
|
||||||
</tr> |
|
||||||
</thead> |
|
||||||
<tbody> |
|
||||||
{mInvoices |
|
||||||
? mInvoices.map((MasterData) => { |
|
||||||
return ( |
|
||||||
<> |
|
||||||
<tr |
|
||||||
style={{ cursor: 'pointer', height: '25px' }} |
|
||||||
className={ |
|
||||||
MasterData.max === true |
|
||||||
? 'masterSelected' |
|
||||||
: 'normalSelected' |
|
||||||
} |
|
||||||
> |
|
||||||
<td |
|
||||||
style={{ textAlign: 'left' }} |
|
||||||
className={ |
|
||||||
MasterData.max === true |
|
||||||
? 'masterSelected' |
|
||||||
: 'normalSelected' |
|
||||||
} |
|
||||||
key={MasterData.id} |
|
||||||
onClick={() => { |
|
||||||
changeToggle(MasterData) |
|
||||||
}} |
|
||||||
> |
|
||||||
{MasterData.max === true ? ( |
|
||||||
<IconContext.Provider |
|
||||||
value={{ color: 'blue', size: '15px' }} |
|
||||||
> |
|
||||||
<BsChevronDown /> |
|
||||||
</IconContext.Provider> |
|
||||||
) : ( |
|
||||||
<IconContext.Provider |
|
||||||
value={{ color: 'blue', size: '15px' }} |
|
||||||
> |
|
||||||
<BsChevronRight /> |
|
||||||
</IconContext.Provider> |
|
||||||
)} |
|
||||||
</td> |
|
||||||
<td>{MasterData.id}</td> |
|
||||||
<td onClick={()=>{downloadExcel(MasterData.id, MasterData.invoiceNumber)}}> |
|
||||||
<IconContext.Provider |
|
||||||
value={{ color: 'green', size: '20px' }} |
|
||||||
> |
|
||||||
<SiMicrosoftexcel /> |
|
||||||
</IconContext.Provider> |
|
||||||
</td> |
|
||||||
<td style={{ width: '100px', textAlign: 'center' }}> |
|
||||||
{MasterData.referencia} |
|
||||||
</td> |
|
||||||
<td style={{ width: '80px', textAlign: 'center' }}> |
|
||||||
{MasterData.commercialInvoiceDate} |
|
||||||
</td> |
|
||||||
<td style={{ width: '300px' }}> |
|
||||||
{MasterData.invoiceNumber} |
|
||||||
</td> |
|
||||||
<td |
|
||||||
style={{ |
|
||||||
width: '100px', |
|
||||||
textAlign: 'center', |
|
||||||
fontWeight: 'bold', |
|
||||||
fontSize: '13px' |
|
||||||
}} |
|
||||||
> |
|
||||||
{mInvoices |
|
||||||
.filter((value) => value.id === MasterData.id) |
|
||||||
.map((row) => { |
|
||||||
return getReceiver( |
|
||||||
row.detail[0].amazonShipmentReferenceId, |
|
||||||
'_', |
|
||||||
'_' |
|
||||||
) |
|
||||||
})} |
|
||||||
</td> |
|
||||||
<td style={{ width: '100px', textAlign: 'center' }}> |
|
||||||
{MasterData.incoterms} |
|
||||||
</td> |
|
||||||
<td style={{ textAlign: 'center' }}> |
|
||||||
{MasterData.hawb} |
|
||||||
</td> |
|
||||||
<td style={{ textAlign: 'center' }}> |
|
||||||
{MasterData.totalInvoiceQuantityUnitOfMeasure} |
|
||||||
</td> |
|
||||||
<td style={{ textAlign: 'center' }}> |
|
||||||
{MasterData.totalInvoiceQuantity} |
|
||||||
</td> |
|
||||||
<td style={{ textAlign: 'center' }}> |
|
||||||
{MasterData.totalInvoiceWeightUnitOfMeasure} |
|
||||||
</td> |
|
||||||
<td style={{ textAlign: 'center' }}> |
|
||||||
{MasterData.totalInvoiceWeight} |
|
||||||
</td> |
|
||||||
<td style={{ textAlign: 'center' }}> |
|
||||||
{MasterData.totalInvoiceValueChargeOrAllowance} |
|
||||||
</td> |
|
||||||
<td style={{ textAlign: 'center' }}> |
|
||||||
{MasterData.totalInvoiceValueCurrencyISOCode} |
|
||||||
</td> |
|
||||||
<td style={{ textAlign: 'center' }}> |
|
||||||
{MasterData.totalInvoiceValueMonetaryAmount} |
|
||||||
</td> |
|
||||||
<td |
|
||||||
style={{ |
|
||||||
fontWeight: 'bold', |
|
||||||
textAlign: 'center' |
|
||||||
}} |
|
||||||
> |
|
||||||
{mInvoices |
|
||||||
.filter((value) => value.id === MasterData.id) |
|
||||||
.map((row) => { |
|
||||||
return row.detail.length |
|
||||||
})} |
|
||||||
</td> |
|
||||||
</tr> |
|
||||||
{MasterData.max ? ( |
|
||||||
<tr |
|
||||||
className={ |
|
||||||
MasterData.max === true |
|
||||||
? 'masterSelected2' |
|
||||||
: 'normalSelected2' |
|
||||||
} |
|
||||||
> |
|
||||||
<th colSpan={18}> |
|
||||||
<table |
|
||||||
className="childTable" |
|
||||||
style={{ width: '1650px' }} |
|
||||||
> |
|
||||||
<thead> |
|
||||||
<tr> |
|
||||||
<th |
|
||||||
style={{ |
|
||||||
width: '50px', |
|
||||||
backgroundColor: '#FFFFFF', |
|
||||||
color: '#346288', |
|
||||||
textAlign: 'right' |
|
||||||
}} |
|
||||||
></th> |
|
||||||
<th |
|
||||||
style={{ |
|
||||||
width: '100px', |
|
||||||
backgroundColor: '#D3E0EA', |
|
||||||
color: '#346288' |
|
||||||
}} |
|
||||||
> |
|
||||||
Item Id |
|
||||||
</th> |
|
||||||
<th |
|
||||||
style={{ |
|
||||||
width: '400px', |
|
||||||
backgroundColor: '#D3E0EA', |
|
||||||
color: '#346288' |
|
||||||
}} |
|
||||||
> |
|
||||||
Item Description |
|
||||||
</th> |
|
||||||
<th |
|
||||||
style={{ |
|
||||||
width: '120px', |
|
||||||
backgroundColor: '#D3E0EA', |
|
||||||
color: '#346288', |
|
||||||
textAlign: 'center' |
|
||||||
}} |
|
||||||
> |
|
||||||
Fraccion GEMCO |
|
||||||
</th> |
|
||||||
<th |
|
||||||
style={{ |
|
||||||
width: '70px', |
|
||||||
backgroundColor: '#D3E0EA', |
|
||||||
color: '#346288', |
|
||||||
textAlign: 'center' |
|
||||||
}} |
|
||||||
> |
|
||||||
Descripcion GEMCO |
|
||||||
</th> |
|
||||||
<th |
|
||||||
style={{ |
|
||||||
width: '70px', |
|
||||||
backgroundColor: '#D3E0EA', |
|
||||||
color: '#346288', |
|
||||||
textAlign: 'center' |
|
||||||
}} |
|
||||||
> |
|
||||||
Country of Origin |
|
||||||
</th> |
|
||||||
<th |
|
||||||
style={{ |
|
||||||
width: '70px', |
|
||||||
backgroundColor: '#D3E0EA', |
|
||||||
color: '#346288' |
|
||||||
}} |
|
||||||
> |
|
||||||
ProductGroup |
|
||||||
</th> |
|
||||||
<th |
|
||||||
style={{ |
|
||||||
width: '70px', |
|
||||||
backgroundColor: '#D3E0EA', |
|
||||||
color: '#346288' |
|
||||||
}} |
|
||||||
> |
|
||||||
Brand |
|
||||||
</th> |
|
||||||
<th |
|
||||||
style={{ |
|
||||||
width: '70px', |
|
||||||
backgroundColor: '#D3E0EA', |
|
||||||
color: '#346288' |
|
||||||
}} |
|
||||||
> |
|
||||||
Model |
|
||||||
</th> |
|
||||||
<th |
|
||||||
style={{ |
|
||||||
width: '70px', |
|
||||||
backgroundColor: '#D3E0EA', |
|
||||||
color: '#346288' |
|
||||||
}} |
|
||||||
> |
|
||||||
Unit Measure |
|
||||||
</th> |
|
||||||
<th |
|
||||||
style={{ |
|
||||||
width: '70px', |
|
||||||
backgroundColor: '#D3E0EA', |
|
||||||
color: '#346288' |
|
||||||
}} |
|
||||||
> |
|
||||||
Qty Shipped |
|
||||||
</th> |
|
||||||
<th |
|
||||||
style={{ |
|
||||||
width: '70px', |
|
||||||
backgroundColor: '#D3E0EA', |
|
||||||
color: '#346288' |
|
||||||
}} |
|
||||||
> |
|
||||||
Unit of measure |
|
||||||
</th> |
|
||||||
<th |
|
||||||
style={{ |
|
||||||
width: '70px', |
|
||||||
backgroundColor: '#D3E0EA', |
|
||||||
color: '#346288' |
|
||||||
}} |
|
||||||
> |
|
||||||
Unit Net Weight |
|
||||||
</th> |
|
||||||
<th |
|
||||||
style={{ |
|
||||||
width: '70px', |
|
||||||
backgroundColor: '#D3E0EA', |
|
||||||
color: '#346288' |
|
||||||
}} |
|
||||||
> |
|
||||||
Unit Cost |
|
||||||
</th> |
|
||||||
<th |
|
||||||
style={{ |
|
||||||
width: '70px', |
|
||||||
backgroundColor: '#D3E0EA', |
|
||||||
color: '#346288' |
|
||||||
}} |
|
||||||
> |
|
||||||
Total value |
|
||||||
</th> |
|
||||||
<th |
|
||||||
style={{ |
|
||||||
width: '70px', |
|
||||||
backgroundColor: '#D3E0EA', |
|
||||||
color: '#346288' |
|
||||||
}} |
|
||||||
> |
|
||||||
Consulta |
|
||||||
</th> |
|
||||||
</tr> |
|
||||||
</thead> |
|
||||||
<tbody> |
|
||||||
{mInvoices.map((MD) => { |
|
||||||
return ( |
|
||||||
<> |
|
||||||
{MD.detail |
|
||||||
.filter( |
|
||||||
(detail) => |
|
||||||
MasterData.id === |
|
||||||
detail.idHeader |
|
||||||
) //.sort((a,b) => a.itemId.localeCompare(b.itemId))
|
|
||||||
.sort((a, b) => |
|
||||||
a.partida > b.partida ? 1 : -1 |
|
||||||
) |
|
||||||
.map((detail) => { |
|
||||||
return ( |
|
||||||
<RptConsultaTraficoDetalle |
|
||||||
IDMaster={MasterData.id} |
|
||||||
detail={detail} |
|
||||||
Habilitado={ |
|
||||||
/* MasterData.estatus <= 1 */ |
|
||||||
1 == 1 |
|
||||||
} |
|
||||||
Catalogo = {CatGrupoRegulario ? CatGrupoRegulario : []} |
|
||||||
onDataChange={function ( |
|
||||||
IDMaster: number |
|
||||||
): void { |
|
||||||
updateDataGrid(IDMaster) |
|
||||||
}} |
|
||||||
/> |
|
||||||
) |
|
||||||
})} |
|
||||||
</> |
|
||||||
) |
|
||||||
})} |
|
||||||
</tbody> |
|
||||||
</table> |
|
||||||
</th> |
|
||||||
</tr> |
|
||||||
) : null} |
|
||||||
</> |
|
||||||
) |
|
||||||
}) |
|
||||||
: null} |
|
||||||
</tbody> |
|
||||||
</Table> |
|
||||||
</div> |
|
||||||
</Card.Body> |
|
||||||
</Card> |
|
||||||
|
|
||||||
<Modal |
|
||||||
show={WaitingDialog} |
|
||||||
onHide={() => { |
|
||||||
setWaitingDialog(false) |
|
||||||
}} |
|
||||||
backdrop="static" |
|
||||||
keyboard={false} |
|
||||||
size="sm" |
|
||||||
dialogClassName={'modal-50w'} |
|
||||||
centered |
|
||||||
> |
|
||||||
<Modal.Header closeButton> |
|
||||||
<Modal.Title></Modal.Title> |
|
||||||
</Modal.Header> |
|
||||||
<Modal.Body> |
|
||||||
<img src={loadingImg} style={{ height: '150px' }} alt="proccessing" /> |
|
||||||
Generando {WaitingMessage}... |
|
||||||
</Modal.Body> |
|
||||||
<Modal.Footer></Modal.Footer> |
|
||||||
</Modal> |
|
||||||
|
|
||||||
<MsgInformativo |
|
||||||
show={show} |
|
||||||
msg={msg} |
|
||||||
header={header} |
|
||||||
msgColor={msgColor} |
|
||||||
closeToast={() => { |
|
||||||
setShowMsg(false) |
|
||||||
}} |
|
||||||
/> |
|
||||||
</div> |
|
||||||
) |
|
||||||
} |
|
||||||
@ -1,400 +0,0 @@ |
|||||||
import * as React from 'react' |
|
||||||
import { useEffect, useState } from 'react' |
|
||||||
import { |
|
||||||
Alert, |
|
||||||
Button, |
|
||||||
Col, |
|
||||||
Form, |
|
||||||
FormCheck, |
|
||||||
Modal, |
|
||||||
OverlayTrigger, |
|
||||||
Popover, |
|
||||||
Row, |
|
||||||
Tooltip |
|
||||||
} from 'react-bootstrap' |
|
||||||
import { MsgInformativo } from '../../../../Utils/Toast/msgInformativo' |
|
||||||
import DSAmazon from '../../Services/Amazon.Services' |
|
||||||
// Redux
|
|
||||||
import { RootState } from '../../../../../store/store' |
|
||||||
import { useDispatch, useSelector } from 'react-redux' |
|
||||||
import * as CurrencyFormat from 'react-currency-format' |
|
||||||
import DTO2096TraficoConsultaAmazonDetail from '../../DTO/DTO2096TraficoConsultaAmazonDetail' |
|
||||||
import DTODataTraficoConsulta from '../../DTO/DTO2096DataTraficoConsulta' |
|
||||||
import I2096CatGrupoRegulatorio from '../../Interfaces/I2096CatGrupoRegulatorio' |
|
||||||
|
|
||||||
export interface IRptConsultaTraficoDetalleProps { |
|
||||||
IDMaster: number |
|
||||||
detail: DTO2096TraficoConsultaAmazonDetail |
|
||||||
Habilitado: boolean |
|
||||||
Catalogo: I2096CatGrupoRegulatorio[] |
|
||||||
onDataChange: (IDMaster: number) => void |
|
||||||
} |
|
||||||
|
|
||||||
export default function RptConsultaTraficoDetalle( |
|
||||||
props: IRptConsultaTraficoDetalleProps |
|
||||||
) { |
|
||||||
const dispatch = useDispatch() |
|
||||||
const mInvoices = useSelector( |
|
||||||
(state: RootState) => state.AmazonInvoices.Invoice |
|
||||||
) |
|
||||||
const [ShowModal, setShowModal] = useState(false) |
|
||||||
const [EstatusSwith, setEstatusSwitch] = useState(props.detail.swConsulta) |
|
||||||
const [UserChanged, setUserChanged] = useState(false) |
|
||||||
const [header, setHeader] = useState('') |
|
||||||
const [show, setShowMsg] = useState(false) |
|
||||||
const [msg, setMsg] = useState('') |
|
||||||
const [RegulacionConsulta, setRegulacionConsulta] = useState( |
|
||||||
props.detail.regulacionConsulta ? props.detail.regulacionConsulta : '' |
|
||||||
) |
|
||||||
const [ComentariosConsulta, setComentariosConsulta] = useState( |
|
||||||
props.detail.comentariosConsulta ? props.detail.comentariosConsulta : '' |
|
||||||
) |
|
||||||
const [ShowModalEdit, setShowModalEdit] = useState(false) |
|
||||||
const [IDGrupoRegulatorio, setIDGrupoRegulatorio] = useState( |
|
||||||
props.detail.grupoRegulatorio |
|
||||||
) |
|
||||||
const msgColor = 'primary' |
|
||||||
|
|
||||||
const saveData = () => { |
|
||||||
const data: DTODataTraficoConsulta = { |
|
||||||
id: props.detail.id, |
|
||||||
swConsulta: EstatusSwith, |
|
||||||
grupoRegulatorio: IDGrupoRegulatorio, |
|
||||||
regulacionConsulta: RegulacionConsulta, |
|
||||||
comentariosConsulta: ComentariosConsulta |
|
||||||
} |
|
||||||
DSAmazon.DataTraficoConsultaSET(data) |
|
||||||
.then((response) => { |
|
||||||
setShowModal(false) |
|
||||||
props.onDataChange(props.IDMaster) |
|
||||||
}) |
|
||||||
.catch((e: Error) => { |
|
||||||
setHeader('Error') |
|
||||||
setMsg('Ocurrio un error, no se guardo la informacion en BD') |
|
||||||
setShowMsg(true) |
|
||||||
return |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
useEffect(() => { |
|
||||||
if (UserChanged) { |
|
||||||
setShowModal(true) |
|
||||||
} |
|
||||||
}, [EstatusSwith, UserChanged]) |
|
||||||
|
|
||||||
return ( |
|
||||||
<> |
|
||||||
<tr> |
|
||||||
<th |
|
||||||
style={{ |
|
||||||
width: '50px', |
|
||||||
backgroundColor: '#FFFFFF', |
|
||||||
textAlign: 'right', |
|
||||||
fontWeight: 'bold' |
|
||||||
}} |
|
||||||
className="DetailData" |
|
||||||
> |
|
||||||
{props.detail.partida} |
|
||||||
</th> |
|
||||||
<td |
|
||||||
style={{ |
|
||||||
textAlign: 'center', |
|
||||||
cursor: 'pointer' |
|
||||||
}} |
|
||||||
className="DetailData" |
|
||||||
> |
|
||||||
{props.detail.itemId} |
|
||||||
</td> |
|
||||||
<td |
|
||||||
style={{ |
|
||||||
textAlign: 'left' |
|
||||||
}} |
|
||||||
className="DetailData" |
|
||||||
> |
|
||||||
{props.detail.itemDescription} |
|
||||||
</td> |
|
||||||
<td |
|
||||||
style={{ |
|
||||||
textAlign: 'center' |
|
||||||
}} |
|
||||||
className="DetailData" |
|
||||||
> |
|
||||||
<CurrencyFormat |
|
||||||
value={props.detail.fraccionGEMCO ? props.detail.fraccionGEMCO : ''} |
|
||||||
disabled={true} |
|
||||||
format={'####.##.####'} |
|
||||||
displayType={'input'} |
|
||||||
style={{ |
|
||||||
fontSize: '17px', |
|
||||||
backgroundColor: '#E5F7B6', |
|
||||||
border: '2px solid green', |
|
||||||
color: '#000000', |
|
||||||
width: '135px', |
|
||||||
textAlign: 'right', |
|
||||||
borderRadius: '10px' |
|
||||||
}} |
|
||||||
/> |
|
||||||
</td> |
|
||||||
<td |
|
||||||
style={{ |
|
||||||
textAlign: 'center' |
|
||||||
}} |
|
||||||
className="DetailData" |
|
||||||
> |
|
||||||
{props.detail.descripcionGEMCO} |
|
||||||
</td> |
|
||||||
<td |
|
||||||
style={{ |
|
||||||
textAlign: 'center' |
|
||||||
}} |
|
||||||
className="DetailData" |
|
||||||
> |
|
||||||
{props.detail.countryOfOrigin} |
|
||||||
</td> |
|
||||||
<td |
|
||||||
style={{ |
|
||||||
textAlign: 'left', |
|
||||||
paddingLeft: '15px' |
|
||||||
}} |
|
||||||
className="DetailData" |
|
||||||
> |
|
||||||
{props.detail.productGroup} |
|
||||||
</td> |
|
||||||
<td |
|
||||||
style={{ |
|
||||||
textAlign: 'left', |
|
||||||
paddingLeft: '15px' |
|
||||||
}} |
|
||||||
className="DetailData" |
|
||||||
> |
|
||||||
{props.detail.brand} |
|
||||||
</td> |
|
||||||
<td |
|
||||||
style={{ |
|
||||||
textAlign: 'right' |
|
||||||
}} |
|
||||||
className="DetailData" |
|
||||||
> |
|
||||||
{props.detail.model} |
|
||||||
</td> |
|
||||||
<td |
|
||||||
style={{ |
|
||||||
textAlign: 'center' |
|
||||||
}} |
|
||||||
className="DetailData" |
|
||||||
> |
|
||||||
{props.detail.itemQuantityUnitOfMeasure} |
|
||||||
</td> |
|
||||||
<td |
|
||||||
style={{ |
|
||||||
textAlign: 'center' |
|
||||||
}} |
|
||||||
className="DetailData" |
|
||||||
> |
|
||||||
{props.detail.quantity} |
|
||||||
</td> |
|
||||||
<td |
|
||||||
style={{ |
|
||||||
textAlign: 'center' |
|
||||||
}} |
|
||||||
className="DetailData" |
|
||||||
> |
|
||||||
{props.detail.weightValue} |
|
||||||
</td> |
|
||||||
<td |
|
||||||
style={{ |
|
||||||
textAlign: 'center' |
|
||||||
}} |
|
||||||
className="DetailData" |
|
||||||
> |
|
||||||
{props.detail.netWeightUnitOfMeasure} |
|
||||||
</td> |
|
||||||
|
|
||||||
<td |
|
||||||
style={{ |
|
||||||
textAlign: 'center' |
|
||||||
}} |
|
||||||
className="DetailData" |
|
||||||
> |
|
||||||
{props.detail.actualUnitCostMonetaryAmount} |
|
||||||
</td> |
|
||||||
<td |
|
||||||
style={{ |
|
||||||
textAlign: 'center' |
|
||||||
}} |
|
||||||
className="DetailData" |
|
||||||
> |
|
||||||
{props.detail.totalUnitValueMonetaryAmount} |
|
||||||
</td> |
|
||||||
<td |
|
||||||
style={{ |
|
||||||
textAlign: 'center', |
|
||||||
paddingLeft: '30px' |
|
||||||
}} |
|
||||||
className="DetailData" |
|
||||||
> |
|
||||||
<FormCheck |
|
||||||
className="form-check form-switch form-control-lg" |
|
||||||
id="switchEnabled" |
|
||||||
type="switch" |
|
||||||
checked={EstatusSwith} |
|
||||||
onChange={() => { |
|
||||||
setEstatusSwitch(!EstatusSwith) |
|
||||||
setUserChanged(true) |
|
||||||
setShowModal(!EstatusSwith) |
|
||||||
}} |
|
||||||
/> |
|
||||||
</td> |
|
||||||
{/* <td |
|
||||||
style={{ |
|
||||||
visibility: |
|
||||||
CumplimientoNormativo.length === 0 ? 'hidden' : 'visible' |
|
||||||
}} |
|
||||||
> |
|
||||||
<OverlayTrigger |
|
||||||
placement="bottom" |
|
||||||
overlay={ |
|
||||||
<Tooltip id="button-tooltip-2">{CumplimientoNormativo}</Tooltip> |
|
||||||
} |
|
||||||
> |
|
||||||
{({ ref, ...triggerHandler }) => ( |
|
||||||
<Button variant="light" {...triggerHandler}> |
|
||||||
<IconContext.Provider |
|
||||||
value={{ |
|
||||||
color: 'blue', |
|
||||||
size: '25px' |
|
||||||
}} |
|
||||||
> |
|
||||||
<AiOutlineFileSearch /> |
|
||||||
</IconContext.Provider> |
|
||||||
<span className="ms-1"></span> |
|
||||||
</Button> |
|
||||||
)} |
|
||||||
</OverlayTrigger> |
|
||||||
</td> |
|
||||||
<td |
|
||||||
style={{ |
|
||||||
visibility: |
|
||||||
CumplimientoNormativo.length === 0 ? 'hidden' : 'visible' |
|
||||||
}} |
|
||||||
> |
|
||||||
<OverlayTrigger |
|
||||||
placement="bottom" |
|
||||||
overlay={<Tooltip id="button-tooltip-2">{Comentarios}</Tooltip>} |
|
||||||
> |
|
||||||
{({ ref, ...triggerHandler }) => ( |
|
||||||
<Button variant="light" {...triggerHandler}> |
|
||||||
<IconContext.Provider |
|
||||||
value={{ |
|
||||||
color: 'green', |
|
||||||
size: '25px' |
|
||||||
}} |
|
||||||
> |
|
||||||
<BsFillChatRightTextFill /> |
|
||||||
</IconContext.Provider> |
|
||||||
<span className="ms-1"></span> |
|
||||||
</Button> |
|
||||||
)} |
|
||||||
</OverlayTrigger> |
|
||||||
</td> |
|
||||||
<td> |
|
||||||
</td> */} |
|
||||||
</tr> |
|
||||||
<Modal |
|
||||||
show={ShowModal} |
|
||||||
onHide={() => { |
|
||||||
setShowModal(false) |
|
||||||
}} |
|
||||||
size={'sm'} |
|
||||||
dialogClassName={'modal-50w'} |
|
||||||
> |
|
||||||
<Modal.Header> |
|
||||||
<Modal.Title className="primary">Consulta Amazon {IDGrupoRegulatorio}</Modal.Title> |
|
||||||
</Modal.Header> |
|
||||||
<Modal.Body> |
|
||||||
<div style={{ height: '230px' }}> |
|
||||||
<Row style={{ paddingTop: '15px' }}> |
|
||||||
<Col xs={3}>Grupo Regulatorio</Col> |
|
||||||
<Col xs={8}> |
|
||||||
<Form.Control |
|
||||||
as="select" |
|
||||||
defaultValue={IDGrupoRegulatorio} |
|
||||||
onChange={(e) => { |
|
||||||
setIDGrupoRegulatorio(parseInt(e.target.value)) |
|
||||||
}} |
|
||||||
className="form-select form-select-sm" |
|
||||||
> |
|
||||||
<option value="0">-SELECCIONE-</option> |
|
||||||
{props.Catalogo |
|
||||||
? props.Catalogo.map((c) => { |
|
||||||
return <option value={c.id}>{c.descripcion}</option> |
|
||||||
}) |
|
||||||
: null} |
|
||||||
</Form.Control> |
|
||||||
</Col> |
|
||||||
<Col> </Col> |
|
||||||
</Row> |
|
||||||
<Row style={{ paddingTop: '15px' }}> |
|
||||||
<Col xs={3}>Regulacion</Col> |
|
||||||
<Col xs={8}> |
|
||||||
<Form.Control |
|
||||||
as="textarea" |
|
||||||
id="Regulacion" |
|
||||||
size="sm" |
|
||||||
value={RegulacionConsulta.length ? RegulacionConsulta : ''} |
|
||||||
onChange={(e) => setRegulacionConsulta(e.target.value)} |
|
||||||
/> |
|
||||||
</Col> |
|
||||||
<Col> </Col> |
|
||||||
</Row> |
|
||||||
<Row style={{ paddingTop: '15px' }}> |
|
||||||
<Col xs={3}>Comentarios</Col> |
|
||||||
<Col xs={8}> |
|
||||||
<Form.Control |
|
||||||
as="textarea" |
|
||||||
id="Comentarios" |
|
||||||
size="sm" |
|
||||||
value={ComentariosConsulta.length ? ComentariosConsulta : ''} |
|
||||||
onChange={(e) => setComentariosConsulta(e.target.value)} |
|
||||||
/> |
|
||||||
</Col> |
|
||||||
<Col> </Col> |
|
||||||
</Row> |
|
||||||
<Row style={{ paddingTop: '15px' }}> |
|
||||||
<Col xs={6} style={{ textAlign: 'center' }}> |
|
||||||
<Button |
|
||||||
variant="secondary" |
|
||||||
onClick={() => { |
|
||||||
setEstatusSwitch(true) |
|
||||||
setShowModal(false) |
|
||||||
}} |
|
||||||
> |
|
||||||
Cancelar |
|
||||||
</Button> |
|
||||||
</Col> |
|
||||||
<Col xs={6} style={{ textAlign: 'center' }}> |
|
||||||
<Button |
|
||||||
variant="danger" |
|
||||||
onClick={() => { |
|
||||||
saveData() |
|
||||||
}} |
|
||||||
> |
|
||||||
Guardar |
|
||||||
</Button> |
|
||||||
</Col> |
|
||||||
</Row> |
|
||||||
</div> |
|
||||||
</Modal.Body> |
|
||||||
</Modal> |
|
||||||
<MsgInformativo |
|
||||||
show={show} |
|
||||||
msg={msg} |
|
||||||
header={header} |
|
||||||
msgColor={msgColor} |
|
||||||
closeToast={() => { |
|
||||||
setShowMsg(false) |
|
||||||
}} |
|
||||||
/> |
|
||||||
</> |
|
||||||
) |
|
||||||
} |
|
||||||
@ -1,401 +0,0 @@ |
|||||||
import * as React from 'react' |
|
||||||
import { useEffect, useState } from 'react' |
|
||||||
import { RootState } from '../../../../../store/store' |
|
||||||
import I2096Headers from '../../Interfaces/I2096Header' |
|
||||||
import DSAmazon from '../../Services/Amazon.Services' |
|
||||||
// Redux
|
|
||||||
import { useDispatch, useSelector } from 'react-redux' |
|
||||||
import { |
|
||||||
initializeInvoice, |
|
||||||
populateInvoices, |
|
||||||
updateInvoice |
|
||||||
} from '../../../../../store/features/Clientes/2096/AmazonInvoices' |
|
||||||
import { |
|
||||||
Alert, |
|
||||||
Button, |
|
||||||
Card, |
|
||||||
Col, |
|
||||||
Form, |
|
||||||
Modal, |
|
||||||
Row, |
|
||||||
Table |
|
||||||
} from 'react-bootstrap' |
|
||||||
import { MsgInformativo } from '../../../../Utils/Toast/msgInformativo' |
|
||||||
import { AiFillFileExcel } from 'react-icons/ai' |
|
||||||
import { IconContext } from 'react-icons' |
|
||||||
import { BsSearch, BsFileEarmarkExcel } from 'react-icons/bs' |
|
||||||
import { BsChevronDown, BsChevronRight, BsFilePdfFill } from 'react-icons/bs' |
|
||||||
import { FaAmazon } from 'react-icons/fa' |
|
||||||
import loadingImg from '../../../../../images/ajaxloader.gif' |
|
||||||
import { MFileManager } from '../../../../Utils/MFileManager/MFileManager' |
|
||||||
import DTO2096RptPayedOperations from '../../DTO/DTO2096RptPayedOperations' |
|
||||||
import { GoGear } from 'react-icons/go' |
|
||||||
import IFileManager from '../../../../../Interfaces/Utils/IFileManager' |
|
||||||
import DTO2096RptFacturasPagadas from '../../DTO/DTO2096RptFacturasPagadas' |
|
||||||
import DataTable from 'react-data-table-component' |
|
||||||
import * as XLSX from 'xlsx' |
|
||||||
|
|
||||||
export interface IRptAmazonFacturasPagadasProps {} |
|
||||||
|
|
||||||
export default function RptAmazonFacturasPagadas( |
|
||||||
props: IRptAmazonFacturasPagadasProps |
|
||||||
) { |
|
||||||
const dispatch = useDispatch() |
|
||||||
const mInvoices = useSelector( |
|
||||||
(state: RootState) => state.AmazonInvoices.Invoice |
|
||||||
) |
|
||||||
const [header, setHeader] = useState('') |
|
||||||
const [Referencia, setReferencia] = useState('') |
|
||||||
const [Inicio, setInicio] = useState(currentDate()) |
|
||||||
const [Fin, setFin] = useState(currentDate()) |
|
||||||
const [Data, setData] = useState<DTO2096RptFacturasPagadas[]>([]) |
|
||||||
const [show, setShowMsg] = useState(false) |
|
||||||
const [ShowModal, setShowModal] = useState(false) |
|
||||||
const [WaitingDialog, setWaitingDialog] = useState(false) |
|
||||||
const [WaitingMessage, setWaitingMessage] = useState('') |
|
||||||
const [msg, setMsg] = useState('') |
|
||||||
const [ShowModalAnswerFile, setShowModalAnswerFile] = useState(false) |
|
||||||
const [IDProcess, setIDProcess] = useState(25) |
|
||||||
const [IDFactura, setIDFactura] = useState(0) |
|
||||||
const [Invoices, setInvoices] = useState<number[]>([]) |
|
||||||
const msgColor = 'primary' |
|
||||||
const columnsConcepts = [ |
|
||||||
{ |
|
||||||
name: <div style={{ textAlign: 'center' }}>Factura</div>, |
|
||||||
|
|
||||||
width: '300px', |
|
||||||
selector: (row: DTO2096RptFacturasPagadas) => row.factura, |
|
||||||
sortable: true |
|
||||||
}, |
|
||||||
{ |
|
||||||
name: <div style={{ textAlign: 'center' }}>Pedimento</div>, |
|
||||||
|
|
||||||
width: '120px', |
|
||||||
selector: (row: DTO2096RptFacturasPagadas) => row.pedimento, |
|
||||||
sortable: true |
|
||||||
}, |
|
||||||
{ |
|
||||||
name: <div style={{ textAlign: 'center' }}>Fecha Pago</div>, |
|
||||||
|
|
||||||
width: '120px', |
|
||||||
selector: (row: DTO2096RptFacturasPagadas) => |
|
||||||
row.fechaPago.substring(0, 10), |
|
||||||
sortable: true |
|
||||||
}, |
|
||||||
{ |
|
||||||
name: <div style={{ textAlign: 'center' }}>Clave</div>, |
|
||||||
|
|
||||||
width: '80px', |
|
||||||
selector: (row: DTO2096RptFacturasPagadas) => row.clave, |
|
||||||
sortable: true |
|
||||||
}, |
|
||||||
{ |
|
||||||
name: <div style={{ textAlign: 'center' }}>Tipo Operacion</div>, |
|
||||||
|
|
||||||
width: '120px', |
|
||||||
selector: (row: DTO2096RptFacturasPagadas) => row.tipoOp, |
|
||||||
sortable: true |
|
||||||
}, |
|
||||||
{ |
|
||||||
name: <div style={{ textAlign: 'center' }}>Valor Dolares</div>, |
|
||||||
|
|
||||||
width: '130px', |
|
||||||
selector: (row: DTO2096RptFacturasPagadas) => row.valorDolares, |
|
||||||
sortable: true |
|
||||||
}, |
|
||||||
{ |
|
||||||
name: <div style={{ textAlign: 'center' }}>Valor Aduana </div>, |
|
||||||
|
|
||||||
width: '130px', |
|
||||||
selector: (row: DTO2096RptFacturasPagadas) => row.valorAduana, |
|
||||||
sortable: true |
|
||||||
}, |
|
||||||
{ |
|
||||||
name: <div style={{ textAlign: 'center' }}>Razon Social</div>, |
|
||||||
|
|
||||||
width: '350px', |
|
||||||
selector: (row: DTO2096RptFacturasPagadas) => row.razonSocial, |
|
||||||
sortable: true |
|
||||||
}, |
|
||||||
{ |
|
||||||
name: <div style={{ textAlign: 'center' }}>Aduana</div>, |
|
||||||
|
|
||||||
width: '100px', |
|
||||||
selector: (row: DTO2096RptFacturasPagadas) => row.aduana, |
|
||||||
sortable: false |
|
||||||
}, |
|
||||||
{ |
|
||||||
name: <div style={{ textAlign: 'center' }}>Piezas</div>, |
|
||||||
|
|
||||||
width: '100px', |
|
||||||
selector: (row: DTO2096RptFacturasPagadas) => row.piezas, |
|
||||||
sortable: false |
|
||||||
} |
|
||||||
] |
|
||||||
|
|
||||||
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 |
|
||||||
} |
|
||||||
|
|
||||||
const loadReport = () => { |
|
||||||
DSAmazon.AmazonFacturasPagadasGET(Inicio, Fin) |
|
||||||
.then((response) => { |
|
||||||
setData(response.data) |
|
||||||
}) |
|
||||||
.catch((e: Error) => { |
|
||||||
alert('Ocurrio un error' + e.message.toString()) |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
const downloadExcel = () => { |
|
||||||
exportExcel(Data, 'Reporte de facturas pagadas de Amazon') |
|
||||||
} |
|
||||||
|
|
||||||
function exportExcel( |
|
||||||
jsonData: DTO2096RptFacturasPagadas[], |
|
||||||
fileName: string |
|
||||||
): void { |
|
||||||
let Heading = [ |
|
||||||
[ |
|
||||||
'Factura', |
|
||||||
'Pedimento', |
|
||||||
'Fecha Pago', |
|
||||||
'Clave', |
|
||||||
'Tipo Op', |
|
||||||
'Valor Dolares', |
|
||||||
'Valor Aduana', |
|
||||||
'Razon Social', |
|
||||||
'Aduana', |
|
||||||
'Piezas' |
|
||||||
] |
|
||||||
] |
|
||||||
const dataOnly = jsonData.map( |
|
||||||
({ |
|
||||||
factura, |
|
||||||
pedimento, |
|
||||||
fechaPago, |
|
||||||
clave, |
|
||||||
tipoOp, |
|
||||||
valorDolares, |
|
||||||
valorAduana, |
|
||||||
razonSocial, |
|
||||||
aduana, |
|
||||||
piezas |
|
||||||
}) => { |
|
||||||
return { |
|
||||||
factura, |
|
||||||
pedimento, |
|
||||||
fechaPago, |
|
||||||
clave, |
|
||||||
tipoOp, |
|
||||||
valorDolares, |
|
||||||
valorAduana, |
|
||||||
razonSocial, |
|
||||||
aduana, |
|
||||||
piezas |
|
||||||
} |
|
||||||
} |
|
||||||
) |
|
||||||
const Report = dataOnly.map( |
|
||||||
({ |
|
||||||
factura, |
|
||||||
pedimento, |
|
||||||
fechaPago, |
|
||||||
clave, |
|
||||||
tipoOp, |
|
||||||
valorDolares, |
|
||||||
valorAduana, |
|
||||||
razonSocial, |
|
||||||
aduana, |
|
||||||
piezas |
|
||||||
}) => { |
|
||||||
return { |
|
||||||
factura, |
|
||||||
pedimento, |
|
||||||
fechaPago, |
|
||||||
clave, |
|
||||||
tipoOp, |
|
||||||
valorDolares, |
|
||||||
valorAduana, |
|
||||||
razonSocial, |
|
||||||
aduana, |
|
||||||
piezas |
|
||||||
} |
|
||||||
} |
|
||||||
) |
|
||||||
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, Report, { 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 + 1; C <= range.e.c + 1; ++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() |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
useEffect(() => { |
|
||||||
loadReport() |
|
||||||
}, []) |
|
||||||
|
|
||||||
return ( |
|
||||||
<div> |
|
||||||
<Card> |
|
||||||
<Card.Body> |
|
||||||
<Row> |
|
||||||
<Col xs={5}> |
|
||||||
<Card.Title> |
|
||||||
<IconContext.Provider value={{ color: '#F6C34F', size: '8%' }}> |
|
||||||
<FaAmazon /> |
|
||||||
</IconContext.Provider> |
|
||||||
Facturas Pagadas |
|
||||||
</Card.Title> |
|
||||||
</Col> |
|
||||||
<Col> |
|
||||||
<Col style={{ textAlign: 'center' }}> |
|
||||||
<Button |
|
||||||
variant="success" |
|
||||||
onClick={() => { |
|
||||||
downloadExcel() |
|
||||||
}} |
|
||||||
> |
|
||||||
<BsFileEarmarkExcel /> |
|
||||||
Excel |
|
||||||
</Button> |
|
||||||
</Col> |
|
||||||
</Col> |
|
||||||
|
|
||||||
<Col style={{ textAlign: 'right' }}>Desde</Col> |
|
||||||
<Col xs={1}> |
|
||||||
<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" |
|
||||||
/> |
|
||||||
</Col> |
|
||||||
<Col style={{ textAlign: 'right' }}>Hasta</Col> |
|
||||||
<Col xs={1}> |
|
||||||
<Form.Control |
|
||||||
defaultValue={Fin} |
|
||||||
type="date" |
|
||||||
name="Fin" |
|
||||||
placeholder="Fin" |
|
||||||
title="Fin" |
|
||||||
alt="Fin" |
|
||||||
onChange={(e) => setFin(e.target.value)} |
|
||||||
size="sm" |
|
||||||
/> |
|
||||||
</Col> |
|
||||||
<Col |
|
||||||
style={{ textAlign: 'right' }} |
|
||||||
onClick={() => { |
|
||||||
loadReport() |
|
||||||
}} |
|
||||||
> |
|
||||||
{/* <div className="col-md-3 d-flex aling-items-center"> */} |
|
||||||
|
|
||||||
<Button variant="primary"> |
|
||||||
Buscar <BsSearch /> |
|
||||||
</Button> |
|
||||||
{/* </div> */} |
|
||||||
</Col> |
|
||||||
</Row> |
|
||||||
</Card.Body> |
|
||||||
</Card> |
|
||||||
|
|
||||||
<Card> |
|
||||||
<Card.Body> |
|
||||||
<div |
|
||||||
className="ag-theme-alpine" |
|
||||||
style={{ height: 500, width: '100%' }} |
|
||||||
> |
|
||||||
<DataTable |
|
||||||
noHeader |
|
||||||
defaultSortFieldId={'id'} |
|
||||||
defaultSortAsc={true} |
|
||||||
striped={true} |
|
||||||
dense={true} |
|
||||||
paginationPerPage={10} |
|
||||||
pagination |
|
||||||
highlightOnHover |
|
||||||
columns={columnsConcepts} |
|
||||||
data={Data} |
|
||||||
pointerOnHover |
|
||||||
/> |
|
||||||
</div> |
|
||||||
</Card.Body> |
|
||||||
</Card> |
|
||||||
<Modal |
|
||||||
show={WaitingDialog} |
|
||||||
onHide={() => { |
|
||||||
setWaitingDialog(false) |
|
||||||
}} |
|
||||||
backdrop="static" |
|
||||||
keyboard={false} |
|
||||||
size="sm" |
|
||||||
dialogClassName={'modal-50w'} |
|
||||||
centered |
|
||||||
> |
|
||||||
<Modal.Header closeButton> |
|
||||||
<Modal.Title></Modal.Title> |
|
||||||
</Modal.Header> |
|
||||||
<Modal.Body> |
|
||||||
<img src={loadingImg} style={{ height: '150px' }} alt="proccessing" /> |
|
||||||
Generando {WaitingMessage}... |
|
||||||
</Modal.Body> |
|
||||||
<Modal.Footer></Modal.Footer> |
|
||||||
</Modal> |
|
||||||
|
|
||||||
<Modal |
|
||||||
show={ShowModalAnswerFile} |
|
||||||
onHide={() => { |
|
||||||
setShowModalAnswerFile(false) |
|
||||||
}} |
|
||||||
size={'sm'} |
|
||||||
dialogClassName={'modal-50w'} |
|
||||||
> |
|
||||||
<Modal.Body> |
|
||||||
<div style={{ height: '330px' }}> |
|
||||||
<Row style={{ paddingTop: '15px' }}> |
|
||||||
<Col></Col> |
|
||||||
<Col xs={10} style={{ textAlign: 'center' }}> |
|
||||||
<MFileManager |
|
||||||
IDTrafico={IDFactura} |
|
||||||
Proceso={IDProcess} |
|
||||||
showPreview={3} |
|
||||||
canEdit={false} |
|
||||||
Leyenda="Lista de archivos de respuesta de Amazon" |
|
||||||
onAppendMFM={function (Files: IFileManager[]): void {}} |
|
||||||
/> |
|
||||||
</Col> |
|
||||||
<Col></Col> |
|
||||||
</Row> |
|
||||||
</div> |
|
||||||
</Modal.Body> |
|
||||||
</Modal> |
|
||||||
|
|
||||||
<MsgInformativo |
|
||||||
show={show} |
|
||||||
msg={msg} |
|
||||||
header={header} |
|
||||||
msgColor={msgColor} |
|
||||||
closeToast={() => { |
|
||||||
setShowMsg(false) |
|
||||||
}} |
|
||||||
/> |
|
||||||
</div> |
|
||||||
) |
|
||||||
} |
|
||||||
@ -1,239 +0,0 @@ |
|||||||
import * as React from 'react' |
|
||||||
import { useEffect, useState } from 'react' |
|
||||||
import { RootState } from '../../../../../store/store' |
|
||||||
import I2096Headers from '../../Interfaces/I2096Header' |
|
||||||
import DSAmazon from '../../Services/Amazon.Services' |
|
||||||
// Redux
|
|
||||||
import { useDispatch, useSelector } from 'react-redux' |
|
||||||
import { |
|
||||||
initializeInvoice, |
|
||||||
populateInvoices, |
|
||||||
updateInvoice |
|
||||||
} from '../../../../../store/features/Clientes/2096/AmazonInvoices' |
|
||||||
import { |
|
||||||
Alert, |
|
||||||
Button, |
|
||||||
Card, |
|
||||||
Col, |
|
||||||
Form, |
|
||||||
Modal, |
|
||||||
Row, |
|
||||||
Table |
|
||||||
} from 'react-bootstrap' |
|
||||||
import { MsgInformativo } from '../../../../Utils/Toast/msgInformativo' |
|
||||||
import { AiFillFileExcel } from 'react-icons/ai' |
|
||||||
import { IconContext } from 'react-icons' |
|
||||||
import { BsChevronDown, BsChevronRight, BsFilePdfFill } from 'react-icons/bs' |
|
||||||
import { FaAmazon } from 'react-icons/fa' |
|
||||||
import { BsSearch, BsFileEarmarkExcel } from 'react-icons/bs' |
|
||||||
import loadingImg from '../../../../../images/ajaxloader.gif' |
|
||||||
import { MFileManager } from '../../../../Utils/MFileManager/MFileManager' |
|
||||||
import DTO2096RptPayedOperations from '../../DTO/DTO2096RptPayedOperations' |
|
||||||
import { GoGear } from 'react-icons/go' |
|
||||||
import IFileManager from '../../../../../Interfaces/Utils/IFileManager' |
|
||||||
import DTO2096RptFacturasPagadas from '../../DTO/DTO2096RptFacturasPagadas' |
|
||||||
import DataTable from 'react-data-table-component' |
|
||||||
import * as XLSX from 'xlsx' |
|
||||||
import DTOAmazonSegragacion from '../../DTO/DTOAmazonSegragacion' |
|
||||||
|
|
||||||
export interface IRptSegregacionProps {} |
|
||||||
|
|
||||||
export default function RptSegregacion(props: IRptSegregacionProps) { |
|
||||||
const dispatch = useDispatch() |
|
||||||
const mInvoices = useSelector( |
|
||||||
(state: RootState) => state.AmazonInvoices.Invoice |
|
||||||
) |
|
||||||
const [header, setHeader] = useState('') |
|
||||||
const [Referencia, setReferencia] = useState('') |
|
||||||
const [Inicio, setInicio] = useState(currentDate()) |
|
||||||
const [Fin, setFin] = useState(currentDate()) |
|
||||||
const [Data, setData] = useState<DTOAmazonSegragacion[]>([]) |
|
||||||
const [show, setShowMsg] = useState(false) |
|
||||||
const [ShowModal, setShowModal] = useState(false) |
|
||||||
const [WaitingDialog, setWaitingDialog] = useState(false) |
|
||||||
const [WaitingMessage, setWaitingMessage] = useState('') |
|
||||||
const [msg, setMsg] = useState('') |
|
||||||
const [ShowModalAnswerFile, setShowModalAnswerFile] = useState(false) |
|
||||||
const [IDProcess, setIDProcess] = useState(25) |
|
||||||
const [IDFactura, setIDFactura] = useState(0) |
|
||||||
const [Invoices, setInvoices] = useState<number[]>([]) |
|
||||||
const msgColor = 'primary' |
|
||||||
|
|
||||||
const columnsConcepts = [ |
|
||||||
{ |
|
||||||
name: 'VRID', |
|
||||||
width: '150px', |
|
||||||
selector: (row: DTOAmazonSegragacion) => row.vrid, |
|
||||||
sortable: true |
|
||||||
}, |
|
||||||
{ |
|
||||||
name: 'ASIN', |
|
||||||
width: '150px', |
|
||||||
selector: (row: DTOAmazonSegragacion) => row.asin, |
|
||||||
sortable: true |
|
||||||
}, |
|
||||||
{ |
|
||||||
name: 'Quantyty', |
|
||||||
width: '100px', |
|
||||||
selector: (row: DTOAmazonSegragacion) => row.quantity, |
|
||||||
sortable: true |
|
||||||
}, |
|
||||||
{ |
|
||||||
name: 'Descripcion', |
|
||||||
width: '250px', |
|
||||||
selector: (row: DTOAmazonSegragacion) => row.descripcion, |
|
||||||
sortable: true |
|
||||||
}, |
|
||||||
{ |
|
||||||
name: 'Motivo', |
|
||||||
width: '2100px', |
|
||||||
|
|
||||||
selector: (row: DTOAmazonSegragacion) => row.motivo, |
|
||||||
sortable: true |
|
||||||
}, |
|
||||||
{ |
|
||||||
name: 'FSegregacion', |
|
||||||
width: '160px', |
|
||||||
selector: (row: DTOAmazonSegragacion) => row.fSegregacion, |
|
||||||
sortable: true |
|
||||||
}, |
|
||||||
{ |
|
||||||
name: 'ValorMercancia', |
|
||||||
width: '160px', |
|
||||||
selector: (row: DTOAmazonSegragacion) => row.valorMercancia, |
|
||||||
sortable: true |
|
||||||
} |
|
||||||
] |
|
||||||
|
|
||||||
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 |
|
||||||
} |
|
||||||
|
|
||||||
const downloadReport = () => { |
|
||||||
DSAmazon.GETReporteSegregados(Inicio, Fin) |
|
||||||
.then((response: any) => { |
|
||||||
if (response.status === 200) { |
|
||||||
const url = window.URL.createObjectURL(new Blob([response.data])) |
|
||||||
const link = document.createElement('a') |
|
||||||
link.href = url |
|
||||||
link.setAttribute('download', 'Segregrados.xls') |
|
||||||
document.body.appendChild(link) |
|
||||||
link.click() |
|
||||||
} |
|
||||||
}) |
|
||||||
.catch((e: Error) => { |
|
||||||
setHeader('Error') |
|
||||||
setMsg('Ocurrio un error') |
|
||||||
setShowMsg(true) |
|
||||||
return |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
const loadReport = () => { |
|
||||||
DSAmazon.GETReportesSegregadoss(Inicio, Fin) |
|
||||||
.then((response) => { |
|
||||||
setData(response.data) |
|
||||||
}) |
|
||||||
.catch((e: Error) => { |
|
||||||
alert('Ocurrio un error' + e.message.toString()) |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
return ( |
|
||||||
<div> |
|
||||||
<Card> |
|
||||||
<Card.Body> |
|
||||||
<Row> |
|
||||||
<Col xs={5}> |
|
||||||
<Card.Title> |
|
||||||
<IconContext.Provider value={{ color: '#F6C34F', size: '8%' }}> |
|
||||||
<FaAmazon /> |
|
||||||
</IconContext.Provider> |
|
||||||
Segregacion |
|
||||||
</Card.Title> |
|
||||||
</Col> |
|
||||||
<Col></Col> |
|
||||||
<Col style={{ textAlign: 'right' }}>Desde</Col> |
|
||||||
<Col xs={1}> |
|
||||||
<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" |
|
||||||
/> |
|
||||||
</Col> |
|
||||||
<Col style={{ textAlign: 'right' }}>Hasta</Col> |
|
||||||
<Col xs={1}> |
|
||||||
<Form.Control |
|
||||||
defaultValue={Fin} |
|
||||||
type="date" |
|
||||||
name="Fin" |
|
||||||
placeholder="Fin" |
|
||||||
title="Fin" |
|
||||||
alt="Fin" |
|
||||||
onChange={(e) => setFin(e.target.value)} |
|
||||||
size="sm" |
|
||||||
/> |
|
||||||
</Col> |
|
||||||
<Col |
|
||||||
style={{ textAlign: 'right' }} |
|
||||||
onClick={() => { |
|
||||||
downloadReport() |
|
||||||
}} |
|
||||||
> |
|
||||||
<Button variant="primary"> |
|
||||||
<BsFileEarmarkExcel /> |
|
||||||
Descargar |
|
||||||
</Button> |
|
||||||
</Col> |
|
||||||
|
|
||||||
<Col |
|
||||||
style={{ textAlign: 'center' }} |
|
||||||
onClick={() => { |
|
||||||
loadReport() |
|
||||||
}} |
|
||||||
> |
|
||||||
<Button variant="primary"> |
|
||||||
{' '} |
|
||||||
<BsSearch /> |
|
||||||
Buscar |
|
||||||
</Button> |
|
||||||
</Col> |
|
||||||
|
|
||||||
<Card> |
|
||||||
<Card.Body> |
|
||||||
<div |
|
||||||
className="ag-theme-alpine" |
|
||||||
style={{ height: 500, width: '100%' }} |
|
||||||
> |
|
||||||
<DataTable |
|
||||||
noHeader |
|
||||||
defaultSortFieldId={''} |
|
||||||
defaultSortAsc={true} |
|
||||||
striped={true} |
|
||||||
dense={true} |
|
||||||
paginationPerPage={10} |
|
||||||
pagination |
|
||||||
highlightOnHover |
|
||||||
columns={columnsConcepts} |
|
||||||
data={Data} |
|
||||||
pointerOnHover |
|
||||||
/> |
|
||||||
</div> |
|
||||||
</Card.Body> |
|
||||||
</Card> |
|
||||||
</Row> |
|
||||||
</Card.Body> |
|
||||||
</Card> |
|
||||||
</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
@ -1,577 +0,0 @@ |
|||||||
import React, { FC, useEffect, useState } from 'react' |
|
||||||
import { Card, Col, Container, Row } from 'react-bootstrap' |
|
||||||
import { Link } from 'react-router-dom' |
|
||||||
import DashboardDS from '../../Services/Dashboard/Dashboard.Direccion.Services' |
|
||||||
import ReactApexChart from 'react-apexcharts' |
|
||||||
import { ApexOptions } from 'apexcharts' |
|
||||||
import DTOPedimentosCruzadosListaCliente from '../../DTO/Dashboard/DTOPedimentosCruzadosListaCliente' |
|
||||||
import DTOPedimentosCruzadosData from '../../DTO/Dashboard/DTOPedimentosCruzadosData' |
|
||||||
import { |
|
||||||
LineChart, |
|
||||||
Line, |
|
||||||
XAxis, |
|
||||||
YAxis, |
|
||||||
CartesianGrid, |
|
||||||
Tooltip, |
|
||||||
Legend, |
|
||||||
ResponsiveContainer, |
|
||||||
ComposedChart, |
|
||||||
Bar |
|
||||||
} from 'recharts' |
|
||||||
import { Chart } from 'react-google-charts' |
|
||||||
|
|
||||||
import { |
|
||||||
Chart as ChartJS, |
|
||||||
LinearScale, |
|
||||||
CategoryScale, |
|
||||||
BarElement, |
|
||||||
PointElement, |
|
||||||
LineElement, |
|
||||||
Legend as Legend6, |
|
||||||
Tooltip as Tooltip6, |
|
||||||
LineController, |
|
||||||
BarController |
|
||||||
} from 'chart.js' |
|
||||||
import { Chart as Chart6 } from 'react-chartjs-2' |
|
||||||
|
|
||||||
interface IProps {} |
|
||||||
|
|
||||||
interface IRechartsData { |
|
||||||
name: string |
|
||||||
uv: number |
|
||||||
pv: number |
|
||||||
amt: number |
|
||||||
} |
|
||||||
|
|
||||||
ChartJS.register( |
|
||||||
LinearScale, |
|
||||||
CategoryScale, |
|
||||||
BarElement, |
|
||||||
PointElement, |
|
||||||
LineElement, |
|
||||||
Legend6, |
|
||||||
Tooltip6, |
|
||||||
LineController, |
|
||||||
BarController |
|
||||||
) |
|
||||||
|
|
||||||
const DashboardDireccion: FC<IProps> = (props) => { |
|
||||||
const [Clientes, setClientes] = useState<DTOPedimentosCruzadosListaCliente[]>( |
|
||||||
[] |
|
||||||
) |
|
||||||
const [Data, setData] = useState<DTOPedimentosCruzadosData[]>([]) |
|
||||||
const [Cliente, setCliente] = useState('') |
|
||||||
const [IDCliente, setIDCliente] = useState(0) |
|
||||||
const [Pedimentos, setPedimentos] = useState<number[]>([]) |
|
||||||
const [Cruces, setCruces] = useState<number[]>([]) |
|
||||||
const [series, setSeries] = useState([ |
|
||||||
{ |
|
||||||
type: 'line', //render a line chart for this data
|
|
||||||
name: 'Pedimentos', |
|
||||||
data: [19, 22, 20, 26] |
|
||||||
}, |
|
||||||
{ |
|
||||||
type: 'column', //use column chart here.
|
|
||||||
name: 'Cruces', |
|
||||||
data: [103, 105, 98, 83] |
|
||||||
} |
|
||||||
]) |
|
||||||
const [options, setOptions] = useState<ApexOptions>({ |
|
||||||
xaxis: { |
|
||||||
categories: ['2022', '20022', '2023', '2023'] |
|
||||||
}, |
|
||||||
chart: { |
|
||||||
height: 100, |
|
||||||
type: 'line', |
|
||||||
zoom: { |
|
||||||
enabled: false |
|
||||||
} |
|
||||||
} |
|
||||||
}) |
|
||||||
const [series2, setSeries2] = useState([ |
|
||||||
{ |
|
||||||
name: 'series1', |
|
||||||
data: [31, 40, 28, 51, 42, 109, 100] |
|
||||||
}, |
|
||||||
{ |
|
||||||
name: 'series2', |
|
||||||
data: [11, 32, 45, 32, 34, 52, 41] |
|
||||||
} |
|
||||||
]) |
|
||||||
const [options2, setOptions2] = useState<ApexOptions>({ |
|
||||||
chart: { |
|
||||||
height: 350, |
|
||||||
type: 'area' |
|
||||||
}, |
|
||||||
dataLabels: { |
|
||||||
enabled: false |
|
||||||
}, |
|
||||||
stroke: { |
|
||||||
curve: 'smooth' |
|
||||||
}, |
|
||||||
xaxis: { |
|
||||||
categories: ['Ene', 'Feb', 'Mar', 'Abr', 'Marzo', 'Abr', 'May'] |
|
||||||
} |
|
||||||
}) |
|
||||||
const [series3, setSeries3] = useState([ |
|
||||||
{ |
|
||||||
name: 'series1', |
|
||||||
data: [31, 40, 28, 51, 42, 109, 100] |
|
||||||
}, |
|
||||||
{ |
|
||||||
name: 'series2', |
|
||||||
data: [11, 32, 45, 32, 34, 52, 41] |
|
||||||
} |
|
||||||
]) |
|
||||||
const [options3, setOptions3] = useState<ApexOptions>({ |
|
||||||
chart: { |
|
||||||
type: 'bar', |
|
||||||
height: 350 |
|
||||||
}, |
|
||||||
plotOptions: { |
|
||||||
bar: { |
|
||||||
horizontal: false, |
|
||||||
columnWidth: '55%' |
|
||||||
} |
|
||||||
}, |
|
||||||
dataLabels: { |
|
||||||
enabled: false |
|
||||||
}, |
|
||||||
stroke: { |
|
||||||
show: true, |
|
||||||
width: 2, |
|
||||||
colors: ['transparent'] |
|
||||||
}, |
|
||||||
xaxis: { |
|
||||||
categories: [ |
|
||||||
'Feb', |
|
||||||
'Mar', |
|
||||||
'Apr', |
|
||||||
'May', |
|
||||||
'Jun', |
|
||||||
'Jul', |
|
||||||
'Aug', |
|
||||||
'Sep', |
|
||||||
'Oct' |
|
||||||
] |
|
||||||
}, |
|
||||||
yaxis: { |
|
||||||
title: { |
|
||||||
text: '$ (thousands)' |
|
||||||
} |
|
||||||
}, |
|
||||||
fill: { |
|
||||||
opacity: 1 |
|
||||||
}, |
|
||||||
tooltip: { |
|
||||||
y: { |
|
||||||
formatter: function (val) { |
|
||||||
return '$ ' + val + ' thousands' |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
}) |
|
||||||
const [data4, setData4] = useState<IRechartsData[]>([ |
|
||||||
{ |
|
||||||
name: 'Page A', |
|
||||||
uv: 4000, |
|
||||||
pv: 2400, |
|
||||||
amt: 2400 |
|
||||||
}, |
|
||||||
{ |
|
||||||
name: 'Page B', |
|
||||||
uv: 3000, |
|
||||||
pv: 1398, |
|
||||||
amt: 2210 |
|
||||||
}, |
|
||||||
{ |
|
||||||
name: 'Page C', |
|
||||||
uv: 2000, |
|
||||||
pv: 9800, |
|
||||||
amt: 2290 |
|
||||||
} |
|
||||||
]) |
|
||||||
const [data5, setData5] = useState([ |
|
||||||
['Mes', 'Pedimentos', 'Cruces'], |
|
||||||
['2004/05', 165, 938], |
|
||||||
['2005/06', 135, 1120], |
|
||||||
['2006/07', 157, 1167], |
|
||||||
['2007/08', 139, 1110], |
|
||||||
['2008/09', 136, 691] |
|
||||||
]) |
|
||||||
const options5 = { |
|
||||||
title: '', |
|
||||||
vAxis: { title: '' }, |
|
||||||
hAxis: { title: 'Meses' }, |
|
||||||
seriesType: 'bars', |
|
||||||
series: { 1: { type: 'line' } }, |
|
||||||
colors: ['#1850D0', '70D63E'] |
|
||||||
} |
|
||||||
const [data6, setData6] = useState({ |
|
||||||
labels: ['January', 'February', 'March'], |
|
||||||
datasets: [ |
|
||||||
{ |
|
||||||
type: 'line' as const, |
|
||||||
label: 'Pedimentos', |
|
||||||
borderColor: '#1850D0', |
|
||||||
borderWidth: 2, |
|
||||||
fill: false, |
|
||||||
data: [1, 2, 3] |
|
||||||
}, |
|
||||||
{ |
|
||||||
type: 'bar' as const, |
|
||||||
label: 'Cruces', |
|
||||||
backgroundColor: '#70D63E', |
|
||||||
data: [8, 9, 10], |
|
||||||
borderColor: 'white', |
|
||||||
borderWidth: 2 |
|
||||||
} |
|
||||||
] |
|
||||||
}) |
|
||||||
|
|
||||||
const options6 = { |
|
||||||
indexAxis: 'x' as const, |
|
||||||
elements: { |
|
||||||
bar: { |
|
||||||
borderWidth: 2 |
|
||||||
} |
|
||||||
}, |
|
||||||
responsive: true |
|
||||||
} |
|
||||||
|
|
||||||
useEffect(() => { |
|
||||||
DashboardDS.GETPedimentosCruzadosListaCliente() |
|
||||||
.then((response) => { |
|
||||||
setClientes(response.data) |
|
||||||
}) |
|
||||||
.catch((e: Error) => { |
|
||||||
return |
|
||||||
}) |
|
||||||
}, []) |
|
||||||
|
|
||||||
useEffect(() => { |
|
||||||
if (Clientes.length > 0) setCustomer() |
|
||||||
}, [Clientes]) |
|
||||||
|
|
||||||
useEffect(() => { |
|
||||||
DashboardDS.GETPedimentosCruzadosData(IDCliente) |
|
||||||
.then((response) => { |
|
||||||
setData(response.data) |
|
||||||
let Pedimentos: number[] = [] |
|
||||||
let Cruces: number[] = [] |
|
||||||
let Categorias: string[] = [] |
|
||||||
let RechartsData: IRechartsData[] = [] |
|
||||||
let RGoogleChartData: Array<Array<string | number>> = [] |
|
||||||
RGoogleChartData.push(['Mes', 'Pedimentos', 'Cruces']) |
|
||||||
response.data.forEach(function (item) { |
|
||||||
Pedimentos.push(item.pedimentos) |
|
||||||
Cruces.push(item.despachos) |
|
||||||
Categorias.push(item.sMes) |
|
||||||
RechartsData.push({ |
|
||||||
name: item.sMes, |
|
||||||
pv: item.pedimentos, |
|
||||||
uv: item.despachos, |
|
||||||
amt: 1 |
|
||||||
}) |
|
||||||
RGoogleChartData.push([item.sMes, item.pedimentos, item.despachos]) |
|
||||||
}) |
|
||||||
setData6({ |
|
||||||
labels: Categorias, |
|
||||||
datasets: [ |
|
||||||
{ |
|
||||||
type: 'line' as const, |
|
||||||
label: 'Pedimentos', |
|
||||||
borderColor: '#1850D0', |
|
||||||
borderWidth: 2, |
|
||||||
fill: false, |
|
||||||
data: Pedimentos |
|
||||||
}, |
|
||||||
{ |
|
||||||
type: 'bar' as const, |
|
||||||
label: 'Cruces', |
|
||||||
backgroundColor: '#70D63E', |
|
||||||
data: Cruces, |
|
||||||
borderColor: 'white', |
|
||||||
borderWidth: 2 |
|
||||||
} |
|
||||||
] |
|
||||||
}) |
|
||||||
setData5(RGoogleChartData) |
|
||||||
setData4(RechartsData) |
|
||||||
setSeries([ |
|
||||||
{ |
|
||||||
type: 'line', //render a line chart for this data
|
|
||||||
name: 'Pedimentos', |
|
||||||
data: Pedimentos |
|
||||||
}, |
|
||||||
{ |
|
||||||
type: 'column', //use column chart here.
|
|
||||||
name: 'Cruces', |
|
||||||
data: Cruces |
|
||||||
} |
|
||||||
]) |
|
||||||
setOptions({ |
|
||||||
xaxis: { |
|
||||||
categories: Categorias |
|
||||||
}, |
|
||||||
chart: { |
|
||||||
height: 100, |
|
||||||
type: 'line', |
|
||||||
zoom: { |
|
||||||
enabled: false |
|
||||||
} |
|
||||||
} |
|
||||||
}) |
|
||||||
|
|
||||||
setSeries2([ |
|
||||||
{ |
|
||||||
name: 'Pedimentos', |
|
||||||
data: Pedimentos |
|
||||||
}, |
|
||||||
{ |
|
||||||
name: 'Cruces', |
|
||||||
data: Cruces |
|
||||||
} |
|
||||||
]) |
|
||||||
setOptions2({ |
|
||||||
xaxis: { |
|
||||||
categories: Categorias |
|
||||||
}, |
|
||||||
chart: { |
|
||||||
height: 100, |
|
||||||
type: 'line', |
|
||||||
zoom: { |
|
||||||
enabled: false |
|
||||||
} |
|
||||||
} |
|
||||||
}) |
|
||||||
}) |
|
||||||
.catch((e: Error) => { |
|
||||||
return |
|
||||||
}) |
|
||||||
}, [IDCliente]) |
|
||||||
|
|
||||||
const setCustomer = () => { |
|
||||||
console.log('entro al proceso de set customer') |
|
||||||
let idx = Math.floor(Math.random() * Clientes.length) |
|
||||||
for (var c = 0; c < Clientes.length; c++) { |
|
||||||
if (idx == c) { |
|
||||||
setIDCliente(Clientes[idx].id) |
|
||||||
setCliente(Clientes[idx].razonSocial) |
|
||||||
break |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
return ( |
|
||||||
<> |
|
||||||
<Col> |
|
||||||
<Card style={{ width: '18rem' }} className="dashboardComponentFont"> |
|
||||||
<Card.Header style={{ backgroundColor: '#1D6DC2', color: '#ffffff' }}> |
|
||||||
Dirección |
|
||||||
</Card.Header> |
|
||||||
<Card.Body style={{ paddingBottom: '0px' }}> |
|
||||||
<Card.Title> |
|
||||||
{Cliente} |
|
||||||
<br /> |
|
||||||
<br /> |
|
||||||
</Card.Title> |
|
||||||
<div style={{ fontSize: '6em' }} className="text-center"> |
|
||||||
<Chart6 |
|
||||||
type="bar" |
|
||||||
data={data6} |
|
||||||
options={options6} |
|
||||||
width="30%" |
|
||||||
height="25%" |
|
||||||
/> |
|
||||||
</div> |
|
||||||
</Card.Body> |
|
||||||
<Card.Footer style={{ paddingRight: '5px' }}> |
|
||||||
<Link |
|
||||||
to="../RptPedimentosCruces01" |
|
||||||
style={{ |
|
||||||
textDecoration: 'none', |
|
||||||
float: 'right', |
|
||||||
paddingRight: '10px' |
|
||||||
}} |
|
||||||
> |
|
||||||
Ver mas... |
|
||||||
</Link> |
|
||||||
</Card.Footer> |
|
||||||
</Card> |
|
||||||
</Col> |
|
||||||
<Col> |
|
||||||
<Card style={{ width: '18rem' }} className="dashboardComponentFont"> |
|
||||||
<Card.Header style={{ backgroundColor: '#1D6DC2', color: '#ffffff' }}> |
|
||||||
Dirección |
|
||||||
</Card.Header> |
|
||||||
<Card.Body style={{ paddingBottom: '50px' }}> |
|
||||||
<Card.Title> |
|
||||||
{Cliente} |
|
||||||
<br /> |
|
||||||
<br /> |
|
||||||
</Card.Title> |
|
||||||
<div style={{ fontSize: '6em' }} className="text-center"> |
|
||||||
<ReactApexChart options={options} series={series} /> |
|
||||||
</div> |
|
||||||
</Card.Body> |
|
||||||
<Card.Footer style={{ paddingRight: '5px' }}> |
|
||||||
<Link |
|
||||||
to="../RptPedimentosCruces02" |
|
||||||
style={{ |
|
||||||
textDecoration: 'none', |
|
||||||
float: 'right', |
|
||||||
paddingRight: '10px' |
|
||||||
}} |
|
||||||
> |
|
||||||
Ver mas... |
|
||||||
</Link> |
|
||||||
</Card.Footer> |
|
||||||
</Card> |
|
||||||
</Col> |
|
||||||
<Col> |
|
||||||
<Card style={{ width: '18rem' }} className="dashboardComponentFont"> |
|
||||||
<Card.Header style={{ backgroundColor: '#1D6DC2', color: '#ffffff' }}> |
|
||||||
Dirección |
|
||||||
</Card.Header> |
|
||||||
<Card.Body style={{ paddingBottom: '50px' }}> |
|
||||||
<Card.Title> |
|
||||||
{Cliente} |
|
||||||
<br /> |
|
||||||
<br /> |
|
||||||
</Card.Title> |
|
||||||
<div style={{ fontSize: '6em' }} className="text-center"> |
|
||||||
<ReactApexChart options={options2} series={series2} type="area" /> |
|
||||||
</div> |
|
||||||
</Card.Body> |
|
||||||
<Card.Footer style={{ paddingRight: '5px' }}> |
|
||||||
<Link |
|
||||||
to="../RptPedimentosCruces03" |
|
||||||
style={{ |
|
||||||
textDecoration: 'none', |
|
||||||
float: 'right', |
|
||||||
paddingRight: '10px' |
|
||||||
}} |
|
||||||
> |
|
||||||
Ver mas... |
|
||||||
</Link> |
|
||||||
</Card.Footer> |
|
||||||
</Card> |
|
||||||
</Col> |
|
||||||
<Col> |
|
||||||
<Card style={{ width: '18rem' }} className="dashboardComponentFont"> |
|
||||||
<Card.Header style={{ backgroundColor: '#1D6DC2', color: '#ffffff' }}> |
|
||||||
Dirección |
|
||||||
</Card.Header> |
|
||||||
<Card.Body style={{ paddingBottom: '50px' }}> |
|
||||||
<Card.Title> |
|
||||||
{Cliente} |
|
||||||
<br /> |
|
||||||
<br /> |
|
||||||
</Card.Title> |
|
||||||
<div style={{ fontSize: '6em' }} className="text-center"> |
|
||||||
<ReactApexChart options={options2} series={series2} type="bar" /> |
|
||||||
</div> |
|
||||||
</Card.Body> |
|
||||||
<Card.Footer style={{ paddingRight: '5px' }}> |
|
||||||
<Link |
|
||||||
to="../RptPedimentosCruces04" |
|
||||||
style={{ |
|
||||||
textDecoration: 'none', |
|
||||||
float: 'right', |
|
||||||
paddingRight: '10px' |
|
||||||
}} |
|
||||||
> |
|
||||||
Ver mas... |
|
||||||
</Link> |
|
||||||
</Card.Footer> |
|
||||||
</Card> |
|
||||||
</Col> |
|
||||||
<Col> |
|
||||||
<Card style={{ width: '18rem' }} className="dashboardComponentFont"> |
|
||||||
<Card.Header style={{ backgroundColor: '#1D6DC2', color: '#ffffff' }}> |
|
||||||
Dirección |
|
||||||
</Card.Header> |
|
||||||
<Card.Body style={{ paddingBottom: '50px' }}> |
|
||||||
<Card.Title> |
|
||||||
{Cliente} |
|
||||||
<br /> |
|
||||||
<br /> |
|
||||||
</Card.Title> |
|
||||||
<ComposedChart |
|
||||||
width={250} |
|
||||||
height={170} |
|
||||||
data={data4} |
|
||||||
margin={{ |
|
||||||
top: 20, |
|
||||||
right: 20, |
|
||||||
bottom: 20, |
|
||||||
left: 20 |
|
||||||
}} |
|
||||||
> |
|
||||||
<CartesianGrid stroke="#f5f5f5" /> |
|
||||||
<XAxis dataKey="name" /> |
|
||||||
<YAxis /> |
|
||||||
<Tooltip /> |
|
||||||
<Legend /> |
|
||||||
<Bar dataKey="pv" barSize={20} fill="#1850D0" name="Pedimentos" /> |
|
||||||
<Line |
|
||||||
type="monotone" |
|
||||||
dataKey="uv" |
|
||||||
stroke="#70D63E" |
|
||||||
name="Cruces" |
|
||||||
/> |
|
||||||
</ComposedChart> |
|
||||||
</Card.Body> |
|
||||||
<Card.Footer style={{ paddingRight: '5px' }}> |
|
||||||
<Link |
|
||||||
to="../RptPedimentosCruces05" |
|
||||||
style={{ |
|
||||||
textDecoration: 'none', |
|
||||||
float: 'right', |
|
||||||
paddingRight: '10px' |
|
||||||
}} |
|
||||||
> |
|
||||||
Ver mas... |
|
||||||
</Link> |
|
||||||
</Card.Footer> |
|
||||||
</Card> |
|
||||||
</Col> |
|
||||||
<Col> |
|
||||||
<Card style={{ width: '18rem' }} className="dashboardComponentFont"> |
|
||||||
<Card.Header style={{ backgroundColor: '#1D6DC2', color: '#ffffff' }}> |
|
||||||
Dirección |
|
||||||
</Card.Header> |
|
||||||
<Card.Body style={{ paddingBottom: '50px' }}> |
|
||||||
<Card.Title> |
|
||||||
{Cliente} |
|
||||||
<br /> |
|
||||||
<br /> |
|
||||||
</Card.Title> |
|
||||||
<Chart |
|
||||||
chartType="ComboChart" |
|
||||||
width="100%" |
|
||||||
height="170px" |
|
||||||
data={data5} |
|
||||||
options={options5} |
|
||||||
/> |
|
||||||
</Card.Body> |
|
||||||
<Card.Footer style={{ paddingRight: '5px' }}> |
|
||||||
<Link |
|
||||||
to="../RptPedimentosCruces06" |
|
||||||
style={{ |
|
||||||
textDecoration: 'none', |
|
||||||
float: 'right', |
|
||||||
paddingRight: '10px' |
|
||||||
}} |
|
||||||
> |
|
||||||
Ver mas... |
|
||||||
</Link> |
|
||||||
</Card.Footer> |
|
||||||
</Card> |
|
||||||
</Col> |
|
||||||
</> |
|
||||||
) |
|
||||||
} |
|
||||||
|
|
||||||
export default DashboardDireccion |
|
||||||
@ -1,125 +0,0 @@ |
|||||||
import { useEffect, useState } from 'react' |
|
||||||
import { Button, Card, Col, Row } from 'react-bootstrap' |
|
||||||
import DataTable from 'react-data-table-component' |
|
||||||
import IConsolidadosSinFirmaBanco from '../../../../Interfaces/Facturacion/Anexo/IConsolidadosSinFirmaBanco' |
|
||||||
import DSOperaciones from '../../../../Services/Operaciones/Operaciones.Services' |
|
||||||
import * as XLSX from 'xlsx' |
|
||||||
import { BsFileEarmarkExcel } from 'react-icons/bs' |
|
||||||
|
|
||||||
export interface IRtpConsolidadosSinFirmaBancoProps {} |
|
||||||
|
|
||||||
export default function RtpConsolidadosSinFirmaBanco( |
|
||||||
props: IRtpConsolidadosSinFirmaBancoProps |
|
||||||
) { |
|
||||||
const [Data, setData] = useState<IConsolidadosSinFirmaBanco[]>([]) |
|
||||||
const [Total, setTotal] = useState(0) |
|
||||||
const columnsConcepts = [ |
|
||||||
{ |
|
||||||
name: 'Referencia', |
|
||||||
width: '150px', |
|
||||||
cell: (row: IConsolidadosSinFirmaBanco) => row.referencia, |
|
||||||
sortable: true |
|
||||||
}, |
|
||||||
{ |
|
||||||
name: 'Fecha Pago', |
|
||||||
width: '250px', |
|
||||||
cell: (row: IConsolidadosSinFirmaBanco) => row.fechaPago, |
|
||||||
sortable: true |
|
||||||
}, |
|
||||||
{ |
|
||||||
name: 'Fecha Validacion', |
|
||||||
width: '250px', |
|
||||||
cell: (row: IConsolidadosSinFirmaBanco) => row.firmaValidacion, |
|
||||||
sortable: true |
|
||||||
}, |
|
||||||
{ |
|
||||||
name: 'Firma Banco', |
|
||||||
with: '250px', |
|
||||||
cell: (row: IConsolidadosSinFirmaBanco) => row.firmaBanco, |
|
||||||
sortable: true |
|
||||||
} |
|
||||||
] |
|
||||||
|
|
||||||
const downloadExcel = () => { |
|
||||||
exportExcel(Data, 'Consolidados sin firma de banco') |
|
||||||
} |
|
||||||
|
|
||||||
function exportExcel(jsonData: any[], fileName: string): void { |
|
||||||
let Heading = [ |
|
||||||
['Referencia', 'FechaPago', 'Fecha Validacion', 'Firma Banco'] |
|
||||||
] |
|
||||||
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() |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
const generaReporte = () => { |
|
||||||
DSOperaciones.OperacionesSinFirmaBancoGet() |
|
||||||
.then((response) => { |
|
||||||
setData(response.data) |
|
||||||
setTotal(response.data.length) |
|
||||||
}) |
|
||||||
.catch((e: Error) => { |
|
||||||
console.log(e) |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
useEffect(() => { |
|
||||||
generaReporte() |
|
||||||
}, []) |
|
||||||
|
|
||||||
return ( |
|
||||||
<div> |
|
||||||
<Card> |
|
||||||
<Card.Body> |
|
||||||
<Card.Title> |
|
||||||
<Row> |
|
||||||
<Col xs={3}>Consolidados sin firma banco : {Total} registros</Col> |
|
||||||
<Col xs={8}></Col> |
|
||||||
<Col xs={1} className="colAlignRight"> |
|
||||||
<Button |
|
||||||
size="sm" |
|
||||||
variant="success" |
|
||||||
onClick={() => { |
|
||||||
downloadExcel() |
|
||||||
}} |
|
||||||
> |
|
||||||
<BsFileEarmarkExcel /> |
|
||||||
Excel |
|
||||||
</Button> |
|
||||||
</Col> |
|
||||||
</Row> |
|
||||||
</Card.Title> |
|
||||||
<Row> |
|
||||||
<Col xs={12}> |
|
||||||
<DataTable |
|
||||||
dense |
|
||||||
noHeader |
|
||||||
defaultSortFieldId={'cliente'} |
|
||||||
defaultSortAsc={true} |
|
||||||
fixedHeaderScrollHeight="550px" |
|
||||||
striped={true} |
|
||||||
fixedHeader |
|
||||||
/* paginationPerPage={10} |
|
||||||
pagination */ |
|
||||||
highlightOnHover |
|
||||||
columns={columnsConcepts} |
|
||||||
data={Data} |
|
||||||
pointerOnHover |
|
||||||
/> |
|
||||||
</Col> |
|
||||||
</Row> |
|
||||||
</Card.Body> |
|
||||||
</Card> |
|
||||||
</div> |
|
||||||
) |
|
||||||
} |
|
||||||
@ -1,177 +0,0 @@ |
|||||||
import * as React from 'react' |
|
||||||
import { Button, Card, Col, Form, Row } from 'react-bootstrap' |
|
||||||
import logo from '../../images/GEMCO.png' |
|
||||||
import { MsgInformativo } from '../Utils/Toast/msgInformativo' |
|
||||||
import ReactCaptchaa from 'react-captchaa' |
|
||||||
import AuthDS from '../../Services/Auth/Auth.Service' |
|
||||||
import 'react-captchaa/dist/index.css' |
|
||||||
import '../../css/reactCaptcha.css' |
|
||||||
import ILogin from '../../Interfaces/Ilogin' |
|
||||||
import { AxiosError } from 'axios' |
|
||||||
import { useNavigate } from 'react-router-dom' |
|
||||||
import { useState } from 'react' |
|
||||||
|
|
||||||
export interface IForgotPasswordProps {} |
|
||||||
|
|
||||||
export default function ForgotPassword(props: IForgotPasswordProps) { |
|
||||||
const navigate = useNavigate() |
|
||||||
const [Usuario, setUsuario] = useState('') |
|
||||||
const [Contrasenia, setContrasenia] = useState('') |
|
||||||
const [Captcha, setCaptcha] = useState('') |
|
||||||
const [CaptchaText, setCaptchaText] = useState('') |
|
||||||
const [show, setShow] = useState(false) |
|
||||||
const [msg, setMsg] = useState('') |
|
||||||
const [header, setHeader] = useState('') |
|
||||||
const [msgColor, setMsgColor] = useState('primary') |
|
||||||
|
|
||||||
const validateCaptcha = () => { |
|
||||||
if (!Usuario.length) { |
|
||||||
setShow(true) |
|
||||||
setMsg('El campo usuario no puede estar vacio') |
|
||||||
setHeader('Error') |
|
||||||
return |
|
||||||
} |
|
||||||
if (Captcha !== CaptchaText) { |
|
||||||
setShow(true) |
|
||||||
setMsg('Captcha o usuario incorrecto') |
|
||||||
setHeader('Error') |
|
||||||
return |
|
||||||
} |
|
||||||
const data: ILogin = { |
|
||||||
Usuario: Usuario, |
|
||||||
Contrasena: Contrasenia, |
|
||||||
} |
|
||||||
AuthDS.forgotPassword(data) |
|
||||||
.then((response: any) => { |
|
||||||
localStorage.setItem('User', JSON.stringify(Usuario)) |
|
||||||
navigate('/PIN') |
|
||||||
}) |
|
||||||
.catch((e: AxiosError) => { |
|
||||||
setShow(true) |
|
||||||
setMsg('Usuario no existe') |
|
||||||
setHeader('Error') |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
return ( |
|
||||||
<div> |
|
||||||
<Row style={{ paddingTop: '6rem' }}> |
|
||||||
<Col xs={12}></Col> |
|
||||||
</Row> |
|
||||||
<Row> |
|
||||||
<Col xs={5}> </Col> |
|
||||||
<Col xs={2}> |
|
||||||
<div |
|
||||||
className='shadow-lg bg-white rounded' |
|
||||||
style={{ marginLeft: 'auto', marginRight: 'auto', width:'125%' }} |
|
||||||
> |
|
||||||
<Card className='Color1'> |
|
||||||
<Card.Header> |
|
||||||
<Row> |
|
||||||
<Col xs={4}></Col> |
|
||||||
<Col xs={4}> |
|
||||||
<img |
|
||||||
src={logo} |
|
||||||
alt='GEMCO' |
|
||||||
style={{ width: '80%', textAlign: 'center' }} |
|
||||||
></img> |
|
||||||
</Col> |
|
||||||
<Col xs={4}></Col> |
|
||||||
</Row> |
|
||||||
</Card.Header> |
|
||||||
<Card.Body> |
|
||||||
<Card.Text> |
|
||||||
<Row> |
|
||||||
<Col xs={12}> </Col> |
|
||||||
</Row> |
|
||||||
<Form id='login-form' className='form'> |
|
||||||
<Row> |
|
||||||
<Col> |
|
||||||
<Form.Control |
|
||||||
id='Usuario' |
|
||||||
className='form-control' |
|
||||||
placeholder='Usuario' |
|
||||||
value={Usuario} |
|
||||||
onChange={(e) => { |
|
||||||
setUsuario(e.target.value) |
|
||||||
}} |
|
||||||
/> |
|
||||||
</Col> |
|
||||||
</Row> |
|
||||||
<Row> |
|
||||||
<Col xs={12}> </Col> |
|
||||||
</Row> |
|
||||||
<Row> |
|
||||||
<Col xs={12}> |
|
||||||
<ReactCaptchaa |
|
||||||
captchaText={(captchaText: string) => { |
|
||||||
setCaptchaText(captchaText) |
|
||||||
}} |
|
||||||
captchaLength={6} |
|
||||||
captchaButtonClick={(e: any) => {}} |
|
||||||
onCanvasClick={(e: any) => {}} |
|
||||||
height={150} |
|
||||||
width={200} |
|
||||||
iconName={'FiRefreshCw'} |
|
||||||
iconColor={'#fff'} |
|
||||||
fontSize={'3em'} |
|
||||||
iconSize={'1em'} |
|
||||||
containerClassName={'react-captcha'} |
|
||||||
iconWrapperClassName={'react-captcha-icon-wrapper'} |
|
||||||
canvasClassName={'react-captcha-canvas'} |
|
||||||
iconClassName={'react-captcha-icon'} |
|
||||||
charactersInclude={ |
|
||||||
'0123456789abcdefghijklmnopqrstuvwxzABCDEFGHIJKLMNOPQRSTUVWXYZ' |
|
||||||
} |
|
||||||
/> |
|
||||||
</Col> |
|
||||||
</Row> |
|
||||||
<Row> |
|
||||||
<Col xs={12}> |
|
||||||
<Form.Control |
|
||||||
id='Captcha' |
|
||||||
className='form-control' |
|
||||||
placeholder='Teclee los caracteres de la imagen' |
|
||||||
value={Captcha} |
|
||||||
onChange={(e) => { |
|
||||||
setCaptcha(e.target.value) |
|
||||||
}} |
|
||||||
/> |
|
||||||
</Col> |
|
||||||
</Row> |
|
||||||
<Row> |
|
||||||
<Col xs={12}> </Col> |
|
||||||
</Row> |
|
||||||
</Form> |
|
||||||
</Card.Text> |
|
||||||
<div className='d-grid gap-1'></div> |
|
||||||
<div className='d-grid gap-1'> |
|
||||||
<Button |
|
||||||
variant='customColor' |
|
||||||
size='lg' |
|
||||||
onClick={() => { |
|
||||||
validateCaptcha() |
|
||||||
}} |
|
||||||
> |
|
||||||
Continuar |
|
||||||
</Button> |
|
||||||
</div> |
|
||||||
</Card.Body> |
|
||||||
</Card> |
|
||||||
</div> |
|
||||||
</Col> |
|
||||||
<Col xs={5}> </Col> |
|
||||||
</Row> |
|
||||||
<MsgInformativo |
|
||||||
show={show} |
|
||||||
msg={msg} |
|
||||||
header={header} |
|
||||||
msgColor={msgColor} |
|
||||||
time={2000} |
|
||||||
closeToast={function (arg: boolean): void { |
|
||||||
setShow(false) |
|
||||||
}} |
|
||||||
/> |
|
||||||
</div> |
|
||||||
) |
|
||||||
} |
|
||||||
@ -1,128 +0,0 @@ |
|||||||
import * as React from 'react' |
|
||||||
import { Button, Card, Col, Form, Row } from 'react-bootstrap' |
|
||||||
import logo from '../../images/GEMCO.png' |
|
||||||
import { MsgInformativo } from '../Utils/Toast/msgInformativo' |
|
||||||
import AuthDS from '../../Services/Auth/Auth.Service' |
|
||||||
import { useState } from 'react' |
|
||||||
import { DTOPINUsuario } from '../../DTO/DTOPINUsuario' |
|
||||||
import { useNavigate } from 'react-router-dom' |
|
||||||
|
|
||||||
export interface IPINProps {} |
|
||||||
|
|
||||||
export default function PIN(props: IPINProps) { |
|
||||||
const navigate = useNavigate() |
|
||||||
const [User, setUser] = useState(() => { |
|
||||||
const stickyValue = window.localStorage.getItem('User') |
|
||||||
return stickyValue !== null ? JSON.parse(stickyValue) : '' |
|
||||||
}) |
|
||||||
const [Usuario, setUsuario] = useState(User) |
|
||||||
const [PIN, setPIN] = useState('') |
|
||||||
const [show, setShow] = useState(false) |
|
||||||
const [msg, setMsg] = useState('') |
|
||||||
const [header, setHeader] = useState('') |
|
||||||
const [msgColor, setMsgColor] = useState('primary') |
|
||||||
|
|
||||||
const validatePIN = () => { |
|
||||||
if (!PIN.length) { |
|
||||||
setShow(true) |
|
||||||
setMsg('El campo PIN no puede estar vacio') |
|
||||||
setHeader('Error') |
|
||||||
return false |
|
||||||
} |
|
||||||
const data: DTOPINUsuario = { |
|
||||||
pin: parseInt(PIN), |
|
||||||
usuario: Usuario |
|
||||||
} |
|
||||||
console.log(JSON.stringify(data)) |
|
||||||
AuthDS.validatePIN(data) |
|
||||||
.then((response: any) => { |
|
||||||
localStorage.removeItem('User') |
|
||||||
localStorage.setItem('PIN', PIN) |
|
||||||
navigate('/Reset') |
|
||||||
}) |
|
||||||
.catch((e: any) => { |
|
||||||
setShow(true) |
|
||||||
setMsg('PIN invalido!') |
|
||||||
setHeader('Error') |
|
||||||
return false |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
return ( |
|
||||||
<div> |
|
||||||
<Row style={{ paddingTop: '6rem' }}> |
|
||||||
<Col xs={12}></Col> |
|
||||||
</Row> |
|
||||||
<Row> |
|
||||||
<Col xs={5}> </Col> |
|
||||||
<Col xs={2}> |
|
||||||
<div className="shadow-lg bg-white rounded"> |
|
||||||
<Card style={{ width: '135%' }} className="Color1"> |
|
||||||
<Card.Header> |
|
||||||
<Row> |
|
||||||
<Col xs={4}></Col> |
|
||||||
<Col xs={4}> |
|
||||||
<img |
|
||||||
src={logo} |
|
||||||
alt="GEMCO" |
|
||||||
style={{ width: '80%', textAlign: 'center' }} |
|
||||||
/> |
|
||||||
</Col> |
|
||||||
<Col xs={4}></Col> |
|
||||||
</Row> |
|
||||||
</Card.Header> |
|
||||||
<Card.Body> |
|
||||||
<Card.Text> |
|
||||||
<Row> |
|
||||||
<Col xs={12}> </Col> |
|
||||||
</Row> |
|
||||||
<Form id="login-form" className="form"> |
|
||||||
<Row> |
|
||||||
<Col xs={12}> |
|
||||||
<Form.Control |
|
||||||
id="PIN" |
|
||||||
className="form-control" |
|
||||||
placeholder="PIN" |
|
||||||
value={PIN} |
|
||||||
onChange={(e) => { |
|
||||||
setPIN(e.target.value) |
|
||||||
}} |
|
||||||
/> |
|
||||||
</Col> |
|
||||||
</Row> |
|
||||||
<Row> |
|
||||||
<Col xs={12}> </Col> |
|
||||||
</Row> |
|
||||||
</Form> |
|
||||||
</Card.Text> |
|
||||||
<div className="d-grid gap-1"></div> |
|
||||||
<div className="d-grid gap-1"> |
|
||||||
<Button |
|
||||||
variant="customColor" |
|
||||||
size="lg" |
|
||||||
onClick={() => { |
|
||||||
validatePIN() |
|
||||||
}} |
|
||||||
> |
|
||||||
Continuar |
|
||||||
</Button> |
|
||||||
</div> |
|
||||||
</Card.Body> |
|
||||||
</Card> |
|
||||||
</div> |
|
||||||
</Col> |
|
||||||
<Col xs={5}> </Col> |
|
||||||
</Row> |
|
||||||
<MsgInformativo |
|
||||||
show={show} |
|
||||||
msg={msg} |
|
||||||
header={header} |
|
||||||
msgColor={msgColor} |
|
||||||
time={2000} |
|
||||||
closeToast={function (arg: boolean): void { |
|
||||||
setShow(false) |
|
||||||
}} |
|
||||||
/> |
|
||||||
</div> |
|
||||||
) |
|
||||||
} |
|
||||||
@ -1,200 +0,0 @@ |
|||||||
import React, { FC, useState } from 'react' |
|
||||||
import { |
|
||||||
Button, |
|
||||||
Card, |
|
||||||
Col, |
|
||||||
Form, |
|
||||||
Row, |
|
||||||
Toast, |
|
||||||
ToastContainer, |
|
||||||
} from 'react-bootstrap' |
|
||||||
import { MsgInformativo } from '../Utils/Toast/msgInformativo' |
|
||||||
import DTOUsuario from '../../DTO/DTOUsuario' |
|
||||||
import logo from '../../images/GEMCO.png' |
|
||||||
import AuthDS from '../../Services/Auth/Auth.Service' |
|
||||||
import { DTOResetPassword } from '../../DTO/DTOResetPassword' |
|
||||||
|
|
||||||
interface IProps {} |
|
||||||
|
|
||||||
export default function ResetCredentials(props: IProps) { |
|
||||||
const [User, setUser] = useState(() => { |
|
||||||
const stickyValue = window.localStorage.getItem('User') |
|
||||||
return stickyValue !== null ? JSON.parse(stickyValue) : '' |
|
||||||
}) |
|
||||||
const [PIN, setPIN] = useState(() => { |
|
||||||
const stickyValue = window.localStorage.getItem('PIN') |
|
||||||
return stickyValue !== null ? JSON.parse(stickyValue) : '' |
|
||||||
}) |
|
||||||
const [header, setHeader] = useState('Error!') |
|
||||||
const [msgColor, setMsgColor] = useState('primary') |
|
||||||
const [showMsg, setShowMsg] = useState(false) |
|
||||||
const [msg, setMsg] = useState('') |
|
||||||
const [Usuario, setUsuario] = useState(User) |
|
||||||
const [Contrasena, setContrasena] = useState('') |
|
||||||
const [ConfirmaContrasena, setConfirmaContrasena] = useState('') |
|
||||||
const [show, setShow] = useState(false) |
|
||||||
|
|
||||||
const validaFormulario = () => { |
|
||||||
if (Contrasena.length===0 || ConfirmaContrasena.length===0) { |
|
||||||
setShow(true) |
|
||||||
setMsg('La contraseña no puede estar vacia!') |
|
||||||
setHeader('Error') |
|
||||||
return |
|
||||||
} |
|
||||||
if (Contrasena !== ConfirmaContrasena) { |
|
||||||
setShow(true) |
|
||||||
setMsg('Contraseña no coincide con la confirmacion!') |
|
||||||
setHeader('Error') |
|
||||||
return |
|
||||||
} |
|
||||||
const data: DTOResetPassword = { |
|
||||||
pin: PIN, |
|
||||||
contrasena: Contrasena, |
|
||||||
} |
|
||||||
AuthDS.resetPassword(data) |
|
||||||
.then((response) => { |
|
||||||
if (response.status == 200) { |
|
||||||
setShow(true) |
|
||||||
setMsg('La contraseña se cambio exitosamente!') |
|
||||||
setHeader('Confirmacion') |
|
||||||
return false |
|
||||||
} |
|
||||||
}) |
|
||||||
.catch((e: Error) => { |
|
||||||
setShow(true) |
|
||||||
setMsg('Ocurrio un error') |
|
||||||
setHeader('Error') |
|
||||||
return false |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
const closeToast = (show: boolean): void => { |
|
||||||
setShowMsg(false) |
|
||||||
} |
|
||||||
|
|
||||||
return ( |
|
||||||
<div> |
|
||||||
<div> |
|
||||||
<Row style={{ paddingTop: '6rem' }}> |
|
||||||
<Col xs={12}></Col> |
|
||||||
</Row> |
|
||||||
<Row> |
|
||||||
<Col xs={5}> </Col> |
|
||||||
<Col xs={2}> |
|
||||||
<div className='shadow-lg bg-white rounded'> |
|
||||||
<Card style={{ width: '100%' }} className='Color1'> |
|
||||||
<Card.Header> |
|
||||||
<Row> |
|
||||||
<Col xs={4}></Col> |
|
||||||
<Col xs={4}> |
|
||||||
<img |
|
||||||
src={logo} |
|
||||||
alt="GEMCO" |
|
||||||
style={{ width: '80%', textAlign: 'center' }} |
|
||||||
/> |
|
||||||
</Col> |
|
||||||
<Col xs={4}></Col> |
|
||||||
</Row> |
|
||||||
</Card.Header> |
|
||||||
<Card.Body> |
|
||||||
<Card.Text> |
|
||||||
<Row |
|
||||||
style={{ |
|
||||||
backgroundColor: '#002f87', |
|
||||||
color: '#ffffff', |
|
||||||
fontSize: '17px', |
|
||||||
textAlign: 'center' |
|
||||||
}} |
|
||||||
> |
|
||||||
<Col xs={12}>Proporcione su nueva contraseña</Col> |
|
||||||
</Row> |
|
||||||
<Row> |
|
||||||
<Col xs={12}> </Col> |
|
||||||
</Row> |
|
||||||
<Form id='login-form' className='form'> |
|
||||||
<Row style={{ height: '0px' }}> |
|
||||||
<Col> |
|
||||||
<Form.Control |
|
||||||
style={{ visibility: 'hidden' }} |
|
||||||
id='PIN' |
|
||||||
className='form-control' |
|
||||||
placeholder='PIN' |
|
||||||
value={PIN} |
|
||||||
/> |
|
||||||
</Col> |
|
||||||
</Row> |
|
||||||
<Row> |
|
||||||
<Col xs={12}> |
|
||||||
<Form.Control |
|
||||||
id='Contrasena' |
|
||||||
className='form-control' |
|
||||||
placeholder='Contraseña' |
|
||||||
type='password' |
|
||||||
value={Contrasena} |
|
||||||
onChange={(e) => { |
|
||||||
setContrasena(e.target.value) |
|
||||||
}} |
|
||||||
/> |
|
||||||
</Col> |
|
||||||
</Row> |
|
||||||
<Row> |
|
||||||
<Col xs={12}> </Col> |
|
||||||
</Row> |
|
||||||
<Row> |
|
||||||
<Col xs={12}> |
|
||||||
<Form.Control |
|
||||||
id='Contrasena' |
|
||||||
className='form-control' |
|
||||||
placeholder='Confirme contraseña' |
|
||||||
type='password' |
|
||||||
value={ConfirmaContrasena} |
|
||||||
onChange={(e) => { |
|
||||||
setConfirmaContrasena(e.target.value) |
|
||||||
}} |
|
||||||
/> |
|
||||||
</Col> |
|
||||||
</Row> |
|
||||||
<Row> |
|
||||||
<Col xs={12}> </Col> |
|
||||||
</Row> |
|
||||||
</Form> |
|
||||||
</Card.Text> |
|
||||||
<div className='d-grid gap-2'> |
|
||||||
<Button |
|
||||||
variant='customColor' |
|
||||||
size='lg' |
|
||||||
onClick={() => { |
|
||||||
validaFormulario() |
|
||||||
}} |
|
||||||
> |
|
||||||
reset |
|
||||||
</Button> |
|
||||||
</div> |
|
||||||
</Card.Body> |
|
||||||
</Card> |
|
||||||
</div> |
|
||||||
</Col> |
|
||||||
<Col xs={5}> </Col> |
|
||||||
</Row> |
|
||||||
<MsgInformativo |
|
||||||
show={show} |
|
||||||
msg={msg} |
|
||||||
time={2000} |
|
||||||
header={header} |
|
||||||
msgColor={msgColor} |
|
||||||
closeToast={function (arg: boolean): void { |
|
||||||
setShow(false) |
|
||||||
}} |
|
||||||
/> |
|
||||||
</div> |
|
||||||
{/* <MsgInformativo |
|
||||||
show={showMsg} |
|
||||||
time={2000} |
|
||||||
msg={msg} |
|
||||||
header={header} |
|
||||||
msgColor={msgColor} |
|
||||||
closeToast={closeToast} |
|
||||||
/> */} |
|
||||||
</div> |
|
||||||
) |
|
||||||
} |
|
||||||
@ -1,151 +0,0 @@ |
|||||||
import { useEffect, useState } from 'react' |
|
||||||
import DTOPedimentosCruzadosListaCliente from '../../../DTO/Dashboard/DTOPedimentosCruzadosListaCliente' |
|
||||||
import DTOPedimentosCruzadosData from '../../../DTO/Dashboard/DTOPedimentosCruzadosData' |
|
||||||
import DashboardDS from '../../../Services/Dashboard/Dashboard.Direccion.Services' |
|
||||||
import { Card, Form } from 'react-bootstrap' |
|
||||||
import { Chart } from 'react-chartjs-2' |
|
||||||
|
|
||||||
export interface IRptPedimentosCruces01Props {} |
|
||||||
|
|
||||||
export default function RptPedimentosCruces01( |
|
||||||
props: IRptPedimentosCruces01Props |
|
||||||
) { |
|
||||||
const [Clientes, setClientes] = useState<DTOPedimentosCruzadosListaCliente[]>( |
|
||||||
[] |
|
||||||
) |
|
||||||
const [Data, setData] = useState<DTOPedimentosCruzadosData[]>([]) |
|
||||||
const [Cliente, setCliente] = useState('') |
|
||||||
const [IDCliente, setIDCliente] = useState(0) |
|
||||||
const [Pedimentos, setPedimentos] = useState<number[]>([]) |
|
||||||
const [Cruces, setCruces] = useState<number[]>([]) |
|
||||||
const [data6, setData6] = useState({ |
|
||||||
labels: ['January', 'February', 'March'], |
|
||||||
datasets: [ |
|
||||||
{ |
|
||||||
type: 'line' as const, |
|
||||||
label: 'Pedimentos', |
|
||||||
borderColor: '#1850D0', |
|
||||||
borderWidth: 2, |
|
||||||
fill: false, |
|
||||||
data: [1, 2, 3] |
|
||||||
}, |
|
||||||
{ |
|
||||||
type: 'bar' as const, |
|
||||||
label: 'Cruces', |
|
||||||
backgroundColor: '#70D63E', |
|
||||||
data: [8, 9, 10], |
|
||||||
borderColor: 'white', |
|
||||||
borderWidth: 2 |
|
||||||
} |
|
||||||
] |
|
||||||
}) |
|
||||||
|
|
||||||
const options6 = { |
|
||||||
indexAxis: 'x' as const, |
|
||||||
elements: { |
|
||||||
bar: { |
|
||||||
borderWidth: 2 |
|
||||||
} |
|
||||||
}, |
|
||||||
responsive: true |
|
||||||
} |
|
||||||
|
|
||||||
useEffect(() => { |
|
||||||
DashboardDS.GETPedimentosCruzadosListaCliente() |
|
||||||
.then((response) => { |
|
||||||
setClientes(response.data) |
|
||||||
}) |
|
||||||
.catch((e: Error) => { |
|
||||||
return |
|
||||||
}) |
|
||||||
}, []) |
|
||||||
|
|
||||||
/* useEffect(() => { |
|
||||||
if (Clientes.length > 0) setCustomer(0) |
|
||||||
}, [Clientes]) */ |
|
||||||
|
|
||||||
useEffect(() => { |
|
||||||
DashboardDS.GETPedimentosCruzadosData(IDCliente) |
|
||||||
.then((response) => { |
|
||||||
setData(response.data) |
|
||||||
let Pedimentos: number[] = [] |
|
||||||
let Cruces: number[] = [] |
|
||||||
let Categorias: string[] = [] |
|
||||||
let RGoogleChartData: Array<Array<string | number>> = [] |
|
||||||
RGoogleChartData.push(['Mes', 'Pedimentos', 'Cruces']) |
|
||||||
response.data.forEach(function (item) { |
|
||||||
Pedimentos.push(item.pedimentos) |
|
||||||
Cruces.push(item.despachos) |
|
||||||
Categorias.push(item.sMes) |
|
||||||
RGoogleChartData.push([item.sMes, item.pedimentos, item.despachos]) |
|
||||||
}) |
|
||||||
setData6({ |
|
||||||
labels: Categorias, |
|
||||||
datasets: [ |
|
||||||
{ |
|
||||||
type: 'line' as const, |
|
||||||
label: 'Pedimentos', |
|
||||||
borderColor: '#1850D0', |
|
||||||
borderWidth: 2, |
|
||||||
fill: false, |
|
||||||
data: Pedimentos |
|
||||||
}, |
|
||||||
{ |
|
||||||
type: 'bar' as const, |
|
||||||
label: 'Cruces', |
|
||||||
backgroundColor: '#70D63E', |
|
||||||
data: Cruces, |
|
||||||
borderColor: 'white', |
|
||||||
borderWidth: 2 |
|
||||||
} |
|
||||||
] |
|
||||||
}) |
|
||||||
var arrClientes = Clientes.filter((item) => { |
|
||||||
return item.id == IDCliente |
|
||||||
}) |
|
||||||
setCliente(arrClientes[0].razonSocial) |
|
||||||
}) |
|
||||||
.catch((e: Error) => { |
|
||||||
return |
|
||||||
}) |
|
||||||
}, [IDCliente]) |
|
||||||
|
|
||||||
return ( |
|
||||||
<div> |
|
||||||
<Card> |
|
||||||
<Card.Body> |
|
||||||
<Form.Control |
|
||||||
as="select" |
|
||||||
onChange={(e) => { |
|
||||||
setIDCliente(parseInt(e.target.value)) |
|
||||||
}} |
|
||||||
className="form-select form-select-sm" |
|
||||||
> |
|
||||||
<option value="0">Seleccion el cliente</option> |
|
||||||
{Clientes |
|
||||||
? Clientes.map((c) => { |
|
||||||
return <option value={c.id}>{c.razonSocial}</option> |
|
||||||
}) |
|
||||||
: null} |
|
||||||
</Form.Control> |
|
||||||
</Card.Body> |
|
||||||
</Card> |
|
||||||
<Card> |
|
||||||
<Card.Body> |
|
||||||
<Card.Title> |
|
||||||
{Cliente} |
|
||||||
<br /> |
|
||||||
<br /> |
|
||||||
</Card.Title> |
|
||||||
<Chart |
|
||||||
type="bar" |
|
||||||
data={data6} |
|
||||||
options={options6} |
|
||||||
width="100%" |
|
||||||
height="40%" |
|
||||||
/> |
|
||||||
</Card.Body> |
|
||||||
</Card> |
|
||||||
</div> |
|
||||||
) |
|
||||||
} |
|
||||||
@ -1,159 +0,0 @@ |
|||||||
import { useEffect, useState } from 'react' |
|
||||||
import { Card, Form } from 'react-bootstrap' |
|
||||||
import DTOPedimentosCruzadosListaCliente from '../../../DTO/Dashboard/DTOPedimentosCruzadosListaCliente' |
|
||||||
import DTOPedimentosCruzadosData from '../../../DTO/Dashboard/DTOPedimentosCruzadosData' |
|
||||||
import DashboardDS from '../../../Services/Dashboard/Dashboard.Direccion.Services' |
|
||||||
import ReactApexChart from 'react-apexcharts' |
|
||||||
import { ApexOptions } from 'apexcharts' |
|
||||||
|
|
||||||
export interface IRtpPedimentosCruces02Props {} |
|
||||||
|
|
||||||
export default function RtpPedimentosCruces02( |
|
||||||
props: IRtpPedimentosCruces02Props |
|
||||||
) { |
|
||||||
const [Clientes, setClientes] = useState<DTOPedimentosCruzadosListaCliente[]>( |
|
||||||
[] |
|
||||||
) |
|
||||||
const [Data, setData] = useState<DTOPedimentosCruzadosData[]>([]) |
|
||||||
const [Cliente, setCliente] = useState('') |
|
||||||
const [IDCliente, setIDCliente] = useState(0) |
|
||||||
const [Pedimentos, setPedimentos] = useState<number[]>([]) |
|
||||||
const [Cruces, setCruces] = useState<number[]>([]) |
|
||||||
const [series, setSeries] = useState([ |
|
||||||
{ |
|
||||||
type: 'line', //render a line chart for this data
|
|
||||||
name: 'Pedimentos', |
|
||||||
data: [19, 22, 20, 26] |
|
||||||
}, |
|
||||||
{ |
|
||||||
type: 'column', //use column chart here.
|
|
||||||
name: 'Cruces', |
|
||||||
data: [103, 105, 98, 83] |
|
||||||
} |
|
||||||
]) |
|
||||||
const [options, setOptions] = useState<ApexOptions>({ |
|
||||||
xaxis: { |
|
||||||
categories: ['2022', '20022', '2023', '2023'] |
|
||||||
}, |
|
||||||
chart: { |
|
||||||
height: 100, |
|
||||||
type: 'line', |
|
||||||
zoom: { |
|
||||||
enabled: false |
|
||||||
} |
|
||||||
} |
|
||||||
}) |
|
||||||
|
|
||||||
useEffect(() => { |
|
||||||
DashboardDS.GETPedimentosCruzadosListaCliente() |
|
||||||
.then((response) => { |
|
||||||
setClientes(response.data) |
|
||||||
}) |
|
||||||
.catch((e: Error) => { |
|
||||||
return |
|
||||||
}) |
|
||||||
}, []) |
|
||||||
|
|
||||||
useEffect(() => { |
|
||||||
DashboardDS.GETPedimentosCruzadosData(IDCliente) |
|
||||||
.then((response) => { |
|
||||||
setData(response.data) |
|
||||||
let Pedimentos: number[] = [] |
|
||||||
let Cruces: number[] = [] |
|
||||||
let Categorias: string[] = [] |
|
||||||
response.data.forEach(function (item) { |
|
||||||
Pedimentos.push(item.pedimentos) |
|
||||||
Cruces.push(item.despachos) |
|
||||||
Categorias.push(item.sMes) |
|
||||||
}) |
|
||||||
setSeries([ |
|
||||||
{ |
|
||||||
type: 'line', //render a line chart for this data
|
|
||||||
name: 'Pedimentos', |
|
||||||
data: Pedimentos |
|
||||||
}, |
|
||||||
{ |
|
||||||
type: 'column', //use column chart here.
|
|
||||||
name: 'Cruces', |
|
||||||
data: Cruces |
|
||||||
} |
|
||||||
]) |
|
||||||
setOptions({ |
|
||||||
xaxis: { |
|
||||||
categories: Categorias |
|
||||||
}, |
|
||||||
chart: { |
|
||||||
height: 100, |
|
||||||
type: 'line', |
|
||||||
zoom: { |
|
||||||
enabled: false |
|
||||||
} |
|
||||||
}, |
|
||||||
dataLabels: { |
|
||||||
enabled: true, |
|
||||||
dropShadow: { |
|
||||||
enabled: true, |
|
||||||
left: 2, |
|
||||||
top: 2, |
|
||||||
opacity: 0.5 |
|
||||||
} |
|
||||||
}, |
|
||||||
grid: { |
|
||||||
position: 'front', |
|
||||||
borderColor: '#AAA', |
|
||||||
strokeDashArray: 3 |
|
||||||
}, |
|
||||||
legend: { |
|
||||||
show: true, |
|
||||||
position: 'top' |
|
||||||
} |
|
||||||
}) |
|
||||||
var arrClientes = Clientes.filter((item) => { |
|
||||||
return item.id == IDCliente |
|
||||||
}) |
|
||||||
setCliente(arrClientes[0].razonSocial) |
|
||||||
}) |
|
||||||
.catch((e: Error) => { |
|
||||||
return |
|
||||||
}) |
|
||||||
}, [IDCliente]) |
|
||||||
|
|
||||||
return ( |
|
||||||
<div> |
|
||||||
<Card> |
|
||||||
<Card.Body> |
|
||||||
<Form.Control |
|
||||||
as="select" |
|
||||||
onChange={(e) => { |
|
||||||
setIDCliente(parseInt(e.target.value)) |
|
||||||
}} |
|
||||||
className="form-select form-select-sm" |
|
||||||
> |
|
||||||
<option value="0">Seleccion el cliente</option> |
|
||||||
{Clientes |
|
||||||
? Clientes.map((c) => { |
|
||||||
return <option value={c.id}>{c.razonSocial}</option> |
|
||||||
}) |
|
||||||
: null} |
|
||||||
</Form.Control> |
|
||||||
</Card.Body> |
|
||||||
</Card> |
|
||||||
<br /> |
|
||||||
<Card> |
|
||||||
<Card.Body> |
|
||||||
<Card.Title> |
|
||||||
{Cliente} |
|
||||||
<br /> |
|
||||||
<br /> |
|
||||||
</Card.Title> |
|
||||||
<ReactApexChart |
|
||||||
options={options} |
|
||||||
series={series} |
|
||||||
width="100%" |
|
||||||
height="600px" |
|
||||||
/> |
|
||||||
</Card.Body> |
|
||||||
</Card> |
|
||||||
</div> |
|
||||||
) |
|
||||||
} |
|
||||||
@ -1,140 +0,0 @@ |
|||||||
import { useEffect, useState } from 'react' |
|
||||||
import { Card, Form } from 'react-bootstrap' |
|
||||||
import DTOPedimentosCruzadosListaCliente from '../../../DTO/Dashboard/DTOPedimentosCruzadosListaCliente' |
|
||||||
import DTOPedimentosCruzadosData from '../../../DTO/Dashboard/DTOPedimentosCruzadosData' |
|
||||||
import DashboardDS from '../../../Services/Dashboard/Dashboard.Direccion.Services' |
|
||||||
import ReactApexChart from 'react-apexcharts' |
|
||||||
import { ApexOptions } from 'apexcharts' |
|
||||||
|
|
||||||
export interface IRptPedimentosCruces03Props {} |
|
||||||
|
|
||||||
export default function RptPedimentosCruces03( |
|
||||||
props: IRptPedimentosCruces03Props |
|
||||||
) { |
|
||||||
const [Clientes, setClientes] = useState<DTOPedimentosCruzadosListaCliente[]>( |
|
||||||
[] |
|
||||||
) |
|
||||||
const [Data, setData] = useState<DTOPedimentosCruzadosData[]>([]) |
|
||||||
const [Cliente, setCliente] = useState('') |
|
||||||
const [IDCliente, setIDCliente] = useState(0) |
|
||||||
const [Pedimentos, setPedimentos] = useState<number[]>([]) |
|
||||||
const [Cruces, setCruces] = useState<number[]>([]) |
|
||||||
const [series2, setSeries2] = useState([ |
|
||||||
{ |
|
||||||
name: 'series1', |
|
||||||
data: [31, 40, 28, 51, 42, 109, 100] |
|
||||||
}, |
|
||||||
{ |
|
||||||
name: 'series2', |
|
||||||
data: [11, 32, 45, 32, 34, 52, 41] |
|
||||||
} |
|
||||||
]) |
|
||||||
const [options2, setOptions2] = useState<ApexOptions>({ |
|
||||||
chart: { |
|
||||||
height: 350, |
|
||||||
type: 'area' |
|
||||||
}, |
|
||||||
dataLabels: { |
|
||||||
enabled: false |
|
||||||
}, |
|
||||||
stroke: { |
|
||||||
curve: 'smooth' |
|
||||||
}, |
|
||||||
xaxis: { |
|
||||||
categories: ['Ene', 'Feb', 'Mar', 'Abr', 'Marzo', 'Abr', 'May'] |
|
||||||
} |
|
||||||
}) |
|
||||||
|
|
||||||
useEffect(() => { |
|
||||||
DashboardDS.GETPedimentosCruzadosListaCliente() |
|
||||||
.then((response) => { |
|
||||||
setClientes(response.data) |
|
||||||
}) |
|
||||||
.catch((e: Error) => { |
|
||||||
return |
|
||||||
}) |
|
||||||
}, []) |
|
||||||
|
|
||||||
useEffect(() => { |
|
||||||
DashboardDS.GETPedimentosCruzadosData(IDCliente) |
|
||||||
.then((response) => { |
|
||||||
setData(response.data) |
|
||||||
let Pedimentos: number[] = [] |
|
||||||
let Cruces: number[] = [] |
|
||||||
let Categorias: string[] = [] |
|
||||||
response.data.forEach(function (item) { |
|
||||||
Pedimentos.push(item.pedimentos) |
|
||||||
Cruces.push(item.despachos) |
|
||||||
Categorias.push(item.sMes) |
|
||||||
}) |
|
||||||
setSeries2([ |
|
||||||
{ |
|
||||||
name: 'Pedimentos', |
|
||||||
data: Pedimentos |
|
||||||
}, |
|
||||||
{ |
|
||||||
name: 'Cruces', |
|
||||||
data: Cruces |
|
||||||
} |
|
||||||
]) |
|
||||||
setOptions2({ |
|
||||||
xaxis: { |
|
||||||
categories: Categorias |
|
||||||
}, |
|
||||||
chart: { |
|
||||||
height: 100, |
|
||||||
type: 'line', |
|
||||||
zoom: { |
|
||||||
enabled: false |
|
||||||
} |
|
||||||
} |
|
||||||
}) |
|
||||||
var arrClientes = Clientes.filter((item) => { |
|
||||||
return item.id == IDCliente |
|
||||||
}) |
|
||||||
setCliente(arrClientes[0].razonSocial) |
|
||||||
}) |
|
||||||
.catch((e: Error) => { |
|
||||||
return |
|
||||||
}) |
|
||||||
}, [IDCliente]) |
|
||||||
|
|
||||||
return ( |
|
||||||
<div> |
|
||||||
<Card> |
|
||||||
<Card.Body> |
|
||||||
<Form.Control |
|
||||||
as="select" |
|
||||||
onChange={(e) => { |
|
||||||
setIDCliente(parseInt(e.target.value)) |
|
||||||
}} |
|
||||||
className="form-select form-select-sm" |
|
||||||
> |
|
||||||
<option value="0">Seleccion el cliente</option> |
|
||||||
{Clientes |
|
||||||
? Clientes.map((c) => { |
|
||||||
return <option value={c.id}>{c.razonSocial}</option> |
|
||||||
}) |
|
||||||
: null} |
|
||||||
</Form.Control> |
|
||||||
</Card.Body> |
|
||||||
</Card> |
|
||||||
<br /> |
|
||||||
<Card> |
|
||||||
<Card.Body> |
|
||||||
<Card.Title> |
|
||||||
{Cliente} |
|
||||||
<br /> |
|
||||||
<br /> |
|
||||||
</Card.Title> |
|
||||||
<ReactApexChart |
|
||||||
options={options2} |
|
||||||
series={series2} |
|
||||||
width="100%" |
|
||||||
height="600px" |
|
||||||
/> |
|
||||||
</Card.Body> |
|
||||||
</Card> |
|
||||||
</div> |
|
||||||
) |
|
||||||
} |
|
||||||
@ -1,141 +0,0 @@ |
|||||||
import { useEffect, useState } from 'react' |
|
||||||
import { Card, Form } from 'react-bootstrap' |
|
||||||
import DTOPedimentosCruzadosListaCliente from '../../../DTO/Dashboard/DTOPedimentosCruzadosListaCliente' |
|
||||||
import DTOPedimentosCruzadosData from '../../../DTO/Dashboard/DTOPedimentosCruzadosData' |
|
||||||
import DashboardDS from '../../../Services/Dashboard/Dashboard.Direccion.Services' |
|
||||||
import ReactApexChart from 'react-apexcharts' |
|
||||||
import { ApexOptions } from 'apexcharts' |
|
||||||
|
|
||||||
export interface IRptPedimentosCruces04Props { |
|
||||||
} |
|
||||||
|
|
||||||
export default function RptPedimentosCruces04 (props: IRptPedimentosCruces04Props) { |
|
||||||
const [Clientes, setClientes] = useState<DTOPedimentosCruzadosListaCliente[]>( |
|
||||||
[] |
|
||||||
) |
|
||||||
const [Data, setData] = useState<DTOPedimentosCruzadosData[]>([]) |
|
||||||
const [Cliente, setCliente] = useState('') |
|
||||||
const [IDCliente, setIDCliente] = useState(0) |
|
||||||
const [Pedimentos, setPedimentos] = useState<number[]>([]) |
|
||||||
const [Cruces, setCruces] = useState<number[]>([]) |
|
||||||
const [series2, setSeries2] = useState([ |
|
||||||
{ |
|
||||||
name: 'series1', |
|
||||||
data: [31, 40, 28, 51, 42, 109, 100] |
|
||||||
}, |
|
||||||
{ |
|
||||||
name: 'series2', |
|
||||||
data: [11, 32, 45, 32, 34, 52, 41] |
|
||||||
} |
|
||||||
]) |
|
||||||
const [options2, setOptions2] = useState<ApexOptions>({ |
|
||||||
chart: { |
|
||||||
height: 350, |
|
||||||
type: 'area' |
|
||||||
}, |
|
||||||
dataLabels: { |
|
||||||
enabled: false |
|
||||||
}, |
|
||||||
stroke: { |
|
||||||
curve: 'smooth' |
|
||||||
}, |
|
||||||
xaxis: { |
|
||||||
categories: ['Ene', 'Feb', 'Mar', 'Abr', 'Marzo', 'Abr', 'May'] |
|
||||||
} |
|
||||||
}) |
|
||||||
|
|
||||||
useEffect(() => { |
|
||||||
DashboardDS.GETPedimentosCruzadosListaCliente() |
|
||||||
.then((response) => { |
|
||||||
setClientes(response.data) |
|
||||||
}) |
|
||||||
.catch((e: Error) => { |
|
||||||
return |
|
||||||
}) |
|
||||||
}, []) |
|
||||||
|
|
||||||
useEffect(() => { |
|
||||||
DashboardDS.GETPedimentosCruzadosData(IDCliente) |
|
||||||
.then((response) => { |
|
||||||
setData(response.data) |
|
||||||
let Pedimentos: number[] = [] |
|
||||||
let Cruces: number[] = [] |
|
||||||
let Categorias: string[] = [] |
|
||||||
response.data.forEach(function (item) { |
|
||||||
Pedimentos.push(item.pedimentos) |
|
||||||
Cruces.push(item.despachos) |
|
||||||
Categorias.push(item.sMes) |
|
||||||
}) |
|
||||||
setSeries2([ |
|
||||||
{ |
|
||||||
name: 'Pedimentos', |
|
||||||
data: Pedimentos |
|
||||||
}, |
|
||||||
{ |
|
||||||
name: 'Cruces', |
|
||||||
data: Cruces |
|
||||||
} |
|
||||||
]) |
|
||||||
setOptions2({ |
|
||||||
xaxis: { |
|
||||||
categories: Categorias |
|
||||||
}, |
|
||||||
chart: { |
|
||||||
height: 100, |
|
||||||
type: 'line', |
|
||||||
zoom: { |
|
||||||
enabled: false |
|
||||||
} |
|
||||||
} |
|
||||||
}) |
|
||||||
var arrClientes = Clientes.filter((item) => { |
|
||||||
return item.id == IDCliente |
|
||||||
}) |
|
||||||
setCliente(arrClientes[0].razonSocial) |
|
||||||
}) |
|
||||||
.catch((e: Error) => { |
|
||||||
return |
|
||||||
}) |
|
||||||
}, [IDCliente]) |
|
||||||
|
|
||||||
return ( |
|
||||||
<div> |
|
||||||
<Card> |
|
||||||
<Card.Body> |
|
||||||
<Form.Control |
|
||||||
as="select" |
|
||||||
onChange={(e) => { |
|
||||||
setIDCliente(parseInt(e.target.value)) |
|
||||||
}} |
|
||||||
className="form-select form-select-sm" |
|
||||||
> |
|
||||||
<option value="0">Seleccion el cliente</option> |
|
||||||
{Clientes |
|
||||||
? Clientes.map((c) => { |
|
||||||
return <option value={c.id}>{c.razonSocial}</option> |
|
||||||
}) |
|
||||||
: null} |
|
||||||
</Form.Control> |
|
||||||
</Card.Body> |
|
||||||
</Card> |
|
||||||
<br /> |
|
||||||
<Card> |
|
||||||
<Card.Body> |
|
||||||
<Card.Title> |
|
||||||
{Cliente} |
|
||||||
<br /> |
|
||||||
<br /> |
|
||||||
</Card.Title> |
|
||||||
<ReactApexChart |
|
||||||
options={options2} |
|
||||||
series={series2} |
|
||||||
width="100%" |
|
||||||
height="600px"
|
|
||||||
type="bar" |
|
||||||
/> |
|
||||||
</Card.Body> |
|
||||||
</Card> |
|
||||||
</div> |
|
||||||
) |
|
||||||
} |
|
||||||
|
|
||||||
@ -1,150 +0,0 @@ |
|||||||
import { useEffect, useState } from 'react' |
|
||||||
import { Card, Form } from 'react-bootstrap' |
|
||||||
import DTOPedimentosCruzadosListaCliente from '../../../DTO/Dashboard/DTOPedimentosCruzadosListaCliente' |
|
||||||
import DTOPedimentosCruzadosData from '../../../DTO/Dashboard/DTOPedimentosCruzadosData' |
|
||||||
import DashboardDS from '../../../Services/Dashboard/Dashboard.Direccion.Services' |
|
||||||
import ReactApexChart from 'react-apexcharts' |
|
||||||
import { ApexOptions } from 'apexcharts' |
|
||||||
import { Bar, CartesianGrid, ComposedChart, Legend, Line, Tooltip, XAxis, YAxis } from 'recharts' |
|
||||||
|
|
||||||
export interface IRptPedimentosCruces05Props { |
|
||||||
} |
|
||||||
|
|
||||||
interface IRechartsData { |
|
||||||
name: string |
|
||||||
uv: number |
|
||||||
pv: number |
|
||||||
amt: number |
|
||||||
} |
|
||||||
|
|
||||||
export default function RptPedimentosCruces05 (props: IRptPedimentosCruces05Props) { |
|
||||||
const [Clientes, setClientes] = useState<DTOPedimentosCruzadosListaCliente[]>( |
|
||||||
[] |
|
||||||
) |
|
||||||
const [Data, setData] = useState<DTOPedimentosCruzadosData[]>([]) |
|
||||||
const [Cliente, setCliente] = useState('') |
|
||||||
const [IDCliente, setIDCliente] = useState(0) |
|
||||||
const [Pedimentos, setPedimentos] = useState<number[]>([]) |
|
||||||
const [Cruces, setCruces] = useState<number[]>([]) |
|
||||||
const [data4, setData4] = useState<IRechartsData[]>([ |
|
||||||
{ |
|
||||||
name: 'Page A', |
|
||||||
uv: 4000, |
|
||||||
pv: 2400, |
|
||||||
amt: 2400 |
|
||||||
}, |
|
||||||
{ |
|
||||||
name: 'Page B', |
|
||||||
uv: 3000, |
|
||||||
pv: 1398, |
|
||||||
amt: 2210 |
|
||||||
}, |
|
||||||
{ |
|
||||||
name: 'Page C', |
|
||||||
uv: 2000, |
|
||||||
pv: 9800, |
|
||||||
amt: 2290 |
|
||||||
} |
|
||||||
]) |
|
||||||
|
|
||||||
useEffect(() => { |
|
||||||
DashboardDS.GETPedimentosCruzadosListaCliente() |
|
||||||
.then((response) => { |
|
||||||
setClientes(response.data) |
|
||||||
}) |
|
||||||
.catch((e: Error) => { |
|
||||||
return |
|
||||||
}) |
|
||||||
}, []) |
|
||||||
|
|
||||||
useEffect(() => { |
|
||||||
DashboardDS.GETPedimentosCruzadosData(IDCliente) |
|
||||||
.then((response) => { |
|
||||||
setData(response.data) |
|
||||||
let Pedimentos: number[] = [] |
|
||||||
let Cruces: number[] = [] |
|
||||||
let Categorias: string[] = [] |
|
||||||
let RechartsData: IRechartsData[] = [] |
|
||||||
let RGoogleChartData: Array<Array<string | number>> = [] |
|
||||||
RGoogleChartData.push(['Mes', 'Pedimentos', 'Cruces']) |
|
||||||
response.data.forEach(function (item) { |
|
||||||
Pedimentos.push(item.pedimentos) |
|
||||||
Cruces.push(item.despachos) |
|
||||||
Categorias.push(item.sMes) |
|
||||||
RechartsData.push({ |
|
||||||
name: item.sMes, |
|
||||||
pv: item.pedimentos, |
|
||||||
uv: item.despachos, |
|
||||||
amt: 1 |
|
||||||
}) |
|
||||||
RGoogleChartData.push([item.sMes, item.pedimentos, item.despachos]) |
|
||||||
}) |
|
||||||
setData4(RechartsData) |
|
||||||
var arrClientes = Clientes.filter((item) => { |
|
||||||
return item.id == IDCliente |
|
||||||
}) |
|
||||||
setCliente(arrClientes[0].razonSocial) |
|
||||||
}) |
|
||||||
.catch((e: Error) => { |
|
||||||
return |
|
||||||
}) |
|
||||||
}, [IDCliente]) |
|
||||||
|
|
||||||
return ( |
|
||||||
<div> |
|
||||||
<Card> |
|
||||||
<Card.Body> |
|
||||||
<Form.Control |
|
||||||
as="select" |
|
||||||
onChange={(e) => { |
|
||||||
setIDCliente(parseInt(e.target.value)) |
|
||||||
}} |
|
||||||
className="form-select form-select-sm" |
|
||||||
> |
|
||||||
<option value="0">Seleccion el cliente</option> |
|
||||||
{Clientes |
|
||||||
? Clientes.map((c) => { |
|
||||||
return <option value={c.id}>{c.razonSocial}</option> |
|
||||||
}) |
|
||||||
: null} |
|
||||||
</Form.Control> |
|
||||||
</Card.Body> |
|
||||||
</Card> |
|
||||||
<br /> |
|
||||||
<Card> |
|
||||||
<Card.Body> |
|
||||||
<Card.Title> |
|
||||||
{Cliente} |
|
||||||
<br /> |
|
||||||
<br /> |
|
||||||
</Card.Title> |
|
||||||
<ComposedChart |
|
||||||
width={1500} |
|
||||||
height={600} |
|
||||||
data={data4} |
|
||||||
margin={{ |
|
||||||
top: 20, |
|
||||||
right: 20, |
|
||||||
bottom: 20, |
|
||||||
left: 20 |
|
||||||
}} |
|
||||||
> |
|
||||||
<CartesianGrid stroke="#f5f5f5" /> |
|
||||||
<XAxis dataKey="name" /> |
|
||||||
<YAxis /> |
|
||||||
<Tooltip /> |
|
||||||
<Legend /> |
|
||||||
<Bar dataKey="pv" barSize={20} fill="#1850D0" name="Pedimentos" /> |
|
||||||
<Line |
|
||||||
type="monotone" |
|
||||||
dataKey="uv" |
|
||||||
stroke="#70D63E" |
|
||||||
name="Cruces" |
|
||||||
/> |
|
||||||
</ComposedChart> |
|
||||||
</Card.Body> |
|
||||||
</Card> |
|
||||||
</div> |
|
||||||
) |
|
||||||
} |
|
||||||
|
|
||||||
@ -1,127 +0,0 @@ |
|||||||
import * as React from 'react' |
|
||||||
import { useEffect, useState } from 'react' |
|
||||||
import Chart from 'react-google-charts' |
|
||||||
import DTOPedimentosCruzadosListaCliente from '../../../DTO/Dashboard/DTOPedimentosCruzadosListaCliente' |
|
||||||
import DTOPedimentosCruzadosData from '../../../DTO/Dashboard/DTOPedimentosCruzadosData' |
|
||||||
import DashboardDS from '../../../Services/Dashboard/Dashboard.Direccion.Services' |
|
||||||
import { Card, Form } from 'react-bootstrap' |
|
||||||
|
|
||||||
export interface IRptPedimentosCruces06Props {} |
|
||||||
|
|
||||||
interface IRechartsData { |
|
||||||
name: string |
|
||||||
uv: number |
|
||||||
pv: number |
|
||||||
amt: number |
|
||||||
} |
|
||||||
|
|
||||||
export default function RptPedimentosCruces06( |
|
||||||
props: IRptPedimentosCruces06Props |
|
||||||
) { |
|
||||||
const [Clientes, setClientes] = useState<DTOPedimentosCruzadosListaCliente[]>( |
|
||||||
[] |
|
||||||
) |
|
||||||
const [Data, setData] = useState<DTOPedimentosCruzadosData[]>([]) |
|
||||||
const [Cliente, setCliente] = useState('') |
|
||||||
const [IDCliente, setIDCliente] = useState(0) |
|
||||||
const [Pedimentos, setPedimentos] = useState<number[]>([]) |
|
||||||
const [Cruces, setCruces] = useState<number[]>([]) |
|
||||||
const [data5, setData5] = useState([ |
|
||||||
['Mes', 'Pedimentos', 'Cruces'], |
|
||||||
['2004/05', 165, 938], |
|
||||||
['2005/06', 135, 1120], |
|
||||||
['2006/07', 157, 1167], |
|
||||||
['2007/08', 139, 1110], |
|
||||||
['2008/09', 136, 691] |
|
||||||
]) |
|
||||||
const options5 = { |
|
||||||
title: '', |
|
||||||
vAxis: { title: '' }, |
|
||||||
hAxis: { title: 'Meses' }, |
|
||||||
seriesType: 'bars', |
|
||||||
series: { 1: { type: 'line' } }, |
|
||||||
colors: ['#1850D0', '70D63E'] |
|
||||||
} |
|
||||||
|
|
||||||
useEffect(() => { |
|
||||||
DashboardDS.GETPedimentosCruzadosListaCliente() |
|
||||||
.then((response) => { |
|
||||||
setClientes(response.data) |
|
||||||
}) |
|
||||||
.catch((e: Error) => { |
|
||||||
return |
|
||||||
}) |
|
||||||
}, []) |
|
||||||
|
|
||||||
useEffect(() => { |
|
||||||
DashboardDS.GETPedimentosCruzadosData(IDCliente) |
|
||||||
.then((response) => { |
|
||||||
setData(response.data) |
|
||||||
let Pedimentos: number[] = [] |
|
||||||
let Cruces: number[] = [] |
|
||||||
let Categorias: string[] = [] |
|
||||||
let RechartsData: IRechartsData[] = [] |
|
||||||
let RGoogleChartData: Array<Array<string | number>> = [] |
|
||||||
RGoogleChartData.push(['Mes', 'Pedimentos', 'Cruces']) |
|
||||||
response.data.forEach(function (item) { |
|
||||||
Pedimentos.push(item.pedimentos) |
|
||||||
Cruces.push(item.despachos) |
|
||||||
Categorias.push(item.sMes) |
|
||||||
RechartsData.push({ |
|
||||||
name: item.sMes, |
|
||||||
pv: item.pedimentos, |
|
||||||
uv: item.despachos, |
|
||||||
amt: 1 |
|
||||||
}) |
|
||||||
RGoogleChartData.push([item.sMes, item.pedimentos, item.despachos]) |
|
||||||
}) |
|
||||||
setData5(RGoogleChartData) |
|
||||||
var arrClientes = Clientes.filter((item) => { |
|
||||||
return item.id == IDCliente |
|
||||||
}) |
|
||||||
setCliente(arrClientes[0].razonSocial) |
|
||||||
}) |
|
||||||
.catch((e: Error) => { |
|
||||||
return |
|
||||||
}) |
|
||||||
}, [IDCliente]) |
|
||||||
return ( |
|
||||||
<div> |
|
||||||
<Card> |
|
||||||
<Card.Body> |
|
||||||
<Form.Control |
|
||||||
as="select" |
|
||||||
onChange={(e) => { |
|
||||||
setIDCliente(parseInt(e.target.value)) |
|
||||||
}} |
|
||||||
className="form-select form-select-sm" |
|
||||||
> |
|
||||||
<option value="0">Seleccion el cliente</option> |
|
||||||
{Clientes |
|
||||||
? Clientes.map((c) => { |
|
||||||
return <option value={c.id}>{c.razonSocial}</option> |
|
||||||
}) |
|
||||||
: null} |
|
||||||
</Form.Control> |
|
||||||
</Card.Body> |
|
||||||
</Card> |
|
||||||
<br /> |
|
||||||
<Card> |
|
||||||
<Card.Body> |
|
||||||
<Card.Title> |
|
||||||
{Cliente} |
|
||||||
<br /> |
|
||||||
<br /> |
|
||||||
</Card.Title> |
|
||||||
<Chart |
|
||||||
chartType="ComboChart" |
|
||||||
width="100%" |
|
||||||
height="600px" |
|
||||||
data={data5} |
|
||||||
options={options5} |
|
||||||
/> |
|
||||||
</Card.Body> |
|
||||||
</Card> |
|
||||||
</div> |
|
||||||
) |
|
||||||
} |
|
||||||
@ -1,401 +0,0 @@ |
|||||||
import React, { FC, useEffect, useState } from 'react' |
|
||||||
// Bootstrap components
|
|
||||||
import { Button, Card, Form } from 'react-bootstrap' |
|
||||||
import { BsSearch, BsFileEarmarkExcel } from 'react-icons/bs' |
|
||||||
// Interfaces
|
|
||||||
import IClientes from '../../Interfaces/Catalogos/IClientes' |
|
||||||
import IArchivoElectronico from '../../Interfaces/IArchivoElectronico' |
|
||||||
// DTOs
|
|
||||||
import DTOReporte from '../../DTO/DTOReporte' |
|
||||||
// Services
|
|
||||||
import reportsDataService from '../../Services/Reportes/reportes.services' |
|
||||||
import ClientesDataService from '../../Services/Catalogos/Clientes.Services' |
|
||||||
|
|
||||||
import { useDispatch } from 'react-redux' |
|
||||||
import { setArchivoElectronico } from '../../store/features/Reportes/ArchivoElectronico' |
|
||||||
// GUI components
|
|
||||||
import { MsgInformativo } from '../Utils/Toast/msgInformativo' |
|
||||||
import { AgGridReact } from 'ag-grid-react' |
|
||||||
import { RowClickedEvent } from 'ag-grid-community' |
|
||||||
import { TargetURL } from '../../Constants/TargetURL' |
|
||||||
//Other
|
|
||||||
import moment from 'moment' |
|
||||||
import * as XLSX from 'xlsx' |
|
||||||
import IRptArcosa from '../../Interfaces/Reportes/IRptArcosa' |
|
||||||
interface IProps {} |
|
||||||
|
|
||||||
const RptArcosa: FC<IProps> = (props) => { |
|
||||||
const [UserId, setUserId] = useState(() => { |
|
||||||
const stickyValue = window.localStorage.getItem('UserId') |
|
||||||
return stickyValue !== null ? JSON.parse(stickyValue) : 0 |
|
||||||
}) |
|
||||||
const [Data, setData] = useState<Array<IRptArcosa>>([]) |
|
||||||
const [filteredData, setFilteredData] = useState<Array<IRptArcosa>>([]) |
|
||||||
const [Inicio, setInicio] = useState(currentDate()) |
|
||||||
const [Fin, setFin] = useState(currentDate()) |
|
||||||
const [TipoOperacion, setTipoOperacion] = useState(1) |
|
||||||
const [Cliente, setCliente] = useState(0) |
|
||||||
const [Clientes, setClientes] = useState<Array<IClientes>>() |
|
||||||
const [msgColor, setMsgColor] = React.useState('primary') |
|
||||||
const [show, setShowMsg] = useState(false) |
|
||||||
const [header, setHeader] = useState('') |
|
||||||
const [msg, setMsg] = useState('') |
|
||||||
const [filtro, setFiltro] = useState('') |
|
||||||
const gridRef = React.useRef<any>(null) |
|
||||||
const [columnaVerPDF, setcolumnaVerPDF] = useState(false) |
|
||||||
const dispatch = useDispatch() |
|
||||||
const [columnDefs] = useState([ |
|
||||||
{ |
|
||||||
field: 'patente', |
|
||||||
headerName: 'Patente', |
|
||||||
sortable: true, |
|
||||||
filter: true, |
|
||||||
width: 150 |
|
||||||
}, |
|
||||||
{ |
|
||||||
field: 'pedimento', |
|
||||||
headerName: 'Pedimento', |
|
||||||
sortable: true, |
|
||||||
filter: true, |
|
||||||
width: 150 |
|
||||||
}, |
|
||||||
{ |
|
||||||
field: 'pagoPedimento', |
|
||||||
headerName: 'PagoPedimento', |
|
||||||
sortable: true, |
|
||||||
filter: true, |
|
||||||
width: 200 |
|
||||||
}, |
|
||||||
{ |
|
||||||
field: 'regimen', |
|
||||||
headerName: 'Regimen', |
|
||||||
sortable: true, |
|
||||||
filter: true, |
|
||||||
width: 150 |
|
||||||
}, |
|
||||||
{ |
|
||||||
field: 'valorDls', |
|
||||||
headerName: 'ValorDls', |
|
||||||
sortable: true, |
|
||||||
filter: true, |
|
||||||
width: 150 |
|
||||||
}, |
|
||||||
|
|
||||||
{ |
|
||||||
field: 'valorAduana', |
|
||||||
headerName: 'ValorAduana', |
|
||||||
sortable: true, |
|
||||||
filter: true, |
|
||||||
width: 150 |
|
||||||
}, |
|
||||||
{ |
|
||||||
field: 'aduana', |
|
||||||
headerName: 'Aduana', |
|
||||||
sortable: true, |
|
||||||
filter: true, |
|
||||||
width: 150 |
|
||||||
}, |
|
||||||
{ |
|
||||||
field: 'planta', |
|
||||||
headerName: 'Planta', |
|
||||||
sortable: true, |
|
||||||
filter: true, |
|
||||||
width: 150 |
|
||||||
}, |
|
||||||
{ |
|
||||||
field: 'dta', |
|
||||||
headerName: 'DTA', |
|
||||||
sortable: true, |
|
||||||
filter: true, |
|
||||||
width: 150 |
|
||||||
}, |
|
||||||
{ |
|
||||||
field: 'prev', |
|
||||||
headerName: 'PREV', |
|
||||||
sortable: true, |
|
||||||
filter: true, |
|
||||||
width: 150 |
|
||||||
}, |
|
||||||
|
|
||||||
{ |
|
||||||
field: 'iva', |
|
||||||
headerName: 'IVA', |
|
||||||
sortable: true, |
|
||||||
filter: true, |
|
||||||
width: 150 |
|
||||||
}, |
|
||||||
{ |
|
||||||
field: 'ivaprev', |
|
||||||
headerName: 'IVAPREV', |
|
||||||
sortable: true, |
|
||||||
filter: true, |
|
||||||
width: 150 |
|
||||||
}, |
|
||||||
{ |
|
||||||
field: 'igi', |
|
||||||
headerName: 'IGI', |
|
||||||
sortable: true, |
|
||||||
filter: true, |
|
||||||
width: 150 |
|
||||||
}, |
|
||||||
{ |
|
||||||
field: 'cc', |
|
||||||
headerName: 'CC', |
|
||||||
sortable: true, |
|
||||||
filter: true, |
|
||||||
width: 150 |
|
||||||
}, |
|
||||||
{ |
|
||||||
field: 'total', |
|
||||||
headerName: 'Total', |
|
||||||
sortable: true, |
|
||||||
filter: true, |
|
||||||
width: 150 |
|
||||||
} |
|
||||||
]) |
|
||||||
|
|
||||||
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 |
|
||||||
} |
|
||||||
|
|
||||||
const closeToast = (show: boolean): void => { |
|
||||||
setShowMsg(false) |
|
||||||
} |
|
||||||
|
|
||||||
const generaReporte = () => { |
|
||||||
if (Cliente === 0) { |
|
||||||
setHeader('Error') |
|
||||||
setMsg('Seleccion el cliente') |
|
||||||
setShowMsg(true) |
|
||||||
return |
|
||||||
} |
|
||||||
const data: DTOReporte = { |
|
||||||
Inicio: moment(Inicio).format('YYYY-MM-DD'), |
|
||||||
Fin: moment(Fin).format('YYYY-MM-DD'), |
|
||||||
TipoOperacion: TipoOperacion, |
|
||||||
NoCliente: Cliente, |
|
||||||
IdUsuario: UserId |
|
||||||
} |
|
||||||
reportsDataService |
|
||||||
.getRptArcosa(data) |
|
||||||
.then((response) => { |
|
||||||
setData(response.data) |
|
||||||
setFilteredData(response.data) |
|
||||||
setHeader('Informativo') |
|
||||||
setMsg('Se encontro la siguiente informacion...') |
|
||||||
setShowMsg(true) |
|
||||||
}) |
|
||||||
.catch((e: Error) => { |
|
||||||
setHeader('Error') |
|
||||||
setMsg('Ocurrio un error: ' + e) |
|
||||||
setShowMsg(true) |
|
||||||
return |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
useEffect(() => { |
|
||||||
ClientesDataService.getAllClientes(parseInt(UserId)) |
|
||||||
.then((response) => { |
|
||||||
setClientes(response.data) |
|
||||||
}) |
|
||||||
.catch((e: Error) => { |
|
||||||
setHeader('Error') |
|
||||||
setMsg('Ocurrio un error: ' + e) |
|
||||||
setShowMsg(true) |
|
||||||
return |
|
||||||
}) |
|
||||||
}, []) |
|
||||||
|
|
||||||
const downloadExcel = () => { |
|
||||||
exportExcel(Data, 'Reporte Mensual Arcosa') |
|
||||||
} |
|
||||||
|
|
||||||
function exportExcel(jsonData: any[], fileName: string): void { |
|
||||||
let Heading = [ |
|
||||||
[ |
|
||||||
'Patente', |
|
||||||
'Pedimento', |
|
||||||
'PagoPedimento', |
|
||||||
'Regimen', |
|
||||||
'ValorDls', |
|
||||||
'ValorAduana', |
|
||||||
'Aduana', |
|
||||||
'Planta', |
|
||||||
'DTA', |
|
||||||
'PREV', |
|
||||||
'IVA', |
|
||||||
'IVAPREV', |
|
||||||
'IGI', |
|
||||||
'CC', |
|
||||||
'Total' |
|
||||||
] |
|
||||||
] |
|
||||||
|
|
||||||
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() |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
const filtraReporte = (e: any) => { |
|
||||||
setFiltro(e.target.value) |
|
||||||
gridRef.current.api.setQuickFilter(e.target.value) |
|
||||||
} |
|
||||||
|
|
||||||
async function getAE(e: any) { |
|
||||||
if (e.column.colId === 'ver pedimento') { |
|
||||||
setcolumnaVerPDF(true) |
|
||||||
} else { |
|
||||||
setcolumnaVerPDF(false) |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
const formatNumber = (number: string, digits: number) => { |
|
||||||
number = parseFloat(number).toFixed(digits) |
|
||||||
let value = Number(number).toLocaleString('en') |
|
||||||
if (!value.indexOf('NaN')) return '0.00' |
|
||||||
return value |
|
||||||
} |
|
||||||
|
|
||||||
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 size="sm">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="1">Importacion</option> |
|
||||||
<option value="2">Exportacion</option> |
|
||||||
</Form.Control> |
|
||||||
</div> |
|
||||||
<div className="col-md-1 right-label"> |
|
||||||
<Form.Label size="sm">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 c.agrupado === 1 ? ( |
|
||||||
<option value={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"> </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> |
|
||||||
</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} |
|
||||||
onCellClicked={(e) => getAE(e)} |
|
||||||
></AgGridReact> |
|
||||||
</div> |
|
||||||
<MsgInformativo |
|
||||||
show={show} |
|
||||||
msg={msg} |
|
||||||
header={header} |
|
||||||
msgColor={msgColor} |
|
||||||
closeToast={closeToast} |
|
||||||
/> |
|
||||||
</div> |
|
||||||
) |
|
||||||
} |
|
||||||
export default RptArcosa |
|
||||||
@ -1,308 +0,0 @@ |
|||||||
import React, { useEffect, useState } from 'react' |
|
||||||
//boostrap componentes
|
|
||||||
import { Button, Card, Form } from 'react-bootstrap' |
|
||||||
import { BsSearch, BsFileEarmarkExcel } from 'react-icons/bs' |
|
||||||
|
|
||||||
//interfaces
|
|
||||||
|
|
||||||
import { IRptFacturasFraccion } from '../../Interfaces/Reportes/IRptContsFacturasFraccion' |
|
||||||
|
|
||||||
import reportsDataService from '../../Services/Reportes/reportes.services' |
|
||||||
import { useDispatch } from 'react-redux' |
|
||||||
|
|
||||||
// Gui Components
|
|
||||||
import { MsgInformativo } from '../Utils/Toast/msgInformativo' |
|
||||||
import { TargetURL } from '../../Constants/TargetURL' |
|
||||||
// import DataTable from 'react-data-table-component'
|
|
||||||
import DataTable, { TableColumn } from 'react-data-table-component' |
|
||||||
|
|
||||||
//Other
|
|
||||||
import moment from 'moment' |
|
||||||
import * as XLSX from 'xlsx' |
|
||||||
import { string } from 'yup' |
|
||||||
const URL = new TargetURL() |
|
||||||
|
|
||||||
export default function RptPFacturasFraccion() { |
|
||||||
const [curURL, setCurURL] = useState(URL.get()) |
|
||||||
const [UserId, setUserId] = useState(() => { |
|
||||||
const stickyValue = window.localStorage.getItem('UserId') |
|
||||||
return stickyValue !== null ? JSON.parse(stickyValue) : 0 |
|
||||||
}) |
|
||||||
const [Data, setData] = useState<Array<IRptFacturasFraccion>>([]) |
|
||||||
const [filteredData, setFilteredData] = useState<Array<IRptFacturasFraccion>>( |
|
||||||
[] |
|
||||||
) |
|
||||||
|
|
||||||
const [msgColor, setMsgColor] = React.useState('primary') |
|
||||||
const [show, setShowMsg] = useState(false) |
|
||||||
const [header, setHeader] = useState('') |
|
||||||
const [msg, setMsg] = useState('') |
|
||||||
const [filtro, setFiltro] = useState('') |
|
||||||
// const gridRef = React.useRef<any>(null)
|
|
||||||
const [referencia, setReferencia] = useState('') |
|
||||||
|
|
||||||
const columnDefs = [ |
|
||||||
{ |
|
||||||
name: <div style={{ textAlign: 'center' }}>Factura</div>, |
|
||||||
width: '220px', |
|
||||||
selector: (row: IRptFacturasFraccion) => row.factura, |
|
||||||
sortable: true, |
|
||||||
filter: true, |
|
||||||
center: true |
|
||||||
}, |
|
||||||
{ |
|
||||||
name: <div style={{ textAlign: 'center' }}>Almacen</div>, |
|
||||||
width: '100px', |
|
||||||
selector: (row: IRptFacturasFraccion) => row.almacen, |
|
||||||
sortable: true, |
|
||||||
filter: true, |
|
||||||
center: true |
|
||||||
}, |
|
||||||
{ |
|
||||||
name: <div style={{ textAlign: 'center' }}>Orden</div>, |
|
||||||
width: '100px', |
|
||||||
selector: (row: IRptFacturasFraccion) => row.orden, |
|
||||||
sortable: true, |
|
||||||
filter: true, |
|
||||||
center: true, |
|
||||||
texAlign: 'center' |
|
||||||
}, |
|
||||||
{ |
|
||||||
name: <div style={{ textAlign: 'center' }}>Parte</div>, |
|
||||||
width: '150px', |
|
||||||
selector: (row: IRptFacturasFraccion) => row.parte, |
|
||||||
sortable: true, |
|
||||||
filter: true, |
|
||||||
center: true |
|
||||||
}, |
|
||||||
{ |
|
||||||
name: <div style={{ textAlign: 'center' }}>Pais</div>, |
|
||||||
width: '120px', |
|
||||||
selector: (row: IRptFacturasFraccion) => row.pais, |
|
||||||
sortable: true, |
|
||||||
filter: true, |
|
||||||
center: true |
|
||||||
}, |
|
||||||
{ |
|
||||||
name: <div style={{ textAlign: 'center' }}>Fraccion Factura XML</div>, |
|
||||||
width: '200px', |
|
||||||
selector: (row: IRptFacturasFraccion) => row.fraccionFacturaXML, |
|
||||||
sortable: true, |
|
||||||
filter: true, |
|
||||||
center: true |
|
||||||
}, |
|
||||||
{ |
|
||||||
name: <div style={{ textAlign: 'center' }}>Fraccion GEMCO</div>, |
|
||||||
width: '150px', |
|
||||||
selector: (row: IRptFacturasFraccion) => row.fraccionGEMCO, |
|
||||||
sortable: true, |
|
||||||
filter: true, |
|
||||||
center: true |
|
||||||
}, |
|
||||||
{ |
|
||||||
name: <div style={{ textAlign: 'center' }}>Nico GEMCO</div>, |
|
||||||
width: '120px', |
|
||||||
selector: (row: IRptFacturasFraccion) => row.nicoGEMCO, |
|
||||||
sortable: true, |
|
||||||
filter: true, |
|
||||||
center: true |
|
||||||
} |
|
||||||
] |
|
||||||
|
|
||||||
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 |
|
||||||
} |
|
||||||
|
|
||||||
const closeToast = (show: boolean): void => { |
|
||||||
setShowMsg(false) |
|
||||||
} |
|
||||||
|
|
||||||
const generaReporte = () => { |
|
||||||
if (!referencia) { |
|
||||||
setHeader('Error') |
|
||||||
setMsg('La referencia no puede estar vacía') |
|
||||||
setShowMsg(true) |
|
||||||
return |
|
||||||
} |
|
||||||
reportsDataService |
|
||||||
.getRptContsFacturasFraccion(referencia) // Usa la variable 'referencia' en lugar de 'Referencia'
|
|
||||||
.then((response) => { |
|
||||||
setData(response.data) |
|
||||||
setFilteredData(response.data) |
|
||||||
|
|
||||||
setHeader('Informativo') |
|
||||||
setMsg('Se encontró la siguiente información...') |
|
||||||
setShowMsg(true) |
|
||||||
}) |
|
||||||
.catch((e: Error) => { |
|
||||||
setHeader('Error') |
|
||||||
setMsg('Ocurrió un error: ' + e.message) |
|
||||||
setShowMsg(true) |
|
||||||
return |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
const downloadExcel = () => { |
|
||||||
console.log(Data) |
|
||||||
exportExcel(Data, 'Facturas Fraccion') |
|
||||||
} |
|
||||||
|
|
||||||
function exportExcel( |
|
||||||
jsonData: IRptFacturasFraccion[], |
|
||||||
fileName: string |
|
||||||
): void { |
|
||||||
let Heading = [ |
|
||||||
[ |
|
||||||
'Factura', |
|
||||||
'Almacen', |
|
||||||
'Orden', |
|
||||||
'Parte', |
|
||||||
'Pais', |
|
||||||
'Fraccion Factura XML', |
|
||||||
'Fraccion GEMCO', |
|
||||||
'Nico GEMCO' |
|
||||||
] |
|
||||||
] |
|
||||||
/* jsonData.forEach(function (v) { |
|
||||||
delete v.tipodeCambiodePedimento |
|
||||||
}) */ |
|
||||||
/* jsonData.map(function (item) { |
|
||||||
delete item.tipodeCambiodePedimento |
|
||||||
return item |
|
||||||
}) */ |
|
||||||
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() |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
const filtraReporte = (e: any) => { |
|
||||||
const searchText = e.target.value.toLowerCase() |
|
||||||
|
|
||||||
setFiltro(searchText) |
|
||||||
|
|
||||||
const filtered = Data.filter((item) => { |
|
||||||
return ( |
|
||||||
(item.factura && item.factura.toLowerCase().includes(searchText)) || |
|
||||||
(item.almacen && item.almacen.toLowerCase().includes(searchText)) || |
|
||||||
(item.orden && item.orden.toString().includes(searchText)) || |
|
||||||
(item.parte && item.parte.toLowerCase().includes(searchText)) || |
|
||||||
(item.pais && item.pais.toLowerCase().includes(searchText)) || |
|
||||||
(item.fraccionFacturaXML && |
|
||||||
item.fraccionFacturaXML.toLowerCase().includes(searchText)) || |
|
||||||
(item.fraccionGEMCO && |
|
||||||
item.fraccionGEMCO.toLowerCase().includes(searchText)) || |
|
||||||
(item.nicoGEMCO && String(item.nicoGEMCO).includes(searchText)) |
|
||||||
) |
|
||||||
}) |
|
||||||
|
|
||||||
// console.log('Filtered Data:', filtered)
|
|
||||||
|
|
||||||
setFilteredData(filtered) |
|
||||||
} |
|
||||||
|
|
||||||
return ( |
|
||||||
<div> |
|
||||||
<Card> |
|
||||||
<Card.Body> |
|
||||||
<div className="row"> |
|
||||||
<div className="col-md-1" style={{ textAlign: 'right' }}> |
|
||||||
<Form.Label size="sm">Referencia</Form.Label> |
|
||||||
</div> |
|
||||||
<div className="col-md-1" style={{ width: '130px' }}> |
|
||||||
<Form.Control |
|
||||||
type="text" |
|
||||||
size="sm" |
|
||||||
value={referencia} |
|
||||||
onChange={(e) => setReferencia(e.target.value)} |
|
||||||
/> |
|
||||||
</div> |
|
||||||
|
|
||||||
<div className="col-md-1" style={{ width: '5px' }}></div> |
|
||||||
<div className="col-md-4" style={{ width: '150px ' }}> |
|
||||||
<Button |
|
||||||
variant="primary" |
|
||||||
size="sm" |
|
||||||
onClick={() => { |
|
||||||
generaReporte() |
|
||||||
}} |
|
||||||
> |
|
||||||
Buscar <BsSearch /> |
|
||||||
</Button> |
|
||||||
</div> |
|
||||||
|
|
||||||
<div className="col-md-1" style={{ width: '50px' }}></div> |
|
||||||
|
|
||||||
<div className="col-md-4"> |
|
||||||
<Form.Control |
|
||||||
type="text" |
|
||||||
size="sm" |
|
||||||
placeholder="Search..." |
|
||||||
onChange={(e) => { |
|
||||||
filtraReporte(e) |
|
||||||
}} |
|
||||||
/> |
|
||||||
</div> |
|
||||||
<div className="col-md-1" style={{ width: '260px' }}></div> |
|
||||||
<div className="col-md-1"> |
|
||||||
<Button |
|
||||||
size="sm" |
|
||||||
variant="success" |
|
||||||
onClick={() => { |
|
||||||
downloadExcel() |
|
||||||
}} |
|
||||||
> |
|
||||||
Excel <BsFileEarmarkExcel /> |
|
||||||
</Button> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</Card.Body> |
|
||||||
</Card> |
|
||||||
|
|
||||||
<Card> |
|
||||||
<Card.Body> |
|
||||||
<div |
|
||||||
className="ag-theme-alpine" |
|
||||||
style={{ height: 400, width: '100%', textAlign: 'center' }} |
|
||||||
> |
|
||||||
<DataTable |
|
||||||
columns={columnDefs} |
|
||||||
data={filteredData} |
|
||||||
defaultSortAsc={true} |
|
||||||
striped={true} |
|
||||||
dense={true} |
|
||||||
paginationPerPage={10} |
|
||||||
pagination |
|
||||||
highlightOnHover |
|
||||||
pointerOnHover |
|
||||||
style={{ height: 300, width: '100%', textAlign: 'center' }} |
|
||||||
noHeader // Para evitar que se muestre el encabezado del DataTable
|
|
||||||
onRowClicked={(row) => { |
|
||||||
// Aquí puedes manejar el clic en una fila si es necesario
|
|
||||||
}} |
|
||||||
/> |
|
||||||
</div> |
|
||||||
</Card.Body> |
|
||||||
</Card> |
|
||||||
<MsgInformativo |
|
||||||
show={show} |
|
||||||
msg={msg} |
|
||||||
header={header} |
|
||||||
msgColor={msgColor} |
|
||||||
closeToast={closeToast} |
|
||||||
/> |
|
||||||
</div> |
|
||||||
) |
|
||||||
} |
|
||||||
@ -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> |
||||||
|
) |
||||||
|
} |
||||||
@ -1,322 +0,0 @@ |
|||||||
import React, { FC, useEffect, useState } from 'react' |
|
||||||
// Bootstrap components
|
|
||||||
import { Button, Card, Form } from 'react-bootstrap' |
|
||||||
import { BsSearch, BsFileEarmarkExcel } from 'react-icons/bs' |
|
||||||
// Interfaces
|
|
||||||
import IClientes from '../../Interfaces/Catalogos/IClientes' |
|
||||||
import IArchivoElectronico from '../../Interfaces/IArchivoElectronico' |
|
||||||
// DTOs
|
|
||||||
import DTOReporte from '../../DTO/DTOReporte' |
|
||||||
// Services
|
|
||||||
import reportsDataService from '../../Services/Reportes/reportes.services' |
|
||||||
import ClientesDataService from '../../Services/Catalogos/Clientes.Services' |
|
||||||
|
|
||||||
import { useDispatch } from 'react-redux' |
|
||||||
import { setArchivoElectronico } from '../../store/features/Reportes/ArchivoElectronico' |
|
||||||
// GUI components
|
|
||||||
import { MsgInformativo } from '../Utils/Toast/msgInformativo' |
|
||||||
import { AgGridReact } from 'ag-grid-react' |
|
||||||
import { RowClickedEvent } from 'ag-grid-community' |
|
||||||
import { TargetURL } from '../../Constants/TargetURL' |
|
||||||
//Other
|
|
||||||
import moment from 'moment' |
|
||||||
import * as XLSX from 'xlsx' |
|
||||||
import IRptFacturasPedimentosPagados from '../../Interfaces/Reportes/IRptFacturasPedimentosPagados' |
|
||||||
interface IProps {} |
|
||||||
|
|
||||||
const RptFacturasPedimentosPagados: FC<IProps> = (props) => { |
|
||||||
const [UserId, setUserId] = useState(() => { |
|
||||||
const stickyValue = window.localStorage.getItem('UserId') |
|
||||||
return stickyValue !== null ? JSON.parse(stickyValue) : 0 |
|
||||||
}) |
|
||||||
const [Data, setData] = useState<Array<IRptFacturasPedimentosPagados>>([]) |
|
||||||
const [filteredData, setFilteredData] = useState< |
|
||||||
Array<IRptFacturasPedimentosPagados> |
|
||||||
>([]) |
|
||||||
const [Inicio, setInicio] = useState(currentDate()) |
|
||||||
const [Fin, setFin] = useState(currentDate()) |
|
||||||
const [TipoOperacion, setTipoOperacion] = useState(1) |
|
||||||
const [Cliente, setCliente] = useState(0) |
|
||||||
const [Clientes, setClientes] = useState<Array<IClientes>>() |
|
||||||
const [msgColor, setMsgColor] = React.useState('primary') |
|
||||||
const [show, setShowMsg] = useState(false) |
|
||||||
const [header, setHeader] = useState('') |
|
||||||
const [msg, setMsg] = useState('') |
|
||||||
const [filtro, setFiltro] = useState('') |
|
||||||
const gridRef = React.useRef<any>(null) |
|
||||||
const [columnaVerPDF, setcolumnaVerPDF] = useState(false) |
|
||||||
const dispatch = useDispatch() |
|
||||||
const [columnDefs] = useState([ |
|
||||||
{ |
|
||||||
field: 'referencia', |
|
||||||
headerName: 'Referencia', |
|
||||||
sortable: true, |
|
||||||
filter: true, |
|
||||||
width: 300 |
|
||||||
}, |
|
||||||
{ |
|
||||||
field: 'pedido', |
|
||||||
headerName: 'Pedido', |
|
||||||
sortable: true, |
|
||||||
filter: true, |
|
||||||
width: 300 |
|
||||||
}, |
|
||||||
{ |
|
||||||
field: 'factura', |
|
||||||
headerName: 'Factura', |
|
||||||
sortable: true, |
|
||||||
filter: true, |
|
||||||
width: 400 |
|
||||||
}, |
|
||||||
{ |
|
||||||
field: 'uuid', |
|
||||||
headerName: 'UUID', |
|
||||||
sortable: true, |
|
||||||
filter: true, |
|
||||||
width: 350 |
|
||||||
}, |
|
||||||
{ |
|
||||||
field: 'fecha', |
|
||||||
headerName: 'Fecha', |
|
||||||
sortable: true, |
|
||||||
filter: true, |
|
||||||
width: 300 |
|
||||||
}, |
|
||||||
|
|
||||||
{ |
|
||||||
field: 'razonSocial', |
|
||||||
headerName: 'RazonSocial', |
|
||||||
sortable: true, |
|
||||||
filter: true, |
|
||||||
width: 300 |
|
||||||
} |
|
||||||
]) |
|
||||||
|
|
||||||
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 |
|
||||||
} |
|
||||||
|
|
||||||
const closeToast = (show: boolean): void => { |
|
||||||
setShowMsg(false) |
|
||||||
} |
|
||||||
|
|
||||||
const generaReporte = () => { |
|
||||||
if (Cliente === 0) { |
|
||||||
setHeader('Error') |
|
||||||
setMsg('Seleccion el cliente') |
|
||||||
setShowMsg(true) |
|
||||||
return |
|
||||||
} |
|
||||||
const data: DTOReporte = { |
|
||||||
Inicio: moment(Inicio).format('YYYY-MM-DD'), |
|
||||||
Fin: moment(Fin).format('YYYY-MM-DD'), |
|
||||||
TipoOperacion: TipoOperacion, |
|
||||||
NoCliente: Cliente, |
|
||||||
IdUsuario: UserId |
|
||||||
} |
|
||||||
reportsDataService |
|
||||||
.getRptFacturasPedimentosPagados(data) |
|
||||||
.then((response) => { |
|
||||||
setData(response.data) |
|
||||||
setFilteredData(response.data) |
|
||||||
setHeader('Informativo') |
|
||||||
setMsg('Se encontro la siguiente informacion...') |
|
||||||
setShowMsg(true) |
|
||||||
}) |
|
||||||
.catch((e: Error) => { |
|
||||||
setHeader('Error') |
|
||||||
setMsg('Ocurrio un error: ' + e) |
|
||||||
setShowMsg(true) |
|
||||||
return |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
useEffect(() => { |
|
||||||
ClientesDataService.getAllClientes(parseInt(UserId)) |
|
||||||
.then((response) => { |
|
||||||
setClientes(response.data) |
|
||||||
}) |
|
||||||
.catch((e: Error) => { |
|
||||||
setHeader('Error') |
|
||||||
setMsg('Ocurrio un error: ' + e) |
|
||||||
setShowMsg(true) |
|
||||||
return |
|
||||||
}) |
|
||||||
}, []) |
|
||||||
|
|
||||||
const downloadExcel = () => { |
|
||||||
exportExcel(Data, 'FacturasEnPedimentos') |
|
||||||
} |
|
||||||
|
|
||||||
function exportExcel(jsonData: any[], fileName: string): void { |
|
||||||
let Heading = [ |
|
||||||
['Referencia', 'Pedido', 'Factura', 'UUID', 'Fecha', 'RazonSocial'] |
|
||||||
] |
|
||||||
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() |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
const filtraReporte = (e: any) => { |
|
||||||
setFiltro(e.target.value) |
|
||||||
gridRef.current.api.setQuickFilter(e.target.value) |
|
||||||
} |
|
||||||
|
|
||||||
async function getAE(e: any) { |
|
||||||
if (e.column.colId === 'ver pedimento') { |
|
||||||
setcolumnaVerPDF(true) |
|
||||||
} else { |
|
||||||
setcolumnaVerPDF(false) |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
const formatNumber = (number: string, digits: number) => { |
|
||||||
number = parseFloat(number).toFixed(digits) |
|
||||||
let value = Number(number).toLocaleString('en') |
|
||||||
if (!value.indexOf('NaN')) return '0.00' |
|
||||||
return value |
|
||||||
} |
|
||||||
|
|
||||||
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 size="sm">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="1">Importacion</option> |
|
||||||
<option value="2">Exportacion</option> |
|
||||||
</Form.Control> |
|
||||||
</div> |
|
||||||
<div className="col-md-1 right-label"> |
|
||||||
<Form.Label size="sm">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 c.agrupado === 1 ? ( |
|
||||||
<option value={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"> </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> |
|
||||||
</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} |
|
||||||
onCellClicked={(e) => getAE(e)} |
|
||||||
></AgGridReact> |
|
||||||
</div> |
|
||||||
<MsgInformativo |
|
||||||
show={show} |
|
||||||
msg={msg} |
|
||||||
header={header} |
|
||||||
msgColor={msgColor} |
|
||||||
closeToast={closeToast} |
|
||||||
/> |
|
||||||
</div> |
|
||||||
) |
|
||||||
} |
|
||||||
export default RptFacturasPedimentosPagados |
|
||||||
@ -1,250 +0,0 @@ |
|||||||
import React, { useEffect, useState } from 'react' |
|
||||||
//boostrap componentes
|
|
||||||
import { Button, Card, Form } from 'react-bootstrap' |
|
||||||
import { BsSearch, BsFileEarmarkExcel } from 'react-icons/bs' |
|
||||||
//interfaces
|
|
||||||
|
|
||||||
|
|
||||||
import { IRptMonitoreoFacturaPagadasAmazon} from "../../Interfaces/Reportes/IRptMonitoreoFacturasPagadasAmazon"; |
|
||||||
//dtos
|
|
||||||
|
|
||||||
//Services
|
|
||||||
import reportsDataService from '../../Services/Reportes/reportes.services' |
|
||||||
import ClientesDataService from '../../Services/Catalogos/Clientes.Services' |
|
||||||
|
|
||||||
import { useDispatch } from 'react-redux' |
|
||||||
|
|
||||||
// Gui Components
|
|
||||||
import { MsgInformativo } from '../Utils/Toast/msgInformativo' |
|
||||||
import { AgGridReact } from 'ag-grid-react' |
|
||||||
import { TargetURL } from '../../Constants/TargetURL' |
|
||||||
//Other
|
|
||||||
import moment from 'moment' |
|
||||||
import * as XLSX from 'xlsx' |
|
||||||
import DTORPTMonitorFacturasPagAmazon from '../../DTO/Utils/DTORPTMonitorFacturasPagAmazon'; |
|
||||||
|
|
||||||
const URL = new TargetURL() |
|
||||||
|
|
||||||
export default function RptMonitoreoFacturasPagadasAmazon(){ |
|
||||||
|
|
||||||
const [UserId, setUserId] = useState(() => { |
|
||||||
const stickyValue = window.localStorage.getItem('UserId') |
|
||||||
return stickyValue !== null ? JSON.parse(stickyValue) : 0 |
|
||||||
}) |
|
||||||
const [Data, setData] = useState<Array<IRptMonitoreoFacturaPagadasAmazon>>([]) |
|
||||||
const [filteredData, setFilteredData] = useState<Array<IRptMonitoreoFacturaPagadasAmazon>>([]) |
|
||||||
const [Inicio, setInicio] = useState(currentDate()) |
|
||||||
const [Fin, setFin] = useState(currentDate()) |
|
||||||
|
|
||||||
// const [Clientes, setClientes] = useState<Array<IClientes>>()
|
|
||||||
const [msgColor, setMsgColor] = React.useState('primary') |
|
||||||
const [show, setShowMsg] = useState(false) |
|
||||||
const [header, setHeader] = useState('') |
|
||||||
const [msg, setMsg] = useState('') |
|
||||||
const [filtro, setFiltro] = useState('') |
|
||||||
const gridRef = React.useRef<any>(null) |
|
||||||
const [columnaVerPDF, setcolumnaVerPDF] = useState(false) |
|
||||||
const dispatch = useDispatch() |
|
||||||
const [columnDefs] = useState([ |
|
||||||
{field: 'referencia' , sortable: true , filter: true },
|
|
||||||
{ field: 'factura', sortable: true, filter: true }, |
|
||||||
{ field: 'clasificador', sortable: true, filter: true }, |
|
||||||
{ field: 'fechaFactura', sortable: true, filter: true }, |
|
||||||
{ field: 'fCreacion', sortable: true, filter: true }, |
|
||||||
{ field: 'fechaPago', sortable:true, filter: true },
|
|
||||||
{ field: 'cantidadDiasFactura', sortable:true, filter: true },
|
|
||||||
{ field: 'cantidadDiasPago', sortable:true, filter: true },
|
|
||||||
{ field : 'cantidadASIN' , sortable: true, filter: true },
|
|
||||||
{field: 'cantFracIguales' , sortable: true, filter: true },
|
|
||||||
{ field: 'cantFracDiferentes' , sortable: true, filter: true},
|
|
||||||
{ field: 'cantidadSideline', sortable: true, filter: true } |
|
||||||
]) |
|
||||||
|
|
||||||
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 |
|
||||||
} |
|
||||||
|
|
||||||
const closeToast = (show: boolean): void => { |
|
||||||
setShowMsg(false) |
|
||||||
} |
|
||||||
|
|
||||||
const generaReporte = () => { |
|
||||||
|
|
||||||
const data: DTORPTMonitorFacturasPagAmazon = { |
|
||||||
Inicio: moment(Inicio).format('YYYY-MM-DD'), |
|
||||||
Fin: moment(Fin).format('YYYY-MM-DD') |
|
||||||
|
|
||||||
|
|
||||||
} |
|
||||||
reportsDataService |
|
||||||
.getRptMonitoreoFacturasPagadasAmazon(data) |
|
||||||
.then((response) => { |
|
||||||
setData(response.data) |
|
||||||
setFilteredData(response.data) |
|
||||||
setHeader('Informativo') |
|
||||||
setMsg('Se encontro la siguiente informacion...') |
|
||||||
setShowMsg(true) |
|
||||||
}) |
|
||||||
.catch((e: Error) => { |
|
||||||
setHeader('Error') |
|
||||||
setMsg('Ocurrio un error: ' + e) |
|
||||||
setShowMsg(true) |
|
||||||
return |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
useEffect(() => { |
|
||||||
ClientesDataService.getAllClientes(parseInt(UserId)) |
|
||||||
.then((response) => { |
|
||||||
|
|
||||||
}) |
|
||||||
.catch((e: Error) => { |
|
||||||
setHeader('Error') |
|
||||||
setMsg('Ocurrio un error: ' + e) |
|
||||||
setShowMsg(true) |
|
||||||
return |
|
||||||
}) |
|
||||||
}, []) |
|
||||||
|
|
||||||
const downloadExcel = () => { |
|
||||||
console.log(Data) |
|
||||||
exportExcel(Data, 'MonitorFacturasPagadasAmazon') |
|
||||||
} |
|
||||||
|
|
||||||
function exportExcel(jsonData: IRptMonitoreoFacturaPagadasAmazon[], fileName: string): void { |
|
||||||
let Heading = [ |
|
||||||
[ |
|
||||||
'Referencia',
|
|
||||||
'Factura', |
|
||||||
'FechaFactura', |
|
||||||
'Clasificador', |
|
||||||
'FCreacion', |
|
||||||
'FechaPago', |
|
||||||
'CantidadDiasFactura', |
|
||||||
'CantidadDiasPago', |
|
||||||
'CantidadASIN',
|
|
||||||
'CantidadFraccionesIguales',
|
|
||||||
'CantidadFraccionesDiferentes',
|
|
||||||
'CantidadSideline' |
|
||||||
|
|
||||||
|
|
||||||
], |
|
||||||
] |
|
||||||
|
|
||||||
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() |
|
||||||
} |
|
||||||
} |
|
||||||
const filtraReporte = (e: any) => { |
|
||||||
setFiltro(e.target.value) |
|
||||||
gridRef.current.api.setQuickFilter(e.target.value) |
|
||||||
} |
|
||||||
|
|
||||||
const formatNumber = (number: string) => { |
|
||||||
number = parseFloat(number).toFixed(2) |
|
||||||
let value = Number(number).toLocaleString('en') |
|
||||||
if (!value.indexOf('NaN')) return '0.00' |
|
||||||
return value |
|
||||||
} |
|
||||||
return ( |
|
||||||
<div> |
|
||||||
<Card> |
|
||||||
<Card.Body> |
|
||||||
<div className='row'> |
|
||||||
<div className='col-md-2'> |
|
||||||
<div className='d-flex align-items-center'> |
|
||||||
<Form.Label></Form.Label> |
|
||||||
<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> |
|
||||||
<div className='col-md-2'> |
|
||||||
<div className='d-flex align-items-center'> |
|
||||||
<Form.Label></Form.Label> |
|
||||||
<Form.Control |
|
||||||
defaultValue={Fin} |
|
||||||
type='date' |
|
||||||
name='Fin' |
|
||||||
placeholder='Fin' |
|
||||||
title='Fin' |
|
||||||
alt='Fin' |
|
||||||
onChange={(e) => setFin(e.target.value)} |
|
||||||
size='sm' |
|
||||||
/> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
<div className='col-md-1 d-flex align-items-center'> |
|
||||||
<Button |
|
||||||
variant='primary' |
|
||||||
size='sm' |
|
||||||
onClick={() => { |
|
||||||
generaReporte(); |
|
||||||
}} |
|
||||||
> |
|
||||||
<BsSearch /> Buscar |
|
||||||
</Button> |
|
||||||
</div> |
|
||||||
<div className='col-md-3 d-flex align-items-center'> |
|
||||||
<Form.Control |
|
||||||
type='text' |
|
||||||
size='sm' |
|
||||||
placeholder='Search...' |
|
||||||
onChange={(e) => { |
|
||||||
filtraReporte(e); |
|
||||||
}} |
|
||||||
/> |
|
||||||
</div> |
|
||||||
<div className='col-md-1 d-flex align-items-center'> |
|
||||||
<Button |
|
||||||
size='sm' |
|
||||||
variant='success' |
|
||||||
onClick={() => { |
|
||||||
downloadExcel(); |
|
||||||
}} |
|
||||||
> |
|
||||||
<BsFileEarmarkExcel /> Excel |
|
||||||
</Button> |
|
||||||
</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} |
|
||||||
></AgGridReact> |
|
||||||
</div> |
|
||||||
<MsgInformativo show={show} msg={msg} header={header} msgColor={msgColor} closeToast={closeToast} /> |
|
||||||
</div> |
|
||||||
); |
|
||||||
|
|
||||||
|
|
||||||
} |
|
||||||
@ -1,409 +0,0 @@ |
|||||||
import React, { FC, useEffect, useState } from 'react' |
|
||||||
// Bootstrap components
|
|
||||||
import { Button, Card, Form } from 'react-bootstrap' |
|
||||||
import { BsSearch, BsFileEarmarkExcel } from 'react-icons/bs' |
|
||||||
// Interfaces
|
|
||||||
import IClientes from '../../Interfaces/Catalogos/IClientes' |
|
||||||
import IArchivoElectronico from '../../Interfaces/IArchivoElectronico' |
|
||||||
// DTOs
|
|
||||||
import DTOReporte from '../../DTO/DTOReporte' |
|
||||||
// Services
|
|
||||||
import reportsDataService from '../../Services/Reportes/reportes.services' |
|
||||||
import ClientesDataService from '../../Services/Catalogos/Clientes.Services' |
|
||||||
// Redux
|
|
||||||
import { useDispatch } from 'react-redux' |
|
||||||
import { setArchivoElectronico } from '../../store/features/Reportes/ArchivoElectronico' |
|
||||||
// GUI components
|
|
||||||
import { MsgInformativo } from '../Utils/Toast/msgInformativo' |
|
||||||
import { AgGridReact } from 'ag-grid-react' |
|
||||||
import { RowClickedEvent } from 'ag-grid-community' |
|
||||||
import { TargetURL } from '../../Constants/TargetURL' |
|
||||||
//Other
|
|
||||||
import moment from 'moment' |
|
||||||
import * as XLSX from 'xlsx' |
|
||||||
import IRptOperacionesPagadasMisionFood from '../../Interfaces/Reportes/IRptOperacionesPagadasMisionFood' |
|
||||||
|
|
||||||
interface IProps {} |
|
||||||
|
|
||||||
const RptOperacionesPagadasMisionFood: FC<IProps> = (props) => { |
|
||||||
const [UserId, setUserId] = useState(() => { |
|
||||||
const stickyValue = window.localStorage.getItem('UserId') |
|
||||||
return stickyValue !== null ? JSON.parse(stickyValue) : 0 |
|
||||||
}) |
|
||||||
const [Data, setData] = useState<Array<IRptOperacionesPagadasMisionFood>>([]) |
|
||||||
const [filteredData, setFilteredData] = useState< |
|
||||||
Array<IRptOperacionesPagadasMisionFood> |
|
||||||
>([]) |
|
||||||
const [Inicio, setInicio] = useState(currentDate()) |
|
||||||
const [Fin, setFin] = useState(currentDate()) |
|
||||||
const [TipoOperacion, setTipoOperacion] = useState(1) |
|
||||||
const [Cliente, setCliente] = useState(0) |
|
||||||
const [Clientes, setClientes] = useState<Array<IClientes>>() |
|
||||||
const [msgColor, setMsgColor] = React.useState('primary') |
|
||||||
const [show, setShowMsg] = useState(false) |
|
||||||
const [header, setHeader] = useState('') |
|
||||||
const [msg, setMsg] = useState('') |
|
||||||
const [filtro, setFiltro] = useState('') |
|
||||||
const gridRef = React.useRef<any>(null) |
|
||||||
const [columnaVerPDF, setcolumnaVerPDF] = useState(false) |
|
||||||
const dispatch = useDispatch() |
|
||||||
const [columnDefs] = useState([ |
|
||||||
{ |
|
||||||
field: 'tipoOperacion', |
|
||||||
headerName: 'TipoOperacion', |
|
||||||
sortable: true, |
|
||||||
filter: true |
|
||||||
}, |
|
||||||
{ |
|
||||||
field: 'sPedimento', |
|
||||||
headerName: 'Pedimento', |
|
||||||
sortable: true, |
|
||||||
filter: true |
|
||||||
}, |
|
||||||
{ |
|
||||||
field: 'uuid', |
|
||||||
headerName: 'UUID', |
|
||||||
sortable: true, |
|
||||||
filter: true, |
|
||||||
width: 400 |
|
||||||
}, |
|
||||||
{ |
|
||||||
field: 'folioFactura', |
|
||||||
headerName: 'FolioFactura', |
|
||||||
sortable: true, |
|
||||||
filter: true, |
|
||||||
width: 500 |
|
||||||
}, |
|
||||||
{ |
|
||||||
field: 'dFechaFirmaBanco', |
|
||||||
headerName: 'FechaFirmaBanco', |
|
||||||
sortable: true, |
|
||||||
filter: true |
|
||||||
}, |
|
||||||
{ |
|
||||||
field: 'sRazonSocial', |
|
||||||
headerName: 'RazonSocial', |
|
||||||
sortable: true, |
|
||||||
filter: true |
|
||||||
}, |
|
||||||
{ field: 'sRFC', headerName: 'RFC', sortable: true, filter: true }, |
|
||||||
{ |
|
||||||
field: 'sReferencia', |
|
||||||
headerName: 'Referencia', |
|
||||||
sortable: true, |
|
||||||
filter: true |
|
||||||
}, |
|
||||||
|
|
||||||
{ |
|
||||||
field: 'sEDocument', |
|
||||||
headerName: 'EDocument', |
|
||||||
sortable: true, |
|
||||||
filter: true |
|
||||||
}, |
|
||||||
{ |
|
||||||
field: 'sHRazonSocial', |
|
||||||
headerName: 'SHRazonSocial', |
|
||||||
sortable: true, |
|
||||||
filter: true, |
|
||||||
width: 300 |
|
||||||
}, |
|
||||||
{ |
|
||||||
field: 'sHidentificadorProv', |
|
||||||
headerName: 'HidentificadorProv', |
|
||||||
sortable: true, |
|
||||||
filter: true, |
|
||||||
width: 300 |
|
||||||
}, |
|
||||||
{ |
|
||||||
field: 'aa', |
|
||||||
headerName: 'AA', |
|
||||||
sortable: true, |
|
||||||
filter: true |
|
||||||
}, |
|
||||||
{ |
|
||||||
field: 'rfcaa', |
|
||||||
headerName: 'RFCAA', |
|
||||||
sortable: true, |
|
||||||
filter: true |
|
||||||
}, |
|
||||||
{ |
|
||||||
field: 'incoterm', |
|
||||||
headerName: 'Incoterm', |
|
||||||
sortable: true, |
|
||||||
filter: true |
|
||||||
}, |
|
||||||
{ |
|
||||||
field: 'caja', |
|
||||||
headerName: 'Caja', |
|
||||||
sortable: true, |
|
||||||
filter: true |
|
||||||
}, |
|
||||||
{ |
|
||||||
field: 'acuceDoda', |
|
||||||
headerName: 'AcuceDoda', |
|
||||||
sortable: true, |
|
||||||
filter: true |
|
||||||
}, |
|
||||||
{ |
|
||||||
field: 'transportista', |
|
||||||
headerName: 'Transportista', |
|
||||||
sortable: true, |
|
||||||
filter: true, |
|
||||||
width: 300 |
|
||||||
}, |
|
||||||
{ |
|
||||||
field: 'edocument', |
|
||||||
headerName: 'Edocument', |
|
||||||
sortable: true, |
|
||||||
filter: true, |
|
||||||
width: 1000 |
|
||||||
} |
|
||||||
]) |
|
||||||
|
|
||||||
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 |
|
||||||
} |
|
||||||
|
|
||||||
const closeToast = (show: boolean): void => { |
|
||||||
setShowMsg(false) |
|
||||||
} |
|
||||||
|
|
||||||
const generaReporte = () => { |
|
||||||
if (Cliente === 0) { |
|
||||||
setHeader('Error') |
|
||||||
setMsg('Seleccion el cliente') |
|
||||||
setShowMsg(true) |
|
||||||
return |
|
||||||
} |
|
||||||
const data: DTOReporte = { |
|
||||||
Inicio: moment(Inicio).format('YYYY-MM-DD'), |
|
||||||
Fin: moment(Fin).format('YYYY-MM-DD'), |
|
||||||
TipoOperacion: TipoOperacion, |
|
||||||
NoCliente: Cliente, |
|
||||||
IdUsuario: UserId |
|
||||||
} |
|
||||||
reportsDataService |
|
||||||
.getRptOPeracionesPagadasMisionFood(data) |
|
||||||
.then((response) => { |
|
||||||
setData(response.data) |
|
||||||
setFilteredData(response.data) |
|
||||||
setHeader('Informativo') |
|
||||||
setMsg('Se encontro la siguiente informacion...') |
|
||||||
setShowMsg(true) |
|
||||||
}) |
|
||||||
.catch((e: Error) => { |
|
||||||
setHeader('Error') |
|
||||||
setMsg('Ocurrio un error: ' + e) |
|
||||||
setShowMsg(true) |
|
||||||
return |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
useEffect(() => { |
|
||||||
ClientesDataService.getAllClientes(parseInt(UserId)) |
|
||||||
.then((response) => { |
|
||||||
setClientes(response.data) |
|
||||||
}) |
|
||||||
.catch((e: Error) => { |
|
||||||
setHeader('Error') |
|
||||||
setMsg('Ocurrio un error: ' + e) |
|
||||||
setShowMsg(true) |
|
||||||
return |
|
||||||
}) |
|
||||||
}, []) |
|
||||||
|
|
||||||
const downloadExcel = () => { |
|
||||||
exportExcel(Data, 'OperacionesPagadasMissionFood') |
|
||||||
} |
|
||||||
|
|
||||||
function exportExcel(jsonData: any[], fileName: string): void { |
|
||||||
let Heading = [ |
|
||||||
[ |
|
||||||
'TipoOperacion', |
|
||||||
'Pedimento', |
|
||||||
'UUID', |
|
||||||
'FolioFactura', |
|
||||||
'FechaFirmaBanco', |
|
||||||
'RazonSocial', |
|
||||||
'RFC', |
|
||||||
'Referencia', |
|
||||||
'EDocument', |
|
||||||
'HRazonSocial', |
|
||||||
'HidentificadorProv', |
|
||||||
'AA', |
|
||||||
'RFCAA', |
|
||||||
'Incoterm', |
|
||||||
'Caja', |
|
||||||
'AcuceDoda', |
|
||||||
'Transportista', |
|
||||||
'Edocument' |
|
||||||
] |
|
||||||
] |
|
||||||
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() |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
const filtraReporte = (e: any) => { |
|
||||||
setFiltro(e.target.value) |
|
||||||
gridRef.current.api.setQuickFilter(e.target.value) |
|
||||||
} |
|
||||||
|
|
||||||
async function getAE(e: any) { |
|
||||||
if (e.column.colId === 'ver pedimento') { |
|
||||||
setcolumnaVerPDF(true) |
|
||||||
} else { |
|
||||||
setcolumnaVerPDF(false) |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
const formatNumber = (number: string, digits: number) => { |
|
||||||
number = parseFloat(number).toFixed(digits) |
|
||||||
let value = Number(number).toLocaleString('en') |
|
||||||
if (!value.indexOf('NaN')) return '0.00' |
|
||||||
return value |
|
||||||
} |
|
||||||
|
|
||||||
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 size="sm">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="1">Importacion</option> |
|
||||||
<option value="2">Exportacion</option> |
|
||||||
</Form.Control> |
|
||||||
</div> |
|
||||||
<div className="col-md-1 right-label"> |
|
||||||
<Form.Label size="sm">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 c.agrupado === 1 ? ( |
|
||||||
<option value={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"> </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> |
|
||||||
</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} |
|
||||||
onCellClicked={(e) => getAE(e)} |
|
||||||
></AgGridReact> |
|
||||||
</div> |
|
||||||
<MsgInformativo |
|
||||||
show={show} |
|
||||||
msg={msg} |
|
||||||
header={header} |
|
||||||
msgColor={msgColor} |
|
||||||
closeToast={closeToast} |
|
||||||
/> |
|
||||||
</div> |
|
||||||
) |
|
||||||
} |
|
||||||
export default RptOperacionesPagadasMisionFood |
|
||||||
@ -1,417 +0,0 @@ |
|||||||
import React, { useEffect, useState } from 'react' |
|
||||||
//boostrap componentes
|
|
||||||
import { Button, Card, Form } from 'react-bootstrap' |
|
||||||
import { BsCloudDownload, BsSearch, BsFileEarmarkExcel } from 'react-icons/bs' |
|
||||||
//interfaces
|
|
||||||
import IClientes from '../../Interfaces/Catalogos/IClientes' |
|
||||||
import IArchivoElectronico from '../../Interfaces/IArchivoElectronico' |
|
||||||
import { IRptPedimentosPagadosFacturasCruzadas } from '../../Interfaces/Reportes/IRptPedimentosPagadosFacturasCruzadas' |
|
||||||
//dtos
|
|
||||||
import DTOgetThesePedimentos from '../../DTO/DTOgetThesePedimentos' |
|
||||||
import DTOReporte from '../../DTO/DTOReporte' |
|
||||||
//Services
|
|
||||||
import reportsDataService from '../../Services/Reportes/reportes.services' |
|
||||||
import ClientesDataService from '../../Services/Catalogos/Clientes.Services' |
|
||||||
import AEOServices from '../../Services/Catalogos/ArchivoElectronico.Services' |
|
||||||
import { useDispatch } from 'react-redux' |
|
||||||
import { setArchivoElectronico } from '../../store/features/Reportes/ArchivoElectronico' |
|
||||||
// Gui Components
|
|
||||||
import { MsgInformativo } from '../Utils/Toast/msgInformativo' |
|
||||||
import { AgGridReact } from 'ag-grid-react' |
|
||||||
import { verPDF } from './customCells/verPDF' |
|
||||||
import { RowClickedEvent } from 'ag-grid-community' |
|
||||||
import { TargetURL } from '../../Constants/TargetURL' |
|
||||||
//Other
|
|
||||||
import moment from 'moment' |
|
||||||
import * as XLSX from 'xlsx' |
|
||||||
const URL = new TargetURL() |
|
||||||
|
|
||||||
export default function RptPedimentosPagadosFacturasCruzadas() { |
|
||||||
const [curURL, setCurURL] = useState(URL.get()) |
|
||||||
const [UserId, setUserId] = useState(() => { |
|
||||||
const stickyValue = window.localStorage.getItem('UserId') |
|
||||||
return stickyValue !== null ? JSON.parse(stickyValue) : 0 |
|
||||||
}) |
|
||||||
const [Data, setData] = useState< |
|
||||||
Array<IRptPedimentosPagadosFacturasCruzadas> |
|
||||||
>([]) |
|
||||||
const [filteredData, setFilteredData] = useState< |
|
||||||
Array<IRptPedimentosPagadosFacturasCruzadas> |
|
||||||
>([]) |
|
||||||
const [Inicio, setInicio] = useState(currentDate()) |
|
||||||
const [Fin, setFin] = useState(currentDate()) |
|
||||||
const [TipoOperacion, setTipoOperacion] = useState(1) |
|
||||||
const [Cliente, setCliente] = useState(0) |
|
||||||
const [Clientes, setClientes] = useState<Array<IClientes>>() |
|
||||||
const [msgColor, setMsgColor] = React.useState('primary') |
|
||||||
const [show, setShowMsg] = useState(false) |
|
||||||
const [header, setHeader] = useState('') |
|
||||||
const [msg, setMsg] = useState('') |
|
||||||
const [filtro, setFiltro] = useState('') |
|
||||||
const gridRef = React.useRef<any>(null) |
|
||||||
const [columnaVerPDF, setcolumnaVerPDF] = useState(false) |
|
||||||
const dispatch = useDispatch() |
|
||||||
const [columnDefs] = useState([ |
|
||||||
{ field: 'referencia', sortable: true, filter: true }, |
|
||||||
|
|
||||||
{ field: 'pedimento', sortable: true, filter: true }, |
|
||||||
{ field: 'clave', sortable: true, filter: true }, |
|
||||||
{ field: 'fechaFirmaBanco', sortable: true, filter: true }, |
|
||||||
{ field: 'tipoCambio', sortable: true, filter: true }, |
|
||||||
{ field: 'pesoBruto', sortable: true, filter: true }, |
|
||||||
{ field: 'paisVendedor', sortable: true, filter: true }, |
|
||||||
{ field: 'paisOrigen', sortable: true, filter: true }, |
|
||||||
{ field: 'numFacturas', sortable: true, filter: true }, |
|
||||||
{ field: 'factura', sortable: true, filter: true }, |
|
||||||
{ field: 'valorFactura', sortable: true, filter: true }, |
|
||||||
{ field: 'fraccion', sortable: true, filter: true }, |
|
||||||
{ field: 'descripcion', sortable: true, filter: true }, |
|
||||||
{ field: 'nClave', sortable: true, filter: true }, |
|
||||||
{ field: 'cantFacturas', sortable: true, filter: true }, |
|
||||||
{ |
|
||||||
field: 'valorAduana', |
|
||||||
sortable: true, |
|
||||||
filter: true, |
|
||||||
cellRenderer: (params: any) => { |
|
||||||
return params.value |
|
||||||
} |
|
||||||
}, |
|
||||||
{ field: 'incrementables', sortable: true, filter: true }, |
|
||||||
{ field: 'adValorem', sortable: true, filter: true }, |
|
||||||
{ field: 'dta', sortable: true, filter: true }, |
|
||||||
{ field: 'iva', sortable: true, filter: true }, |
|
||||||
{ field: 'efectivo', sortable: true, filter: true }, |
|
||||||
{ field: 'total', sortable: true, filter: true }, |
|
||||||
{ field: 'destino', sortable: true, filter: true }, |
|
||||||
{ field: 'cruce', sortable: true, filter: true }, |
|
||||||
{ field: 'remite', sortable: true, filter: true }, |
|
||||||
{ field: 'caja', sortable: true, filter: true }, |
|
||||||
{ field: 'valorComercial', sortable: true, filter: true }, |
|
||||||
{ field: 'incoterm', sortable: true, filter: true } |
|
||||||
]) |
|
||||||
|
|
||||||
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 |
|
||||||
} |
|
||||||
|
|
||||||
const closeToast = (show: boolean): void => { |
|
||||||
setShowMsg(false) |
|
||||||
} |
|
||||||
|
|
||||||
const generaReporte = () => { |
|
||||||
if (Cliente === 0) { |
|
||||||
setHeader('Error') |
|
||||||
setMsg('Seleccion el cliente') |
|
||||||
setShowMsg(true) |
|
||||||
return |
|
||||||
} |
|
||||||
const data: DTOReporte = { |
|
||||||
Inicio: moment(Inicio).format('YYYY-MM-DD'), |
|
||||||
Fin: moment(Fin).format('YYYY-MM-DD'), |
|
||||||
TipoOperacion: TipoOperacion, |
|
||||||
NoCliente: Cliente, |
|
||||||
IdUsuario: UserId |
|
||||||
} |
|
||||||
reportsDataService |
|
||||||
.getRptPedimentosPagadosFacturasCruzadas(data) |
|
||||||
.then((response) => { |
|
||||||
setData(response.data) |
|
||||||
setFilteredData(response.data) |
|
||||||
setHeader('Informativo') |
|
||||||
setMsg('Se encontro la siguiente informacion...') |
|
||||||
setShowMsg(true) |
|
||||||
}) |
|
||||||
.catch((e: Error) => { |
|
||||||
setHeader('Error') |
|
||||||
setMsg('Ocurrio un error: ' + e) |
|
||||||
setShowMsg(true) |
|
||||||
return |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
useEffect(() => { |
|
||||||
ClientesDataService.getAllClientes(parseInt(UserId)) |
|
||||||
.then((response) => { |
|
||||||
setClientes(response.data) |
|
||||||
}) |
|
||||||
.catch((e: Error) => { |
|
||||||
setHeader('Error') |
|
||||||
setMsg('Ocurrio un error: ' + e) |
|
||||||
setShowMsg(true) |
|
||||||
return |
|
||||||
}) |
|
||||||
}, []) |
|
||||||
|
|
||||||
const downloadExcel = () => { |
|
||||||
console.log(Data) |
|
||||||
exportExcel(Data, 'Pedimentos Pagados') |
|
||||||
} |
|
||||||
|
|
||||||
function exportExcel( |
|
||||||
jsonData: IRptPedimentosPagadosFacturasCruzadas[], |
|
||||||
fileName: string |
|
||||||
): void { |
|
||||||
let Heading = [ |
|
||||||
[ |
|
||||||
'Referencia', |
|
||||||
'Pedimento', |
|
||||||
'Clave', |
|
||||||
'FechaFirmaBanco', |
|
||||||
'TipoCambio', |
|
||||||
'PesoBruto', |
|
||||||
'PaisVendedor', |
|
||||||
'PaisOrigen', |
|
||||||
'NumFacturas', |
|
||||||
'Factura', |
|
||||||
'ValorFactura', |
|
||||||
'Fraccion', |
|
||||||
'Descripcion', |
|
||||||
'nClaves', |
|
||||||
'cantFacturas', |
|
||||||
'ValorAduana', |
|
||||||
'Incrementables', |
|
||||||
'Advalorem', |
|
||||||
'Dta', |
|
||||||
'Iva', |
|
||||||
'Efectivo', |
|
||||||
'Total', |
|
||||||
'Destino', |
|
||||||
'Cruce', |
|
||||||
'Remite', |
|
||||||
'Caja', |
|
||||||
'ValorComercial', |
|
||||||
'Inconterm' |
|
||||||
] |
|
||||||
] |
|
||||||
/* jsonData.forEach(function (v) { |
|
||||||
delete v.tipodeCambiodePedimento |
|
||||||
}) */ |
|
||||||
/* jsonData.map(function (item) { |
|
||||||
delete item.tipodeCambiodePedimento |
|
||||||
return item |
|
||||||
}) */ |
|
||||||
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() |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
const filtraReporte = (e: any) => { |
|
||||||
setFiltro(e.target.value) |
|
||||||
gridRef.current.api.setQuickFilter(e.target.value) |
|
||||||
} |
|
||||||
|
|
||||||
function getParams(e: RowClickedEvent) { |
|
||||||
const data: IArchivoElectronico = { |
|
||||||
Referencia: e.data.referencia, |
|
||||||
PedimentoLargo: '', |
|
||||||
NoCliente: Cliente, |
|
||||||
IdUsuario: 0, |
|
||||||
Archivo: '' |
|
||||||
} |
|
||||||
dispatch(setArchivoElectronico(data)) |
|
||||||
if (columnaVerPDF) { |
|
||||||
let P: string = e.data.pedimento |
|
||||||
P = P.substring(6) |
|
||||||
P = P.replace(' ', e.data.aduanaSeccionEntrada) |
|
||||||
window.open( |
|
||||||
`${curURL}/ArchivoElectronico/getFile?Referencia=${e.data.referencia}&PedimentoLargo=${P}&Nocliente=${Cliente}&IdUsuario=${UserId}` |
|
||||||
) |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
const downloadPDFs = () => { |
|
||||||
if (Cliente === 0) { |
|
||||||
setMsg('Seleccione el cliente') |
|
||||||
setHeader('Para poder continuar, favor de: ') |
|
||||||
setShowMsg(true) |
|
||||||
} |
|
||||||
let selectedNodes = gridRef.current.api.getSelectedNodes() |
|
||||||
let selectedData = selectedNodes.map((node: any) => node.data) |
|
||||||
interface IPedimentos { |
|
||||||
pedimento: string |
|
||||||
} |
|
||||||
const Pedimentos = selectedData.map((item: IPedimentos) => item.pedimento) |
|
||||||
const data: DTOgetThesePedimentos = { |
|
||||||
Inicio: Inicio, |
|
||||||
Fin: Fin, |
|
||||||
NoCliente: Cliente, |
|
||||||
IdUsuario: UserId, |
|
||||||
TipoOperacion: TipoOperacion, |
|
||||||
Pedimentos: Pedimentos |
|
||||||
} |
|
||||||
AEOServices.getThesePDFs(data) |
|
||||||
.then((response: any) => { |
|
||||||
const url = window.URL.createObjectURL(new Blob([response.data])) |
|
||||||
const link = document.createElement('a') |
|
||||||
link.href = url |
|
||||||
link.setAttribute('download', 'Pedimentos.zip') |
|
||||||
document.body.appendChild(link) |
|
||||||
link.click() |
|
||||||
}) |
|
||||||
.catch((e: Error) => { |
|
||||||
setHeader('Error') |
|
||||||
setMsg('Ocurrio un error: ' + e) |
|
||||||
setShowMsg(true) |
|
||||||
return |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
async function getAE(e: any) { |
|
||||||
if (e.column.colId === 'ver pedimento') { |
|
||||||
setcolumnaVerPDF(true) |
|
||||||
} else { |
|
||||||
setcolumnaVerPDF(false) |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
const formatNumber = (number: string) => { |
|
||||||
number = parseFloat(number).toFixed(2) |
|
||||||
let value = Number(number).toLocaleString('en') |
|
||||||
if (!value.indexOf('NaN')) return '0.00' |
|
||||||
return value |
|
||||||
} |
|
||||||
|
|
||||||
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 size="sm">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="1">Importacion</option> |
|
||||||
<option value="2">Exportacion</option> |
|
||||||
</Form.Control> |
|
||||||
</div> |
|
||||||
<div className="col-md-1 right-label"> |
|
||||||
<Form.Label size="sm">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 c.agrupado === 1 ? ( |
|
||||||
<option value={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"> </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> |
|
||||||
</Card.Body> |
|
||||||
</Card> |
|
||||||
<br /> |
|
||||||
<div className="ag-theme-alpine" style={{ height: 500, width: '100%' }}> |
|
||||||
{/* <button onClick={onButtonClick}>Get selected rows</button> */} |
|
||||||
<AgGridReact |
|
||||||
rowData={filteredData} |
|
||||||
columnDefs={columnDefs} |
|
||||||
pagination={true} |
|
||||||
paginationAutoPageSize={true} |
|
||||||
ref={gridRef} |
|
||||||
rowSelection={'multiple'} |
|
||||||
rowMultiSelectWithClick={true} |
|
||||||
onCellClicked={(e) => getAE(e)} |
|
||||||
onRowClicked={(e) => getParams(e)} |
|
||||||
></AgGridReact> |
|
||||||
</div> |
|
||||||
<MsgInformativo |
|
||||||
show={show} |
|
||||||
msg={msg} |
|
||||||
header={header} |
|
||||||
msgColor={msgColor} |
|
||||||
closeToast={closeToast} |
|
||||||
/> |
|
||||||
</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> |
||||||
|
) |
||||||
|
} |
||||||
@ -1,4 +0,0 @@ |
|||||||
export interface DTOPINUsuario { |
|
||||||
pin: number, |
|
||||||
usuario: string |
|
||||||
} |
|
||||||
@ -1,4 +0,0 @@ |
|||||||
export interface DTOResetPassword { |
|
||||||
pin: number, |
|
||||||
contrasena: string |
|
||||||
} |
|
||||||
@ -1,9 +0,0 @@ |
|||||||
export default interface DTOPedimentosCruzadosData { |
|
||||||
orden: number, |
|
||||||
mes: number, |
|
||||||
sMes: string, |
|
||||||
anio: number, |
|
||||||
operacion: number, |
|
||||||
despachos: number, |
|
||||||
pedimentos: number
|
|
||||||
} |
|
||||||
@ -1,4 +0,0 @@ |
|||||||
export default interface DTOPedimentosCruzadosListaCliente { |
|
||||||
id: number, |
|
||||||
razonSocial: string |
|
||||||
} |
|
||||||
@ -1,6 +0,0 @@ |
|||||||
export default interface DTORPTMonitorFacturasPagAmazon { |
|
||||||
Inicio: string; |
|
||||||
Fin: string; |
|
||||||
|
|
||||||
} |
|
||||||
|
|
||||||
@ -1,6 +0,0 @@ |
|||||||
export default interface ICatFraccionesVulnerables{ |
|
||||||
id : number ,
|
|
||||||
fraccion : number,
|
|
||||||
nico : string,
|
|
||||||
activo : number |
|
||||||
} |
|
||||||
@ -1,9 +0,0 @@ |
|||||||
export default interface IDashboardPedimentosCruces { |
|
||||||
orden: number, |
|
||||||
mes: number, |
|
||||||
smes: string, |
|
||||||
anio: number, |
|
||||||
operacion: number, |
|
||||||
despachos: number, |
|
||||||
pedimentos: number
|
|
||||||
} |
|
||||||
@ -1,7 +0,0 @@ |
|||||||
export default interface IConsolidadosSinFirmaBanco{ |
|
||||||
referencia: string,
|
|
||||||
fechaPago: string,
|
|
||||||
firmaValidacion: string,
|
|
||||||
firmaBanco: string |
|
||||||
|
|
||||||
} |
|
||||||
@ -1,33 +1,32 @@ |
|||||||
export interface IRegister { |
export interface IRegister { |
||||||
id: number |
id: number; |
||||||
usuario: string |
usuario: string; |
||||||
nombre: string |
nombre: string; |
||||||
contrasena: string |
contrasena: string; |
||||||
correo: string |
correo: string; |
||||||
tipoUsuario: number |
tipoUsuario: number; |
||||||
activo: number |
activo: number; |
||||||
fechaAlta: string |
fechaAlta: string; |
||||||
usuarioAlta: number |
usuarioAlta: number; |
||||||
fechaModifico: string |
fechaModifico: string; |
||||||
usuarioModifico: number |
usuarioModifico: number; |
||||||
fechaElimino: string |
fechaElimino: string; |
||||||
usuarioElimino: number |
usuarioElimino: number; |
||||||
motivoElimino: string |
motivoElimino: string; |
||||||
idModulo: number |
idModulo: number; |
||||||
dept: number |
dept: number; |
||||||
tmercancia: number |
tmercancia: number; |
||||||
fechaUltimaVisita: string |
fechaUltimaVisita: string; |
||||||
visitas: number |
visitas: number; |
||||||
internos: number |
internos: number; |
||||||
permisoEspecial: number |
permisoEspecial: number; |
||||||
estadoConfiguracion: number |
estadoConfiguracion: number; |
||||||
fechaValidacionConf: string |
fechaValidacionConf: string; |
||||||
realizoEncuesta: string |
realizoEncuesta: string; |
||||||
encuestaActiva: number |
encuestaActiva: number; |
||||||
fechaLimiteEncuesta: string |
fechaLimiteEncuesta: string; |
||||||
codigoAccesoM: string |
codigoAccesoM: string; |
||||||
tokenAccesoM: string |
tokenAccesoM: string; |
||||||
deviceToken: string |
deviceToken: string; |
||||||
idPerfil: number |
idPerfil: number; |
||||||
departamento: string |
|
||||||
} |
} |
||||||
|
|||||||
@ -1,18 +0,0 @@ |
|||||||
export default interface IRptArcosa{ |
|
||||||
Patente: string,
|
|
||||||
Pedimento: string,
|
|
||||||
PagoPedimento: string,
|
|
||||||
Regimen: string,
|
|
||||||
ValorDls: Number,
|
|
||||||
ValorAduana: Number,
|
|
||||||
Aduana: Number,
|
|
||||||
Planta: string,
|
|
||||||
DTA: string, |
|
||||||
PREV : string
|
|
||||||
IVA: string,
|
|
||||||
IGI : string,
|
|
||||||
CC: string,
|
|
||||||
Total : number |
|
||||||
|
|
||||||
} |
|
||||||
|
|
||||||
@ -1,16 +0,0 @@ |
|||||||
export interface IRptFacturasFraccion{ |
|
||||||
factura : string,
|
|
||||||
almacen : string,
|
|
||||||
orden : number ;
|
|
||||||
parte : string,
|
|
||||||
pais : string ,
|
|
||||||
fraccionFacturaXML : string,
|
|
||||||
fraccionGEMCO : string,
|
|
||||||
nicoGEMCO : string;
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
@ -1,10 +0,0 @@ |
|||||||
export default interface IRptFacturasPedimentosPagados{ |
|
||||||
|
|
||||||
Referencia: string
|
|
||||||
Pedido: string |
|
||||||
Factura: string |
|
||||||
UUID: string |
|
||||||
Fecha : string
|
|
||||||
RazonSocial : string |
|
||||||
|
|
||||||
} |
|
||||||
@ -1,16 +0,0 @@ |
|||||||
export interface IRptMonitoreoFacturaPagadasAmazon{ |
|
||||||
Referencia : string | null; |
|
||||||
Factura : string| null; |
|
||||||
FechaFactura : string | null; |
|
||||||
Clasificador : string | null; |
|
||||||
FCreacion : string | null; |
|
||||||
FechaPago : string | null; |
|
||||||
CantidadDiasFacturas : number | null; |
|
||||||
CantidadDiasPago : number | null; |
|
||||||
CantidadASIN : number | null; |
|
||||||
CantFracIguales : number | null; |
|
||||||
CantFracDiferentes : number | null; |
|
||||||
CantidadSightline : number | null; |
|
||||||
|
|
||||||
|
|
||||||
} |
|
||||||
@ -1,24 +0,0 @@ |
|||||||
export default interface IRptOperacionesPagadasMissionFood { |
|
||||||
|
|
||||||
TipoOperacion : string,
|
|
||||||
sPedimento: string,
|
|
||||||
UUID :string,
|
|
||||||
FolioFactura : string, |
|
||||||
dFechaFirmaBanco : string,
|
|
||||||
sRazonSocial : string,
|
|
||||||
sRFC : string,
|
|
||||||
sRefrencia : string,
|
|
||||||
sEDocument : string,
|
|
||||||
sHRazonSocial : string,
|
|
||||||
sHidentificadorProv : string,
|
|
||||||
AA : string,
|
|
||||||
RFCAA : string,
|
|
||||||
Incoterm : string,
|
|
||||||
Caja : string,
|
|
||||||
AcuceDoda : string,
|
|
||||||
Transportista : string,
|
|
||||||
Edocument : string |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@ -1,31 +0,0 @@ |
|||||||
export interface IRptPedimentosPagadosFacturasCruzadas{ |
|
||||||
Referencia: string | null; |
|
||||||
Pedimento: string | null; |
|
||||||
Clave: string | null; |
|
||||||
FechaFirmaBanco: string | null; |
|
||||||
TipoCambio: number; |
|
||||||
PesoBruto: number; |
|
||||||
PaisVendedor: string | null; |
|
||||||
PaisOrigen: string | null; |
|
||||||
NumFacturas: number; |
|
||||||
Factura?: string | null; |
|
||||||
ValorFactura: number; |
|
||||||
Fraccion: number; |
|
||||||
Descripcion: string | null; |
|
||||||
nClave: number; |
|
||||||
CantFacturas: number; |
|
||||||
ValorAduana: number; |
|
||||||
Incrementables: number; |
|
||||||
AdValorem: number; |
|
||||||
DTA: number; |
|
||||||
IVA: number; |
|
||||||
Efectivo: number; |
|
||||||
Total: number; |
|
||||||
Destino: number; |
|
||||||
Cruce: string | null; |
|
||||||
Remite: string | null; |
|
||||||
Caja: string | null; |
|
||||||
ValorComercial: number; |
|
||||||
Incoterm: string | null; |
|
||||||
|
|
||||||
} |
|
||||||
@ -1,27 +0,0 @@ |
|||||||
import http from "../common/http-common"; |
|
||||||
import ICatFraccionesVulnerables from '../../Interfaces/Catalogos/ICatFraccionesVulnerables' |
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
class FraccionesVulnerablesDataService { |
|
||||||
|
|
||||||
|
|
||||||
constructor() |
|
||||||
{ |
|
||||||
type returnData = [ICatFraccionesVulnerables[]] |
|
||||||
} |
|
||||||
|
|
||||||
getAll() { |
|
||||||
return http.get<ICatFraccionesVulnerables[]>(`/Catalogos/CatFraccionesVulnerables/getAll`); |
|
||||||
} |
|
||||||
|
|
||||||
Append(data: ICatFraccionesVulnerables) { |
|
||||||
return http.post<ICatFraccionesVulnerables>(`/Catalogos/CatFraccionesVulnerables/Append`, data); |
|
||||||
} |
|
||||||
Delete(id: number) { |
|
||||||
return http.delete<ICatFraccionesVulnerables>(`/Catalogos/CatFraccionesVulnerables/Delete/${id}`); |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
} |
|
||||||
export default new FraccionesVulnerablesDataService(); |
|
||||||
@ -1,13 +0,0 @@ |
|||||||
import http from "../common/http-common"; |
|
||||||
import DTOPedimentosCruzadosListaCliente from "../../DTO/Dashboard/DTOPedimentosCruzadosListaCliente"; |
|
||||||
import DTOPedimentosCruzadosData from "../../DTO/Dashboard/DTOPedimentosCruzadosData"; |
|
||||||
|
|
||||||
class Dashboard$Direccion$DataService { |
|
||||||
GETPedimentosCruzadosData(id: number) { |
|
||||||
return http.get<DTOPedimentosCruzadosData[]>(`/Direccion/GetPedimentosCrucesData?id=${id}`); |
|
||||||
} |
|
||||||
GETPedimentosCruzadosListaCliente() { |
|
||||||
return http.get<DTOPedimentosCruzadosListaCliente[]>(`/Direccion/GetPedimentosCrucesListaCliente`); |
|
||||||
} |
|
||||||
} |
|
||||||
export default new Dashboard$Direccion$DataService(); |
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue