segunda ronda de cambios como primer demo

src/Components/Operaciones/OpMonitor.tsx

@@ -1,12 +1,12 @@
 import React, { FC, useEffect, useState } from 'react'
 import { Alert, Button, Card, Col, Form, Modal, Row, Table } from 'react-bootstrap'
 import { IconContext } from 'react-icons'
-import { BsChevronDown, BsChevronUp, BsFillPencilFill, BsPlusSquareFill } from 'react-icons/bs'
+import { BsChevronDown, BsChevronRight, BsChevronUp, BsFillPencilFill, BsPlusSquareFill } from 'react-icons/bs'
 import { useDispatch, useSelector } from 'react-redux'
 import { RootState } from '../../store/store'
 import DTOOpViajes from '../../DTOs/Operaciones/DTOViajes'
 import DSOpViajes from '../../Services/Operaciones/OpViajes.Services'
-import { ViajesServicios } from './ViajesServicios/ViajesServicios'
+import { Servicios } from './Viaje/Servicios/Servicios'
 import { populateOpViajes, updateOpViajes } from '../../store/features/Operaciones/OpViajesSlice'
 import { Viaje } from './Viaje/Viaje'
 import '../../css/masterDetail.css'
@@ -49,8 +49,6 @@ export const OpMonitor: FC<IProps> = (props) => {
     setIDViaje(row.id)
     setRefAA(row.refAgenciaAduanal)
     setIDCliente(row.cliente)
-    setIDServicio(row.servicio)
-    setIDProveedor(row.proveedor)
     setIDTipoUnidad(row.tipoUnidad)
     setNoCaja(row.noCaja)
     setIDOrigen(row.origen)
@@ -80,37 +78,6 @@ export const OpMonitor: FC<IProps> = (props) => {
     setShowTripDialog(true)
   }
 
-  const saveInfo = () => {
-    const data: DTOOpViajes = {
-      id: IDViaje,
-      fAlta: '',
-      usuario: UserID,
-      fCruce: '',
-      refAgenciaAduanal: RefAA,
-      cliente: IDCliente,
-      sCliente: '',
-      proveedor: IDProveedor,
-      sProveedor: '',
-      tipoUnidad: IDTipoUnidad,
-      sTipoUnidad: '',
-      servicio: IDServicio,
-      sServicio: '',
-      origen: IDOrigen,
-      sOrigen: '',
-      destino: IDDestino,
-      sDestino: '',
-      hazmat: Hazmat,
-      noCaja: NoCaja,
-      pickUpNumber: PickUpNumber,
-      max: true,
-    }
-    DSOpViajes.Append(data)
-      .then((response) => {
-        loadTrips()
-      })
-      .catch((e: Error) => {})
-  }
-
   useEffect(() => {
     loadTrips()
   }, [])
@@ -152,9 +119,11 @@ export const OpMonitor: FC<IProps> = (props) => {
         <Alert variant='primary'>
           <Row>
             <Col xs={3} style={{ textAlign: 'right', fontSize: '25px' }}>
-              AOL : Monitor de viajes
+              Monitor de Viajes
             </Col>
-            <Col xs={1} style={{ textAlign: 'left', cursor: 'pointer' }}>
+            <Col xs={1} style={{ textAlign: 'left', cursor: 'pointer' }}></Col>
+            <Col xs={7}></Col>
+            <Col xs={1}>
               <div
                 onClick={() => {
                   newTrip()
@@ -166,7 +135,6 @@ export const OpMonitor: FC<IProps> = (props) => {
                 </IconContext.Provider>
               </div>
             </Col>
-            <Col xs={8}></Col>
           </Row>
         </Alert>
       </Card>
@@ -191,11 +159,9 @@ export const OpMonitor: FC<IProps> = (props) => {
             <Table className='MDTable' hover>
               <thead style={{ position: 'sticky', top: '0' }}>
                 <tr>
-                  <th>id</th>
+                  <th>AOL</th>
                   <th>&nbsp;</th>
                   <th>Cliente</th>
-                  <th>Servicio</th>
-                  <th>Proveedor</th>
                   <th>Origen</th>
                   <th>Destino</th>
                   <th>Tipo Unidad</th>
@@ -235,7 +201,7 @@ export const OpMonitor: FC<IProps> = (props) => {
                                 </IconContext.Provider>
                               ) : (
                                 <IconContext.Provider value={{ color: 'blue', size: '15px' }}>
-                                  <BsChevronUp />
+                                  <BsChevronRight />
                                 </IconContext.Provider>
                               )}
                             </td>
@@ -245,18 +211,6 @@ export const OpMonitor: FC<IProps> = (props) => {
                             >
                               {MasterData.sCliente}
                             </td>
-                            <td
-                              style={{ textAlign: 'left' }}
-                              className={MasterData.max === true ? 'masterSelected' : 'normalSelected'}
-                            >
-                              {MasterData.sServicio}
-                            </td>
-                            <td
-                              style={{ textAlign: 'left' }}
-                              className={MasterData.max === true ? 'masterSelected' : 'normalSelected'}
-                            >
-                              {MasterData.sProveedor}
-                            </td>
                             <td
                               style={{ textAlign: 'left' }}
                               className={MasterData.max === true ? 'masterSelected' : 'normalSelected'}
@@ -315,10 +269,17 @@ export const OpMonitor: FC<IProps> = (props) => {
                             </td>
                           </tr>
                           {MasterData.max === true ? (
-                            <tr>
+                            <tr className={MasterData.max === true ? 'masterSelected2' : 'normalSelected2'}>
                               <th colSpan={2} style={{ backgroundColor: '#F8F9FE' }}></th>
                               <th colSpan={14} style={{ backgroundColor: '#F8F9FE' }}>
-                                <ViajesServicios IDMaster={MasterData.id} key={MasterData.id} />
+                                <Servicios
+                                  IDMaster={MasterData.id}
+                                  key={MasterData.id}
+                                  actionButtons={false}
+                                  onLoadDetail={function (id: number): void {
+                                    /* alert('loaf info from selected service ' + id) */
+                                  }}
+                                />
                               </th>
                             </tr>
                           ) : (

src/Components/Operaciones/Viaje/Servicios/Servicios.tsx

@@ -0,0 +1,140 @@
+import React, { FC, useState } from 'react'
+import { Button } from 'react-bootstrap'
+import { IconContext } from 'react-icons'
+import { BsFillPencilFill, BsXSquareFill } from 'react-icons/bs'
+import { useDispatch, useSelector } from 'react-redux'
+/* import DTOOpViajes from '../../../DTOs/Operaciones/DTOViajes'
+import DTOViajesServicios from '../../../DTOs/Operaciones/DTOViajesServicios' */
+import { RootState } from '../../../../store/store'
+import DSOpViajes from '../../../../Services/Operaciones/OpViajes.Services'
+import { deleteOpViajesServicios } from '../../../../store/features/Operaciones/OpViajesServiciosSlice'
+import DTOViajesServicios from '../../../../DTOs/Operaciones/DTOViajesServicios'
+
+interface IProps {
+  IDMaster: number
+  actionButtons: boolean
+  onLoadDetail: (id: number) => void
+}
+
+export const Servicios: FC<IProps> = (props) => {
+  const dispatch = useDispatch()
+  const mAllTripServices = useSelector((state: RootState) => state.OpViajesServicios.OpViajesServicios)
+  const mAduanas = useSelector((state: RootState) => state.CatAduanas.CatAduanas)
+  const [DisplayTable, setDisplayTable] = useState(true)
+
+  const deleteService = (id: number) => {
+    DSOpViajes.DeleteService(id)
+      .then((responsed) => {
+        dispatch(deleteOpViajesServicios(id))
+      })
+      .catch((e: Error) => {})
+  }
+
+  const getAduana = (id: number) => {
+    let found = mAduanas.filter((a) => {
+      if (a.id === id) {
+        return a
+      }
+    })
+    //  console.log(found)
+    if (found.length) {
+      if (found[0].Aduana === 'Aduana') return ''
+      else return found[0].Aduana
+    }
+    return ''
+  }
+
+  const editService = (service: DTOViajesServicios) => {}
+
+  return (
+    <div>
+      <table className='zui-table zui-table-rounded'>
+        <thead>
+          <tr>
+            {/* <th style={{ width: '50px', textAlign: 'center' }}>id</th> */}
+            {props.actionButtons ? (
+              <>
+                <th style={{ width: '30px', textAlign: 'center' }}></th>
+              </>
+            ) : (
+              ''
+            )}
+            <th style={{ width: '25%', textAlign: 'left' }}>Servicio</th>
+            <th style={{ width: '10%', textAlign: 'left' }}>Caja</th>
+            <th style={{ width: '10%', textAlign: 'left' }}>Aduana</th>
+            <th style={{ width: '25%', textAlign: 'left' }}>Proveedor</th>
+            <th style={{ width: '25%', textAlign: 'left' }}>Comentarios</th>
+            {props.actionButtons ? (
+              <>
+                <th style={{ width: '30px', textAlign: 'center' }}></th>
+              </>
+            ) : (
+              ''
+            )}
+          </tr>
+        </thead>
+        <tbody>
+          {mAllTripServices
+            ? mAllTripServices
+                .filter(function (service) {
+                  return service.idViaje === props.IDMaster
+                })
+                .map(function (service) {
+                  return (
+                    <tr key={service.id} style={{ height: '30px' }}>
+                      {/* <td style={{ textAlign: 'left', paddingLeft: '5px' }}>{service.id}</td> */}
+                      {props.actionButtons ? (
+                        <>
+                          <td>
+                            <Button
+                              size='sm'
+                              variant='white'
+                              style={{ textAlign: 'right' }}
+                              title='De un click aqui para eliminar el servicio'
+                              onClick={() => {
+                                deleteService(service.id)
+                              }}
+                            >
+                              <IconContext.Provider value={{ color: 'red', size: '20px' }}>
+                                <BsXSquareFill />
+                              </IconContext.Provider>
+                            </Button>
+                          </td>
+                        </>
+                      ) : (
+                        ''
+                      )}
+                      <td style={{ textAlign: 'left' }}>{service.sServicio}</td>
+                      <td style={{ textAlign: 'left' }}>{service.noCaja}</td>
+                      <td style={{ textAlign: 'left' }}>{getAduana(service.aduana)}</td>
+                      <td style={{ textAlign: 'left' }}>{service.sProveedor}</td>
+                      <td style={{ textAlign: 'left' }}>{service.comentarios}</td>
+                      {props.actionButtons ? (
+                        <>
+                          <td style={{ textAlign: 'right', paddingRight: '20px' }}>
+                            <Button
+                              size='sm'
+                              variant='white'
+                              style={{ textAlign: 'right' }}
+                              onClick={() => {
+                                props.onLoadDetail(service.id)
+                              }}
+                            >
+                              <IconContext.Provider value={{ color: 'blue', size: '15px' }}>
+                                <BsFillPencilFill />
+                              </IconContext.Provider>
+                            </Button>
+                          </td>
+                        </>
+                      ) : (
+                        ''
+                      )}
+                    </tr>
+                  )
+                })
+            : ''}
+        </tbody>
+      </table>
+    </div>
+  )
+}

src/Components/Operaciones/Viaje/Viaje.tsx

@@ -5,9 +5,12 @@ import DTOOpViajes from '../../../DTOs/Operaciones/DTOViajes'
 import DSOpViajes from '../../../Services/Operaciones/OpViajes.Services'
 import { updateOpViajes } from '../../../store/features/Operaciones/OpViajesSlice'
 import { RootState } from '../../../store/store'
-import { populateOpViajesServicios } from '../../../store/features/Operaciones/OpViajesServiciosSlice'
+import {
+  populateOpViajesServicios,
+  updateOpViajesServicios,
+} from '../../../store/features/Operaciones/OpViajesServiciosSlice'
 import DTOViajesServicios from '../../../DTOs/Operaciones/DTOViajesServicios'
-import { ViajesServicios } from '../ViajesServicios/ViajesServicios'
+import { Servicios } from '../Viaje/Servicios/Servicios'
 
 interface IProps {
   IDViaje: number
@@ -16,6 +19,7 @@ interface IProps {
 export const Viaje: FC<IProps> = (props) => {
   const dispatch = useDispatch()
   const mAllTrips = useSelector((state: RootState) => state.OpViajes.OpViajes)
+  const mAllTripServices = useSelector((state: RootState) => state.OpViajesServicios.OpViajesServicios)
   const Info = JSON.parse(localStorage.getItem('tokenInfo') || '[]')
   const UserID = Info.UserId
   const CatClientes = useSelector((state: RootState) => state.CatClientes.CatClientes)
@@ -23,11 +27,14 @@ export const Viaje: FC<IProps> = (props) => {
   const CatTipoUnidades = useSelector((state: RootState) => state.CatTipoUnidades.CatTipoUnidades)
   const CatUbicaciones = useSelector((state: RootState) => state.CatUbicaciones.CatUbicaciones)
   const CatServicios = useSelector((state: RootState) => state.CatServicios.CatServicios)
+  const CatAduanas = useSelector((state: RootState) => state.CatAduanas.CatAduanas)
   const [OpViajes, setOpViajes] = useState<DTOOpViajes[]>([])
   const [showTripDialog, setShowTripDialog] = useState(false)
   const [Switch, setSwitch] = useState(false)
   const [NoCaja, setNoCaja] = useState('')
+  const [UltimaCaja, setUltimaCaja] = useState('')
   const [IDViaje, setIDViaje] = useState(0)
+  const [IDDetail, setIDDetail] = useState(0)
   const [IDCliente, setIDCliente] = useState(0)
   const [IDProveedor, setIDProveedor] = useState(0)
   const [IDServicio, setIDServicio] = useState(0)
@@ -50,14 +57,14 @@ export const Viaje: FC<IProps> = (props) => {
         setIDViaje(row.id)
         setRefAA(row.refAgenciaAduanal)
         setIDCliente(row.cliente)
-        setIDServicio(row.servicio)
-        setIDProveedor(row.proveedor)
         setIDTipoUnidad(row.tipoUnidad)
         setNoCaja(row.noCaja)
         setIDOrigen(row.origen)
         setIDDestino(row.destino)
         setHazmat(row.hazmat)
         setPickUpNumber(row.pickUpNumber)
+        setTipoOperacion(row.tipoOperacion)
+        setPedimento(row.pedimento)
         return row
       }
     })
@@ -66,44 +73,104 @@ export const Viaje: FC<IProps> = (props) => {
   }, [props.IDViaje])
 
   useEffect(() => {
-    if (IDNuevoServicio === 1 || IDNuevoServicio === 2 || IDNuevoServicio === 22) setDisableAduana(false)
+    if (IDServicio === 1 || IDServicio === 2 || IDServicio === 22) setDisableAduana(false)
     else setDisableAduana(true)
-  }, [IDNuevoServicio])
+  }, [IDServicio])
 
-  const addService = () => {
+  useEffect(() => {
+    DSOpViajes.GetLastTrailerBox(IDViaje)
+      .then((response) => {
+        const LastTrailerBox = response.data.ultimaCaja
+        //  console.log('lasttrailerbox=' + LastTrailerBox)
+        if (LastTrailerBox.length === 0) setUltimaCaja(NoCaja)
+        else setUltimaCaja(LastTrailerBox)
+      })
+      .catch((e: Error) => {
+        //  console.log('currio un error')
+      })
+    //console.log('nocaja=' + NoCaja)
+  }, [NoCaja])
+
+  useEffect(() => {
+    if (Hazmat === 1) setAduana(180)
+    else setAduana(0)
+  }, [Hazmat])
+
+  const saveDetail = () => {
+    if (IDServicio === 0) {
+      alert('Para continuar, primero seleccione un servicio')
+      return false
+    }
+    if (IDProveedor === 0) {
+      alert('Para continuar, primero seleccione un proveedor')
+      return false
+    }
     const data: DTOViajesServicios = {
-      id: 0,
+      id: IDDetail,
-      idViaje: props.IDViaje,
+      idViaje: IDViaje,
-      idServicio: IDNuevoServicio,
+      idServicio: IDServicio,
       sServicio: '',
       aduana: Aduana,
       comentarios: Comentarios,
       idProveedor: IDProveedor,
       sProveedor: '',
+      noCaja: UltimaCaja,
     }
     DSOpViajes.AppendServices(data)
       .then((responsed) => {
-        console.log('Item regresado del post=' + JSON.stringify(responsed.data))
+        //  console.log('Item regresado del post=' + JSON.stringify(responsed.data))
-        dispatch(populateOpViajesServicios(responsed.data))
+        if (IDDetail === 0) {
+          dispatch(populateOpViajesServicios(responsed.data))
+          setIDDetail(responsed.data[0].id)
+        } else {
+          dispatch(updateOpViajesServicios(responsed.data))
+        }
+        clearDetailForm()
       })
       .catch((e: Error) => {})
   }
 
-  const saveInfo = () => {
+  const loadService = (id: number) => {
+    let found = mAllTripServices.filter((a) => {
+      if (a.id === id) {
+        return a
+      }
+    })
+    if (found) {
+      setIDDetail(id)
+      setAduana(found[0].aduana)
+      setIDServicio(found[0].idServicio)
+      setComentarios(found[0].comentarios)
+      setIDProveedor(found[0].idProveedor)
+    }
+  }
+
+  const saveMaster = () => {
+    let totalServicios = mAllTripServices.filter((a) => {
+      if (a.idViaje === IDViaje) {
+        return a
+      }
+    })
+    if (totalServicios.length === 0) {
+      if (IDServicio === 0) {
+        alert('Para continuar, primero seleccione un servicio')
+        return false
+      }
+      if (IDProveedor === 0) {
+        alert('Para continuar, primero seleccione un proveedor')
+        return false
+      }
+    }
+    /*      */
     const data: DTOOpViajes = {
       id: IDViaje,
       fAlta: '',
       usuario: UserID,
-      fCruce: '',
       refAgenciaAduanal: RefAA,
       cliente: IDCliente,
       sCliente: '',
-      proveedor: IDProveedor,
-      sProveedor: '',
       tipoUnidad: IDTipoUnidad,
       sTipoUnidad: '',
-      servicio: IDServicio,
-      sServicio: '',
       origen: IDOrigen,
       sOrigen: '',
       destino: IDDestino,
@@ -111,6 +178,8 @@ export const Viaje: FC<IProps> = (props) => {
       hazmat: Hazmat,
       noCaja: NoCaja,
       pickUpNumber: PickUpNumber,
+      tipoOperacion: TipoOperacion,
+      pedimento: Pedimento,
       max: true,
     }
     DSOpViajes.Append(data)
@@ -118,10 +187,21 @@ export const Viaje: FC<IProps> = (props) => {
         const data = response.data
         data['max'] = false
         dispatch(updateOpViajes(data))
+        setIDViaje(data.id)
+        saveDetail()
       })
       .catch((e: Error) => {})
   }
 
+  const clearDetailForm = () => {
+    setIDDetail(0)
+    setAduana(0)
+    setIDServicio(0)
+    setComentarios('')
+    setIDProveedor(0)
+    setDisableAduana(true)
+  }
+
   return (
     <div className='tripField'>
       <Card style={{ backgroundColor: '#F0F7FC' }}>
@@ -131,7 +211,9 @@ export const Viaje: FC<IProps> = (props) => {
             <Col xs={2}>
               <Form.Control type='text' id='IDViaje' value={IDViaje} disabled size='sm' className='dialogLabel' />
             </Col>
-            <Col xs={2}>Ref AA</Col>
+            <Col xs={2} style={{ textAlign: 'right' }}>
+              Ref AA
+            </Col>
             <Col xs={3}>
               <Form.Control
                 type='text'
@@ -144,16 +226,7 @@ export const Viaje: FC<IProps> = (props) => {
                 }}
               />
             </Col>
-            <Col xs={3} style={{ textAlign: 'right' }}>
+            <Col xs={3} style={{ textAlign: 'right' }}></Col>
-              <Button
-                variant='primary'
-                onClick={() => {
-                  saveInfo()
-                }}
-              >
-                Guarda viaje
-              </Button>
-            </Col>
           </Row>
           <Row style={{ paddingTop: '5px' }}>
             <Col xs={2}>Cliente</Col>
@@ -202,7 +275,9 @@ export const Viaje: FC<IProps> = (props) => {
                   : null}
               </Form.Control>
             </Col>
-            <Col xs={1}>Caja</Col>
+            <Col xs={1} style={{ textAlign: 'right' }}>
+              Caja
+            </Col>
             <Col xs={3}>
               <Form.Control
                 type='text'
@@ -241,7 +316,9 @@ export const Viaje: FC<IProps> = (props) => {
                   : null}
               </Form.Control>
             </Col>
-            <Col xs={2}>Destino</Col>
+            <Col xs={2} style={{ textAlign: 'right' }}>
+              Destino
+            </Col>
             <Col xs={4}>
               <Form.Control
                 as='select'
@@ -267,7 +344,7 @@ export const Viaje: FC<IProps> = (props) => {
             </Col>
           </Row>
           <Row style={{ paddingTop: '5px' }}>
-            <Col xs={2}>HAZMAT</Col>
+            <Col xs={2}>HazMat</Col>
             <Col sx={1}>
               <Form.Control
                 as='select'
@@ -281,7 +358,9 @@ export const Viaje: FC<IProps> = (props) => {
                 <option value='1'>Si</option>
               </Form.Control>
             </Col>
-            <Col xs={2}>T. operacion</Col>
+            <Col xs={2} style={{ textAlign: 'right' }}>
+              Tipo operacion
+            </Col>
             <Col xs={3}>
               <Form.Control
                 as='select'
@@ -326,7 +405,29 @@ export const Viaje: FC<IProps> = (props) => {
                 }}
               />
             </Col>
-            <Col style={{ textAlign: 'right' }}></Col>
+            <Col xs={2}>PickUp No</Col>
+            <Col xs={3}>
+              <Form.Control
+                type='text'
+                id='PickUpNumber'
+                value={PickUpNumber}
+                size='sm'
+                className='dialogLabel'
+                onChange={(e) => {
+                  setPickUpNumber(e.target.value)
+                }}
+              />
+            </Col>
+            <Col style={{ textAlign: 'right' }}>
+              <Button
+                variant='primary'
+                onClick={() => {
+                  saveMaster()
+                }}
+              >
+                Guardar
+              </Button>
+            </Col>
           </Row>
         </Card.Body>
       </Card>
@@ -336,14 +437,14 @@ export const Viaje: FC<IProps> = (props) => {
       <Card style={{ backgroundColor: '#DDEFEF' }}>
         <Card.Body>
           <Row style={{ paddingTop: '5px' }}>
-            <Col xs={3}>Servicio</Col>
+            <Col xs={2}>Servicio</Col>
             <Col xs={5}>
               <Form.Control
                 as='select'
                 onChange={(e) => {
-                  setIDNuevoServicio(parseInt(e.target.value))
+                  setIDServicio(parseInt(e.target.value))
                 }}
-                value={IDNuevoServicio}
+                value={IDServicio}
                 className='form-select form-select-sm dialogLabel'
               >
                 <option value='0'>Seleccione el servicio...</option>
@@ -358,7 +459,10 @@ export const Viaje: FC<IProps> = (props) => {
                   : null}
               </Form.Control>
             </Col>
-            <Col xs={4}>
+            <Col xs={2} style={{ textAlign: 'right' }}>
+              Aduana
+            </Col>
+            <Col xs={3}>
               <Form.Control
                 as='select'
                 onChange={(e) => {
@@ -368,15 +472,21 @@ export const Viaje: FC<IProps> = (props) => {
                 disabled={DisableAduana}
                 className='form-select form-select-sm dialogLabel'
               >
-                <option value='0'>-Aduana-</option>
+                {CatAduanas
-                <option value='240'>Nuevo Laredo, Tamps</option>
+                  ? CatAduanas.map((c) => {
-                <option value='180'>Colombia</option>
+                      return (
+                        <option key={c.id} value={c.id}>
+                          {c.Aduana}
+                        </option>
+                      )
+                    })
+                  : null}
               </Form.Control>
             </Col>
           </Row>
           <Row style={{ paddingTop: '5px' }}>
-            <Col xs={3}>Comentarios</Col>
+            <Col xs={2}>Comentarios</Col>
-            <Col xs={9}>
+            <Col xs={10}>
               <Form.Control
                 as='textarea'
                 rows={2}
@@ -388,8 +498,8 @@ export const Viaje: FC<IProps> = (props) => {
             </Col>
           </Row>
           <Row style={{ paddingTop: '5px' }}>
-            <Col xs={3}>Proveedor</Col>
+            <Col xs={2}>Proveedor</Col>
-            <Col xs={9}>
+            <Col xs={10}>
               <Form.Control
                 as='select'
                 onChange={(e) => {
@@ -412,12 +522,25 @@ export const Viaje: FC<IProps> = (props) => {
             </Col>
           </Row>
           <Row style={{ paddingTop: '5px' }}>
-            <Col xs={7}></Col>
+            <Col xs={2}>Caja</Col>
-            <Col xs={5} style={{ textAlign: 'right' }}>
+            <Col xs={3}>
+              <Form.Control
+                type='text'
+                id='UltimeCaja'
+                value={UltimaCaja}
+                size='sm'
+                className='dialogLabel'
+                onChange={(e) => {
+                  setUltimaCaja(e.target.value)
+                }}
+              />
+            </Col>
+            <Col xs={4}></Col>
+            <Col xs={3} style={{ textAlign: 'right' }}>
               <Button
                 variant='success'
                 onClick={() => {
-                  addService()
+                  saveDetail()
                 }}
               >
                 Guardar servicio
@@ -428,13 +551,18 @@ export const Viaje: FC<IProps> = (props) => {
         <Card>
           <Card.Body>
             <div className='MDContainer'>
-              <ViajesServicios IDMaster={IDViaje} key={IDViaje} />
+              <Servicios
+                IDMaster={IDViaje}
+                key={IDViaje}
+                onLoadDetail={function (id: number): void {
+                  loadService(id)
+                }}
+                actionButtons={true}
+              />
             </div>
           </Card.Body>
         </Card>
       </Card>
-      {/* <Modal.Footer>
-      </Modal.Footer> */}
     </div>
   )
 }

src/Components/Operaciones/ViajesServicios/ViajesServicios.tsx

@@ -1,83 +0,0 @@
-import React, { FC, useState } from 'react'
-import { Button } from 'react-bootstrap'
-import { IconContext } from 'react-icons'
-import { BsFillPencilFill, BsXSquareFill } from 'react-icons/bs'
-import { useDispatch, useSelector } from 'react-redux'
-import DTOOpViajes from '../../../DTOs/Operaciones/DTOViajes'
-import DTOViajesServicios from '../../../DTOs/Operaciones/DTOViajesServicios'
-import { RootState } from '../../../store/store'
-import DSOpViajes from '../../../Services/Operaciones/OpViajes.Services'
-import { deleteOpViajesServicios } from '../../../store/features/Operaciones/OpViajesServiciosSlice'
-
-interface IProps {
-  IDMaster: number
-}
-
-export const ViajesServicios: FC<IProps> = (props) => {
-  const dispatch = useDispatch()
-  const AllTripsServices = useSelector((state: RootState) => state.OpViajesServicios.OpViajesServicios)
-  const [DisplayTable, setDisplayTable] = useState(true)
-
-  const deleteService = (id: number) => {
-    DSOpViajes.DeleteService(id)
-      .then((responsed) => {
-        dispatch(deleteOpViajesServicios(id))
-      })
-      .catch((e: Error) => {})
-  }
-
-  return (
-    <div>
-      <table className='zui-table zui-table-rounded'>
-        <thead>
-          <tr>
-            <th style={{ width: '50px', textAlign: 'center' }}>id</th>
-            <th style={{ textAlign: 'left' }}>Servicio</th>
-            <th style={{ textAlign: 'left' }}>Aduana</th>
-            <th style={{ textAlign: 'left' }}>Proveedor</th>
-            <th style={{ textAlign: 'left' }}>Comentarios</th>
-            <th style={{ width: '50px', textAlign: 'center' }}></th>
-          </tr>
-        </thead>
-        <tbody>
-          {AllTripsServices
-            ? AllTripsServices.filter(function (service) {
-                return service.idViaje === props.IDMaster
-              }).map(function (service) {
-                return (
-                  <tr
-                    key={service.id}
-                    onClick={() => {
-                      // changeToggle(MasterData)
-                    }}
-                    style={{ cursor: 'pointer' }}
-                  >
-                    <td style={{ textAlign: 'left', paddingLeft: '5px' }}>{service.id}</td>
-                    <td style={{ textAlign: 'left' }}>{service.sServicio}</td>
-                    <td style={{ textAlign: 'left' }}>{service.aduana}</td>
-                    <td style={{ textAlign: 'left' }}>{service.sProveedor}</td>
-                    <td style={{ textAlign: 'left' }}>{service.comentarios}</td>
-                    <td>
-                      <Button
-                        size='sm'
-                        variant='white'
-                        style={{ textAlign: 'right' }}
-                        title='De un click aqui para eliminar el servicio'
-                        onClick={() => {
-                          deleteService(service.id)
-                        }}
-                      >
-                        <IconContext.Provider value={{ color: 'red', size: '20px' }}>
-                          <BsXSquareFill />
-                        </IconContext.Provider>
-                      </Button>
-                    </td>
-                  </tr>
-                )
-              })
-            : ''}
-        </tbody>
-      </table>
-    </div>
-  )
-}

src/DTOs/Operaciones/DTOUltimaCaja.ts

@@ -0,0 +1,3 @@
+export default interface UltimaCaja {
+    ultimaCaja: string
+}

src/DTOs/Operaciones/DTOViajes.ts

@@ -2,12 +2,9 @@ export default interface DTOOpViajes {
     id: number, 
     fAlta: string,
     usuario: number, 
-    fCruce: string,
     refAgenciaAduanal: string,
     cliente: number, 
     sCliente: string,
-    proveedor: number,
-    sProveedor: string, 
     hazmat: number, 
     tipoUnidad: number,
     sTipoUnidad: string, 
@@ -17,7 +14,7 @@ export default interface DTOOpViajes {
     sOrigen: string,
     destino: number 
     sDestino: string,
-    servicio: number,
+    tipoOperacion: number,
-    sServicio: string,
+    pedimento: string,
     max: boolean
 }

src/DTOs/Operaciones/DTOViajesServicios.ts

@@ -6,5 +6,6 @@ export default interface DTOViajesServicios {
     aduana: number,
     comentarios: string,
     idProveedor: number,
-    sProveedor: string
+    sProveedor: string, 
+    noCaja: string
 }

src/Interfaces/Catalogos/ICatAduanas.ts

@@ -0,0 +1,4 @@
+export default interface ICatAduanas {
+   id: number,
+   Aduana: string
+}

src/Services/Operaciones/OpViajes.Services.ts

@@ -2,6 +2,7 @@ import http from "../../Services/Auth/config/http-common";
 import DTOViajes from "../../DTOs/Operaciones/DTOViajes";
 import IRespuesta from "../../Interfaces/Respuestas/IRespuesta";
 import DTOViajesServicios from "../../DTOs/Operaciones/DTOViajesServicios";
+import DTOUltimaCaja from "../../DTOs/Operaciones/DTOUltimaCaja";
 
 class OpViajesDataService {
   Get() {
@@ -10,6 +11,9 @@ class OpViajesDataService {
   GetAllServices() {
     return http.get<DTOViajesServicios[]>("Operaciones/OpViajes/GetAllServices");
   }
+  GetLastTrailerBox(idViaje: number) {
+    return http.get<DTOUltimaCaja>(`Operaciones/OpViajes/GetLastTrailerBox?idViaje=${idViaje}`);
+  }
   Append(data: DTOViajes) {
     return http.post<DTOViajes>(`Operaciones/OpViajes/Append`,data);
   }

src/css/masterDetail.css

@@ -28,7 +28,7 @@
     background-color: #255dde;
     color: #FFFFFF;
     height: 25px;
-    text-align: left !important;
+    text-align: center !important;
 }
 
 .MDTable tbody tr td {
@@ -63,32 +63,39 @@
 }
 
 .masterSelected {
-/*     background-color: #dbe5f3 !important; */
-/*    font-weight: bold; */
    color: #000000;
- /*    border-top: solid 2px #f40505;*/
+   border-top: solid 4px #f4a005;
-   border-bottom: solid 2px #f4a005;
+   border-right: solid 1px #f4a005;
-   /* text-shadow: 1px 1px 1px #fff; */
+   border-left: solid 1px #f4a005;
-  /*  background-color: #72a9a9 !important; 
+   text-align: center !important;
-   font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; */
 }
 
-.notmalSelected {
+.normalSelected {
-    /*  background-color: #6695db !important; */
-    /*    font-weight: bold; */
     color: #000000;
     border-top: none;
     border-bottom: none;
-    text-align: center;
+    text-align: center !important;
-    /* text-shadow: 1px 1px 1px #fff; */
+}
-    /*  background-color: #72a9a9 !important; 
+
-   font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; */
+.masterSelected2 {
+    color: #000000;
+    border-bottom: solid 3px #f4a005;
+    border-right: solid 1px #f4a005;
+    border-left: solid 1px #f4a005;
+    text-align: center !important;
+}
+
+.normalSelected2 {
+    color: #000000;
+    border-top: none;
+    border-bottom: none;
+    text-align: center !important;
 }
 
 .zui-table {
     border: solid 1px #DDEEEE;
     border-collapse: collapse;
-    border-spacing: 0;
+    border-spacing: 5px;
     font: normal 11px Arial, sans-serif;
 }
 
@@ -96,8 +103,8 @@
     background-color: #DDEFEF;
     border: solid 1px #DDEEEE;
     color: #336B6B;
-    padding: 5px;
+    padding: 5px 5px 5px 15px; 
-    text-align: left;
+    text-align: center;
     text-shadow: 1px 1px 1px #fff;
 }
 
@@ -106,6 +113,7 @@
     color: #333;
     padding: 0px;
     text-shadow: 1px 1px 1px #fff;
+    padding: 0px 0px 0px 15px;
     border-bottom: none;
     border-top: none;
 }

src/store/features/Catalogos/CatAduanasSlice.ts

@@ -0,0 +1,32 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit'
+import ICatAduanas from '../../../Interfaces/Catalogos/ICatAduanas'
+const CatAduanas: ICatAduanas[] = [{id:0, Aduana: 'Aduana'}, {id:240, Aduana: 'Nuevo Laredo, Tamps.'}, {id:180, Aduana: 'Colombia, N. L.'}]
+const initialState = { CatAduanas }
+
+export const CatAduanasSlice = createSlice({
+  name: 'CatAduanas',
+  initialState: initialState,
+  reducers: {
+    resetCatAduanas : (state, action: PayloadAction<string>) => {
+      state.CatAduanas =  []
+    },  
+    populateCatAduanas : (state, action: PayloadAction<ICatAduanas[]>) => {
+        action.payload.forEach(element => {
+            const index = state.CatAduanas.findIndex(object => object.id === element.id)
+            if (index<0) state.CatAduanas.push(element)
+        })
+    },
+    updateCatAduanas : (state, action: PayloadAction<ICatAduanas>) => {
+      const i = state.CatAduanas.findIndex(_element => _element.id === action.payload.id);
+      if (i > -1) state.CatAduanas[i] = action.payload;
+      else state.CatAduanas.push(action.payload);
+    },
+    deleteCatAduanas : (state, action: PayloadAction<number>) => {
+      const newArr = state.CatAduanas.filter(data => data.id != action.payload);
+      state.CatAduanas=newArr
+    },
+  },
+})
+
+export const { resetCatAduanas, populateCatAduanas, updateCatAduanas, deleteCatAduanas } = CatAduanasSlice.actions;
+export default CatAduanasSlice.reducer;

src/store/features/Operaciones/OpViajesServiciosSlice.ts

@@ -16,10 +16,12 @@ export const OpViajesServiciosSlice = createSlice({
             if (index<0) state.OpViajesServicios.push(element)
         })
     },
-    updateOpViajesServicios : (state, action: PayloadAction<DTOViajesServicios>) => {
+    updateOpViajesServicios : (state, action: PayloadAction<DTOViajesServicios[]>) => {
-      const i = state.OpViajesServicios.findIndex(_element => _element.id === action.payload.id);
+      action.payload.forEach(row => {
-      if (i > -1) state.OpViajesServicios[i] = action.payload;
+      const i = state.OpViajesServicios.findIndex(_element => _element.id === row.id);
-      else state.OpViajesServicios.push(action.payload);
+      if (i > -1) state.OpViajesServicios[i] = row;
+      else state.OpViajesServicios.push(row);
+    })
     },
     deleteOpViajesServicios : (state, action: PayloadAction<number>) => {
       const newArr = state.OpViajesServicios.filter(data => data.id != action.payload);

src/store/store.ts

@@ -7,6 +7,7 @@ import { CatProveedoresSlice } from './features/Catalogos/CatProveedoresSlice'
 import { CatServiciosSlice } from './features/Catalogos/CatServiciosSlice'
 import { CatTipoUnidadesSlice } from './features/Catalogos/CatTipoUnidadesSlice'
 import { CatUbicacionesSlice } from './features/Catalogos/CatUbicacionesSlice'
+import { CatAduanasSlice } from './features/Catalogos/CatAduanasSlice'
 import { OpViajesSlice } from './features/Operaciones/OpViajesSlice'
 import { OpViajesServiciosSlice } from './features/Operaciones/OpViajesServiciosSlice'
 
@@ -19,6 +20,7 @@ export const store = configureStore({
     CatTipoUnidades: CatTipoUnidadesSlice.reducer,
     CatUbicaciones: CatUbicacionesSlice.reducer,
     CatServicios: CatServiciosSlice.reducer,
+    CatAduanas : CatAduanasSlice.reducer,
     OpViajes: OpViajesSlice.reducer,
     OpViajesServicios: OpViajesServiciosSlice.reducer
   }