Compare commits
No commits in common. 'main' and 'fixRptAmazonFinishedClasificationInvoices' have entirely different histories.
@ -1,3 +0,0 @@ |
||||
{ |
||||
"workbench.colorTheme": "Infinity Dark Theme Eye Friendly Colors" |
||||
} |
||||
@ -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> |
||||
) |
||||
} |
||||
@ -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,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> |
||||
) |
||||
} |
||||
@ -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> |
||||
) |
||||
} |
||||
@ -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 { |
||||
id: number |
||||
usuario: string |
||||
nombre: string |
||||
contrasena: string |
||||
correo: string |
||||
tipoUsuario: number |
||||
activo: number |
||||
fechaAlta: string |
||||
usuarioAlta: number |
||||
fechaModifico: string |
||||
usuarioModifico: number |
||||
fechaElimino: string |
||||
usuarioElimino: number |
||||
motivoElimino: string |
||||
idModulo: number |
||||
dept: number |
||||
tmercancia: number |
||||
fechaUltimaVisita: string |
||||
visitas: number |
||||
internos: number |
||||
permisoEspecial: number |
||||
estadoConfiguracion: number |
||||
fechaValidacionConf: string |
||||
realizoEncuesta: string |
||||
encuestaActiva: number |
||||
fechaLimiteEncuesta: string |
||||
codigoAccesoM: string |
||||
tokenAccesoM: string |
||||
deviceToken: string |
||||
idPerfil: number |
||||
departamento: string |
||||
id: number; |
||||
usuario: string; |
||||
nombre: string; |
||||
contrasena: string; |
||||
correo: string; |
||||
tipoUsuario: number; |
||||
activo: number; |
||||
fechaAlta: string; |
||||
usuarioAlta: number; |
||||
fechaModifico: string; |
||||
usuarioModifico: number; |
||||
fechaElimino: string; |
||||
usuarioElimino: number; |
||||
motivoElimino: string; |
||||
idModulo: number; |
||||
dept: number; |
||||
tmercancia: number; |
||||
fechaUltimaVisita: string; |
||||
visitas: number; |
||||
internos: number; |
||||
permisoEspecial: number; |
||||
estadoConfiguracion: number; |
||||
fechaValidacionConf: string; |
||||
realizoEncuesta: string; |
||||
encuestaActiva: number; |
||||
fechaLimiteEncuesta: string; |
||||
codigoAccesoM: string; |
||||
tokenAccesoM: string; |
||||
deviceToken: string; |
||||
idPerfil: number; |
||||
} |
||||
|
||||
@ -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(); |
||||
@ -1,42 +0,0 @@ |
||||
import { createSlice, PayloadAction } from '@reduxjs/toolkit' |
||||
import ICatFraccionesVulnerables from '../../../Interfaces/Catalogos/ICatFraccionesVulnerables'; |
||||
const CatFraccionesVulnerables: ICatFraccionesVulnerables[] = [{id:0, fraccion:0 , nico:'' , activo:0 }] |
||||
const initialState = { CatFraccionesVulnerables } |
||||
|
||||
export const CatFraccionesVulnerablesSlice = createSlice({ |
||||
name: 'CatCorresponsales', |
||||
initialState: initialState, |
||||
reducers: { |
||||
populateCatFraccionesVulnerables : (state, action: PayloadAction<ICatFraccionesVulnerables[]>) => { |
||||
state.CatFraccionesVulnerables = [] |
||||
state.CatFraccionesVulnerables.push(... action.payload) |
||||
}, |
||||
addCatFraccionesVulnerables : (state, action: PayloadAction<ICatFraccionesVulnerables>) => { |
||||
var Existe = state.CatFraccionesVulnerables.find(function(item) { |
||||
return item.id === action.payload.id; |
||||
}); |
||||
if (!Existe) state.CatFraccionesVulnerables.push(action.payload) |
||||
}, |
||||
updateCatFraccionesVulnerables : (state, action: PayloadAction<ICatFraccionesVulnerables>) => { |
||||
const i = state.CatFraccionesVulnerables.findIndex(_element => _element.id === action.payload.id); |
||||
if (i > -1) state.CatFraccionesVulnerables[i] = action.payload; |
||||
else state.CatFraccionesVulnerables.push(action.payload); |
||||
|
||||
}, |
||||
deleteCatFraccionesVulnerables : (state, action: PayloadAction<number>) => { |
||||
const newArr = state.CatFraccionesVulnerables.filter(data => data.id != action.payload); |
||||
state.CatFraccionesVulnerables=newArr |
||||
}, |
||||
InitCatFraccionesVulnerables : (state, action: PayloadAction<number>) => { |
||||
state.CatFraccionesVulnerables.splice(0,state.CatFraccionesVulnerables.length-1) |
||||
// state.CatCorresponsales = [{id:0, factura:'-Seleccione-', idTrafico:0, valorFacturaDls:0, proveedor:0}]
|
||||
}, |
||||
}, |
||||
}) |
||||
|
||||
export const { addCatFraccionesVulnerables,
|
||||
populateCatFraccionesVulnerables,
|
||||
updateCatFraccionesVulnerables,
|
||||
deleteCatFraccionesVulnerables, |
||||
InitCatFraccionesVulnerables } = CatFraccionesVulnerablesSlice.actions; |
||||
export default CatFraccionesVulnerablesSlice.reducer; |
||||
@ -1,50 +0,0 @@ |
||||
import { createSlice, PayloadAction } from '@reduxjs/toolkit' |
||||
import ICat2096CatConceptosConsulta from '../../../../Components/Clientes/Amazon/Interfaces/I2096CatConceptosConsulta' |
||||
const CatConcetosConsulta: ICat2096CatConceptosConsulta[] = [] |
||||
const initialState = { CatConcetosConsulta } |
||||
|
||||
export const CatConceptosConsultaSlice = createSlice({ |
||||
name: 'CatConceptosConsulta', |
||||
initialState: initialState, |
||||
reducers: { |
||||
initializeCatConcetosConsulta: (state, action: PayloadAction<ICat2096CatConceptosConsulta[]>) => { |
||||
state.CatConcetosConsulta = action.payload |
||||
}, |
||||
populateCatConcetosConsultas: (state, action: PayloadAction<ICat2096CatConceptosConsulta[]>) => { |
||||
action.payload.forEach((newItem) => { |
||||
var Existe = state.CatConcetosConsulta.find(function (onMemoryItem) { |
||||
return onMemoryItem.id === newItem.id |
||||
}) |
||||
if (!Existe) state.CatConcetosConsulta.push(newItem) |
||||
}) |
||||
}, |
||||
addCatConcetosConsulta: (state, action: PayloadAction<ICat2096CatConceptosConsulta>) => { |
||||
var Existe = state.CatConcetosConsulta.find(function (item) { |
||||
return item.id === action.payload.id |
||||
}) |
||||
if (!Existe) state.CatConcetosConsulta.push(action.payload) |
||||
}, |
||||
updateCatConcetosConsulta: (state, action: PayloadAction<ICat2096CatConceptosConsulta>) => { |
||||
const i = state.CatConcetosConsulta.findIndex( |
||||
(_element) => _element.id === action.payload.id |
||||
) |
||||
if (i > -1) state.CatConcetosConsulta[i] = action.payload |
||||
else state.CatConcetosConsulta.push(action.payload) |
||||
}, |
||||
updateCatConcetosConsultaDetail: (state, action: PayloadAction<ICat2096CatConceptosConsulta>) => { |
||||
const i = state.CatConcetosConsulta.findIndex( |
||||
(_element) => _element.id === action.payload.id |
||||
) |
||||
if (i > -1) state.CatConcetosConsulta[i] = action.payload |
||||
else state.CatConcetosConsulta.push(action.payload) |
||||
}, |
||||
deleteCatConcetosConsulta: (state, action: PayloadAction<number>) => { |
||||
const newArr = state.CatConcetosConsulta.filter((data) => data.id != action.payload) |
||||
state.CatConcetosConsulta = newArr |
||||
} |
||||
} |
||||
}) |
||||
|
||||
export const { initializeCatConcetosConsulta, addCatConcetosConsulta, populateCatConcetosConsultas, updateCatConcetosConsulta, deleteCatConcetosConsulta } = |
||||
CatConceptosConsultaSlice.actions |
||||
export default CatConceptosConsultaSlice.reducer |
||||
@ -1,50 +0,0 @@ |
||||
import { createSlice, PayloadAction } from '@reduxjs/toolkit' |
||||
import DTO2096TraficoConsultaAmazonHeader from '../../../../Components/Clientes/Amazon/DTO/DTO2096TraficoConsultaAmazonHeader' |
||||
const Consulta: DTO2096TraficoConsultaAmazonHeader[] = [] |
||||
const initialState = { Consulta } |
||||
|
||||
export const AmazonTraficoConsultaSlice = createSlice({ |
||||
name: 'AmazonTraficoConsulta', |
||||
initialState: initialState, |
||||
reducers: { |
||||
initializeTraficoConsulta: (state, action: PayloadAction<DTO2096TraficoConsultaAmazonHeader[]>) => { |
||||
state.Consulta = action.payload |
||||
}, |
||||
populateTraficoConsulta: (state, action: PayloadAction<DTO2096TraficoConsultaAmazonHeader[]>) => { |
||||
action.payload.forEach((newItem) => { |
||||
var Existe = state.Consulta.find(function (onMemoryItem) { |
||||
return onMemoryItem.id === newItem.id |
||||
}) |
||||
if (!Existe) state.Consulta.push(newItem) |
||||
}) |
||||
}, |
||||
addTraficoConsulta: (state, action: PayloadAction<DTO2096TraficoConsultaAmazonHeader>) => { |
||||
var Existe = state.Consulta.find(function (item) { |
||||
return item.id === action.payload.id |
||||
}) |
||||
if (!Existe) state.Consulta.push(action.payload) |
||||
}, |
||||
updateTraficoConsulta: (state, action: PayloadAction<DTO2096TraficoConsultaAmazonHeader>) => { |
||||
const i = state.Consulta.findIndex( |
||||
(_element) => _element.id === action.payload.id |
||||
) |
||||
if (i > -1) state.Consulta[i] = action.payload |
||||
else state.Consulta.push(action.payload) |
||||
}, |
||||
updateTraficoConsultaDetail: (state, action: PayloadAction<DTO2096TraficoConsultaAmazonHeader>) => { |
||||
const i = state.Consulta.findIndex( |
||||
(_element) => _element.id === action.payload.id |
||||
) |
||||
if (i > -1) state.Consulta[i] = action.payload |
||||
else state.Consulta.push(action.payload) |
||||
}, |
||||
deleteTraficoConsulta: (state, action: PayloadAction<number>) => { |
||||
const newArr = state.Consulta.filter((data) => data.id != action.payload) |
||||
state.Consulta = newArr |
||||
} |
||||
} |
||||
}) |
||||
|
||||
export const { initializeTraficoConsulta, addTraficoConsulta, populateTraficoConsulta, updateTraficoConsulta, deleteTraficoConsulta } = |
||||
AmazonTraficoConsultaSlice.actions |
||||
export default AmazonTraficoConsultaSlice.reducer |
||||
Loading…
Reference in new issue