Merge branch 'develop' into dayana

52 files changed, 1841 insertions, 513 deletions

diff --git a/front/odiparpack/app/actions/actionTypes.js b/front/odiparpack/app/actions/actionTypes.js
index 08986f2..8fd305f 100644
--- a/front/odiparpack/app/actions/actionTypes.js
+++ b/front/odiparpack/app/actions/actionTypes.js
@@ -82,3 +82,12 @@ export const DELETE_EVENT = 'DELETE_EVENT';
 
 // Notification Form
 export const CLOSE_NOTIF = 'CLOSE_NOTIF';
+
+
+//Odi Message 
+export const CLOSE_MESSAGE = 'CLOSE_MESSAGE';
+export const OPEN_MESSAGE = 'OPEN_MESSAGE';
+//Odi Pedido
+export const LISTA_PEDIDO = 'LISTA_PEDIDO';
+//Odi Almacen
+export const LISTA_ALMACEN = 'LISTA_ALMACEN';
\ No newline at end of file
diff --git a/front/odiparpack/app/actions/almacen.js b/front/odiparpack/app/actions/almacen.js
new file mode 100644
index 0000000..b5694cd
--- /dev/null
+++ b/front/odiparpack/app/actions/almacen.js
@@ -0,0 +1,19 @@
+import {
+    getAlmacenesAPI
+} from 'ba-api/almacen';
+import * as types from './actionTypes'
+
+export const setAlmacenes = (payload) => ({
+        type: types.LISTA_ALMACEN,
+        payload
+});
+
+export const getAlmacenes = () => async dispatch => {
+    try{
+        const res = await getAlmacenesAPI();
+        dispatch(setAlmacenes({res}))
+        return res;
+    }catch(e){
+        console.log(e)
+    }
+}
\ No newline at end of file
diff --git a/front/odiparpack/app/actions/message.js b/front/odiparpack/app/actions/message.js
new file mode 100644
index 0000000..881a41f
--- /dev/null
+++ b/front/odiparpack/app/actions/message.js
@@ -0,0 +1,17 @@
+import * as types from './actionTypes';
+import { partial } from 'odi-utils/constants';
+
+
+export const closeMessage = () => ({
+    type: types.CLOSE_MESSAGE,
+})
+
+export const setMessage = (type, message) => ({
+    type: types.OPEN_MESSAGE,
+    payload: {
+        type, message
+    }
+})
+
+export const openSuccessMessage = partial(setMessage, 'success');
+export const openErrorMessage = partial(setMessage, 'error');
\ No newline at end of file
diff --git a/front/odiparpack/app/actions/pedido.js b/front/odiparpack/app/actions/pedido.js
new file mode 100644
index 0000000..8a011f0
--- /dev/null
+++ b/front/odiparpack/app/actions/pedido.js
@@ -0,0 +1,19 @@
+import {
+    getPedidosAPI
+} from 'ba-api/pedido';
+import * as types from './actionTypes'
+
+export const setPedidos = (payload) => ({
+        type: types.LISTA_PEDIDO,
+        payload
+});
+
+export const getPedidos = () => async dispatch => {
+    try{
+        const res = await getPedidosAPI();
+        dispatch(setPedidos({res}))
+        return res;
+    }catch(e){
+        console.log(e)
+    }
+}
diff --git a/front/odiparpack/app/api/almacen.js b/front/odiparpack/app/api/almacen.js
new file mode 100644
index 0000000..dcc629b
--- /dev/null
+++ b/front/odiparpack/app/api/almacen.js
@@ -0,0 +1,6 @@
+import { apiGet } from 'odi-utils/api';
+
+//GET APIS
+export const getAlmacenesAPI = async () => {
+    return await apiGet(`ayuda/almacen`)
+}
\ No newline at end of file
diff --git a/front/odiparpack/app/api/brand.js b/front/odiparpack/app/api/brand.js
index 883eed5..216e180 100644
--- a/front/odiparpack/app/api/brand.js
+++ b/front/odiparpack/app/api/brand.js
@@ -1,8 +1,8 @@
 module.exports = {
-  name: 'Boss Ultimate',
-  desc: 'Boss Ultimate - Material Admin Dashboard',
-  prefix: 'boss',
-  footerText: 'Boss Ultimate All Rights Reserved 2018',
-  logoText: 'Boss Ultimate',
+  name: 'OdiparPack',
+  desc: 'OdiparPack - Planeamiento de rutas',
+  prefix: 'odipk',
+  footerText: 'OdiparPack All Rights Reserved 2022',
+  logoText: 'OdiparPack',
   needLogin: false
 };
diff --git a/front/odiparpack/app/api/dummyContents.js b/front/odiparpack/app/api/dummyContents.js
index 104cdfd..2f839fb 100644
--- a/front/odiparpack/app/api/dummyContents.js
+++ b/front/odiparpack/app/api/dummyContents.js
@@ -1,7 +1,7 @@
 import avatarApi from './avatars';
 const dummyContent = {
   user: {
-    name: 'John Doe',
+    name: 'Mitsuo Tokumori',
     title: 'Administrator',
     avatar: avatarApi[6]
   },
diff --git a/front/odiparpack/app/api/menu.js b/front/odiparpack/app/api/menu.js
index dce8f58..637424a 100644
--- a/front/odiparpack/app/api/menu.js
+++ b/front/odiparpack/app/api/menu.js
@@ -1,454 +1,51 @@
 module.exports = [
   {
-    key: 'dashboard',
-    name: 'Dashboard',
-    icon: 'dashboard',
-    child: [
-      {
-        key: 'dashboard_v1',
-        name: 'Dashboard V1',
-        link: '/app'
-      },
-      {
-        key: 'dashboard_v2',
-        name: 'Dashboard V2',
-        link: '/app/dashboard-v2'
-      },
-    ]
+    key: 'seguimiento',
+    name: 'Seguimiento',
+    icon: 'near_me',
+    link: '/app/dashboard-v2',
+    child: [ ]
   },
   {
-    key: 'layouts',
-    name: 'Layouts',
-    icon: 'view_column',
-    child: [
-      {
-        key: 'grid',
-        name: 'Grid',
-        link: '/app/layouts/grid'
-      },
-      {
-        key: 'application_layout',
-        name: 'App Layout',
-        link: '/app/layouts/app-layout'
-      },
-      {
-        key: 'responsive',
-        name: 'Responsive',
-        link: '/app/layouts/responsive'
-      }
-    ]
+    key: 'pedidos',
+    name: 'Pedidos',
+    icon: 'inventory_2',
+    link: '/app/pedidos',
+    child: [ ]
   },
   {
-    key: 'tables',
-    name: 'Tables',
-    icon: 'grid_on',
-    child: [
-      {
-        key: 'basic_table',
-        name: 'Basic Table',
-        link: '/app/tables/basic-table'
-      },
-      {
-        key: 'data_table',
-        name: 'Data Table',
-        link: '/app/tables/data-table'
-      },
-      {
-        key: 'tree_table',
-        name: 'Tree Table',
-        link: '/app/tables/tree-table'
-      },
-      {
-        key: 'crud_table',
-        name: 'CRUD Table',
-        link: '/app/tables/crud-table'
-      },
-      {
-        key: 'table_playground',
-        name: 'Table Playgound',
-        link: '/app/tables/table-playground'
-      },
-    ]
+    key: 'camiones',
+    name: 'Camiones',
+    icon: 'local_shipping',
+    link: '/app/layouts/grid',
+    child: [ ]
   },
   {
-    key: 'forms',
-    name: 'Form Button',
-    icon: 'border_color',
-    child: [
-      {
-        key: 'reduxform',
-        name: 'Redux Form',
-        link: '/app/forms/reduxform'
-      },
-      {
-        key: 'datetimepicker',
-        name: 'Date Time Picker',
-        link: '/app/forms/date-time-picker'
-      },
-      {
-        key: 'checkbox_radio',
-        name: 'Checkbox & Radio',
-        link: '/app/forms/checkbox-radio'
-      },
-      {
-        key: 'switches',
-        name: 'Switches',
-        link: '/app/forms/switches'
-      },
-      {
-        key: 'selectbox',
-        name: 'Select',
-        link: '/app/forms/selectbox'
-      },
-      {
-        key: 'buttons',
-        name: 'Buttons',
-        link: '/app/forms/buttons'
-      },
-      {
-        key: 'textfields',
-        name: 'Textfields',
-        link: '/app/forms/textfields'
-      },
-      {
-        key: 'autocomplete',
-        name: 'Autocomplete & Tag',
-        link: '/app/forms/autocomplete'
-      },
-      {
-        key: 'slider',
-        name: 'Slider Range',
-        link: '/app/forms/slider-range'
-      },
-      {
-        key: 'upload',
-        name: 'Upload',
-        link: '/app/forms/upload'
-      },
-      {
-        key: 'ratting',
-        name: 'Ratting',
-        link: '/app/forms/ratting'
-      },
-      {
-        key: 'texteditor',
-        name: 'WYSIWYG Editor',
-        link: '/app/forms/wysiwyg-editor'
-      },
-    ]
+    key: 'almacenes',
+    name: 'Almacenes',
+    icon: 'warehouse',
+    link: '/app/tables/crud-table',
+    child: [ ]
   },
   {
-    key: 'ui',
-    name: 'UI Elements',
-    icon: 'flag',
-    child: [
-      {
-        key: 'icons',
-        name: 'Icons',
-        link: '/app/ui/icons'
-      },
-      {
-        key: 'avatars',
-        name: 'Avatars',
-        link: '/app/ui/avatars'
-      },
-      {
-        key: 'badges',
-        name: 'Badges',
-        link: '/app/ui/badges'
-      },
-      {
-        key: 'card_papper',
-        name: 'Card & Papper',
-        link: '/app/ui/card-papper'
-      },
-      {
-        key: 'dialog_modal',
-        name: 'Dialog & Modal',
-        link: '/app/ui/dialog-modal'
-      },
-      {
-        key: 'drawer_menu',
-        name: 'Drawer & Menu',
-        link: '/app/ui/drawer-menu'
-      },
-      {
-        key: 'tab',
-        name: 'Tabs Navigation',
-        link: '/app/ui/tabs'
-      },
-      {
-        key: 'accordion',
-        name: 'Accordion',
-        link: '/app/ui/accordion'
-      },
-      {
-        key: 'image_gird',
-        name: 'Image Grid Gallery',
-        link: '/app/ui/image-grid'
-      },
-      {
-        key: 'list_divider',
-        name: 'List & Divider',
-        link: '/app/ui/list'
-      },
-      {
-        key: 'popover_tooltip',
-        name: 'Popover & Tooltip',
-        link: '/app/ui/popover-tooltip'
-      },
-      {
-        key: 'progress',
-        name: 'Progress & Spinners',
-        link: '/app/ui/progress'
-      },
-      {
-        key: 'tags',
-        name: 'Tags',
-        link: '/app/ui/tags'
-      },
-      {
-        key: 'steppers',
-        name: 'Steppers',
-        link: '/app/ui/steppers'
-      },
-      {
-        key: 'notification',
-        name: 'Notification',
-        link: '/app/ui/notification'
-      },
-      {
-        key: 'breadcrumbs',
-        name: 'Breadcrumbs',
-        link: '/app/ui/breadcrumbs'
-      },
-      {
-        key: 'dividers',
-        name: 'Dividers',
-        link: '/app/ui/dividers'
-      },
-      {
-        key: 'typography',
-        name: 'Typography',
-        link: '/app/ui/typography'
-      },
-      {
-        key: 'slider_carousel',
-        name: 'Slider & Carousel',
-        link: '/app/ui/slider-carousel'
-      },
-      {
-        key: 'paginations',
-        name: 'Paginations',
-        link: '/app/ui/paginations'
-      },
-    ]
+    key: 'red_tramos',
+    name: 'Red de Tramos',
+    icon: 'location_on',
+    link: '/app/forms/reduxform',
+    child: [ ]
   },
   {
-    key: 'charts',
-    name: 'Charts',
-    icon: 'insert_chart',
-    child: [
-      {
-        key: 'line_charts',
-        name: 'Line Charts',
-        link: '/app/charts/line-charts'
-      },
-      {
-        key: 'bar_charts',
-        name: 'Bar Charts',
-        link: '/app/charts/bar-charts'
-      },
-      {
-        key: 'area_charts',
-        name: 'Area Charts',
-        link: '/app/charts/area-charts'
-      },
-      {
-        key: 'pie_charts',
-        name: 'Pie & Donuts Charts',
-        link: '/app/charts/pie-charts'
-      },
-      {
-        key: 'radar_charts',
-        name: 'Radar Charts',
-        link: '/app/charts/radar-charts'
-      },
-      {
-        key: 'scatter_charts',
-        name: 'Scatter Charts',
-        link: '/app/charts/scatter-charts'
-      },
-      {
-        key: 'compossed_charts',
-        name: 'Compossed Charts',
-        link: '/app/charts/compossed-chart'
-      },
-      {
-        key: 'responsive_charts',
-        name: 'Responsive Charts',
-        link: '/app/charts/responsive-chart'
-      },
-    ]
+    key: 'otros',
+    name: 'Otros parámetros',
+    icon: 'settings',
+    link: '/app/ui/icons',
+    child: [ ]
   },
   {
-    key: 'apps',
-    name: 'Apps',
-    icon: 'bubble_chart',
-    child: [
-      {
-        key: 'social_media',
-        name: 'Social Media',
-        link: '/app/pages/social-media'
-      },
-      {
-        key: 'ecommerce',
-        name: 'Ecommerce',
-        link: '/app/pages/ecommerce'
-      },
-      {
-        key: 'contact',
-        name: 'Contact',
-        link: '/app/pages/contact'
-      },
-      {
-        key: 'calendar',
-        name: 'Calendar',
-        link: '/app/pages/calendar'
-      },
-      {
-        key: 'email',
-        name: 'Email',
-        link: '/app/pages/email'
-      },
-      {
-        key: 'chat',
-        name: 'Chat',
-        link: '/app/pages/chat'
-      },
-    ]
-  },
-  {
-    key: 'pages',
-    name: 'Pages',
-    icon: 'library_books',
-    child: [
-      {
-        key: 'user_profile',
-        name: 'User Profile',
-        link: '/app/pages/user-profile'
-      },
-      {
-        key: 'gallery',
-        name: 'Photo Gallery',
-        link: '/app/pages/photo-gallery'
-      },
-      {
-        key: 'not_found_page',
-        name: 'Not Found Page',
-        link: '/app/pages/not-found'
-      },
-      {
-        key: 'error_page',
-        name: 'Error Page',
-        link: '/app/pages/error'
-      },
-      {
-        key: 'maintenance',
-        name: 'Maintenance',
-        link: '/maintenance'
-      },
-      {
-        key: 'login',
-        name: 'Login',
-        link: '/login'
-      },
-      {
-        key: 'register',
-        name: 'Register',
-        link: '/register'
-      },
-      {
-        key: 'reset',
-        name: 'Reset Password',
-        link: '/reset-password'
-      },
-      {
-        key: 'lock',
-        name: 'Lock Screen',
-        link: '/lock-screen'
-      },
-      {
-        key: 'blank',
-        name: 'Blank Page',
-        link: '/app/pages/blank-page'
-      },
-      {
-        key: 'help_support',
-        name: 'Help & Support',
-        link: '/app/pages/help-support'
-      },
-    ]
-  },
-  {
-    key: 'maps',
-    name: 'Maps',
-    icon: 'maps',
-    child: [
-      {
-        key: 'map_marker',
-        name: 'Map Marker',
-        link: '/app/maps/map-marker'
-      },
-      {
-        key: 'map_direction',
-        name: 'Map Direction',
-        link: '/app/maps/map-direction'
-      },
-      {
-        key: 'map_searchbox',
-        name: 'Map with Searchbox',
-        link: '/app/maps/map-searchbox'
-      },
-      {
-        key: 'map_traffic',
-        name: 'Traffic Indicator',
-        link: '/app/maps/map-traffic'
-      },
-      {
-        key: 'street_view',
-        name: 'Street View',
-        link: '/app/maps/street-view'
-      },
-    ]
-  },
-  {
-    key: 'menu_levels',
-    name: 'Menu Levels',
-    icon: 'sort',
-    child: [
-      {
-        key: 'level_1',
-        name: 'Level 1',
-        link: '/#'
-      },
-      {
-        key: 'level_2',
-        keyParent: 'menu_levels',
-        name: 'Level 2',
-        child: [
-          {
-            key: 'sub_menu_1',
-            name: 'Sub Menu 1',
-            link: '/#'
-          },
-          {
-            key: 'sub_menu_2',
-            name: 'Sub Menu 2',
-            link: '/#'
-          },
-        ]
-      },
-    ]
+    key: 'simulacion',
+    name: 'Simulación',
+    icon: 'fast_forward',
+    link: '/app/pages/calendar',
+    child: [ ]
   }
-];
+];
\ No newline at end of file
diff --git a/front/odiparpack/app/api/notifMessage.js b/front/odiparpack/app/api/notifMessage.js
index 2d2b48b..bc7a60c 100644
--- a/front/odiparpack/app/api/notifMessage.js
+++ b/front/odiparpack/app/api/notifMessage.js
@@ -1,10 +1,10 @@
 module.exports = {
-  saved: 'Data has been saved',
-  updated: 'Data has been updated',
-  removed: 'Item has been removed',
+  saved: 'Se ha guardado correctamente',
+  updated: 'Se ha actualizado correctamente',
+  removed: 'Se ha eliminado correctamente',
   posted: 'Your post has been submitted',
   commented: 'Your comment has been submitted',
-  discard: 'Action canceled',
+  discard: 'Cancelado',
   addCart: 'Item added to cart',
   checkout: 'Thank you for shopping',
   sent: 'Email sent',
diff --git a/front/odiparpack/app/api/pedido.js b/front/odiparpack/app/api/pedido.js
new file mode 100644
index 0000000..63d6e2e
--- /dev/null
+++ b/front/odiparpack/app/api/pedido.js
@@ -0,0 +1,18 @@
+import axios from 'axios';
+import { apiGet } from '../utils/odipar/api';
+
+//GET APIS
+export const getPedidosAPI = async () => {
+    return await apiGet(`ayuda/`)
+}
+
+export function getAPi(){
+    axios.get(
+        `http://localhost:8083/ayuda/`, //TODO: check currentTimeStamp
+        { 
+            headers: {
+                'Content-type': 'application/json',
+            },
+        }
+    )
+}
\ No newline at end of file
diff --git a/front/odiparpack/app/api/themePalette.js b/front/odiparpack/app/api/themePalette.js
index c7971b3..eaec9e7 100644
--- a/front/odiparpack/app/api/themePalette.js
+++ b/front/odiparpack/app/api/themePalette.js
@@ -200,7 +200,22 @@ const themePalette = (color) => ({
     secondary: palette[color].palette.secondary,
   },
   typography: {
-    useNextVariants: true,
+    h5: {
+      fontSize: 18,
+      fontWeight: 600,
+      color: "#202A75",
+      margin: "5px 0 10px",
+    },
+    h4: {
+      fontSize: 25,
+      fontWeight: 500,
+      margin: "10px 0 5px",
+    },
+    h6: {
+      fontSize: 17,
+      fontWeight: 420,
+      margin: "0px 0 0px",
+    },
   },
 });
 
diff --git a/front/odiparpack/app/app.js b/front/odiparpack/app/app.js
index 6845268..34f6a9f 100644
--- a/front/odiparpack/app/app.js
+++ b/front/odiparpack/app/app.js
@@ -34,9 +34,13 @@ import { translationMessages } from './i18n';
 
 // Create redux store with history
 const initialState = {};
-const store = configureStore(initialState, history);
+//const store = configureStore(initialState, history);
 const MOUNT_NODE = document.getElementById('app');
 
+//New store
+import { confStore } from './redux/configureStore';
+const store = confStore()
+
 const render = messages => {
   ReactDOM.render(
     <Provider store={store}>
diff --git a/front/odiparpack/app/components/Forms/ReduxFormMUI.js b/front/odiparpack/app/components/Forms/ReduxFormMUI.js
index 383a717..285543f 100644
--- a/front/odiparpack/app/components/Forms/ReduxFormMUI.js
+++ b/front/odiparpack/app/components/Forms/ReduxFormMUI.js
@@ -4,6 +4,14 @@ import TextField from '@material-ui/core/TextField';
 import Select from '@material-ui/core/Select';
 import Checkbox from '@material-ui/core/Checkbox';
 import Switch from '@material-ui/core/Switch';
+import { DateTimePicker, MuiPickersUtilsProvider } from '@material-ui/pickers';
+
+import { etiqueta } from '../Odipar/common';
+import { Chip } from '@material-ui/core';
+import MomentUtils from '@date-io/moment';
+import moment from 'moment'
+import 'moment/locale/es'
+moment.locale('es');
 
 /* Textfield */
 export const TextFieldRedux = ({ meta: { touched, error }, input, ...rest }) => (
@@ -67,3 +75,23 @@ SwitchRedux.propTypes = {
   input: PropTypes.object.isRequired,
 };
 /* End */
+
+export const DatePickerRedux = ({ input, label, readonly}) => (
+  
+  <MuiPickersUtilsProvider locale={'es'} utils={MomentUtils}>
+  <DateTimePicker
+      format="DD/MM/YYYY hh:mm A"
+      autoOk
+      onChange={date => input.onChange(moment(date).format("DD/MM/YYYY hh:mm A"))}
+      value={input.value ? moment(input.value,"DD/MM/YYYY hh:mm A"): null}
+      label={label}
+      readOnly = {readonly}
+      disabled = {readonly}
+  />
+  </MuiPickersUtilsProvider>
+);
+
+export const EstadoRedux = ({input, label}) => {
+  const value = input.value? input.value : 0
+  return etiqueta("etiq_pedido", value)
+}
diff --git a/front/odiparpack/app/components/Header/Header.js b/front/odiparpack/app/components/Header/Header.js
index e1d0bf5..2b86b41 100644
--- a/front/odiparpack/app/components/Header/Header.js
+++ b/front/odiparpack/app/components/Header/Header.js
@@ -36,7 +36,7 @@ function Header(props) {
         >
           <MenuIcon />
         </IconButton>
-        <div className={classes.flex}>
+        {/* <div className={classes.flex}>
           <div className={classes.wrapper}>
             <div className={classes.search}>
               <SearchIcon />
@@ -46,8 +46,8 @@ function Header(props) {
         </div>
         <Hidden xsDown>
           <span className={classes.separatorV} />
-        </Hidden>
-        <UserMenu />
+        </Hidden> 
+        <UserMenu />*/}
       </Toolbar>
     </AppBar>
   );
diff --git a/front/odiparpack/app/components/Notification/Notification.js b/front/odiparpack/app/components/Notification/Notification.js
index 7e73896..fcc53a4 100644
--- a/front/odiparpack/app/components/Notification/Notification.js
+++ b/front/odiparpack/app/components/Notification/Notification.js
@@ -2,8 +2,13 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { withStyles } from '@material-ui/core/styles';
 import CloseIcon from '@material-ui/icons/Close';
+import classNames from 'classnames';
+import CheckCircleOutlinedIcon from '@material-ui/icons/CheckCircleOutlined';
+import ErrorOutlineOutlinedIcon from '@material-ui/icons/ErrorOutlineOutlined';
+import InfoOutlinedIcon from '@material-ui/icons/InfoOutlined';
+import ReportProblemOutlinedIcon from '@material-ui/icons/ReportProblemOutlined';
 
-import { Snackbar, IconButton } from '@material-ui/core';
+import { Snackbar, IconButton, SnackbarContent } from '@material-ui/core';
 
 const styles = theme => ({
   close: {
@@ -11,6 +16,41 @@ const styles = theme => ({
   },
 });
 
+const variantIcon = {
+  success: CheckCircleOutlinedIcon,
+  warning: ReportProblemOutlinedIcon,
+  error: ErrorOutlineOutlinedIcon,
+  info: InfoOutlinedIcon,
+};
+
+const styles1 = theme => ({
+  success: {
+    backgroundColor: '#b6f8c4',
+  },
+  error: {
+    backgroundColor: '#faabab',
+  },
+  info: {
+    backgroundColor: '#b2e7f5',
+  },
+  warning: {
+    backgroundColor: '#f5ea9f',
+  },
+  icon: {
+    fontSize: 20,
+    color: 'black'
+  },
+  iconVariant: {
+    opacity: 0.9,
+    marginRight: theme.spacing(1),
+  },
+  message: {
+    display: 'flex',
+    alignItems: 'center',
+    color: 'black'
+  },
+});
+
 class Notification extends React.Component {
   handleClose = (event, reason) => {
     if (reason === 'clickaway') {
@@ -20,20 +60,30 @@ class Notification extends React.Component {
   };
 
   render() {
-    const { classes, message } = this.props;
+    const { classes, message, variant } = this.props;
+    const Icon = variantIcon[variant];
     return (
       <Snackbar
-        anchorOrigin={{
-          vertical: 'bottom',
-          horizontal: 'left',
-        }}
         open={message !== ''}
         autoHideDuration={3000}
         onClose={() => this.handleClose()}
         ContentProps={{
           'aria-describedby': 'message-id',
         }}
-        message={message}
+        anchorOrigin={{
+          vertical: 'top',
+          horizontal: 'right',
+        }}
+      
+      >
+      <SnackbarContent
+        className={classNames(classes[variant])}
+        message={(
+          <span id="client-snackbar" className={classes.message}>
+            <Icon className={classNames(classes.icon, classes.iconVariant)} />
+            {message}
+          </span>
+        )}
         action={[
           <IconButton
             key="close"
@@ -42,10 +92,11 @@ class Notification extends React.Component {
             className={classes.close}
             onClick={() => this.handleClose()}
           >
-            <CloseIcon />
+            <CloseIcon className={classes.icon}/>
           </IconButton>,
         ]}
       />
+    </Snackbar>
     );
   }
 }
@@ -56,4 +107,4 @@ Notification.propTypes = {
   message: PropTypes.string.isRequired,
 };
 
-export default withStyles(styles)(Notification);
+export default withStyles(styles1)(Notification);
diff --git a/front/odiparpack/app/components/Odipar/EtiquetaData.js b/front/odiparpack/app/components/Odipar/EtiquetaData.js
new file mode 100644
index 0000000..a2f262d
--- /dev/null
+++ b/front/odiparpack/app/components/Odipar/EtiquetaData.js
@@ -0,0 +1,80 @@
+//Pedido
+export const pedido = {
+    pendiente:{
+      text: "Pendiente",
+      color: "#FFB74D",
+      icon: false
+    },
+    enCamino: {
+      text: "En Camino",
+      color: "#64B5F6",
+      icon: false
+    },
+    entregado: {
+      text: "Entregado",
+      color: "#81C784",
+      icon: false
+    },
+    cancelado: {
+      text: "Cancelado",
+      color: "#E57373",
+      icon: false
+    },
+    pendienteAveria:{
+      text: "Pendiente por Averia",
+      color: "#FFB74D",
+      icon: false
+    }
+  }
+  
+  //Camion
+  export const camion = {
+    disponible : {
+      text: "Disponible",
+      color: "#81C784",
+      icon: false
+    },
+    enReparto: {
+      text: "En Reparto",
+      color: "#64B5F6",
+      icon: false
+    },
+    mantenimiento:{
+      text: "Mantenimiento",
+      color: "#FFB74D",
+      icon: false
+    },
+    cancelado: {
+      text: "Inhabilitado",
+      color: "#E57373",
+      icon: false
+    } 
+  }
+  
+  //Bloqueos
+  export const bloqueo = {
+    desbloqueado: {
+      text: "Disponible",
+      color: "#81C784",
+      icon: false
+    },
+    bloqueado:{
+      text: "Bloqueado",
+      color: "#E57373",
+      icon: false
+    } 
+  }
+
+  //Almacen
+  export const almacen = {
+    noPrincipal: {
+      text: "Pequeño",
+      color: "#DED8D8",
+      icon: 10
+    },
+    principal:{
+      text: "Principal",
+      color: "#DED8D8",
+      icon: 16
+    } 
+  }
\ No newline at end of file
diff --git a/front/odiparpack/app/components/Odipar/common.js b/front/odiparpack/app/components/Odipar/common.js
new file mode 100644
index 0000000..b6fb49d
--- /dev/null
+++ b/front/odiparpack/app/components/Odipar/common.js
@@ -0,0 +1,43 @@
+import React from "react"
+import { Chip } from "@material-ui/core";
+import { pedido, camion, bloqueo, almacen } from './EtiquetaData'
+import Brightness1Icon from '@material-ui/icons/Brightness1';
+
+export const etiquetaStyle = color => ({
+  fontWeight: 'bold',
+  color: '#FFF',
+  backgroundColor: color
+});
+
+
+//Etiquetas
+export function etiqueta(tipo , estado) { // eslint-disable-line
+  let {color, text, icon} = ""
+  switch(tipo){
+    case 'etiq_pedido': 
+      text = pedido[Object.keys(pedido)[estado]].text
+      color = pedido[Object.keys(pedido)[estado]].color
+      break;
+    case 'etiq_camion': 
+      text = camion[Object.keys(camion)[estado]].text
+      color = camion[Object.keys(camion)[estado]].color
+      break;
+    case 'etiq_bloqueo': 
+      text = bloqueo[Object.keys(bloqueo)[estado]].text
+      color = bloqueo[Object.keys(bloqueo)[estado]].color
+      break;
+    case 'etiq_alma': 
+      let {estadoNum} = 2
+      estado === false? estadoNum = 0 : estadoNum = 1
+      text = almacen[Object.keys(almacen)[estadoNum]].text
+      color = almacen[Object.keys(almacen)[estadoNum]].color
+      icon = almacen[Object.keys(almacen)[estadoNum]].icon
+      break;
+  }
+
+  return (
+    tipo == "etiq_alma" ?
+      <Chip label={text} icon = {<Brightness1Icon style={{ fontSize: icon, color: "#B1ABAB" }}/>} style={{fontWeight: 'bold', backgroundColor: color}}/> :
+      <Chip label={text} style={etiquetaStyle(color)}/>
+  )
+}
\ No newline at end of file
diff --git a/front/odiparpack/app/components/Panel/FloatingPanel.js b/front/odiparpack/app/components/Panel/FloatingPanel.js
index 675166a..f0a0e6b 100644
--- a/front/odiparpack/app/components/Panel/FloatingPanel.js
+++ b/front/odiparpack/app/components/Panel/FloatingPanel.js
@@ -82,7 +82,7 @@ FloatingPanel.propTypes = {
 };
 
 FloatingPanel.defaultProps = {
-  title: 'Add New Item',
+  title: 'Añadir nuevo',
   extraSize: false,
 };
 
diff --git a/front/odiparpack/app/components/Sidebar/MainMenuSimple.js b/front/odiparpack/app/components/Sidebar/MainMenuSimple.js
new file mode 100644
index 0000000..18ac8fd
--- /dev/null
+++ b/front/odiparpack/app/components/Sidebar/MainMenuSimple.js
@@ -0,0 +1,96 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import classNames from 'classnames';
+import { bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
+import { NavLink } from 'react-router-dom';
+// Menu Object
+import MenuContent from 'odi-utils/menu';
+import { List, ListItem, ListItemIcon, ListItemText, Collapse, Icon } from '@material-ui/core';
+import styles from './sidebar-jss';
+
+function sortByKey(array, key) {
+  return array.sort((a, b) => {
+    const x = a[key]; const y = b[key];
+    return ((x < y) ? -1 : ((x > y) ? 1 : 0));
+  });
+}
+
+const LinkBtn = React.forwardRef(function LinkBtn(props, ref) { // eslint-disable-line
+  return <NavLink to={props.to} {...props} innerRef={ref} />; // eslint-disable-line
+});
+
+function MainMenuSimple(props) {
+  const {
+    classes,
+    toggleDrawerOpen,
+    loadTransition,
+    openSubMenu,
+    open,
+  } = props;
+
+  const handleClick = () => {
+    //toggleDrawerOpen();
+    loadTransition(false);
+  };
+
+  const getMenus = menuArray => menuArray.map((item, index) => {
+      return (
+        <div key={index.toString()}>
+          <ListItem
+            button
+            exact
+            className={classNames(classes.head, open.indexOf(item.key) > -1 ? classes.opened : '')}
+            activeClassName={classes.active}
+            component={LinkBtn}
+            to={item.link}
+            onClick={handleClick}
+            timeout="auto"
+            unmountOnExit
+          >
+            {item.icon
+              && (
+                <ListItemIcon className={classes.iconWrapper}>
+                  <Icon className={classes.icon}>{item.icon}</Icon>
+                </ListItemIcon>
+              )
+            }
+            <ListItemText classes={{ primary: classes.primary }} variant="inset" primary={item.name} />
+          </ListItem>
+        </div>
+      );
+  });
+  return (
+    <div>
+      {getMenus(MenuContent)}
+    </div>
+  );
+}
+
+MainMenuSimple.propTypes = {
+  classes: PropTypes.object.isRequired,
+  open: PropTypes.object.isRequired,
+  openSubMenu: PropTypes.func.isRequired,
+  toggleDrawerOpen: PropTypes.func.isRequired,
+  loadTransition: PropTypes.func.isRequired,
+};
+
+const openAction = (key, keyParent) => ({ type: 'OPEN_SUBMENU', key, keyParent });
+const reducer = 'ui';
+
+const mapStateToProps = state => ({
+  force: state, // force active class for sidebar menu
+  open: state.getIn([reducer, 'subMenuOpen'])
+});
+
+const mapDispatchToProps = dispatch => ({
+  openSubMenu: bindActionCreators(openAction, dispatch)
+});
+
+const MainMenuMapped = connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(MainMenuSimple);
+
+export default withStyles(styles)(MainMenuMapped);
diff --git a/front/odiparpack/app/components/Sidebar/Sidebar.js b/front/odiparpack/app/components/Sidebar/Sidebar.js
index 01de4ec..b4f5626 100644
--- a/front/odiparpack/app/components/Sidebar/Sidebar.js
+++ b/front/odiparpack/app/components/Sidebar/Sidebar.js
@@ -4,10 +4,10 @@ import { withStyles } from '@material-ui/core/styles';
 import classNames from 'classnames';
 import brand from 'ba-api/brand';
 import dummy from 'ba-api/dummyContents';
-import logo from 'ba-images/logo.svg';
-import { Hidden, Drawer, SwipeableDrawer, List, Divider, Avatar } from '@material-ui/core';
-import MainMenu from './MainMenu';
-import OtherMenu from './OtherMenu';
+import logo from 'ba-images/logo.png';
+import { Hidden, Drawer, SwipeableDrawer, Avatar } from '@material-ui/core';
+import MainMenuSimple from './MainMenuSimple';
+//import OtherMenu from './OtherMenu';
 import styles from './sidebar-jss';
 
 const MenuContent = props => {
@@ -38,11 +38,11 @@ const MenuContent = props => {
         </div>
       </div>
       <div className={classes.menuContainer}>
-        <MainMenu loadTransition={loadTransition} toggleDrawerOpen={toggleDrawerOpen} />
-        <Divider className={classes.divider} />
+        <MainMenuSimple loadTransition={loadTransition} toggleDrawerOpen={toggleDrawerOpen} />
+        {/* <Divider className={classes.divider} />
         <List>
           <OtherMenu toggleDrawerOpen={toggleDrawerOpen} />
-        </List>
+        </List> */}
       </div>
     </div>
   );
diff --git a/front/odiparpack/app/components/Sidebar/sidebar-jss.js b/front/odiparpack/app/components/Sidebar/sidebar-jss.js
index e9bf4f6..95fb2b2 100644
--- a/front/odiparpack/app/components/Sidebar/sidebar-jss.js
+++ b/front/odiparpack/app/components/Sidebar/sidebar-jss.js
@@ -76,11 +76,14 @@ const styles = theme => ({
     }
   },
   avatar: {
-    margin: 10,
+    marginBottom: 10,
+    marginTop: 10,
+    marginLeft: 6,
+    marginRight: 10
   },
   bigAvatar: {
-    width: 80,
-    height: 80,
+    width: 55,
+    height: 55,
   },
   brandBar: {
     transition: theme.transitions.create(['width', 'margin', 'background'], {
@@ -168,16 +171,19 @@ const styles = theme => ({
     fontSize: 14,
     padding: 10,
     alignItems: 'center',
+    justifyContent: 'flex-start',
     '& h4': {
-      fontSize: 18,
+      fontSize: 19,
       marginBottom: 0,
       textOverflow: 'ellipsis',
+      display: 'flex',
       overflow: 'hidden',
       whiteSpace: 'nowrap',
-      width: 110
+      wordBreak:'break-all',
+      width: 180,
     },
     '& span': {
-      fontSize: 12,
+      fontSize: 14,
       textOverflow: 'ellipsis',
       whiteSpace: 'nowrap',
       width: 110,
diff --git a/front/odiparpack/app/components/Tables/CrudTableForm.js b/front/odiparpack/app/components/Tables/CrudTableForm.js
index d2d2ea8..017a3fc 100644
--- a/front/odiparpack/app/components/Tables/CrudTableForm.js
+++ b/front/odiparpack/app/components/Tables/CrudTableForm.js
@@ -5,14 +5,42 @@ import MainTableForm from './tableParts/MainTableForm';
 import FloatingPanel from './../Panel/FloatingPanel';
 
 class CrudTableForm extends React.Component {
-  componentDidMount() {
+  /* componentDidMount(){
     this.props.fetchData(this.props.dataInit, this.props.branch);
+  } */
+
+  componentDidUpdate(previousProps) {
+    if (previousProps.dataInit !== this.props.dataInit) {
+      //console.log("en el FORM",this.props.dataInit)}
+      this.props.fetchData(this.props.dataInit, this.props.branch);
+    }
   }
 
   sendValues = (values) => {
     setTimeout(() => {
       this.props.submit(values, this.props.branch);
     }, 500);
+    if (this.props.editingId === this.props.initValues.get('id')) {
+      this.props.dispatch(this.props.editRowAPI()).then((res) => {
+        if (res) {
+            console.log("EDIT RO ", res)
+        }
+      })
+    } else {
+      this.props.dispatch(this.props.addNewAPI()).then((res) => {
+        if (res) {
+            console.log("ADD NEW FORM ", res)
+        }
+      })
+    }
+    
+  }
+
+  getTitle( ){
+    if (this.props.editingId === this.props.initValues.get(this.props.anchor[0].name)) {
+      return "Editar"
+    } 
+    return "Añadir nuevo"
   }
 
   render() {
@@ -27,11 +55,13 @@ class CrudTableForm extends React.Component {
       anchor,
       children,
       branch,
-      initValues
+      initValues,
+      removeRowAPI
     } = this.props;
     return (
       <div>
-        <FloatingPanel openForm={openForm} branch={branch} closeForm={closeForm}>
+        
+        <FloatingPanel openForm={openForm} branch={branch} closeForm={closeForm} title = {this.getTitle()}>
           <Form onSubmit={this.sendValues} initValues={initValues} branch={branch}>
             {children}
           </Form>
@@ -44,6 +74,7 @@ class CrudTableForm extends React.Component {
           editRow={editRow}
           anchor={anchor}
           branch={branch}
+          removeRowAPI={removeRowAPI}
         />
       </div>
     );
diff --git a/front/odiparpack/app/components/Tables/tableParts/Form.js b/front/odiparpack/app/components/Tables/tableParts/Form.js
index da66966..66188c7 100644
--- a/front/odiparpack/app/components/Tables/tableParts/Form.js
+++ b/front/odiparpack/app/components/Tables/tableParts/Form.js
@@ -31,14 +31,14 @@ class Form extends Component {
           </section>
           <div className={css.buttonArea}>
             <Button variant="contained" color="secondary" type="submit" disabled={submitting}>
-              Submit
+              Guardar
             </Button>
             <Button
               type="button"
               disabled={pristine || submitting}
               onClick={reset}
             >
-              Reset
+              Limpiar
             </Button>
           </div>
         </form>
diff --git a/front/odiparpack/app/components/Tables/tableParts/MainTableForm.js b/front/odiparpack/app/components/Tables/tableParts/MainTableForm.js
index ccf0e4a..1437fa8 100644
--- a/front/odiparpack/app/components/Tables/tableParts/MainTableForm.js
+++ b/front/odiparpack/app/components/Tables/tableParts/MainTableForm.js
@@ -29,7 +29,8 @@ class MainTableForm extends React.Component {
       editRow,
       addNew,
       anchor,
-      branch
+      branch,
+      removeRowAPI
     } = this.props;
     const getItems = dataArray => dataArray.map(item => (
       <RowReadOnly
@@ -39,6 +40,7 @@ class MainTableForm extends React.Component {
         editRow={() => editRow(item, branch)}
         anchor={anchor}
         branch={branch}
+        removeRowAPI = {removeRowAPI}
       />
     ));
 
@@ -61,7 +63,7 @@ class MainTableForm extends React.Component {
             <Tooltip title="Add Item">
               <Button variant="contained" onClick={() => addNew(anchor, branch)} color="secondary" className={classes.button}>
                 <AddIcon className={classNames(classes.leftIcon, classes.iconSmall)} />
-                Add New
+                Añadir
               </Button>
             </Tooltip>
           </div>
diff --git a/front/odiparpack/app/components/Tables/tableParts/RowReadOnly.js b/front/odiparpack/app/components/Tables/tableParts/RowReadOnly.js
index 7da655f..d060d02 100644
--- a/front/odiparpack/app/components/Tables/tableParts/RowReadOnly.js
+++ b/front/odiparpack/app/components/Tables/tableParts/RowReadOnly.js
@@ -5,8 +5,10 @@ import classNames from 'classnames';
 import css from 'ba-styles/Table.scss';
 import DeleteIcon from '@material-ui/icons/Delete';
 import EditIcon from '@material-ui/icons/BorderColor';
+import { etiqueta } from 'ba-components/Odipar/common';
 
-import { TableCell, IconButton } from '@material-ui/core';
+import { TableCell, IconButton, LinearProgress } from '@material-ui/core';
+import { connect } from 'react-redux';
 
 const styles = theme => ({
   button: {
@@ -22,21 +24,40 @@ class RowReadOnly extends React.Component {
       item,
       removeRow,
       editRow,
-      branch
+      branch,
+      removeRowAPI
     } = this.props;
     const eventDel = () => {
       removeRow(item, branch);
+      this.props.dispatch(removeRowAPI()).then((res) => {
+        if (res) {
+            console.log("REMOVE READ ONLY ", res)
+        }
+      })
     };
     const eventEdit = () => {
       editRow(item, branch);
     };
     const renderCell = dataArray => dataArray.map((itemCell, index) => {
       if (itemCell.name !== 'action' && !itemCell.hidden) {
-        return (
-          <TableCell padding="none" key={index.toString()}>
-            {item.get(itemCell.name) !== undefined ? item.get(itemCell.name).toString() : ''}
-          </TableCell>
-        );
+        const inputType = anchor[index].type;
+        switch (inputType) {
+          case 'etiq_pedido':
+          case 'etiq_camion':
+          case 'etiq_bloqueo': 
+          case 'etiq_alma':
+            return (
+              <TableCell padding="none" key={index.toString()}>
+                {etiqueta(inputType, item.get(itemCell.name))}
+              </TableCell>
+            );
+          case 'texto':
+            return (
+              <TableCell padding="none" key={index.toString()}>
+                {item.get(itemCell.name) !== undefined ? item.get(itemCell.name).toString() : ''}
+              </TableCell>
+            );
+        }
       }
       return false;
     });
@@ -72,5 +93,11 @@ RowReadOnly.propTypes = {
   editRow: PropTypes.func.isRequired,
   branch: PropTypes.string.isRequired,
 };
+const mapDispatchToProps = dispatch => ({
+  dispatch
+});
 
-export default withStyles(styles)(RowReadOnly);
+const RowReadOnlyMapped = connect(
+  mapDispatchToProps
+)(RowReadOnly);
+export default withStyles(styles)(RowReadOnlyMapped);
diff --git a/front/odiparpack/app/components/index.js b/front/odiparpack/app/components/index.js
index 9d7bdb3..123b48c 100644
--- a/front/odiparpack/app/components/index.js
+++ b/front/odiparpack/app/components/index.js
@@ -3,6 +3,8 @@ export Sidebar from './Sidebar/Sidebar';
 export BreadCrumb from './BreadCrumb/BreadCrumb';
 export SourceReader from './SourceReader/SourceReader';
 export PapperBlock from './PapperBlock/PapperBlock';
+//Odipar
+
 // Dashboard and Widget
 export CounterWidget from './Counter/CounterWidget';
 export SliderWidget from './Widget/SliderWidget';
diff --git a/front/odiparpack/app/containers/App/Application.js b/front/odiparpack/app/containers/App/Application.js
index 0a3ffc2..8a30720 100644
--- a/front/odiparpack/app/containers/App/Application.js
+++ b/front/odiparpack/app/containers/App/Application.js
@@ -25,7 +25,9 @@ import {
   Profile, BlankPage,
   Photos, Error, Settings,
   HelpSupport, MapMarker, MapDirection, SearchMap,
-  TrafficIndicator, StreetViewMap, NotFound
+  TrafficIndicator, StreetViewMap, NotFound, 
+  Pedidos,
+  Almacenes
 } from '../pageListAsync';
 
 function Application(props) {
@@ -36,6 +38,9 @@ function Application(props) {
       <Switch>
         <Route exact path="/app" component={DashboardV1} />
         <Route exact path="/app/dashboard-v2" component={DashboardV2} />
+        {/* Pedidos */}
+        <Route exact path="/app/pedidos" component={Pedidos}/>
+        <Route exact path="/app/almacenes" component={Almacenes}/>
         { /* Layout */ }
         <Route exact path="/app/layouts" component={Parent} />
         <Route path="/app/layouts/grid" component={Grid} />
diff --git a/front/odiparpack/app/containers/App/index.js b/front/odiparpack/app/containers/App/index.js
index a7313fe..ea78618 100644
--- a/front/odiparpack/app/containers/App/index.js
+++ b/front/odiparpack/app/containers/App/index.js
@@ -5,11 +5,51 @@ import Auth from './Auth';
 import Application from './Application';
 import LoginDedicated from '../Pages/Standalone/LoginDedicated';
 import ThemeWrapper from './ThemeWrapper';
+import {  Snackbar, Button, Icon } from '@material-ui/core';
+import { connect } from 'react-redux';
 window.__MUI_USE_NEXT_TYPOGRAPHY_VARIANTS__ = true;
 
-function App() {
+function App(props) {
+  
+  const handleMessageClose = () => {
+    props.dispatch(closeMessage())
+  }
+  
+  const {
+    openMessage = false,
+    message = '',
+    type = 'error'
+  } = props
+  
   return (
     <ThemeWrapper>
+      <Snackbar
+          anchorOrigin={{
+            vertical: 'top',
+            horizontal: 'right',
+          }}
+          open={openMessage}
+          autoHideDuration={6000}
+          onClose={handleMessageClose}
+          message={
+            <div className="center-aligned-child">
+              <Icon style={{
+                fontSize: 20,
+                marginRight: 15
+              }} > 
+                {type === 'success' ? 'check_circle' : 'report_problem'}
+              </Icon>
+              {message}
+            </div>
+          }
+          action={[
+            <Button key="undo" color="secondary" size="small" onClick={handleMessageClose}>
+              <Icon> 
+                {'close'}
+              </Icon>
+            </Button>
+          ]}
+        />
       <Switch>
         <Route path="/" exact component={LoginDedicated} />
         <Route path="/app" component={Application} />
@@ -20,4 +60,20 @@ function App() {
   );
 }
 
-export default App;
+const reducer = 'message';
+const mapStateToProps = state => ({
+  force: state, // force state from reducer
+  message: state.getIn([reducer, 'message']),
+  type: state.getIn([reducer, 'type']),
+  openMessage: state.getIn([reducer, 'openMessage'])
+});
+
+const mapDispatchToProps = dispatch => ({
+  dispatch: dispatch
+});
+const AppMapped = connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(App);
+
+export default AppMapped;
diff --git a/front/odiparpack/app/containers/Odipar/Almacen/Almacenes.js b/front/odiparpack/app/containers/Odipar/Almacen/Almacenes.js
new file mode 100644
index 0000000..31a3039
--- /dev/null
+++ b/front/odiparpack/app/containers/Odipar/Almacen/Almacenes.js
@@ -0,0 +1,66 @@
+import React, { Component } from 'react';
+import { withStyles } from '@material-ui/core/styles';
+import PropTypes from 'prop-types';
+import { CrudAlmacen } from './table'
+import { Paper, Typography } from '@material-ui/core';
+import { connect } from 'react-redux';
+
+//actions
+import { getAlmacenes } from '../../../actions/almacen';
+
+const styles = ({
+    root: {
+      flexGrow: 1,
+      marginTop: 30,
+    }
+  });
+
+class Almacenes extends Component {
+  constructor (props) {
+    super(props)
+    this.state = {
+      dataRealF: []
+    };
+    this.props.dispatch(getAlmacenes()).then((res) => {
+      if (res) {
+          this.setState({
+            dataRealF: res.data,
+          });
+      }
+    })
+    //console.log("Pedido - LUEGO DE THEN ", this.state.dataRealF)
+  }
+
+
+    render() {
+      const {dataRealF} = this.state;
+      //console.log ("aNTESZSSSS?")
+      const { classes } = this.props;
+        return (
+          <div>
+            <Typography variant="h4">
+                {`Almacenes`}
+            </Typography>
+            <div>  
+              <Paper className={classes.root}>
+                <CrudAlmacen title = "Lista de Almacenes" dataReal={dataRealF}/>
+              </Paper>
+            </div>
+          </div>
+        );
+    }
+}
+
+Almacenes.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+const mapDispatchToProps = dispatch => ({
+  dispatch
+});
+
+const AlmacenesMapped = connect(
+  mapDispatchToProps
+)(Almacenes);
+
+export default withStyles(styles)(AlmacenesMapped);
\ No newline at end of file
diff --git a/front/odiparpack/app/containers/Odipar/Almacen/table/CrudAlmacen.js b/front/odiparpack/app/containers/Odipar/Almacen/table/CrudAlmacen.js
new file mode 100644
index 0000000..887d603
--- /dev/null
+++ b/front/odiparpack/app/containers/Odipar/Almacen/table/CrudAlmacen.js
@@ -0,0 +1,148 @@
+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 './dataAlmacen';
+import FormAlmacen from './FormAlmacen';
+//actions
+import { getPedidos } from '../../../../actions/pedido';
+const branch = 'crudAlmacen';
+
+const renderRadioGroup = ({ input, ...rest }) => (
+  <RadioGroup
+    {...input}
+    {...rest}
+    valueselected={input.value}
+    onChange={(event, value) => input.onChange(value)}
+  />
+);
+
+
+const styles = ({
+  root: {
+    flexGrow: 1,
+  }
+});
+
+class CrudAlmacen 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)
+    //console.log("original", anchorTable)
+    
+    return (
+      <div>
+        <Notification close={() => closeNotif(branch)} variant = "success" message={messageNotif} />
+        <Paper className={classes.root}>
+          <CrudTableForm
+            dataTable={dataTable}
+            openForm={openForm}
+            dataInit={dataReal}
+            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 */}
+            <FormAlmacen/>
+            {/* No need create button or submit, because that already made in this component */}
+          </CrudTableForm>
+        </Paper>
+      </div>
+    );
+  }
+}
+
+renderRadioGroup.propTypes = {
+  input: PropTypes.object.isRequired,
+};
+
+CrudAlmacen.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']),
+});
+
+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 CrudAlmacenMapped = connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(CrudAlmacen);
+
+export default withStyles(styles)(CrudAlmacenMapped);
diff --git a/front/odiparpack/app/containers/Odipar/Almacen/table/FormAlmacen.js b/front/odiparpack/app/containers/Odipar/Almacen/table/FormAlmacen.js
new file mode 100644
index 0000000..05cfda7
--- /dev/null
+++ b/front/odiparpack/app/containers/Odipar/Almacen/table/FormAlmacen.js
@@ -0,0 +1,124 @@
+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 FormAlmacen extends Component {
+    saveRef = ref => {
+        this.ref = ref;
+        return this.ref;
+    };
+
+    render() { 
+        const { classes } = this.props;
+        const trueBool = true;
+        return (
+            <>
+                <div>
+                    <FormControl className={classes.field}>
+                    <InputLabel htmlFor="selection">Tipo de Almacen</InputLabel>
+                    <Field
+                    name="esPrincipal"
+                    component={SelectRedux}
+                    placeholder="Seleccionar"
+                    autoWidth={trueBool}
+                    >
+                    <MenuItem value={true}>Principal</MenuItem>
+                    <MenuItem value={false}>Pequeño</MenuItem>
+                    </Field>
+                </FormControl>
+                </div>
+                <div>
+                    <FormControl className={classes.field}>
+                    <InputLabel htmlFor="selection">Region</InputLabel>
+                    <Field
+                    name="region"
+                    component={SelectRedux}
+                    placeholder="Seleccionar"
+                    autoWidth={trueBool}
+                    >
+                    <MenuItem value="Costa">Costa</MenuItem>
+                    <MenuItem value="Sierra">Sierra</MenuItem>
+                    <MenuItem value="Selva">Selva</MenuItem>
+                    </Field>
+                </FormControl>
+                </div>
+                <div>
+                    <FormControl className={classes.field}>
+                    <InputLabel htmlFor="selection">Provincia</InputLabel>
+                    <Field
+                    name="provincia"
+                    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="latitud"
+                        component={TextFieldRedux}
+                        placeholder="Latitud"
+                        label="Latitud de Provincia"
+                        validate={required}
+                        disabled
+                        required
+                        ref={this.saveRef}
+                        className={classes.field}
+                    />
+                    <Field
+                        name="longitud"
+                        component={TextFieldRedux}
+                        placeholder="Longitud"
+                        label="Longitud de Provincia"
+                        validate={required}
+                        disabled
+                        required
+                        ref={this.saveRef}
+                        className={classes.field}
+                    />
+                </div>
+            </>
+        );
+    }
+}
+
+FormAlmacen.propTypes = {
+    classes: PropTypes.object.isRequired,
+  };
+
+export default withStyles(styles)(FormAlmacen);
\ No newline at end of file
diff --git a/front/odiparpack/app/containers/Odipar/Almacen/table/dataAlmacen.js b/front/odiparpack/app/containers/Odipar/Almacen/table/dataAlmacen.js
new file mode 100644
index 0000000..685df27
--- /dev/null
+++ b/front/odiparpack/app/containers/Odipar/Almacen/table/dataAlmacen.js
@@ -0,0 +1,75 @@
+export const anchorTable = [
+  {
+    name: 'id',
+    label: 'Identificador',
+    initialValue: '',
+    hidden: false,
+    type: 'texto'
+  }, {
+    name: 'esPrincipal',
+    label: 'Tipo de Almacen',
+    initialValue: true,
+    width: 'auto',
+    hidden: false,
+    type: 'etiq_alma'
+  }, {
+    name: 'region',
+    label: 'Region',
+    initialValue: 'Costa',
+    width: 'auto',
+    hidden: false,
+    type: 'texto'
+  }, {
+    name: 'provincia',
+    label: 'Provincia',
+    initialValue: 'Lima',
+    width: 'auto',
+    hidden: false,
+    type: 'texto'
+  }, {
+    name: 'latitud',
+    label: 'Latitud',
+    initialValue: 0,
+    width: 'auto',
+    hidden: false,
+    type: 'texto'
+  }, {
+    name: 'longitud',
+    label: 'Longitud',
+    initialValue: 0,
+    width: 'auto',
+    hidden: false,
+    type: 'texto'
+  }, 
+  {
+    name: 'action',
+    label: 'Acciones',
+    initialValue: '',
+    hidden: false
+  },
+];
+
+export const dataApi = [
+  {
+    id: '1',
+    esPrincipal: false,
+    region: 'Costa',
+    provincia: 'Arequipa',
+    latitud: 24,
+    longitud: 50,
+    estado: 0,
+    correo: '[email protected]',
+    dni: '123456'
+  }, {
+    id: '2',
+    esPrincipal: true,
+    region: 'Costa',
+    provincia: 'Lima',
+    latitud: 24,
+    longitud: 50,
+    nombre: 'Juan',
+    estado: 1,
+    correo: '[email protected]',
+    dni: '123456'
+  }
+];
diff --git a/front/odiparpack/app/containers/Odipar/Almacen/table/index.js b/front/odiparpack/app/containers/Odipar/Almacen/table/index.js
new file mode 100644
index 0000000..38d22f6
--- /dev/null
+++ b/front/odiparpack/app/containers/Odipar/Almacen/table/index.js
@@ -0,0 +1 @@
+export CrudAlmacen from "./CrudAlmacen";
\ No newline at end of file
diff --git a/front/odiparpack/app/containers/Odipar/Pedidos/Pedidos.js b/front/odiparpack/app/containers/Odipar/Pedidos/Pedidos.js
new file mode 100644
index 0000000..f617458
--- /dev/null
+++ b/front/odiparpack/app/containers/Odipar/Pedidos/Pedidos.js
@@ -0,0 +1,73 @@
+import React, { Component } from 'react';
+import { withStyles } from '@material-ui/core/styles';
+import PropTypes from 'prop-types';
+import { CrudPedido } 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 Pedidos extends Component {
+  constructor (props) {
+    super(props)
+    this.state = {
+      dataRealF: []
+    };
+    this.props.dispatch(getPedidos()).then((res) => {
+      if (res) {
+          this.setState({
+            dataRealF: res.data,
+          });
+      }
+    })
+    //console.log("Pedido - LUEGO DE THEN ", this.state.dataRealF)
+  }
+
+
+    render() {
+      const {dataRealF} = this.state;
+      //console.log ("aNTESZSSSS?", pedidosLista)
+      const { classes } = this.props;
+        return (
+          <div>
+            <Typography variant="h4">
+                {`Pedidos`}
+            </Typography>
+            <div>  
+              <Paper className={classes.root}>
+                <CrudPedido title = "Historial de Pedidos" dataReal={dataRealF}/>
+              </Paper>
+            </div>
+          </div>
+        );
+    }
+}
+
+Pedidos.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 PedidosMapped = connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(Pedidos);
+
+export default withStyles(styles)(PedidosMapped);
\ No newline at end of file
diff --git a/front/odiparpack/app/containers/Odipar/Pedidos/table/CrudPedido.js b/front/odiparpack/app/containers/Odipar/Pedidos/table/CrudPedido.js
new file mode 100644
index 0000000..c7a7a58
--- /dev/null
+++ b/front/odiparpack/app/containers/Odipar/Pedidos/table/CrudPedido.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 './sampleData';
+import FormPedido from './FormPedido';
+//actions
+import { getPedidos } from '../../../../actions/pedido';
+const branch = 'crudPedido';
+
+const renderRadioGroup = ({ input, ...rest }) => (
+  <RadioGroup
+    {...input}
+    {...rest}
+    valueselected={input.value}
+    onChange={(event, value) => input.onChange(value)}
+  />
+);
+
+
+const styles = ({
+  root: {
+    flexGrow: 1,
+  }
+});
+
+class CrudPedido 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={dataReal}
+            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 */}
+            <FormPedido/>
+            {/* No need create button or submit, because that already made in this component */}
+          </CrudTableForm>
+        </Paper>
+      </div>
+    );
+  }
+}
+
+renderRadioGroup.propTypes = {
+  input: PropTypes.object.isRequired,
+};
+
+CrudPedido.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 CrudPedidoMapped = connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(CrudPedido);
+
+export default withStyles(styles)(CrudPedidoMapped);
diff --git a/front/odiparpack/app/containers/Odipar/Pedidos/table/FormPedido.js b/front/odiparpack/app/containers/Odipar/Pedidos/table/FormPedido.js
new file mode 100644
index 0000000..548f47b
--- /dev/null
+++ b/front/odiparpack/app/containers/Odipar/Pedidos/table/FormPedido.js
@@ -0,0 +1,186 @@
+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 FormPedido 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 (
+            <>
+                <Typography variant="h5">
+                {`Datos de Pedido`}
+                </Typography>
+                <div>
+                    <Field
+                        name="cantidad"
+                        component={TextFieldRedux}
+                        placeholder="Cantidad paquetes A"
+                        label="Cantidad de Paquetes A"
+                        type = {'number'}
+                        validate={[required, integer]}
+                        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> 
+                <InputLabel htmlFor="selection" style={{fontSize:12.5, marginBottom: 5}}>Estado</InputLabel>
+                    <Field
+                        name = "estado"
+                        component={EstadoRedux}
+                    />
+                
+                </div> 
+                <Typography variant="h5" style={{marginTop: 5}}>
+                {`Datos de Entrega`}
+                </Typography>
+                <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="plazo_entrega"
+                        component={TextFieldRedux}
+                        placeholder="Plazo entrega"
+                        label="Plazo de Entrega"
+                        ref={this.saveRef}
+                        disabled
+                        className={classes.field}
+                    />
+                </div>
+
+                <Typography variant="h5">
+                {`Datos de Cliente`}
+                </Typography>
+
+                <div>
+                    <Field
+                        name="nombre"
+                        component={TextFieldRedux}
+                        placeholder="Ingrese el nombre"
+                        label="Nombre del Cliente"
+                        validate={required}
+                        required
+                        ref={this.saveRef}
+                        className={classes.field}
+                    />
+                </div>
+                <div>
+                    <Field
+                        name="dni"
+                        component={TextFieldRedux}
+                        placeholder="Ingrese el RUC"
+                        label="RUC del Cliente"
+                        validate={required}
+                        required
+                        ref={this.saveRef}
+                        className={classes.field}
+                    />
+                </div>
+                <div>
+                    <Field
+                        name="correo"
+                        component={TextFieldRedux}
+                        placeholder="Ingrese el correo"
+                        label="Correo del Cliente"
+                        validate={required}
+                        required
+                        ref={this.saveRef}
+                        className={classes.field}
+                    />
+                </div>
+            </>
+        );
+    }
+}
+
+FormPedido.propTypes = {
+    classes: PropTypes.object.isRequired,
+  };
+
+export default withStyles(styles)(FormPedido);
\ No newline at end of file
diff --git a/front/odiparpack/app/containers/Odipar/Pedidos/table/index.js b/front/odiparpack/app/containers/Odipar/Pedidos/table/index.js
new file mode 100644
index 0000000..48f7c9e
--- /dev/null
+++ b/front/odiparpack/app/containers/Odipar/Pedidos/table/index.js
@@ -0,0 +1 @@
+export CrudPedido from "./CrudPedido";
\ No newline at end of file
diff --git a/front/odiparpack/app/containers/Odipar/Pedidos/table/sampleData.js b/front/odiparpack/app/containers/Odipar/Pedidos/table/sampleData.js
new file mode 100644
index 0000000..4972669
--- /dev/null
+++ b/front/odiparpack/app/containers/Odipar/Pedidos/table/sampleData.js
@@ -0,0 +1,90 @@
+export const anchorTable = [
+  {
+    name: 'id',
+    label: 'Identificador',
+    initialValue: '',
+    hidden: false,
+    type: 'texto'
+  }, {
+    name: 'cantidad',
+    label: 'Cantidad',
+    initialValue: 0,
+    width: 'auto',
+    hidden: false,
+    type: 'texto'
+  }, {
+    name: 'fecha',
+    label: 'Fecha de pedido',
+    initialValue: new Date(),
+    width: 'auto',
+    hidden: false,
+    type: 'texto'
+  }, {
+    name: 'origen',
+    label: 'Origen',
+    initialValue: 'Lima',
+    width: 'auto',
+    hidden: false,
+    type: 'texto'
+  }, {
+    name: 'destino',
+    label: 'Destino',
+    initialValue: 'Lima',
+    width: 'auto',
+    hidden: false,
+    type: 'texto'
+  }, {
+    name: 'plazo_entrega',
+    label: 'Plazo de entrega',
+    initialValue: 'aja',
+    width: 'auto',
+    hidden: false,
+    type: 'texto'
+  }, {
+    name: 'nombre',
+    label: 'Cliente',
+    initialValue: null,
+    width: 'auto',
+    hidden: false,
+    type: 'texto'
+  }, {
+    name: 'estado',
+    label: 'Estado',
+    initialValue: 0,
+    width: 'auto',
+    hidden: false,
+    type: 'etiq_pedido'
+  }, 
+  {
+    name: 'action',
+    label: 'Action',
+    initialValue: '',
+    hidden: false
+  },
+];
+
+export const dataApi = [
+  {
+    id: '1',
+    cantidad: 30,
+    origen: 'Arequipa',
+    fecha: '24/05/2022 11:28 AM',
+    destino: 'Cuzco',
+    plazo_entrega: '24 horas',
+    nombre: 'Juan',
+    estado: 0,
+    correo: '[email protected]',
+    dni: '123456'
+  }, {
+    id: '2',
+    cantidad: 30,
+    fecha: '24/05/2022 10:28 AM',
+    origen: 'Lima',
+    destino: 'Cuzco',
+    plazo_entrega: '24 horas',
+    nombre: 'Juan',
+    estado: 1,
+    correo: '[email protected]',
+    dni: '123456'
+  }
+];
diff --git a/front/odiparpack/app/containers/Tables/demos/sampleData.js b/front/odiparpack/app/containers/Tables/demos/sampleData.js
index d53d8e2..c783c81 100644
--- a/front/odiparpack/app/containers/Tables/demos/sampleData.js
+++ b/front/odiparpack/app/containers/Tables/demos/sampleData.js
@@ -9,53 +9,62 @@ export const anchorTable = [
     label: 'Text Field',
     initialValue: null,
     width: 'auto',
-    hidden: false
+    hidden: false,
+    type:"texto"
   }, {
     name: 'email',
     label: 'Email Field',
     initialValue: null,
     width: 'auto',
-    hidden: false
+    hidden: false,
+    type:"texto"
   }, {
     name: 'radio',
     label: 'Radio Option',
     initialValue: 'option1',
     width: '80',
-    hidden: false
+    hidden: false,
+    type:"texto"
   }, {
     name: 'selection',
     label: 'Selection',
     initialValue: 'option1',
     width: '80',
-    hidden: false
+    hidden: false,
+    type:"texto"
   }, {
     name: 'onof',
     label: 'On/Of Input',
     initialValue: true,
     width: '80',
-    hidden: false
+    hidden: false,
+    type:"texto"
   }, {
     name: 'checkbox',
     label: 'Checkbox',
     initialValue: true,
     width: '80',
-    hidden: false
+    hidden: false,
+    type:"texto"
   }, {
     name: 'textarea',
     label: 'Text Area',
     initialValue: 'This is default text',
     width: 'auto',
-    hidden: false
+    hidden: false,
+    type:"texto"
   }, {
     name: 'edited',
     label: '',
     initialValue: '',
-    hidden: true
+    hidden: true,
+    type:"texto"
   }, {
     name: 'action',
     label: 'Action',
     initialValue: '',
-    hidden: false
+    hidden: false,
+    type:"texto"
   },
 ];
 
diff --git a/front/odiparpack/app/containers/Templates/Dashboard.js b/front/odiparpack/app/containers/Templates/Dashboard.js
index 5f24777..f82d16d 100644
--- a/front/odiparpack/app/containers/Templates/Dashboard.js
+++ b/front/odiparpack/app/containers/Templates/Dashboard.js
@@ -66,7 +66,7 @@ function Dashboard(props) {
       <main className={classNames(classes.content, !sidebarOpen && classes.contentPadding)} id="mainContent">
         <div className={classes.bgbar} />
         <section className={classes.mainWrap}>
-          <BreadCrumb separator=" › " theme="light" location={history.location} />
+          <BreadCrumb separator=" › " theme="dark" location={history.location} />
           <Fade
             in={pageLoaded}
             mountOnEnter
diff --git a/front/odiparpack/app/containers/Templates/appStyles-jss.js b/front/odiparpack/app/containers/Templates/appStyles-jss.js
index f9175eb..741bccf 100644
--- a/front/odiparpack/app/containers/Templates/appStyles-jss.js
+++ b/front/odiparpack/app/containers/Templates/appStyles-jss.js
@@ -52,6 +52,8 @@ const styles = theme => ({
   },
   mainWrap: {
     position: 'relative',
+    backgroundColor: '#F1EEEE',
+    padding: 20,
     marginTop: theme.spacing(6),
     marginLeft: theme.spacing(1.5),
     height: '100%',
diff --git a/front/odiparpack/app/containers/pageListAsync.js b/front/odiparpack/app/containers/pageListAsync.js
index feff750..14381b1 100644
--- a/front/odiparpack/app/containers/pageListAsync.js
+++ b/front/odiparpack/app/containers/pageListAsync.js
@@ -1,6 +1,20 @@
 import Loadable from 'react-loadable';
 import Loading from 'ba-components/Loading';
 
+// 2.Pedidos
+export const Pedidos = Loadable({
+  loader: () => import('./Odipar/Pedidos/Pedidos'),
+  loading: Loading,
+});
+
+// 4. Almacenes
+export const Almacenes = Loadable({
+  loader: () => import('./Odipar/Almacen/Almacenes'),
+  loading: Loading,
+});
+
+
+
 // Dashboard
 export const DashboardV1 = Loadable({
   loader: () => import('./Dashboard/Dashboard'),
diff --git a/front/odiparpack/app/redux/configureStore.js b/front/odiparpack/app/redux/configureStore.js
index 49a6b7b..767af03 100644
--- a/front/odiparpack/app/redux/configureStore.js
+++ b/front/odiparpack/app/redux/configureStore.js
@@ -7,14 +7,16 @@ import { fromJS } from 'immutable';
 import { routerMiddleware } from 'connected-react-router/immutable';
 import createSagaMiddleware from 'redux-saga';
 import createReducer from './reducers';
+import thunk from 'redux-thunk';
+import { composeWithDevTools } from "redux-devtools-extension";
 
 const sagaMiddleware = createSagaMiddleware();
 
-export default function configureStore(initialState = {}, history) {
+export function configureStore(initialState = {}, history) {
   // Create the store with two middlewares
   // 1. sagaMiddleware: Makes redux-sagas work
   // 2. routerMiddleware: Syncs the location/URL path to the state
-  const middlewares = [sagaMiddleware, routerMiddleware(history)];
+  const middlewares = [thunk, routerMiddleware(history)];
 
   const enhancers = [applyMiddleware(...middlewares)];
 
@@ -29,17 +31,18 @@ export default function configureStore(initialState = {}, history) {
           shouldHotReload: false,
         })
       : compose;
+ 
   /* eslint-enable */
   const store = createStore(
     createReducer(),
     fromJS(initialState),
-    composeEnhancers(...enhancers),
+    composeWithDevTools(applyMiddleware(thunk))
   );
 
   // Extensions
-  store.runSaga = sagaMiddleware.run;
+  //store.runSaga = sagaMiddleware.run;
   store.injectedReducers = {}; // Reducer registry
-  store.injectedSagas = {}; // Saga registry
+  //store.injectedSagas = {}; // Saga registry
 
   // Make reducers hot reloadable, see http://mxs.is/googmo
   /* istanbul ignore next */
@@ -51,3 +54,12 @@ export default function configureStore(initialState = {}, history) {
 
   return store;
 }
+
+export function confStore (){
+  const store = createStore(
+    createReducer(),
+    composeWithDevTools(applyMiddleware(thunk))
+  );
+  store.injectedReducers = {};
+  return store;
+}
diff --git a/front/odiparpack/app/redux/modules/almacen.js b/front/odiparpack/app/redux/modules/almacen.js
new file mode 100644
index 0000000..bb9b7d6
--- /dev/null
+++ b/front/odiparpack/app/redux/modules/almacen.js
@@ -0,0 +1,16 @@
+import { LISTA_ALMACEN } from 'ba-actions/actionTypes';
+
+const initState = {
+    almacenes : []
+}
+
+const almacen = (state = initState, action) => {
+    switch (action.type) {
+        case LISTA_ALMACEN:
+            return { ...state, pedidos: action.payload }
+        default :
+            return state
+    }
+}
+
+export default almacen;
\ No newline at end of file
diff --git a/front/odiparpack/app/redux/modules/crudTableForm.js b/front/odiparpack/app/redux/modules/crudTableForm.js
index d5194c1..acf9abd 100644
--- a/front/odiparpack/app/redux/modules/crudTableForm.js
+++ b/front/odiparpack/app/redux/modules/crudTableForm.js
@@ -24,12 +24,26 @@ const initialItem = (keyTemplate, anchor) => {
   for (let i = 0; i < rawKey.length; i += 1) {
     if (rawKey[i] !== 'id') {
       const itemIndex = anchor.findIndex(a => a.name === rawKey[i]);
+      if (itemIndex == -1) continue
       staticKey[rawKey[i]] = anchor[itemIndex].initialValue;
     }
   }
 
   return Map(staticKey);
 };
+
+const initialItemNew = (anchor) => {
+  const [...rawKey] = anchor.map((e) => e.name);
+  const staticKey = {};
+  for (let i = 0; i < rawKey.length; i += 1) {
+    if (rawKey[i] !== 'id') {
+      staticKey[rawKey[i]] = anchor[i].initialValue;
+    }
+  }
+
+  return Map(staticKey);
+};
+
 let editingIndex = 0;
 
 const initialImmutableState = fromJS(initialState);
@@ -45,7 +59,7 @@ export default function reducer(state = initialImmutableState, action = {}) {
     case `${branch}/${ADD_NEW}`:
       return state.withMutations((mutableState) => {
         const raw = state.get('dataTable').last();
-        const initial = initialItem(raw, action.anchor);
+        const initial = initialItemNew(action.anchor);
         mutableState.set('formValues', initial);
         mutableState.set('showFrm', true);
       });
diff --git a/front/odiparpack/app/redux/modules/message.js b/front/odiparpack/app/redux/modules/message.js
new file mode 100644
index 0000000..e02eb08
--- /dev/null
+++ b/front/odiparpack/app/redux/modules/message.js
@@ -0,0 +1,30 @@
+import { CLOSE_MESSAGE,OPEN_MESSAGE } from 'ba-actions/actionTypes';
+
+const initState = {
+    message: '',
+    type: '',
+    openMessage: false
+}
+
+const message = (state = initState, action = {}) => {
+
+    const { type, payload } = action;
+
+    switch (type) {
+
+        case CLOSE_MESSAGE:
+            return {...initState}
+        case OPEN_MESSAGE:
+            return {
+                ...state,
+                ...payload,
+                openMessage: true
+            }
+        default:
+            return state
+
+    }
+
+}
+
+export default message;
\ No newline at end of file
diff --git a/front/odiparpack/app/redux/modules/pedido.js b/front/odiparpack/app/redux/modules/pedido.js
new file mode 100644
index 0000000..9101fe4
--- /dev/null
+++ b/front/odiparpack/app/redux/modules/pedido.js
@@ -0,0 +1,16 @@
+import { LISTA_PEDIDO } from 'ba-actions/actionTypes';
+
+const initState = {
+    pedidos : []
+}
+
+const pedido = (state = initState, action) => {
+    switch (action.type) {
+        case LISTA_PEDIDO:
+            return { ...state, pedidos: action.payload }
+        default :
+            return state
+    }
+}
+
+export default pedido;
\ No newline at end of file
diff --git a/front/odiparpack/app/redux/reducers.js b/front/odiparpack/app/redux/reducers.js
index 902ab2b..0c2e9b8 100644
--- a/front/odiparpack/app/redux/reducers.js
+++ b/front/odiparpack/app/redux/reducers.js
@@ -20,6 +20,11 @@ import email from './modules/email';
 import calendar from './modules/calendar';
 import initval from './modules/initForm';
 
+//Odipar
+import pedido from './modules/pedido';
+import message from './modules/message'
+import almacen from './modules/almacen';
+
 /**
  * Branching reducers to use one reducer for many components
  */
@@ -55,6 +60,11 @@ export default function createReducer(injectedReducers) {
     crudTableDemo: branchReducer(crudTable, 'crudTableDemo'),
     crudTableForm,
     crudTbFrmDemo: branchReducer(crudTableForm, 'crudTbFrmDemo'),
+    crudPedido: branchReducer(crudTableForm, 'crudPedido'),
+    crudAlmacen: branchReducer(crudTableForm, 'crudAlmacen'),
+    pedido,
+    almacen,
+    message,
     language: languageProviderReducer,
     router: connectRouter(history),
     ...injectedReducers,
diff --git a/front/odiparpack/app/styles/layout/_typography.scss b/front/odiparpack/app/styles/layout/_typography.scss
index 49a10c6..247921b 100644
--- a/front/odiparpack/app/styles/layout/_typography.scss
+++ b/front/odiparpack/app/styles/layout/_typography.scss
@@ -13,14 +13,14 @@ h3,
 h4,
 h6 {
   font-family: $heading-font-family;
-  font-size: modular-scale(1);
+  font-size: modular-scale(0.5);
   line-height: $heading-line-height;
   margin: 0 0 $small-spacing;
 }
 
 h5 {
   font-family: $heading-font-family;
-  font-size: modular-scale(1);
+  font-size: 1;
   line-height: $base-line-height;
   font-weight: 600;
   color: #202A75;
diff --git a/front/odiparpack/app/utils/odipar/api.js b/front/odiparpack/app/utils/odipar/api.js
new file mode 100644
index 0000000..50c2beb
--- /dev/null
+++ b/front/odiparpack/app/utils/odipar/api.js
@@ -0,0 +1,101 @@
+import axios from 'axios'
+import {apiUrl} from './constants';
+import qs from "query-string";
+import { openSuccessMessage, openErrorMessage } from 'ba-actions/message';
+
+export function getHeaders() {
+	let session = getSession();
+	return {
+		//Authorization: `Token ${(session && session.accessToken) || null}`
+	}
+}
+
+
+export function getSession() {
+	if (window && window.localStorage) {
+		return window.localStorage.getObject('session');
+	}
+
+	return null;
+}
+
+export function saveSession(value) {
+	if (window && window.localStorage) {
+		return window.localStorage.saveObject('session', value);
+	}
+
+	return null;
+}
+
+export function apiReq(endPoint, data, method, headers, requestOptions = {}) {
+		//console.log("apiReq - ANTES DE PROMESA")
+		headers = {
+			...headers
+		}
+		if (method === 'get' || method === 'delete') {
+			data = {
+				...requestOptions,
+				params: data,
+				paramsSerializer: function (params) {
+					return qs.stringify(params, { arrayFormat: 'repeat' })
+				},
+				headers
+			}
+		}
+
+		return axios[method](endPoint, data, { headers })
+}
+
+export function generateUrl(path) {
+    return apiUrl + path;
+}
+
+export function apiPost(endPoint, data, headers = {}) {
+	return apiReq(generateUrl(endPoint), data, 'post', headers);
+}
+
+export function apiDelete(endPoint, data, headers = {}) {
+	return apiReq(generateUrl(endPoint), data, 'delete', headers);
+}
+
+export function apiGet(endPoint, data, headers = {}, requestOptions) {
+    return apiReq(generateUrl(endPoint), data, 'get', headers, requestOptions);
+}
+
+export function apiPut(endPoint, data, headers = {}) {
+	return apiReq(generateUrl(endPoint), data, 'put', headers);
+}
+
+
+export function addMessageCurry(promise, dispatch, errorMsg = '', successMsg = '', showError = true) {
+	return new Promise(
+		(resolve, reject) => {
+
+			promise
+				.then(response => {
+
+					if (successMsg) {
+						console.log("addMessageCurry -SUCCESS MSG")
+						dispatch(
+							openSuccessMessage(successMsg)
+						)
+					}
+
+					resolve(response)
+				})
+				.catch(
+					err => {
+						if(showError) {
+							 dispatch(
+								openErrorMessage(errorMsg || ((err.response && err.response.data.message) || 'Server encountered an error'))
+							)
+						}
+
+						reject(err)
+					}
+				)
+
+		}
+	)
+
+}
\ No newline at end of file
diff --git a/front/odiparpack/app/utils/odipar/constants.js b/front/odiparpack/app/utils/odipar/constants.js
new file mode 100644
index 0000000..73f3521
--- /dev/null
+++ b/front/odiparpack/app/utils/odipar/constants.js
@@ -0,0 +1,9 @@
+//export const apiUrl = `${config.api}api/v1/`;
+export const apiUrl = 'http://localhost:8083/';
+
+//mensaje 
+export function partial(fn, ...presetArgs) {
+    return function partiallyApplied(...laterArgs) {
+      return fn(...presetArgs, ...laterArgs);
+    };
+}
\ No newline at end of file
diff --git a/front/odiparpack/app/utils/odipar/menu.js b/front/odiparpack/app/utils/odipar/menu.js
new file mode 100644
index 0000000..1b280b8
--- /dev/null
+++ b/front/odiparpack/app/utils/odipar/menu.js
@@ -0,0 +1,51 @@
+module.exports = [
+    {
+      key: 'seguimiento',
+      name: 'Seguimiento',
+      icon: 'near_me',
+      link: '/app/dashboard-v2',
+      child: [ ]
+    },
+    {
+      key: 'pedidos',
+      name: 'Pedidos',
+      icon: 'inventory_2',
+      link: '/app/pedidos',
+      child: [ ]
+    },
+    {
+      key: 'camiones',
+      name: 'Camiones',
+      icon: 'local_shipping',
+      link: '/app/layouts/grid',
+      child: [ ]
+    },
+    {
+      key: 'almacenes',
+      name: 'Almacenes',
+      icon: 'warehouse',
+      link: '/app/almacenes',
+      child: [ ]
+    },
+    {
+      key: 'red_tramos',
+      name: 'Red de Tramos',
+      icon: 'location_on',
+      link: '/app/forms/reduxform',
+      child: [ ]
+    },
+    {
+      key: 'otros',
+      name: 'Otros parámetros',
+      icon: 'settings',
+      link: '/app/ui/icons',
+      child: [ ]
+    },
+    {
+      key: 'simulacion',
+      name: 'Simulación',
+      icon: 'fast_forward',
+      link: '/app/pages/calendar',
+      child: [ ]
+    }
+  ];
\ No newline at end of file