From 77fb39778fc4ebb3eea9e9801320efe1a4878c9a Mon Sep 17 00:00:00 2001
From: gabrhr <73925454+gabrhr@users.noreply.github.com>
Date: Wed, 1 Jun 2022 13:08:52 -0500
Subject: =?UTF-8?q?Add=20Almacen,=20Ruta,=20Camiones=20(Flota,=20Camiones,?=
 =?UTF-8?q?=20Aver=C3=ADas)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#TODO
- Arreglar combos
- Añadir los reducer de camiones, rutas, almacen
---
 front/odiparpack/app/containers/App/Application.js |   8 +-
 .../containers/Odipar/Almacen/table/CrudAlmacen.js |   6 +-
 .../Odipar/Camiones/AveriaTab/AveriaTab.js         |  64 +++++++++
 .../Camiones/AveriaTab/table/CrudAveriaTab.js      | 149 ++++++++++++++++++++
 .../Camiones/AveriaTab/table/FormAveriaTab.js      | 153 +++++++++++++++++++++
 .../Odipar/Camiones/AveriaTab/table/dataAveria.js  |  88 ++++++++++++
 .../Odipar/Camiones/AveriaTab/table/index.js       |   1 +
 .../Odipar/Camiones/CamionTab/CamionTab.js         |  64 +++++++++
 .../Camiones/CamionTab/table/CrudCamionTab.js      | 149 ++++++++++++++++++++
 .../Camiones/CamionTab/table/FormCamionTab.js      | 121 ++++++++++++++++
 .../Odipar/Camiones/CamionTab/table/dataCamion.js  |  77 +++++++++++
 .../Odipar/Camiones/CamionTab/table/index.js       |   1 +
 .../app/containers/Odipar/Camiones/CamionesMain.js | 101 ++++++++++++++
 .../Odipar/Camiones/FlotaTab/FlotaTab.js           |  59 ++++++++
 .../Odipar/Camiones/FlotaTab/table/CrudFlotaTab.js | 149 ++++++++++++++++++++
 .../Odipar/Camiones/FlotaTab/table/FormFlotaTab.js | 100 ++++++++++++++
 .../Odipar/Camiones/FlotaTab/table/dataFlota.js    |  50 +++++++
 .../Odipar/Camiones/FlotaTab/table/index.js        |   1 +
 .../containers/Odipar/Pedidos/table/CrudPedido.js  |   6 +-
 .../containers/Odipar/RedTramos/RutaTab/RutaTab.js |  72 ++++++++++
 .../Odipar/RedTramos/RutaTab/table/CrudRutaTab.js  | 149 ++++++++++++++++++++
 .../Odipar/RedTramos/RutaTab/table/FormRutaTab.js  | 108 +++++++++++++++
 .../Odipar/RedTramos/RutaTab/table/dataRuta.js     |  59 ++++++++
 .../Odipar/RedTramos/RutaTab/table/index.js        |   1 +
 .../app/containers/Odipar/RedTramos/TramosMain.js  |  89 ++++++++++++
 front/odiparpack/app/containers/pageListAsync.js   |  12 ++
 26 files changed, 1829 insertions(+), 8 deletions(-)
 create mode 100644 front/odiparpack/app/containers/Odipar/Camiones/AveriaTab/AveriaTab.js
 create mode 100644 front/odiparpack/app/containers/Odipar/Camiones/AveriaTab/table/CrudAveriaTab.js
 create mode 100644 front/odiparpack/app/containers/Odipar/Camiones/AveriaTab/table/FormAveriaTab.js
 create mode 100644 front/odiparpack/app/containers/Odipar/Camiones/AveriaTab/table/dataAveria.js
 create mode 100644 front/odiparpack/app/containers/Odipar/Camiones/AveriaTab/table/index.js
 create mode 100644 front/odiparpack/app/containers/Odipar/Camiones/CamionTab/CamionTab.js
 create mode 100644 front/odiparpack/app/containers/Odipar/Camiones/CamionTab/table/CrudCamionTab.js
 create mode 100644 front/odiparpack/app/containers/Odipar/Camiones/CamionTab/table/FormCamionTab.js
 create mode 100644 front/odiparpack/app/containers/Odipar/Camiones/CamionTab/table/dataCamion.js
 create mode 100644 front/odiparpack/app/containers/Odipar/Camiones/CamionTab/table/index.js
 create mode 100644 front/odiparpack/app/containers/Odipar/Camiones/CamionesMain.js
 create mode 100644 front/odiparpack/app/containers/Odipar/Camiones/FlotaTab/FlotaTab.js
 create mode 100644 front/odiparpack/app/containers/Odipar/Camiones/FlotaTab/table/CrudFlotaTab.js
 create mode 100644 front/odiparpack/app/containers/Odipar/Camiones/FlotaTab/table/FormFlotaTab.js
 create mode 100644 front/odiparpack/app/containers/Odipar/Camiones/FlotaTab/table/dataFlota.js
 create mode 100644 front/odiparpack/app/containers/Odipar/Camiones/FlotaTab/table/index.js
 create mode 100644 front/odiparpack/app/containers/Odipar/RedTramos/RutaTab/RutaTab.js
 create mode 100644 front/odiparpack/app/containers/Odipar/RedTramos/RutaTab/table/CrudRutaTab.js
 create mode 100644 front/odiparpack/app/containers/Odipar/RedTramos/RutaTab/table/FormRutaTab.js
 create mode 100644 front/odiparpack/app/containers/Odipar/RedTramos/RutaTab/table/dataRuta.js
 create mode 100644 front/odiparpack/app/containers/Odipar/RedTramos/RutaTab/table/index.js
 create mode 100644 front/odiparpack/app/containers/Odipar/RedTramos/TramosMain.js

(limited to 'front/odiparpack/app/containers')

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
-- 
cgit v1.2.3