Se termina la primer version entregable del reporte de facturas recibidas de Amazon

AmazonRelease1.1
unknown 2 years ago
parent bc7e4eefe3
commit 60b80b6e48
  1. 145
      src/Components/Clientes/Amazon/Reportes/AmazonNoPartes.tsx
  2. 133
      src/Components/Clientes/Amazon/Reportes/RptAmazonPendingInvoices.tsx
  3. 150
      src/Components/Clientes/Amazon/Reportes/RptAmazonPendingInvoicesDetail.tsx
  4. 8
      src/Components/Clientes/Amazon/Services/Amazon.Services.ts

@ -38,7 +38,10 @@ export function AmazonNoPartes(props: IAmazonNoPartesProps) {
const [DescripcionAgenteAduanal, setDescripcionAgenteAduanal] = useState('')
const [PaisOrigen, setPaisOrigen] = useState('')
const [UMF, setUMF] = useState('')
const [Search, setSearch] = useState('')
const openLink = (item: string) => {
window.open('https://www.amazon.com/dp/' + item)
}
const colsNoPartes = [
{
@ -79,7 +82,9 @@ export function AmazonNoPartes(props: IAmazonNoPartesProps) {
{
name: 'Parte',
width: '110px',
selector: (row: I2096NoParte) => row.parte,
cell: (row: I2096NoParte) => (
<div style={{cursor: 'pointer'}} onClick={() => openLink(row.parte)}>{row.parte}</div>
),
sortable: true
},
{
@ -138,7 +143,7 @@ export function AmazonNoPartes(props: IAmazonNoPartesProps) {
const loadData = (row: I2096NoParte) => {
setIDParte(row.id)
setTipoOperacion(row.tipoOperacion)
setFraccion(row.fraccion.substring(0,8))
setFraccion(row.fraccion.substring(0, 8))
setSubdivision(row.fraccion.slice(-2))
setPaisOrigen(row.paisOrigen)
setDescripcionFactura(row.descripcionFactura)
@ -149,16 +154,25 @@ export function AmazonNoPartes(props: IAmazonNoPartesProps) {
useEffect(() => {
AmazonDS.Get$Pais$Claves()
.then((response) => {
setPaisClaves(response.data)
})
.catch((e: Error) => {
.then((response) => {
setPaisClaves(response.data)
})
.catch((e: Error) => {
setHeader('Error')
setMsg('Ocurrio un error: ' + e)
setShowMsg(true)
return
})
}, [])
const loadInfo = () => {
if (Search.length < 9) {
setHeader('Error')
setMsg('Ocurrio un error: ' + e)
setMsg('Proporcione el numero de parte, para poder continuar')
setShowMsg(true)
return
})
AmazonDS.NoPartesGet()
}
AmazonDS.NoPartesGet(Search)
.then((response) => {
dispatch(populateNoPartes(response.data))
})
@ -168,24 +182,52 @@ export function AmazonNoPartes(props: IAmazonNoPartesProps) {
setShowMsg(true)
return
})
}, [])
}
return (
<div>
<Card>
<Card.Body>
<DataTable
noHeader
defaultSortFieldId={'id'}
defaultSortAsc={true}
pagination
highlightOnHover
columns={colsNoPartes}
data={mNoPartes.filter(function (el) {
return el.id > 0
})}
/>
</Card.Body>
<Row style={{ paddingTop: '15px' }}>
<Col xs={8}></Col>
<Col xs={1} style={{ textAlign: 'right' }}>
No parte
</Col>
<Col xs={1}>
<Form.Control
type="text"
id="Search"
size="sm"
value={Search}
onChange={(e) => setSearch(e.target.value)}
/>
</Col>
<Col xs={1}>
<Button
onClick={() => {
loadInfo()
}}
>
Busca
</Button>
</Col>
</Row>
<Row>
<Col>
<Card.Body>
<DataTable
noHeader
defaultSortFieldId={'id'}
defaultSortAsc={true}
pagination
highlightOnHover
columns={colsNoPartes}
data={mNoPartes.filter(function (el) {
return el.id > 0
})}
/>
</Card.Body>
</Col>
</Row>
</Card>
<Modal
show={ShowModal}
@ -197,7 +239,7 @@ export function AmazonNoPartes(props: IAmazonNoPartesProps) {
>
<Modal.Body>
<div style={{ height: '400px', overflow: 'scroll' }}>
<Row style={{paddingTop: '15px'}}>
<Row style={{ paddingTop: '15px' }}>
<Col xs={2}>T. Operacion</Col>
<Col xs={3}>
<Form.Control
@ -230,56 +272,69 @@ export function AmazonNoPartes(props: IAmazonNoPartesProps) {
/>
</Col>
</Row>
<Row style={{paddingTop: '15px'}}>
<Row style={{ paddingTop: '15px' }}>
<Col xs={2}>
<Form.Label>Descripcion factura</Form.Label>
</Col>
<Col xs={10}>
<Form.Group className="mb-3">
<Form.Control as="textarea" rows={3} value={DescripcionFactura}/>
<Form.Control
as="textarea"
rows={3}
value={DescripcionFactura}
/>
</Form.Group>
</Col>
</Row>
<Row style={{paddingTop: '15px'}}>
<Row style={{ paddingTop: '15px' }}>
<Col xs={2}>
<Form.Label>Descripcion agente aduanal</Form.Label>
</Col>
<Col xs={10}>
<Form.Group className="mb-3">
<Form.Control as="textarea" rows={3} value={DescripcionAgenteAduanal}/>
<Form.Control
as="textarea"
rows={3}
value={DescripcionAgenteAduanal}
/>
</Form.Group>
</Col>
</Row>
<Row>
<Col xs={2}>Pais Origen</Col>
<Col xs={4}>
<Col xs={2}>Pais Origen</Col>
<Col xs={4}>
<Form.Control
as="select"
value={PaisOrigen}
onChange={(e) => setPaisOrigen(e.target.value)}
className="form-select form-select-sm"
> {
PaisClaves ? (
PaisClaves.map((row) =>{
return <option value={row.clave_a3}>{row.paisNom}</option>
})
) : ''
}
>
{' '}
{PaisClaves
? PaisClaves.map((row) => {
return (
<option value={row.clave_a3}>{row.paisNom}</option>
)
})
: ''}
</Form.Control>
</Col>
<Col xs={4}>Unidad medida factura</Col>
<Col xs={1}><Form.Control
</Col>
<Col xs={4}>Unidad medida factura</Col>
<Col xs={1}>
<Form.Control
defaultValue={UMF}
type="text"
placeholder="Unidad de medida factura"
onChange={(e) => setUMF(e.target.value)}
size="sm"
/>
</Col>
</Col>
</Row>
<Row style={{paddingTop: '15px'}}>
<Col xs={10}></Col>
<Col xs={1}><Button>Guarda</Button></Col>
<Row style={{ paddingTop: '15px' }}>
<Col xs={10}></Col>
<Col xs={1}>
<Button>Guarda</Button>
</Col>
</Row>
</div>
</Modal.Body>

@ -1,5 +1,5 @@
import { useEffect, useState } from 'react'
import { Button, Card, Col, Form, Row, Table } from 'react-bootstrap'
import { Alert, Button, Card, Col, Form, FormCheck, Modal, Row, Table } from 'react-bootstrap'
import { IconContext } from 'react-icons'
import { BsChevronDown, BsChevronRight, BsSearch } from 'react-icons/bs'
import { FaCheckCircle, FaFileExcel, FaQuestionCircle } from 'react-icons/fa'
@ -37,7 +37,9 @@ export default function RtpAmazonPendingInvoices(
const [Fin, setFin] = useState(currentDate(0))
const [filtro, setFiltro] = useState('')
const [header, setHeader] = useState('')
const [IDFactura, setIDFactura] = useState(0)
const [show, setShowMsg] = useState(false)
const [ShowModal, setShowModal] = useState(false)
const [msg, setMsg] = useState('')
const msgColor = 'primary'
@ -84,7 +86,6 @@ export default function RtpAmazonPendingInvoices(
})
}
const downloadExceptionsFile = (id: number) => {
DSAmazon.TerminaFactura(id)
.then((response) => {})
@ -95,7 +96,10 @@ export default function RtpAmazonPendingInvoices(
const url = window.URL.createObjectURL(new Blob([response.data]))
const link = document.createElement('a')
link.href = url
link.setAttribute('download', 'Formato de consultas (Exceptions Handling 2021).xlsx')
link.setAttribute(
'download',
'Formato de consultas (Exceptions Handling 2021).xlsx'
)
document.body.appendChild(link)
link.click()
}
@ -108,7 +112,6 @@ export default function RtpAmazonPendingInvoices(
})
}
useEffect(() => {
loadReport()
}, [])
@ -132,13 +135,36 @@ export default function RtpAmazonPendingInvoices(
.map((element) => {
let newElt = Object.assign({}, element) // copies element
return newElt.detail.filter(
(child) =>
(child.idHeader === IDMaster) &&
(child.autorizado) &&
(child.destinationHTSCode.toString().replaceAll('.','') !== child.fraccionGEMCO)
(child) => child.idHeader === IDMaster && !child.autorizado
)
})
return Exceptions[0].length ? Exceptions[0].length : 0
console.log(JSON.stringify(Exceptions[0]))
return Exceptions[0].length ? Exceptions[0].length : 0
}
const facturaTerminada = (row: I2096Headers) => {
DSAmazon.Se$Puede$Terminar$Factura(row.id)
.then((response) => {
if (response.data.respuesta.includes('lista')) {
setIDFactura(row.id)
setShowModal(true)
return
} else {
setIDFactura(0)
setHeader('Informativo')
setMsg(response.data.respuesta)
setShowMsg(true)
return
}
})
.catch((e: Error) => {
setIDFactura(0)
setHeader('Error')
setMsg('Ocurrio un error')
setShowMsg(true)
return
})
}
return (
@ -168,14 +194,10 @@ export default function RtpAmazonPendingInvoices(
<th style={{ width: '50px' }}>id</th>
<th style={{ width: '50px' }}></th>
<th style={{ width: '50px' }}></th>
<th style={{ width: '50px' }}></th>
<th style={{ width: '80px' }}>Commercial Invoice Date</th>
<th style={{ width: '150px' }}>Invoice Number</th>
<th style={{ width: '50px' }}>Name</th>
{/* <th>Trailer Number</th>
<th>Trailer Id</th>
<th>Por Of Loading</th>
<th>Port of entry</th>
<th>Payments Terms</th> */}
<th style={{ width: '100px' }}>Incoterms</th>
<th style={{ textAlign: 'center' }}>HAWB</th>
<th>Qty Unit of measure</th>
@ -226,12 +248,15 @@ export default function RtpAmazonPendingInvoices(
</IconContext.Provider>
)}
</td>
<td>{MasterData.id}</td>
<td>
{existsExeptions(MasterData.id) > 0 ? (
<div
onClick={() => downloadExceptionsFile(MasterData.id)}
title='Archivo de excepciones'
onClick={() =>
downloadExceptionsFile(MasterData.id)
}
title="Archivo de excepciones"
>
<IconContext.Provider
value={{ color: 'orange', size: '20px' }}
@ -254,30 +279,28 @@ export default function RtpAmazonPendingInvoices(
</div>
) : null}
</td>
<td>
<FormCheck
className="form-check form-switch form-control-sm"
id="switchEnabled"
type="switch"
checked={false}
onChange={() => {
facturaTerminada(MasterData)
}
}
label=""
/>
</td>
<td style={{ width: '80px', textAlign: 'center' }}>
{MasterData.commercialInvoiceDate}
</td>
<td style={{ width: '150px' }}>
{MasterData.invoiceNumber}
</td>
<td style={{ width: '50px', textAlign:'center' }}>
<td style={{ width: '50px', textAlign: 'center' }}>
{MasterData.name}
</td>
{/* <td style={{ textAlign: 'center' }}>
{MasterData.trailerNumber}
</td>
<td style={{ textAlign: 'center' }}>
{MasterData.trailerId}
</td>
<td style={{ textAlign: 'center' }}>
{MasterData.porOfLoading}
</td>
<td style={{ textAlign: 'center' }}>
{MasterData.portOfEntry}
</td>
<td style={{ textAlign: 'center' }}>
{MasterData.paymentsTerms}
</td> */}
<td style={{ width: '100px', textAlign: 'center' }}>
{MasterData.incoterms}
</td>
@ -357,7 +380,7 @@ export default function RtpAmazonPendingInvoices(
</th>
<th
style={{
width: '120px',
width: '200px',
backgroundColor: '#D3E0EA',
color: '#346288',
textAlign: 'center'
@ -564,6 +587,50 @@ export default function RtpAmazonPendingInvoices(
</div>
</Card.Body>
</Card>
<Modal
show={ShowModal}
onHide={() => {
setShowModal(false)
}}
size={'sm'}
dialogClassName={'modal-50w'}
>
<Modal.Body>
<div style={{ height: '180px' }}>
<Row style={{ paddingTop: '15px' }}>
<Col xs={1}></Col>
<Col xs={10}>
<Alert key={'danger'} variant={'danger'}>
La factura esta lista para terminarse, desea terminarla?
</Alert>
</Col>
<Col xs={1}></Col>
</Row>
<Row style={{ paddingTop: '15px' }}>
<Col xs={6} style={{ textAlign: 'center' }}>
<Button
variant="secondary"
onClick={() => {
setShowModal(false)
}}
>
&nbsp;&nbsp;No&nbsp;&nbsp;
</Button>
</Col>
<Col xs={6} style={{ textAlign: 'center' }}>
<Button
variant="danger"
onClick={() => {
downloadExcel(IDFactura)
}}
>
&nbsp;&nbsp;Si&nbsp;&nbsp;
</Button>
</Col>
</Row>
</div>
</Modal.Body>
</Modal>
<MsgInformativo
show={show}
msg={msg}

@ -57,13 +57,21 @@ export default function RtpAmazonPendingInvoivesDetail(
const [show, setShowMsg] = useState(false)
const [Show, setShow] = useState(false)
const [msg, setMsg] = useState('')
const [RequerimientoNormativo, setRequerimientoNormativo] = useState(props.detail.requerimientoNormativo ? props.detail.requerimientoNormativo : '')
const [Comentarios, setComentarios] = useState(props.detail.comentarios ? props.detail.comentarios : 'Clasificacion Incorrecta')
const [RequerimientoNormativo, setRequerimientoNormativo] = useState(
props.detail.requerimientoNormativo
? props.detail.requerimientoNormativo
: ''
)
const [Comentarios, setComentarios] = useState(
props.detail.comentarios
? props.detail.comentarios
: 'Clasificacion Incorrecta'
)
const msgColor = 'primary'
const openLink = (item: string) => {
window.open('https://www.amazon.com/dp/' + item)
}
const target = React.useRef(null);
const target = React.useRef(null)
const UpdateInfo = (Invoice: I2096Headers, Detail: I2096Detail[]) => {
const updatedInvoice: I2096Headers = {
@ -141,7 +149,8 @@ export default function RtpAmazonPendingInvoivesDetail(
}
useEffect(() => {
if (UserChanged && EstatusSwith && !props.detail.fraccionGEMCO) autoriceItem(props.detail.id)
if (UserChanged && EstatusSwith && !props.detail.fraccionGEMCO)
autoriceItem(props.detail.id)
}, [EstatusSwith, UserChanged])
const popover = (
@ -152,7 +161,7 @@ export default function RtpAmazonPendingInvoivesDetail(
right?
</Popover.Body>
</Popover>
);
)
return (
<>
@ -194,11 +203,12 @@ export default function RtpAmazonPendingInvoivesDetail(
</td>
<td
style={{
textAlign: 'center'
textAlign: 'center',
fontSize:'18px'
}}
className="DetailData"
>
{props.detail.destinationHTSCode}
&nbsp;&nbsp;{props.detail.destinationHTSCode}
</td>
<td
style={{
@ -246,8 +256,8 @@ export default function RtpAmazonPendingInvoivesDetail(
IDDetail={props.detail.id}
FraccionOriginal={props.detail.destinationHTSCode}
ConfirmaFraccion={props.detail.confirmaFraccion}
/* parentFunction={parentFunction} */
Habilitado={props.Habilitado}
/* parentFunction={parentFunction} */
Habilitado={props.Habilitado}
/>
</td>
<td
@ -263,9 +273,18 @@ export default function RtpAmazonPendingInvoivesDetail(
displayType={'input'}
style={{
fontSize: '18px',
backgroundColor: '#F1EEF9',
border: '2px solid #5923F6',
color: '#5923F6',
backgroundColor:
props.detail.validaFraccionOriginal === 0
? '#FFFAF2 '
: '#E5F7B6',
border:
props.detail.validaFraccionOriginal === 0
? '2px solid #F9A721'
: '2px solid green',
color:
props.detail.validaFraccionOriginal === 0
? '#5923F6'
: '#000000',
width: '115px',
textAlign: 'right',
borderRadius: '10px'
@ -369,7 +388,11 @@ export default function RtpAmazonPendingInvoivesDetail(
<td
style={{
textAlign: 'center',
paddingLeft: '30px'
paddingLeft: '30px',
visibility:
props.detail.destinationHTSCode.replaceAll('.', '').trim()!==(props.detail.fraccionGEMCO ? props.detail.fraccionGEMCO.trim() : '')
? 'visible'
: 'hidden'
}}
className="DetailData"
>
@ -378,9 +401,10 @@ export default function RtpAmazonPendingInvoivesDetail(
id="switchEnabled"
type="switch"
disabled={
(props.detail.fraccionGEMCO===props.detail.destinationHTSCode.replaceAll('.',''))
props.detail.fraccionGEMCO ===
props.detail.destinationHTSCode.replaceAll('.', '')
}
checked={EstatusSwith && props.detail.autorizado /* (props.detail.fraccionGEMCO===props.detail.destinationHTSCode.replace('.','')) */}
checked={EstatusSwith && props.detail.autorizado}
onChange={() => {
setEstatusSwitch(!EstatusSwith)
setUserChanged(true)
@ -389,48 +413,60 @@ export default function RtpAmazonPendingInvoivesDetail(
label=""
/>
</td>
<td style={{visibility : RequerimientoNormativo.length===0 ? 'hidden' : 'visible'}}> <OverlayTrigger
placement="bottom"
overlay={<Tooltip id="button-tooltip-2">{RequerimientoNormativo}</Tooltip>}
>
{({ ref, ...triggerHandler }) => (
<Button
variant="light"
{...triggerHandler}
<td
style={{
visibility:
RequerimientoNormativo.length === 0 ? 'hidden' : 'visible'
}}
>
<IconContext.Provider
value={{
color: 'blue',
size: '25px'
}}
>
<AiOutlineFileSearch />
</IconContext.Provider>
<span className="ms-1"></span>
</Button>
)}
</OverlayTrigger></td>
<td style={{visibility : RequerimientoNormativo.length===0 ? 'hidden' : 'visible'}}> <OverlayTrigger
placement="bottom"
overlay={<Tooltip id="button-tooltip-2">{Comentarios}</Tooltip>}
>
{({ ref, ...triggerHandler }) => (
<Button
variant="light"
{...triggerHandler}
{' '}
<OverlayTrigger
placement="bottom"
overlay={
<Tooltip id="button-tooltip-2">{RequerimientoNormativo}</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:
RequerimientoNormativo.length === 0 ? 'hidden' : 'visible'
}}
>
<IconContext.Provider
value={{
color: 'green',
size: '25px'
}}
>
<BsFillChatRightTextFill />
</IconContext.Provider>
<span className="ms-1"></span>
</Button>
)}
</OverlayTrigger></td>
{' '}
<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>
</tr>
<Modal
@ -453,7 +489,7 @@ export default function RtpAmazonPendingInvoivesDetail(
<Col xs={1}></Col>
</Row>
<Row style={{ paddingTop: '15px' }}>
<Col xs={3}>Reparto normativo</Col>
<Col xs={3}>Cumplimiento normativo</Col>
<Col xs={8}>
{' '}
<Form.Control
@ -479,7 +515,7 @@ export default function RtpAmazonPendingInvoivesDetail(
? Comentarios
: 'Clasificacion incorrecta.'
}
onChange={(e) => setRequerimientoNormativo(e.target.value)}
onChange={(e) => setComentarios(e.target.value)}
/>
</Col>
<Col>&nbsp;</Col>

@ -7,6 +7,7 @@ import DTO2096Descripcion from '../DTO/DTO2096Descripcion'
import I2096NoParte from '../Interfaces/I2096NoParte'
import I2096PaisClave from '../Interfaces/I2096PaisClave'
import DTO2096ItemAutoriza from '../DTO/DTO2096ItemAutoriza'
import DTORespuesta from '../../ZincInternacional/DTO/DTORespuesta'
class AmazonDataService {
GetPendingInvoice() {
@ -51,8 +52,11 @@ class AmazonDataService {
console.log(error)
})
}
NoPartesGet() {
return http.get<I2096NoParte[]>(`/AmazonInvoice/NoPartesGet`)
NoPartesGet(Search: string) {
return http.get<I2096NoParte[]>(`/AmazonInvoice/NoPartesGet?Search=${Search}`)
}
Se$Puede$Terminar$Factura(id: number) {
return http.get<DTORespuesta>(`/AmazonInvoice/SePuedeTerminarFactura?id=${id}`)
}
}
export default new AmazonDataService()

Loading…
Cancel
Save