Merge branch 'gabshr' into dayana

47 files changed, 2507 insertions, 25 deletions

diff --git a/front/odiparpack/app/components/Odipar/EtiquetaData.js b/front/odiparpack/app/components/Odipar/EtiquetaData.js
index a2f262d..e005f4d 100644
--- a/front/odiparpack/app/components/Odipar/EtiquetaData.js
+++ b/front/odiparpack/app/components/Odipar/EtiquetaData.js
@@ -51,8 +51,8 @@ export const pedido = {
     } 
   }
   
-  //Bloqueos
-  export const bloqueo = {
+  //Rutas
+  export const ruta = {
     desbloqueado: {
       text: "Disponible",
       color: "#81C784",
@@ -65,6 +65,25 @@ export const pedido = {
     } 
   }
 
+  //Bloqueos
+  export const bloqueo = {
+    pendiente:{
+      text: "Pendiente",
+      color: "#FFB74D",
+      icon: false
+    },
+    bloqueado:{
+      text: "Bloqueado",
+      color: "#E57373",
+      icon: false
+    },
+    finalizado: {
+      text: "Finalizado",
+      color: "#81C784",
+      icon: false
+    }
+  }
+
   //Almacen
   export const almacen = {
     noPrincipal: {
@@ -77,4 +96,41 @@ export const pedido = {
       color: "#DED8D8",
       icon: 16
     } 
-  }
\ No newline at end of file
+  }
+
+  //Averia - tipo
+  export const tipoAveria = {
+    moderada: {
+      text: "Moderada",
+      color: "#ff8b55",
+      icon: false
+    },
+    fuerte:{
+      text: "Fuerte",
+      color: "#ff3816",
+      icon: false
+    },
+    siniestra:{
+      text: "Siniestra",
+      color: "#c20000",
+      icon: false
+    } 
+  }
+// Averia - estado
+  export const estadoAveria = {
+    pendiente:{
+      text: "Pendiente",
+      color: "#FFB74D",
+      icon: false
+    },
+    bloqueado:{
+      text: "Bloqueado",
+      color: "#E57373",
+      icon: false
+    },
+    finalizado: {
+      text: "Finalizado",
+      color: "#81C784",
+      icon: false
+    }
+  }
diff --git a/front/odiparpack/app/components/Odipar/common.js b/front/odiparpack/app/components/Odipar/common.js
index b6fb49d..77f937d 100644
--- a/front/odiparpack/app/components/Odipar/common.js
+++ b/front/odiparpack/app/components/Odipar/common.js
@@ -1,6 +1,6 @@
 import React from "react"
 import { Chip } from "@material-ui/core";
-import { pedido, camion, bloqueo, almacen } from './EtiquetaData'
+import { pedido, camion, bloqueo, almacen, ruta, tipoAveria, estadoAveria } from './EtiquetaData'
 import Brightness1Icon from '@material-ui/icons/Brightness1';
 
 export const etiquetaStyle = color => ({
@@ -26,6 +26,18 @@ export function etiqueta(tipo , estado) { // eslint-disable-line
       text = bloqueo[Object.keys(bloqueo)[estado]].text
       color = bloqueo[Object.keys(bloqueo)[estado]].color
       break;
+    case 'etiq_ruta': 
+      text = ruta[Object.keys(ruta)[estado]].text
+      color = ruta[Object.keys(ruta)[estado]].color
+      break;
+    case 'etiq_tipoAveria': 
+      text = tipoAveria[Object.keys(tipoAveria)[estado]].text
+      color = tipoAveria[Object.keys(tipoAveria)[estado]].color
+      break;
+    case 'etiq_estadoAveria': 
+      text = estadoAveria[Object.keys(estadoAveria)[estado]].text
+      color = estadoAveria[Object.keys(estadoAveria)[estado]].color
+      break;
     case 'etiq_alma': 
       let {estadoNum} = 2
       estado === false? estadoNum = 0 : estadoNum = 1
diff --git a/front/odiparpack/app/components/Tables/CrudTableForm.js b/front/odiparpack/app/components/Tables/CrudTableForm.js
index 017a3fc..8b7e6d5 100644
--- a/front/odiparpack/app/components/Tables/CrudTableForm.js
+++ b/front/odiparpack/app/components/Tables/CrudTableForm.js
@@ -5,16 +5,16 @@ import MainTableForm from './tableParts/MainTableForm';
 import FloatingPanel from './../Panel/FloatingPanel';
 
 class CrudTableForm extends React.Component {
-  /* componentDidMount(){
+  componentDidMount(){
     this.props.fetchData(this.props.dataInit, this.props.branch);
-  } */
+  }
 
-  componentDidUpdate(previousProps) {
+ /*  componentDidUpdate(previousProps) {
     if (previousProps.dataInit !== this.props.dataInit) {
       //console.log("en el FORM",this.props.dataInit)}
       this.props.fetchData(this.props.dataInit, this.props.branch);
     }
-  }
+  } */
 
   sendValues = (values) => {
     setTimeout(() => {
diff --git a/front/odiparpack/app/components/Tables/CrudTableForm2.js b/front/odiparpack/app/components/Tables/CrudTableForm2.js
new file mode 100644
index 0000000..dd24aec
--- /dev/null
+++ b/front/odiparpack/app/components/Tables/CrudTableForm2.js
@@ -0,0 +1,101 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Form from './tableParts/Form';
+import MainTableForm from './tableParts/MainTableForm';
+import FloatingPanel from '../Panel/FloatingPanel';
+
+class CrudTableForm extends React.Component {
+  /* componentDidMount(){
+    this.props.fetchData(this.props.dataInit, this.props.branch);
+  } */
+
+  componentDidUpdate(previousProps) {
+    if (previousProps.dataInit !== this.props.dataInit) {
+      //console.log("en el FORM",this.props.dataInit)}
+      this.props.fetchData(this.props.dataInit, this.props.branch);
+    }
+  }
+
+  sendValues = (values) => {
+    setTimeout(() => {
+      this.props.submit(values, this.props.branch);
+    }, 500);
+    if (this.props.editingId === this.props.initValues.get('id')) {
+      this.props.dispatch(this.props.editRowAPI()).then((res) => {
+        if (res) {
+            console.log("EDIT RO ", res)
+        }
+      })
+    } else {
+      this.props.dispatch(this.props.addNewAPI()).then((res) => {
+        if (res) {
+            console.log("ADD NEW FORM ", res)
+        }
+      })
+    }
+    
+  }
+
+  getTitle( ){
+    if (this.props.editingId === this.props.initValues.get(this.props.anchor[0].name)) {
+      return "Editar"
+    } 
+    return "Añadir nuevo"
+  }
+
+  render() {
+    const {
+      title,
+      dataTable,
+      openForm,
+      closeForm,
+      removeRow,
+      addNew,
+      editRow,
+      anchor,
+      children,
+      branch,
+      initValues,
+      removeRowAPI
+    } = this.props;
+    return (
+      <div>
+        
+        <FloatingPanel openForm={openForm} branch={branch} closeForm={closeForm} title = {this.getTitle()}>
+          <Form onSubmit={this.sendValues} initValues={initValues} branch={branch}>
+            {children}
+          </Form>
+        </FloatingPanel>
+        <MainTableForm
+          title={title}
+          addNew={addNew}
+          items={dataTable}
+          removeRow={removeRow}
+          editRow={editRow}
+          anchor={anchor}
+          branch={branch}
+          removeRowAPI={removeRowAPI}
+        />
+      </div>
+    );
+  }
+}
+
+CrudTableForm.propTypes = {
+  title: PropTypes.string.isRequired,
+  anchor: PropTypes.array.isRequired,
+  dataInit: PropTypes.array.isRequired,
+  dataTable: PropTypes.object.isRequired,
+  fetchData: PropTypes.func.isRequired,
+  submit: PropTypes.func.isRequired,
+  addNew: PropTypes.func.isRequired,
+  openForm: PropTypes.bool.isRequired,
+  closeForm: PropTypes.func.isRequired,
+  removeRow: PropTypes.func.isRequired,
+  editRow: PropTypes.func.isRequired,
+  children: PropTypes.node.isRequired,
+  initValues: PropTypes.object.isRequired,
+  branch: PropTypes.string.isRequired,
+};
+
+export default CrudTableForm;
diff --git a/front/odiparpack/app/components/Tables/tableParts/RowReadOnly.js b/front/odiparpack/app/components/Tables/tableParts/RowReadOnly.js
index d060d02..f6be3fd 100644
--- a/front/odiparpack/app/components/Tables/tableParts/RowReadOnly.js
+++ b/front/odiparpack/app/components/Tables/tableParts/RowReadOnly.js
@@ -46,6 +46,9 @@ class RowReadOnly extends React.Component {
           case 'etiq_camion':
           case 'etiq_bloqueo': 
           case 'etiq_alma':
+          case 'etiq_ruta':
+          case 'etiq_tipoAveria':
+          case 'etiq_estadoAveria':
             return (
               <TableCell padding="none" key={index.toString()}>
                 {etiqueta(inputType, item.get(itemCell.name))}
@@ -57,6 +60,13 @@ class RowReadOnly extends React.Component {
                 {item.get(itemCell.name) !== undefined ? item.get(itemCell.name).toString() : ''}
               </TableCell>
             );
+          case 'averia_ubicacion':
+            return (
+              <TableCell padding="none" key={index.toString()}>
+                Longitud: {item.get('longitud') !== undefined ? item.get('longitud').toString() : ''}
+                {'\u00A0'} Latitud: {item.get('latitud') !== undefined ? item.get('latitud').toString() : ''}
+              </TableCell>
+            );
         }
       }
       return false;
diff --git a/front/odiparpack/app/components/Tables/tableParts/tableStyle-jss.js b/front/odiparpack/app/components/Tables/tableParts/tableStyle-jss.js
index bede0b8..bef1ac7 100644
--- a/front/odiparpack/app/components/Tables/tableParts/tableStyle-jss.js
+++ b/front/odiparpack/app/components/Tables/tableParts/tableStyle-jss.js
@@ -6,7 +6,7 @@ const styles = theme => ({
   rootTable: {
     width: '100%',
     marginTop: theme.spacing(3),
-    overflowX: 'auto',
+    overflowX: 'hidden',
   },
   highlight:
     theme.palette.type === 'light' ? {
diff --git a/front/odiparpack/app/components/index.js b/front/odiparpack/app/components/index.js
index 123b48c..e1903fc 100644
--- a/front/odiparpack/app/components/index.js
+++ b/front/odiparpack/app/components/index.js
@@ -23,6 +23,7 @@ export MapWidget from './Widget/MapWidget';
 export TreeTable from './Tables/TreeTable';
 export CrudTable from './Tables/CrudTable';
 export CrudTableForm from './Tables/CrudTableForm';
+export CrudTableForm2 from './Tables/CrudTableForm2';
 export AdvTable from './Tables/AdvTable';
 export EmptyData from './Tables/EmptyData';
 // Form
diff --git a/front/odiparpack/app/containers/App/Application.js b/front/odiparpack/app/containers/App/Application.js
index 8a30720..0e637b0 100644
--- a/front/odiparpack/app/containers/App/Application.js
+++ b/front/odiparpack/app/containers/App/Application.js
@@ -26,8 +26,8 @@ import {
   Photos, Error, Settings,
   HelpSupport, MapMarker, MapDirection, SearchMap,
   TrafficIndicator, StreetViewMap, NotFound, 
-  Pedidos,
-  Almacenes
+  Pedidos, Almacenes, Camiones, Tramos, 
+  Simulacion7Dias, SimulacionMain
 } from '../pageListAsync';
 
 function Application(props) {
@@ -38,9 +38,13 @@ function Application(props) {
       <Switch>
         <Route exact path="/app" component={DashboardV1} />
         <Route exact path="/app/dashboard-v2" component={DashboardV2} />
-        {/* Pedidos */}
+        {/* OdiparPack */}
+        <Route exact path="/app/simulacion" component={Simulacion7Dias}/>
         <Route exact path="/app/pedidos" component={Pedidos}/>
         <Route exact path="/app/almacenes" component={Almacenes}/>
+        <Route exact path="/app/camiones" component={Camiones}/>
+        <Route exact path="/app/tramos" component={Tramos}/>
+        <Route exact path="/app/simulacion/main" component={SimulacionMain}/>
         { /* Layout */ }
         <Route exact path="/app/layouts" component={Parent} />
         <Route path="/app/layouts/grid" component={Grid} />
diff --git a/front/odiparpack/app/containers/Odipar/Almacen/table/CrudAlmacen.js b/front/odiparpack/app/containers/Odipar/Almacen/table/CrudAlmacen.js
index 887d603..c56a9a9 100644
--- a/front/odiparpack/app/containers/Odipar/Almacen/table/CrudAlmacen.js
+++ b/front/odiparpack/app/containers/Odipar/Almacen/table/CrudAlmacen.js
@@ -12,7 +12,7 @@ import {
   editAction,
   closeNotifAction
 } from 'ba-actions/CrudTbFrmActions';
-import { CrudTableForm, Notification } from 'ba-components';
+import { CrudTableForm2, Notification } from 'ba-components';
 import {
   Paper,
   RadioGroup,
@@ -69,7 +69,7 @@ class CrudAlmacen extends Component {
       <div>
         <Notification close={() => closeNotif(branch)} variant = "success" message={messageNotif} />
         <Paper className={classes.root}>
-          <CrudTableForm
+          <CrudTableForm2
             dataTable={dataTable}
             openForm={openForm}
             dataInit={dataReal}
@@ -92,7 +92,7 @@ class CrudAlmacen extends Component {
             {/* Create Your own form, then arrange or custom it as You like */}
             <FormAlmacen/>
             {/* No need create button or submit, because that already made in this component */}
-          </CrudTableForm>
+          </CrudTableForm2>
         </Paper>
       </div>
     );
diff --git a/front/odiparpack/app/containers/Odipar/Camiones/AveriaTab/AveriaTab.js b/front/odiparpack/app/containers/Odipar/Camiones/AveriaTab/AveriaTab.js
new file mode 100644
index 0000000..b7ee4fd
--- /dev/null
+++ b/front/odiparpack/app/containers/Odipar/Camiones/AveriaTab/AveriaTab.js
@@ -0,0 +1,64 @@
+import React, { Component } from 'react';
+import { withStyles } from '@material-ui/core/styles';
+import PropTypes from 'prop-types';
+import { CrudAveriaTab } from './table'
+import { Paper, Typography } from '@material-ui/core';
+import { connect } from 'react-redux';
+
+//actions
+import { getPedidos } from 'ba-actions/pedido';
+
+const styles = ({
+    root: {
+      flexGrow: 1,
+      marginTop: 30,
+    }
+  });
+
+class AveriaTab extends Component {
+  constructor (props) {
+    super(props)
+    this.state = {
+      dataRealF: []
+    };
+    this.props.dispatch(getPedidos()).then((res) => {
+      if (res) {
+          this.setState({
+            dataRealF: res.data,
+          });
+      }
+    })
+  }
+
+
+    render() {
+      const {dataRealF} = this.state;
+      const { classes } = this.props;
+        return (
+         
+            <CrudAveriaTab title = "Listado de Camiones" dataReal={dataRealF}/>
+         
+        );
+    }
+}
+
+AveriaTab.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+const reducer = 'pedido'
+const mapStateToProps = state => ({
+  force: state, // force state from reducer
+  pedidosLista : state.getIn([reducer]),
+});
+
+const mapDispatchToProps = dispatch => ({
+  dispatch
+});
+
+const AveriaTabMapped = connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(AveriaTab);
+
+export default withStyles(styles)(AveriaTabMapped);
\ No newline at end of file
diff --git a/front/odiparpack/app/containers/Odipar/Camiones/AveriaTab/table/CrudAveriaTab.js b/front/odiparpack/app/containers/Odipar/Camiones/AveriaTab/table/CrudAveriaTab.js
new file mode 100644
index 0000000..15dbd1c
--- /dev/null
+++ b/front/odiparpack/app/containers/Odipar/Camiones/AveriaTab/table/CrudAveriaTab.js
@@ -0,0 +1,149 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import {
+  fetchAction,
+  addAction,
+  closeAction,
+  submitAction,
+  removeAction,
+  editAction,
+  closeNotifAction
+} from 'ba-actions/CrudTbFrmActions';
+import { CrudTableForm, Notification } from 'ba-components';
+import {
+  Paper,
+  RadioGroup,
+} from '@material-ui/core';
+import { anchorTable, dataApi } from './dataAveria';
+import FormAveriaTab from './FormAveriaTab';
+//actions
+import { getPedidos } from 'ba-actions/pedido';
+const branch = 'crudAveria';
+
+const renderRadioGroup = ({ input, ...rest }) => (
+  <RadioGroup
+    {...input}
+    {...rest}
+    valueselected={input.value}
+    onChange={(event, value) => input.onChange(value)}
+  />
+);
+
+
+const styles = ({
+  root: {
+    flexGrow: 1,
+  }
+});
+
+class CrudAveriaTab extends Component {
+
+  render() {
+    //console.log("render ps")
+    const {
+      classes,
+      fetchData,
+      addNew,
+      closeForm,
+      submit,
+      removeRow,
+      editRow,
+      dataTable,
+      openForm,
+      initValues,
+      closeNotif,
+      messageNotif,
+      title,
+      dataReal,
+      dispatch,
+      editingId
+    } = this.props;
+    
+    //console.log("render ps DATA", dataReal)
+    //console.log("original", dataApi)
+    
+    return (
+      <div>
+        <Notification close={() => closeNotif(branch)} variant = "success" message={messageNotif} />
+        <Paper className={classes.root}>
+          <CrudTableForm
+            dataTable={dataTable}
+            openForm={openForm}
+            dataInit={dataApi}
+            anchor={anchorTable}
+            title={title}
+            fetchData={fetchData}
+            addNew={addNew}
+            closeForm={closeForm}
+            submit={submit}
+            removeRow={removeRow}
+            editRow={editRow}
+            branch={branch}
+            initValues={initValues}
+            addNewAPI={getPedidos}
+            removeRowAPI={getPedidos}
+            editRowAPI={getPedidos}
+            dispatch = {dispatch}
+            editingId = {editingId}
+          >
+            {/* Create Your own form, then arrange or custom it as You like */}
+            <FormAveriaTab/>
+            {/* No need create button or submit, because that already made in this component */}
+          </CrudTableForm>
+        </Paper>
+      </div>
+    );
+  }
+}
+
+renderRadioGroup.propTypes = {
+  input: PropTypes.object.isRequired,
+};
+
+CrudAveriaTab.propTypes = {
+  dataTable: PropTypes.object.isRequired,
+  openForm: PropTypes.bool.isRequired,
+  classes: PropTypes.object.isRequired,
+  fetchData: PropTypes.func.isRequired,
+  addNew: PropTypes.func.isRequired,
+  closeForm: PropTypes.func.isRequired,
+  submit: PropTypes.func.isRequired,
+  removeRow: PropTypes.func.isRequired,
+  editRow: PropTypes.func.isRequired,
+  initValues: PropTypes.object.isRequired,
+  closeNotif: PropTypes.func.isRequired,
+  messageNotif: PropTypes.string.isRequired,
+  title: PropTypes.string.isRequired,
+};
+
+
+const mapStateToProps = state => ({
+  force: state, // force state from reducer
+  initValues: state.getIn([branch, 'formValues']),
+  dataTable: state.getIn([branch, 'dataTable']),
+  openForm: state.getIn([branch, 'showFrm']),
+  messageNotif: state.getIn([branch, 'notifMsg']),
+  editingId: state.getIn([branch, 'editingId']),
+  pedidosLista : state.getIn(['pedido','pedidos']),
+});
+
+const mapDispatchToProps = dispatch => ({
+  fetchData: bindActionCreators(fetchAction, dispatch),
+  addNew: bindActionCreators(addAction, dispatch),
+  closeForm: bindActionCreators(closeAction, dispatch),
+  submit: bindActionCreators(submitAction, dispatch),
+  removeRow: bindActionCreators(removeAction, dispatch),
+  editRow: bindActionCreators(editAction, dispatch),
+  closeNotif: bindActionCreators(closeNotifAction, dispatch),
+  dispatch
+});
+
+const CrudAveriaTabMapped = connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(CrudAveriaTab);
+
+export default withStyles(styles)(CrudAveriaTabMapped);
diff --git a/front/odiparpack/app/containers/Odipar/Camiones/AveriaTab/table/FormAveriaTab.js b/front/odiparpack/app/containers/Odipar/Camiones/AveriaTab/table/FormAveriaTab.js
new file mode 100644
index 0000000..65ad519
--- /dev/null
+++ b/front/odiparpack/app/containers/Odipar/Camiones/AveriaTab/table/FormAveriaTab.js
@@ -0,0 +1,153 @@
+import React, { Component } from 'react';
+import { withStyles } from '@material-ui/core/styles';
+import PropTypes from 'prop-types';
+import { Field } from 'redux-form/immutable';
+import {required, integer} from 'ba-api/validation'
+import {
+    SelectRedux,
+    TextFieldRedux,
+    DatePickerRedux,
+    EstadoRedux
+} from 'ba-components/Forms/ReduxFormMUI';
+import {
+    MenuItem,
+    InputLabel,
+    FormControl,
+    Typography,
+  } from '@material-ui/core';
+
+const styles = ({
+    root: {
+      flexGrow: 1,
+    },
+    field: {
+      width: '100%',
+      marginBottom: 20
+    },
+    fieldBasic: {
+      width: '100%',
+      marginBottom: 20,
+      marginTop: 10
+    },
+    inlineWrap: {
+      display: 'flex',
+      flexDirection: 'row'
+    }
+  });
+  
+
+class FormAveriaTab extends Component {
+    saveRef = ref => {
+        this.ref = ref;
+        return this.ref;
+    };
+
+    state = {
+        selectedDate: new Date(),
+    }
+    
+    handleDateChange = (date) => {
+        this.setState({ selectedDate: date });
+    }
+    render() { 
+        const { classes } = this.props;
+        const { selectedDate } = this.state;
+        const trueBool = true;
+        return (
+            <>
+              <div>
+                  <Field
+                      name="codigo"
+                      component={TextFieldRedux}
+                      placeholder="Código de Camión"
+                      label="Código de Camión"
+                      validate={[required]}
+                      required
+                      ref={this.saveRef}
+                      className={classes.field}
+                  />
+              </div>
+                <div>
+                  <FormControl className={classes.field}>
+                      <Field
+                          name = "fecha"
+                          component={DatePickerRedux}
+                          label="Fecha de Registro"
+                          readonly= {true}
+                      />
+                    </FormControl>
+              </div> 
+              <div>
+                    <FormControl className={classes.field}>
+                    <InputLabel htmlFor="selection">Tipo de Avería</InputLabel>
+                    <Field
+                    name="tipo"
+                    component={SelectRedux}
+                    placeholder="Seleccionar"
+                    autoWidth={trueBool}
+                    >
+                    <MenuItem value={0}>Moderada</MenuItem>
+                    <MenuItem value={1}>Fuerte</MenuItem>
+                    <MenuItem value={2}>Siniestra</MenuItem>
+                    </Field>
+                </FormControl>
+                </div>
+                <div>
+                <Field
+                      name="latidud"
+                      component={TextFieldRedux}
+                      placeholder="Latitud"
+                      label="Latitud"
+                      validate={[required]}
+                      required
+                      ref={this.saveRef}
+                      className={classes.field}
+                  />
+                </div>
+                <div>
+                <Field
+                      name="longitud"
+                      component={TextFieldRedux}
+                      placeholder="Longitud"
+                      label="Longitud"
+                      validate={[required]}
+                      required
+                      ref={this.saveRef}
+                      className={classes.field}
+                  />
+                </div>
+                <div>
+                <FormControl className={classes.field}>
+                  <Field
+                      name = "fecha"
+                      component={DatePickerRedux}
+                      label="Fecha de Registro"
+                      readonly= {false}
+                  />
+                  </FormControl>
+                </div>
+                <div>
+                    <FormControl className={classes.field}>
+                    <InputLabel htmlFor="selection">Tipo de Avería</InputLabel>
+                    <Field
+                    name="estado"
+                    component={SelectRedux}
+                    placeholder="Seleccionar"
+                    autoWidth={trueBool}
+                    >
+                    <MenuItem value={0}>Pendiente</MenuItem>
+                    <MenuItem value={1}>Bloqueado</MenuItem>
+                    <MenuItem value={2}>Finalizado</MenuItem>
+                    </Field>
+                  </FormControl>
+                </div>
+            </>
+        );
+    }
+}
+
+FormAveriaTab.propTypes = {
+    classes: PropTypes.object.isRequired,
+  };
+
+export default withStyles(styles)(FormAveriaTab);
\ No newline at end of file
diff --git a/front/odiparpack/app/containers/Odipar/Camiones/AveriaTab/table/dataAveria.js b/front/odiparpack/app/containers/Odipar/Camiones/AveriaTab/table/dataAveria.js
new file mode 100644
index 0000000..e935530
--- /dev/null
+++ b/front/odiparpack/app/containers/Odipar/Camiones/AveriaTab/table/dataAveria.js
@@ -0,0 +1,88 @@
+export const anchorTable = [
+  {
+    name: 'id',
+    label: 'Número Avería',
+    initialValue: '',
+    hidden: false,
+    type: 'texto'
+  }, {
+    name: 'codigo',
+    label: 'Código de camión',
+    initialValue: '',
+    width: 'auto',
+    hidden: false,
+    type: 'texto'
+  }, {
+    name: 'fecha',
+    label: 'Fecha de registro',
+    initialValue: new Date(),
+    width: 'auto',
+    hidden: false,
+    type: 'texto'
+  }, {
+    name: 'tipo',
+    label: 'Tipo de Avería',
+    initialValue: 0,
+    width: 'auto',
+    hidden: false,
+    type: 'etiq_tipoAveria'
+  }, {
+    name: 'ubicacion',
+    label: 'Ubicación',
+    initialValue: '',
+    width: 'auto',
+    hidden: false,
+    type: 'texto'
+  }, {
+    name: 'estimado',
+    label: 'Tiempo de finalización estimado',
+    initialValue: new Date(),
+    width: 'auto',
+    hidden: false,
+    type: 'texto'
+  }, {
+    name: 'estado',
+    label: 'Estado',
+    initialValue: 0,
+    width: 'auto',
+    hidden: false,
+    type: 'etiq_estadoAveria'
+  }, 
+  {
+    name: 'action',
+    label: 'Action',
+    initialValue: '',
+    hidden: false
+  },
+];
+
+export const dataApi = [
+  {
+    id: '1',
+    codigo: 'A001',
+    fecha: '24/05/2022 11:28 AM',
+    tipo: 0,
+    latitud: 50,
+    longitud: 23,
+    estimado: '24/05/2022 11:28 AM',
+    estado: 0,
+  }, {
+    id: '2',
+    codigo: 'A002',
+    fecha: '24/05/2022 11:28 AM',
+    tipo: 1,
+    latitud: 50,
+    longitud: 23,
+    estimado: '24/05/2022 11:28 AM',
+    estado: 0,
+  }, {
+    id: '3',
+    codigo: 'A002',
+    fecha: '24/05/2022 11:28 AM',
+    tipo: 2,
+    latitud: 50,
+    longitud: 23,
+    estimado: '24/05/2022 11:28 AM',
+    estado: 1,
+  }
+];
diff --git a/front/odiparpack/app/containers/Odipar/Camiones/AveriaTab/table/index.js b/front/odiparpack/app/containers/Odipar/Camiones/AveriaTab/table/index.js
new file mode 100644
index 0000000..4e9b692
--- /dev/null
+++ b/front/odiparpack/app/containers/Odipar/Camiones/AveriaTab/table/index.js
@@ -0,0 +1 @@
+export CrudAveriaTab from "./CrudAveriaTab";
diff --git a/front/odiparpack/app/containers/Odipar/Camiones/CamionTab/CamionTab.js b/front/odiparpack/app/containers/Odipar/Camiones/CamionTab/CamionTab.js
new file mode 100644
index 0000000..2f9862e
--- /dev/null
+++ b/front/odiparpack/app/containers/Odipar/Camiones/CamionTab/CamionTab.js
@@ -0,0 +1,64 @@
+import React, { Component } from 'react';
+import { withStyles } from '@material-ui/core/styles';
+import PropTypes from 'prop-types';
+import { CrudCamionTab } from './table'
+import { Paper, Typography } from '@material-ui/core';
+import { connect } from 'react-redux';
+
+//actions
+import { getPedidos } from 'ba-actions/pedido';
+
+const styles = ({
+    root: {
+      flexGrow: 1,
+      marginTop: 30,
+    }
+  });
+
+class CamionTab extends Component {
+  constructor (props) {
+    super(props)
+    this.state = {
+      dataRealF: []
+    };
+    this.props.dispatch(getPedidos()).then((res) => {
+      if (res) {
+          this.setState({
+            dataRealF: res.data,
+          });
+      }
+    })
+  }
+
+
+    render() {
+      const {dataRealF} = this.state;
+      const { classes } = this.props;
+        return (
+         
+            <CrudCamionTab title = "Listado de Camiones" dataReal={dataRealF}/>
+         
+        );
+    }
+}
+
+CamionTab.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+const reducer = 'pedido'
+const mapStateToProps = state => ({
+  force: state, // force state from reducer
+  pedidosLista : state.getIn([reducer]),
+});
+
+const mapDispatchToProps = dispatch => ({
+  dispatch
+});
+
+const CamionTabMapped = connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(CamionTab);
+
+export default withStyles(styles)(CamionTabMapped);
\ No newline at end of file
diff --git a/front/odiparpack/app/containers/Odipar/Camiones/CamionTab/table/CrudCamionTab.js b/front/odiparpack/app/containers/Odipar/Camiones/CamionTab/table/CrudCamionTab.js
new file mode 100644
index 0000000..5a1783c
--- /dev/null
+++ b/front/odiparpack/app/containers/Odipar/Camiones/CamionTab/table/CrudCamionTab.js
@@ -0,0 +1,149 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import {
+  fetchAction,
+  addAction,
+  closeAction,
+  submitAction,
+  removeAction,
+  editAction,
+  closeNotifAction
+} from 'ba-actions/CrudTbFrmActions';
+import { CrudTableForm, Notification } from 'ba-components';
+import {
+  Paper,
+  RadioGroup,
+} from '@material-ui/core';
+import { anchorTable, dataApi } from './dataCamion';
+import FormCamionTab from './FormCamionTab';
+//actions
+import { getPedidos } from 'ba-actions/pedido';
+const branch = 'crudCamion';
+
+const renderRadioGroup = ({ input, ...rest }) => (
+  <RadioGroup
+    {...input}
+    {...rest}
+    valueselected={input.value}
+    onChange={(event, value) => input.onChange(value)}
+  />
+);
+
+
+const styles = ({
+  root: {
+    flexGrow: 1,
+  }
+});
+
+class CrudCamionTab extends Component {
+
+  render() {
+    //console.log("render ps")
+    const {
+      classes,
+      fetchData,
+      addNew,
+      closeForm,
+      submit,
+      removeRow,
+      editRow,
+      dataTable,
+      openForm,
+      initValues,
+      closeNotif,
+      messageNotif,
+      title,
+      dataReal,
+      dispatch,
+      editingId
+    } = this.props;
+    
+    //console.log("render ps DATA", dataReal)
+    //console.log("original", dataApi)
+    
+    return (
+      <div>
+        <Notification close={() => closeNotif(branch)} variant = "success" message={messageNotif} />
+        <Paper className={classes.root}>
+          <CrudTableForm
+            dataTable={dataTable}
+            openForm={openForm}
+            dataInit={dataApi}
+            anchor={anchorTable}
+            title={title}
+            fetchData={fetchData}
+            addNew={addNew}
+            closeForm={closeForm}
+            submit={submit}
+            removeRow={removeRow}
+            editRow={editRow}
+            branch={branch}
+            initValues={initValues}
+            addNewAPI={getPedidos}
+            removeRowAPI={getPedidos}
+            editRowAPI={getPedidos}
+            dispatch = {dispatch}
+            editingId = {editingId}
+          >
+            {/* Create Your own form, then arrange or custom it as You like */}
+            <FormCamionTab/>
+            {/* No need create button or submit, because that already made in this component */}
+          </CrudTableForm>
+        </Paper>
+      </div>
+    );
+  }
+}
+
+renderRadioGroup.propTypes = {
+  input: PropTypes.object.isRequired,
+};
+
+CrudCamionTab.propTypes = {
+  dataTable: PropTypes.object.isRequired,
+  openForm: PropTypes.bool.isRequired,
+  classes: PropTypes.object.isRequired,
+  fetchData: PropTypes.func.isRequired,
+  addNew: PropTypes.func.isRequired,
+  closeForm: PropTypes.func.isRequired,
+  submit: PropTypes.func.isRequired,
+  removeRow: PropTypes.func.isRequired,
+  editRow: PropTypes.func.isRequired,
+  initValues: PropTypes.object.isRequired,
+  closeNotif: PropTypes.func.isRequired,
+  messageNotif: PropTypes.string.isRequired,
+  title: PropTypes.string.isRequired,
+};
+
+
+const mapStateToProps = state => ({
+  force: state, // force state from reducer
+  initValues: state.getIn([branch, 'formValues']),
+  dataTable: state.getIn([branch, 'dataTable']),
+  openForm: state.getIn([branch, 'showFrm']),
+  messageNotif: state.getIn([branch, 'notifMsg']),
+  editingId: state.getIn([branch, 'editingId']),
+  pedidosLista : state.getIn(['pedido','pedidos']),
+});
+
+const mapDispatchToProps = dispatch => ({
+  fetchData: bindActionCreators(fetchAction, dispatch),
+  addNew: bindActionCreators(addAction, dispatch),
+  closeForm: bindActionCreators(closeAction, dispatch),
+  submit: bindActionCreators(submitAction, dispatch),
+  removeRow: bindActionCreators(removeAction, dispatch),
+  editRow: bindActionCreators(editAction, dispatch),
+  closeNotif: bindActionCreators(closeNotifAction, dispatch),
+  dispatch
+});
+
+const CrudCamionTabMapped = connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(CrudCamionTab);
+
+export default withStyles(styles)(CrudCamionTabMapped);
diff --git a/front/odiparpack/app/containers/Odipar/Camiones/CamionTab/table/FormCamionTab.js b/front/odiparpack/app/containers/Odipar/Camiones/CamionTab/table/FormCamionTab.js
new file mode 100644
index 0000000..25d107c
--- /dev/null
+++ b/front/odiparpack/app/containers/Odipar/Camiones/CamionTab/table/FormCamionTab.js
@@ -0,0 +1,121 @@
+import React, { Component } from 'react';
+import { withStyles } from '@material-ui/core/styles';
+import PropTypes from 'prop-types';
+import { Field } from 'redux-form/immutable';
+import {required, integer} from 'ba-api/validation'
+import {
+    SelectRedux,
+    TextFieldRedux,
+    DatePickerRedux,
+    EstadoRedux
+} from 'ba-components/Forms/ReduxFormMUI';
+import {
+    MenuItem,
+    InputLabel,
+    FormControl,
+    Typography,
+  } from '@material-ui/core';
+
+const styles = ({
+    root: {
+      flexGrow: 1,
+    },
+    field: {
+      width: '100%',
+      marginBottom: 20
+    },
+    fieldBasic: {
+      width: '100%',
+      marginBottom: 20,
+      marginTop: 10
+    },
+    inlineWrap: {
+      display: 'flex',
+      flexDirection: 'row'
+    }
+  });
+  
+
+class FormCamionTab extends Component {
+    saveRef = ref => {
+        this.ref = ref;
+        return this.ref;
+    };
+
+    state = {
+        selectedDate: new Date(),
+    }
+    
+    handleDateChange = (date) => {
+        this.setState({ selectedDate: date });
+    }
+    render() { 
+        const { classes } = this.props;
+        const { selectedDate } = this.state;
+        const trueBool = true;
+        return (
+            <>
+                <div>
+                    <Field
+                        name="placa"
+                        component={TextFieldRedux}
+                        placeholder="Placa"
+                        label="Placa"
+                        validate={[required]}
+                        ref={this.saveRef}
+                        className={classes.field}
+                    />
+                </div>
+                <div>
+                    <FormControl className={classes.field}>
+                    <InputLabel htmlFor="selection">Tipo de Camión</InputLabel>
+                    <Field
+                    name="tipo"
+                    component={SelectRedux}
+                    placeholder="Seleccionar"
+                    autoWidth={trueBool}
+                    >
+                    <MenuItem value="A">A</MenuItem>
+                    <MenuItem value="B">B</MenuItem>
+                    </Field>
+                </FormControl>
+                </div>
+                <div>
+                    <FormControl className={classes.field}>
+                    <InputLabel htmlFor="selection">Provincia origen</InputLabel>
+                    <Field
+                    name="origen"
+                    component={SelectRedux}
+                    placeholder="Seleccionar"
+                    autoWidth={trueBool}
+                    >
+                    <MenuItem value="Lima">Lima</MenuItem>
+                    <MenuItem value="Arequipa">Arequipa</MenuItem>
+                    <MenuItem value="Cuzco">Cuzco</MenuItem>
+                    </Field>
+                </FormControl>
+                </div>
+                <div>
+                    <FormControl className={classes.field}>
+                    <InputLabel htmlFor="selection">Estado</InputLabel>
+                    <Field
+                    name="estado"
+                    component={SelectRedux}
+                    placeholder="Seleccionar"
+                    autoWidth={trueBool}
+                    >
+                    <MenuItem value={0}>Disponible</MenuItem>
+                    <MenuItem value={1}>En camino</MenuItem>
+                    </Field>
+                </FormControl>
+                </div>
+            </>
+        );
+    }
+}
+
+FormCamionTab.propTypes = {
+    classes: PropTypes.object.isRequired,
+  };
+
+export default withStyles(styles)(FormCamionTab);
\ No newline at end of file
diff --git a/front/odiparpack/app/containers/Odipar/Camiones/CamionTab/table/dataCamion.js b/front/odiparpack/app/containers/Odipar/Camiones/CamionTab/table/dataCamion.js
new file mode 100644
index 0000000..2d9952a
--- /dev/null
+++ b/front/odiparpack/app/containers/Odipar/Camiones/CamionTab/table/dataCamion.js
@@ -0,0 +1,77 @@
+export const anchorTable = [
+  {
+    name: 'id',
+    label: 'Id',
+    initialValue: '',
+    hidden: true,
+    type: 'texto'
+  }, {
+    name: 'codigo',
+    label: 'Código de camión',
+    initialValue: '',
+    width: 'auto',
+    hidden: false,
+    type: 'texto'
+  }, {
+    name: 'placa',
+    label: 'Placa',
+    initialValue: '',
+    width: 'auto',
+    hidden: false,
+    type: 'texto'
+  }, {
+    name: 'tipo',
+    label: 'Tipo',
+    initialValue: 'A',
+    width: 'auto',
+    hidden: false,
+    type: 'texto'
+  }, {
+    name: 'capacidad',
+    label: 'Capacidad',
+    initialValue: '',
+    width: 'auto',
+    hidden: false,
+    type: 'texto'
+  }, {
+    name: 'origen',
+    label: 'Provincia Origen',
+    initialValue: 'Lima',
+    width: 'auto',
+    hidden: false,
+    type: 'texto'
+  }, {
+    name: 'estado',
+    label: 'Estado',
+    initialValue: 0,
+    width: 'auto',
+    hidden: false,
+    type: 'etiq_camion'
+  }, 
+  {
+    name: 'action',
+    label: 'Action',
+    initialValue: '',
+    hidden: false
+  },
+];
+
+export const dataApi = [
+  {
+    id: '1',
+    codigo: 'A001',
+    placa: 'ABC-831',
+    origen: 'Lima',
+    tipo: 'A',
+    estado: 0,
+    capacidad: 23,
+  }, {
+    id: '2',
+    codigo: 'A002',
+    placa: 'ABD-836',
+    origen: 'Lima',
+    tipo: 'A',
+    estado: 1,
+    capacidad: 50
+  }
+];
diff --git a/front/odiparpack/app/containers/Odipar/Camiones/CamionTab/table/index.js b/front/odiparpack/app/containers/Odipar/Camiones/CamionTab/table/index.js
new file mode 100644
index 0000000..80c4abb
--- /dev/null
+++ b/front/odiparpack/app/containers/Odipar/Camiones/CamionTab/table/index.js
@@ -0,0 +1 @@
+export CrudCamionTab from "./CrudCamionTab";
\ No newline at end of file
diff --git a/front/odiparpack/app/containers/Odipar/Camiones/CamionesMain.js b/front/odiparpack/app/containers/Odipar/Camiones/CamionesMain.js
new file mode 100644
index 0000000..6298da6
--- /dev/null
+++ b/front/odiparpack/app/containers/Odipar/Camiones/CamionesMain.js
@@ -0,0 +1,101 @@
+import React, { Component } from 'react';
+import { withStyles } from '@material-ui/core/styles';
+import PropTypes from 'prop-types';
+import { AppBar, Tabs, Tab, Paper, Typography } from '@material-ui/core';
+import { connect } from 'react-redux';
+
+import CamionTab from './CamionTab/CamionTab';
+import FlotaTab from './FlotaTab/FlotaTab';
+import AveriaTab from './AveriaTab/AveriaTab';
+
+//actions
+
+
+function TabContainer(props) {
+    return (
+      <Typography component="div" style={{ padding: 8 * 3 }}>
+        {props.children}
+      </Typography>
+    );
+  }
+  
+  TabContainer.propTypes = {
+    children: PropTypes.node.isRequired,
+  };
+
+const styles = ({
+    root: {
+      flexGrow: 1,
+      marginTop: 30,
+    }
+  });
+
+class CamionesMain extends Component {
+  constructor (props) {
+    
+    super(props)
+    this.state = {
+      value: 0
+    };
+
+  }
+
+  handleChange = (event, value) => {
+    this.setState({ value });
+  };
+
+    render() {
+      const {value} = this.state;
+      const { classes } = this.props;
+        return (
+          <div>
+            <Typography variant="h4">
+                {`Camiones`}
+            </Typography>
+            <div>  
+              <Paper className={classes.root}>
+                <AppBar position="static">
+                    <Tabs value={value} onChange={this.handleChange}>
+                        <Tab label="Camiones" />
+                        <Tab label="Flota" />
+                        <Tab label="Averías" />
+                    </Tabs>
+                    </AppBar>
+                    {value === 0 && 
+                        <TabContainer> 
+                          <CamionTab/>
+                        </TabContainer>}
+                    {value === 1 && 
+                      <TabContainer> 
+                        <FlotaTab/>
+                      </TabContainer>}
+                    {value === 2 && 
+                      <TabContainer> 
+                        <AveriaTab/>
+                      </TabContainer>}
+              </Paper>
+            </div>
+          </div>
+        );
+    }
+}
+
+CamionesMain.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+const reducer = 'pedido'
+const mapStateToProps = state => ({
+  force: state, // force state from reducer
+});
+
+const mapDispatchToProps = dispatch => ({
+  dispatch
+});
+
+const CamionesMainMapped = connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(CamionesMain);
+
+export default withStyles(styles)(CamionesMainMapped);
\ No newline at end of file
diff --git a/front/odiparpack/app/containers/Odipar/Camiones/FlotaTab/FlotaTab.js b/front/odiparpack/app/containers/Odipar/Camiones/FlotaTab/FlotaTab.js
new file mode 100644
index 0000000..f8072f5
--- /dev/null
+++ b/front/odiparpack/app/containers/Odipar/Camiones/FlotaTab/FlotaTab.js
@@ -0,0 +1,59 @@
+import React, { Component } from 'react';
+import { withStyles } from '@material-ui/core/styles';
+import PropTypes from 'prop-types';
+import { CrudFlotaTab } from './table'
+import { Paper, Typography } from '@material-ui/core';
+import { connect } from 'react-redux';
+
+//actions
+import { getPedidos } from 'ba-actions/pedido';
+
+const styles = ({
+    root: {
+      flexGrow: 1,
+      marginTop: 30,
+    }
+  });
+
+class FlotaTab extends Component {
+  constructor (props) {
+    super(props)
+    this.state = {
+      dataRealF: []
+    };
+    this.props.dispatch(getPedidos()).then((res) => {
+      if (res) {
+          this.setState({
+            dataRealF: res.data,
+          });
+      }
+    })
+  }
+
+
+    render() {
+      const {dataRealF} = this.state;
+        return (
+            <CrudFlotaTab title = "Listado de Camiones" dataReal={dataRealF}/>
+        );
+    }
+}
+
+FlotaTab.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+const mapStateToProps = state => ({
+  force: state, // force state from reducer
+});
+
+const mapDispatchToProps = dispatch => ({
+  dispatch
+});
+
+const FlotaTabMapped = connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(FlotaTab);
+
+export default withStyles(styles)(FlotaTabMapped);
\ No newline at end of file
diff --git a/front/odiparpack/app/containers/Odipar/Camiones/FlotaTab/table/CrudFlotaTab.js b/front/odiparpack/app/containers/Odipar/Camiones/FlotaTab/table/CrudFlotaTab.js
new file mode 100644
index 0000000..c824c5b
--- /dev/null
+++ b/front/odiparpack/app/containers/Odipar/Camiones/FlotaTab/table/CrudFlotaTab.js
@@ -0,0 +1,149 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import {
+  fetchAction,
+  addAction,
+  closeAction,
+  submitAction,
+  removeAction,
+  editAction,
+  closeNotifAction
+} from 'ba-actions/CrudTbFrmActions';
+import { CrudTableForm, Notification } from 'ba-components';
+import {
+  Paper,
+  RadioGroup,
+} from '@material-ui/core';
+import { anchorTable, dataApi } from './dataFlota';
+import FormFlotaTab from './FormFlotaTab';
+//actions
+import { getPedidos } from 'ba-actions/pedido';
+const branch = 'crudFlota';
+
+const renderRadioGroup = ({ input, ...rest }) => (
+  <RadioGroup
+    {...input}
+    {...rest}
+    valueselected={input.value}
+    onChange={(event, value) => input.onChange(value)}
+  />
+);
+
+
+const styles = ({
+  root: {
+    flexGrow: 1,
+  }
+});
+
+class CrudFlotaTab extends Component {
+
+  render() {
+    //console.log("render ps")
+    const {
+      classes,
+      fetchData,
+      addNew,
+      closeForm,
+      submit,
+      removeRow,
+      editRow,
+      dataTable,
+      openForm,
+      initValues,
+      closeNotif,
+      messageNotif,
+      title,
+      dataReal,
+      dispatch,
+      editingId
+    } = this.props;
+    
+    //console.log("render ps DATA", dataReal)
+    //console.log("original", dataApi)
+    
+    return (
+      <div>
+        <Notification close={() => closeNotif(branch)} variant = "success" message={messageNotif} />
+        <Paper className={classes.root}>
+          <CrudTableForm
+            dataTable={dataTable}
+            openForm={openForm}
+            dataInit={dataApi}
+            anchor={anchorTable}
+            title={title}
+            fetchData={fetchData}
+            addNew={addNew}
+            closeForm={closeForm}
+            submit={submit}
+            removeRow={removeRow}
+            editRow={editRow}
+            branch={branch}
+            initValues={initValues}
+            addNewAPI={getPedidos}
+            removeRowAPI={getPedidos}
+            editRowAPI={getPedidos}
+            dispatch = {dispatch}
+            editingId = {editingId}
+          >
+            {/* Create Your own form, then arrange or custom it as You like */}
+            <FormFlotaTab/>
+            {/* No need create button or submit, because that already made in this component */}
+          </CrudTableForm>
+        </Paper>
+      </div>
+    );
+  }
+}
+
+renderRadioGroup.propTypes = {
+  input: PropTypes.object.isRequired,
+};
+
+CrudFlotaTab.propTypes = {
+  dataTable: PropTypes.object.isRequired,
+  openForm: PropTypes.bool.isRequired,
+  classes: PropTypes.object.isRequired,
+  fetchData: PropTypes.func.isRequired,
+  addNew: PropTypes.func.isRequired,
+  closeForm: PropTypes.func.isRequired,
+  submit: PropTypes.func.isRequired,
+  removeRow: PropTypes.func.isRequired,
+  editRow: PropTypes.func.isRequired,
+  initValues: PropTypes.object.isRequired,
+  closeNotif: PropTypes.func.isRequired,
+  messageNotif: PropTypes.string.isRequired,
+  title: PropTypes.string.isRequired,
+};
+
+
+const mapStateToProps = state => ({
+  force: state, // force state from reducer
+  initValues: state.getIn([branch, 'formValues']),
+  dataTable: state.getIn([branch, 'dataTable']),
+  openForm: state.getIn([branch, 'showFrm']),
+  messageNotif: state.getIn([branch, 'notifMsg']),
+  editingId: state.getIn([branch, 'editingId']),
+  pedidosLista : state.getIn(['pedido','pedidos']),
+});
+
+const mapDispatchToProps = dispatch => ({
+  fetchData: bindActionCreators(fetchAction, dispatch),
+  addNew: bindActionCreators(addAction, dispatch),
+  closeForm: bindActionCreators(closeAction, dispatch),
+  submit: bindActionCreators(submitAction, dispatch),
+  removeRow: bindActionCreators(removeAction, dispatch),
+  editRow: bindActionCreators(editAction, dispatch),
+  closeNotif: bindActionCreators(closeNotifAction, dispatch),
+  dispatch
+});
+
+const CrudFlotaTabMapped = connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(CrudFlotaTab);
+
+export default withStyles(styles)(CrudFlotaTabMapped);
diff --git a/front/odiparpack/app/containers/Odipar/Camiones/FlotaTab/table/FormFlotaTab.js b/front/odiparpack/app/containers/Odipar/Camiones/FlotaTab/table/FormFlotaTab.js
new file mode 100644
index 0000000..54c2369
--- /dev/null
+++ b/front/odiparpack/app/containers/Odipar/Camiones/FlotaTab/table/FormFlotaTab.js
@@ -0,0 +1,100 @@
+import React, { Component } from 'react';
+import { withStyles } from '@material-ui/core/styles';
+import PropTypes from 'prop-types';
+import { Field } from 'redux-form/immutable';
+import {required, integer} from 'ba-api/validation'
+import {
+    SelectRedux,
+    TextFieldRedux
+} from 'ba-components/Forms/ReduxFormMUI';
+import {
+    MenuItem,
+    InputLabel,
+    FormControl
+  } from '@material-ui/core';
+
+const styles = ({
+    root: {
+      flexGrow: 1,
+    },
+    field: {
+      width: '100%',
+      marginBottom: 20
+    },
+    fieldBasic: {
+      width: '100%',
+      marginBottom: 20,
+      marginTop: 10
+    },
+    inlineWrap: {
+      display: 'flex',
+      flexDirection: 'row'
+    }
+  });
+  
+
+class FormFlotaTab extends Component {
+    saveRef = ref => {
+        this.ref = ref;
+        return this.ref;
+    };
+
+    state = {
+        selectedDate: new Date(),
+    }
+    
+    handleDateChange = (date) => {
+        this.setState({ selectedDate: date });
+    }
+    render() { 
+        const { classes } = this.props;
+        const { selectedDate } = this.state;
+        const trueBool = true;
+        return (
+            <>
+                <div>
+                    <FormControl className={classes.field}>
+                    <InputLabel htmlFor="selection">Tipo de Camión</InputLabel>
+                    <Field
+                    name="tipo"
+                    component={SelectRedux}
+                    placeholder="Seleccionar"
+                    autoWidth={trueBool}
+                    >
+                    <MenuItem value="A">A</MenuItem>
+                    <MenuItem value="B">B</MenuItem>
+                    </Field>
+                </FormControl>
+                </div>
+                <div>
+                    <Field
+                        name="capacidad"
+                        component={TextFieldRedux}
+                        placeholder="Capacidad de paquetes"
+                        label="Capacidad de paquetes"
+                        validate={[required]}
+                        ref={this.saveRef}
+                        className={classes.field}
+                    />
+                </div>
+                <div>
+                    <Field
+                        name="velocidad"
+                        component={TextFieldRedux}
+                        placeholder="Velocidad (km/h)"
+                        label="Velocidad (km/h)"
+                        validate={[required]}
+                        ref={this.saveRef}
+                        className={classes.field}
+                    />
+                </div>
+            </>
+        );
+    }
+}
+
+FormFlotaTab.propTypes = {
+    classes: PropTypes.object.isRequired,
+  };
+
+export default withStyles(styles)(FormFlotaTab);
\ No newline at end of file
diff --git a/front/odiparpack/app/containers/Odipar/Camiones/FlotaTab/table/dataFlota.js b/front/odiparpack/app/containers/Odipar/Camiones/FlotaTab/table/dataFlota.js
new file mode 100644
index 0000000..8cc5dae
--- /dev/null
+++ b/front/odiparpack/app/containers/Odipar/Camiones/FlotaTab/table/dataFlota.js
@@ -0,0 +1,50 @@
+export const anchorTable = [
+  {
+    name: 'id',
+    label: 'Id',
+    initialValue: '',
+    hidden: true,
+    type: 'texto'
+  }, {
+    name: 'tipo',
+    label: 'Tipo de camión',
+    initialValue: 'A',
+    width: 'auto',
+    hidden: false,
+    type: 'texto'
+  }, {
+    name: 'capacidad',
+    label: 'Capacidad de paquetes',
+    initialValue: 0,
+    width: 'auto',
+    hidden: false,
+    type: 'texto'
+  }, {
+    name: 'velocidad',
+    label: 'Velocidad (km/h)',
+    initialValue: 0,
+    width: 'auto',
+    hidden: false,
+    type: 'texto'
+  }, 
+  {
+    name: 'action',
+    label: 'Action',
+    initialValue: '',
+    hidden: false
+  },
+];
+
+export const dataApi = [
+  {
+    id: '1',
+    tipo: 'A',
+    velocidad: 50,
+    capacidad: 23,
+  }, {
+    id: '2',
+    tipo: 'A',
+    velocidad: 60,
+    capacidad: 50
+  }
+];
diff --git a/front/odiparpack/app/containers/Odipar/Camiones/FlotaTab/table/index.js b/front/odiparpack/app/containers/Odipar/Camiones/FlotaTab/table/index.js
new file mode 100644
index 0000000..d799225
--- /dev/null
+++ b/front/odiparpack/app/containers/Odipar/Camiones/FlotaTab/table/index.js
@@ -0,0 +1 @@
+export CrudFlotaTab from "./CrudFlotaTab";
diff --git a/front/odiparpack/app/containers/Odipar/Pedidos/table/CrudPedido.js b/front/odiparpack/app/containers/Odipar/Pedidos/table/CrudPedido.js
index c7a7a58..c2f023b 100644
--- a/front/odiparpack/app/containers/Odipar/Pedidos/table/CrudPedido.js
+++ b/front/odiparpack/app/containers/Odipar/Pedidos/table/CrudPedido.js
@@ -12,7 +12,7 @@ import {
   editAction,
   closeNotifAction
 } from 'ba-actions/CrudTbFrmActions';
-import { CrudTableForm, Notification } from 'ba-components';
+import { CrudTableForm2, Notification } from 'ba-components';
 import {
   Paper,
   RadioGroup,
@@ -69,7 +69,7 @@ class CrudPedido extends Component {
       <div>
         <Notification close={() => closeNotif(branch)} variant = "success" message={messageNotif} />
         <Paper className={classes.root}>
-          <CrudTableForm
+          <CrudTableForm2
             dataTable={dataTable}
             openForm={openForm}
             dataInit={dataReal}
@@ -92,7 +92,7 @@ class CrudPedido extends Component {
             {/* Create Your own form, then arrange or custom it as You like */}
             <FormPedido/>
             {/* No need create button or submit, because that already made in this component */}
-          </CrudTableForm>
+          </CrudTableForm2>
         </Paper>
       </div>
     );
diff --git a/front/odiparpack/app/containers/Odipar/RedTramos/RutaTab/RutaTab.js b/front/odiparpack/app/containers/Odipar/RedTramos/RutaTab/RutaTab.js
new file mode 100644
index 0000000..b35259a
--- /dev/null
+++ b/front/odiparpack/app/containers/Odipar/RedTramos/RutaTab/RutaTab.js
@@ -0,0 +1,72 @@
+import React, { Component } from 'react';
+import { withStyles } from '@material-ui/core/styles';
+import PropTypes from 'prop-types';
+import { CrudRutaTab } from './table'
+import { Grid, Paper, Typography } from '@material-ui/core';
+import { connect } from 'react-redux';
+import { Direction } from 'ba-containers/Maps/demos'
+
+//actions
+import { getPedidos } from 'ba-actions/pedido';
+
+const styles = ({
+    root: {
+      flexGrow: 1,
+      marginTop: 30,
+    }
+  });
+
+class RutaTab extends Component {
+  constructor (props) {
+    super(props)
+    this.state = {
+      dataRealF: []
+    };
+    this.props.dispatch(getPedidos()).then((res) => {
+      if (res) {
+          this.setState({
+            dataRealF: res.data,
+          });
+      }
+    })
+  }
+
+
+    render() {
+      const {dataRealF} = this.state;
+      const { classes } = this.props;
+        return (
+          <Grid container>
+            <Grid item xs={12} sm={6}>
+              <CrudRutaTab title = "" dataReal={dataRealF}/>
+            </Grid>
+            <Grid item xs={12} sm={6}>
+              <Paper className={classes.paper} style={{marginLeft: "10px"}}>
+                <Direction/>
+              </Paper>
+            </Grid>
+          </Grid>
+        );
+    }
+}
+
+RutaTab.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+const reducer = 'pedido'
+const mapStateToProps = state => ({
+  force: state, // force state from reducer
+  pedidosLista : state.getIn([reducer]),
+});
+
+const mapDispatchToProps = dispatch => ({
+  dispatch
+});
+
+const RutaTabMapped = connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(RutaTab);
+
+export default withStyles(styles)(RutaTabMapped);
\ No newline at end of file
diff --git a/front/odiparpack/app/containers/Odipar/RedTramos/RutaTab/table/CrudRutaTab.js b/front/odiparpack/app/containers/Odipar/RedTramos/RutaTab/table/CrudRutaTab.js
new file mode 100644
index 0000000..b3cea2a
--- /dev/null
+++ b/front/odiparpack/app/containers/Odipar/RedTramos/RutaTab/table/CrudRutaTab.js
@@ -0,0 +1,149 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import {
+  fetchAction,
+  addAction,
+  closeAction,
+  submitAction,
+  removeAction,
+  editAction,
+  closeNotifAction
+} from 'ba-actions/CrudTbFrmActions';
+import { CrudTableForm, Notification } from 'ba-components';
+import {
+  Paper,
+  RadioGroup,
+} from '@material-ui/core';
+import { anchorTable, dataApi } from './dataRuta';
+import FormRutaTab from './FormRutaTab';
+//actions
+import { getPedidos } from 'ba-actions/pedido';
+const branch = 'crudRuta';
+
+const renderRadioGroup = ({ input, ...rest }) => (
+  <RadioGroup
+    {...input}
+    {...rest}
+    valueselected={input.value}
+    onChange={(event, value) => input.onChange(value)}
+  />
+);
+
+
+const styles = ({
+  root: {
+    flexGrow: 1,
+  }
+});
+
+class CrudRutaTab extends Component {
+
+  render() {
+    //console.log("render ps")
+    const {
+      classes,
+      fetchData,
+      addNew,
+      closeForm,
+      submit,
+      removeRow,
+      editRow,
+      dataTable,
+      openForm,
+      initValues,
+      closeNotif,
+      messageNotif,
+      title,
+      dataReal,
+      dispatch,
+      editingId
+    } = this.props;
+    
+    //console.log("render ps DATA", dataReal)
+    //console.log("original", dataApi)
+    
+    return (
+      <div>
+        <Notification close={() => closeNotif(branch)} variant = "success" message={messageNotif} />
+        <Paper className={classes.root}>
+          <CrudTableForm
+            dataTable={dataTable}
+            openForm={openForm}
+            dataInit={dataApi}
+            anchor={anchorTable}
+            title={title}
+            fetchData={fetchData}
+            addNew={addNew}
+            closeForm={closeForm}
+            submit={submit}
+            removeRow={removeRow}
+            editRow={editRow}
+            branch={branch}
+            initValues={initValues}
+            addNewAPI={getPedidos}
+            removeRowAPI={getPedidos}
+            editRowAPI={getPedidos}
+            dispatch = {dispatch}
+            editingId = {editingId}
+          >
+            {/* Create Your own form, then arrange or custom it as You like */}
+            <FormRutaTab/>
+            {/* No need create button or submit, because that already made in this component */}
+          </CrudTableForm>
+        </Paper>
+      </div>
+    );
+  }
+}
+
+renderRadioGroup.propTypes = {
+  input: PropTypes.object.isRequired,
+};
+
+CrudRutaTab.propTypes = {
+  dataTable: PropTypes.object.isRequired,
+  openForm: PropTypes.bool.isRequired,
+  classes: PropTypes.object.isRequired,
+  fetchData: PropTypes.func.isRequired,
+  addNew: PropTypes.func.isRequired,
+  closeForm: PropTypes.func.isRequired,
+  submit: PropTypes.func.isRequired,
+  removeRow: PropTypes.func.isRequired,
+  editRow: PropTypes.func.isRequired,
+  initValues: PropTypes.object.isRequired,
+  closeNotif: PropTypes.func.isRequired,
+  messageNotif: PropTypes.string.isRequired,
+  title: PropTypes.string.isRequired,
+};
+
+
+const mapStateToProps = state => ({
+  force: state, // force state from reducer
+  initValues: state.getIn([branch, 'formValues']),
+  dataTable: state.getIn([branch, 'dataTable']),
+  openForm: state.getIn([branch, 'showFrm']),
+  messageNotif: state.getIn([branch, 'notifMsg']),
+  editingId: state.getIn([branch, 'editingId']),
+  pedidosLista : state.getIn(['pedido','pedidos']),
+});
+
+const mapDispatchToProps = dispatch => ({
+  fetchData: bindActionCreators(fetchAction, dispatch),
+  addNew: bindActionCreators(addAction, dispatch),
+  closeForm: bindActionCreators(closeAction, dispatch),
+  submit: bindActionCreators(submitAction, dispatch),
+  removeRow: bindActionCreators(removeAction, dispatch),
+  editRow: bindActionCreators(editAction, dispatch),
+  closeNotif: bindActionCreators(closeNotifAction, dispatch),
+  dispatch
+});
+
+const CrudRutaTabMapped = connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(CrudRutaTab);
+
+export default withStyles(styles)(CrudRutaTabMapped);
diff --git a/front/odiparpack/app/containers/Odipar/RedTramos/RutaTab/table/FormRutaTab.js b/front/odiparpack/app/containers/Odipar/RedTramos/RutaTab/table/FormRutaTab.js
new file mode 100644
index 0000000..60ba534
--- /dev/null
+++ b/front/odiparpack/app/containers/Odipar/RedTramos/RutaTab/table/FormRutaTab.js
@@ -0,0 +1,108 @@
+import React, { Component } from 'react';
+import { withStyles } from '@material-ui/core/styles';
+import PropTypes from 'prop-types';
+import { Field } from 'redux-form/immutable';
+import {required, integer} from 'ba-api/validation'
+import {
+    SelectRedux,
+    TextFieldRedux,
+    DatePickerRedux,
+    EstadoRedux
+} from 'ba-components/Forms/ReduxFormMUI';
+import {
+    MenuItem,
+    InputLabel,
+    FormControl,
+    Typography,
+  } from '@material-ui/core';
+
+const styles = ({
+    root: {
+      flexGrow: 1,
+    },
+    field: {
+      width: '100%',
+      marginBottom: 20
+    },
+    fieldBasic: {
+      width: '100%',
+      marginBottom: 20,
+      marginTop: 10
+    },
+    inlineWrap: {
+      display: 'flex',
+      flexDirection: 'row'
+    }
+  });
+  
+
+class FormAveriaTab extends Component {
+    saveRef = ref => {
+        this.ref = ref;
+        return this.ref;
+    };
+
+    state = {
+        selectedDate: new Date(),
+    }
+    
+    handleDateChange = (date) => {
+        this.setState({ selectedDate: date });
+    }
+    render() { 
+        const { classes } = this.props;
+        const trueBool = true;
+        return (
+            <>
+              <div>
+                    <FormControl className={classes.field}>
+                    <InputLabel htmlFor="selection">Origen</InputLabel>
+                    <Field
+                    name="origen"
+                    component={SelectRedux}
+                    placeholder="Seleccionar"
+                    autoWidth={trueBool}
+                    >
+                    <MenuItem value="Lima">Lima</MenuItem>
+                    <MenuItem value="Arequipa">Arequipa</MenuItem>
+                    <MenuItem value="Cuzco">Cuzco</MenuItem>
+                    </Field>
+                </FormControl>
+                </div>
+                <div>
+                    <FormControl className={classes.field}>
+                    <InputLabel htmlFor="selection">Destino</InputLabel>
+                    <Field
+                    name="destino"
+                    component={SelectRedux}
+                    placeholder="Seleccionar"
+                    autoWidth={trueBool}
+                    >
+                    <MenuItem value="Lima">Lima</MenuItem>
+                    <MenuItem value="Arequipa">Arequipa</MenuItem>
+                    <MenuItem value="Cuzco">Cuzco</MenuItem>
+                    </Field>
+                </FormControl>
+                </div>
+              <div>
+                  <Field
+                      name="distancia"
+                      component={TextFieldRedux}
+                      placeholder="Distancia"
+                      label="Distancia (km)"
+                      validate={[required]}
+                      required
+                      ref={this.saveRef}
+                      className={classes.field}
+                  />
+              </div>
+            </>
+        );
+    }
+}
+
+FormAveriaTab.propTypes = {
+    classes: PropTypes.object.isRequired,
+  };
+
+export default withStyles(styles)(FormAveriaTab);
\ No newline at end of file
diff --git a/front/odiparpack/app/containers/Odipar/RedTramos/RutaTab/table/dataRuta.js b/front/odiparpack/app/containers/Odipar/RedTramos/RutaTab/table/dataRuta.js
new file mode 100644
index 0000000..762fb8f
--- /dev/null
+++ b/front/odiparpack/app/containers/Odipar/RedTramos/RutaTab/table/dataRuta.js
@@ -0,0 +1,59 @@
+export const anchorTable = [
+  {
+    name: 'id',
+    label: 'Número Avería',
+    initialValue: '',
+    hidden: true,
+    type: 'texto'
+  }, {
+    name: 'origen',
+    label: 'Provincia origen',
+    initialValue: 'Lima',
+    width: '13%',
+    hidden: false,
+    type: 'texto'
+  }, {
+    name: 'destino',
+    label: 'Provincia destino',
+    initialValue: 'Arequipa',
+    width: '13%',
+    hidden: false,
+    type: 'texto'
+  }, {
+    name: 'distancia',
+    label: 'Distancia (km)',
+    initialValue: 0,
+    width: '10%',
+    hidden: false,
+    type: 'texto'
+  }, {
+    name: 'estado',
+    label: 'Estado',
+    initialValue: 0,
+    width: '10%',
+    hidden: false,
+    type: 'etiq_ruta'
+  }, 
+  {
+    name: 'action',
+    label: 'Action',
+    initialValue: '',
+    hidden: false
+  },
+];
+
+export const dataApi = [
+  {
+    id: '1',
+    origen: 'Lima',
+    destino: 'Arequipa',
+    distancia: 234,
+    estado: 0,
+  }, {
+    id: '2',
+    origen: 'Lima',
+    destino: 'Cuzco',
+    distancia: 234,
+    estado: 1,
+  }
+];
diff --git a/front/odiparpack/app/containers/Odipar/RedTramos/RutaTab/table/index.js b/front/odiparpack/app/containers/Odipar/RedTramos/RutaTab/table/index.js
new file mode 100644
index 0000000..31656fe
--- /dev/null
+++ b/front/odiparpack/app/containers/Odipar/RedTramos/RutaTab/table/index.js
@@ -0,0 +1 @@
+export CrudRutaTab from "./CrudRutaTab";
diff --git a/front/odiparpack/app/containers/Odipar/RedTramos/TramosMain.js b/front/odiparpack/app/containers/Odipar/RedTramos/TramosMain.js
new file mode 100644
index 0000000..4d0ecea
--- /dev/null
+++ b/front/odiparpack/app/containers/Odipar/RedTramos/TramosMain.js
@@ -0,0 +1,89 @@
+import React, { Component } from 'react';
+import { withStyles } from '@material-ui/core/styles';
+import PropTypes from 'prop-types';
+import { AppBar, Tabs, Tab, Paper, Typography } from '@material-ui/core';
+import { connect } from 'react-redux';
+import RutaTab from './RutaTab/RutaTab';
+//actions
+
+
+function TabContainer(props) {
+    return (
+      <Typography component="div" style={{ padding: 8 * 3 }}>
+        {props.children}
+      </Typography>
+    );
+  }
+  
+  TabContainer.propTypes = {
+    children: PropTypes.node.isRequired,
+  };
+
+const styles = ({
+    root: {
+      flexGrow: 1,
+      marginTop: 30,
+    }
+  });
+
+class CamionesMain extends Component {
+  constructor (props) {
+    
+    super(props)
+    this.state = {
+      value: 0
+    };
+
+  }
+
+  handleChange = (event, value) => {
+    this.setState({ value });
+  };
+
+    render() {
+      const {value} = this.state;
+      const { classes } = this.props;
+        return (
+          <div>
+            <div>  
+              <Paper className={classes.root}>
+                <AppBar position="static">
+                    <Tabs value={value} onChange={this.handleChange}>
+                        <Tab label="Rutas" />
+                        <Tab label="Bloqueos" />
+                    </Tabs>
+                    </AppBar>
+                    {value === 0 && 
+                        <TabContainer> 
+                          <RutaTab/>
+                        </TabContainer>}
+                    {value === 1 && 
+                      <TabContainer> 
+                        bbbb
+                      </TabContainer>}
+              </Paper>
+            </div>
+          </div>
+        );
+    }
+}
+
+CamionesMain.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+const reducer = 'pedido'
+const mapStateToProps = state => ({
+  force: state, // force state from reducer
+});
+
+const mapDispatchToProps = dispatch => ({
+  dispatch
+});
+
+const CamionesMainMapped = connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(CamionesMain);
+
+export default withStyles(styles)(CamionesMainMapped);
\ No newline at end of file
diff --git a/front/odiparpack/app/containers/Odipar/Simulacion/Simulacion7Dias.js b/front/odiparpack/app/containers/Odipar/Simulacion/Simulacion7Dias.js
new file mode 100644
index 0000000..97bcf5b
--- /dev/null
+++ b/front/odiparpack/app/containers/Odipar/Simulacion/Simulacion7Dias.js
@@ -0,0 +1,85 @@
+import React, { Component } from "react";
+import { withStyles } from '@material-ui/core/styles';
+import {getX, getY} from './utilCoords'
+import { Icon, Typography } from "@material-ui/core";
+import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch";
+import { mapaH, mapaW } from "odi-utils/constants"
+
+const styles = ({
+    root: {
+      flexGrow: 1,
+      marginTop: 30,
+    }
+  });
+
+
+class Simulacion7Dias extends Component {
+    almacenes = [
+        {
+            ubigeo: '150101',
+            provincia: 'LIMA',
+            latitud:-12.04591952,
+            longitud: -77.03049615,
+            region: 'Costa',
+            esPrincipal: 1
+            },{
+            ubigeo: '130101',
+            provincia: 'TRUJILLO',
+            latitud: -8.11176389,
+            longitud: -79.02868652,
+            region: 'Costa',
+            esPrincipal: 1
+            },{
+            ubigeo: '040101',
+            provincia: 'AREQUIPA',
+            latitud:-16.39881421,
+            longitud: -71.537019649,
+            region: 'Costa',
+            esPrincipal: 1
+            },{
+            ubigeo: '050301',
+            provincia: 'HUANCA SANCOS',
+            latitud:-13.91988366,
+            longitud: -74.33388289,
+            region: 'Costa',
+            esPrincipal: 0
+            }
+    ]
+    render() { 
+        return (
+            <>
+                <Typography variant="h4">
+                    {`Resultado de simulación a 7 días`}
+                </Typography>
+            <TransformWrapper
+                defaultScale={1}
+                maxScale={1.8}
+                defaultPositionX={200}
+                defaultPositionY={100}
+            >
+                <TransformComponent>
+                    <div>
+                        <img src={require("../../../../public/images/mapaM.png")}/>
+                        {this.almacenes.map((item,index) => { 
+                            console.log(index)
+                            return <div style={{ position: 'absolute', left:`${getX(item.longitud)}px`, top: `${getY(item.latitud)}px`, color:"black"}}>
+                                <Icon style={item.esPrincipal==1? {color:'blue', fontSize:18}:{color:'black', fontSize:15}}>house</Icon>
+                                </div>
+                        })}
+                    </div>
+                    <svg width={mapaW} height={mapaH} style={{position: 'absolute', left: '14px' , top: '34px'}}>
+                <path fill="none" stroke="red"
+                    d="M 160 437, L 82 283, L 376 600" />
+                    <circle r="5" fill="red">
+                    <animateMotion dur="10s" repeatCount={1}
+                        path="M 163 437, L 85 283, L 378 600"/>
+                    </circle>
+                </svg>
+                </TransformComponent>
+            </TransformWrapper>
+            </>
+        );
+    }
+}
+ 
+export default withStyles(styles)(Simulacion7Dias);
\ No newline at end of file
diff --git a/front/odiparpack/app/containers/Odipar/Simulacion/SimulacionMain.js b/front/odiparpack/app/containers/Odipar/Simulacion/SimulacionMain.js
new file mode 100644
index 0000000..616fab8
--- /dev/null
+++ b/front/odiparpack/app/containers/Odipar/Simulacion/SimulacionMain.js
@@ -0,0 +1,96 @@
+import React, {Component} from "react";
+import { Button, Divider, FormControl, Grid, InputLabel, MenuItem, Paper, Select, Typography } from "@material-ui/core";
+import { withStyles } from '@material-ui/core/styles';
+import { Field, reduxForm } from "redux-form";
+import { SelectRedux } from 'ba-components/Forms/ReduxFormMUI';
+
+const styles = ({
+    root: {
+      flexGrow: 1,
+      marginTop: 30,
+      padding: 20
+    },
+    field: {
+        width: '70%',
+        marginBottom: 20
+    }
+  });
+
+  const initData = {
+    selection: 'option1',
+  };
+
+class SimulacionMain extends Component {
+    state = {
+        tipo:''
+    }
+
+    changeTipo(tipo){
+        this.setState({tipo: tipo})
+    }
+
+    handleChange = event => {
+        this.setState({ [event.target.name]: event.target.value });
+      };
+
+    render() { 
+        const trueBool = true;
+        const { classes } = this.props;
+        return (
+          <div>
+            <Typography variant="h4">
+                {`Simulación`}
+            </Typography>
+            <div>  
+              <Paper className={classes.root}>
+                <Grid container>
+                    <Grid item xs={12} sm={5} >
+                        <Typography variant="h6">
+                            {`Datos generales`}
+                        </Typography>
+                        <form>
+                            <div>
+                            <FormControl className={classes.field}>
+                                <InputLabel htmlFor="selection">Tipo de simulación</InputLabel>
+                                <Select
+                                    inputProps={{
+                                        name: 'tipo',
+                                        id: 'tipoid',
+                                      }}
+                                    value={initData.selection}
+                                    onChange={this.handleChange}
+                                    placeholder="Seleccionar"
+                                    autoWidth={trueBool}
+                                >
+                                <MenuItem value = "option1" >Simulación a 7 días</MenuItem>
+                                <MenuItem value="option2" >Simulación a colapso</MenuItem>                                
+                                </Select>
+                            </FormControl>
+                            </div>
+
+                            <div>
+                                <Button variant="contained" color="secondary">
+                                    Iniciar Simulación
+                                </Button>
+                            </div>
+                        </form>
+                    </Grid>
+                    <Divider variant="inset" style={{color:'black'}}/>
+                    <Grid item xs={12} sm={7}>
+                        <Typography variant="h6">
+                            {`Pedidos`}
+                        </Typography>
+                    </Grid>
+                </Grid>
+              </Paper>
+            </div>
+          </div>
+        );
+    }
+}
+
+const SimulacionMainMapped = reduxForm({
+    form: 'immutableExample',
+  })(SimulacionMain);
+ 
+export default withStyles(styles)(SimulacionMainMapped);
\ No newline at end of file
diff --git a/front/odiparpack/app/containers/Odipar/Simulacion/utilCoords.js b/front/odiparpack/app/containers/Odipar/Simulacion/utilCoords.js
new file mode 100644
index 0000000..bac5f9b
--- /dev/null
+++ b/front/odiparpack/app/containers/Odipar/Simulacion/utilCoords.js
@@ -0,0 +1,42 @@
+import { mapaH, mapaW } from "odi-utils/constants"
+export function transform(lonlat){
+    const earth_radius_km = 6378.1370 
+    return earth_radius_km*(lonlat)*Math.PI/180
+}
+
+
+export function limits(type){
+    const inferior={lon:-81.324216, lat: -18.345605}
+    const superior={lon:-68.654087, lat:-0.043656}
+    
+    if (type == 'x'){
+        return [transform(inferior.lon), transform(superior.lon)]
+    }
+    return [transform(inferior.lat),transform(superior.lat)]
+
+}
+
+//inicio de mapa en x = 13 y = 33
+export function getX (lon){
+    const [infx, supx] = limits('x');
+    const imgW = mapaW
+    const inicioX= -3
+    const Fx = Math.abs(infx) - Math.abs(supx)
+    const xPrev = transform(lon)
+    const newX = Math.abs(infx) - Math.abs(xPrev)
+    const x = Math.trunc((Math.abs(newX)*(imgW))/(Fx))
+    console.log("x: ", x + 0)    
+    return x + inicioX;
+}
+
+export function getY (lat){
+    const [ infy, supy] = limits('y');
+    const imgH = mapaH
+    const inicioY = -8
+    const Fy = Math.abs(infy) - Math.abs(supy)
+    const yPrev = transform(lat)
+    const newY = Math.abs(yPrev) - Math.abs(supy)
+    const y = Math.trunc((Math.abs(newY)*(imgH))/(Fy))
+    console.log("y: ", y +0)    
+    return y + inicioY
+ }
\ No newline at end of file
diff --git a/front/odiparpack/app/containers/pageListAsync.js b/front/odiparpack/app/containers/pageListAsync.js
index 14381b1..eac9a34 100644
--- a/front/odiparpack/app/containers/pageListAsync.js
+++ b/front/odiparpack/app/containers/pageListAsync.js
@@ -1,18 +1,41 @@
 import Loadable from 'react-loadable';
 import Loading from 'ba-components/Loading';
 
+// 1.Pedidos
+export const Simulacion7Dias = Loadable({
+  loader: () => import('./Odipar/Simulacion/Simulacion7Dias'),
+  loading: Loading,
+});
+
 // 2.Pedidos
 export const Pedidos = Loadable({
   loader: () => import('./Odipar/Pedidos/Pedidos'),
   loading: Loading,
 });
 
+// 3.Camiones
+export const Camiones = Loadable({
+  loader: () => import('./Odipar/Camiones/CamionesMain'),
+  loading: Loading,
+});
+
 // 4. Almacenes
 export const Almacenes = Loadable({
   loader: () => import('./Odipar/Almacen/Almacenes'),
   loading: Loading,
 });
 
+// 5. Tramos
+export const Tramos = Loadable({
+  loader: () => import('./Odipar/RedTramos/TramosMain'),
+  loading: Loading,
+});
+
+// 6. Simulacion
+export const SimulacionMain = Loadable({
+  loader: () => import('./Odipar/Simulacion/SimulacionMain'),
+  loading: Loading,
+});
 
 
 // Dashboard
diff --git a/front/odiparpack/app/index.html b/front/odiparpack/app/index.html
index 74ddd5a..ad0121d 100644
--- a/front/odiparpack/app/index.html
+++ b/front/odiparpack/app/index.html
@@ -28,6 +28,8 @@
     <meta name="theme-color" content="#512ea8" />
     <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet" />
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
+      rel="stylesheet">
     <!-- Facebook -->
     <meta property="author" content="boss" />
     <meta property="og:site_name" content="boss.ux-maestro.com" />
diff --git a/front/odiparpack/app/redux/reducers.js b/front/odiparpack/app/redux/reducers.js
index 0c2e9b8..0501270 100644
--- a/front/odiparpack/app/redux/reducers.js
+++ b/front/odiparpack/app/redux/reducers.js
@@ -62,6 +62,10 @@ export default function createReducer(injectedReducers) {
     crudTbFrmDemo: branchReducer(crudTableForm, 'crudTbFrmDemo'),
     crudPedido: branchReducer(crudTableForm, 'crudPedido'),
     crudAlmacen: branchReducer(crudTableForm, 'crudAlmacen'),
+    crudCamion: branchReducer(crudTableForm, 'crudCamion'),
+    crudFlota: branchReducer(crudTableForm, 'crudFlota'),
+    crudAveria: branchReducer(crudTableForm, 'crudAveria'),
+    crudRuta: branchReducer(crudTableForm, 'crudRuta'),
     pedido,
     almacen,
     message,
diff --git a/front/odiparpack/app/styles/components/Table.scss b/front/odiparpack/app/styles/components/Table.scss
index 04209f0..464c449 100644
--- a/front/odiparpack/app/styles/components/Table.scss
+++ b/front/odiparpack/app/styles/components/Table.scss
@@ -79,10 +79,9 @@ table.big{
 }
 
 .tableCrud{
-  table-layout: fixed;
+  table-layout: auto;
   .hiddenField{
     opacity: 0;
-    position: absolute;
   }
   .editing{
     background: material-color('lime', '50');
diff --git a/front/odiparpack/app/utils/odipar/constants.js b/front/odiparpack/app/utils/odipar/constants.js
index 73f3521..d4b2d1b 100644
--- a/front/odiparpack/app/utils/odipar/constants.js
+++ b/front/odiparpack/app/utils/odipar/constants.js
@@ -6,4 +6,7 @@ export function partial(fn, ...presetArgs) {
     return function partiallyApplied(...laterArgs) {
       return fn(...presetArgs, ...laterArgs);
     };
-}
\ No newline at end of file
+}
+
+export const mapaH = 718
+export const mapaW = 498
\ No newline at end of file
diff --git a/front/odiparpack/app/utils/odipar/menu.js b/front/odiparpack/app/utils/odipar/menu.js
index 1b280b8..27d6d17 100644
--- a/front/odiparpack/app/utils/odipar/menu.js
+++ b/front/odiparpack/app/utils/odipar/menu.js
@@ -3,7 +3,7 @@ module.exports = [
       key: 'seguimiento',
       name: 'Seguimiento',
       icon: 'near_me',
-      link: '/app/dashboard-v2',
+      link: '/app/simulacion',
       child: [ ]
     },
     {
@@ -17,7 +17,7 @@ module.exports = [
       key: 'camiones',
       name: 'Camiones',
       icon: 'local_shipping',
-      link: '/app/layouts/grid',
+      link: '/app/camiones',
       child: [ ]
     },
     {
@@ -31,7 +31,7 @@ module.exports = [
       key: 'red_tramos',
       name: 'Red de Tramos',
       icon: 'location_on',
-      link: '/app/forms/reduxform',
+      link: '/app/tramos',
       child: [ ]
     },
     {
@@ -45,7 +45,7 @@ module.exports = [
       key: 'simulacion',
       name: 'Simulación',
       icon: 'fast_forward',
-      link: '/app/pages/calendar',
+      link: '/app/simulacion/main',
       child: [ ]
     }
   ];
\ No newline at end of file
diff --git a/front/odiparpack/package.json b/front/odiparpack/package.json
index d2cde1e..83888ba 100644
--- a/front/odiparpack/package.json
+++ b/front/odiparpack/package.json
@@ -169,6 +169,7 @@
     "react-syntax-highlighter": "^7.0.0",
     "react-text-mask": "^5.3.2",
     "react-ultimate-pagination": "^1.2.0",
+    "react-zoom-pan-pinch": "^2.1.3",
     "recharts": "^1.5.0",
     "recompose": "^0.28.2",
     "redux": "4.0.1",
diff --git a/front/odiparpack/public/images/mapa.png b/front/odiparpack/public/images/mapa.png
new file mode 100644
index 0000000..a8b2b07
--- /dev/null
+++ b/front/odiparpack/public/images/mapa.png
diff --git a/front/odiparpack/public/images/mapa.svg b/front/odiparpack/public/images/mapa.svg
new file mode 100644
index 0000000..bee29c1
--- /dev/null
+++ b/front/odiparpack/public/images/mapa.svg
@@ -0,0 +1,238 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="414.000000pt" height="592.000000pt" viewBox="0 0 414.000000 592.000000"
+ preserveAspectRatio="xMidYMid meet">
+
+<g transform="translate(0.000000,592.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M1295 5910 c27 -12 35 -12 35 0 0 6 -12 10 -27 9 -25 0 -26 -1 -8 -9z"/>
+<path d="M1383 5913 c9 -2 23 -2 30 0 6 3 -1 5 -18 5 -16 0 -22 -2 -12 -5z"/>
+<path d="M1528 5913 c6 -2 18 -2 25 0 6 3 1 5 -13 5 -14 0 -19 -2 -12 -5z"/>
+<path d="M1946 5881 c-3 -4 -31 -9 -62 -10 -77 -1 -83 -11 -8 -11 33 0 65 5
+72 12 8 8 15 8 29 -3 16 -13 17 -12 4 4 -15 19 -27 22 -35 8z"/>
+<path d="M911 5866 c-20 -24 -9 -51 22 -54 27 -3 28 -1 25 30 -3 36 -27 48
+-47 24z m34 -6 c4 -6 1 -9 -7 -8 -7 2 -12 -5 -11 -16 1 -11 -2 -15 -8 -9 -11
+11 -2 43 11 43 5 0 12 -5 15 -10z"/>
+<path d="M3550 5851 c0 -6 4 -13 10 -16 6 -3 7 1 4 9 -7 18 -14 21 -14 7z"/>
+<path d="M1831 5847 c2 -1 13 -9 24 -17 19 -14 19 -14 6 3 -7 9 -18 17 -24 17
+-6 0 -8 -1 -6 -3z"/>
+<path d="M1928 5723 c5 -21 7 -23 10 -9 2 10 0 22 -6 28 -6 6 -7 0 -4 -19z"/>
+<path d="M2233 5653 c4 -3 1 -13 -6 -22 -11 -14 -10 -14 5 -2 16 12 16 31 1
+31 -4 0 -3 -3 0 -7z"/>
+<path d="M2300 5580 c-9 -6 -10 -10 -3 -10 6 0 15 5 18 10 8 12 4 12 -15 0z"/>
+<path d="M3751 5554 c0 -11 3 -14 6 -6 3 7 2 16 -1 19 -3 4 -6 -2 -5 -13z"/>
+<path d="M2330 5556 c0 -2 7 -7 16 -10 8 -3 12 -2 9 4 -6 10 -25 14 -25 6z"/>
+<path d="M1070 5511 c0 -13 -8 -21 -22 -23 -20 -3 -23 -9 -23 -43 0 -38 2 -40
+33 -43 l32 -3 0 65 c0 37 -4 66 -10 66 -5 0 -10 -9 -10 -19z m0 -66 c0 -16 -6
+-25 -15 -25 -9 0 -15 9 -15 25 0 16 6 25 15 25 9 0 15 -9 15 -25z"/>
+<path d="M670 5460 l0 -60 35 0 c19 0 35 5 35 10 0 6 -11 10 -25 10 -31 0 -33
+25 -2 35 l22 8 -22 4 c-32 6 -30 33 2 33 14 0 25 5 25 10 0 6 -16 10 -35 10
+l-35 0 0 -60z"/>
+<path d="M761 5468 c-12 -33 2 -63 29 -63 13 0 25 5 27 11 2 6 -7 10 -19 10
+-17 -1 -23 5 -23 19 0 14 6 20 23 19 28 -1 23 20 -6 24 -16 2 -25 -3 -31 -20z"/>
+<path d="M842 5448 c3 -40 5 -43 36 -46 32 -3 32 -3 32 42 0 25 -4 46 -10 46
+-5 0 -10 -16 -10 -35 0 -24 -5 -35 -15 -35 -10 0 -15 11 -15 35 0 19 -5 35
+-11 35 -6 0 -9 -17 -7 -42z"/>
+<path d="M940 5481 c0 -5 10 -11 23 -14 21 -3 21 -4 -6 -15 -39 -17 -33 -46
+11 -50 l33 -3 -3 43 c-3 39 -6 43 -30 46 -16 2 -28 -1 -28 -7z m40 -51 c0 -5
+-7 -10 -15 -10 -8 0 -15 5 -15 10 0 6 7 10 15 10 8 0 15 -4 15 -10z"/>
+<path d="M1122 5478 c-7 -7 -12 -21 -12 -33 0 -46 53 -62 71 -21 21 45 -26 87
+-59 54z m43 -33 c0 -11 -8 -21 -17 -23 -14 -3 -18 3 -18 23 0 20 4 26 18 23 9
+-2 17 -12 17 -23z"/>
+<path d="M1200 5445 c0 -25 5 -45 10 -45 6 0 10 14 10 30 0 18 6 33 15 36 24
+9 17 24 -10 24 -23 0 -25 -4 -25 -45z"/>
+<path d="M3751 5434 c0 -11 3 -14 6 -6 3 7 2 16 -1 19 -3 4 -6 -2 -5 -13z"/>
+<path d="M1789 5373 c-13 -16 -12 -17 4 -4 9 7 17 15 17 17 0 8 -8 3 -21 -13z"/>
+<path d="M2470 5366 c0 -2 8 -10 18 -17 15 -13 16 -12 3 4 -13 16 -21 21 -21
+13z"/>
+<path d="M2528 5333 c7 -3 16 -2 19 1 4 3 -2 6 -13 5 -11 0 -14 -3 -6 -6z"/>
+<path d="M423 5230 c0 -30 2 -43 4 -27 2 15 2 39 0 55 -2 15 -4 2 -4 -28z"/>
+<path d="M35 5240 c-3 -6 1 -7 9 -4 9 3 16 2 16 -4 0 -5 -9 -12 -21 -15 -29
+-8 -19 -31 14 -35 23 -3 27 1 27 20 0 36 -31 61 -45 38z m25 -40 c0 -5 -4 -10
+-10 -10 -5 0 -10 5 -10 10 0 6 5 10 10 10 6 0 10 -4 10 -10z"/>
+<path d="M96 5229 c5 -13 8 -36 9 -51 0 -14 3 -24 7 -22 10 7 31 75 24 81 -3
+4 -6 -1 -6 -10 0 -9 -4 -17 -10 -17 -5 0 -10 6 -10 14 0 8 -5 18 -11 22 -8 4
+-9 -1 -3 -17z"/>
+<path d="M175 5240 c-3 -6 1 -7 9 -4 9 3 16 2 16 -4 0 -5 -9 -12 -20 -15 -20
+-5 -29 -37 -10 -37 5 0 9 5 8 11 -2 6 3 14 10 16 6 3 12 -2 12 -11 0 -9 5 -16
+10 -16 14 0 13 43 -2 58 -15 15 -25 15 -33 2z"/>
+<path d="M241 5236 c-16 -19 -11 -48 9 -54 13 -5 13 -3 1 11 -11 14 -11 20 -1
+32 7 9 11 18 8 20 -3 3 -11 -1 -17 -9z"/>
+<path d="M279 5243 c-3 -24 0 -86 5 -91 3 -3 6 18 6 46 0 29 -2 52 -5 52 -3 0
+-5 -3 -6 -7z"/>
+<path d="M2 5210 c0 -19 2 -27 5 -17 2 9 2 25 0 35 -3 9 -5 1 -5 -18z"/>
+<path d="M313 5216 c1 -16 9 -32 17 -34 12 -4 13 -2 4 9 -7 8 -14 23 -17 34
+-4 13 -5 9 -4 -9z"/>
+<path d="M358 5215 c-6 -30 -3 -43 8 -33 3 4 4 19 2 35 l-3 28 -7 -30z"/>
+<path d="M392 5210 c0 -19 2 -27 5 -17 2 9 2 25 0 35 -3 9 -5 1 -5 -18z"/>
+<path d="M480 5236 c0 -2 7 -7 16 -10 8 -3 12 -2 9 4 -6 10 -25 14 -25 6z"/>
+<path d="M2589 5213 c-13 -16 -12 -17 4 -4 16 13 21 21 13 21 -2 0 -10 -8 -17
+-17z"/>
+<path d="M3030 5215 c0 -8 4 -15 10 -15 5 0 7 7 4 15 -4 8 -8 15 -10 15 -2 0
+-4 -7 -4 -15z"/>
+<path d="M460 5211 c0 -6 4 -13 10 -16 6 -3 7 1 4 9 -7 18 -14 21 -14 7z"/>
+<path d="M1639 5203 c-13 -16 -12 -17 4 -4 9 7 17 15 17 17 0 8 -8 3 -21 -13z"/>
+<path d="M3288 5203 c7 -3 16 -2 19 1 4 3 -2 6 -13 5 -11 0 -14 -3 -6 -6z"/>
+<path d="M3219 5172 l-24 -27 25 21 c14 12 31 19 38 17 6 -3 12 -3 12 0 0 18
+-32 11 -51 -11z"/>
+<path d="M2590 5186 c0 -2 8 -10 18 -17 15 -13 16 -12 3 4 -13 16 -21 21 -21
+13z"/>
+<path d="M3105 5179 c-4 -6 -4 -13 -1 -16 3 -4 6 -1 6 6 0 7 5 9 12 5 7 -4 8
+-3 4 4 -9 15 -13 15 -21 1z"/>
+<path d="M3701 5174 c0 -11 3 -14 6 -6 3 7 2 16 -1 19 -3 4 -6 -2 -5 -13z"/>
+<path d="M1589 5163 c-13 -16 -12 -17 4 -4 16 13 21 21 13 21 -2 0 -10 -8 -17
+-17z"/>
+<path d="M3415 5130 c10 -11 20 -20 23 -20 3 0 -3 9 -13 20 -10 11 -20 20 -23
+20 -3 0 3 -9 13 -20z"/>
+<path d="M1539 5123 c-13 -16 -12 -17 4 -4 9 7 17 15 17 17 0 8 -8 3 -21 -13z"/>
+<path d="M3691 5124 c0 -11 3 -14 6 -6 3 7 2 16 -1 19 -3 4 -6 -2 -5 -13z"/>
+<path d="M3547 5041 c-4 -17 -3 -21 5 -13 5 5 8 16 6 23 -3 8 -7 3 -11 -10z"/>
+<path d="M747 5013 c-10 -10 -8 -43 2 -43 5 0 7 10 3 22 -4 17 -2 20 11 15 10
+-4 17 -2 17 3 0 11 -23 13 -33 3z"/>
+<path d="M1065 4910 c-32 -33 -57 -61 -54 -63 2 -1 31 26 63 60 75 80 69 82
+-9 3z"/>
+<path d="M597 4953 c-3 -5 5 -8 18 -8 13 0 21 3 18 8 -2 4 -10 7 -18 7 -8 0
+-16 -3 -18 -7z"/>
+<path d="M660 4916 c0 -14 4 -27 8 -30 5 -3 6 8 4 25 -5 35 -12 38 -12 5z"/>
+<path d="M750 4931 c0 -5 -8 -12 -17 -14 -14 -4 -12 -5 5 -6 13 -1 22 5 22 14
+0 8 -2 15 -5 15 -3 0 -5 -4 -5 -9z"/>
+<path d="M782 4915 c0 -16 2 -22 5 -12 2 9 2 23 0 30 -3 6 -5 -1 -5 -18z"/>
+<path d="M812 4915 c0 -16 2 -22 5 -12 2 9 2 23 0 30 -3 6 -5 -1 -5 -18z"/>
+<path d="M900 4903 c0 -11 3 -14 8 -7 4 6 14 14 22 17 10 4 8 6 -7 6 -16 1
+-23 -5 -23 -16z"/>
+<path d="M3641 4864 c0 -11 3 -14 6 -6 3 7 2 16 -1 19 -3 4 -6 -2 -5 -13z"/>
+<path d="M961 4834 c0 -11 3 -14 6 -6 3 7 2 16 -1 19 -3 4 -6 -2 -5 -13z"/>
+<path d="M1010 4810 c-9 -6 -10 -10 -3 -10 6 0 15 5 18 10 8 12 4 12 -15 0z"/>
+<path d="M3471 4707 c2 -1 13 -9 24 -17 19 -14 19 -14 6 3 -7 9 -18 17 -24 17
+-6 0 -8 -1 -6 -3z"/>
+<path d="M3530 4645 c13 -14 26 -25 28 -25 3 0 -5 11 -18 25 -13 14 -26 25
+-28 25 -3 0 5 -11 18 -25z"/>
+<path d="M3601 4654 c0 -11 3 -14 6 -6 3 7 2 16 -1 19 -3 4 -6 -2 -5 -13z"/>
+<path d="M3467 4590 c3 -11 7 -20 9 -20 2 0 4 9 4 20 0 11 -4 20 -9 20 -5 0
+-7 -9 -4 -20z"/>
+<path d="M3573 4586 c12 -25 27 -17 26 14 0 11 -2 11 -6 2 -4 -10 -8 -10 -18
+-2 -11 10 -12 7 -2 -14z"/>
+<path d="M3309 4583 c-13 -16 -12 -17 4 -4 9 7 17 15 17 17 0 8 -8 3 -21 -13z"/>
+<path d="M3525 4560 c-3 -6 1 -7 9 -4 18 7 21 14 7 14 -6 0 -13 -4 -16 -10z"/>
+<path d="M3560 4545 c0 -8 4 -15 10 -15 5 0 7 7 4 15 -4 8 -8 15 -10 15 -2 0
+-4 -7 -4 -15z"/>
+<path d="M558 4503 c7 -3 16 -2 19 1 4 3 -2 6 -13 5 -11 0 -14 -3 -6 -6z"/>
+<path d="M3008 4493 c7 -3 16 -2 19 1 4 3 -2 6 -13 5 -11 0 -14 -3 -6 -6z"/>
+<path d="M2933 4450 c-23 -22 -39 -40 -35 -40 5 0 26 18 47 40 50 51 43 51
+-12 0z"/>
+<path d="M664 4373 c17 -18 37 -33 45 -32 14 0 14 1 1 6 -8 3 -28 17 -45 32
+l-30 26 29 -32z"/>
+<path d="M2816 4373 c-6 -14 -5 -15 5 -6 7 7 10 15 7 18 -3 3 -9 -2 -12 -12z"/>
+<path d="M2651 4174 c0 -11 3 -14 6 -6 3 7 2 16 -1 19 -3 4 -6 -2 -5 -13z"/>
+<path d="M2534 3840 c-12 -5 -25 -13 -28 -19 -4 -5 7 -3 24 5 16 9 30 17 30
+20 0 5 0 5 -26 -6z"/>
+<path d="M608 3455 c2 -19 5 -35 7 -35 2 0 5 16 7 35 2 21 0 35 -7 35 -7 0 -9
+-14 -7 -35z"/>
+<path d="M813 3455 c0 -22 2 -30 4 -17 2 12 2 30 0 40 -3 9 -5 -1 -4 -23z"/>
+<path d="M843 3455 c0 -22 2 -30 4 -17 2 12 2 30 0 40 -3 9 -5 -1 -4 -23z"/>
+<path d="M662 3445 c0 -16 2 -22 5 -12 2 9 2 23 0 30 -3 6 -5 -1 -5 -18z"/>
+<path d="M732 3445 c0 -16 2 -22 5 -12 2 9 2 23 0 30 -3 6 -5 -1 -5 -18z"/>
+<path d="M759 3438 c-3 -22 -1 -34 4 -29 5 5 7 21 5 37 -3 27 -4 26 -9 -8z"/>
+<path d="M2417 3450 c3 -11 7 -20 9 -20 2 0 4 9 4 20 0 11 -4 20 -9 20 -5 0
+-7 -9 -4 -20z"/>
+<path d="M2400 3421 c0 -6 4 -13 10 -16 6 -3 7 1 4 9 -7 18 -14 21 -14 7z"/>
+<path d="M733 3365 c-3 -9 -3 -19 1 -22 3 -4 6 1 6 10 0 8 6 18 13 20 9 4 9 6
+-1 6 -7 1 -15 -6 -19 -14z"/>
+<path d="M2460 3291 c0 -6 4 -13 10 -16 6 -3 7 1 4 9 -7 18 -14 21 -14 7z"/>
+<path d="M3372 3135 c0 -22 2 -32 5 -22 2 9 10 17 16 17 9 0 9 2 1 8 -6 4 -14
+14 -17 22 -3 8 -5 -3 -5 -25z"/>
+<path d="M2890 3136 c0 -2 7 -7 16 -10 8 -3 12 -2 9 4 -6 10 -25 14 -25 6z"/>
+<path d="M3188 3133 c7 -3 16 -2 19 1 4 3 -2 6 -13 5 -11 0 -14 -3 -6 -6z"/>
+<path d="M3648 3133 c6 -2 18 -2 25 0 6 3 1 5 -13 5 -14 0 -19 -2 -12 -5z"/>
+<path d="M3728 3133 c7 -3 16 -2 19 1 4 3 -2 6 -13 5 -11 0 -14 -3 -6 -6z"/>
+<path d="M3038 3113 c6 -2 18 -2 25 0 6 3 1 5 -13 5 -14 0 -19 -2 -12 -5z"/>
+<path d="M3480 3116 c0 -2 11 -6 25 -8 13 -3 22 -1 19 3 -5 9 -44 13 -44 5z"/>
+<path d="M2651 3060 c0 -15 -4 -30 -8 -36 -5 -5 -2 -4 5 2 8 6 12 22 9 35 -4
+24 -4 24 -6 -1z"/>
+<path d="M2580 2955 c-10 -12 -10 -15 2 -15 8 0 15 7 15 15 0 8 -1 15 -2 15
+-2 0 -8 -7 -15 -15z"/>
+<path d="M3386 2932 c-2 -4 4 -8 14 -8 10 0 16 4 14 8 -3 4 -9 8 -14 8 -5 0
+-11 -4 -14 -8z"/>
+<path d="M3339 2893 c-13 -16 -12 -17 4 -4 16 13 21 21 13 21 -2 0 -10 -8 -17
+-17z"/>
+<path d="M3393 2895 c-3 -9 -3 -18 -1 -21 3 -3 8 4 11 16 6 23 -1 27 -10 5z"/>
+<path d="M2860 2871 c0 -17 4 -32 8 -35 4 -2 6 11 4 30 -5 42 -12 45 -12 5z"/>
+<path d="M3289 2853 c-13 -16 -12 -17 4 -4 16 13 21 21 13 21 -2 0 -10 -8 -17
+-17z"/>
+<path d="M3088 2763 c18 -2 45 -2 60 0 15 2 0 4 -33 4 -33 0 -45 -2 -27 -4z"/>
+<path d="M1740 2626 c0 -55 15 -78 22 -34 2 14 12 24 28 28 18 4 25 12 25 30
+0 22 -5 25 -37 28 l-38 3 0 -55z m55 24 c0 -8 -8 -16 -17 -18 -13 -2 -18 3
+-18 18 0 15 5 20 18 18 9 -2 17 -10 17 -18z"/>
+<path d="M1852 2648 c-30 -30 -1 -88 35 -72 16 7 15 8 -4 11 -31 6 -29 23 2
+23 14 0 25 6 25 13 0 16 -20 37 -35 37 -6 0 -16 -5 -23 -12z m33 -18 c-3 -5
+-10 -10 -16 -10 -5 0 -9 5 -9 10 0 6 7 10 16 10 8 0 12 -4 9 -10z"/>
+<path d="M1932 2610 c1 -37 2 -39 5 -12 3 18 11 36 19 39 21 8 17 19 -6 19
+-17 0 -20 -6 -18 -46z"/>
+<path d="M1980 2626 c0 -37 13 -52 48 -54 20 -1 22 4 22 44 0 24 -4 44 -10 44
+-5 0 -10 -16 -10 -35 0 -24 -5 -35 -15 -35 -10 0 -15 11 -15 35 0 19 -4 35
+-10 35 -5 0 -10 -15 -10 -34z"/>
+<path d="M3598 2463 c12 -2 30 -2 40 0 9 3 -1 5 -23 4 -22 0 -30 -2 -17 -4z"/>
+<path d="M3753 2453 c9 -2 23 -2 30 0 6 3 -1 5 -18 5 -16 0 -22 -2 -12 -5z"/>
+<path d="M3873 2443 c9 -2 23 -2 30 0 6 3 -1 5 -18 5 -16 0 -22 -2 -12 -5z"/>
+<path d="M1244 2215 c1 -46 3 -50 26 -52 22 -2 23 -2 5 6 -14 5 -22 21 -26 52
+l-7 44 2 -50z"/>
+<path d="M1378 2227 c6 -7 12 -23 14 -37 3 -23 4 -22 9 7 4 25 2 33 -13 37
+-14 3 -16 1 -10 -7z"/>
+<path d="M1474 2228 c-4 -6 -3 -8 4 -4 6 3 13 2 16 -3 3 -5 -3 -11 -14 -14
+-20 -5 -29 -37 -10 -37 5 0 7 7 4 15 -4 10 0 15 11 15 11 0 15 -5 11 -15 -3
+-8 -1 -15 4 -15 6 0 10 13 10 29 0 30 -24 49 -36 29z"/>
+<path d="M1312 2200 c0 -19 2 -27 5 -17 2 9 2 25 0 35 -3 9 -5 1 -5 -18z"/>
+<path d="M1340 2200 c0 -16 4 -30 8 -30 5 0 9 14 10 30 0 17 -4 30 -9 30 -5 0
+-9 -13 -9 -30z"/>
+<path d="M1428 2200 c2 -16 6 -30 8 -30 2 0 4 14 4 30 0 17 -4 30 -8 30 -5 0
+-7 -13 -4 -30z"/>
+<path d="M1350 2126 c-18 -22 -5 -46 25 -46 23 0 26 4 23 27 -3 32 -29 41 -48
+19z m40 -6 c0 -5 -6 -9 -12 -7 -7 1 -12 -5 -10 -13 3 -11 1 -12 -8 -3 -7 6 -9
+16 -6 22 9 14 36 14 36 1z"/>
+<path d="M2830 1746 c0 -2 9 -6 20 -9 11 -3 18 -1 14 4 -5 9 -34 13 -34 5z"/>
+<path d="M2922 1705 c0 -16 2 -22 5 -12 2 9 2 23 0 30 -3 6 -5 -1 -5 -18z"/>
+<path d="M2950 1710 c0 -6 7 -10 15 -10 8 0 15 2 15 4 0 2 -7 6 -15 10 -8 3
+-15 1 -15 -4z"/>
+<path d="M2943 1635 c-3 -9 -3 -19 1 -22 3 -4 6 1 6 10 0 8 8 18 18 20 16 4
+16 5 -1 6 -10 0 -20 -6 -24 -14z"/>
+<path d="M3880 1565 c13 -14 26 -25 28 -25 3 0 -5 11 -18 25 -13 14 -26 25
+-28 25 -3 0 5 -11 18 -25z"/>
+<path d="M3915 1410 c-16 -7 -17 -9 -3 -9 9 -1 20 4 23 9 7 11 7 11 -20 0z"/>
+<path d="M3859 1333 c-13 -16 -12 -17 4 -4 9 7 17 15 17 17 0 8 -8 3 -21 -13z"/>
+<path d="M3812 1270 c0 -14 2 -19 5 -12 2 6 2 18 0 25 -3 6 -5 1 -5 -13z"/>
+<path d="M3780 1161 c0 -6 4 -13 10 -16 6 -3 7 1 4 9 -7 18 -14 21 -14 7z"/>
+<path d="M3791 814 c0 -11 3 -14 6 -6 3 7 2 16 -1 19 -3 4 -6 -2 -5 -13z"/>
+<path d="M3974 785 c1 -46 3 -50 26 -52 25 -3 25 -3 3 8 -16 9 -23 23 -26 53
+-4 34 -4 33 -3 -9z"/>
+<path d="M2962 785 c0 -16 2 -22 5 -12 2 9 2 23 0 30 -3 6 -5 -1 -5 -18z"/>
+<path d="M3053 794 c-3 -8 -2 -19 3 -24 5 -5 9 1 9 16 0 28 -3 30 -12 8z"/>
+<path d="M3152 785 c0 -16 2 -22 5 -12 2 9 2 23 0 30 -3 6 -5 -1 -5 -18z"/>
+<path d="M3200 775 c0 -19 2 -35 4 -35 2 0 6 16 8 35 2 19 0 35 -4 35 -4 0 -8
+-16 -8 -35z"/>
+<path d="M4049 798 c-11 -8 -11 -9 3 -4 10 3 20 1 23 -3 2 -5 -4 -11 -15 -14
+-20 -5 -29 -37 -10 -37 5 0 7 7 4 15 -4 10 0 15 11 15 11 0 15 -5 11 -15 -3
+-8 -1 -15 4 -15 15 0 12 57 -3 63 -8 3 -20 1 -28 -5z"/>
+<path d="M3010 790 l-25 -8 28 -1 c15 -1 27 4 27 9 0 6 -1 10 -2 9 -2 -1 -14
+-5 -28 -9z"/>
+<path d="M3241 784 c0 -11 3 -14 6 -6 3 7 2 16 -1 19 -3 4 -6 -2 -5 -13z"/>
+<path d="M3278 783 c6 -2 18 -2 25 0 6 3 1 5 -13 5 -14 0 -19 -2 -12 -5z"/>
+<path d="M2890 776 c0 -2 11 -6 25 -8 14 -3 25 -1 25 3 0 5 -11 9 -25 9 -14 0
+-25 -2 -25 -4z"/>
+<path d="M3900 766 c0 -2 8 -10 18 -17 15 -13 16 -12 3 4 -13 16 -21 21 -21
+13z"/>
+<path d="M3918 714 c-38 -20 -36 -28 2 -9 17 9 30 18 30 20 0 7 -1 6 -32 -11z"/>
+<path d="M3074 709 c-3 -6 -1 -16 5 -22 9 -9 10 -7 5 7 -6 16 -4 18 14 14 12
+-4 20 -2 16 3 -7 12 -31 11 -40 -2z"/>
+<path d="M4131 664 c0 -11 3 -14 6 -6 3 7 2 16 -1 19 -3 4 -6 -2 -5 -13z"/>
+<path d="M3961 416 c-27 -33 10 -109 39 -80 8 8 4 10 -12 10 -20 -1 -23 4 -23
+34 0 30 3 35 22 34 12 0 20 3 17 8 -8 13 -30 9 -43 -6z"/>
+<path d="M4045 389 c-4 -6 -4 -13 -1 -16 3 -4 6 -1 6 5 0 7 7 12 15 12 9 0 15
+-9 15 -25 0 -26 -24 -35 -33 -12 -4 9 -6 9 -6 -1 -2 -22 31 -27 45 -7 9 13 10
+23 3 36 -11 21 -34 25 -44 8z"/>
+<path d="M4115 379 c-5 -14 -1 -27 11 -38 17 -15 17 -15 4 2 -11 15 -11 23 -2
+38 7 10 8 19 3 19 -5 0 -13 -10 -16 -21z"/>
+<path d="M3478 73 c7 -3 16 -2 19 1 4 3 -2 6 -13 5 -11 0 -14 -3 -6 -6z"/>
+</g>
+</svg>
diff --git a/front/odiparpack/public/images/mapa2.png b/front/odiparpack/public/images/mapa2.png
new file mode 100644
index 0000000..376ad36
--- /dev/null
+++ b/front/odiparpack/public/images/mapa2.png
diff --git a/front/odiparpack/public/images/mapaGrande.jpg b/front/odiparpack/public/images/mapaGrande.jpg
new file mode 100644
index 0000000..be60da3
--- /dev/null
+++ b/front/odiparpack/public/images/mapaGrande.jpg
diff --git a/front/odiparpack/public/images/mapaM.png b/front/odiparpack/public/images/mapaM.png
new file mode 100644
index 0000000..61e2f13
--- /dev/null
+++ b/front/odiparpack/public/images/mapaM.png