Se agrega: redux a los catalogos clientes, proveedores, tipos unidades, ubicaciones y al login

package.json

@@ -17,10 +17,13 @@
     "jwt-decode": "^3.1.2",
     "react": "^18.2.0",
     "react-bootstrap": "^2.5.0",
+    "react-data-table-component": "^7.5.3",
     "react-dom": "^18.2.0",
+    "react-icons": "^4.4.0",
     "react-redux": "^8.0.2",
     "react-router-dom": "^6.3.0",
     "react-scripts": "5.0.1",
+    "styled-components": "^5.3.5",
     "typescript": "^4.7.4",
     "web-vitals": "^2.1.4"
   },

src/App.tsx

@@ -1,5 +1,5 @@
 import 'bootstrap/dist/css/bootstrap.min.css'
-import { BrowserRouter, Link, Navigate, Outlet, Route, Routes } from 'react-router-dom'
+import { BrowserRouter, Route, Routes } from 'react-router-dom'
 import './App.css'
 import { Login } from './Components/Login/Login'
 import { RptViajesPendientes } from './Components/Reportes/RptViajesPendientes'
@@ -9,12 +9,18 @@ import { useSelector } from 'react-redux'
 import { RootState } from './store/store'
 import Navbar from './Components/Navbar/Navbar'
 import { Logout } from './Components/Logout/Logout'
+import { ProtectedRoute } from './Components/ProtectedRoutes/ProtectedRoute'
+import { CatClientes } from './Components/Catalogos/CatClientes'
+import { CatProveedores } from './Components/Catalogos/CatProveedores'
+import { CatTipoUnidades } from './Components/Catalogos/CatTipoUnidades'
+import { CatUbicaciones } from './Components/Catalogos/CatUbicaciones'
+import { CatRutas } from './Components/Catalogos/CatRutas'
 
 function App() {
   const UserLogued = useSelector((state: RootState) => state.UserProfile.UserProfile.logueado)
 
   useEffect(() => {
-    console.log('Entro al proceso de router')
+    console.log('Entro al proceso de router ' + UserLogued)
   }, [UserLogued])
 
   function PageNotFound() {
@@ -25,26 +31,24 @@ function App() {
     )
   }
 
-  const ProtectedRoute = ({ auth = false, redirectPath = 'login' }) => {
-    if (!auth) {
-      return <Navigate to={redirectPath} replace />
-    }
-    return <Outlet />
-  }
-
   return (
     <div className='App'>
       <BrowserRouter>
         <Navbar />
-        {/*         <Link to='login'>login</Link>
-        <br /> 
-        {UserLogued ? <Link to='RptViajesPendientes'>Reporte de viajes</Link> : null}*/}
         <Routes>
           <Route path='/' element={<Home />}></Route>
           <Route path='login' element={<Login />}></Route>
           <Route path='logout' element={<Logout />}></Route>
-          <Route element={<ProtectedRoute auth={UserLogued} />}>
+          {/* <Route element={<ProtectedRoute auth={UserLogued} />}>
+            <Route path='RptViajesPendientes' element={<RptViajesPendientes />} />
+          </Route> */}
+          <Route element={<ProtectedRoute />}>
             <Route path='RptViajesPendientes' element={<RptViajesPendientes />} />
+            <Route path='CatClientes' element={<CatClientes />} />
+            <Route path='CatProveedores' element={<CatProveedores />} />
+            <Route path='CatTipoUnidades' element={<CatTipoUnidades />} />
+            <Route path='CatUbicaciones' element={<CatUbicaciones />} />
+            <Route path='CatRutas' element={<CatRutas />} />
           </Route>
           <Route path='*' element={<PageNotFound />} />
         </Routes>

src/Components/Catalogos/CatClientes.tsx

@@ -0,0 +1,242 @@
+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 ICatClientes from '../../Interfaces/Catalogos/ICatClientes'
+import { RootState } from '../../store/store'
+import { BsFillPencilFill, BsFillTrashFill, BsSave } from 'react-icons/bs'
+import DSCatClientes from '../../Services/Catalogos/CatClientes.Services'
+import { updateCatClientes, deleteCatClientes } from '../../store/features/Catalogos/CatClientesSlice'
+
+interface IProps {}
+
+export const CatClientes: FC<IProps> = (props) => {
+  const dispatch = useDispatch()
+  const CatClientes = useSelector((state: RootState) => state.CatClientes.CatClientes)
+  const [showCatClientesDialog, setShowCatClientesDialog] = useState(false)
+  const [deleteCatClientesDialog, setDeleteCatClientesDialog] = useState(false)
+  const [IDCliente, setIDCliente] = useState(0)
+  const [Cliente, setCliente] = useState('')
+  const [Search, setSearch] = useState('')
+  const columnsConcepts = [
+    {
+      name: 'id',
+      width: '80px',
+      selector: (row: ICatClientes) => row.id,
+      sortable: true,
+    },
+    {
+      name: 'Cliente',
+      width: '450px',
+      selector: (row: ICatClientes) => row.cliente,
+      sortable: true,
+    },
+    {
+      name: 'Editar',
+      width: '100px',
+      cell: (row: ICatClientes) => (
+        <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: ICatClientes) => (
+        <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: ICatClientes) => {
+    setIDCliente(data.id)
+    setCliente(data.cliente)
+    setShowCatClientesDialog(true)
+  }
+
+  const confirmDelete = (data: ICatClientes) => {
+    setIDCliente(data.id)
+    setCliente(data.cliente)
+    setDeleteCatClientesDialog(true)
+  }
+
+  const deleteInfo = () => {
+    DSCatClientes.Delete(IDCliente)
+      .then((response) => {
+        dispatch(deleteCatClientes(IDCliente))
+      })
+      .catch((e: Error) => {})
+    setDeleteCatClientesDialog(false)
+  }
+
+  const saveInfo = () => {
+    const data: ICatClientes = {
+      id: IDCliente,
+      cliente: Cliente,
+      activo: 1,
+    }
+    DSCatClientes.Append(data)
+      .then((response) => {
+        dispatch(updateCatClientes(response.data))
+      })
+      .catch((e: Error) => {})
+    setShowCatClientesDialog(false)
+  }
+
+  const filtraReporte = (e: any) => {
+    setSearch(e.target.value)
+  }
+
+  return (
+    <div>
+      <Row>
+        <Col xs={12}>
+          <Card style={{}}>
+            <Card.Body>
+              <Card.Title style={{ textAlign: 'left' }}>
+                <Alert variant='primary'>Clientes</Alert>
+              </Card.Title>
+              <Row>
+                <Col xs={12}>
+                  <Form.Control
+                    type='text'
+                    size='sm'
+                    placeholder='Search...'
+                    onChange={(e) => {
+                      filtraReporte(e)
+                    }}
+                  />
+                </Col>
+              </Row>
+              <Row>
+                <Col xs={12}>
+                  <DataTable
+                    noHeader
+                    defaultSortFieldId={'id'}
+                    defaultSortAsc={true}
+                    striped={true}
+                    dense={true}
+                    paginationPerPage={10}
+                    pagination
+                    highlightOnHover
+                    columns={columnsConcepts}
+                    data={CatClientes.filter(function (row: ICatClientes) {
+                      return row.cliente.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='IDCliente' value={IDCliente} disabled size='sm' />
+            </Col>
+          </Row>
+          <br />
+          <Row>
+            <Col xs={2}>Cliente</Col>
+            <Col xs={10}>
+              <Form.Control
+                type='text'
+                id='Cliente'
+                value={Cliente}
+                size='sm'
+                onChange={(e) => {
+                  setCliente(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 cliente: <br />
+                <span style={{ fontWeight: 'bold', fontSize: '20px' }}>{Cliente}</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>
+  )
+}

src/Components/Catalogos/CatProveedores.tsx

@@ -0,0 +1,241 @@
+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 ICatProveedores from '../../Interfaces/Catalogos/ICatProveedores'
+import { RootState } from '../../store/store'
+import { BsFillPencilFill, BsFillTrashFill, BsSave } from 'react-icons/bs'
+import DSCatProveedores from '../../Services/Catalogos/CatProveedores.Services'
+import { updateCatProveedores, deleteCatProveedores } from '../../store/features/Catalogos/CatProveedoresSlice'
+
+interface IProps {}
+
+export const CatProveedores: FC<IProps> = (props) => {
+  const dispatch = useDispatch()
+  const CatProveedores = useSelector((state: RootState) => state.CatProveedores.CatProveedores)
+  const [showCatProveedoresDialog, setShowCatProveedoresDialog] = useState(false)
+  const [deleteCatProveedoresDialog, setDeleteCatProveedoresDialog] = useState(false)
+  const [IDProveedor, setIDProveedor] = useState(0)
+  const [Proveedor, setProveedor] = useState('')
+  const [Search, setSearch] = useState('')
+  const columnsConcepts = [
+    {
+      name: 'id',
+      width: '80px',
+      selector: (row: ICatProveedores) => row.id,
+      sortable: true,
+    },
+    {
+      name: 'Proveedor',
+      width: '450px',
+      selector: (row: ICatProveedores) => row.proveedor,
+      sortable: true,
+    },
+    {
+      name: 'Editar',
+      width: '100px',
+      cell: (row: ICatProveedores) => (
+        <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: ICatProveedores) => (
+        <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: ICatProveedores) => {
+    setIDProveedor(data.id)
+    setProveedor(data.proveedor)
+    setShowCatProveedoresDialog(true)
+  }
+
+  const confirmDelete = (data: ICatProveedores) => {
+    setIDProveedor(data.id)
+    setProveedor(data.proveedor)
+    setDeleteCatProveedoresDialog(true)
+  }
+
+  const deleteInfo = () => {
+    DSCatProveedores.Delete(IDProveedor)
+      .then((response) => {
+        dispatch(deleteCatProveedores(IDProveedor))
+      })
+      .catch((e: Error) => {})
+    setDeleteCatProveedoresDialog(false)
+  }
+
+  const saveInfo = () => {
+    const data: ICatProveedores = {
+      id: IDProveedor,
+      proveedor: Proveedor,
+      activo: 1,
+    }
+    DSCatProveedores.Append(data)
+      .then((response) => {
+        dispatch(updateCatProveedores(response.data))
+      })
+      .catch((e: Error) => {})
+    setShowCatProveedoresDialog(false)
+  }
+
+  const filtraReporte = (e: any) => {
+    setSearch(e.target.value)
+  }
+  return (
+    <div>
+      <Row>
+        <Col xs={12}>
+          <Card style={{}}>
+            <Card.Body>
+              <Card.Title style={{ textAlign: 'left' }}>
+                <Alert variant='primary'>Proveedores</Alert>
+              </Card.Title>
+              <Row>
+                <Col xs={12}>
+                  <Form.Control
+                    type='text'
+                    size='sm'
+                    placeholder='Search...'
+                    onChange={(e) => {
+                      filtraReporte(e)
+                    }}
+                  />
+                </Col>
+              </Row>
+              <Row>
+                <Col xs={12}>
+                  <DataTable
+                    noHeader
+                    defaultSortFieldId={'id'}
+                    defaultSortAsc={true}
+                    striped={true}
+                    dense={true}
+                    paginationPerPage={10}
+                    pagination
+                    highlightOnHover
+                    columns={columnsConcepts}
+                    data={CatProveedores.filter(function (row: ICatProveedores) {
+                      return row.proveedor.includes(Search)
+                    })}
+                    pointerOnHover
+                  />
+                </Col>
+              </Row>
+            </Card.Body>
+          </Card>
+        </Col>
+      </Row>
+      <Modal
+        show={showCatProveedoresDialog}
+        onHide={() => {
+          setShowCatProveedoresDialog(false)
+        }}
+      >
+        <Modal.Header closeButton>
+          <Modal.Title>Catalogo: Proveedores</Modal.Title>
+        </Modal.Header>
+        <Modal.Body>
+          <Row>
+            <Col xs={4}>No proveedor</Col>
+            <Col xs={2}>
+              <Form.Control type='text' id='IDCliente' value={IDProveedor} disabled size='sm' />
+            </Col>
+          </Row>
+          <br />
+          <Row>
+            <Col xs={2}>Proveedor</Col>
+            <Col xs={10}>
+              <Form.Control
+                type='text'
+                id='Proveedor'
+                value={Proveedor}
+                size='sm'
+                onChange={(e) => {
+                  setProveedor(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={deleteCatProveedoresDialog}
+        onHide={() => {
+          setDeleteCatProveedoresDialog(false)
+        }}
+      >
+        <Modal.Header closeButton>
+          <Modal.Title>Catalogo: Proveedores</Modal.Title>
+        </Modal.Header>
+        <Modal.Body>
+          <br />
+          <Row>
+            <Col xs={12}>
+              <Alert variant='warning'>
+                ¿Esta seguro de que desea eliminar el proveedor: <br />
+                <span style={{ fontWeight: 'bold', fontSize: '20px' }}>{Proveedor}</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>
+  )
+}

src/Components/Catalogos/CatRutas.tsx

@@ -0,0 +1,128 @@
+import React, { FC, useState } from 'react'
+import { Alert, Card, Col, Form, Row } from 'react-bootstrap'
+import { useSelector } from 'react-redux'
+import { RootState } from '../../store/store'
+
+interface IProps {}
+
+export const CatRutas: FC<IProps> = (props) => {
+  const CatClientes = useSelector((state: RootState) => state.CatClientes.CatClientes)
+  const CatTipoUnidades = useSelector((state: RootState) => state.CatTipoUnidades.CatTipoUnidades)
+  const CatUbicaciones = useSelector((state: RootState) => state.CatUbicaciones.CatUbicaciones)
+  const [IDCliente, setIDCliente] = useState(0)
+  const [IDTipoUnidad, setIDTipoUnidad] = useState(0)
+  const [IDOrigen, setIDOrigen] = useState(0)
+  const [IDDestino, setIDDestino] = useState(0)
+
+  return (
+    <div>
+      <Row>
+        <Col xs={12}>
+          <Card style={{}}>
+            <Card.Body>
+              <Card.Title style={{ textAlign: 'left' }}>
+                <Alert variant='primary'>Rutas</Alert>
+              </Card.Title>
+              <Row>
+                <Col xs={2}>Cliente</Col>
+                <Col>
+                  <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>
+                <Col xs={2}>Tipo unidad</Col>
+                <Col>
+                  <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>
+              </Row>
+              <Row>
+                <Col>&nbsp;</Col>
+              </Row>
+              <Row>
+                <Col xs={2}>Origen</Col>
+                <Col>
+                  <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) => {
+                          return (
+                            <option key={c.id} value={c.id}>
+                              {c.ubicacion}
+                            </option>
+                          )
+                        })
+                      : null}
+                  </Form.Control>
+                </Col>
+                <Col xs={2}>Destino</Col>
+                <Col>
+                  <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) => {
+                          return (
+                            <option key={c.id} value={c.id}>
+                              {c.ubicacion}
+                            </option>
+                          )
+                        })
+                      : null}
+                  </Form.Control>
+                </Col>
+              </Row>
+              <Row></Row>
+            </Card.Body>
+          </Card>
+        </Col>
+      </Row>
+    </div>
+  )
+}

src/Components/Catalogos/CatTipoUnidades.tsx

@@ -0,0 +1,242 @@
+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 ICatTipoUnidades from '../../Interfaces/Catalogos/ICatTipoUnidades'
+import { RootState } from '../../store/store'
+import { BsFillPencilFill, BsFillTrashFill, BsSave } from 'react-icons/bs'
+import DSCatTipoUnidades from '../../Services/Catalogos/CatTipoUnidades.Services'
+import { updateCatTipoUnidades, deleteCatTipoUnidades } from '../../store/features/Catalogos/CatTipoUnidadesSlice'
+
+interface IProps {}
+
+export const CatTipoUnidades: FC<IProps> = (props) => {
+  const dispatch = useDispatch()
+  const CatTipoUnidades = useSelector((state: RootState) => state.CatTipoUnidades.CatTipoUnidades)
+  const [showCatTipoUnidadesDialog, setShowCatTipoUnidadesDialog] = useState(false)
+  const [deleteCatTipoUnidadesDialog, setDeleteCatTipoUnidadesDialog] = useState(false)
+  const [IDTipoUnidad, setIDTipoUnidad] = useState(0)
+  const [TipoUnidad, setTipoUnidad] = useState('')
+  const [Search, setSearch] = useState('')
+  const columnsConcepts = [
+    {
+      name: 'id',
+      width: '80px',
+      selector: (row: ICatTipoUnidades) => row.id,
+      sortable: true,
+    },
+    {
+      name: 'Tipo unidad',
+      width: '450px',
+      selector: (row: ICatTipoUnidades) => row.tipoUnidad,
+      sortable: true,
+    },
+    {
+      name: 'Editar',
+      width: '100px',
+      cell: (row: ICatTipoUnidades) => (
+        <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: ICatTipoUnidades) => (
+        <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: ICatTipoUnidades) => {
+    setIDTipoUnidad(data.id)
+    setTipoUnidad(data.tipoUnidad)
+    setShowCatTipoUnidadesDialog(true)
+  }
+
+  const confirmDelete = (data: ICatTipoUnidades) => {
+    setIDTipoUnidad(data.id)
+    setTipoUnidad(data.tipoUnidad)
+    setDeleteCatTipoUnidadesDialog(true)
+  }
+
+  const deleteInfo = () => {
+    DSCatTipoUnidades.Delete(IDTipoUnidad)
+      .then((response) => {
+        dispatch(deleteCatTipoUnidades(IDTipoUnidad))
+      })
+      .catch((e: Error) => {})
+    setDeleteCatTipoUnidadesDialog(false)
+  }
+
+  const saveInfo = () => {
+    const data: ICatTipoUnidades = {
+      id: IDTipoUnidad,
+      tipoUnidad: TipoUnidad,
+      activo: 1,
+    }
+    DSCatTipoUnidades.Append(data)
+      .then((response) => {
+        dispatch(updateCatTipoUnidades(response.data))
+      })
+      .catch((e: Error) => {})
+    setShowCatTipoUnidadesDialog(false)
+  }
+
+  const filtraReporte = (e: any) => {
+    setSearch(e.target.value)
+  }
+
+  return (
+    <div>
+      <Row>
+        <Col xs={12}>
+          <Card style={{}}>
+            <Card.Body>
+              <Card.Title style={{ textAlign: 'left' }}>
+                <Alert variant='primary'>Tipo Unidades</Alert>
+              </Card.Title>
+              <Row>
+                <Col xs={12}>
+                  <Form.Control
+                    type='text'
+                    size='sm'
+                    placeholder='Search...'
+                    onChange={(e) => {
+                      filtraReporte(e)
+                    }}
+                  />
+                </Col>
+              </Row>
+              <Row>
+                <Col xs={12}>
+                  <DataTable
+                    noHeader
+                    defaultSortFieldId={'id'}
+                    defaultSortAsc={true}
+                    striped={true}
+                    dense={true}
+                    paginationPerPage={10}
+                    pagination
+                    highlightOnHover
+                    columns={columnsConcepts}
+                    data={CatTipoUnidades.filter(function (row: ICatTipoUnidades) {
+                      return row.tipoUnidad.includes(Search)
+                    })}
+                    pointerOnHover
+                  />
+                </Col>
+              </Row>
+            </Card.Body>
+          </Card>
+        </Col>
+      </Row>
+      <Modal
+        show={showCatTipoUnidadesDialog}
+        onHide={() => {
+          setShowCatTipoUnidadesDialog(false)
+        }}
+      >
+        <Modal.Header closeButton>
+          <Modal.Title>Catalogo: Tipo unidades</Modal.Title>
+        </Modal.Header>
+        <Modal.Body>
+          <Row>
+            <Col xs={4}>No tipo unidad</Col>
+            <Col xs={2}>
+              <Form.Control type='text' id='IDCliente' value={IDTipoUnidad} disabled size='sm' />
+            </Col>
+          </Row>
+          <br />
+          <Row>
+            <Col xs={3}>Tipo unidad</Col>
+            <Col xs={9}>
+              <Form.Control
+                type='text'
+                id='TipoUnidad'
+                value={TipoUnidad}
+                size='sm'
+                onChange={(e) => {
+                  setTipoUnidad(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={deleteCatTipoUnidadesDialog}
+        onHide={() => {
+          setDeleteCatTipoUnidadesDialog(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 cliente: <br />
+                <span style={{ fontWeight: 'bold', fontSize: '20px' }}>{TipoUnidad}</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>
+  )
+}

src/Components/Catalogos/CatUbicaciones.tsx

@@ -0,0 +1,242 @@
+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 { RootState } from '../../store/store'
+import { BsFillPencilFill, BsFillTrashFill, BsSave } from 'react-icons/bs'
+import DSCatUbicaciones from '../../Services/Catalogos/CatUbicaciones.Services'
+import { updateCatUbicaciones, deleteCatUbicaciones } from '../../store/features/Catalogos/CatUbicacionesSlice'
+import ICatUbicaciones from '../../Interfaces/Catalogos/ICatUbicaciones'
+
+interface IProps {}
+
+export const CatUbicaciones: FC<IProps> = (props) => {
+  const dispatch = useDispatch()
+  const CatUbicaciones = useSelector((state: RootState) => state.CatUbicaciones.CatUbicaciones)
+  const [showCatUbicacionesDialog, setShowCatUbicacionesDialog] = useState(false)
+  const [deleteCatUbicacionesDialog, setDeleteCatUbicacionesDialog] = useState(false)
+  const [IDUbicacion, setIDUbicacion] = useState(0)
+  const [Ubicacion, setUbicacion] = useState('')
+  const [Search, setSearch] = useState('')
+  const columnsConcepts = [
+    {
+      name: 'id',
+      width: '80px',
+      selector: (row: ICatUbicaciones) => row.id,
+      sortable: true,
+    },
+    {
+      name: 'Ubicacion',
+      width: '450px',
+      selector: (row: ICatUbicaciones) => row.ubicacion,
+      sortable: true,
+    },
+    {
+      name: 'Editar',
+      width: '100px',
+      cell: (row: ICatUbicaciones) => (
+        <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: ICatUbicaciones) => (
+        <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: ICatUbicaciones) => {
+    setIDUbicacion(data.id)
+    setUbicacion(data.ubicacion)
+    setShowCatUbicacionesDialog(true)
+  }
+
+  const confirmDelete = (data: ICatUbicaciones) => {
+    setIDUbicacion(data.id)
+    setUbicacion(data.ubicacion)
+    setDeleteCatUbicacionesDialog(true)
+  }
+
+  const deleteInfo = () => {
+    DSCatUbicaciones.Delete(IDUbicacion)
+      .then((response) => {
+        dispatch(deleteCatUbicaciones(IDUbicacion))
+      })
+      .catch((e: Error) => {})
+    setDeleteCatUbicacionesDialog(false)
+  }
+
+  const saveInfo = () => {
+    const data: ICatUbicaciones = {
+      id: IDUbicacion,
+      ubicacion: Ubicacion,
+      activo: 1,
+    }
+    DSCatUbicaciones.Append(data)
+      .then((response) => {
+        dispatch(updateCatUbicaciones(response.data))
+      })
+      .catch((e: Error) => {})
+    setShowCatUbicacionesDialog(false)
+  }
+
+  const filtraReporte = (e: any) => {
+    setSearch(e.target.value)
+  }
+
+  return (
+    <div>
+      <Row>
+        <Col xs={12}>
+          <Card style={{}}>
+            <Card.Body>
+              <Card.Title style={{ textAlign: 'left' }}>
+                <Alert variant='primary'>Ubicacions</Alert>
+              </Card.Title>
+              <Row>
+                <Col xs={12}>
+                  <Form.Control
+                    type='text'
+                    size='sm'
+                    placeholder='Search...'
+                    onChange={(e) => {
+                      filtraReporte(e)
+                    }}
+                  />
+                </Col>
+              </Row>
+              <Row>
+                <Col xs={12}>
+                  <DataTable
+                    noHeader
+                    defaultSortFieldId={'id'}
+                    defaultSortAsc={true}
+                    striped={true}
+                    dense={true}
+                    paginationPerPage={10}
+                    pagination
+                    highlightOnHover
+                    columns={columnsConcepts}
+                    data={CatUbicaciones.filter(function (row: ICatUbicaciones) {
+                      return row.ubicacion.includes(Search)
+                    })}
+                    pointerOnHover
+                  />
+                </Col>
+              </Row>
+            </Card.Body>
+          </Card>
+        </Col>
+      </Row>
+      <Modal
+        show={showCatUbicacionesDialog}
+        onHide={() => {
+          setShowCatUbicacionesDialog(false)
+        }}
+      >
+        <Modal.Header closeButton>
+          <Modal.Title>Catalogo: Ubicaciones</Modal.Title>
+        </Modal.Header>
+        <Modal.Body>
+          <Row>
+            <Col xs={3}>No. ubicacion</Col>
+            <Col xs={2}>
+              <Form.Control type='text' id='IDUbicacion' value={IDUbicacion} disabled size='sm' />
+            </Col>
+          </Row>
+          <br />
+          <Row>
+            <Col xs={2}>Ubicacion</Col>
+            <Col xs={10}>
+              <Form.Control
+                type='text'
+                id='Ubicacion'
+                value={Ubicacion}
+                size='sm'
+                onChange={(e) => {
+                  setUbicacion(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={deleteCatUbicacionesDialog}
+        onHide={() => {
+          setDeleteCatUbicacionesDialog(false)
+        }}
+      >
+        <Modal.Header closeButton>
+          <Modal.Title>Catalogo: Ubicaciones</Modal.Title>
+        </Modal.Header>
+        <Modal.Body>
+          <br />
+          <Row>
+            <Col xs={12}>
+              <Alert variant='warning'>
+                ¿Esta seguro de que desea eliminar la ubicacion: <br />
+                <span style={{ fontWeight: 'bold', fontSize: '20px' }}>{Ubicacion}</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>
+  )
+}

src/Components/Home/Home.tsx

@@ -1,9 +1,49 @@
-import React, { FC } from 'react'
+import { FC, useEffect } from 'react'
+import { useDispatch, useSelector } from 'react-redux'
 import { Outlet } from 'react-router-dom'
+import { RootState } from '../../store/store'
+import DSCatClientes from '../../Services/Catalogos/CatClientes.Services'
+import DSCatProveedores from '../../Services/Catalogos/CatProveedores.Services'
+import DSCatTipoUnidades from '../../Services/Catalogos/CatTipoUnidades.Services'
+import DSCatUbicaciones from '../../Services/Catalogos/CatUbicaciones.Services'
+import { populateCatClientes } from '../../store/features/Catalogos/CatClientesSlice'
+import { populateCatProveedores } from '../../store/features/Catalogos/CatProveedoresSlice'
+import { populateCatTipoUnidades } from '../../store/features/Catalogos/CatTipoUnidadesSlice'
+import { populateCatUbicaciones } from '../../store/features/Catalogos/CatUbicacionesSlice'
 
 interface IProps {}
 
 export const Home: FC<IProps> = (props) => {
+  const dispatch = useDispatch()
+  const UserLogued = useSelector((state: RootState) => state.UserProfile.UserProfile.logueado)
+
+  const ValidateToken = () => {
+    DSCatClientes.Get()
+      .then((response) => {
+        dispatch(populateCatClientes(response.data))
+      })
+      .catch((e: Error) => {})
+    DSCatProveedores.Get()
+      .then((response) => {
+        dispatch(populateCatProveedores(response.data))
+      })
+      .catch((e: Error) => {})
+    DSCatTipoUnidades.Get()
+      .then((response) => {
+        dispatch(populateCatTipoUnidades(response.data))
+      })
+      .catch((e: Error) => {})
+    DSCatUbicaciones.Get()
+      .then((response) => {
+        dispatch(populateCatUbicaciones(response.data))
+      })
+      .catch((e: Error) => {})
+  }
+
+  useEffect(() => {
+    ValidateToken()
+  }, [UserLogued])
+
   return (
     <div>
       <h1>This is the Alpha Omega Logistics landing page</h1>

src/Components/Home/Protected/Protected.tsx

@@ -1,12 +0,0 @@
-import React, { FC } from 'react'
-
-interface IProps {}
-
-/**
- * @author
- * @function @Protected
- **/
-
-export const Protected: FC<IProps> = (props) => {
-  return <div>Protected</div>
-}

src/Components/Login/Login.tsx

@@ -1,16 +1,14 @@
 import { FC, useEffect, useState } from 'react'
-import { Navigate, useNavigate } from 'react-router-dom'
+import { useNavigate } from 'react-router-dom'
 import IAuth from '../../Interfaces/Auth/IAuth'
 import DSAuth from '../../Services/Auth/Auth.Services'
 import { useDispatch, useSelector } from 'react-redux'
-import { MenuItemsSlice, populateMenuItems } from '../../store/features/Auth/MenuItemsSlice'
+import { populateMenuItems } from '../../store/features/Auth/MenuItemsSlice'
-import { UserProfileSlice, populateUserProfile } from '../../store/features/Auth/UserProfileSlice'
+import { populateUserProfile } from '../../store/features/Auth/UserProfileSlice'
-import { RootState } from '../../store/store'
 
 interface IProps {}
 
 export const Login: FC<IProps> = (props) => {
-  const MenuItems = useSelector((state: RootState) => state.MenuItems.MenuItems)
   const navigate = useNavigate()
   const dispatch = useDispatch()
   const [Usuario, setUsuario] = useState('')
@@ -31,30 +29,13 @@ export const Login: FC<IProps> = (props) => {
         setToken(response.data.token)
         dispatch(populateMenuItems(response.data.menu))
         dispatch(populateUserProfile(response.data.token))
-        window.location.href = 'http://localhost:3000/login'
+        navigate('/', { replace: true })
       })
       .catch((e: Error) => {
         alert('Credeciales invalidas!')
       })
   }
 
-  const ValidateToken = () => {
-    if (token.length > 10) {
-      DSAuth.Validate()
-        .then((response) => {
-          dispatch(populateUserProfile(token))
-          navigate('../Home', { replace: true })
-        })
-        .catch((e: Error) => {
-          // navigate('login', { replace: true })
-        })
-    }
-  }
-
-  useEffect(() => {
-    ValidateToken()
-  }, [])
-
   return (
     <div>
       <div className='Auth-form-container'>

src/Components/Logout/Logout.tsx

@@ -1,46 +1,25 @@
-import React, { FC, useEffect, useState } from 'react'
+import { FC, useEffect } from 'react'
 import { useDispatch } from 'react-redux'
 import { useNavigate } from 'react-router-dom'
-import { populateUserProfile } from '../../store/features/Auth/UserProfileSlice'
+import { resetUserProfile } from '../../store/features/Auth/UserProfileSlice'
-import DSAuth from '../../Services/Auth/Auth.Services'
+import { resetMenuItems } from '../../store/features/Auth/MenuItemsSlice'
+import { resetCatClientes } from '../../store/features/Catalogos/CatClientesSlice'
 
 interface IProps {}
 
 export const Logout: FC<IProps> = (props) => {
   const navigate = useNavigate()
   const dispatch = useDispatch()
-  const [token, setToken] = useState<string>(
-    (window.localStorage.getItem('token') ? window.localStorage.getItem('token') : '')!
-  )
 
   useEffect(() => {
     localStorage.removeItem('token')
     localStorage.removeItem('menu')
-    //localStorage.setItem('token', '')
+    dispatch(resetUserProfile(''))
-    //localStorage.setItem('menu', '')
+    dispatch(resetMenuItems(''))
-    dispatch(populateUserProfile(''))
+    dispatch(resetCatClientes(''))
-    //alert('debe regresar al login')
+    // alert('on logout')
-    window.location.href = 'http://localhost:3000'
+    navigate('/', { replace: true })
   }, [])
 
-  const ValidateToken = () => {
-    if (token.length > 10) {
-      DSAuth.Validate()
-        .then((response) => {
-          dispatch(populateUserProfile(''))
-          window.location.href = 'http://localhost:3000'
-        })
-        .catch((e: Error) => {
-          console.log('Debe de salir al login')
-          window.location.href = 'http://localhost:3000'
-        })
-    }
-  }
-
-  useEffect(() => {
-    ValidateToken()
-    console.log(token)
-  }, [token])
-
   return <div>Logout</div>
 }

src/Components/Navbar/Navbar.tsx

@@ -1,4 +1,3 @@
-import { useEffect, useState } from 'react'
 import { Container, Nav, Navbar, NavDropdown } from 'react-bootstrap'
 import { useSelector } from 'react-redux'
 import { Link } from 'react-router-dom'
@@ -16,7 +15,7 @@ function Submenu({ descripcion, menu }: Isubmenu) {
       <NavDropdown title={descripcion} id='basic-nav-dropdown'>
         {menu.map((item, index) => {
           return (
-            <NavDropdown.Item href={item.url} key={item.url}>
+            <NavDropdown.Item to={item.url} as={Link}>
               {item.descripcion}
             </NavDropdown.Item>
           )
@@ -27,19 +26,9 @@ function Submenu({ descripcion, menu }: Isubmenu) {
 }
 
 function AOLNavbar() {
-  //const MenuItems = useSelector((state: RootState) => state.MenuItems.MenuItems)
-  let _menu: IMenu[] = []
-  let mn: string = ''
-  const [menu, setMenu] = useState(localStorage.getItem('menu') ? localStorage.getItem('menu') : '')
-  const [mainMenu, setMainMenu] = useState(_menu)
   const UserLogued = useSelector((state: RootState) => state.UserProfile.UserProfile.logueado)
   const User = useSelector((state: RootState) => state.UserProfile.UserProfile.User)
-
+  const Menu = useSelector((state: RootState) => state.MenuItems.MenuItems)
-  useEffect(() => {
-    if (menu) {
-      setMainMenu(JSON.parse(menu))
-    }
-  }, [menu])
 
   return (
     <Navbar bg='light'>
@@ -48,15 +37,15 @@ function AOLNavbar() {
         <Navbar.Toggle />
         <Navbar.Collapse id='basic-navbar-nav'>
           <Nav className='me-auto'>
-            {mainMenu
+            {Menu
-              ? mainMenu.map((itemMenu, index) => {
+              ? Menu.map((itemMenu, index) => {
                   if (itemMenu.padreId === 0) {
                     return (
                       <>
                         <Submenu
                           descripcion={itemMenu.descripcion}
                           key={itemMenu.id}
-                          menu={mainMenu.filter(function (item) {
+                          menu={Menu.filter(function (item) {
                             return item.padreId === itemMenu.id
                           })}
                         />
@@ -67,7 +56,6 @@ function AOLNavbar() {
               : ''}
           </Nav>
         </Navbar.Collapse>
-
         <Navbar.Collapse className='justify-content-end'>
           {UserLogued ? (
             <Navbar.Text>

src/Components/ProtectedRoute/ProtectedRoute.tsx

@@ -1,32 +0,0 @@
-import { useEffect } from 'react'
-import { Navigate, useLocation } from 'react-router'
-
-export type ProtectedRouteProps = {
-  isAuthenticated: boolean
-  authenticationPath: string
-  redirectPath: string
-  setRedirectPath: (path: string) => void
-  outlet: JSX.Element
-}
-
-export default function ProtectedRoute({
-  isAuthenticated,
-  authenticationPath,
-  redirectPath,
-  setRedirectPath,
-  outlet,
-}: ProtectedRouteProps) {
-  const currentLocation = useLocation()
-
-  useEffect(() => {
-    if (!isAuthenticated) {
-      setRedirectPath(currentLocation.pathname)
-    }
-  }, [isAuthenticated, setRedirectPath, currentLocation])
-
-  if (isAuthenticated && redirectPath === currentLocation.pathname) {
-    return outlet
-  } else {
-    return <Navigate to={{ pathname: isAuthenticated ? redirectPath : authenticationPath }} />
-  }
-}

src/Components/ProtectedRoutes/ProtectedRoute.tsx

@@ -0,0 +1,11 @@
+import React, { FC } from 'react'
+import { useSelector } from 'react-redux'
+import { Navigate, Outlet } from 'react-router-dom'
+import { RootState } from '../../store/store'
+
+interface IProps {}
+
+export const ProtectedRoute: FC<IProps> = (props) => {
+  const UserLogued = useSelector((state: RootState) => state.UserProfile.UserProfile.logueado)
+  return UserLogued ? <Outlet /> : <Navigate to='login' />
+}

src/Components/Reportes/RptViajesPendientes.tsx

@@ -1,34 +1,7 @@
-import React, { FC, useEffect, useState } from 'react'
+import { FC } from 'react'
-import { Navigate, useNavigate } from 'react-router-dom'
-import { useDispatch } from 'react-redux'
-import DSAuth from '../../Services/Auth/Auth.Services'
-import { UserProfileSlice, populateUserProfile } from '../../store/features/Auth/UserProfileSlice'
 
 interface IProps {}
 
 export const RptViajesPendientes: FC<IProps> = (props) => {
-  const navigate = useNavigate()
-  const [token, setToken] = useState<string>(
-    (window.localStorage.getItem('token') ? window.localStorage.getItem('token') : '')!
-  )
-  const dispatch = useDispatch()
-
-  const ValidateToken = () => {
-    if (token.length > 10) {
-      DSAuth.Validate()
-        .then((response) => {
-          dispatch(populateUserProfile(token))
-        })
-        .catch((e: Error) => {
-          navigate('login', { replace: true })
-        })
-    }
-  }
-
-  useEffect(() => {
-    ValidateToken()
-    console.log(token)
-  }, [token])
-
   return <div>RptViajesPendientes</div>
 }

src/Interfaces/Catalogos/ICatClientes.ts

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

src/Interfaces/Catalogos/ICatProveedores.ts

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

src/Interfaces/Catalogos/ICatTipoUnidades.ts

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

src/Interfaces/Catalogos/ICatUbicaciones.ts

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

src/Interfaces/Respuestas/IRespuesta.ts

@@ -0,0 +1,3 @@
+export default interface IRespuesta {
+  Respuesta: string
+}

src/Services/Catalogos/CatClientes.Services.ts

@@ -0,0 +1,16 @@
+import http from "../../Services/Auth/config/http-common";
+import ICatClientes from "../../Interfaces/Catalogos/ICatClientes";
+import IRespuesta from "../../Interfaces/Respuestas/IRespuesta";
+
+class CatClientesDataService {
+  Get() {
+    return http.get<ICatClientes[]>("Catalogos/CatClientes/Get");
+  }
+  Append(data: ICatClientes) {
+    return http.post<ICatClientes>(`Catalogos/CatClientes/Append`,data);
+  }
+  Delete(id: number) {
+    return http.delete<IRespuesta>(`/Catalogos/CatClientes/Delete/${id}`);
+  }
+}
+export default new CatClientesDataService();

src/Services/Catalogos/CatProveedores.Services.ts

@@ -0,0 +1,16 @@
+import http from "../../Services/Auth/config/http-common";
+import ICatProveedores from "../../Interfaces/Catalogos/ICatProveedores";
+import IRespuesta from "../../Interfaces/Respuestas/IRespuesta";
+
+class CatProveedoresDataService {
+  Get() {
+    return http.get<ICatProveedores[]>("Catalogos/CatProveedores/Get");
+  }
+  Append(data: ICatProveedores) {
+    return http.post<ICatProveedores>(`Catalogos/CatProveedores/Append`,data);
+  }
+  Delete(id: number) {
+    return http.delete<IRespuesta>(`/Catalogos/CatProveedores/Delete/${id}`);
+  }
+}
+export default new CatProveedoresDataService();

src/Services/Catalogos/CatTipoUnidades.Services.ts

@@ -0,0 +1,16 @@
+import http from "../../Services/Auth/config/http-common";
+import ICatTipoUnidades from "../../Interfaces/Catalogos/ICatTipoUnidades";
+import IRespuesta from "../../Interfaces/Respuestas/IRespuesta";
+
+class CatTipoUnidadDataService {
+  Get() {
+    return http.get<ICatTipoUnidades[]>("Catalogos/CatTipoUnidad/Get");
+  }
+  Append(data: ICatTipoUnidades) {
+    return http.post<ICatTipoUnidades>(`Catalogos/CatTipoUnidad/Append`,data);
+  }
+  Delete(id: number) {
+    return http.delete<IRespuesta>(`Catalogos/CatTipoUnidad/Delete/${id}`);
+  }
+}
+export default new CatTipoUnidadDataService();

src/Services/Catalogos/CatUbicaciones.Services.ts

@@ -0,0 +1,16 @@
+import http from "../../Services/Auth/config/http-common";
+import ICatUbicaciones from "../../Interfaces/Catalogos/ICatUbicaciones";
+import IRespuesta from "../../Interfaces/Respuestas/IRespuesta";
+
+class CatUbicacionesDataService {
+  Get() {
+    return http.get<ICatUbicaciones[]>("Catalogos/CatUbicaciones/Get");
+  }
+  Append(data: ICatUbicaciones) {
+    return http.post<ICatUbicaciones>(`Catalogos/CatUbicaciones/Append`,data);
+  }
+  Delete(id: number) {
+    return http.delete<IRespuesta>(`Catalogos/CatUbicaciones/Delete/${id}`);
+  }
+}
+export default new CatUbicacionesDataService();

src/store/features/Auth/MenuItemsSlice.ts

@@ -7,6 +7,9 @@ export const MenuItemsSlice = createSlice({
   name: 'MenuItems',
   initialState: initialState,
   reducers: {
+    resetMenuItems : (state, action: PayloadAction<string>) => {
+      state.MenuItems =  []
+    },  
     populateMenuItems : (state, action: PayloadAction<IMenu[]>) => {
       //alert('populate IMenu '+JSON.stringify(action.payload))
      // state.MenuItems = [{ id:0, descripcion:'', padreId:0, posicion:0, url:''}]
@@ -18,5 +21,5 @@ export const MenuItemsSlice = createSlice({
   },
 })
 
-export const { populateMenuItems } = MenuItemsSlice.actions;
+export const { resetMenuItems, populateMenuItems } = MenuItemsSlice.actions;
 export default MenuItemsSlice.reducer;

src/store/features/Auth/UserProfileSlice.ts

@@ -9,6 +9,9 @@ export const UserProfileSlice = createSlice({
   name: 'UserProfile',
   initialState: initialState,
   reducers: {
+    resetUserProfile : (state, action: PayloadAction<string>) => {
+      state.UserProfile =  { token:'', logueado: false, User:'', IDUser: '', Department: '', UserType: ''  }
+    },  
     populateUserProfile : (state, action: PayloadAction<string>) => {
       state.UserProfile.token = action.payload
       var values: IjwtStructure = jwt_decode(action.payload)
@@ -24,5 +27,5 @@ export const UserProfileSlice = createSlice({
   },
 })
 
-export const { populateUserProfile, setStatus } = UserProfileSlice.actions;
+export const { resetUserProfile, populateUserProfile, setStatus } = UserProfileSlice.actions;
 export default UserProfileSlice.reducer;

src/store/features/Catalogos/CatClientesSlice.ts

@@ -0,0 +1,32 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit'
+import ICatClientes from '../../../Interfaces/Catalogos/ICatClientes'
+const CatClientes: ICatClientes[] = []
+const initialState = { CatClientes }
+
+export const CatClientesSlice = createSlice({
+  name: 'CatClientes',
+  initialState: initialState,
+  reducers: {
+    resetCatClientes : (state, action: PayloadAction<string>) => {
+      state.CatClientes =  []
+    },  
+    populateCatClientes : (state, action: PayloadAction<ICatClientes[]>) => {
+        action.payload.forEach(element => {
+            const index = state.CatClientes.findIndex(object => object.id === element.id)
+            if (index<0) state.CatClientes.push(element)
+        })
+    },
+    updateCatClientes : (state, action: PayloadAction<ICatClientes>) => {
+      const i = state.CatClientes.findIndex(_element => _element.id === action.payload.id);
+      if (i > -1) state.CatClientes[i] = action.payload;
+      else state.CatClientes.push(action.payload);
+    },
+    deleteCatClientes : (state, action: PayloadAction<number>) => {
+      const newArr = state.CatClientes.filter(data => data.id != action.payload);
+      state.CatClientes=newArr
+    },
+  },
+})
+
+export const { resetCatClientes, populateCatClientes, updateCatClientes, deleteCatClientes } = CatClientesSlice.actions;
+export default CatClientesSlice.reducer;

src/store/features/Catalogos/CatProveedoresSlice.ts

@@ -0,0 +1,32 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit'
+import ICatProveedores from '../../../Interfaces/Catalogos/ICatProveedores'
+const CatProveedores: ICatProveedores[] = []
+const initialState = { CatProveedores }
+
+export const CatProveedoresSlice = createSlice({
+  name: 'CatProveedores',
+  initialState: initialState,
+  reducers: {
+    resetCatProveedores : (state, action: PayloadAction<string>) => {
+      state.CatProveedores =  []
+    },  
+    populateCatProveedores : (state, action: PayloadAction<ICatProveedores[]>) => {
+        action.payload.forEach(element => {
+            const index = state.CatProveedores.findIndex(object => object.id === element.id)
+            if (index<0) state.CatProveedores.push(element)
+        })
+    },
+    updateCatProveedores : (state, action: PayloadAction<ICatProveedores>) => {
+      const i = state.CatProveedores.findIndex(_element => _element.id === action.payload.id);
+      if (i > -1) state.CatProveedores[i] = action.payload;
+      else state.CatProveedores.push(action.payload);
+    },
+    deleteCatProveedores : (state, action: PayloadAction<number>) => {
+      const newArr = state.CatProveedores.filter(data => data.id != action.payload);
+      state.CatProveedores=newArr
+    },
+  },
+})
+
+export const { resetCatProveedores, populateCatProveedores, updateCatProveedores, deleteCatProveedores } = CatProveedoresSlice.actions;
+export default CatProveedoresSlice.reducer;

src/store/features/Catalogos/CatTipoUnidadesSlice.ts

@@ -0,0 +1,32 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit'
+import ICatTipoUnidades from '../../../Interfaces/Catalogos/ICatTipoUnidades'
+const CatTipoUnidades: ICatTipoUnidades[] = []
+const initialState = { CatTipoUnidades }
+
+export const CatTipoUnidadesSlice = createSlice({
+  name: 'CatTipoUnidades',
+  initialState: initialState,
+  reducers: {
+    resetCatTipoUnidades : (state, action: PayloadAction<string>) => {
+      state.CatTipoUnidades =  []
+    },  
+    populateCatTipoUnidades : (state, action: PayloadAction<ICatTipoUnidades[]>) => {
+        action.payload.forEach(element => {
+            const index = state.CatTipoUnidades.findIndex(object => object.id === element.id)
+            if (index<0) state.CatTipoUnidades.push(element)
+        })
+    },
+    updateCatTipoUnidades : (state, action: PayloadAction<ICatTipoUnidades>) => {
+      const i = state.CatTipoUnidades.findIndex(_element => _element.id === action.payload.id);
+      if (i > -1) state.CatTipoUnidades[i] = action.payload;
+      else state.CatTipoUnidades.push(action.payload);
+    },
+    deleteCatTipoUnidades : (state, action: PayloadAction<number>) => {
+      const newArr = state.CatTipoUnidades.filter(data => data.id != action.payload);
+      state.CatTipoUnidades=newArr
+    },
+  },
+})
+
+export const { resetCatTipoUnidades, populateCatTipoUnidades, updateCatTipoUnidades, deleteCatTipoUnidades } = CatTipoUnidadesSlice.actions;
+export default CatTipoUnidadesSlice.reducer;

src/store/features/Catalogos/CatUbicacionesSlice.ts

@@ -0,0 +1,32 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit'
+import ICatUbicaciones from '../../../Interfaces/Catalogos/ICatUbicaciones'
+const CatUbicaciones: ICatUbicaciones[] = []
+const initialState = { CatUbicaciones }
+
+export const CatUbicacionesSlice = createSlice({
+  name: 'CatUbicaciones',
+  initialState: initialState,
+  reducers: {
+    resetCatUbicaciones : (state, action: PayloadAction<string>) => {
+      state.CatUbicaciones =  []
+    },  
+    populateCatUbicaciones : (state, action: PayloadAction<ICatUbicaciones[]>) => {
+        action.payload.forEach(element => {
+            const index = state.CatUbicaciones.findIndex(object => object.id === element.id)
+            if (index<0) state.CatUbicaciones.push(element)
+        })
+    },
+    updateCatUbicaciones : (state, action: PayloadAction<ICatUbicaciones>) => {
+      const i = state.CatUbicaciones.findIndex(_element => _element.id === action.payload.id);
+      if (i > -1) state.CatUbicaciones[i] = action.payload;
+      else state.CatUbicaciones.push(action.payload);
+    },
+    deleteCatUbicaciones : (state, action: PayloadAction<number>) => {
+      const newArr = state.CatUbicaciones.filter(data => data.id != action.payload);
+      state.CatUbicaciones=newArr
+    },
+  },
+})
+
+export const { resetCatUbicaciones, populateCatUbicaciones, updateCatUbicaciones, deleteCatUbicaciones } = CatUbicacionesSlice.actions;
+export default CatUbicacionesSlice.reducer;

src/store/hooks.ts

@@ -1,6 +0,0 @@
-import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux'
-import type { RootState, AppDispatch } from './store'
-
-// Use throughout your app instead of plain `useDispatch` and `useSelector`
-export const useAppDispatch = () => useDispatch<AppDispatch>()
-export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector

src/store/store.ts

@@ -1,11 +1,20 @@
 import { configureStore } from '@reduxjs/toolkit'
+import { CatClientes } from '../Components/Catalogos/CatClientes'
 import { MenuItemsSlice } from './features/Auth/MenuItemsSlice'
 import { UserProfileSlice } from './features/Auth/UserProfileSlice'
+import { CatClientesSlice } from './features/Catalogos/CatClientesSlice'
+import { CatProveedoresSlice } from './features/Catalogos/CatProveedoresSlice'
+import { CatTipoUnidadesSlice } from './features/Catalogos/CatTipoUnidadesSlice'
+import { CatUbicacionesSlice } from './features/Catalogos/CatUbicacionesSlice'
 
 export const store = configureStore({
   reducer: {
     MenuItems: MenuItemsSlice.reducer,
-    UserProfile: UserProfileSlice.reducer
+    UserProfile: UserProfileSlice.reducer,
+    CatClientes: CatClientesSlice.reducer,
+    CatProveedores: CatProveedoresSlice.reducer,
+    CatTipoUnidades: CatTipoUnidadesSlice.reducer,
+    CatUbicaciones: CatUbicacionesSlice.reducer
   }
 })
 

yarn.lock

@@ -75,7 +75,7 @@
     "@jridgewell/gen-mapping" "^0.3.2"
     jsesc "^2.5.1"
 
-"@babel/helper-annotate-as-pure@^7.18.6":
+"@babel/helper-annotate-as-pure@^7.16.0", "@babel/helper-annotate-as-pure@^7.18.6":
   version "7.18.6"
   resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.18.6.tgz#eaa49f6f80d5a33f9a5dd2276e6d6e451be0a6bb"
   integrity sha512-duORpUiYrEpzKIop6iNbjnwKLAKnJ47csTyRACyEmWj0QdUrm5aqNJGHSSEQSUAvNW0ojX0dOmK9dZduvkfeXA==
@@ -167,7 +167,7 @@
   dependencies:
     "@babel/types" "^7.18.9"
 
-"@babel/helper-module-imports@^7.10.4", "@babel/helper-module-imports@^7.18.6":
+"@babel/helper-module-imports@^7.0.0", "@babel/helper-module-imports@^7.10.4", "@babel/helper-module-imports@^7.16.0", "@babel/helper-module-imports@^7.18.6":
   version "7.18.6"
   resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.18.6.tgz#1e3ebdbbd08aad1437b428c50204db13c5a3ca6e"
   integrity sha512-0NFvs3VkuSYbFi1x2Vd6tKrywq+z/cLeYC/RJNFrIX/30Bf5aiGYbtvGXolEktzJH8o5E5KJ3tT+nkxuuZFVlA==
@@ -1051,7 +1051,7 @@
     "@babel/parser" "^7.18.10"
     "@babel/types" "^7.18.10"
 
-"@babel/traverse@^7.18.11", "@babel/traverse@^7.18.13", "@babel/traverse@^7.18.9", "@babel/traverse@^7.7.2":
+"@babel/traverse@^7.18.11", "@babel/traverse@^7.18.13", "@babel/traverse@^7.18.9", "@babel/traverse@^7.4.5", "@babel/traverse@^7.7.2":
   version "7.18.13"
   resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.18.13.tgz#5ab59ef51a997b3f10c4587d648b9696b6cb1a68"
   integrity sha512-N6kt9X1jRMLPxxxPYWi7tgvJRH/rtoU+dbKAPDM44RFHiMH8igdsaSBgFeskhSl/kLWLDUvIh1RXCrTmg0/zvA==
@@ -1192,6 +1192,28 @@
   resolved "https://registry.yarnpkg.com/@csstools/selector-specificity/-/selector-specificity-2.0.2.tgz#1bfafe4b7ed0f3e4105837e056e0a89b108ebe36"
   integrity sha512-IkpVW/ehM1hWKln4fCA3NzJU8KwD+kIOvPZA4cqxoJHtE21CCzjyp+Kxbu0i5I4tBNOlXPL9mjwnWlL0VEG4Fg==
 
+"@emotion/is-prop-valid@^1.1.0":
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-1.2.0.tgz#7f2d35c97891669f7e276eb71c83376a5dc44c83"
+  integrity sha512-3aDpDprjM0AwaxGE09bOPkNxHpBd+kA6jty3RnaEXdweX1DF1U3VQpPYb0g1IStAuK7SVQ1cy+bNBBKp4W3Fjg==
+  dependencies:
+    "@emotion/memoize" "^0.8.0"
+
+"@emotion/memoize@^0.8.0":
+  version "0.8.0"
+  resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.8.0.tgz#f580f9beb67176fa57aae70b08ed510e1b18980f"
+  integrity sha512-G/YwXTkv7Den9mXDO7AhLWkE3q+I92B+VqAE+dYG4NGPaHZGvt3G8Q0p9vmE+sq7rTGphUbAvmQ9YpbfMQGGlA==
+
+"@emotion/stylis@^0.8.4":
+  version "0.8.5"
+  resolved "https://registry.yarnpkg.com/@emotion/stylis/-/stylis-0.8.5.tgz#deacb389bd6ee77d1e7fcaccce9e16c5c7e78e04"
+  integrity sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==
+
+"@emotion/unitless@^0.7.4":
+  version "0.7.5"
+  resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.5.tgz#77211291c1900a700b8a78cfafda3160d76949ed"
+  integrity sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==
+
 "@eslint/eslintrc@^1.3.0":
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-1.3.0.tgz#29f92c30bb3e771e4a2048c95fa6855392dfac4f"
@@ -2794,6 +2816,22 @@ babel-plugin-polyfill-regenerator@^0.4.0:
   dependencies:
     "@babel/helper-define-polyfill-provider" "^0.3.2"
 
+"babel-plugin-styled-components@>= 1.12.0":
+  version "2.0.7"
+  resolved "https://registry.yarnpkg.com/babel-plugin-styled-components/-/babel-plugin-styled-components-2.0.7.tgz#c81ef34b713f9da2b7d3f5550df0d1e19e798086"
+  integrity sha512-i7YhvPgVqRKfoQ66toiZ06jPNA3p6ierpfUuEWxNF+fV27Uv5gxBkf8KZLHUCc1nFA9j6+80pYoIpqCeyW3/bA==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.16.0"
+    "@babel/helper-module-imports" "^7.16.0"
+    babel-plugin-syntax-jsx "^6.18.0"
+    lodash "^4.17.11"
+    picomatch "^2.3.0"
+
+babel-plugin-syntax-jsx@^6.18.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz#0af32a9a6e13ca7a3fd5069e62d7b0f58d0d8946"
+  integrity sha512-qrPaCSo9c8RHNRHIotaufGbuOBN8rtdC4QrrFFc43vyWCCz7Kl7GL1PGaXtMGQZUXrkCjNEgxDfmAuAabr/rlw==
+
 babel-plugin-transform-react-remove-prop-types@^0.4.24:
   version "0.4.24"
   resolved "https://registry.yarnpkg.com/babel-plugin-transform-react-remove-prop-types/-/babel-plugin-transform-react-remove-prop-types-0.4.24.tgz#f2edaf9b4c6a5fbe5c1d678bfb531078c1555f3a"
@@ -3020,6 +3058,11 @@ camelcase@^6.2.0, camelcase@^6.2.1:
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-6.3.0.tgz#5685b95eb209ac9c0c177467778c9c84df58ba9a"
   integrity sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==
 
+camelize@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/camelize/-/camelize-1.0.0.tgz#164a5483e630fa4321e5af07020e531831b2609b"
+  integrity sha512-W2lPwkBkMZwFlPCXhIlYgxu+7gC/NUlCtdK652DAJ1JdgV0sTrvuPFshNPrFa1TY2JOkLhgdeEBplB4ezEa+xg==
+
 caniuse-api@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/caniuse-api/-/caniuse-api-3.0.0.tgz#5e4d90e2274961d46291997df599e3ed008ee4c0"
@@ -3351,6 +3394,11 @@ css-blank-pseudo@^3.0.3:
   dependencies:
     postcss-selector-parser "^6.0.9"
 
+css-color-keywords@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/css-color-keywords/-/css-color-keywords-1.0.0.tgz#fea2616dc676b2962686b3af8dbdbe180b244e05"
+  integrity sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==
+
 css-declaration-sorter@^6.3.0:
   version "6.3.0"
   resolved "https://registry.yarnpkg.com/css-declaration-sorter/-/css-declaration-sorter-6.3.0.tgz#72ebd995c8f4532ff0036631f7365cce9759df14"
@@ -3420,6 +3468,15 @@ css-select@^4.1.3:
     domutils "^2.8.0"
     nth-check "^2.0.1"
 
+css-to-react-native@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/css-to-react-native/-/css-to-react-native-3.0.0.tgz#62dbe678072a824a689bcfee011fc96e02a7d756"
+  integrity sha512-Ro1yETZA813eoyUp2GDBhG2j+YggidUmzO1/v9eYBKR2EHVEniE2MI/NqpTQ954BMpTPZFsGNPm46qFB9dpaPQ==
+  dependencies:
+    camelize "^1.0.0"
+    css-color-keywords "^1.0.0"
+    postcss-value-parser "^4.0.2"
+
 css-tree@1.0.0-alpha.37:
   version "1.0.0-alpha.37"
   resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-1.0.0-alpha.37.tgz#98bebd62c4c1d9f960ec340cf9f7522e30709a22"
@@ -4789,7 +4846,7 @@ history@^5.2.0:
   dependencies:
     "@babel/runtime" "^7.7.6"
 
-hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.2:
+hoist-non-react-statics@^3.0.0, hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.2:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
   integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
@@ -6044,7 +6101,7 @@ lodash.uniq@^4.5.0:
   resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
   integrity sha512-xfBaXQd9ryd9dlSDvnvI0lvxfLJlYAZzXomUYzLKtUeOQvOP5piqAWuGtrhWeqaXK9hhoM/iyJc5AV+XfsX3HQ==
 
-lodash@^4.17.15, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.7.0:
+lodash@^4.17.11, lodash@^4.17.15, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.7.0:
   version "4.17.21"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
@@ -6605,7 +6662,7 @@ picocolors@^1.0.0:
   resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c"
   integrity sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==
 
-picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.2.2, picomatch@^2.2.3, picomatch@^2.3.1:
+picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.2.2, picomatch@^2.2.3, picomatch@^2.3.0, picomatch@^2.3.1:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42"
   integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==
@@ -7164,7 +7221,7 @@ postcss-unique-selectors@^5.1.1:
   dependencies:
     postcss-selector-parser "^6.0.5"
 
-postcss-value-parser@^4.0.0, postcss-value-parser@^4.1.0, postcss-value-parser@^4.2.0:
+postcss-value-parser@^4.0.0, postcss-value-parser@^4.0.2, postcss-value-parser@^4.1.0, postcss-value-parser@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514"
   integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
@@ -7369,6 +7426,13 @@ react-bootstrap@^2.5.0:
     uncontrollable "^7.2.1"
     warning "^4.0.3"
 
+react-data-table-component@^7.5.3:
+  version "7.5.3"
+  resolved "https://registry.yarnpkg.com/react-data-table-component/-/react-data-table-component-7.5.3.tgz#a008b4c281574cc1a81315e2c1b34107b5d18fe0"
+  integrity sha512-JhatRTgThAAa1HobPaPmkNPsjLT6+fnMIdtcXRCy+0bSYN7XJnTgob9Qyi4bjHh/8tMPTHtxZCV/TKiPwRvFMA==
+  dependencies:
+    deepmerge "^4.2.2"
+
 react-dev-utils@^12.0.1:
   version "12.0.1"
   resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-12.0.1.tgz#ba92edb4a1f379bd46ccd6bcd4e7bc398df33e73"
@@ -7412,6 +7476,11 @@ react-error-overlay@^6.0.11:
   resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.11.tgz#92835de5841c5cf08ba00ddd2d677b6d17ff9adb"
   integrity sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==
 
+react-icons@^4.4.0:
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-4.4.0.tgz#a13a8a20c254854e1ec9aecef28a95cdf24ef703"
+  integrity sha512-fSbvHeVYo/B5/L4VhB7sBA1i2tS8MkT0Hb9t2H1AVPkwGfVHLJCqyr2Py9dKMxsyM63Eng1GkdZfbWj+Fmv8Rg==
+
 react-is@^16.13.1, react-is@^16.3.2, react-is@^16.7.0:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
@@ -7973,6 +8042,11 @@ setprototypeof@1.2.0:
   resolved "https://registry.yarnpkg.com/setprototypeof/-/setprototypeof-1.2.0.tgz#66c9a24a73f9fc28cbe66b09fed3d33dcaf1b424"
   integrity sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==
 
+shallowequal@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/shallowequal/-/shallowequal-1.1.0.tgz#188d521de95b9087404fd4dcb68b13df0ae4e7f8"
+  integrity sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==
+
 shebang-command@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-2.0.0.tgz#ccd0af4f8835fbdc265b82461aaf0c36663f34ea"
@@ -8268,6 +8342,22 @@ style-loader@^3.3.1:
   resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-3.3.1.tgz#057dfa6b3d4d7c7064462830f9113ed417d38575"
   integrity sha512-GPcQ+LDJbrcxHORTRes6Jy2sfvK2kS6hpSfI/fXhPt+spVzxF6LJ1dHLN9zIGmVaaP044YKaIatFaufENRiDoQ==
 
+styled-components@^5.3.5:
+  version "5.3.5"
+  resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-5.3.5.tgz#a750a398d01f1ca73af16a241dec3da6deae5ec4"
+  integrity sha512-ndETJ9RKaaL6q41B69WudeqLzOpY1A/ET/glXkNZ2T7dPjPqpPCXXQjDFYZWwNnE5co0wX+gTCqx9mfxTmSIPg==
+  dependencies:
+    "@babel/helper-module-imports" "^7.0.0"
+    "@babel/traverse" "^7.4.5"
+    "@emotion/is-prop-valid" "^1.1.0"
+    "@emotion/stylis" "^0.8.4"
+    "@emotion/unitless" "^0.7.4"
+    babel-plugin-styled-components ">= 1.12.0"
+    css-to-react-native "^3.0.0"
+    hoist-non-react-statics "^3.0.0"
+    shallowequal "^1.1.0"
+    supports-color "^5.5.0"
+
 stylehacks@^5.1.0:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/stylehacks/-/stylehacks-5.1.0.tgz#a40066490ca0caca04e96c6b02153ddc39913520"
@@ -8276,7 +8366,7 @@ stylehacks@^5.1.0:
     browserslist "^4.16.6"
     postcss-selector-parser "^6.0.4"
 
-supports-color@^5.3.0:
+supports-color@^5.3.0, supports-color@^5.5.0:
   version "5.5.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
   integrity sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==