Se le agregan las columnas requerimiento normativo y comentarios al detalle de la factura

src/Components/Clientes/Amazon/Components/ComboSelect/ComboDescripcion.tsx

@@ -1,21 +1,35 @@
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import { Button, Col, Form, Modal, Row } from 'react-bootstrap'
-import * as CurrencyFormat from 'react-currency-format'
 import { MsgInformativo } from '../../../../Utils/Toast/msgInformativo'
 import DTO2096Descripcion from '../../DTO/DTO2096Descripcion'
-import DTO2096Fraccion from '../../DTO/DTO2096Fraccion'
+import { RootState } from '../../../../../store/store'
+import {
+  populateInvoices,
+  addInvoice,
+  updateInvoice,
+  deleteInvoice
+} from '../../../../../store/features/Clientes/2096/AmazonInvoices'
+// Redux
+import { useDispatch, useSelector } from 'react-redux'
 import DSAmazon from '../../Services/Amazon.Services'
+import I2096Headers from '../../Interfaces/I2096Header'
+import I2096Detail from '../../Interfaces/I2096Detail'
 
 export interface IComboDescripcionProps {
+  IDInvoice: number
   IDDetail: number
   DescripcionOriginal: string
   Habilitado: boolean
 }
 
 export function ComboDescripcion(props: IComboDescripcionProps) {
+  const dispatch = useDispatch()
+  const mInvoices = useSelector(
+    (state: RootState) => state.AmazonInvoices.Invoice
+  )
   const [Validacion, setValidacion] = useState(0)
   const [showModal, setShowModal] = useState(false)
-  const [Descripcion, setDescripcion] = useState('')
+  const [Descripcion, setDescripcion] = useState(props.DescripcionOriginal)
   const [header, setHeader] = useState('')
   const [show, setShowMsg] = useState(false)
   const [msg, setMsg] = useState('')
@@ -23,16 +37,39 @@ export function ComboDescripcion(props: IComboDescripcionProps) {
 
   const changeValidacion = (e: number) => {
     setValidacion(e)
-    if (e === 2) {
+   /*  if (e === 2) {
+      setDescripcion('')
       setShowModal(true)
+    } else if (e === 1) {
+      setDescripcion(props.DescripcionOriginal)
+      const data: DTO2096Descripcion = {
+        id: props.IDDetail,
+        descripcion: Descripcion
       }
-    if (e === 1) {
+      setDescripcion(props.DescripcionOriginal)
+      DSAmazon.SetDescripcion(data)
+        .then((response) => {
+          UpdateInfo()
+          setShowModal(false)
+          setHeader('Confirmacion')
+          setMsg('La descripcion se ha guardado correctamente')
+          setShowMsg(true)
+          return
+        })
+        .catch((e: Error) => {
+          alert('Ocurrio un error' + e.message.toString())
+        })
+    } */
+  }
+
+  const saveDescripcion = () => {
     const data: DTO2096Descripcion = {
       id: props.IDDetail,
-        descripcion: props.DescripcionOriginal
+      descripcion: Descripcion
     }
     DSAmazon.SetDescripcion(data)
       .then((response) => {
+        UpdateInfo()
         setShowModal(false)
         setHeader('Confirmacion')
         setMsg('La descripcion se ha guardado correctamente')
@@ -43,15 +80,71 @@ export function ComboDescripcion(props: IComboDescripcionProps) {
         alert('Ocurrio un error' + e.message.toString())
       })
   }
+
+  const refreshStore = (Invoice: I2096Headers, Detail: I2096Detail[]) => {
+    const updatedInvoice: I2096Headers = {
+      id: props.IDInvoice,
+      commercialInvoiceDate: Invoice.commercialInvoiceDate,
+      invoiceNumber: Invoice.invoiceNumber,
+      trailerNumber: Invoice.trailerNumber,
+      trailerId: Invoice.trailerId,
+      porOfLoading: Invoice.porOfLoading,
+      portOfEntry: Invoice.portOfEntry,
+      paymentsTerms: Invoice.paymentsTerms,
+      incoterms: Invoice.incoterms,
+      hawb: Invoice.hawb,
+      totalInvoiceQuantityUnitOfMeasure:
+        Invoice.totalInvoiceQuantityUnitOfMeasure,
+      totalInvoiceQuantity: Invoice.totalInvoiceQuantity,
+      totalInvoiceWeightUnitOfMeasure: Invoice.totalInvoiceWeightUnitOfMeasure,
+      totalInvoiceWeight: Invoice.totalInvoiceWeight,
+      totalInvoiceValueChargeOrAllowance:
+        Invoice.totalInvoiceValueChargeOrAllowance,
+      totalInvoiceValueCurrencyISOCode:
+        Invoice.totalInvoiceValueCurrencyISOCode,
+      totalInvoiceValueMonetaryAmount: Invoice.totalInvoiceValueMonetaryAmount,
+      footNote: Invoice.footNote,
+      archivo: Invoice.archivo,
+      fCreacion: Invoice.fCreacion,
+      estatus: Invoice.estatus,
+      max: true,
+      detail: Detail
+    }
+    dispatch(updateInvoice(updatedInvoice))
   }
 
-  const saveDescripcion = () => {
+  const UpdateInfo = () => {
+    const Invoice = mInvoices
+      .filter((el) => el.id === props.IDInvoice)
+      .map((el) => {
+        return el
+      })
+    const newDetail = Invoice[0].detail.map((el) => {
+      if (el.id === props.IDDetail) {
+        return {
+          ...el,
+          descripcionGEMCO: Descripcion
+        }
+      }
+      return el
+    })
+    refreshStore(Invoice[0], newDetail)
+  }
+
+  useEffect(() => {
+    if (Validacion === 2) {
+      setDescripcion('')
+      setShowModal(true)
+    } else if (Validacion === 1) {
+      setDescripcion(props.DescripcionOriginal)
       const data: DTO2096Descripcion = {
         id: props.IDDetail,
         descripcion: Descripcion
       }
+      setDescripcion(props.DescripcionOriginal)
       DSAmazon.SetDescripcion(data)
         .then((response) => {
+          UpdateInfo()
           setShowModal(false)
           setHeader('Confirmacion')
           setMsg('La descripcion se ha guardado correctamente')
@@ -62,6 +155,7 @@ export function ComboDescripcion(props: IComboDescripcionProps) {
           alert('Ocurrio un error' + e.message.toString())
         })
     }
+  }, [Validacion])
 
   return (
     <div>

src/Components/Clientes/Amazon/Components/ComboSelect/ComboFraccion.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useState } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 import { Button, Col, Form, Modal, Row } from 'react-bootstrap'
 import * as CurrencyFormat from 'react-currency-format'
 /* import { PatternFormat } from 'react-number-format'; */
@@ -16,6 +16,7 @@ import DTO2096Fraccion from '../../DTO/DTO2096Fraccion'
 import DSAmazon from '../../Services/Amazon.Services'
 import I2096Headers from '../../Interfaces/I2096Header'
 import { max } from 'cypress/types/lodash'
+import I2096Detail from '../../Interfaces/I2096Detail'
 
 export interface IComboFraccionProps {
   IDInvoice: number
@@ -32,77 +33,91 @@ export function ComboFraccion(props: IComboFraccionProps) {
   )
   const [Validacion, setValidacion] = useState(0)
   const [showModal, setShowModal] = useState(false)
-  const [Fraccion, setFraccion] = useState('')
+  const [Fraccion, setFraccion] = useState(props.FraccionOriginal)
   const [header, setHeader] = useState('')
   const [show, setShowMsg] = useState(false)
   const [msg, setMsg] = useState('')
   const msgColor = 'primary'
 
-
   const forceUpdate: () => void = useState({})[1].bind(null, {}) // see NOTE below
 
+  const refreshStore = (Invoice: I2096Headers, Detail: I2096Detail[]) => {
+    const updatedInvoice: I2096Headers = {
+      id: props.IDInvoice,
+      commercialInvoiceDate: Invoice.commercialInvoiceDate,
+      invoiceNumber: Invoice.invoiceNumber,
+      trailerNumber: Invoice.trailerNumber,
+      trailerId: Invoice.trailerId,
+      porOfLoading: Invoice.porOfLoading,
+      portOfEntry: Invoice.portOfEntry,
+      paymentsTerms: Invoice.paymentsTerms,
+      incoterms: Invoice.incoterms,
+      hawb: Invoice.hawb,
+      totalInvoiceQuantityUnitOfMeasure:
+        Invoice.totalInvoiceQuantityUnitOfMeasure,
+      totalInvoiceQuantity: Invoice.totalInvoiceQuantity,
+      totalInvoiceWeightUnitOfMeasure: Invoice.totalInvoiceWeightUnitOfMeasure,
+      totalInvoiceWeight: Invoice.totalInvoiceWeight,
+      totalInvoiceValueChargeOrAllowance:
+        Invoice.totalInvoiceValueChargeOrAllowance,
+      totalInvoiceValueCurrencyISOCode:
+        Invoice.totalInvoiceValueCurrencyISOCode,
+      totalInvoiceValueMonetaryAmount: Invoice.totalInvoiceValueMonetaryAmount,
+      footNote: Invoice.footNote,
+      archivo: Invoice.archivo,
+      fCreacion: Invoice.fCreacion,
+      estatus: Invoice.estatus,
+      max: true,
+      detail: Detail
+    }
+    dispatch(updateInvoice(updatedInvoice))
+  }
+
+  const UpdateInfo = () => {
+    const Invoice = mInvoices
+      .filter((el) => el.id === props.IDInvoice)
+      .map((el) => {
+        return el
+      })
+    const newDetail = Invoice[0].detail.map((el) => {
+      if (el.id === props.IDDetail) {
+        return {
+          ...el,
+          fraccionGEMCO: Fraccion
+        }
+      }
+      return el
+    })
+    refreshStore(Invoice[0], newDetail)
+  }
+
   const changeValidacion = (e: number) => {
     setValidacion(e)
-    if (e === 2) {
-      setShowModal(true)
   }
-    if (e === 1) {
+
+  useEffect(() => {
+    if (Validacion === 2) {
+      setShowModal(true)
+    } else if (Validacion === 1) {
       const data: DTO2096Fraccion = {
         id: props.IDDetail,
-        fraccion: props.FraccionOriginal
+        fraccion: Fraccion
       }
       DSAmazon.SetFraccion(data)
         .then((response) => {
-
-         /*
-          let Invoice: I2096Headers[] = mInvoices.filter((item) => item.id === props.IDInvoice)
-          const Obj = { ...Invoice[0] }
-
-          const newObject = Invoice.map(Invoice => ({ ...Invoice,
-            detail: Invoice.detail.filter(detail=>detail.id===props.IDDetail).map(detail => ({ ...detail,
-              fraccionGEMCO: detail.destinationHTSCode.replaceAll('.','')
-            }))
-          }))
-            
-
-          const Obj2 = { ...newObject[0] }
-          Obj2.max = !Obj2.max
-
-          console.log('.................................new object '+JSON.stringify(Obj2))
-          dispatch(updateInvoice(Obj2))
-*/
-
-/* const newObj = mInvoices.forEach(function(o) {
-  o.detail = o.detail.filter(s => (s.idHeader === props.IDInvoice) && (s.id!=props.IDDetail));
-}); */
-
-/* const newObj = mInvoices.map(function(o) {
-  const newDetail = {...o.detail}
-  if (newDetail[0].id===props.IDDetail) {
-    newDetail[0].fraccionGEMCO=Fraccion
-  }
-  return newDetail
-});
-
-console.log(newObj) */
-
-//dispatch(updateInvoice(newObj))
-         
-
+          UpdateInfo()
           setShowModal(false)
           setHeader('Confirmacion')
           setMsg('La descripcion se ha guardado correctamente')
           setShowMsg(true)
-          forceUpdate()
+          //forceUpdate()
           return
         })
         .catch((e: Error) => {
           alert('Ocurrio un error' + e.message.toString())
         })
     }
-  }
-
-
+  }, [Validacion])
 
   const saveFraccion = () => {
     DSAmazon.GetValidaFraccion(Fraccion)
@@ -114,6 +129,7 @@ console.log(newObj) */
           }
           DSAmazon.SetFraccion(data)
             .then((response) => {
+              UpdateInfo()
               setShowModal(false)
               setHeader('Confirmacion')
               setMsg('La descripcion se ha guardado correctamente')
@@ -159,7 +175,7 @@ console.log(newObj) */
         <Modal.Body>
           <Row>
             <Col xs={2}></Col>
-            <Col xs={4}>Proporcione la facccion GEMCO {props.IDInvoice}</Col>
+            <Col xs={4}>Proporcione la facccion GEMCO</Col>
             <Col xs={3}>
               <CurrencyFormat
                 onValueChange={(values: any) => {

src/Components/Clientes/Amazon/DTO/DTO2096ItemAutoriza.ts

@@ -1,4 +1,6 @@
 export default interface DTO2096ItemAutoriza {
     id: number,
-    autoriza: boolean
+    autorizado: boolean,
+    requerimientoNormativo: string,
+    comentarios: string
 }

src/Components/Clientes/Amazon/Interfaces/I2096Detail.ts

@@ -34,4 +34,7 @@ export default interface I2096Detail {
   fCreacion: string
   estatus: number
   autorizado: boolean
+  requerimientoNormativo: string
+  comentarios: string
+  activo: number
 }

src/Components/Clientes/Amazon/Reportes/RptAmazonPendingInvoices.tsx

@@ -506,6 +506,24 @@ export default function RtpAmazonPendingInvoices(
                                       >
                                         Autorizado
                                       </th>
+                                      <th
+                                        style={{
+                                          width: '70px',
+                                          backgroundColor: '#D3E0EA',
+                                          color: '#346288'
+                                        }}
+                                      >
+                                        RN
+                                      </th>
+                                      <th
+                                        style={{
+                                          width: '70px',
+                                          backgroundColor: '#D3E0EA',
+                                          color: '#346288'
+                                        }}
+                                      >
+                                        Comm
+                                      </th>
                                     </tr>
                                   </thead>
                                   <tbody>

src/Components/Clientes/Amazon/Reportes/RptAmazonPendingInvoicesDetail.tsx

@@ -1,12 +1,17 @@
 import * as React from 'react'
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import {
   Alert,
   Button,
   Col,
+  Form,
   FormCheck,
   Modal,
-  Row
+  Overlay,
+  OverlayTrigger,
+  Popover,
+  Row,
+  Tooltip
 } from 'react-bootstrap'
 import { IconContext } from 'react-icons'
 import { FaCheckCircle, FaQuestionCircle } from 'react-icons/fa'
@@ -28,8 +33,9 @@ import {
   updateInvoice,
   deleteInvoice
 } from '../../../../store/features/Clientes/2096/AmazonInvoices'
-
-
+import * as CurrencyFormat from 'react-currency-format'
+import { AiOutlineFileSearch } from 'react-icons/ai'
+import { BsFillChatLeftDotsFill, BsFillChatRightTextFill } from 'react-icons/bs'
 
 export interface IRtpAmazonPendingInvoivesDetailProps {
   IDMaster: number
@@ -45,105 +51,111 @@ export default function RtpAmazonPendingInvoivesDetail(
     (state: RootState) => state.AmazonInvoices.Invoice
   )
   const [ShowModal, setShowModal] = useState(false)
+  const [EstatusSwith, setEstatusSwitch] = useState(props.detail.autorizado)
   const [header, setHeader] = useState('')
   const [show, setShowMsg] = useState(false)
+  const [Show, setShow] = useState(false)
   const [msg, setMsg] = useState('')
+  const [RequerimientoNormativo, setRequerimientoNormativo] = useState('')
+  const [Comentarios, setComentarios] = useState('')
   const msgColor = 'primary'
   const openLink = (item: string) => {
     window.open('https://www.amazon.com/dp/' + item)
   }
+  const target = React.useRef(null);
 
   const parentFunction = (fraccion: string) => {
     alert('update')
   }
 
-  const editArray = (id: number, val: boolean) => {
-    /* const newData = mInvoices;
-    for (const invoice of newData) {
-      for (const det of invoice.detail) {
-          det.autorizado=true
-      }
-    } */
-
-     const newData = mInvoices.map((invoice) => {
-      if (invoice.id === props.IDMaster) {
-        return {
-          ...invoice,
-          detail: [...invoice.detail]
+  const UpdateInfo = (Invoice: I2096Headers, Detail: I2096Detail[]) => {
+    const updatedInvoice: I2096Headers = {
+      id: props.IDMaster,
+      commercialInvoiceDate: Invoice.commercialInvoiceDate,
+      invoiceNumber: Invoice.invoiceNumber,
+      trailerNumber: Invoice.trailerNumber,
+      trailerId: Invoice.trailerId,
+      porOfLoading: Invoice.porOfLoading,
+      portOfEntry: Invoice.portOfEntry,
+      paymentsTerms: Invoice.paymentsTerms,
+      incoterms: Invoice.incoterms,
+      hawb: Invoice.hawb,
+      totalInvoiceQuantityUnitOfMeasure:
+        Invoice.totalInvoiceQuantityUnitOfMeasure,
+      totalInvoiceQuantity: Invoice.totalInvoiceQuantity,
+      totalInvoiceWeightUnitOfMeasure: Invoice.totalInvoiceWeightUnitOfMeasure,
+      totalInvoiceWeight: Invoice.totalInvoiceWeight,
+      totalInvoiceValueChargeOrAllowance:
+        Invoice.totalInvoiceValueChargeOrAllowance,
+      totalInvoiceValueCurrencyISOCode:
+        Invoice.totalInvoiceValueCurrencyISOCode,
+      totalInvoiceValueMonetaryAmount: Invoice.totalInvoiceValueMonetaryAmount,
+      footNote: Invoice.footNote,
+      archivo: Invoice.archivo,
+      fCreacion: Invoice.fCreacion,
+      estatus: Invoice.estatus,
+      max: true,
+      detail: Detail
     }
-      } else {
-        return invoice
+    dispatch(updateInvoice(updatedInvoice))
   }
-    });
 
-      dispatch(initializeInvoice([]))
-    dispatch(populateInvoices(newData))   
-  /*   const Invoice = mInvoices
+  const editArray = (id: number, valor: boolean) => {
+    const Invoice = mInvoices
       .filter((el) => el.id === props.IDMaster)
       .map((el) => {
         return el
       })
-    const newData = Invoice[0].detail.map((el) => {
+    const newDetail = Invoice[0].detail.map((el) => {
       if (el.id === id) {
         return {
           ...el,
-          autorizado: true
+          autorizado: valor
         }
       }
       return el
     })
-    const updatedInvoice: I2096Headers[] = [{
-      id: props.IDMaster,
-      commercialInvoiceDate: Invoice[0].commercialInvoiceDate,
-      invoiceNumber: Invoice[0].invoiceNumber,
-      trailerNumber: Invoice[0].trailerNumber,
-      trailerId: Invoice[0].trailerId,
-      porOfLoading: Invoice[0].porOfLoading,
-      portOfEntry: Invoice[0].portOfEntry,
-      paymentsTerms: Invoice[0].paymentsTerms,
-      incoterms: Invoice[0].incoterms,
-      hawb: Invoice[0].hawb,
-      totalInvoiceQuantityUnitOfMeasure:
-        Invoice[0].totalInvoiceQuantityUnitOfMeasure,
-      totalInvoiceQuantity: Invoice[0].totalInvoiceQuantity,
-      totalInvoiceWeightUnitOfMeasure:
-        Invoice[0].totalInvoiceWeightUnitOfMeasure,
-      totalInvoiceWeight: Invoice[0].totalInvoiceWeight,
-      totalInvoiceValueChargeOrAllowance:
-        Invoice[0].totalInvoiceValueChargeOrAllowance,
-      totalInvoiceValueCurrencyISOCode:
-        Invoice[0].totalInvoiceValueCurrencyISOCode,
-      totalInvoiceValueMonetaryAmount:
-        Invoice[0].totalInvoiceValueMonetaryAmount,
-      footNote: Invoice[0].footNote,
-      archivo: Invoice[0].archivo,
-      fCreacion: Invoice[0].fCreacion,
-      estatus: Invoice[0].estatus,
-      max: true,
-      detail: []
-    }]
-    dispatch(updateInvoice)
-    console.log(JSON.stringify(updateInvoice)) */
+    UpdateInfo(Invoice[0], newDetail)
   }
 
   const autoriceItem = (id: number) => {
+    if (RequerimientoNormativo.length === 0 && EstatusSwith) {
+      setHeader('Error')
+      setMsg(
+        'Antes de poder guardar la informacion es necesario que proporcione el reparto normativo'
+      )
+      setShowMsg(true)
+      return
+    }
     const data: DTO2096ItemAutoriza = {
       id: id,
-      autoriza: !props.detail.autorizado
+      autorizado: !props.detail.autorizado,
+      requerimientoNormativo: RequerimientoNormativo,
+      comentarios: Comentarios
     }
+
     DSAmazon.Set$Autorizado(data)
       .then((response) => {
-        console.log(JSON.stringify(response.data))
         editArray(id, !props.detail.autorizado)
+        setShowModal(false)
       })
-      .catch((e: Error) => {
-/*         setHeader('Error')
-        setMsg('Ocurrio un error')
-        setShowMsg(true)
-        return */
-      })
+      .catch((e: Error) => {})
   }
 
+  useEffect(() => {
+    if (EstatusSwith && !props.detail.fraccionGEMCO) autoriceItem(props.detail.id)
+  }, [EstatusSwith])
+
+  const popover = (
+    <Popover id="popover-basic">
+      <Popover.Header as="h3">Popover right</Popover.Header>
+      <Popover.Body>
+        And here's some <strong>amazing</strong> content. It's very engaging.
+        right?
+      </Popover.Body>
+    </Popover>
+  );
+
   return (
     <>
       <tr>
@@ -245,10 +257,20 @@ export default function RtpAmazonPendingInvoivesDetail(
           }}
           className="DetailData"
         >
-          <TextBoxFraccion
-            Fraccion={
-              props.detail.fraccionGEMCO ? props.detail.fraccionGEMCO : ''
-            }
+          <CurrencyFormat
+            value={props.detail.fraccionGEMCO ? props.detail.fraccionGEMCO : ''}
+            disabled={true}
+            format={'######## ##'}
+            displayType={'input'}
+            style={{
+              fontSize: '18px',
+              backgroundColor: '#F1EEF9',
+              border: '2px solid #5923F6',
+              color: '#5923F6',
+              width: '115px',
+              textAlign: 'right',
+              borderRadius: '10px'
+            }}
           />
         </td>
         <td
@@ -258,6 +280,7 @@ export default function RtpAmazonPendingInvoivesDetail(
           className="DetailData"
         >
           <ComboDescripcion
+            IDInvoice={props.IDMaster}
             IDDetail={props.detail.id}
             DescripcionOriginal={props.detail.pedimentoDescription}
             Habilitado={props.Habilitado}
@@ -351,17 +374,65 @@ export default function RtpAmazonPendingInvoivesDetail(
           className="DetailData"
         >
           <FormCheck
+            className="form-check form-switch form-check-lg"
             id="switchEnabled"
             type="switch"
-            checked={props.detail.autorizado}
+            disabled={
+              ((!props.detail.autorizado &&
+              !props.detail.fraccionGEMCO) || (props.detail.validaFraccionOriginal===1 && props.detail.autorizado===true))
+            }
+            checked={EstatusSwith}
             onChange={() => {
-              setShowModal(!props.detail.autorizado)
+              setEstatusSwitch(!EstatusSwith)
+              setShowModal(!EstatusSwith)
             }}
-            className="mb-8"
             label=""
           />
         </td>
+        <td style={{visibility : props.detail.validaFraccionOriginal!==0 ? 'hidden' : 'visible'}}>  <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 : props.detail.validaFraccionOriginal!==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>
       </tr>
+     
       <Modal
         show={ShowModal}
         onHide={() => {
@@ -371,7 +442,7 @@ export default function RtpAmazonPendingInvoivesDetail(
         dialogClassName={'modal-50w'}
       >
         <Modal.Body>
-          <div style={{ height: '150px' }}>
+          <div style={{ height: '280px' }}>
             <Row style={{ paddingTop: '15px' }}>
               <Col xs={1}></Col>
               <Col xs={10}>
@@ -381,7 +452,39 @@ export default function RtpAmazonPendingInvoivesDetail(
               </Col>
               <Col xs={1}></Col>
             </Row>
-            <Row>
+            <Row style={{ paddingTop: '15px' }}>
+              <Col xs={3}>Reparto normativo</Col>
+              <Col xs={8}>
+                {' '}
+                <Form.Control
+                  as="textarea"
+                  id="RequerimientoNormativo"
+                  size="sm"
+                  value={RequerimientoNormativo}
+                  onChange={(e) => setRequerimientoNormativo(e.target.value)}
+                />
+              </Col>
+              <Col>&nbsp;</Col>
+            </Row>
+            <Row style={{ paddingTop: '15px' }}>
+              <Col xs={3}>Comentarios</Col>
+              <Col xs={8}>
+                {' '}
+                <Form.Control
+                  as="textarea"
+                  id="Comentarios"
+                  size="sm"
+                  value={
+                    Comentarios.length
+                      ? Comentarios
+                      : 'Clasificacion incorrecta.'
+                  }
+                  onChange={(e) => setRequerimientoNormativo(e.target.value)}
+                />
+              </Col>
+              <Col>&nbsp;</Col>
+            </Row>
+            <Row style={{ paddingTop: '15px' }}>
               <Col xs={6} style={{ textAlign: 'center' }}>
                 <Button
                   variant="secondary"