first commit

src/App.tsx

@@ -1,5 +1,5 @@
 import 'bootstrap/dist/css/bootstrap.min.css'
-import { BrowserRouter, Route, Routes } from 'react-router-dom'
+import { BrowserRouter, HashRouter, Route, Routes } from 'react-router-dom'
 import './App.css'
 import { Login } from './Components/Login/Login'
 import { Home } from './Components/Home/Home'
@@ -17,9 +17,12 @@ import { CatRutas } from './Components/Catalogos/CatRutas'
 import { OpMonitor } from './Components/Operaciones/OpMonitor'
 import { CatServicios } from './Components/Catalogos/CatServicios'
 import { CatUsuarios } from './Components/Catalogos/CatUsuarios'
+import { ResetAccount } from './Components/ResetAccount/ResetAccount'
 
 function App() {
-  const UserLogued = useSelector((state: RootState) => state.UserProfile.UserProfile.logueado)
+  const UserLogued = useSelector(
+    (state: RootState) => state.UserProfile.UserProfile.logueado
+  )
 
   /*   useEffect(() => {
     console.log('Entro al proceso de router ' + UserLogued)
@@ -35,26 +38,27 @@ function App() {
 
   return (
     <div className='App'>
-      <BrowserRouter>
+      <HashRouter>
         <Navbar />
         <Routes>
           {/*   <Route path='/' element={<Home />}></Route>
           <Route path='login' element={<Login />}></Route> */}
           <Route path='/' element={<Login />}></Route>
-          <Route path='logout' element={<Logout />}></Route>
+          <Route path='/logout' element={<Logout />}></Route>
+          <Route path='/reset' element={<ResetAccount />}></Route>
           <Route element={<ProtectedRoute />}>
-            <Route path='OpMonitor' element={<OpMonitor />} />
+            <Route path='/OpMonitor' element={<OpMonitor />} />
-            <Route path='CatClientes' element={<CatClientes />} />
+            <Route path='/CatClientes' element={<CatClientes />} />
-            <Route path='CatServicios' element={<CatServicios />} />
+            <Route path='/CatServicios' element={<CatServicios />} />
-            <Route path='CatProveedores' element={<CatProveedores />} />
+            <Route path='/CatProveedores' element={<CatProveedores />} />
-            <Route path='CatTipoUnidades' element={<CatTipoUnidades />} />
+            <Route path='/CatTipoUnidades' element={<CatTipoUnidades />} />
-            <Route path='CatUbicaciones' element={<CatUbicaciones />} />
+            <Route path='/CatUbicaciones' element={<CatUbicaciones />} />
-            <Route path='CatRutas' element={<CatRutas />} />
+            <Route path='/CatRutas' element={<CatRutas />} />
-            <Route path='CatUsuarios' element={<CatUsuarios />} />
+            <Route path='/CatUsuarios' element={<CatUsuarios />} />
           </Route>
           <Route path='*' element={<PageNotFound />} />
         </Routes>
-      </BrowserRouter>
+      </HashRouter>
     </div>
   )
 }

src/Components/Catalogos/CatUsuarios.tsx

@@ -1,16 +1,122 @@
-import React, { FC, useState } from 'react'
+import React, { FC, useEffect, useState } from 'react'
-import { Card, Col, FloatingLabel, Form, Row } from 'react-bootstrap'
+import { Button, Card, Col, FloatingLabel, Form, Modal, Row } from 'react-bootstrap'
 import { useSelector } from 'react-redux'
 import { RootState } from '../../store/store'
+import DSCatUsuarios from '../../Services/Catalogos/CatUsuarios.Services'
+import ICatUsuarios from '../../Interfaces/Catalogos/ICatUsuarios'
+import DataTable from 'react-data-table-component'
+import { IconContext } from 'react-icons'
+import { BsFillPencilFill } from 'react-icons/bs'
+import Clean from '../../images/Clean.png'
+import loadingImg from '../../images/ajaxloader.gif'
 
 interface IProps {}
 
 export const CatUsuarios: FC<IProps> = (props) => {
   const mCatClientes = useSelector((state: RootState) => state.CatClientes.CatClientes)
   const mCatProveedores = useSelector((state: RootState) => state.CatProveedores.CatProveedores)
+  const [DataUsuarios, setDataUsuarios] = useState<ICatUsuarios[]>([])
+  const [IDUsuario, setIDUsuario] = useState(0)
   const [Usuario, setUsuario] = useState('')
+  const [Nombre, setNombre] = useState('')
   const [TipoUsuario, setTipoUsuario] = useState(0)
   const [Search, setSearch] = useState('')
+  const [SearchUser, setSearchUser] = useState('')
+  const [showDialog, setShowDialog] = useState(false)
+  const columnsConcepts = [
+    {
+      name: 'id',
+      width: '80px',
+      selector: (row: ICatUsuarios) => row.id,
+      sortable: true,
+    },
+    {
+      name: 'Nombre',
+      width: '250px',
+      selector: (row: ICatUsuarios) => row.nombre,
+      sortable: true,
+    },
+    {
+      name: 'Usuario',
+      width: '250px',
+      selector: (row: ICatUsuarios) => row.usuario,
+      sortable: true,
+    },
+    {
+      name: 'Activo',
+      width: '90px',
+      selector: (row: ICatUsuarios) => (row.activo === 1 ? 'Si' : 'No'),
+      sortable: true,
+    },
+    {
+      name: 'Editar',
+      width: '100px',
+      cell: (row: ICatUsuarios) => (
+        <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: ICatUsuarios) => {
+    setUsuario(row.usuario)
+    setNombre(row.nombre)
+    setTipoUsuario(row.tipoUsuario)
+    setIDUsuario(row.id)
+  }
+
+  const saveForm = () => {
+    setShowDialog(true)
+    const data: ICatUsuarios = {
+      id: IDUsuario,
+      usuario: Usuario,
+      contrasena: '',
+      nombre: Nombre,
+      tipoUsuario: TipoUsuario,
+      idPerfil: 0,
+      activo: 1,
+    }
+    DSCatUsuarios.Append(data)
+      .then((response) => {
+        cleanForm()
+        loadUsers()
+        setShowDialog(false)
+      })
+      .catch((e: Error) => {
+        alert('Ocurrio un error' + e.message.toString())
+      })
+  }
+
+  const loadUsers = () => {
+    DSCatUsuarios.GetAll()
+      .then((response) => {
+        console.log(response.data)
+        setDataUsuarios(response.data)
+      })
+      .catch((e: Error) => {
+        alert('Ocurrio un error' + e.message.toString())
+      })
+  }
+
+  const cleanForm = () => {
+    setUsuario('')
+    setNombre('')
+    setTipoUsuario(0)
+    setIDUsuario(0)
+  }
+
+  useEffect(() => {
+    loadUsers()
+  }, [])
 
   return (
     <div>
@@ -22,12 +128,19 @@ export const CatUsuarios: FC<IProps> = (props) => {
               <Card style={{ backgroundColor: 'rgba(245, 245, 245, 0.4)' }}>
                 <Card.Body>
                   <Row>
-                    <Col xs={8}>
+                    <Col xs={7}>
                       <FloatingLabel controlId='TxtNombre' label='Nombre' className='mb-3'>
-                        <Form.Control type='text' placeholder='Nombre' value={Usuario} />
+                        <Form.Control
+                          type='text'
+                          placeholder='Nombre'
+                          value={Nombre}
+                          onChange={(e) => {
+                            setNombre(e.target.value)
+                          }}
+                        />
                       </FloatingLabel>
                     </Col>
-                    <Col xs={4}>
+                    <Col xs={5}>
                       <FloatingLabel controlId='CmbTipoUsuario' label='Tipo de usuario'>
                         <Form.Select
                           aria-label='Tipo usuario'
@@ -37,24 +150,47 @@ export const CatUsuarios: FC<IProps> = (props) => {
                           }}
                         >
                           <option value='0'></option>
-                          <option value='1'>Usuario interno</option>
+                          <option value='1'>Cliente</option>
-                          <option value='2'>Cliente</option>
+                          <option value='2'>Proveedor</option>
-                          <option value='3'>Proveedor</option>
+                          <option value='3'>Usuario interno - Administrador</option>
+                          <option value='4'>Usuario interno - Operaciones</option>
                         </Form.Select>
                       </FloatingLabel>
                     </Col>
                   </Row>
                   <Row>
-                    <Col xs={6}>
+                    <Col style={{ paddingTop: '15px' }}>
-                      <FloatingLabel controlId='floatingInput' label='Nombre de usuario' className='mb-3'>
+                      <img
-                        <Form.Control type='text' placeholder='name@empresa.com' />
+                        src={Clean}
-                      </FloatingLabel>
+                        alt='Limpia formulario'
+                        height='30'
+                        style={{ cursor: 'pointer' }}
+                        onClick={() => {
+                          cleanForm()
+                        }}
+                      />
                     </Col>
-                    <Col xs={6}>
+                    <Col xs={9}>
-                      <FloatingLabel controlId='floatingPassword' label='Contraseña'>
+                      <FloatingLabel controlId='floatingInput' label='Usuario (correo@empresa.com)' className='mb-3'>
-                        <Form.Control type='password' placeholder='Password' />
+                        <Form.Control
+                          type='text'
+                          placeholder='name@empresa.com'
+                          value={Usuario}
+                          onChange={(e) => {
+                            setUsuario(e.target.value)
+                          }}
+                        />
                       </FloatingLabel>
                     </Col>
+                    <Col xs={2} style={{ paddingTop: '10px' }}>
+                      <Button
+                        onClick={() => {
+                          saveForm()
+                        }}
+                      >
+                        Guardar
+                      </Button>
+                    </Col>
                   </Row>
                 </Card.Body>
               </Card>
@@ -78,7 +214,7 @@ export const CatUsuarios: FC<IProps> = (props) => {
                   <Row style={{ paddingTop: '5px' }}>
                     <Col xs={12}>
                       <div className='divTipoCatalogo'>
-                        {TipoUsuario === 2
+                        {TipoUsuario === 1
                           ? mCatClientes
                               .filter((c) => c.cliente.toLocaleLowerCase().includes(Search.toLocaleLowerCase()))
                               .map((c) => {
@@ -92,7 +228,7 @@ export const CatUsuarios: FC<IProps> = (props) => {
                                 )
                               })
                           : null}
-                        {TipoUsuario === 3
+                        {TipoUsuario === 2
                           ? mCatProveedores
                               .filter((c) => c.proveedor.toLocaleLowerCase().includes(Search.toLocaleLowerCase()))
                               .map((c) => {
@@ -113,8 +249,60 @@ export const CatUsuarios: FC<IProps> = (props) => {
               </Card>
             </Col>
           </Row>
+          <Row style={{ paddingTop: '5px' }}>
+            <Col xs={12}>
+              <Form.Control
+                type='text'
+                size='sm'
+                placeholder='Search...'
+                onChange={(e: any) => {
+                  setSearchUser(e.target.value)
+                }}
+              />
+            </Col>
+          </Row>
+          <Row style={{ paddingTop: '5px' }}>
+            <Col xs={12}>
+              <Card>
+                <DataTable
+                  noHeader
+                  defaultSortFieldId={'id'}
+                  defaultSortAsc={true}
+                  striped={true}
+                  dense={true}
+                  paginationPerPage={10}
+                  pagination
+                  highlightOnHover
+                  columns={columnsConcepts}
+                  data={DataUsuarios.filter(function (row: ICatUsuarios) {
+                    return (
+                      row.usuario.toLocaleLowerCase().includes(SearchUser.toLocaleLowerCase()) ||
+                      row.nombre.toLocaleLowerCase().includes(SearchUser.toLocaleLowerCase())
+                    )
+                  })}
+                  pointerOnHover
+                />
+              </Card>
+            </Col>
+          </Row>
         </Card.Body>
       </Card>
+      <Modal
+        show={showDialog}
+        onHide={() => {
+          setShowDialog(false)
+        }}
+
+      >
+        <Modal.Header>
+          <Modal.Title></Modal.Title>
+        </Modal.Header>
+        <Modal.Body>
+          <img src={loadingImg} style={{ width: '25%', height: '25%' }} alt='proccessing' />
+        Generando acceso y enviando correo...
+        </Modal.Body>
+        <Modal.Footer></Modal.Footer>
+      </Modal>
     </div>
   )
 }

src/Components/Login/Login.tsx

@@ -1,5 +1,5 @@
 import { FC, useEffect, useState } from 'react'
-import { useNavigate } from 'react-router-dom'
+import { Link, Navigate, useNavigate } from 'react-router-dom'
 import IAuth from '../../Interfaces/Auth/IAuth'
 import DSAuth from '../../Services/Auth/Auth.Services'
 import { useDispatch, useSelector } from 'react-redux'
@@ -24,14 +24,20 @@ interface IProps {}
 export const Login: FC<IProps> = (props) => {
   const navigate = useNavigate()
   const dispatch = useDispatch()
-  const UserLogued = useSelector((state: RootState) => state.UserProfile.UserProfile.logueado)
+  const UserLogued = useSelector(
+    (state: RootState) => state.UserProfile.UserProfile.logueado
+  )
   const [Usuario, setUsuario] = useState('')
   const [Contrasena, setContrasena] = useState('')
   const [token, setToken] = useState<string>(
-    (window.localStorage.getItem('token') ? window.localStorage.getItem('token') : '')!
+    (window.localStorage.getItem('token')
+      ? window.localStorage.getItem('token')
+      : '')!
   )
   const [menuStr, setMenuStr] = useState<string>(
-    (window.localStorage.getItem('menu') ? window.localStorage.getItem('menu') : '')!
+    (window.localStorage.getItem('menu')
+      ? window.localStorage.getItem('menu')
+      : '')!
   )
 
   const Login = async () => {
@@ -44,10 +50,13 @@ export const Login: FC<IProps> = (props) => {
         localStorage.setItem('token', response.data.token)
         localStorage.setItem('menu', JSON.stringify(response.data.menu))
         setToken(response.data.token)
-        localStorage.setItem('tokenInfo', JSON.stringify(jwt_decode(response.data.token)))
+        localStorage.setItem(
+          'tokenInfo',
+          JSON.stringify(jwt_decode(response.data.token))
+        )
         dispatch(populateMenuItems(response.data.menu))
         dispatch(populateUserProfile(response.data.token))
-        navigate('/', { replace: true })
+        navigate('/#/', { replace: true })
       })
       .catch((e: Error) => {
         alert('Credeciales invalidas! ' + e.message.toString())
@@ -115,7 +124,9 @@ export const Login: FC<IProps> = (props) => {
               <img src={Leyend} alt='' height='50' />
             </h3>
             <div className='form-group mt-3'>
-              <label style={{ color: '#00719F', paddingLeft: '5px' }}>Usuario</label>
+              <label style={{ color: '#00719F', paddingLeft: '5px' }}>
+                Usuario
+              </label>
               <input
                 type='email'
                 className='form-control mt-1'
@@ -148,6 +159,9 @@ export const Login: FC<IProps> = (props) => {
                 login
               </button>
             </div>
+            <div className='d-grid gap-2 mt-3'>
+              <Link to='/reset'>Olvido contraseña</Link>
+            </div>
           </div>
         </form>
       </div>

src/Components/Operaciones/OpMonitor.tsx

@@ -1,7 +1,28 @@
 import React, { FC, useEffect, useState } from 'react'
-import { Alert, Button, Card, Col, Form, Modal, OverlayTrigger, Row, Table, Tooltip } from 'react-bootstrap'
+import {
+  Alert,
+  Button,
+  Card,
+  Col,
+  Form,
+  Modal,
+  OverlayTrigger,
+  Row,
+  Table,
+  Tooltip,
+} from 'react-bootstrap'
 import { IconContext } from 'react-icons'
-import { BsChevronDown, BsChevronRight, BsChevronUp, BsFillPencilFill, BsPlusSquareFill, BsTruck } from 'react-icons/bs'
+import {
+  BsChevronDown,
+  BsChevronRight,
+  BsChevronUp,
+  BsFillPencilFill,
+  BsPaperclip,
+  BsPlusSquareFill,
+  BsTruck,
+  BsXLg,
+} from 'react-icons/bs'
+import { HiOutlineRefresh } from 'react-icons/hi'
 import { FcShipped, FcInTransit } from 'react-icons/fc'
 import { useDispatch, useSelector } from 'react-redux'
 import { RootState } from '../../store/store'
@@ -9,7 +30,12 @@ import DTOOpViajes from '../../DTOs/Operaciones/DTOViajes'
 import DSOpViajes from '../../Services/Operaciones/OpViajes.Services'
 import DSOpStatusSecuence from '../../Services/Operaciones/OpViajes.Services'
 import { Servicios } from './Viaje/Servicios/Servicios'
-import { populateOpViajes, updateOpViajes } from '../../store/features/Operaciones/OpViajesSlice'
+import {
+  resetOpViajes,
+  deleteOpViajes,
+  populateOpViajes,
+  updateOpViajes,
+} from '../../store/features/Operaciones/OpViajesSlice'
 import { Viaje } from './Viaje/Viaje'
 import '../../css/masterDetail.css'
 import '../../css/generalStyles.css'
@@ -19,26 +45,37 @@ import {
 } from '../../store/features/Operaciones/OpViajesServiciosSlice'
 import { populateOpViajesEstatusSecuencia } from '../../store/features/Operaciones/OpViajes.Estatus.SecuenciaSlice'
 import { ViajeEstatus } from './Viaje/ViajeEstatus'
+import { useNavigate } from 'react-router-dom'
+import DSCatUsuarios from '../../Services/Catalogos/CatUsuarios.Services'
+import ICatUsuarios from '../../Interfaces/Catalogos/ICatUsuarios'
+import { MFileManager } from '../Utils/MFileManager/MFileManager'
+import '../../css/masterDetail.css'
 
 interface IProps {}
 
 export const OpMonitor: FC<IProps> = (props) => {
   const dispatch = useDispatch()
+  //  const navigate = useNavigate()
   const Info = JSON.parse(localStorage.getItem('tokenInfo') || '[]')
-  const UserID = Info.UserId
+  /// const UserID = Info.UserId
-  const CatClientes = useSelector((state: RootState) => state.CatClientes.CatClientes)
+  /*   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 CatServicios = useSelector((state: RootState) => state.CatServicios.CatServicios)*/
   const AllTrips = useSelector((state: RootState) => state.OpViajes.OpViajes)
-  const AllTripsServices = useSelector((state: RootState) => state.OpViajesServicios.OpViajesServicios)
+  const AllTripsServices = useSelector(
+    (state: RootState) => state.OpViajesServicios.OpViajesServicios
+  )
   const [OpViajes, setOpViajes] = useState<DTOOpViajes[]>([])
   const [showTripDialog, setShowTripDialog] = useState(false)
+  const [ShowDeleteDialog, setShowDeleteDialog] = useState(false)
+  const [ShowDocumentsDialog, setShowDocumentsDialog] = useState(false)
   const [Switch, setSwitch] = useState(false)
   const [NoCaja, setNoCaja] = useState('')
   const [IDViaje, setIDViaje] = useState(0)
   const [IDCliente, setIDCliente] = useState(0)
+  const [SCliente, setSCliente] = useState('')
   const [IDProveedor, setIDProveedor] = useState(0)
   const [IDServicio, setIDServicio] = useState(0)
   const [IDTipoUnidad, setIDTipoUnidad] = useState(0)
@@ -48,6 +85,8 @@ export const OpMonitor: FC<IProps> = (props) => {
   const [PickUpNumber, setPickUpNumber] = useState('')
   const [Hazmat, setHazmat] = useState(0)
   const [Search, setSearch] = useState('')
+  const [DataUsuarios, setDataUsuarios] = useState<ICatUsuarios[]>([])
+  const [IDUsuario, setIDUsuario] = useState(0)
 
   const showInfo = (row: DTOOpViajes) => {
     setIDViaje(row.id)
@@ -82,11 +121,46 @@ export const OpMonitor: FC<IProps> = (props) => {
     setShowTripDialog(true)
   }
 
-  useEffect(() => {
+  const deleteMaster = (row: DTOOpViajes) => {
+    setSCliente(row.sCliente)
+    setIDViaje(row.id)
+    setShowDeleteDialog(true)
+  }
+
+  const deleteTrip = () => {
+    DSOpViajes.Delete(IDViaje)
+      .then((response) => {
+        dispatch(deleteOpViajes(IDViaje))
+        setShowDeleteDialog(false)
+      })
+      .catch((e: Error) => {})
+  }
+
+  const loadEveryting = () => {
     loadStatus()
     loadTrips()
+    loadUsers()
+  }
+
+  const loadUsers = () => {
+    DSCatUsuarios.GetAll()
+      .then((response) => {
+        console.log(response.data)
+        setDataUsuarios(response.data)
+      })
+      .catch((e: Error) => {
+        alert('Ocurrio un error' + e.message.toString())
+      })
+  }
+
+  useEffect(() => {
+    loadEveryting()
   }, [])
 
+  useEffect(() => {
+    console.log(JSON.stringify(AllTripsServices))
+  }, [AllTripsServices])
+
   const loadStatus = () => {
     DSOpStatusSecuence.GetStatusSecuence()
       .then((response) => {
@@ -95,17 +169,35 @@ export const OpMonitor: FC<IProps> = (props) => {
       .catch((e: Error) => {})
   }
 
+  const filterServices = (str: string, id: number) => {
+    if (!str) return false
+    const filtered = AllTripsServices.filter((obj) => obj.idViaje === id)
+    if (filtered) {
+    const filteredRows = filtered.filter(
+      (obj) =>
+        obj.sProveedor.toLowerCase().indexOf(str.toLowerCase()) > -1 ||
+        obj.sServicio.toLowerCase().indexOf(str.toLowerCase()) > -1 ||
+        obj.comentarios.toLowerCase().indexOf(str.toLowerCase()) > -1 ||
+        obj.noCaja.toLowerCase().indexOf(str.toLowerCase()) > -1
+    )
+    //console.log(JSON.stringify(filteredRows))
+    if (filteredRows.length) return true
+    else return false
+    } else return false
+  }
+
   const loadTrips = () => {
     DSOpViajes.Get()
       .then((response) => {
-        console.log('viajes=' + JSON.stringify(response.data))
+        dispatch(resetOpViajes(''))
+        //console.log('viajes=' + JSON.stringify(response.data))
         var data = response.data.map((x) => {
           x.max = false
           return x
         })
         setOpViajes(data)
         dispatch(populateOpViajes(data))
-        DSOpViajes.GetAllServices()
+        DSOpViajes.GetAllServices(99)
           .then((responsed) => {
             dispatch(populateOpViajesServicios(responsed.data))
           })
@@ -135,7 +227,18 @@ export const OpMonitor: FC<IProps> = (props) => {
             <Col xs={2} style={{ textAlign: 'right', fontSize: '25px' }}>
               Monitor de Viajes
             </Col>
-            <Col xs={1} style={{ textAlign: 'left', cursor: 'pointer' }}></Col>
+            <Col
+              xs={1}
+              style={{ textAlign: 'left', cursor: 'pointer' }}
+              onClick={() => {
+                loadEveryting()
+                //navigate('/OpMonitor', { replace: true })
+              }}
+            >
+              <IconContext.Provider value={{ color: 'orange', size: '35px' }}>
+                <HiOutlineRefresh />
+              </IconContext.Provider>
+            </Col>
             <Col xs={8}></Col>
             <Col xs={1}>
               <div
@@ -145,10 +248,16 @@ export const OpMonitor: FC<IProps> = (props) => {
                 style={{ cursor: 'pointer' }}
               >
                 <OverlayTrigger
-                  overlay={<Tooltip id='tooltip-disabled'>De un click aqui para iniciar un viaje</Tooltip>}
+                  overlay={
+                    <Tooltip id='tooltip-disabled'>
+                      De un click aqui para iniciar un viaje
+                    </Tooltip>
+                  }
                 >
                   <span className='d-inline-block'>
-                    <IconContext.Provider value={{ color: 'blue', size: '35px' }}>
+                    <IconContext.Provider
+                      value={{ color: 'blue', size: '35px' }}
+                    >
                       <FcInTransit />
                     </IconContext.Provider>
                   </span>
@@ -159,7 +268,28 @@ export const OpMonitor: FC<IProps> = (props) => {
         </Alert>
       </Card>
       <Row>
-        <Col xs={10}>
+        <Col xs={2}>
+          <Form.Control
+            as='select'
+            onChange={(e) => {
+              setIDUsuario(parseInt(e.target.value))
+            }}
+            value={IDUsuario}
+            className='form-select form-select-sm dialogLabel'
+          >
+            <option value='0'>- Todos los usuarios -</option>
+            {DataUsuarios
+              ? DataUsuarios.filter((row) => row.id > 1).map((row) => {
+                  return (
+                    <option key={row.id} value={row.id}>
+                      {row.nombre}
+                    </option>
+                  )
+                })
+              : null}
+          </Form.Control>
+        </Col>
+        <Col xs={8}>
           <Form.Control
             type='text'
             size='sm'
@@ -190,7 +320,9 @@ export const OpMonitor: FC<IProps> = (props) => {
                   <th style={{ width: '185px' }}>Estatus</th>
                   <th>Hazmat</th>
                   <th>Ref AA</th>
+                  <th></th>
                   <th>PickUp No</th>
+                  <th>Elimina</th>
                   <th>Editar</th>
                 </tr>
               </thead>
@@ -198,84 +330,152 @@ export const OpMonitor: FC<IProps> = (props) => {
                 {AllTrips
                   ? AllTrips.filter(
                       (MasterData) =>
-                        MasterData.sCliente.toLowerCase().includes(Search.toLowerCase()) ||
+                        ((IDUsuario !== 0
-                        MasterData.sTipoOperacion.toLowerCase().includes(Search.toLowerCase()) ||
+                          ? MasterData.usuario === IDUsuario
-                        MasterData.sOrigen.toLowerCase().includes(Search.toLowerCase()) ||
+                          : 1 === 1) &&
-                        MasterData.sDestino.toLowerCase().includes(Search.toLowerCase()) ||
+                          (MasterData.id
-                        MasterData.sTipoUnidad.toLowerCase().includes(Search.toLowerCase()) ||
+                            .toString()
-                        MasterData.noCaja.toLowerCase().includes(Search.toLowerCase()) ||
+                            .toLowerCase()
-                        MasterData.refAgenciaAduanal.toLowerCase().includes(Search.toLowerCase()) ||
+                            .includes(Search.toLowerCase()) ||
-                        MasterData.pickUpNumber.toLowerCase().includes(Search.toLowerCase())
+                            MasterData.sCliente
+                              .toLowerCase()
+                              .includes(Search.toLowerCase()) ||
+                            MasterData.sTipoOperacion
+                              .toLowerCase()
+                              .includes(Search.toLowerCase()) ||
+                            MasterData.sOrigen
+                              .toLowerCase()
+                              .includes(Search.toLowerCase()) ||
+                            MasterData.sDestino
+                              .toLowerCase()
+                              .includes(Search.toLowerCase()) ||
+                            ((MasterData.sTipoUnidad) ? MasterData.sTipoUnidad
+                              .toLowerCase()
+                              .includes(Search.toLowerCase()) : false) ||
+                            MasterData.noCaja
+                              .toLowerCase()
+                              .includes(Search.toLowerCase()) ||
+                            MasterData.refAgenciaAduanal
+                              .toLowerCase()
+                              .includes(Search.toLowerCase()) ||
+                            MasterData.pickUpNumber
+                              .toLowerCase()
+                              .includes(Search.toLowerCase()))) ||
+                        filterServices(Search.toLowerCase(), MasterData.id)
                     ).map((MasterData) => {
                       return (
                         <>
                           <tr
                             style={{ cursor: 'pointer' }}
-                            className={MasterData.max === true ? 'masterSelected' : 'normalSelected'}
+                            className={
+                              MasterData.max === true
+                                ? 'masterSelected'
+                                : 'normalSelected'
+                            }
                           >
                             <td
                               style={{ textAlign: 'left' }}
-                              className={MasterData.max === true ? 'masterSelected' : 'normalSelected'}
+                              className={
+                                MasterData.max === true
+                                  ? 'masterSelected'
+                                  : 'normalSelected'
+                              }
                             >
                               {MasterData.id}
                             </td>
                             <td
                               style={{ textAlign: 'left' }}
-                              className={MasterData.max === true ? 'masterSelected' : 'normalSelected'}
+                              className={
+                                MasterData.max === true
+                                  ? 'masterSelected'
+                                  : 'normalSelected'
+                              }
                               key={MasterData.id}
                               onClick={() => {
                                 changeToggle(MasterData)
                               }}
                             >
                               {MasterData.max === true ? (
-                                <IconContext.Provider value={{ color: 'blue', size: '15px' }}>
+                                <IconContext.Provider
+                                  value={{ color: 'blue', size: '15px' }}
+                                >
                                   <BsChevronDown />
                                 </IconContext.Provider>
                               ) : (
-                                <IconContext.Provider value={{ color: 'blue', size: '15px' }}>
+                                <IconContext.Provider
+                                  value={{ color: 'blue', size: '15px' }}
+                                >
                                   <BsChevronRight />
                                 </IconContext.Provider>
                               )}
                             </td>
                             <td
                               style={{ textAlign: 'left' }}
-                              className={MasterData.max === true ? 'masterSelected' : 'normalSelected'}
+                              className={
+                                MasterData.max === true
+                                  ? 'masterSelected'
+                                  : 'normalSelected'
+                              }
                             >
                               {MasterData.sCliente}
                             </td>
                             <td
                               style={{ textAlign: 'left' }}
-                              className={MasterData.max === true ? 'masterSelected' : 'normalSelected'}
+                              className={
+                                MasterData.max === true
+                                  ? 'masterSelected'
+                                  : 'normalSelected'
+                              }
                             >
                               {MasterData.sTipoOperacion}
                             </td>
                             <td
                               style={{ textAlign: 'left' }}
-                              className={MasterData.max === true ? 'masterSelected' : 'normalSelected'}
+                              className={
+                                MasterData.max === true
+                                  ? 'masterSelected'
+                                  : 'normalSelected'
+                              }
                             >
                               {MasterData.sOrigen}
                             </td>
                             <td
                               style={{ textAlign: 'left' }}
-                              className={MasterData.max === true ? 'masterSelected' : 'normalSelected'}
+                              className={
+                                MasterData.max === true
+                                  ? 'masterSelected'
+                                  : 'normalSelected'
+                              }
                             >
                               {MasterData.sDestino}
                             </td>
                             <td
                               style={{ textAlign: 'left' }}
-                              className={MasterData.max === true ? 'masterSelected' : 'normalSelected'}
+                              className={
+                                MasterData.max === true
+                                  ? 'masterSelected'
+                                  : 'normalSelected'
+                              }
                             >
                               {MasterData.sTipoUnidad}
                             </td>
                             <td
                               style={{ textAlign: 'left' }}
-                              className={MasterData.max === true ? 'masterSelected' : 'normalSelected'}
+                              className={
+                                MasterData.max === true
+                                  ? 'masterSelected'
+                                  : 'normalSelected'
+                              }
                             >
                               {MasterData.noCaja}
                             </td>
                             <td
                               style={{ textAlign: 'left' }}
-                              className={MasterData.max === true ? 'masterSelected' : 'normalSelected'}
+                              className={
+                                MasterData.max === true
+                                  ? 'masterSelected'
+                                  : 'normalSelected'
+                              }
                             >
                               <ViajeEstatus
                                 IDViaje={MasterData.id}
@@ -286,23 +486,76 @@ export const OpMonitor: FC<IProps> = (props) => {
                             </td>
                             <td
                               style={{ textAlign: 'center' }}
-                              className={MasterData.max === true ? 'masterSelected' : 'normalSelected'}
+                              className={
+                                MasterData.max === true
+                                  ? 'masterSelected'
+                                  : 'normalSelected'
+                              }
                             >
                               {MasterData.hazmat === 1 ? 'Si' : 'No'}
                             </td>
                             <td
                               style={{ textAlign: 'left' }}
-                              className={MasterData.max === true ? 'masterSelected' : 'normalSelected'}
+                              className={
+                                MasterData.max === true
+                                  ? 'masterSelected'
+                                  : 'normalSelected'
+                              }
                             >
                               {MasterData.refAgenciaAduanal}
                             </td>
+                            <td
+                              style={{ paddingTop: '15px' }}
+                              onClick={() => {
+                                setIDViaje(MasterData.id)
+                                setShowDocumentsDialog(true)
+                              }}
+                            >
+                              <IconContext.Provider
+                                value={{ color: 'green', size: '20px' }}
+                              >
+                                <BsPaperclip />
+                              </IconContext.Provider>
+                            </td>
                             <td
                               style={{ textAlign: 'left' }}
-                              className={MasterData.max === true ? 'masterSelected' : 'normalSelected'}
+                              className={
+                                MasterData.max === true
+                                  ? 'masterSelected'
+                                  : 'normalSelected'
+                              }
                             >
                               {MasterData.pickUpNumber}
                             </td>
-                            <td className={MasterData.max === true ? 'masterSelected' : 'normalSelected'}>
+                            <td
+                              className={
+                                MasterData.max === true
+                                  ? 'masterSelected'
+                                  : 'normalSelected'
+                              }
+                            >
+                              <Button
+                                size='sm'
+                                variant='white'
+                                style={{ textAlign: 'right' }}
+                                onClick={() => {
+                                  deleteMaster(MasterData)
+                                }}
+                              >
+                                <IconContext.Provider
+                                  value={{ color: 'red', size: '15px' }}
+                                >
+                                  <BsXLg />
+                                </IconContext.Provider>
+                              </Button>
+                            </td>
+                            <td
+                              className={
+                                MasterData.max === true
+                                  ? 'masterSelected'
+                                  : 'normalSelected'
+                              }
+                            >
                               <Button
                                 size='sm'
                                 variant='white'
@@ -311,16 +564,30 @@ export const OpMonitor: FC<IProps> = (props) => {
                                   EditMaster(MasterData)
                                 }}
                               >
-                                <IconContext.Provider value={{ color: 'blue', size: '15px' }}>
+                                <IconContext.Provider
+                                  value={{ color: 'blue', size: '15px' }}
+                                >
                                   <BsFillPencilFill />
                                 </IconContext.Provider>
                               </Button>
                             </td>
                           </tr>
                           {MasterData.max === true ? (
-                            <tr className={MasterData.max === true ? 'masterSelected2' : 'normalSelected2'}>
+                            <tr
-                              <th colSpan={2} style={{ backgroundColor: '#F8F9FE' }}></th>
+                              className={
-                              <th colSpan={14} style={{ backgroundColor: '#F8F9FE' }}>
+                                MasterData.max === true
+                                  ? 'masterSelected2'
+                                  : 'normalSelected2'
+                              }
+                            >
+                              <th
+                                colSpan={2}
+                                style={{ backgroundColor: '#F8F9FE' }}
+                              ></th>
+                              <th
+                                colSpan={14}
+                                style={{ backgroundColor: '#F8F9FE' }}
+                              >
                                 <Servicios
                                   IDMaster={MasterData.id}
                                   key={MasterData.id}
@@ -349,6 +616,7 @@ export const OpMonitor: FC<IProps> = (props) => {
           setShowTripDialog(false)
         }}
         size={'lg'}
+        backdrop='static'
       >
         <Modal.Header closeButton className='tripHeader'>
           Informacion del viaje
@@ -357,6 +625,128 @@ export const OpMonitor: FC<IProps> = (props) => {
           <Viaje IDViaje={IDViaje} />
         </Modal.Body>
       </Modal>
+
+      <Modal
+        show={ShowDeleteDialog}
+        onHide={() => {
+          setShowDeleteDialog(false)
+        }}
+        size={'lg'}
+        backdrop='static'
+      >
+        <Modal.Header closeButton className='tripHeader'>
+          Alerta
+        </Modal.Header>
+        <Modal.Body>
+          <Row>
+            <Col xs={12}>
+              <Alert key='danger' variant='danger'>
+                Esta seguro de eliminar este viaje{' '}
+                <span style={{ fontWeight: 'bold' }}>AOL: {IDViaje}</span>?
+                <br />
+                <span style={{ fontWeight: 'bold' }}>{SCliente}</span>
+              </Alert>
+            </Col>
+          </Row>
+          <Row>
+            <Col xs={6}>
+              <Button
+                variant='primary'
+                size='sm'
+                onClick={() => {
+                  setShowDeleteDialog(false)
+                }}
+              >
+                &nbsp;&nbsp;&nbsp;No&nbsp;&nbsp;&nbsp;
+              </Button>
+            </Col>
+            <Col xs={6} style={{ textAlign: 'right' }}>
+              <Button
+                variant='danger'
+                size='sm'
+                onClick={() => {
+                  deleteTrip()
+                }}
+              >
+                &nbsp;&nbsp;&nbsp;Si&nbsp;&nbsp;&nbsp;
+              </Button>
+            </Col>
+          </Row>
+        </Modal.Body>
+      </Modal>
+
+      <Modal
+        show={ShowDocumentsDialog}
+        onHide={() => {
+          setShowDocumentsDialog(false)
+        }}
+        dialogClassName='modal-90w'
+        backdrop='static'
+      >
+        <Modal.Header closeButton className='tripHeader'>
+          Documentos del viaje
+        </Modal.Header>
+        <Modal.Body>
+          <Row>
+            <Col xs={4}>
+              <Card style={{ width: '28rem', textAlign: 'center' }}>
+                <Card.Body>
+                  <MFileManager
+                    IDTrafico={IDViaje}
+                    Proceso={1}
+                    canEdit={true}
+                    fileType={'application/pdf'}
+                    Leyenda={'Seleccione los archivos PDF: '}
+                    showPreview={3}
+                  />
+                </Card.Body>
+              </Card>
+            </Col>
+            <Col xs={4}>
+              <Card style={{ width: '28rem', textAlign: 'center' }}>
+                <Card.Body>
+                  <MFileManager
+                    IDTrafico={IDViaje}
+                    Proceso={2}
+                    canEdit={true}
+                    fileType={'image/gif, image/jpeg, image/png, image/gif'}
+                    Leyenda={'Fotos de operaciones: '}
+                    showPreview={3}
+                  />
+                </Card.Body>
+              </Card>
+            </Col>
+            <Col xs={4}>
+              <Card style={{ width: '28rem', textAlign: 'center' }}>
+                <Card.Body>
+                  <MFileManager
+                    IDTrafico={IDViaje}
+                    Proceso={3}
+                    canEdit={true}
+                    fileType={'application/pdf'}
+                    Leyenda={'Otros documentos: '}
+                    showPreview={3}
+                  />
+                </Card.Body>
+              </Card>
+            </Col>
+          </Row>
+          <Row>
+            <Col xs={10}></Col>
+            <Col xs={2} style={{ textAlign: 'right' }}>
+              <Button
+                variant='secondary'
+                size='sm'
+                onClick={() => {
+                  setShowDocumentsDialog(false)
+                }}
+              >
+                &nbsp;&nbsp;&nbsp;Cerrar&nbsp;&nbsp;&nbsp;
+              </Button>
+            </Col>
+          </Row>
+        </Modal.Body>
+      </Modal>
     </div>
   )
 }

src/Components/Operaciones/Viaje/ViajeEstatus.tsx

@@ -6,6 +6,7 @@ import DSOpStatusSecuence from '../../../Services/Operaciones/OpViajes.Services'
 import { deleteOpViajes, updateOpViajes } from '../../../store/features/Operaciones/OpViajesSlice'
 import DTOChangeTripStatus from '../../../DTOs/Operaciones/DTOChangeTripStatus'
 import DTOOpViajes from '../../../DTOs/Operaciones/DTOViajes'
+import DTOViajes from '../../../DTOs/Operaciones/DTOViajes'
 import DTOViajeEstatusSecuencia from '../../../DTOs/Operaciones/DTOViajeEstatusSecuencia'
 import { setStatus } from '../../../store/features/Auth/UserProfileSlice'
 import { SignatureHelpTriggerReason } from 'typescript'
@@ -25,13 +26,9 @@ export const ViajeEstatus: FC<IProps> = (props) => {
   const [ListaSecuencia, setListaSecuencia] = useState<DTOViajeEstatusSecuencia[]>([])
   const [Secuencia, setSecuencia] = useState(1)
 
-  /*   const changeStatus = (e: any) => {
-    setIDStatus(parseInt(e.target.value))
-  } */
-
   const enlistaSecuenciaViaje = () => {
     const Lista: DTOViajeEstatusSecuencia[] = mTripStatus
-      .filter((row) => row.tipoOperacion === props.TipoOperacion && row.secuencia >= Secuencia)
+      .filter((row) => row.tipoOperacion === props.TipoOperacion)
       .sort((a, b) => a.secuencia - b.secuencia)
     setListaSecuencia(Lista)
   }
@@ -49,22 +46,46 @@ export const ViajeEstatus: FC<IProps> = (props) => {
   }, [Secuencia, IDStatus])
 
   const selectedStatus = (e: any) => {
-    setIDStatus(parseInt(e.target.value))
+    const idx = parseInt(e.target.value)
+    console.log(idx)
+    setIDStatus(idx)
     const data: DTOChangeTripStatus = {
       idViaje: props.IDViaje,
       idEstatus: parseInt(e.target.value),
     }
     DSOpStatusSecuence.ChangeTripStatus(data)
       .then((response) => {
-        const Item: DTOViajeEstatusSecuencia[] = mTripStatus
+        mTripStatus
           .filter((row) => row.tipoOperacion === props.TipoOperacion && row.estatus === IDStatus)
           .sort((a, b) => a.secuencia - b.secuencia)
-        //alert('A cambiado el estatus del cliente: ' + props.sCliente + ' a : ' + Item[0].sEstatus)
         let result = AllTrips.filter((a) => {
           if (a.id == props.IDViaje) {
             return a
           }
         })
+        let updatedRecord: DTOViajes = {
+          cliente: result[0].cliente,
+          destino: result[0].destino,
+          fAlta: result[0].fAlta,
+          hazmat: result[0].hazmat,
+          id: result[0].id,
+          max: result[0].max,
+          noCaja: result[0].noCaja,
+          origen: result[0].origen,
+          pedimento: result[0].pedimento,
+          pickUpNumber: result[0].pickUpNumber,
+          refAgenciaAduanal: result[0].refAgenciaAduanal,
+          sCliente: result[0].sCliente,
+          sDestino: result[0].sDestino,
+          sOrigen: result[0].sOrigen,
+          sTipoOperacion: result[0].sTipoOperacion,
+          sTipoUnidad: result[0].sTipoOperacion,
+          status: idx,
+          tipoOperacion: result[0].tipoOperacion,
+          tipoUnidad: result[0].tipoOperacion,
+          usuario: result[0].usuario,
+        }
+        dispatch(updateOpViajes(updatedRecord))
         if (response.data.secuencia === 100) {
           dispatch(deleteOpViajes(props.IDViaje))
         }
@@ -77,19 +98,17 @@ export const ViajeEstatus: FC<IProps> = (props) => {
       <Form.Control
         as='select'
         onChange={(e) => {
-          // changeStatus(e)
           selectedStatus(e)
         }}
-        /* onKeyPress={(e) => e.key === 'Enter' && selectedStatus()} */
         value={IDStatus}
         className='form-select form-select-sm dialogLabel'
       >
-        {ListaSecuencia && Secuencia
+        {ListaSecuencia
-          ? ListaSecuencia.filter((row) => row.tipoOperacion === props.TipoOperacion && row.secuencia >= Secuencia)
+          ? ListaSecuencia.filter((row) => row.tipoOperacion === props.TipoOperacion)
               .sort((a, b) => a.secuencia - b.secuencia)
               .map((row) => {
                 return (
-                  <option key={row.estatus} value={row.estatus}>
+                  <option key={row.id} value={row.estatus}>
                     {row.sEstatus}
                   </option>
                 )

src/Components/ResetAccount/ResetAccount.tsx

@@ -0,0 +1,123 @@
+import { FC, useEffect, useState } from 'react'
+import { Link, Navigate, useNavigate } from 'react-router-dom'
+import IAuth from '../../Interfaces/Auth/IAuth'
+import DSAuth from '../../Services/Auth/Auth.Services'
+import DSUsers from '../../Services/Catalogos/CatUsuarios.Services'
+import { useDispatch, useSelector } from 'react-redux'
+import { populateUserProfile } from '../../store/features/Auth/UserProfileSlice'
+import { populateMenuItems } from '../../store/features/Auth/MenuItemsSlice'
+import { RootState } from '../../store/store'
+import Leyend from '../../images/leyend.png'
+import jwt_decode from 'jwt-decode'
+
+interface IProps {}
+
+export const ResetAccount: FC<IProps> = (props) => {
+  const navigate = useNavigate()
+  const dispatch = useDispatch()
+  const UserLogued = useSelector((state: RootState) => state.UserProfile.UserProfile.logueado)
+  const [Usuario, setUsuario] = useState('')
+  const [Contrasena, setContrasena] = useState('')
+  const [Contrasena2, setContrasena2] = useState('')
+  const [token, setToken] = useState<string>(
+    (window.localStorage.getItem('token') ? window.localStorage.getItem('token') : '')!
+  )
+  const [menuStr, setMenuStr] = useState<string>(
+    (window.localStorage.getItem('menu') ? window.localStorage.getItem('menu') : '')!
+  )
+
+  const Reset = async () => {
+    if (Contrasena !== Contrasena2) {
+      alert('Las contraseñas no coinciden entre si')
+      return false
+    }
+    const data: IAuth = {
+      usuario: Usuario,
+      contrasena: Contrasena,
+    }
+    DSAuth.ResetPassword(data)
+      .then((response) => {
+        console.log(response.data)
+        alert('El cambio de contraseña se realizo exitosamente!')
+        navigate('/', { replace: true })
+      })
+      .catch((e: Error) => {
+        alert('Credenciales invalidas! ')
+      })
+  }
+
+  const validateToken = () => {
+    DSAuth.Validate()
+      .then((response) => {
+        navigate('/login', { replace: true })
+      })
+      .catch((e: Error) => {
+        alert('Ocurrio un error!')
+      })
+  }
+
+  useEffect(() => {
+    if (token.length > 5) {
+      validateToken()
+    }
+  }, [token])
+
+  return (
+    <div hidden={token ? true : false}>
+      <div className='Auth-form-container'>
+        <form className='Auth-form'>
+          <div className='Auth-form-content'>
+            <h3 className='Auth-form-title'>
+              <img src={Leyend} alt='' height='50' />
+            </h3>
+            <div className='form-group mt-3'>
+              <label style={{ color: '#00719F', paddingLeft: '5px' }}>Usuario</label>
+              <input
+                type='email'
+                className='form-control mt-1'
+                placeholder='Usuario'
+                onChange={(e) => {
+                  setUsuario(e.target.value)
+                }}
+              />
+            </div>
+            <div className='form-group mt-3'>
+              <label style={{ color: '#00719F' }}>Nueva contraseña</label>
+              <input
+                type='password'
+                className='form-control mt-1'
+                placeholder='Contraseña'
+                onChange={(e) => {
+                  setContrasena(e.target.value)
+                }}
+              />
+            </div>
+            <div className='form-group mt-3'>
+              <label style={{ color: '#00719F' }}>Confirme nueva contraseña</label>
+              <input
+                type='password'
+                className='form-control mt-1'
+                placeholder='Contraseña'
+                onChange={(e) => {
+                  setContrasena2(e.target.value)
+                }}
+              />
+            </div>
+            <div className='d-grid gap-2 mt-3'>
+              <button
+                type='button'
+                className='btn'
+                style={{ backgroundColor: '#00719F', color: '#FFFFFF' }}
+                onClick={() => {
+                  Reset()
+                }}
+              >
+                reset password
+              </button>
+            </div>
+          </div>
+        </form>
+      </div>
+    </div>
+  )
+}

src/Components/Utils/MFileManager/MFileManager.tsx

@@ -0,0 +1,332 @@
+import React, { FC, useEffect, useState } from 'react'
+import MFileManagerDS from '../../../Services/Utils/MFileManager.Service'
+import IFileManager from '../../../Interfaces/Utils/IFileManager'
+import { Alert, Button, Card, Col, ListGroup, Modal, Row } from 'react-bootstrap'
+import { IconContext } from 'react-icons'
+import { BsFillXCircleFill } from 'react-icons/bs'
+import { MsgInformativo } from '../Toast/MsgInformativo'
+import { TargetURL } from '../../../Constants/TargetURL'
+
+interface IProps {
+  IDTrafico: number
+  Proceso: number
+  Leyenda?: string
+  showPreview: number
+  fileType: string
+  canEdit: boolean
+}
+
+export const MFileManager: FC<IProps> = (props) => {
+  const [UserId, setUserId] = useState(() => {
+    const stickyValue = window.localStorage.getItem('UserId')
+    return stickyValue !== null ? JSON.parse(stickyValue) : 0
+  })
+  const [IDTrafico, setIDTrafico] = useState<number>(props.IDTrafico ? props.IDTrafico : 0)
+  const [Proceso, setProceso] = useState<number>(props.Proceso ? props.Proceso : 0)
+  const [ListaArchivos, setListaArchivos] = useState<IFileManager[]>()
+  const [NombreArchivo, setNombreArchivo] = useState('')
+  const [MsgDialogDelete, setMsgDialogDelete] = useState(false)
+  const [IDArchivo, setIDArchivo] = useState(0)
+  const [header, setHeader] = useState('')
+  const [show, setShowMsg] = useState(false)
+  const [msg, setMsg] = useState('')
+  const URL = new TargetURL()
+  const msgColor = 'primary'
+
+  const selectedFiles = (selectorFiles: any) => {
+    var formData = new FormData()
+    for (let i = 0; i < selectorFiles.files.length; i++) {
+      formData.append('FileList', selectorFiles.files[i])
+    }
+    MFileManagerDS.Append(formData, IDTrafico, Proceso, UserId)
+      .then((response) => {
+        setListaArchivos(response.data)
+      })
+      .catch((e: Error) => {
+        alert('Ocurrio un error: ' + e)
+        return
+      })
+    return false
+  }
+
+  useEffect(() => {
+    setIDTrafico(props.IDTrafico)
+    setProceso(props.Proceso)
+    MFileManagerDS.Get(props.IDTrafico, props.Proceso)
+      .then((response) => {
+        setListaArchivos(response.data)
+      })
+      .catch((e: Error) => {
+        alert('Ocurrio un error: ' + e)
+        return
+      })
+  }, [props.IDTrafico, props.Proceso])
+
+  const confirmDelete = (row: IFileManager) => {
+    setIDArchivo(row.id)
+    setNombreArchivo(row.nombreArchivo)
+    setMsgDialogDelete(true)
+  }
+
+  const deleteItem = () => {
+    MFileManagerDS.DeleteFile(IDArchivo)
+      .then((response) => {
+        var arrArchivos = ListaArchivos!.filter(function (el) {
+          return el.id !== IDArchivo
+        })
+        setListaArchivos(arrArchivos)
+        setHeader('Informtivo')
+        setMsg(response.data.Respuesta)
+        setMsgDialogDelete(false)
+        setShowMsg(false)
+        return
+      })
+      .catch((e: Error) => {
+        setHeader('Error')
+        setMsg('Ocurrio un error, no se elimino el archivo')
+        setMsgDialogDelete(false)
+        setShowMsg(false)
+        return
+      })
+    return false
+  }
+
+  const getFileContent = (row: IFileManager) => {
+    MFileManagerDS.getFileContentById(row.id, row.proceso)
+      .then((response: any) => {
+        if (response.status === 200) {
+          if (row.nombreArchivo.toLowerCase().endsWith('.pdf')) {
+            const blob = new Blob([response.data], { type: 'application/pdf' })
+            const url = window.URL.createObjectURL(blob)
+            window.open(url)
+          } else if (
+            row.nombreArchivo.toLowerCase().endsWith('.png') ||
+            row.nombreArchivo.toLowerCase().endsWith('.jpg')
+          ) {
+            const blob = new Blob([response.data], { type: 'image/png' })
+            const url = window.URL.createObjectURL(blob)
+            window.open(url)
+          } else {
+            const url = window.URL.createObjectURL(new Blob([response.data]))
+            const link = document.createElement('a')
+            link.href = url
+            link.setAttribute('download', NombreArchivo ? NombreArchivo : 'Archivo.zip')
+            document.body.appendChild(link)
+            link.click()
+          }
+        } else {
+          setHeader('Error')
+          setMsg('A este concepto no se le ha anexado PDF')
+          setShowMsg(true)
+          return
+        }
+      })
+      .catch((e: Error) => {
+        setHeader('Error')
+        setMsg('A este concepto no se le ha anexado PDF')
+        setShowMsg(true)
+        return
+      })
+  }
+
+  return (
+    <div>
+      <br />
+      <Card>
+        <Card.Body>
+          <Card.Title style={{ fontSize: '15px' }}>
+            {props.Leyenda ? props.Leyenda : ''}&nbsp;&nbsp;&nbsp;
+            {props.canEdit ? (
+              <input
+                type='file'
+                multiple
+                name='FileList'
+                accept={props.fileType}
+                onChange={(e) => selectedFiles(e.target)}
+              />
+            ) : (
+              ''
+            )}
+          </Card.Title>
+          {ListaArchivos && props.showPreview === 1 ? (
+            <div>
+              <Row xs={1} md={3} className='g-1'>
+                {ListaArchivos
+                  ? ListaArchivos.map((rec) => {
+                      return (
+                        <Col key={rec.id}>
+                          <Card style={{ width: '28rem', textAlign: 'center' }}>
+                            <Card.Body>
+                              <Row>
+                                <Col xs={3}></Col>
+                                <Col xs={5}>
+                                  <img
+                                    src={`${URL.get()}/Utils/MFileManager/GetFileContentById?id=${rec.id}&Proceso=${
+                                      rec.proceso
+                                    }`}
+                                    width={150}
+                                    height={200}
+                                    alt={'Imagen'}
+                                    onClick={() => {
+                                      getFileContent(rec)
+                                    }}
+                                  />
+                                </Col>
+                                <Col
+                                  xs={1}
+                                  alt='De un click aqui para eliminar'
+                                  style={{ visibility: props.canEdit ? 'visible' : 'hidden' }}
+                                >
+                                  <IconContext.Provider value={{ color: 'red', size: '20px' }}>
+                                    <BsFillXCircleFill
+                                      onClick={() => {
+                                        confirmDelete(rec)
+                                      }}
+                                      style={{ cursor: 'pointer' }}
+                                    />
+                                  </IconContext.Provider>
+                                </Col>
+                                <Col xs={3}></Col>
+                              </Row>
+                              <Row>
+                                <Col xs={12}>&nbsp;</Col>
+                              </Row>
+                              <Row>
+                                <Col xs={12}>{rec.nombreArchivo}</Col>
+                              </Row>
+                            </Card.Body>
+                          </Card>
+                        </Col>
+                      )
+                    })
+                  : ''}
+              </Row>
+            </div>
+          ) : ListaArchivos && props.showPreview === 2 ? (
+            <div>
+              <Row xs={1} md={3} className='g-1'>
+                {ListaArchivos
+                  ? ListaArchivos.map((rec) => {
+                      return (
+                        <Col key={rec.id}>
+                          <Card style={{ width: '28rem', textAlign: 'center' }}>
+                            <Card.Body>
+                              <Alert variant='primary'>
+                                <Row>
+                                  <Col xs={11}>{rec.nombreArchivo}</Col>
+                                  <Col
+                                    xs={1}
+                                    alt='De un click aqui para eliminar'
+                                    style={{ visibility: props.canEdit ? 'visible' : 'hidden' }}
+                                  >
+                                    <IconContext.Provider value={{ color: 'red', size: '20px' }}>
+                                      <BsFillXCircleFill
+                                        onClick={() => {
+                                          confirmDelete(rec)
+                                        }}
+                                        style={{ cursor: 'pointer' }}
+                                      />
+                                    </IconContext.Provider>
+                                  </Col>
+                                </Row>
+                              </Alert>
+                            </Card.Body>
+                          </Card>
+                        </Col>
+                      )
+                    })
+                  : ''}
+              </Row>
+            </div>
+          ) : ListaArchivos && props.showPreview === 3 ? (
+            <div>
+              {ListaArchivos
+                ? ListaArchivos.map((rec) => {
+                    return (
+                      <ListGroup style={{ width: '380px' }}>
+                        <ListGroup.Item
+                          key={rec.id}
+                          style={{
+                            paddingLeft: '5px',
+                            backgroundColor: '#CFE2FF',
+                            color: '#314EFA',
+                          }}
+                        >
+                          <Row>
+                            <Col>
+                              <span
+                                style={{ cursor: 'pointer' }}
+                                onClick={() => {
+                                  getFileContent(rec)
+                                }}
+                              >
+                                {rec.nombreArchivo.substring(0, 40)}
+                              </span>
+                            </Col>
+                            <Col xs={1} style={{ visibility: props.canEdit ? 'visible' : 'hidden' }}>
+                              <span>
+                                <IconContext.Provider value={{ color: 'red', size: '20px' }}>
+                                  <BsFillXCircleFill
+                                    onClick={() => {
+                                      confirmDelete(rec)
+                                    }}
+                                    style={{ cursor: 'pointer' }}
+                                  />
+                                </IconContext.Provider>
+                              </span>
+                            </Col>
+                          </Row>
+                        </ListGroup.Item>
+                      </ListGroup>
+                    )
+                  })
+                : ''}
+            </div>
+          ) : (
+            ''
+          )}
+        </Card.Body>
+      </Card>
+      <Modal show={MsgDialogDelete} onHide={() => setMsgDialogDelete(false)} size='lg'>
+        <Modal.Body>
+          <h5>
+            Favor de confirmar
+            <Row>
+              <Col xs={12}>&nbsp;</Col>
+            </Row>
+            <Alert variant='primary'>
+              ¿Esta seguro de eliminar el archivo: <br />
+              <br /> {NombreArchivo}?
+            </Alert>
+          </h5>
+        </Modal.Body>
+        <Modal.Footer>
+          <Row>
+            <Col xs={1}>
+              <Button variant='secondary' onClick={() => setMsgDialogDelete(false)} size='sm'>
+                Cerrar
+              </Button>
+            </Col>
+            <Col xs={5} style={{ paddingLeft: '550px', paddingRight: '0px' }}>
+              &nbsp;
+            </Col>
+            <Col xs={1}>
+              <Button variant='danger' onClick={() => deleteItem()} size='sm'>
+                Eliminar
+              </Button>
+            </Col>
+          </Row>
+        </Modal.Footer>
+      </Modal>
+      <MsgInformativo
+        show={show}
+        msg={msg}
+        header={header}
+        msgColor={msgColor}
+        closeToast={() => {
+          setShowMsg(false)
+        }}
+      />
+    </div>
+  )
+}

src/Components/Utils/Toast/MsgInformativo.tsx

@@ -0,0 +1,51 @@
+import React, { FC } from 'react'
+import { Toast, ToastContainer } from 'react-bootstrap'
+import { IconContext } from 'react-icons'
+import { BsFillExclamationSquareFill, BsXOctagonFill } from 'react-icons/bs'
+
+interface IProps {
+  show: boolean
+  msg: string
+  header: string
+  msgColor: string
+  time?: number
+  closeToast: (arg: boolean) => void
+}
+
+export const MsgInformativo: FC<IProps> = (props) => {
+  return (
+    <div>
+      <ToastContainer position={'middle-center'}>
+        <Toast
+          show={props.show}
+          delay={props.time}
+          bg={props.msgColor}
+          autohide
+          onClose={() => {
+            props.closeToast(false)
+          }}
+        >
+          <Toast.Header>
+            <strong className='me-auto'>
+              {props.header.toString().includes('Error') ? (
+                <IconContext.Provider value={{ color: 'red', size: '20px' }}>
+                  <BsXOctagonFill />
+                </IconContext.Provider>
+              ) : null}
+              {props.header.toString().includes('Informativo') ? (
+                <IconContext.Provider value={{ color: 'blue', size: '20px' }}>
+                  <BsFillExclamationSquareFill />
+                </IconContext.Provider>
+              ) : null}
+              &nbsp;
+              <span style={{ color: props.header == 'Error' ? 'red' : '' }}>{props.header}</span>
+            </strong>
+          </Toast.Header>
+          <Toast.Body style={{ backgroundColor: '#FFFFFF' }}>
+            <div className={props.msgColor == 'warning' ? 'alert alert-warning' : ''}>{props.msg}</div>
+          </Toast.Body>
+        </Toast>
+      </ToastContainer>
+    </div>
+  )
+}

src/Interfaces/Catalogos/ICatUsuarios.ts

@@ -0,0 +1,9 @@
+export default interface ICatUsuarios {
+    id: number
+    usuario: string
+    nombre: string
+    contrasena: string,
+    tipoUsuario : number
+    activo: number
+    idPerfil: number
+}

src/Interfaces/Utils/IFileManager.ts

@@ -0,0 +1,9 @@
+export default interface IFileManager {
+    id: number,
+    idUsuario: number,
+    proceso: number,
+    nombreArchivo: string,
+    fechaRegistro: string,
+    tags: string,
+    size: number,
+}

src/Services/Auth/Auth.Services.ts

@@ -2,7 +2,7 @@ import http from "../../Services/Auth/config/http-common";
 import IAuth from "../../Interfaces/Auth/IAuth"
 //import ItemMenuData  from "../../Interfaces/Auth/IMenu";
 import IPermisos from "../../Interfaces/Auth/IPermisos";
-//import Token from '../../Interfaces/token'
+import IRespuesta from "../../Interfaces/Respuestas/IRespuesta";
 
 class authDataService {
   async login(data: IAuth) {
@@ -11,5 +11,8 @@ class authDataService {
   async Validate() {
     return await http.get<String>("Auth/Validate");
   }
+  ResetPassword(data: IAuth) {
+    return http.post<IRespuesta>(`Auth/ResetPassword`, data);
+  }
 }
 export default new authDataService();

src/Services/Auth/config/http-common.ts

@@ -1,45 +1,44 @@
-import axios from "axios";
+import axios from 'axios'
 import { TargetURL } from '../../../Constants/TargetURL'
-let token = window.localStorage.getItem('token');
+let token = window.localStorage.getItem('token')
 const URL = new TargetURL()
 
 const instance = axios.create({
   baseURL: URL.get(),
   headers: {
-    "Content-type": "application/json",
+    'Content-type': 'application/json',
-    "Authorization": (token) ? `Bearer ${token}` : ''    
+    Authorization: token ? `Bearer ${token}` : '',
   },
-});
+})
-
 
-instance.interceptors.response.use(function (response) {
+instance.interceptors.response.use(
-  return response;
+  function (response) {
-}, function (error) {
+    return response
+  },
+  function (error) {
     if (401 === error.response.status) {
-    localStorage.clear();
+      localStorage.clear()
-    window.location.href = "/";
+      window.location.href = '/#/login'
     } else {
-     return Promise.reject(error);
+      return Promise.reject(error)
     }
-  return Promise.reject(error);
+    return Promise.reject(error)
-});
+  }
-
+)
 
 instance.interceptors.request.use(
   (config) => {
     let token = window.localStorage.getItem('token')
     if (token) {
-      config.headers!!.Authorization = `Bearer ${token}`;
+      config.headers!!.Authorization = `Bearer ${token}`
     } else {
-      config.headers!!.Authorization = ``;
+      config.headers!!.Authorization = ``
     }
-    return config;
+    return config
   },
   (error) => {
-    return Promise.reject(error);
+    return Promise.reject(error)
   }
-);
+)
-
-
-export default instance;
 
+export default instance

src/Services/Catalogos/CatUsuarios.Services.ts

@@ -0,0 +1,17 @@
+import http from "../../Services/Auth/config/http-common";
+import ICatUsuarios from "../../Interfaces/Catalogos/ICatUsuarios";
+import IRespuesta from "../../Interfaces/Respuestas/IRespuesta";
+import IAuth from "../../Interfaces/Auth/IAuth";
+
+class CatUsuariosDataService {
+  async GetAll() {
+    return await http.get<ICatUsuarios[]>("Catalogos/Usuarios/GetAll");
+  }
+  Append(data: ICatUsuarios) {
+    return http.post<ICatUsuarios>(`Catalogos/Usuarios/Append`,data);
+  }  
+  Delete(id: number) {
+    return http.delete<IRespuesta>(`Catalogos/Usuarios/Delete/${id}`);
+  }
+}
+export default new CatUsuariosDataService();

src/Services/Operaciones/OpViajes.Services.ts

@@ -1,39 +1,53 @@
-import http from "../../Services/Auth/config/http-common";
+import http from '../../Services/Auth/config/http-common'
-import DTOViajes from "../../DTOs/Operaciones/DTOViajes";
+import DTOViajes from '../../DTOs/Operaciones/DTOViajes'
-import IRespuesta from "../../Interfaces/Respuestas/IRespuesta";
+import IRespuesta from '../../Interfaces/Respuestas/IRespuesta'
-import DTOViajesServicios from "../../DTOs/Operaciones/DTOViajesServicios";
+import DTOViajesServicios from '../../DTOs/Operaciones/DTOViajesServicios'
-import DTOUltimaCaja from "../../DTOs/Operaciones/DTOUltimaCaja";
+import DTOUltimaCaja from '../../DTOs/Operaciones/DTOUltimaCaja'
-import DTOViajeEstatusSecuencia from "../../DTOs/Operaciones/DTOViajeEstatusSecuencia";
+import DTOViajeEstatusSecuencia from '../../DTOs/Operaciones/DTOViajeEstatusSecuencia'
-import DTOChangeTripStatus from "../../DTOs/Operaciones/DTOChangeTripStatus";
+import DTOChangeTripStatus from '../../DTOs/Operaciones/DTOChangeTripStatus'
-import DTOResultTripStatus from "../../DTOs/Operaciones/DTOResultTripStatus";
+import DTOResultTripStatus from '../../DTOs/Operaciones/DTOResultTripStatus'
 
 class OpViajesDataService {
   async Get() {
-    return await http.get<DTOViajes[]>("Operaciones/OpViajes/Get");
+    return await http.get<DTOViajes[]>('Operaciones/OpViajes/Get')
   }
-  async GetAllServices() {
+  async GetAllServices(Status: number) {
-    return await http.get<DTOViajesServicios[]>("Operaciones/OpViajes/GetAllServices");
+    return await http.get<DTOViajesServicios[]>(
+      `Operaciones/OpViajes/GetAllServices?Status=${Status}`
+    )
   }
   async GetLastTrailerBox(idViaje: number) {
-    return await http.get<DTOUltimaCaja>(`Operaciones/OpViajes/GetLastTrailerBox?idViaje=${idViaje}`);
+    return await http.get<DTOUltimaCaja>(
+      `Operaciones/OpViajes/GetLastTrailerBox?idViaje=${idViaje}`
+    )
   }
   async GetStatusSecuence() {
-    return await http.get<DTOViajeEstatusSecuencia[]>(`Operaciones/OpViajes/GetStatusSecuence`);
+    return await http.get<DTOViajeEstatusSecuencia[]>(
+      `Operaciones/OpViajes/GetStatusSecuence`
+    )
   }
   async ChangeTripStatus(data: DTOChangeTripStatus) {
-    return await http.put<DTOResultTripStatus>(`Operaciones/OpViajes/ChangeTripStatus/${data.idViaje}`, data);
+    return await http.put<DTOResultTripStatus>(
+      `Operaciones/OpViajes/ChangeTripStatus/${data.idViaje}`,
+      data
+    )
   }
   async Append(data: DTOViajes) {
-    return await http.post<DTOViajes>(`Operaciones/OpViajes/Append`,data);
+    return await http.post<DTOViajes>(`Operaciones/OpViajes/Append`, data)
   }
   async AppendServices(data: DTOViajesServicios) {
-    return await http.post<DTOViajesServicios[]>(`Operaciones/OpViajes/AppendService`,data);
+    return await http.post<DTOViajesServicios[]>(
+      `Operaciones/OpViajes/AppendService`,
+      data
+    )
   }
   async Delete(id: number) {
-    return await http.delete<IRespuesta>(`Operaciones/OpViajes/Delete/${id}`);
+    return await http.delete<IRespuesta>(`Operaciones/OpViajes/Delete/${id}`)
   }
   async DeleteService(id: number) {
-    return await http.delete<IRespuesta>(`Operaciones/OpViajes/DeleteService/${id}`);
+    return await http.delete<IRespuesta>(
+      `Operaciones/OpViajes/DeleteService/${id}`
+    )
   }
 }
-export default new OpViajesDataService();
+export default new OpViajesDataService()

src/Services/Utils/MFileManager.Service.ts

@@ -0,0 +1,26 @@
+import http from "../Auth/config/http-common";
+import IRespuesta from "../../Interfaces/Respuestas/IRespuesta"
+import IFileManager from "../../Interfaces/Utils/IFileManager";
+
+class MFileManagerDataService {
+
+  Append(formData: any, IDTrafico: number, Proceso: number, Usuario: number) {
+    return http.post<IFileManager[]>(`/Utils/MFileManager/Append?Tags=${IDTrafico}&Proceso=${Proceso}&Usuario=${Usuario}`, formData)
+  } 
+  DeleteFile(id: number) {
+    return http.delete<IRespuesta>(`/FileManager/DeleteById/${id}`);
+  }
+  Get(IDTrafico: number, Proceso: number) { 
+    return http.get<IFileManager[]>(`/Utils/MFileManager/GetFilesFromLog?Tags=${IDTrafico}&Proceso=${Proceso}`)
+  }
+  getFileContentById(id: number, Proceso: number) {
+    return http.get<ArrayBuffer>(`/Utils/MFileManager/GetFileContentById?id=${id}&Proceso=${Proceso}`, {responseType: 'arraybuffer'})
+    .then(function (response) {
+       return response
+     })
+     .catch(function (error) {
+       console.log(error)
+     })
+  } 
+}
+export default new MFileManagerDataService();

src/css/masterDetail.css

@@ -188,3 +188,9 @@
     position: relative; */
 display: inline-block;
 }
+
+.modal-90w {
+    width: 90%;
+    max-width: none !important;
+    max-height: none !important;
+}

src/store/features/Operaciones/OpViajesSlice.ts

@@ -18,6 +18,7 @@ export const OpViajesSlice = createSlice({
     },
     updateOpViajes : (state, action: PayloadAction<DTOViajes>) => {
       const i = state.OpViajes.findIndex(_element => _element.id === action.payload.id);
+      console.log('valor de i: '+i)      
       if (i > -1) state.OpViajes[i] = action.payload;
       else state.OpViajes.push(action.payload);
     },