Compare commits
No commits in common. 'main' and 'EfacturasUpdate' have entirely different histories.
main
...
EfacturasUpdate
Binary file not shown.
@ -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,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,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,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,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,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,7 +0,0 @@ |
||||
export default interface IConsolidadosSinFirmaBanco{ |
||||
referencia: string,
|
||||
fechaPago: string,
|
||||
firmaValidacion: string,
|
||||
firmaBanco: string |
||||
|
||||
} |
||||
@ -1,18 +0,0 @@ |
||||
export default interface IRptArcosa{ |
||||
Patente: string,
|
||||
Pedimento: string,
|
||||
PagoPedimento: string,
|
||||
Regimen: string,
|
||||
ValorDls: Number,
|
||||
ValorAduana: Number,
|
||||
Aduana: Number,
|
||||
Planta: string,
|
||||
DTA: string, |
||||
PREV : string
|
||||
IVA: string,
|
||||
IGI : string,
|
||||
CC: string,
|
||||
Total : number |
||||
|
||||
} |
||||
|
||||
@ -1,10 +0,0 @@ |
||||
export default interface IRptFacturasPedimentosPagados{ |
||||
|
||||
Referencia: string
|
||||
Pedido: string |
||||
Factura: string |
||||
UUID: string |
||||
Fecha : string
|
||||
RazonSocial : string |
||||
|
||||
} |
||||
@ -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,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 |
||||
Loading…
Reference in new issue