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

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

16 files changed, 1327 insertions, 0 deletions

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";