Add Almacen, Ruta, Camiones (Flota, Camiones, Averías)

#TODO
- Arreglar combos
- Añadir los reducer de camiones, rutas, almacen

37 files changed, 2027 insertions, 23 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..6ab9d34 100644
--- a/front/odiparpack/app/containers/App/Application.js
+++ b/front/odiparpack/app/containers/App/Application.js
@@ -27,7 +27,9 @@ import {
   HelpSupport, MapMarker, MapDirection, SearchMap,
   TrafficIndicator, StreetViewMap, NotFound, 
   Pedidos,
-  Almacenes
+  Almacenes,
+  Camiones,
+  Tramos
 } from '../pageListAsync';
 
 function Application(props) {
@@ -38,9 +40,11 @@ function Application(props) {
       <Switch>
         <Route exact path="/app" component={DashboardV1} />
         <Route exact path="/app/dashboard-v2" component={DashboardV2} />
-        {/* Pedidos */}
+        {/* OdiparPack */}
         <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}/>
         { /* 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/pageListAsync.js b/front/odiparpack/app/containers/pageListAsync.js
index 14381b1..b64c622 100644
--- a/front/odiparpack/app/containers/pageListAsync.js
+++ b/front/odiparpack/app/containers/pageListAsync.js
@@ -7,12 +7,24 @@ export const Pedidos = Loadable({
   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,
+});
+
 
 
 // Dashboard
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/menu.js b/front/odiparpack/app/utils/odipar/menu.js
index 1b280b8..cf032e9 100644
--- a/front/odiparpack/app/utils/odipar/menu.js
+++ b/front/odiparpack/app/utils/odipar/menu.js
@@ -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: [ ]
     },
     {
diff --git a/front/odiparpack/package-lock.json b/front/odiparpack/package-lock.json
index 2b4b0e5..28b80be 100644
--- a/front/odiparpack/package-lock.json
+++ b/front/odiparpack/package-lock.json
@@ -4351,7 +4351,7 @@
     "can-use-dom": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/can-use-dom/-/can-use-dom-0.1.0.tgz",
-      "integrity": "sha1-IsxKNKCrxDlQ9CxkEQJKP2NmtFo="
+      "integrity": "sha512-ceOhN1DL7Y4O6M0j9ICgmTYziV89WMd96SvSl0REd8PMgrY0B/WBOPoed5S1KUmJqXgUXh8gzSe6E3ae27upsQ=="
     },
     "caniuse-lite": {
       "version": "1.0.30001015",
@@ -11238,7 +11238,7 @@
     "marker-clusterer-plus": {
       "version": "2.1.4",
       "resolved": "https://registry.npmjs.org/marker-clusterer-plus/-/marker-clusterer-plus-2.1.4.tgz",
-      "integrity": "sha1-+O/3TVmdqzt9Dj/tUmTqDnBPXWc="
+      "integrity": "sha512-4WLZnYCkgsUfSC0pftldd0YrLNupSqVIEdxL979f3sXVMBHTUOF3gDa6cEuOk2z8UGyVGcANiNZgvVc333mrHA=="
     },
     "markerwithlabel": {
       "version": "2.0.2",