Añadir plantilla

Base para front

16 files changed, 1138 insertions, 0 deletions

diff --git a/front/odiparpack/app/redux/.DS_Store b/front/odiparpack/app/redux/.DS_Store
new file mode 100644
index 0000000..bef93f9
--- /dev/null
+++ b/front/odiparpack/app/redux/.DS_Store
diff --git a/front/odiparpack/app/redux/configureStore.js b/front/odiparpack/app/redux/configureStore.js
new file mode 100644
index 0000000..49a6b7b
--- /dev/null
+++ b/front/odiparpack/app/redux/configureStore.js
@@ -0,0 +1,53 @@
+/**
+ * Create the store with dynamic reducers
+ */
+
+import { createStore, applyMiddleware, compose } from 'redux';
+import { fromJS } from 'immutable';
+import { routerMiddleware } from 'connected-react-router/immutable';
+import createSagaMiddleware from 'redux-saga';
+import createReducer from './reducers';
+
+const sagaMiddleware = createSagaMiddleware();
+
+export default 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 enhancers = [applyMiddleware(...middlewares)];
+
+  // If Redux DevTools Extension is installed use it, otherwise use Redux compose
+  /* eslint-disable no-underscore-dangle, indent */
+  const composeEnhancers = process.env.NODE_ENV !== 'production'
+    && typeof window === 'object'
+    && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
+      ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
+          // TODO Try to remove when `react-router-redux` is out of beta, LOCATION_CHANGE should not be fired more than once after hot reloading
+          // Prevent recomputing reducers for `replaceReducer`
+          shouldHotReload: false,
+        })
+      : compose;
+  /* eslint-enable */
+  const store = createStore(
+    createReducer(),
+    fromJS(initialState),
+    composeEnhancers(...enhancers),
+  );
+
+  // Extensions
+  store.runSaga = sagaMiddleware.run;
+  store.injectedReducers = {}; // Reducer registry
+  store.injectedSagas = {}; // Saga registry
+
+  // Make reducers hot reloadable, see http://mxs.is/googmo
+  /* istanbul ignore next */
+  if (module.hot) {
+    module.hot.accept('./reducers', () => {
+      store.replaceReducer(createReducer(store.injectedReducers));
+    });
+  }
+
+  return store;
+}
diff --git a/front/odiparpack/app/redux/helpers/dateTimeHelper.js b/front/odiparpack/app/redux/helpers/dateTimeHelper.js
new file mode 100644
index 0000000..e91c981
--- /dev/null
+++ b/front/odiparpack/app/redux/helpers/dateTimeHelper.js
@@ -0,0 +1,35 @@
+export function getDate() {
+  let today = new Date();
+  let dd = today.getDate();
+  const monthNames = [
+    'January', 'February', 'March', 'April', 'May', 'June',
+    'July', 'August', 'September', 'October', 'November', 'December'
+  ];
+  const mm = monthNames[today.getMonth()]; // January is 0!
+  const yyyy = today.getFullYear();
+
+  if (dd < 10) {
+    dd = '0' + dd;
+  }
+
+  today = mm + ', ' + dd + ' ' + yyyy;
+
+  return today;
+}
+
+export function getTime() {
+  let now = new Date();
+  let h = now.getHours();
+  let m = now.getMinutes();
+
+  if (h < 10) {
+    h = '0' + h;
+  }
+
+  if (m < 10) {
+    m = '0' + m;
+  }
+
+  now = h + ':' + m;
+  return now;
+}
diff --git a/front/odiparpack/app/redux/modules/calendar.js b/front/odiparpack/app/redux/modules/calendar.js
new file mode 100644
index 0000000..fb1291d
--- /dev/null
+++ b/front/odiparpack/app/redux/modules/calendar.js
@@ -0,0 +1,79 @@
+import { fromJS, List, Map } from 'immutable';
+import notif from 'ba-api/notifMessage';
+import {
+  FETCH_CALENDAR_DATA,
+  ADD_EVENT,
+  DISCARD_EVENT,
+  SUBMIT_EVENT,
+  DELETE_EVENT,
+  CLOSE_NOTIF
+} from 'ba-actions/actionTypes';
+
+const initialState = {
+  events: List([]),
+  openFrm: false,
+  formValues: Map(),
+  notifMsg: '',
+};
+
+const initForm = Map({
+  title: '',
+  start: new Date(),
+  end: new Date(),
+  hexColor: 'F8BBD0',
+});
+
+const initialImmutableState = fromJS(initialState);
+export default function reducer(state = initialImmutableState, action = {}) {
+  switch (action.type) {
+    case FETCH_CALENDAR_DATA:
+      return state.withMutations((mutableState) => {
+        const items = fromJS(action.items);
+        mutableState.set('events', items);
+      });
+    case ADD_EVENT:
+      return state.withMutations((mutableState) => {
+        mutableState
+          .set('openFrm', true)
+          .set('formValues', initForm);
+      });
+    case DISCARD_EVENT:
+      return state.withMutations((mutableState) => {
+        mutableState
+          .set('openFrm', false)
+          .set('formValues', Map())
+          .set('notifMsg', notif.discard);
+      });
+    case SUBMIT_EVENT:
+      return state.withMutations((mutableState) => {
+        const initItem = Map(action.newEvent);
+        const id = (+new Date() + Math.floor(Math.random() * 999999)).toString(36);
+        const newItem = initItem
+          .update('id', (val = id) => val)
+          .set('start', action.newEvent.get('start')._d || action.newEvent.get('start'))
+          .set('end', action.newEvent.get('end')._d || action.newEvent.get('end'));
+        mutableState.update('events', events => events.push(newItem));
+        mutableState
+          .set('formValues', Map())
+          .set('openFrm', false)
+          .set('notifMsg', notif.saved);
+      });
+    case DELETE_EVENT:
+      return state.withMutations((mutableState) => {
+        const eventItem = state.get('events')
+          .find(obj => (
+            obj.get('id') === action.event.id
+          ));
+        const index = state.get('events').indexOf(eventItem);
+        mutableState
+          .update('events', events => events.splice(index, 1))
+          .set('notifMsg', notif.removed);
+      });
+    case CLOSE_NOTIF:
+      return state.withMutations((mutableState) => {
+        mutableState.set('notifMsg', '');
+      });
+    default:
+      return state;
+  }
+}
diff --git a/front/odiparpack/app/redux/modules/chat.js b/front/odiparpack/app/redux/modules/chat.js
new file mode 100644
index 0000000..e30c97a
--- /dev/null
+++ b/front/odiparpack/app/redux/modules/chat.js
@@ -0,0 +1,73 @@
+import { fromJS, List, Map } from 'immutable';
+import {
+  FETCH_CHAT_DATA,
+  SHOW_CHAT,
+  HIDE_CHAT,
+  SEND_CHAT,
+  DELETE_CONVERSATION
+} from 'ba-actions/actionTypes';
+import { getDate, getTime } from '../helpers/dateTimeHelper';
+
+const initialState = {
+  chatList: List([]),
+  activeChat: List([]),
+  chatSelected: 0,
+  showMobileDetail: false
+};
+
+const buildMessage = (message, curData) => {
+  const id = (+new Date() + Math.floor(Math.random() * 999999)).toString(36);
+  const newData = Map({
+    id,
+    from: 'me',
+    date: getDate(),
+    time: getTime(),
+    message,
+  });
+  return curData.push(newData);
+};
+
+const initialImmutableState = fromJS(initialState);
+export default function reducer(state = initialImmutableState, action = {}) {
+  switch (action.type) {
+    case FETCH_CHAT_DATA:
+      return state.withMutations((mutableState) => {
+        const items = fromJS(action.items);
+        mutableState
+          .set('chatList', items)
+          .set('activeChat', items.getIn([state.get('chatSelected'), 'chat']));
+      });
+    case SHOW_CHAT:
+      return state.withMutations((mutableState) => {
+        const chatItem = state.get('chatList')
+          .find(obj => (
+            obj.get('with') === action.person.get('id')
+          ));
+        const index = state.get('chatList').indexOf(chatItem);
+        const chatValue = chatItem.get('chat') !== [] ? chatItem.get('chat') : List([]);
+        mutableState
+          .set('chatSelected', index)
+          .set('activeChat', chatValue)
+          .set('showMobileDetail', true);
+      });
+    case HIDE_CHAT:
+      return state.withMutations((mutableState) => {
+        mutableState.set('showMobileDetail', false);
+      });
+    case SEND_CHAT:
+      return state.withMutations((mutableState) => {
+        const newMessage = buildMessage(action.message, state.getIn(['chatList', state.get('chatSelected'), 'chat']));
+        mutableState
+          .update('chatList', chatList => chatList.setIn([state.get('chatSelected'), 'chat'], newMessage))
+          .set('activeChat', newMessage);
+      });
+    case DELETE_CONVERSATION:
+      return state.withMutations((mutableState) => {
+        mutableState
+          .update('chatList', chatList => chatList.setIn([state.get('chatSelected'), 'chat'], List([])))
+          .set('activeChat', List([]));
+      });
+    default:
+      return state;
+  }
+}
diff --git a/front/odiparpack/app/redux/modules/contact.js b/front/odiparpack/app/redux/modules/contact.js
new file mode 100644
index 0000000..bf34a8b
--- /dev/null
+++ b/front/odiparpack/app/redux/modules/contact.js
@@ -0,0 +1,131 @@
+import { fromJS, List, Map } from 'immutable';
+import notif from 'ba-api/notifMessage';
+import {
+  FETCH_CONTACT_DATA,
+  SEARCH_CONTACT,
+  SHOW_DETAIL_CONTACT,
+  HIDE_DETAIL,
+  EDIT_CONTACT,
+  SUBMIT_CONTACT,
+  DELETE_CONTACT,
+  TOGGLE_FAVORITE,
+  ADD_CONTACT,
+  CLOSE_CONTACT_FORM,
+  CLOSE_NOTIF
+} from 'ba-actions/actionTypes';
+
+const initialState = {
+  contactList: List([]),
+  formValues: Map(),
+  selectedIndex: 0,
+  selectedId: '',
+  keywordValue: '',
+  avatarInit: '',
+  openFrm: false,
+  showMobileDetail: false,
+  notifMsg: '',
+};
+let editingIndex = 0;
+
+const initialImmutableState = fromJS(initialState);
+
+export default function reducer(state = initialImmutableState, action = {}) {
+  switch (action.type) {
+    case FETCH_CONTACT_DATA:
+      return state.withMutations((mutableState) => {
+        const items = fromJS(action.items);
+        mutableState.set('contactList', items);
+      });
+    case SEARCH_CONTACT:
+      return state.withMutations((mutableState) => {
+        action.keyword.persist();
+        const keyword = action.keyword.target.value.toLowerCase();
+        mutableState.set('keywordValue', keyword);
+      });
+    case ADD_CONTACT:
+      return state.withMutations((mutableState) => {
+        mutableState
+          .set('openFrm', true)
+          .set('formValues', Map())
+          .set('avatarInit', '');
+      });
+    case CLOSE_CONTACT_FORM:
+      return state.withMutations((mutableState) => {
+        mutableState
+          .set('openFrm', false)
+          .set('formValues', Map())
+          .set('avatarInit', '')
+          .set('notifMsg', notif.discard);
+      });
+    case EDIT_CONTACT:
+      return state.withMutations((mutableState) => {
+        editingIndex = state.get('contactList').indexOf(action.item);
+        mutableState
+          .set('openFrm', true)
+          .set('selectedId', action.item.get('id'))
+          .set('formValues', action.item)
+          .set('avatarInit', action.item.get('avatar'));
+      });
+    case SUBMIT_CONTACT:
+      return state.withMutations((mutableState) => {
+        const initItem = Map(action.newData);
+        if (state.get('selectedId') === action.newData.get('id')) {
+          // Update data
+          const avatar = action.avatar !== '' ? action.avatar : state.get('avatarInit');
+          const newItem = initItem.update((initUpdated) => (initUpdated.set('avatar', avatar)));
+          mutableState
+            .update('contactList', contactList => contactList.setIn(
+              [editingIndex], newItem
+            ))
+            .set('notifMsg', notif.updated);
+        } else {
+          // Insert data
+          const avatar = action.avatar !== '' ? action.avatar : '/images/pp_boy.svg';
+          const id = (+new Date() + Math.floor(Math.random() * 999999)).toString(36);
+          const newItem = initItem
+            .update('id', (val = id) => val)
+            .update('avatar', (val = avatar) => val)
+            .update('favorited', (val = false) => val);
+          mutableState
+            .update('contactList', contactList => contactList.unshift(newItem))
+            .set('selectedIndex', 0)
+            .set('notifMsg', notif.saved);
+        }
+        mutableState
+          .set('formValues', null)
+          .set('avatarInit', '')
+          .set('openFrm', false);
+      });
+    case SHOW_DETAIL_CONTACT:
+      return state.withMutations((mutableState) => {
+        const index = state.get('contactList').indexOf(action.item);
+        mutableState
+          .set('selectedIndex', index)
+          .set('showMobileDetail', true);
+      });
+    case HIDE_DETAIL:
+      return state.withMutations((mutableState) => {
+        mutableState.set('showMobileDetail', false);
+      });
+    case DELETE_CONTACT:
+      return state.withMutations((mutableState) => {
+        const index = state.get('contactList').indexOf(action.item);
+        mutableState
+          .update('contactList', contactList => contactList.splice(index, 1))
+          .set('notifMsg', notif.removed);
+      });
+    case TOGGLE_FAVORITE:
+      return state.withMutations((mutableState) => {
+        const index = state.get('contactList').indexOf(action.item);
+        mutableState.update('contactList', contactList => contactList
+          .setIn([index, 'favorited'], !state.getIn(['contactList', index, 'favorited']))
+        );
+      });
+    case CLOSE_NOTIF:
+      return state.withMutations((mutableState) => {
+        mutableState.set('notifMsg', '');
+      });
+    default:
+      return state;
+  }
+}
diff --git a/front/odiparpack/app/redux/modules/crudTable.js b/front/odiparpack/app/redux/modules/crudTable.js
new file mode 100644
index 0000000..2bdb1e8
--- /dev/null
+++ b/front/odiparpack/app/redux/modules/crudTable.js
@@ -0,0 +1,94 @@
+import { fromJS, List, Map } from 'immutable';
+import notif from 'ba-api/notifMessage';
+import {
+  FETCH_DATA,
+  ADD_EMPTY_ROW,
+  UPDATE_ROW,
+  REMOVE_ROW,
+  EDIT_ROW,
+  SAVE_ROW,
+  CLOSE_NOTIF
+} from 'ba-actions/actionTypes';
+
+const initialState = {
+  dataTable: List([]),
+  notifMsg: '',
+};
+
+const initialItem = (keyTemplate, anchor) => {
+  const [...rawKey] = keyTemplate.keys();
+  const staticKey = {
+    id: (+new Date() + Math.floor(Math.random() * 999999)).toString(36),
+  };
+  for (let i = 0; i < rawKey.length; i += 1) {
+    if (rawKey[i] !== 'id' && rawKey[i] !== 'edited') {
+      staticKey[rawKey[i]] = anchor[i].initialValue;
+    }
+  }
+  // Push another static key
+  staticKey.edited = true;
+
+  return Map(staticKey);
+};
+
+const initialImmutableState = fromJS(initialState);
+
+export default function reducer(state = initialImmutableState, action = {}) {
+  const { branch } = action;
+  switch (action.type) {
+    case `${branch}/${FETCH_DATA}`:
+      return state.withMutations((mutableState) => {
+        const items = fromJS(action.items);
+        mutableState.set('dataTable', items);
+      });
+    case `${branch}/${ADD_EMPTY_ROW}`:
+      return state.withMutations((mutableState) => {
+        const raw = state.get('dataTable').last();
+        const initial = initialItem(raw, action.anchor);
+        mutableState.update('dataTable', dataTable => dataTable.unshift(initial));
+      });
+    case `${branch}/${REMOVE_ROW}`:
+      return state.withMutations((mutableState) => {
+        const index = state.get('dataTable').indexOf(action.item);
+        mutableState
+          .update('dataTable', dataTable => dataTable.splice(index, 1))
+          .set('notifMsg', notif.removed);
+      });
+    case `${branch}/${UPDATE_ROW}`:
+      return state.withMutations((mutableState) => {
+        const index = state.get('dataTable').indexOf(action.item);
+        const cellTarget = action.event.target.name;
+        const newVal = type => {
+          if (type === 'checkbox') {
+            return action.event.target.checked;
+          }
+          return action.event.target.value;
+        };
+        mutableState.update('dataTable', dataTable => dataTable
+          .setIn([index, cellTarget], newVal(action.event.target.type))
+        );
+      });
+    case `${branch}/${EDIT_ROW}`:
+      return state.withMutations((mutableState) => {
+        const index = state.get('dataTable').indexOf(action.item);
+        mutableState.update('dataTable', dataTable => dataTable
+          .setIn([index, 'edited'], true)
+        );
+      });
+    case `${branch}/${SAVE_ROW}`:
+      return state.withMutations((mutableState) => {
+        const index = state.get('dataTable').indexOf(action.item);
+        mutableState
+          .update('dataTable', dataTable => dataTable
+            .setIn([index, 'edited'], false)
+          )
+          .set('notifMsg', notif.saved);
+      });
+    case `${branch}/${CLOSE_NOTIF}`:
+      return state.withMutations((mutableState) => {
+        mutableState.set('notifMsg', '');
+      });
+    default:
+      return state;
+  }
+}
diff --git a/front/odiparpack/app/redux/modules/crudTableForm.js b/front/odiparpack/app/redux/modules/crudTableForm.js
new file mode 100644
index 0000000..d5194c1
--- /dev/null
+++ b/front/odiparpack/app/redux/modules/crudTableForm.js
@@ -0,0 +1,99 @@
+import { fromJS, List, Map } from 'immutable';
+import notif from 'ba-api/notifMessage';
+import {
+  FETCH_DATA_FORM,
+  ADD_NEW,
+  CLOSE_FORM,
+  SUBMIT_DATA,
+  REMOVE_ROW_FORM,
+  EDIT_ROW_FORM,
+  CLOSE_NOTIF
+} from 'ba-actions/actionTypes';
+
+const initialState = {
+  dataTable: List([]),
+  formValues: Map(),
+  editingId: '',
+  showFrm: false,
+  notifMsg: '',
+};
+
+const initialItem = (keyTemplate, anchor) => {
+  const [...rawKey] = keyTemplate.keys();
+  const staticKey = {};
+  for (let i = 0; i < rawKey.length; i += 1) {
+    if (rawKey[i] !== 'id') {
+      const itemIndex = anchor.findIndex(a => a.name === rawKey[i]);
+      staticKey[rawKey[i]] = anchor[itemIndex].initialValue;
+    }
+  }
+
+  return Map(staticKey);
+};
+let editingIndex = 0;
+
+const initialImmutableState = fromJS(initialState);
+
+export default function reducer(state = initialImmutableState, action = {}) {
+  const { branch } = action;
+  switch (action.type) {
+    case `${branch}/${FETCH_DATA_FORM}`:
+      return state.withMutations((mutableState) => {
+        const items = fromJS(action.items);
+        mutableState.set('dataTable', items);
+      });
+    case `${branch}/${ADD_NEW}`:
+      return state.withMutations((mutableState) => {
+        const raw = state.get('dataTable').last();
+        const initial = initialItem(raw, action.anchor);
+        mutableState.set('formValues', initial);
+        mutableState.set('showFrm', true);
+      });
+    case `${branch}/${SUBMIT_DATA}`:
+      return state.withMutations((mutableState) => {
+        if (state.get('editingId') === action.newData.get('id')) {
+          // Update data
+          mutableState
+            .update('dataTable', dataTable => dataTable.setIn([editingIndex], action.newData))
+            .set('notifMsg', notif.updated);
+        } else {
+          // Insert data
+          const id = (+new Date() + Math.floor(Math.random() * 999999)).toString(36);
+          const initItem = Map(action.newData);
+          const newItem = initItem.update('id', (val = id) => val);
+          mutableState
+            .update('dataTable', dataTable => dataTable.unshift(newItem))
+            .set('notifMsg', notif.saved);
+        }
+        mutableState.set('showFrm', false);
+        mutableState.set('formValues', Map());
+      });
+    case `${branch}/${CLOSE_FORM}`:
+      return state.withMutations((mutableState) => {
+        mutableState
+          .set('formValues', Map())
+          .set('showFrm', false);
+      });
+    case `${branch}/${REMOVE_ROW_FORM}`:
+      return state.withMutations((mutableState) => {
+        const index = state.get('dataTable').indexOf(action.item);
+        mutableState
+          .update('dataTable', dataTable => dataTable.splice(index, 1))
+          .set('notifMsg', notif.removed);
+      });
+    case `${branch}/${EDIT_ROW_FORM}`:
+      return state.withMutations((mutableState) => {
+        editingIndex = state.get('dataTable').indexOf(action.item);
+        mutableState
+          .set('formValues', action.item)
+          .set('editingId', action.item.get('id'))
+          .set('showFrm', true);
+      });
+    case `${branch}/${CLOSE_NOTIF}`:
+      return state.withMutations((mutableState) => {
+        mutableState.set('notifMsg', '');
+      });
+    default:
+      return state;
+  }
+}
diff --git a/front/odiparpack/app/redux/modules/ecommerce.js b/front/odiparpack/app/redux/modules/ecommerce.js
new file mode 100644
index 0000000..a294bae
--- /dev/null
+++ b/front/odiparpack/app/redux/modules/ecommerce.js
@@ -0,0 +1,94 @@
+import { fromJS, List } from 'immutable';
+import notif from 'ba-api/notifMessage';
+import {
+  FETCH_PRODUCT_DATA,
+  ADD_TO_CART,
+  DELETE_CART_ITEM,
+  CHECKOUT,
+  SHOW_DETAIL_PRODUCT,
+  SEARCH_PRODUCT,
+  CLOSE_NOTIF
+} from 'ba-actions/actionTypes';
+
+const initialState = {
+  productList: List([]),
+  cart: List([]),
+  totalItems: 0,
+  totalPrice: 0,
+  productIndex: 0,
+  keywordValue: '',
+  notifMsg: '',
+};
+
+let itemId = [];
+
+const initialImmutableState = fromJS(initialState);
+export default function reducer(state = initialImmutableState, action = {}) {
+  switch (action.type) {
+    case FETCH_PRODUCT_DATA:
+      return state.withMutations((mutableState) => {
+        const items = fromJS(action.items);
+        mutableState.set('productList', items);
+      });
+    case SEARCH_PRODUCT:
+      return state.withMutations((mutableState) => {
+        action.keyword.persist();
+        const keyword = action.keyword.target.value.toLowerCase();
+        mutableState.set('keywordValue', keyword);
+      });
+    case ADD_TO_CART:
+      return state.withMutations((mutableState) => {
+        const item = fromJS(action.item);
+        const qty = Number(item.get('quantity'));
+        const price = item.get('price');
+        const index = itemId.indexOf(action.item.id);
+        if (index > -1) {
+          // If item already added to cart
+          mutableState.update('cart', cart => cart.setIn(
+            [index, 'quantity'],
+            state.getIn(['cart', index, 'quantity']) + qty
+          ));
+        } else {
+          // item not exist in cart
+          itemId.push(action.item.id);
+          mutableState.update('cart', cart => cart.push(item));
+        }
+        mutableState
+          .set('totalItems', state.get('totalItems') + qty)
+          .set('totalPrice', state.get('totalPrice') + (price * qty))
+          .set('notifMsg', notif.addCart);
+      });
+    case DELETE_CART_ITEM:
+      return state.withMutations((mutableState) => {
+        const index = state.get('cart').indexOf(action.item);
+        const qty = Number(action.item.get('quantity'));
+        const price = action.item.get('price');
+        itemId = itemId.filter(item => item !== action.item.get('id'));
+        mutableState
+          .update('cart', cart => cart.splice(index, 1))
+          .set('totalItems', state.get('totalItems') - qty)
+          .set('totalPrice', state.get('totalPrice') - (price * qty))
+          .set('notifMsg', notif.removed);
+      });
+    case CHECKOUT:
+      itemId = [];
+      return state.withMutations((mutableState) => {
+        mutableState
+          .set('cart', List([]))
+          .set('totalItems', 0)
+          .set('totalPrice', 0)
+          .set('notifMsg', notif.checkout);
+      });
+    case SHOW_DETAIL_PRODUCT:
+      return state.withMutations((mutableState) => {
+        const index = state.get('productList').indexOf(action.item);
+        mutableState.set('productIndex', index);
+      });
+    case CLOSE_NOTIF:
+      return state.withMutations((mutableState) => {
+        mutableState.set('notifMsg', '');
+      });
+    default:
+      return state;
+  }
+}
diff --git a/front/odiparpack/app/redux/modules/email.js b/front/odiparpack/app/redux/modules/email.js
new file mode 100644
index 0000000..e103316
--- /dev/null
+++ b/front/odiparpack/app/redux/modules/email.js
@@ -0,0 +1,119 @@
+import { fromJS, List, Map } from 'immutable';
+import notif from 'ba-api/notifMessage';
+import dummyData from 'ba-api/dummyContents';
+import {
+  FETCH_EMAIL_DATA,
+  OPEN_MAIL,
+  FILTER_MAIL,
+  COMPOSE_MAIL,
+  SEND_MAIL,
+  DISCARD_MESSAGE,
+  SEARCH_MAIL,
+  DELETE_MAIL,
+  MOVE_TO,
+  TOGGLE_STARED,
+  CLOSE_NOTIF
+} from 'ba-actions/actionTypes';
+import { getDate, getTime } from '../helpers/dateTimeHelper';
+
+const initialState = {
+  inbox: List([]),
+  selectedMail: 0,
+  selectedMailId: '',
+  keywordValue: '',
+  currentPage: 'inbox',
+  openFrm: false,
+  notifMsg: '',
+};
+
+const buildMessage = (to, subject, content, files) => {
+  const id = (+new Date() + Math.floor(Math.random() * 999999)).toString(36);
+  const newData = Map({
+    id,
+    date: getDate(),
+    time: getTime(),
+    avatar: dummyData.user.avatar,
+    name: to,
+    subject,
+    content,
+    attachment: files,
+    category: 'sent',
+    stared: false,
+  });
+  return newData;
+};
+
+const initialImmutableState = fromJS(initialState);
+export default function reducer(state = initialImmutableState, action = {}) {
+  switch (action.type) {
+    case FETCH_EMAIL_DATA:
+      return state.withMutations((mutableState) => {
+        const items = fromJS(action.items);
+        mutableState.set('inbox', items);
+      });
+    case OPEN_MAIL:
+      return state.withMutations((mutableState) => {
+        const index = state.get('inbox').indexOf(action.mail);
+        mutableState.set('selectedMail', index);
+      });
+    case FILTER_MAIL:
+      return state.withMutations((mutableState) => {
+        mutableState.set('currentPage', action.filter);
+      });
+    case COMPOSE_MAIL:
+      return state.withMutations((mutableState) => {
+        mutableState.set('openFrm', true);
+      });
+    case SEND_MAIL:
+      return state.withMutations((mutableState) => {
+        const newMail = buildMessage(action.to, action.subject, action.content, action.attachment);
+        mutableState
+          .update('inbox', inbox => inbox.unshift(newMail))
+          .set('selectedMailId', '')
+          .set('openFrm', false)
+          .set('notifMsg', notif.sent);
+      });
+    case DISCARD_MESSAGE:
+      return state.withMutations((mutableState) => {
+        mutableState
+          .set('openFrm', false)
+          .set('selectedMailId', '')
+          .set('notifMsg', notif.discard);
+      });
+    case SEARCH_MAIL:
+      return state.withMutations((mutableState) => {
+        action.keyword.persist();
+        const keyword = action.keyword.target.value.toLowerCase();
+        mutableState.set('keywordValue', keyword);
+      });
+    case DELETE_MAIL:
+      return state.withMutations((mutableState) => {
+        const index = state.get('inbox').indexOf(action.mail);
+        mutableState
+          .update('inbox', inbox => inbox.splice(index, 1))
+          .set('notifMsg', notif.removed);
+      });
+    case TOGGLE_STARED:
+      return state.withMutations((mutableState) => {
+        const index = state.get('inbox').indexOf(action.mail);
+        mutableState.update('inbox', inbox => inbox
+          .setIn([index, 'stared'], !state.getIn(['inbox', index, 'stared']))
+        );
+      });
+    case MOVE_TO:
+      return state.withMutations((mutableState) => {
+        const index = state.get('inbox').indexOf(action.mail);
+        mutableState
+          .update('inbox', inbox => inbox
+            .setIn([index, 'category'], action.category)
+          )
+          .set('notifMsg', notif.labeled);
+      });
+    case CLOSE_NOTIF:
+      return state.withMutations((mutableState) => {
+        mutableState.set('notifMsg', '');
+      });
+    default:
+      return state;
+  }
+}
diff --git a/front/odiparpack/app/redux/modules/initForm.js b/front/odiparpack/app/redux/modules/initForm.js
new file mode 100644
index 0000000..82bd90b
--- /dev/null
+++ b/front/odiparpack/app/redux/modules/initForm.js
@@ -0,0 +1,22 @@
+import { fromJS, Map } from 'immutable';
+import { INIT, CLEAR } from 'ba-actions/actionTypes';
+
+const initialState = {
+  formValues: Map()
+};
+
+const initialImmutableState = fromJS(initialState);
+export default function reducer(state = initialImmutableState, action = {}) {
+  switch (action.type) {
+    case INIT:
+      return state.withMutations((mutableState) => {
+        mutableState.set('formValues', action.data);
+      });
+    case CLEAR:
+      return state.withMutations((mutableState) => {
+        mutableState.set('formValues', []);
+      });
+    default:
+      return state;
+  }
+}
diff --git a/front/odiparpack/app/redux/modules/login.js b/front/odiparpack/app/redux/modules/login.js
new file mode 100644
index 0000000..add50fb
--- /dev/null
+++ b/front/odiparpack/app/redux/modules/login.js
@@ -0,0 +1,19 @@
+import { Map, fromJS } from 'immutable';
+import { INIT } from 'ba-actions/actionTypes';
+
+const initialState = {
+  usersLogin: Map({
+    email: '[email protected]',
+    password: '12345678',
+    remember: false
+  })
+};
+const initialImmutableState = fromJS(initialState);
+export default function reducer(state = initialImmutableState, action = {}) {
+  switch (action.type) {
+    case INIT:
+      return state;
+    default:
+      return state;
+  }
+}
diff --git a/front/odiparpack/app/redux/modules/socialMedia.js b/front/odiparpack/app/redux/modules/socialMedia.js
new file mode 100644
index 0000000..a775f49
--- /dev/null
+++ b/front/odiparpack/app/redux/modules/socialMedia.js
@@ -0,0 +1,110 @@
+import { fromJS, List, Map } from 'immutable';
+import notif from 'ba-api/notifMessage';
+import dummy from 'ba-api/dummyContents';
+import {
+  FETCH_TIMELINE_DATA,
+  POST,
+  TOGGLE_LIKE,
+  FETCH_COMMENT_DATA,
+  POST_COMMENT,
+  CLOSE_NOTIF
+} from 'ba-actions/actionTypes';
+import { getDate, getTime } from '../helpers/dateTimeHelper';
+
+const initialState = {
+  dataTimeline: List([]),
+  commentIndex: 0,
+  notifMsg: '',
+};
+
+const icon = privacyType => {
+  switch (privacyType) {
+    case 'public':
+      return 'language';
+    case 'friends':
+      return 'people';
+    default:
+      return 'lock';
+  }
+};
+
+const buildTimeline = (text, image, privacy) => {
+  const id = (+new Date() + Math.floor(Math.random() * 999999)).toString(36);
+  const imageSrc = image !== undefined ? URL.createObjectURL(image[0]) : '';
+  return Map({
+    id,
+    name: 'John Doe',
+    date: getDate(),
+    time: getTime(),
+    icon: icon(privacy),
+    avatar: dummy.user.avatar,
+    image: imageSrc,
+    content: text,
+    liked: false,
+    comments: List([])
+  });
+};
+
+const buildComment = (message, curData) => {
+  const id = (+new Date() + Math.floor(Math.random() * 999999)).toString(36);
+  const newData = Map({
+    id,
+    from: 'John Doe',
+    avatar: dummy.user.avatar,
+    date: getDate(),
+    message,
+  });
+  return curData.push(newData);
+};
+
+const initialImmutableState = fromJS(initialState);
+
+export default function reducer(state = initialImmutableState, action = {}) {
+  switch (action.type) {
+    case FETCH_TIMELINE_DATA:
+      return state.withMutations((mutableState) => {
+        const items = fromJS(action.items);
+        mutableState.set('dataTimeline', items);
+      });
+    case POST:
+      return state.withMutations((mutableState) => {
+        mutableState
+          .update(
+            'dataTimeline',
+            dataTimeline => dataTimeline.unshift(
+              buildTimeline(action.text, action.media, action.privacy)
+            )
+          )
+          .set('notifMsg', notif.posted);
+      });
+    case TOGGLE_LIKE:
+      return state.withMutations((mutableState) => {
+        const index = state.get('dataTimeline').indexOf(action.item);
+        mutableState.update('dataTimeline', dataTimeline => dataTimeline
+          .setIn([index, 'liked'], !state.getIn(['dataTimeline', index, 'liked']))
+        );
+      });
+    case FETCH_COMMENT_DATA:
+      return state.withMutations((mutableState) => {
+        const index = state.get('dataTimeline').indexOf(action.item);
+        mutableState.set('commentIndex', index);
+      });
+    case POST_COMMENT:
+      return state.withMutations((mutableState) => {
+        mutableState
+          .update('dataTimeline',
+            dataTimeline => dataTimeline.setIn(
+              [state.get('commentIndex'), 'comments'],
+              buildComment(action.comment, state.getIn(['dataTimeline', state.get('commentIndex'), 'comments']))
+            )
+          )
+          .set('notifMsg', notif.commented);
+      });
+    case CLOSE_NOTIF:
+      return state.withMutations((mutableState) => {
+        mutableState.set('notifMsg', '');
+      });
+    default:
+      return state;
+  }
+}
diff --git a/front/odiparpack/app/redux/modules/treeTable.js b/front/odiparpack/app/redux/modules/treeTable.js
new file mode 100644
index 0000000..96fa08a
--- /dev/null
+++ b/front/odiparpack/app/redux/modules/treeTable.js
@@ -0,0 +1,49 @@
+import { fromJS, List } from 'immutable';
+import { TOGGLE_TREE } from 'ba-actions/actionTypes';
+
+const initialState = {
+  treeOpen: List([]),
+  arrowMore: List([])
+};
+
+const initialImmutableState = fromJS(initialState);
+
+// Collect existing child and parent id's
+function collectId(id, listedId, collapsed, arrowLess) {
+  arrowLess.push(id);
+  for (let i = 0; i < listedId.size; i += 1) {
+    if (listedId.getIn([i]).startsWith(id + '_')) {
+      collapsed.push(listedId.getIn([i]));
+      arrowLess.push(listedId.getIn([i]));
+    }
+  }
+}
+
+export default function reducer(state = initialImmutableState, action = {}) {
+  const { branch } = action;
+  switch (action.type) {
+    case `${branch}/${TOGGLE_TREE}`:
+      return state.withMutations((mutableState) => {
+        const listedId = state.get('treeOpen');
+        const collapsed = [];
+        const arrowLess = [];
+
+        // Collect existing id
+        collectId(action.keyID, listedId, collapsed, arrowLess);
+
+        // Collapse and Expand row
+        if (collapsed.length > 0) { // Collapse tree table
+          mutableState.update('treeOpen', treeOpen => treeOpen.filter(x => collapsed.indexOf(x) < 0));
+          mutableState.update('arrowMore', arrowMore => arrowMore.filter(x => arrowLess.indexOf(x) < 0));
+        } else { // Expand tree table
+          mutableState.update('arrowMore', arrowMore => arrowMore.push(action.keyID));
+          action.child.map(item => {
+            mutableState.update('treeOpen', treeOpen => treeOpen.push(item.id));
+            return true;
+          });
+        }
+      });
+    default:
+      return state;
+  }
+}
diff --git a/front/odiparpack/app/redux/modules/ui.js b/front/odiparpack/app/redux/modules/ui.js
new file mode 100644
index 0000000..a0fa4e6
--- /dev/null
+++ b/front/odiparpack/app/redux/modules/ui.js
@@ -0,0 +1,95 @@
+import { fromJS, List } from 'immutable';
+import MenuContent from 'ba-api/menu';
+import {
+  TOGGLE_SIDEBAR,
+  OPEN_SUBMENU,
+  CHANGE_THEME,
+  LOAD_PAGE
+} from 'ba-actions/actionTypes';
+
+const initialState = {
+  sidebarOpen: true,
+  theme: 'purpleRedTheme',
+  pageLoaded: false,
+  palette: List([
+    { name: 'Purple Red', value: 'purpleRedTheme' },
+    { name: 'Natural Green Orange', value: 'greenTheme' },
+    { name: 'Blue Ocean', value: 'blueTheme' },
+    { name: 'Blue Sky', value: 'skyBlueTheme' },
+    { name: 'Sweet Magenta Cyan', value: 'magentaTheme' },
+    { name: 'Violet Green', value: 'purpleTheme' },
+    { name: 'Vintage Yellow', value: 'yellowCyanTheme' },
+    { name: 'Orange Violet', value: 'orangeTheme' },
+    { name: 'Cyan Green', value: 'cyanTheme' },
+    { name: 'Red Silver', value: 'redTheme' },
+    { name: 'Grey', value: 'greyTheme' },
+    { name: 'Green Nature', value: 'greenNatureTheme' },
+  ]),
+  subMenuOpen: []
+};
+
+const getMenus = menuArray => menuArray.map(item => {
+  if (item.child) {
+    return item.child;
+  }
+  return false;
+});
+
+const setNavCollapse = (arr, curRoute) => {
+  let headMenu = 'not found';
+  for (let i = 0; i < arr.length; i += 1) {
+    for (let j = 0; j < arr[i].length; j += 1) {
+      if (arr[i][j].link === curRoute) {
+        headMenu = MenuContent[i].key;
+      }
+    }
+  }
+  return headMenu;
+};
+
+const initialImmutableState = fromJS(initialState);
+
+export default function reducer(state = initialImmutableState, action = {}) {
+  switch (action.type) {
+    case TOGGLE_SIDEBAR:
+      return state.withMutations((mutableState) => {
+        mutableState.set('sidebarOpen', !state.get('sidebarOpen'));
+      });
+    case OPEN_SUBMENU:
+      return state.withMutations((mutableState) => {
+        // Set initial open parent menu
+        const activeParent = setNavCollapse(
+          getMenus(MenuContent),
+          action.initialLocation
+        );
+
+        // Once page loaded will expand the parent menu
+        if (action.initialLocation) {
+          mutableState.set('subMenuOpen', List([activeParent]));
+          return;
+        }
+
+        // Expand / Collapse parent menu
+        const menuList = state.get('subMenuOpen');
+        if (menuList.indexOf(action.key) > -1) {
+          if (action.keyParent) {
+            mutableState.set('subMenuOpen', List([action.keyParent]));
+          } else {
+            mutableState.set('subMenuOpen', List([]));
+          }
+        } else {
+          mutableState.set('subMenuOpen', List([action.key, action.keyParent]));
+        }
+      });
+    case CHANGE_THEME:
+      return state.withMutations((mutableState) => {
+        mutableState.set('theme', action.theme);
+      });
+    case LOAD_PAGE:
+      return state.withMutations((mutableState) => {
+        mutableState.set('pageLoaded', action.isLoaded);
+      });
+    default:
+      return state;
+  }
+}
diff --git a/front/odiparpack/app/redux/reducers.js b/front/odiparpack/app/redux/reducers.js
new file mode 100644
index 0000000..902ab2b
--- /dev/null
+++ b/front/odiparpack/app/redux/reducers.js
@@ -0,0 +1,66 @@
+/**
+ * Combine all reducers in this file and export the combined reducers.
+ */
+import { reducer as form } from 'redux-form/immutable';
+import { combineReducers } from 'redux-immutable';
+import { connectRouter } from 'connected-react-router/immutable';
+import history from 'utils/history';
+
+import languageProviderReducer from 'containers/LanguageProvider/reducer';
+import login from './modules/login';
+import uiReducer from './modules/ui';
+import treeTable from './modules/treeTable';
+import crudTable from './modules/crudTable';
+import crudTableForm from './modules/crudTableForm';
+import socmed from './modules/socialMedia';
+import ecommerce from './modules/ecommerce';
+import contact from './modules/contact';
+import chat from './modules/chat';
+import email from './modules/email';
+import calendar from './modules/calendar';
+import initval from './modules/initForm';
+
+/**
+ * Branching reducers to use one reducer for many components
+ */
+
+function branchReducer(reducerFunction, reducerName) {
+  return (state, action) => {
+    const { branch } = action;
+    const isInitializationCall = state === undefined;
+    if (branch !== reducerName && !isInitializationCall) {
+      return state;
+    }
+    return reducerFunction(state, action);
+  };
+}
+
+/**
+ * Creates the main reducer with the dynamically injected ones
+ */
+export default function createReducer(injectedReducers) {
+  const rootReducer = combineReducers({
+    form,
+    ui: uiReducer,
+    initval,
+    login,
+    socmed,
+    calendar,
+    ecommerce,
+    contact,
+    chat,
+    email,
+    treeTableArrow: branchReducer(treeTable, 'treeTableArrow'),
+    treeTablePM: branchReducer(treeTable, 'treeTablePM'),
+    crudTableDemo: branchReducer(crudTable, 'crudTableDemo'),
+    crudTableForm,
+    crudTbFrmDemo: branchReducer(crudTableForm, 'crudTbFrmDemo'),
+    language: languageProviderReducer,
+    router: connectRouter(history),
+    ...injectedReducers,
+  });
+
+  // Wrap the root reducer and return a new root reducer with router state
+  const mergeWithRouterState = connectRouter(history);
+  return mergeWithRouterState(rootReducer);
+}