From 4413faa159cf9aa626b303767d35f386dfd5c34e Mon Sep 17 00:00:00 2001
From: Al Garcia <agarcia@gemcousa.com>
Date: Wed, 5 Oct 2022 10:25:12 -0500
Subject: [PATCH] Version estable el 5 Octubre 2022

---
 src/App.tsx                                   |   5 +-
 src/Components/Login/Login.tsx                |   2 +-
 src/Components/Navbar/Navbar.tsx              |  37 +-
 src/Components/Operaciones/OpMonitor.tsx      |   8 +
 src/Components/Operaciones/Viaje/Viaje.tsx    | 523 +++++++++---------
 .../Operaciones/Viaje/ViajeEstatus.tsx        |  25 +-
 src/DTOs/Operaciones/DTOViajes.ts             |   1 +
 src/Services/Auth/config/http-common.ts       |   2 +-
 src/css/autoComplete.css                      |  30 +
 .../features/Catalogos/CatAduanasSlice.ts     |   2 +-
 10 files changed, 331 insertions(+), 304 deletions(-)
 create mode 100644 src/css/autoComplete.css

diff --git a/src/App.tsx b/src/App.tsx
index 20cd483..f6ff178 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -37,8 +37,9 @@ function App() {
       <BrowserRouter>
         <Navbar />
         <Routes>
-          <Route path='/' element={<Home />}></Route>
-          <Route path='login' element={<Login />}></Route>
+          {/*   <Route path='/' element={<Home />}></Route>
+          <Route path='login' element={<Login />}></Route> */}
+          <Route path='/' element={<Login />}></Route>
           <Route path='logout' element={<Logout />}></Route>
           <Route element={<ProtectedRoute />}>
             <Route path='OpMonitor' element={<OpMonitor />} />
diff --git a/src/Components/Login/Login.tsx b/src/Components/Login/Login.tsx
index a6746b3..58779bb 100644
--- a/src/Components/Login/Login.tsx
+++ b/src/Components/Login/Login.tsx
@@ -100,7 +100,7 @@ export const Login: FC<IProps> = (props) => {
   }, [token])
 
   return (
-    <div>
+    <div hidden={token ? true : false}>
       <div className='Auth-form-container'>
         <form className='Auth-form'>
           <div className='Auth-form-content'>
diff --git a/src/Components/Navbar/Navbar.tsx b/src/Components/Navbar/Navbar.tsx
index 13ea168..0d6ea9f 100644
--- a/src/Components/Navbar/Navbar.tsx
+++ b/src/Components/Navbar/Navbar.tsx
@@ -14,13 +14,17 @@ function Submenu({ descripcion, menu }: Isubmenu) {
   return (
     <div>
       <NavDropdown title={descripcion} id='basic-nav-dropdown'>
-        {menu.map((item, index) => {
-          return (
-            <NavDropdown.Item to={item.url} as={Link}>
-              {item.descripcion}
-            </NavDropdown.Item>
-          )
-        })}
+        {menu
+          .filter((item) => {
+            return item.descripcion.length > 2
+          })
+          .map((item, index) => {
+            return (
+              <NavDropdown.Item to={item.url} as={Link}>
+                {item.descripcion}
+              </NavDropdown.Item>
+            )
+          })}
       </NavDropdown>
     </div>
   )
@@ -42,14 +46,14 @@ function AOLNavbar() {
           <Nav className='me-auto'>
             {Menu
               ? Menu.map((itemMenu, index) => {
-                  if (itemMenu.padreId === 0) {
+                  if (itemMenu.padreId === 0 && itemMenu.descripcion.length > 2) {
                     return (
                       <>
                         <Submenu
                           descripcion={itemMenu.descripcion}
                           key={itemMenu.id}
                           menu={Menu.filter(function (item) {
-                            return item.padreId === itemMenu.id
+                            return item.padreId === itemMenu.id && item.descripcion.length > 2
                           })}
                         />
                       </>
@@ -60,13 +64,14 @@ function AOLNavbar() {
           </Nav>
         </Navbar.Collapse>
         <Navbar.Collapse className='justify-content-end'>
-          {UserLogued ? (
-            <Navbar.Text>
-              Usuario: {User} - <Link to='logout'>logout</Link>
-            </Navbar.Text>
-          ) : (
-            <Link to='login'>login</Link>
-          )}
+          {
+            UserLogued ? (
+              <Navbar.Text>
+                Usuario: {User} - <Link to='logout'>logout</Link>
+              </Navbar.Text>
+            ) : null
+            /*   <Link to='login'>login</Link> */
+          }
         </Navbar.Collapse>
       </Container>
     </Navbar>
diff --git a/src/Components/Operaciones/OpMonitor.tsx b/src/Components/Operaciones/OpMonitor.tsx
index e84b8b8..3fe35b4 100644
--- a/src/Components/Operaciones/OpMonitor.tsx
+++ b/src/Components/Operaciones/OpMonitor.tsx
@@ -98,6 +98,7 @@ export const OpMonitor: FC<IProps> = (props) => {
   const loadTrips = () => {
     DSOpViajes.Get()
       .then((response) => {
+        console.log('viajes=' + JSON.stringify(response.data))
         var data = response.data.map((x) => {
           x.max = false
           return x
@@ -181,6 +182,7 @@ export const OpMonitor: FC<IProps> = (props) => {
                   <th>AOL</th>
                   <th>&nbsp;</th>
                   <th>Cliente</th>
+                  <th>Tipo operacion</th>
                   <th>Origen</th>
                   <th>Destino</th>
                   <th>Tipo Unidad</th>
@@ -231,6 +233,12 @@ export const OpMonitor: FC<IProps> = (props) => {
                             >
                               {MasterData.sCliente}
                             </td>
+                            <td
+                              style={{ textAlign: 'left' }}
+                              className={MasterData.max === true ? 'masterSelected' : 'normalSelected'}
+                            >
+                              {MasterData.sTipoOperacion}
+                            </td>
                             <td
                               style={{ textAlign: 'left' }}
                               className={MasterData.max === true ? 'masterSelected' : 'normalSelected'}
diff --git a/src/Components/Operaciones/Viaje/Viaje.tsx b/src/Components/Operaciones/Viaje/Viaje.tsx
index 3aeab49..01020b5 100644
--- a/src/Components/Operaciones/Viaje/Viaje.tsx
+++ b/src/Components/Operaciones/Viaje/Viaje.tsx
@@ -1,5 +1,5 @@
-import React, { FC, useEffect, useState, ChangeEvent, useCallback } from 'react'
-import { Alert, Button, Card, Col, Form, Modal, Row } from 'react-bootstrap'
+import { FC, useEffect, useRef, useState } from 'react'
+import { Button, ButtonGroup, Card, Col, Dropdown, DropdownButton, Form, ListGroup, Modal, Row } from 'react-bootstrap'
 import { useDispatch, useSelector } from 'react-redux'
 import DTOOpViajes from '../../../DTOs/Operaciones/DTOViajes'
 import DSOpViajes from '../../../Services/Operaciones/OpViajes.Services'
@@ -13,28 +13,9 @@ import DTOViajesServicios from '../../../DTOs/Operaciones/DTOViajesServicios'
 import { Servicios } from '../Viaje/Servicios/Servicios'
 import DatePicker from 'react-datepicker'
 import 'react-datepicker/dist/react-datepicker.css'
-import { Typeahead } from 'react-bootstrap-typeahead' // ES2015
 import 'react-bootstrap-typeahead/css/Typeahead.css'
 import 'react-bootstrap-typeahead/css/Typeahead.bs5.css'
-import ICatClientes from '../../../Interfaces/Catalogos/ICatClientes'
-import { AutocompletePure, AutocompletePureProps, ChangeReason, RenderItem } from 'react-autocomplete-pure'
-import { Autocomplete } from '../../Utils/Autocomplete/Autocomplete'
-import Select from 'react-select'
-import AutoSuggest from 'react-autosuggest'
-
-type Film = { id: number; cliente: string }
-
-const renderItem: RenderItem<Film> = (item, { isHighlighted }) => (
-  <span style={{ fontWeight: isHighlighted ? 700 : 400 }}>{item.cliente}</span>
-)
-
-const getSuggestionValue = (item: Film) => item.cliente
-
-const options = [
-  { value: 'chocolate', label: 'Chocolate' },
-  { value: 'strawberry', label: 'Strawberry' },
-  { value: 'vanilla', label: 'Vanilla' },
-]
+import '../../../css/autoComplete.css'
 
 interface IProps {
   IDViaje: number
@@ -45,33 +26,19 @@ interface IOpciones {
   label: string
 }
 
-/* interface Option {
-  firstName: string
-  lastName: string
-} */
-
 export const Viaje: FC<IProps> = (props) => {
-  const [value, setValue] = useState('')
-  const [suggestions, setSuggestions] = useState<string[]>([])
-  const [isOpen, setIsOpen] = useState<boolean>(false)
-  //const [suggestions, setSuggestions] = useState<Film[]>([])
-  //const [value, setValue] = useState<string>('')
   const [selectedOption, setselectedOption] = useState<IOpciones | null>()
-
   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 mCatClientes = useSelector((state: RootState) => state.CatClientes.CatClientes)
-  const CatProveedores = useSelector((state: RootState) => state.CatProveedores.CatProveedores)
+  const mCatProveedores = useSelector((state: RootState) => state.CatProveedores.CatProveedores)
   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 mCatUbicaciones = useSelector((state: RootState) => state.CatUbicaciones.CatUbicaciones)
+  const mCatServicios = 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)
@@ -79,11 +46,14 @@ export const Viaje: FC<IProps> = (props) => {
   const [IDCliente, setIDCliente] = useState(0)
   const [Cliente, setCliente] = useState('')
   const [IDProveedor, setIDProveedor] = useState(0)
+  const [Proveedor, setProveedor] = useState('')
   const [IDServicio, setIDServicio] = useState(0)
-  const [IDNuevoServicio, setIDNuevoServicio] = useState(0)
+  const [Servicio, setServicio] = useState('')
   const [IDTipoUnidad, setIDTipoUnidad] = useState(0)
   const [IDOrigen, setIDOrigen] = useState(0)
+  const [Origen, setOrigen] = useState('')
   const [IDDestino, setIDDestino] = useState(0)
+  const [Destino, setDestino] = useState('')
   const [RefAA, setRefAA] = useState('')
   const [PickUpNumber, setPickUpNumber] = useState('')
   const [Hazmat, setHazmat] = useState(0)
@@ -94,45 +64,12 @@ export const Viaje: FC<IProps> = (props) => {
   const [DisableAduana, setDisableAduana] = useState(true)
   const [TotalServicios, setTotalServicios] = useState(0)
   const [Cita, setCita] = useState<Date | null>()
-  const [singleSelections, setSingleSelections] = useState<IOpciones[]>([])
-  const [multiSelections, setMultiSelections] = useState([])
-
-  /*   const handleChange: AutocompletePureProps<Film>['onChange'] = useCallback(async (_event, { value, reason }) => {
-    setValue(value)
-    console.log('value=' + value)
-    if (reason === 'INPUT') {
-      let newFilms = mCatClientes.filter((a) => {
-        if (a.cliente.includes(value)) {
-          return a
-        }
-      })
-      //const newFilms = await fetchFilms(value)
-      setSuggestions(newFilms)
-      setIsOpen(Boolean(newFilms.length))
-    } else if (reason === 'ENTER') {
-      setIsOpen(false)
-    }
-  }, []) */
-
-  const handleSelect: AutocompletePureProps<Film>['onSelect'] = useCallback((_event, { item }) => {
-    const value = getSuggestionValue(item)
-    setValue(value)
-    console.log('value=' + value)
-    setIsOpen(false)
-  }, [])
-
-  const handleClickOutside = (_event: Event) => {
-    setIsOpen(false)
-  }
-
-  /*  const [options, setOptions] = useState([
-    { firstName: 'Art', lastName: 'Blakey' },
-    { firstName: 'John', lastName: 'Coltrane' },
-    { firstName: 'Miles', lastName: 'Davis' },
-    { firstName: 'Herbie', lastName: 'Hancock' },
-    { firstName: 'Charlie', lastName: 'Parker' },
-    { firstName: 'Tony', lastName: 'Williams' },
-  ]) */
+  const [SelectedClient, setSelectedClient] = useState(false)
+  const [SelectedOrigen, setSelectedOrigen] = useState(false)
+  const [SelectedDestino, setSelectedDestino] = useState(false)
+  const [SelectedServicio, setSelectedServicio] = useState(false)
+  const [SelectedProveedor, setSelectedProveedor] = useState(false)
+  const inputRef = useRef()
 
   useEffect(() => {
     if (IDServicio > 0 && TotalServicios === 0) saveDetail()
@@ -149,11 +86,17 @@ export const Viaje: FC<IProps> = (props) => {
         setPickUpNumber(row.pickUpNumber)
         setTipoOperacion(row.tipoOperacion)
         setPedimento(row.pedimento)
+        setCliente(row.sCliente)
+        setOrigen(row.sOrigen)
+        setDestino(row.sDestino)
+        setSelectedClient(true)
+        setSelectedOrigen(true)
+        setSelectedDestino(true)
+        setSelectedServicio(true)
+        setSelectedProveedor(true)
         return row
       }
     })
-    //setRefAA(selectedRow[0].refAgenciaAduanal)
-    // console.log(JSON.stringify(selectedRow) + ' ' + props.IDViaje)
     let totalServicios = mAllTripServices.filter((a) => {
       if (a.idViaje === IDViaje) {
         return a
@@ -165,6 +108,22 @@ export const Viaje: FC<IProps> = (props) => {
   useEffect(() => {
     if (IDServicio === 1 || IDServicio === 2 || IDServicio === 22) setDisableAduana(false)
     else setDisableAduana(true)
+    if (IDServicio > 0) {
+      let serviceFound = mCatServicios.filter((item) => {
+        if (item.id == IDServicio) {
+          return item
+        }
+      })
+      setServicio(serviceFound[0].servicio)
+    }
+    if (IDProveedor > 0) {
+      let providerFound = mCatProveedores.filter((item) => {
+        if (item.id == IDProveedor) {
+          return item
+        }
+      })
+      setProveedor(providerFound[0].proveedor)
+    }
   }, [IDServicio])
 
   useEffect(() => {
@@ -187,12 +146,7 @@ export const Viaje: FC<IProps> = (props) => {
   }, [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')
+    if (IDServicio === 0 || IDProveedor === 0) {
       return false
     }
     const data: DTOViajesServicios = {
@@ -209,7 +163,6 @@ export const Viaje: FC<IProps> = (props) => {
     }
     DSOpViajes.AppendServices(data)
       .then((responsed) => {
-        //  console.log('Item regresado del post=' + JSON.stringify(responsed.data))
         if (IDDetail === 0) {
           dispatch(populateOpViajesServicios(responsed.data))
           setIDDetail(responsed.data[0].id)
@@ -273,6 +226,7 @@ export const Viaje: FC<IProps> = (props) => {
       noCaja: NoCaja,
       pickUpNumber: PickUpNumber,
       tipoOperacion: TipoOperacion,
+      sTipoOperacion: '',
       pedimento: Pedimento,
       max: true,
       status: 1,
@@ -294,14 +248,11 @@ export const Viaje: FC<IProps> = (props) => {
     setComentarios('')
     setIDProveedor(0)
     setUltimaCaja('')
+    setServicio('')
+    setProveedor('')
     setDisableAduana(true)
   }
 
-  const handleChange = (option: IOpciones) => {
-    console.log('selectedoptions=' + option)
-    //setselectedOption(selectedOption)
-  }
-
   useEffect(() => {
     console.log(selectedOption)
   }, [selectedOption])
@@ -318,6 +269,18 @@ export const Viaje: FC<IProps> = (props) => {
     return lowerCasedCompanies.filter((language) => language.startsWith(value.trim().toLowerCase()))
   }
 
+  const handleKeyDown = (e: any) => {
+    //  const { cursor, result } = this.state
+    // arrow up/down button should select next/previous list element
+    /*  if (e.keyCode === 38) {
+      console.log('arrow down')
+      
+    } else */
+    if (e.keyCode === 40) {
+      console.log('arrow down')
+    }
+  }
+
   return (
     <div className='tripField'>
       <Card style={{ backgroundColor: '#F0F7FC' }}>
@@ -346,90 +309,45 @@ export const Viaje: FC<IProps> = (props) => {
           </Row>
           <Row style={{ paddingTop: '5px' }}>
             <Col xs={2}>Cliente</Col>
-            {/* <Col xs={10}>
-               <Form.Control
-                type='text'
-                id='Cliente'
-                value={Cliente}
-                size='sm'
-                className='dialogLabel'
-                onChange={(e) => {
-                  setCliente(e.target.value)
-                }}
-              /> 
-               <Autocomplete input={''} /> 
-              </Col>*/}
-            {/*  <Col xs={10}>
-              <Form.Control
-                as='select'
-                onChange={(e) => {
-                  setIDCliente(parseInt(e.target.value))
-                }}
-                value={IDCliente}
-                className='form-select form-select-sm dialogLabel'
-              >
-                <option value='0'>-SELECCIONE-</option>
-                {mCatClientes
-                  ? mCatClientes.map((c) => {
-                      return (
-                        <option key={c.id} value={c.id}>
-                          {c.cliente}
-                        </option>
-                      )
-                    })
-                  : null}
-              </Form.Control>
-            </Col> */}
-            {/*  <Col xs={10}>
-              <Typeahead
-                clearButton
-                defaultSelected={mCatClientes.filter((cliente) => {
-                  if (cliente.id === IDCliente) {
-                    return cliente
-                  }
-                })}
-                id='Cliente'
-                labelKey='cliente'
-                onChange={(selected) => {
-                  if (selected.length > 0) {
-                    const valStringify = JSON.stringify(selected)
-                    const valParse = JSON.parse(valStringify)
-                    //console.log(valParse[0].id)
-                    setIDCliente(valParse[0].id)
-                  }
-                }}
-                options={mCatClientes}
-                placeholder='Seleccione el cliente...'
-              />
-            </Col> */}
-            {/*             <Col xs={10}>
-              <div className='autoComplete'>
-                <AutocompletePure
-                  open={isOpen}
-                  value={value}
-                  items={suggestions}
-                  onChange={handleChange}
-                  onSelect={handleSelect}
-                  onClickOutside={handleClickOutside}
-                  renderItem={renderItem}
-                  getSuggestionValue={getSuggestionValue}
-                />
+            <Col xs={9}>
+              <div className='mainDiv'>
+                <Form.Group className='typeahead-form-group'>
+                  <Form.Control
+                    autoComplete='nope'
+                    type='text'
+                    id='Cliente'
+                    value={Cliente}
+                    size='sm'
+                    className='dialogLabel'
+                    onChange={(e) => {
+                      setCliente(e.target.value)
+                      setSelectedClient(false)
+                    }}
+                    onKeyDown={(e) => {
+                      handleKeyDown(e)
+                    }}
+                  />
+                  <Dropdown className='d-inline mx-6' show={!SelectedClient && Cliente.length > 0}>
+                    <Dropdown.Menu>
+                      {Cliente.length > 0 &&
+                        !SelectedClient &&
+                        mCatClientes
+                          .filter((result) => result.cliente.toLocaleLowerCase().includes(Cliente.toLocaleLowerCase()))
+                          .map((result) => (
+                            <Dropdown.Item
+                              onClick={() => {
+                                setIDCliente(result.id)
+                                setCliente(result.cliente)
+                                setSelectedClient(true)
+                              }}
+                            >
+                              {result.cliente}
+                            </Dropdown.Item>
+                          ))}
+                    </Dropdown.Menu>
+                  </Dropdown>
+                </Form.Group>
               </div>
-            </Col> */}
-            <Col xs={10}>
-              {/* <Select
-                value={selectedOption}
-                onChange={() => handleChange}
-                options={options}
-                isClearable={true}
-                getOptionLabel={(animal: IOpciones) => animal.label}
-                getOptionValue={(animal: IOpciones) => animal.value}
-              /> */}
-              {/* <select onChange={(e) => handleAddrTypeChange(e)} className='browser-default custom-select'>
-                {Add.map((address, key) => (
-                  <option value={key}>{address}</option>
-                ))}
-              </select> */}
             </Col>
           </Row>
           <Row style={{ paddingTop: '5px' }}>
@@ -474,53 +392,89 @@ export const Viaje: FC<IProps> = (props) => {
           <Row style={{ paddingTop: '5px' }}>
             <Col xs={2}>Origen</Col>
             <Col xs={4}>
-              <Form.Control
-                as='select'
-                onChange={(e) => {
-                  setIDOrigen(parseInt(e.target.value))
-                }}
-                value={IDOrigen}
-                className='form-select form-select-sm dialogLabel'
-              >
-                <option value='0'>-SELECCIONE-</option>
-                {CatUbicaciones
-                  ? CatUbicaciones.map((c) => {
-                      if (c.clasificacion === 1) {
-                        return (
-                          <option key={c.id} value={c.id}>
-                            {c.ubicacion}
-                          </option>
-                        )
-                      }
-                    })
-                  : null}
-              </Form.Control>
+              <div className='mainDiv'>
+                <Form.Group className='typeahead-form-group'>
+                  <Form.Control
+                    autoComplete='nope'
+                    type='text'
+                    id='Origen'
+                    value={Origen}
+                    size='sm'
+                    className='dialogLabel'
+                    onChange={(e) => {
+                      setOrigen(e.target.value)
+                      setSelectedOrigen(false)
+                    }}
+                  />
+                  <Dropdown className='d-inline mx-6' show={!SelectedOrigen && Origen.length > 0}>
+                    <Dropdown.Menu>
+                      {Origen.length > 0 &&
+                        !SelectedOrigen &&
+                        mCatUbicaciones
+                          .filter(
+                            (result) =>
+                              result.ubicacion.toLocaleLowerCase().includes(Origen.toLocaleLowerCase()) &&
+                              result.clasificacion === 1
+                          )
+                          .map((result) => (
+                            <Dropdown.Item
+                              onClick={() => {
+                                setIDOrigen(result.id)
+                                setOrigen(result.ubicacion)
+                                setSelectedOrigen(true)
+                              }}
+                            >
+                              {result.ubicacion}
+                            </Dropdown.Item>
+                          ))}
+                    </Dropdown.Menu>
+                  </Dropdown>
+                </Form.Group>
+              </div>
             </Col>
             <Col xs={2} style={{ textAlign: 'right' }}>
               Destino
             </Col>
             <Col xs={4}>
-              <Form.Control
-                as='select'
-                onChange={(e) => {
-                  setIDDestino(parseInt(e.target.value))
-                }}
-                value={IDDestino}
-                className='form-select form-select-sm dialogLabel'
-              >
-                <option value='0'>-SELECCIONE-</option>
-                {CatUbicaciones
-                  ? CatUbicaciones.map((c) => {
-                      if (c.clasificacion === 2) {
-                        return (
-                          <option key={c.id} value={c.id}>
-                            {c.ubicacion}
-                          </option>
-                        )
-                      }
-                    })
-                  : null}
-              </Form.Control>
+              <div className='mainDiv'>
+                <Form.Group className='typeahead-form-group'>
+                  <Form.Control
+                    autoComplete='nope'
+                    type='text'
+                    id='Destino'
+                    value={Destino}
+                    size='sm'
+                    className='dialogLabel'
+                    onChange={(e) => {
+                      setDestino(e.target.value)
+                      setSelectedDestino(false)
+                    }}
+                  />
+                  <Dropdown className='d-inline mx-6' show={!SelectedDestino && Destino.length > 0}>
+                    <Dropdown.Menu>
+                      {Destino.length > 0 &&
+                        !SelectedDestino &&
+                        mCatUbicaciones
+                          .filter(
+                            (result) =>
+                              result.ubicacion.toLocaleLowerCase().includes(Destino.toLocaleLowerCase()) &&
+                              result.clasificacion === 2
+                          )
+                          .map((result) => (
+                            <Dropdown.Item
+                              onClick={() => {
+                                setIDDestino(result.id)
+                                setDestino(result.ubicacion)
+                                setSelectedDestino(true)
+                              }}
+                            >
+                              {result.ubicacion}
+                            </Dropdown.Item>
+                          ))}
+                    </Dropdown.Menu>
+                  </Dropdown>
+                </Form.Group>
+              </div>
             </Col>
           </Row>
           <Row style={{ paddingTop: '5px' }}>
@@ -557,19 +511,6 @@ export const Viaje: FC<IProps> = (props) => {
               </Form.Control>
             </Col>
             <Col xs={3}>&nbsp;</Col>
-            {/*  <Col>Pickup no</Col>
-        <Col xs={4}>
-          <Form.Control
-            type='text'
-            id='PickUpNumber'
-            value={PickUpNumber}
-            size='sm'
-            className='dialogLabel'
-            onChange={(e) => {
-              setPickUpNumber(e.target.value)
-            }}
-          />
-        </Col> */}
           </Row>
           <Row style={{ paddingTop: '5px' }}>
             <Col xs={2}>Pedimento</Col>
@@ -603,6 +544,7 @@ export const Viaje: FC<IProps> = (props) => {
                 variant='primary'
                 onClick={() => {
                   saveMaster()
+                  saveDetail()
                 }}
               >
                 Guardar
@@ -619,25 +561,46 @@ export const Viaje: FC<IProps> = (props) => {
           <Row style={{ paddingTop: '5px' }}>
             <Col xs={2}>Servicio</Col>
             <Col xs={4}>
-              <Form.Control
-                as='select'
-                onChange={(e) => {
-                  setIDServicio(parseInt(e.target.value))
-                }}
-                value={IDServicio}
-                className='form-select form-select-sm dialogLabel'
-              >
-                <option value='0'>Seleccione el servicio...</option>
-                {CatServicios
-                  ? CatServicios.map((c) => {
-                      return (
-                        <option key={c.id} value={c.id}>
-                          {c.servicio}
-                        </option>
-                      )
-                    })
-                  : null}
-              </Form.Control>
+              <div className='mainDiv'>
+                <Form.Group className='typeahead-form-group'>
+                  <Form.Control
+                    autoComplete='nope'
+                    type='text'
+                    id='Servicio'
+                    value={Servicio}
+                    size='sm'
+                    className='dialogLabel'
+                    onChange={(e) => {
+                      setServicio(e.target.value)
+                      setSelectedServicio(false)
+                    }}
+                    onKeyDown={(e) => {
+                      handleKeyDown(e)
+                    }}
+                  />
+                  <Dropdown className='d-inline mx-6' show={!SelectedServicio && Servicio.length > 0}>
+                    <Dropdown.Menu>
+                      {Servicio.length > 0 &&
+                        !SelectedServicio &&
+                        mCatServicios
+                          .filter((result) =>
+                            result.servicio.toLocaleLowerCase().includes(Servicio.toLocaleLowerCase())
+                          )
+                          .map((result) => (
+                            <Dropdown.Item
+                              onClick={() => {
+                                setIDServicio(result.id)
+                                setServicio(result.servicio)
+                                setSelectedServicio(true)
+                              }}
+                            >
+                              {result.servicio}
+                            </Dropdown.Item>
+                          ))}
+                    </Dropdown.Menu>
+                  </Dropdown>
+                </Form.Group>
+              </div>
             </Col>
             <Col style={{ visibility: DisableAduana ? 'hidden' : 'visible' }}>
               <DatePicker
@@ -690,25 +653,43 @@ export const Viaje: FC<IProps> = (props) => {
           <Row style={{ paddingTop: '5px' }}>
             <Col xs={2}>Proveedor</Col>
             <Col xs={10}>
-              <Form.Control
-                as='select'
-                onChange={(e) => {
-                  setIDProveedor(parseInt(e.target.value))
-                }}
-                value={IDProveedor}
-                className='form-select form-select-sm dialogLabel'
-              >
-                <option value='0'>-SELECCIONE-</option>
-                {CatProveedores
-                  ? CatProveedores.map((c) => {
-                      return (
-                        <option key={c.id} value={c.id}>
-                          {c.proveedor}
-                        </option>
-                      )
-                    })
-                  : null}
-              </Form.Control>
+              <div className='mainDiv'>
+                <Form.Group className='typeahead-form-group'>
+                  <Form.Control
+                    autoComplete='nope'
+                    type='text'
+                    id='Proveedor'
+                    value={Proveedor}
+                    size='sm'
+                    className='dialogLabel'
+                    onChange={(e) => {
+                      setProveedor(e.target.value)
+                      setSelectedProveedor(false)
+                    }}
+                  />
+                  <Dropdown className='d-inline mx-6' show={!SelectedProveedor && Proveedor.length > 0}>
+                    <Dropdown.Menu>
+                      {Proveedor.length > 0 &&
+                        !SelectedProveedor &&
+                        mCatProveedores
+                          .filter((result) =>
+                            result.proveedor.toLocaleLowerCase().includes(Proveedor.toLocaleLowerCase())
+                          )
+                          .map((result) => (
+                            <Dropdown.Item
+                              onClick={() => {
+                                setIDProveedor(result.id)
+                                setProveedor(result.proveedor)
+                                setSelectedProveedor(true)
+                              }}
+                            >
+                              {result.proveedor}
+                            </Dropdown.Item>
+                          ))}
+                    </Dropdown.Menu>
+                  </Dropdown>
+                </Form.Group>
+              </div>
             </Col>
           </Row>
           <Row style={{ paddingTop: '5px' }}>
@@ -727,14 +708,14 @@ export const Viaje: FC<IProps> = (props) => {
             </Col>
             <Col xs={4}></Col>
             <Col xs={3} style={{ textAlign: 'right' }}>
-              <Button
+              {/* <Button
                 variant='success'
                 onClick={() => {
                   saveDetail()
                 }}
               >
                 Guardar servicio
-              </Button>
+              </Button> */}
             </Col>
           </Row>
         </Card.Body>
diff --git a/src/Components/Operaciones/Viaje/ViajeEstatus.tsx b/src/Components/Operaciones/Viaje/ViajeEstatus.tsx
index d3d9d38..027e929 100644
--- a/src/Components/Operaciones/Viaje/ViajeEstatus.tsx
+++ b/src/Components/Operaciones/Viaje/ViajeEstatus.tsx
@@ -25,9 +25,9 @@ export const ViajeEstatus: FC<IProps> = (props) => {
   const [ListaSecuencia, setListaSecuencia] = useState<DTOViajeEstatusSecuencia[]>([])
   const [Secuencia, setSecuencia] = useState(1)
 
-  const changeStatus = (e: any) => {
+  /*   const changeStatus = (e: any) => {
     setIDStatus(parseInt(e.target.value))
-  }
+  } */
 
   const enlistaSecuenciaViaje = () => {
     const Lista: DTOViajeEstatusSecuencia[] = mTripStatus
@@ -48,10 +48,11 @@ export const ViajeEstatus: FC<IProps> = (props) => {
     enlistaSecuenciaViaje()
   }, [Secuencia, IDStatus])
 
-  const selectedStatus = () => {
+  const selectedStatus = (e: any) => {
+    setIDStatus(parseInt(e.target.value))
     const data: DTOChangeTripStatus = {
       idViaje: props.IDViaje,
-      idEstatus: IDStatus,
+      idEstatus: parseInt(e.target.value),
     }
     DSOpStatusSecuence.ChangeTripStatus(data)
       .then((response) => {
@@ -64,13 +65,12 @@ export const ViajeEstatus: FC<IProps> = (props) => {
             return a
           }
         })
-        const updatedRow: DTOOpViajes = { ...result[0] }
+        /* const updatedRow: DTOOpViajes = { ...result[0] }
         setSecuencia(response.data.secuencia)
-        updatedRow.status = response.data.secuencia
-        if (response.data.secuencia !== 100) {
-          updatedRow.status = response.data.secuencia
-          dispatch(updateOpViajes(updatedRow))
-        } else dispatch(deleteOpViajes(props.IDViaje))
+        updatedRow.status = response.data.secuencia*/
+        if (response.data.secuencia === 100) {
+          dispatch(deleteOpViajes(props.IDViaje))
+        }
       })
       .catch((e: Error) => {})
   }
@@ -80,9 +80,10 @@ export const ViajeEstatus: FC<IProps> = (props) => {
       <Form.Control
         as='select'
         onChange={(e) => {
-          changeStatus(e)
+          // changeStatus(e)
+          selectedStatus(e)
         }}
-        onKeyPress={(e) => e.key === 'Enter' && selectedStatus()}
+        /* onKeyPress={(e) => e.key === 'Enter' && selectedStatus()} */
         value={IDStatus}
         className='form-select form-select-sm dialogLabel'
       >
diff --git a/src/DTOs/Operaciones/DTOViajes.ts b/src/DTOs/Operaciones/DTOViajes.ts
index 4a74d6d..d2d540d 100644
--- a/src/DTOs/Operaciones/DTOViajes.ts
+++ b/src/DTOs/Operaciones/DTOViajes.ts
@@ -15,6 +15,7 @@ export default interface DTOOpViajes {
     destino: number 
     sDestino: string,
     tipoOperacion: number,
+    sTipoOperacion: string,
     pedimento: string,
     max: boolean,
     status: number
diff --git a/src/Services/Auth/config/http-common.ts b/src/Services/Auth/config/http-common.ts
index 4bb27e8..0c16ef4 100644
--- a/src/Services/Auth/config/http-common.ts
+++ b/src/Services/Auth/config/http-common.ts
@@ -21,7 +21,7 @@ instance.interceptors.response.use(function (response) {
   }
   else if (401 === error.response.status) {
     localStorage.clear();
-    window.location.href = "/login";
+    window.location.href = "/";
   } else if ((409 === error.response.status) && (error.response.data.respuesta.indexOf('factura'))) {
     console.log(JSON.stringify(error.response))
     if (error.response.data.registro.factura) {
diff --git a/src/css/autoComplete.css b/src/css/autoComplete.css
new file mode 100644
index 0000000..38c1750
--- /dev/null
+++ b/src/css/autoComplete.css
@@ -0,0 +1,30 @@
+.mainDiv {
+ /*    padding-top: 50px; */
+    font-family: sans-serif;
+    text-align: center;
+   /*  width: 300px; */
+   /*  margin: 0 auto; */
+}
+
+.typeahead-form-group {
+    position: relative;
+    z-index: 10000;
+}
+
+.typeahead-list-group {
+    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;
+}
\ No newline at end of file
diff --git a/src/store/features/Catalogos/CatAduanasSlice.ts b/src/store/features/Catalogos/CatAduanasSlice.ts
index 955a279..8c7b22e 100644
--- a/src/store/features/Catalogos/CatAduanasSlice.ts
+++ b/src/store/features/Catalogos/CatAduanasSlice.ts
@@ -1,6 +1,6 @@
 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 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({