Se ele agrega facultad para poder manejar catalogo de conceptos en las notificaciones

src/Components/GEMCO/Facturacion/Anexo/RptConsolidadosSinCerrar.tsx

@@ -35,7 +35,7 @@ export default function RtpConsolidadosSinCerrar(
   ]
 
   const downloadExcel = () => {
-    exportExcel(Data, 'Relacion Mission')
+    exportExcel(Data, 'Consolidados sin cerrar')
   }
 
   function exportExcel(jsonData: any[], fileName: string): void {

src/Components/GEMCO/Facturacion/Anexo/RptRelacionAlen.tsx

@@ -8,6 +8,7 @@ import DTOAnexoFacturacionMission from '../../../../DTO/Facturacion/Anexo/DTOAne
 import IAnexoFacturacionAlen from '../../../../Interfaces/Facturacion/Anexo/IAnexoFacturacionAlen'
 import DSAnexoFacturacion from '../../../../Services/Facturacion/Anexo/Anexo.Facturacion.Services'
 import DTOAnexoFacturacionAlen from '../../../../DTO/Facturacion/Anexo/DTOAnexoFacturacionAlen'
+import * as CurrencyFormat from 'react-currency-format'
 
 export interface IRptRelacionAlenProps {}
 
@@ -24,114 +25,121 @@ export default function RptRelacionAlen(props: IRptRelacionAlenProps) {
       name: 'Referencia',
       width: '110px',
       cell: (row: IAnexoFacturacionAlen) => row.sReferencia,
-      sortable: true,
+      sortable: true
     },
     {
       name: 'Remesa',
       width: '90px',
       cell: (row: IAnexoFacturacionAlen) => row.remesa,
-      sortable: true,
+      sortable: true
     },
     {
       name: 'Entrega',
       width: '200px',
       cell: (row: IAnexoFacturacionAlen) => row.entrega,
-      sortable: true,
+      sortable: true
     },
     {
       name: 'Numero',
       width: '180px',
       cell: (row: IAnexoFacturacionAlen) => row.sNumero,
-      sortable: true,
+      sortable: true
     },
     {
       name: 'Fecha',
       width: '100px',
       cell: (row: IAnexoFacturacionAlen) => row.dFecha,
-      sortable: true,
+      sortable: true
     },
     {
       name: 'eDocument',
       width: '140px',
       cell: (row: IAnexoFacturacionAlen) => row.sEDocument,
-      sortable: true,
+      sortable: true
     },
     {
       name: 'Val factura',
       width: '105px',
       cell: (row: IAnexoFacturacionAlen) => row.valorFactura,
-      sortable: true,
+      sortable: true
     },
     {
       name: 'Pedimento',
       width: '110px',
       cell: (row: IAnexoFacturacionAlen) => row.sPedimento,
-      sortable: true,
+      sortable: true
     },
     {
       name: 'Cruce',
       width: '150px',
       cell: (row: IAnexoFacturacionAlen) => row.cruce,
-      sortable: true,
+      sortable: true
     },
     {
       name: 'Semaforo',
       width: '125px',
       cell: (row: IAnexoFacturacionAlen) => row.semaforo,
-      sortable: true,
+      sortable: true
     },
     {
       name: 'Fecha Cta Corresponsal',
       width: '125px',
       cell: (row: IAnexoFacturacionAlen) => row.fechaCtaCorresponsal,
-      sortable: true,
+      sortable: true
     },
     {
       name: 'Honorarios',
       width: '110px',
-      cell: (row: IAnexoFacturacionAlen) => (Math.round(row.honorarios * 100) / 100).toFixed(2),
+      cell: (row: IAnexoFacturacionAlen) =>
-      sortable: true,
+        (Math.round(row.honorarios * 100) / 100).toFixed(2),
+      sortable: true
     },
     {
       name: 'Maniobras',
       width: '120px',
-      cell: (row: IAnexoFacturacionAlen) => (Math.round(row.maniobras * 100) / 100).toFixed(2),
+      cell: (row: IAnexoFacturacionAlen) =>
-      sortable: true,
+        (Math.round(row.maniobras * 100) / 100).toFixed(2),
+      sortable: true
     },
     {
       name: 'Validacion',
       width: '120px',
-      cell: (row: IAnexoFacturacionAlen) => (Math.round(row.validacion * 100) / 100).toFixed(2),
+      cell: (row: IAnexoFacturacionAlen) =>
-      sortable: true,
+        (Math.round(row.validacion * 100) / 100).toFixed(2),
+      sortable: true
     },
     {
       name: 'Prevalidacion',
       width: '120px',
-      cell: (row: IAnexoFacturacionAlen) => (Math.round(row.prevalidacion * 100) / 100).toFixed(2),
+      cell: (row: IAnexoFacturacionAlen) =>
-      sortable: true,
+        (Math.round(row.prevalidacion * 100) / 100).toFixed(2),
+      sortable: true
     },
     {
       name: 'Coordinacion',
       width: '120px',
-      cell: (row: IAnexoFacturacionAlen) =>(Math.round(row.coordinacion * 100) / 100).toFixed(2),
+      cell: (row: IAnexoFacturacionAlen) =>
-      sortable: true,
+        (Math.round(row.coordinacion * 100) / 100).toFixed(2),
+      sortable: true
     },
     {
       name: 'IVA',
       width: '120px',
-      cell: (row: IAnexoFacturacionAlen) => (Math.round(row.iva * 100) / 100).toFixed(2),
+      cell: (row: IAnexoFacturacionAlen) =>
-      sortable: true,
+        (Math.round(row.iva * 100) / 100).toFixed(2),
+      sortable: true
     },
     {
       name: 'Total MN',
       width: '120px',
-      cell: (row: IAnexoFacturacionAlen) => (Math.round(row.totalMN * 100) / 100).toFixed(2),
+      cell: (row: IAnexoFacturacionAlen) =>
-      sortable: true,
+        (Math.round(row.totalMN * 100) / 100).toFixed(2),
-    },
+      sortable: true
+    }
   ]
 
   const downloadExcel = () => {
-    exportExcel(Data, 'Relacion Alen '+Referencia)
+    exportExcel(Data, 'Relacion Alen ' + Referencia)
   }
 
   function exportExcel(jsonData: any[], fileName: string): void {
@@ -155,7 +163,7 @@ export default function RptRelacionAlen(props: IRptRelacionAlenProps) {
         'Coordinacion',
         'IVA',
         'Total MN'
-      ],
+      ]
     ]
     const wb = XLSX.utils.book_new()
     const ws: XLSX.WorkSheet = XLSX.utils.json_to_sheet([])
@@ -177,7 +185,7 @@ export default function RptRelacionAlen(props: IRptRelacionAlenProps) {
       nHonorarios: Honorarios,
       nValidacion: Validacion,
       nPrevalidacion: Prevalidacion,
-      nCoordinacion: Coordinacion,
+      nCoordinacion: Coordinacion
     }
     DSAnexoFacturacion.GetAlen(data)
       .then((response) => {
@@ -197,12 +205,14 @@ export default function RptRelacionAlen(props: IRptRelacionAlenProps) {
             <Card.Body>
               <Card.Title>
                 <Row>
-                  <Col xs={3}>Relacion Alen : {Total>0 ? Total-1 : Total} registros</Col>
+                  <Col xs={3}>
+                    Relacion Alen : {Total > 0 ? Total - 1 : Total} registros
+                  </Col>
                   <Col xs={8}></Col>
-                  <Col xs={1} className='colAlignRight'>
+                  <Col xs={1} className="colAlignRight">
                     <Button
-                      size='sm'
+                      size="sm"
-                      variant='success'
+                      variant="success"
                       onClick={() => {
                         downloadExcel()
                       }}
@@ -213,67 +223,139 @@ export default function RptRelacionAlen(props: IRptRelacionAlenProps) {
                   </Col>
                 </Row>
               </Card.Title>
-              <Card.Subtitle className='mb-2 text-muted'>
+              <Card.Subtitle className="mb-2 text-muted">
                 <Row>
-                  <Col className='colAlignRight'>Referencia: </Col>
+                  <Col className="colAlignRight">Referencia: </Col>
                   <Col>
                     <Form.Control
-                      type='text'
+                      type="text"
-                      size='sm'
+                      size="sm"
-                      placeholder='Referencia'
+                      placeholder="Referencia"
                       onChange={(e: any) => {
                         setReferencia(e.target.value)
                       }}
                     />
                   </Col>
-                  <Col className='colAlignRight'>Honorarios:</Col>
+                  <Col className="colAlignRight">Honorarios:</Col>
                   <Col>
-                    <Form.Control
+                    {/* <Form.Control
                       type='number'
                       size='sm'
                       placeholder='Honorarios'
                       onChange={(e: any) => {
                         setHonorarios(e.target.value)
                       }}
+                    /> */}
+                    <CurrencyFormat
+                      value={Honorarios}
+                      displayType={'input'}
+                      thousandSeparator={true}
+                      decimalScale={2}
+                      onValueChange={(values: any) => {
+                        const { value } = values
+                        setHonorarios(value)
+                      }}
+                      style={{
+                        fontSize: '18px',
+                        backgroundColor: '#F5FFED',
+                        border: '2px solid #25D05B',
+                        width: '100px',
+                        textAlign: 'right',
+                        borderRadius: '10px'
+                      }}
                     />
                   </Col>
-                  <Col className='colAlignRight'>Validacion:</Col>
+                  <Col className="colAlignRight">Validacion:</Col>
                   <Col>
-                    <Form.Control
+                  {/*   <Form.Control
-                      type='number'
+                      type="number"
-                      size='sm'
+                      size="sm"
-                      placeholder='Validacion'
+                      placeholder="Validacion"
                       onChange={(e: any) => {
                         setValidacion(e.target.value)
                       }}
-                    />
+                    /> */}
+                     <CurrencyFormat
+                      value={Validacion}
+                      displayType={'input'}
+                      thousandSeparator={true}
+                      decimalScale={2}
+                      onValueChange={(values: any) => {
+                        const { value } = values
+                        setValidacion(value)
+                      }}
+                      style={{
+                        fontSize: '18px',
+                        backgroundColor: '#F5FFED',
+                        border: '2px solid #25D05B',
+                        width: '100px',
+                        textAlign: 'right',
+                        borderRadius: '10px'
+                      }}
+                      />
                   </Col>
-                  <Col className='colAlignRight'>Prevalidacion:</Col>
+                  <Col className="colAlignRight">Prevalidacion:</Col>
                   <Col>
-                    <Form.Control
+                    {/* <Form.Control
-                      type='number'
+                      type="number"
-                      size='sm'
+                      size="sm"
-                      placeholder='Prevalidacion'
+                      placeholder="Prevalidacion"
                       onChange={(e: any) => {
                         setPrevalidacion(e.target.value)
                       }}
-                    />
+                    /> */}
+                     <CurrencyFormat
+                      value={Prevalidacion}
+                      displayType={'input'}
+                      thousandSeparator={true}
+                      decimalScale={2}
+                      onValueChange={(values: any) => {
+                        const { value } = values
+                        setPrevalidacion(value)
+                      }}
+                      style={{
+                        fontSize: '18px',
+                        backgroundColor: '#F5FFED',
+                        border: '2px solid #25D05B',
+                        width: '100px',
+                        textAlign: 'right',
+                        borderRadius: '10px'
+                      }}
+                      />
                   </Col>
-                  <Col className='colAlignRight'>Coordinacion:</Col>
+                  <Col className="colAlignRight">Coordinacion:</Col>
                   <Col>
-                    <Form.Control
+                   {/*  <Form.Control
-                      type='number'
+                      type="number"
-                      size='sm'
+                      size="sm"
-                      placeholder='Coordinacion'
+                      placeholder="Coordinacion"
                       onChange={(e: any) => {
                         setCoordinacion(e.target.value)
                       }}
-                    />
+                    /> */}
+                     <CurrencyFormat
+                      value={Coordinacion}
+                      displayType={'input'}
+                      thousandSeparator={true}
+                      decimalScale={2}
+                      onValueChange={(values: any) => {
+                        const { value } = values
+                        setCoordinacion(value)
+                      }}
+                      style={{
+                        fontSize: '18px',
+                        backgroundColor: '#F5FFED',
+                        border: '2px solid #25D05B',
+                        width: '100px',
+                        textAlign: 'right',
+                        borderRadius: '10px'
+                      }}
+                      />
                   </Col>
                   <Col>
                     <Button
-                      variant='primary'
+                      variant="primary"
-                      size='sm'
+                      size="sm"
                       onClick={() => {
                         generaReporte()
                       }}
@@ -290,19 +372,19 @@ export default function RptRelacionAlen(props: IRptRelacionAlenProps) {
       <Row>
         <Col xs={12}>
           <DataTable
-          dense
+            dense
-          noHeader
+            noHeader
-          defaultSortFieldId={'cliente'}
+            defaultSortFieldId={'cliente'}
-          defaultSortAsc={true}
+            defaultSortAsc={true}
-          fixedHeaderScrollHeight="550px"
+            fixedHeaderScrollHeight="550px"
-          striped={true}
+            striped={true}
-          fixedHeader
+            fixedHeader
-/*                 paginationPerPage={10}
+            /*                 paginationPerPage={10}
           pagination */
-          highlightOnHover
+            highlightOnHover
-          columns={columnsConcepts}
+            columns={columnsConcepts}
-          data={Data}
+            data={Data}
-          pointerOnHover
+            pointerOnHover
           />
         </Col>
       </Row>

src/Components/GEMCO/Facturacion/Anexo/RptRelacionMission.tsx

@@ -4,6 +4,7 @@ import DataTable from 'react-data-table-component'
 import { BsFileEarmarkExcel, BsSearch } from 'react-icons/bs'
 import '../../../../css/generic01.css'
 import * as XLSX from 'xlsx'
+import * as CurrencyFormat from 'react-currency-format'
 import DTOAnexoFacturacionMission from '../../../../DTO/Facturacion/Anexo/DTOAnexoFacturacionMission'
 import IAnexoFacturacionMission from '../../../../Interfaces/Facturacion/Anexo/IAnexoFacturacionMission'
 import DSAnexoFacturacion from '../../../../Services/Facturacion/Anexo/Anexo.Facturacion.Services'
@@ -53,49 +54,57 @@ export default function RptRelacionMission(props: IRptRelacionMissionProps) {
     {
       name: 'Ctr',
       width: '80px',
-      cell: (row: IAnexoFacturacionMission) => row.contraprestacion,
+      cell: (row: IAnexoFacturacionMission) => 
+      (Math.round(row.contraprestacion * 100) / 100).toFixed(2),
       sortable: true,
     },
     {
       name: 'Cruce',
       width: '100px',
-      cell: (row: IAnexoFacturacionMission) => row.cruce,
+      cell: (row: IAnexoFacturacionMission) => 
+      (Math.round(row.cruce * 100) / 100).toFixed(2),
       sortable: true,
     },
     {
       name: 'Flete',
       width: '100px',
-      cell: (row: IAnexoFacturacionMission) => row.flete,
+      cell: (row: IAnexoFacturacionMission) => 
+      (Math.round(row.flete * 100) / 100).toFixed(2),
       sortable: true,
     },
     {
       name: 'Otros Serv.',
       width: '125px',
-      cell: (row: IAnexoFacturacionMission) => row.otrosServicios,
+      cell: (row: IAnexoFacturacionMission) => 
+      (Math.round(row.otrosServicios * 100) / 100).toFixed(2),
       sortable: true,
     },
     {
       name: 'Tot Comp',
       width: '125px',
-      cell: (row: IAnexoFacturacionMission) => row.totComp,
+      cell: (row: IAnexoFacturacionMission) => 
+      (Math.round(row.totComp * 100) / 100).toFixed(2),
       sortable: true,
     },
     {
       name: 'Honorarios',
       width: '125px',
-      cell: (row: IAnexoFacturacionMission) => row.honorarios,
+      cell: (row: IAnexoFacturacionMission) => 
+      (Math.round(row.honorarios * 100) / 100).toFixed(2),
       sortable: true,
     },
     {
       name: 'IVA',
       width: '80px',
-      cell: (row: IAnexoFacturacionMission) => row.iva,
+      cell: (row: IAnexoFacturacionMission) => 
+      (Math.round(row.iva * 100) / 100).toFixed(2),
       sortable: true,
     },
     {
       name: 'Total',
       width: '120px',
-      cell: (row: IAnexoFacturacionMission) => row.total,
+      cell: (row: IAnexoFacturacionMission) => 
+      (Math.round(row.total * 100) / 100).toFixed(2),
       sortable: true,
     },
   ]
@@ -180,25 +189,61 @@ export default function RptRelacionMission(props: IRptRelacionMissionProps) {
                   </Col>
                   <Col className='colAlignRight'>Coord de cruce:</Col>
                   <Col>
-                    <Form.Control
+                   {/*  <Form.Control
                       type='number'
                       size='sm'
                       placeholder='Coordinacion cruce'
                       onChange={(e: any) => {
                         setCoordinacionCruce(e.target.value)
                       }}
-                    />
+                    /> */}
+                     <CurrencyFormat
+                      value={CoordinacionCruce}
+                      displayType={'input'}
+                      thousandSeparator={true}
+                      decimalScale={2}
+                      onValueChange={(values: any) => {
+                        const { value } = values
+                        setCoordinacionCruce(value)
+                      }}
+                      style={{
+                        fontSize: '18px',
+                        backgroundColor: '#F5FFED',
+                        border: '2px solid #25D05B',
+                        width: '100px',
+                        textAlign: 'right',
+                        borderRadius: '10px'
+                      }}
+                      />
                   </Col>
                   <Col className='colAlignRight'>Coord de flete:</Col>
                   <Col>
-                    <Form.Control
+                    {/* <Form.Control
                       type='number'
                       size='sm'
                       placeholder='Coordinacion flete'
                       onChange={(e: any) => {
                         setCoordinacionFlete(e.target.value)
                       }}
-                    />
+                    /> */}
+                      <CurrencyFormat
+                      value={CoordinacionFlete}
+                      displayType={'input'}
+                      thousandSeparator={true}
+                      decimalScale={2}
+                      onValueChange={(values: any) => {
+                        const { value } = values
+                        setCoordinacionFlete(value)
+                      }}
+                      style={{
+                        fontSize: '18px',
+                        backgroundColor: '#F5FFED',
+                        border: '2px solid #25D05B',
+                        width: '100px',
+                        textAlign: 'right',
+                        borderRadius: '10px'
+                      }}
+                      />
                   </Col>
                   <Col>&nbsp;</Col>
                 </Row>
@@ -206,39 +251,92 @@ export default function RptRelacionMission(props: IRptRelacionMissionProps) {
               <Row>
                 <Col className='colAlignRight'>Servicio:</Col>
                 <Col>
-                  <Form.Control
+                {/*   <Form.Control
                     type='number'
                     size='sm'
                     placeholder='Servicio'
                     onChange={(e: any) => {
                       setServicio(e.target.value)
                     }}
-                  />
+                  /> */}
+                    <CurrencyFormat
+                      value={Servicio}
+                      displayType={'input'}
+                      thousandSeparator={true}
+                      decimalScale={2}
+                      onValueChange={(values: any) => {
+                        const { value } = values
+                        setServicio(value)
+                      }}
+                      style={{
+                        fontSize: '18px',
+                        backgroundColor: '#F5FFED',
+                        border: '2px solid #25D05B',
+                        width: '100px',
+                        textAlign: 'right',
+                        borderRadius: '10px'
+                      }}
+                      />
                 </Col>
-                <Col className='colAlignRight'>Contrapestracion:</Col>
+                <Col className='colAlignRight'>Contraprestacion:</Col>
                 <Col>
-                  <Form.Control
+                {/*   <Form.Control
                     type='number'
                     size='sm'
                     placeholder='Contraprestacion'
                     onChange={(e: any) => {
                       setContraprestacion(e.target.value)
                     }}
-                  />
+                  /> */}
+                    <CurrencyFormat
+                      value={Contraprestacion}
+                      displayType={'input'}
+                      thousandSeparator={true}
+                      decimalScale={2}
+                      onValueChange={(values: any) => {
+                        const { value } = values
+                        setContraprestacion(value)
+                      }}
+                      style={{
+                        fontSize: '18px',
+                        backgroundColor: '#F5FFED',
+                        border: '2px solid #25D05B',
+                        width: '100px',
+                        textAlign: 'right',
+                        borderRadius: '10px'
+                      }}
+                      />
                 </Col>
                 <Col className='colAlignRight'>Honorarios:</Col>
                 <Col>
-                  <Form.Control
+                  {/* <Form.Control
                     type='number'
                     size='sm'
                     placeholder='Honorarios'
                     onChange={(e: any) => {
                       setHonorarios(e.target.value)
                     }}
-                  />
+                  /> */}
+                    <CurrencyFormat
+                      value={Honorarios}
+                      displayType={'input'}
+                      thousandSeparator={true}
+                      decimalScale={2}
+                      onValueChange={(values: any) => {
+                        const { value } = values
+                        setHonorarios(value)
+                      }}
+                      style={{
+                        fontSize: '18px',
+                        backgroundColor: '#F5FFED',
+                        border: '2px solid #25D05B',
+                        width: '100px',
+                        textAlign: 'right',
+                        borderRadius: '10px'
+                      }}
+                      />
                 </Col>
                 <Col>
-                  {' '}
                   <Button
                     variant='primary'
                     size='sm'

src/Components/Utils/Notificaciones/Notificaciones.tsx

@@ -4,6 +4,7 @@ import {
   Button,
   Card,
   Col,
+  Dropdown,
   FloatingLabel,
   Form,
   Modal,
@@ -18,6 +19,7 @@ import NotificacionesDS from '../../../Services/Utils/Notificaciones/Notificacio
 import {
   AiFillCaretLeft,
   AiFillCaretRight,
+  AiOutlineProfile,
   AiOutlineTeam,
   AiOutlineUsergroupAdd
 } from 'react-icons/ai'
@@ -25,6 +27,7 @@ import { IconContext } from 'react-icons'
 import { HiCurrencyDollar } from 'react-icons/hi'
 import DTONotificacionesContactoGrupo from '../../../DTO/Utils/Notificaciones/DTONotificacionesContactoGrupo'
 import { number } from 'yup/lib/locale'
+import INotificacionesConceptos from '../../../Interfaces/Utils/INotificacionesConceptos'
 
 export interface INotificacionesProps {}
 
@@ -32,18 +35,30 @@ export function Notificaciones(props: INotificacionesProps) {
   const [selectedRows, setSelectedRows] = React.useState([])
   const [Grupos, setGrupos] = useState<INotificacionesGrupos[]>([])
   const [Contactos, setContactos] = useState<INotificacionesContactos[]>([])
-  const [ContactosdelGrupo, setContactosdelGrupo] = useState<INotificacionesContactos[]>([])
+  const [CatConceptos, setCatConceptos] = useState<INotificacionesConceptos[]>(
+    []
+  )
+  const [ContactosdelGrupo, setContactosdelGrupo] = useState<
+    INotificacionesContactos[]
+  >([])
+  const [Filtro, setFiltro] = useState('')
+  const [FiltroEnGrupo, setFiltroEnGrupo] = useState('')
   const [Mensaje, setMensaje] = useState('')
   const [Grupo, setGrupo] = useState('')
   const [IdGrupo, setIdGrupo] = useState(0)
+  const [Concepto, setConcepto] = useState('')
+  const [IdConcepto, setIdConcepto] = useState(0)
   const [IdContacto, setIdContacto] = useState(0)
   const [Nombre, setNombre] = useState('')
   const [Puesto, setPuesto] = useState('')
+  const [Pais, setPais] = useState('+52')
   const [Celular, setCelular] = useState('')
   const [Empresa, setEmpresa] = useState('')
   const [Activo, setActivo] = useState(1)
   const [ShowModal, setShowModal] = useState(false)
   const [ShowModalG, setShowModalG] = useState(false)
+  const [ShowModalC, setShowModalC] = useState(false)
+  const [SelectedConcepto, setSelectedConcepto] = useState(true)
   const [header, setHeader] = useState('')
   const [show, setShowMsg] = useState(false)
   const [msg, setMsg] = useState('')
@@ -62,17 +77,17 @@ export function Notificaciones(props: INotificacionesProps) {
     },
     {
       name: 'Celular',
-      width: '110px',
+      width: '130px',
       cell: (row: INotificacionesContactos) => (
         <div style={{ width: '100%' }} onClick={() => {}}>
-          {row.celular}
+          {(row.pais ? row.pais : '') + row.celular}
         </div>
       ),
       sortable: true
     },
     {
       name: 'Nombre',
-      width: '200px',
+      width: '150px',
       cell: (row: INotificacionesContactos) => (
         <div style={{ width: '100%' }} onClick={() => {}}>
           {row.nombre}
@@ -81,21 +96,21 @@ export function Notificaciones(props: INotificacionesProps) {
       sortable: true
     },
     {
-      name: 'Puesto',
+      name: 'Empresa',
-      width: '250px',
+      width: '200px',
       cell: (row: INotificacionesContactos) => (
         <div style={{ width: '100%' }} onClick={() => {}}>
-          {row.puesto}
+          {row.empresa}
         </div>
       ),
       sortable: true
     },
     {
-      name: 'Empresa',
+      name: 'Puesto',
-      width: '125px',
+      width: '200px',
       cell: (row: INotificacionesContactos) => (
         <div style={{ width: '100%' }} onClick={() => {}}>
-          {row.empresa}
+          {row.puesto}
         </div>
       ),
       sortable: true
@@ -123,6 +138,7 @@ export function Notificaciones(props: INotificacionesProps) {
       id: IdContacto,
       nombre: Nombre,
       puesto: Puesto,
+      pais: Pais,
       celular: Celular,
       empresa: Empresa,
       activo: Activo
@@ -168,6 +184,33 @@ export function Notificaciones(props: INotificacionesProps) {
       })
   }
 
+  const saveConcept = () => {
+    if (!Concepto) {
+      setHeader('Error')
+      setMsg('Favor de proporcionar el concepto')
+      setShowMsg(true)
+      return
+    }
+    const data: INotificacionesConceptos = {
+      id: IdConcepto,
+      concepto: Concepto,
+      activo: 1
+    }
+    NotificacionesDS.Conceptos$Append(data)
+      .then((response) => {
+        setHeader('Informativo')
+        setMsg('Se encontro la siguiente informacion...')
+        loadAllConcepts()
+        setShowMsg(true)
+      })
+      .catch((e: Error) => {
+        setHeader('Error')
+        setMsg('Ocurrio un error: ' + e)
+        setShowMsg(true)
+        return
+      })
+  }
+
   const loadAllContacts = () => {
     NotificacionesDS.ContactosGet()
       .then((response) => {
@@ -181,6 +224,19 @@ export function Notificaciones(props: INotificacionesProps) {
       })
   }
 
+  const loadAllConcepts = () => {
+    NotificacionesDS.Conceptos$Get()
+      .then((response) => {
+        setCatConceptos(response.data)
+      })
+      .catch((e: Error) => {
+        setHeader('Error')
+        setMsg('Ocurrio un error: ' + e)
+        setShowMsg(true)
+        return
+      })
+  }
+
   const loadGroupContacts = () => {
     NotificacionesDS.ContactosdelGrupoGet(IdGrupo)
       .then((response) => {
@@ -210,13 +266,33 @@ export function Notificaciones(props: INotificacionesProps) {
   useEffect(() => {
     loadAllContacts()
     loadGroups()
+    loadAllConcepts()
   }, [])
 
+  useEffect(() => {
+    if (ShowModal) {
+      if (selectedRows.length > 0) {
+        const listaContactos: INotificacionesContactos[] = selectedRows
+        setIdContacto(listaContactos[0].id)
+        setNombre(listaContactos[0].nombre)
+        setPuesto(listaContactos[0].puesto)
+        setEmpresa(listaContactos[0].empresa)
+        setCelular(listaContactos[0].celular)
+        setActivo(listaContactos[0].activo)
+      }
+    }
+  }, [ShowModal])
 
   useEffect(() => {
     loadGroupContacts()
   }, [IdGrupo])
 
+  useEffect(() => {
+    if (Concepto.length === 0) {
+      setIdConcepto(0)
+    }
+  }, [Concepto])
+
   const handleRowSelected = React.useCallback((state) => {
     setSelectedRows(state.selectedRows)
   }, [])
@@ -247,6 +323,7 @@ export function Notificaciones(props: INotificacionesProps) {
             : `Se eliminaron los contactos del grupo`
         )
         setShowMsg(true)
+        loadGroupContacts()
       })
       .catch((e: Error) => {
         setHeader('Error')
@@ -256,22 +333,109 @@ export function Notificaciones(props: INotificacionesProps) {
       })
   }
 
+  const sendWhattsapp = () => {
+    if (IdConcepto===0) {
+        setHeader('Error')
+        setMsg('Para enviar un concepto primero debe guardarlo en el catalogo')
+        setShowMsg(true)
+        return
+    }
+    if (IdGrupo===0) {
+      setHeader('Error')
+      setMsg('Para enviar un mensaje primero debe seleccionar el grupo')
+      setShowMsg(true)
+      return
+  }
+    NotificacionesDS.SendWhattsapp(IdConcepto, Mensaje, IdGrupo)
+      .then((response) => {
+        setHeader('Informativo')
+        setMsg(`El mensaje se ha enviado satisfactoriamente`)
+        setShowMsg(true)
+      })
+      .catch((e: Error) => {
+        setHeader('Error')
+        setMsg('Ocurrio un error: ' + e)
+        setShowMsg(true)
+        return
+      })
+  }
+
+  const handleKeyDown = (e: any) => {
+    if (e.keyCode === 40) {
+      console.log('arrow down')
+    }
+  }
+
   return (
     <div>
       <Card>
         <Card.Body>
           <Card.Title>Notificaciones</Card.Title>
           <Row>
-            <Col xs={1}>Mensaje</Col>
+            <Col xs={1}>
+              Mensaje
+              <span
+                style={{ paddingLeft: '5px', cursor: 'pointer' }}
+                onClick={() => {
+                  setShowModalC(!ShowModalC)
+                }}
+              >
+                <IconContext.Provider
+                  value={{ color: '#23A0F6', size: '25px' }}
+                >
+                  <AiOutlineProfile />
+                </IconContext.Provider>
+              </span>
+            </Col>
             <Col xs={5}>
-              <Form.Control
+              {/* <Form.Control
                 type="text"
                 placeholder="Teclee aqui el mensaje que desea enviar..."
                 size="sm"
+                value={Mensaje}
                 onChange={(e: any) => {
-                  setMensaje(e)
+                  setMensaje(e.target.value)
                 }}
-              />
+              /> */}
+              <Form.Group className="typeahead-form-group">
+                <Form.Control
+                  autoComplete="off"
+                  type="text"
+                  id="Cliente"
+                  value={Concepto}
+                  size="sm"
+                  className="pull-right"
+                  onChange={(e) => {
+                    setConcepto(e.target.value)
+                    setSelectedConcepto(false)
+                  }}
+                  onKeyDown={(e) => {
+                    handleKeyDown(e)
+                  }}
+                />
+                <Dropdown
+                  className="d-inline mx-6"
+                  show={!SelectedConcepto && Concepto.length > 1}
+                >
+                  <Dropdown.Menu>
+                    {CatConceptos.filter((result) =>
+                      result.concepto
+                        .toLocaleLowerCase()
+                        .includes(Concepto.toLocaleLowerCase())
+                    ).map((result) => (
+                      <Dropdown.Item
+                        onClick={() => {
+                          setIdConcepto(result.id)
+                          setConcepto(result.concepto)
+                          setSelectedConcepto(true)
+                        }}
+                      >
+                        {result.concepto}
+                      </Dropdown.Item>
+                    ))}
+                  </Dropdown.Menu>
+                </Dropdown>
+              </Form.Group>
             </Col>
             <Col xs={1} style={{ textAlign: 'right' }}>
               Grupo
@@ -309,7 +473,13 @@ export function Notificaciones(props: INotificacionesProps) {
               </Form.Control>
             </Col>
             <Col>
-              <Button>Enviar</Button>
+              <Button
+                onClick={() => {
+                  sendWhattsapp()
+                }}
+              >
+                Enviar
+              </Button>
             </Col>
           </Row>
           <Row>
@@ -320,19 +490,34 @@ export function Notificaciones(props: INotificacionesProps) {
               <Card>
                 <Card.Body>
                   <Card.Title>
-                    Contactos
+                    <Row>
-                    <span
+                      <Col xs={3}>
-                      style={{ paddingLeft: '10px', cursor: 'pointer' }}
+                        Contactos
-                      onClick={() => {
+                        <span
-                        setShowModal(!ShowModal)
+                          style={{ paddingLeft: '10px', cursor: 'pointer' }}
-                      }}
+                          onClick={() => {
-                    >
+                            setShowModal(!ShowModal)
-                      <IconContext.Provider
+                          }}
-                        value={{ color: '#F6A323', size: '25px' }}
+                        >
-                      >
+                          <IconContext.Provider
-                        <AiOutlineUsergroupAdd />
+                            value={{ color: '#F6A323', size: '25px' }}
-                      </IconContext.Provider>
+                          >
-                    </span>
+                            <AiOutlineUsergroupAdd />
+                          </IconContext.Provider>
+                        </span>
+                      </Col>
+                      <Col>
+                        <Form.Control
+                          type="text"
+                          placeholder="Search..."
+                          size="sm"
+                          onChange={(e) => {
+                            setFiltro(e.target.value)
+                            console.log(Filtro)
+                          }}
+                        />
+                      </Col>
+                    </Row>
                   </Card.Title>
                   <Row>
                     <Col xs={12}>
@@ -347,7 +532,19 @@ export function Notificaciones(props: INotificacionesProps) {
                         highlightOnHover
                         selectableRows
                         columns={colContactos}
-                        data={Contactos.filter(obj1 => !ContactosdelGrupo.some(obj2 => obj1.id === obj2.id))}
+                        data={Contactos.filter(
+                          (obj1) =>
+                            !ContactosdelGrupo.some(
+                              (obj2) => obj1.id === obj2.id
+                            )
+                        ).filter(function (row) {
+                          return (
+                            row.celular.includes(Filtro) ||
+                            row.nombre.includes(Filtro) ||
+                            row.puesto.includes(Filtro) ||
+                            row.empresa.includes(Filtro)
+                          )
+                        })}
                         pointerOnHover
                         onSelectedRowsChange={handleRowSelected}
                       />
@@ -400,7 +597,21 @@ export function Notificaciones(props: INotificacionesProps) {
             <Col xs={5}>
               <Card>
                 <Card.Body>
-                  <Card.Title>Contactos en el grupo</Card.Title>
+                  <Card.Title>
+                    <Row>
+                      <Col xs={5}>Contactos en el grupo</Col>
+                      <Col>
+                        <Form.Control
+                          type="text"
+                          placeholder="Search..."
+                          size="sm"
+                          onChange={(e) => {
+                            setFiltroEnGrupo(e.target.value)
+                          }}
+                        />
+                      </Col>
+                    </Row>
+                  </Card.Title>
                   <Row>
                     <Col xs={12}>
                       <DataTable
@@ -414,7 +625,14 @@ export function Notificaciones(props: INotificacionesProps) {
                         highlightOnHover
                         selectableRows
                         columns={colContactos}
-                        data={ContactosdelGrupo}
+                        data={ContactosdelGrupo.filter(function (row) {
+                          return (
+                            row.celular.includes(FiltroEnGrupo) ||
+                            row.nombre.includes(FiltroEnGrupo) ||
+                            row.puesto.includes(FiltroEnGrupo) ||
+                            row.empresa.includes(FiltroEnGrupo)
+                          )
+                        })}
                         pointerOnHover
                         onSelectedRowsChange={handleRowSelected}
                       />
@@ -472,7 +690,7 @@ export function Notificaciones(props: INotificacionesProps) {
                 </Col>
               </Row>
               <Row>
-                <Col xs={8}>
+                <Col xs={7}>
                   <FloatingLabel
                     controlId="floatingInput"
                     label="Puesto"
@@ -489,16 +707,32 @@ export function Notificaciones(props: INotificacionesProps) {
                     />
                   </FloatingLabel>
                 </Col>
-                <Col xs={4}>
+                <Col xs={2}>
+                  <FloatingLabel controlId="floatingSelect" label="LADA">
+                    <Form.Select
+                      aria-label="Floating label select example"
+                      style={{ height: '55px' }}
+                      value={Pais}
+                      onChange={(e: any) => {
+                        setPais(e.target.value)
+                      }}
+                    >
+                      <option value="+52">MEX</option>
+                      <option value="+1">USA</option>
+                    </Form.Select>
+                  </FloatingLabel>
+                </Col>
+                <Col>
                   <FloatingLabel
                     controlId="floatingInput"
                     label="Celular"
-                    className="mb-3"
+                    className=""
                   >
                     <Form.Control
                       type="text"
                       placeholder="Celular"
                       value={Celular}
+                      maxLength={10}
                       style={{ height: '45px' }}
                       onChange={(e: any) => {
                         setCelular(e.target.value)
@@ -536,7 +770,7 @@ export function Notificaciones(props: INotificacionesProps) {
                     </Form.Select>
                   </FloatingLabel>
                 </Col>
-                <Col xs={2}>
+                <Col xs={2} style={{ paddingTop: `10px` }}>
                   <Button
                     onClick={() => {
                       saveContact()
@@ -594,6 +828,48 @@ export function Notificaciones(props: INotificacionesProps) {
         </Modal.Body>
       </Modal>
 
+      <Modal
+        show={ShowModalC}
+        onHide={() => {
+          setShowModalC(false)
+        }}
+        size={'sm'}
+        dialogClassName={'modal-50w'}
+        closeButton
+      >
+        <Modal.Body>
+          <div style={{ height: '70px', paddingTop: '10px' }}>
+            <Row>
+              <Col xs={10}>
+                <FloatingLabel
+                  controlId="floatingInput"
+                  label="Concepto"
+                  className="mb-3"
+                >
+                  <Form.Control
+                    type="text"
+                    placeholder="Concepto"
+                    value={Concepto}
+                    onChange={(e: any) => {
+                      setConcepto(e.target.value)
+                    }}
+                    style={{ height: '45px' }}
+                  />
+                </FloatingLabel>
+              </Col>
+              <Col xs={2}>
+                <Button
+                  onClick={() => {
+                    saveConcept()
+                  }}
+                >
+                  Guardar
+                </Button>
+              </Col>
+            </Row>
+          </div>
+        </Modal.Body>
+      </Modal>
       <MsgInformativo
         show={show}
         msg={msg}

src/Interfaces/Utils/INotificacionesConceptos.ts

@@ -0,0 +1,5 @@
+export default interface INotificacionesConceptos {
+    id: number,
+    concepto: string,
+    activo: number
+}

src/Interfaces/Utils/INotificacionesContactos.ts

@@ -2,6 +2,7 @@ export default interface INotificacionesContactos {
   id: number
   nombre: string
   puesto: string
+  pais: string
   celular: string
   empresa: string
   activo: number

src/Services/Utils/Notificaciones/Notificaciones.Services.ts

@@ -3,9 +3,13 @@ import INotificacionesContactos from "../../../Interfaces/Utils/INotificacionesC
 import INotificacionesGrupos from "../../../Interfaces/Utils/INotificacionesGrupos";
 import INotificacionesContactosGrupos from "../../../Interfaces/Utils/INotificacionesContactosGrupos";
 import DTONotificacionesContactoGrupo from "../../../DTO/Utils/Notificaciones/DTONotificacionesContactoGrupo";
+import INotificacionesConceptos from "../../../Interfaces/Utils/INotificacionesConceptos";
+import { consumers } from "stream";
 
 class CorresponsalesDataService {
-
+  SendWhattsapp(IdConcepto: number, Concepto: string, Grupo: number) {
+    return http.get<INotificacionesGrupos[]>(`/Notificaciones/SendWhattsapp?IdConcepto=${IdConcepto}&Concepto=${Concepto}&Grupo=${Grupo}`);
+  }
   ContactosAppend(data: INotificacionesContactos) {
     return http.post<INotificacionesContactos>(`/Notificaciones/Contacto/Append`, data);
   }
@@ -24,7 +28,12 @@ class CorresponsalesDataService {
   ContactosdelGrupoGet(IdGrupo: number) {
     return http.get<INotificacionesContactos[]>(`/Notificaciones/ContactosdelGrupo/Get?idGrupo=${IdGrupo}`);
   }
-
+  Conceptos$Get() {
+    return http.get<INotificacionesConceptos[]>(`/Notificaciones/Catalogo/Conceptos/Get`);
+  }
+  Conceptos$Append(data: INotificacionesConceptos) {
+    return http.post<INotificacionesConceptos>(`/Notificaciones/Catalogo/Conceptos/Append`, data);
+  }
 
 }
 export default new CorresponsalesDataService();

src/css/autoComplete.css

@@ -0,0 +1,54 @@
+.mainDiv {
+  /*    padding-top: 50px; */
+  font-family: sans-serif;
+  text-align: left;
+  /*width: 300px;*/
+  /*margin: 0 auto;*/
+}
+
+.typeahead-form-group {
+  position: relative;
+  z-index: 1000;
+}
+
+.typeahead-form-group1 {
+  position: relative;
+  z-index: 999;
+}
+
+.typeahead-form-group2 {
+  position: relative;
+  z-index: 998;
+}
+
+.typeahead-form-group3 {
+  position: relative;
+  z-index: 998;
+}
+
+.typeahead-list-group4 {
+  position: absolute;
+  width: 100%;
+  top: 38px;
+  left: 0;
+}
+
+.typeahead-list-group-item {
+  /*  padding: 0.3rem 1.3rem; */
+  background-color: rgb(228, 243, 240);
+}
+
+.typeahead-list-group-item:hover {
+  cursor: pointer;
+  background: #2d4ddc;
+  color: #fff;
+}
+
+.textBoxViaje {
+  z-index: 100;
+}
+
+.textField {
+  margin-right: 0px !important;
+  padding-right: 0px;
+}