From 24b40d76c55b892ee809db9c00929f63628cff20 Mon Sep 17 00:00:00 2001
From: Al Garcia <agarcia@gemcousa.com>
Date: Tue, 13 Sep 2022 17:56:05 -0500
Subject: [PATCH] Se empieza con nuevo display de master detail definido hoy en
 la reunion

---
 src/App.tsx                                   |   4 +-
 src/Components/Catalogos/CatServicios.tsx     | 238 +++++++
 src/Components/Operaciones/OpMonitor.tsx      |   8 +-
 src/Components/Operaciones/OpViajes.tsx       | 525 ----------------
 src/Components/Operaciones/Viaje/Viaje.tsx    | 589 ++++++++++--------
 .../ViajesServicios/ViajesServicios.tsx       |  12 +-
 src/DTOs/Operaciones/DTOViajesServicios.ts    |   6 +-
 src/Interfaces/Catalogos/ICatServicios.ts     |   2 +-
 src/css/generalStyles.css                     |  14 +
 9 files changed, 593 insertions(+), 805 deletions(-)
 create mode 100644 src/Components/Catalogos/CatServicios.tsx
 delete mode 100644 src/Components/Operaciones/OpViajes.tsx
 create mode 100644 src/css/generalStyles.css

diff --git a/src/App.tsx b/src/App.tsx
index 1c350f6..20cd483 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -2,7 +2,6 @@ import 'bootstrap/dist/css/bootstrap.min.css'
 import { BrowserRouter, Route, Routes } from 'react-router-dom'
 import './App.css'
 import { Login } from './Components/Login/Login'
-import { OpViajes } from './Components/Operaciones/OpViajes'
 import { Home } from './Components/Home/Home'
 import { useEffect } from 'react'
 import { useSelector } from 'react-redux'
@@ -16,6 +15,7 @@ import { CatTipoUnidades } from './Components/Catalogos/CatTipoUnidades'
 import { CatUbicaciones } from './Components/Catalogos/CatUbicaciones'
 import { CatRutas } from './Components/Catalogos/CatRutas'
 import { OpMonitor } from './Components/Operaciones/OpMonitor'
+import { CatServicios } from './Components/Catalogos/CatServicios'
 
 function App() {
   const UserLogued = useSelector((state: RootState) => state.UserProfile.UserProfile.logueado)
@@ -41,9 +41,9 @@ function App() {
           <Route path='login' element={<Login />}></Route>
           <Route path='logout' element={<Logout />}></Route>
           <Route element={<ProtectedRoute />}>
-            <Route path='OpViajes' element={<OpViajes />} />
             <Route path='OpMonitor' element={<OpMonitor />} />
             <Route path='CatClientes' element={<CatClientes />} />
+            <Route path='CatServicios' element={<CatServicios />} />
             <Route path='CatProveedores' element={<CatProveedores />} />
             <Route path='CatTipoUnidades' element={<CatTipoUnidades />} />
             <Route path='CatUbicaciones' element={<CatUbicaciones />} />
diff --git a/src/Components/Catalogos/CatServicios.tsx b/src/Components/Catalogos/CatServicios.tsx
new file mode 100644
index 0000000..57b27ab
--- /dev/null
+++ b/src/Components/Catalogos/CatServicios.tsx
@@ -0,0 +1,238 @@
+import React, { FC, useState } from 'react'
+import { Alert, Button, Card, Col, Form, Modal, Row } from 'react-bootstrap'
+import DataTable from 'react-data-table-component'
+import { IconContext } from 'react-icons'
+import { useDispatch, useSelector } from 'react-redux'
+import ICatServicios from '../../Interfaces/Catalogos/ICatServicios'
+import { RootState } from '../../store/store'
+import { BsFillPencilFill, BsFillTrashFill, BsSave } from 'react-icons/bs'
+import DSCatServicios from '../../Services/Catalogos/CatServicios.Service'
+import { updateCatServicios, deleteCatServicios } from '../../store/features/Catalogos/CatServiciosSlice'
+
+interface IProps {}
+
+export const CatServicios: FC<IProps> = (props) => {
+  const dispatch = useDispatch()
+  const mCatServicios = useSelector((state: RootState) => state.CatServicios.CatServicios)
+  const [showCatClientesDialog, setShowCatClientesDialog] = useState(false)
+  const [deleteCatClientesDialog, setDeleteCatClientesDialog] = useState(false)
+  const [IDServicio, setIDServicio] = useState(0)
+  const [Servicio, setServicio] = useState('')
+  const [Search, setSearch] = useState('')
+  const columnsConcepts = [
+    {
+      name: 'id',
+      width: '80px',
+      selector: (row: ICatServicios) => row.id,
+      sortable: true,
+    },
+    {
+      name: 'Servicio',
+      width: '450px',
+      selector: (row: ICatServicios) => row.servicio,
+      sortable: true,
+    },
+    {
+      name: 'Editar',
+      width: '100px',
+      cell: (row: ICatServicios) => (
+        <div
+          style={{ textAlign: 'center', cursor: 'pointer' }}
+          onClick={() => {
+            showInfo(row)
+          }}
+        >
+          <IconContext.Provider value={{ color: 'blue', size: '21px' }}>
+            <BsFillPencilFill />
+          </IconContext.Provider>
+        </div>
+      ),
+      sortable: true,
+    },
+    {
+      name: 'Elimina',
+      width: '100px',
+      cell: (row: ICatServicios) => (
+        <div
+          style={{ textAlign: 'center', cursor: 'pointer' }}
+          onClick={() => {
+            confirmDelete(row)
+          }}
+        >
+          <IconContext.Provider value={{ color: 'red', size: '21px' }}>
+            <BsFillTrashFill />
+          </IconContext.Provider>
+        </div>
+      ),
+      sortable: true,
+    },
+  ]
+
+  const showInfo = (data: ICatServicios) => {
+    setIDServicio(data.id)
+    setServicio(data.servicio)
+    setShowCatClientesDialog(true)
+  }
+
+  const confirmDelete = (data: ICatServicios) => {
+    setIDServicio(data.id)
+    setServicio(data.servicio)
+    setDeleteCatClientesDialog(true)
+  }
+
+  const deleteInfo = () => {
+    DSCatServicios.Delete(IDServicio)
+      .then((response) => {
+        dispatch(deleteCatServicios(IDServicio))
+      })
+      .catch((e: Error) => {})
+    setDeleteCatClientesDialog(false)
+  }
+
+  const saveInfo = () => {
+    const data: ICatServicios = {
+      id: IDServicio,
+      servicio: Servicio,
+      activo: 1,
+    }
+    DSCatServicios.Append(data)
+      .then((response) => {
+        dispatch(updateCatServicios(response.data))
+      })
+      .catch((e: Error) => {})
+    setShowCatClientesDialog(false)
+  }
+
+  return (
+    <div>
+      <Row>
+        <Col xs={12}>
+          <Card style={{}}>
+            <Card.Body>
+              <Card.Title style={{ textAlign: 'left' }}>
+                <Alert variant='primary'>Servicios</Alert>
+              </Card.Title>
+              <Row>
+                <Col xs={12}>
+                  <Form.Control
+                    type='text'
+                    size='sm'
+                    placeholder='Search...'
+                    onChange={(e) => {
+                      setSearch(e.target.value)
+                    }}
+                  />
+                </Col>
+              </Row>
+              <Row>
+                <Col xs={12}>
+                  <DataTable
+                    noHeader
+                    defaultSortFieldId={'id'}
+                    defaultSortAsc={true}
+                    striped={true}
+                    dense={true}
+                    paginationPerPage={10}
+                    pagination
+                    highlightOnHover
+                    columns={columnsConcepts}
+                    data={mCatServicios.filter(function (row: ICatServicios) {
+                      return row.servicio.includes(Search)
+                    })}
+                    pointerOnHover
+                  />
+                </Col>
+              </Row>
+            </Card.Body>
+          </Card>
+        </Col>
+      </Row>
+      <Modal
+        show={showCatClientesDialog}
+        onHide={() => {
+          setShowCatClientesDialog(false)
+        }}
+      >
+        <Modal.Header closeButton>
+          <Modal.Title>Catalogo: Clientes</Modal.Title>
+        </Modal.Header>
+        <Modal.Body>
+          <Row>
+            <Col xs={3}>No cliente</Col>
+            <Col xs={2}>
+              <Form.Control type='text' id='IDServicio' value={IDServicio} disabled size='sm' />
+            </Col>
+          </Row>
+          <br />
+          <Row>
+            <Col xs={2}>Cliente</Col>
+            <Col xs={10}>
+              <Form.Control
+                type='text'
+                id='Servicio'
+                value={Servicio}
+                size='sm'
+                onChange={(e) => {
+                  setServicio(e.target.value)
+                }}
+              />
+            </Col>
+          </Row>
+        </Modal.Body>
+        <Modal.Footer>
+          <Row>
+            <Col xs={2}></Col>
+            <Col xs={3}>&nbsp;</Col>
+            <Col xs={3}>
+              <Button
+                variant='primary'
+                onClick={() => {
+                  saveInfo()
+                }}
+              >
+                Guarda
+              </Button>
+            </Col>
+          </Row>
+        </Modal.Footer>
+      </Modal>
+      <Modal
+        show={deleteCatClientesDialog}
+        onHide={() => {
+          setDeleteCatClientesDialog(false)
+        }}
+      >
+        <Modal.Header closeButton>
+          <Modal.Title>Catalogo: Clientes</Modal.Title>
+        </Modal.Header>
+        <Modal.Body>
+          <br />
+          <Row>
+            <Col xs={12}>
+              <Alert variant='warning'>
+                ¿Esta seguro de que desea eliminar el servicio: <br />
+                <span style={{ fontWeight: 'bold', fontSize: '20px' }}>{Servicio}</span>?
+              </Alert>
+            </Col>
+          </Row>
+        </Modal.Body>
+        <Modal.Footer>
+          <Row>
+            <Col xs={2}></Col>
+            <Col xs={3}>&nbsp;</Col>
+            <Col xs={3}>
+              <Button
+                variant='danger'
+                onClick={() => {
+                  deleteInfo()
+                }}
+              >
+                Elimina
+              </Button>
+            </Col>
+          </Row>
+        </Modal.Footer>
+      </Modal>
+    </div>
+  )
+}
diff --git a/src/Components/Operaciones/OpMonitor.tsx b/src/Components/Operaciones/OpMonitor.tsx
index 1ca8508..99ca95a 100644
--- a/src/Components/Operaciones/OpMonitor.tsx
+++ b/src/Components/Operaciones/OpMonitor.tsx
@@ -10,6 +10,7 @@ import { ViajesServicios } from './ViajesServicios/ViajesServicios'
 import { populateOpViajes, updateOpViajes } from '../../store/features/Operaciones/OpViajesSlice'
 import { Viaje } from './Viaje/Viaje'
 import '../../css/masterDetail.css'
+import '../../css/generalStyles.css'
 import {
   populateOpViajesServicios,
   updateOpViajesServicios,
@@ -317,7 +318,7 @@ export const OpMonitor: FC<IProps> = (props) => {
                             <tr>
                               <th colSpan={2} style={{ backgroundColor: '#F8F9FE' }}></th>
                               <th colSpan={14} style={{ backgroundColor: '#F8F9FE' }}>
-                                <ViajesServicios DataMaster={MasterData} key={MasterData.id} />
+                                <ViajesServicios IDMaster={MasterData.id} key={MasterData.id} />
                               </th>
                             </tr>
                           ) : (
@@ -337,8 +338,11 @@ export const OpMonitor: FC<IProps> = (props) => {
         onHide={() => {
           setShowTripDialog(false)
         }}
+        size={'lg'}
       >
-        <Modal.Header closeButton></Modal.Header>
+        <Modal.Header closeButton className='tripHeader'>
+          Informacion del viaje
+        </Modal.Header>
         <Modal.Body>
           <Viaje IDViaje={IDViaje} />
         </Modal.Body>
diff --git a/src/Components/Operaciones/OpViajes.tsx b/src/Components/Operaciones/OpViajes.tsx
deleted file mode 100644
index 25d997d..0000000
--- a/src/Components/Operaciones/OpViajes.tsx
+++ /dev/null
@@ -1,525 +0,0 @@
-import React, { FC, useEffect, useState } from 'react'
-import { Alert, Button, Card, Col, Form, Modal, Row } from 'react-bootstrap'
-import DataTable from 'react-data-table-component'
-import { IconContext } from 'react-icons'
-import { BsFillPencilFill, BsPatchPlusFill, BsPlusSquareFill } from 'react-icons/bs'
-import { useSelector } from 'react-redux'
-import { setOriginalNode } from 'typescript'
-import DTOOpViajes from '../../DTOs/Operaciones/DTOViajes'
-import DSOpViajes from '../../Services/Operaciones/OpViajes.Services'
-import { RootState } from '../../store/store'
-
-interface IProps {}
-
-export const OpViajes: FC<IProps> = (props) => {
-  const Info = JSON.parse(localStorage.getItem('tokenInfo') || '[]')
-  const UserID = Info.UserId
-  const CatClientes = useSelector((state: RootState) => state.CatClientes.CatClientes)
-  const CatProveedores = 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 [OpViajes, setOpViajes] = useState<DTOOpViajes[]>([])
-  const [showTripDialog, setShowTripDialog] = useState(false)
-  const [NoCaja, setNoCaja] = useState('')
-  const [IDViaje, setIDViaje] = useState(0)
-  const [IDCliente, setIDCliente] = useState(0)
-  const [IDProveedor, setIDProveedor] = useState(0)
-  const [IDServicio, setIDServicio] = useState(0)
-  const [IDTipoUnidad, setIDTipoUnidad] = useState(0)
-  const [IDOrigen, setIDOrigen] = useState(0)
-  const [IDDestino, setIDDestino] = useState(0)
-  const [RefAA, setRefAA] = useState('')
-  const [PickUpNumber, setPickUpNumber] = useState('')
-  const [Hazmat, setHazmat] = useState(0)
-  const [Search, setSearch] = useState('')
-  const dataConcepts = [
-    {
-      name: 'id',
-      width: '70px',
-      selector: (row: DTOOpViajes) => row.id,
-      sortable: true,
-    },
-    {
-      name: 'Cliente',
-      width: '250px',
-      selector: (row: DTOOpViajes) => row.sCliente,
-      sortable: true,
-    },
-    {
-      name: 'Servicio',
-      width: '150px',
-      selector: (row: DTOOpViajes) => row.sServicio,
-      sortable: true,
-    },
-    {
-      name: 'Proveedor',
-      width: '250px',
-      selector: (row: DTOOpViajes) => row.sProveedor,
-      sortable: true,
-    },
-    {
-      name: 'Origen',
-      width: '150px',
-      selector: (row: DTOOpViajes) => row.sOrigen,
-      sortable: true,
-    },
-    {
-      name: 'Destino',
-      width: '150px',
-      selector: (row: DTOOpViajes) => row.sDestino,
-      sortable: true,
-    },
-    {
-      name: 'Tipo Unidad',
-      width: '150px',
-      selector: (row: DTOOpViajes) => row.sTipoUnidad,
-      sortable: true,
-    },
-    {
-      name: 'NoCaja',
-      width: '150px',
-      selector: (row: DTOOpViajes) => row.noCaja,
-      sortable: true,
-    },
-    {
-      name: 'Hazmat',
-      width: '90px',
-      selector: (row: DTOOpViajes) => (row.hazmat === 1 ? 'Si' : 'No'),
-      sortable: true,
-    },
-    {
-      name: 'Ref A.A.',
-      width: '110px',
-      selector: (row: DTOOpViajes) => row.refAgenciaAduanal,
-      sortable: true,
-    },
-    {
-      name: 'PickUp No',
-      width: '110px',
-      selector: (row: DTOOpViajes) => row.pickUpNumber,
-      sortable: true,
-    },
-    {
-      name: 'Editar',
-      width: '80px',
-      cell: (row: DTOOpViajes) => (
-        <div
-          style={{ textAlign: 'center', cursor: 'pointer' }}
-          onClick={() => {
-            showInfo(row)
-          }}
-        >
-          <IconContext.Provider value={{ color: 'blue', size: '21px' }}>
-            <BsFillPencilFill />
-          </IconContext.Provider>
-        </div>
-      ),
-      sortable: true,
-    },
-  ]
-
-  const showInfo = (row: DTOOpViajes) => {
-    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)
-    setShowTripDialog(true)
-  }
-
-  const newTrip = () => {
-    setIDViaje(0)
-    setRefAA('')
-    setIDCliente(0)
-    setIDServicio(0)
-    setIDProveedor(0)
-    setIDTipoUnidad(0)
-    setNoCaja('')
-    setIDOrigen(0)
-    setIDDestino(0)
-    setHazmat(0)
-    setPickUpNumber('')
-    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()
-  }, [])
-
-  /*   useEffect(() => {
-    console.log(UserID)
-  }, [UserID]) */
-
-  const loadTrips = () => {
-    DSOpViajes.Get()
-      .then((response) => {
-        setOpViajes(response.data)
-      })
-      .catch((e: Error) => {})
-  }
-
-  return (
-    <div>
-      <Card>
-        <Card.Title style={{ textAlign: 'left' }}>
-          <Alert variant='primary'>
-            <Row>
-              <Col xs={2} style={{ textAlign: 'right' }}>
-                AOL : Monitor de viajes
-              </Col>
-              <Col xs={1} style={{ textAlign: 'left', cursor: 'pointer' }}>
-                <div
-                  onClick={() => {
-                    newTrip()
-                  }}
-                  title='De un click aqui para crear un nuevo viaje'
-                >
-                  <IconContext.Provider value={{ color: 'green', size: '28px' }}>
-                    <BsPlusSquareFill />
-                  </IconContext.Provider>
-                </div>
-              </Col>
-              <Col xs={9}></Col>
-            </Row>
-          </Alert>
-        </Card.Title>
-      </Card>
-      <Row>
-        <Col xs={12}>&nbsp;</Col>
-      </Row>
-      <Row>
-        <Col xs={12}>
-          <Form.Control
-            type='text'
-            size='sm'
-            placeholder='Search...'
-            onChange={(e) => {
-              setSearch(e.target.value)
-            }}
-          />
-        </Col>
-      </Row>
-      <Card>
-        <Card.Body>
-          <DataTable
-            noHeader
-            defaultSortFieldId={'id'}
-            defaultSortAsc={true}
-            striped={true}
-            dense={true}
-            paginationPerPage={10}
-            pagination
-            highlightOnHover
-            columns={dataConcepts}
-            data={OpViajes.filter(function (row: DTOOpViajes) {
-              return (
-                row.sCliente.toLowerCase().includes(Search.toLowerCase()) ||
-                row.sProveedor.toLowerCase().includes(Search.toLowerCase()) ||
-                row.sOrigen.toLowerCase().includes(Search.toLowerCase()) ||
-                row.sDestino.toLowerCase().includes(Search.toLowerCase()) ||
-                row.sServicio.toLowerCase().includes(Search.toLowerCase()) ||
-                row.sTipoUnidad.toLowerCase().includes(Search.toLowerCase()) ||
-                row.noCaja.toLowerCase().includes(Search.toLowerCase()) ||
-                row.refAgenciaAduanal.toLowerCase().includes(Search.toLowerCase()) ||
-                row.pickUpNumber.toLowerCase().includes(Search.toLowerCase())
-              )
-            })}
-          />
-        </Card.Body>
-      </Card>
-      <Modal
-        show={showTripDialog}
-        onHide={() => {
-          setShowTripDialog(false)
-        }}
-      >
-        <Modal.Header closeButton></Modal.Header>
-        <Modal.Body>
-          <Row>
-            <Col xs={12} style={{ textAlign: 'center', fontSize: '23px', fontWeight: 'bold', fontFamily: 'Arial' }}>
-              <Alert variant='primary'>Informacion del viaje</Alert>
-            </Col>
-          </Row>
-          <Row>
-            <Col xs={3} className='dialogLabel'>
-              No viaje
-            </Col>
-            <Col xs={2}>
-              <Form.Control type='text' id='IDCliente' value={IDCliente} disabled size='sm' />
-            </Col>
-            <Col className='dialogLabel' xs={2}>
-              Ref AA
-            </Col>
-            <Col>
-              <Form.Control
-                type='text'
-                id='RefAA'
-                value={RefAA}
-                size='sm'
-                onChange={(e) => {
-                  setRefAA(e.target.value)
-                }}
-              />
-            </Col>
-          </Row>
-          <Row style={{ paddingTop: '10px' }}>
-            <Col xs={3} className='dialogLabel'>
-              Cliente
-            </Col>
-            <Col xs={9}>
-              <Form.Control
-                as='select'
-                onChange={(e) => {
-                  setIDCliente(parseInt(e.target.value))
-                }}
-                value={IDCliente}
-                className='form-select form-select-sm'
-              >
-                <option value='0'>-SELECCIONE-</option>
-                {CatClientes
-                  ? CatClientes.map((c) => {
-                      return (
-                        <option key={c.id} value={c.id}>
-                          {c.cliente}
-                        </option>
-                      )
-                    })
-                  : null}
-              </Form.Control>
-            </Col>
-          </Row>
-          <Row style={{ paddingTop: '10px' }}>
-            <Col xs={3} className='dialogLabel'>
-              Servicio
-            </Col>
-            <Col xs={9}>
-              <Form.Control
-                as='select'
-                onChange={(e) => {
-                  setIDServicio(parseInt(e.target.value))
-                }}
-                value={IDServicio}
-                className='form-select form-select-sm'
-              >
-                <option value='0'>-SELECCIONE-</option>
-                {CatServicios
-                  ? CatServicios.map((c) => {
-                      return (
-                        <option key={c.id} value={c.id}>
-                          {c.servicio}
-                        </option>
-                      )
-                    })
-                  : null}
-              </Form.Control>
-            </Col>
-          </Row>
-          <Row style={{ paddingTop: '10px' }}>
-            <Col xs={3} className='dialogLabel'>
-              Tipo Unidad
-            </Col>
-            <Col xs={4}>
-              <Form.Control
-                as='select'
-                onChange={(e) => {
-                  setIDTipoUnidad(parseInt(e.target.value))
-                }}
-                value={IDTipoUnidad}
-                className='form-select form-select-sm'
-              >
-                <option value='0'>-SELECCIONE-</option>
-                {CatTipoUnidades
-                  ? CatTipoUnidades.map((c) => {
-                      return (
-                        <option key={c.id} value={c.id}>
-                          {c.tipoUnidad}
-                        </option>
-                      )
-                    })
-                  : null}
-              </Form.Control>
-            </Col>
-            <Col xs={1}>Caja</Col>
-            <Col xs={4}>
-              <Form.Control
-                type='text'
-                id='NoCaja'
-                value={NoCaja}
-                size='sm'
-                onChange={(e) => {
-                  setNoCaja(e.target.value)
-                }}
-              />
-            </Col>
-          </Row>
-          <Row style={{ paddingTop: '10px' }}>
-            <Col xs={3} className='dialogLabel'>
-              Proveedor
-            </Col>
-            <Col xs={9}>
-              <Form.Control
-                as='select'
-                onChange={(e) => {
-                  setIDProveedor(parseInt(e.target.value))
-                }}
-                value={IDProveedor}
-                className='form-select form-select-sm'
-              >
-                <option value='0'>-SELECCIONE-</option>
-                {CatProveedores
-                  ? CatProveedores.map((c) => {
-                      return (
-                        <option key={c.id} value={c.id}>
-                          {c.proveedor}
-                        </option>
-                      )
-                    })
-                  : null}
-              </Form.Control>
-            </Col>
-          </Row>
-          <Row style={{ paddingTop: '10px' }}>
-            <Col xs={3} className='dialogLabel'>
-              Origen
-            </Col>
-            <Col xs={9}>
-              <Form.Control
-                as='select'
-                onChange={(e) => {
-                  setIDOrigen(parseInt(e.target.value))
-                }}
-                value={IDOrigen}
-                className='form-select form-select-sm'
-              >
-                <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>
-            </Col>
-          </Row>
-          <Row style={{ paddingTop: '10px' }}>
-            <Col xs={3} className='dialogLabel'>
-              Destino
-            </Col>
-            <Col xs={9}>
-              <Form.Control
-                as='select'
-                onChange={(e) => {
-                  setIDDestino(parseInt(e.target.value))
-                }}
-                value={IDDestino}
-                className='form-select form-select-sm'
-              >
-                <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>
-            </Col>
-          </Row>
-          <Row style={{ paddingTop: '10px' }}>
-            <Col className='dialogLabel' xs={3}>
-              HAZMAT
-            </Col>
-            <Col sx={3}>
-              <Form.Control
-                as='select'
-                onChange={(e) => {
-                  setHazmat(parseInt(e.target.value))
-                }}
-                value={Hazmat}
-                className='form-select form-select-sm'
-              >
-                <option value='0'>No</option>
-                <option value='1'>Si</option>
-              </Form.Control>
-            </Col>
-            <Col className='dialogLabel'>Pickup no</Col>
-            <Col xs={4}>
-              <Form.Control
-                type='text'
-                id='PickUpNumber'
-                value={PickUpNumber}
-                size='sm'
-                onChange={(e) => {
-                  setPickUpNumber(e.target.value)
-                }}
-              />
-            </Col>
-          </Row>
-        </Modal.Body>
-        <Modal.Footer>
-          <Row>
-            <Col xs={2}></Col>
-            <Col xs={3}>&nbsp;</Col>
-            <Col xs={3}>
-              <Button
-                variant='primary'
-                onClick={() => {
-                  saveInfo()
-                }}
-              >
-                Guarda
-              </Button>
-            </Col>
-          </Row>
-        </Modal.Footer>
-      </Modal>
-    </div>
-  )
-}
diff --git a/src/Components/Operaciones/Viaje/Viaje.tsx b/src/Components/Operaciones/Viaje/Viaje.tsx
index 9d31978..14df006 100644
--- a/src/Components/Operaciones/Viaje/Viaje.tsx
+++ b/src/Components/Operaciones/Viaje/Viaje.tsx
@@ -1,5 +1,5 @@
 import React, { FC, useEffect, useState } from 'react'
-import { Alert, Button, Col, Form, Modal, Row } from 'react-bootstrap'
+import { Alert, Button, Card, Col, Form, Modal, Row } from 'react-bootstrap'
 import { useDispatch, useSelector } from 'react-redux'
 import DTOOpViajes from '../../../DTOs/Operaciones/DTOViajes'
 import DSOpViajes from '../../../Services/Operaciones/OpViajes.Services'
@@ -7,6 +7,7 @@ import { updateOpViajes } from '../../../store/features/Operaciones/OpViajesSlic
 import { RootState } from '../../../store/store'
 import { populateOpViajesServicios } from '../../../store/features/Operaciones/OpViajesServiciosSlice'
 import DTOViajesServicios from '../../../DTOs/Operaciones/DTOViajesServicios'
+import { ViajesServicios } from '../ViajesServicios/ViajesServicios'
 
 interface IProps {
   IDViaje: number
@@ -37,6 +38,11 @@ export const Viaje: FC<IProps> = (props) => {
   const [RefAA, setRefAA] = useState('')
   const [PickUpNumber, setPickUpNumber] = useState('')
   const [Hazmat, setHazmat] = useState(0)
+  const [Pedimento, setPedimento] = useState('')
+  const [TipoOperacion, setTipoOperacion] = useState(1)
+  const [Comentarios, setComentarios] = useState('')
+  const [Aduana, setAduana] = useState(0)
+  const [DisableAduana, setDisableAduana] = useState(true)
 
   useEffect(() => {
     let selectedRow = mAllTrips.filter((row) => {
@@ -59,12 +65,21 @@ export const Viaje: FC<IProps> = (props) => {
     // console.log(JSON.stringify(selectedRow) + ' ' + props.IDViaje)
   }, [props.IDViaje])
 
+  useEffect(() => {
+    if (IDNuevoServicio === 1 || IDNuevoServicio === 2 || IDNuevoServicio === 22) setDisableAduana(false)
+    else setDisableAduana(true)
+  }, [IDNuevoServicio])
+
   const addService = () => {
     const data: DTOViajesServicios = {
       id: 0,
+      idViaje: props.IDViaje,
       idServicio: IDNuevoServicio,
       sServicio: '',
-      idViaje: props.IDViaje,
+      aduana: Aduana,
+      comentarios: Comentarios,
+      idProveedor: IDProveedor,
+      sProveedor: '',
     }
     DSOpViajes.AppendServices(data)
       .then((responsed) => {
@@ -108,286 +123,318 @@ export const Viaje: FC<IProps> = (props) => {
   }
 
   return (
-    <div>
-      <Row>
-        <Col xs={12} style={{ textAlign: 'center', fontSize: '23px', fontWeight: 'bold', fontFamily: 'Arial' }}>
-          <Alert variant='primary'>Informacion del viaje</Alert>
-        </Col>
-      </Row>
-      <Row>
-        <Col xs={3} className='dialogLabel'>
-          No viaje
-        </Col>
-        <Col xs={2}>
-          <Form.Control type='text' id='IDCliente' value={IDCliente} disabled size='sm' />
-        </Col>
-        <Col className='dialogLabel' xs={2}>
-          Ref AA
-        </Col>
-        <Col>
-          <Form.Control
-            type='text'
-            id='RefAA'
-            value={RefAA}
-            size='sm'
-            onChange={(e) => {
-              setRefAA(e.target.value)
-            }}
-          />
-        </Col>
-      </Row>
-      <Row style={{ paddingTop: '10px' }}>
-        <Col xs={3} className='dialogLabel'>
-          Cliente
-        </Col>
-        <Col xs={9}>
-          <Form.Control
-            as='select'
-            onChange={(e) => {
-              setIDCliente(parseInt(e.target.value))
-            }}
-            value={IDCliente}
-            className='form-select form-select-sm'
-          >
-            <option value='0'>-SELECCIONE-</option>
-            {CatClientes
-              ? CatClientes.map((c) => {
-                  return (
-                    <option key={c.id} value={c.id}>
-                      {c.cliente}
-                    </option>
-                  )
-                })
-              : null}
-          </Form.Control>
-        </Col>
-      </Row>
-      <Row style={{ paddingTop: '10px' }}>
-        <Col xs={3} className='dialogLabel'>
-          Servicio
-        </Col>
-        <Col xs={9}>
-          <Form.Control
-            as='select'
-            onChange={(e) => {
-              setIDServicio(parseInt(e.target.value))
-            }}
-            value={IDServicio}
-            className='form-select form-select-sm'
-          >
-            <option value='0'>-SELECCIONE-</option>
-            {CatServicios
-              ? CatServicios.map((c) => {
-                  return (
-                    <option key={c.id} value={c.id}>
-                      {c.servicio}
-                    </option>
-                  )
-                })
-              : null}
-          </Form.Control>
-        </Col>
-      </Row>
-      <Row style={{ paddingTop: '10px' }}>
-        <Col xs={3} className='dialogLabel'>
-          Tipo Unidad
-        </Col>
-        <Col xs={4}>
-          <Form.Control
-            as='select'
-            onChange={(e) => {
-              setIDTipoUnidad(parseInt(e.target.value))
-            }}
-            value={IDTipoUnidad}
-            className='form-select form-select-sm'
-          >
-            <option value='0'>-SELECCIONE-</option>
-            {CatTipoUnidades
-              ? CatTipoUnidades.map((c) => {
-                  return (
-                    <option key={c.id} value={c.id}>
-                      {c.tipoUnidad}
-                    </option>
-                  )
-                })
-              : null}
-          </Form.Control>
-        </Col>
-        <Col xs={1}>Caja</Col>
-        <Col xs={4}>
-          <Form.Control
-            type='text'
-            id='NoCaja'
-            value={NoCaja}
-            size='sm'
-            onChange={(e) => {
-              setNoCaja(e.target.value)
-            }}
-          />
-        </Col>
-      </Row>
-      <Row style={{ paddingTop: '10px' }}>
-        <Col xs={3} className='dialogLabel'>
-          Proveedor
-        </Col>
-        <Col xs={9}>
-          <Form.Control
-            as='select'
-            onChange={(e) => {
-              setIDProveedor(parseInt(e.target.value))
-            }}
-            value={IDProveedor}
-            className='form-select form-select-sm'
-          >
-            <option value='0'>-SELECCIONE-</option>
-            {CatProveedores
-              ? CatProveedores.map((c) => {
-                  return (
-                    <option key={c.id} value={c.id}>
-                      {c.proveedor}
-                    </option>
-                  )
-                })
-              : null}
-          </Form.Control>
-        </Col>
-      </Row>
-      <Row style={{ paddingTop: '10px' }}>
-        <Col xs={3} className='dialogLabel'>
-          Origen
-        </Col>
-        <Col xs={9}>
-          <Form.Control
-            as='select'
-            onChange={(e) => {
-              setIDOrigen(parseInt(e.target.value))
-            }}
-            value={IDOrigen}
-            className='form-select form-select-sm'
-          >
-            <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>
-        </Col>
-      </Row>
-      <Row style={{ paddingTop: '10px' }}>
-        <Col xs={3} className='dialogLabel'>
-          Destino
-        </Col>
-        <Col xs={9}>
-          <Form.Control
-            as='select'
-            onChange={(e) => {
-              setIDDestino(parseInt(e.target.value))
-            }}
-            value={IDDestino}
-            className='form-select form-select-sm'
-          >
-            <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>
-        </Col>
-      </Row>
-      <Row style={{ paddingTop: '10px' }}>
-        <Col className='dialogLabel' xs={3}>
-          HAZMAT
-        </Col>
-        <Col sx={3}>
-          <Form.Control
-            as='select'
-            onChange={(e) => {
-              setHazmat(parseInt(e.target.value))
-            }}
-            value={Hazmat}
-            className='form-select form-select-sm'
-          >
-            <option value='0'>No</option>
-            <option value='1'>Si</option>
-          </Form.Control>
-        </Col>
-        <Col className='dialogLabel'>Pickup no</Col>
+    <div className='tripField'>
+      <Card style={{ backgroundColor: '#F0F7FC' }}>
+        <Card.Body>
+          <Row>
+            <Col xs={2}>No viaje</Col>
+            <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={3}>
+              <Form.Control
+                type='text'
+                id='RefAA'
+                value={RefAA}
+                size='sm'
+                className='dialogLabel'
+                onChange={(e) => {
+                  setRefAA(e.target.value)
+                }}
+              />
+            </Col>
+            <Col xs={3} style={{ textAlign: 'right' }}>
+              <Button
+                variant='primary'
+                onClick={() => {
+                  saveInfo()
+                }}
+              >
+                Guarda viaje
+              </Button>
+            </Col>
+          </Row>
+          <Row style={{ paddingTop: '5px' }}>
+            <Col xs={2}>Cliente</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>
+                {CatClientes
+                  ? CatClientes.map((c) => {
+                      return (
+                        <option key={c.id} value={c.id}>
+                          {c.cliente}
+                        </option>
+                      )
+                    })
+                  : null}
+              </Form.Control>
+            </Col>
+          </Row>
+          <Row style={{ paddingTop: '5px' }}>
+            <Col xs={2}>Tipo Unidad</Col>
+            <Col xs={3}>
+              <Form.Control
+                as='select'
+                onChange={(e) => {
+                  setIDTipoUnidad(parseInt(e.target.value))
+                }}
+                value={IDTipoUnidad}
+                className='form-select form-select-sm dialogLabel'
+              >
+                <option value='0'>-SELECCIONE-</option>
+                {CatTipoUnidades
+                  ? CatTipoUnidades.map((c) => {
+                      return (
+                        <option key={c.id} value={c.id}>
+                          {c.tipoUnidad}
+                        </option>
+                      )
+                    })
+                  : null}
+              </Form.Control>
+            </Col>
+            <Col xs={1}>Caja</Col>
+            <Col xs={3}>
+              <Form.Control
+                type='text'
+                id='NoCaja'
+                value={NoCaja}
+                size='sm'
+                className='dialogLabel'
+                onChange={(e) => {
+                  setNoCaja(e.target.value)
+                }}
+              />
+            </Col>
+          </Row>
+          <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>
+            </Col>
+            <Col xs={2}>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>
+            </Col>
+          </Row>
+          <Row style={{ paddingTop: '5px' }}>
+            <Col xs={2}>HAZMAT</Col>
+            <Col sx={1}>
+              <Form.Control
+                as='select'
+                onChange={(e) => {
+                  setHazmat(parseInt(e.target.value))
+                }}
+                value={Hazmat}
+                className='form-select form-select-sm dialogLabel'
+              >
+                <option value='0'>No</option>
+                <option value='1'>Si</option>
+              </Form.Control>
+            </Col>
+            <Col xs={2}>T. operacion</Col>
+            <Col xs={3}>
+              <Form.Control
+                as='select'
+                onChange={(e) => {
+                  setTipoOperacion(parseInt(e.target.value))
+                }}
+                value={TipoOperacion}
+                className='form-select form-select-sm dialogLabel'
+              >
+                <option value='1'>Importacion</option>
+                <option value='2'>Exportacion</option>
+                <option value='3'>Solo americano</option>
+                <option value='4'>Solo mexicano</option>
+              </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: '10px' }}>
-        <Col xs={2}>
-          <Button
-            variant='warning'
-            onClick={() => {
-              addService()
-            }}
-          >
-            Agrega
-          </Button>
-        </Col>
-        <Col xs={1}></Col>
-        <Col xs={9}>
-          <Form.Control
-            as='select'
-            onChange={(e) => {
-              setIDNuevoServicio(parseInt(e.target.value))
-            }}
-            value={IDNuevoServicio}
-            className='form-select form-select-sm'
-          >
-            <option value='0'>SELECCIONE EL SERVICIO QUE DESEE AGREGAR</option>
-            {CatServicios
-              ? CatServicios.map((c) => {
-                  return (
-                    <option key={c.id} value={c.id}>
-                      {c.servicio}
-                    </option>
-                  )
-                })
-              : null}
-          </Form.Control>
-        </Col>
+        </Col> */}
+          </Row>
+          <Row style={{ paddingTop: '5px' }}>
+            <Col xs={2}>Pedimento</Col>
+            <Col xs={3}>
+              <Form.Control
+                type='text'
+                id='Pedimento'
+                value={Pedimento}
+                size='sm'
+                className='dialogLabel'
+                onChange={(e) => {
+                  setPedimento(e.target.value)
+                }}
+              />
+            </Col>
+            <Col style={{ textAlign: 'right' }}></Col>
+          </Row>
+        </Card.Body>
+      </Card>
+      <Row style={{ paddingTop: '5px' }}>
+        <Col xs={12}></Col>
       </Row>
-      <Modal.Footer>
-        <Row>
-          <Col xs={2}></Col>
-          <Col xs={3}>&nbsp;</Col>
-          <Col xs={3}>
-            <Button
-              variant='primary'
-              onClick={() => {
-                saveInfo()
-              }}
-            >
-              Guarda
-            </Button>
-          </Col>
-        </Row>
-      </Modal.Footer>
+      <Card style={{ backgroundColor: '#DDEFEF' }}>
+        <Card.Body>
+          <Row style={{ paddingTop: '5px' }}>
+            <Col xs={3}>Servicio</Col>
+            <Col xs={5}>
+              <Form.Control
+                as='select'
+                onChange={(e) => {
+                  setIDNuevoServicio(parseInt(e.target.value))
+                }}
+                value={IDNuevoServicio}
+                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>
+            </Col>
+            <Col xs={4}>
+              <Form.Control
+                as='select'
+                onChange={(e) => {
+                  setAduana(parseInt(e.target.value))
+                }}
+                value={Aduana}
+                disabled={DisableAduana}
+                className='form-select form-select-sm dialogLabel'
+              >
+                <option value='0'>-Aduana-</option>
+                <option value='240'>Nuevo Laredo, Tamps</option>
+                <option value='180'>Colombia</option>
+              </Form.Control>
+            </Col>
+          </Row>
+          <Row style={{ paddingTop: '5px' }}>
+            <Col xs={3}>Comentarios</Col>
+            <Col xs={9}>
+              <Form.Control
+                as='textarea'
+                rows={2}
+                value={Comentarios}
+                onChange={(e) => {
+                  setComentarios(e.target.value)
+                }}
+              />
+            </Col>
+          </Row>
+          <Row style={{ paddingTop: '5px' }}>
+            <Col xs={3}>Proveedor</Col>
+            <Col xs={9}>
+              <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>
+            </Col>
+          </Row>
+          <Row style={{ paddingTop: '5px' }}>
+            <Col xs={7}></Col>
+            <Col xs={5} style={{ textAlign: 'right' }}>
+              <Button
+                variant='success'
+                onClick={() => {
+                  addService()
+                }}
+              >
+                Guardar servicio
+              </Button>
+            </Col>
+          </Row>
+        </Card.Body>
+        <Card>
+          <Card.Body>
+            <div className='MDContainer'>
+              <ViajesServicios IDMaster={IDViaje} key={IDViaje} />
+            </div>
+          </Card.Body>
+        </Card>
+      </Card>
+      {/* <Modal.Footer>
+      </Modal.Footer> */}
     </div>
   )
 }
diff --git a/src/Components/Operaciones/ViajesServicios/ViajesServicios.tsx b/src/Components/Operaciones/ViajesServicios/ViajesServicios.tsx
index 33249dd..a26f9b2 100644
--- a/src/Components/Operaciones/ViajesServicios/ViajesServicios.tsx
+++ b/src/Components/Operaciones/ViajesServicios/ViajesServicios.tsx
@@ -10,7 +10,7 @@ import DSOpViajes from '../../../Services/Operaciones/OpViajes.Services'
 import { deleteOpViajesServicios } from '../../../store/features/Operaciones/OpViajesServiciosSlice'
 
 interface IProps {
-  DataMaster: DTOOpViajes
+  IDMaster: number
 }
 
 export const ViajesServicios: FC<IProps> = (props) => {
@@ -32,14 +32,17 @@ export const ViajesServicios: FC<IProps> = (props) => {
         <thead>
           <tr>
             <th style={{ width: '50px', textAlign: 'center' }}>id</th>
-            <th style={{ width: '300px', textAlign: 'left' }}>Servicio</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.DataMaster.id
+                return service.idViaje === props.IDMaster
               }).map(function (service) {
                 return (
                   <tr
@@ -51,6 +54,9 @@ export const ViajesServicios: FC<IProps> = (props) => {
                   >
                     <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'
diff --git a/src/DTOs/Operaciones/DTOViajesServicios.ts b/src/DTOs/Operaciones/DTOViajesServicios.ts
index f9e7016..21d0330 100644
--- a/src/DTOs/Operaciones/DTOViajesServicios.ts
+++ b/src/DTOs/Operaciones/DTOViajesServicios.ts
@@ -2,5 +2,9 @@ export default interface DTOViajesServicios {
     id: number,
     idViaje: number,
     idServicio: number,
-    sServicio: string
+    sServicio: string,
+    aduana: number,
+    comentarios: string,
+    idProveedor: number,
+    sProveedor: string
 }
\ No newline at end of file
diff --git a/src/Interfaces/Catalogos/ICatServicios.ts b/src/Interfaces/Catalogos/ICatServicios.ts
index 88c1cd1..aa45cfe 100644
--- a/src/Interfaces/Catalogos/ICatServicios.ts
+++ b/src/Interfaces/Catalogos/ICatServicios.ts
@@ -1,5 +1,5 @@
 export default interface ICatServicios {
     id: number,
     servicio: string,
-    precio: number
+    activo: number
 }
\ No newline at end of file
diff --git a/src/css/generalStyles.css b/src/css/generalStyles.css
new file mode 100644
index 0000000..a46d107
--- /dev/null
+++ b/src/css/generalStyles.css
@@ -0,0 +1,14 @@
+.tripHeader {
+    font-size: large;
+    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
+}
+
+.tripField {
+    font-size:15px;
+    font-weight: normal;
+    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif
+}
+
+.rowSplit {
+    padding-top: '5px'
+}
\ No newline at end of file